@coinbase/cds-mobile 8.60.0 → 8.62.0

package/esm/perf/component-config/ComponentConfigStickerSheet.perf-test.js

@@ -0,0 +1,326 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { Pressable } from 'react-native';
+import { fireEvent, screen } from '@testing-library/react-native';
+import { measurePerformance } from 'reassure';
+import { Button } from '../../buttons/Button';
+import { IconButton } from '../../buttons/IconButton';
+import { ListCell } from '../../cells/ListCell';
+import { Chip } from '../../chips/Chip';
+import { SearchInput } from '../../controls/SearchInput';
+import { TextInput } from '../../controls/TextInput';
+import { DotCount } from '../../dots/DotCount';
+import { Icon } from '../../icons/Icon';
+import { HStack } from '../../layout/HStack';
+import { VStack } from '../../layout/VStack';
+import { Avatar } from '../../media/Avatar';
+import { ComponentConfigProvider } from '../../system/ComponentConfigProvider';
+import { ThemeProvider } from '../../system/ThemeProvider';
+import { Tag } from '../../tag/Tag';
+import { defaultTheme } from '../../themes/defaultTheme';
+import { Text } from '../../typography/Text';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const updateIterations = 50;
+const customPerfTheme = _extends({}, defaultTheme, {
+  id: 'component-config-mobile-perf-theme',
+  lightColor: _extends({}, defaultTheme.lightColor, {
+    bgAlternate: defaultTheme.lightColor.bgSecondary
+  }),
+  darkColor: _extends({}, defaultTheme.darkColor, {
+    bgAlternate: defaultTheme.darkColor.bgSecondary
+  })
+});
+const customComponentConfig = {
+  Button: props => ({
+    borderRadius: 200,
+    height: props.compact ? 24 : 32,
+    font: props.compact ? 'label1' : 'headline'
+  }),
+  IconButton: props => ({
+    borderRadius: 200,
+    height: props.compact ? 24 : 32,
+    width: props.compact ? 24 : 32
+  }),
+  TextInput: props => ({
+    bordered: false,
+    inputBackground: 'bgAlternate',
+    font: props.compact ? 'label2' : 'body',
+    variant: 'foregroundMuted',
+    focusedBorderWidth: 100
+  }),
+  SearchInput: props => ({
+    borderRadius: 200,
+    height: props.compact ? 24 : 32
+  }),
+  Chip: {
+    borderRadius: 200
+  },
+  ListCell: {
+    spacingVariant: 'condensed'
+  }
+};
+const ComplexStickerSheetLike = _ref => {
+  let {
+    tick = 0
+  } = _ref;
+  return /*#__PURE__*/_jsx(VStack, {
+    alignItems: "center",
+    background: "bgAlternate",
+    gap: 2,
+    padding: 2,
+    children: /*#__PURE__*/_jsxs(HStack, {
+      gap: 2,
+      children: [/*#__PURE__*/_jsxs(VStack, {
+        gap: 2,
+        width: 420,
+        children: [/*#__PURE__*/_jsx(HStack, {
+          gap: 1,
+          children: Array.from({
+            length: 12
+          }, (_, i) => /*#__PURE__*/_jsx(Button, {
+            variant: tick % 2 === 0 ? 'primary' : 'secondary',
+            children: "Primary"
+          }, "primary-" + i))
+        }), /*#__PURE__*/_jsx(HStack, {
+          gap: 1,
+          children: Array.from({
+            length: 12
+          }, (_, i) => /*#__PURE__*/_jsx(Button, {
+            compact: true,
+            variant: "secondary",
+            children: "Secondary"
+          }, "secondary-" + i))
+        }), /*#__PURE__*/_jsx(VStack, {
+          gap: 1,
+          children: Array.from({
+            length: 8
+          }, (_, i) => /*#__PURE__*/_jsx(TextInput, {
+            label: "Label " + i,
+            onChangeText: () => {},
+            value: ""
+          }, "input-" + i))
+        }), /*#__PURE__*/_jsx(VStack, {
+          gap: 1,
+          children: Array.from({
+            length: 8
+          }, (_, i) => /*#__PURE__*/_jsx(SearchInput, {
+            label: "Search " + i,
+            onChangeText: () => {},
+            value: ""
+          }, "search-" + i))
+        }), /*#__PURE__*/_jsx(VStack, {
+          gap: 1,
+          children: Array.from({
+            length: 8
+          }, (_, i) => /*#__PURE__*/_jsx(ListCell, {
+            accessibilityLabel: "List row " + i,
+            description: "$100",
+            media: /*#__PURE__*/_jsx(Avatar, {
+              name: "A",
+              size: "m"
+            }),
+            onPress: () => {},
+            subtitle: "Subtitle",
+            title: "Row " + i
+          }, "cell-" + i))
+        })]
+      }), /*#__PURE__*/_jsxs(VStack, {
+        gap: 2,
+        width: 600,
+        children: [/*#__PURE__*/_jsx(HStack, {
+          gap: 1,
+          children: Array.from({
+            length: 16
+          }, (_, i) => /*#__PURE__*/_jsx(IconButton, {
+            accessibilityLabel: "Icon button " + i,
+            name: "add",
+            variant: "tertiary"
+          }, "icon-" + i))
+        }), /*#__PURE__*/_jsx(HStack, {
+          flexWrap: "wrap",
+          gap: 1,
+          children: Array.from({
+            length: 24
+          }, (_, i) => /*#__PURE__*/_jsxs(Chip, {
+            accessibilityLabel: "Chip " + i,
+            onPress: () => {},
+            children: ["Chip ", i]
+          }, "chip-" + i))
+        }), /*#__PURE__*/_jsx(HStack, {
+          gap: 1,
+          children: Array.from({
+            length: 20
+          }, (_, i) => /*#__PURE__*/_jsxs(Tag, {
+            intent: i % 2 === 0 ? 'informational' : 'promotional',
+            children: ["Tag ", i]
+          }, "tag-" + i))
+        }), /*#__PURE__*/_jsx(HStack, {
+          gap: 1,
+          children: Array.from({
+            length: 10
+          }, (_, i) => /*#__PURE__*/_jsx(DotCount, {
+            count: i + 1,
+            children: /*#__PURE__*/_jsx(Icon, {
+              name: "bell",
+              size: "l"
+            })
+          }, "dot-" + i))
+        }), /*#__PURE__*/_jsxs(Text, {
+          font: "title3",
+          children: ["Complex story-like surface tick=", tick]
+        })]
+      })]
+    })
+  });
+};
+const BaselineHarness = () => /*#__PURE__*/_jsx(ThemeProvider, {
+  activeColorScheme: "light",
+  theme: defaultTheme,
+  children: /*#__PURE__*/_jsx(ComplexStickerSheetLike, {})
+});
+const CustomHarness = () => /*#__PURE__*/_jsx(ThemeProvider, {
+  activeColorScheme: "dark",
+  theme: customPerfTheme,
+  children: /*#__PURE__*/_jsx(ComponentConfigProvider, {
+    value: customComponentConfig,
+    children: /*#__PURE__*/_jsx(ComplexStickerSheetLike, {})
+  })
+});
+const UnrelatedConfigUpdateHarness = () => {
+  const [tick, setTick] = React.useState(0);
+  const value = React.useMemo(() => _extends({}, customComponentConfig, {
+    Tour: tick % 2 === 0 ? {} : {}
+  }), [tick]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Pressable, {
+      onPress: () => setTick(v => v + 1),
+      testID: "update-unrelated-config"
+    }), /*#__PURE__*/_jsx(ThemeProvider, {
+      activeColorScheme: "dark",
+      theme: customPerfTheme,
+      children: /*#__PURE__*/_jsx(ComponentConfigProvider, {
+        value: value,
+        children: /*#__PURE__*/_jsx(ComplexStickerSheetLike, {})
+      })
+    })]
+  });
+};
+const TargetedConfigUpdateHarness = () => {
+  const [tick, setTick] = React.useState(0);
+  const value = React.useMemo(() => _extends({}, customComponentConfig, {
+    Button: props => ({
+      borderRadius: tick % 2 === 0 ? 200 : 300,
+      height: props.compact ? 24 : 32,
+      font: props.compact ? 'label1' : 'headline'
+    })
+  }), [tick]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Pressable, {
+      onPress: () => setTick(v => v + 1),
+      testID: "update-targeted-config"
+    }), /*#__PURE__*/_jsx(ThemeProvider, {
+      activeColorScheme: "dark",
+      theme: customPerfTheme,
+      children: /*#__PURE__*/_jsx(ComponentConfigProvider, {
+        value: value,
+        children: /*#__PURE__*/_jsx(ComplexStickerSheetLike, {})
+      })
+    })]
+  });
+};
+const RandomStateUpdateHarness = () => {
+  const [tick, setTick] = React.useState(0);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Pressable, {
+      onPress: () => setTick(v => v + 1),
+      testID: "update-random-state"
+    }), /*#__PURE__*/_jsx(ThemeProvider, {
+      activeColorScheme: "dark",
+      theme: customPerfTheme,
+      children: /*#__PURE__*/_jsx(ComponentConfigProvider, {
+        value: customComponentConfig,
+        children: /*#__PURE__*/_jsx(ComplexStickerSheetLike, {
+          tick: tick
+        })
+      })
+    })]
+  });
+};
+const CustomThemeNoProviderHarness = () => /*#__PURE__*/_jsx(ThemeProvider, {
+  activeColorScheme: "dark",
+  theme: customPerfTheme,
+  children: /*#__PURE__*/_jsx(ComplexStickerSheetLike, {})
+});
+const CustomThemeNoProviderStateUpdateHarness = () => {
+  const [tick, setTick] = React.useState(0);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Pressable, {
+      onPress: () => setTick(v => v + 1),
+      testID: "update-page-state-no-provider"
+    }), /*#__PURE__*/_jsx(ThemeProvider, {
+      activeColorScheme: "dark",
+      theme: customPerfTheme,
+      children: /*#__PURE__*/_jsx(ComplexStickerSheetLike, {
+        tick: tick
+      })
+    })]
+  });
+};
+describe('ComponentConfig StickerSheet performance tests (mobile)', () => {
+  jest.setTimeout(90000);
+  beforeAll(() => {
+    jest.spyOn(console, 'error').mockImplementation(() => {});
+  });
+  afterAll(() => {
+    jest.restoreAllMocks();
+  });
+  it('renders StickerSheet baseline (no provider)', async () => {
+    await measurePerformance(/*#__PURE__*/_jsx(BaselineHarness, {}));
+  });
+  it('renders StickerSheet custom story (theme + component config)', async () => {
+    await measurePerformance(/*#__PURE__*/_jsx(CustomHarness, {}));
+  });
+  it('updates unrelated config key 50 times', async () => {
+    const scenario = async () => {
+      for (let i = 0; i < updateIterations; i += 1) {
+        fireEvent.press(screen.getByTestId('update-unrelated-config'));
+      }
+    };
+    await measurePerformance(/*#__PURE__*/_jsx(UnrelatedConfigUpdateHarness, {}), {
+      scenario
+    });
+  });
+  it('updates targeted config key 50 times', async () => {
+    const scenario = async () => {
+      for (let i = 0; i < updateIterations; i += 1) {
+        fireEvent.press(screen.getByTestId('update-targeted-config'));
+      }
+    };
+    await measurePerformance(/*#__PURE__*/_jsx(TargetedConfigUpdateHarness, {}), {
+      scenario
+    });
+  });
+  it('updates random local state 50 times (provider enabled)', async () => {
+    const scenario = async () => {
+      for (let i = 0; i < updateIterations; i += 1) {
+        fireEvent.press(screen.getByTestId('update-random-state'));
+      }
+    };
+    await measurePerformance(/*#__PURE__*/_jsx(RandomStateUpdateHarness, {}), {
+      scenario
+    });
+  });
+  it('renders custom theme with no provider', async () => {
+    await measurePerformance(/*#__PURE__*/_jsx(CustomThemeNoProviderHarness, {}));
+  });
+  it('updates page state 50 times with custom theme and no provider', async () => {
+    const scenario = async () => {
+      for (let i = 0; i < updateIterations; i += 1) {
+        fireEvent.press(screen.getByTestId('update-page-state-no-provider'));
+      }
+    };
+    await measurePerformance(/*#__PURE__*/_jsx(CustomThemeNoProviderStateUpdateHarness, {}), {
+      scenario
+    });
+  });
+});

package/esm/perf/component-config/README.md

@@ -0,0 +1,8 @@
+# Component Config Perf Tests
+
+This folder contains manual performance benchmarks for component config behavior.
+
+## Run
+
+- Web + mobile together:
+  - `yarn perf:component-config`

package/esm/stepper/Stepper.js

@@ -7,6 +7,7 @@ import { useHasMounted } from '@coinbase/cds-common/hooks/useHasMounted';
 import { usePreviousValue } from '@coinbase/cds-common/hooks/usePreviousValue';
 import { containsStep, flattenSteps, isStepVisited } from '@coinbase/cds-common/stepper/utils';
 import { useSprings } from '@react-spring/native';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Box } from '../layout/Box';
 import { VStack } from '../layout/VStack';
 import { DefaultStepperHeaderHorizontal } from './DefaultStepperHeaderHorizontal';
@@ -34,9 +35,10 @@ export const defaultProgressSpringConfig = {
   tension: 100,
   clamp: true
 };
-const StepperBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+const StepperBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
   var _usePreviousValue, _usePreviousValue2;
-  let {
+  const mergedProps = useComponentConfig('Stepper', _props);
+  const {
       direction,
       activeStepId,
       steps,
@@ -56,8 +58,8 @@ const StepperBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
       progressSpringConfig = defaultProgressSpringConfig,
       animate = true,
       disableAnimateOnMount
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
   const hasMounted = useHasMounted();
   const flatStepIds = useMemo(() => flattenSteps(steps).map(step => step.id), [steps]);
 
@@ -72,11 +74,11 @@ const StepperBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
     rootStyle,
     stepStyles
   } = useMemo(() => {
-    const _ref2 = styles != null ? styles : {},
+    const _ref = styles != null ? styles : {},
       {
         root
-      } = _ref2,
-      stepStyles = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+      } = _ref,
+      stepStyles = _objectWithoutPropertiesLoose(_ref, _excluded2);
     const rootStyle = [style, root];
     return {
       rootStyle,
@@ -84,12 +86,12 @@ const StepperBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
     };
   }, [styles, style]);
   const accessibilityLabel = useMemo(() => {
-    var _ref3, _activeStep$accessibi;
+    var _ref2, _activeStep$accessibi;
     if (accessibilityLabelProp) return accessibilityLabelProp;
     if (!activeStep) return 'No active step';
     const pagination = activeFlatStepIndex + 1 + " of " + flatStepIds.length;
     const stepLabel = typeof activeStep.label === 'string' ? activeStep.label : null;
-    const baseLabel = (_ref3 = (_activeStep$accessibi = activeStep.accessibilityLabel) != null ? _activeStep$accessibi : stepLabel) != null ? _ref3 : "Step " + (activeFlatStepIndex + 1);
+    const baseLabel = (_ref2 = (_activeStep$accessibi = activeStep.accessibilityLabel) != null ? _activeStep$accessibi : stepLabel) != null ? _ref2 : "Step " + (activeFlatStepIndex + 1);
     return baseLabel + " " + pagination;
   }, [activeStep, activeFlatStepIndex, flatStepIds.length, accessibilityLabelProp]);
 

package/esm/system/ComponentConfigProvider.js

@@ -0,0 +1,39 @@
+import React, { createContext, useContext, useRef } from 'react';
+import { createStore } from 'zustand';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ComponentConfigContext = /*#__PURE__*/createContext(undefined);
+const createComponentConfigStoreState = config => {
+  return {
+    components: config
+  };
+};
+/**
+ * Provides component-level default props via a zustand store.
+ * Each component subscribes to only its own config slice, preventing cross-component re-renders.
+ * Supports nesting with isolated scopes: a child provider only applies its own config map.
+ */
+export const ComponentConfigProvider = _ref => {
+  let {
+    value,
+    children
+  } = _ref;
+  const storeRef = useRef(null);
+  if (!storeRef.current) {
+    storeRef.current = createStore(() => createComponentConfigStoreState(value));
+  }
+  const newState = createComponentConfigStoreState(value);
+  storeRef.current.setState(newState, true);
+  return /*#__PURE__*/_jsx(ComponentConfigContext.Provider, {
+    value: storeRef.current,
+    children: children
+  });
+};
+
+/** Singleton empty store used when no ComponentConfigProvider exists in the tree. */
+const emptyComponentConfigStore = createStore(() => ({}));
+
+/** Returns the nearest ComponentConfigProvider's zustand store, or an empty fallback. */
+export const useComponentConfigStore = () => {
+  const context = useContext(ComponentConfigContext);
+  return context != null ? context : emptyComponentConfigStore;
+};

package/esm/system/__stories__/ComponentConfigProvider.stories.js

@@ -0,0 +1,12 @@
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { StickerSheet } from './componentConfigStickerSheet/StickerSheet';
+import { jsx as _jsx } from "react/jsx-runtime";
+const ComponentConfigProviderStory = () => {
+  return /*#__PURE__*/_jsx(ExampleScreen, {
+    children: /*#__PURE__*/_jsx(Example, {
+      title: "ComponentConfigProvider",
+      children: /*#__PURE__*/_jsx(StickerSheet, {})
+    })
+  });
+};
+export default ComponentConfigProviderStory;

package/esm/system/__stories__/ComponentConfigProviderCustom.stories.js

@@ -0,0 +1,22 @@
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { ComponentConfigProvider, ThemeProvider } from '..';
+import { customComponentConfig } from './componentConfigStickerSheet/customComponentConfig';
+import { customTheme } from './componentConfigStickerSheet/customTheme';
+import { StickerSheet } from './componentConfigStickerSheet/StickerSheet';
+import { jsx as _jsx } from "react/jsx-runtime";
+const ComponentConfigProviderCustomStory = () => {
+  return /*#__PURE__*/_jsx(ExampleScreen, {
+    children: /*#__PURE__*/_jsx(Example, {
+      title: "ComponentConfigProviderCustom",
+      children: /*#__PURE__*/_jsx(ThemeProvider, {
+        activeColorScheme: "dark",
+        theme: customTheme,
+        children: /*#__PURE__*/_jsx(ComponentConfigProvider, {
+          value: customComponentConfig,
+          children: /*#__PURE__*/_jsx(StickerSheet, {})
+        })
+      })
+    })
+  });
+};
+export default ComponentConfigProviderCustomStory;

package/esm/system/__stories__/componentConfigStickerSheet/Container.js

@@ -0,0 +1,27 @@
+const _excluded = ["paddingX", "gap", "title", "children"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { memo } from 'react';
+import { VStack } from '../../../layout/VStack';
+import { Text } from '../../../typography/Text';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const Container = /*#__PURE__*/memo(_ref => {
+  let {
+      paddingX = 2,
+      gap = 2,
+      title,
+      children
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/_jsxs(VStack, _extends({
+    gap: gap,
+    maxWidth: "100%",
+    paddingX: paddingX
+  }, props, {
+    children: [title && /*#__PURE__*/_jsx(Text, {
+      font: "title3",
+      width: "100%",
+      children: title
+    }), children]
+  }));
+});

package/esm/system/__stories__/componentConfigStickerSheet/StickerSheet.js

@@ -0,0 +1,94 @@
+import React, { memo } from 'react';
+import { HStack } from '../../../layout/HStack';
+import { VStack } from '../../../layout/VStack';
+import { AccordionExample } from './examples/Accordion';
+import { AvatarExample } from './examples/Avatar';
+import { BannerExample } from './examples/Banner';
+import { ButtonExample } from './examples/Button';
+import { CoachmarkExample } from './examples/Coachmark';
+import { ControlsExample } from './examples/Controls';
+import { DatePickerExample } from './examples/DatePicker';
+import { DotCountExample } from './examples/DotCount';
+import { IconExample } from './examples/Icon';
+import { InputChipExample } from './examples/InputChip';
+import { ListCellExample } from './examples/ListCell';
+import { SearchExample } from './examples/Search';
+import { SegmentedTabsExample } from './examples/SegmentedTabs';
+import { SelectExample } from './examples/Select';
+import { SelectChipExample } from './examples/SelectChip';
+import { TagExample } from './examples/Tag';
+import { TextInputExample } from './examples/TextInput';
+import { Container } from './Container';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const StickerSheet = /*#__PURE__*/memo(() => {
+  return /*#__PURE__*/_jsx(VStack, {
+    alignItems: "center",
+    background: "bg",
+    gap: 2,
+    padding: 2,
+    children: /*#__PURE__*/_jsxs(HStack, {
+      alignItems: "flex-start",
+      flexWrap: "wrap",
+      gap: 2,
+      children: [/*#__PURE__*/_jsxs(VStack, {
+        gap: 2,
+        children: [/*#__PURE__*/_jsx(Container, {
+          title: "Switch / Checkbox / Radio",
+          children: /*#__PURE__*/_jsx(ControlsExample, {})
+        }), /*#__PURE__*/_jsx(Container, {
+          title: "Segmented Tabs",
+          children: /*#__PURE__*/_jsx(SegmentedTabsExample, {})
+        }), /*#__PURE__*/_jsx(Container, {
+          title: "Select Input (SelectOption)",
+          children: /*#__PURE__*/_jsx(SelectExample, {})
+        }), /*#__PURE__*/_jsx(Container, {
+          title: "SearchInput",
+          children: /*#__PURE__*/_jsx(SearchExample, {})
+        }), /*#__PURE__*/_jsx(Container, {
+          title: "SelectChip / InputChip",
+          children: /*#__PURE__*/_jsxs(HStack, {
+            flexWrap: "wrap",
+            gap: 1,
+            children: [/*#__PURE__*/_jsx(SelectChipExample, {}), /*#__PURE__*/_jsx(InputChipExample, {})]
+          })
+        }), /*#__PURE__*/_jsx(Container, {
+          title: "Accordion",
+          children: /*#__PURE__*/_jsx(AccordionExample, {})
+        }), /*#__PURE__*/_jsx(Container, {
+          title: "DatePicker",
+          children: /*#__PURE__*/_jsx(DatePickerExample, {})
+        })]
+      }), /*#__PURE__*/_jsxs(VStack, {
+        gap: 2,
+        children: [/*#__PURE__*/_jsx(Container, {
+          title: "Tag",
+          children: /*#__PURE__*/_jsx(TagExample, {})
+        }), /*#__PURE__*/_jsx(Container, {
+          title: "Icon",
+          children: /*#__PURE__*/_jsx(IconExample, {})
+        }), /*#__PURE__*/_jsx(Container, {
+          title: "Button / IconButton",
+          children: /*#__PURE__*/_jsx(ButtonExample, {})
+        }), /*#__PURE__*/_jsx(Container, {
+          title: "Avatar",
+          children: /*#__PURE__*/_jsx(AvatarExample, {})
+        }), /*#__PURE__*/_jsx(Container, {
+          title: "TextInput",
+          children: /*#__PURE__*/_jsx(TextInputExample, {})
+        }), /*#__PURE__*/_jsx(Container, {
+          title: "ListCell",
+          children: /*#__PURE__*/_jsx(ListCellExample, {})
+        }), /*#__PURE__*/_jsx(Container, {
+          title: "Banner",
+          children: /*#__PURE__*/_jsx(BannerExample, {})
+        }), /*#__PURE__*/_jsx(Container, {
+          title: "DotCount",
+          children: /*#__PURE__*/_jsx(DotCountExample, {})
+        }), /*#__PURE__*/_jsx(Container, {
+          title: "Coachmark",
+          children: /*#__PURE__*/_jsx(CoachmarkExample, {})
+        })]
+      })]
+    })
+  });
+});