@atom-learning/components 4.0.0-beta.7 → 4.0.0-beta.9

package/dist/components/carousel/Carousel.d.ts

@@ -229,26 +229,11 @@ export declare const Carousel: {
             marsh1000: any;
             marsh1100: any;
             marsh1200: any;
-            tonal50: any;
-            tonal100: any;
-            tonal200: any;
-            tonal300: any;
-            tonal400: any;
-            tonal500: any;
-            tonal600: any;
             alpha100: any;
             alpha150: any;
             alpha200: any;
             alpha250: any;
             alpha600: any;
-            brandRed: any;
-            brandRedAccent: any;
-            brandGreen: any;
-            brandGreenAccent: any;
-            brandPurple: any;
-            brandPurpleAccent: any;
-            brandYellow: any;
-            brandYellowAccent: any;
             infoLight: any;
             info: any;
             infoMid: any;
@@ -609,26 +594,11 @@ export declare const Carousel: {
                 marsh1000: any;
                 marsh1100: any;
                 marsh1200: any;
-                tonal50: any;
-                tonal100: any;
-                tonal200: any;
-                tonal300: any;
-                tonal400: any;
-                tonal500: any;
-                tonal600: any;
                 alpha100: any;
                 alpha150: any;
                 alpha200: any;
                 alpha250: any;
                 alpha600: any;
-                brandRed: any;
-                brandRedAccent: any;
-                brandGreen: any;
-                brandGreenAccent: any;
-                brandPurple: any;
-                brandPurpleAccent: any;
-                brandYellow: any;
-                brandYellowAccent: any;
                 infoLight: any;
                 info: any;
                 infoMid: any;
@@ -991,26 +961,11 @@ export declare const Carousel: {
                 marsh1000: any;
                 marsh1100: any;
                 marsh1200: any;
-                tonal50: any;
-                tonal100: any;
-                tonal200: any;
-                tonal300: any;
-                tonal400: any;
-                tonal500: any;
-                tonal600: any;
                 alpha100: any;
                 alpha150: any;
                 alpha200: any;
                 alpha250: any;
                 alpha600: any;
-                brandRed: any;
-                brandRedAccent: any;
-                brandGreen: any;
-                brandGreenAccent: any;
-                brandPurple: any;
-                brandPurpleAccent: any;
-                brandYellow: any;
-                brandYellowAccent: any;
                 infoLight: any;
                 info: any;
                 infoMid: any;
@@ -1375,26 +1330,11 @@ export declare const Carousel: {
             marsh1000: any;
             marsh1100: any;
             marsh1200: any;
-            tonal50: any;
-            tonal100: any;
-            tonal200: any;
-            tonal300: any;
-            tonal400: any;
-            tonal500: any;
-            tonal600: any;
             alpha100: any;
             alpha150: any;
             alpha200: any;
             alpha250: any;
             alpha600: any;
-            brandRed: any;
-            brandRedAccent: any;
-            brandGreen: any;
-            brandGreenAccent: any;
-            brandPurple: any;
-            brandPurpleAccent: any;
-            brandYellow: any;
-            brandYellowAccent: any;
             infoLight: any;
             info: any;
             infoMid: any;

package/dist/components/carousel/CarouselArrows.js

@@ -1,2 +1,2 @@
-import{ChevronLeft as s,ChevronRight as i}from"@atom-learning/icons";import{ButtonBack as a,ButtonNext as m}from"pure-react-carousel";import*as r from"react";import{Icon as t}from"../icon/Icon.js";import{styled as o}from"../../stitches.js";const n={alignItems:"center",bg:"unset",border:"unset",color:"$primary800",cursor:"pointer",display:"flex",justifyContent:"center",p:"unset",size:"$5",top:"50%",transform:"translateY(-50%)",transition:"color 0.15s ease-in-out","&:hover":{color:"$primary900"},"&:active":{color:"$primary1000"},"&:disabled":{color:"$tonal100"}},c=o(a,n),l=o(m,n),p=e=>r.createElement(c,{...e},r.createElement(t,{is:s})),u=e=>r.createElement(l,{...e},r.createElement(t,{is:i}));export{u as CarouselArrowNext,p as CarouselArrowPrevious};
+import{ChevronLeft as s,ChevronRight as i}from"@atom-learning/icons";import{ButtonBack as a,ButtonNext as m}from"pure-react-carousel";import*as r from"react";import{Icon as t}from"../icon/Icon.js";import{styled as o}from"../../stitches.js";const n={alignItems:"center",bg:"unset",border:"unset",color:"$primary800",cursor:"pointer",display:"flex",justifyContent:"center",p:"unset",size:"$5",top:"50%",transform:"translateY(-50%)",transition:"color 0.15s ease-in-out","&:hover":{color:"$primary900"},"&:active":{color:"$primary1000"},"&:disabled":{color:"$grey200"}},l=o(a,n),c=o(m,n),p=e=>r.createElement(l,{...e},r.createElement(t,{is:s})),u=e=>r.createElement(c,{...e},r.createElement(t,{is:i}));export{u as CarouselArrowNext,p as CarouselArrowPrevious};
 //# sourceMappingURL=CarouselArrows.js.map

package/dist/components/carousel/CarouselArrows.js.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselArrows.js","sources":["../../../src/components/carousel/CarouselArrows.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@atom-learning/icons'\nimport {\n  ButtonBack as BaseButtonBack,\n  ButtonNext as BaseButtonNext\n} from 'pure-react-carousel'\nimport * as React from 'react'\n\nimport { Icon } from '~/components/icon'\nimport { CSS, styled } from '~/stitches'\n\nconst buttonStyles = {\n  alignItems: 'center',\n  bg: 'unset',\n  border: 'unset',\n  color: '$primary800',\n  cursor: 'pointer',\n  display: 'flex',\n  justifyContent: 'center',\n  p: 'unset',\n  size: '$5',\n  top: '50%',\n  transform: 'translateY(-50%)',\n  transition: 'color 0.15s ease-in-out',\n  '&:hover': {\n    color: '$primary900'\n  },\n  '&:active': {\n    color: '$primary1000'\n  },\n  '&:disabled': {\n    color: '$tonal100'\n  }\n}\n\nconst StyledButtonBack = styled(BaseButtonBack, buttonStyles)\n\nconst StyledButtonNext = styled(BaseButtonNext, buttonStyles)\n\nexport const CarouselArrowPrevious = (props: { css: CSS }) => (\n  <StyledButtonBack {...props}>\n    <Icon is={ChevronLeft} />\n  </StyledButtonBack>\n)\nexport const CarouselArrowNext = (props: { css: CSS }) => (\n  <StyledButtonNext {...props}>\n    <Icon is={ChevronRight} />\n  </StyledButtonNext>\n)\n"],"names":["buttonStyles","StyledButtonBack","styled","BaseButtonBack","StyledButtonNext","BaseButtonNext","CarouselArrowPrevious","props","React","Icon","ChevronLeft","CarouselArrowNext","ChevronRight"],"mappings":"gPAUA,MAAMA,EAAe,CACnB,WAAY,SACZ,GAAI,QACJ,OAAQ,QACR,MAAO,cACP,OAAQ,UACR,QAAS,OACT,eAAgB,SAChB,EAAG,QACH,KAAM,KACN,IAAK,MACL,UAAW,mBACX,WAAY,0BACZ,UAAW,CACT,MAAO,aACT,EACA,WAAY,CACV,MAAO,cACT,EACA,aAAc,CACZ,MAAO,WACT,CACF,EAEMC,EAAmBC,EAAOC,EAAgBH,CAAY,EAEtDI,EAAmBF,EAAOG,EAAgBL,CAAY,EAE/CM,EAAyBC,GACpCC,EAAA,cAACP,EAAA,CAAkB,GAAGM,CACpBC,EAAAA,EAAA,cAACC,EAAA,CAAK,GAAIC,CAAAA,CAAa,CACzB,EAEWC,EAAqBJ,GAChCC,EAAA,cAACJ,EAAA,CAAkB,GAAGG,CACpBC,EAAAA,EAAA,cAACC,EAAA,CAAK,GAAIG,CAAAA,CAAc,CAC1B"}
+{"version":3,"file":"CarouselArrows.js","sources":["../../../src/components/carousel/CarouselArrows.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@atom-learning/icons'\nimport {\n  ButtonBack as BaseButtonBack,\n  ButtonNext as BaseButtonNext\n} from 'pure-react-carousel'\nimport * as React from 'react'\n\nimport { Icon } from '~/components/icon'\nimport { CSS, styled } from '~/stitches'\n\nconst buttonStyles = {\n  alignItems: 'center',\n  bg: 'unset',\n  border: 'unset',\n  color: '$primary800',\n  cursor: 'pointer',\n  display: 'flex',\n  justifyContent: 'center',\n  p: 'unset',\n  size: '$5',\n  top: '50%',\n  transform: 'translateY(-50%)',\n  transition: 'color 0.15s ease-in-out',\n  '&:hover': {\n    color: '$primary900'\n  },\n  '&:active': {\n    color: '$primary1000'\n  },\n  '&:disabled': {\n    color: '$grey200'\n  }\n}\n\nconst StyledButtonBack = styled(BaseButtonBack, buttonStyles)\n\nconst StyledButtonNext = styled(BaseButtonNext, buttonStyles)\n\nexport const CarouselArrowPrevious = (props: { css: CSS }) => (\n  <StyledButtonBack {...props}>\n    <Icon is={ChevronLeft} />\n  </StyledButtonBack>\n)\nexport const CarouselArrowNext = (props: { css: CSS }) => (\n  <StyledButtonNext {...props}>\n    <Icon is={ChevronRight} />\n  </StyledButtonNext>\n)\n"],"names":["buttonStyles","StyledButtonBack","styled","BaseButtonBack","StyledButtonNext","BaseButtonNext","CarouselArrowPrevious","props","React","Icon","ChevronLeft","CarouselArrowNext","ChevronRight"],"mappings":"gPAUA,MAAMA,EAAe,CACnB,WAAY,SACZ,GAAI,QACJ,OAAQ,QACR,MAAO,cACP,OAAQ,UACR,QAAS,OACT,eAAgB,SAChB,EAAG,QACH,KAAM,KACN,IAAK,MACL,UAAW,mBACX,WAAY,0BACZ,UAAW,CACT,MAAO,aACT,EACA,WAAY,CACV,MAAO,cACT,EACA,aAAc,CACZ,MAAO,UACT,CACF,EAEMC,EAAmBC,EAAOC,EAAgBH,CAAY,EAEtDI,EAAmBF,EAAOG,EAAgBL,CAAY,EAE/CM,EAAyBC,GACpCC,EAAA,cAACP,EAAA,CAAkB,GAAGM,CACpBC,EAAAA,EAAA,cAACC,EAAA,CAAK,GAAIC,CAAAA,CAAa,CACzB,EAEWC,EAAqBJ,GAChCC,EAAA,cAACJ,EAAA,CAAkB,GAAGG,CACpBC,EAAAA,EAAA,cAACC,EAAA,CAAK,GAAIG,CAAAA,CAAc,CAC1B"}

package/dist/components/carousel/CarouselPagination.d.ts

@@ -203,26 +203,11 @@ export declare const CarouselPagination: import("@atom-learning/stitches-react/t
         marsh1000: any;
         marsh1100: any;
         marsh1200: any;
-        tonal50: any;
-        tonal100: any;
-        tonal200: any;
-        tonal300: any;
-        tonal400: any;
-        tonal500: any;
-        tonal600: any;
         alpha100: any;
         alpha150: any;
         alpha200: any;
         alpha250: any;
         alpha600: any;
-        brandRed: any;
-        brandRedAccent: any;
-        brandGreen: any;
-        brandGreenAccent: any;
-        brandPurple: any;
-        brandPurpleAccent: any;
-        brandYellow: any;
-        brandYellowAccent: any;
         infoLight: any;
         info: any;
         infoMid: any;

package/dist/components/carousel/CarouselPagination.js

@@ -1,2 +1,2 @@
-import{DotGroup as o}from"pure-react-carousel";import{styled as r}from"../../stitches.js";const e=r(o,{justifyContent:"center","& button":{bg:"$tonal200",border:"none",borderRadius:"50%",cursor:"pointer",mx:"$1",p:"$1",size:"$space$3",transition:"all 100ms ease-in",'&[class*="selected"]':{bg:"$primary800"},"&:hover, &:focus":{bg:"$primary900"}}});export{e as CarouselPagination};
+import{DotGroup as r}from"pure-react-carousel";import{styled as o}from"../../stitches.js";const e=o(r,{justifyContent:"center","& button":{bg:"$grey600",border:"none",borderRadius:"50%",cursor:"pointer",mx:"$1",p:"$1",size:"$space$3",transition:"all 100ms ease-in",'&[class*="selected"]':{bg:"$primary800"},"&:hover, &:focus":{bg:"$primary900"}}});export{e as CarouselPagination};
 //# sourceMappingURL=CarouselPagination.js.map

package/dist/components/carousel/CarouselPagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselPagination.js","sources":["../../../src/components/carousel/CarouselPagination.tsx"],"sourcesContent":["import { DotGroup } from 'pure-react-carousel'\n\nimport { styled } from '~/stitches'\n\nexport const CarouselPagination = styled(DotGroup, {\n  justifyContent: 'center',\n  '& button': {\n    bg: '$tonal200',\n    border: 'none',\n    borderRadius: '50%',\n    cursor: 'pointer',\n    mx: '$1',\n    p: '$1',\n    size: '$space$3',\n    transition: 'all 100ms ease-in',\n    '&[class*=\"selected\"]': {\n      bg: '$primary800'\n    },\n    '&:hover, &:focus': {\n      bg: '$primary900'\n    }\n  }\n})\n"],"names":["CarouselPagination","styled","DotGroup"],"mappings":"0FAIa,MAAAA,EAAqBC,EAAOC,EAAU,CACjD,eAAgB,SAChB,WAAY,CACV,GAAI,YACJ,OAAQ,OACR,aAAc,MACd,OAAQ,UACR,GAAI,KACJ,EAAG,KACH,KAAM,WACN,WAAY,oBACZ,uBAAwB,CACtB,GAAI,aACN,EACA,mBAAoB,CAClB,GAAI,aACN,CACF,CACF,CAAC"}
+{"version":3,"file":"CarouselPagination.js","sources":["../../../src/components/carousel/CarouselPagination.tsx"],"sourcesContent":["import { DotGroup } from 'pure-react-carousel'\n\nimport { styled } from '~/stitches'\n\nexport const CarouselPagination = styled(DotGroup, {\n  justifyContent: 'center',\n  '& button': {\n    bg: '$grey600',\n    border: 'none',\n    borderRadius: '50%',\n    cursor: 'pointer',\n    mx: '$1',\n    p: '$1',\n    size: '$space$3',\n    transition: 'all 100ms ease-in',\n    '&[class*=\"selected\"]': {\n      bg: '$primary800'\n    },\n    '&:hover, &:focus': {\n      bg: '$primary900'\n    }\n  }\n})\n"],"names":["CarouselPagination","styled","DotGroup"],"mappings":"0FAIa,MAAAA,EAAqBC,EAAOC,EAAU,CACjD,eAAgB,SAChB,WAAY,CACV,GAAI,WACJ,OAAQ,OACR,aAAc,MACd,OAAQ,UACR,GAAI,KACJ,EAAG,KACH,KAAM,WACN,WAAY,oBACZ,uBAAwB,CACtB,GAAI,aACN,EACA,mBAAoB,CAClB,GAAI,aACN,CACF,CACF,CAAC"}

package/dist/components/carousel/CarouselSlide.d.ts

@@ -203,26 +203,11 @@ declare const StyledSlide: import("@atom-learning/stitches-react/types/styled-co
         marsh1000: any;
         marsh1100: any;
         marsh1200: any;
-        tonal50: any;
-        tonal100: any;
-        tonal200: any;
-        tonal300: any;
-        tonal400: any;
-        tonal500: any;
-        tonal600: any;
         alpha100: any;
         alpha150: any;
         alpha200: any;
         alpha250: any;
         alpha600: any;
-        brandRed: any;
-        brandRedAccent: any;
-        brandGreen: any;
-        brandGreenAccent: any;
-        brandPurple: any;
-        brandPurpleAccent: any;
-        brandYellow: any;
-        brandYellowAccent: any;
         infoLight: any;
         info: any;
         infoMid: any;

package/dist/components/carousel/CarouselSlider.d.ts

@@ -205,26 +205,11 @@ export declare const CarouselSlider: import("@atom-learning/stitches-react/types
         marsh1000: any;
         marsh1100: any;
         marsh1200: any;
-        tonal50: any;
-        tonal100: any;
-        tonal200: any;
-        tonal300: any;
-        tonal400: any;
-        tonal500: any;
-        tonal600: any;
         alpha100: any;
         alpha150: any;
         alpha200: any;
         alpha250: any;
         alpha600: any;
-        brandRed: any;
-        brandRedAccent: any;
-        brandGreen: any;
-        brandGreenAccent: any;
-        brandPurple: any;
-        brandPurpleAccent: any;
-        brandYellow: any;
-        brandYellowAccent: any;
         infoLight: any;
         info: any;
         infoMid: any;

package/dist/components/checkbox/Checkbox.d.ts

@@ -207,26 +207,11 @@ declare const StyledCheckbox: import("@atom-learning/stitches-react/types/styled
         marsh1000: any;
         marsh1100: any;
         marsh1200: any;
-        tonal50: any;
-        tonal100: any;
-        tonal200: any;
-        tonal300: any;
-        tonal400: any;
-        tonal500: any;
-        tonal600: any;
         alpha100: any;
         alpha150: any;
         alpha200: any;
         alpha250: any;
         alpha600: any;
-        brandRed: any;
-        brandRedAccent: any;
-        brandGreen: any;
-        brandGreenAccent: any;
-        brandPurple: any;
-        brandPurpleAccent: any;
-        brandYellow: any;
-        brandYellowAccent: any;
         infoLight: any;
         info: any;
         infoMid: any;

package/dist/components/checkbox/Checkbox.js

@@ -1,2 +1,2 @@
-import{Minus as d,Ok as p}from"@atom-learning/icons";import*as t from"@radix-ui/react-checkbox";import*as e from"react";import{styled as i}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{overrideStitchesVariantValue as c}from"../../utilities/override-stitches-variant-value/overrideStitchesVariantValue.js";import{disabledStyle as f}from"../../utilities/style/disabledStyle.js";import{Icon as u}from"../icon/Icon.js";const b=i(t.Indicator,{position:"absolute",top:"50%",left:"50%",transform:"translateX(-50%) translateY(-50%)"}),k=i(t.Root,{appearance:"none",position:"relative",backgroundColor:"transparent",border:"1px solid $colors$tonal400",borderRadius:"3px",color:"white",cursor:"pointer",size:"$1",p:0,display:"flex",alignItems:"center",justifyContent:"center",transition:"all 50ms ease-out",flexShrink:0,'&[data-state="checked"]':{backgroundColor:"$primary800",borderColor:"$primary800"},'&[data-state="indeterminate"]':{backgroundColor:"$primary800",borderColor:"$primary800"},"&:focus":{outline:"2px solid $primary800",outlineOffset:"1px"},"&[disabled]":f,variants:{state:{error:{borderColor:"$danger"}},size:{md:{size:"$1"},lg:{size:"$2",mt:"-$1"}}}}),y={md:"sm",lg:"md"},a=e.forwardRef(({size:r="md",checked:o,...s},n)=>{const m=e.useMemo(()=>c(r,l=>y[l]),[r]);return e.createElement(k,{ref:n,checked:o,size:r,...s},e.createElement(b,{asChild:!0},e.createElement(u,{is:o==="indeterminate"?d:p,css:{strokeWidth:"3"},size:m})))});a.displayName="Checkbox";export{a as Checkbox};
+import{Minus as l,Ok as p}from"@atom-learning/icons";import*as t from"@radix-ui/react-checkbox";import*as e from"react";import{styled as i}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{overrideStitchesVariantValue as c}from"../../utilities/override-stitches-variant-value/overrideStitchesVariantValue.js";import{disabledStyle as f}from"../../utilities/style/disabledStyle.js";import{Icon as u}from"../icon/Icon.js";const b=i(t.Indicator,{position:"absolute",top:"50%",left:"50%",transform:"translateX(-50%) translateY(-50%)"}),y=i(t.Root,{appearance:"none",position:"relative",backgroundColor:"transparent",border:"1px solid $colors$grey800",borderRadius:"3px",color:"white",cursor:"pointer",size:"$1",p:0,display:"flex",alignItems:"center",justifyContent:"center",transition:"all 50ms ease-out",flexShrink:0,'&[data-state="checked"]':{backgroundColor:"$primary800",borderColor:"$primary800"},'&[data-state="indeterminate"]':{backgroundColor:"$primary800",borderColor:"$primary800"},"&:focus":{outline:"2px solid $primary800",outlineOffset:"1px"},"&[disabled]":f,variants:{state:{error:{borderColor:"$danger"}},size:{md:{size:"$1"},lg:{size:"$2",mt:"-$1"}}}}),k={md:"sm",lg:"md"},a=e.forwardRef(({size:r="md",checked:o,...s},n)=>{const m=e.useMemo(()=>c(r,d=>k[d]),[r]);return e.createElement(y,{ref:n,checked:o,size:r,...s},e.createElement(b,{asChild:!0},e.createElement(u,{is:o==="indeterminate"?l:p,css:{strokeWidth:"3"},size:m})))});a.displayName="Checkbox";export{a as Checkbox};
 //# sourceMappingURL=Checkbox.js.map

package/dist/components/checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import { Minus, Ok } from '@atom-learning/icons'\nimport * as RadixCheckbox from '@radix-ui/react-checkbox'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { disabledStyle } from '~/utilities'\nimport { overrideStitchesVariantValue } from '~/utilities/override-stitches-variant-value/overrideStitchesVariantValue'\n\nimport { Icon } from '../icon'\n\nconst StyledIndicator = styled(RadixCheckbox.Indicator, {\n  position: 'absolute',\n  top: '50%',\n  left: '50%',\n  transform: 'translateX(-50%) translateY(-50%)'\n})\n\nconst StyledCheckbox = styled(RadixCheckbox.Root, {\n  appearance: 'none',\n  position: 'relative',\n  backgroundColor: 'transparent',\n  border: '1px solid $colors$tonal400',\n  borderRadius: '3px',\n  color: 'white',\n  cursor: 'pointer',\n  size: '$1',\n  p: 0,\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  transition: 'all 50ms ease-out',\n  flexShrink: 0,\n  '&[data-state=\"checked\"]': {\n    backgroundColor: '$primary800',\n    borderColor: '$primary800'\n  },\n  '&[data-state=\"indeterminate\"]': {\n    backgroundColor: '$primary800',\n    borderColor: '$primary800'\n  },\n  '&:focus': {\n    outline: '2px solid $primary800',\n    outlineOffset: '1px'\n  },\n  '&[disabled]': disabledStyle,\n  variants: {\n    state: {\n      error: {\n        borderColor: '$danger'\n      }\n    },\n    size: {\n      md: {\n        size: '$1'\n      },\n      lg: {\n        size: '$2',\n        mt: '-$1'\n      }\n    }\n  }\n})\n\nconst toIconSize = {\n  md: 'sm',\n  lg: 'md'\n}\n\nexport const Checkbox: React.ForwardRefExoticComponent<\n  React.ComponentProps<typeof StyledCheckbox>\n> = React.forwardRef(({ size = 'md', checked, ...rest }, ref) => {\n  const iconSize = React.useMemo(\n    () => overrideStitchesVariantValue(size, (s) => toIconSize[s]),\n    [size]\n  )\n\n  return (\n    <StyledCheckbox ref={ref} checked={checked} size={size} {...rest}>\n      <StyledIndicator asChild>\n        <Icon\n          is={checked === 'indeterminate' ? Minus : Ok}\n          css={{\n            strokeWidth: '3'\n          }}\n          size={iconSize}\n        />\n      </StyledIndicator>\n    </StyledCheckbox>\n  )\n})\n\nCheckbox.displayName = 'Checkbox'\n"],"names":["StyledIndicator","styled","RadixCheckbox","StyledCheckbox","disabledStyle","toIconSize","Checkbox","React","size","checked","rest","ref","iconSize","overrideStitchesVariantValue","s","Icon","Minus","Ok"],"mappings":"wkBAUA,MAAMA,EAAkBC,EAAOC,EAAc,UAAW,CACtD,SAAU,WACV,IAAK,MACL,KAAM,MACN,UAAW,mCACb,CAAC,EAEKC,EAAiBF,EAAOC,EAAc,KAAM,CAChD,WAAY,OACZ,SAAU,WACV,gBAAiB,cACjB,OAAQ,6BACR,aAAc,MACd,MAAO,QACP,OAAQ,UACR,KAAM,KACN,EAAG,EACH,QAAS,OACT,WAAY,SACZ,eAAgB,SAChB,WAAY,oBACZ,WAAY,EACZ,0BAA2B,CACzB,gBAAiB,cACjB,YAAa,aACf,EACA,gCAAiC,CAC/B,gBAAiB,cACjB,YAAa,aACf,EACA,UAAW,CACT,QAAS,wBACT,cAAe,KACjB,EACA,cAAeE,EACf,SAAU,CACR,MAAO,CACL,MAAO,CACL,YAAa,SACf,CACF,EACA,KAAM,CACJ,GAAI,CACF,KAAM,IACR,EACA,GAAI,CACF,KAAM,KACN,GAAI,KACN,CACF,CACF,CACF,CAAC,EAEKC,EAAa,CACjB,GAAI,KACJ,GAAI,IACN,EAEaC,EAETC,EAAM,WAAW,CAAC,CAAE,KAAAC,EAAO,KAAM,QAAAC,KAAYC,CAAK,EAAGC,IAAQ,CAC/D,MAAMC,EAAWL,EAAM,QACrB,IAAMM,EAA6BL,EAAOM,GAAMT,EAAWS,EAAE,EAC7D,CAACN,CAAI,CACP,EAEA,OACED,EAAA,cAACJ,EAAA,CAAe,IAAKQ,EAAK,QAASF,EAAS,KAAMD,EAAO,GAAGE,CAC1DH,EAAAA,EAAA,cAACP,EAAA,CAAgB,QAAO,EAAA,EACtBO,EAAA,cAACQ,EAAA,CACC,GAAIN,IAAY,gBAAkBO,EAAQC,EAC1C,IAAK,CACH,YAAa,GACf,EACA,KAAML,CACR,CAAA,CACF,CACF,CAEJ,CAAC,EAEDN,EAAS,YAAc"}
+{"version":3,"file":"Checkbox.js","sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import { Minus, Ok } from '@atom-learning/icons'\nimport * as RadixCheckbox from '@radix-ui/react-checkbox'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { disabledStyle } from '~/utilities'\nimport { overrideStitchesVariantValue } from '~/utilities/override-stitches-variant-value/overrideStitchesVariantValue'\n\nimport { Icon } from '../icon'\n\nconst StyledIndicator = styled(RadixCheckbox.Indicator, {\n  position: 'absolute',\n  top: '50%',\n  left: '50%',\n  transform: 'translateX(-50%) translateY(-50%)'\n})\n\nconst StyledCheckbox = styled(RadixCheckbox.Root, {\n  appearance: 'none',\n  position: 'relative',\n  backgroundColor: 'transparent',\n  border: '1px solid $colors$grey800',\n  borderRadius: '3px',\n  color: 'white',\n  cursor: 'pointer',\n  size: '$1',\n  p: 0,\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  transition: 'all 50ms ease-out',\n  flexShrink: 0,\n  '&[data-state=\"checked\"]': {\n    backgroundColor: '$primary800',\n    borderColor: '$primary800'\n  },\n  '&[data-state=\"indeterminate\"]': {\n    backgroundColor: '$primary800',\n    borderColor: '$primary800'\n  },\n  '&:focus': {\n    outline: '2px solid $primary800',\n    outlineOffset: '1px'\n  },\n  '&[disabled]': disabledStyle,\n  variants: {\n    state: {\n      error: {\n        borderColor: '$danger'\n      }\n    },\n    size: {\n      md: {\n        size: '$1'\n      },\n      lg: {\n        size: '$2',\n        mt: '-$1'\n      }\n    }\n  }\n})\n\nconst toIconSize = {\n  md: 'sm',\n  lg: 'md'\n}\n\nexport const Checkbox: React.ForwardRefExoticComponent<\n  React.ComponentProps<typeof StyledCheckbox>\n> = React.forwardRef(({ size = 'md', checked, ...rest }, ref) => {\n  const iconSize = React.useMemo(\n    () => overrideStitchesVariantValue(size, (s) => toIconSize[s]),\n    [size]\n  )\n\n  return (\n    <StyledCheckbox ref={ref} checked={checked} size={size} {...rest}>\n      <StyledIndicator asChild>\n        <Icon\n          is={checked === 'indeterminate' ? Minus : Ok}\n          css={{\n            strokeWidth: '3'\n          }}\n          size={iconSize}\n        />\n      </StyledIndicator>\n    </StyledCheckbox>\n  )\n})\n\nCheckbox.displayName = 'Checkbox'\n"],"names":["StyledIndicator","styled","RadixCheckbox","StyledCheckbox","disabledStyle","toIconSize","Checkbox","React","size","checked","rest","ref","iconSize","overrideStitchesVariantValue","s","Icon","Minus","Ok"],"mappings":"wkBAUA,MAAMA,EAAkBC,EAAOC,EAAc,UAAW,CACtD,SAAU,WACV,IAAK,MACL,KAAM,MACN,UAAW,mCACb,CAAC,EAEKC,EAAiBF,EAAOC,EAAc,KAAM,CAChD,WAAY,OACZ,SAAU,WACV,gBAAiB,cACjB,OAAQ,4BACR,aAAc,MACd,MAAO,QACP,OAAQ,UACR,KAAM,KACN,EAAG,EACH,QAAS,OACT,WAAY,SACZ,eAAgB,SAChB,WAAY,oBACZ,WAAY,EACZ,0BAA2B,CACzB,gBAAiB,cACjB,YAAa,aACf,EACA,gCAAiC,CAC/B,gBAAiB,cACjB,YAAa,aACf,EACA,UAAW,CACT,QAAS,wBACT,cAAe,KACjB,EACA,cAAeE,EACf,SAAU,CACR,MAAO,CACL,MAAO,CACL,YAAa,SACf,CACF,EACA,KAAM,CACJ,GAAI,CACF,KAAM,IACR,EACA,GAAI,CACF,KAAM,KACN,GAAI,KACN,CACF,CACF,CACF,CAAC,EAEKC,EAAa,CACjB,GAAI,KACJ,GAAI,IACN,EAEaC,EAETC,EAAM,WAAW,CAAC,CAAE,KAAAC,EAAO,KAAM,QAAAC,KAAYC,CAAK,EAAGC,IAAQ,CAC/D,MAAMC,EAAWL,EAAM,QACrB,IAAMM,EAA6BL,EAAOM,GAAMT,EAAWS,EAAE,EAC7D,CAACN,CAAI,CACP,EAEA,OACED,EAAA,cAACJ,EAAA,CAAe,IAAKQ,EAAK,QAASF,EAAS,KAAMD,EAAO,GAAGE,CAC1DH,EAAAA,EAAA,cAACP,EAAA,CAAgB,QAAO,EAAA,EACtBO,EAAA,cAACQ,EAAA,CACC,GAAIN,IAAY,gBAAkBO,EAAQC,EAC1C,IAAK,CACH,YAAa,GACf,EACA,KAAML,CACR,CAAA,CACF,CACF,CAEJ,CAAC,EAEDN,EAAS,YAAc"}

package/dist/components/checkbox-group/CheckboxGroup.d.ts

@@ -216,26 +216,11 @@ export declare const CheckboxGroup: (({ checked, defaultChecked, onCheckedChange
                 marsh1000: any;
                 marsh1100: any;
                 marsh1200: any;
-                tonal50: any;
-                tonal100: any;
-                tonal200: any;
-                tonal300: any;
-                tonal400: any;
-                tonal500: any;
-                tonal600: any;
                 alpha100: any;
                 alpha150: any;
                 alpha200: any;
                 alpha250: any;
                 alpha600: any;
-                brandRed: any;
-                brandRedAccent: any;
-                brandGreen: any;
-                brandGreenAccent: any;
-                brandPurple: any;
-                brandPurpleAccent: any;
-                brandYellow: any;
-                brandYellowAccent: any;
                 infoLight: any;
                 info: any;
                 infoMid: any;
@@ -606,26 +591,11 @@ export declare const CheckboxGroup: (({ checked, defaultChecked, onCheckedChange
                 marsh1000: any;
                 marsh1100: any;
                 marsh1200: any;
-                tonal50: any;
-                tonal100: any;
-                tonal200: any;
-                tonal300: any;
-                tonal400: any;
-                tonal500: any;
-                tonal600: any;
                 alpha100: any;
                 alpha150: any;
                 alpha200: any;
                 alpha250: any;
                 alpha600: any;
-                brandRed: any;
-                brandRedAccent: any;
-                brandGreen: any;
-                brandGreenAccent: any;
-                brandPurple: any;
-                brandPurpleAccent: any;
-                brandYellow: any;
-                brandYellowAccent: any;
                 infoLight: any;
                 info: any;
                 infoMid: any;
@@ -1273,26 +1243,11 @@ export declare const CheckboxGroup: (({ checked, defaultChecked, onCheckedChange
                 marsh1000: any;
                 marsh1100: any;
                 marsh1200: any;
-                tonal50: any;
-                tonal100: any;
-                tonal200: any;
-                tonal300: any;
-                tonal400: any;
-                tonal500: any;
-                tonal600: any;
                 alpha100: any;
                 alpha150: any;
                 alpha200: any;
                 alpha250: any;
                 alpha600: any;
-                brandRed: any;
-                brandRedAccent: any;
-                brandGreen: any;
-                brandGreenAccent: any;
-                brandPurple: any;
-                brandPurpleAccent: any;
-                brandYellow: any;
-                brandYellowAccent: any;
                 infoLight: any;
                 info: any;
                 infoMid: any;

package/dist/components/checkbox-tree/CheckboxTree.d.ts

@@ -204,26 +204,11 @@ export declare const CheckboxTree: (({ checked, defaultChecked, onCheckedChange,
                 marsh1000: any;
                 marsh1100: any;
                 marsh1200: any;
-                tonal50: any;
-                tonal100: any;
-                tonal200: any;
-                tonal300: any;
-                tonal400: any;
-                tonal500: any;
-                tonal600: any;
                 alpha100: any;
                 alpha150: any;
                 alpha200: any;
                 alpha250: any;
                 alpha600: any;
-                brandRed: any;
-                brandRedAccent: any;
-                brandGreen: any;
-                brandGreenAccent: any;
-                brandPurple: any;
-                brandPurpleAccent: any;
-                brandYellow: any;
-                brandYellowAccent: any;
                 infoLight: any;
                 info: any;
                 infoMid: any;
@@ -856,26 +841,11 @@ export declare const CheckboxTree: (({ checked, defaultChecked, onCheckedChange,
                 marsh1000: any;
                 marsh1100: any;
                 marsh1200: any;
-                tonal50: any;
-                tonal100: any;
-                tonal200: any;
-                tonal300: any;
-                tonal400: any;
-                tonal500: any;
-                tonal600: any;
                 alpha100: any;
                 alpha150: any;
                 alpha200: any;
                 alpha250: any;
                 alpha600: any;
-                brandRed: any;
-                brandRedAccent: any;
-                brandGreen: any;
-                brandGreenAccent: any;
-                brandPurple: any;
-                brandPurpleAccent: any;
-                brandYellow: any;
-                brandYellowAccent: any;
                 infoLight: any;
                 info: any;
                 infoMid: any;
@@ -1565,26 +1535,11 @@ export declare const CheckboxTree: (({ checked, defaultChecked, onCheckedChange,
                 marsh1000: any;
                 marsh1100: any;
                 marsh1200: any;
-                tonal50: any;
-                tonal100: any;
-                tonal200: any;
-                tonal300: any;
-                tonal400: any;
-                tonal500: any;
-                tonal600: any;
                 alpha100: any;
                 alpha150: any;
                 alpha200: any;
                 alpha250: any;
                 alpha600: any;
-                brandRed: any;
-                brandRedAccent: any;
-                brandGreen: any;
-                brandGreenAccent: any;
-                brandPurple: any;
-                brandPurpleAccent: any;
-                brandYellow: any;
-                brandYellowAccent: any;
                 infoLight: any;
                 info: any;
                 infoMid: any;
@@ -2297,26 +2252,11 @@ export declare const CheckboxTree: (({ checked, defaultChecked, onCheckedChange,
                 marsh1000: any;
                 marsh1100: any;
                 marsh1200: any;
-                tonal50: any;
-                tonal100: any;
-                tonal200: any;
-                tonal300: any;
-                tonal400: any;
-                tonal500: any;
-                tonal600: any;
                 alpha100: any;
                 alpha150: any;
                 alpha200: any;
                 alpha250: any;
                 alpha600: any;
-                brandRed: any;
-                brandRedAccent: any;
-                brandGreen: any;
-                brandGreenAccent: any;
-                brandPurple: any;
-                brandPurpleAccent: any;
-                brandYellow: any;
-                brandYellowAccent: any;
                 infoLight: any;
                 info: any;
                 infoMid: any;

package/dist/components/chip/Chip.d.ts

@@ -204,26 +204,11 @@ export declare const StyledChipContent: import("@atom-learning/stitches-react/ty
         marsh1000: any;
         marsh1100: any;
         marsh1200: any;
-        tonal50: any;
-        tonal100: any;
-        tonal200: any;
-        tonal300: any;
-        tonal400: any;
-        tonal500: any;
-        tonal600: any;
         alpha100: any;
         alpha150: any;
         alpha200: any;
         alpha250: any;
         alpha600: any;
-        brandRed: any;
-        brandRedAccent: any;
-        brandGreen: any;
-        brandGreenAccent: any;
-        brandPurple: any;
-        brandPurpleAccent: any;
-        brandYellow: any;
-        brandYellowAccent: any;
         infoLight: any;
         info: any;
         infoMid: any;
@@ -590,26 +575,11 @@ export declare const StyledRoot: import("@atom-learning/stitches-react/types/sty
         marsh1000: any;
         marsh1100: any;
         marsh1200: any;
-        tonal50: any;
-        tonal100: any;
-        tonal200: any;
-        tonal300: any;
-        tonal400: any;
-        tonal500: any;
-        tonal600: any;
         alpha100: any;
         alpha150: any;
         alpha200: any;
         alpha250: any;
         alpha600: any;
-        brandRed: any;
-        brandRedAccent: any;
-        brandGreen: any;
-        brandGreenAccent: any;
-        brandPurple: any;
-        brandPurpleAccent: any;
-        brandYellow: any;
-        brandYellowAccent: any;
         infoLight: any;
         info: any;
         infoMid: any;
@@ -970,26 +940,11 @@ export declare const StyledRoot: import("@atom-learning/stitches-react/types/sty
         marsh1000: any;
         marsh1100: any;
         marsh1200: any;
-        tonal50: any;
-        tonal100: any;
-        tonal200: any;
-        tonal300: any;
-        tonal400: any;
-        tonal500: any;
-        tonal600: any;
         alpha100: any;
         alpha150: any;
         alpha200: any;
         alpha250: any;
         alpha600: any;
-        brandRed: any;
-        brandRedAccent: any;
-        brandGreen: any;
-        brandGreenAccent: any;
-        brandPurple: any;
-        brandPurpleAccent: any;
-        brandYellow: any;
-        brandYellowAccent: any;
         infoLight: any;
         info: any;
         infoMid: any;
@@ -1360,26 +1315,11 @@ export declare const ChipRootContext: React.Context<Omit<Omit<Omit<React.Detaile
             marsh1000: any;
             marsh1100: any;
             marsh1200: any;
-            tonal50: any;
-            tonal100: any;
-            tonal200: any;
-            tonal300: any;
-            tonal400: any;
-            tonal500: any;
-            tonal600: any;
             alpha100: any;
             alpha150: any;
             alpha200: any;
             alpha250: any;
             alpha600: any;
-            brandRed: any;
-            brandRedAccent: any;
-            brandGreen: any;
-            brandGreenAccent: any;
-            brandPurple: any;
-            brandPurpleAccent: any;
-            brandYellow: any;
-            brandYellowAccent: any;
             infoLight: any;
             info: any;
             infoMid: any;
@@ -1742,26 +1682,11 @@ export declare const ChipRootContext: React.Context<Omit<Omit<Omit<React.Detaile
             marsh1000: any;
             marsh1100: any;
             marsh1200: any;
-            tonal50: any;
-            tonal100: any;
-            tonal200: any;
-            tonal300: any;
-            tonal400: any;
-            tonal500: any;
-            tonal600: any;
             alpha100: any;
             alpha150: any;
             alpha200: any;
             alpha250: any;
             alpha600: any;
-            brandRed: any;
-            brandRedAccent: any;
-            brandGreen: any;
-            brandGreenAccent: any;
-            brandPurple: any;
-            brandPurpleAccent: any;
-            brandYellow: any;
-            brandYellowAccent: any;
             infoLight: any;
             info: any;
             infoMid: any;
@@ -2133,26 +2058,11 @@ export declare const Chip: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.
             marsh1000: any;
             marsh1100: any;
             marsh1200: any;
-            tonal50: any;
-            tonal100: any;
-            tonal200: any;
-            tonal300: any;
-            tonal400: any;
-            tonal500: any;
-            tonal600: any;
             alpha100: any;
             alpha150: any;
             alpha200: any;
             alpha250: any;
             alpha600: any;
-            brandRed: any;
-            brandRedAccent: any;
-            brandGreen: any;
-            brandGreenAccent: any;
-            brandPurple: any;
-            brandPurpleAccent: any;
-            brandYellow: any;
-            brandYellowAccent: any;
             infoLight: any;
             info: any;
             infoMid: any;
@@ -2515,26 +2425,11 @@ export declare const Chip: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.
             marsh1000: any;
             marsh1100: any;
             marsh1200: any;
-            tonal50: any;
-            tonal100: any;
-            tonal200: any;
-            tonal300: any;
-            tonal400: any;
-            tonal500: any;
-            tonal600: any;
             alpha100: any;
             alpha150: any;
             alpha200: any;
             alpha250: any;
             alpha600: any;
-            brandRed: any;
-            brandRedAccent: any;
-            brandGreen: any;
-            brandGreenAccent: any;
-            brandPurple: any;
-            brandPurpleAccent: any;
-            brandYellow: any;
-            brandYellowAccent: any;
             infoLight: any;
             info: any;
             infoMid: any;