@atom-learning/components 4.3.2 → 4.5.0

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

@@ -1,2 +1,2 @@
-import*as t from"react";import{styled as r}from"../../stitches.js";import{Flex as s}from"../flex/Flex.js";import{Tabs as n}from"../tabs/Tabs.js";import{useSegmentedControl as h}from"./SegmentedControlContext.js";const m=r(n.Trigger,{bg:"transparent",borderRadius:"$2",p:0,variants:{theme:{primary:{"&[data-state=inactive]:hover":{bg:"$primary300"},"&:focus":{borderColor:"$primary800"}},marsh:{"&[data-state=inactive]:hover":{bg:"$marsh300"},"&:focus":{borderColor:"$marsh800"}}},size:{sm:{flex:"unset"},md:{flex:1},lg:{flex:1}}},"& > div":{display:"none"},"&[data-state=active]":{bg:"white",boxShadow:"none",border:"2px solid transparent","& :is(h1,h2,h3,h4,h5,h6)":{fontWeight:600,color:"$textBold"},"&:hover":{bg:"white"},"&:focus-visible":{boxShadow:"none"}},"&[data-state=inactive]":{"& :is(h1,h2,h3,h4,h5,h6)":{fontWeight:400,color:"$grey900"}},"&[disabled]":{opacity:.3}}),d=r(s,{variants:{size:{sm:{p:"$4 $24",gap:"$3"},md:{p:"$24 $5",gap:"$4"},lg:{p:"$24 $5",gap:"$4"}}}}),l=({children:o,...a})=>{const{size:e,theme:i}=h();return t.createElement(m,{...a,theme:i,size:e},t.createElement(d,{size:e,direction:"column",align:"center",justify:"center"},o))};export{l as SegmentedControlItem};
+import*as e from"react";import{styled as n}from"../../stitches.js";import{Tabs as d}from"../tabs/Tabs.js";import{useSegmentedControl as m}from"./SegmentedControlContext.js";const p=n(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"},"&[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:s}=m();return e.createElement(p,{...o,theme:s,size:i,ref:a},t)});r.displayName="SegmentedControlItem";export{r 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 { Flex } from '../flex'\nimport { Tabs } from '../tabs'\nimport { useSegmentedControl } from './SegmentedControlContext'\n\nconst StyledItem = styled(Tabs.Trigger, {\n  bg: 'transparent',\n  borderRadius: '$2',\n  p: 0,\n  variants: {\n    theme: {\n      primary: {\n        '&[data-state=inactive]:hover': {\n          bg: '$primary300'\n        },\n        '&:focus': {\n          borderColor: '$primary800'\n        }\n      },\n      marsh: {\n        '&[data-state=inactive]:hover': {\n          bg: '$marsh300'\n        },\n        '&:focus': {\n          borderColor: '$marsh800'\n        }\n      }\n    },\n    size: {\n      sm: {\n        flex: 'unset'\n      },\n      md: {\n        flex: 1\n      },\n      lg: {\n        flex: 1\n      }\n    }\n  },\n  '& > div': { display: 'none' },\n  '&[data-state=active]': {\n    bg: 'white',\n    boxShadow: 'none',\n    border: '2px solid transparent',\n    '& :is(h1,h2,h3,h4,h5,h6)': {\n      fontWeight: 600,\n      color: '$textBold'\n    },\n    '&:hover': {\n      bg: 'white'\n    },\n    '&:focus-visible': {\n      boxShadow: 'none'\n    }\n  },\n  '&[data-state=inactive]': {\n    '& :is(h1,h2,h3,h4,h5,h6)': {\n      fontWeight: 400,\n      color: '$grey900'\n    }\n  },\n  '&[disabled]': {\n    opacity: 0.3\n  }\n})\n\nconst StyledContainer = styled(Flex, {\n  variants: {\n    size: {\n      sm: {\n        p: '$4 $24',\n        gap: '$3'\n      },\n      md: {\n        p: '$24 $5',\n        gap: '$4'\n      },\n      lg: {\n        p: '$24 $5',\n        gap: '$4'\n      }\n    }\n  }\n})\n\nexport const SegmentedControlItem = ({\n  children,\n  ...props\n}: Omit<React.ComponentProps<typeof StyledItem>, 'size'>): JSX.Element => {\n  const { size, theme } = useSegmentedControl()\n\n  return (\n    <StyledItem {...props} theme={theme} size={size}>\n      <StyledContainer\n        size={size}\n        direction=\"column\"\n        align=\"center\"\n        justify=\"center\"\n      >\n        {children}\n      </StyledContainer>\n    </StyledItem>\n  )\n}\n"],"names":["StyledItem","styled","Tabs","StyledContainer","Flex","SegmentedControlItem","children","props","size","theme","useSegmentedControl","React"],"mappings":"oNAOA,MAAMA,EAAaC,EAAOC,EAAK,QAAS,CACtC,GAAI,cACJ,aAAc,KACd,EAAG,EACH,SAAU,CACR,MAAO,CACL,QAAS,CACP,+BAAgC,CAC9B,GAAI,aACN,EACA,UAAW,CACT,YAAa,aACf,CACF,EACA,MAAO,CACL,+BAAgC,CAC9B,GAAI,WACN,EACA,UAAW,CACT,YAAa,WACf,CACF,CACF,EACA,KAAM,CACJ,GAAI,CACF,KAAM,OACR,EACA,GAAI,CACF,KAAM,CACR,EACA,GAAI,CACF,KAAM,CACR,CACF,CACF,EACA,UAAW,CAAE,QAAS,MAAO,EAC7B,uBAAwB,CACtB,GAAI,QACJ,UAAW,OACX,OAAQ,wBACR,2BAA4B,CAC1B,WAAY,IACZ,MAAO,WACT,EACA,UAAW,CACT,GAAI,OACN,EACA,kBAAmB,CACjB,UAAW,MACb,CACF,EACA,yBAA0B,CACxB,2BAA4B,CAC1B,WAAY,IACZ,MAAO,UACT,CACF,EACA,cAAe,CACb,QAAS,EACX,CACF,CAAC,EAEKC,EAAkBF,EAAOG,EAAM,CACnC,SAAU,CACR,KAAM,CACJ,GAAI,CACF,EAAG,SACH,IAAK,IACP,EACA,GAAI,CACF,EAAG,SACH,IAAK,IACP,EACA,GAAI,CACF,EAAG,SACH,IAAK,IACP,CACF,CACF,CACF,CAAC,EAEYC,EAAuB,CAAC,CACnC,SAAAC,KACGC,CACL,IAA0E,CACxE,KAAM,CAAE,KAAAC,EAAM,MAAAC,CAAM,EAAIC,EAAAA,EAExB,OACEC,EAAA,cAACX,EAAA,CAAY,GAAGO,EAAO,MAAOE,EAAO,KAAMD,CACzCG,EAAAA,EAAA,cAACR,EAAA,CACC,KAAMK,EACN,UAAU,SACV,MAAM,SACN,QAAQ,QAAA,EAEPF,CACH,CACF,CAEJ"}
+{"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  '&[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,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,EAAoB,EAE5C,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.js

@@ -1,2 +1,2 @@
-import*as t from"react";import{styled as m}from"../../stitches.js";import{Tabs as o}from"../tabs/Tabs.js";import{useSegmentedControl as s}from"./SegmentedControlContext.js";const i=m(o.TriggerList,{p:"$1",borderRadius:"$3",variants:{theme:{primary:{bg:"$primary200"},marsh:{bg:"$marsh200"}}}}),a=r=>{const{theme:e}=s();return t.createElement(i,{...r,theme:e})};export{a as SegmentedControlItemList};
+import*as e from"react";import{styled as c}from"../../stitches.js";import{Box as f}from"../box/Box.js";import{Tabs as p}from"../tabs/Tabs.js";import{useSegmentedControl as u}from"./SegmentedControlContext.js";const g=c(p.TriggerList,{position:"relative",p:"$1",borderRadius:"$3",overflow:"hidden",variants:{theme:{primary:{bg:"$primary200"},marsh:{bg:"$marsh200"}}}}),w=n=>{const{theme:a}=u(),s=e.useRef([]),[m,d]=e.useState(0),[l,h]=e.useState({left:0,height:0,width:0}),o=()=>{const t=s.current[m];if(!t)return;const{width:r,height:i}=t.getBoundingClientRect();h({left:t.offsetLeft,height:i,width:r})};return e.useEffect(()=>(o(),window.addEventListener("resize",o),()=>{window.removeEventListener("resize",o)}),[m]),e.createElement(g,{theme:a,...n},e.createElement(f,{css:{content:"",position:"absolute",bg:"white",borderRadius:"$2",transition:"all 0.3s ease",...l}}),e.Children.map(n.children,(t,r)=>e.cloneElement(t,{onClick:()=>d(r),ref:i=>s.current[r]=i})))};export{w 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 { Tabs } from '../tabs'\nimport { useSegmentedControl } from './SegmentedControlContext'\n\nconst StyledTriggerList = styled(Tabs.TriggerList, {\n  p: '$1',\n  borderRadius: '$3',\n  variants: {\n    theme: {\n      primary: { bg: '$primary200' },\n      marsh: { bg: '$marsh200' }\n    }\n  }\n})\n\nexport const SegmentedControlItemList = (\n  props: React.ComponentProps<typeof Tabs.TriggerList>\n): JSX.Element => {\n  const { theme } = useSegmentedControl()\n  return <StyledTriggerList {...props} theme={theme} />\n}\n"],"names":["StyledTriggerList","styled","Tabs","SegmentedControlItemList","props","theme","useSegmentedControl","React"],"mappings":"6KAMA,MAAMA,EAAoBC,EAAOC,EAAK,YAAa,CACjD,EAAG,KACH,aAAc,KACd,SAAU,CACR,MAAO,CACL,QAAS,CAAE,GAAI,aAAc,EAC7B,MAAO,CAAE,GAAI,WAAY,CAC3B,CACF,CACF,CAAC,EAEYC,EACXC,GACgB,CAChB,KAAM,CAAE,MAAAC,CAAM,EAAIC,EAAoB,EACtC,OAAOC,EAAA,cAACP,EAAA,CAAmB,GAAGI,EAAO,MAAOC,EAAO,CACrD"}
+{"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})\n\nexport const SegmentedControlItemList = (\n  props: React.ComponentProps<typeof Tabs.TriggerList>\n): JSX.Element => {\n  const { theme } = useSegmentedControl()\n\n  const tabsRef = React.useRef<(HTMLElement | null)[]>([])\n  const [selectedIndex, setSelectedIndex] = React.useState(0)\n  const [indicatorStyles, setIndicatorStyles] = React.useState({\n    left: 0,\n    height: 0,\n    width: 0\n  })\n\n  const updateIndicatorPosition = () => {\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  }\n\n  React.useEffect(() => {\n    updateIndicatorPosition()\n    window.addEventListener('resize', updateIndicatorPosition)\n    return () => {\n      window.removeEventListener('resize', updateIndicatorPosition)\n    }\n  }, [selectedIndex])\n\n  return (\n    <StyledTriggerList theme={theme} {...props}>\n      <Box\n        css={{\n          content: '',\n          position: 'absolute',\n          bg: 'white',\n          borderRadius: '$2',\n          transition: 'all 0.3s ease',\n          ...indicatorStyles\n        }}\n      />\n      {React.Children.map(props.children, (child, index) =>\n        React.cloneElement(child as React.ReactElement, {\n          onClick: () => setSelectedIndex(index),\n          ref: (el) => (tabsRef.current[index] = el)\n        })\n      )}\n    </StyledTriggerList>\n  )\n}\n"],"names":["StyledTriggerList","styled","Tabs","SegmentedControlItemList","props","theme","useSegmentedControl","tabsRef","React","selectedIndex","setSelectedIndex","indicatorStyles","setIndicatorStyles","updateIndicatorPosition","currentTab","width","height","Box","child","index","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,CACF,CAAC,EAEYC,EACXC,GACgB,CAChB,KAAM,CAAE,MAAAC,CAAM,EAAIC,EAAoB,EAEhCC,EAAUC,EAAM,OAA+B,CAAA,CAAE,EACjD,CAACC,EAAeC,CAAgB,EAAIF,EAAM,SAAS,CAAC,EACpD,CAACG,EAAiBC,CAAkB,EAAIJ,EAAM,SAAS,CAC3D,KAAM,EACN,OAAQ,EACR,MAAO,CACT,CAAC,EAEKK,EAA0B,IAAM,CACpC,MAAMC,EAAaP,EAAQ,QAAQE,GACnC,GAAI,CAACK,EAAY,OAEjB,KAAM,CAAE,MAAAC,EAAO,OAAAC,CAAO,EAAIF,EAAW,wBACrCF,EAAmB,CAAE,KAAME,EAAW,WAAY,OAAAE,EAAQ,MAAAD,CAAM,CAAC,CACnE,EAEA,OAAAP,EAAM,UAAU,KACdK,EACA,EAAA,OAAO,iBAAiB,SAAUA,CAAuB,EAClD,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAuB,CAC9D,GACC,CAACJ,CAAa,CAAC,EAGhBD,EAAA,cAACR,EAAA,CAAkB,MAAOK,EAAQ,GAAGD,GACnCI,EAAA,cAACS,EAAA,CACC,IAAK,CACH,QAAS,GACT,SAAU,WACV,GAAI,QACJ,aAAc,KACd,WAAY,gBACZ,GAAGN,CACL,CACF,CAAA,EACCH,EAAM,SAAS,IAAIJ,EAAM,SAAU,CAACc,EAAOC,IAC1CX,EAAM,aAAaU,EAA6B,CAC9C,QAAS,IAAMR,EAAiBS,CAAK,EACrC,IAAMC,GAAQb,EAAQ,QAAQY,GAASC,CACzC,CAAC,CACH,CACF,CAEJ"}

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

@@ -733,16 +733,16 @@ declare const StyledSegmentedControlRoot: import("@atom-learning/stitches-react/
         }): React.JSX.Element;
         displayName: string;
     };
-    Trigger: {
-        ({ children, ...rest }: React.ComponentProps<import("@atom-learning/stitches-react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-tabs").TabsTriggerProps & React.RefAttributes<HTMLButtonElement>>, {}, {
-            sm: string;
-            md: string;
-            lg: string;
-            xl: string;
-            reducedMotion: string;
-            allowMotion: string;
-            hover: string;
-        }, import("@atom-learning/stitches-react/types/css-util").CSS<{
+    Trigger: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-tabs").TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "css"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{}, {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        reducedMotion: string;
+        allowMotion: string;
+        hover: string;
+    }> & {
+        css?: import("@atom-learning/stitches-react/types/css-util").CSS<{
             sm: string;
             md: string;
             lg: string;
@@ -1097,11 +1097,10 @@ declare const StyledSegmentedControlRoot: import("@atom-learning/stitches-react/
                 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">;
             };
-        }>>> & {
-            value: string;
-        }): React.JSX.Element;
-        displayName: string;
-    };
+        }> | undefined;
+    } & {
+        value: string;
+    }, "ref"> & React.RefAttributes<HTMLButtonElement>>;
     Content: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-tabs").TabsContentProps & React.RefAttributes<HTMLDivElement>>, {}, {
         sm: string;
         md: string;

package/dist/components/tabs/Tabs.d.ts

@@ -732,16 +732,16 @@ export declare const Tabs: import("@atom-learning/stitches-react/types/styled-co
         }): React.JSX.Element;
         displayName: string;
     };
-    Trigger: {
-        ({ children, ...rest }: React.ComponentProps<import("@atom-learning/stitches-react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-tabs").TabsTriggerProps & React.RefAttributes<HTMLButtonElement>>, {}, {
-            sm: string;
-            md: string;
-            lg: string;
-            xl: string;
-            reducedMotion: string;
-            allowMotion: string;
-            hover: string;
-        }, import("@atom-learning/stitches-react/types/css-util").CSS<{
+    Trigger: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-tabs").TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "css"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{}, {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        reducedMotion: string;
+        allowMotion: string;
+        hover: string;
+    }> & {
+        css?: import("@atom-learning/stitches-react/types/css-util").CSS<{
             sm: string;
             md: string;
             lg: string;
@@ -1096,11 +1096,10 @@ export declare const Tabs: import("@atom-learning/stitches-react/types/styled-co
                 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">;
             };
-        }>>> & {
-            value: string;
-        }): React.JSX.Element;
-        displayName: string;
-    };
+        }> | undefined;
+    } & {
+        value: string;
+    }, "ref"> & React.RefAttributes<HTMLButtonElement>>;
     Content: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-tabs").TabsContentProps & React.RefAttributes<HTMLDivElement>>, {}, {
         sm: string;
         md: string;