@atom-learning/components 5.12.0 → 5.13.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"../../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};
 //# 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)::after': {\n    content: '',\n    position: 'absolute'\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)::after': {\n          height: '100%',\n          width: '4px',\n          left: '14px',\n          top: '50%'\n        }\n      },\n      horizontal: {\n        px: '$2',\n        flexDirection: 'column',\n        '&:not(:last-child)::after': {\n          width: '100%',\n          height: '4px',\n          left: '50%',\n          top: '14px'\n        }\n      }\n    },\n    separator: {\n      default: { '&:not(:last-child)::after': { bg: '$grey200' } },\n      active: { '&:not(:last-child)::after': { bg: '$primary800' } },\n      success: { '&:not(:last-child)::after': { bg: '$success' } },\n      viewed: { '&:not(:last-child)::after': { bg: '$grey600' } }\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,4BAA6B,CAC3B,QAAS,GACT,SAAU,UACZ,EACA,kBAAmB,CACjB,QAAS,MACX,EACA,SAAU,CACR,YAAa,CAAE,KAAM,EAAG,EACxB,UAAW,CACT,SAAU,CACR,GAAI,KACJ,cAAe,MACf,4BAA6B,CAC3B,OAAQ,OACR,MAAO,MACP,KAAM,OACN,IAAK,KACP,CACF,EACA,WAAY,CACV,GAAI,KACJ,cAAe,SACf,4BAA6B,CAC3B,MAAO,OACP,OAAQ,MACR,KAAM,MACN,IAAK,MACP,CACF,CACF,EACA,UAAW,CACT,QAAS,CAAE,4BAA6B,CAAE,GAAI,UAAW,CAAE,EAC3D,OAAQ,CAAE,4BAA6B,CAAE,GAAI,aAAc,CAAE,EAC7D,QAAS,CAAE,4BAA6B,CAAE,GAAI,UAAW,CAAE,EAC3D,OAAQ,CAAE,4BAA6B,CAAE,GAAI,UAAW,CAAE,CAC5D,EACA,OAAQ,CACN,UAAW,GACX,OAAQ,CAAA,EACR,QAAS,CACT,EAAA,OAAQ,CAAA,EACR,QAAS,CAAC,EACV,SAAU,EACZ,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 '~/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"}

package/dist/components/stepper/StepperStepLabel.d.ts

@@ -30,6 +30,8 @@ export declare const StepperStepLabel: import("@atom-learning/stitches-react/typ
             textMinimal: string;
             background: string;
             backgroundAccent: string;
+            black: string;
+            white: string;
             grey100: string;
             grey200: string;
             grey300: string;
@@ -376,7 +378,7 @@ export declare const StepperStepLabel: import("@atom-learning/stitches-react/typ
         };
     }> | undefined;
 }, "as"> & {
-    as?: "blockquote" | "caption" | "dd" | "dt" | "figcaption" | "li" | "p" | "span" | "legend" | import("react").ComponentType | import("react").ElementType;
+    as?: "blockquote" | "caption" | "dd" | "dt" | "figcaption" | "li" | "p" | "span" | "legend" | React.ComponentType | React.ElementType;
 }>, {
     direction?: "horizontal" | "vertical" | undefined;
     status?: "success" | "default" | "active" | "viewed" | "completed" | "reviewed" | undefined;
@@ -404,6 +406,8 @@ export declare const StepperStepLabel: import("@atom-learning/stitches-react/typ
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/stepper/StepperSteps.js

@@ -1,2 +1,2 @@
-import{Ok as h}from"@atom-learning/icons";import*as n from"react";import{styled as b}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 g}from"./StepperStepBullet.js";import{StepperStepContainer as T}from"./StepperStepContainer.js";import{StepperStepLabel as w}from"./StepperStepLabel.js";import{Status as t}from"./types.js";const L=b(v,{justifyContent:"space-between",variants:{direction:{vertical:{flexDirection:"column"},horizontal:{flexDirection:"row"}}}}),U=({css:S})=>{const{steps:i,goToStep:m,activeStep:r,viewedSteps:a,allowSkip:l,direction:c,hideLabels:E,completedSteps:p,showCompletedIcons:u}=I(),d=o=>{const e=i[o];return e.status?e.status:p.length===i.length?t.SUCCESS:r===o&&p.includes(r)?t.REVIEWED:r===o?t.ACTIVE:p.includes(o)?t.COMPLETED:a.includes(o)?t.VIEWED:t.DEFAULT},C=o=>{var e;const s=(e=i[o])==null?void 0:e.status;return p.length===i.length?t.SUCCESS:s===t.SUCCESS?t.SUCCESS:s===t.COMPLETED||o<Math.max(...a)?t.ACTIVE:s===t.VIEWED?t.VIEWED:t.DEFAULT};return n.createElement(L,{css:S,direction:c},i.map((o,e)=>{const s=d(e),f=C(e);return n.createElement(T,{tabIndex:0,key:`step_${e}`,direction:c,separator:f,status:s,css:c==="horizontal"?{width:`calc(100% / ${i.length})`}:{height:`calc(100% / ${i.length})`},canInteract:l},n.createElement(g,{as:l?"button":"div",onClick:()=>l&&a.includes(e)?m==null?void 0:m(e):void 0,status:s,"aria-current":e===r?"step":void 0,"aria-label":o.label?"":`step ${e+1}`,"aria-labelledby":o.label?`step-${e}`:void 0,css:{cursor:l&&a.includes(e)?"pointer":"auto"}},o.status===t.SUCCESS||u&&s===t.COMPLETED?n.createElement(D,{is:h}):e+1),o.label&&!E&&n.createElement(w,{as:"span",id:`step-${e}`,direction:c,status:s},o.label))}))};export{U as StepperSteps};
+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};
 //# 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            css={\n              direction === 'horizontal'\n                ? { width: `calc(100% / ${steps.length})` }\n                : { height: `calc(100% / ${steps.length})` }\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,CAAAA,EACzCL,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,IACEX,IAAc,aACV,CAAE,MAAO,eAAeL,EAAM,SAAU,EACxC,CAAE,OAAQ,eAAeA,EAAM,SAAU,EAE/C,YAAaI,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,QAAQP,EAAQ,IAC1C,kBAAiBO,EAAK,MAAQ,QAAQP,IAAU,OAChD,IAAK,CACH,OACEP,GAAaD,EAAY,SAASQ,CAAK,EAAI,UAAY,MAC3D,CAECO,EAAAA,EAAK,SAAWL,EAAO,SACvBL,GAAsBQ,IAAiBH,EAAO,UAC7CI,EAAA,cAACK,EAAA,CAAK,GAAIC,EAAI,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 '~/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"}

package/dist/components/switch/Switch.d.ts

@@ -26,6 +26,8 @@ declare const StyledSwitch: import("@atom-learning/stitches-react/types/styled-c
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/switch/Switch.js

@@ -1,2 +1,2 @@
-import*as r from"@radix-ui/react-switch";import*as o from"react";import{styled as t}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import{disabledStyle as s}from"../../utilities/style/disabledStyle.js";const d=t(r.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"},'&[data-state="checked"]:hover':{backgroundColor:"$primary900"},"&[disabled]":s,variants:{size:{md:{p:"$0",width:"$4"},lg:{p:"$1",width:"$6"}}}}),n=t(r.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)"}}}}}),a=({size:e="md",...i})=>o.createElement(d,{size:e,...i},o.createElement(n,{size:e}));a.displayName="Switch";export{a as Switch};
+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};
 //# 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'\nimport { disabledStyle } from '~/utilities'\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  },\n  '&[data-state=\"checked\"]:hover': {\n    backgroundColor: '$primary900'\n  },\n  '&[disabled]': disabledStyle,\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","disabledStyle","StyledThumb","Switch","size","rest","React"],"mappings":"2WAMA,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,aACnB,EACA,gCAAiC,CAC/B,gBAAiB,aACnB,EACA,cAAeC,EACf,SAAU,CACR,KAAM,CACJ,GAAI,CACF,EAAG,KACH,MAAO,IACT,EACA,GAAI,CACF,EAAG,KACH,MAAO,IACT,CACF,CACF,CACF,CAAC,EAEKC,EAAcH,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,EAIYG,EAAS,CAAC,CAAE,KAAAC,EAAO,QAASC,CAAK,IAC5CC,EAAA,cAACR,EAAA,CAAa,KAAMM,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 '~/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"}

package/dist/components/table/Table.d.ts

@@ -27,6 +27,8 @@ declare const StyledTable: import("@atom-learning/stitches-react/types/styled-co
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;
@@ -409,6 +411,8 @@ export declare const Table: React.ForwardRefExoticComponent<Omit<TableProps, "re
                     textMinimal: string;
                     background: string;
                     backgroundAccent: string;
+                    black: string;
+                    white: string;
                     grey100: string;
                     grey200: string;
                     grey300: string;
@@ -781,6 +785,8 @@ export declare const Table: React.ForwardRefExoticComponent<Omit<TableProps, "re
             textMinimal: string;
             background: string;
             backgroundAccent: string;
+            black: string;
+            white: string;
             grey100: string;
             grey200: string;
             grey300: string;
@@ -1150,6 +1156,8 @@ export declare const Table: React.ForwardRefExoticComponent<Omit<TableProps, "re
             textMinimal: string;
             background: string;
             backgroundAccent: string;
+            black: string;
+            white: string;
             grey100: string;
             grey200: string;
             grey300: string;
@@ -1519,6 +1527,8 @@ export declare const Table: React.ForwardRefExoticComponent<Omit<TableProps, "re
             textMinimal: string;
             background: string;
             backgroundAccent: string;
+            black: string;
+            white: string;
             grey100: string;
             grey200: string;
             grey300: string;
@@ -1868,7 +1878,7 @@ export declare const Table: React.ForwardRefExoticComponent<Omit<TableProps, "re
         ({ theme, isSticky, ...rest }: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & {
             ref?: ((instance: HTMLTableSectionElement | null) => void) | React.RefObject<HTMLTableSectionElement> | null | undefined;
         }, "css" | "theme" | "isSticky"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
-            theme?: "light" | "primary" | "white" | "primaryDark" | "primaryLight" | undefined;
+            theme?: "white" | "light" | "primary" | "primaryDark" | "primaryLight" | undefined;
             isSticky?: boolean | "true" | undefined;
         }, {
             sm: string;
@@ -1895,6 +1905,8 @@ export declare const Table: React.ForwardRefExoticComponent<Omit<TableProps, "re
                     textMinimal: string;
                     background: string;
                     backgroundAccent: string;
+                    black: string;
+                    white: string;
                     grey100: string;
                     grey200: string;
                     grey300: string;
@@ -2267,6 +2279,8 @@ export declare const Table: React.ForwardRefExoticComponent<Omit<TableProps, "re
             textMinimal: string;
             background: string;
             backgroundAccent: string;
+            black: string;
+            white: string;
             grey100: string;
             grey200: string;
             grey300: string;
@@ -2639,6 +2653,8 @@ export declare const Table: React.ForwardRefExoticComponent<Omit<TableProps, "re
                 textMinimal: string;
                 background: string;
                 backgroundAccent: string;
+                black: string;
+                white: string;
                 grey100: string;
                 grey200: string;
                 grey300: string;

package/dist/components/table/Table.js

@@ -1,2 +1,2 @@
-import*as t from"react";import{styled as b}from"../../stitches.js";import{TableBody as c}from"./TableBody.js";import{TableCell as e}from"./TableCell.js";import{TableFooter as C}from"./TableFooter.js";import{TableFooterCell as r}from"./TableFooterCell.js";import{TableHeader as u}from"./TableHeader.js";import{TableHeaderCell as o}from"./TableHeaderCell.js";import{StyledRow as y,TableRow as h}from"./TableRow.js";import{TableStickyColumnsContainer as l}from"./TableStickyColumnsContainer.js";const T=b("table",{borderCollapse:"separate",borderSpacing:0,fontFamily:"$sans",fontSize:"$sm",width:"100%",position:"relative",zIndex:0,variants:{size:{md:{[`${e}, ${o}, ${r}`]:{height:"$4",padding:"$1 $3"}},lg:{[`${e}, ${o}, ${r}`]:{height:"$5",padding:"$2 $3"}},xl:{[`${e}, ${o}, ${r}`]:{height:"$6",padding:"$4 $3"}}},corners:{round:{[`${o}`]:{"&:first-of-type":{borderTopLeftRadius:"$0"},"&:last-of-type":{borderTopRightRadius:"$0"}},[`${y}:last-child`]:{[`${e}:first-child`]:{borderBottomLeftRadius:"$0"},[`${e}:last-child`]:{borderBottomRightRadius:"$0"}}},square:{}}}}),s=t.forwardRef(({size:n="md",corners:d="round",numberOfStickyColumns:i=0,scrollContainerCss:m,scrollContainerkey:$,...f},p)=>{const a=t.createElement(T,{ref:p,size:n,corners:d,...f});return i?t.createElement(l,{key:$,css:m,numberOfStickyColumns:i},a):a}),g=Object.assign(s,{Body:c,Cell:e,Footer:C,FooterCell:r,Header:u,HeaderCell:o,Row:h,StickyColumnsContainer:l});s.displayName="Table";export{g as Table};
+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};
 //# 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 { StyledRow, 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        [`${TableCell}, ${TableHeaderCell}, ${TableFooterCell}`]: {\n          height: '$4',\n          padding: '$1 $3'\n        }\n      },\n      lg: {\n        [`${TableCell}, ${TableHeaderCell}, ${TableFooterCell}`]: {\n          height: '$5',\n          padding: '$2 $3'\n        }\n      },\n      xl: {\n        [`${TableCell}, ${TableHeaderCell}, ${TableFooterCell}`]: {\n          height: '$6',\n          padding: '$4 $3'\n        }\n      }\n    },\n    corners: {\n      round: {\n        [`${TableHeaderCell}`]: {\n          '&:first-of-type': { borderTopLeftRadius: '$0' },\n          '&:last-of-type': { borderTopRightRadius: '$0' }\n        },\n        [`${StyledRow}:last-child`]: {\n          [`${TableCell}:first-child`]: { borderBottomLeftRadius: '$0' },\n          [`${TableCell}:last-child`]: { borderBottomRightRadius: '$0' }\n        }\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","TableCell","TableHeaderCell","TableFooterCell","StyledRow","TableComponent","React","size","corners","numberOfStickyColumns","scrollContainerCss","scrollContainerkey","rest","ref","tableComponent","TableStickyColumnsContainer","Table","TableBody","TableFooter","TableHeader","TableRow"],"mappings":"4eAaA,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,CAAC,GAAGC,MAAcC,MAAoBC,KAAoB,CACxD,OAAQ,KACR,QAAS,OACX,CACF,EACA,GAAI,CACF,CAAC,GAAGF,MAAcC,MAAoBC,KAAoB,CACxD,OAAQ,KACR,QAAS,OACX,CACF,EACA,GAAI,CACF,CAAC,GAAGF,MAAcC,MAAoBC,KAAoB,CACxD,OAAQ,KACR,QAAS,OACX,CACF,CACF,EACA,QAAS,CACP,MAAO,CACL,CAAC,GAAGD,KAAoB,CACtB,kBAAmB,CAAE,oBAAqB,IAAK,EAC/C,iBAAkB,CAAE,qBAAsB,IAAK,CACjD,EACA,CAAC,GAAGE,gBAAyB,CAC3B,CAAC,GAAGH,iBAA0B,CAAE,uBAAwB,IAAK,EAC7D,CAAC,GAAGA,gBAAyB,CAAE,wBAAyB,IAAK,CAC/D,CACF,EACA,OAAQ,CACV,CAAA,CACF,CACF,CAAC,EASKI,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,cAACP,EAAA,CAAY,IAAKc,EAAK,KAAMN,EAAM,QAASC,EAAU,GAAGI,CAAAA,CAAM,EAGjE,OAAIH,EAEAH,EAAA,cAACS,EAAA,CACC,IAAKJ,EACL,IAAKD,EACL,sBAAuBD,CAAAA,EAEtBK,CACH,EAIGA,CACT,CACF,EAEaE,EAAQ,OAAO,OAAOX,EAAgB,CACjD,KAAMY,EACN,KAAMhB,EACN,OAAQiB,EACR,WAAYf,EACZ,OAAQgB,EACR,WAAYjB,EACZ,IAAKkB,EACL,uBAAwBL,CAC1B,CAAC,EAEDV,EAAe,YAAc"}
+{"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"}

package/dist/components/table/TableBody.d.ts

@@ -25,6 +25,8 @@ declare const StyledTableBody: import("@atom-learning/stitches-react/types/style
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/table/TableBody.js

@@ -1,2 +1,2 @@
-import*as d from"react";import{styled as i}from"../../stitches.js";import{StyledRow as e}from"./TableRow.js";const s=i("tbody",{variants:{striped:{true:{[`${e}`]:{"&:nth-child(odd)":{bg:"white"},"&:nth-child(even)":{bg:"$grey100"}}},false:{[`${e}`]:{bg:"white"}}}}}),t=({striped:o=!0,...r})=>d.createElement(s,{striped:o,...r});t.displayName="TableBody";export{t as TableBody};
+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};
 //# 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\nimport { StyledRow } from './TableRow'\n\nconst StyledTableBody = styled('tbody', {\n  variants: {\n    striped: {\n      true: {\n        [`${StyledRow}`]: {\n          '&:nth-child(odd)': { bg: 'white' },\n          '&:nth-child(even)': { bg: '$grey100' }\n        }\n      },\n      false: {\n        [`${StyledRow}`]: {\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","StyledRow","TableBody","striped","rest","React"],"mappings":"6GAMA,MAAMA,EAAkBC,EAAO,QAAS,CACtC,SAAU,CACR,QAAS,CACP,KAAM,CACJ,CAAC,GAAGC,KAAc,CAChB,mBAAoB,CAAE,GAAI,OAAQ,EAClC,oBAAqB,CAAE,GAAI,UAAW,CACxC,CACF,EACA,MAAO,CACL,CAAC,GAAGA,KAAc,CAChB,GAAI,OACN,CACF,CACF,CACF,CACF,CAAC,EAIYC,EAAY,CAAC,CAAE,QAAAC,EAAU,MAASC,CAAK,IAClDC,EAAA,cAACN,EAAA,CAAgB,QAASI,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 '~/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"}

package/dist/components/table/TableCell.d.ts

@@ -22,6 +22,8 @@ export declare const TableCell: import("@atom-learning/stitches-react/types/styl
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/table/TableCell.js

@@ -1,2 +1,2 @@
-import{styled as l}from"../../stitches.js";const e=l("td",{borderBottom:"1px solid $grey200",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 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};
 //# 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  borderBottom: '1px solid $grey200',\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,aAAc,qBACd,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 '~/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"}

package/dist/components/table/TableFooter.d.ts

@@ -22,6 +22,8 @@ export declare const TableFooter: import("@atom-learning/stitches-react/types/st
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/table/TableFooterCell.d.ts

@@ -22,6 +22,8 @@ export declare const TableFooterCell: import("@atom-learning/stitches-react/type
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/table/TableHeader.d.ts

@@ -7,7 +7,7 @@ export declare const TABLE_HEADER_THEMES: {
     readonly WHITE: "white";
 };
 declare const StyledTableHeader: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<"thead", {
-    theme?: "light" | "primary" | "white" | "primaryDark" | "primaryLight" | undefined;
+    theme?: "white" | "light" | "primary" | "primaryDark" | "primaryLight" | undefined;
     isSticky?: boolean | "true" | undefined;
 }, {
     sm: string;
@@ -33,6 +33,8 @@ declare const StyledTableHeader: import("@atom-learning/stitches-react/types/sty
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/table/TableHeader.js

@@ -1,2 +1,2 @@
-import m from"react";import{styled as y}from"../../stitches.js";import{TableHeaderCell as e}from"./TableHeaderCell.js";const r={PRIMARY:"primary",PRIMARY_DARK:"primaryDark",PRIMARY_LIGHT:"primaryLight",LIGHT:"light",WHITE:"white"},p=y("thead",{variants:{theme:{[r.PRIMARY]:{[`${e}`]:{bg:"$primary800"}},[r.PRIMARY_DARK]:{[`${e}`]:{bg:"$primary1000"}},[r.PRIMARY_LIGHT]:{[`${e}`]:{bg:"$primary200",color:"$grey1000"}},[r.LIGHT]:{[`${e}`]:{bg:"$grey100",color:"$grey1000"}},[r.WHITE]:{[`${e}`]:{bg:"white",color:"$grey1000"}}},isSticky:{true:{position:"sticky",top:0,zIndex:3}}}}),t=({theme:i="primaryDark",isSticky:a=!1,...o})=>m.createElement(p,{theme:i,isSticky:a,...o});t.displayName="TableHeader";export{r as TABLE_HEADER_THEMES,t as TableHeader};
+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};
 //# 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\nimport { TableHeaderCell } from './TableHeaderCell'\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        [`${TableHeaderCell}`]: {\n          bg: '$primary800'\n        }\n      },\n      [TABLE_HEADER_THEMES.PRIMARY_DARK]: {\n        [`${TableHeaderCell}`]: {\n          bg: '$primary1000'\n        }\n      },\n      [TABLE_HEADER_THEMES.PRIMARY_LIGHT]: {\n        [`${TableHeaderCell}`]: {\n          bg: '$primary200',\n          color: '$grey1000'\n        }\n      },\n      [TABLE_HEADER_THEMES.LIGHT]: {\n        [`${TableHeaderCell}`]: {\n          bg: '$grey100',\n          color: '$grey1000'\n        }\n      },\n      [TABLE_HEADER_THEMES.WHITE]: {\n        [`${TableHeaderCell}`]: {\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","TableHeaderCell","TableHeader","theme","isSticky","rest","React"],"mappings":"uHAMa,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,CAAC,GAAGG,KAAoB,CACtB,GAAI,aACN,CACF,EACA,CAACH,EAAoB,cAAe,CAClC,CAAC,GAAGG,KAAoB,CACtB,GAAI,cACN,CACF,EACA,CAACH,EAAoB,eAAgB,CACnC,CAAC,GAAGG,KAAoB,CACtB,GAAI,cACJ,MAAO,WACT,CACF,EACA,CAACH,EAAoB,OAAQ,CAC3B,CAAC,GAAGG,KAAoB,CACtB,GAAI,WACJ,MAAO,WACT,CACF,EACA,CAACH,EAAoB,OAAQ,CAC3B,CAAC,GAAGG,KAAoB,CACtB,GAAI,QACJ,MAAO,WACT,CACF,CACF,EACA,SAAU,CACR,KAAM,CACJ,SAAU,SACV,IAAK,EACL,OAAQ,CACV,CACF,CACF,CACF,CAAC,EAIYC,EAAc,CAAC,CAC1B,MAAAC,EAAQ,cACR,SAAAC,EAAW,MACRC,CACL,IACSC,EAAA,cAACP,EAAA,CAAkB,MAAOI,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 '~/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"}

package/dist/components/table/TableHeaderCell.d.ts

@@ -22,6 +22,8 @@ export declare const TableHeaderCell: import("@atom-learning/stitches-react/type
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/table/TableHeaderCell.js

@@ -1,2 +1,2 @@
-import{styled as l}from"../../stitches.js";const e=l("th",{borderBottom:"1px solid $grey200",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 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};
 //# 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  borderBottom: '1px solid $grey200',\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,aAAc,qBACd,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 '~/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"}

package/dist/components/table/TableRow.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-export declare const StyledRow: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<"tr", {}, {
+declare const StyledRow: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<"tr", {}, {
     sm: string;
     md: string;
     lg: string;
@@ -23,6 +23,8 @@ export declare const StyledRow: import("@atom-learning/stitches-react/types/styl
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;
@@ -369,3 +371,4 @@ export declare const StyledRow: import("@atom-learning/stitches-react/types/styl
     };
 }>>;
 export declare const TableRow: React.ForwardRefExoticComponent<React.ComponentProps<typeof StyledRow>>;
+export {};

package/dist/components/table/TableRow.js

@@ -1,2 +1,2 @@
-import*as e from"react";import{styled as l}from"../../stitches.js";const o=l("tr",{bg:"unset"}),r=e.forwardRef((t,a)=>e.createElement(o,{...t,ref:a}));r.displayName="TableRow";export{o as StyledRow,r as TableRow};
+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};
 //# 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\nexport const 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,MAAAA,EAAYC,EAAO,KAAM,CACpC,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 '~/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"}

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

@@ -23,6 +23,8 @@ export declare const Tabs: import("@atom-learning/stitches-react/types/styled-co
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;
@@ -393,6 +395,8 @@ export declare const Tabs: import("@atom-learning/stitches-react/types/styled-co
                 textMinimal: string;
                 background: string;
                 backgroundAccent: string;
+                black: string;
+                white: string;
                 grey100: string;
                 grey200: string;
                 grey300: string;
@@ -767,6 +771,8 @@ export declare const Tabs: import("@atom-learning/stitches-react/types/styled-co
                 textMinimal: string;
                 background: string;
                 backgroundAccent: string;
+                black: string;
+                white: string;
                 grey100: string;
                 grey200: string;
                 grey300: string;
@@ -1139,6 +1145,8 @@ export declare const Tabs: import("@atom-learning/stitches-react/types/styled-co
             textMinimal: string;
             background: string;
             backgroundAccent: string;
+            black: string;
+            white: string;
             grey100: string;
             grey200: string;
             grey300: string;

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

@@ -22,6 +22,8 @@ export declare const TabsContent: import("@atom-learning/stitches-react/types/st
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

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

@@ -24,6 +24,8 @@ export declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<Omit<impo
             textMinimal: string;
             background: string;
             backgroundAccent: string;
+            black: string;
+            white: string;
             grey100: string;
             grey200: string;
             grey300: string;

package/dist/components/tabs/TabsTrigger.js

@@ -1,2 +1,2 @@
-import{Trigger as l}from"@radix-ui/react-tabs";import*as e from"react";import{styled as r}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{focusVisibleStyleBlock as s}from"../../utilities/style/focus-visible-style-block.js";import"../../utilities/style/keyframe-animations.js";import{disabledStyle as c}from"../../utilities/style/disabledStyle.js";import{Text as m}from"../text/Text.js";const o=r("div",{position:"absolute",inset:0,height:"calc(100% + 2px)",opacity:0,bg:"$interactive1"}),p=r(l,{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]":c,"&:not([disabled])":{"&:hover, &:focus-visible":{color:"$interactive2",[`& ${o}`]:{opacity:.07}},"&:active":{color:"$interactive3"},"&:focus-visible":{...s()}}}),t=e.forwardRef(({children:i,...a},n)=>e.createElement(p,{...a,ref:n},e.createElement(m,{size:"sm",as:"span"},i),e.createElement(o,null)));t.displayName="TabsTrigger";export{t as TabsTrigger};
+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};
 //# 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'\nimport { disabledStyle, focusVisibleStyleBlock } from '~/utilities'\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]': disabledStyle,\n  '&:not([disabled])': {\n    '&:hover, &:focus-visible': {\n      color: '$interactive2',\n      [`& ${StyledTabsTriggerHoverBackground}`]: {\n        opacity: 0.07\n      }\n    },\n    '&:active': {\n      color: '$interactive3'\n    },\n    '&:focus-visible': {\n      ...focusVisibleStyleBlock()\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","disabledStyle","focusVisibleStyleBlock","TabsTrigger","React","children","rest","ref","Text"],"mappings":"ofAQA,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,cAAeC,EACf,oBAAqB,CACnB,2BAA4B,CAC1B,MAAO,gBACP,CAAC,KAAKJ,KAAqC,CACzC,QAAS,GACX,CACF,EACA,WAAY,CACV,MAAO,eACT,EACA,kBAAmB,CACjB,GAAGK,GACL,CACF,CACF,CAAC,EAEYC,EAAcC,EAAM,WAG/B,CAAC,CAAE,SAAAC,KAAaC,CAAK,EAAGC,IACxBH,EAAA,cAACL,EAAA,CAAmB,GAAGO,EAAM,IAAKC,GAChCH,EAAA,cAACI,EAAA,CAAK,KAAK,KAAK,GAAG,MAAA,EAChBH,CACH,EACAD,EAAA,cAACP,EAAA,IAAiC,CACpC,CACD,EAEDM,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 '~/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"}

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

@@ -24,6 +24,8 @@ declare const StyledTriggerList: import("@atom-learning/stitches-react/types/sty
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/text/Text.d.ts

@@ -65,6 +65,8 @@ export declare const StyledText: import("@atom-learning/stitches-react/types/sty
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/text/Text.js

@@ -1,2 +1,2 @@
-import*as n from"react";import{styled as f}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import{capsize as e}from"../../utilities/style/capsize.js";import"color2k";import"../../utilities/style/keyframe-animations.js";const i={size:{xs:{fontSize:"$xs",lineHeight:1.6,...e(.4364)},sm:{fontSize:"$sm",lineHeight:1.53,...e(.4056)},md:{fontSize:"$md",lineHeight:1.5,...e(.3864)},lg:{fontSize:"$lg",lineHeight:1.52,...e(.3983)},xl:{fontSize:"$xl",lineHeight:1.42,...e(.3506)}},noCapsize:{true:{"&::before, &::after":{display:"none !important"}}}},s=({size:t,noCapsize:o})=>({...i.size[t],...i.noCapsize[`${o}`]}),a=f("p",{m:0,"& > &":{"&:before, &:after":{display:"none"}},variants:{...i,weight:{normal:{fontWeight:400},bold:{fontWeight:600}},family:{body:{fontFamily:"$body"},display:{fontFamily:"$display"},mono:{fontFamily:"$mono"}}}}),m=n.forwardRef(({size:t="md",family:o="body",...l},r)=>n.createElement(a,{size:t,family:o,...l,ref:r}));m.displayName="Text";export{a as StyledText,m as Text,s as getTextVariant,i as textVariants};
+import*as n from"react";import{styled as f}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import{capsize as e}from"../../utilities/style/capsize.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";const i={size:{xs:{fontSize:"$xs",lineHeight:1.6,...e(.4364)},sm:{fontSize:"$sm",lineHeight:1.53,...e(.4056)},md:{fontSize:"$md",lineHeight:1.5,...e(.3864)},lg:{fontSize:"$lg",lineHeight:1.52,...e(.3983)},xl:{fontSize:"$xl",lineHeight:1.42,...e(.3506)}},noCapsize:{true:{"&::before, &::after":{display:"none !important"}}}},s=({size:t,noCapsize:o})=>({...i.size[t],...i.noCapsize[`${o}`]}),a=f("p",{m:0,"& > &":{"&:before, &:after":{display:"none"}},variants:{...i,weight:{normal:{fontWeight:400},bold:{fontWeight:600}},family:{body:{fontFamily:"$body"},display:{fontFamily:"$display"},mono:{fontFamily:"$mono"}}}}),m=n.forwardRef(({size:t="md",family:o="body",...l},r)=>n.createElement(a,{size:t,family:o,...l,ref:r}));m.displayName="Text";export{a as StyledText,m as Text,s as getTextVariant,i as textVariants};
 //# sourceMappingURL=Text.js.map