@coinbase/cds-mobile 8.37.1 → 8.38.1

package/esm/controls/__figma__/CheckboxCell.figma.js

@@ -4,7 +4,7 @@ import { figma } from '@figma/code-connect';
 import { CheckboxCell } from '../CheckboxCell';
 import { jsx as _jsx } from "react/jsx-runtime";
 figma.connect(CheckboxCell, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=54927-2772&t=pdfsCDffPYWTRujC-4', {
-  imports: ["import { CheckboxCell } from '@coinbase/cds-web/controls/CheckboxCell'"],
+  imports: ["import { CheckboxCell } from '@coinbase/cds-mobile/controls/CheckboxCell'"],
   props: {
     title: figma.string('title text'),
     description: figma.boolean('description', {
@@ -18,7 +18,7 @@ figma.connect(CheckboxCell, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g
   }
 });
 figma.connect(CheckboxCell, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=54927-2772&t=pdfsCDffPYWTRujC-4', {
-  imports: ["import { CheckboxCell } from '@coinbase/cds-web/controls/CheckboxCell'"],
+  imports: ["import { CheckboxCell } from '@coinbase/cds-mobile/controls/CheckboxCell'"],
   variant: {
     state: 'selected'
   },

package/esm/controls/__figma__/RadioCell.figma.js

@@ -4,7 +4,7 @@ import { figma } from '@figma/code-connect';
 import { RadioCell } from '../RadioCell';
 import { jsx as _jsx } from "react/jsx-runtime";
 figma.connect(RadioCell, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=54927-2624', {
-  imports: ["import { RadioCell } from '@coinbase/cds-web/controls/RadioCell'"],
+  imports: ["import { RadioCell } from '@coinbase/cds-mobile/controls/RadioCell'"],
   props: {
     title: figma.string('title text'),
     description: figma.boolean('description', {
@@ -18,9 +18,9 @@ figma.connect(RadioCell, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E
   }
 });
 figma.connect(RadioCell, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=54927-2624', {
-  imports: ["import { RadioCell } from '@coinbase/cds-web/controls/RadioCell'"],
+  imports: ["import { RadioCell } from '@coinbase/cds-mobile/controls/RadioCell'"],
   variant: {
-    state: 'selected'
+    selected: true
   },
   props: {
     title: figma.string('title text'),
@@ -35,4 +35,44 @@ figma.connect(RadioCell, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E
       checked: true
     }, props));
   }
+});
+figma.connect(RadioCell, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=54927-2624', {
+  imports: ["import { RadioCell } from '@coinbase/cds-mobile/controls/RadioCell'"],
+  variant: {
+    state: 'disabled'
+  },
+  props: {
+    title: figma.string('title text'),
+    description: figma.boolean('description', {
+      true: figma.string('description text'),
+      false: undefined
+    })
+  },
+  example: _ref3 => {
+    let props = _extends({}, (_objectDestructuringEmpty(_ref3), _ref3));
+    return /*#__PURE__*/_jsx(RadioCell, _extends({
+      disabled: true
+    }, props));
+  }
+});
+figma.connect(RadioCell, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=54927-2624', {
+  imports: ["import { RadioCell } from '@coinbase/cds-mobile/controls/RadioCell'"],
+  variant: {
+    state: 'disabled',
+    selected: true
+  },
+  props: {
+    title: figma.string('title text'),
+    description: figma.boolean('description', {
+      true: figma.string('description text'),
+      false: undefined
+    })
+  },
+  example: _ref4 => {
+    let props = _extends({}, (_objectDestructuringEmpty(_ref4), _ref4));
+    return /*#__PURE__*/_jsx(RadioCell, _extends({
+      checked: true,
+      disabled: true
+    }, props));
+  }
 });

package/esm/controls/__figma__/RadioGroup.figma.js

@@ -5,7 +5,7 @@ import { Radio } from '../Radio';
 import { RadioGroup } from '../RadioGroup';
 import { jsx as _jsx } from "react/jsx-runtime";
 figma.connect(RadioGroup, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=355-14414&m=dev', {
-  imports: ["import { ControlGroup } from '@coinbase/cds-web/controls/ControlGroup';", "import { Radio } from '@coinbase/cds-web/controls/Radio';"],
+  imports: ["import { ControlGroup } from '@coinbase/cds-mobile/controls/ControlGroup';", "import { Radio } from '@coinbase/cds-mobile/controls/Radio';"],
   props: {
     options: figma.enum('quantity', {
       '1': [{

package/esm/controls/__stories__/TextInput.stories.js

@@ -249,6 +249,26 @@ const InputScreen = () => {
         label: "Search",
         placeholder: "ex. Bitcoin"
       })
+    }), /*#__PURE__*/_jsxs(Example, {
+      inline: true,
+      title: "TextInput start icon",
+      children: [/*#__PURE__*/_jsx(MockTextInput, {
+        helperText: "Search for assets here",
+        label: "Search",
+        placeholder: "ex. Bitcoin",
+        start: /*#__PURE__*/_jsx(InputIconButton, {
+          transparent: true,
+          name: "search"
+        })
+      }), /*#__PURE__*/_jsx(MockTextInput, {
+        helperText: "Search for assets here",
+        label: "Search",
+        placeholder: "ex. Bitcoin",
+        start: /*#__PURE__*/_jsx(InputIconButton, {
+          transparent: true,
+          name: "search"
+        })
+      })]
     }), /*#__PURE__*/_jsx(Example, {
       inline: true,
       title: "TextInput start/end Node",
@@ -539,11 +559,11 @@ const InputScreen = () => {
         placeholder: "Enter your favorite color",
         variant: "negative"
       })
-    }), /*#__PURE__*/_jsx(Example, {
+    }), /*#__PURE__*/_jsxs(Example, {
       inline: true,
-      title: "TextInput with labelNode",
-      children: /*#__PURE__*/_jsx(MockTextInput, {
-        label: "Display name",
+      title: "TextInput with custom label",
+      children: [/*#__PURE__*/_jsx(MockTextInput, {
+        accessibilityLabel: "Display name",
         labelNode: /*#__PURE__*/_jsxs(HStack, {
           alignItems: "center",
           gap: 1,
@@ -560,7 +580,62 @@ const InputScreen = () => {
           })]
         }),
         placeholder: "Satoshi Nakamoto"
-      })
+      }), /*#__PURE__*/_jsx(MockCompactTextInput, {
+        accessibilityLabel: "Amount",
+        labelNode: /*#__PURE__*/_jsxs(HStack, {
+          alignItems: "center",
+          gap: 0.5,
+          children: [/*#__PURE__*/_jsx(InputLabel, {
+            children: "Amount"
+          }), /*#__PURE__*/_jsx(Text, {
+            color: "fgNegative",
+            font: "label1",
+            children: "*"
+          })]
+        }),
+        placeholder: "0.00",
+        suffix: "USD"
+      }), /*#__PURE__*/_jsx(MockCompactTextInput, {
+        accessibilityLabel: "Search",
+        labelNode: /*#__PURE__*/_jsx(VStack, {
+          justifyContent: "center",
+          children: /*#__PURE__*/_jsx(InputLabel, {
+            children: "Search"
+          })
+        }),
+        placeholder: "Search...",
+        start: /*#__PURE__*/_jsx(InputIconButton, {
+          transparent: true,
+          name: "search"
+        })
+      }), /*#__PURE__*/_jsx(MockTextInput, {
+        accessibilityLabel: "Bio",
+        labelNode: /*#__PURE__*/_jsxs(HStack, {
+          alignItems: "center",
+          gap: 1,
+          children: [/*#__PURE__*/_jsx(InputLabel, {
+            paddingY: 0,
+            children: "Bio"
+          }), /*#__PURE__*/_jsx(Text, {
+            color: "fgMuted",
+            font: "legal",
+            children: "(optional)"
+          })]
+        }),
+        labelVariant: "inside",
+        placeholder: "Tell us about yourself"
+      }), /*#__PURE__*/_jsx(MockTextInput, {
+        accessibilityLabel: "Notes",
+        labelNode: /*#__PURE__*/_jsx(InputLabel, {
+          paddingY: 0,
+          children: "Notes"
+        }),
+        labelVariant: "inside",
+        placeholder: "Add a note",
+        start: /*#__PURE__*/_jsx(InputIcon, {
+          name: "pencil"
+        })
+      })]
     })]
   });
 };

package/esm/dates/__stories__/DateInput.stories.js

@@ -6,9 +6,11 @@ import { Example, ExampleScreen } from '../../examples/ExampleScreen';
 import { Icon } from '../../icons';
 import { HStack } from '../../layout';
 import { Group } from '../../layout/Group';
+import { VStack } from '../../layout/VStack';
 import { Tooltip } from '../../overlays';
 import { ThemeProvider } from '../../system/ThemeProvider';
 import { defaultTheme } from '../../themes/defaultTheme';
+import { Text } from '../../typography/Text';
 import { DateInput } from '../DateInput';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const today = new Date(new Date(2024, 7, 18).setHours(0, 0, 0, 0));
@@ -47,7 +49,7 @@ export const Examples = () => {
         })), /*#__PURE__*/_jsx(DateInput, _extends({}, sharedProps, props, {
           separator: "-"
         })), /*#__PURE__*/_jsx(DateInput, _extends({}, sharedProps, props, {
-          label: "Date of birth",
+          accessibilityLabel: "Date of birth",
           labelNode: /*#__PURE__*/_jsxs(HStack, {
             alignItems: "center",
             gap: 1,
@@ -84,4 +86,69 @@ export const Examples = () => {
     })
   });
 };
+export const CustomLabel = () => {
+  const [date, setDate] = useState(null);
+  const [error, setError] = useState(null);
+  const props = {
+    date,
+    onChangeDate: setDate,
+    error,
+    onErrorDate: setError
+  };
+  return /*#__PURE__*/_jsx(ExampleScreen, {
+    children: /*#__PURE__*/_jsx(Example, {
+      title: "DateInput with custom label",
+      children: /*#__PURE__*/_jsxs(VStack, {
+        gap: 2,
+        children: [/*#__PURE__*/_jsx(DateInput, _extends({}, sharedProps, props, {
+          accessibilityLabel: "Date of birth",
+          labelNode: /*#__PURE__*/_jsxs(HStack, {
+            alignItems: "center",
+            gap: 1,
+            children: [/*#__PURE__*/_jsx(InputLabel, {
+              children: "Date of birth"
+            }), /*#__PURE__*/_jsx(Tooltip, {
+              content: "This will be visible to other users.",
+              children: /*#__PURE__*/_jsx(Icon, {
+                color: "fgMuted",
+                name: "info",
+                size: "xs"
+              })
+            })]
+          })
+        })), /*#__PURE__*/_jsx(DateInput, _extends({
+          compact: true
+        }, sharedProps, props, {
+          accessibilityLabel: "Start date",
+          labelNode: /*#__PURE__*/_jsxs(HStack, {
+            alignItems: "center",
+            gap: 0.5,
+            children: [/*#__PURE__*/_jsx(InputLabel, {
+              children: "Start date"
+            }), /*#__PURE__*/_jsx(Text, {
+              color: "fgNegative",
+              font: "label1",
+              children: "*"
+            })]
+          })
+        })), /*#__PURE__*/_jsx(DateInput, _extends({}, sharedProps, props, {
+          accessibilityLabel: "End date",
+          labelNode: /*#__PURE__*/_jsxs(HStack, {
+            alignItems: "center",
+            gap: 1,
+            children: [/*#__PURE__*/_jsx(InputLabel, {
+              paddingY: 0,
+              children: "End date"
+            }), /*#__PURE__*/_jsx(Text, {
+              color: "fgMuted",
+              font: "legal",
+              children: "(optional)"
+            })]
+          }),
+          labelVariant: "inside"
+        }))]
+      })
+    })
+  });
+};
 export default Examples;

package/esm/dates/__stories__/DatePicker.stories.js

@@ -5,7 +5,9 @@ import { TextInput } from '../../controls/TextInput';
 import { Example, ExampleScreen } from '../../examples/ExampleScreen';
 import { Icon } from '../../icons';
 import { HStack } from '../../layout';
+import { VStack } from '../../layout/VStack';
 import { Tooltip } from '../../overlays/tooltip/Tooltip';
+import { Text } from '../../typography/Text';
 import { DatePicker } from '../DatePicker';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const today = new Date(new Date(2024, 7, 18).setHours(0, 0, 0, 0));
@@ -82,8 +84,8 @@ export const FullExample = () => {
     }), /*#__PURE__*/_jsx(Example, {
       title: "DatePicker with labelNode",
       children: /*#__PURE__*/_jsx(ExampleDatePicker, {
+        accessibilityLabel: "Birthdate",
         calendarIconButtonAccessibilityLabel: "Birthdate calendar",
-        label: "Birthdate",
         labelNode: /*#__PURE__*/_jsxs(HStack, {
           alignItems: "center",
           gap: 1,
@@ -121,4 +123,63 @@ export const FullExample = () => {
     })]
   });
 };
+export const CustomLabel = () => {
+  return /*#__PURE__*/_jsx(ExampleScreen, {
+    children: /*#__PURE__*/_jsx(Example, {
+      title: "DatePicker with custom label",
+      children: /*#__PURE__*/_jsxs(VStack, {
+        gap: 2,
+        children: [/*#__PURE__*/_jsx(ExampleDatePicker, {
+          accessibilityLabel: "Date of birth",
+          calendarIconButtonAccessibilityLabel: "Date of birth calendar",
+          labelNode: /*#__PURE__*/_jsxs(HStack, {
+            alignItems: "center",
+            gap: 1,
+            children: [/*#__PURE__*/_jsx(InputLabel, {
+              children: "Date of birth"
+            }), /*#__PURE__*/_jsx(Tooltip, {
+              content: "This will be visible to other users.",
+              children: /*#__PURE__*/_jsx(Icon, {
+                color: "fgMuted",
+                name: "info",
+                size: "xs"
+              })
+            })]
+          })
+        }), /*#__PURE__*/_jsx(ExampleDatePicker, {
+          compact: true,
+          accessibilityLabel: "Start date",
+          calendarIconButtonAccessibilityLabel: "Start date calendar",
+          labelNode: /*#__PURE__*/_jsxs(HStack, {
+            alignItems: "center",
+            gap: 0.5,
+            children: [/*#__PURE__*/_jsx(InputLabel, {
+              children: "Start date"
+            }), /*#__PURE__*/_jsx(Text, {
+              color: "fgNegative",
+              font: "label1",
+              children: "*"
+            })]
+          })
+        }), /*#__PURE__*/_jsx(ExampleDatePicker, {
+          accessibilityLabel: "End date",
+          calendarIconButtonAccessibilityLabel: "End date calendar",
+          labelNode: /*#__PURE__*/_jsxs(HStack, {
+            alignItems: "center",
+            gap: 1,
+            children: [/*#__PURE__*/_jsx(InputLabel, {
+              paddingY: 0,
+              children: "End date"
+            }), /*#__PURE__*/_jsx(Text, {
+              color: "fgMuted",
+              font: "legal",
+              children: "(optional)"
+            })]
+          }),
+          labelVariant: "inside"
+        })]
+      })
+    })
+  });
+};
 export default FullExample;

package/esm/hooks/useInputBorderStyle.js

@@ -1,18 +1,31 @@
 import { useEffect, useMemo } from 'react';
-import { inputBorderWidth } from '@coinbase/cds-common/tokens/input';
 import { useInputBorderAnimation } from './useInputBorderAnimation';
+import { useTheme } from './useTheme';
 
 /**
+ * Hook for managing input border styles with animation support.
  *
- * @param focused
- * @param initialVariant
- * @param focusedVariant
- * @param bordered
+ * @param focused - Whether the input is currently focused
+ * @param initialVariant - The variant when unfocused
+ * @param focusedVariant - The variant when focused
+ * @param bordered - Whether to show a border when unfocused
+ * @param borderWidth - Width of the border (theme token). @default 100
+ * @param focusedBorderWidth - Additional border width when focused (theme token). @default borderWidth
  */
-export const useInputBorderStyle = function (focused, initialVariant, focusedVariant, bordered) {
+export const useInputBorderStyle = function (focused, initialVariant, focusedVariant, bordered, borderWidth, focusedBorderWidth) {
   if (bordered === void 0) {
     bordered = true;
   }
+  if (borderWidth === void 0) {
+    borderWidth = bordered ? 100 : 0;
+  }
+  if (focusedBorderWidth === void 0) {
+    focusedBorderWidth = borderWidth;
+  }
+  const theme = useTheme();
+  const resolvedBorderWidth = theme.borderWidth[borderWidth];
+  const resolvedFocusedBorderWidth = theme.borderWidth[focusedBorderWidth];
+  const totalFocusBorderWidth = resolvedBorderWidth + resolvedFocusedBorderWidth;
   const {
     animateInputBorderIn,
     animateInputBorderOut,
@@ -25,18 +38,18 @@ export const useInputBorderStyle = function (focused, initialVariant, focusedVar
   const borderUnfocusedStyle = useMemo(() => {
     return {
       borderColor: focused ? focusedBorderRgba : initialVariant === 'secondary' ? 'transparent' : unFocusedBorderRgba,
-      borderWidth: bordered ? inputBorderWidth : 0
+      borderWidth: resolvedBorderWidth
     };
-  }, [focused, focusedBorderRgba, initialVariant, unFocusedBorderRgba, bordered]);
+  }, [focused, focusedBorderRgba, initialVariant, unFocusedBorderRgba, resolvedBorderWidth]);
 
-  /** Border style for when input is focused */
+  /** Border style for when input is focused (overlay) */
   const borderFocusedStyle = useMemo(() => {
     return {
       opacity: focusedBorderOpacity,
       borderColor: focusedBorderRgba,
-      borderWidth: bordered ? inputBorderWidth : 0
+      borderWidth: totalFocusBorderWidth
     };
-  }, [focusedBorderOpacity, focusedBorderRgba, bordered]);
+  }, [focusedBorderOpacity, focusedBorderRgba, totalFocusBorderWidth]);
   useEffect(() => {
     if (focused) {
       animateInputBorderOut.stop();

package/esm/navigation/__figma__/TopNavBar.figma.js

@@ -1,6 +1,6 @@
 import { figma } from '@figma/code-connect';
 import { Divider, HStack, VStack } from '../../layout';
-import { BrowserBar, BrowserBarSearchInput, NavBarIconButton, NavigationSubtitle, NavigationTitle, NavigationTitleSelect } from '../../navigation';
+import { BrowserBar, BrowserBarSearchInput, NavigationSubtitle, NavigationTitle, NavigationTitleSelect } from '../../navigation';
 import { TopNavBar } from '../TopNavBar';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 figma.connect(TopNavBar, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=49598-4137', {
@@ -15,27 +15,19 @@ figma.connect(TopNavBar, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E
       false: undefined
     }),
     startAction: figma.boolean('show left action', {
-      true: /*#__PURE__*/_jsx(NavBarIconButton, {
-        name: "appSwitcher"
-      }),
+      true: figma.instance('left action'),
       false: undefined
     }),
     endAction1: figma.boolean('show right action', {
-      true: /*#__PURE__*/_jsx(NavBarIconButton, {
-        name: "more"
-      }),
+      true: figma.instance('right action'),
       false: undefined
     }),
     endAction2: figma.boolean('show 2nd right action', {
-      true: /*#__PURE__*/_jsx(NavBarIconButton, {
-        name: "gear"
-      }),
+      true: figma.instance('2nd right action'),
       false: undefined
     }),
     endAction3: figma.boolean('show 3rd right action', {
-      true: /*#__PURE__*/_jsx(NavBarIconButton, {
-        name: "share"
-      }),
+      true: figma.instance('3rd right action'),
       false: undefined
     }),
     divider: figma.boolean('show divider', {
@@ -81,27 +73,19 @@ figma.connect(TopNavBar, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E
   props: {
     title: figma.string('↳ title'),
     startAction: figma.boolean('show left action', {
-      true: /*#__PURE__*/_jsx(NavBarIconButton, {
-        name: "appSwitcher"
-      }),
+      true: figma.instance('left action'),
       false: undefined
     }),
     endAction1: figma.boolean('show right action', {
-      true: /*#__PURE__*/_jsx(NavBarIconButton, {
-        name: "more"
-      }),
+      true: figma.instance('right action'),
       false: undefined
     }),
     endAction2: figma.boolean('show 2nd right action', {
-      true: /*#__PURE__*/_jsx(NavBarIconButton, {
-        name: "gear"
-      }),
+      true: figma.instance('2nd right action'),
       false: undefined
     }),
     endAction3: figma.boolean('show 3rd right action', {
-      true: /*#__PURE__*/_jsx(NavBarIconButton, {
-        name: "share"
-      }),
+      true: figma.instance('3rd right action'),
       false: undefined
     }),
     divider: figma.boolean('show divider', {
@@ -145,27 +129,19 @@ figma.connect(TopNavBar, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E
   imports: ["import { Divider } from '@coinbase/cds-mobile/layout/Divider';", "import { VStack } from '@coinbase/cds-mobile/layout/VStack';", "import { HStack } from '@coinbase/cds-mobile/layout/HStack';", "import { BrowserBar } from '@coinbase/cds-mobile/navigation/BrowserBar';", "import { BrowserBarSearchInput } from '@coinbase/cds-mobile/navigation/BrowserBarSearchInput';"],
   props: {
     startAction: figma.boolean('show left action', {
-      true: /*#__PURE__*/_jsx(NavBarIconButton, {
-        name: "appSwitcher"
-      }),
+      true: figma.instance('left action'),
       false: undefined
     }),
     endAction1: figma.boolean('show right action', {
-      true: /*#__PURE__*/_jsx(NavBarIconButton, {
-        name: "more"
-      }),
+      true: figma.instance('right action'),
       false: undefined
     }),
     endAction2: figma.boolean('show 2nd right action', {
-      true: /*#__PURE__*/_jsx(NavBarIconButton, {
-        name: "gear"
-      }),
+      true: figma.instance('2nd right action'),
       false: undefined
     }),
     endAction3: figma.boolean('show 3rd right action', {
-      true: /*#__PURE__*/_jsx(NavBarIconButton, {
-        name: "share"
-      }),
+      true: figma.instance('3rd right action'),
       false: undefined
     }),
     divider: figma.boolean('show divider', {
@@ -204,27 +180,19 @@ figma.connect(TopNavBar, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E
   imports: ["import { TopNavBar } from '@coinbase/cds-mobile/navigation/TopNavBar';", "import { Divider } from '@coinbase/cds-mobile/layout/Divider';", "import { VStack } from '@coinbase/cds-mobile/layout/VStack';", "import { HStack } from '@coinbase/cds-mobile/layout/HStack';"],
   props: {
     startAction: figma.boolean('show left action', {
-      true: /*#__PURE__*/_jsx(NavBarIconButton, {
-        name: "appSwitcher"
-      }),
+      true: figma.instance('left action'),
       false: undefined
     }),
     endAction1: figma.boolean('show right action', {
-      true: /*#__PURE__*/_jsx(NavBarIconButton, {
-        name: "more"
-      }),
+      true: figma.instance('right action'),
       false: undefined
     }),
     endAction2: figma.boolean('show 2nd right action', {
-      true: /*#__PURE__*/_jsx(NavBarIconButton, {
-        name: "gear"
-      }),
+      true: figma.instance('2nd right action'),
       false: undefined
     }),
     endAction3: figma.boolean('show 3rd right action', {
-      true: /*#__PURE__*/_jsx(NavBarIconButton, {
-        name: "share"
-      }),
+      true: figma.instance('3rd right action'),
       false: undefined
     }),
     divider: figma.boolean('show divider', {
@@ -254,33 +222,24 @@ figma.connect(TopNavBar, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E
 });
 figma.connect(TopNavBar, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=49598-4137', {
   variant: {
-    type: 'Market Selector'
+    type: 'stepper'
   },
   imports: ["import { TopNavBar } from '@coinbase/cds-mobile/navigation/TopNavBar';", "import { Divider } from '@coinbase/cds-mobile/layout/Divider';", "import { VStack } from '@coinbase/cds-mobile/layout/VStack';", "import { HStack } from '@coinbase/cds-mobile/layout/HStack';"],
   props: {
-    children: figma.children('Market selector'),
     startAction: figma.boolean('show left action', {
-      true: /*#__PURE__*/_jsx(NavBarIconButton, {
-        name: "appSwitcher"
-      }),
+      true: figma.instance('left action'),
       false: undefined
     }),
     endAction1: figma.boolean('show right action', {
-      true: /*#__PURE__*/_jsx(NavBarIconButton, {
-        name: "more"
-      }),
+      true: figma.instance('right action'),
       false: undefined
     }),
     endAction2: figma.boolean('show 2nd right action', {
-      true: /*#__PURE__*/_jsx(NavBarIconButton, {
-        name: "gear"
-      }),
+      true: figma.instance('2nd right action'),
       false: undefined
     }),
     endAction3: figma.boolean('show 3rd right action', {
-      true: /*#__PURE__*/_jsx(NavBarIconButton, {
-        name: "share"
-      }),
+      true: figma.instance('3rd right action'),
       false: undefined
     }),
     divider: figma.boolean('show divider', {
@@ -290,13 +249,61 @@ figma.connect(TopNavBar, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E
   },
   example: function Example(_ref5) {
     let {
-      children,
       startAction,
       endAction1,
       endAction2,
       endAction3,
       divider
     } = _ref5;
+    return /*#__PURE__*/_jsxs(VStack, {
+      children: [/*#__PURE__*/_jsx(TopNavBar, {
+        end: /*#__PURE__*/_jsxs(HStack, {
+          alignItems: "center",
+          gap: 0.25,
+          children: [endAction3, endAction2, endAction1]
+        }),
+        start: startAction
+      }), divider]
+    });
+  }
+});
+figma.connect(TopNavBar, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=49598-4137', {
+  variant: {
+    type: 'Market Selector'
+  },
+  imports: ["import { TopNavBar } from '@coinbase/cds-mobile/navigation/TopNavBar';", "import { Divider } from '@coinbase/cds-mobile/layout/Divider';", "import { VStack } from '@coinbase/cds-mobile/layout/VStack';", "import { HStack } from '@coinbase/cds-mobile/layout/HStack';"],
+  props: {
+    children: figma.children('SelectChip'),
+    startAction: figma.boolean('show left action', {
+      true: figma.instance('left action'),
+      false: undefined
+    }),
+    endAction1: figma.boolean('show right action', {
+      true: figma.instance('right action'),
+      false: undefined
+    }),
+    endAction2: figma.boolean('show 2nd right action', {
+      true: figma.instance('2nd right action'),
+      false: undefined
+    }),
+    endAction3: figma.boolean('show 3rd right action', {
+      true: figma.instance('3rd right action'),
+      false: undefined
+    }),
+    divider: figma.boolean('show divider', {
+      true: /*#__PURE__*/_jsx(Divider, {}),
+      false: undefined
+    })
+  },
+  example: function Example(_ref6) {
+    let {
+      children,
+      startAction,
+      endAction1,
+      endAction2,
+      endAction3,
+      divider
+    } = _ref6;
     return /*#__PURE__*/_jsxs(VStack, {
       children: [/*#__PURE__*/_jsx(TopNavBar, {
         end: /*#__PURE__*/_jsxs(HStack, {