@coinbase/cds-mobile 0.0.0 → 8.13.1

package/dts/system/Interactable.d.ts

@@ -0,0 +1,69 @@
+import React from 'react';
+import { type Animated, type StyleProp, type ViewProps, type ViewStyle } from 'react-native';
+import type { ElevationLevels, ThemeVars } from '@coinbase/cds-common';
+import { type BoxBaseProps } from '../layout/Box';
+export type InteractableBaseProps = Omit<BoxBaseProps, 'animated'> & {
+    /** Apply animated styles to the outer container. */
+    style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>[];
+    /** Background color of the overlay (element being interacted with). */
+    background?: ThemeVars.Color;
+    /** Set element to block and expand to 100% width. */
+    block?: boolean;
+    /** Is the element currently disabled. */
+    disabled?: boolean;
+    /** Is the element elevated. */
+    elevation?: ElevationLevels;
+    /**
+     * Is the element currenty loading.
+     * When set to true, will disable element from press and keyboard events
+     */
+    loading?: boolean;
+    /** Is the element being pressed. Primarily a mobile feature, but can be used on the web. */
+    pressed?: boolean;
+    /**
+     * Mark the background and border as transparent until the element is interacted with (hovered, pressed, etc).
+     * Must be used in conjunction with the "pressed" prop
+     * */
+    transparentWhileInactive?: boolean;
+    /**
+     * Mark the background and border as transparent even while element is interacted with (elevation underlay issue).
+     * Must be used in conjunction with the "pressed" prop
+     * */
+    transparentWhilePressed?: boolean;
+    /**
+     * Custom color overrides for different interaction states.
+     * Base colors (background, borderColor) are used directly, while interaction
+     * state colors (pressed, disabled) are used as alternative base colors
+     * for blending calculations with blend strength and color scheme considerations.
+     *
+     * @example
+     * ```tsx
+     * <Interactable
+     *   blendStyles={{
+     *     background: '#ffffff',
+     *     pressedBackground: '#e0e0e0',
+     *     borderColor: '#cccccc'
+     *   }}
+     * />
+     * ```
+     */
+    blendStyles?: {
+        background?: string;
+        pressedBackground?: string;
+        disabledBackground?: string;
+        borderColor?: string;
+        pressedBorderColor?: string;
+        disabledBorderColor?: string;
+    };
+    /** Apply animated styles to the inner container. */
+    contentStyle?: StyleProp<ViewStyle>;
+    /** Apply styles to the outer container. */
+    wrapperStyles?: {
+        base?: StyleProp<ViewStyle>;
+        pressed?: StyleProp<ViewStyle>;
+        disabled?: StyleProp<ViewStyle>;
+    };
+};
+export type InteractableProps = InteractableBaseProps & Omit<ViewProps, 'style'>;
+export declare const Interactable: React.NamedExoticComponent<InteractableProps>;
+//# sourceMappingURL=Interactable.d.ts.map

package/dts/system/Interactable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Interactable.d.ts","sourceRoot":"","sources":["../../src/system/Interactable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,SAAS,EAAQ,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AACnG,OAAO,KAAK,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAGvE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AAGvD,MAAM,MAAM,qBAAqB,GAAG,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC,GAAG;IACnE,oDAAoD;IACpD,KAAK,CAAC,EAAE,QAAQ,CAAC,iBAAiB,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC;IAC3D,uEAAuE;IACvE,UAAU,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IAC7B,qDAAqD;IACrD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4FAA4F;IAC5F,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;SAGK;IACL,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC;;;SAGK;IACL,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC;;;;;;;;;;;;;;;;OAgBG;IACH,WAAW,CAAC,EAAE;QACZ,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;QAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,mBAAmB,CAAC,EAAE,MAAM,CAAC;KAC9B,CAAC;IACF,oDAAoD;IACpD,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,2CAA2C;IAC3C,aAAa,CAAC,EAAE;QACd,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC/B,QAAQ,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KACjC,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,qBAAqB,GAAG,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;AAEjF,eAAO,MAAM,YAAY,+CA4EvB,CAAC"}

package/dts/system/Pressable.d.ts

@@ -0,0 +1,68 @@
+import React from 'react';
+import { type AccessibilityProps, type GestureResponderEvent, type PressableProps as NativePressableProps, type View } from 'react-native';
+import type { ComponentEventHandlerProps } from '@coinbase/cds-common';
+import { type InteractableBaseProps } from './Interactable';
+export type HapticFeedbackType = 'light' | 'normal' | 'heavy' | 'none';
+export type LinkableProps = Pick<NativePressableProps, 'onPress' | 'accessibilityLabel' | 'accessibilityHint'>;
+export type PressableBaseProps = AccessibilityProps & ComponentEventHandlerProps & Pick<NativePressableProps, 'style' | 'onPress' | 'hitSlop'> & Omit<InteractableBaseProps, 'style' | 'pressed'> & {
+    /** Dont scale element on press. */
+    noScaleOnPress?: boolean;
+    /** Callback fired before `onPress` when button is pressed. */
+    onPressIn?: (event: GestureResponderEvent) => void;
+    /** Callback fired before `onPress` when button is released. */
+    onPressOut?: (event: GestureResponderEvent) => void;
+    /**
+     * Haptic feedback to trigger when being pressed.
+     * @default none
+     */
+    feedback?: HapticFeedbackType;
+    /** Is the element currenty loading. */
+    loading?: boolean;
+    /**
+     * The amount of time to wait (in milliseconds) before invoking the debounced function.
+     * This prop is used in conjunction with the `disableDebounce` prop.
+     * The debounce function is configured to be invoked as soon as it's called, but subsequent calls
+     * within the `debounceTime` period will be ignored.
+     * @default 500
+     */
+    debounceTime?: number;
+    /**
+     * React Native is historically trash at debouncing touch events. This can cause a lot of
+     * unwanted behavior such as double navigations where we push a screen onto the stack 2 times.
+     * Debouncing the event 500 miliseconds, but taking the leading event prevents this effect and
+     * the accidental "double-tap".
+     */
+    disableDebounce?: boolean;
+};
+export type PressableProps = PressableBaseProps & NativePressableProps;
+export declare const Pressable: React.MemoExoticComponent<React.ForwardRefExoticComponent<AccessibilityProps & ComponentEventHandlerProps & Pick<NativePressableProps, "style" | "hitSlop" | "onPress"> & Omit<InteractableBaseProps, "style" | "pressed"> & {
+    /** Dont scale element on press. */
+    noScaleOnPress?: boolean;
+    /** Callback fired before `onPress` when button is pressed. */
+    onPressIn?: (event: GestureResponderEvent) => void;
+    /** Callback fired before `onPress` when button is released. */
+    onPressOut?: (event: GestureResponderEvent) => void;
+    /**
+     * Haptic feedback to trigger when being pressed.
+     * @default none
+     */
+    feedback?: HapticFeedbackType;
+    /** Is the element currenty loading. */
+    loading?: boolean;
+    /**
+     * The amount of time to wait (in milliseconds) before invoking the debounced function.
+     * This prop is used in conjunction with the `disableDebounce` prop.
+     * The debounce function is configured to be invoked as soon as it's called, but subsequent calls
+     * within the `debounceTime` period will be ignored.
+     * @default 500
+     */
+    debounceTime?: number;
+    /**
+     * React Native is historically trash at debouncing touch events. This can cause a lot of
+     * unwanted behavior such as double navigations where we push a screen onto the stack 2 times.
+     * Debouncing the event 500 miliseconds, but taking the leading event prevents this effect and
+     * the accidental "double-tap".
+     */
+    disableDebounce?: boolean;
+} & NativePressableProps & React.RefAttributes<View>>>;
+//# sourceMappingURL=Pressable.d.ts.map

package/dts/system/Pressable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pressable.d.ts","sourceRoot":"","sources":["../../src/system/Pressable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmE,MAAM,OAAO,CAAC;AACxF,OAAO,EACL,KAAK,kBAAkB,EACvB,KAAK,qBAAqB,EAE1B,KAAK,cAAc,IAAI,oBAAoB,EAC3C,KAAK,IAAI,EACV,MAAM,cAAc,CAAC;AACtB,OAAO,KAAK,EAAE,0BAA0B,EAAiB,MAAM,sBAAsB,CAAC;AAMtF,OAAO,EAAgB,KAAK,qBAAqB,EAAE,MAAM,gBAAgB,CAAC;AAE1E,MAAM,MAAM,kBAAkB,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAEvE,MAAM,MAAM,aAAa,GAAG,IAAI,CAC9B,oBAAoB,EACpB,SAAS,GAAG,oBAAoB,GAAG,mBAAmB,CACvD,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,kBAAkB,GACjD,0BAA0B,GAC1B,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC,GAC3D,IAAI,CAAC,qBAAqB,EAAE,OAAO,GAAG,SAAS,CAAC,GAAG;IACjD,mCAAmC;IACnC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACnD,+DAA+D;IAC/D,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACpD;;;OAGG;IACH,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEJ,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAAG,oBAAoB,CAAC;AAEvE,eAAO,MAAM,SAAS;IAhClB,mCAAmC;qBAClB,OAAO;IACxB,8DAA8D;gBAClD,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI;IAClD,+DAA+D;iBAClD,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI;IACnD;;;OAGG;eACQ,kBAAkB;IAC7B,uCAAuC;cAC7B,OAAO;IACjB;;;;;;OAMG;mBACY,MAAM;IACrB;;;;;OAKG;sBACe,OAAO;sDAoR5B,CAAC"}

package/dts/system/PressableOpacity.d.ts

@@ -0,0 +1,6 @@
+import type { PressableProps } from './Pressable';
+/** @deprecated This component will be removed in a future version. Use `<Pressable background="transparent">` instead. */
+export type PressableOpacityProps = Omit<PressableProps, 'background' | 'borderColor' | 'borderRadius' | 'borderWidth' | 'transparentWhileInactive'>;
+/** @deprecated This component will be removed in a future version. Use `<Pressable background="transparent">` instead. */
+export declare const PressableOpacity: ({ children, ...props }: PressableOpacityProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PressableOpacity.d.ts.map

package/dts/system/PressableOpacity.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PressableOpacity.d.ts","sourceRoot":"","sources":["../../src/system/PressableOpacity.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAGlD,0HAA0H;AAC1H,MAAM,MAAM,qBAAqB,GAAG,IAAI,CACtC,cAAc,EACd,YAAY,GAAG,aAAa,GAAG,cAAc,GAAG,aAAa,GAAG,0BAA0B,CAC3F,CAAC;AAEF,0HAA0H;AAC1H,eAAO,MAAM,gBAAgB,GAAI,wBAAwB,qBAAqB,4CAM7E,CAAC"}

package/dts/system/StatusBar.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { StatusBarProps as RNStatusBarProps } from 'react-native';
+import type { Theme } from '../core/theme';
+export type StatusBarProps = RNStatusBarProps & {
+    theme?: Theme;
+};
+/**
+ * If bar-style is 'dark-content' that means app has a light background with dark text and icons.
+ * If bar-style is 'light-content' that means app has a dark background with light text and icons.
+ */
+export declare const useStatusBarStyle: ({ theme }?: StatusBarProps | undefined) => "light-content" | "dark-content";
+export declare const useStatusBarUpdater: ({ theme }?: StatusBarProps | undefined) => () => void;
+export declare const StatusBar: React.MemoExoticComponent<({ animated, backgroundColor, barStyle, hidden, networkActivityIndicatorVisible, theme, showHideTransition, translucent, }: StatusBarProps) => import("react/jsx-runtime").JSX.Element>;
+//# sourceMappingURL=StatusBar.d.ts.map

package/dts/system/StatusBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusBar.d.ts","sourceRoot":"","sources":["../../src/system/StatusBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAE1D,OAAO,KAAK,EAAE,cAAc,IAAI,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAGvE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAG3C,MAAM,MAAM,cAAc,GAAG,gBAAgB,GAAG;IAC9C,KAAK,CAAC,EAAE,KAAK,CAAC;CACf,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,iBAAiB,GAAI,YAAW,cAAc,GAAG,SAAc,qCAO3E,CAAC;AAGF,eAAO,MAAM,mBAAmB,GAAI,YAAW,cAAc,GAAG,SAAc,eAU7E,CAAC;AAEF,eAAO,MAAM,SAAS,wJAUjB,cAAc,6CAclB,CAAC"}

package/dts/system/ThemeProvider.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { ColorScheme } from '@coinbase/cds-common/core/theme';
+import type { Theme, ThemeConfig } from '../core/theme';
+export type ThemeContextValue = Theme;
+export declare const ThemeContext: React.Context<Theme | undefined>;
+export type ThemeProviderProps = {
+    theme: ThemeConfig;
+    activeColorScheme: ColorScheme;
+    children?: React.ReactNode;
+};
+export declare const ThemeProvider: ({ theme, activeColorScheme, children }: ThemeProviderProps) => import("react/jsx-runtime").JSX.Element;
+export type InvertedThemeProviderProps = {
+    children?: React.ReactNode;
+};
+/** Falls back to the currently active colorScheme if the inverse colors are not defined in the theme.  */
+export declare const InvertedThemeProvider: ({ children }: InvertedThemeProviderProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ThemeProvider.d.ts.map

package/dts/system/ThemeProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/system/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAClE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAEnE,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAExD,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC;AAEtC,eAAO,MAAM,YAAY,kCAA0D,CAAC;AAMpF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,WAAW,CAAC;IACnB,iBAAiB,EAAE,WAAW,CAAC;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,wCAAwC,kBAAkB,4CAoCvF,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACvC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,0GAA0G;AAC1G,eAAO,MAAM,qBAAqB,GAAI,cAAc,0BAA0B,4CAY7E,CAAC"}

package/dts/system/__figma__/AndroidNavigationBar.figma.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=AndroidNavigationBar.figma.d.ts.map

package/dts/system/__figma__/AndroidNavigationBar.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AndroidNavigationBar.figma.d.ts","sourceRoot":"","sources":["../../../src/system/__figma__/AndroidNavigationBar.figma.tsx"],"names":[],"mappings":""}

package/dts/system/__stories__/Frontier.stories.d.ts

@@ -0,0 +1,3 @@
+declare const FrontierExampleScreen: () => import("react/jsx-runtime").JSX.Element;
+export default FrontierExampleScreen;
+//# sourceMappingURL=Frontier.stories.d.ts.map

package/dts/system/__stories__/Frontier.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Frontier.stories.d.ts","sourceRoot":"","sources":["../../../src/system/__stories__/Frontier.stories.tsx"],"names":[],"mappings":"AAQA,QAAA,MAAM,qBAAqB,+CA8C1B,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/dts/system/__stories__/Palette.stories.d.ts

@@ -0,0 +1,3 @@
+declare const PaletteScreen: () => import("react/jsx-runtime").JSX.Element;
+export default PaletteScreen;
+//# sourceMappingURL=Palette.stories.d.ts.map

package/dts/system/__stories__/Palette.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Palette.stories.d.ts","sourceRoot":"","sources":["../../../src/system/__stories__/Palette.stories.tsx"],"names":[],"mappings":"AA6CA,QAAA,MAAM,aAAa,+CAqClB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dts/system/__stories__/PatternDisclosureHighFrictionBenefit.stories.d.ts

@@ -0,0 +1,3 @@
+declare const PatternDisclosureHighFrictionBenefitScreen: () => import("react/jsx-runtime").JSX.Element;
+export default PatternDisclosureHighFrictionBenefitScreen;
+//# sourceMappingURL=PatternDisclosureHighFrictionBenefit.stories.d.ts.map

package/dts/system/__stories__/PatternDisclosureHighFrictionBenefit.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PatternDisclosureHighFrictionBenefit.stories.d.ts","sourceRoot":"","sources":["../../../src/system/__stories__/PatternDisclosureHighFrictionBenefit.stories.tsx"],"names":[],"mappings":"AAUA,QAAA,MAAM,0CAA0C,+CAmE/C,CAAC;AAEF,eAAe,0CAA0C,CAAC"}

package/dts/system/__stories__/PatternDisclosureHighFrictionRisk.stories.d.ts

@@ -0,0 +1,3 @@
+declare const PatternDisclosureHighFrictionRiskScreen: () => import("react/jsx-runtime").JSX.Element;
+export default PatternDisclosureHighFrictionRiskScreen;
+//# sourceMappingURL=PatternDisclosureHighFrictionRisk.stories.d.ts.map

package/dts/system/__stories__/PatternDisclosureHighFrictionRisk.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PatternDisclosureHighFrictionRisk.stories.d.ts","sourceRoot":"","sources":["../../../src/system/__stories__/PatternDisclosureHighFrictionRisk.stories.tsx"],"names":[],"mappings":"AAWA,QAAA,MAAM,uCAAuC,+CAoG5C,CAAC;AAEF,eAAe,uCAAuC,CAAC"}

package/dts/system/__stories__/PatternDisclosureLowFriction.stories.d.ts

@@ -0,0 +1,3 @@
+declare const PatternDisclosureLowFrictionScreen: () => import("react/jsx-runtime").JSX.Element;
+export default PatternDisclosureLowFrictionScreen;
+//# sourceMappingURL=PatternDisclosureLowFriction.stories.d.ts.map

package/dts/system/__stories__/PatternDisclosureLowFriction.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PatternDisclosureLowFriction.stories.d.ts","sourceRoot":"","sources":["../../../src/system/__stories__/PatternDisclosureLowFriction.stories.tsx"],"names":[],"mappings":"AAUA,QAAA,MAAM,kCAAkC,+CA4EvC,CAAC;AAEF,eAAe,kCAAkC,CAAC"}

package/dts/system/__stories__/PatternDisclosureMedFriction.stories.d.ts

@@ -0,0 +1,3 @@
+declare const PatternDisclosureMedFrictionScreen: () => import("react/jsx-runtime").JSX.Element;
+export default PatternDisclosureMedFrictionScreen;
+//# sourceMappingURL=PatternDisclosureMedFriction.stories.d.ts.map

package/dts/system/__stories__/PatternDisclosureMedFriction.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PatternDisclosureMedFriction.stories.d.ts","sourceRoot":"","sources":["../../../src/system/__stories__/PatternDisclosureMedFriction.stories.tsx"],"names":[],"mappings":"AAUA,QAAA,MAAM,kCAAkC,+CA4EvC,CAAC;AAEF,eAAe,kCAAkC,CAAC"}

package/dts/system/__stories__/PatternError.stories.d.ts

@@ -0,0 +1,3 @@
+declare const PatternTagErrorScreen: () => import("react/jsx-runtime").JSX.Element;
+export default PatternTagErrorScreen;
+//# sourceMappingURL=PatternError.stories.d.ts.map

package/dts/system/__stories__/PatternError.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PatternError.stories.d.ts","sourceRoot":"","sources":["../../../src/system/__stories__/PatternError.stories.tsx"],"names":[],"mappings":"AASA,QAAA,MAAM,qBAAqB,+CAuC1B,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/dts/system/__stories__/Pressable.stories.d.ts

@@ -0,0 +1,3 @@
+declare const PressableScreen: () => import("react/jsx-runtime").JSX.Element;
+export default PressableScreen;
+//# sourceMappingURL=Pressable.stories.d.ts.map

package/dts/system/__stories__/Pressable.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pressable.stories.d.ts","sourceRoot":"","sources":["../../../src/system/__stories__/Pressable.stories.tsx"],"names":[],"mappings":"AAWA,QAAA,MAAM,eAAe,+CA4HpB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dts/system/__stories__/PressableOpacity.stories.d.ts

@@ -0,0 +1,3 @@
+declare const PressableOpacityScreen: () => import("react/jsx-runtime").JSX.Element;
+export default PressableOpacityScreen;
+//# sourceMappingURL=PressableOpacity.stories.d.ts.map

package/dts/system/__stories__/PressableOpacity.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PressableOpacity.stories.d.ts","sourceRoot":"","sources":["../../../src/system/__stories__/PressableOpacity.stories.tsx"],"names":[],"mappings":"AAWA,QAAA,MAAM,sBAAsB,+CAoB3B,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

package/dts/system/__stories__/Spectrum.stories.d.ts

@@ -0,0 +1,4 @@
+export declare const hueSteps: readonly [0, 5, 10, 15, 20, 30, 40, 50, 60, 70, 80, 90, 100];
+declare const SpectrumScreen: () => import("react/jsx-runtime").JSX.Element;
+export default SpectrumScreen;
+//# sourceMappingURL=Spectrum.stories.d.ts.map

package/dts/system/__stories__/Spectrum.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spectrum.stories.d.ts","sourceRoot":"","sources":["../../../src/system/__stories__/Spectrum.stories.tsx"],"names":[],"mappings":"AAoBA,eAAO,MAAM,QAAQ,8DAA+D,CAAC;AAErF,QAAA,MAAM,cAAc,+CA2BnB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dts/system/__stories__/ThemeProvider.stories.d.ts

@@ -0,0 +1,3 @@
+declare const ThemeProviderTest: () => import("react/jsx-runtime").JSX.Element;
+export default ThemeProviderTest;
+//# sourceMappingURL=ThemeProvider.stories.d.ts.map

package/dts/system/__stories__/ThemeProvider.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.stories.d.ts","sourceRoot":"","sources":["../../../src/system/__stories__/ThemeProvider.stories.tsx"],"names":[],"mappings":"AA6GA,QAAA,MAAM,iBAAiB,+CAiBtB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dts/system/__tests__/AndroidNavigationBar.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=AndroidNavigationBar.test.d.ts.map

package/dts/system/__tests__/AndroidNavigationBar.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AndroidNavigationBar.test.d.ts","sourceRoot":"","sources":["../../../src/system/__tests__/AndroidNavigationBar.test.tsx"],"names":[],"mappings":""}

package/dts/system/__tests__/StatusBar.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=StatusBar.test.d.ts.map

package/dts/system/__tests__/StatusBar.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusBar.test.d.ts","sourceRoot":"","sources":["../../../src/system/__tests__/StatusBar.test.tsx"],"names":[],"mappings":""}

package/dts/system/__tests__/useAndroidNavigationBarUpdater.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=useAndroidNavigationBarUpdater.test.d.ts.map

package/dts/system/__tests__/useAndroidNavigationBarUpdater.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAndroidNavigationBarUpdater.test.d.ts","sourceRoot":"","sources":["../../../src/system/__tests__/useAndroidNavigationBarUpdater.test.tsx"],"names":[],"mappings":""}

package/dts/system/index.d.ts

@@ -0,0 +1,8 @@
+export * from './AndroidNavigationBar';
+export * from './EventHandlerProvider';
+export * from './Interactable';
+export * from './Pressable';
+export * from './PressableOpacity';
+export * from './StatusBar';
+export * from './ThemeProvider';
+//# sourceMappingURL=index.d.ts.map

package/dts/system/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/system/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC"}

package/dts/tabs/SegmentedTab.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { type GestureResponderEvent, type PressableProps, type StyleProp, type View, type ViewStyle } from 'react-native';
+import type { ThemeVars } from '@coinbase/cds-common/core/theme';
+import { type TabValue } from '@coinbase/cds-common/tabs/useTabs';
+export type SegmentedTabProps<T extends string = string> = {
+    /**
+     * Text color when the SegmentedTab is active.
+     * @default negativeForeground
+     */
+    activeColor?: ThemeVars.Color;
+    /**
+     * Text color when the SegmentedTab is inactive.
+     * @default foreground
+     */
+    color?: ThemeVars.Color;
+    /** Callback that is fired when the SegmentedTab is pressed. */
+    onPress?: (id: string, event: GestureResponderEvent) => void;
+    style?: StyleProp<ViewStyle>;
+} & TabValue<T> & Omit<PressableProps, 'children' | 'disabled' | 'onPress' | 'style'>;
+type SegmentedTabFC = <T extends string = string>(props: SegmentedTabProps<T> & {
+    ref?: React.ForwardedRef<View>;
+}) => React.ReactElement;
+export declare const SegmentedTab: SegmentedTabFC;
+export {};
+//# sourceMappingURL=SegmentedTab.d.ts.map

package/dts/tabs/SegmentedTab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedTab.d.ts","sourceRoot":"","sources":["../../src/tabs/SegmentedTab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AACtE,OAAO,EACL,KAAK,qBAAqB,EAE1B,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,IAAI,EACT,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAEjE,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AASlE,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI;IACzD;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IAC9B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;IACxB,+DAA+D;IAC/D,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAC7D,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,GAAG,QAAQ,CAAC,CAAC,CAAC,GACb,IAAI,CAAC,cAAc,EAAE,UAAU,GAAG,UAAU,GAAG,SAAS,GAAG,OAAO,CAAC,CAAC;AAItE,KAAK,cAAc,GAAG,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAC9C,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;CAAE,KAC7D,KAAK,CAAC,YAAY,CAAC;AA0FxB,eAAO,MAAM,YAAY,EAA4B,cAAc,CAAC"}

package/dts/tabs/SegmentedTabs.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { View } from 'react-native';
+import { type TabsProps } from './Tabs';
+export type SegmentedTabsProps<T extends string = string> = Partial<Pick<TabsProps<T>, 'TabComponent' | 'TabsActiveIndicatorComponent'>> & Omit<TabsProps<T>, 'TabComponent' | 'TabsActiveIndicatorComponent'>;
+type SegmentedTabsFC = <T extends string = string>(props: SegmentedTabsProps<T> & {
+    ref?: React.ForwardedRef<View>;
+}) => React.ReactElement;
+export declare const SegmentedTabs: SegmentedTabsFC;
+export {};
+//# sourceMappingURL=SegmentedTabs.d.ts.map

package/dts/tabs/SegmentedTabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedTabs.d.ts","sourceRoot":"","sources":["../../src/tabs/SegmentedTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAChD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAIzC,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAE9C,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,OAAO,CACjE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,cAAc,GAAG,8BAA8B,CAAC,CACpE,GACC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,cAAc,GAAG,8BAA8B,CAAC,CAAC;AAEtE,KAAK,eAAe,GAAG,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAC/C,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;CAAE,KAC9D,KAAK,CAAC,YAAY,CAAC;AA8BxB,eAAO,MAAM,aAAa,EAA6B,eAAe,CAAC"}

package/dts/tabs/SegmentedTabsActiveIndicator.d.ts

@@ -0,0 +1,4 @@
+import { type TabsActiveIndicatorProps } from './Tabs';
+export type SegmentedTabsActiveIndicatorProps = TabsActiveIndicatorProps;
+export declare const SegmentedTabsActiveIndicator: ({ borderRadius, ...props }: SegmentedTabsActiveIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SegmentedTabsActiveIndicator.d.ts.map

package/dts/tabs/SegmentedTabsActiveIndicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedTabsActiveIndicator.d.ts","sourceRoot":"","sources":["../../src/tabs/SegmentedTabsActiveIndicator.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAuB,KAAK,wBAAwB,EAAE,MAAM,QAAQ,CAAC;AAE5E,MAAM,MAAM,iCAAiC,GAAG,wBAAwB,CAAC;AAEzE,eAAO,MAAM,4BAA4B,GAAI,4BAG1C,iCAAiC,4CAEnC,CAAC"}

package/dts/tabs/TabIndicator.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import type { View } from 'react-native';
+import type { ThemeVars } from '@coinbase/cds-common/core/theme';
+import type { SharedProps } from '@coinbase/cds-common/types';
+export type TabIndicatorProps = SharedProps & {
+    /** The width of the active TabLabel. */
+    width: number;
+    /** The xPosition of the active TabLabel. */
+    x: number;
+    /** This should always match the background color of the parent container
+     * @default: 'bg'
+     */
+    background?: ThemeVars.Color;
+};
+export declare const TabIndicator: React.MemoExoticComponent<React.ForwardRefExoticComponent<SharedProps & {
+    /** The width of the active TabLabel. */
+    width: number;
+    /** The xPosition of the active TabLabel. */
+    x: number;
+    /** This should always match the background color of the parent container
+     * @default: 'bg'
+     */
+    background?: ThemeVars.Color;
+} & React.RefAttributes<View>>>;
+//# sourceMappingURL=TabIndicator.d.ts.map

package/dts/tabs/TabIndicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabIndicator.d.ts","sourceRoot":"","sources":["../../src/tabs/TabIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAEhD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAM9D,MAAM,MAAM,iBAAiB,GAAG,WAAW,GAAG;IAC5C,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,4CAA4C;IAC5C,CAAC,EAAE,MAAM,CAAC;IACV;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,YAAY;IAVvB,wCAAwC;WACjC,MAAM;IACb,4CAA4C;OACzC,MAAM;IACT;;OAEG;iBACU,SAAS,CAAC,KAAK;+BAiC7B,CAAC"}

package/dts/tabs/TabLabel.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { SharedProps } from '@coinbase/cds-common/types';
+import type { TextProps } from '../typography/Text';
+import type { TabProps } from './TabNavigation';
+export type TabLabelBaseProps = SharedProps & Pick<TabProps, 'variant' | 'count' | 'accessibilityLabel' | 'max' | 'Component'> & {
+    /** Identify the active tab */
+    active?: boolean;
+    /** Display title to render as the TabLabel. */
+    children: React.ReactNode;
+    /** Callback to fire when pressed */
+    onPress?: () => void;
+};
+export type TabLabelProps = TabLabelBaseProps & TextProps;
+export declare const TabLabel: React.MemoExoticComponent<({ active, variant, count, max, ...props }: TabLabelProps) => import("react/jsx-runtime").JSX.Element>;
+//# sourceMappingURL=TabLabel.d.ts.map

package/dts/tabs/TabLabel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabLabel.d.ts","sourceRoot":"","sources":["../../src/tabs/TabLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAEhE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAK9D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAIpD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAahD,MAAM,MAAM,iBAAiB,GAAG,WAAW,GACzC,IAAI,CAAC,QAAQ,EAAE,SAAS,GAAG,OAAO,GAAG,oBAAoB,GAAG,KAAK,GAAG,WAAW,CAAC,GAAG;IACjF,8BAA8B;IAC9B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,+CAA+C;IAC/C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,oCAAoC;IACpC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEJ,MAAM,MAAM,aAAa,GAAG,iBAAiB,GAAG,SAAS,CAAC;AAE1D,eAAO,MAAM,QAAQ,wEACyC,aAAa,6CA0D1E,CAAC"}

package/dts/tabs/TabNavigation.d.ts

@@ -0,0 +1,80 @@
+import React from 'react';
+import { View } from 'react-native';
+import type { ThemeVars } from '@coinbase/cds-common/core/theme';
+import type { SharedAccessibilityProps, SharedProps } from '@coinbase/cds-common/types';
+import type { DotCountBaseProps } from '../dots';
+import { type BoxBaseProps } from '../layout/Box';
+export type TabProps<T extends string | undefined = string> = SharedProps & Partial<Pick<DotCountBaseProps, 'max' | 'count'>> & {
+    /** The id should be a meaningful and useful identifier like "watchlist" or "forSale" */
+    id: T;
+    /** Define a label for this Tab */
+    label: React.ReactNode;
+    /** See the Tabs TDD to understand which variant should be used.
+     *  @default 'primary'
+     */
+    variant?: 'primary' | 'secondary';
+    /** Disable interactions on the tab. */
+    disabled?: boolean;
+    /** Full length accessibility label when the child text is not descriptive enough. */
+    accessibilityLabel?: string;
+    /** Callback to fire when pressed */
+    onPress?: (id: T) => void;
+    /** Render a custom Component for the Tab */
+    Component?: (props: CustomTabProps) => React.ReactNode;
+};
+export type CustomTabProps = Pick<TabProps, 'id'> & {
+    /**
+     * @default false
+     * When true, used to surface an active state for the currently selected tab
+     */
+    active?: boolean;
+    /** Define a label for this Tab */
+    label?: React.ReactNode;
+};
+export type TabNavigationBaseProps<T extends string | undefined = string> = BoxBaseProps & Pick<SharedAccessibilityProps, 'accessibilityLabel' | 'accessibilityLabelledBy'> & Pick<TabProps, 'variant' | 'Component'> & {
+    /** The active tabId
+     *  @default tabs[0].id
+     */
+    value?: T;
+    /** Children should be TabLabels. If you only have one child, don't use tabs 🤪 */
+    tabs: TabProps<T>[];
+    /** Use the onChange handler to deal with any side effects, ie event tracking or showing a tooltip */
+    onChange: ((tabId: T) => void) | React.Dispatch<React.SetStateAction<T>>;
+    /** This should always match the background color of the parent container
+     * @default: 'bg'
+     */
+    background?: ThemeVars.Color;
+    /**
+     * The spacing between Tabs
+     * @default 4
+     */
+    gap?: ThemeVars.Space;
+    /**
+     * Used to generate a11y attributes for the Tabs
+     * If TabNavigation is used to display options that will filter data, use `radiogroup`
+     * If TabNavigation is used to display a list of pages or views, use `tablist`
+     * @default tablist
+     */
+    role?: 'radiogroup' | 'tablist';
+    /**
+     * Web only. Accessibility label for the previous arrow paddle (skip to beginning).
+     */
+    previousArrowAccessibilityLabel?: string | undefined;
+    /**
+     * Web only. Accessibility label for the next arrow paddle (skip to end).
+     */
+    nextArrowAccessibilityLabel?: string | undefined;
+    /**
+     * Web only. Styling for the paddle icon buttons. Mobile does not have paddles.
+     */
+    paddleStyle?: React.CSSProperties;
+    /** @danger This should only be used for accessibility purposes, eg: aria-controls https://accessibilityresources.org/aria-controls */
+    id?: string;
+};
+export type TabNavigationProps<T extends string | undefined = string> = TabNavigationBaseProps<T>;
+type TabNavigationFC = <T extends string | undefined = string>(props: TabNavigationProps<T> & {
+    ref?: React.ForwardedRef<View>;
+}) => React.ReactElement;
+export declare const TabNavigation: TabNavigationFC;
+export {};
+//# sourceMappingURL=TabNavigation.d.ts.map

package/dts/tabs/TabNavigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabNavigation.d.ts","sourceRoot":"","sources":["../../src/tabs/TabNavigation.tsx"],"names":[],"mappings":"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"}

package/dts/tabs/Tabs.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+import { View } from 'react-native';
+import type { ThemeVars } from '@coinbase/cds-common/core/theme';
+import { type TabsOptions, type TabValue } from '@coinbase/cds-common/tabs/useTabs';
+import { type Rect } from '@coinbase/cds-common/types/Rect';
+import type { BoxProps, HStackProps } from '../layout';
+export declare const tabsSpringConfig: {
+    readonly mass: 0.15;
+    readonly stiffness: 160;
+    readonly damping: 10;
+    readonly overshootClamping: true;
+};
+export type TabsActiveIndicatorProps = {
+    activeTabRect: Rect;
+} & BoxProps;
+export type TabComponent<T extends string = string> = React.FC<TabValue<T>>;
+export type TabsActiveIndicatorComponent = React.FC<TabsActiveIndicatorProps>;
+export type TabsProps<T extends string = string> = {
+    /** The array of tabs data. Each tab may optionally define a custom Component to render. */
+    tabs: (TabValue<T> & {
+        Component?: TabComponent<T>;
+    })[];
+    /** The default Component to render each tab. */
+    TabComponent: TabComponent<T>;
+    /** The default Component to render the tabs active indicator. */
+    TabsActiveIndicatorComponent: TabsActiveIndicatorComponent;
+    /** Background color passed to the TabsActiveIndicatorComponent. */
+    activeBackground?: ThemeVars.Color;
+} & Omit<TabsOptions<T>, 'tabs'> & Omit<HStackProps, 'onChange'>;
+type TabsFC = <T extends string = string>(props: TabsProps<T> & {
+    ref?: React.ForwardedRef<View>;
+}) => React.ReactElement;
+export declare const Tabs: TabsFC;
+export declare const TabsActiveIndicator: ({ activeTabRect, position, ...props }: TabsActiveIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Tabs.d.ts.map

package/dts/tabs/Tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../src/tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAQN,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAOpC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAGjE,OAAO,EAEL,KAAK,WAAW,EAChB,KAAK,QAAQ,EAEd,MAAM,mCAAmC,CAAC;AAE3C,OAAO,EAAe,KAAK,IAAI,EAAE,MAAM,iCAAiC,CAAC;AAEzE,OAAO,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAmBvD,eAAO,MAAM,gBAAgB;;;;;CAKQ,CAAC;AAEtC,MAAM,MAAM,wBAAwB,GAAG;IACrC,aAAa,EAAE,IAAI,CAAC;CACrB,GAAG,QAAQ,CAAC;AAEb,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,KAAK,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;AAE5E,MAAM,MAAM,4BAA4B,GAAG,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAAC,CAAC;AAE9E,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI;IACjD,2FAA2F;IAC3F,IAAI,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG;QAAE,SAAS,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAA;KAAE,CAAC,EAAE,CAAC;IACxD,gDAAgD;IAChD,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAC9B,iEAAiE;IACjE,4BAA4B,EAAE,4BAA4B,CAAC;IAC3D,mEAAmE;IACnE,gBAAgB,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC;CACpC,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,GAC9B,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC,CAAC;AAEhC,KAAK,MAAM,GAAG,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EACtC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;CAAE,KACrD,KAAK,CAAC,YAAY,CAAC;AAiFxB,eAAO,MAAM,IAAI,EAAoB,MAAM,CAAC;AAE5C,eAAO,MAAM,mBAAmB,GAAI,uCAIjC,wBAAwB,4CAiC1B,CAAC"}

package/dts/tabs/__figma__/SegmentedTabs.figma.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=SegmentedTabs.figma.d.ts.map

package/dts/tabs/__figma__/SegmentedTabs.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedTabs.figma.d.ts","sourceRoot":"","sources":["../../../src/tabs/__figma__/SegmentedTabs.figma.tsx"],"names":[],"mappings":""}

package/dts/tabs/__figma__/TabNavigation.figma.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=TabNavigation.figma.d.ts.map

package/dts/tabs/__figma__/TabNavigation.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabNavigation.figma.d.ts","sourceRoot":"","sources":["../../../src/tabs/__figma__/TabNavigation.figma.tsx"],"names":[],"mappings":""}