@atom-learning/components 2.33.0 → 2.35.0

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

@@ -0,0 +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"}

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

@@ -22,6 +22,42 @@ declare const StyledSlide: import("@stitches/react/types/styled-component").Styl
         textPlaceholder: any;
         background: any;
         backgroundAccent: any;
+        grey100: any;
+        grey200: any;
+        grey300: any;
+        grey400: any;
+        grey500: any;
+        grey600: any;
+        grey700: any;
+        grey800: any;
+        grey900: any;
+        grey1000: any;
+        grey1100: any;
+        grey1200: any;
+        blue100: any;
+        blue200: any;
+        blue300: any;
+        blue400: any;
+        blue500: any;
+        blue600: any;
+        blue700: any;
+        blue800: any;
+        blue900: any;
+        blue1000: any;
+        blue1100: any;
+        blue1200: any;
+        purple100: any;
+        purple200: any;
+        purple300: any;
+        purple400: any;
+        purple500: any;
+        purple600: any;
+        purple700: any;
+        purple800: any;
+        purple900: any;
+        purple1000: any;
+        purple1100: any;
+        purple1200: any;
         tonal50: any;
         tonal100: any;
         tonal200: any;
@@ -79,6 +115,7 @@ declare const StyledSlide: import("@stitches/react/types/styled-component").Styl
         "7": any;
         "8": any;
         "9": any;
+        "24": any;
     };
     fontSizes: {
         xs: any;

package/dist/components/carousel/CarouselSlide.js

@@ -1 +1,2 @@
 import{Slide as r}from"pure-react-carousel";import*as e from"react";import{Box as m}from"../box/Box.js";import{styled as i}from"../../stitches.js";const l=i(r,{}),s=({children:t,...o})=>e.createElement(l,{...o,tag:"div"},e.createElement(m,{css:{px:"$3"}},t));export{s as CarouselSlide};
+//# sourceMappingURL=CarouselSlide.js.map

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

@@ -0,0 +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"}

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

@@ -24,6 +24,42 @@ export declare const CarouselSlider: import("@stitches/react/types/styled-compon
         textPlaceholder: any;
         background: any;
         backgroundAccent: any;
+        grey100: any;
+        grey200: any;
+        grey300: any;
+        grey400: any;
+        grey500: any;
+        grey600: any;
+        grey700: any;
+        grey800: any;
+        grey900: any;
+        grey1000: any;
+        grey1100: any;
+        grey1200: any;
+        blue100: any;
+        blue200: any;
+        blue300: any;
+        blue400: any;
+        blue500: any;
+        blue600: any;
+        blue700: any;
+        blue800: any;
+        blue900: any;
+        blue1000: any;
+        blue1100: any;
+        blue1200: any;
+        purple100: any;
+        purple200: any;
+        purple300: any;
+        purple400: any;
+        purple500: any;
+        purple600: any;
+        purple700: any;
+        purple800: any;
+        purple900: any;
+        purple1000: any;
+        purple1100: any;
+        purple1200: any;
         tonal50: any;
         tonal100: any;
         tonal200: any;
@@ -81,6 +117,7 @@ export declare const CarouselSlider: import("@stitches/react/types/styled-compon
         "7": any;
         "8": any;
         "9": any;
+        "24": any;
     };
     fontSizes: {
         xs: any;

package/dist/components/carousel/CarouselSlider.js

@@ -1 +1,2 @@
 import{Slider as r}from"pure-react-carousel";import{styled as e}from"../../stitches.js";const s=e(r,{cursor:"grab",ml:"50%",overflow:"hidden",transform:"translateX(-50%)",'& [class*="sliderTray_"]':{p:"unset",m:"unset",transition:"transform .5s cubic-bezier(.645,.045,.355,1)"},'& [class*="slide_"]':{float:"left",pb:"0 !important"},'& [class*="slideInner"]':{display:"flex",justifyContent:"center"},variants:{overflow:{true:{overflow:"visible"}}}});export{s as CarouselSlider};
+//# sourceMappingURL=CarouselSlider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CarouselSlider.js","sources":["../../../src/components/carousel/CarouselSlider.tsx"],"sourcesContent":["import { Slider as BaseSlider } from 'pure-react-carousel'\n\nimport { styled } from '~/stitches'\n\nexport const CarouselSlider = styled(BaseSlider, {\n  cursor: 'grab',\n  ml: '50%',\n  overflow: 'hidden',\n  transform: 'translateX(-50%)',\n  '& [class*=\"sliderTray_\"]': {\n    p: 'unset',\n    m: 'unset',\n    transition: 'transform .5s cubic-bezier(.645,.045,.355,1)'\n  },\n  '& [class*=\"slide_\"]': {\n    float: 'left',\n    pb: '0 !important'\n  },\n  '& [class*=\"slideInner\"]': {\n    display: 'flex',\n    justifyContent: 'center'\n  },\n  variants: {\n    overflow: {\n      true: {\n        overflow: 'visible'\n      }\n    }\n  }\n})\n"],"names":["CarouselSlider","styled","BaseSlider"],"mappings":"wFAIO,MAAMA,EAAiBC,EAAOC,EAAY,CAC/C,OAAQ,OACR,GAAI,MACJ,SAAU,SACV,UAAW,mBACX,2BAA4B,CAC1B,EAAG,QACH,EAAG,QACH,WAAY,8CACd,EACA,sBAAuB,CACrB,MAAO,OACP,GAAI,cACN,EACA,0BAA2B,CACzB,QAAS,OACT,eAAgB,QAClB,EACA,SAAU,CACR,SAAU,CACR,KAAM,CACJ,SAAU,SACZ,CACF,CACF,CACF,CAAC"}

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

@@ -25,6 +25,42 @@ declare const StyledCheckbox: import("@stitches/react/types/styled-component").S
         textPlaceholder: any;
         background: any;
         backgroundAccent: any;
+        grey100: any;
+        grey200: any;
+        grey300: any;
+        grey400: any;
+        grey500: any;
+        grey600: any;
+        grey700: any;
+        grey800: any;
+        grey900: any;
+        grey1000: any;
+        grey1100: any;
+        grey1200: any;
+        blue100: any;
+        blue200: any;
+        blue300: any;
+        blue400: any;
+        blue500: any;
+        blue600: any;
+        blue700: any;
+        blue800: any;
+        blue900: any;
+        blue1000: any;
+        blue1100: any;
+        blue1200: any;
+        purple100: any;
+        purple200: any;
+        purple300: any;
+        purple400: any;
+        purple500: any;
+        purple600: any;
+        purple700: any;
+        purple800: any;
+        purple900: any;
+        purple1000: any;
+        purple1100: any;
+        purple1200: any;
         tonal50: any;
         tonal100: any;
         tonal200: any;
@@ -82,6 +118,7 @@ declare const StyledCheckbox: import("@stitches/react/types/styled-component").S
         "7": any;
         "8": any;
         "9": any;
+        "24": any;
     };
     fontSizes: {
         xs: any;

package/dist/components/checkbox/Checkbox.js

@@ -1 +1,2 @@
 import{Minus as i,Ok as l}from"@atom-learning/icons";import*as e from"@radix-ui/react-checkbox";import*as o from"react";import{styled as t}from"../../stitches.js";import{Icon as s}from"../icon/Icon.js";const d=t(e.Indicator,{display:"flex",alignItems:"center",justifyContent:"center"}),c=t(e.Root,{appearance:"none",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",'&[data-state="checked"]':{backgroundColor:"$primary",borderColor:"$primary"},'&[data-state="indeterminate"]':{backgroundColor:"$primary",borderColor:"$primary"},"&:focus":{outline:"2px solid $primary",outlineOffset:"1px"},"&[disabled]":{backgroundColor:"$tonal100",borderColor:"$tonal400",cursor:"not-allowed",color:"$tonal400"},variants:{state:{error:{borderColor:"$danger"}}}}),a=o.forwardRef((r,n)=>o.createElement(c,{...r,ref:n},o.createElement(d,null,o.createElement(s,{is:r.checked==="indeterminate"?i:l,css:{pointerEvents:"none",position:"absolute",strokeWidth:"3",size:14}}))));a.displayName="Checkbox";export{a as Checkbox};
+//# sourceMappingURL=Checkbox.js.map

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

@@ -0,0 +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'\n\nimport { Icon } from '../icon'\n\nconst StyledIndicator = styled(RadixCheckbox.Indicator, {\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center'\n})\n\nconst StyledCheckbox = styled(RadixCheckbox.Root, {\n  appearance: 'none',\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  '&[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]': {\n    backgroundColor: '$tonal100',\n    borderColor: '$tonal400',\n    cursor: 'not-allowed',\n    color: '$tonal400'\n  },\n  variants: {\n    state: {\n      error: {\n        borderColor: '$danger'\n      }\n    }\n  }\n})\n\ntype CheckboxProps = React.ComponentProps<typeof StyledCheckbox>\n\nexport const Checkbox: React.FC<CheckboxProps> = React.forwardRef(\n  (props, ref) => (\n    <StyledCheckbox {...props} ref={ref}>\n      <StyledIndicator>\n        <Icon\n          is={props.checked === 'indeterminate' ? Minus : Ok}\n          css={{\n            pointerEvents: 'none',\n            position: 'absolute',\n            strokeWidth: '3',\n            size: 14\n          }}\n        />\n      </StyledIndicator>\n    </StyledCheckbox>\n  )\n)\n\nCheckbox.displayName = 'Checkbox'\n"],"names":["StyledIndicator","styled","RadixCheckbox","StyledCheckbox","Checkbox","React","props","ref","Icon","Minus","Ok"],"mappings":"0MAQA,MAAMA,EAAkBC,EAAOC,EAAc,UAAW,CACtD,QAAS,OACT,WAAY,SACZ,eAAgB,QAClB,CAAC,EAEKC,EAAiBF,EAAOC,EAAc,KAAM,CAChD,WAAY,OACZ,gBAAiB,cACjB,OAAQ,6BACR,aAAc,MACd,MAAO,QACP,OAAQ,UACR,KAAM,KACN,EAAG,EACH,QAAS,OACT,WAAY,SACZ,eAAgB,SAChB,WAAY,oBACZ,0BAA2B,CACzB,gBAAiB,WACjB,YAAa,UACf,EACA,gCAAiC,CAC/B,gBAAiB,WACjB,YAAa,UACf,EACA,UAAW,CACT,QAAS,qBACT,cAAe,KACjB,EACA,cAAe,CACb,gBAAiB,YACjB,YAAa,YACb,OAAQ,cACR,MAAO,WACT,EACA,SAAU,CACR,MAAO,CACL,MAAO,CACL,YAAa,SACf,CACF,CACF,CACF,CAAC,EAIYE,EAAoCC,EAAM,WACrD,CAACC,EAAOC,IACNF,EAAA,cAACF,EAAA,CAAgB,GAAGG,EAAO,IAAKC,GAC9BF,EAAA,cAACL,EAAA,KACCK,EAAA,cAACG,EAAA,CACC,GAAIF,EAAM,UAAY,gBAAkBG,EAAQC,EAChD,IAAK,CACH,cAAe,OACf,SAAU,WACV,YAAa,IACb,KAAM,EACR,EACF,CACF,CACF,CAEJ,EAEAN,EAAS,YAAc"}

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

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

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

@@ -0,0 +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  ...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={onChange}\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","remainingProps","control","useFormContext","error","useFieldError","ref","onChange","innerChecked","innerName","useController","React","InlineFieldWrapper","Checkbox"],"mappings":"qVAaA,IAAKA,GAAAA,IACHA,EAAA,GAAK,KACLA,EAAA,IAAM,MAFHA,IAAAA,GAAA,IAKQ,MAAAC,EAA8C,CAAC,CAC1D,IAAAC,EACA,MAAAC,EACA,KAAAC,EACA,WAAAC,EACA,YAAAC,EACA,eAAAC,EAAiB,GACjB,QAAAC,KACGC,CACL,IAAM,CACJ,KAAM,CAAE,QAAAC,CAAQ,EAAIC,EAAe,EAC7B,CAAE,MAAAC,CAAM,EAAIC,EAAcT,CAAI,EAC9B,CACJ,MAAO,CAAE,IAAAU,EAAK,SAAAC,EAAU,MAAOC,EAAc,KAAMC,CAAU,CAC/D,EAAIC,EAAc,CAChB,KAAAd,EACA,QAAAM,EACA,MAAOL,EACP,aAAcE,CAChB,CAAC,EAED,OAAAY,EAAM,UAAU,IAAM,CAEhB,OAAOX,EAAY,KAAaO,EAASP,CAAO,CACtD,EAAG,CAACA,CAAO,CAAC,EAGVW,EAAA,cAACC,EAAA,CACC,IAAKlB,EACL,YAAaI,EACb,MAAOM,EACP,MAAOT,EACP,SAAU,QAAQE,GAAA,KAAA,OAAAA,EAAY,QAAQ,CAAA,EAEtCc,EAAA,cAACE,EAAA,CACC,IAAKP,EACL,KAAMG,EACL,GAAGR,EACJ,gBAAiBM,EACjB,MAAOC,EAAe,KAAmB,MACzC,QAASA,EACR,GAAIJ,GAAS,CAAE,MAAO,OAAQ,CACjC,CAAA,CACF,CAEJ,EAEAX,EAAc,YAAc"}

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

@@ -23,6 +23,42 @@ export declare const StyledChipContent: import("@stitches/react/types/styled-com
         textPlaceholder: any;
         background: any;
         backgroundAccent: any;
+        grey100: any;
+        grey200: any;
+        grey300: any;
+        grey400: any;
+        grey500: any;
+        grey600: any;
+        grey700: any;
+        grey800: any;
+        grey900: any;
+        grey1000: any;
+        grey1100: any;
+        grey1200: any;
+        blue100: any;
+        blue200: any;
+        blue300: any;
+        blue400: any;
+        blue500: any;
+        blue600: any;
+        blue700: any;
+        blue800: any;
+        blue900: any;
+        blue1000: any;
+        blue1100: any;
+        blue1200: any;
+        purple100: any;
+        purple200: any;
+        purple300: any;
+        purple400: any;
+        purple500: any;
+        purple600: any;
+        purple700: any;
+        purple800: any;
+        purple900: any;
+        purple1000: any;
+        purple1100: any;
+        purple1200: any;
         tonal50: any;
         tonal100: any;
         tonal200: any;
@@ -80,6 +116,7 @@ export declare const StyledChipContent: import("@stitches/react/types/styled-com
         "7": any;
         "8": any;
         "9": any;
+        "24": any;
     };
     fontSizes: {
         xs: any;
@@ -204,6 +241,42 @@ export declare const StyledChipIcon: import("@stitches/react/types/styled-compon
             textPlaceholder: any;
             background: any;
             backgroundAccent: any;
+            grey100: any;
+            grey200: any;
+            grey300: any;
+            grey400: any;
+            grey500: any;
+            grey600: any;
+            grey700: any;
+            grey800: any;
+            grey900: any;
+            grey1000: any;
+            grey1100: any;
+            grey1200: any;
+            blue100: any;
+            blue200: any;
+            blue300: any;
+            blue400: any;
+            blue500: any;
+            blue600: any;
+            blue700: any;
+            blue800: any;
+            blue900: any;
+            blue1000: any;
+            blue1100: any;
+            blue1200: any;
+            purple100: any;
+            purple200: any;
+            purple300: any;
+            purple400: any;
+            purple500: any;
+            purple600: any;
+            purple700: any;
+            purple800: any;
+            purple900: any;
+            purple1000: any;
+            purple1100: any;
+            purple1200: any;
             tonal50: any;
             tonal100: any;
             tonal200: any;
@@ -261,6 +334,7 @@ export declare const StyledChipIcon: import("@stitches/react/types/styled-compon
             "7": any;
             "8": any;
             "9": any;
+            "24": any;
         };
         fontSizes: {
             xs: any;
@@ -383,6 +457,42 @@ export declare const StyledChipIcon: import("@stitches/react/types/styled-compon
         textPlaceholder: any;
         background: any;
         backgroundAccent: any;
+        grey100: any;
+        grey200: any;
+        grey300: any;
+        grey400: any;
+        grey500: any;
+        grey600: any;
+        grey700: any;
+        grey800: any;
+        grey900: any;
+        grey1000: any;
+        grey1100: any;
+        grey1200: any;
+        blue100: any;
+        blue200: any;
+        blue300: any;
+        blue400: any;
+        blue500: any;
+        blue600: any;
+        blue700: any;
+        blue800: any;
+        blue900: any;
+        blue1000: any;
+        blue1100: any;
+        blue1200: any;
+        purple100: any;
+        purple200: any;
+        purple300: any;
+        purple400: any;
+        purple500: any;
+        purple600: any;
+        purple700: any;
+        purple800: any;
+        purple900: any;
+        purple1000: any;
+        purple1100: any;
+        purple1200: any;
         tonal50: any;
         tonal100: any;
         tonal200: any;
@@ -440,6 +550,7 @@ export declare const StyledChipIcon: import("@stitches/react/types/styled-compon
         "7": any;
         "8": any;
         "9": any;
+        "24": any;
     };
     fontSizes: {
         xs: any;
@@ -564,6 +675,42 @@ export declare const StyledRoot: import("@stitches/react/types/styled-component"
         textPlaceholder: any;
         background: any;
         backgroundAccent: any;
+        grey100: any;
+        grey200: any;
+        grey300: any;
+        grey400: any;
+        grey500: any;
+        grey600: any;
+        grey700: any;
+        grey800: any;
+        grey900: any;
+        grey1000: any;
+        grey1100: any;
+        grey1200: any;
+        blue100: any;
+        blue200: any;
+        blue300: any;
+        blue400: any;
+        blue500: any;
+        blue600: any;
+        blue700: any;
+        blue800: any;
+        blue900: any;
+        blue1000: any;
+        blue1100: any;
+        blue1200: any;
+        purple100: any;
+        purple200: any;
+        purple300: any;
+        purple400: any;
+        purple500: any;
+        purple600: any;
+        purple700: any;
+        purple800: any;
+        purple900: any;
+        purple1000: any;
+        purple1100: any;
+        purple1200: any;
         tonal50: any;
         tonal100: any;
         tonal200: any;
@@ -621,6 +768,7 @@ export declare const StyledRoot: import("@stitches/react/types/styled-component"
         "7": any;
         "8": any;
         "9": any;
+        "24": any;
     };
     fontSizes: {
         xs: any;
@@ -741,6 +889,42 @@ export declare const StyledRoot: import("@stitches/react/types/styled-component"
         textPlaceholder: any;
         background: any;
         backgroundAccent: any;
+        grey100: any;
+        grey200: any;
+        grey300: any;
+        grey400: any;
+        grey500: any;
+        grey600: any;
+        grey700: any;
+        grey800: any;
+        grey900: any;
+        grey1000: any;
+        grey1100: any;
+        grey1200: any;
+        blue100: any;
+        blue200: any;
+        blue300: any;
+        blue400: any;
+        blue500: any;
+        blue600: any;
+        blue700: any;
+        blue800: any;
+        blue900: any;
+        blue1000: any;
+        blue1100: any;
+        blue1200: any;
+        purple100: any;
+        purple200: any;
+        purple300: any;
+        purple400: any;
+        purple500: any;
+        purple600: any;
+        purple700: any;
+        purple800: any;
+        purple900: any;
+        purple1000: any;
+        purple1100: any;
+        purple1200: any;
         tonal50: any;
         tonal100: any;
         tonal200: any;
@@ -798,6 +982,7 @@ export declare const StyledRoot: import("@stitches/react/types/styled-component"
         "7": any;
         "8": any;
         "9": any;
+        "24": any;
     };
     fontSizes: {
         xs: any;
@@ -922,6 +1107,42 @@ export declare const ChipRootContext: React.Context<Omit<Omit<Pick<React.Detaile
             textPlaceholder: any;
             background: any;
             backgroundAccent: any;
+            grey100: any;
+            grey200: any;
+            grey300: any;
+            grey400: any;
+            grey500: any;
+            grey600: any;
+            grey700: any;
+            grey800: any;
+            grey900: any;
+            grey1000: any;
+            grey1100: any;
+            grey1200: any;
+            blue100: any;
+            blue200: any;
+            blue300: any;
+            blue400: any;
+            blue500: any;
+            blue600: any;
+            blue700: any;
+            blue800: any;
+            blue900: any;
+            blue1000: any;
+            blue1100: any;
+            blue1200: any;
+            purple100: any;
+            purple200: any;
+            purple300: any;
+            purple400: any;
+            purple500: any;
+            purple600: any;
+            purple700: any;
+            purple800: any;
+            purple900: any;
+            purple1000: any;
+            purple1100: any;
+            purple1200: any;
             tonal50: any;
             tonal100: any;
             tonal200: any;
@@ -979,6 +1200,7 @@ export declare const ChipRootContext: React.Context<Omit<Omit<Pick<React.Detaile
             "7": any;
             "8": any;
             "9": any;
+            "24": any;
         };
         fontSizes: {
             xs: any;
@@ -1101,6 +1323,42 @@ export declare const ChipRootContext: React.Context<Omit<Omit<Pick<React.Detaile
             textPlaceholder: any;
             background: any;
             backgroundAccent: any;
+            grey100: any;
+            grey200: any;
+            grey300: any;
+            grey400: any;
+            grey500: any;
+            grey600: any;
+            grey700: any;
+            grey800: any;
+            grey900: any;
+            grey1000: any;
+            grey1100: any;
+            grey1200: any;
+            blue100: any;
+            blue200: any;
+            blue300: any;
+            blue400: any;
+            blue500: any;
+            blue600: any;
+            blue700: any;
+            blue800: any;
+            blue900: any;
+            blue1000: any;
+            blue1100: any;
+            blue1200: any;
+            purple100: any;
+            purple200: any;
+            purple300: any;
+            purple400: any;
+            purple500: any;
+            purple600: any;
+            purple700: any;
+            purple800: any;
+            purple900: any;
+            purple1000: any;
+            purple1100: any;
+            purple1200: any;
             tonal50: any;
             tonal100: any;
             tonal200: any;
@@ -1158,6 +1416,7 @@ export declare const ChipRootContext: React.Context<Omit<Omit<Pick<React.Detaile
             "7": any;
             "8": any;
             "9": any;
+            "24": any;
         };
         fontSizes: {
             xs: any;

package/dist/components/chip/Chip.js

@@ -1 +1,2 @@
 import*as e from"react";import{Box as C}from"../box/Box.js";import{Flex as g}from"../flex/Flex.js";import{Icon as p}from"../icon/Icon.js";import{getTextVariant as a}from"../text/Text.js";import{styled as m}from"../../stitches.js";import{overrideStitchesVariantValue as z}from"../../utilities/override-stitches-variant-value/overrideStitchesVariantValue.js";const d={overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},h=m("span",{display:"inline-flex",alignItems:"center",px:"$1",flexGrow:1,...d,"& > *:not(:last-child)":{mr:"$1"}}),u={sm:"sm",md:"sm",lg:"md"},y=m(p,{flexShrink:0}),l=({...r})=>{const i=e.useContext(c),{size:t}=i,n=e.useMemo(()=>z(t,o=>u[o]),[t]);return e.createElement(y,{...r,size:n})},E=({children:r,...i})=>{const t=e.Children.toArray(r),n=t.length<=1;return e.createElement(h,{...i},t.map((o,$)=>!n&&typeof o=="string"?e.createElement(C,{as:"span",css:d,key:o},o):e.isValidElement(o)&&o.type===p?e.createElement(l,{key:`icon-${$}`,...o.props}):o))},f=m(g,{px:"$2",border:"1px solid",borderRadius:"$0",alignItems:"center",fontFamily:"$body",maxWidth:"100%",borderColor:"$primary",color:"$primaryMid",bg:"$primaryLight","&[data-disabled]":{opacity:"0.3",pointerEvents:"none"},variants:{size:{sm:{height:"$2",...a({size:"sm"})},md:{height:"$3",...a({size:"sm"})},lg:{height:"$4",...a({size:"md"})}}}}),c=e.createContext({}),x=({size:r,children:i})=>{const t=e.useMemo(()=>({size:r}),[r]);return e.createElement(c.Provider,{value:t},i)},v=e.forwardRef(({asWorkaround:r,size:i="md",...t},n)=>e.createElement(x,{size:i},e.createElement(f,{ref:n,as:r,size:i,...t}))),s=v;s.Content=E,s.Icon=l,s.displayName="Chip";export{s as Chip,l as ChipIcon,c as ChipRootContext,x as ChipRootProvider,h as StyledChipContent,y as StyledChipIcon,f as StyledRoot};
+//# sourceMappingURL=Chip.js.map

package/dist/components/chip/Chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.js","sources":["../../../src/components/chip/Chip.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Box } from '~/components/box'\nimport { Flex } from '~/components/flex'\nimport { Icon } from '~/components/icon'\nimport { getTextVariant } from '~/components/text'\nimport { styled } from '~/stitches'\nimport { overrideStitchesVariantValue } from '~/utilities/override-stitches-variant-value/overrideStitchesVariantValue'\n\nconst overflowElipsis = {\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap'\n}\nexport const StyledChipContent = styled('span', {\n  display: 'inline-flex',\n  alignItems: 'center',\n  px: '$1',\n  flexGrow: 1,\n  ...overflowElipsis,\n  '& > *:not(:last-child)': {\n    mr: '$1'\n  }\n})\n\nconst toIconSize = { sm: 'sm', md: 'sm', lg: 'md' }\nexport const StyledChipIcon = styled(Icon, {\n  flexShrink: 0\n})\nexport const ChipIcon: typeof Icon = ({ ...props }) => {\n  const rootContext = React.useContext(ChipRootContext)\n  const { size } = rootContext\n  const iconSize = React.useMemo(\n    () => overrideStitchesVariantValue(size, (s) => toIconSize[s]),\n    [size]\n  )\n  return <StyledChipIcon {...props} size={iconSize} />\n}\n\nconst ChipContent = ({ children, ...rest }) => {\n  const childrenArray = React.Children.toArray(children)\n  const isSingleChild = childrenArray.length <= 1\n  return (\n    <StyledChipContent {...rest}>\n      {\n        childrenArray.map((child, index) => {\n          if (!isSingleChild && typeof child === 'string')\n            return (\n              <Box as=\"span\" css={overflowElipsis} key={child}>\n                {child}\n              </Box>\n            )\n          if (React.isValidElement(child) && child.type === Icon) {\n            return <ChipIcon key={`icon-${index}`} {...child.props} />\n          }\n          return child\n        }) as React.ReactElement[]\n      }\n    </StyledChipContent>\n  )\n}\n\nexport const StyledRoot = styled(Flex, {\n  px: '$2',\n  border: '1px solid',\n  borderRadius: '$0',\n  alignItems: 'center',\n  fontFamily: '$body',\n  maxWidth: '100%',\n  borderColor: '$primary',\n  color: '$primaryMid',\n  bg: '$primaryLight',\n  '&[data-disabled]': {\n    opacity: '0.3',\n    pointerEvents: 'none'\n  },\n  variants: {\n    size: {\n      sm: {\n        height: '$2',\n        ...getTextVariant({ size: 'sm' })\n      },\n      md: {\n        height: '$3',\n        ...getTextVariant({ size: 'sm' })\n      },\n      lg: {\n        height: '$4',\n        ...getTextVariant({ size: 'md' })\n      }\n    }\n  }\n})\n\nexport type TChipRootContext = React.ComponentProps<typeof StyledRoot>\nexport type TChipRootProviderProps = TChipRootContext\n\nexport const ChipRootContext = React.createContext<TChipRootContext>({})\n\nexport const ChipRootProvider: React.FC<TChipRootProviderProps> = ({\n  size,\n  children\n}) => {\n  const value = React.useMemo<TChipRootContext>(() => ({ size }), [size])\n  return (\n    <ChipRootContext.Provider value={value}>\n      {children}\n    </ChipRootContext.Provider>\n  )\n}\n\nexport type TChipRootProps = TChipRootProviderProps & {\n  asWorkaround?: React.ElementType // (!?) `asWorkaround` rather than `as` because, it seems, when we extend this via `styled()` stitches overrides this component from the first argument for the value in `as`\n}\n\nconst ChipRoot: React.ForwardRefExoticComponent<TChipRootProps> =\n  React.forwardRef(({ asWorkaround, size = 'md', ...rest }, ref) => {\n    return (\n      <ChipRootProvider size={size}>\n        <StyledRoot ref={ref} as={asWorkaround} size={size} {...rest} />\n      </ChipRootProvider>\n    )\n  })\n\ntype TChipType = typeof ChipRoot & {\n  Content: typeof ChipContent\n  Icon: typeof ChipIcon\n}\n\nexport const Chip = ChipRoot as TChipType\nChip.Content = ChipContent\nChip.Icon = ChipIcon\nChip.displayName = 'Chip'\n"],"names":["overflowElipsis","StyledChipContent","styled","toIconSize","StyledChipIcon","Icon","ChipIcon","props","rootContext","React","ChipRootContext","size","iconSize","overrideStitchesVariantValue","s","ChipContent","children","rest","childrenArray","isSingleChild","child","index","Box","StyledRoot","Flex","getTextVariant","ChipRootProvider","value","ChipRoot","asWorkaround","ref","Chip"],"mappings":"qWASA,MAAMA,EAAkB,CACtB,SAAU,SACV,aAAc,WACd,WAAY,QACd,EACaC,EAAoBC,EAAO,OAAQ,CAC9C,QAAS,cACT,WAAY,SACZ,GAAI,KACJ,SAAU,EACV,GAAGF,EACH,yBAA0B,CACxB,GAAI,IACN,CACF,CAAC,EAEKG,EAAa,CAAE,GAAI,KAAM,GAAI,KAAM,GAAI,IAAK,EACrCC,EAAiBF,EAAOG,EAAM,CACzC,WAAY,CACd,CAAC,EACYC,EAAwB,CAAC,IAAKC,CAAM,IAAM,CACrD,MAAMC,EAAcC,EAAM,WAAWC,CAAe,EAC9C,CAAE,KAAAC,CAAK,EAAIH,EACXI,EAAWH,EAAM,QACrB,IAAMI,EAA6BF,EAAOG,GAAMX,EAAWW,EAAE,EAC7D,CAACH,CAAI,CACP,EACA,OAAOF,EAAA,cAACL,EAAgB,CAAA,GAAGG,EAAO,KAAMK,CAAAA,CAAU,CACpD,EAEMG,EAAc,CAAC,CAAE,SAAAC,KAAaC,CAAK,IAAM,CAC7C,MAAMC,EAAgBT,EAAM,SAAS,QAAQO,CAAQ,EAC/CG,EAAgBD,EAAc,QAAU,EAC9C,OACET,EAAA,cAACR,EAAmB,CAAA,GAAGgB,GAEnBC,EAAc,IAAI,CAACE,EAAOC,IACpB,CAACF,GAAiB,OAAOC,GAAU,SAEnCX,EAAA,cAACa,EAAA,CAAI,GAAG,OAAO,IAAKtB,EAAiB,IAAKoB,CACvCA,EAAAA,CACH,EAEAX,EAAM,eAAeW,CAAK,GAAKA,EAAM,OAASf,EACzCI,EAAA,cAACH,EAAA,CAAS,IAAK,QAAQe,IAAU,GAAGD,EAAM,KAAO,CAAA,EAEnDA,CACR,CAEL,CAEJ,EAEaG,EAAarB,EAAOsB,EAAM,CACrC,GAAI,KACJ,OAAQ,YACR,aAAc,KACd,WAAY,SACZ,WAAY,QACZ,SAAU,OACV,YAAa,WACb,MAAO,cACP,GAAI,gBACJ,mBAAoB,CAClB,QAAS,MACT,cAAe,MACjB,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CACF,OAAQ,KACR,GAAGC,EAAe,CAAE,KAAM,IAAK,CAAC,CAClC,EACA,GAAI,CACF,OAAQ,KACR,GAAGA,EAAe,CAAE,KAAM,IAAK,CAAC,CAClC,EACA,GAAI,CACF,OAAQ,KACR,GAAGA,EAAe,CAAE,KAAM,IAAK,CAAC,CAClC,CACF,CACF,CACF,CAAC,EAKYf,EAAkBD,EAAM,cAAgC,EAAE,EAE1DiB,EAAqD,CAAC,CACjE,KAAAf,EACA,SAAAK,CACF,IAAM,CACJ,MAAMW,EAAQlB,EAAM,QAA0B,KAAO,CAAE,KAAAE,CAAK,GAAI,CAACA,CAAI,CAAC,EACtE,OACEF,EAAA,cAACC,EAAgB,SAAhB,CAAyB,MAAOiB,CAC9BX,EAAAA,CACH,CAEJ,EAMMY,EACJnB,EAAM,WAAW,CAAC,CAAE,aAAAoB,EAAc,KAAAlB,EAAO,QAASM,CAAK,EAAGa,IAEtDrB,EAAA,cAACiB,EAAA,CAAiB,KAAMf,CACtBF,EAAAA,EAAA,cAACc,EAAW,CAAA,IAAKO,EAAK,GAAID,EAAc,KAAMlB,EAAO,GAAGM,CAAM,CAAA,CAChE,CAEH,EAOUc,EAAOH,EACpBG,EAAK,QAAUhB,EACfgB,EAAK,KAAOzB,EACZyB,EAAK,YAAc"}

package/dist/components/chip/ChipGroup.js

@@ -1 +1,2 @@
 import*as r from"react";import{Stack as a}from"../stack/Stack.js";const p=r.forwardRef(({gap:o=2,...t},e)=>r.createElement(a,{ref:e,direction:"row",gap:o,align:!1,...t}));export{p as ChipGroup};
+//# sourceMappingURL=ChipGroup.js.map

package/dist/components/chip/ChipGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChipGroup.js","sources":["../../../src/components/chip/ChipGroup.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Stack } from '~/components/stack'\n\ntype TChipGroupProps = {\n  gap: 1 | 2 | 3\n}\n\nexport const ChipGroup: React.ForwardRefExoticComponent<\n  TChipGroupProps & React.ComponentProps<typeof Stack>\n> = React.forwardRef(({ gap = 2, ...rest }, ref) => {\n  return <Stack ref={ref} direction=\"row\" gap={gap} align={false} {...rest} />\n})\n"],"names":["ChipGroup","React","gap","rest","ref","Stack"],"mappings":"kEAQO,MAAMA,EAETC,EAAM,WAAW,CAAC,CAAE,IAAAC,EAAM,KAAMC,CAAK,EAAGC,IACnCH,EAAA,cAACI,EAAA,CAAM,IAAKD,EAAK,UAAU,MAAM,IAAKF,EAAK,MAAO,GAAQ,GAAGC,EAAM,CAC3E"}