@atom-learning/components 5.14.0 → 6.0.0-beta.0

package/dist/components/stepper/StepperStepContainer.js

@@ -1,2 +1,2 @@
-import{styled as t}from"../../stitches.js";import{Flex as e}from"../flex/Flex.js";const i=t(e,{position:"relative",fontFamily:"$body",fontWeight:600,fontSize:"$md",alignItems:"center","&:not(:last-child)":{"&::after":{content:"",position:"absolute"}},"&:focus-visible":{outline:"none"},variants:{canInteract:{true:{}},direction:{vertical:{py:"$3",flexDirection:"row","&:not(:last-child)":{"&::after":{height:"100%",width:"4px",left:"14px",top:"50%"}}},horizontal:{px:"$2",flexDirection:"column","&:not(:last-child)":{"&::after":{width:"100%",height:"4px",left:"50%",top:"14px"}}}},separator:{default:{"&:not(:last-child)":{"&::after":{bg:"$grey200"}}},active:{"&:not(:last-child)":{"&::after":{bg:"$primary800"}}},success:{"&:not(:last-child)":{"&::after":{bg:"$success"}}},viewed:{"&:not(:last-child)":{"&::after":{bg:"$grey600"}}}},status:{completed:{},active:{},default:{},viewed:{},success:{},reviewed:{}}},compoundVariants:[{canInteract:!0,status:"completed",css:{"&:hover":{"& :first-child":{bg:"$primary900",color:"white !important"},"& :last-child":{color:"$primary900"}},"&:focus-visible":{"& :first-child":{outline:"2px solid $primary800",outlineOffset:"2px"}}}},{canInteract:!0,status:"active",css:{"&:hover":{"& :first-child":{borderColor:"$grey800",color:"$grey1000"},"& :last-child":{color:"$grey1000"}},"&:focus-visible":{"& :first-child":{outline:"2px solid $primary800",outlineOffset:"2px"}}}},{canInteract:!0,status:"viewed",css:{"&:hover":{"& :first-child":{borderColor:"$grey800",color:"$grey1000"},"& :last-child":{color:"$grey1000"}},"&:focus-visible":{"& :first-child":{outline:"2px solid $primary800 !important",outlineOffset:"2px !important"}}}},{canInteract:!0,status:"reviewed",css:{"&:focus-visible":{"& :first-child":{outline:"2px solid $primary800 !important",outlineOffset:"2px !important"}}}}]});export{i as StepperStepContainer};
+import{styled as t}from"../../styled.js";import{Flex as e}from"../flex/Flex.js";const s=t(e,{base:["relative","font-body","font-semibold","text-md","items-center","not-last:after:absolute","not-last:after:content-['']","focus-visible:outline-none"],variants:{canInteract:{true:[]},direction:{vertical:["flex-row","not-last:after:h-full","not-last:after:left-3.5","not-last:after:top-1/2","not-last:after:w-1","py-3"],horizontal:["flex-col","not-last:after:h-1","not-last:after:left-1/2","not-last:after:top-3.5","not-last:after:w-full","px-2"]},separator:{default:["not-last:after:bg-grey-200"],active:["not-last:after:bg-primary-800"],success:["not-last:after:bg-success"],viewed:["not-last:after:bg-grey-600"]},status:{completed:[],active:[],default:[],viewed:[],success:[],reviewed:[]}},compoundVariants:[{canInteract:!0,status:"completed",class:["focus-visible:first:outline-2","focus-visible:first:outline-offset-2","focus-visible:first:outline-primary-800","focus-visible:first:outline-solid","hover:first:bg-primary-900","hover:first:text-white!","hover:last:text-primary-900"]},{canInteract:!0,status:"active",class:["focus-visible:first:outline-2","focus-visible:first:outline-offset-2","focus-visible:first:outline-primary-800","focus-visible:first:outline-solid","hover:first:border-grey-800","hover:first:text-grey-1000","hover:last:text-grey-1000"]},{canInteract:!0,status:"viewed",class:["focus-visible:first:outline-2!","focus-visible:first:outline-offset-2!","focus-visible:first:outline-primary-800!","focus-visible:first:outline-solid!","hover:first:border-grey-800","hover:first:text-grey-1000","hover:last:text-grey-1000"]},{canInteract:!0,status:"reviewed",class:["focus-visible:first:outline-2!","focus-visible:first:outline-offset-2!","focus-visible:first:outline-primary-800!","focus-visible:first:outline-solid!"]}]});export{s as StepperStepContainer};
 //# sourceMappingURL=StepperStepContainer.js.map

package/dist/components/stepper/StepperStepContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepperStepContainer.js","sources":["../../../src/components/stepper/StepperStepContainer.tsx"],"sourcesContent":["import { styled } from '~/stitches'\n\nimport { Flex } from '../flex'\n\nexport const StepperStepContainer = styled(Flex, {\n  position: 'relative',\n  fontFamily: '$body',\n  fontWeight: 600,\n  fontSize: '$md',\n  alignItems: 'center',\n  '&:not(:last-child)': {\n    '&::after': {\n      content: '',\n      position: 'absolute'\n    }\n  },\n  '&:focus-visible': {\n    outline: 'none'\n  },\n  variants: {\n    canInteract: { true: {} },\n    direction: {\n      vertical: {\n        py: '$3',\n        flexDirection: 'row',\n        '&:not(:last-child)': {\n          '&::after': {\n            height: '100%',\n            width: '4px',\n            left: '14px',\n            top: '50%'\n          }\n        }\n      },\n      horizontal: {\n        px: '$2',\n        flexDirection: 'column',\n        '&:not(:last-child)': {\n          '&::after': {\n            width: '100%',\n            height: '4px',\n            left: '50%',\n            top: '14px'\n          }\n        }\n      }\n    },\n    separator: {\n      default: {\n        '&:not(:last-child)': {\n          '&::after': { bg: '$grey200' }\n        }\n      },\n      active: {\n        '&:not(:last-child)': {\n          '&::after': { bg: '$primary800' }\n        }\n      },\n      success: {\n        '&:not(:last-child)': {\n          '&::after': { bg: '$success' }\n        }\n      },\n      viewed: {\n        '&:not(:last-child)': {\n          '&::after': { bg: '$grey600' }\n        }\n      }\n    },\n    status: {\n      completed: {},\n      active: {},\n      default: {},\n      viewed: {},\n      success: {},\n      reviewed: {}\n    }\n  },\n  compoundVariants: [\n    {\n      canInteract: true,\n      status: 'completed',\n      css: {\n        '&:hover': {\n          '& :first-child': { bg: '$primary900', color: 'white !important' },\n          '& :last-child': { color: '$primary900' }\n        },\n        '&:focus-visible': {\n          '& :first-child': {\n            outline: '2px solid $primary800',\n            outlineOffset: '2px'\n          }\n        }\n      }\n    },\n    {\n      canInteract: true,\n      status: 'active',\n      css: {\n        '&:hover': {\n          '& :first-child': { borderColor: '$grey800', color: '$grey1000' },\n          '& :last-child': { color: '$grey1000' }\n        },\n        '&:focus-visible': {\n          '& :first-child': {\n            outline: '2px solid $primary800',\n            outlineOffset: '2px'\n          }\n        }\n      }\n    },\n    {\n      canInteract: true,\n      status: 'viewed',\n      css: {\n        '&:hover': {\n          '& :first-child': { borderColor: '$grey800', color: '$grey1000' },\n          '& :last-child': { color: '$grey1000' }\n        },\n        '&:focus-visible': {\n          '& :first-child': {\n            outline: '2px solid $primary800 !important',\n            outlineOffset: '2px !important'\n          }\n        }\n      }\n    },\n    {\n      canInteract: true,\n      status: 'reviewed',\n      css: {\n        '&:focus-visible': {\n          '& :first-child': {\n            outline: '2px solid $primary800 !important',\n            outlineOffset: '2px !important'\n          }\n        }\n      }\n    }\n  ]\n})\n"],"names":["StepperStepContainer","styled","Flex"],"mappings":"kFAIO,MAAMA,EAAuBC,EAAOC,EAAM,CAC/C,SAAU,WACV,WAAY,QACZ,WAAY,IACZ,SAAU,MACV,WAAY,SACZ,qBAAsB,CACpB,WAAY,CACV,QAAS,GACT,SAAU,UACZ,CACF,EACA,kBAAmB,CACjB,QAAS,MACX,EACA,SAAU,CACR,YAAa,CAAE,KAAM,CAAG,CAAA,EACxB,UAAW,CACT,SAAU,CACR,GAAI,KACJ,cAAe,MACf,qBAAsB,CACpB,WAAY,CACV,OAAQ,OACR,MAAO,MACP,KAAM,OACN,IAAK,KACP,CACF,CACF,EACA,WAAY,CACV,GAAI,KACJ,cAAe,SACf,qBAAsB,CACpB,WAAY,CACV,MAAO,OACP,OAAQ,MACR,KAAM,MACN,IAAK,MACP,CACF,CACF,CACF,EACA,UAAW,CACT,QAAS,CACP,qBAAsB,CACpB,WAAY,CAAE,GAAI,UAAW,CAC/B,CACF,EACA,OAAQ,CACN,qBAAsB,CACpB,WAAY,CAAE,GAAI,aAAc,CAClC,CACF,EACA,QAAS,CACP,qBAAsB,CACpB,WAAY,CAAE,GAAI,UAAW,CAC/B,CACF,EACA,OAAQ,CACN,qBAAsB,CACpB,WAAY,CAAE,GAAI,UAAW,CAC/B,CACF,CACF,EACA,OAAQ,CACN,UAAW,CACX,EAAA,OAAQ,CAAC,EACT,QAAS,CAAA,EACT,OAAQ,GACR,QAAS,CAAA,EACT,SAAU,CACZ,CAAA,CACF,EACA,iBAAkB,CAChB,CACE,YAAa,GACb,OAAQ,YACR,IAAK,CACH,UAAW,CACT,iBAAkB,CAAE,GAAI,cAAe,MAAO,kBAAmB,EACjE,gBAAiB,CAAE,MAAO,aAAc,CAC1C,EACA,kBAAmB,CACjB,iBAAkB,CAChB,QAAS,wBACT,cAAe,KACjB,CACF,CACF,CACF,EACA,CACE,YAAa,GACb,OAAQ,SACR,IAAK,CACH,UAAW,CACT,iBAAkB,CAAE,YAAa,WAAY,MAAO,WAAY,EAChE,gBAAiB,CAAE,MAAO,WAAY,CACxC,EACA,kBAAmB,CACjB,iBAAkB,CAChB,QAAS,wBACT,cAAe,KACjB,CACF,CACF,CACF,EACA,CACE,YAAa,GACb,OAAQ,SACR,IAAK,CACH,UAAW,CACT,iBAAkB,CAAE,YAAa,WAAY,MAAO,WAAY,EAChE,gBAAiB,CAAE,MAAO,WAAY,CACxC,EACA,kBAAmB,CACjB,iBAAkB,CAChB,QAAS,mCACT,cAAe,gBACjB,CACF,CACF,CACF,EACA,CACE,YAAa,GACb,OAAQ,WACR,IAAK,CACH,kBAAmB,CACjB,iBAAkB,CAChB,QAAS,mCACT,cAAe,gBACjB,CACF,CACF,CACF,CACF,CACF,CAAC"}
+{"version":3,"file":"StepperStepContainer.js","sources":["../../../src/components/stepper/StepperStepContainer.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nimport { Flex } from '../flex'\n\nexport const StepperStepContainer = styled(Flex, {\n  base: [\n    'relative',\n    'font-body',\n    'font-semibold',\n    'text-md',\n    'items-center',\n    'not-last:after:absolute',\n    \"not-last:after:content-['']\",\n    'focus-visible:outline-none'\n  ],\n  variants: {\n    canInteract: {\n      true: []\n    },\n    direction: {\n      vertical: [\n        'flex-row',\n        'not-last:after:h-full',\n        'not-last:after:left-3.5',\n        'not-last:after:top-1/2',\n        'not-last:after:w-1',\n        'py-3'\n      ],\n      horizontal: [\n        'flex-col',\n        'not-last:after:h-1',\n        'not-last:after:left-1/2',\n        'not-last:after:top-3.5',\n        'not-last:after:w-full',\n        'px-2'\n      ]\n    },\n    separator: {\n      default: ['not-last:after:bg-grey-200'],\n      active: ['not-last:after:bg-primary-800'],\n      success: ['not-last:after:bg-success'],\n      viewed: ['not-last:after:bg-grey-600']\n    },\n    status: {\n      completed: [],\n      active: [],\n      default: [],\n      viewed: [],\n      success: [],\n      reviewed: []\n    }\n  },\n  compoundVariants: [\n    {\n      canInteract: true,\n      status: 'completed',\n      class: [\n        'focus-visible:first:outline-2',\n        'focus-visible:first:outline-offset-2',\n        'focus-visible:first:outline-primary-800',\n        'focus-visible:first:outline-solid',\n        'hover:first:bg-primary-900',\n        'hover:first:text-white!',\n        'hover:last:text-primary-900'\n      ]\n    },\n    {\n      canInteract: true,\n      status: 'active',\n      class: [\n        'focus-visible:first:outline-2',\n        'focus-visible:first:outline-offset-2',\n        'focus-visible:first:outline-primary-800',\n        'focus-visible:first:outline-solid',\n        'hover:first:border-grey-800',\n        'hover:first:text-grey-1000',\n        'hover:last:text-grey-1000'\n      ]\n    },\n    {\n      canInteract: true,\n      status: 'viewed',\n      class: [\n        'focus-visible:first:outline-2!',\n        'focus-visible:first:outline-offset-2!',\n        'focus-visible:first:outline-primary-800!',\n        'focus-visible:first:outline-solid!',\n        'hover:first:border-grey-800',\n        'hover:first:text-grey-1000',\n        'hover:last:text-grey-1000'\n      ]\n    },\n    {\n      canInteract: true,\n      status: 'reviewed',\n      class: [\n        'focus-visible:first:outline-2!',\n        'focus-visible:first:outline-offset-2!',\n        'focus-visible:first:outline-primary-800!',\n        'focus-visible:first:outline-solid!'\n      ]\n    }\n  ]\n})\n"],"names":["StepperStepContainer","styled","Flex"],"mappings":"gFAIO,MAAMA,EAAuBC,EAAOC,EAAM,CAC/C,KAAM,CACJ,WACA,YACA,gBACA,UACA,eACA,0BACA,8BACA,4BACF,EACA,SAAU,CACR,YAAa,CACX,KAAM,CAAA,CACR,EACA,UAAW,CACT,SAAU,CACR,WACA,wBACA,0BACA,yBACA,qBACA,MACF,EACA,WAAY,CACV,WACA,qBACA,0BACA,yBACA,wBACA,MACF,CACF,EACA,UAAW,CACT,QAAS,CAAC,4BAA4B,EACtC,OAAQ,CAAC,+BAA+B,EACxC,QAAS,CAAC,2BAA2B,EACrC,OAAQ,CAAC,4BAA4B,CACvC,EACA,OAAQ,CACN,UAAW,CAAA,EACX,OAAQ,CAAA,EACR,QAAS,CAAA,EACT,OAAQ,CAAA,EACR,QAAS,CAAC,EACV,SAAU,CACZ,CAAA,CACF,EACA,iBAAkB,CAChB,CACE,YAAa,GACb,OAAQ,YACR,MAAO,CACL,gCACA,uCACA,0CACA,oCACA,6BACA,0BACA,6BACF,CACF,EACA,CACE,YAAa,GACb,OAAQ,SACR,MAAO,CACL,gCACA,uCACA,0CACA,oCACA,8BACA,6BACA,2BACF,CACF,EACA,CACE,YAAa,GACb,OAAQ,SACR,MAAO,CACL,iCACA,wCACA,2CACA,qCACA,8BACA,6BACA,2BACF,CACF,EACA,CACE,YAAa,GACb,OAAQ,WACR,MAAO,CACL,iCACA,wCACA,2CACA,oCACF,CACF,CACF,CACF,CAAC"}

package/dist/components/stepper/StepperStepForward.js

@@ -1,2 +1,2 @@
-import*as n from"react";import{Button as p}from"../button/Button.js";import{useStepper as m}from"./stepper-context/StepperContext.js";const c=({label:t,children:r,onClick:o,...l})=>{const{goToNextStep:e,activeStep:i}=m();return n.createElement(p,{size:"sm",...l,onClick:()=>{if(o)return o(()=>e==null?void 0:e());e==null||e()},css:{ml:"auto"}},r||(t==null?void 0:t(i)))};export{c as StepperStepForward};
+import*as n from"react";import{Button as p}from"../button/Button.js";import{useStepper as m}from"./stepper-context/StepperContext.js";const a=({label:t,children:r,onClick:o,...l})=>{const{goToNextStep:e,activeStep:i}=m();return n.createElement(p,{size:"sm",...l,onClick:()=>{if(o)return o(()=>e==null?void 0:e());e==null||e()},className:"ml-auto"},r||(t==null?void 0:t(i)))};export{a as StepperStepForward};
 //# sourceMappingURL=StepperStepForward.js.map

package/dist/components/stepper/StepperStepForward.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepperStepForward.js","sources":["../../../src/components/stepper/StepperStepForward.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Button } from '../button'\nimport { useStepper } from './stepper-context/StepperContext'\nimport { IStepperNavigateProps } from './types'\n\nexport const StepperStepForward = ({\n  label,\n  children,\n  onClick,\n  ...rest\n}: IStepperNavigateProps & Partial<React.ComponentProps<typeof Button>>) => {\n  const { goToNextStep, activeStep } = useStepper()\n\n  const handleClick = () => {\n    if (onClick) {\n      return onClick(() => goToNextStep?.())\n    }\n    goToNextStep?.()\n  }\n\n  return (\n    <Button size=\"sm\" {...rest} onClick={handleClick} css={{ ml: 'auto' }}>\n      {children || label?.(activeStep)}\n    </Button>\n  )\n}\n"],"names":["StepperStepForward","label","children","onClick","rest","goToNextStep","activeStep","useStepper","React","Button"],"mappings":"sIAMa,MAAAA,EAAqB,CAAC,CACjC,MAAAC,EACA,SAAAC,EACA,QAAAC,KACGC,CACL,IAA4E,CAC1E,KAAM,CAAE,aAAAC,EAAc,WAAAC,CAAW,EAAIC,EASrC,EAAA,OACEC,EAAA,cAACC,EAAA,CAAO,KAAK,KAAM,GAAGL,EAAM,QARV,IAAM,CACxB,GAAID,EACF,OAAOA,EAAQ,IAAME,GAAA,KAAA,OAAAA,EAAgB,CAAA,EAEvCA,GAAA,MAAAA,EACF,CAAA,EAGoD,IAAK,CAAE,GAAI,MAAO,CAAA,EACjEH,IAAYD,GAAA,KAAAA,OAAAA,EAAQK,GACvB,CAEJ"}
+{"version":3,"file":"StepperStepForward.js","sources":["../../../src/components/stepper/StepperStepForward.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Button } from '../button'\nimport { useStepper } from './stepper-context/StepperContext'\nimport { IStepperNavigateProps } from './types'\n\nexport const StepperStepForward = ({\n  label,\n  children,\n  onClick,\n  ...rest\n}: IStepperNavigateProps & Partial<React.ComponentProps<typeof Button>>) => {\n  const { goToNextStep, activeStep } = useStepper()\n\n  const handleClick = () => {\n    if (onClick) {\n      return onClick(() => goToNextStep?.())\n    }\n    goToNextStep?.()\n  }\n\n  return (\n    <Button size=\"sm\" {...rest} onClick={handleClick} className=\"ml-auto\">\n      {children || label?.(activeStep)}\n    </Button>\n  )\n}\n"],"names":["StepperStepForward","label","children","onClick","rest","goToNextStep","activeStep","useStepper","React","Button"],"mappings":"sIAMa,MAAAA,EAAqB,CAAC,CACjC,MAAAC,EACA,SAAAC,EACA,QAAAC,EACA,GAAGC,CACL,IAA4E,CAC1E,KAAM,CAAE,aAAAC,EAAc,WAAAC,CAAW,EAAIC,EAAAA,EASrC,OACEC,EAAA,cAACC,EAAA,CAAO,KAAK,KAAM,GAAGL,EAAM,QARV,IAAM,CACxB,GAAID,EACF,OAAOA,EAAQ,IAAME,GAAA,KAAAA,OAAAA,EAAgB,CAAA,EAEvCA,GAAA,MAAAA,EACF,CAAA,EAGoD,UAAU,SAAA,EACzDH,IAAYD,GAAA,KAAAA,OAAAA,EAAQK,GACvB,CAEJ"}

package/dist/components/stepper/StepperStepLabel.js

@@ -1,2 +1,2 @@
-import{styled as e}from"../../stitches.js";import{Text as t}from"../text/Text.js";const r=e(t,{fontWeight:600,variants:{direction:{vertical:{ml:"$3",textAlign:"left"},horizontal:{mt:"$3",textAlign:"center"}},status:{default:{color:"$grey700",fontWeight:400},active:{color:"$primary900"},viewed:{color:"$grey1000"},completed:{color:"$primary800"},success:{color:"$success"},reviewed:{}}}});export{r as StepperStepLabel};
+import{styled as t}from"../../styled.js";import{Text as e}from"../text/Text.js";const r=t(e,{base:["font-semibold"],variants:{direction:{vertical:["ml-3","text-left"],horizontal:["mt-3","text-center"]},status:{default:["font-normal","text-grey-700"],active:["text-primary-900"],viewed:["text-grey-1000"],completed:["text-primary-800"],success:["text-success"],reviewed:[]}}});export{r as StepperStepLabel};
 //# sourceMappingURL=StepperStepLabel.js.map

package/dist/components/stepper/StepperStepLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepperStepLabel.js","sources":["../../../src/components/stepper/StepperStepLabel.tsx"],"sourcesContent":["import { styled } from '~/stitches'\n\nimport { Text } from '../text'\n\nexport const StepperStepLabel = styled(Text, {\n  fontWeight: 600,\n  variants: {\n    direction: {\n      vertical: { ml: '$3', textAlign: 'left' },\n      horizontal: { mt: '$3', textAlign: 'center' }\n    },\n    status: {\n      default: { color: '$grey700', fontWeight: 400 },\n      active: {\n        color: '$primary900'\n      },\n      viewed: { color: '$grey1000' },\n      completed: { color: '$primary800' },\n      success: { color: '$success' },\n      reviewed: {}\n    }\n  }\n})\n"],"names":["StepperStepLabel","styled","Text"],"mappings":"kFAIO,MAAMA,EAAmBC,EAAOC,EAAM,CAC3C,WAAY,IACZ,SAAU,CACR,UAAW,CACT,SAAU,CAAE,GAAI,KAAM,UAAW,MAAO,EACxC,WAAY,CAAE,GAAI,KAAM,UAAW,QAAS,CAC9C,EACA,OAAQ,CACN,QAAS,CAAE,MAAO,WAAY,WAAY,GAAI,EAC9C,OAAQ,CACN,MAAO,aACT,EACA,OAAQ,CAAE,MAAO,WAAY,EAC7B,UAAW,CAAE,MAAO,aAAc,EAClC,QAAS,CAAE,MAAO,UAAW,EAC7B,SAAU,CAAA,CACZ,CACF,CACF,CAAC"}
+{"version":3,"file":"StepperStepLabel.js","sources":["../../../src/components/stepper/StepperStepLabel.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nimport { Text } from '../text'\n\nexport const StepperStepLabel = styled(Text, {\n  base: ['font-semibold'],\n  variants: {\n    direction: {\n      vertical: ['ml-3', 'text-left'],\n      horizontal: ['mt-3', 'text-center']\n    },\n    status: {\n      default: ['font-normal', 'text-grey-700'],\n      active: ['text-primary-900'],\n      viewed: ['text-grey-1000'],\n      completed: ['text-primary-800'],\n      success: ['text-success'],\n      reviewed: []\n    }\n  }\n})\n"],"names":["StepperStepLabel","styled","Text"],"mappings":"gFAIa,MAAAA,EAAmBC,EAAOC,EAAM,CAC3C,KAAM,CAAC,eAAe,EACtB,SAAU,CACR,UAAW,CACT,SAAU,CAAC,OAAQ,WAAW,EAC9B,WAAY,CAAC,OAAQ,aAAa,CACpC,EACA,OAAQ,CACN,QAAS,CAAC,cAAe,eAAe,EACxC,OAAQ,CAAC,kBAAkB,EAC3B,OAAQ,CAAC,gBAAgB,EACzB,UAAW,CAAC,kBAAkB,EAC9B,QAAS,CAAC,cAAc,EACxB,SAAU,CACZ,CAAA,CACF,CACF,CAAC"}

package/dist/components/stepper/StepperSteps.js

@@ -1,2 +1,2 @@
-import{Ok as b}from"@atom-learning/icons";import*as a from"react";import{styled as h}from"../../stitches.js";import{Flex as v}from"../flex/Flex.js";import{Icon as D}from"../icon/Icon.js";import{useStepper as I}from"./stepper-context/StepperContext.js";import{StepperStepBullet as T}from"./StepperStepBullet.js";import{StepperStepContainer as g}from"./StepperStepContainer.js";import{StepperStepLabel as w}from"./StepperStepLabel.js";import{Status as t}from"./types.js";const L=h(v,{justifyContent:"space-between",variants:{direction:{vertical:{flexDirection:"column"},horizontal:{flexDirection:"row"}}}}),U=({css:S})=>{const{steps:r,goToStep:m,activeStep:i,viewedSteps:n,allowSkip:l,direction:p,hideLabels:E,completedSteps:c,showCompletedIcons:u}=I(),d=s=>{const e=r[s];return e.status?e.status:c.length===r.length?t.SUCCESS:i===s&&c.includes(i)?t.REVIEWED:i===s?t.ACTIVE:c.includes(s)?t.COMPLETED:n.includes(s)?t.VIEWED:t.DEFAULT},C=s=>{var e;const o=(e=r[s])==null?void 0:e.status;return c.length===r.length?t.SUCCESS:o===t.SUCCESS?t.SUCCESS:o===t.COMPLETED||s<Math.max(...n)?t.ACTIVE:o===t.VIEWED?t.VIEWED:t.DEFAULT};return a.createElement(L,{css:S,direction:p},r.map((s,e)=>{const o=d(e),f=C(e);return a.createElement(g,{tabIndex:0,key:`step_${e}`,direction:p,separator:f,status:o,style:{"--steps":r.length},css:p==="horizontal"?{width:"calc(100% / var(--steps, 0))"}:{height:"calc(100% / var(--steps, 0))"},canInteract:l},a.createElement(T,{as:l?"button":"div",onClick:()=>l&&n.includes(e)?m==null?void 0:m(e):void 0,status:o,"aria-current":e===i?"step":void 0,"aria-label":s.label?"":`step ${e+1}`,"aria-labelledby":s.label?`step-${e}`:void 0,css:{cursor:l&&n.includes(e)?"pointer":"auto"}},s.status===t.SUCCESS||u&&o===t.COMPLETED?a.createElement(D,{is:b}):e+1),s.label&&!E&&a.createElement(w,{as:"span",id:`step-${e}`,direction:p,status:o},s.label))}))};export{U as StepperSteps};
+import{Ok as f}from"@atom-learning/icons";import*as l from"react";import{styled as v}from"../../styled.js";import{Flex as h}from"../flex/Flex.js";import{Icon as I}from"../icon/Icon.js";import{useStepper as D}from"./stepper-context/StepperContext.js";import{StepperStepBullet as T}from"./StepperStepBullet.js";import{StepperStepContainer as w}from"./StepperStepContainer.js";import{StepperStepLabel as L}from"./StepperStepLabel.js";import{Status as t}from"./types.js";const U=v(h,{base:["justify-between"],variants:{direction:{vertical:["flex-col"],horizontal:["flex-row"]}}}),g=({className:S})=>{const{steps:o,goToStep:m,activeStep:r,viewedSteps:n,allowSkip:c,direction:i,hideLabels:E,completedSteps:p,showCompletedIcons:u}=D(),d=s=>{const e=o[s];return e.status?e.status:p.length===o.length?t.SUCCESS:r===s&&p.includes(r)?t.REVIEWED:r===s?t.ACTIVE:p.includes(s)?t.COMPLETED:n.includes(s)?t.VIEWED:t.DEFAULT},C=s=>{var e;const a=(e=o[s])==null?void 0:e.status;return p.length===o.length?t.SUCCESS:a===t.SUCCESS?t.SUCCESS:a===t.COMPLETED||s<Math.max(...n)?t.ACTIVE:a===t.VIEWED?t.VIEWED:t.DEFAULT};return l.createElement(U,{className:S,direction:i},o.map((s,e)=>{const a=d(e),b=C(e);return l.createElement(w,{tabIndex:0,key:"step_".concat(e),direction:i,separator:b,status:a,style:{"--steps":o.length},className:i==="horizontal"?"w-[calc(100%/var(--steps, 0))]":"h-[calc(100%/var(--steps, 0))]",canInteract:c},l.createElement(T,{as:c?"button":"div",onClick:()=>c&&n.includes(e)?m==null?void 0:m(e):void 0,status:a,"aria-current":e===r?"step":void 0,"aria-label":s.label?"":"step ".concat(e+1),"aria-labelledby":s.label?"step-".concat(e):void 0,className:c&&n.includes(e)?"cursor-pointer":"cursor-auto"},s.status===t.SUCCESS||u&&a===t.COMPLETED?l.createElement(I,{is:f}):e+1),s.label&&!E&&l.createElement(L,{as:"span",id:"step-".concat(e),direction:i,status:a},s.label))}))};export{g as StepperSteps};
 //# sourceMappingURL=StepperSteps.js.map

package/dist/components/stepper/StepperSteps.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepperSteps.js","sources":["../../../src/components/stepper/StepperSteps.tsx"],"sourcesContent":["import { Ok } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { Flex } from '../flex'\nimport { Icon } from '../icon'\nimport { useStepper } from './stepper-context/StepperContext'\nimport { StepperStepBullet } from './StepperStepBullet'\nimport { StepperStepContainer } from './StepperStepContainer'\nimport { StepperStepLabel } from './StepperStepLabel'\nimport { IStepperStepsProps, Status } from './types'\n\nconst StepperStepsContainer = styled(Flex, {\n  justifyContent: 'space-between',\n  variants: {\n    direction: {\n      vertical: { flexDirection: 'column' },\n      horizontal: { flexDirection: 'row' }\n    }\n  }\n})\n\nexport const StepperSteps = ({ css }: IStepperStepsProps) => {\n  const {\n    steps,\n    goToStep,\n    activeStep,\n    viewedSteps,\n    allowSkip,\n    direction,\n    hideLabels,\n    completedSteps,\n    showCompletedIcons\n  } = useStepper()\n\n  const getBulletStatus = (index: number) => {\n    const activeBullet = steps[index]\n\n    if (activeBullet.status) return activeBullet.status\n    if (completedSteps.length === steps.length) return Status.SUCCESS\n    if (activeStep === index && completedSteps.includes(activeStep))\n      return Status.REVIEWED\n    if (activeStep === index) return Status.ACTIVE\n    if (completedSteps.includes(index)) return Status.COMPLETED\n    if (viewedSteps.includes(index)) return Status.VIEWED\n    return Status.DEFAULT\n  }\n\n  const getSeparatorStatus = (index: number) => {\n    const bulletStatus = steps[index]?.status\n\n    if (completedSteps.length === steps.length) {\n      return Status.SUCCESS\n    }\n\n    if (bulletStatus === Status.SUCCESS) {\n      return Status.SUCCESS\n    }\n\n    if (bulletStatus === Status.COMPLETED || index < Math.max(...viewedSteps)) {\n      return Status.ACTIVE\n    }\n\n    if (bulletStatus === Status.VIEWED) {\n      return Status.VIEWED\n    }\n\n    return Status.DEFAULT\n  }\n\n  return (\n    <StepperStepsContainer css={css} direction={direction}>\n      {steps.map((step, index) => {\n        const bulletStatus = getBulletStatus(index)\n        const separatorStatus = getSeparatorStatus(index)\n\n        return (\n          <StepperStepContainer\n            tabIndex={0}\n            key={`step_${index}`}\n            direction={direction}\n            separator={separatorStatus}\n            status={bulletStatus}\n            style={{ '--steps': steps.length }}\n            css={\n              direction === 'horizontal'\n                ? { width: `calc(100% / var(--steps, 0))` }\n                : { height: `calc(100% / var(--steps, 0))` }\n            }\n            canInteract={allowSkip}\n          >\n            <StepperStepBullet\n              as={allowSkip ? 'button' : 'div'}\n              onClick={() =>\n                allowSkip && viewedSteps.includes(index)\n                  ? goToStep?.(index)\n                  : undefined\n              }\n              status={bulletStatus}\n              aria-current={index === activeStep ? 'step' : undefined}\n              aria-label={!step.label ? `step ${index + 1}` : ''}\n              aria-labelledby={step.label ? `step-${index}` : undefined}\n              css={{\n                cursor:\n                  allowSkip && viewedSteps.includes(index) ? 'pointer' : 'auto'\n              }}\n            >\n              {step.status === Status.SUCCESS ||\n              (showCompletedIcons && bulletStatus === Status.COMPLETED) ? (\n                <Icon is={Ok} />\n              ) : (\n                index + 1\n              )}\n            </StepperStepBullet>\n\n            {step.label && !hideLabels && (\n              <StepperStepLabel\n                as=\"span\"\n                id={`step-${index}`}\n                direction={direction}\n                status={bulletStatus}\n              >\n                {step.label}\n              </StepperStepLabel>\n            )}\n          </StepperStepContainer>\n        )\n      })}\n    </StepperStepsContainer>\n  )\n}\n"],"names":["StepperStepsContainer","styled","Flex","StepperSteps","css","steps","goToStep","activeStep","viewedSteps","allowSkip","direction","hideLabels","completedSteps","showCompletedIcons","useStepper","getBulletStatus","index","activeBullet","Status","getSeparatorStatus","_a","bulletStatus","React","step","separatorStatus","StepperStepContainer","StepperStepBullet","Icon","Ok","StepperStepLabel"],"mappings":"qdAaA,MAAMA,EAAwBC,EAAOC,EAAM,CACzC,eAAgB,gBAChB,SAAU,CACR,UAAW,CACT,SAAU,CAAE,cAAe,QAAS,EACpC,WAAY,CAAE,cAAe,KAAM,CACrC,CACF,CACF,CAAC,EAEYC,EAAe,CAAC,CAAE,IAAAC,CAAI,IAA0B,CAC3D,KAAM,CACJ,MAAAC,EACA,SAAAC,EACA,WAAAC,EACA,YAAAC,EACA,UAAAC,EACA,UAAAC,EACA,WAAAC,EACA,eAAAC,EACA,mBAAAC,CACF,EAAIC,EAAW,EAETC,EAAmBC,GAAkB,CACzC,MAAMC,EAAeZ,EAAMW,GAE3B,OAAIC,EAAa,OAAeA,EAAa,OACzCL,EAAe,SAAWP,EAAM,OAAea,EAAO,QACtDX,IAAeS,GAASJ,EAAe,SAASL,CAAU,EACrDW,EAAO,SACZX,IAAeS,EAAcE,EAAO,OACpCN,EAAe,SAASI,CAAK,EAAUE,EAAO,UAC9CV,EAAY,SAASQ,CAAK,EAAUE,EAAO,OACxCA,EAAO,OAChB,EAEMC,EAAsBH,GAAkB,CAjDhD,IAAAI,EAkDI,MAAMC,GAAeD,EAAAf,EAAMW,KAAN,KAAA,OAAAI,EAAc,OAEnC,OAAIR,EAAe,SAAWP,EAAM,OAC3Ba,EAAO,QAGZG,IAAiBH,EAAO,QACnBA,EAAO,QAGZG,IAAiBH,EAAO,WAAaF,EAAQ,KAAK,IAAI,GAAGR,CAAW,EAC/DU,EAAO,OAGZG,IAAiBH,EAAO,OACnBA,EAAO,OAGTA,EAAO,OAChB,EAEA,OACEI,EAAA,cAACtB,EAAA,CAAsB,IAAKI,EAAK,UAAWM,CACzCL,EAAAA,EAAM,IAAI,CAACkB,EAAMP,IAAU,CAC1B,MAAMK,EAAeN,EAAgBC,CAAK,EACpCQ,EAAkBL,EAAmBH,CAAK,EAEhD,OACEM,EAAA,cAACG,EAAA,CACC,SAAU,EACV,IAAK,QAAQT,IACb,UAAWN,EACX,UAAWc,EACX,OAAQH,EACR,MAAO,CAAE,UAAWhB,EAAM,MAAO,EACjC,IACEK,IAAc,aACV,CAAE,MAAO,8BAA+B,EACxC,CAAE,OAAQ,8BAA+B,EAE/C,YAAaD,CAAAA,EAEba,EAAA,cAACI,EAAA,CACC,GAAIjB,EAAY,SAAW,MAC3B,QAAS,IACPA,GAAaD,EAAY,SAASQ,CAAK,EACnCV,GAAA,YAAAA,EAAWU,CAAAA,EACX,OAEN,OAAQK,EACR,eAAcL,IAAUT,EAAa,OAAS,OAC9C,aAAagB,EAAK,MAA8B,GAAtB,QAAQP,EAAQ,IAC1C,kBAAiBO,EAAK,MAAQ,QAAQP,IAAU,OAChD,IAAK,CACH,OACEP,GAAaD,EAAY,SAASQ,CAAK,EAAI,UAAY,MAC3D,CAAA,EAECO,EAAK,SAAWL,EAAO,SACvBL,GAAsBQ,IAAiBH,EAAO,UAC7CI,EAAA,cAACK,EAAA,CAAK,GAAIC,CAAI,CAAA,EAEdZ,EAAQ,CAEZ,EAECO,EAAK,OAAS,CAACZ,GACdW,EAAA,cAACO,EAAA,CACC,GAAG,OACH,GAAI,QAAQb,IACZ,UAAWN,EACX,OAAQW,GAEPE,EAAK,KACR,CAEJ,CAEJ,CAAC,CACH,CAEJ"}
+{"version":3,"file":"StepperSteps.js","sources":["../../../src/components/stepper/StepperSteps.tsx"],"sourcesContent":["import { Ok } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Flex } from '../flex'\nimport { Icon } from '../icon'\nimport { useStepper } from './stepper-context/StepperContext'\nimport { StepperStepBullet } from './StepperStepBullet'\nimport { StepperStepContainer } from './StepperStepContainer'\nimport { StepperStepLabel } from './StepperStepLabel'\nimport { IStepperStepsProps, Status } from './types'\n\nconst StepperStepsContainer = styled(Flex, {\n  base: ['justify-between'],\n  variants: {\n    direction: {\n      vertical: ['flex-col'],\n      horizontal: ['flex-row']\n    }\n  }\n})\n\nexport const StepperSteps = ({ className }: IStepperStepsProps) => {\n  const {\n    steps,\n    goToStep,\n    activeStep,\n    viewedSteps,\n    allowSkip,\n    direction,\n    hideLabels,\n    completedSteps,\n    showCompletedIcons\n  } = useStepper()\n\n  const getBulletStatus = (index: number) => {\n    const activeBullet = steps[index]\n\n    if (activeBullet.status) return activeBullet.status\n    if (completedSteps.length === steps.length) return Status.SUCCESS\n    if (activeStep === index && completedSteps.includes(activeStep))\n      return Status.REVIEWED\n    if (activeStep === index) return Status.ACTIVE\n    if (completedSteps.includes(index)) return Status.COMPLETED\n    if (viewedSteps.includes(index)) return Status.VIEWED\n    return Status.DEFAULT\n  }\n\n  const getSeparatorStatus = (index: number) => {\n    const bulletStatus = steps[index]?.status\n\n    if (completedSteps.length === steps.length) {\n      return Status.SUCCESS\n    }\n\n    if (bulletStatus === Status.SUCCESS) {\n      return Status.SUCCESS\n    }\n\n    if (bulletStatus === Status.COMPLETED || index < Math.max(...viewedSteps)) {\n      return Status.ACTIVE\n    }\n\n    if (bulletStatus === Status.VIEWED) {\n      return Status.VIEWED\n    }\n\n    return Status.DEFAULT\n  }\n\n  return (\n    <StepperStepsContainer className={className} direction={direction}>\n      {steps.map((step, index) => {\n        const bulletStatus = getBulletStatus(index)\n        const separatorStatus = getSeparatorStatus(index)\n\n        return (\n          <StepperStepContainer\n            tabIndex={0}\n            key={`step_${index}`}\n            direction={direction}\n            separator={separatorStatus}\n            status={bulletStatus}\n            style={{ '--steps': steps.length }}\n            className={\n              direction === 'horizontal'\n                ? 'w-[calc(100%/var(--steps, 0))]'\n                : 'h-[calc(100%/var(--steps, 0))]'\n            }\n            canInteract={allowSkip}\n          >\n            <StepperStepBullet\n              as={allowSkip ? 'button' : 'div'}\n              onClick={() =>\n                allowSkip && viewedSteps.includes(index)\n                  ? goToStep?.(index)\n                  : undefined\n              }\n              status={bulletStatus}\n              aria-current={index === activeStep ? 'step' : undefined}\n              aria-label={!step.label ? `step ${index + 1}` : ''}\n              aria-labelledby={step.label ? `step-${index}` : undefined}\n              className={\n                allowSkip && viewedSteps.includes(index)\n                  ? 'cursor-pointer'\n                  : 'cursor-auto'\n              }\n            >\n              {step.status === Status.SUCCESS ||\n              (showCompletedIcons && bulletStatus === Status.COMPLETED) ? (\n                <Icon is={Ok} />\n              ) : (\n                index + 1\n              )}\n            </StepperStepBullet>\n\n            {step.label && !hideLabels && (\n              <StepperStepLabel\n                as=\"span\"\n                id={`step-${index}`}\n                direction={direction}\n                status={bulletStatus}\n              >\n                {step.label}\n              </StepperStepLabel>\n            )}\n          </StepperStepContainer>\n        )\n      })}\n    </StepperStepsContainer>\n  )\n}\n"],"names":["StepperStepsContainer","styled","Flex","StepperSteps","className","steps","goToStep","activeStep","viewedSteps","allowSkip","direction","hideLabels","completedSteps","showCompletedIcons","useStepper","getBulletStatus","index","activeBullet","Status","getSeparatorStatus","_a","bulletStatus","React","step","separatorStatus","StepperStepContainer","StepperStepBullet","Icon","Ok","StepperStepLabel"],"mappings":"mdAaA,MAAMA,EAAwBC,EAAOC,EAAM,CACzC,KAAM,CAAC,iBAAiB,EACxB,SAAU,CACR,UAAW,CACT,SAAU,CAAC,UAAU,EACrB,WAAY,CAAC,UAAU,CACzB,CACF,CACF,CAAC,EAEYC,EAAe,CAAC,CAAE,UAAAC,CAAU,IAA0B,CACjE,KAAM,CACJ,MAAAC,EACA,SAAAC,EACA,WAAAC,EACA,YAAAC,EACA,UAAAC,EACA,UAAAC,EACA,WAAAC,EACA,eAAAC,EACA,mBAAAC,CACF,EAAIC,EAAAA,EAEEC,EAAmBC,GAAkB,CACzC,MAAMC,EAAeZ,EAAMW,CAAK,EAEhC,OAAIC,EAAa,OAAeA,EAAa,OACzCL,EAAe,SAAWP,EAAM,OAAea,EAAO,QACtDX,IAAeS,GAASJ,EAAe,SAASL,CAAU,EACrDW,EAAO,SACZX,IAAeS,EAAcE,EAAO,OACpCN,EAAe,SAASI,CAAK,EAAUE,EAAO,UAC9CV,EAAY,SAASQ,CAAK,EAAUE,EAAO,OACxCA,EAAO,OAChB,EAEMC,EAAsBH,GAAkB,CAjDhD,IAAAI,EAkDI,MAAMC,GAAeD,EAAAf,EAAMW,CAAK,IAAX,YAAAI,EAAc,OAEnC,OAAIR,EAAe,SAAWP,EAAM,OAC3Ba,EAAO,QAGZG,IAAiBH,EAAO,QACnBA,EAAO,QAGZG,IAAiBH,EAAO,WAAaF,EAAQ,KAAK,IAAI,GAAGR,CAAW,EAC/DU,EAAO,OAGZG,IAAiBH,EAAO,OACnBA,EAAO,OAGTA,EAAO,OAChB,EAEA,OACEI,EAAA,cAACtB,EAAA,CAAsB,UAAWI,EAAW,UAAWM,GACrDL,EAAM,IAAI,CAACkB,EAAMP,IAAU,CAC1B,MAAMK,EAAeN,EAAgBC,CAAK,EACpCQ,EAAkBL,EAAmBH,CAAK,EAEhD,OACEM,EAAA,cAACG,EAAA,CACC,SAAU,EACV,IAAK,QAAQ,OAAAT,GACb,UAAWN,EACX,UAAWc,EACX,OAAQH,EACR,MAAO,CAAE,UAAWhB,EAAM,MAAO,EACjC,UACEK,IAAc,aACV,iCACA,iCAEN,YAAaD,CAEba,EAAAA,EAAA,cAACI,EAAA,CACC,GAAIjB,EAAY,SAAW,MAC3B,QAAS,IACPA,GAAaD,EAAY,SAASQ,CAAK,EACnCV,GAAA,KAAA,OAAAA,EAAWU,CACX,EAAA,OAEN,OAAQK,EACR,eAAcL,IAAUT,EAAa,OAAS,OAC9C,aAAagB,EAAK,MAA8B,GAAtB,QAAQ,OAAAP,EAAQ,CAC1C,EAAA,kBAAiBO,EAAK,MAAQ,QAAQ,OAAAP,CAAAA,EAAU,OAChD,UACEP,GAAaD,EAAY,SAASQ,CAAK,EACnC,iBACA,eAGLO,EAAK,SAAWL,EAAO,SACvBL,GAAsBQ,IAAiBH,EAAO,UAC7CI,EAAA,cAACK,EAAA,CAAK,GAAIC,CAAAA,CAAI,EAEdZ,EAAQ,CAEZ,EAECO,EAAK,OAAS,CAACZ,GACdW,EAAA,cAACO,EAAA,CACC,GAAG,OACH,GAAI,QAAQ,OAAAb,CACZ,EAAA,UAAWN,EACX,OAAQW,GAEPE,EAAK,KACR,CAEJ,CAEJ,CAAC,CACH,CAEJ"}

package/dist/components/stepper/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../../../src/components/stepper/types.ts"],"sourcesContent":["import { CSS } from '~/stitches'\n\nexport enum Status {\n  ACTIVE = 'active',\n  VIEWED = 'viewed',\n  SUCCESS = 'success',\n  DEFAULT = 'default',\n  COMPLETED = 'completed',\n  REVIEWED = 'reviewed'\n}\nexport interface Step {\n  label?: string\n  status: `${Status}`\n}\n\nexport type Direction = 'vertical' | 'horizontal'\n\nexport type Context = {\n  steps: Step[]\n  goToPreviousStep?: () => void\n  goToNextStep?: () => void\n  goToStep?: (index: number) => void\n  activeStep: number\n  viewedSteps: number[]\n  completedSteps: number[]\n  allowSkip?: boolean\n  direction?: Direction\n  hideLabels: boolean\n  showCompletedIcons: boolean\n}\n\nexport type StepperProviderProps = {\n  stepCount: number\n  allowSkip?: boolean\n  onComplete?: () => void\n  onStepChange?: (activeStep: number) => void\n  direction?: Direction\n  steps: Step[]\n  hideLabels: boolean\n  showCompletedIcons: boolean\n}\n\nexport interface IStepperProps {\n  css?: CSS\n  stepCount?: number\n  allowSkip?: boolean\n  onComplete?: () => void\n  onStepChange?: (activeStep: number) => void\n  direction?: Direction\n  steps?: Step[]\n  hideLabels?: boolean\n  showCompletedIcons?: boolean\n}\n\nexport interface IStepperNavigateProps {\n  label?: (currentStep?: number) => string\n  onClick?: (next: () => void) => void\n}\n\nexport interface IStepperStepsProps {\n  css?: CSS\n}\n"],"names":["Status"],"mappings":"AAEY,IAAAA,GAAAA,IACVA,EAAA,OAAS,SACTA,EAAA,OAAS,SACTA,EAAA,QAAU,UACVA,EAAA,QAAU,UACVA,EAAA,UAAY,YACZA,EAAA,SAAW,WANDA,IAAAA,GAAA,CAAA,CAAA"}
+{"version":3,"file":"types.js","sources":["../../../src/components/stepper/types.ts"],"sourcesContent":["export enum Status {\n  ACTIVE = 'active',\n  VIEWED = 'viewed',\n  SUCCESS = 'success',\n  DEFAULT = 'default',\n  COMPLETED = 'completed',\n  REVIEWED = 'reviewed'\n}\nexport interface Step {\n  label?: string\n  status: `${Status}`\n}\n\nexport type Direction = 'vertical' | 'horizontal'\n\nexport type Context = {\n  steps: Step[]\n  goToPreviousStep?: () => void\n  goToNextStep?: () => void\n  goToStep?: (index: number) => void\n  activeStep: number\n  viewedSteps: number[]\n  completedSteps: number[]\n  allowSkip?: boolean\n  direction?: Direction\n  hideLabels: boolean\n  showCompletedIcons: boolean\n}\n\nexport type StepperProviderProps = {\n  stepCount: number\n  allowSkip?: boolean\n  onComplete?: () => void\n  onStepChange?: (activeStep: number) => void\n  direction?: Direction\n  steps: Step[]\n  hideLabels: boolean\n  showCompletedIcons: boolean\n}\n\nexport interface IStepperProps {\n  className?: string\n  stepCount?: number\n  allowSkip?: boolean\n  onComplete?: () => void\n  onStepChange?: (activeStep: number) => void\n  direction?: Direction\n  steps?: Step[]\n  hideLabels?: boolean\n  showCompletedIcons?: boolean\n}\n\nexport interface IStepperNavigateProps {\n  label?: (currentStep?: number) => string\n  onClick?: (next: () => void) => void\n}\n\nexport interface IStepperStepsProps {\n  className?: string\n}\n"],"names":["Status"],"mappings":"AAAY,IAAAA,GAAAA,IACVA,EAAA,OAAS,SACTA,EAAA,OAAS,SACTA,EAAA,QAAU,UACVA,EAAA,QAAU,UACVA,EAAA,UAAY,YACZA,EAAA,SAAW,WANDA,IAAAA,GAAA,CAAA,CAAA"}

package/dist/components/switch/Switch.js

@@ -1,2 +1,2 @@
-import*as e from"@radix-ui/react-switch";import*as o from"react";import{styled as a}from"../../stitches.js";const i=a(e.Root,{appearance:"none",backgroundColor:"$grey600",border:"none",borderRadius:"$round",cursor:"pointer",display:"flex",overflow:"hidden",position:"relative",transition:"all 50ms ease-out","&:hover":{backgroundColor:"$grey700"},"&:focus":{outline:"2px solid $primary800",outlineOffset:"1px"},'&[data-state="checked"]':{backgroundColor:"$primary800","&:hover":{backgroundColor:"$primary900"}},"&[disabled]":{opacity:.3,cursor:"not-allowed"},variants:{size:{md:{p:"$0",width:"$4"},lg:{p:"$1",width:"$6"}}}}),n=a(e.Thumb,{backgroundColor:"white",borderRadius:"$round",display:"block",transition:"transform 50ms",willChange:"transform",variants:{size:{md:{size:"$1",'&[data-state="checked"]':{transform:"translateX(calc($sizes$2 - $space$1))"}},lg:{size:"$2",'&[data-state="checked"]':{transform:"translateX($space$5)"}}}}}),t=({size:r="md",...s})=>o.createElement(i,{size:r,...s},o.createElement(n,{size:r}));t.displayName="Switch";export{t as Switch};
+import*as t from"@radix-ui/react-switch";import*as a from"react";import{styled as o}from"../../styled.js";const i=o(t.Root,{base:["appearance-none","bg-grey-600","border-none","rounded-round","cursor-pointer","flex","overflow-hidden","relative","transition-all","duration-50","ease-out","hover:bg-grey-700","focus:outline-2","focus:outline-offset-1","focus:outline-primary-800","focus:outline-solid","data-[state=checked]:bg-primary-800","data-[state=checked]:hover:bg-primary-900","disabled:cursor-not-allowed","disabled:opacity-30"],variants:{size:{md:["p-0.5","w-10"],lg:["p-1","w-16"]}}}),n=o(t.Thumb,{base:["bg-white","rounded-round","block","transition-transform","duration-50","will-change-transform"],variants:{size:{md:["data-[state=checked]:translate-x-5","size-4"],lg:["data-[state=checked]:translate-x-8","size-6"]}}}),r=({size:e="md",...s})=>a.createElement(i,{size:e,...s},a.createElement(n,{size:e}));r.displayName="Switch";export{r as Switch};
 //# sourceMappingURL=Switch.js.map

package/dist/components/switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sources":["../../../src/components/switch/Switch.tsx"],"sourcesContent":["import * as RadixSwitch from '@radix-ui/react-switch'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nconst StyledSwitch = styled(RadixSwitch.Root, {\n  appearance: 'none',\n  backgroundColor: '$grey600',\n  border: 'none',\n  borderRadius: '$round',\n  cursor: 'pointer',\n  display: 'flex',\n  overflow: 'hidden',\n  position: 'relative',\n  transition: 'all 50ms ease-out',\n  '&:hover': {\n    backgroundColor: '$grey700'\n  },\n  '&:focus': {\n    outline: '2px solid $primary800',\n    outlineOffset: '1px'\n  },\n  '&[data-state=\"checked\"]': {\n    backgroundColor: '$primary800',\n    '&:hover': {\n      backgroundColor: '$primary900'\n    }\n  },\n  '&[disabled]': {\n    opacity: 0.3,\n    cursor: 'not-allowed'\n  },\n  variants: {\n    size: {\n      md: {\n        p: '$0',\n        width: '$4'\n      },\n      lg: {\n        p: '$1',\n        width: '$6'\n      }\n    }\n  }\n})\n\nconst StyledThumb = styled(RadixSwitch.Thumb, {\n  backgroundColor: 'white',\n  borderRadius: '$round',\n  display: 'block',\n  transition: 'transform 50ms',\n  willChange: 'transform',\n  variants: {\n    size: {\n      md: {\n        size: '$1',\n        '&[data-state=\"checked\"]': {\n          transform: 'translateX(calc($sizes$2 - $space$1))'\n        }\n      },\n      lg: {\n        size: '$2',\n        '&[data-state=\"checked\"]': {\n          transform: 'translateX($space$5)'\n        }\n      }\n    }\n  }\n})\n\ntype SwitchProps = React.ComponentProps<typeof StyledSwitch>\n\nexport const Switch = ({ size = 'md', ...rest }: SwitchProps) => (\n  <StyledSwitch size={size} {...rest}>\n    <StyledThumb size={size} />\n  </StyledSwitch>\n)\n\nSwitch.displayName = 'Switch'\n"],"names":["StyledSwitch","styled","RadixSwitch","StyledThumb","Switch","size","rest","React"],"mappings":"4GAKA,MAAMA,EAAeC,EAAOC,EAAY,KAAM,CAC5C,WAAY,OACZ,gBAAiB,WACjB,OAAQ,OACR,aAAc,SACd,OAAQ,UACR,QAAS,OACT,SAAU,SACV,SAAU,WACV,WAAY,oBACZ,UAAW,CACT,gBAAiB,UACnB,EACA,UAAW,CACT,QAAS,wBACT,cAAe,KACjB,EACA,0BAA2B,CACzB,gBAAiB,cACjB,UAAW,CACT,gBAAiB,aACnB,CACF,EACA,cAAe,CACb,QAAS,GACT,OAAQ,aACV,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CACF,EAAG,KACH,MAAO,IACT,EACA,GAAI,CACF,EAAG,KACH,MAAO,IACT,CACF,CACF,CACF,CAAC,EAEKC,EAAcF,EAAOC,EAAY,MAAO,CAC5C,gBAAiB,QACjB,aAAc,SACd,QAAS,QACT,WAAY,iBACZ,WAAY,YACZ,SAAU,CACR,KAAM,CACJ,GAAI,CACF,KAAM,KACN,0BAA2B,CACzB,UAAW,uCACb,CACF,EACA,GAAI,CACF,KAAM,KACN,0BAA2B,CACzB,UAAW,sBACb,CACF,CACF,CACF,CACF,CAAC,EAIYE,EAAS,CAAC,CAAE,KAAAC,EAAO,QAASC,CAAK,IAC5CC,EAAA,cAACP,EAAA,CAAa,KAAMK,EAAO,GAAGC,CAC5BC,EAAAA,EAAA,cAACJ,EAAA,CAAY,KAAME,CAAAA,CAAM,CAC3B,EAGFD,EAAO,YAAc"}
+{"version":3,"file":"Switch.js","sources":["../../../src/components/switch/Switch.tsx"],"sourcesContent":["import * as RadixSwitch from '@radix-ui/react-switch'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nconst StyledSwitch = styled(RadixSwitch.Root, {\n  base: [\n    'appearance-none',\n    'bg-grey-600',\n    'border-none',\n    'rounded-round',\n    'cursor-pointer',\n    'flex',\n    'overflow-hidden',\n    'relative',\n    'transition-all',\n    'duration-50',\n    'ease-out',\n    'hover:bg-grey-700',\n    'focus:outline-2',\n    'focus:outline-offset-1',\n    'focus:outline-primary-800',\n    'focus:outline-solid',\n    'data-[state=checked]:bg-primary-800',\n    'data-[state=checked]:hover:bg-primary-900',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ],\n  variants: {\n    size: {\n      md: ['p-0.5', 'w-10'],\n      lg: ['p-1', 'w-16']\n    }\n  }\n})\n\nconst StyledThumb = styled(RadixSwitch.Thumb, {\n  base: [\n    'bg-white',\n    'rounded-round',\n    'block',\n    'transition-transform',\n    'duration-50',\n    'will-change-transform'\n  ],\n  variants: {\n    size: {\n      md: ['data-[state=checked]:translate-x-5', 'size-4'],\n      lg: ['data-[state=checked]:translate-x-8', 'size-6']\n    }\n  }\n})\n\ntype SwitchProps = React.ComponentProps<typeof StyledSwitch>\n\nexport const Switch = ({ size = 'md', ...rest }: SwitchProps) => (\n  <StyledSwitch size={size} {...rest}>\n    <StyledThumb size={size} />\n  </StyledSwitch>\n)\n\nSwitch.displayName = 'Switch'\n"],"names":["StyledSwitch","styled","RadixSwitch","StyledThumb","Switch","size","rest","React"],"mappings":"0GAKA,MAAMA,EAAeC,EAAOC,EAAY,KAAM,CAC5C,KAAM,CACJ,kBACA,cACA,cACA,gBACA,iBACA,OACA,kBACA,WACA,iBACA,cACA,WACA,oBACA,kBACA,yBACA,4BACA,sBACA,sCACA,4CACA,8BACA,qBACF,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,QAAS,MAAM,EACpB,GAAI,CAAC,MAAO,MAAM,CACpB,CACF,CACF,CAAC,EAEKC,EAAcF,EAAOC,EAAY,MAAO,CAC5C,KAAM,CACJ,WACA,gBACA,QACA,uBACA,cACA,uBACF,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,qCAAsC,QAAQ,EACnD,GAAI,CAAC,qCAAsC,QAAQ,CACrD,CACF,CACF,CAAC,EAIYE,EAAS,CAAC,CAAE,KAAAC,EAAO,KAAM,GAAGC,CAAK,IAC5CC,EAAA,cAACP,EAAA,CAAa,KAAMK,EAAO,GAAGC,CAC5BC,EAAAA,EAAA,cAACJ,EAAA,CAAY,KAAME,CAAM,CAAA,CAC3B,EAGFD,EAAO,YAAc"}

package/dist/components/table/Table.js

@@ -1,2 +1,2 @@
-import*as e from"react";import{styled as p}from"../../stitches.js";import{TableBody as c}from"./TableBody.js";import{TableCell as b}from"./TableCell.js";import{TableFooter as f}from"./TableFooter.js";import{TableFooterCell as C}from"./TableFooterCell.js";import{TableHeader as $}from"./TableHeader.js";import{TableHeaderCell as h}from"./TableHeaderCell.js";import{TableRow as g}from"./TableRow.js";import{TableStickyColumnsContainer as t}from"./TableStickyColumnsContainer.js";const u=p("table",{borderCollapse:"separate",borderSpacing:0,fontFamily:"$sans",fontSize:"$sm",width:"100%",position:"relative",zIndex:0,variants:{size:{md:{"& td, & th":{height:"$4",padding:"$1 $3"}},lg:{"& td, & th":{height:"$5",padding:"0  0 0 $3","&:last-child":{pr:"$3"}}},xl:{"& th":{height:"$5",padding:"0  0 0 $3","&:last-child":{pr:"$3"}},"& td":{height:"$6",padding:"0  0 0 $3","&:last-child":{pr:"$3"}}}},corners:{round:{borderRadius:"$3"},square:{}}}}),l=e.forwardRef(({size:a="md",corners:i="round",numberOfStickyColumns:r=0,scrollContainerCss:n,scrollContainerkey:s,...d},m)=>{const o=e.createElement(u,{ref:m,size:a,corners:i,...d});return r?e.createElement(t,{key:s,css:n,numberOfStickyColumns:r},o):o}),y=Object.assign(l,{Body:c,Cell:b,Footer:f,FooterCell:C,Header:$,HeaderCell:h,Row:g,StickyColumnsContainer:t});l.displayName="Table";export{y as Table};
+import*as t from"react";import{styled as i}from"../../styled.js";import{TableBody as _}from"./TableBody.js";import{TableCell as b}from"./TableCell.js";import{TableFooter as h}from"./TableFooter.js";import{TableFooterCell as c}from"./TableFooterCell.js";import{TableHeader as f}from"./TableHeader.js";import{TableHeaderCell as C}from"./TableHeaderCell.js";import{TableRow as u}from"./TableRow.js";import{TableStickyColumnsContainer as o}from"./TableStickyColumnsContainer.js";const y=i("table",{base:["border-separate","border-spacing-0","font-sans","text-sm","w-full","relative","z-0"],variants:{size:{md:["[&_td]:h-10","[&_td]:px-3","[&_td]:py-1","[&_th]:h-10","[&_th]:px-3","[&_th]:py-1"],lg:["[&_td]:h-12","[&_td]:px-0","[&_td]:pt-0","[&_td]:pb-3","[&_td]:last:pr-3","[&_th]:h-12","[&_th]:px-0","[&_th]:pt-0","[&_th]:pb-3","[&_th]:last:pr-3"],xl:["[&_td]:h-12","[&_td]:px-0","[&_td]:pt-0","[&_td]:pb-3","[&_td]:last:pr-3","[&_th]:h-16","[&_th]:px-0","[&_th]:pt-0","[&_th]:pb-3","[&_th]:last:pr-3"]},corners:{round:["rounded-md"],square:[]}}}),l=t.forwardRef(({size:a="md",corners:s="round",numberOfStickyColumns:e=0,scrollContainerCss:m,scrollContainerkey:p,...d},n)=>{const r=t.createElement(y,{ref:n,size:a,corners:s,...d});return e?t.createElement(o,{key:p,className:m,numberOfStickyColumns:e},r):r}),T=Object.assign(l,{Body:_,Cell:b,Footer:h,FooterCell:c,Header:f,HeaderCell:C,Row:u,StickyColumnsContainer:o});l.displayName="Table";export{T as Table};
 //# sourceMappingURL=Table.js.map

package/dist/components/table/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sources":["../../../src/components/table/Table.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS, styled } from '~/stitches'\n\nimport { TableBody } from './TableBody'\nimport { TableCell } from './TableCell'\nimport { TableFooter } from './TableFooter'\nimport { TableFooterCell } from './TableFooterCell'\nimport { TableHeader } from './TableHeader'\nimport { TableHeaderCell } from './TableHeaderCell'\nimport { TableRow } from './TableRow'\nimport { TableStickyColumnsContainer } from './TableStickyColumnsContainer'\n\nconst StyledTable = styled('table', {\n  borderCollapse: 'separate',\n  borderSpacing: 0,\n  fontFamily: '$sans',\n  fontSize: '$sm',\n  width: '100%',\n  position: 'relative',\n  zIndex: 0,\n  variants: {\n    size: {\n      md: {\n        '& td, & th': {\n          height: '$4',\n          padding: '$1 $3'\n        }\n      },\n      lg: {\n        '& td, & th': {\n          height: '$5',\n          padding: '0  0 0 $3',\n          '&:last-child': {\n            pr: '$3'\n          }\n        }\n      },\n      xl: {\n        '& th': {\n          height: '$5',\n          padding: '0  0 0 $3',\n          '&:last-child': {\n            pr: '$3'\n          }\n        },\n        '& td': {\n          height: '$6',\n          padding: '0  0 0 $3',\n          '&:last-child': {\n            pr: '$3'\n          }\n        }\n      }\n    },\n    corners: {\n      round: {\n        borderRadius: '$3'\n      },\n      square: {}\n    }\n  }\n})\n\ntype TableProps = React.ComponentProps<typeof StyledTable> & {\n  numberOfStickyColumns?: number\n  scrollContainerCss?: CSS\n  scrollContainerkey?: string\n  maxRowDepth?: number\n}\n\nconst TableComponent = React.forwardRef<HTMLTableElement, TableProps>(\n  (\n    {\n      size = 'md',\n      corners = 'round',\n      numberOfStickyColumns = 0,\n      scrollContainerCss,\n      scrollContainerkey,\n      ...rest\n    },\n    ref\n  ) => {\n    const tableComponent = (\n      <StyledTable ref={ref} size={size} corners={corners} {...rest} />\n    )\n\n    if (numberOfStickyColumns) {\n      return (\n        <TableStickyColumnsContainer\n          key={scrollContainerkey}\n          css={scrollContainerCss}\n          numberOfStickyColumns={numberOfStickyColumns}\n        >\n          {tableComponent}\n        </TableStickyColumnsContainer>\n      )\n    }\n\n    return tableComponent\n  }\n)\n\nexport const Table = Object.assign(TableComponent, {\n  Body: TableBody,\n  Cell: TableCell,\n  Footer: TableFooter,\n  FooterCell: TableFooterCell,\n  Header: TableHeader,\n  HeaderCell: TableHeaderCell,\n  Row: TableRow,\n  StickyColumnsContainer: TableStickyColumnsContainer\n})\n\nTableComponent.displayName = 'Table'\n"],"names":["StyledTable","styled","TableComponent","React","size","corners","numberOfStickyColumns","scrollContainerCss","scrollContainerkey","rest","ref","tableComponent","TableStickyColumnsContainer","Table","TableBody","TableCell","TableFooter","TableFooterCell","TableHeader","TableHeaderCell","TableRow"],"mappings":"6dAaA,MAAMA,EAAcC,EAAO,QAAS,CAClC,eAAgB,WAChB,cAAe,EACf,WAAY,QACZ,SAAU,MACV,MAAO,OACP,SAAU,WACV,OAAQ,EACR,SAAU,CACR,KAAM,CACJ,GAAI,CACF,aAAc,CACZ,OAAQ,KACR,QAAS,OACX,CACF,EACA,GAAI,CACF,aAAc,CACZ,OAAQ,KACR,QAAS,YACT,eAAgB,CACd,GAAI,IACN,CACF,CACF,EACA,GAAI,CACF,OAAQ,CACN,OAAQ,KACR,QAAS,YACT,eAAgB,CACd,GAAI,IACN,CACF,EACA,OAAQ,CACN,OAAQ,KACR,QAAS,YACT,eAAgB,CACd,GAAI,IACN,CACF,CACF,CACF,EACA,QAAS,CACP,MAAO,CACL,aAAc,IAChB,EACA,OAAQ,CAAA,CACV,CACF,CACF,CAAC,EASKC,EAAiBC,EAAM,WAC3B,CACE,CACE,KAAAC,EAAO,KACP,QAAAC,EAAU,QACV,sBAAAC,EAAwB,EACxB,mBAAAC,EACA,mBAAAC,KACGC,CACL,EACAC,IACG,CACH,MAAMC,EACJR,EAAA,cAACH,EAAA,CAAY,IAAKU,EAAK,KAAMN,EAAM,QAASC,EAAU,GAAGI,CAAM,CAAA,EAGjE,OAAIH,EAEAH,EAAA,cAACS,EAAA,CACC,IAAKJ,EACL,IAAKD,EACL,sBAAuBD,CAEtBK,EAAAA,CACH,EAIGA,CACT,CACF,EAEaE,EAAQ,OAAO,OAAOX,EAAgB,CACjD,KAAMY,EACN,KAAMC,EACN,OAAQC,EACR,WAAYC,EACZ,OAAQC,EACR,WAAYC,EACZ,IAAKC,EACL,uBAAwBR,CAC1B,CAAC,EAEDV,EAAe,YAAc"}
+{"version":3,"file":"Table.js","sources":["../../../src/components/table/Table.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { TableBody } from './TableBody'\nimport { TableCell } from './TableCell'\nimport { TableFooter } from './TableFooter'\nimport { TableFooterCell } from './TableFooterCell'\nimport { TableHeader } from './TableHeader'\nimport { TableHeaderCell } from './TableHeaderCell'\nimport { TableRow } from './TableRow'\nimport { TableStickyColumnsContainer } from './TableStickyColumnsContainer'\n\nconst StyledTable = styled('table', {\n  base: [\n    'border-separate',\n    'border-spacing-0',\n    'font-sans',\n    'text-sm',\n    'w-full',\n    'relative',\n    'z-0'\n  ],\n  variants: {\n    size: {\n      md: [\n        '[&_td]:h-10',\n        '[&_td]:px-3',\n        '[&_td]:py-1',\n        '[&_th]:h-10',\n        '[&_th]:px-3',\n        '[&_th]:py-1'\n      ],\n      lg: [\n        '[&_td]:h-12',\n        '[&_td]:px-0',\n        '[&_td]:pt-0',\n        '[&_td]:pb-3',\n        '[&_td]:last:pr-3',\n        '[&_th]:h-12',\n        '[&_th]:px-0',\n        '[&_th]:pt-0',\n        '[&_th]:pb-3',\n        '[&_th]:last:pr-3'\n      ],\n      xl: [\n        '[&_td]:h-12',\n        '[&_td]:px-0',\n        '[&_td]:pt-0',\n        '[&_td]:pb-3',\n        '[&_td]:last:pr-3',\n        '[&_th]:h-16',\n        '[&_th]:px-0',\n        '[&_th]:pt-0',\n        '[&_th]:pb-3',\n        '[&_th]:last:pr-3'\n      ]\n    },\n    corners: {\n      round: ['rounded-md'],\n      square: []\n    }\n  }\n})\n\ntype TableProps = React.ComponentProps<typeof StyledTable> & {\n  numberOfStickyColumns?: number\n  scrollContainerCss?: string\n  scrollContainerkey?: string\n  maxRowDepth?: number\n}\n\nconst TableComponent = React.forwardRef<HTMLTableElement, TableProps>(\n  (\n    {\n      size = 'md',\n      corners = 'round',\n      numberOfStickyColumns = 0,\n      scrollContainerCss,\n      scrollContainerkey,\n      ...rest\n    },\n    ref\n  ) => {\n    const tableComponent = (\n      <StyledTable ref={ref} size={size} corners={corners} {...rest} />\n    )\n\n    if (numberOfStickyColumns) {\n      return (\n        <TableStickyColumnsContainer\n          key={scrollContainerkey}\n          className={scrollContainerCss}\n          numberOfStickyColumns={numberOfStickyColumns}\n        >\n          {tableComponent}\n        </TableStickyColumnsContainer>\n      )\n    }\n\n    return tableComponent\n  }\n)\n\nexport const Table = Object.assign(TableComponent, {\n  Body: TableBody,\n  Cell: TableCell,\n  Footer: TableFooter,\n  FooterCell: TableFooterCell,\n  Header: TableHeader,\n  HeaderCell: TableHeaderCell,\n  Row: TableRow,\n  StickyColumnsContainer: TableStickyColumnsContainer\n})\n\nTableComponent.displayName = 'Table'\n"],"names":["StyledTable","styled","TableComponent","React","size","corners","numberOfStickyColumns","scrollContainerCss","scrollContainerkey","rest","ref","tableComponent","TableStickyColumnsContainer","Table","TableBody","TableCell","TableFooter","TableFooterCell","TableHeader","TableHeaderCell","TableRow"],"mappings":"2dAaA,MAAMA,EAAcC,EAAO,QAAS,CAClC,KAAM,CACJ,kBACA,mBACA,YACA,UACA,SACA,WACA,KACF,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CACF,cACA,cACA,cACA,cACA,cACA,aACF,EACA,GAAI,CACF,cACA,cACA,cACA,cACA,mBACA,cACA,cACA,cACA,cACA,kBACF,EACA,GAAI,CACF,cACA,cACA,cACA,cACA,mBACA,cACA,cACA,cACA,cACA,kBACF,CACF,EACA,QAAS,CACP,MAAO,CAAC,YAAY,EACpB,OAAQ,CAAA,CACV,CACF,CACF,CAAC,EASKC,EAAiBC,EAAM,WAC3B,CACE,CACE,KAAAC,EAAO,KACP,QAAAC,EAAU,QACV,sBAAAC,EAAwB,EACxB,mBAAAC,EACA,mBAAAC,EACA,GAAGC,CACL,EACAC,IACG,CACH,MAAMC,EACJR,EAAA,cAACH,EAAA,CAAY,IAAKU,EAAK,KAAMN,EAAM,QAASC,EAAU,GAAGI,CAAAA,CAAM,EAGjE,OAAIH,EAEAH,EAAA,cAACS,EAAA,CACC,IAAKJ,EACL,UAAWD,EACX,sBAAuBD,GAEtBK,CACH,EAIGA,CACT,CACF,EAEaE,EAAQ,OAAO,OAAOX,EAAgB,CACjD,KAAMY,EACN,KAAMC,EACN,OAAQC,EACR,WAAYC,EACZ,OAAQC,EACR,WAAYC,EACZ,IAAKC,EACL,uBAAwBR,CAC1B,CAAC,EAEDV,EAAe,YAAc"}

package/dist/components/table/TableBody.js

@@ -1,2 +1,2 @@
-import*as d from"react";import{styled as i}from"../../stitches.js";const o=i("tbody",{variants:{striped:{true:{"& tr":{"&:nth-child(odd)":{bg:"white"},"&:nth-child(even)":{bg:"$grey100"}}},false:{"& tr":{bg:"white"}}}}}),e=({striped:t=!0,...r})=>d.createElement(o,{striped:t,...r});e.displayName="TableBody";export{e as TableBody};
+import*as d from"react";import{styled as o}from"../../styled.js";const s=o("tbody",{base:[],variants:{striped:{true:["[&_tr]:even:bg-grey-100","[&_tr]:odd:bg-white"],false:["[&_tr]:bg-white"]}}}),e=({striped:t=!0,...r})=>d.createElement(s,{striped:t,...r});e.displayName="TableBody";export{e as TableBody};
 //# sourceMappingURL=TableBody.js.map

package/dist/components/table/TableBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableBody.js","sources":["../../../src/components/table/TableBody.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nconst StyledTableBody = styled('tbody', {\n  variants: {\n    striped: {\n      true: {\n        '& tr': {\n          '&:nth-child(odd)': { bg: 'white' },\n          '&:nth-child(even)': { bg: '$grey100' }\n        }\n      },\n      false: {\n        '& tr': {\n          bg: 'white'\n        }\n      }\n    }\n  }\n})\n\ntype TableBodyProps = React.ComponentProps<typeof StyledTableBody>\n\nexport const TableBody = ({ striped = true, ...rest }: TableBodyProps) => (\n  <StyledTableBody striped={striped} {...rest} />\n)\n\nTableBody.displayName = 'TableBody'\n"],"names":["StyledTableBody","styled","TableBody","striped","rest","React"],"mappings":"mEAIA,MAAMA,EAAkBC,EAAO,QAAS,CACtC,SAAU,CACR,QAAS,CACP,KAAM,CACJ,OAAQ,CACN,mBAAoB,CAAE,GAAI,OAAQ,EAClC,oBAAqB,CAAE,GAAI,UAAW,CACxC,CACF,EACA,MAAO,CACL,OAAQ,CACN,GAAI,OACN,CACF,CACF,CACF,CACF,CAAC,EAIYC,EAAY,CAAC,CAAE,QAAAC,EAAU,MAASC,CAAK,IAClDC,EAAA,cAACL,EAAA,CAAgB,QAASG,EAAU,GAAGC,CAAM,CAAA,EAG/CF,EAAU,YAAc"}
+{"version":3,"file":"TableBody.js","sources":["../../../src/components/table/TableBody.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nconst StyledTableBody = styled('tbody', {\n  base: [],\n  variants: {\n    striped: {\n      true: ['[&_tr]:even:bg-grey-100', '[&_tr]:odd:bg-white'],\n      false: ['[&_tr]:bg-white']\n    }\n  }\n})\n\ntype TableBodyProps = React.ComponentProps<typeof StyledTableBody>\n\nexport const TableBody = ({ striped = true, ...rest }: TableBodyProps) => (\n  <StyledTableBody striped={striped} {...rest} />\n)\n\nTableBody.displayName = 'TableBody'\n"],"names":["StyledTableBody","styled","TableBody","striped","rest","React"],"mappings":"iEAIA,MAAMA,EAAkBC,EAAO,QAAS,CACtC,KAAM,CAAC,EACP,SAAU,CACR,QAAS,CACP,KAAM,CAAC,0BAA2B,qBAAqB,EACvD,MAAO,CAAC,iBAAiB,CAC3B,CACF,CACF,CAAC,EAIYC,EAAY,CAAC,CAAE,QAAAC,EAAU,GAAM,GAAGC,CAAK,IAClDC,EAAA,cAACL,EAAA,CAAgB,QAASG,EAAU,GAAGC,CAAAA,CAAM,EAG/CF,EAAU,YAAc"}

package/dist/components/table/TableCell.js

@@ -1,2 +1,2 @@
-import{styled as l}from"../../stitches.js";const e=l("td",{borderTop:"1px solid $grey100",boxSizing:"border-box",color:"$grey800",fontFamily:"$body",lineHeight:1.5,textAlign:"left",verticalAlign:"middle","&:first-child":{fontWeight:"600"}});e.displayName="TableCell";export{e as TableCell};
+import{styled as t}from"../../styled.js";const e=t("td",{base:["border-t","border-t-grey-200","box-border","text-grey-800","font-body","leading-normal","text-left","align-middle","first:font-semibold"]});e.displayName="TableCell";export{e as TableCell};
 //# sourceMappingURL=TableCell.js.map

package/dist/components/table/TableCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableCell.js","sources":["../../../src/components/table/TableCell.tsx"],"sourcesContent":["import { styled } from '~/stitches'\n\nexport const TableCell = styled('td', {\n  borderTop: '1px solid $grey100',\n  boxSizing: 'border-box',\n  color: '$grey800',\n  fontFamily: '$body',\n  lineHeight: 1.5,\n  textAlign: 'left',\n  verticalAlign: 'middle',\n  '&:first-child': { fontWeight: '600' }\n})\n\nTableCell.displayName = 'TableCell'\n"],"names":["TableCell","styled"],"mappings":"2CAEO,MAAMA,EAAYC,EAAO,KAAM,CACpC,UAAW,qBACX,UAAW,aACX,MAAO,WACP,WAAY,QACZ,WAAY,IACZ,UAAW,OACX,cAAe,SACf,gBAAiB,CAAE,WAAY,KAAM,CACvC,CAAC,EAEDD,EAAU,YAAc"}
+{"version":3,"file":"TableCell.js","sources":["../../../src/components/table/TableCell.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nexport const TableCell = styled('td', {\n  base: [\n    'border-t',\n    'border-t-grey-200',\n    'box-border',\n    'text-grey-800',\n    'font-body',\n    'leading-normal',\n    'text-left',\n    'align-middle',\n    'first:font-semibold'\n  ]\n})\n\nTableCell.displayName = 'TableCell'\n"],"names":["TableCell","styled"],"mappings":"yCAEO,MAAMA,EAAYC,EAAO,KAAM,CACpC,KAAM,CACJ,WACA,oBACA,aACA,gBACA,YACA,iBACA,YACA,eACA,qBACF,CACF,CAAC,EAEDD,EAAU,YAAc"}

package/dist/components/table/TableFooter.js

@@ -1,2 +1,2 @@
-import{styled as t}from"../../stitches.js";const o=t("tfoot",{});o.displayName="TableFooter";export{o as TableFooter};
+import{styled as e}from"../../styled.js";const o=e("tfoot",{base:[]});o.displayName="TableFooter";export{o as TableFooter};
 //# sourceMappingURL=TableFooter.js.map

package/dist/components/table/TableFooter.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableFooter.js","sources":["../../../src/components/table/TableFooter.tsx"],"sourcesContent":["import { styled } from '~/stitches'\n\nexport const TableFooter = styled('tfoot', {})\n\nTableFooter.displayName = 'TableFooter'\n"],"names":["TableFooter","styled"],"mappings":"2CAEa,MAAAA,EAAcC,EAAO,QAAS,CAAE,CAAA,EAE7CD,EAAY,YAAc"}
+{"version":3,"file":"TableFooter.js","sources":["../../../src/components/table/TableFooter.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nexport const TableFooter = styled('tfoot', {\n  base: []\n})\n\nTableFooter.displayName = 'TableFooter'\n"],"names":["TableFooter","styled"],"mappings":"yCAEO,MAAMA,EAAcC,EAAO,QAAS,CACzC,KAAM,CAAA,CACR,CAAC,EAEDD,EAAY,YAAc"}

package/dist/components/table/TableFooterCell.js

@@ -1,2 +1,2 @@
-import{styled as l}from"../../stitches.js";const e=l("td",{color:"$grey800",fontFamily:"$body",fontWeight:600,textAlign:"left",verticalAlign:"middle"});e.displayName="TableFooterCell";export{e as TableFooterCell};
+import{styled as t}from"../../styled.js";const e=t("td",{base:["text-grey-800","font-body","font-semibold","text-left","align-middle"]});e.displayName="TableFooterCell";export{e as TableFooterCell};
 //# sourceMappingURL=TableFooterCell.js.map

package/dist/components/table/TableFooterCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableFooterCell.js","sources":["../../../src/components/table/TableFooterCell.tsx"],"sourcesContent":["import { styled } from '~/stitches'\n\nexport const TableFooterCell = styled('td', {\n  color: '$grey800',\n  fontFamily: '$body',\n  fontWeight: 600,\n  textAlign: 'left',\n  verticalAlign: 'middle'\n})\n\nTableFooterCell.displayName = 'TableFooterCell'\n"],"names":["TableFooterCell","styled"],"mappings":"2CAEO,MAAMA,EAAkBC,EAAO,KAAM,CAC1C,MAAO,WACP,WAAY,QACZ,WAAY,IACZ,UAAW,OACX,cAAe,QACjB,CAAC,EAEDD,EAAgB,YAAc"}
+{"version":3,"file":"TableFooterCell.js","sources":["../../../src/components/table/TableFooterCell.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nexport const TableFooterCell = styled('td', {\n  base: [\n    'text-grey-800',\n    'font-body',\n    'font-semibold',\n    'text-left',\n    'align-middle'\n  ]\n})\n\nTableFooterCell.displayName = 'TableFooterCell'\n"],"names":["TableFooterCell","styled"],"mappings":"+CAEaA,EAAkBC,EAAO,KAAM,CAC1C,KAAM,CACJ,gBACA,YACA,gBACA,YACA,cACF,CACF,CAAC,EAEDD,EAAgB,YAAc"}

package/dist/components/table/TableHeader.js

@@ -1,2 +1,2 @@
-import o from"react";import{styled as y}from"../../stitches.js";const r={PRIMARY:"primary",PRIMARY_DARK:"primaryDark",PRIMARY_LIGHT:"primaryLight",LIGHT:"light",WHITE:"white"},m=y("thead",{variants:{theme:{[r.PRIMARY]:{"& th":{bg:"$primary800"}},[r.PRIMARY_DARK]:{"& th":{bg:"$primary1000"}},[r.PRIMARY_LIGHT]:{"& th":{bg:"$primary200",color:"$grey1000"}},[r.LIGHT]:{"& th":{bg:"$grey100",color:"$grey1000"}},[r.WHITE]:{"& th":{bg:"white",color:"$grey1000"}}},isSticky:{true:{position:"sticky",top:0,zIndex:3}}}}),t=({theme:e="primaryDark",isSticky:i=!1,...a})=>o.createElement(m,{theme:e,isSticky:i,...a});t.displayName="TableHeader";export{r as TABLE_HEADER_THEMES,t as TableHeader};
+import y from"react";import{styled as h}from"../../styled.js";const t={PRIMARY:"primary",PRIMARY_DARK:"primaryDark",PRIMARY_LIGHT:"primaryLight",LIGHT:"light",WHITE:"white"},m=h("thead",{base:[],variants:{theme:{[t.PRIMARY]:["[&_th]:bg-primary-800"],[t.PRIMARY_DARK]:["[&_th]:bg-primary-1000"],[t.PRIMARY_LIGHT]:["[&_th]:bg-primary-200","[&_th]:text-grey-1000"],[t.LIGHT]:["[&_th]:bg-grey-100","[&_th]:text-grey-1000"],[t.WHITE]:["[&_th]:bg-white","[&_th]:text-grey-1000"]},isSticky:{true:["sticky","top-0","z-3"]}}}),e=({theme:r="primaryDark",isSticky:i=!1,...a})=>y.createElement(m,{theme:r,isSticky:i,...a});e.displayName="TableHeader";export{t as TABLE_HEADER_THEMES,e as TableHeader};
 //# sourceMappingURL=TableHeader.js.map

package/dist/components/table/TableHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeader.js","sources":["../../../src/components/table/TableHeader.tsx"],"sourcesContent":["import React from 'react'\n\nimport { styled } from '~/stitches'\n\nexport const TABLE_HEADER_THEMES = {\n  PRIMARY: 'primary',\n  PRIMARY_DARK: 'primaryDark',\n  PRIMARY_LIGHT: 'primaryLight',\n  LIGHT: 'light',\n  WHITE: 'white'\n} as const\n\nconst StyledTableHeader = styled('thead', {\n  variants: {\n    theme: {\n      [TABLE_HEADER_THEMES.PRIMARY]: {\n        '& th': {\n          bg: '$primary800'\n        }\n      },\n      [TABLE_HEADER_THEMES.PRIMARY_DARK]: {\n        '& th': {\n          bg: '$primary1000'\n        }\n      },\n      [TABLE_HEADER_THEMES.PRIMARY_LIGHT]: {\n        '& th': {\n          bg: '$primary200',\n          color: '$grey1000'\n        }\n      },\n      [TABLE_HEADER_THEMES.LIGHT]: {\n        '& th': {\n          bg: '$grey100',\n          color: '$grey1000'\n        }\n      },\n      [TABLE_HEADER_THEMES.WHITE]: {\n        '& th': {\n          bg: 'white',\n          color: '$grey1000'\n        }\n      }\n    },\n    isSticky: {\n      true: {\n        position: 'sticky',\n        top: 0,\n        zIndex: 3\n      }\n    }\n  }\n})\n\ntype TableHeaderProps = React.ComponentProps<typeof StyledTableHeader>\n\nexport const TableHeader = ({\n  theme = 'primaryDark',\n  isSticky = false,\n  ...rest\n}: TableHeaderProps) => {\n  return <StyledTableHeader theme={theme} isSticky={isSticky} {...rest} />\n}\n\nTableHeader.displayName = 'TableHeader'\n"],"names":["TABLE_HEADER_THEMES","StyledTableHeader","styled","TableHeader","theme","isSticky","rest","React"],"mappings":"gEAIa,MAAAA,EAAsB,CACjC,QAAS,UACT,aAAc,cACd,cAAe,eACf,MAAO,QACP,MAAO,OACT,EAEMC,EAAoBC,EAAO,QAAS,CACxC,SAAU,CACR,MAAO,CACL,CAACF,EAAoB,SAAU,CAC7B,OAAQ,CACN,GAAI,aACN,CACF,EACA,CAACA,EAAoB,cAAe,CAClC,OAAQ,CACN,GAAI,cACN,CACF,EACA,CAACA,EAAoB,eAAgB,CACnC,OAAQ,CACN,GAAI,cACJ,MAAO,WACT,CACF,EACA,CAACA,EAAoB,OAAQ,CAC3B,OAAQ,CACN,GAAI,WACJ,MAAO,WACT,CACF,EACA,CAACA,EAAoB,OAAQ,CAC3B,OAAQ,CACN,GAAI,QACJ,MAAO,WACT,CACF,CACF,EACA,SAAU,CACR,KAAM,CACJ,SAAU,SACV,IAAK,EACL,OAAQ,CACV,CACF,CACF,CACF,CAAC,EAIYG,EAAc,CAAC,CAC1B,MAAAC,EAAQ,cACR,SAAAC,EAAW,MACRC,CACL,IACSC,EAAA,cAACN,EAAA,CAAkB,MAAOG,EAAO,SAAUC,EAAW,GAAGC,CAAM,CAAA,EAGxEH,EAAY,YAAc"}
+{"version":3,"file":"TableHeader.js","sources":["../../../src/components/table/TableHeader.tsx"],"sourcesContent":["import React from 'react'\n\nimport { styled } from '~/styled'\n\nexport const TABLE_HEADER_THEMES = {\n  PRIMARY: 'primary',\n  PRIMARY_DARK: 'primaryDark',\n  PRIMARY_LIGHT: 'primaryLight',\n  LIGHT: 'light',\n  WHITE: 'white'\n} as const\n\nconst StyledTableHeader = styled('thead', {\n  base: [],\n  variants: {\n    theme: {\n      [TABLE_HEADER_THEMES.PRIMARY]: ['[&_th]:bg-primary-800'],\n      [TABLE_HEADER_THEMES.PRIMARY_DARK]: ['[&_th]:bg-primary-1000'],\n      [TABLE_HEADER_THEMES.PRIMARY_LIGHT]: [\n        '[&_th]:bg-primary-200',\n        '[&_th]:text-grey-1000'\n      ],\n      [TABLE_HEADER_THEMES.LIGHT]: [\n        '[&_th]:bg-grey-100',\n        '[&_th]:text-grey-1000'\n      ],\n      [TABLE_HEADER_THEMES.WHITE]: ['[&_th]:bg-white', '[&_th]:text-grey-1000']\n    },\n    isSticky: {\n      true: ['sticky', 'top-0', 'z-3']\n    }\n  }\n})\n\ntype TableHeaderProps = React.ComponentProps<typeof StyledTableHeader>\n\nexport const TableHeader = ({\n  theme = 'primaryDark',\n  isSticky = false,\n  ...rest\n}: TableHeaderProps) => {\n  return <StyledTableHeader theme={theme} isSticky={isSticky} {...rest} />\n}\n\nTableHeader.displayName = 'TableHeader'\n"],"names":["TABLE_HEADER_THEMES","StyledTableHeader","styled","TableHeader","theme","isSticky","rest","React"],"mappings":"8DAIa,MAAAA,EAAsB,CACjC,QAAS,UACT,aAAc,cACd,cAAe,eACf,MAAO,QACP,MAAO,OACT,EAEMC,EAAoBC,EAAO,QAAS,CACxC,KAAM,CAAA,EACN,SAAU,CACR,MAAO,CACL,CAACF,EAAoB,OAAO,EAAG,CAAC,uBAAuB,EACvD,CAACA,EAAoB,YAAY,EAAG,CAAC,wBAAwB,EAC7D,CAACA,EAAoB,aAAa,EAAG,CACnC,wBACA,uBACF,EACA,CAACA,EAAoB,KAAK,EAAG,CAC3B,qBACA,uBACF,EACA,CAACA,EAAoB,KAAK,EAAG,CAAC,kBAAmB,uBAAuB,CAC1E,EACA,SAAU,CACR,KAAM,CAAC,SAAU,QAAS,KAAK,CACjC,CACF,CACF,CAAC,EAIYG,EAAc,CAAC,CAC1B,MAAAC,EAAQ,cACR,SAAAC,EAAW,GACX,GAAGC,CACL,IACSC,EAAA,cAACN,EAAA,CAAkB,MAAOG,EAAO,SAAUC,EAAW,GAAGC,CAAAA,CAAM,EAGxEH,EAAY,YAAc"}

package/dist/components/table/TableHeaderCell.js

@@ -1,2 +1,2 @@
-import{styled as l}from"../../stitches.js";const e=l("th",{color:"white",fontFamily:"$body",fontWeight:600,lineHeight:1.5,textAlign:"left",verticalAlign:"middle","&[colspan]":{textAlign:"center"}});e.displayName="TableHeaderCell";export{e as TableHeaderCell};
+import{styled as t}from"../../styled.js";const e=t("th",{base:["text-white","font-body","font-semibold","leading-normal","text-left","align-middle","[[colspan]]:text-center"]});e.displayName="TableHeaderCell";export{e as TableHeaderCell};
 //# sourceMappingURL=TableHeaderCell.js.map

package/dist/components/table/TableHeaderCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeaderCell.js","sources":["../../../src/components/table/TableHeaderCell.tsx"],"sourcesContent":["import { styled } from '~/stitches'\n\nexport const TableHeaderCell = styled('th', {\n  color: 'white',\n  fontFamily: '$body',\n  fontWeight: 600,\n  lineHeight: 1.5,\n  textAlign: 'left',\n  verticalAlign: 'middle',\n  '&[colspan]': {\n    textAlign: 'center'\n  }\n})\n\nTableHeaderCell.displayName = 'TableHeaderCell'\n"],"names":["TableHeaderCell","styled"],"mappings":"2CAEO,MAAMA,EAAkBC,EAAO,KAAM,CAC1C,MAAO,QACP,WAAY,QACZ,WAAY,IACZ,WAAY,IACZ,UAAW,OACX,cAAe,SACf,aAAc,CACZ,UAAW,QACb,CACF,CAAC,EAEDD,EAAgB,YAAc"}
+{"version":3,"file":"TableHeaderCell.js","sources":["../../../src/components/table/TableHeaderCell.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nexport const TableHeaderCell = styled('th', {\n  base: [\n    'text-white',\n    'font-body',\n    'font-semibold',\n    'leading-normal',\n    'text-left',\n    'align-middle',\n    '[[colspan]]:text-center'\n  ]\n})\n\nTableHeaderCell.displayName = 'TableHeaderCell'\n"],"names":["TableHeaderCell","styled"],"mappings":"yCAEO,MAAMA,EAAkBC,EAAO,KAAM,CAC1C,KAAM,CACJ,aACA,YACA,gBACA,iBACA,YACA,eACA,yBACF,CACF,CAAC,EAEDD,EAAgB,YAAc"}

package/dist/components/table/TableRow.js

@@ -1,2 +1,2 @@
-import*as e from"react";import{styled as a}from"../../stitches.js";const m=a("tr",{bg:"unset"}),o=e.forwardRef((r,t)=>e.createElement(m,{...r,ref:t}));o.displayName="TableRow";export{o as TableRow};
+import*as e from"react";import{styled as a}from"../../styled.js";const s=a("tr",{base:["bg-[unset]"]}),o=e.forwardRef((r,t)=>e.createElement(s,{...r,ref:t}));o.displayName="TableRow";export{o as TableRow};
 //# sourceMappingURL=TableRow.js.map

package/dist/components/table/TableRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableRow.js","sources":["../../../src/components/table/TableRow.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nconst StyledRow = styled('tr', {\n  bg: 'unset'\n})\n\nexport const TableRow: React.ForwardRefExoticComponent<\n  React.ComponentProps<typeof StyledRow>\n> = React.forwardRef((props, ref) => <StyledRow {...props} ref={ref} />)\n\nTableRow.displayName = 'TableRow'\n"],"names":["StyledRow","styled","TableRow","React","props","ref"],"mappings":"mEAIA,MAAMA,EAAYC,EAAO,KAAM,CAC7B,GAAI,OACN,CAAC,EAEYC,EAETC,EAAM,WAAW,CAACC,EAAOC,IAAQF,EAAA,cAACH,EAAA,CAAW,GAAGI,EAAO,IAAKC,CAAAA,CAAK,CAAE,EAEvEH,EAAS,YAAc"}
+{"version":3,"file":"TableRow.js","sources":["../../../src/components/table/TableRow.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nconst StyledRow = styled('tr', {\n  base: ['bg-[unset]']\n})\n\nexport const TableRow: React.ForwardRefExoticComponent<\n  React.ComponentProps<typeof StyledRow>\n> = React.forwardRef((props, ref) => <StyledRow {...props} ref={ref} />)\n\nTableRow.displayName = 'TableRow'\n"],"names":["StyledRow","styled","TableRow","React","props","ref"],"mappings":"iEAIA,MAAMA,EAAYC,EAAO,KAAM,CAC7B,KAAM,CAAC,YAAY,CACrB,CAAC,EAEYC,EAETC,EAAM,WAAW,CAACC,EAAOC,IAAQF,EAAA,cAACH,EAAA,CAAW,GAAGI,EAAO,IAAKC,CAAAA,CAAK,CAAE,EAEvEH,EAAS,YAAc"}

package/dist/components/table/TableStickyColumnsContainer.js

@@ -1,2 +1,2 @@
-import e from"react";import{Box as m}from"../box/Box.js";import{useStickyColumnsCss as u}from"./useStickyColumnsCss.js";const h=({children:n,numberOfStickyColumns:t=0,css:s,...c})=>{const[o,i]=e.useState(!1),r=e.useRef(null),{columnsCss:a}=u({numberOfStickyColumns:t,wrapperRef:r});return e.createElement(m,{onScroll:p=>{const l=p.currentTarget.scrollLeft>0;l!==o&&i(l)},role:"scrollbar",ref:r,css:{overflow:"auto",overscrollBehaviorX:"contain",maxWidth:"100%",position:"relative",...a,[`& td:nth-child(${t}), th:nth-child(${t})`]:{...o&&{boxShadow:"$colors$alpha200 -2px -3px 9px 1px",clipPath:"inset(0px -10px 0px 0px)"}},"& td":{bg:"inherit"},...s},...c},n)};export{h as TableStickyColumnsContainer};
+import r from"clsx";import t from"react";import{useStickyColumnsCss as c}from"./useStickyColumnsCss.js";const i=({children:h,numberOfStickyColumns:p=0,className:l,...a})=>{const[_,n]=t.useState(!1),x=t.useRef(null),{columnsCss:e}=c({numberOfStickyColumns:p,wrapperRef:x});return t.createElement("div",{onScroll:s=>{const o=s.currentTarget.scrollLeft>0;o!==_&&n(o)},role:"scrollbar",ref:x,className:r("overflow-auto","max-w-full","relative","overscroll-x-contain",e,"[&_td]:bg-inherit",l,p===1&&_&&["[&_td]:nth-[1]:[box-shadow:(--color-alpha-200)_-2px_-3px_9px_1px]","[&_td]:nth-[1]:[clip-path:inset(0px_-10px_0px_0px)","[&_th]:nth-[1]:[box-shadow:(--color-alpha-200)_-2px_-3px_9px_1px]","[&_th]:nth-[1]:[clip-path:inset(0px_-10px_0px_0px)"],p===2&&_&&["[&_td]:nth-[2]:[box-shadow:(--color-alpha-200)_-2px_-3px_9px_1px]","[&_td]:nth-[2]:[clip-path:inset(0px_-10px_0px_0px)","[&_th]:nth-[2]:[box-shadow:(--color-alpha-200)_-2px_-3px_9px_1px]","[&_th]:nth-[2]:[clip-path:inset(0px_-10px_0px_0px)"],p===3&&_&&["[&_td]:nth-[3]:[box-shadow:(--color-alpha-200)_-2px_-3px_9px_1px]","[&_td]:nth-[3]:[clip-path:inset(0px_-10px_0px_0px)","[&_th]:nth-[3]:[box-shadow:(--color-alpha-200)_-2px_-3px_9px_1px]","[&_th]:nth-[3]:[clip-path:inset(0px_-10px_0px_0px)"],p===4&&_&&["[&_td]:nth-[4]:[box-shadow:(--color-alpha-200)_-2px_-3px_9px_1px]","[&_td]:nth-[4]:[clip-path:inset(0px_-10px_0px_0px)","[&_th]:nth-[4]:[box-shadow:(--color-alpha-200)_-2px_-3px_9px_1px]","[&_th]:nth-[4]:[clip-path:inset(0px_-10px_0px_0px)"]),...a},h)};export{i as TableStickyColumnsContainer};
 //# sourceMappingURL=TableStickyColumnsContainer.js.map

package/dist/components/table/TableStickyColumnsContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableStickyColumnsContainer.js","sources":["../../../src/components/table/TableStickyColumnsContainer.tsx"],"sourcesContent":["import React from 'react'\n\nimport { CSS } from '~/stitches'\n\nimport { Box } from '../box'\nimport { useStickyColumnsCss } from './useStickyColumnsCss'\n\nexport const TableStickyColumnsContainer = ({\n  children,\n  numberOfStickyColumns = 0,\n  css,\n  ...restProps\n}: React.PropsWithChildren<{\n  numberOfStickyColumns?: number\n  css?: CSS\n}>) => {\n  const [hasScroll, setHasScroll] = React.useState<boolean>(false)\n  const wrapperRef = React.useRef(null)\n  const { columnsCss } = useStickyColumnsCss({\n    numberOfStickyColumns,\n    wrapperRef\n  })\n\n  const handleScroll = (event: React.UIEvent<HTMLDivElement>) => {\n    const newHasScroll = event.currentTarget.scrollLeft > 0\n    if (newHasScroll !== hasScroll) {\n      setHasScroll(newHasScroll)\n    }\n  }\n\n  return (\n    <Box\n      onScroll={handleScroll}\n      role=\"scrollbar\"\n      ref={wrapperRef}\n      css={{\n        overflow: 'auto',\n        overscrollBehaviorX: 'contain',\n        maxWidth: '100%',\n        position: 'relative',\n        ...columnsCss,\n        [`& td:nth-child(${numberOfStickyColumns}), th:nth-child(${numberOfStickyColumns})`]:\n          {\n            ...(hasScroll && {\n              boxShadow: '$colors$alpha200 -2px -3px 9px 1px',\n              clipPath: 'inset(0px -10px 0px 0px)'\n            })\n          },\n        '& td': {\n          bg: 'inherit'\n        },\n        ...css\n      }}\n      {...restProps}\n    >\n      {children}\n    </Box>\n  )\n}\n"],"names":["TableStickyColumnsContainer","children","numberOfStickyColumns","css","restProps","hasScroll","setHasScroll","React","wrapperRef","columnsCss","useStickyColumnsCss","Box","event","newHasScroll"],"mappings":"wHAOa,MAAAA,EAA8B,CAAC,CAC1C,SAAAC,EACA,sBAAAC,EAAwB,EACxB,IAAAC,KACGC,CACL,IAGO,CACL,KAAM,CAACC,EAAWC,CAAY,EAAIC,EAAM,SAAkB,EAAK,EACzDC,EAAaD,EAAM,OAAO,IAAI,EAC9B,CAAE,WAAAE,CAAW,EAAIC,EAAoB,CACzC,sBAAAR,EACA,WAAAM,CACF,CAAC,EASD,OACED,EAAA,cAACI,EAAA,CACC,SATkBC,GAAyC,CAC7D,MAAMC,EAAeD,EAAM,cAAc,WAAa,EAClDC,IAAiBR,GACnBC,EAAaO,CAAY,CAE7B,EAKI,KAAK,YACL,IAAKL,EACL,IAAK,CACH,SAAU,OACV,oBAAqB,UACrB,SAAU,OACV,SAAU,WACV,GAAGC,EACH,CAAC,kBAAkBP,oBAAwCA,MACzD,CACE,GAAIG,GAAa,CACf,UAAW,qCACX,SAAU,0BACZ,CACF,EACF,OAAQ,CACN,GAAI,SACN,EACA,GAAGF,CACL,EACC,GAAGC,CAEHH,EAAAA,CACH,CAEJ"}
+{"version":3,"file":"TableStickyColumnsContainer.js","sources":["../../../src/components/table/TableStickyColumnsContainer.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\n\nimport { useStickyColumnsCss } from './useStickyColumnsCss'\n\nexport const TableStickyColumnsContainer = ({\n  children,\n  numberOfStickyColumns = 0,\n  className,\n  ...restProps\n}: React.PropsWithChildren<{\n  numberOfStickyColumns?: number\n  className?: string\n}>) => {\n  const [hasScroll, setHasScroll] = React.useState<boolean>(false)\n  const wrapperRef = React.useRef(null)\n  const { columnsCss } = useStickyColumnsCss({\n    numberOfStickyColumns,\n    wrapperRef\n  })\n\n  const handleScroll = (event: React.UIEvent<HTMLDivElement>) => {\n    const newHasScroll = event.currentTarget.scrollLeft > 0\n    if (newHasScroll !== hasScroll) {\n      setHasScroll(newHasScroll)\n    }\n  }\n\n  return (\n    <div\n      onScroll={handleScroll}\n      role=\"scrollbar\"\n      ref={wrapperRef}\n      className={clsx(\n        'overflow-auto',\n        'max-w-full',\n        'relative',\n        'overscroll-x-contain',\n        columnsCss,\n        '[&_td]:bg-inherit',\n        className,\n        numberOfStickyColumns === 1 &&\n          hasScroll && [\n            '[&_td]:nth-[1]:[box-shadow:(--color-alpha-200)_-2px_-3px_9px_1px]',\n            '[&_td]:nth-[1]:[clip-path:inset(0px_-10px_0px_0px)',\n            '[&_th]:nth-[1]:[box-shadow:(--color-alpha-200)_-2px_-3px_9px_1px]',\n            '[&_th]:nth-[1]:[clip-path:inset(0px_-10px_0px_0px)'\n          ],\n        numberOfStickyColumns === 2 &&\n          hasScroll && [\n            '[&_td]:nth-[2]:[box-shadow:(--color-alpha-200)_-2px_-3px_9px_1px]',\n            '[&_td]:nth-[2]:[clip-path:inset(0px_-10px_0px_0px)',\n            '[&_th]:nth-[2]:[box-shadow:(--color-alpha-200)_-2px_-3px_9px_1px]',\n            '[&_th]:nth-[2]:[clip-path:inset(0px_-10px_0px_0px)'\n          ],\n        numberOfStickyColumns === 3 &&\n          hasScroll && [\n            '[&_td]:nth-[3]:[box-shadow:(--color-alpha-200)_-2px_-3px_9px_1px]',\n            '[&_td]:nth-[3]:[clip-path:inset(0px_-10px_0px_0px)',\n            '[&_th]:nth-[3]:[box-shadow:(--color-alpha-200)_-2px_-3px_9px_1px]',\n            '[&_th]:nth-[3]:[clip-path:inset(0px_-10px_0px_0px)'\n          ],\n        numberOfStickyColumns === 4 &&\n          hasScroll && [\n            '[&_td]:nth-[4]:[box-shadow:(--color-alpha-200)_-2px_-3px_9px_1px]',\n            '[&_td]:nth-[4]:[clip-path:inset(0px_-10px_0px_0px)',\n            '[&_th]:nth-[4]:[box-shadow:(--color-alpha-200)_-2px_-3px_9px_1px]',\n            '[&_th]:nth-[4]:[clip-path:inset(0px_-10px_0px_0px)'\n          ]\n      )}\n      {...restProps}\n    >\n      {children}\n    </div>\n  )\n}\n"],"names":["TableStickyColumnsContainer","children","numberOfStickyColumns","className","restProps","hasScroll","setHasScroll","React","wrapperRef","columnsCss","useStickyColumnsCss","event","newHasScroll","clsx"],"mappings":"wGAKa,MAAAA,EAA8B,CAAC,CAC1C,SAAAC,EACA,sBAAAC,EAAwB,EACxB,UAAAC,EACA,GAAGC,CACL,IAGO,CACL,KAAM,CAACC,EAAWC,CAAY,EAAIC,EAAM,SAAkB,EAAK,EACzDC,EAAaD,EAAM,OAAO,IAAI,EAC9B,CAAE,WAAAE,CAAW,EAAIC,EAAoB,CACzC,sBAAAR,EACA,WAAAM,CACF,CAAC,EASD,OACED,EAAA,cAAC,MACC,CAAA,SATkBI,GAAyC,CAC7D,MAAMC,EAAeD,EAAM,cAAc,WAAa,EAClDC,IAAiBP,GACnBC,EAAaM,CAAY,CAE7B,EAKI,KAAK,YACL,IAAKJ,EACL,UAAWK,EACT,gBACA,aACA,WACA,uBACAJ,EACA,oBACAN,EACAD,IAA0B,GACxBG,GAAa,CACX,oEACA,qDACA,oEACA,oDACF,EACFH,IAA0B,GACxBG,GAAa,CACX,oEACA,qDACA,oEACA,oDACF,EACFH,IAA0B,GACxBG,GAAa,CACX,oEACA,qDACA,oEACA,oDACF,EACFH,IAA0B,GACxBG,GAAa,CACX,oEACA,qDACA,oEACA,oDACF,CACJ,EACC,GAAGD,CAEHH,EAAAA,CACH,CAEJ"}

package/dist/components/table/useStickyColumnsCss.js

@@ -1,2 +1,2 @@
-import*as n from"react";const d=({numberOfStickyColumns:t,wrapperRef:r})=>{const[i,f]=n.useState({}),u=n.useCallback(()=>{var e;let s=0;const o=(e=r.current)==null?void 0:e.querySelectorAll("th");return Array.from(o||[]).slice(0,t).reduce((m,p,c)=>{const l=c+1,a={...m,[`& td:nth-of-type(${l}), th:nth-of-type(${l})`]:{position:"sticky",left:`${s}px`,minWidth:`${p.offsetWidth}px`,zIndex:"2"}};return s+=(o==null?void 0:o.item(c).clientWidth)||0,a},{})},[t,r]);return n.useLayoutEffect(()=>{if(!t)return;const e=u();f(e)},[t,r,u]),{columnsCss:i}};export{d as useStickyColumnsCss};
+import*as n from"react";const d=({numberOfStickyColumns:t,wrapperRef:o})=>{const[i,a]=n.useState({}),r=n.useCallback(()=>{var e;let s=0;const c=(e=o.current)==null?void 0:e.querySelectorAll("th");return Array.from(c||[]).slice(0,t).reduce((f,m,l)=>{const u=l+1,p={...f,["& td:nth-of-type(".concat(u,"), th:nth-of-type(").concat(u,")")]:{position:"sticky",left:"".concat(s,"px"),minWidth:"".concat(m.offsetWidth,"px"),zIndex:"2"}};return s+=(c==null?void 0:c.item(l).clientWidth)||0,p},{})},[t,o]);return n.useLayoutEffect(()=>{if(!t)return;const e=r();a(e)},[t,o,r]),{columnsCss:i}};export{d as useStickyColumnsCss};
 //# sourceMappingURL=useStickyColumnsCss.js.map

package/dist/components/table/useStickyColumnsCss.js.map

@@ -1 +1 @@
-{"version":3,"file":"useStickyColumnsCss.js","sources":["../../../src/components/table/useStickyColumnsCss.ts"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS } from '../../stitches'\n\ninterface IUseStickyColumnsCss {\n  columnsCss: CSS\n}\n\nexport const useStickyColumnsCss = ({\n  numberOfStickyColumns,\n  wrapperRef\n}: {\n  numberOfStickyColumns: number\n  wrapperRef: React.RefObject<HTMLTableSectionElement>\n}): IUseStickyColumnsCss => {\n  const [columnsCss, setColumnsCss] = React.useState<CSS>({})\n\n  const generateColumnsCss = React.useCallback(() => {\n    let accWidth = 0\n\n    // Getting the table header cells elements to use their width to set the left position in the sticky columns.\n    const tableHeaderCells = wrapperRef.current?.querySelectorAll('th')\n    const tableHeaderElements = Array.from(tableHeaderCells || [])\n\n    // Getting only the number of sticky columns from the elements array that is what we are interested in.\n    const stickyColumns = tableHeaderElements.slice(0, numberOfStickyColumns)\n\n    const newColumnsCss = stickyColumns.reduce((acc: CSS, column, index) => {\n      const elementNumber = index + 1\n      const cssObject = {\n        ...acc,\n        [`& td:nth-of-type(${elementNumber}), th:nth-of-type(${elementNumber})`]:\n          {\n            position: 'sticky',\n            left: `${accWidth}px`,\n            minWidth: `${column.offsetWidth}px`, // fixing width for sticky columns\n            zIndex: '2'\n          }\n      }\n\n      accWidth += tableHeaderCells?.item(index).clientWidth || 0\n\n      return cssObject\n    }, {} as CSS)\n\n    return newColumnsCss\n  }, [numberOfStickyColumns, wrapperRef])\n\n  React.useLayoutEffect(() => {\n    if (!numberOfStickyColumns) return\n    const newColumnsCss = generateColumnsCss()\n\n    setColumnsCss(newColumnsCss)\n  }, [numberOfStickyColumns, wrapperRef, generateColumnsCss])\n\n  return {\n    columnsCss\n  }\n}\n"],"names":["useStickyColumnsCss","numberOfStickyColumns","wrapperRef","columnsCss","setColumnsCss","React","generateColumnsCss","_a","accWidth","tableHeaderCells","acc","column","index","elementNumber","cssObject","newColumnsCss"],"mappings":"wBAQa,MAAAA,EAAsB,CAAC,CAClC,sBAAAC,EACA,WAAAC,CACF,IAG4B,CAC1B,KAAM,CAACC,EAAYC,CAAa,EAAIC,EAAM,SAAc,CAAA,CAAE,EAEpDC,EAAqBD,EAAM,YAAY,IAAM,CAjBrD,IAAAE,EAkBI,IAAIC,EAAW,EAGf,MAAMC,GAAmBF,EAAAL,EAAW,UAAX,KAAAK,OAAAA,EAAoB,iBAAiB,IAAA,EAwB9D,OAvB4B,MAAM,KAAKE,GAAoB,CAAE,CAAA,EAGnB,MAAM,EAAGR,CAAqB,EAEpC,OAAO,CAACS,EAAUC,EAAQC,IAAU,CACtE,MAAMC,EAAgBD,EAAQ,EACxBE,EAAY,CAChB,GAAGJ,EACH,CAAC,oBAAoBG,sBAAkCA,MACrD,CACE,SAAU,SACV,KAAM,GAAGL,MACT,SAAU,GAAGG,EAAO,gBACpB,OAAQ,GACV,CACJ,EAEA,OAAAH,IAAYC,GAAA,KAAAA,OAAAA,EAAkB,KAAKG,CAAAA,EAAO,cAAe,EAElDE,CACT,EAAG,EAAS,CAGd,EAAG,CAACb,EAAuBC,CAAU,CAAC,EAEtC,OAAAG,EAAM,gBAAgB,IAAM,CAC1B,GAAI,CAACJ,EAAuB,OAC5B,MAAMc,EAAgBT,EAAmB,EAEzCF,EAAcW,CAAa,CAC7B,EAAG,CAACd,EAAuBC,EAAYI,CAAkB,CAAC,EAEnD,CACL,WAAAH,CACF,CACF"}
+{"version":3,"file":"useStickyColumnsCss.js","sources":["../../../src/components/table/useStickyColumnsCss.ts"],"sourcesContent":["import * as React from 'react'\n\ninterface IUseStickyColumnsCss {\n  columnsCss?: string\n}\n\nexport const useStickyColumnsCss = ({\n  numberOfStickyColumns,\n  wrapperRef\n}: {\n  numberOfStickyColumns: number\n  wrapperRef: React.RefObject<HTMLTableSectionElement>\n}): IUseStickyColumnsCss => {\n  const [columnsCss, setColumnsCss] = React.useState<CSS>({})\n\n  const generateColumnsCss = React.useCallback(() => {\n    let accWidth = 0\n\n    // Getting the table header cells elements to use their width to set the left position in the sticky columns.\n    const tableHeaderCells = wrapperRef.current?.querySelectorAll('th')\n    const tableHeaderElements = Array.from(tableHeaderCells || [])\n\n    // Getting only the number of sticky columns from the elements array that is what we are interested in.\n    const stickyColumns = tableHeaderElements.slice(0, numberOfStickyColumns)\n\n    const newColumnsCss = stickyColumns.reduce((acc: CSS, column, index) => {\n      const elementNumber = index + 1\n      const cssObject = {\n        ...acc,\n        [`& td:nth-of-type(${elementNumber}), th:nth-of-type(${elementNumber})`]:\n          {\n            position: 'sticky',\n            left: `${accWidth}px`,\n            minWidth: `${column.offsetWidth}px`, // fixing width for sticky columns\n            zIndex: '2'\n          }\n      }\n\n      accWidth += tableHeaderCells?.item(index).clientWidth || 0\n\n      return cssObject\n    }, {} as CSS)\n\n    return newColumnsCss\n  }, [numberOfStickyColumns, wrapperRef])\n\n  React.useLayoutEffect(() => {\n    if (!numberOfStickyColumns) return\n    const newColumnsCss = generateColumnsCss()\n\n    setColumnsCss(newColumnsCss)\n  }, [numberOfStickyColumns, wrapperRef, generateColumnsCss])\n\n  return {\n    columnsCss\n  }\n}\n"],"names":["useStickyColumnsCss","numberOfStickyColumns","wrapperRef","columnsCss","setColumnsCss","React","generateColumnsCss","_a","accWidth","tableHeaderCells","acc","column","index","elementNumber","cssObject","newColumnsCss"],"mappings":"wBAMa,MAAAA,EAAsB,CAAC,CAClC,sBAAAC,EACA,WAAAC,CACF,IAG4B,CAC1B,KAAM,CAACC,EAAYC,CAAa,EAAIC,EAAM,SAAc,CAAE,CAAA,EAEpDC,EAAqBD,EAAM,YAAY,IAAM,CAfrD,IAAAE,EAgBI,IAAIC,EAAW,EAGf,MAAMC,GAAmBF,EAAAL,EAAW,UAAX,KAAAK,OAAAA,EAAoB,iBAAiB,IAwB9D,EAAA,OAvB4B,MAAM,KAAKE,GAAoB,CAAE,CAAA,EAGnB,MAAM,EAAGR,CAAqB,EAEpC,OAAO,CAACS,EAAUC,EAAQC,IAAU,CACtE,MAAMC,EAAgBD,EAAQ,EACxBE,EAAY,CAChB,GAAGJ,EACH,CAAC,oBAAoB,OAAAG,EAAa,oBAAA,EAAqB,OAAAA,EAAa,GAAG,CAAA,EACrE,CACE,SAAU,SACV,KAAM,GAAG,OAAAL,EAAQ,IACjB,EAAA,SAAU,GAAG,OAAAG,EAAO,YAAW,IAAA,EAC/B,OAAQ,GACV,CACJ,EAEA,OAAAH,IAAYC,GAAA,KAAAA,OAAAA,EAAkB,KAAKG,CAAAA,EAAO,cAAe,EAElDE,CACT,EAAG,CAAA,CAAS,CAGd,EAAG,CAACb,EAAuBC,CAAU,CAAC,EAEtC,OAAAG,EAAM,gBAAgB,IAAM,CAC1B,GAAI,CAACJ,EAAuB,OAC5B,MAAMc,EAAgBT,EAEtBF,EAAAA,EAAcW,CAAa,CAC7B,EAAG,CAACd,EAAuBC,EAAYI,CAAkB,CAAC,EAEnD,CACL,WAAAH,CACF,CACF"}

package/dist/components/tabs/Tabs.js

@@ -1,2 +1,2 @@
-import{Root as o}from"@radix-ui/react-tabs";import{styled as t}from"../../stitches.js";import{TabsContent as i}from"./TabsContent.js";import{TabsTrigger as s}from"./TabsTrigger.js";import{TabsTriggerList as m}from"./TabsTriggerList.js";const r=t(o,{width:"100%"}),e=Object.assign(r,{TriggerList:m,Trigger:s,Content:i});r.displayName="Tabs";export{e as Tabs};
+import{Root as o}from"@radix-ui/react-tabs";import{styled as t}from"../../styled.js";import{TabsContent as s}from"./TabsContent.js";import{TabsTrigger as i}from"./TabsTrigger.js";import{TabsTriggerList as e}from"./TabsTriggerList.js";const r=t(o,{base:["w-full"]}),m=Object.assign(r,{TriggerList:e,Trigger:i,Content:s});r.displayName="Tabs";export{m as Tabs};
 //# sourceMappingURL=Tabs.js.map

package/dist/components/tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../../../src/components/tabs/Tabs.tsx"],"sourcesContent":["import { Root } from '@radix-ui/react-tabs'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { TabsContent } from './TabsContent'\nimport { TabsTrigger } from './TabsTrigger'\nimport { TabsTriggerList } from './TabsTriggerList'\n\ntype TabsProps = React.ComponentProps<typeof StyledRoot>\n\nconst StyledRoot = styled(Root, { width: '100%' })\n\nexport const Tabs = Object.assign(StyledRoot, {\n  TriggerList: TabsTriggerList,\n  Trigger: TabsTrigger,\n  Content: TabsContent\n})\n\nStyledRoot.displayName = 'Tabs'\n"],"names":["StyledRoot","styled","Root","Tabs","TabsTriggerList","TabsTrigger","TabsContent"],"mappings":"4OAWA,MAAMA,EAAaC,EAAOC,EAAM,CAAE,MAAO,MAAO,CAAC,EAEpCC,EAAO,OAAO,OAAOH,EAAY,CAC5C,YAAaI,EACb,QAASC,EACT,QAASC,CACX,CAAC,EAEDN,EAAW,YAAc"}
+{"version":3,"file":"Tabs.js","sources":["../../../src/components/tabs/Tabs.tsx"],"sourcesContent":["import { Root } from '@radix-ui/react-tabs'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { TabsContent } from './TabsContent'\nimport { TabsTrigger } from './TabsTrigger'\nimport { TabsTriggerList } from './TabsTriggerList'\n\ntype TabsProps = React.ComponentProps<typeof StyledRoot>\n\nconst StyledRoot = styled(Root, {\n  base: ['w-full']\n})\n\nexport const Tabs = Object.assign(StyledRoot, {\n  TriggerList: TabsTriggerList,\n  Trigger: TabsTrigger,\n  Content: TabsContent\n})\n\nStyledRoot.displayName = 'Tabs'\n"],"names":["StyledRoot","styled","Root","Tabs","TabsTriggerList","TabsTrigger","TabsContent"],"mappings":"0OAWA,MAAMA,EAAaC,EAAOC,EAAM,CAC9B,KAAM,CAAC,QAAQ,CACjB,CAAC,EAEYC,EAAO,OAAO,OAAOH,EAAY,CAC5C,YAAaI,EACb,QAASC,EACT,QAASC,CACX,CAAC,EAEDN,EAAW,YAAc"}

package/dist/components/tabs/TabsContent.js

@@ -1,2 +1,2 @@
-import{Content as t}from"@radix-ui/react-tabs";import{styled as n}from"../../stitches.js";const e=n(t,{flexGrow:1,fontFamily:"$body"}),o=e;o.displayName="TabsContent";export{o as TabsContent};
+import{Content as t}from"@radix-ui/react-tabs";import{styled as n}from"../../styled.js";const e=n(t,{base:["grow","font-body"]}),o=e;o.displayName="TabsContent";export{o as TabsContent};
 //# sourceMappingURL=TabsContent.js.map

package/dist/components/tabs/TabsContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabsContent.js","sources":["../../../src/components/tabs/TabsContent.tsx"],"sourcesContent":["import { Content } from '@radix-ui/react-tabs'\n\nimport { styled } from '~/stitches'\n\nconst StyledTabsContent = styled(Content, {\n  flexGrow: 1,\n  fontFamily: '$body'\n})\n\nexport const TabsContent = StyledTabsContent\n\nTabsContent.displayName = 'TabsContent'\n"],"names":["StyledTabsContent","styled","Content","TabsContent"],"mappings":"0FAIA,MAAMA,EAAoBC,EAAOC,EAAS,CACxC,SAAU,EACV,WAAY,OACd,CAAC,EAEYC,EAAcH,EAE3BG,EAAY,YAAc"}
+{"version":3,"file":"TabsContent.js","sources":["../../../src/components/tabs/TabsContent.tsx"],"sourcesContent":["import { Content } from '@radix-ui/react-tabs'\n\nimport { styled } from '~/styled'\n\nconst StyledTabsContent = styled(Content, {\n  base: ['grow', 'font-body']\n})\n\nexport const TabsContent = StyledTabsContent\n\nTabsContent.displayName = 'TabsContent'\n"],"names":["StyledTabsContent","styled","Content","TabsContent"],"mappings":"wFAIA,MAAMA,EAAoBC,EAAOC,EAAS,CACxC,KAAM,CAAC,OAAQ,WAAW,CAC5B,CAAC,EAEYC,EAAcH,EAE3BG,EAAY,YAAc"}

package/dist/components/tabs/TabsTrigger.js

@@ -1,2 +1,2 @@
-import{Trigger as n}from"@radix-ui/react-tabs";import*as e from"react";import{styled as o}from"../../stitches.js";import{Text as s}from"../text/Text.js";const c=o("div",{position:"absolute",inset:0,height:"calc(100% + 2px)",opacity:0,bg:"$interactive1"}),l=o(n,{background:"none",border:"none",cursor:"pointer",flexShrink:0,p:"$4",userSelect:"none",borderBottom:"2px solid transparent",position:"relative",'&[data-state="active"]':{color:"$interactive1",fontWeight:600,letterSpacing:"-0.005em",borderColor:"currentColor"},"&[disabled]":{opacity:.3,cursor:"not-allowed"},"&:not([disabled])":{"&:hover, &:focus-visible":{color:"$interactive2","& div":{opacity:.07}},"&:active":{color:"$interactive3"},"&:focus-visible":{outline:"none",position:"relative",zIndex:1,boxShadow:"white 0px 0px 0px 2px, $colors$primary800 0px 0px 0px 4px"}}}),r=e.forwardRef(({children:t,...i},a)=>e.createElement(l,{...i,ref:a},e.createElement(s,{size:"sm",as:"span"},t),e.createElement(c,null)));r.displayName="TabsTrigger";export{r as TabsTrigger};
+import{Trigger as r}from"@radix-ui/react-tabs";import*as e from"react";import{styled as t}from"../../styled.js";import{Text as d}from"../text/Text.js";const n=t("div",{base:["absolute","inset-0","h-[calc(100%+2px)]","opacity-0","bg-(--interactive-1)"]}),l=t(r,{base:["bg-none","cursor-pointer","shrink-0","p-4","select-none","border-b-2","border-b-transparent","relative","data-[state=active]:border-current","data-[state=active]:font-semibold","data-[state=active]:text-(--interactive-1)","data-[state=active]:tracking-[-0.005em]","disabled:cursor-not-allowed","disabled:opacity-30","not-disabled:active:text-(--interactive-3)","not-disabled:focus-visible:[&_div]:opacity-7","not-disabled:focus-visible:outline-none","not-disabled:focus-visible:relative","not-disabled:focus-visible:shadow-[$colors$primary800_0px_0px_0px_4px]","not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]","not-disabled:focus-visible:text-(--interactive-2)","not-disabled:focus-visible:z-1","not-disabled:hover:[&_div]:opacity-7","not-disabled:hover:text-(--interactive-2)"]}),i=e.forwardRef(({children:a,...o},s)=>e.createElement(l,{...o,ref:s},e.createElement(d,{size:"sm",as:"span"},a),e.createElement(n,null)));i.displayName="TabsTrigger";export{i as TabsTrigger};
 //# sourceMappingURL=TabsTrigger.js.map

package/dist/components/tabs/TabsTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabsTrigger.js","sources":["../../../src/components/tabs/TabsTrigger.tsx"],"sourcesContent":["import { Trigger } from '@radix-ui/react-tabs'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { Text } from '../text'\n\nconst StyledTabsTriggerHoverBackground = styled('div', {\n  position: 'absolute',\n  inset: 0,\n  height: 'calc(100% + 2px)',\n  opacity: 0,\n  bg: '$interactive1'\n})\n\nconst StyledTabsTrigger = styled(Trigger, {\n  background: 'none',\n  border: 'none',\n  cursor: 'pointer',\n  flexShrink: 0,\n  p: '$4',\n  userSelect: 'none',\n  borderBottom: '2px solid transparent',\n  position: 'relative',\n  '&[data-state=\"active\"]': {\n    color: '$interactive1',\n    fontWeight: 600,\n    letterSpacing: '-0.005em',\n    borderColor: 'currentColor'\n  },\n  '&[disabled]': {\n    opacity: 0.3,\n    cursor: 'not-allowed'\n  },\n  '&:not([disabled])': {\n    '&:hover, &:focus-visible': {\n      color: '$interactive2',\n      '& div': {\n        opacity: 0.07\n      }\n    },\n    '&:active': {\n      color: '$interactive3'\n    },\n    '&:focus-visible': {\n      outline: 'none',\n      position: 'relative',\n      zIndex: 1,\n      boxShadow: `white 0px 0px 0px 2px, $colors$primary800 0px 0px 0px 4px`\n    }\n  }\n})\n\nexport const TabsTrigger = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<typeof StyledTabsTrigger> & { value: string }\n>(({ children, ...rest }, ref) => (\n  <StyledTabsTrigger {...rest} ref={ref}>\n    <Text size=\"sm\" as=\"span\">\n      {children}\n    </Text>\n    <StyledTabsTriggerHoverBackground />\n  </StyledTabsTrigger>\n))\n\nTabsTrigger.displayName = 'TabsTrigger'\n"],"names":["StyledTabsTriggerHoverBackground","styled","StyledTabsTrigger","Trigger","TabsTrigger","React","children","rest","ref","Text"],"mappings":"yJAOA,MAAMA,EAAmCC,EAAO,MAAO,CACrD,SAAU,WACV,MAAO,EACP,OAAQ,mBACR,QAAS,EACT,GAAI,eACN,CAAC,EAEKC,EAAoBD,EAAOE,EAAS,CACxC,WAAY,OACZ,OAAQ,OACR,OAAQ,UACR,WAAY,EACZ,EAAG,KACH,WAAY,OACZ,aAAc,wBACd,SAAU,WACV,yBAA0B,CACxB,MAAO,gBACP,WAAY,IACZ,cAAe,WACf,YAAa,cACf,EACA,cAAe,CACb,QAAS,GACT,OAAQ,aACV,EACA,oBAAqB,CACnB,2BAA4B,CAC1B,MAAO,gBACP,QAAS,CACP,QAAS,GACX,CACF,EACA,WAAY,CACV,MAAO,eACT,EACA,kBAAmB,CACjB,QAAS,OACT,SAAU,WACV,OAAQ,EACR,UAAW,2DACb,CACF,CACF,CAAC,EAEYC,EAAcC,EAAM,WAG/B,CAAC,CAAE,SAAAC,KAAaC,CAAK,EAAGC,IACxBH,EAAA,cAACH,EAAA,CAAmB,GAAGK,EAAM,IAAKC,GAChCH,EAAA,cAACI,EAAA,CAAK,KAAK,KAAK,GAAG,MAAA,EAChBH,CACH,EACAD,EAAA,cAACL,EAAA,IAAiC,CACpC,CACD,EAEDI,EAAY,YAAc"}
+{"version":3,"file":"TabsTrigger.js","sources":["../../../src/components/tabs/TabsTrigger.tsx"],"sourcesContent":["import { Trigger } from '@radix-ui/react-tabs'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Text } from '../text'\n\nconst StyledTabsTriggerHoverBackground = styled('div', {\n  base: [\n    'absolute',\n    'inset-0',\n    'h-[calc(100%+2px)]',\n    'opacity-0',\n    'bg-(--interactive-1)'\n  ]\n})\n\nconst StyledTabsTrigger = styled(Trigger, {\n  base: [\n    'bg-none',\n    'cursor-pointer',\n    'shrink-0',\n    'p-4',\n    'select-none',\n    'border-b-2',\n    'border-b-transparent',\n    'relative',\n    'data-[state=active]:border-current',\n    'data-[state=active]:font-semibold',\n    'data-[state=active]:text-(--interactive-1)',\n    'data-[state=active]:tracking-[-0.005em]',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30',\n    'not-disabled:active:text-(--interactive-3)',\n    'not-disabled:focus-visible:[&_div]:opacity-7',\n    'not-disabled:focus-visible:outline-none',\n    'not-disabled:focus-visible:relative',\n    'not-disabled:focus-visible:shadow-[$colors$primary800_0px_0px_0px_4px]',\n    'not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]',\n    'not-disabled:focus-visible:text-(--interactive-2)',\n    'not-disabled:focus-visible:z-1',\n    'not-disabled:hover:[&_div]:opacity-7',\n    'not-disabled:hover:text-(--interactive-2)'\n  ]\n})\n\nexport const TabsTrigger = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<typeof StyledTabsTrigger> & { value: string }\n>(({ children, ...rest }, ref) => (\n  <StyledTabsTrigger {...rest} ref={ref}>\n    <Text size=\"sm\" as=\"span\">\n      {children}\n    </Text>\n    <StyledTabsTriggerHoverBackground />\n  </StyledTabsTrigger>\n))\n\nTabsTrigger.displayName = 'TabsTrigger'\n"],"names":["StyledTabsTriggerHoverBackground","styled","StyledTabsTrigger","Trigger","TabsTrigger","React","children","rest","ref","Text"],"mappings":"uJAOA,MAAMA,EAAmCC,EAAO,MAAO,CACrD,KAAM,CACJ,WACA,UACA,qBACA,YACA,sBACF,CACF,CAAC,EAEKC,EAAoBD,EAAOE,EAAS,CACxC,KAAM,CACJ,UACA,iBACA,WACA,MACA,cACA,aACA,uBACA,WACA,qCACA,oCACA,6CACA,0CACA,8BACA,sBACA,6CACA,+CACA,0CACA,sCACA,yEACA,4DACA,oDACA,iCACA,uCACA,2CACF,CACF,CAAC,EAEYC,EAAcC,EAAM,WAG/B,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAK,EAAGC,IACxBH,EAAA,cAACH,EAAA,CAAmB,GAAGK,EAAM,IAAKC,CAAAA,EAChCH,EAAA,cAACI,EAAA,CAAK,KAAK,KAAK,GAAG,QAChBH,CACH,EACAD,EAAA,cAACL,EAAA,IAAiC,CACpC,CACD,EAEDI,EAAY,YAAc"}

package/dist/components/tabs/TabsTriggerList.js

@@ -1,2 +1,2 @@
-import{ChevronLeft as y,ChevronRight as C}from"@atom-learning/icons";import{List as k}from"@radix-ui/react-tabs";import t from"react";import{ColorScheme as v}from"../../experiments/color-scheme/ColorScheme.js";import{styled as i}from"../../stitches.js";import{useCallbackRefState as x}from"../../utilities/hooks/useCallbackRef.js";import{useScrollPosition as E}from"../../utilities/hooks/useScrollPosition.js";import{useSize as S}from"../../utilities/hooks/useSize.js";import{ActionIcon as W}from"../action-icon/ActionIcon.js";import{Icon as s}from"../icon/Icon.js";const w=i(v,{position:"relative",borderBottom:"1px solid $base4",width:"100%"}),I=i(k,{flexShrink:0,display:"flex",width:"100%",overflowX:"auto","&::-webkit-scrollbar":{display:"none"},scrollbarWidth:"none"}),a=i(W,{height:"100% !important",position:"absolute",top:"50%",transform:"translateY(-50%)",cursor:"pointer",background:"$base1 !important",color:"$interactive1 !important",borderRadius:0,opacity:.9}),n=.8,c=({children:m,colorScheme:d={},...h})=>{const[e,p]=x(),{width:f}=S({element:e,delay:500}),{left:o}=E({element:e,delay:100,delayMethod:"debounce"}),r=t.useMemo(()=>e?e.scrollWidth>e.clientWidth:!1,[f,e]),b=t.useMemo(()=>r?o>0:!1,[o,r]),u=t.useMemo(()=>!e||!r?!1:e.scrollWidth-o-e.clientWidth>1,[e,o,r]),l=t.useCallback(g=>{!e||e.scroll({left:e.scrollLeft+e.clientWidth*g,behavior:"smooth"})},[e]);return t.createElement(w,{base:"grey1",accent:"primary1",interactive:"hiContrast",...d,...h},t.createElement(I,{ref:p},m),b&&t.createElement(a,{label:"scroll left",size:"md",css:{left:0},onClick:()=>l(-n),tabIndex:-1},t.createElement(s,{is:y})),u&&t.createElement(a,{label:"scroll right",size:"md",css:{right:0},onClick:()=>l(n),tabIndex:-1},t.createElement(s,{is:C})))};c.displayName="TabsTriggerList";export{c as TabsTriggerList};
+import{ChevronLeft as y,ChevronRight as C}from"@atom-learning/icons";import{List as v}from"@radix-ui/react-tabs";import t from"react";import{ColorScheme as x}from"../../experiments/color-scheme/ColorScheme.js";import{styled as l}from"../../styled.js";import{useCallbackRefState as k}from"../../utilities/hooks/useCallbackRef.js";import{useScrollPosition as w}from"../../utilities/hooks/useScrollPosition.js";import{useSize as E}from"../../utilities/hooks/useSize.js";import{ActionIcon as I}from"../action-icon/ActionIcon.js";import{Icon as a}from"../icon/Icon.js";const L=l(x,{base:["relative","border-b","border-b-(--base-4)","w-full"]}),S=l(v,{base:["shrink-0","flex","w-full","overflow-x-auto","-webkit-scrollbar:hidden","[scrollbar-width:none]"]}),s=l(I,{base:["h-full!","absolute","top-1/2","-translate-y-1/2","cursor-pointer","bg-(--base-1)!","text-(--interactive-1)!","rounded-none","opacity-90"]}),c=.8,n=({children:m,colorScheme:d={},...b})=>{const[e,f]=k(),{width:h}=E({element:e,delay:500}),{left:r}=w({element:e,delay:100,delayMethod:"debounce"}),o=t.useMemo(()=>e?e.scrollWidth>e.clientWidth:!1,[h,e]),u=t.useMemo(()=>o?r>0:!1,[r,o]),p=t.useMemo(()=>!e||!o?!1:e.scrollWidth-r-e.clientWidth>1,[e,r,o]),i=t.useCallback(g=>{e&&e.scroll({left:e.scrollLeft+e.clientWidth*g,behavior:"smooth"})},[e]);return t.createElement(L,{base:"grey1",accent:"primary1",interactive:"hiContrast",...d,...b},t.createElement(S,{ref:f},m),u&&t.createElement(s,{label:"scroll left",size:"md",onClick:()=>i(-c),tabIndex:-1,className:"left-0"},t.createElement(a,{is:y})),p&&t.createElement(s,{label:"scroll right",size:"md",onClick:()=>i(c),tabIndex:-1,className:"right-0"},t.createElement(a,{is:C})))};n.displayName="TabsTriggerList";export{n as TabsTriggerList};
 //# sourceMappingURL=TabsTriggerList.js.map