@orion-ds/react 4.2.1 → 4.2.4

package/dist/components/Sidebar/Sidebar.types.d.ts

@@ -0,0 +1,162 @@
+import { HTMLAttributes, ReactNode } from 'react';
+
+/**
+ * Sidebar navigation item
+ */
+export interface SidebarItem {
+    /**
+     * Unique identifier
+     */
+    id: string;
+    /**
+     * Display label
+     */
+    label: string;
+    /**
+     * Navigation URL
+     */
+    href?: string;
+    /**
+     * Click handler (alternative to href)
+     */
+    onClick?: () => void;
+    /**
+     * Icon element (Lucide icon recommended)
+     */
+    icon?: ReactNode;
+    /**
+     * Badge content (count, status, etc.)
+     */
+    badge?: ReactNode;
+    /**
+     * Nested items for sub-navigation
+     */
+    children?: SidebarItem[];
+    /**
+     * Disabled state
+     */
+    disabled?: boolean;
+}
+/**
+ * Sidebar section grouping
+ */
+export interface SidebarSection {
+    /**
+     * Section title (optional)
+     */
+    title?: string;
+    /**
+     * Items in this section
+     */
+    items: SidebarItem[];
+}
+/**
+ * Sidebar visual variant
+ */
+export type SidebarVariant = "default" | "floating";
+/**
+ * Sidebar section props
+ *
+ * @example
+ * ```tsx
+ * <Sidebar
+ *   sections={[
+ *     {
+ *       items: [
+ *         { id: 'dashboard', label: 'Dashboard', icon: <Home />, href: '/' },
+ *         { id: 'projects', label: 'Projects', icon: <Folder />, href: '/projects' }
+ *       ]
+ *     }
+ *   ]}
+ *   activeItem="dashboard"
+ * />
+ * ```
+ */
+export interface SidebarProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * Array of navigation sections
+     */
+    sections: SidebarSection[];
+    /**
+     * Currently active item ID
+     */
+    activeItem?: string;
+    /**
+     * Collapsed state (icon-only)
+     * @default false
+     */
+    collapsed?: boolean;
+    /**
+     * Callback when collapse state changes
+     */
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /**
+     * Header content (logo, app name)
+     */
+    header?: ReactNode;
+    /**
+     * Footer content (user menu, settings)
+     */
+    footer?: ReactNode;
+    /**
+     * Visual variant
+     * - default: Standard sidebar
+     * - floating: Floating overlay style
+     * @default 'default'
+     */
+    variant?: SidebarVariant;
+    /**
+     * Width in pixels (when not collapsed)
+     * @default 240
+     */
+    width?: number;
+    /**
+     * Collapsed width in pixels
+     * @default 64
+     */
+    collapsedWidth?: number;
+}
+/**
+ * Sidebar.Item sub-component props
+ */
+export interface SidebarItemProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * Item data
+     */
+    item: SidebarItem;
+    /**
+     * Whether this item is active
+     */
+    active?: boolean;
+    /**
+     * Collapsed mode
+     */
+    collapsed?: boolean;
+    /**
+     * Nesting depth for indentation
+     */
+    depth?: number;
+}
+/**
+ * Sidebar.Section sub-component props
+ */
+export interface SidebarSectionProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Section data
+     */
+    section: SidebarSection;
+    /**
+     * Currently active item ID
+     */
+    activeItem?: string;
+    /**
+     * Collapsed mode
+     */
+    collapsed?: boolean;
+}
+/**
+ * Sidebar.Divider sub-component props
+ */
+export interface SidebarDividerProps extends HTMLAttributes<HTMLHRElement> {
+}
+//# sourceMappingURL=Sidebar.types.d.ts.map

package/dist/components/Sidebar/Sidebar.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.types.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/Sidebar.types.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;OAEG;IACH,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC;IAEzB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,KAAK,EAAE,WAAW,EAAE,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,UAAU,CAAC;AAEpD;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC/D;;OAEG;IACH,QAAQ,EAAE,cAAc,EAAE,CAAC;IAE3B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAEjD;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC;IAEzB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED;;GAEG;AACH,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,WAAW,CAAC;IACnE;;OAEG;IACH,IAAI,EAAE,WAAW,CAAC;IAElB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACzE;;OAEG;IACH,OAAO,EAAE,cAAc,CAAC;IAExB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAC,aAAa,CAAC;CAAG"}

package/dist/components/Sidebar/index.d.ts

@@ -0,0 +1,3 @@
+export { Sidebar } from './Sidebar';
+export type { SidebarProps, SidebarVariant, SidebarItem, SidebarSection, SidebarItemProps, SidebarSectionProps, SidebarDividerProps, } from './Sidebar.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Sidebar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EACV,YAAY,EACZ,cAAc,EACd,WAAW,EACX,cAAc,EACd,gBAAgB,EAChB,mBAAmB,EACnB,mBAAmB,GACpB,MAAM,iBAAiB,CAAC"}

package/dist/components/Skeleton/Skeleton.d.ts

@@ -0,0 +1,4 @@
+import { SkeletonProps } from './Skeleton.types';
+
+export declare const Skeleton: import('react').ForwardRefExoticComponent<SkeletonProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Skeleton.d.ts.map

package/dist/components/Skeleton/Skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAGH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGtD,eAAO,MAAM,QAAQ,0GA8DpB,CAAC"}

package/dist/components/Skeleton/Skeleton.module.css

@@ -0,0 +1 @@
+._skeleton_1gy8f_9{background-color:var(--surface-layer);display:block}._text_1gy8f_18{width:100%;height:1em;border-radius:var(--radius-sm)}._circular_1gy8f_24{border-radius:50%}._rectangular_1gy8f_28{border-radius:0}._rounded_1gy8f_32{border-radius:var(--radius-control)}._pulse_1gy8f_40{animation:_pulse_1gy8f_40 1.5s ease-in-out infinite}._wave_1gy8f_44{position:relative;overflow:hidden}._wave_1gy8f_44:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--surface-subtle),transparent);animation:_wave_1gy8f_44 1.5s linear infinite}._none_1gy8f_65{animation:none}@keyframes _pulse_1gy8f_40{0%,to{opacity:1}50%{opacity:.4}}@keyframes _wave_1gy8f_44{0%{transform:translate(-100%)}to{transform:translate(100%)}}._lines_1gy8f_92{display:flex;flex-direction:column;gap:var(--spacing-2)}@media(prefers-reduced-motion:reduce){._pulse_1gy8f_40,._wave_1gy8f_44{animation:none}._wave_1gy8f_44:after{animation:none}}

package/dist/components/Skeleton/Skeleton.stories.d.ts

@@ -0,0 +1,20 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Skeleton } from './Skeleton';
+
+declare const meta: Meta<typeof Skeleton>;
+export default meta;
+type Story = StoryObj<typeof Skeleton>;
+export declare const Default: Story;
+export declare const Text: Story;
+export declare const TextMultipleLines: Story;
+export declare const Circular: Story;
+export declare const Rectangular: Story;
+export declare const Rounded: Story;
+export declare const WaveAnimation: Story;
+export declare const NoAnimation: Story;
+export declare const CardSkeleton: Story;
+export declare const ProfileSkeleton: Story;
+export declare const TableRowSkeleton: Story;
+export declare const AnimationComparison: Story;
+export declare const AllVariants: Story;
+//# sourceMappingURL=Skeleton.stories.d.ts.map

package/dist/components/Skeleton/Skeleton.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/Skeleton.stories.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAuB/B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,QAAQ,CAAC,CAAC;AAEvC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAKlB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAM/B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAMzB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAM3B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAMzB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KA8B1B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAc7B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KA0B9B,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KA4CjC,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KA4DzB,CAAC"}

package/dist/components/Skeleton/Skeleton.types.d.ts

@@ -0,0 +1,52 @@
+import { HTMLAttributes } from 'react';
+
+/**
+ * Skeleton shape variants
+ */
+export type SkeletonVariant = "text" | "circular" | "rectangular" | "rounded";
+/**
+ * Skeleton animation types
+ */
+export type SkeletonAnimation = "pulse" | "wave" | "none";
+/**
+ * Skeleton component props
+ *
+ * @example
+ * ```tsx
+ * <Skeleton width={200} height={20} />
+ * <Skeleton variant="circular" width={40} height={40} />
+ * <Skeleton variant="rectangular" width="100%" height={200} />
+ * ```
+ */
+export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Shape variant of the skeleton
+     * @default 'text'
+     */
+    variant?: SkeletonVariant;
+    /**
+     * Animation type
+     * @default 'pulse'
+     */
+    animation?: SkeletonAnimation;
+    /**
+     * Width of the skeleton
+     * Can be a number (pixels) or string (e.g., '100%', '10rem')
+     */
+    width?: number | string;
+    /**
+     * Height of the skeleton
+     * Can be a number (pixels) or string (e.g., '100%', '2rem')
+     */
+    height?: number | string;
+    /**
+     * Number of skeleton lines to render (for text variant)
+     * @default 1
+     */
+    lines?: number;
+    /**
+     * Border radius override
+     */
+    borderRadius?: number | string;
+}
+//# sourceMappingURL=Skeleton.types.d.ts.map

package/dist/components/Skeleton/Skeleton.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.types.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/Skeleton.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,UAAU,GAAG,aAAa,GAAG,SAAS,CAAC;AAE9E;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;AAE1D;;;;;;;;;GASG;AACH,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,cAAc,CAAC;IACnE;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B;;;OAGG;IACH,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAE9B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEzB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAChC"}

package/dist/components/Skeleton/index.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Skeleton Component - Loading placeholder shapes.
+ *
+ * @example
+ * ```tsx
+ * import { Skeleton } from '@orion-ds/react';
+ *
+ * <Skeleton variant="text" width={200} />
+ * <Skeleton variant="circle" width={48} height={48} />
+ * <Skeleton variant="rectangle" width="100%" height={120} />
+ * ```
+ */
+export { Skeleton } from './Skeleton';
+export type { SkeletonProps, SkeletonVariant, SkeletonAnimation, } from './Skeleton.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Skeleton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EACV,aAAa,EACb,eAAe,EACf,iBAAiB,GAClB,MAAM,kBAAkB,CAAC"}

package/dist/components/Slider/Slider.d.ts

@@ -0,0 +1,4 @@
+import { SliderProps } from './Slider.types';
+
+export declare const Slider: import('react').ForwardRefExoticComponent<SliderProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Slider.d.ts.map

package/dist/components/Slider/Slider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAGH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAGlD,eAAO,MAAM,MAAM,wGA6IlB,CAAC"}

package/dist/components/Slider/Slider.module.css

@@ -0,0 +1 @@
+:root{--slider-track-sm: var(--spacing-1);--slider-track-md: 6px;--slider-track-lg: var(--spacing-2);--slider-thumb-sm: 14px;--slider-thumb-md: 18px;--slider-thumb-lg: 24px;--slider-tooltip-arrow: var(--spacing-1)}._container_eaku9_16{position:relative;width:100%;padding-top:var(--spacing-4);padding-bottom:var(--spacing-4)}._sm_eaku9_24 ._track_eaku9_24{height:var(--slider-track-sm)}._sm_eaku9_24 ._input_eaku9_28::-webkit-slider-thumb{width:var(--slider-thumb-sm);height:var(--slider-thumb-sm)}._sm_eaku9_24 ._input_eaku9_28::-moz-range-thumb{width:var(--slider-thumb-sm);height:var(--slider-thumb-sm)}._md_eaku9_38 ._track_eaku9_24{height:var(--slider-track-md)}._md_eaku9_38 ._input_eaku9_28::-webkit-slider-thumb{width:var(--slider-thumb-md);height:var(--slider-thumb-md)}._md_eaku9_38 ._input_eaku9_28::-moz-range-thumb{width:var(--slider-thumb-md);height:var(--slider-thumb-md)}._lg_eaku9_52 ._track_eaku9_24{height:var(--slider-track-lg)}._lg_eaku9_52 ._input_eaku9_28::-webkit-slider-thumb{width:var(--slider-thumb-lg);height:var(--slider-thumb-lg)}._lg_eaku9_52 ._input_eaku9_28::-moz-range-thumb{width:var(--slider-thumb-lg);height:var(--slider-thumb-lg)}._track_eaku9_24{position:relative;width:100%;background:var(--surface-layer);border-radius:9999px;overflow:visible}._fill_eaku9_76{position:absolute;top:0;left:0;height:100%;background:var(--interactive-primary);border-radius:9999px;pointer-events:none}._input_eaku9_28{position:absolute;top:50%;left:0;transform:translateY(-50%);width:100%;height:100%;margin:0;padding:0;background:transparent;cursor:pointer;appearance:none;-webkit-appearance:none}._input_eaku9_28:focus{outline:none}._input_eaku9_28::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;background:var(--interactive-primary);border:2px solid var(--surface-base);border-radius:50%;box-shadow:var(--shadow-sm);cursor:pointer;transition:transform var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out)}._input_eaku9_28::-webkit-slider-thumb:hover{transform:scale(1.1);box-shadow:var(--shadow-md)}._input_eaku9_28:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--interactive-primary-subtle)}._input_eaku9_28:active::-webkit-slider-thumb{transform:scale(.95)}._input_eaku9_28::-moz-range-thumb{background:var(--interactive-primary);border:2px solid var(--surface-base);border-radius:50%;box-shadow:var(--shadow-sm);cursor:pointer;transition:transform var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out)}._input_eaku9_28::-moz-range-thumb:hover{transform:scale(1.1);box-shadow:var(--shadow-md)}._input_eaku9_28:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px var(--interactive-primary-subtle)}._input_eaku9_28:active::-moz-range-thumb{transform:scale(.95)}._input_eaku9_28::-moz-range-track{background:transparent;border:none}._valueDisplay_eaku9_165{position:absolute;top:0;transform:translate(-50%);padding:var(--spacing-1) var(--spacing-2);background:var(--surface-inverse);color:var(--text-inverse);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);border-radius:var(--radius-sm);white-space:nowrap}._valueDisplay_eaku9_165:after{content:"";position:absolute;bottom:calc(var(--slider-tooltip-arrow) * -1);left:50%;transform:translate(-50%);border-left:var(--slider-tooltip-arrow) solid transparent;border-right:var(--slider-tooltip-arrow) solid transparent;border-top:var(--slider-tooltip-arrow) solid var(--surface-inverse)}._ticks_eaku9_190{position:relative;height:var(--spacing-2);margin-top:var(--spacing-2)}._tick_eaku9_190{position:absolute;width:1px;height:100%;background:var(--border-subtle);transform:translate(-50%)}._labels_eaku9_205{display:flex;justify-content:space-between;margin-top:var(--spacing-2);font-size:var(--font-size-sm);color:var(--text-secondary)}._labelMin_eaku9_213,._labelMax_eaku9_214{flex-shrink:0}._disabled_eaku9_219{opacity:.5;pointer-events:none}._disabled_eaku9_219 ._fill_eaku9_76{background:var(--text-tertiary)}._disabled_eaku9_219 ._input_eaku9_28::-webkit-slider-thumb{background:var(--text-tertiary);cursor:not-allowed}._disabled_eaku9_219 ._input_eaku9_28::-moz-range-thumb{background:var(--text-tertiary);cursor:not-allowed}

package/dist/components/Slider/Slider.stories.d.ts

@@ -0,0 +1,24 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Slider } from './Slider';
+
+declare const meta: Meta<typeof Slider>;
+export default meta;
+type Story = StoryObj<typeof Slider>;
+export declare const Default: Story;
+export declare const WithValue: Story;
+export declare const WithLabels: Story;
+export declare const WithValueAndLabels: Story;
+export declare const WithTicks: Story;
+export declare const CustomRange: Story;
+export declare const SmallStep: Story;
+export declare const LargeStep: Story;
+export declare const PercentageFormat: Story;
+export declare const CurrencyFormat: Story;
+export declare const SmallSize: Story;
+export declare const LargeSize: Story;
+export declare const Disabled: Story;
+export declare const AllSizes: Story;
+export declare const VolumeControl: Story;
+export declare const PriceRange: Story;
+export declare const TemperatureControl: Story;
+//# sourceMappingURL=Slider.stories.d.ts.map

package/dist/components/Slider/Slider.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.stories.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAoB7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAC;AAWrC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAEvB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAExB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAEhC,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAEvB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAIzB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAWvB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAYvB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAI9B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAW5B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAEvB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAEvB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KA+CtB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KA+B3B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KA4BxB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAqChC,CAAC"}

package/dist/components/Slider/Slider.types.d.ts

@@ -0,0 +1,94 @@
+import { HTMLAttributes } from 'react';
+
+/**
+ * Slider size variants
+ */
+export type SliderSize = "sm" | "md" | "lg";
+/**
+ * Slider component props
+ *
+ * @example
+ * ```tsx
+ * <Slider
+ *   value={50}
+ *   onChange={(value) => setValue(value)}
+ *   min={0}
+ *   max={100}
+ * />
+ * ```
+ */
+export interface SliderProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /**
+     * Current value
+     */
+    value: number;
+    /**
+     * Callback when value changes
+     */
+    onChange: (value: number) => void;
+    /**
+     * Minimum value
+     * @default 0
+     */
+    min?: number;
+    /**
+     * Maximum value
+     * @default 100
+     */
+    max?: number;
+    /**
+     * Step increment
+     * @default 1
+     */
+    step?: number;
+    /**
+     * Size variant
+     * @default 'md'
+     */
+    size?: SliderSize;
+    /**
+     * Whether the slider is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Show the current value above the thumb
+     * @default false
+     */
+    showValue?: boolean;
+    /**
+     * Format function for displaying the value
+     */
+    formatValue?: (value: number) => string;
+    /**
+     * Show min and max labels
+     * @default false
+     */
+    showLabels?: boolean;
+    /**
+     * Show tick marks
+     * @default false
+     */
+    showTicks?: boolean;
+    /**
+     * Custom tick values (if not provided, uses step)
+     */
+    tickValues?: number[];
+    /**
+     * Label for the slider (accessibility)
+     */
+    label?: string;
+    /**
+     * ID for the slider input
+     */
+    id?: string;
+    /**
+     * Callback when dragging starts
+     */
+    onChangeStart?: () => void;
+    /**
+     * Callback when dragging ends
+     */
+    onChangeEnd?: (value: number) => void;
+}
+//# sourceMappingURL=Slider.types.d.ts.map

package/dist/components/Slider/Slider.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.types.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5C;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,WAAY,SAAQ,IAAI,CACvC,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,CACX;IACC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAElC;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAExC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IAEtB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAE3B;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC"}

package/dist/components/Slider/index.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Slider Component - Range/value selection.
+ *
+ * @example
+ * ```tsx
+ * import { Slider } from '@orion-ds/react';
+ *
+ * <Slider min={0} max={100} value={50} onChange={setValue} />
+ * <Slider min={0} max={100} value={[25, 75]} range />
+ * <Slider min={0} max={10} step={1} marks showValue />
+ * ```
+ */
+export { Slider } from './Slider';
+export type { SliderProps, SliderSize } from './Slider.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Slider/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/components/Spinner/Spinner.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { SpinnerProps } from './Spinner.types';
+
+export declare const Spinner: React.FC<SpinnerProps>;
+//# sourceMappingURL=Spinner.d.ts.map

package/dist/components/Spinner/Spinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../src/components/Spinner/Spinner.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAGpD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA2B1C,CAAC"}

package/dist/components/Spinner/Spinner.module.css

@@ -0,0 +1 @@
+._container_192xs_8{display:inline-flex;flex-direction:column;align-items:center;gap:var(--spacing-2)}._spinner_192xs_16{border-radius:50%;border-style:solid;animation:_spin_192xs_16 .6s linear infinite}@media(prefers-reduced-motion:reduce){._spinner_192xs_16{animation:_spin_192xs_16 1.2s linear infinite}}@keyframes _spin_192xs_16{to{transform:rotate(360deg)}}._xs_192xs_38{width:12px;height:12px;border-width:2px}._sm_192xs_44{width:16px;height:16px;border-width:2px}._md_192xs_50{width:24px;height:24px;border-width:3px}._lg_192xs_56{width:32px;height:32px;border-width:3px}._xl_192xs_62{width:48px;height:48px;border-width:4px}._primary_192xs_72{border-color:var(--interactive-primary);border-top-color:transparent}._secondary_192xs_77{border-color:var(--text-tertiary);border-top-color:transparent}._neutral_192xs_82{border-color:var(--border-strong);border-top-color:transparent}._inverse_192xs_87{border-color:var(--text-inverse);border-top-color:transparent}._label_192xs_96{font-size:var(--font-size-12);color:var(--text-secondary);font-weight:var(--font-weight-medium)}

package/dist/components/Spinner/Spinner.stories.d.ts

@@ -0,0 +1,52 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').FC<import('./Spinner.types').SpinnerProps>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        size: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+        variant: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+        showLabel: {
+            control: "boolean";
+            description: string;
+        };
+        label: {
+            control: "text";
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithLabel: Story;
+export declare const CustomLabel: Story;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const Neutral: Story;
+export declare const ExtraSmall: Story;
+export declare const Small: Story;
+export declare const Medium: Story;
+export declare const Large: Story;
+export declare const ExtraLarge: Story;
+export declare const AllSizes: Story;
+export declare const InButton: Story;
+export declare const InverseVariant: Story;
+export declare const InCard: Story;
+export declare const FullPageLoader: Story;
+export declare const MultipleStates: Story;
+export declare const WithCustomStyling: Story;
+export declare const AllVariants: Story;
+//# sourceMappingURL=Spinner.stories.d.ts.map

package/dist/components/Spinner/Spinner.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Spinner/Spinner.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAIvD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BsB,CAAC;AAEjC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAIvB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAKzB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAIxB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAInB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAIpB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAInB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAIxB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAmEtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAiBtB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAuB5B,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAcpB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAe5B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAyC5B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAa/B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAyCzB,CAAC"}

package/dist/components/Spinner/Spinner.types.d.ts

@@ -0,0 +1,43 @@
+import { HTMLAttributes } from 'react';
+
+/**
+ * Spinner sizes
+ */
+export type SpinnerSize = "xs" | "sm" | "md" | "lg" | "xl";
+/**
+ * Spinner variants
+ */
+export type SpinnerVariant = "primary" | "secondary" | "neutral" | "inverse";
+/**
+ * Spinner component props
+ *
+ * @example
+ * ```tsx
+ * <Spinner />
+ * <Spinner size="lg" variant="primary" />
+ * <Spinner label="Loading..." />
+ * ```
+ */
+export interface SpinnerProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Spinner size
+     * @default 'md'
+     */
+    size?: SpinnerSize;
+    /**
+     * Spinner variant (color)
+     * @default 'primary'
+     */
+    variant?: SpinnerVariant;
+    /**
+     * Loading label (for accessibility)
+     * @default 'Loading...'
+     */
+    label?: string;
+    /**
+     * Show label text below spinner
+     * @default false
+     */
+    showLabel?: boolean;
+}
+//# sourceMappingURL=Spinner.types.d.ts.map

package/dist/components/Spinner/Spinner.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.types.d.ts","sourceRoot":"","sources":["../../../src/components/Spinner/Spinner.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3D;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,CAAC;AAE7E;;;;;;;;;GASG;AACH,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,cAAc,CAAC;IAClE;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB;;;OAGG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC;IAEzB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB"}

package/dist/components/Spinner/index.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Spinner Component - Loading indicator.
+ *
+ * @example
+ * ```tsx
+ * import { Spinner } from '@orion-ds/react';
+ *
+ * <Spinner />
+ * <Spinner size="lg" variant="brand" />
+ * <Spinner size="sm" /> Loading...
+ * ```
+ */
+export { Spinner } from './Spinner';
+export type { SpinnerProps, SpinnerSize, SpinnerVariant, } from './Spinner.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Spinner/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Spinner/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EACV,YAAY,EACZ,WAAW,EACX,cAAc,GACf,MAAM,iBAAiB,CAAC"}

package/dist/components/Stepper/Stepper.d.ts

@@ -0,0 +1,4 @@
+import { StepperProps } from './Stepper.types';
+
+export declare const Stepper: import('react').ForwardRefExoticComponent<StepperProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Stepper.d.ts.map

package/dist/components/Stepper/Stepper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../../src/components/Stepper/Stepper.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAIH,OAAO,KAAK,EAAE,YAAY,EAAyB,MAAM,iBAAiB,CAAC;AAkG3E,eAAO,MAAM,OAAO,yGAkGnB,CAAC"}

package/dist/components/Stepper/Stepper.module.css

@@ -0,0 +1 @@
+._stepper_ayf09_10{width:100%}._list_ayf09_14{display:flex;margin:0;padding:0;list-style:none}._horizontal_ayf09_26 ._list_ayf09_14{flex-direction:row;align-items:center;justify-content:center;gap:0}._horizontal_ayf09_26 ._item_ayf09_33{display:flex;align-items:center;flex:1;max-width:120px}._horizontal_ayf09_26 ._item_ayf09_33:last-child{flex:0;max-width:none}._step_ayf09_10{display:flex;align-items:center;gap:var(--spacing-3)}._horizontal_ayf09_26 ._step_ayf09_10{flex-direction:column;align-items:center;text-align:center}._horizontal_ayf09_26 ._label-right_ayf09_61 ._step_ayf09_10{flex-direction:row;text-align:left}._indicator_ayf09_70{display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:50%;font-family:var(--font-secondary);font-weight:var(--font-weight-medium);transition:all var(--transition-fast);position:relative;z-index:var(--z-base)}._sm_ayf09_84 ._indicator_ayf09_70{width:20px;height:20px;font-size:var(--font-size-11)}._md_ayf09_90 ._indicator_ayf09_70{width:24px;height:24px;font-size:var(--font-size-12)}._lg_ayf09_96 ._indicator_ayf09_70{width:28px;height:28px;font-size:var(--font-size-13)}._upcoming_ayf09_107 ._indicator_ayf09_70{background:transparent;border:1px solid var(--border-subtle);color:var(--text-tertiary)}._current_ayf09_114 ._indicator_ayf09_70{background:transparent;border:1.5px solid var(--interactive-primary);color:var(--interactive-primary)}._complete_ayf09_122 ._indicator_ayf09_70{background:transparent;border:none;color:var(--status-success)}._error_ayf09_129 ._indicator_ayf09_70{background:transparent;border:none;color:var(--status-error)}._number_ayf09_139{font-variant-numeric:tabular-nums}._content_ayf09_147{display:none;flex-direction:column;gap:var(--spacing-1);min-width:0}._title_ayf09_158{font-family:var(--font-secondary);font-weight:var(--font-weight-medium);color:var(--text-primary);line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}._sm_ayf09_84 ._title_ayf09_158{font-size:var(--font-size-12)}._md_ayf09_90 ._title_ayf09_158{font-size:var(--font-size-13)}._lg_ayf09_96 ._title_ayf09_158{font-size:var(--font-size-14)}._upcoming_ayf09_107 ._title_ayf09_158{color:var(--text-tertiary)}._complete_ayf09_122 ._title_ayf09_158{color:var(--text-secondary)}._optional_ayf09_189{font-size:var(--font-size-10);font-weight:var(--font-weight-normal);color:var(--text-tertiary);margin-left:var(--spacing-1)}._description_ayf09_200{font-family:var(--font-secondary);font-size:var(--font-size-12);color:var(--text-tertiary);line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}._upcoming_ayf09_107 ._description_ayf09_200{color:var(--text-tertiary);opacity:.7}._errorMessage_ayf09_219{color:var(--status-error);font-size:var(--font-size-11)}._connector_ayf09_228{flex:1;height:1px;background:var(--border-subtle);transition:background var(--transition-fast);min-width:24px}._connector_ayf09_228._complete_ayf09_122{background:color-mix(in srgb,var(--status-success) 50%,transparent)}._horizontal_ayf09_26 ._connector_ayf09_228{margin:0}._horizontal_ayf09_26._sm_ayf09_84 ._connector_ayf09_228,._horizontal_ayf09_26._md_ayf09_90 ._connector_ayf09_228,._horizontal_ayf09_26._lg_ayf09_96 ._connector_ayf09_228{height:1px}._horizontal_ayf09_26 ._label-bottom_ayf09_256 ._connector_ayf09_228{position:absolute;top:50%;left:100%;right:0;transform:translateY(-50%);margin:0}._vertical_ayf09_266 ._connector_ayf09_228{width:1px;height:20px;margin:var(--spacing-2) 0;margin-left:9px;flex:none}._vertical_ayf09_266._sm_ayf09_84 ._connector_ayf09_228{margin-left:9px;height:16px}._vertical_ayf09_266._md_ayf09_90 ._connector_ayf09_228{margin-left:11px;height:20px}._vertical_ayf09_266._lg_ayf09_96 ._connector_ayf09_228{margin-left:13px;height:24px}._vertical_ayf09_266 ._list_ayf09_14{flex-direction:column;gap:0}._vertical_ayf09_266 ._item_ayf09_33{display:flex;flex-direction:column}._vertical_ayf09_266 ._step_ayf09_10{flex-direction:row;align-items:flex-start;text-align:left;gap:var(--spacing-3)}._vertical_ayf09_266 ._content_ayf09_147{display:flex;padding-top:2px}._clickable_ayf09_317{cursor:pointer}._clickable_ayf09_317:hover ._indicator_ayf09_70{transform:scale(1.05);opacity:.8}._clickable_ayf09_317:active ._indicator_ayf09_70{transform:scale(.98)}._clickable_ayf09_317:focus-visible{outline:none}._clickable_ayf09_317:focus-visible ._indicator_ayf09_70{outline:1.5px solid var(--interactive-primary);outline-offset:2px}._disabled_ayf09_343{opacity:.35;cursor:not-allowed;pointer-events:none}@media(min-width:640px){._horizontal_ayf09_26 ._item_ayf09_33{max-width:200px}._horizontal_ayf09_26 ._content_ayf09_147{display:flex;margin-top:var(--spacing-3)}._horizontal_ayf09_26 ._label-right_ayf09_61 ._content_ayf09_147{margin-top:0;margin-left:var(--spacing-3)}._sm_ayf09_84 ._indicator_ayf09_70{width:22px;height:22px;font-size:var(--font-size-11)}._md_ayf09_90 ._indicator_ayf09_70{width:26px;height:26px;font-size:var(--font-size-12)}._lg_ayf09_96 ._indicator_ayf09_70{width:30px;height:30px;font-size:var(--font-size-13)}._vertical_ayf09_266._sm_ayf09_84 ._connector_ayf09_228{height:20px;margin-left:10px}._vertical_ayf09_266._md_ayf09_90 ._connector_ayf09_228{height:24px;margin-left:12px}._vertical_ayf09_266._lg_ayf09_96 ._connector_ayf09_228{height:28px;margin-left:14px}}@media(min-width:768px){._horizontal_ayf09_26 ._item_ayf09_33{max-width:none}._title_ayf09_158,._description_ayf09_200{white-space:normal;overflow:visible}}._scrollable_ayf09_428 ._list_ayf09_14{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-behavior:smooth;scroll-snap-type:x mandatory;padding:var(--spacing-2) 0;justify-content:flex-start;flex-wrap:nowrap}._scrollable_ayf09_428 ._list_ayf09_14::-webkit-scrollbar{display:none}._scrollable_ayf09_428 ._item_ayf09_33{flex:0 0 auto;min-width:120px;max-width:none;scroll-snap-align:center}._scrollable_ayf09_428 ._item_ayf09_33:last-child{flex:0 0 auto;min-width:120px}._scrollable_ayf09_428 ._content_ayf09_147{display:flex;margin-top:var(--spacing-2)}._scrollable_ayf09_428 ._connector_ayf09_228{min-width:40px;flex:0 0 40px}@media(min-width:640px){._scrollable_ayf09_428 ._item_ayf09_33{min-width:140px}._scrollable_ayf09_428 ._item_ayf09_33:last-child{min-width:140px}._scrollable_ayf09_428 ._content_ayf09_147{margin-top:var(--spacing-3)}._scrollable_ayf09_428 ._connector_ayf09_228{min-width:48px;flex:0 0 48px}}