@0xsquid/ui 2.6.3 → 2.6.5-animate-number-beta.0

package/dist/cjs/types/components/badges/PriceChange.d.ts

@@ -1,6 +1,8 @@
 interface PriceChangeProps {
     variant?: "small" | "large";
     value: string | number;
+    highlightText?: boolean;
+    triangle?: "none" | "prefix" | "suffix";
 }
-export declare function PriceChange({ value: rawValue, variant, }: PriceChangeProps): import("react/jsx-runtime").JSX.Element;
+export declare function PriceChange({ value: rawValue, variant, highlightText, triangle, }: PriceChangeProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/types/components/badges/index.d.ts

@@ -2,7 +2,7 @@ export * from "./BadgeImage";
 export * from "./IconLabel";
 export * from "./Image";
 export * from "./ImageGroup";
-export * from "./LoadingSkeleton";
+export * from "../feedback/LoadingSkeleton";
 export * from "./PriceChange";
 export * from "./TransactionState";
 export * from "./UsdAmount";

package/dist/cjs/types/components/buttons/Button.d.ts

@@ -9,11 +9,15 @@ interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
     disabled?: boolean;
     link?: string;
     isLoading?: boolean;
+    isShimmering?: boolean;
     showLoader?: boolean;
+    loaderSize?: LoaderSize;
     chip?: ChipProps;
     containerClassName?: string;
     buttonRef?: React.Ref<HTMLButtonElement>;
     anchorRef?: React.Ref<HTMLAnchorElement>;
 }
-export declare function Button({ label, disabled, size, variant, icon, link, isLoading, showLoader, chip, containerClassName, anchorRef, buttonRef, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+type LoaderSize = "sm" | "md" | "lg";
+export declare const buttonRoundedClassMap: Record<ButtonSize, Record<ButtonVariant, string>>;
+export declare function Button({ label, disabled, size, variant, icon, link, isLoading, isShimmering, showLoader, loaderSize, chip, containerClassName, anchorRef, buttonRef, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/types/components/buttons/Chip.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface ChipProps extends React.HTMLAttributes<HTMLDivElement | HTMLButtonElement> {
     label?: string;
     icon?: React.ReactNode;
 }

package/dist/cjs/types/components/controls/LargeNumericInput.d.ts

@@ -0,0 +1,2 @@
+import { type NumericInputProps } from "./NumericInput";
+export declare function LargeNumericInput({ balance, token, onAmountChange, forcedAmount, maxUsdDecimals, formatIfVerySmall, inputModeButton, balanceButton, debounceInput, }: NumericInputProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/types/components/controls/NumericInput.d.ts

@@ -1,12 +1,13 @@
 /// <reference types="react" />
+import { UserInputType } from "../../hooks/useNumericInput";
 import { type SwapDirection } from "../../types/components";
 import { type TooltipProps } from "./Tooltip";
-interface Token {
+export interface Token {
     price: number;
     symbol: string;
     decimals: number;
 }
-interface NumericInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+export interface NumericInputProps {
     token: Token;
     onAmountChange: (tokenAmount: string) => void;
     forcedAmount?: string;
@@ -14,26 +15,34 @@ interface NumericInputProps extends React.InputHTMLAttributes<HTMLInputElement>
         token: string;
         usd: string;
     };
-    showDetails?: boolean;
-    isLoading?: boolean;
-    error?: {
-        message: string;
-    };
     balance?: string;
-    priceImpactPercentage?: string;
-    criticalPriceImpactPercentage?: number;
-    direction?: SwapDirection;
     inputModeButton?: {
         usdModeTooltip?: Omit<TooltipProps, "children">;
         tokenModeTooltip?: Omit<TooltipProps, "children">;
         amountUsd?: string;
     };
     maxUsdDecimals?: number;
-    isInteractive?: boolean;
     balanceButton?: {
         tooltip?: Omit<TooltipProps, "children">;
         hideMaxChip?: boolean;
     };
+    debounceInput?: boolean;
+    initialInputMode?: UserInputType;
+    customSymbol?: string;
+    hideControls?: boolean;
+    hideBalance?: boolean;
+    containerClassName?: string;
+    inputClassName?: string;
+}
+export interface Props extends NumericInputProps, React.InputHTMLAttributes<HTMLInputElement> {
+    direction?: SwapDirection;
+    showDetails?: boolean;
+    isLoading?: boolean;
+    isInteractive?: boolean;
+    priceImpactPercentage?: string;
+    criticalPriceImpactPercentage?: number;
+    error?: {
+        message: string;
+    };
 }
-export declare function NumericInput({ priceImpactPercentage, balance, error, criticalPriceImpactPercentage, token, onAmountChange, forcedAmount, maxUsdDecimals, formatIfVerySmall, showDetails, isLoading, direction, inputModeButton, isInteractive, balanceButton, ...props }: NumericInputProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare function NumericInput({ priceImpactPercentage, balance, error, criticalPriceImpactPercentage, token, onAmountChange, forcedAmount, maxUsdDecimals, formatIfVerySmall, showDetails, isLoading, direction, inputModeButton, isInteractive, balanceButton, debounceInput, initialInputMode, customSymbol, hideControls, hideBalance, containerClassName, inputClassName, ...props }: Props): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/types/components/controls/Switch.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { SwitchSize } from "../../types/components";
+import { type SwitchSize } from "../../types/components";
 export interface SwitchProps {
     checked?: boolean;
     onChange?: (checked: boolean) => void;

package/dist/cjs/types/components/controls/index.d.ts

@@ -1,6 +1,7 @@
 export * from "./Input";
+export * from "./LargeNumericInput";
 export * from "./NumericInput";
+export * from "./RangeInput";
 export * from "./SettingsSlider";
 export * from "./Switch";
 export * from "./Tooltip";
-export * from "./RangeInput";

package/dist/cjs/types/components/feedback/AnimateNumber.d.ts

@@ -0,0 +1,8 @@
+interface AnimateNumberProps {
+    number: string;
+    showMask?: boolean;
+    className?: string;
+    isLoading?: boolean;
+}
+export declare function AnimateNumber({ isLoading, number, showMask, className, }: AnimateNumberProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/types/components/feedback/LoadingText.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { type ButtonVariant } from "../../types/components";
+interface LoadingTextProps extends React.HTMLAttributes<HTMLSpanElement> {
+    variant?: ButtonVariant;
+}
+export declare function LoadingText({ children, className, ...props }: LoadingTextProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/types/components/icons/Generic.d.ts

@@ -114,3 +114,11 @@ export declare function MoneyBagIcon({ className, size, }: {
     className?: string;
     size?: string;
 }): import("react/jsx-runtime").JSX.Element;
+export declare function PluginIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function CircleCheckIcon({ className, size, }: {
+    className?: string;
+    size?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/types/components/icons/Loader.d.ts

@@ -1,4 +1,4 @@
-import { ComponentProps } from "react";
+import { type ComponentProps } from "react";
 interface LoaderProps extends ComponentProps<"svg"> {
     size?: string;
     strokeWidth?: string;

package/dist/cjs/types/components/icons/PaymentIcons.d.ts

@@ -0,0 +1,12 @@
+export declare function GooglePayIcon({ className, size, }: {
+    className?: string;
+    size?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function ApplePayIcon({ className, size, }: {
+    className?: string;
+    size?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function CreditCardIcon({ className, size, }: {
+    className?: string;
+    size?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/types/components/icons/SwapInputs.d.ts

@@ -1,4 +1,7 @@
-export declare function SwapInputsIcon(): import("react/jsx-runtime").JSX.Element;
+export declare function SwapInputsIcon({ size, className, }: {
+    size?: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
 export declare function SwapIcon({ size, className, }: {
     size?: string;
     className?: string;

package/dist/cjs/types/components/icons/index.d.ts

@@ -32,6 +32,7 @@ export * from "./Loader";
 export * from "./MarketIcons";
 export * from "./Max";
 export * from "./NotAllowed";
+export * from "./PaymentIcons";
 export * from "./Percent";
 export * from "./PieChart";
 export * from "./Plus";

package/dist/cjs/types/components/layout/AnimationWrapper.d.ts

@@ -3,4 +3,7 @@ import { Player } from "@lottiefiles/react-lottie-player";
 interface Props extends React.ComponentProps<typeof Player> {
 }
 export declare const AnimationWrapper: (playerProps: Props) => import("react/jsx-runtime").JSX.Element;
+export declare function AnimationCard({ children }: {
+    children?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/types/components/layout/ModalTitle.d.ts

@@ -0,0 +1,5 @@
+interface ModalTitleProps {
+    title: string;
+}
+export declare function ModalTitle({ title }: ModalTitleProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/types/components/layout/SwapConfiguration.d.ts

@@ -1,5 +1,17 @@
 import { type AssetsButtonVariant, type SwapDirection } from "../../types/components";
 import { type TooltipProps } from "../controls";
+interface AddressHeaderProps {
+    direction: SwapDirection;
+    onClick?: () => void;
+    isDisabled?: boolean;
+    tooltip?: TooltipProps["tooltipContent"];
+    label: string;
+    walletIconUrl?: string | null;
+    isLoading?: boolean;
+    displayLabel?: boolean;
+    highlightLabel?: boolean;
+}
+export declare const AddressHeader: ({ direction, onClick, isDisabled, tooltip, label, walletIconUrl, isLoading, displayLabel, highlightLabel, }: AddressHeaderProps) => import("react/jsx-runtime").JSX.Element;
 interface SwapConfigurationProps {
     direction: SwapDirection;
     priceImpactPercentage?: string;
@@ -46,8 +58,12 @@ interface SwapConfigurationProps {
         address?: string;
         emptyAddressLabel?: string;
         disabled?: boolean;
+        walletIconUrl?: string | null;
     };
     showNumericInputDetails?: boolean;
+    fullHeight?: boolean;
+    debounceInput?: boolean;
+    showWalletButtonHeader?: boolean;
 }
-export declare function SwapConfiguration({ amount, tokenPrice, isFetching: isFetchingProp, chain, token, direction, onAmountChange, balance, criticalPriceImpactPercentage, error, priceImpactPercentage, maxUsdDecimals, isInputInteractive, isLoading, inputModeButton, balanceButton, assetsButton, walletButton, showNumericInputDetails, }: SwapConfigurationProps): import("react/jsx-runtime").JSX.Element;
+export declare function SwapConfiguration({ amount, tokenPrice, isFetching: isFetchingProp, chain, token, direction, onAmountChange, balance, criticalPriceImpactPercentage, error, priceImpactPercentage, maxUsdDecimals, isInputInteractive, isLoading, inputModeButton, balanceButton, assetsButton, walletButton, showNumericInputDetails, fullHeight, debounceInput, showWalletButtonHeader, }: SwapConfigurationProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/types/components/layout/index.d.ts

@@ -16,6 +16,7 @@ export * from "./Join";
 export * from "./Menu";
 export * from "./Modal";
 export * from "./ModalContent";
+export * from "./ModalTitle";
 export * from "./NavigationBar";
 export * from "./PipeSeparator";
 export * from "./ProductCard";

package/dist/cjs/types/components/lists/HistoryItem.d.ts

@@ -13,6 +13,7 @@ interface HistoryItemProps {
     onClick?: () => void;
     warningLabel?: string;
     dropdownMenuContent?: React.ReactNode;
+    txType: "swap" | "send";
 }
-export declare function HistoryItem({ firstImageUrl, secondImageUrl, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, dropdownMenuContent, itemsContainerRef, status, warningLabel, onClick, }: HistoryItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function HistoryItem({ firstImageUrl, secondImageUrl, dateCompleted, fromAmount, fromLabel, toAmount, toLabel, dropdownMenuContent, itemsContainerRef, status, warningLabel, txType, onClick, }: HistoryItemProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/types/components/lists/ListItem.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { type ImageRoundedSize } from "../../types/components";
+type HTMLInteractiveItem = HTMLButtonElement | HTMLDivElement | HTMLLabelElement;
 interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
     itemTitle: string | React.ReactNode;
     mainImageUrl?: string;
@@ -27,9 +28,11 @@ interface ListItemProps extends React.HTMLAttributes<HTMLButtonElement> {
     itemsContainerRef?: React.RefObject<HTMLElement>;
     imageGroup?: string[];
     multilineSubtitle?: boolean;
+    control?: React.ReactNode;
+    onClick?: (event: React.MouseEvent<HTMLInteractiveItem>) => void;
 }
 type ListItemSize = "small" | "large";
-export declare function ListItem({ itemTitle, mainImageUrl, subtitle, subtitleOnHover, detail, icon, secondaryImageUrl, placeholderImageUrl, size, mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded, detailButtonClassName, loading, containerProps, compactOnMobile, extraPadding, itemsContainerRef, dropdownMenuContent, imageGroup, multilineSubtitle, ...props }: ListItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function ListItem({ itemTitle, mainImageUrl, subtitle, subtitleOnHover, detail, icon, secondaryImageUrl, placeholderImageUrl, size, mainIcon, className, isSelected, onDetailClick, showDetailOnHoverOnly, rounded, detailButtonClassName, loading, containerProps, compactOnMobile, extraPadding, itemsContainerRef, dropdownMenuContent, imageGroup, multilineSubtitle, control, ...props }: ListItemProps): import("react/jsx-runtime").JSX.Element;
 export declare const ListItemActionsButton: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
     isActive?: boolean | undefined;
 }, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/cjs/types/components/navigation/Tabs.d.ts

@@ -3,16 +3,19 @@ type TabSize = "small" | "large";
 interface TabsProps {
     tabs: Array<{
         label: string;
+        isDisabled?: boolean;
     }>;
     size?: TabSize;
     activeTab?: number;
     onTabChange?: (tabIndex: number) => void;
+    isDisabled?: boolean;
 }
-export declare function Tabs({ tabs, size, onTabChange, activeTab, }: TabsProps): import("react/jsx-runtime").JSX.Element;
+export declare function Tabs({ tabs, size, onTabChange, activeTab, isDisabled, }: TabsProps): import("react/jsx-runtime").JSX.Element;
 interface TabProps extends React.ComponentProps<"button"> {
     label: string;
     size: TabSize;
     isActive?: boolean;
+    isDisabled?: boolean;
 }
-export declare function Tab({ label, isActive, size, ...props }: TabProps): import("react/jsx-runtime").JSX.Element;
+export declare function Tab({ label, isActive, size, isDisabled, ...props }: TabProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/types/components/views/SwapProgressView.d.ts

@@ -10,7 +10,7 @@ interface Token {
     logoUrl: string;
     bgColor: string;
 }
-export declare function SwapProgressView({ steps, isOpen, handleClose, handleComplete, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, swapState, estimatedTimeToComplete, footerButton, refundTokenSymbol, addGasLink, shareSwapDropdownContent, }: {
+export declare function SwapProgressView({ steps, isOpen, handleClose, handleComplete, supportLink, fromAmount, fromChain, fromToken, toAmount, toChain, toToken, fromAddressFormatted, toAddressFormatted, swapState, estimatedTimeToComplete, footerButton, refundTokenSymbol, addGasLink, shareSwapDropdownContent, isSendTransaction, }: {
     steps: SwapStep[];
     handleClose?: (swapState: SwapState) => void;
     handleComplete?: () => void;
@@ -30,5 +30,6 @@ export declare function SwapProgressView({ steps, isOpen, handleClose, handleCom
     footerButton?: SwapStepsCollapsedFooterButton;
     refundTokenSymbol?: string;
     addGasLink?: string;
+    isSendTransaction?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/types/core/design-system.d.ts

@@ -6,6 +6,7 @@ export declare const spacing: {
     "squid-m": string;
     "squid-l": string;
     "squid-xl": string;
+    "squid-xl2": string;
     "squid-xxl": string;
 };
 export declare const boxShadow: {

package/dist/cjs/types/core/index.d.ts

@@ -1,4 +1,4 @@
 export { MEDIA_QUERIES, CSS_VARS, ANIMATION_DURATIONS } from "./constants";
 export { darkTheme, lightTheme } from "./themes";
 export { baseTailwindConfig, spacing } from "./design-system";
-export { cn } from "./utils";
+export { cn, pxToRem, remToPx } from "./utils";

package/dist/cjs/types/core/utils.d.ts

@@ -65,4 +65,27 @@ export declare function replaceKeys(obj: Record<string, any>, options: ReplaceKe
  * mapToCssVariables({ "accent-gold": { cssVariable: "--accent-gold" } }) -> { "accent-gold": "var(--accent-gold)" }
  */
 export declare function mapToCssVariables<T extends Record<string, any>>(obj: T): Record<keyof T & string, string>;
+/**
+ * Simple hash function to create a deterministic index from a given string.
+ * @param {string} str - The input string to hash.
+ * @param {number} max - The maximum value for the hash.
+ * @returns {number} - The index within the array.
+ */
+export declare function hashStringToIndex(str: string, max: number): number;
+/**
+ * Formats a value for CSS properties by adding 'px' if no unit is present.
+ * @param {string | number} value - The value to format (can be a number or string)
+ * @returns {string} - The formatted CSS value with appropriate units
+ *
+ * @example
+ * // Returns "20px"
+ * formatCSSValue(20)
+ *
+ * @example
+ * // Returns "5rem"
+ * formatCSSValue("5rem")
+ */
+export declare function formatCSSValue(value: string | number): string;
+export declare const remToPx: (rem: string | number, baseFontSize?: number) => number;
+export declare const pxToRem: (px: string | number, baseFontSize?: number) => number;
 export {};

package/dist/cjs/types/hooks/index.d.ts

@@ -1,7 +1,8 @@
+export * from "./useCollapsibleMenu";
 export * from "./useDropdownMenu";
 export * from "./useMediaQuery";
-export * from "./useCollapsibleMenu";
+export * from "./useNumericInput";
 export * from "./useRect";
-export * from "./useVersion";
 export * from "./useTimer";
 export * from "./useUserTheme";
+export * from "./useVersion";

package/dist/cjs/types/hooks/useColorFromSeed.d.ts

@@ -0,0 +1 @@
+export declare function useColorFromSeed(seed: string): string | undefined;

package/dist/cjs/types/hooks/useMeasure.d.ts

@@ -0,0 +1,36 @@
+declare type ResizeObserverCallback = (entries: any[], observer: ResizeObserver) => void;
+declare class ResizeObserver {
+    constructor(callback: ResizeObserverCallback);
+    observe(target: Element, options?: any): void;
+    unobserve(target: Element): void;
+    disconnect(): void;
+    static toString(): string;
+}
+export interface RectReadOnly {
+    readonly x: number;
+    readonly y: number;
+    readonly width: number;
+    readonly height: number;
+    readonly top: number;
+    readonly right: number;
+    readonly bottom: number;
+    readonly left: number;
+    [key: string]: number;
+}
+type HTMLOrSVGElement = HTMLElement | SVGElement;
+type Result = [
+    (element: HTMLOrSVGElement | null) => void,
+    RectReadOnly,
+    () => void
+];
+export interface Options {
+    debounce?: number | {
+        scroll: number;
+        resize: number;
+    };
+    scroll?: boolean;
+    polyfill?: new (cb: ResizeObserverCallback) => ResizeObserver;
+    offsetSize?: boolean;
+}
+declare function useMeasure({ debounce, scroll, polyfill, offsetSize }?: Options): Result;
+export default useMeasure;

package/dist/cjs/types/hooks/useNumericInput.d.ts

@@ -0,0 +1,35 @@
+import { type ChangeEvent } from "react";
+import { type Token } from "../components/controls/NumericInput";
+export declare enum UserInputType {
+    TOKEN = 0,
+    USD = 1
+}
+interface UseNumericInputOptions {
+    token: Pick<Token, "decimals" | "price">;
+    onAmountChange: (tokenAmount: string) => void;
+    forcedAmount?: string;
+    formatIfVerySmall: {
+        token: string;
+        usd: string;
+    };
+    balance: string;
+    inputModeButton?: {
+        amountUsd?: string;
+    };
+    maxUsdDecimals?: number;
+    debounceInput?: boolean;
+    direction?: "from" | "to";
+    initialInputMode?: UserInputType;
+}
+export declare function useNumericInput({ onAmountChange, token, balance, debounceInput, forcedAmount, formatIfVerySmall, inputModeButton, maxUsdDecimals, direction, initialInputMode, }: UseNumericInputOptions): {
+    userInputType: UserInputType;
+    inputValue: string;
+    handleInputChange: (e: ChangeEvent<HTMLInputElement>) => void;
+    handleSwitchInputMode: () => void;
+    isTokenAmountVerySmall: boolean;
+    isUsdAmountVerySmall: boolean;
+    amountFormatted: string;
+    onBalanceButtonClick: () => void;
+    balanceFormatted: string;
+};
+export {};

package/dist/cjs/types/services/internal/colorService.d.ts

@@ -12,8 +12,6 @@ interface RGB {
  * @param style
  */
 export declare const parseSquidTheme: (userTheme: Theme, themeType: ThemeType) => Record<string, string | undefined> | undefined;
-export declare const remToPx: (rem: string | number, baseFontSize?: number) => number;
-export declare const pxToRem: (px: string | number, baseFontSize?: number) => number;
 export declare function getContrastColor({ r, g, b, }: {
     r: number;
     g: number;

package/dist/cjs/types/stories/buttons/AssetsButton.stories.d.ts

@@ -13,3 +13,4 @@ export declare const ChainAndTokenLightText: Story;
 export declare const ChainAndTokenDarkText: Story;
 export declare const LongTokenSymbol: Story;
 export declare const Tooltip: Story;
+export declare const BrokenTokenImage: Story;

package/dist/cjs/types/stories/buttons/Button.stories.d.ts

@@ -3,32 +3,50 @@ import { Button } from "../../components/buttons/Button";
 declare const meta: Meta<typeof Button>;
 export default meta;
 type Story = StoryObj<typeof meta>;
+export declare const SmallPrimary: Story;
 export declare const MediumPrimary: Story;
+export declare const LargePrimary: Story;
+export declare const SmallSecondary: Story;
 export declare const MediumSecondary: Story;
+export declare const LargeSecondary: Story;
+export declare const SmallTertiary: Story;
 export declare const MediumTertiary: Story;
+export declare const LargeTertiary: Story;
+export declare const SmallDisabled: Story;
 export declare const MediumDisabled: Story;
-export declare const MediumAndLink: Story;
-export declare const MediumAndLinkDisabled: Story;
-export declare const MediumPrimaryIconOnly: Story;
-export declare const MediumSecondaryIconOnly: Story;
-export declare const MediumTertiaryIconOnly: Story;
+export declare const LargeDisabled: Story;
+export declare const SmallWithLink: Story;
+export declare const MediumWithLink: Story;
+export declare const LargeWithLink: Story;
+export declare const SmallDisabledWithLink: Story;
+export declare const MediumDisabledWithLink: Story;
+export declare const LargeDisabledWithLink: Story;
+export declare const SmallIconOnly: Story;
+export declare const MediumIconOnly: Story;
+export declare const LargeIconOnly: Story;
+export declare const SmallDisabledIconOnly: Story;
 export declare const MediumDisabledIconOnly: Story;
-export declare const MediumPrimaryIconAndLabel: Story;
-export declare const MediumSecondaryIconAndLabel: Story;
-export declare const MediumTertiaryIconAndLabel: Story;
+export declare const LargeDisabledIconOnly: Story;
+export declare const SmallIconAndLabel: Story;
+export declare const MediumIconAndLabel: Story;
+export declare const LargeIconAndLabel: Story;
 export declare const MediumDisabledIconAndLabel: Story;
-export declare const LargePrimary: Story;
-export declare const LargeSecondary: Story;
-export declare const LargeTertiary: Story;
-export declare const LargeDisabled: Story;
-export declare const LargeAndLink: Story;
-export declare const LargeAndLinkDisabled: Story;
+export declare const SmallWithLoader: Story;
+export declare const MediumWithLoader: Story;
 export declare const LargeWithLoader: Story;
 export declare const LargeDisabledWithLoader: Story;
+export declare const SmallWithIconLoading: Story;
 export declare const MediumWithIconLoading: Story;
+export declare const LargeWithIconLoading: Story;
+export declare const SmallWithLabelLoading: Story;
 export declare const MediumWithLabelLoading: Story;
-export declare const MediumWithLongLabelLoading: Story;
 export declare const LargeWithLabelLoading: Story;
+export declare const SmallWithLongLabelLoading: Story;
+export declare const MediumWithLongLabelLoading: Story;
 export declare const LargeWithLongLabelLoading: Story;
+export declare const SmallWithLongLabelShimmer: Story;
+export declare const MediumWithLongLabelShimmer: Story;
+export declare const LargeWithLongLabelShimmer: Story;
+export declare const SmallWithChip: Story;
 export declare const MediumWithChip: Story;
 export declare const LargeWithChip: Story;

package/dist/cjs/types/stories/buttons/Chip.stories.d.ts

@@ -1,7 +1,8 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { type Meta, type StoryObj } from "@storybook/react";
 import { Chip } from "../../components/buttons/Chip";
 declare const meta: Meta<typeof Chip>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Text: Story;
 export declare const Icon: Story;
+export declare const Interactive: Story;

package/dist/cjs/types/stories/controls/Input.stories.d.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { type Meta, type StoryObj } from "@storybook/react";
 import { Input } from "../../components/controls/Input";
 declare const meta: Meta<typeof Input>;
 export default meta;

package/dist/cjs/types/stories/controls/LargeNumericInput.stories.d.ts

@@ -0,0 +1,6 @@
+import { type Meta, type StoryObj } from "@storybook/react";
+import { LargeNumericInput } from "../../components/controls/LargeNumericInput";
+declare const meta: Meta<typeof LargeNumericInput>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/cjs/types/stories/controls/NumericInput.stories.d.ts

@@ -0,0 +1,17 @@
+import { type Meta, type StoryObj } from "@storybook/react";
+import { NumericInput } from "../../components/controls/NumericInput";
+declare const meta: Meta<typeof NumericInput>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const FiatOnRampStyle: Story;
+export declare const FiatOnRampStyleLoading: Story;
+export declare const CustomSymbol: Story;
+export declare const MinimalVersion: Story;
+export declare const MinimalVersionWithCustomSymbol: Story;
+export declare const MinimalVersionWithBigSymbol: Story;
+export declare const WithError: Story;
+export declare const WithPriceImpact: Story;
+export declare const WithTooltips: Story;
+export declare const Loading: Story;
+export declare const NonInteractive: Story;

package/dist/cjs/types/stories/controls/Switch.stories.d.ts

@@ -1,11 +1,13 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { type Meta, type StoryObj } from "@storybook/react";
 import { Switch } from "../../components/controls/Switch";
 declare const meta: Meta<typeof Switch>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const LargeChecked: Story;
 export declare const LargeUnchecked: Story;
-export declare const LargeDisabled: Story;
+export declare const LargeCheckedDisabled: Story;
+export declare const LargeUncheckedDisabled: Story;
 export declare const SmallChecked: Story;
 export declare const SmallUnchecked: Story;
-export declare const SmallDisabled: Story;
+export declare const SmallCheckedDisabled: Story;
+export declare const SmallUncheckedDisabled: Story;

package/dist/cjs/types/stories/feedback/AnimateNumber.stories.d.ts

@@ -0,0 +1,6 @@
+import { type Meta, type StoryObj } from "@storybook/react";
+import AnimateNumber from "../../components/feedback/AnimateNumber";
+declare const meta: Meta<typeof AnimateNumber>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/{esm/types/stories/badges → cjs/types/stories/feedback}/Loader.stories.d.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { type Meta, type StoryObj } from "@storybook/react";
 import { Loader } from "../../components/icons/Loader";
 declare const meta: Meta<typeof Loader>;
 export default meta;