SDS v3

.github/workflows/codeql.yml

@@ -2,11 +2,11 @@ name: "CodeQL"
 
 on:
   push:
-    branches: [ "main" ]
+    branches: ["main"]
   pull_request:
-    branches: [ "main" ]
+    branches: ["main"]
   schedule:
-    - cron: '42 14 * * 4'
+    - cron: "42 14 * * 4"
 
 jobs:
   analyze:
@@ -21,21 +21,21 @@ jobs:
       fail-fast: false
       matrix:
         include:
-        - language: javascript-typescript
-          build-mode: none
-        
+          - language: javascript-typescript
+            build-mode: none
+
     steps:
-    - name: Checkout repository
-      uses: actions/checkout@v4
+      - name: Checkout repository
+        uses: actions/checkout@v4
 
-    # Initializes the CodeQL tools for scanning.
-    - name: Initialize CodeQL
-      uses: github/codeql-action/init@v3
-      with:
-        languages: ${{ matrix.language }}
-        build-mode: ${{ matrix.build-mode }}
+      # Initializes the CodeQL tools for scanning.
+      - name: Initialize CodeQL
+        uses: github/codeql-action/init@v3
+        with:
+          languages: ${{ matrix.language }}
+          build-mode: ${{ matrix.build-mode }}
 
-    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v3
-      with:
-        category: "/language:${{matrix.language}}"
+      - name: Perform CodeQL Analysis
+        uses: github/codeql-action/analyze@v3
+        with:
+          category: "/language:${{matrix.language}}"

.github/workflows/npm-publish.yml

@@ -9,7 +9,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: "18.x"
+          node-version: "20.x"
           registry-url: "https://registry.npmjs.org"
 
       - run: yarn install

.github/workflows/test-build.yml

@@ -12,6 +12,6 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
       - run: yarn install
       - run: yarn build

.husky/post-merge

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 yarn install-if-package-changed

.husky/pre-commit

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 yarn pre-commit

.nvmrc

@@ -1 +1 @@
-v18
+v20

@stellar/design-system-website/docs/components/accents/tooltip.mdx

@@ -11,8 +11,13 @@ description: "Tooltip is used to display info in a bubble."
 
 ```tsx live
 <PreviewBlock componentName="Tooltip">
-  <Tooltip isVisible isContrast triggerEl={<>Tooltip trigger</>}>
-    Lorem ipsum dolor sit
+  <Tooltip
+    isVisible
+    isContrast
+    triggerEl={<>Tooltip trigger</>}
+    title="Lorem ipsum dolor sit"
+  >
+    Lorem, ipsum dolor sit amet consectetur adipis elit.
   </Tooltip>
 </PreviewBlock>
 ```

@stellar/design-system-website/docs/components/buttons/button.mdx

@@ -11,7 +11,7 @@ description: "Used to trigger an action that is not opening a link."
 
 ```tsx live
 <PreviewBlock componentName="Button">
-  <Button variant="primary" size="md">
+  <Button variant="primary" size="sm">
     Button
   </Button>
 </PreviewBlock>

@stellar/design-system-website/docs/components/buttons/copy-text.mdx

@@ -17,4 +17,11 @@ description: "Copy text component with an optional tooltip."
 
 ## Props
 
-<ComponentProps componentName="CopyText" />
+<ComponentProps
+  componentName="CopyText"
+  relatedType={[
+    "CopyTextVariantProps",
+    "CopyTextEllipsisProps",
+    "CopyTextBaseProps",
+  ]}
+/>

@stellar/design-system-website/docs/components/buttons/icon-button.mdx

@@ -11,7 +11,7 @@ description: "Button with icon as a label."
 
 ```tsx live
 <PreviewBlock componentName="IconButton">
-  <IconButton altText="Default" icon={<Icon.Info />} />
+  <IconButton altText="Default" icon={<Icon.InfoCircle />} />
 </PreviewBlock>
 ```
 

@stellar/design-system-website/docs/components/buttons/nav-button.mdx

@@ -12,7 +12,7 @@ description: "Trigger actions like toggle dark mode, close a modal, etc."
 ```tsx live
 <PreviewBlock componentName="NavButton">
   <NavButton
-    icon={<Icon.Menu />}
+    icon={<Icon.Menu01 />}
     id="nav-button"
     onClick={() => {}}
     title="Menu"

@stellar/design-system-website/docs/components/containers/modal.mdx

@@ -12,15 +12,6 @@ description: "A dialog window with an overlay background."
 ```tsx live
 <PreviewBlock componentName="Modal">
   <>
-    <Modal onClose={() => {}} parentId="preview-block">
-      <p>
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur eius
-        beatae sint dolorem, excepturi quos enim, et ullam suscipit voluptates
-        voluptas accusantium repellendus amet explicabo, iure veritatis aperiam
-        alias molestiae.
-      </p>
-    </Modal>
-
     <Modal onClose={() => {}} parentId="preview-block">
       <Modal.Heading>Modal heading</Modal.Heading>
       <Modal.Body>
@@ -49,7 +40,7 @@ description: "A dialog window with an overlay background."
         <Button size="sm" variant="primary">
           Submit
         </Button>
-        <Button size="sm" variant="secondary">
+        <Button size="sm" variant="tertiary">
           Cancel
         </Button>
       </Modal.Footer>

@stellar/design-system-website/docs/components/elements/asset.mdx

@@ -0,0 +1,35 @@
+---
+slug: /asset
+description: "Asset or asset pair displayed in a circle."
+---
+
+# Asset
+
+<ComponentDescription componentName="Asset" />
+
+## Example
+
+```tsx live
+<PreviewBlock componentName="Asset">
+  <Asset
+    variant="single"
+    size="sm"
+    sourceOne={{
+      image: "https://cryptologos.cc/logos/stellar-xlm-logo.svg?v=024",
+      altText: "XLM",
+    }}
+  />
+</PreviewBlock>
+```
+
+## Props
+
+<ComponentProps
+  componentName="Asset"
+  relatedType={[
+    "AssetBaseProps",
+    "SingleAssetProps",
+    "MultiAssetProps",
+    "AssetSource",
+  ]}
+/>

@stellar/design-system-website/docs/components/elements/avatar.mdx

@@ -1,6 +1,6 @@
 ---
 slug: /avatar
-description: "Identicon as an avatar."
+description: "Avatar as an identicon, user initials, or a profile icon."
 ---
 
 # Avatar
@@ -11,10 +11,17 @@ description: "Identicon as an avatar."
 
 ```tsx live
 <PreviewBlock componentName="Avatar">
-  <Avatar publicAddress="GD4XW236EFCESNO4RKGG5PWML2WNQIJS335XECBW4GRARXKE64VIMOLZ" />
+  <Avatar size="sm" />
 </PreviewBlock>
 ```
 
 ## Props
 
-<ComponentProps componentName="Avatar" />
+<ComponentProps
+  componentName="Avatar"
+  relatedType={[
+    "AvatarBaseProps",
+    "AvatarStellarAddressProps",
+    "AvatarUserNameProps",
+  ]}
+/>

@stellar/design-system-website/docs/components/inputs/checkbox.mdx

@@ -11,7 +11,7 @@ description: "Form input for single and multiple selections."
 
 ```tsx live
 <PreviewBlock componentName="Checkbox">
-  <Checkbox fieldSize="md" id="checkbox" />
+  <Checkbox fieldSize="sm" id="checkbox" />
 </PreviewBlock>
 ```
 

@stellar/design-system-website/docs/components/inputs/input.mdx

@@ -11,10 +11,10 @@ description: "Form input for a single line of text."
 
 ```tsx live
 <PreviewBlock componentName="Input">
-  <Input fieldSize="md" id="input" />
+  <Input fieldSize="sm" id="input" />
 </PreviewBlock>
 ```
 
 ## Props
 
-<ComponentProps componentName="Input" />
+<ComponentProps componentName="Input" relatedType={["InputCopyButton"]} />

@stellar/design-system-website/docs/components/inputs/radio-button.mdx

@@ -11,7 +11,7 @@ description: "Form input for a single selection."
 
 ```tsx live
 <PreviewBlock componentName="RadioButton">
-  <RadioButton fieldSize="md" id="radio" label="Label" />
+  <RadioButton fieldSize="sm" id="radio" label="Label" />
 </PreviewBlock>
 ```
 

@stellar/design-system-website/docs/components/inputs/select.mdx

@@ -11,7 +11,7 @@ description: "Form input for selecting a single option from a list."
 
 ```tsx live
 <PreviewBlock componentName="Select">
-  <Select fieldSize="md" id="select">
+  <Select fieldSize="sm" id="select">
     <option>Option 1</option>
     <option>Option 2</option>
   </Select>

@stellar/design-system-website/docs/components/inputs/textarea.mdx

@@ -11,7 +11,7 @@ description: "Form input for multiple lines of text."
 
 ```tsx live
 <PreviewBlock componentName="Textarea">
-  <Textarea fieldSize="md" id="textarea"></Textarea>
+  <Textarea fieldSize="sm" id="textarea"></Textarea>
 </PreviewBlock>
 ```
 

@stellar/design-system-website/docs/components/inputs/toggle.mdx

@@ -11,7 +11,7 @@ description: "Toggle a setting on or off."
 
 ```tsx live
 <PreviewBlock componentName="Toggle">
-  <Toggle id="toggle" />
+  <Toggle id="toggle" fieldSize="sm" />
 </PreviewBlock>
 ```
 

@stellar/design-system-website/docs/components/notifications/alert.mdx

@@ -0,0 +1,25 @@
+---
+slug: /alert
+description: "Display an alert message inline or at the bottom of the page."
+---
+
+# Alert
+
+<ComponentDescription componentName="Alert" />
+
+## Example
+
+```tsx live
+<PreviewBlock componentName="Alert">
+  <Alert variant="primary" placement="inline">
+    Lorem ipsum dolor sit amet consectetur adipisicing elit
+  </Alert>
+</PreviewBlock>
+```
+
+## Props
+
+<ComponentProps
+  componentName="Alert"
+  relatedType={["AlertBaseProps", "AlertActionButton", "AlertActionLink"]}
+/>

@stellar/design-system-website/docs/components/notifications/banner.mdx

@@ -11,7 +11,9 @@ description: "Display message at the top of the page."
 
 ```tsx live
 <PreviewBlock componentName="Banner">
-  <Banner variant="default">Banner message</Banner>
+  <Banner variant="primary">
+    Lorem ipsum dolor sit amet consectetur adipisicing elit
+  </Banner>
 </PreviewBlock>
 ```
 

@stellar/design-system-website/docs/components/profile/profile.mdx

@@ -13,7 +13,7 @@ description: "Avatar with Stellar address."
 <PreviewBlock componentName="Profile">
   <Profile
     publicAddress="GAVL6PM6TDJ7FBRCRL6GJ5WO2TWSH6ZRNU2HOARQ4RYMDUGSW7XWS57G"
-    size="md"
+    size="sm"
   />
 </PreviewBlock>
 ```