@atom-learning/components 5.4.1 → 5.4.3

package/dist/components/segmented-control/SegmentedControl.d.ts

@@ -1,5 +1,5 @@
 export declare const SegmentedControl: {
-    Root: ({ size, children, theme, defaultValue, ...props }: import("react").PropsWithChildren<import("./SegmentedControlRoot").SegmentedControlRootProps>) => import("react").JSX.Element;
+    Root: ({ size, theme, defaultValue, children, ...props }: import("react").PropsWithChildren<import("./SegmentedControlRoot").SegmentedControlRootProps>) => import("react").JSX.Element;
     Item: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<import("@radix-ui/react-tabs").TabsTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "css"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{}, {
         sm: string;
         md: string;
@@ -2582,373 +2582,5 @@ export declare const SegmentedControl: {
         };
     }>>;
     Badge: ({ css, ...props }: Omit<import("react").ComponentProps<typeof import("..").Badge>, "size">) => JSX.Element;
-    ItemList: (props: import("react").ComponentProps<{
-        ({ children, colorScheme, ...rest }: import("react").ComponentProps<import("@atom-learning/stitches-react/types/styled-component").StyledComponent<import("react").ForwardRefExoticComponent<import("@radix-ui/react-tabs").TabsListProps & import("react").RefAttributes<HTMLDivElement>>, {}, {
-            sm: string;
-            md: string;
-            lg: string;
-            xl: string;
-            reducedMotion: string;
-            allowMotion: string;
-            hover: string;
-        }, import("@atom-learning/stitches-react/types/css-util").CSS<{
-            sm: string;
-            md: string;
-            lg: string;
-            xl: string;
-            reducedMotion: string;
-            allowMotion: string;
-            hover: string;
-        }, {
-            colors: {
-                textBold: string;
-                textRegular: string;
-                textSubtle: string;
-                textMinimal: string;
-                background: string;
-                backgroundAccent: string;
-                grey100: string;
-                grey200: string;
-                grey300: string;
-                grey400: string;
-                grey500: string;
-                grey600: string;
-                grey700: string;
-                grey800: string;
-                grey900: string;
-                grey1000: string;
-                grey1100: string;
-                grey1200: string;
-                blue100: string;
-                blue200: string;
-                blue300: string;
-                blue400: string;
-                blue500: string;
-                blue600: string;
-                blue700: string;
-                blue800: string;
-                blue900: string;
-                blue1000: string;
-                blue1100: string;
-                blue1200: string;
-                pink100: string;
-                pink200: string;
-                pink300: string;
-                pink400: string;
-                pink500: string;
-                pink600: string;
-                pink700: string;
-                pink800: string;
-                pink900: string;
-                pink1000: string;
-                pink1100: string;
-                pink1200: string;
-                purple100: string;
-                purple200: string;
-                purple300: string;
-                purple400: string;
-                purple500: string;
-                purple600: string;
-                purple700: string;
-                purple800: string;
-                purple900: string;
-                purple1000: string;
-                purple1100: string;
-                purple1200: string;
-                cyan100: string;
-                cyan200: string;
-                cyan300: string;
-                cyan400: string;
-                cyan500: string;
-                cyan600: string;
-                cyan700: string;
-                cyan800: string;
-                cyan900: string;
-                cyan1000: string;
-                cyan1100: string;
-                cyan1200: string;
-                green100: string;
-                green200: string;
-                green300: string;
-                green400: string;
-                green500: string;
-                green600: string;
-                green700: string;
-                green800: string;
-                green900: string;
-                green1000: string;
-                green1100: string;
-                green1200: string;
-                magenta100: string;
-                magenta200: string;
-                magenta300: string;
-                magenta400: string;
-                magenta500: string;
-                magenta600: string;
-                magenta700: string;
-                magenta800: string;
-                magenta900: string;
-                magenta1000: string;
-                magenta1100: string;
-                magenta1200: string;
-                red100: string;
-                red200: string;
-                red300: string;
-                red400: string;
-                red500: string;
-                red600: string;
-                red700: string;
-                red800: string;
-                red900: string;
-                red1000: string;
-                red1100: string;
-                red1200: string;
-                teal100: string;
-                teal200: string;
-                teal300: string;
-                teal400: string;
-                teal500: string;
-                teal600: string;
-                teal700: string;
-                teal800: string;
-                teal900: string;
-                teal1000: string;
-                teal1100: string;
-                teal1200: string;
-                orange100: string;
-                orange200: string;
-                orange300: string;
-                orange400: string;
-                orange500: string;
-                orange600: string;
-                orange700: string;
-                orange800: string;
-                orange900: string;
-                orange1000: string;
-                orange1100: string;
-                orange1200: string;
-                yellow100: string;
-                yellow200: string;
-                yellow300: string;
-                yellow400: string;
-                yellow500: string;
-                yellow600: string;
-                yellow700: string;
-                yellow800: string;
-                yellow900: string;
-                yellow1000: string;
-                yellow1100: string;
-                yellow1200: string;
-                lime100: string;
-                lime200: string;
-                lime300: string;
-                lime400: string;
-                lime500: string;
-                lime600: string;
-                lime700: string;
-                lime800: string;
-                lime900: string;
-                lime1000: string;
-                lime1100: string;
-                lime1200: string;
-                lapis100: string;
-                lapis200: string;
-                lapis300: string;
-                lapis400: string;
-                lapis500: string;
-                lapis600: string;
-                lapis700: string;
-                lapis800: string;
-                lapis900: string;
-                lapis1000: string;
-                lapis1100: string;
-                lapis1200: string;
-                maroon100: string;
-                maroon200: string;
-                maroon300: string;
-                maroon400: string;
-                maroon500: string;
-                maroon600: string;
-                maroon700: string;
-                maroon800: string;
-                maroon900: string;
-                maroon1000: string;
-                maroon1100: string;
-                maroon1200: string;
-                marsh100: string;
-                marsh200: string;
-                marsh300: string;
-                marsh400: string;
-                marsh500: string;
-                marsh600: string;
-                marsh700: string;
-                marsh800: string;
-                marsh900: string;
-                marsh1000: string;
-                marsh1100: string;
-                marsh1200: string;
-                alpha100: string;
-                alpha150: string;
-                alpha200: string;
-                alpha250: string;
-                alpha600: string;
-                infoLight: string;
-                info: string;
-                infoMid: string;
-                infoDark: string;
-                successLight: string;
-                success: string;
-                successMid: string;
-                successDark: string;
-                dangerLight: string;
-                danger: string;
-                dangerMid: string;
-                dangerDark: string;
-                warningLight: string;
-                warning: string;
-                warningMid: string;
-                warningDark: string;
-                warningText: string;
-                subjectEnglish: string;
-                subjectMaths: string;
-                subjectScience: string;
-                subjectVerbalReasoning: string;
-                subjectNonVerbalReasoning: string;
-                subjectCreativeWriting: string;
-                subjectExamSkills: string;
-                glBlueLight: string;
-                glBluePrimary: string;
-                glBlueDark: string;
-                primary100: string;
-                primary200: string;
-                primary300: string;
-                primary400: string;
-                primary500: string;
-                primary600: string;
-                primary700: string;
-                primary800: string;
-                primary900: string;
-                primary1000: string;
-                primary1100: string;
-                primary1200: string;
-            };
-            space: {
-                "0": string;
-                "1": string;
-                "2": string;
-                "3": string;
-                "4": string;
-                "5": string;
-                "6": string;
-                "7": string;
-                "8": string;
-                "9": string;
-                "24": string;
-            };
-            fontSizes: {
-                xs: string;
-                sm: string;
-                md: string;
-                lg: string;
-                xl: string;
-                "2xl": string;
-                "3xl": string;
-                "4xl": string;
-            };
-            fonts: {
-                sans: string;
-                mono: string;
-                display: string;
-                body: string;
-            };
-            sizes: {
-                "0": string;
-                "1": string;
-                "2": string;
-                "3": string;
-                "4": string;
-                "5": string;
-                "6": string;
-                "7": string;
-                "8": string;
-            };
-            radii: {
-                "0": string;
-                "1": string;
-                "2": string;
-                "3": string;
-                round: string;
-            };
-            shadows: {
-                "0": string;
-                "1": string;
-                "2": string;
-                "3": string;
-            };
-            ratios: {
-                "16-9": string;
-                "3-2": string;
-                "4-3": string;
-                "1-1": string;
-                "3-4": string;
-            };
-        }, import("@atom-learning/stitches-react/types/config").DefaultThemeMap, {
-            bg: (value: import("@atom-learning/stitches-react").PropertyValue<"background">) => {
-                background: import("@atom-learning/stitches-react/types/css-util").WithPropertyValue<"background">;
-            };
-            size: (value: import("@atom-learning/stitches-react").ScaleValue<"size"> | number | string) => {
-                height: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"size">;
-                width: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"size">;
-            };
-            p: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-                padding: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-            };
-            pt: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-                paddingTop: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-            };
-            pr: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-                paddingRight: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-            };
-            pb: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-                paddingBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-            };
-            pl: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-                paddingLeft: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-            };
-            px: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-                paddingLeft: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-                paddingRight: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-            };
-            py: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-                paddingTop: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-                paddingBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-            };
-            m: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-                margin: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-            };
-            mt: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-                marginTop: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-            };
-            mr: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-                marginRight: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-            };
-            mb: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-                marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-            };
-            ml: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-                marginLeft: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-            };
-            mx: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-                marginLeft: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-                marginRight: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-            };
-            my: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
-                marginTop: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-                marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
-            };
-        }>>> & {
-            colorScheme?: import("../..").TcolorScheme;
-        }): import("react").JSX.Element;
-        displayName: string;
-    }>) => JSX.Element;
+    ItemList: import("react").FC<{}>;
 };

package/dist/components/segmented-control/SegmentedControl.types.d.ts

@@ -0,0 +1 @@
+export type SegmentedControlTheme = 'primary' | 'marsh';

package/dist/components/segmented-control/SegmentedControlBadge.js

@@ -1,2 +1,2 @@
-import*as r from"react";import{Badge as s}from"../badge/Badge.js";import{useSegmentedControl as m}from"./SegmentedControlContext.js";const n={sm:"xs",md:"xs",lg:"sm"},c=({css:e,...o})=>{const{size:t}=m();return r.createElement(s,{...o,css:{border:"none",...e,fontWeight:"normal"},size:n[t]})};export{c as SegmentedControlBadge};
+import*as e from"react";import{Badge as r}from"../badge/Badge.js";import{SegmentedControlContext as s}from"./SegmentedControlContext.js";const m={sm:"xs",md:"xs",lg:"sm"},c=({css:o,...t})=>{const{size:n}=e.useContext(s);return e.createElement(r,{...t,css:{border:"none",...o,fontWeight:"normal"},size:m[n]})};export{c as SegmentedControlBadge};
 //# sourceMappingURL=SegmentedControlBadge.js.map

package/dist/components/segmented-control/SegmentedControlBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlBadge.js","sources":["../../../src/components/segmented-control/SegmentedControlBadge.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Badge } from '../badge'\nimport { useSegmentedControl } from './SegmentedControlContext'\n\nconst badgeSizeMap = {\n  sm: 'xs',\n  md: 'xs',\n  lg: 'sm'\n}\n\nexport const SegmentedControlBadge = ({\n  css,\n  ...props\n}: Omit<React.ComponentProps<typeof Badge>, 'size'>): JSX.Element => {\n  const { size } = useSegmentedControl()\n  return (\n    <Badge\n      {...props}\n      css={{ border: 'none', ...css, fontWeight: 'normal' }}\n      size={badgeSizeMap[size as string]}\n    />\n  )\n}\n"],"names":["badgeSizeMap","SegmentedControlBadge","css","props","size","useSegmentedControl","React","Badge"],"mappings":"qIAKA,MAAMA,EAAe,CACnB,GAAI,KACJ,GAAI,KACJ,GAAI,IACN,EAEaC,EAAwB,CAAC,CACpC,IAAAC,KACGC,CACL,IAAqE,CACnE,KAAM,CAAE,KAAAC,CAAK,EAAIC,EAAoB,EACrC,OACEC,EAAA,cAACC,EAAA,CACE,GAAGJ,EACJ,IAAK,CAAE,OAAQ,OAAQ,GAAGD,EAAK,WAAY,QAAS,EACpD,KAAMF,EAAaI,EAAAA,CACrB,CAEJ"}
+{"version":3,"file":"SegmentedControlBadge.js","sources":["../../../src/components/segmented-control/SegmentedControlBadge.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Badge } from '../badge'\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nconst badgeSizeMap = {\n  sm: 'xs',\n  md: 'xs',\n  lg: 'sm'\n}\n\nexport const SegmentedControlBadge = ({\n  css,\n  ...props\n}: Omit<React.ComponentProps<typeof Badge>, 'size'>): JSX.Element => {\n  const { size } = React.useContext(SegmentedControlContext)\n\n  return (\n    <Badge\n      {...props}\n      css={{ border: 'none', ...css, fontWeight: 'normal' }}\n      size={badgeSizeMap[size as string]}\n    />\n  )\n}\n"],"names":["badgeSizeMap","SegmentedControlBadge","css","props","size","React","SegmentedControlContext","Badge"],"mappings":"yIAKA,MAAMA,EAAe,CACnB,GAAI,KACJ,GAAI,KACJ,GAAI,IACN,EAEaC,EAAwB,CAAC,CACpC,IAAAC,KACGC,CACL,IAAqE,CACnE,KAAM,CAAE,KAAAC,CAAK,EAAIC,EAAM,WAAWC,CAAuB,EAEzD,OACED,EAAA,cAACE,EAAA,CACE,GAAGJ,EACJ,IAAK,CAAE,OAAQ,OAAQ,GAAGD,EAAK,WAAY,QAAS,EACpD,KAAMF,EAAaI,EAAAA,CACrB,CAEJ"}

package/dist/components/segmented-control/SegmentedControlContext.d.ts

@@ -1,11 +1,9 @@
 import * as React from 'react';
+import { Tabs } from '../tabs';
+import type { SegmentedControlTheme } from './SegmentedControl.types';
 import type { SegmentedControlRootProps } from './SegmentedControlRoot';
-export type SegmentedControlTheme = 'primary' | 'marsh';
-export interface SegmentedControlContextValue {
+export interface SegmentedControlContextValue extends Pick<React.ComponentProps<typeof Tabs>, 'defaultValue' | 'value' | 'onValueChange'> {
     size: SegmentedControlRootProps['size'];
     theme: SegmentedControlTheme;
-    defaultValue: string;
 }
 export declare const SegmentedControlContext: React.Context<SegmentedControlContextValue>;
-export declare const SegmentedControlProvider: ({ size, theme, defaultValue, children }: React.PropsWithChildren<SegmentedControlContextValue>) => JSX.Element;
-export declare const useSegmentedControl: () => SegmentedControlContextValue;

package/dist/components/segmented-control/SegmentedControlContext.js

@@ -1,2 +1,2 @@
-import*as e from"react";const t=e.createContext({size:"md",theme:"primary",defaultValue:""}),a=({size:r,theme:o,defaultValue:m,children:n})=>{const l=e.useMemo(()=>({size:r,theme:o,defaultValue:m}),[r,o,m]);return e.createElement(t.Provider,{value:l},n)},u=()=>e.useContext(t);export{t as SegmentedControlContext,a as SegmentedControlProvider,u as useSegmentedControl};
+import*as e from"react";const t=e.createContext({size:"md",theme:"primary",defaultValue:"",value:"",onValueChange:()=>null});export{t as SegmentedControlContext};
 //# sourceMappingURL=SegmentedControlContext.js.map

package/dist/components/segmented-control/SegmentedControlContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlContext.js","sources":["../../../src/components/segmented-control/SegmentedControlContext.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport type { SegmentedControlRootProps } from './SegmentedControlRoot'\n\nexport type SegmentedControlTheme = 'primary' | 'marsh'\n\nexport interface SegmentedControlContextValue {\n  size: SegmentedControlRootProps['size']\n  theme: SegmentedControlTheme\n  defaultValue: string\n}\n\nexport const SegmentedControlContext =\n  React.createContext<SegmentedControlContextValue>({\n    size: 'md',\n    theme: 'primary',\n    defaultValue: ''\n  })\n\nexport const SegmentedControlProvider = ({\n  size,\n  theme,\n  defaultValue,\n  children\n}: React.PropsWithChildren<SegmentedControlContextValue>): JSX.Element => {\n  const value = React.useMemo<SegmentedControlContextValue>(\n    () => ({ size, theme, defaultValue }),\n    [size, theme, defaultValue]\n  )\n\n  return (\n    <SegmentedControlContext.Provider value={value}>\n      {children}\n    </SegmentedControlContext.Provider>\n  )\n}\n\nexport const useSegmentedControl = (): SegmentedControlContextValue =>\n  React.useContext(SegmentedControlContext)\n"],"names":["SegmentedControlContext","React","SegmentedControlProvider","size","theme","defaultValue","children","value","useSegmentedControl"],"mappings":"wBAYa,MAAAA,EACXC,EAAM,cAA4C,CAChD,KAAM,KACN,MAAO,UACP,aAAc,EAChB,CAAC,EAEUC,EAA2B,CAAC,CACvC,KAAAC,EACA,MAAAC,EACA,aAAAC,EACA,SAAAC,CACF,IAA0E,CACxE,MAAMC,EAAQN,EAAM,QAClB,KAAO,CAAE,KAAAE,EAAM,MAAAC,EAAO,aAAAC,CAAa,GACnC,CAACF,EAAMC,EAAOC,CAAY,CAC5B,EAEA,OACEJ,EAAA,cAACD,EAAwB,SAAxB,CAAiC,MAAOO,CAAAA,EACtCD,CACH,CAEJ,EAEaE,EAAsB,IACjCP,EAAM,WAAWD,CAAuB"}
+{"version":3,"file":"SegmentedControlContext.js","sources":["../../../src/components/segmented-control/SegmentedControlContext.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Tabs } from '../tabs'\nimport type { SegmentedControlTheme } from './SegmentedControl.types'\nimport type { SegmentedControlRootProps } from './SegmentedControlRoot'\n\nexport interface SegmentedControlContextValue\n  extends Pick<\n    React.ComponentProps<typeof Tabs>,\n    'defaultValue' | 'value' | 'onValueChange'\n  > {\n  size: SegmentedControlRootProps['size']\n  theme: SegmentedControlTheme\n}\n\nexport const SegmentedControlContext =\n  React.createContext<SegmentedControlContextValue>({\n    size: 'md',\n    theme: 'primary',\n    defaultValue: '',\n    value: '',\n    onValueChange: () => null\n  })\n"],"names":["SegmentedControlContext","React"],"mappings":"wBAeO,MAAMA,EACXC,EAAM,cAA4C,CAChD,KAAM,KACN,MAAO,UACP,aAAc,GACd,MAAO,GACP,cAAe,IAAM,IACvB,CAAC"}

package/dist/components/segmented-control/SegmentedControlDescription.js

@@ -1,2 +1,2 @@
-import*as o from"react";import{styled as r}from"../../stitches.js";import{Text as m}from"../text/Text.js";import{useSegmentedControl as n}from"./SegmentedControlContext.js";const i=r(m,{fontFamily:"$body",color:"$textSubtle",fontWeight:400,variants:{size:{sm:{fontSize:"$xs"},md:{fontSize:"$sm"},lg:{fontSize:"$md"}}}}),s=t=>{const{size:e}=n();return o.createElement(i,{...t,size:e})};export{s as SegmentedControlDescription};
+import*as t from"react";import{styled as n}from"../../stitches.js";import{Text as r}from"../text/Text.js";import{SegmentedControlContext as m}from"./SegmentedControlContext.js";const i=n(r,{fontFamily:"$body",color:"$textSubtle",fontWeight:400,variants:{size:{sm:{fontSize:"$xs"},md:{fontSize:"$sm"},lg:{fontSize:"$md"}}}}),s=e=>{const{size:o}=t.useContext(m);return t.createElement(i,{...e,size:o})};export{s as SegmentedControlDescription};
 //# sourceMappingURL=SegmentedControlDescription.js.map

package/dist/components/segmented-control/SegmentedControlDescription.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlDescription.js","sources":["../../../src/components/segmented-control/SegmentedControlDescription.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../stitches'\nimport { Text } from '../text'\nimport { useSegmentedControl } from './SegmentedControlContext'\n\nconst StyledText = styled(Text, {\n  fontFamily: '$body',\n  color: '$textSubtle',\n  fontWeight: 400,\n  variants: {\n    size: {\n      sm: {\n        fontSize: '$xs'\n      },\n      md: {\n        fontSize: '$sm'\n      },\n      lg: {\n        fontSize: '$md'\n      }\n    }\n  }\n})\n\nexport const SegmentedControlDescription = (\n  props: Omit<React.ComponentProps<typeof StyledText>, 'size'>\n): JSX.Element => {\n  const { size } = useSegmentedControl()\n  return <StyledText {...props} size={size} />\n}\n"],"names":["StyledText","styled","Text","SegmentedControlDescription","props","size","useSegmentedControl","React"],"mappings":"6KAMA,MAAMA,EAAaC,EAAOC,EAAM,CAC9B,WAAY,QACZ,MAAO,cACP,WAAY,IACZ,SAAU,CACR,KAAM,CACJ,GAAI,CACF,SAAU,KACZ,EACA,GAAI,CACF,SAAU,KACZ,EACA,GAAI,CACF,SAAU,KACZ,CACF,CACF,CACF,CAAC,EAEYC,EACXC,GACgB,CAChB,KAAM,CAAE,KAAAC,CAAK,EAAIC,IACjB,OAAOC,EAAA,cAACP,EAAA,CAAY,GAAGI,EAAO,KAAMC,EAAM,CAC5C"}
+{"version":3,"file":"SegmentedControlDescription.js","sources":["../../../src/components/segmented-control/SegmentedControlDescription.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../stitches'\nimport { Text } from '../text'\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nconst StyledText = styled(Text, {\n  fontFamily: '$body',\n  color: '$textSubtle',\n  fontWeight: 400,\n  variants: {\n    size: {\n      sm: {\n        fontSize: '$xs'\n      },\n      md: {\n        fontSize: '$sm'\n      },\n      lg: {\n        fontSize: '$md'\n      }\n    }\n  }\n})\n\nexport const SegmentedControlDescription = (\n  props: Omit<React.ComponentProps<typeof StyledText>, 'size'>\n): JSX.Element => {\n  const { size } = React.useContext(SegmentedControlContext)\n\n  return <StyledText {...props} size={size} />\n}\n"],"names":["StyledText","styled","Text","SegmentedControlDescription","props","size","React","SegmentedControlContext"],"mappings":"iLAMA,MAAMA,EAAaC,EAAOC,EAAM,CAC9B,WAAY,QACZ,MAAO,cACP,WAAY,IACZ,SAAU,CACR,KAAM,CACJ,GAAI,CACF,SAAU,KACZ,EACA,GAAI,CACF,SAAU,KACZ,EACA,GAAI,CACF,SAAU,KACZ,CACF,CACF,CACF,CAAC,EAEYC,EACXC,GACgB,CAChB,KAAM,CAAE,KAAAC,CAAK,EAAIC,EAAM,WAAWC,CAAuB,EAEzD,OAAOD,EAAA,cAACN,EAAA,CAAY,GAAGI,EAAO,KAAMC,EAAM,CAC5C"}

package/dist/components/segmented-control/SegmentedControlHeading.js

@@ -1,2 +1,2 @@
-import*as o from"react";import{styled as r}from"../../stitches.js";import{Text as m}from"../text/Text.js";import{useSegmentedControl as n}from"./SegmentedControlContext.js";const i=r(m,{fontFamily:"$body",color:"$textRegular",variants:{size:{sm:{fontSize:"$sm"},md:{fontSize:"$md"},lg:{fontSize:"$lg"}}}}),s=e=>{const{size:t}=n();return o.createElement(i,{...e,size:t})};export{s as SegmentedControlHeading};
+import*as t from"react";import{styled as r}from"../../stitches.js";import{Text as n}from"../text/Text.js";import{SegmentedControlContext as m}from"./SegmentedControlContext.js";const i=r(n,{fontFamily:"$body",color:"$textRegular",variants:{size:{sm:{fontSize:"$sm"},md:{fontSize:"$md"},lg:{fontSize:"$lg"}}}}),s=e=>{const{size:o}=t.useContext(m);return t.createElement(i,{...e,size:o})};export{s as SegmentedControlHeading};
 //# sourceMappingURL=SegmentedControlHeading.js.map

package/dist/components/segmented-control/SegmentedControlHeading.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlHeading.js","sources":["../../../src/components/segmented-control/SegmentedControlHeading.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../stitches'\nimport { Text } from '../text'\nimport { useSegmentedControl } from './SegmentedControlContext'\n\nconst StyledHeading = styled(Text, {\n  fontFamily: '$body',\n  color: '$textRegular',\n  variants: {\n    size: {\n      sm: {\n        fontSize: '$sm'\n      },\n      md: {\n        fontSize: '$md'\n      },\n      lg: {\n        fontSize: '$lg'\n      }\n    }\n  }\n})\n\nexport const SegmentedControlHeading = (\n  props: Omit<React.ComponentProps<typeof StyledHeading>, 'size'>\n): JSX.Element => {\n  const { size } = useSegmentedControl()\n  return <StyledHeading {...props} size={size} />\n}\n"],"names":["StyledHeading","styled","Text","SegmentedControlHeading","props","size","useSegmentedControl","React"],"mappings":"6KAMA,MAAMA,EAAgBC,EAAOC,EAAM,CACjC,WAAY,QACZ,MAAO,eACP,SAAU,CACR,KAAM,CACJ,GAAI,CACF,SAAU,KACZ,EACA,GAAI,CACF,SAAU,KACZ,EACA,GAAI,CACF,SAAU,KACZ,CACF,CACF,CACF,CAAC,EAEYC,EACXC,GACgB,CAChB,KAAM,CAAE,KAAAC,CAAK,EAAIC,IACjB,OAAOC,EAAA,cAACP,EAAA,CAAe,GAAGI,EAAO,KAAMC,EAAM,CAC/C"}
+{"version":3,"file":"SegmentedControlHeading.js","sources":["../../../src/components/segmented-control/SegmentedControlHeading.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../stitches'\nimport { Text } from '../text'\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nconst StyledHeading = styled(Text, {\n  fontFamily: '$body',\n  color: '$textRegular',\n  variants: {\n    size: {\n      sm: {\n        fontSize: '$sm'\n      },\n      md: {\n        fontSize: '$md'\n      },\n      lg: {\n        fontSize: '$lg'\n      }\n    }\n  }\n})\n\nexport const SegmentedControlHeading = (\n  props: Omit<React.ComponentProps<typeof StyledHeading>, 'size'>\n): JSX.Element => {\n  const { size } = React.useContext(SegmentedControlContext)\n\n  return <StyledHeading {...props} size={size} />\n}\n"],"names":["StyledHeading","styled","Text","SegmentedControlHeading","props","size","React","SegmentedControlContext"],"mappings":"iLAMA,MAAMA,EAAgBC,EAAOC,EAAM,CACjC,WAAY,QACZ,MAAO,eACP,SAAU,CACR,KAAM,CACJ,GAAI,CACF,SAAU,KACZ,EACA,GAAI,CACF,SAAU,KACZ,EACA,GAAI,CACF,SAAU,KACZ,CACF,CACF,CACF,CAAC,EAEYC,EACXC,GACgB,CAChB,KAAM,CAAE,KAAAC,CAAK,EAAIC,EAAM,WAAWC,CAAuB,EAEzD,OAAOD,EAAA,cAACN,EAAA,CAAe,GAAGI,EAAO,KAAMC,EAAM,CAC/C"}

package/dist/components/segmented-control/SegmentedControlIcon.js

@@ -1,2 +1,2 @@
-import*as m from"react";import{Icon as t}from"../icon/Icon.js";import{useSegmentedControl as r}from"./SegmentedControlContext.js";const n={sm:"sm",md:"md",lg:"md"},s=e=>{const{size:o}=r();return m.createElement(t,{...e,size:n[o]})};export{s as SegmentedControlIcon};
+import*as e from"react";import{Icon as m}from"../icon/Icon.js";import{SegmentedControlContext as n}from"./SegmentedControlContext.js";const r={sm:"sm",md:"md",lg:"md"},s=o=>{const{size:t}=e.useContext(n);return e.createElement(m,{...o,size:r[t]})};export{s as SegmentedControlIcon};
 //# sourceMappingURL=SegmentedControlIcon.js.map

package/dist/components/segmented-control/SegmentedControlIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlIcon.js","sources":["../../../src/components/segmented-control/SegmentedControlIcon.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Icon } from '../icon'\nimport { useSegmentedControl } from './SegmentedControlContext'\n\nconst sizeMap = {\n  sm: 'sm',\n  md: 'md',\n  lg: 'md'\n}\n\nexport const SegmentedControlIcon = (\n  props: Omit<React.ComponentProps<typeof Icon>, 'size'>\n): JSX.Element => {\n  const { size } = useSegmentedControl()\n  return <Icon {...props} size={sizeMap[size as string]} />\n}\n"],"names":["sizeMap","SegmentedControlIcon","props","size","useSegmentedControl","React","Icon"],"mappings":"kIAKA,MAAMA,EAAU,CACd,GAAI,KACJ,GAAI,KACJ,GAAI,IACN,EAEaC,EACXC,GACgB,CAChB,KAAM,CAAE,KAAAC,CAAK,EAAIC,EAAoB,EACrC,OAAOC,EAAA,cAACC,EAAA,CAAM,GAAGJ,EAAO,KAAMF,EAAQG,GAAiB,CACzD"}
+{"version":3,"file":"SegmentedControlIcon.js","sources":["../../../src/components/segmented-control/SegmentedControlIcon.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Icon } from '../icon'\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nconst sizeMap = {\n  sm: 'sm',\n  md: 'md',\n  lg: 'md'\n}\n\nexport const SegmentedControlIcon = (\n  props: Omit<React.ComponentProps<typeof Icon>, 'size'>\n): JSX.Element => {\n  const { size } = React.useContext(SegmentedControlContext)\n\n  return <Icon {...props} size={sizeMap[size as string]} />\n}\n"],"names":["sizeMap","SegmentedControlIcon","props","size","React","SegmentedControlContext","Icon"],"mappings":"sIAKA,MAAMA,EAAU,CACd,GAAI,KACJ,GAAI,KACJ,GAAI,IACN,EAEaC,EACXC,GACgB,CAChB,KAAM,CAAE,KAAAC,CAAK,EAAIC,EAAM,WAAWC,CAAuB,EAEzD,OAAOD,EAAA,cAACE,EAAA,CAAM,GAAGJ,EAAO,KAAMF,EAAQG,GAAiB,CACzD"}

package/dist/components/segmented-control/SegmentedControlItem.js

@@ -1,2 +1,2 @@
-import*as e from"react";import{styled as s}from"../../stitches.js";import{Tabs as d}from"../tabs/Tabs.js";import{useSegmentedControl as l}from"./SegmentedControlContext.js";const m=s(d.Trigger,{position:"relative",bg:"transparent",borderRadius:"$2",p:0,zIndex:2,minWidth:"140px",border:"2px solid transparent",variants:{theme:{primary:{"&[data-state=inactive]:hover":{bg:"$primary300"},"&:focus-visible":{borderColor:"$primary800"}},marsh:{"&[data-state=inactive]:hover":{bg:"$marsh300"},"&:focus-visible":{borderColor:"$marsh800"}}},size:{sm:{flex:"unset",p:"$4 $24",gap:"$3"},md:{flex:1,p:"$24 $4",gap:"$4"},lg:{flex:1,p:"$24 $4",gap:"$4"}}},"& > div":{display:"none"},"& > span":{display:"flex",flexDirection:"column",alignItems:"center"},"&[data-state=active]":{boxShadow:"none",border:"2px solid transparent",fontWeight:600,color:"$textBold","&:focus-visible":{boxShadow:"none",borderColor:"$primary800"}},"&[data-state=inactive]":{fontWeight:400,color:"$grey900"},"&[disabled]":{opacity:.3}}),r=e.forwardRef(({children:t,...o},a)=>{const{size:i,theme:n}=l();return e.createElement(m,{...o,theme:n,size:i,ref:a},t)});r.displayName="SegmentedControlItem";export{r as SegmentedControlItem};
+import*as e from"react";import{styled as s}from"../../stitches.js";import{Tabs as d}from"../tabs/Tabs.js";import{SegmentedControlContext as l}from"./SegmentedControlContext.js";const m=s(d.Trigger,{position:"relative",bg:"transparent",borderRadius:"$2",p:0,zIndex:2,minWidth:"140px",border:"2px solid transparent",variants:{theme:{primary:{"&[data-state=inactive]:hover":{bg:"$primary300"},"&:focus-visible":{borderColor:"$primary800"}},marsh:{"&[data-state=inactive]:hover":{bg:"$marsh300"},"&:focus-visible":{borderColor:"$marsh800"}}},size:{sm:{flex:"unset",p:"$4 $24",gap:"$3"},md:{flex:1,p:"$24 $4",gap:"$4"},lg:{flex:1,p:"$24 $4",gap:"$4"}}},"& > div":{display:"none"},"& > span":{display:"flex",flexDirection:"column",alignItems:"center"},"&[data-state=active]":{boxShadow:"none",border:"2px solid transparent",fontWeight:600,color:"$textBold","&:focus-visible":{boxShadow:"none",borderColor:"$primary800"}},"&[data-state=inactive]":{fontWeight:400,color:"$grey900"},"&[disabled]":{opacity:.3}}),t=e.forwardRef(({children:r,...o},a)=>{const{size:i,theme:n}=e.useContext(l);return e.createElement(m,{...o,theme:n,size:i,ref:a},r)});t.displayName="SegmentedControlItem";export{t as SegmentedControlItem};
 //# sourceMappingURL=SegmentedControlItem.js.map

package/dist/components/segmented-control/SegmentedControlItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlItem.js","sources":["../../../src/components/segmented-control/SegmentedControlItem.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../stitches'\nimport { Tabs } from '../tabs'\nimport { useSegmentedControl } from './SegmentedControlContext'\n\nconst StyledItem = styled(Tabs.Trigger, {\n  position: 'relative',\n  bg: 'transparent',\n  borderRadius: '$2',\n  p: 0,\n  zIndex: 2,\n  minWidth: '140px',\n  border: '2px solid transparent',\n  variants: {\n    theme: {\n      primary: {\n        '&[data-state=inactive]:hover': {\n          bg: '$primary300'\n        },\n        '&:focus-visible': {\n          borderColor: '$primary800'\n        }\n      },\n      marsh: {\n        '&[data-state=inactive]:hover': {\n          bg: '$marsh300'\n        },\n        '&:focus-visible': {\n          borderColor: '$marsh800'\n        }\n      }\n    },\n    size: {\n      sm: {\n        flex: 'unset',\n        p: '$4 $24',\n        gap: '$3'\n      },\n      md: {\n        flex: 1,\n        p: '$24 $4',\n        gap: '$4'\n      },\n      lg: {\n        flex: 1,\n        p: '$24 $4',\n        gap: '$4'\n      }\n    }\n  },\n  '& > div': { display: 'none' },\n  '& > span': {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center'\n  },\n  '&[data-state=active]': {\n    boxShadow: 'none',\n    border: '2px solid transparent',\n    fontWeight: 600,\n    color: '$textBold',\n    '&:focus-visible': {\n      boxShadow: 'none',\n      borderColor: '$primary800'\n    }\n  },\n  '&[data-state=inactive]': {\n    fontWeight: 400,\n    color: '$grey900'\n  },\n  '&[disabled]': {\n    opacity: 0.3\n  }\n})\n\nexport const SegmentedControlItem = React.forwardRef<\n  HTMLButtonElement,\n  Omit<React.ComponentProps<typeof StyledItem>, 'size'>\n>(({ children, ...props }, ref) => {\n  const { size, theme } = useSegmentedControl()\n\n  return (\n    <StyledItem {...props} theme={theme} size={size} ref={ref}>\n      {children}\n    </StyledItem>\n  )\n})\n\nSegmentedControlItem.displayName = 'SegmentedControlItem'\n"],"names":["StyledItem","styled","Tabs","SegmentedControlItem","React","children","props","ref","size","theme","useSegmentedControl"],"mappings":"6KAMA,MAAMA,EAAaC,EAAOC,EAAK,QAAS,CACtC,SAAU,WACV,GAAI,cACJ,aAAc,KACd,EAAG,EACH,OAAQ,EACR,SAAU,QACV,OAAQ,wBACR,SAAU,CACR,MAAO,CACL,QAAS,CACP,+BAAgC,CAC9B,GAAI,aACN,EACA,kBAAmB,CACjB,YAAa,aACf,CACF,EACA,MAAO,CACL,+BAAgC,CAC9B,GAAI,WACN,EACA,kBAAmB,CACjB,YAAa,WACf,CACF,CACF,EACA,KAAM,CACJ,GAAI,CACF,KAAM,QACN,EAAG,SACH,IAAK,IACP,EACA,GAAI,CACF,KAAM,EACN,EAAG,SACH,IAAK,IACP,EACA,GAAI,CACF,KAAM,EACN,EAAG,SACH,IAAK,IACP,CACF,CACF,EACA,UAAW,CAAE,QAAS,MAAO,EAC7B,WAAY,CACV,QAAS,OACT,cAAe,SACf,WAAY,QACd,EACA,uBAAwB,CACtB,UAAW,OACX,OAAQ,wBACR,WAAY,IACZ,MAAO,YACP,kBAAmB,CACjB,UAAW,OACX,YAAa,aACf,CACF,EACA,yBAA0B,CACxB,WAAY,IACZ,MAAO,UACT,EACA,cAAe,CACb,QAAS,EACX,CACF,CAAC,EAEYC,EAAuBC,EAAM,WAGxC,CAAC,CAAE,SAAAC,KAAaC,CAAM,EAAGC,IAAQ,CACjC,KAAM,CAAE,KAAAC,EAAM,MAAAC,CAAM,EAAIC,IAExB,OACEN,EAAA,cAACJ,EAAA,CAAY,GAAGM,EAAO,MAAOG,EAAO,KAAMD,EAAM,IAAKD,CACnDF,EAAAA,CACH,CAEJ,CAAC,EAEDF,EAAqB,YAAc"}
+{"version":3,"file":"SegmentedControlItem.js","sources":["../../../src/components/segmented-control/SegmentedControlItem.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../stitches'\nimport { Tabs } from '../tabs'\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nconst StyledItem = styled(Tabs.Trigger, {\n  position: 'relative',\n  bg: 'transparent',\n  borderRadius: '$2',\n  p: 0,\n  zIndex: 2,\n  minWidth: '140px',\n  border: '2px solid transparent',\n  variants: {\n    theme: {\n      primary: {\n        '&[data-state=inactive]:hover': {\n          bg: '$primary300'\n        },\n        '&:focus-visible': {\n          borderColor: '$primary800'\n        }\n      },\n      marsh: {\n        '&[data-state=inactive]:hover': {\n          bg: '$marsh300'\n        },\n        '&:focus-visible': {\n          borderColor: '$marsh800'\n        }\n      }\n    },\n    size: {\n      sm: {\n        flex: 'unset',\n        p: '$4 $24',\n        gap: '$3'\n      },\n      md: {\n        flex: 1,\n        p: '$24 $4',\n        gap: '$4'\n      },\n      lg: {\n        flex: 1,\n        p: '$24 $4',\n        gap: '$4'\n      }\n    }\n  },\n  '& > div': { display: 'none' },\n  '& > span': {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center'\n  },\n  '&[data-state=active]': {\n    boxShadow: 'none',\n    border: '2px solid transparent',\n    fontWeight: 600,\n    color: '$textBold',\n    '&:focus-visible': {\n      boxShadow: 'none',\n      borderColor: '$primary800'\n    }\n  },\n  '&[data-state=inactive]': {\n    fontWeight: 400,\n    color: '$grey900'\n  },\n  '&[disabled]': {\n    opacity: 0.3\n  }\n})\n\nexport const SegmentedControlItem = React.forwardRef<\n  HTMLButtonElement,\n  Omit<React.ComponentProps<typeof StyledItem>, 'size'>\n>(({ children, ...props }, ref) => {\n  const { size, theme } = React.useContext(SegmentedControlContext)\n\n  return (\n    <StyledItem {...props} theme={theme} size={size} ref={ref}>\n      {children}\n    </StyledItem>\n  )\n})\n\nSegmentedControlItem.displayName = 'SegmentedControlItem'\n"],"names":["StyledItem","styled","Tabs","SegmentedControlItem","React","children","props","ref","size","theme","SegmentedControlContext"],"mappings":"iLAMA,MAAMA,EAAaC,EAAOC,EAAK,QAAS,CACtC,SAAU,WACV,GAAI,cACJ,aAAc,KACd,EAAG,EACH,OAAQ,EACR,SAAU,QACV,OAAQ,wBACR,SAAU,CACR,MAAO,CACL,QAAS,CACP,+BAAgC,CAC9B,GAAI,aACN,EACA,kBAAmB,CACjB,YAAa,aACf,CACF,EACA,MAAO,CACL,+BAAgC,CAC9B,GAAI,WACN,EACA,kBAAmB,CACjB,YAAa,WACf,CACF,CACF,EACA,KAAM,CACJ,GAAI,CACF,KAAM,QACN,EAAG,SACH,IAAK,IACP,EACA,GAAI,CACF,KAAM,EACN,EAAG,SACH,IAAK,IACP,EACA,GAAI,CACF,KAAM,EACN,EAAG,SACH,IAAK,IACP,CACF,CACF,EACA,UAAW,CAAE,QAAS,MAAO,EAC7B,WAAY,CACV,QAAS,OACT,cAAe,SACf,WAAY,QACd,EACA,uBAAwB,CACtB,UAAW,OACX,OAAQ,wBACR,WAAY,IACZ,MAAO,YACP,kBAAmB,CACjB,UAAW,OACX,YAAa,aACf,CACF,EACA,yBAA0B,CACxB,WAAY,IACZ,MAAO,UACT,EACA,cAAe,CACb,QAAS,EACX,CACF,CAAC,EAEYC,EAAuBC,EAAM,WAGxC,CAAC,CAAE,SAAAC,KAAaC,CAAM,EAAGC,IAAQ,CACjC,KAAM,CAAE,KAAAC,EAAM,MAAAC,CAAM,EAAIL,EAAM,WAAWM,CAAuB,EAEhE,OACEN,EAAA,cAACJ,EAAA,CAAY,GAAGM,EAAO,MAAOG,EAAO,KAAMD,EAAM,IAAKD,CACnDF,EAAAA,CACH,CAEJ,CAAC,EAEDF,EAAqB,YAAc"}

package/dist/components/segmented-control/SegmentedControlItemList.d.ts

@@ -1,3 +1,2 @@
 import * as React from 'react';
-import { Tabs } from '../tabs';
-export declare const SegmentedControlItemList: (props: React.ComponentProps<typeof Tabs.TriggerList>) => JSX.Element;
+export declare const SegmentedControlItemList: React.FC;

package/dist/components/segmented-control/SegmentedControlItemList.js

@@ -1,2 +1,2 @@
-import*as t from"react";import{styled as c}from"../../stitches.js";import{Box as g}from"../box/Box.js";import{Tabs as w}from"../tabs/Tabs.js";import{useSegmentedControl as E}from"./SegmentedControlContext.js";const C=c(w.TriggerList,{position:"relative",p:"$1",borderRadius:"$3",overflow:"hidden",variants:{theme:{primary:{bg:"$primary200"},marsh:{bg:"$marsh200"}}},'& > div[role="tablist"]':{position:"relative"},"& > button":{zIndex:2}}),R=c(g,{content:"",position:"absolute",bg:"white",borderRadius:"$2",variants:{interacted:{true:{transition:"all 0.3s ease"},false:{transition:"none"}}}}),L=s=>{const{theme:u,defaultValue:l}=E(),a=t.useRef([]),d=t.Children.toArray(s.children).findIndex(e=>(e==null?void 0:e.props.value)===l),[i,f]=t.useState(d!==-1?d:0),[m,h]=t.useState({left:0,height:0,width:0}),[p,b]=t.useState(!1),v=e=>{f(e),b(!0)},n=t.useCallback(()=>{const e=a.current[i];if(!e)return;const{width:o,height:r}=e.getBoundingClientRect();h({left:e.offsetLeft,height:r,width:o})},[i]);return t.useEffect(()=>{const e=new ResizeObserver(n),o=a.current;return o.forEach(r=>{r&&e.observe(r)}),()=>{o.forEach(r=>{r&&e.unobserve(r)}),e.disconnect()}},[i,n]),t.useEffect(()=>(window.addEventListener("resize",n),()=>{window.removeEventListener("resize",n)}),[n]),t.useEffect(()=>{n()},[i,n]),t.createElement(C,{theme:u,defaultValue:l,...s},t.createElement(R,{css:{...m},interacted:p}),t.Children.map(s.children,(e,o)=>t.cloneElement(e,{onClick:()=>v(o),ref:r=>a.current[o]=r})))};export{L as SegmentedControlItemList};
+import*as t from"react";import{styled as l}from"../../stitches.js";import{Box as b}from"../box/Box.js";import{Tabs as g}from"../tabs/Tabs.js";import{SegmentedControlContext as E}from"./SegmentedControlContext.js";const w=l(g.TriggerList,{position:"relative",p:"$1",borderRadius:"$3",overflow:"hidden",variants:{theme:{primary:{bg:"$primary200"},marsh:{bg:"$marsh200"}}},'& > div[role="tablist"]':{position:"relative"},"& > button":{zIndex:2}}),C=l(b,{content:"",position:"absolute",bg:"white",borderRadius:"$2",variants:{interacted:{true:{transition:"all 0.3s ease"},false:{transition:"none"}}}}),d=s=>{const{theme:c,defaultValue:u,value:m}=t.useContext(E),a=t.useRef([]),i=t.Children.toArray(s.children).findIndex(e=>(e==null?void 0:e.props.value)===m),[f,h]=t.useState({left:0,height:0,width:0}),[p,v]=t.useState(!1),n=t.useCallback(()=>{const e=a.current[i];if(!e)return;const{width:o,height:r}=e.getBoundingClientRect();h({left:e.offsetLeft,height:r,width:o})},[i]);return t.useEffect(()=>{const e=new ResizeObserver(n),o=a.current;return o.forEach(r=>{r&&e.observe(r)}),()=>{o.forEach(r=>{r&&e.unobserve(r)}),e.disconnect()}},[i,n]),t.useEffect(()=>(window.addEventListener("resize",n),()=>{window.removeEventListener("resize",n)}),[n]),t.useEffect(()=>{n()},[i,n]),t.createElement(w,{theme:c,defaultValue:u,...s},t.createElement(C,{css:{...f},interacted:p}),t.Children.map(s.children,(e,o)=>{if(!t.isValidElement(e))throw new Error(`Child passed to ${d.displayName} is not a valid element`);return t.cloneElement(e,{onClick:r=>{v(!0),e.props.onClick&&e.props.onClick(r)},ref:r=>a.current[o]=r})}))};export{d as SegmentedControlItemList};
 //# sourceMappingURL=SegmentedControlItemList.js.map

package/dist/components/segmented-control/SegmentedControlItemList.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlItemList.js","sources":["../../../src/components/segmented-control/SegmentedControlItemList.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../stitches'\nimport { Box } from '../box'\nimport { Tabs } from '../tabs'\nimport { useSegmentedControl } from './SegmentedControlContext'\n\nconst StyledTriggerList = styled(Tabs.TriggerList, {\n  position: 'relative',\n  p: '$1',\n  borderRadius: '$3',\n  overflow: 'hidden',\n  variants: {\n    theme: {\n      primary: { bg: '$primary200' },\n      marsh: { bg: '$marsh200' }\n    }\n  },\n  '& > div[role=\"tablist\"]': {\n    position: 'relative'\n  },\n  '& > button': {\n    zIndex: 2\n  }\n})\n\nconst SelectionIndicator = styled(Box, {\n  content: '',\n  position: 'absolute',\n  bg: 'white',\n  borderRadius: '$2',\n  variants: {\n    interacted: {\n      true: {\n        transition: 'all 0.3s ease'\n      },\n      false: {\n        transition: 'none'\n      }\n    }\n  }\n})\n\nexport const SegmentedControlItemList = (\n  props: React.ComponentProps<typeof Tabs.TriggerList>\n): JSX.Element => {\n  const { theme, defaultValue } = useSegmentedControl()\n\n  const tabsRef = React.useRef<(HTMLElement | null)[]>([])\n\n  const defaultSelectedIndex = React.Children.toArray(props.children).findIndex(\n    (child) => (child as React.ReactElement)?.props.value === defaultValue\n  )\n  const [selectedIndex, setSelectedIndex] = React.useState(\n    defaultSelectedIndex !== -1 ? defaultSelectedIndex : 0\n  )\n  const [indicatorStyles, setIndicatorStyles] = React.useState({\n    left: 0,\n    height: 0,\n    width: 0\n  })\n  const [hasInteracted, setHasInteracted] = React.useState(false)\n\n  const setSelection = (index: number) => {\n    setSelectedIndex(index)\n    setHasInteracted(true)\n  }\n\n  const updateIndicatorPosition = React.useCallback(() => {\n    const currentTab = tabsRef.current[selectedIndex]\n    if (!currentTab) return\n\n    const { width, height } = currentTab.getBoundingClientRect()\n    setIndicatorStyles({ left: currentTab.offsetLeft, height, width })\n  }, [selectedIndex])\n\n  React.useEffect(() => {\n    const resizeObserver = new ResizeObserver(updateIndicatorPosition)\n    const currentTabs = tabsRef.current\n    currentTabs.forEach((tab) => {\n      if (tab) resizeObserver.observe(tab)\n    })\n\n    return () => {\n      currentTabs.forEach((tab) => {\n        if (tab) resizeObserver.unobserve(tab)\n      })\n      resizeObserver.disconnect()\n    }\n  }, [selectedIndex, updateIndicatorPosition])\n\n  React.useEffect(() => {\n    window.addEventListener('resize', updateIndicatorPosition)\n    return () => {\n      window.removeEventListener('resize', updateIndicatorPosition)\n    }\n  }, [updateIndicatorPosition])\n\n  React.useEffect(() => {\n    updateIndicatorPosition()\n  }, [selectedIndex, updateIndicatorPosition])\n\n  return (\n    <StyledTriggerList theme={theme} defaultValue={defaultValue} {...props}>\n      <SelectionIndicator\n        css={{\n          ...indicatorStyles\n        }}\n        interacted={hasInteracted}\n      />\n      {React.Children.map(props.children, (child, index) =>\n        React.cloneElement(child as React.ReactElement, {\n          onClick: () => setSelection(index),\n          ref: (el) => (tabsRef.current[index] = el)\n        })\n      )}\n    </StyledTriggerList>\n  )\n}\n"],"names":["StyledTriggerList","styled","Tabs","SelectionIndicator","Box","SegmentedControlItemList","props","theme","defaultValue","useSegmentedControl","tabsRef","React","defaultSelectedIndex","child","selectedIndex","setSelectedIndex","indicatorStyles","setIndicatorStyles","hasInteracted","setHasInteracted","setSelection","index","updateIndicatorPosition","currentTab","width","height","resizeObserver","currentTabs","tab","el"],"mappings":"iNAOA,MAAMA,EAAoBC,EAAOC,EAAK,YAAa,CACjD,SAAU,WACV,EAAG,KACH,aAAc,KACd,SAAU,SACV,SAAU,CACR,MAAO,CACL,QAAS,CAAE,GAAI,aAAc,EAC7B,MAAO,CAAE,GAAI,WAAY,CAC3B,CACF,EACA,0BAA2B,CACzB,SAAU,UACZ,EACA,aAAc,CACZ,OAAQ,CACV,CACF,CAAC,EAEKC,EAAqBF,EAAOG,EAAK,CACrC,QAAS,GACT,SAAU,WACV,GAAI,QACJ,aAAc,KACd,SAAU,CACR,WAAY,CACV,KAAM,CACJ,WAAY,eACd,EACA,MAAO,CACL,WAAY,MACd,CACF,CACF,CACF,CAAC,EAEYC,EACXC,GACgB,CAChB,KAAM,CAAE,MAAAC,EAAO,aAAAC,CAAa,EAAIC,EAE1BC,EAAAA,EAAUC,EAAM,OAA+B,CAAE,CAAA,EAEjDC,EAAuBD,EAAM,SAAS,QAAQL,EAAM,QAAQ,EAAE,UACjEO,IAAWA,GAAA,KAAA,OAAAA,EAA8B,MAAM,SAAUL,CAC5D,EACM,CAACM,EAAeC,CAAgB,EAAIJ,EAAM,SAC9CC,IAAyB,GAAKA,EAAuB,CACvD,EACM,CAACI,EAAiBC,CAAkB,EAAIN,EAAM,SAAS,CAC3D,KAAM,EACN,OAAQ,EACR,MAAO,CACT,CAAC,EACK,CAACO,EAAeC,CAAgB,EAAIR,EAAM,SAAS,EAAK,EAExDS,EAAgBC,GAAkB,CACtCN,EAAiBM,CAAK,EACtBF,EAAiB,EAAI,CACvB,EAEMG,EAA0BX,EAAM,YAAY,IAAM,CACtD,MAAMY,EAAab,EAAQ,QAAQI,GACnC,GAAI,CAACS,EAAY,OAEjB,KAAM,CAAE,MAAAC,EAAO,OAAAC,CAAO,EAAIF,EAAW,sBAAA,EACrCN,EAAmB,CAAE,KAAMM,EAAW,WAAY,OAAAE,EAAQ,MAAAD,CAAM,CAAC,CACnE,EAAG,CAACV,CAAa,CAAC,EAElB,OAAAH,EAAM,UAAU,IAAM,CACpB,MAAMe,EAAiB,IAAI,eAAeJ,CAAuB,EAC3DK,EAAcjB,EAAQ,QAC5B,OAAAiB,EAAY,QAASC,GAAQ,CACvBA,GAAKF,EAAe,QAAQE,CAAG,CACrC,CAAC,EAEM,IAAM,CACXD,EAAY,QAASC,GAAQ,CACvBA,GAAKF,EAAe,UAAUE,CAAG,CACvC,CAAC,EACDF,EAAe,WACjB,CAAA,CACF,EAAG,CAACZ,EAAeQ,CAAuB,CAAC,EAE3CX,EAAM,UAAU,KACd,OAAO,iBAAiB,SAAUW,CAAuB,EAClD,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAuB,CAC9D,GACC,CAACA,CAAuB,CAAC,EAE5BX,EAAM,UAAU,IAAM,CACpBW,EACF,CAAA,EAAG,CAACR,EAAeQ,CAAuB,CAAC,EAGzCX,EAAA,cAACX,EAAA,CAAkB,MAAOO,EAAO,aAAcC,EAAe,GAAGF,GAC/DK,EAAA,cAACR,EAAA,CACC,IAAK,CACH,GAAGa,CACL,EACA,WAAYE,CACd,CAAA,EACCP,EAAM,SAAS,IAAIL,EAAM,SAAU,CAACO,EAAOQ,IAC1CV,EAAM,aAAaE,EAA6B,CAC9C,QAAS,IAAMO,EAAaC,CAAK,EACjC,IAAMQ,GAAQnB,EAAQ,QAAQW,GAASQ,CACzC,CAAC,CACH,CACF,CAEJ"}
+{"version":3,"file":"SegmentedControlItemList.js","sources":["../../../src/components/segmented-control/SegmentedControlItemList.tsx"],"sourcesContent":["import invariant from 'invariant'\nimport * as React from 'react'\n\nimport { styled } from '../../stitches'\nimport { Box } from '../box'\nimport { Tabs } from '../tabs'\nimport { SegmentedControlContext } from './SegmentedControlContext'\nimport { SegmentedControlItem } from './SegmentedControlItem'\n\nconst StyledTriggerList = styled(Tabs.TriggerList, {\n  position: 'relative',\n  p: '$1',\n  borderRadius: '$3',\n  overflow: 'hidden',\n  variants: {\n    theme: {\n      primary: { bg: '$primary200' },\n      marsh: { bg: '$marsh200' }\n    }\n  },\n  '& > div[role=\"tablist\"]': {\n    position: 'relative'\n  },\n  '& > button': {\n    zIndex: 2\n  }\n})\n\nconst SelectionIndicator = styled(Box, {\n  content: '',\n  position: 'absolute',\n  bg: 'white',\n  borderRadius: '$2',\n  variants: {\n    interacted: {\n      true: {\n        transition: 'all 0.3s ease'\n      },\n      false: {\n        transition: 'none'\n      }\n    }\n  }\n})\n\nexport const SegmentedControlItemList: React.FC = (\n  props: React.ComponentProps<typeof Tabs.TriggerList>\n) => {\n  const { theme, defaultValue, value } = React.useContext(\n    SegmentedControlContext\n  )\n\n  const tabsRef = React.useRef<(HTMLElement | null)[]>([])\n\n  const selectedIndex = React.Children.toArray(props.children).findIndex(\n    (child) => (child as React.ReactElement)?.props.value === value\n  )\n\n  const [indicatorStyles, setIndicatorStyles] = React.useState({\n    left: 0,\n    height: 0,\n    width: 0\n  })\n  const [hasInteracted, setHasInteracted] = React.useState(false)\n\n  const updateIndicatorPosition = React.useCallback(() => {\n    const currentTab = tabsRef.current[selectedIndex]\n    if (!currentTab) return\n\n    const { width, height } = currentTab.getBoundingClientRect()\n    setIndicatorStyles({ left: currentTab.offsetLeft, height, width })\n  }, [selectedIndex])\n\n  React.useEffect(() => {\n    const resizeObserver = new ResizeObserver(updateIndicatorPosition)\n    const currentTabs = tabsRef.current\n    currentTabs.forEach((tab) => {\n      if (tab) resizeObserver.observe(tab)\n    })\n\n    return () => {\n      currentTabs.forEach((tab) => {\n        if (tab) resizeObserver.unobserve(tab)\n      })\n      resizeObserver.disconnect()\n    }\n  }, [selectedIndex, updateIndicatorPosition])\n\n  React.useEffect(() => {\n    window.addEventListener('resize', updateIndicatorPosition)\n    return () => {\n      window.removeEventListener('resize', updateIndicatorPosition)\n    }\n  }, [updateIndicatorPosition])\n\n  React.useEffect(() => {\n    updateIndicatorPosition()\n  }, [selectedIndex, updateIndicatorPosition])\n\n  return (\n    <StyledTriggerList theme={theme} defaultValue={defaultValue} {...props}>\n      <SelectionIndicator\n        css={{\n          ...indicatorStyles\n        }}\n        interacted={hasInteracted}\n      />\n      {React.Children.map(props.children, (child, index) => {\n        if (!React.isValidElement(child)) {\n          throw new Error(\n            `Child passed to ${SegmentedControlItemList.displayName} is not a valid element`\n          )\n        }\n\n        return React.cloneElement(\n          child as React.ReactElement<\n            React.ComponentProps<typeof SegmentedControlItem>\n          >,\n          {\n            onClick: (e) => {\n              setHasInteracted(true)\n              if (child.props.onClick) child.props.onClick(e)\n            },\n            ref: (el) => (tabsRef.current[index] = el)\n          }\n        )\n      })}\n    </StyledTriggerList>\n  )\n}\n"],"names":["StyledTriggerList","styled","Tabs","SelectionIndicator","Box","SegmentedControlItemList","props","theme","defaultValue","value","React","SegmentedControlContext","tabsRef","selectedIndex","child","indicatorStyles","setIndicatorStyles","hasInteracted","setHasInteracted","updateIndicatorPosition","currentTab","width","height","resizeObserver","currentTabs","tab","index","e","el"],"mappings":"qNASA,MAAMA,EAAoBC,EAAOC,EAAK,YAAa,CACjD,SAAU,WACV,EAAG,KACH,aAAc,KACd,SAAU,SACV,SAAU,CACR,MAAO,CACL,QAAS,CAAE,GAAI,aAAc,EAC7B,MAAO,CAAE,GAAI,WAAY,CAC3B,CACF,EACA,0BAA2B,CACzB,SAAU,UACZ,EACA,aAAc,CACZ,OAAQ,CACV,CACF,CAAC,EAEKC,EAAqBF,EAAOG,EAAK,CACrC,QAAS,GACT,SAAU,WACV,GAAI,QACJ,aAAc,KACd,SAAU,CACR,WAAY,CACV,KAAM,CACJ,WAAY,eACd,EACA,MAAO,CACL,WAAY,MACd,CACF,CACF,CACF,CAAC,EAEYC,EACXC,GACG,CACH,KAAM,CAAE,MAAAC,EAAO,aAAAC,EAAc,MAAAC,CAAM,EAAIC,EAAM,WAC3CC,CACF,EAEMC,EAAUF,EAAM,OAA+B,CAAE,CAAA,EAEjDG,EAAgBH,EAAM,SAAS,QAAQJ,EAAM,QAAQ,EAAE,UAC1DQ,IAAWA,GAAA,YAAAA,EAA8B,MAAM,SAAUL,CAC5D,EAEM,CAACM,EAAiBC,CAAkB,EAAIN,EAAM,SAAS,CAC3D,KAAM,EACN,OAAQ,EACR,MAAO,CACT,CAAC,EACK,CAACO,EAAeC,CAAgB,EAAIR,EAAM,SAAS,EAAK,EAExDS,EAA0BT,EAAM,YAAY,IAAM,CACtD,MAAMU,EAAaR,EAAQ,QAAQC,GACnC,GAAI,CAACO,EAAY,OAEjB,KAAM,CAAE,MAAAC,EAAO,OAAAC,CAAO,EAAIF,EAAW,wBACrCJ,EAAmB,CAAE,KAAMI,EAAW,WAAY,OAAAE,EAAQ,MAAAD,CAAM,CAAC,CACnE,EAAG,CAACR,CAAa,CAAC,EAElB,OAAAH,EAAM,UAAU,IAAM,CACpB,MAAMa,EAAiB,IAAI,eAAeJ,CAAuB,EAC3DK,EAAcZ,EAAQ,QAC5B,OAAAY,EAAY,QAASC,GAAQ,CACvBA,GAAKF,EAAe,QAAQE,CAAG,CACrC,CAAC,EAEM,IAAM,CACXD,EAAY,QAASC,GAAQ,CACvBA,GAAKF,EAAe,UAAUE,CAAG,CACvC,CAAC,EACDF,EAAe,YACjB,CACF,EAAG,CAACV,EAAeM,CAAuB,CAAC,EAE3CT,EAAM,UAAU,KACd,OAAO,iBAAiB,SAAUS,CAAuB,EAClD,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAuB,CAC9D,GACC,CAACA,CAAuB,CAAC,EAE5BT,EAAM,UAAU,IAAM,CACpBS,EACF,CAAA,EAAG,CAACN,EAAeM,CAAuB,CAAC,EAGzCT,EAAA,cAACV,EAAA,CAAkB,MAAOO,EAAO,aAAcC,EAAe,GAAGF,CAAAA,EAC/DI,EAAA,cAACP,EAAA,CACC,IAAK,CACH,GAAGY,CACL,EACA,WAAYE,CAAAA,CACd,EACCP,EAAM,SAAS,IAAIJ,EAAM,SAAU,CAACQ,EAAOY,IAAU,CACpD,GAAI,CAAChB,EAAM,eAAeI,CAAK,EAC7B,MAAM,IAAI,MACR,mBAAmBT,EAAyB,oCAC9C,EAGF,OAAOK,EAAM,aACXI,EAGA,CACE,QAAUa,GAAM,CACdT,EAAiB,EAAI,EACjBJ,EAAM,MAAM,SAASA,EAAM,MAAM,QAAQa,CAAC,CAChD,EACA,IAAMC,GAAQhB,EAAQ,QAAQc,GAASE,CACzC,CACF,CACF,CAAC,CACH,CAEJ"}

package/dist/components/segmented-control/SegmentedControlRoot.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { SegmentedControlTheme } from './SegmentedControlContext';
+import type { SegmentedControlTheme } from './SegmentedControl.types';
 declare const StyledSegmentedControlRoot: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<import("@atom-learning/stitches-react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-tabs").TabsProps & React.RefAttributes<HTMLDivElement>>, {}, {
     sm: string;
     md: string;
@@ -1834,5 +1834,5 @@ declare const StyledSegmentedControlRoot: import("@atom-learning/stitches-react/
 export interface SegmentedControlRootProps extends React.ComponentProps<typeof StyledSegmentedControlRoot> {
     theme?: SegmentedControlTheme;
 }
-export declare const SegmentedControlRoot: ({ size, children, theme, defaultValue, ...props }: React.PropsWithChildren<SegmentedControlRootProps>) => React.JSX.Element;
+export declare const SegmentedControlRoot: ({ size, theme, defaultValue, children, ...props }: React.PropsWithChildren<SegmentedControlRootProps>) => React.JSX.Element;
 export {};

package/dist/components/segmented-control/SegmentedControlRoot.js

@@ -1,2 +1,2 @@
-import*as r from"react";import{styled as a}from"../../stitches.js";import{Tabs as l}from"../tabs/Tabs.js";import{SegmentedControlProvider as n}from"./SegmentedControlContext.js";const s=a(l,{"& > div":{border:"none"},variants:{size:{sm:{width:"unset"},md:{},lg:{}}}}),d=({size:e,children:o,theme:m="primary",defaultValue:t="",...i})=>r.createElement(n,{size:e,theme:m,defaultValue:t},r.createElement(s,{...i,size:e,defaultValue:t},o));export{d as SegmentedControlRoot};
+import*as t from"react";import{styled as v}from"../../stitches.js";import{Tabs as c}from"../tabs/Tabs.js";import{SegmentedControlContext as f}from"./SegmentedControlContext.js";const h=v(c,{"& > div":{border:"none"},variants:{size:{sm:{width:"unset"},md:{},lg:{}}}}),g=({size:n,theme:m="primary",defaultValue:e,children:u,...o})=>{const a=o.value!==void 0,[i,s]=t.useState(e),r=a?o.value:i,l=a?o.onValueChange:s;t.useEffect(()=>{!a&&e&&s(e)},[e,a]);const d=t.useMemo(()=>({size:n,theme:m,defaultValue:e,onValueChange:l,value:r}),[n,m,e,l,r]);return t.createElement(f.Provider,{value:d},t.createElement(h,{size:n,value:r,onValueChange:l,...o},u))};export{g as SegmentedControlRoot};
 //# sourceMappingURL=SegmentedControlRoot.js.map

package/dist/components/segmented-control/SegmentedControlRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlRoot.js","sources":["../../../src/components/segmented-control/SegmentedControlRoot.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../stitches'\nimport { Tabs } from '../tabs'\nimport {\n  SegmentedControlProvider,\n  SegmentedControlTheme\n} from './SegmentedControlContext'\n\nconst StyledSegmentedControlRoot = styled(Tabs, {\n  '& > div': { border: 'none' },\n  variants: {\n    size: {\n      sm: {\n        width: 'unset'\n      },\n      md: {},\n      lg: {}\n    }\n  }\n})\n\nexport interface SegmentedControlRootProps\n  extends React.ComponentProps<typeof StyledSegmentedControlRoot> {\n  theme?: SegmentedControlTheme\n}\n\nexport const SegmentedControlRoot = ({\n  size,\n  children,\n  theme = 'primary',\n  defaultValue = '',\n  ...props\n}: React.PropsWithChildren<SegmentedControlRootProps>): React.JSX.Element => (\n  <SegmentedControlProvider\n    size={size}\n    theme={theme}\n    defaultValue={defaultValue}\n  >\n    <StyledSegmentedControlRoot\n      {...props}\n      size={size}\n      defaultValue={defaultValue}\n    >\n      {children}\n    </StyledSegmentedControlRoot>\n  </SegmentedControlProvider>\n)\n"],"names":["StyledSegmentedControlRoot","styled","Tabs","SegmentedControlRoot","size","children","theme","defaultValue","props","React","SegmentedControlProvider"],"mappings":"kLASA,MAAMA,EAA6BC,EAAOC,EAAM,CAC9C,UAAW,CAAE,OAAQ,MAAO,EAC5B,SAAU,CACR,KAAM,CACJ,GAAI,CACF,MAAO,OACT,EACA,GAAI,CACJ,EAAA,GAAI,CAAA,CACN,CACF,CACF,CAAC,EAOYC,EAAuB,CAAC,CACnC,KAAAC,EACA,SAAAC,EACA,MAAAC,EAAQ,UACR,aAAAC,EAAe,MACZC,CACL,IACEC,EAAA,cAACC,EAAA,CACC,KAAMN,EACN,MAAOE,EACP,aAAcC,GAEdE,EAAA,cAACT,EAAA,CACE,GAAGQ,EACJ,KAAMJ,EACN,aAAcG,CAAAA,EAEbF,CACH,CACF"}
+{"version":3,"file":"SegmentedControlRoot.js","sources":["../../../src/components/segmented-control/SegmentedControlRoot.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../stitches'\nimport { Tabs } from '../tabs'\nimport type { SegmentedControlTheme } from './SegmentedControl.types'\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nconst StyledSegmentedControlRoot = styled(Tabs, {\n  '& > div': { border: 'none' },\n  variants: {\n    size: {\n      sm: {\n        width: 'unset'\n      },\n      md: {},\n      lg: {}\n    }\n  }\n})\n\nexport interface SegmentedControlRootProps\n  extends React.ComponentProps<typeof StyledSegmentedControlRoot> {\n  theme?: SegmentedControlTheme\n}\n\nexport const SegmentedControlRoot = ({\n  size,\n  theme = 'primary',\n  defaultValue,\n  children,\n  ...props\n}: React.PropsWithChildren<SegmentedControlRootProps>): React.JSX.Element => {\n  const isControlled = props.value !== undefined\n\n  const [internalValue, setInternalValue] = React.useState(defaultValue)\n\n  const currentValue = isControlled ? props.value : internalValue\n  const handleValueChange = isControlled\n    ? props.onValueChange\n    : setInternalValue\n\n  React.useEffect(() => {\n    if (!isControlled && defaultValue) {\n      setInternalValue(defaultValue)\n    }\n  }, [defaultValue, isControlled])\n\n  const value = React.useMemo(\n    () => ({\n      size,\n      theme,\n      defaultValue,\n      onValueChange: handleValueChange,\n      value: currentValue\n    }),\n    [size, theme, defaultValue, handleValueChange, currentValue]\n  )\n\n  return (\n    <SegmentedControlContext.Provider value={value}>\n      <StyledSegmentedControlRoot\n        size={size}\n        value={currentValue}\n        onValueChange={handleValueChange}\n        {...props}\n      >\n        {children}\n      </StyledSegmentedControlRoot>\n    </SegmentedControlContext.Provider>\n  )\n}\n"],"names":["StyledSegmentedControlRoot","styled","Tabs","SegmentedControlRoot","size","theme","defaultValue","children","props","isControlled","internalValue","setInternalValue","React","currentValue","handleValueChange","value","SegmentedControlContext"],"mappings":"iLAOA,MAAMA,EAA6BC,EAAOC,EAAM,CAC9C,UAAW,CAAE,OAAQ,MAAO,EAC5B,SAAU,CACR,KAAM,CACJ,GAAI,CACF,MAAO,OACT,EACA,GAAI,CACJ,EAAA,GAAI,CAAA,CACN,CACF,CACF,CAAC,EAOYC,EAAuB,CAAC,CACnC,KAAAC,EACA,MAAAC,EAAQ,UACR,aAAAC,EACA,SAAAC,KACGC,CACL,IAA6E,CAC3E,MAAMC,EAAeD,EAAM,QAAU,OAE/B,CAACE,EAAeC,CAAgB,EAAIC,EAAM,SAASN,CAAY,EAE/DO,EAAeJ,EAAeD,EAAM,MAAQE,EAC5CI,EAAoBL,EACtBD,EAAM,cACNG,EAEJC,EAAM,UAAU,IAAM,CAChB,CAACH,GAAgBH,GACnBK,EAAiBL,CAAY,CAEjC,EAAG,CAACA,EAAcG,CAAY,CAAC,EAE/B,MAAMM,EAAQH,EAAM,QAClB,KAAO,CACL,KAAAR,EACA,MAAAC,EACA,aAAAC,EACA,cAAeQ,EACf,MAAOD,CACT,GACA,CAACT,EAAMC,EAAOC,EAAcQ,EAAmBD,CAAY,CAC7D,EAEA,OACED,EAAA,cAACI,EAAwB,SAAxB,CAAiC,MAAOD,CACvCH,EAAAA,EAAA,cAACZ,EAAA,CACC,KAAMI,EACN,MAAOS,EACP,cAAeC,EACd,GAAGN,CAEHD,EAAAA,CACH,CACF,CAEJ"}