@coinbase/cds-mobile 8.61.0 → 8.62.0

package/esm/system/__stories__/componentConfigStickerSheet/examples/Button.js

@@ -0,0 +1,77 @@
+import React, { memo } from 'react';
+import { Button } from '../../../../buttons/Button';
+import { IconButton } from '../../../../buttons/IconButton';
+import { HStack } from '../../../../layout/HStack';
+import { VStack } from '../../../../layout/VStack';
+import { Text } from '../../../../typography/Text';
+import { buttonVariants } from '../themeVars';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const ButtonExample = /*#__PURE__*/memo(() => {
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 1,
+    width: "100%",
+    children: [/*#__PURE__*/_jsx(Text, {
+      font: "caption",
+      children: "Regular"
+    }), buttonVariants.map(variant => /*#__PURE__*/_jsxs(HStack, {
+      alignItems: "center",
+      gap: 1,
+      children: [/*#__PURE__*/_jsx(Button, {
+        variant: variant,
+        width: 180,
+        children: "Button"
+      }), /*#__PURE__*/_jsx(IconButton, {
+        accessibilityLabel: "add-" + variant,
+        compact: false,
+        name: "add",
+        variant: variant
+      })]
+    }, "regular-" + variant)), /*#__PURE__*/_jsxs(HStack, {
+      alignItems: "center",
+      gap: 1,
+      children: [/*#__PURE__*/_jsx(Button, {
+        loading: true,
+        width: 180,
+        children: "Button"
+      }), /*#__PURE__*/_jsx(IconButton, {
+        loading: true,
+        accessibilityLabel: "add-loading",
+        compact: false,
+        name: "add",
+        variant: "primary"
+      })]
+    }), /*#__PURE__*/_jsx(Text, {
+      font: "caption",
+      children: "Compact"
+    }), buttonVariants.map(variant => /*#__PURE__*/_jsxs(HStack, {
+      alignItems: "center",
+      gap: 1,
+      children: [/*#__PURE__*/_jsx(Button, {
+        compact: true,
+        variant: variant,
+        width: 180,
+        children: "Button"
+      }), /*#__PURE__*/_jsx(IconButton, {
+        compact: true,
+        accessibilityLabel: "add-compact-" + variant,
+        name: "add",
+        variant: variant
+      })]
+    }, "compact-" + variant)), /*#__PURE__*/_jsxs(HStack, {
+      alignItems: "center",
+      gap: 1,
+      children: [/*#__PURE__*/_jsx(Button, {
+        compact: true,
+        loading: true,
+        width: 180,
+        children: "Button"
+      }), /*#__PURE__*/_jsx(IconButton, {
+        compact: true,
+        loading: true,
+        accessibilityLabel: "add-compact-loading",
+        name: "add",
+        variant: "primary"
+      })]
+    })]
+  });
+});

package/esm/system/__stories__/componentConfigStickerSheet/examples/Coachmark.js

@@ -0,0 +1,15 @@
+import React, { memo } from 'react';
+import { Button } from '../../../../buttons/Button';
+import { Coachmark } from '../../../../coachmark/Coachmark';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const CoachmarkExample = /*#__PURE__*/memo(() => {
+  return /*#__PURE__*/_jsx(Coachmark, {
+    action: /*#__PURE__*/_jsx(Button, {
+      compact: true,
+      children: "Got it"
+    }),
+    content: "You can now trade directly from your portfolio page.",
+    onClose: () => undefined,
+    title: "New feature"
+  });
+});

package/esm/system/__stories__/componentConfigStickerSheet/examples/Controls.js

@@ -0,0 +1,29 @@
+import { memo, useState } from 'react';
+import { Checkbox } from '../../../../controls/Checkbox';
+import { Radio } from '../../../../controls/Radio';
+import { Switch } from '../../../../controls/Switch';
+import { HStack } from '../../../../layout';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const ControlsExample = /*#__PURE__*/memo(() => {
+  const [isSwitchChecked, setIsSwitchChecked] = useState(false);
+  const [isCheckboxChecked, setIsCheckboxChecked] = useState(false);
+  const [isRadioChecked, setIsRadioChecked] = useState(true);
+  return /*#__PURE__*/_jsxs(HStack, {
+    alignItems: "center",
+    gap: 1,
+    justifyContent: "center",
+    children: [/*#__PURE__*/_jsx(Switch, {
+      checked: isSwitchChecked,
+      onChange: () => setIsSwitchChecked(v => !v),
+      children: "Switch"
+    }), /*#__PURE__*/_jsx(Checkbox, {
+      checked: isCheckboxChecked,
+      onChange: () => setIsCheckboxChecked(v => !v),
+      children: "Checkbox"
+    }), /*#__PURE__*/_jsx(Radio, {
+      checked: isRadioChecked,
+      onChange: () => setIsRadioChecked(v => !v),
+      children: "Radio"
+    })]
+  });
+});

package/esm/system/__stories__/componentConfigStickerSheet/examples/DatePicker.js

@@ -0,0 +1,15 @@
+import React, { memo, useState } from 'react';
+import { DatePicker } from '../../../../dates/DatePicker';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const DatePickerExample = /*#__PURE__*/memo(() => {
+  const [date, setDate] = useState(null);
+  const [error, setError] = useState(null);
+  return /*#__PURE__*/_jsx(DatePicker, {
+    date: date,
+    error: error,
+    label: "Date",
+    onChangeDate: setDate,
+    onErrorDate: setError,
+    openCalendarAccessibilityLabel: "Date calendar"
+  });
+});

package/esm/system/__stories__/componentConfigStickerSheet/examples/DotCount.js

@@ -0,0 +1,28 @@
+import React, { memo } from 'react';
+import { DotCount } from '../../../../dots/DotCount';
+import { Icon } from '../../../../icons/Icon';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export const DotCountExample = /*#__PURE__*/memo(() => {
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(DotCount, {
+      count: 3,
+      children: /*#__PURE__*/_jsx(Icon, {
+        name: "bell",
+        size: "m"
+      })
+    }), /*#__PURE__*/_jsx(DotCount, {
+      count: 12,
+      children: /*#__PURE__*/_jsx(Icon, {
+        name: "bell",
+        size: "m"
+      })
+    }), /*#__PURE__*/_jsx(DotCount, {
+      count: 100,
+      max: 99,
+      children: /*#__PURE__*/_jsx(Icon, {
+        name: "bell",
+        size: "m"
+      })
+    })]
+  });
+});

package/esm/system/__stories__/componentConfigStickerSheet/examples/Icon.js

@@ -0,0 +1,57 @@
+import React, { memo } from 'react';
+import { Icon } from '../../../../icons/Icon';
+import { HStack } from '../../../../layout/HStack';
+import { VStack } from '../../../../layout/VStack';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const IconExample = /*#__PURE__*/memo(() => {
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 1,
+    width: "100%",
+    children: [/*#__PURE__*/_jsxs(HStack, {
+      gap: 1,
+      children: [/*#__PURE__*/_jsx(Icon, {
+        name: "search",
+        size: "l"
+      }), /*#__PURE__*/_jsx(Icon, {
+        name: "search",
+        size: "m"
+      }), /*#__PURE__*/_jsx(Icon, {
+        name: "search",
+        size: "s"
+      }), /*#__PURE__*/_jsx(Icon, {
+        name: "search",
+        size: "xs"
+      })]
+    }), /*#__PURE__*/_jsxs(HStack, {
+      gap: 1,
+      children: [/*#__PURE__*/_jsx(Icon, {
+        name: "add",
+        size: "l"
+      }), /*#__PURE__*/_jsx(Icon, {
+        name: "add",
+        size: "m"
+      }), /*#__PURE__*/_jsx(Icon, {
+        name: "add",
+        size: "s"
+      }), /*#__PURE__*/_jsx(Icon, {
+        name: "add",
+        size: "xs"
+      })]
+    }), /*#__PURE__*/_jsxs(HStack, {
+      gap: 1,
+      children: [/*#__PURE__*/_jsx(Icon, {
+        name: "account",
+        size: "l"
+      }), /*#__PURE__*/_jsx(Icon, {
+        name: "account",
+        size: "m"
+      }), /*#__PURE__*/_jsx(Icon, {
+        name: "account",
+        size: "s"
+      }), /*#__PURE__*/_jsx(Icon, {
+        name: "account",
+        size: "xs"
+      })]
+    })]
+  });
+});

package/esm/system/__stories__/componentConfigStickerSheet/examples/InputChip.js

@@ -0,0 +1,17 @@
+import React, { memo } from 'react';
+import { assets } from '@coinbase/cds-common/internal/data/assets';
+import { InputChip } from '../../../../chips/InputChip';
+import { RemoteImage } from '../../../../media/RemoteImage';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const InputChipExample = /*#__PURE__*/memo(() => {
+  return /*#__PURE__*/_jsx(InputChip, {
+    onPress: () => undefined,
+    start: /*#__PURE__*/_jsx(RemoteImage, {
+      height: 16,
+      shape: "circle",
+      source: assets.eth.imageUrl,
+      width: 16
+    }),
+    children: "ETH"
+  });
+});

package/esm/system/__stories__/componentConfigStickerSheet/examples/ListCell.js

@@ -0,0 +1,48 @@
+import React, { memo } from 'react';
+import { assets } from '@coinbase/cds-common/internal/data/assets';
+import { ListCell } from '../../../../cells/ListCell';
+import { VStack } from '../../../../layout/VStack';
+import { RemoteImage } from '../../../../media/RemoteImage';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const ListCellExample = /*#__PURE__*/memo(() => {
+  return /*#__PURE__*/_jsxs(VStack, {
+    width: "100%",
+    children: [/*#__PURE__*/_jsx(ListCell, {
+      accessibilityLabel: "Bitcoin asset row",
+      description: "$64,231.00",
+      media: /*#__PURE__*/_jsx(RemoteImage, {
+        height: 36,
+        shape: "circle",
+        source: assets.btc.imageUrl,
+        width: 36
+      }),
+      onPress: () => undefined,
+      subtitle: "BTC",
+      title: "Bitcoin"
+    }), /*#__PURE__*/_jsx(ListCell, {
+      accessibilityLabel: "Ethereum asset row",
+      description: "$3,421.50",
+      media: /*#__PURE__*/_jsx(RemoteImage, {
+        height: 36,
+        shape: "circle",
+        source: assets.eth.imageUrl,
+        width: 36
+      }),
+      onPress: () => undefined,
+      subtitle: "ETH",
+      title: "Ethereum"
+    }), /*#__PURE__*/_jsx(ListCell, {
+      accessibilityLabel: "XRP asset row",
+      description: "$2.15",
+      media: /*#__PURE__*/_jsx(RemoteImage, {
+        height: 36,
+        shape: "circle",
+        source: assets.xrp.imageUrl,
+        width: 36
+      }),
+      onPress: () => undefined,
+      subtitle: "XRP",
+      title: "XRP"
+    })]
+  });
+});

package/esm/system/__stories__/componentConfigStickerSheet/examples/Search.js

@@ -0,0 +1,20 @@
+import React, { memo, useState } from 'react';
+import { SearchInput } from '../../../../controls/SearchInput';
+import { VStack } from '../../../../layout/VStack';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const SearchExample = /*#__PURE__*/memo(() => {
+  const [value, setValue] = useState('');
+  const [compactValue, setCompactValue] = useState('');
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 1,
+    width: "100%",
+    children: [/*#__PURE__*/_jsx(SearchInput, {
+      onChangeText: setValue,
+      value: value
+    }), /*#__PURE__*/_jsx(SearchInput, {
+      compact: true,
+      onChangeText: setCompactValue,
+      value: compactValue
+    })]
+  });
+});

package/esm/system/__stories__/componentConfigStickerSheet/examples/SegmentedTabs.js

@@ -0,0 +1,12 @@
+import React, { memo, useState } from 'react';
+import { SegmentedTabs } from '../../../../tabs/SegmentedTabs';
+import { segmentedTabs } from './constants';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const SegmentedTabsExample = /*#__PURE__*/memo(() => {
+  const [activeTab, setActiveTab] = useState(segmentedTabs[0]);
+  return /*#__PURE__*/_jsx(SegmentedTabs, {
+    activeTab: activeTab,
+    onChange: setActiveTab,
+    tabs: segmentedTabs
+  });
+});

package/esm/system/__stories__/componentConfigStickerSheet/examples/Select.js

@@ -0,0 +1,24 @@
+import React, { memo, useState } from 'react';
+import { Select } from '../../../../alpha/select/Select';
+import { VStack } from '../../../../layout/VStack';
+import { stickerSheetSelectOptions } from './constants';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const SelectExample = /*#__PURE__*/memo(() => {
+  const [value, setValue] = useState('btc');
+  const [secondaryValue, setSecondaryValue] = useState(null);
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 1,
+    width: "100%",
+    children: [/*#__PURE__*/_jsx(Select, {
+      label: "Asset",
+      onChange: setValue,
+      options: stickerSheetSelectOptions,
+      value: value
+    }), /*#__PURE__*/_jsx(Select, {
+      label: "Asset (empty)",
+      onChange: setSecondaryValue,
+      options: stickerSheetSelectOptions,
+      value: secondaryValue
+    })]
+  });
+});

package/esm/system/__stories__/componentConfigStickerSheet/examples/SelectChip.js

@@ -0,0 +1,22 @@
+import React, { memo, useState } from 'react';
+import { SelectChip } from '../../../../chips/SelectChip';
+import { SelectOption } from '../../../../controls/SelectOption';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const SelectChipExample = /*#__PURE__*/memo(() => {
+  const [value, setValue] = useState('Balance');
+  return /*#__PURE__*/_jsxs(SelectChip, {
+    onChange: setValue,
+    placeholder: "Sort",
+    value: value,
+    children: [/*#__PURE__*/_jsx(SelectOption, {
+      title: "Balance",
+      value: "Balance"
+    }), /*#__PURE__*/_jsx(SelectOption, {
+      title: "Name",
+      value: "Name"
+    }), /*#__PURE__*/_jsx(SelectOption, {
+      title: "Asset Value",
+      value: "Asset Value"
+    })]
+  });
+});

package/esm/system/__stories__/componentConfigStickerSheet/examples/Tag.js

@@ -0,0 +1,35 @@
+import React, { memo } from 'react';
+import { HStack } from '../../../../layout/HStack';
+import { VStack } from '../../../../layout/VStack';
+import { Tag } from '../../../../tag/Tag';
+import { tagColorSchemes } from '../themeVars';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const TagExample = /*#__PURE__*/memo(() => {
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 1,
+    width: "100%",
+    children: [/*#__PURE__*/_jsxs(HStack, {
+      flexWrap: "wrap",
+      gap: 1,
+      children: [/*#__PURE__*/_jsx(Tag, {
+        intent: "informational",
+        children: "primary"
+      }), /*#__PURE__*/_jsx(Tag, {
+        intent: "promotional",
+        children: "primary"
+      })]
+    }), tagColorSchemes.map(colorScheme => /*#__PURE__*/_jsxs(HStack, {
+      flexWrap: "wrap",
+      gap: 1,
+      children: [/*#__PURE__*/_jsx(Tag, {
+        colorScheme: colorScheme,
+        intent: "informational",
+        children: colorScheme
+      }), /*#__PURE__*/_jsx(Tag, {
+        colorScheme: colorScheme,
+        intent: "promotional",
+        children: colorScheme
+      })]
+    }, colorScheme))]
+  });
+});

package/esm/system/__stories__/componentConfigStickerSheet/examples/TextInput.js

@@ -0,0 +1,46 @@
+import { memo, useState } from 'react';
+import { TextInput } from '@coinbase/cds-mobile/controls/TextInput';
+import { InputIconButton } from '../../../../controls';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export const TextInputExample = /*#__PURE__*/memo(() => {
+  const [value, setValue] = useState('');
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(TextInput, {
+      label: "Label",
+      onChangeText: setValue,
+      placeholder: "Outside label",
+      style: {
+        flexGrow: 1
+      },
+      value: value
+    }), /*#__PURE__*/_jsx(TextInput, {
+      label: "Label",
+      labelVariant: "inside",
+      onChangeText: setValue,
+      placeholder: "Default input",
+      style: {
+        flexGrow: 1
+      },
+      value: value
+    }), /*#__PURE__*/_jsx(TextInput, {
+      compact: true,
+      label: "Label",
+      onChangeText: setValue,
+      placeholder: "Compact input",
+      style: {
+        flexGrow: 1
+      },
+      value: value
+    }), /*#__PURE__*/_jsx(TextInput, {
+      end: /*#__PURE__*/_jsx(InputIconButton, {
+        accessibilityLabel: "Clear input",
+        name: "close"
+      }),
+      label: "Label",
+      labelVariant: "inside",
+      onChangeText: setValue,
+      placeholder: "Input with icon button",
+      value: value
+    })]
+  });
+});

package/esm/system/__stories__/componentConfigStickerSheet/examples/constants.js

@@ -0,0 +1,33 @@
+export const stickerSheetSelectOptions = [{
+  value: null,
+  label: 'Clear'
+}, {
+  value: 'btc',
+  label: 'Bitcoin'
+}, {
+  value: 'eth',
+  label: 'Ethereum'
+}, {
+  value: 'sol',
+  label: 'Solana'
+}];
+export const segmentedTabs = [{
+  id: 'buy',
+  label: 'Buy'
+}, {
+  id: 'sell',
+  label: 'Sell'
+}, {
+  id: 'convert',
+  label: 'Convert'
+}];
+export const tabNavigationTabs = [{
+  id: 'overview',
+  label: 'Overview'
+}, {
+  id: 'activity',
+  label: 'Activity'
+}, {
+  id: 'details',
+  label: 'Details'
+}];

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

@@ -0,0 +1,2 @@
+export const buttonVariants = ['primary', 'secondary', 'tertiary', 'positive', 'negative', 'foregroundMuted'];
+export const tagColorSchemes = ['blue', 'green', 'yellow', 'purple', 'red', 'gray'];

package/esm/system/index.js

@@ -1,4 +1,5 @@
 export * from './AndroidNavigationBar';
+export * from './ComponentConfigProvider';
 export * from './EventHandlerProvider';
 export * from './Interactable';
 export * from './Pressable';

package/esm/tabs/SegmentedTab.js

@@ -2,18 +2,20 @@ const _excluded = ["id", "label", "disabled", "onPress", "color", "activeColor",
 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 React, { forwardRef, memo, useCallback, useMemo } from 'react';
-import { Pressable } from 'react-native';
 import Animated, { useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
 import { useTabsContext } from '@coinbase/cds-common/tabs/TabsContext';
 import { accessibleOpacityDisabled } from '@coinbase/cds-common/tokens/interactable';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { useTheme } from '../hooks/useTheme';
 import { Box } from '../layout';
+import { Pressable } from '../system/Pressable';
 import { Text } from '../typography/Text';
 import { tabsSpringConfig } from './Tabs';
 import { jsx as _jsx } from "react/jsx-runtime";
 const AnimatedTextHeadline = Animated.createAnimatedComponent(Text);
-const SegmentedTabComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
+const SegmentedTabComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+  const mergedProps = useComponentConfig('SegmentedTab', _props);
+  const {
       id,
       label,
       disabled: disabledProp,
@@ -29,8 +31,8 @@ const SegmentedTabComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
       fontSize,
       fontWeight,
       lineHeight
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
   const {
     activeTab,
     updateActiveTab,

package/esm/tabs/SegmentedTabs.js

@@ -2,19 +2,24 @@ const _excluded = ["TabComponent", "TabsActiveIndicatorComponent", "activeBackgr
 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 React, { forwardRef, memo } from 'react';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { SegmentedTab } from './SegmentedTab';
 import { SegmentedTabsActiveIndicator } from './SegmentedTabsActiveIndicator';
 import { Tabs } from './Tabs';
+
+// We do Partial/Pick to allow TabComponent and TabsActiveIndicatorComponent to be optional
+// We grab 'tabs' from the Omit allowing it to stay required
 import { jsx as _jsx } from "react/jsx-runtime";
-const SegmentedTabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
+const SegmentedTabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+  const mergedProps = useComponentConfig('SegmentedTabs', _props);
+  const {
       TabComponent = SegmentedTab,
       TabsActiveIndicatorComponent = SegmentedTabsActiveIndicator,
       activeBackground = 'bgInverse',
       background = 'bgSecondary',
       borderRadius = 700
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    } = mergedProps,
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded);
   return /*#__PURE__*/_jsx(Tabs, _extends({
     ref: ref,
     TabComponent: TabComponent,

package/esm/tabs/Tabs.js

@@ -12,6 +12,7 @@ import { TabsContext } from '@coinbase/cds-common/tabs/TabsContext';
 import { useTabs } from '@coinbase/cds-common/tabs/useTabs';
 import { accessibleOpacityDisabled } from '@coinbase/cds-common/tokens/interactable';
 import { defaultRect } from '@coinbase/cds-common/types/Rect';
+import { useComponentConfig } from '../hooks/useComponentConfig';
 import { Box, HStack } from '../layout';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const AnimatedBox = Animated.createAnimatedComponent(Box);
@@ -32,8 +33,9 @@ export const tabsSpringConfig = {
   damping: 10,
   overshootClamping: true
 };
-const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) => {
-  let {
+const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
+  const mergedProps = useComponentConfig('Tabs', _props);
+  const {
       tabs,
       TabComponent,
       TabsActiveIndicatorComponent,
@@ -53,8 +55,8 @@ const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) =>
       borderTopRightRadius,
       borderBottomLeftRadius,
       borderBottomRightRadius
-    } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+    } = mergedProps,
+    props = _objectWithoutPropertiesLoose(mergedProps, _excluded2);
   const tabsContainerRef = useRef(null);
   useImperativeHandle(ref, () => tabsContainerRef.current, []); // merge internal ref to forwarded ref
 
@@ -112,13 +114,13 @@ const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) =>
         borderTopLeftRadius: borderTopLeftRadius,
         borderTopRightRadius: borderTopRightRadius,
         style: styles == null ? void 0 : styles.activeIndicator
-      }), tabs.map(_ref3 => {
+      }), tabs.map(_ref2 => {
         let {
             id,
             Component: CustomTabComponent,
             disabled: tabDisabled
-          } = _ref3,
-          props = _objectWithoutPropertiesLoose(_ref3, _excluded3);
+          } = _ref2,
+          props = _objectWithoutPropertiesLoose(_ref2, _excluded3);
         const RenderedTab = CustomTabComponent != null ? CustomTabComponent : TabComponent;
         return /*#__PURE__*/_jsx(TabContainer, {
           id: id,
@@ -135,13 +137,13 @@ const TabsComponent = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) =>
 }));
 TabsComponent.displayName = 'Tabs';
 export const Tabs = TabsComponent;
-export const TabsActiveIndicator = _ref4 => {
+export const TabsActiveIndicator = _ref3 => {
   let {
       activeTabRect,
       position = 'absolute',
       style
-    } = _ref4,
-    props = _objectWithoutPropertiesLoose(_ref4, _excluded4);
+    } = _ref3,
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded4);
   const previousActiveTabRect = useRef(activeTabRect);
   const newActiveTabRect = {
     x: activeTabRect.x,