@atom-learning/components 3.12.3 → 3.12.6

package/dist/components/carousel/Carousel.js

@@ -1,2 +1,2 @@
-import{CarouselProvider as m,CarouselContext as u}from"pure-react-carousel";import*as e from"react";import"../../stitches.js";import{CSSWrapper as d}from"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import{CarouselArrowNext as p,CarouselArrowPrevious as n}from"./CarouselArrows.js";import{CarouselPagination as C}from"./CarouselPagination.js";import{CarouselSlide as S}from"./CarouselSlide.js";import{CarouselSlider as f}from"./CarouselSlider.js";const r=({children:o,css:i,slideHeight:t,slideWidth:l,numSlides:a,...s})=>e.createElement(d,{css:i},e.createElement(m,{naturalSlideWidth:l,naturalSlideHeight:t,totalSlides:a,...s},o)),c=()=>e.useContext(u);r.ArrowNext=p,r.ArrowPrevious=n,r.Pagination=C,r.Slide=S,r.Slider=f,r.displayName="Carousel";export{r as Carousel,c as useCarousel};
+import{CarouselProvider as m,CarouselContext as u}from"pure-react-carousel";import*as r from"react";import"../../stitches.js";import{CSSWrapper as n}from"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import{CarouselArrowNext as p,CarouselArrowPrevious as d}from"./CarouselArrows.js";import{CarouselPagination as C}from"./CarouselPagination.js";import{CarouselSlide as S}from"./CarouselSlide.js";import{CarouselSlider as c}from"./CarouselSlider.js";const e=({children:o,css:i,slideHeight:t,slideWidth:l,numSlides:s,...a})=>r.createElement(n,{css:i},r.createElement(m,{naturalSlideWidth:l,naturalSlideHeight:t,totalSlides:s,...a},o)),f=()=>r.useContext(u),g=Object.assign(e,{ArrowNext:p,ArrowPrevious:d,Pagination:C,Slide:S,Slider:c});e.displayName="Carousel";export{g as Carousel,e as CarouselComponent,f as useCarousel};
 //# sourceMappingURL=Carousel.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Carousel.js","sources":["../../../src/components/carousel/Carousel.tsx"],"sourcesContent":["import { CarouselContext, CarouselProvider } from 'pure-react-carousel'\nimport * as React from 'react'\n\nimport { CSSWrapper } from '~/utilities'\n\nimport { CarouselArrowNext, CarouselArrowPrevious } from './CarouselArrows'\nimport { CarouselPagination } from './CarouselPagination'\nimport { CarouselSlide } from './CarouselSlide'\nimport { CarouselSlider } from './CarouselSlider'\n\ntype CarouselProps = {\n  slideHeight: number\n  slideWidth: number\n  numSlides: number\n}\n\ntype CarouselSubComponents = {\n  ArrowNext: typeof CarouselArrowNext\n  ArrowPrevious: typeof CarouselArrowPrevious\n  Pagination: typeof CarouselPagination\n  Slide: typeof CarouselSlide\n  Slider: typeof CarouselSlider\n}\n\nexport const Carousel: React.FC<\n  CarouselProps &\n    Omit<\n      React.ComponentProps<typeof CarouselProvider>,\n      'naturalSlideWidth' | 'naturalSlideHeight' | 'totalSlides'\n    > &\n    React.ComponentProps<typeof CSSWrapper>\n> &\n  CarouselSubComponents = ({\n  children,\n  css,\n  slideHeight,\n  slideWidth,\n  numSlides,\n  ...props\n}) => {\n  return (\n    <CSSWrapper css={css}>\n      <CarouselProvider\n        naturalSlideWidth={slideWidth}\n        naturalSlideHeight={slideHeight}\n        totalSlides={numSlides}\n        {...props}\n      >\n        {children}\n      </CarouselProvider>\n    </CSSWrapper>\n  )\n}\n\n/**\n * Documentation about the hook usage\n * https://github.com/express-labs/pure-react-carousel#hooks-and-usecontext\n */\nexport const useCarousel = () => React.useContext(CarouselContext)\n\nCarousel.ArrowNext = CarouselArrowNext\nCarousel.ArrowPrevious = CarouselArrowPrevious\nCarousel.Pagination = CarouselPagination\nCarousel.Slide = CarouselSlide\nCarousel.Slider = CarouselSlider\n\nCarousel.displayName = 'Carousel'\n"],"names":["Carousel","children","css","slideHeight","slideWidth","numSlides","props","React","CSSWrapper","CarouselProvider","useCarousel","CarouselContext","CarouselArrowNext","CarouselArrowPrevious","CarouselPagination","CarouselSlide","CarouselSlider"],"mappings":"mkBAwBa,MAAAA,EAQa,CAAC,CACzB,SAAAC,EACA,IAAAC,EACA,YAAAC,EACA,WAAAC,EACA,UAAAC,KACGC,CACL,IAEIC,EAAA,cAACC,EAAA,CAAW,IAAKN,CAAAA,EACfK,EAAA,cAACE,EAAA,CACC,kBAAmBL,EACnB,mBAAoBD,EACpB,YAAaE,EACZ,GAAGC,CAAAA,EAEHL,CACH,CACF,EAQSS,EAAc,IAAMH,EAAM,WAAWI,CAAe,EAEjEX,EAAS,UAAYY,EACrBZ,EAAS,cAAgBa,EACzBb,EAAS,WAAac,EACtBd,EAAS,MAAQe,EACjBf,EAAS,OAASgB,EAElBhB,EAAS,YAAc"}
+{"version":3,"file":"Carousel.js","sources":["../../../src/components/carousel/Carousel.tsx"],"sourcesContent":["import { CarouselContext, CarouselProvider } from 'pure-react-carousel'\nimport * as React from 'react'\n\nimport { CSSWrapper } from '~/utilities'\n\nimport { CarouselArrowNext, CarouselArrowPrevious } from './CarouselArrows'\nimport { CarouselPagination } from './CarouselPagination'\nimport { CarouselSlide } from './CarouselSlide'\nimport { CarouselSlider } from './CarouselSlider'\n\ntype CarouselProps = {\n  slideHeight: number\n  slideWidth: number\n  numSlides: number\n}\n\nexport const CarouselComponent = ({\n  children,\n  css,\n  slideHeight,\n  slideWidth,\n  numSlides,\n  ...props\n}: CarouselProps &\n  Omit<\n    React.ComponentProps<typeof CarouselProvider>,\n    'naturalSlideWidth' | 'naturalSlideHeight' | 'totalSlides'\n  > &\n  React.ComponentProps<typeof CSSWrapper>) => (\n  <CSSWrapper css={css}>\n    <CarouselProvider\n      naturalSlideWidth={slideWidth}\n      naturalSlideHeight={slideHeight}\n      totalSlides={numSlides}\n      {...props}\n    >\n      {children}\n    </CarouselProvider>\n  </CSSWrapper>\n)\n\n/**\n * Documentation about the hook usage\n * https://github.com/express-labs/pure-react-carousel#hooks-and-usecontext\n */\nexport const useCarousel = () => React.useContext(CarouselContext)\n\nexport const Carousel = Object.assign(CarouselComponent, {\n  ArrowNext: CarouselArrowNext,\n  ArrowPrevious: CarouselArrowPrevious,\n  Pagination: CarouselPagination,\n  Slide: CarouselSlide,\n  Slider: CarouselSlider\n})\n\nCarouselComponent.displayName = 'Carousel'\n"],"names":["CarouselComponent","children","css","slideHeight","slideWidth","numSlides","props","React","CSSWrapper","CarouselProvider","useCarousel","CarouselContext","Carousel","CarouselArrowNext","CarouselArrowPrevious","CarouselPagination","CarouselSlide","CarouselSlider"],"mappings":"ykBAgBaA,EAAoB,CAAC,CAChC,SAAAC,EACA,IAAAC,EACA,YAAAC,EACA,WAAAC,EACA,UAAAC,KACGC,CACL,IAMEC,EAAA,cAACC,EAAA,CAAW,IAAKN,GACfK,EAAA,cAACE,EAAA,CACC,kBAAmBL,EACnB,mBAAoBD,EACpB,YAAaE,EACZ,GAAGC,GAEHL,CACH,CACF,EAOWS,EAAc,IAAMH,EAAM,WAAWI,CAAe,EAEpDC,EAAW,OAAO,OAAOZ,EAAmB,CACvD,UAAWa,EACX,cAAeC,EACf,WAAYC,EACZ,MAAOC,EACP,OAAQC,CACV,CAAC,EAEDjB,EAAkB,YAAc"}

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

@@ -1,8 +1,8 @@
-import * as React from 'react';
+/// <reference types="react" />
 import { CSS } from '../../stitches';
-export declare const CarouselArrowPrevious: React.FC<{
+export declare const CarouselArrowPrevious: (props: {
     css: CSS;
-}>;
-export declare const CarouselArrowNext: React.FC<{
+}) => JSX.Element;
+export declare const CarouselArrowNext: (props: {
     css: CSS;
-}>;
+}) => JSX.Element;

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:"$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};
+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};
 //# 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: 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"}
+{"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"}

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

@@ -330,8 +330,7 @@ declare const StyledSlide: import("@stitches/react/types/styled-component").Styl
         marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
 }>>;
-declare type SlideProps = React.ComponentProps<typeof StyledSlide> & {
+export declare const CarouselSlide: ({ children, ...remainingProps }: React.ComponentProps<typeof StyledSlide> & {
     index: number;
-};
-export declare const CarouselSlide: React.FC<SlideProps>;
+}) => JSX.Element;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"CarouselSlide.js","sources":["../../../src/components/carousel/CarouselSlide.tsx"],"sourcesContent":["import { Slide as BaseSlide } from 'pure-react-carousel'\nimport * as React from 'react'\n\nimport { Box } from '~/components/box'\nimport { styled } from '~/stitches'\n\nconst StyledSlide = styled(BaseSlide, {})\n\ntype SlideProps = React.ComponentProps<typeof StyledSlide> & { index: number }\n\nexport const CarouselSlide: React.FC<SlideProps> = ({\n  children,\n  ...remainingProps\n}) => (\n  <StyledSlide {...remainingProps} tag=\"div\">\n    {/* padding to create the gap between slides */}\n    <Box css={{ px: '$3' }}>{children}</Box>\n  </StyledSlide>\n)\n"],"names":["StyledSlide","styled","BaseSlide","CarouselSlide","children","remainingProps","React","Box"],"mappings":"mJAMA,MAAMA,EAAcC,EAAOC,EAAW,CAAE,CAAA,EAI3BC,EAAsC,CAAC,CAClD,SAAAC,KACGC,CACL,IACEC,EAAA,cAACN,EAAA,CAAa,GAAGK,EAAgB,IAAI,OAEnCC,EAAA,cAACC,EAAA,CAAI,IAAK,CAAE,GAAI,IAAK,CAAIH,EAAAA,CAAS,CACpC"}
+{"version":3,"file":"CarouselSlide.js","sources":["../../../src/components/carousel/CarouselSlide.tsx"],"sourcesContent":["import { Slide as BaseSlide } from 'pure-react-carousel'\nimport * as React from 'react'\n\nimport { Box } from '~/components/box'\nimport { styled } from '~/stitches'\n\nconst StyledSlide = styled(BaseSlide, {})\n\nexport const CarouselSlide = ({\n  children,\n  ...remainingProps\n}: React.ComponentProps<typeof StyledSlide> & { index: number }) => (\n  <StyledSlide {...remainingProps} tag=\"div\">\n    {/* padding to create the gap between slides */}\n    <Box css={{ px: '$3' }}>{children}</Box>\n  </StyledSlide>\n)\n"],"names":["StyledSlide","styled","BaseSlide","CarouselSlide","children","remainingProps","React","Box"],"mappings":"mJAMA,MAAMA,EAAcC,EAAOC,EAAW,CAAE,CAAA,EAE3BC,EAAgB,CAAC,CAC5B,SAAAC,KACGC,CACL,IACEC,EAAA,cAACN,EAAA,CAAa,GAAGK,EAAgB,IAAI,OAEnCC,EAAA,cAACC,EAAA,CAAI,IAAK,CAAE,GAAI,IAAK,CAAIH,EAAAA,CAAS,CACpC"}

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

@@ -334,6 +334,5 @@ declare const StyledCheckbox: import("@stitches/react/types/styled-component").S
         marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
 }>>;
-declare type CheckboxProps = React.ComponentProps<typeof StyledCheckbox>;
-export declare const Checkbox: React.FC<CheckboxProps>;
+export declare const Checkbox: React.ForwardRefExoticComponent<React.ComponentProps<typeof StyledCheckbox>>;
 export {};

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\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"}
+{"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"}

package/dist/components/checkbox-field/CheckboxField.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Checkbox } from '../../components/checkbox';
 import { FieldElementWrapperProps } from '../../components/field-wrapper';
-declare type CheckboxFieldProps = React.ComponentProps<typeof Checkbox> & FieldElementWrapperProps;
-export declare const CheckboxField: React.FC<CheckboxFieldProps>;
-export {};
+export declare const CheckboxField: {
+    ({ css, label, name, validation, description, defaultChecked, checked, onCheckedChange, ...remainingProps }: React.ComponentProps<typeof Checkbox> & FieldElementWrapperProps): JSX.Element;
+    displayName: string;
+};

package/dist/components/checkbox-field/CheckboxField.js

@@ -1,2 +1,2 @@
-import*as t from"react";import{useFormContext as F,useController as b}from"react-hook-form";import{Checkbox as x}from"../checkbox/Checkbox.js";import"../field-wrapper/FieldWrapper.js";import{InlineFieldWrapper as v}from"../field-wrapper/InlineFieldWrapper.js";import"../form/Form.js";import{useFieldError as E}from"../form/useFieldError.js";var g=(e=>(e.ON="on",e.OFF="off",e))(g||{});const m=({css:e,label:f,name:l,validation:r,description:s,defaultChecked:u=!1,checked:o,onCheckedChange:n,...p})=>{const{control:h}=F(),{error:a}=E(l),{field:{ref:C,onChange:i,value:c,name:k}}=b({name:l,control:h,rules:r,defaultValue:u});return t.useEffect(()=>{typeof o<"u"&&i(o)},[o]),t.createElement(v,{css:e,description:s,error:a,label:f,required:Boolean(r==null?void 0:r.required)},t.createElement(x,{ref:C,name:k,...p,onCheckedChange:d=>{i(d),n==null||n(d)},value:c?"on":"off",checked:c,...a&&{state:"error"}}))};m.displayName="CheckboxField";export{m as CheckboxField};
+import*as t from"react";import{useFormContext as F,useController as x}from"react-hook-form";import{Checkbox as b}from"../checkbox/Checkbox.js";import"../field-wrapper/FieldWrapper.js";import{InlineFieldWrapper as v}from"../field-wrapper/InlineFieldWrapper.js";import"../form/Form.js";import{useFieldError as E}from"../form/useFieldError.js";var g=(e=>(e.ON="on",e.OFF="off",e))(g||{});const m=({css:e,label:f,name:l,validation:r,description:s,defaultChecked:u=!1,checked:o,onCheckedChange:n,...p})=>{const{control:h}=F(),{error:a}=E(l),{field:{ref:C,onChange:i,value:c,name:k}}=x({name:l,control:h,rules:r,defaultValue:u});return t.useEffect(()=>{typeof o<"u"&&i(o)},[o]),t.createElement(v,{css:e,description:s,error:a,label:f,required:Boolean(r==null?void 0:r.required)},t.createElement(b,{ref:C,name:k,...p,onCheckedChange:d=>{i(d),n==null||n(d)},value:c?"on":"off",checked:c,...a&&{state:"error"}}))};m.displayName="CheckboxField";export{m as CheckboxField};
 //# sourceMappingURL=CheckboxField.js.map

package/dist/components/checkbox-field/CheckboxField.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxField.js","sources":["../../../src/components/checkbox-field/CheckboxField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport { Checkbox } from '~/components/checkbox'\nimport {\n  FieldElementWrapperProps,\n  InlineFieldWrapper\n} from '~/components/field-wrapper'\nimport { useFieldError } from '~/components/form'\n\ntype CheckboxFieldProps = React.ComponentProps<typeof Checkbox> &\n  FieldElementWrapperProps\n\nenum CheckboxValue {\n  ON = 'on',\n  OFF = 'off'\n}\n\nexport const CheckboxField: React.FC<CheckboxFieldProps> = ({\n  css,\n  label,\n  name,\n  validation,\n  description,\n  defaultChecked = false,\n  checked,\n  onCheckedChange,\n  ...remainingProps\n}) => {\n  const { control } = useFormContext()\n  const { error } = useFieldError(name)\n  const {\n    field: { ref, onChange, value: innerChecked, name: innerName }\n  } = useController({\n    name,\n    control,\n    rules: validation,\n    defaultValue: defaultChecked\n  })\n\n  React.useEffect(() => {\n    // Update the react-hook-form inner checked to match what is passed in.\n    if (typeof checked !== 'undefined') onChange(checked)\n  }, [checked])\n\n  return (\n    <InlineFieldWrapper\n      css={css}\n      description={description}\n      error={error}\n      label={label}\n      required={Boolean(validation?.required)}\n    >\n      <Checkbox\n        ref={ref}\n        name={innerName}\n        {...remainingProps}\n        onCheckedChange={(newChecked) => {\n          onChange(newChecked)\n          onCheckedChange?.(newChecked)\n        }}\n        value={innerChecked ? CheckboxValue.ON : CheckboxValue.OFF}\n        checked={innerChecked}\n        {...(error && { state: 'error' })}\n      />\n    </InlineFieldWrapper>\n  )\n}\n\nCheckboxField.displayName = 'CheckboxField'\n"],"names":["CheckboxValue","CheckboxField","css","label","name","validation","description","defaultChecked","checked","onCheckedChange","remainingProps","control","useFormContext","error","useFieldError","ref","onChange","innerChecked","innerName","useController","React","InlineFieldWrapper","Checkbox","newChecked"],"mappings":"qVAaA,IAAKA,OACHA,EAAA,GAAK,KACLA,EAAA,IAAM,MAFHA,IAAAA,GAAA,CAKE,CAAA,EAAA,MAAMC,EAA8C,CAAC,CAC1D,IAAAC,EACA,MAAAC,EACA,KAAAC,EACA,WAAAC,EACA,YAAAC,EACA,eAAAC,EAAiB,GACjB,QAAAC,EACA,gBAAAC,KACGC,CACL,IAAM,CACJ,KAAM,CAAE,QAAAC,CAAQ,EAAIC,EAAe,EAC7B,CAAE,MAAAC,CAAM,EAAIC,EAAcV,CAAI,EAC9B,CACJ,MAAO,CAAE,IAAAW,EAAK,SAAAC,EAAU,MAAOC,EAAc,KAAMC,CAAU,CAC/D,EAAIC,EAAc,CAChB,KAAAf,EACA,QAAAO,EACA,MAAON,EACP,aAAcE,CAChB,CAAC,EAED,OAAAa,EAAM,UAAU,IAAM,CAEhB,OAAOZ,EAAY,KAAaQ,EAASR,CAAO,CACtD,EAAG,CAACA,CAAO,CAAC,EAGVY,EAAA,cAACC,EAAA,CACC,IAAKnB,EACL,YAAaI,EACb,MAAOO,EACP,MAAOV,EACP,SAAU,QAAQE,GAAA,KAAAA,OAAAA,EAAY,QAAQ,CAEtCe,EAAAA,EAAA,cAACE,EAAA,CACC,IAAKP,EACL,KAAMG,EACL,GAAGR,EACJ,gBAAkBa,GAAe,CAC/BP,EAASO,CAAU,EACnBd,GAAA,MAAAA,EAAkBc,EACpB,EACA,MAAON,EAAe,KAAmB,MACzC,QAASA,EACR,GAAIJ,GAAS,CAAE,MAAO,OAAQ,CAAA,CACjC,CACF,CAEJ,EAEAZ,EAAc,YAAc"}
+{"version":3,"file":"CheckboxField.js","sources":["../../../src/components/checkbox-field/CheckboxField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport { Checkbox } from '~/components/checkbox'\nimport {\n  FieldElementWrapperProps,\n  InlineFieldWrapper\n} from '~/components/field-wrapper'\nimport { useFieldError } from '~/components/form'\n\nenum CheckboxValue {\n  ON = 'on',\n  OFF = 'off'\n}\n\nexport const CheckboxField = ({\n  css,\n  label,\n  name,\n  validation,\n  description,\n  defaultChecked = false,\n  checked,\n  onCheckedChange,\n  ...remainingProps\n}: React.ComponentProps<typeof Checkbox> & FieldElementWrapperProps) => {\n  const { control } = useFormContext()\n  const { error } = useFieldError(name)\n  const {\n    field: { ref, onChange, value: innerChecked, name: innerName }\n  } = useController({\n    name,\n    control,\n    rules: validation,\n    defaultValue: defaultChecked\n  })\n\n  React.useEffect(() => {\n    // Update the react-hook-form inner checked to match what is passed in.\n    if (typeof checked !== 'undefined') onChange(checked)\n  }, [checked])\n\n  return (\n    <InlineFieldWrapper\n      css={css}\n      description={description}\n      error={error}\n      label={label}\n      required={Boolean(validation?.required)}\n    >\n      <Checkbox\n        ref={ref}\n        name={innerName}\n        {...remainingProps}\n        onCheckedChange={(newChecked) => {\n          onChange(newChecked)\n          onCheckedChange?.(newChecked)\n        }}\n        value={innerChecked ? CheckboxValue.ON : CheckboxValue.OFF}\n        checked={innerChecked}\n        {...(error && { state: 'error' })}\n      />\n    </InlineFieldWrapper>\n  )\n}\n\nCheckboxField.displayName = 'CheckboxField'\n"],"names":["CheckboxValue","CheckboxField","css","label","name","validation","description","defaultChecked","checked","onCheckedChange","remainingProps","control","useFormContext","error","useFieldError","ref","onChange","innerChecked","innerName","useController","React","InlineFieldWrapper","Checkbox","newChecked"],"mappings":"qVAUA,IAAKA,OACHA,EAAA,GAAK,KACLA,EAAA,IAAM,MAFHA,IAAAA,GAAA,CAKE,CAAA,EAAA,MAAMC,EAAgB,CAAC,CAC5B,IAAAC,EACA,MAAAC,EACA,KAAAC,EACA,WAAAC,EACA,YAAAC,EACA,eAAAC,EAAiB,GACjB,QAAAC,EACA,gBAAAC,KACGC,CACL,IAAwE,CACtE,KAAM,CAAE,QAAAC,CAAQ,EAAIC,EAAe,EAC7B,CAAE,MAAAC,CAAM,EAAIC,EAAcV,CAAI,EAC9B,CACJ,MAAO,CAAE,IAAAW,EAAK,SAAAC,EAAU,MAAOC,EAAc,KAAMC,CAAU,CAC/D,EAAIC,EAAc,CAChB,KAAAf,EACA,QAAAO,EACA,MAAON,EACP,aAAcE,CAChB,CAAC,EAED,OAAAa,EAAM,UAAU,IAAM,CAEhB,OAAOZ,EAAY,KAAaQ,EAASR,CAAO,CACtD,EAAG,CAACA,CAAO,CAAC,EAGVY,EAAA,cAACC,EAAA,CACC,IAAKnB,EACL,YAAaI,EACb,MAAOO,EACP,MAAOV,EACP,SAAU,QAAQE,GAAA,KAAAA,OAAAA,EAAY,QAAQ,CAEtCe,EAAAA,EAAA,cAACE,EAAA,CACC,IAAKP,EACL,KAAMG,EACL,GAAGR,EACJ,gBAAkBa,GAAe,CAC/BP,EAASO,CAAU,EACnBd,GAAA,MAAAA,EAAkBc,EACpB,EACA,MAAON,EAAe,KAAmB,MACzC,QAASA,EACR,GAAIJ,GAAS,CAAE,MAAO,OAAQ,CAAA,CACjC,CACF,CAEJ,EAEAZ,EAAc,YAAc"}

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

@@ -343,8 +343,6 @@ export declare const CheckboxGroup: (({ checked, defaultChecked, onCheckedChange
                 marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
             };
         }> | undefined;
-    } & {
-        children?: React.ReactNode;
     }, "defaultChecked" | "checked" | "onCheckedChange"> & {
         onCheckedChange?: ((newChecked: boolean) => void) | undefined;
     }) => JSX.Element;
@@ -946,7 +944,6 @@ export declare const CheckboxGroup: (({ checked, defaultChecked, onCheckedChange
         required?: boolean | undefined;
         asChild?: boolean | undefined;
         disabled?: boolean | undefined;
-        value?: string | number | readonly string[] | undefined;
         type?: "button" | "reset" | "submit" | undefined;
         autoFocus?: boolean | undefined;
         formAction?: string | undefined;
@@ -954,6 +951,7 @@ export declare const CheckboxGroup: (({ checked, defaultChecked, onCheckedChange
         formMethod?: string | undefined;
         formNoValidate?: boolean | undefined;
         formTarget?: string | undefined;
+        value?: string | number | readonly string[] | undefined;
         state?: "error" | ({
             "@sm"?: "error" | undefined;
             "@md"?: "error" | undefined;

package/dist/components/checkbox-group/context/CheckboxGroupChecked.context.d.ts

@@ -10,5 +10,5 @@ declare type CheckboxGroupCheckedContextProps = {
     onCheckedChange?: (checked: CheckboxGroupCheckedContextValue['checked']) => void;
 };
 export declare const CheckboxGroupCheckedContext: React.Context<CheckboxGroupCheckedContextValue>;
-export declare const CheckboxGroupCheckedProvider: React.FC<CheckboxGroupCheckedContextProps>;
+export declare const CheckboxGroupCheckedProvider: ({ checked: controlledChecked, defaultChecked, onCheckedChange, ...rest }: React.PropsWithChildren<CheckboxGroupCheckedContextProps>) => JSX.Element;
 export {};

package/dist/components/checkbox-group/context/CheckboxGroupChecked.context.js

@@ -1,2 +1,2 @@
-import*as n from"react";const C=n.createContext({checked:[],handleItemCheckedChange:()=>null}),k=t=>(c,e)=>{const o=new Set(t);return c?o.add(e):o.delete(e),Array.from(o)},i=({checked:t,defaultChecked:c=[],onCheckedChange:e,...o})=>{const[u,m]=n.useState(c),d=n.useCallback((r,a)=>{if(!t)return()=>null;const l=k(t)(r,a);e==null||e(l)},[e,t]),h=n.useCallback((r,a)=>{m(l=>{const s=k(l)(r,a);return e==null||e(s),s})},[e]),x=n.useMemo(()=>{const r=Array.isArray(t);return{checked:r?t:u,handleItemCheckedChange:r?d:h}},[u,h,d,t]);return n.createElement(C.Provider,{value:x,...o})};export{C as CheckboxGroupCheckedContext,i as CheckboxGroupCheckedProvider};
+import*as c from"react";const C=c.createContext({checked:[],handleItemCheckedChange:()=>null}),k=r=>(o,e)=>{const t=new Set(r);return o?t.add(e):t.delete(e),Array.from(t)},i=({checked:r,defaultChecked:o=[],onCheckedChange:e,...t})=>{const[u,m]=c.useState(o),d=c.useCallback((n,a)=>{if(!r)return()=>null;const l=k(r)(n,a);e==null||e(l)},[e,r]),h=c.useCallback((n,a)=>{m(l=>{const s=k(l)(n,a);return e==null||e(s),s})},[e]),x=c.useMemo(()=>{const n=Array.isArray(r);return{checked:n?r:u,handleItemCheckedChange:n?d:h}},[u,h,d,r]);return c.createElement(C.Provider,{value:x,...t})};export{C as CheckboxGroupCheckedContext,i as CheckboxGroupCheckedProvider};
 //# sourceMappingURL=CheckboxGroupChecked.context.js.map

package/dist/components/checkbox-group/context/CheckboxGroupChecked.context.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroupChecked.context.js","sources":["../../../../src/components/checkbox-group/context/CheckboxGroupChecked.context.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport type { CheckboxGroupItemValue } from '../CheckboxGroup.types'\n\ntype CheckboxGroupCheckedContextValue = {\n  checked: CheckboxGroupItemValue[]\n  handleItemCheckedChange: (\n    newItemChecked: boolean,\n    itemValue: CheckboxGroupItemValue\n  ) => void\n}\n\ntype CheckboxGroupCheckedContextProps = {\n  checked?: CheckboxGroupCheckedContextValue['checked']\n  defaultChecked?: CheckboxGroupCheckedContextValue['checked']\n  onCheckedChange?: (\n    checked: CheckboxGroupCheckedContextValue['checked']\n  ) => void\n}\n\nexport const CheckboxGroupCheckedContext =\n  React.createContext<CheckboxGroupCheckedContextValue>({\n    checked: [],\n    handleItemCheckedChange: () => null\n  })\n\nconst generateNewCheckedFn = (\n  currentChecked: CheckboxGroupCheckedContextValue['checked']\n) => {\n  return (newItemChecked, itemValue) => {\n    const newCheckedSet = new Set(currentChecked)\n    newItemChecked\n      ? newCheckedSet.add(itemValue)\n      : newCheckedSet.delete(itemValue)\n    const newChecked = Array.from(newCheckedSet)\n    return newChecked\n  }\n}\n\nexport const CheckboxGroupCheckedProvider: React.FC<\n  CheckboxGroupCheckedContextProps\n> = ({\n  checked: controlledChecked,\n  defaultChecked = [],\n  onCheckedChange,\n  ...rest\n}) => {\n  const [checked, setChecked] = React.useState(defaultChecked)\n\n  const handleItemControlledCheckedChange = React.useCallback(\n    (newItemChecked, itemValue) => {\n      if (!controlledChecked) return () => null\n      const newCheckedFn = generateNewCheckedFn(controlledChecked)\n      const newChecked = newCheckedFn(newItemChecked, itemValue)\n      onCheckedChange?.(newChecked)\n    },\n    [onCheckedChange, controlledChecked]\n  )\n\n  const handleItemCheckedChange = React.useCallback(\n    (newItemChecked, itemValue) => {\n      setChecked((prevChecked) => {\n        const newCheckedFn = generateNewCheckedFn(prevChecked)\n        const newChecked = newCheckedFn(newItemChecked, itemValue)\n        onCheckedChange?.(newChecked)\n        return newChecked\n      })\n    },\n    [onCheckedChange]\n  )\n\n  const value = React.useMemo<CheckboxGroupCheckedContextValue>(() => {\n    const isControlled = Array.isArray(controlledChecked)\n    return {\n      checked: isControlled\n        ? (controlledChecked as CheckboxGroupCheckedContextValue['checked']) // We're literally JUST checking it above but TS still flags it, wrongly, so casting\n        : checked,\n      handleItemCheckedChange: isControlled\n        ? handleItemControlledCheckedChange\n        : handleItemCheckedChange\n    }\n  }, [\n    checked,\n    handleItemCheckedChange,\n    handleItemControlledCheckedChange,\n    controlledChecked\n  ])\n\n  return <CheckboxGroupCheckedContext.Provider value={value} {...rest} />\n}\n"],"names":["CheckboxGroupCheckedContext","React","generateNewCheckedFn","currentChecked","newItemChecked","itemValue","newCheckedSet","CheckboxGroupCheckedProvider","controlledChecked","defaultChecked","onCheckedChange","rest","checked","setChecked","handleItemControlledCheckedChange","newChecked","handleItemCheckedChange","prevChecked","value","isControlled"],"mappings":"wBAoBO,MAAMA,EACXC,EAAM,cAAgD,CACpD,QAAS,CAAA,EACT,wBAAyB,IAAM,IACjC,CAAC,EAEGC,EACJC,GAEO,CAACC,EAAgBC,IAAc,CACpC,MAAMC,EAAgB,IAAI,IAAIH,CAAc,EAC5C,OAAAC,EACIE,EAAc,IAAID,CAAS,EAC3BC,EAAc,OAAOD,CAAS,EACf,MAAM,KAAKC,CAAa,CAE7C,EAGWC,EAET,CAAC,CACH,QAASC,EACT,eAAAC,EAAiB,CAAC,EAClB,gBAAAC,KACGC,CACL,IAAM,CACJ,KAAM,CAACC,EAASC,CAAU,EAAIZ,EAAM,SAASQ,CAAc,EAErDK,EAAoCb,EAAM,YAC9C,CAACG,EAAgBC,IAAc,CAC7B,GAAI,CAACG,EAAmB,MAAO,IAAM,KAErC,MAAMO,EADeb,EAAqBM,CAAiB,EAC3BJ,EAAgBC,CAAS,EACzDK,GAAA,MAAAA,EAAkBK,EACpB,EACA,CAACL,EAAiBF,CAAiB,CACrC,EAEMQ,EAA0Bf,EAAM,YACpC,CAACG,EAAgBC,IAAc,CAC7BQ,EAAYI,GAAgB,CAE1B,MAAMF,EADeb,EAAqBe,CAAW,EACrBb,EAAgBC,CAAS,EACzD,OAAAK,GAAA,MAAAA,EAAkBK,CAAAA,EACXA,CACT,CAAC,CACH,EACA,CAACL,CAAe,CAClB,EAEMQ,EAAQjB,EAAM,QAA0C,IAAM,CAClE,MAAMkB,EAAe,MAAM,QAAQX,CAAiB,EACpD,MAAO,CACL,QAASW,EACJX,EACDI,EACJ,wBAAyBO,EACrBL,EACAE,CACN,CACF,EAAG,CACDJ,EACAI,EACAF,EACAN,CACF,CAAC,EAED,OAAOP,EAAA,cAACD,EAA4B,SAA5B,CAAqC,MAAOkB,EAAQ,GAAGP,EAAM,CACvE"}
+{"version":3,"file":"CheckboxGroupChecked.context.js","sources":["../../../../src/components/checkbox-group/context/CheckboxGroupChecked.context.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport type { CheckboxGroupItemValue } from '../CheckboxGroup.types'\n\ntype CheckboxGroupCheckedContextValue = {\n  checked: CheckboxGroupItemValue[]\n  handleItemCheckedChange: (\n    newItemChecked: boolean,\n    itemValue: CheckboxGroupItemValue\n  ) => void\n}\n\ntype CheckboxGroupCheckedContextProps = {\n  checked?: CheckboxGroupCheckedContextValue['checked']\n  defaultChecked?: CheckboxGroupCheckedContextValue['checked']\n  onCheckedChange?: (\n    checked: CheckboxGroupCheckedContextValue['checked']\n  ) => void\n}\n\nexport const CheckboxGroupCheckedContext =\n  React.createContext<CheckboxGroupCheckedContextValue>({\n    checked: [],\n    handleItemCheckedChange: () => null\n  })\n\nconst generateNewCheckedFn = (\n  currentChecked: CheckboxGroupCheckedContextValue['checked']\n) => {\n  return (newItemChecked, itemValue) => {\n    const newCheckedSet = new Set(currentChecked)\n    newItemChecked\n      ? newCheckedSet.add(itemValue)\n      : newCheckedSet.delete(itemValue)\n    const newChecked = Array.from(newCheckedSet)\n    return newChecked\n  }\n}\n\nexport const CheckboxGroupCheckedProvider = ({\n  checked: controlledChecked,\n  defaultChecked = [],\n  onCheckedChange,\n  ...rest\n}: React.PropsWithChildren<CheckboxGroupCheckedContextProps>) => {\n  const [checked, setChecked] = React.useState(defaultChecked)\n\n  const handleItemControlledCheckedChange = React.useCallback(\n    (newItemChecked, itemValue) => {\n      if (!controlledChecked) return () => null\n      const newCheckedFn = generateNewCheckedFn(controlledChecked)\n      const newChecked = newCheckedFn(newItemChecked, itemValue)\n      onCheckedChange?.(newChecked)\n    },\n    [onCheckedChange, controlledChecked]\n  )\n\n  const handleItemCheckedChange = React.useCallback(\n    (newItemChecked, itemValue) => {\n      setChecked((prevChecked) => {\n        const newCheckedFn = generateNewCheckedFn(prevChecked)\n        const newChecked = newCheckedFn(newItemChecked, itemValue)\n        onCheckedChange?.(newChecked)\n        return newChecked\n      })\n    },\n    [onCheckedChange]\n  )\n\n  const value = React.useMemo<CheckboxGroupCheckedContextValue>(() => {\n    const isControlled = Array.isArray(controlledChecked)\n    return {\n      checked: isControlled\n        ? (controlledChecked as CheckboxGroupCheckedContextValue['checked']) // We're literally JUST checking it above but TS still flags it, wrongly, so casting\n        : checked,\n      handleItemCheckedChange: isControlled\n        ? handleItemControlledCheckedChange\n        : handleItemCheckedChange\n    }\n  }, [\n    checked,\n    handleItemCheckedChange,\n    handleItemControlledCheckedChange,\n    controlledChecked\n  ])\n\n  return <CheckboxGroupCheckedContext.Provider value={value} {...rest} />\n}\n"],"names":["CheckboxGroupCheckedContext","React","generateNewCheckedFn","currentChecked","newItemChecked","itemValue","newCheckedSet","CheckboxGroupCheckedProvider","controlledChecked","defaultChecked","onCheckedChange","rest","checked","setChecked","handleItemControlledCheckedChange","newChecked","handleItemCheckedChange","prevChecked","value","isControlled"],"mappings":"wBAoBO,MAAMA,EACXC,EAAM,cAAgD,CACpD,QAAS,CAAA,EACT,wBAAyB,IAAM,IACjC,CAAC,EAEGC,EACJC,GAEO,CAACC,EAAgBC,IAAc,CACpC,MAAMC,EAAgB,IAAI,IAAIH,CAAc,EAC5C,OAAAC,EACIE,EAAc,IAAID,CAAS,EAC3BC,EAAc,OAAOD,CAAS,EACf,MAAM,KAAKC,CAAa,CAE7C,EAGWC,EAA+B,CAAC,CAC3C,QAASC,EACT,eAAAC,EAAiB,CAAC,EAClB,gBAAAC,KACGC,CACL,IAAiE,CAC/D,KAAM,CAACC,EAASC,CAAU,EAAIZ,EAAM,SAASQ,CAAc,EAErDK,EAAoCb,EAAM,YAC9C,CAACG,EAAgBC,IAAc,CAC7B,GAAI,CAACG,EAAmB,MAAO,IAAM,KAErC,MAAMO,EADeb,EAAqBM,CAAiB,EAC3BJ,EAAgBC,CAAS,EACzDK,GAAA,MAAAA,EAAkBK,EACpB,EACA,CAACL,EAAiBF,CAAiB,CACrC,EAEMQ,EAA0Bf,EAAM,YACpC,CAACG,EAAgBC,IAAc,CAC7BQ,EAAYI,GAAgB,CAE1B,MAAMF,EADeb,EAAqBe,CAAW,EACrBb,EAAgBC,CAAS,EACzD,OAAAK,GAAA,MAAAA,EAAkBK,CAAAA,EACXA,CACT,CAAC,CACH,EACA,CAACL,CAAe,CAClB,EAEMQ,EAAQjB,EAAM,QAA0C,IAAM,CAClE,MAAMkB,EAAe,MAAM,QAAQX,CAAiB,EACpD,MAAO,CACL,QAASW,EACJX,EACDI,EACJ,wBAAyBO,EACrBL,EACAE,CACN,CACF,EAAG,CACDJ,EACAI,EACAF,EACAN,CACF,CAAC,EAED,OAAOP,EAAA,cAACD,EAA4B,SAA5B,CAAqC,MAAOkB,EAAQ,GAAGP,EAAM,CACvE"}

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

@@ -935,7 +935,7 @@ export declare const CheckboxTree: (({ checked, defaultChecked, onCheckedChange,
         slot?: string | undefined;
         style?: React.CSSProperties | undefined;
         title?: string | undefined;
-        ref?: React.Ref<HTMLUListElement> | undefined;
+        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
         key?: React.Key | null | undefined;
         defaultChecked?: boolean | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
@@ -1869,7 +1869,6 @@ export declare const CheckboxTree: (({ checked, defaultChecked, onCheckedChange,
             [x: string]: "center" | "left" | "right" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "space-around" | "space-between" | "space-evenly" | "end" | "flex-end" | "flex-start" | "start" | "normal" | "revert-layer" | "unsafe" | "safe" | undefined;
         }) | undefined;
         disabled?: boolean | undefined;
-        value?: string | number | readonly string[] | undefined;
         type?: "button" | "reset" | "submit" | undefined;
         autoFocus?: boolean | undefined;
         formAction?: string | undefined;
@@ -1877,6 +1876,7 @@ export declare const CheckboxTree: (({ checked, defaultChecked, onCheckedChange,
         formMethod?: string | undefined;
         formNoValidate?: boolean | undefined;
         formTarget?: string | undefined;
+        value?: string | number | readonly string[] | undefined;
         align?: "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "end" | "flex-end" | "flex-start" | "start" | "baseline" | "normal" | "self-end" | "self-start" | "revert-layer" | "unsafe" | "safe" | "first baseline" | "last baseline" | ({
             "@sm"?: "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "end" | "flex-end" | "flex-start" | "start" | "baseline" | "normal" | "self-end" | "self-start" | "revert-layer" | "unsafe" | "safe" | "first baseline" | "last baseline" | undefined;
             "@md"?: "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "end" | "flex-end" | "flex-start" | "start" | "baseline" | "normal" | "self-end" | "self-start" | "revert-layer" | "unsafe" | "safe" | "first baseline" | "last baseline" | undefined;
@@ -2548,7 +2548,6 @@ export declare const CheckboxTree: (({ checked, defaultChecked, onCheckedChange,
             [x: string]: "center" | "left" | "right" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "space-around" | "space-between" | "space-evenly" | "end" | "flex-end" | "flex-start" | "start" | "normal" | "revert-layer" | "unsafe" | "safe" | undefined;
         }) | undefined;
         disabled?: boolean | undefined;
-        value?: string | number | readonly string[] | undefined;
         type?: "button" | "reset" | "submit" | undefined;
         autoFocus?: boolean | undefined;
         formAction?: string | undefined;
@@ -2556,6 +2555,7 @@ export declare const CheckboxTree: (({ checked, defaultChecked, onCheckedChange,
         formMethod?: string | undefined;
         formNoValidate?: boolean | undefined;
         formTarget?: string | undefined;
+        value?: string | number | readonly string[] | undefined;
         align?: "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "end" | "flex-end" | "flex-start" | "start" | "baseline" | "normal" | "self-end" | "self-start" | "revert-layer" | "unsafe" | "safe" | "first baseline" | "last baseline" | ({
             "@sm"?: "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "end" | "flex-end" | "flex-start" | "start" | "baseline" | "normal" | "self-end" | "self-start" | "revert-layer" | "unsafe" | "safe" | "first baseline" | "last baseline" | undefined;
             "@md"?: "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "end" | "flex-end" | "flex-start" | "start" | "baseline" | "normal" | "self-end" | "self-start" | "revert-layer" | "unsafe" | "safe" | "first baseline" | "last baseline" | undefined;