@atom-learning/components 3.10.1 → 3.11.0

package/dist/components/calendar/Day.js

@@ -1,2 +1,2 @@
-import{styled as o}from"../../stitches.js";const r=o("button",{bg:"transparent",border:"none",borderRadius:"$round",color:"$tonal900",cursor:"pointer",fontFamily:"$body",fontSize:"$sm",size:"$3",p:0,transition:"all 75ms","&:hover":{bg:"$tonal100"},"&:active":{color:"white",bg:"$primary"},"&:focus":{outline:"2px solid $primary",outlineOffset:"2px"},variants:{isSelected:{true:{bg:"$primary",color:"white","&:hover":{bg:"$primary"}}},isToday:{true:{bg:"$tonal100"}},isOutsideMonth:{true:{color:"$tonal200"}}}});export{r as Day};
+import{styled as o}from"../../stitches.js";const r=o("button",{bg:"transparent",border:"none",borderRadius:"$round",color:"$tonal900",cursor:"pointer",fontFamily:"$body",fontSize:"$sm",size:"$3",p:0,transition:"all 75ms","&:hover":{bg:"$tonal100"},"&:active":{color:"white",bg:"$primary800"},"&:focus":{outline:"2px solid $primary800",outlineOffset:"2px"},variants:{isSelected:{true:{bg:"$primary800",color:"white","&:hover":{bg:"$primary800"}}},isToday:{true:{bg:"$tonal100"}},isOutsideMonth:{true:{color:"$tonal200"}}}});export{r as Day};
 //# sourceMappingURL=Day.js.map

package/dist/components/calendar/Day.js.map

@@ -1 +1 @@
-{"version":3,"file":"Day.js","sources":["../../../src/components/calendar/Day.tsx"],"sourcesContent":["import { styled } from '~/stitches'\n\nexport const Day = styled('button', {\n  bg: 'transparent',\n  border: 'none',\n  borderRadius: '$round',\n  color: '$tonal900',\n  cursor: 'pointer',\n  fontFamily: '$body',\n  fontSize: '$sm',\n  size: '$3',\n  p: 0,\n  transition: 'all 75ms',\n  '&:hover': {\n    bg: '$tonal100'\n  },\n  '&:active': {\n    color: 'white',\n    bg: '$primary'\n  },\n  '&:focus': {\n    outline: '2px solid $primary',\n    outlineOffset: '2px'\n  },\n  variants: {\n    isSelected: {\n      true: {\n        bg: '$primary',\n        color: 'white',\n        '&:hover': { bg: '$primary' }\n      }\n    },\n    isToday: {\n      true: { bg: '$tonal100' }\n    },\n    isOutsideMonth: {\n      true: { color: '$tonal200' }\n    }\n  }\n})\n"],"names":["Day","styled"],"mappings":"2CAEa,MAAAA,EAAMC,EAAO,SAAU,CAClC,GAAI,cACJ,OAAQ,OACR,aAAc,SACd,MAAO,YACP,OAAQ,UACR,WAAY,QACZ,SAAU,MACV,KAAM,KACN,EAAG,EACH,WAAY,WACZ,UAAW,CACT,GAAI,WACN,EACA,WAAY,CACV,MAAO,QACP,GAAI,UACN,EACA,UAAW,CACT,QAAS,qBACT,cAAe,KACjB,EACA,SAAU,CACR,WAAY,CACV,KAAM,CACJ,GAAI,WACJ,MAAO,QACP,UAAW,CAAE,GAAI,UAAW,CAC9B,CACF,EACA,QAAS,CACP,KAAM,CAAE,GAAI,WAAY,CAC1B,EACA,eAAgB,CACd,KAAM,CAAE,MAAO,WAAY,CAC7B,CACF,CACF,CAAC"}
+{"version":3,"file":"Day.js","sources":["../../../src/components/calendar/Day.tsx"],"sourcesContent":["import { styled } from '~/stitches'\n\nexport const Day = styled('button', {\n  bg: 'transparent',\n  border: 'none',\n  borderRadius: '$round',\n  color: '$tonal900',\n  cursor: 'pointer',\n  fontFamily: '$body',\n  fontSize: '$sm',\n  size: '$3',\n  p: 0,\n  transition: 'all 75ms',\n  '&:hover': {\n    bg: '$tonal100'\n  },\n  '&:active': {\n    color: 'white',\n    bg: '$primary800'\n  },\n  '&:focus': {\n    outline: '2px solid $primary800',\n    outlineOffset: '2px'\n  },\n  variants: {\n    isSelected: {\n      true: {\n        bg: '$primary800',\n        color: 'white',\n        '&:hover': { bg: '$primary800' }\n      }\n    },\n    isToday: {\n      true: { bg: '$tonal100' }\n    },\n    isOutsideMonth: {\n      true: { color: '$tonal200' }\n    }\n  }\n})\n"],"names":["Day","styled"],"mappings":"2CAEa,MAAAA,EAAMC,EAAO,SAAU,CAClC,GAAI,cACJ,OAAQ,OACR,aAAc,SACd,MAAO,YACP,OAAQ,UACR,WAAY,QACZ,SAAU,MACV,KAAM,KACN,EAAG,EACH,WAAY,WACZ,UAAW,CACT,GAAI,WACN,EACA,WAAY,CACV,MAAO,QACP,GAAI,aACN,EACA,UAAW,CACT,QAAS,wBACT,cAAe,KACjB,EACA,SAAU,CACR,WAAY,CACV,KAAM,CACJ,GAAI,cACJ,MAAO,QACP,UAAW,CAAE,GAAI,aAAc,CACjC,CACF,EACA,QAAS,CACP,KAAM,CAAE,GAAI,WAAY,CAC1B,EACA,eAAgB,CACd,KAAM,CAAE,MAAO,WAAY,CAC7B,CACF,CACF,CAAC"}

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 l}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:"$primary",cursor:"pointer",display:"flex",justifyContent:"center",p:"unset",size:"$5",top:"50%",transform:"translateY(-50%)",transition:"color 0.15s ease-in-out","&:hover":{color:"$primaryMid"},"&:active":{color:"$primaryDark"},"&:disabled":{color:"$tonal100"}},m=o(a,n),c=o(l,n),p=e=>r.createElement(m,{...e},r.createElement(t,{is:s})),u=e=>r.createElement(c,{...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 l}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"}},m=o(a,n),c=o(l,n),p=e=>r.createElement(m,{...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: '$primary',\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: '$primaryMid'\n  },\n  '&:active': {\n    color: '$primaryDark'\n  },\n  '&:disabled': {\n    color: '$tonal100'\n  }\n}\n\nconst StyledButtonBack = styled(BaseButtonBack, buttonStyles)\n\nconst StyledButtonNext = styled(BaseButtonNext, buttonStyles)\n\nexport const CarouselArrowPrevious: React.FC<{ css: CSS }> = (props) => (\n  <StyledButtonBack {...props}>\n    <Icon is={ChevronLeft} />\n  </StyledButtonBack>\n)\nexport const CarouselArrowNext: React.FC<{ css: CSS }> = (props) => (\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,WACP,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,EAAiDC,GAC5DC,EAAA,cAACP,EAAA,CAAkB,GAAGM,CACpBC,EAAAA,EAAA,cAACC,EAAA,CAAK,GAAIC,CAAAA,CAAa,CACzB,EAEWC,EAA6CJ,GACxDC,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: '$tonal100'\n  }\n}\n\nconst StyledButtonBack = styled(BaseButtonBack, buttonStyles)\n\nconst StyledButtonNext = styled(BaseButtonNext, buttonStyles)\n\nexport const CarouselArrowPrevious: React.FC<{ css: CSS }> = (props) => (\n  <StyledButtonBack {...props}>\n    <Icon is={ChevronLeft} />\n  </StyledButtonBack>\n)\nexport const CarouselArrowNext: React.FC<{ css: CSS }> = (props) => (\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,EAAiDC,GAC5DC,EAAA,cAACP,EAAA,CAAkB,GAAGM,CACpBC,EAAAA,EAAA,cAACC,EAAA,CAAK,GAAIC,CAAAA,CAAa,CACzB,EAEWC,EAA6CJ,GACxDC,EAAA,cAACJ,EAAA,CAAkB,GAAGG,CACpBC,EAAAA,EAAA,cAACC,EAAA,CAAK,GAAIG,CAAAA,CAAc,CAC1B"}

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

@@ -17,9 +17,10 @@ export declare const CarouselPagination: import("@stitches/react/types/styled-co
     hover: string;
 }, {
     colors: {
-        textForeground: any;
+        textBold: any;
+        textRegular: any;
         textSubtle: any;
-        textPlaceholder: any;
+        textMinimal: any;
         background: any;
         backgroundAccent: any;
         grey100: any;
@@ -166,11 +167,6 @@ export declare const CarouselPagination: import("@stitches/react/types/styled-co
         alpha200: any;
         alpha250: any;
         alpha600: any;
-        primaryLight: any;
-        primary: any;
-        primaryMid: any;
-        primaryDark: any;
-        secondary: any;
         brandRed: any;
         brandRedAccent: any;
         brandGreen: any;
@@ -179,6 +175,10 @@ export declare const CarouselPagination: import("@stitches/react/types/styled-co
         brandPurpleAccent: any;
         brandYellow: any;
         brandYellowAccent: any;
+        infoLight: any;
+        info: any;
+        infoMid: any;
+        infoDark: any;
         successLight: any;
         success: any;
         successMid: any;
@@ -202,6 +202,18 @@ export declare const CarouselPagination: import("@stitches/react/types/styled-co
         glBlueLight: any;
         glBluePrimary: any;
         glBlueDark: any;
+        primary100: any;
+        primary200: any;
+        primary300: any;
+        primary400: any;
+        primary500: any;
+        primary600: any;
+        primary700: any;
+        primary800: any;
+        primary900: any;
+        primary1000: any;
+        primary1100: any;
+        primary1200: any;
     };
     space: {
         "0": 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:"$primary"},"&:hover, &:focus":{bg:"$primaryMid"}}});export{e as CarouselPagination};
+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};
 //# 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: '$primary'\n    },\n    '&:hover, &:focus': {\n      bg: '$primaryMid'\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,UACN,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: '$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"}

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

@@ -17,9 +17,10 @@ declare const StyledSlide: import("@stitches/react/types/styled-component").Styl
     hover: string;
 }, {
     colors: {
-        textForeground: any;
+        textBold: any;
+        textRegular: any;
         textSubtle: any;
-        textPlaceholder: any;
+        textMinimal: any;
         background: any;
         backgroundAccent: any;
         grey100: any;
@@ -166,11 +167,6 @@ declare const StyledSlide: import("@stitches/react/types/styled-component").Styl
         alpha200: any;
         alpha250: any;
         alpha600: any;
-        primaryLight: any;
-        primary: any;
-        primaryMid: any;
-        primaryDark: any;
-        secondary: any;
         brandRed: any;
         brandRedAccent: any;
         brandGreen: any;
@@ -179,6 +175,10 @@ declare const StyledSlide: import("@stitches/react/types/styled-component").Styl
         brandPurpleAccent: any;
         brandYellow: any;
         brandYellowAccent: any;
+        infoLight: any;
+        info: any;
+        infoMid: any;
+        infoDark: any;
         successLight: any;
         success: any;
         successMid: any;
@@ -202,6 +202,18 @@ declare const StyledSlide: import("@stitches/react/types/styled-component").Styl
         glBlueLight: any;
         glBluePrimary: any;
         glBlueDark: any;
+        primary100: any;
+        primary200: any;
+        primary300: any;
+        primary400: any;
+        primary500: any;
+        primary600: any;
+        primary700: any;
+        primary800: any;
+        primary900: any;
+        primary1000: any;
+        primary1100: any;
+        primary1200: any;
     };
     space: {
         "0": any;

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

@@ -19,9 +19,10 @@ export declare const CarouselSlider: import("@stitches/react/types/styled-compon
     hover: string;
 }, {
     colors: {
-        textForeground: any;
+        textBold: any;
+        textRegular: any;
         textSubtle: any;
-        textPlaceholder: any;
+        textMinimal: any;
         background: any;
         backgroundAccent: any;
         grey100: any;
@@ -168,11 +169,6 @@ export declare const CarouselSlider: import("@stitches/react/types/styled-compon
         alpha200: any;
         alpha250: any;
         alpha600: any;
-        primaryLight: any;
-        primary: any;
-        primaryMid: any;
-        primaryDark: any;
-        secondary: any;
         brandRed: any;
         brandRedAccent: any;
         brandGreen: any;
@@ -181,6 +177,10 @@ export declare const CarouselSlider: import("@stitches/react/types/styled-compon
         brandPurpleAccent: any;
         brandYellow: any;
         brandYellowAccent: any;
+        infoLight: any;
+        info: any;
+        infoMid: any;
+        infoDark: any;
         successLight: any;
         success: any;
         successMid: any;
@@ -204,6 +204,18 @@ export declare const CarouselSlider: import("@stitches/react/types/styled-compon
         glBlueLight: any;
         glBluePrimary: any;
         glBlueDark: any;
+        primary100: any;
+        primary200: any;
+        primary300: any;
+        primary400: any;
+        primary500: any;
+        primary600: any;
+        primary700: any;
+        primary800: any;
+        primary900: any;
+        primary1000: any;
+        primary1100: any;
+        primary1200: any;
     };
     space: {
         "0": any;

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

@@ -21,9 +21,10 @@ declare const StyledCheckbox: import("@stitches/react/types/styled-component").S
     hover: string;
 }, {
     colors: {
-        textForeground: any;
+        textBold: any;
+        textRegular: any;
         textSubtle: any;
-        textPlaceholder: any;
+        textMinimal: any;
         background: any;
         backgroundAccent: any;
         grey100: any;
@@ -170,11 +171,6 @@ declare const StyledCheckbox: import("@stitches/react/types/styled-component").S
         alpha200: any;
         alpha250: any;
         alpha600: any;
-        primaryLight: any;
-        primary: any;
-        primaryMid: any;
-        primaryDark: any;
-        secondary: any;
         brandRed: any;
         brandRedAccent: any;
         brandGreen: any;
@@ -183,6 +179,10 @@ declare const StyledCheckbox: import("@stitches/react/types/styled-component").S
         brandPurpleAccent: any;
         brandYellow: any;
         brandYellowAccent: any;
+        infoLight: any;
+        info: any;
+        infoMid: any;
+        infoDark: any;
         successLight: any;
         success: any;
         successMid: any;
@@ -206,6 +206,18 @@ declare const StyledCheckbox: import("@stitches/react/types/styled-component").S
         glBlueLight: any;
         glBluePrimary: any;
         glBlueDark: any;
+        primary100: any;
+        primary200: any;
+        primary300: any;
+        primary400: any;
+        primary500: any;
+        primary600: any;
+        primary700: any;
+        primary800: any;
+        primary900: any;
+        primary1000: any;
+        primary1100: any;
+        primary1200: any;
     };
     space: {
         "0": 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:"$primary",borderColor:"$primary"},'&[data-state="indeterminate"]':{backgroundColor:"$primary",borderColor:"$primary"},"&:focus":{outline:"2px solid $primary",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 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};
 //# 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: '$primary',\n    borderColor: '$primary'\n  },\n  '&[data-state=\"indeterminate\"]': {\n    backgroundColor: '$primary',\n    borderColor: '$primary'\n  },\n  '&:focus': {\n    outline: '2px solid $primary',\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\ntype CheckboxProps = React.ComponentProps<typeof StyledCheckbox>\n\nexport const Checkbox: React.FC<CheckboxProps> = React.forwardRef(\n  ({ 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)\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,WACjB,YAAa,UACf,EACA,gCAAiC,CAC/B,gBAAiB,WACjB,YAAa,UACf,EACA,UAAW,CACT,QAAS,qBACT,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,EAIaC,EAAoCC,EAAM,WACrD,CAAC,CAAE,KAAAC,EAAO,KAAM,QAAAC,KAAYC,CAAK,EAAGC,IAAQ,CAC1C,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,CACF,EAEAN,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$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\ntype CheckboxProps = React.ComponentProps<typeof StyledCheckbox>\n\nexport const Checkbox: React.FC<CheckboxProps> = React.forwardRef(\n  ({ 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)\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,EAIaC,EAAoCC,EAAM,WACrD,CAAC,CAAE,KAAAC,EAAO,KAAM,QAAAC,KAAYC,CAAK,EAAGC,IAAQ,CAC1C,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,CACF,EAEAN,EAAS,YAAc"}

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

@@ -30,9 +30,10 @@ export declare const CheckboxGroup: (({ checked, defaultChecked, onCheckedChange
             hover: string;
         }, {
             colors: {
-                textForeground: any;
+                textBold: any;
+                textRegular: any;
                 textSubtle: any;
-                textPlaceholder: any;
+                textMinimal: any;
                 background: any;
                 backgroundAccent: any;
                 grey100: any;
@@ -179,11 +180,6 @@ export declare const CheckboxGroup: (({ checked, defaultChecked, onCheckedChange
                 alpha200: any;
                 alpha250: any;
                 alpha600: any;
-                primaryLight: any;
-                primary: any;
-                primaryMid: any;
-                primaryDark: any;
-                secondary: any;
                 brandRed: any;
                 brandRedAccent: any;
                 brandGreen: any;
@@ -192,6 +188,10 @@ export declare const CheckboxGroup: (({ checked, defaultChecked, onCheckedChange
                 brandPurpleAccent: any;
                 brandYellow: any;
                 brandYellowAccent: any;
+                infoLight: any;
+                info: any;
+                infoMid: any;
+                infoDark: any;
                 successLight: any;
                 success: any;
                 successMid: any;
@@ -215,6 +215,18 @@ export declare const CheckboxGroup: (({ checked, defaultChecked, onCheckedChange
                 glBlueLight: any;
                 glBluePrimary: any;
                 glBlueDark: any;
+                primary100: any;
+                primary200: any;
+                primary300: any;
+                primary400: any;
+                primary500: any;
+                primary600: any;
+                primary700: any;
+                primary800: any;
+                primary900: any;
+                primary1000: any;
+                primary1100: any;
+                primary1200: any;
             };
             space: {
                 "0": any;
@@ -361,9 +373,10 @@ export declare const CheckboxGroup: (({ checked, defaultChecked, onCheckedChange
             hover: string;
         }, {
             colors: {
-                textForeground: any;
+                textBold: any;
+                textRegular: any;
                 textSubtle: any;
-                textPlaceholder: any;
+                textMinimal: any;
                 background: any;
                 backgroundAccent: any;
                 grey100: any;
@@ -510,11 +523,6 @@ export declare const CheckboxGroup: (({ checked, defaultChecked, onCheckedChange
                 alpha200: any;
                 alpha250: any;
                 alpha600: any;
-                primaryLight: any;
-                primary: any;
-                primaryMid: any;
-                primaryDark: any;
-                secondary: any;
                 brandRed: any;
                 brandRedAccent: any;
                 brandGreen: any;
@@ -523,6 +531,10 @@ export declare const CheckboxGroup: (({ checked, defaultChecked, onCheckedChange
                 brandPurpleAccent: any;
                 brandYellow: any;
                 brandYellowAccent: any;
+                infoLight: any;
+                info: any;
+                infoMid: any;
+                infoDark: any;
                 successLight: any;
                 success: any;
                 successMid: any;
@@ -546,6 +558,18 @@ export declare const CheckboxGroup: (({ checked, defaultChecked, onCheckedChange
                 glBlueLight: any;
                 glBluePrimary: any;
                 glBlueDark: any;
+                primary100: any;
+                primary200: any;
+                primary300: any;
+                primary400: any;
+                primary500: any;
+                primary600: any;
+                primary700: any;
+                primary800: any;
+                primary900: any;
+                primary1000: any;
+                primary1100: any;
+                primary1200: any;
             };
             space: {
                 "0": any;
@@ -965,9 +989,10 @@ export declare const CheckboxGroup: (({ checked, defaultChecked, onCheckedChange
             hover: string;
         }, {
             colors: {
-                textForeground: any;
+                textBold: any;
+                textRegular: any;
                 textSubtle: any;
-                textPlaceholder: any;
+                textMinimal: any;
                 background: any;
                 backgroundAccent: any;
                 grey100: any;
@@ -1114,11 +1139,6 @@ export declare const CheckboxGroup: (({ checked, defaultChecked, onCheckedChange
                 alpha200: any;
                 alpha250: any;
                 alpha600: any;
-                primaryLight: any;
-                primary: any;
-                primaryMid: any;
-                primaryDark: any;
-                secondary: any;
                 brandRed: any;
                 brandRedAccent: any;
                 brandGreen: any;
@@ -1127,6 +1147,10 @@ export declare const CheckboxGroup: (({ checked, defaultChecked, onCheckedChange
                 brandPurpleAccent: any;
                 brandYellow: any;
                 brandYellowAccent: any;
+                infoLight: any;
+                info: any;
+                infoMid: any;
+                infoDark: any;
                 successLight: any;
                 success: any;
                 successMid: any;
@@ -1150,6 +1174,18 @@ export declare const CheckboxGroup: (({ checked, defaultChecked, onCheckedChange
                 glBlueLight: any;
                 glBluePrimary: any;
                 glBlueDark: any;
+                primary100: any;
+                primary200: any;
+                primary300: any;
+                primary400: any;
+                primary500: any;
+                primary600: any;
+                primary700: any;
+                primary800: any;
+                primary900: any;
+                primary1000: any;
+                primary1100: any;
+                primary1200: any;
             };
             space: {
                 "0": any;