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

package/dist/components/chip-toggle-group/ChipToggleGroupItem.js

@@ -1,2 +1,2 @@
-import{Ok as m}from"@atom-learning/icons";import*as n from"@radix-ui/react-toggle-group";import*as o from"react";import{Chip as r}from"../chip/Chip.js";import"../chip/ChipGroup.js";import{Icon as s}from"../icon/Icon.js";import{styled as e}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{focusVisibleStyleBlock as p}from"../../utilities/style/focus-visible-style-block.js";import"../../utilities/style/keyframe-animations.js";const i=e(s,{display:"none"}),c=e.withConfig({shouldForwardStitchesProp:t=>["as"].includes(t)})(r,{"&:not([disabled])":{cursor:"pointer","&:hover":{bg:"$tonal100",color:"$tonal600",borderColor:"currentColor"},"&:focus-visible":{...p()},'&[data-state="on"]':{"&:hover":{bg:"white",color:"$primary1000"}}},'&[data-state="off"]':{color:"$tonal400",bg:"$tonal50",borderColor:"$tonal200"},'&[data-state="on"]':{[`& ${i}`]:{display:"block"}}}),d=({size:t="md",children:l,...a})=>o.createElement(n.Item,{...a,asChild:!0},o.createElement(c,{as:"button"},o.createElement(i,{is:m,size:t==="lg"?"md":"sm"}),o.createElement(r.Content,null,l)));export{d as ChipToggleGroupItem};
+import{Ok as s}from"@atom-learning/icons";import*as a from"@radix-ui/react-toggle-group";import*as o from"react";import{Chip as e}from"../chip/Chip.js";import"../chip/ChipGroup.js";import{Icon as p}from"../icon/Icon.js";import{styled as t}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{focusVisibleStyleBlock as n}from"../../utilities/style/focus-visible-style-block.js";import"../../utilities/style/keyframe-animations.js";const i=t(p,{display:"none"}),c=t.withConfig({shouldForwardStitchesProp:r=>["as"].includes(r)})(e,{"&:not([disabled])":{cursor:"pointer","&:hover":{bg:"$grey200",color:"$grey1000",borderColor:"currentColor"},"&:focus-visible":{...n()},'&[data-state="on"]':{"&:hover":{bg:"white",color:"$primary1000"}}},'&[data-state="off"]':{color:"$grey800",bg:"$grey100",borderColor:"$grey600"},'&[data-state="on"]':{[`& ${i}`]:{display:"block"}}}),d=({size:r="md",children:m,...l})=>o.createElement(a.Item,{...l,asChild:!0},o.createElement(c,{as:"button"},o.createElement(i,{is:s,size:r==="lg"?"md":"sm"}),o.createElement(e.Content,null,m)));export{d as ChipToggleGroupItem};
 //# sourceMappingURL=ChipToggleGroupItem.js.map

package/dist/components/chip-toggle-group/ChipToggleGroupItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChipToggleGroupItem.js","sources":["../../../src/components/chip-toggle-group/ChipToggleGroupItem.tsx"],"sourcesContent":["import { Ok } from '@atom-learning/icons'\nimport * as ToggleGroup from '@radix-ui/react-toggle-group'\nimport * as React from 'react'\n\nimport { Chip } from '~/components/chip'\nimport { Icon } from '~/components/icon'\nimport { styled } from '~/stitches'\nimport { focusVisibleStyleBlock } from '~/utilities'\n\nconst StyledChipToggleIcon = styled(Icon, {\n  display: 'none'\n})\n\nconst StyledChipToggleGroupItem = styled.withConfig({\n  shouldForwardStitchesProp: (propName) => ['as'].includes(propName)\n})(Chip, {\n  '&:not([disabled])': {\n    cursor: 'pointer',\n    '&:hover': {\n      bg: '$tonal100',\n      color: '$tonal600',\n      borderColor: 'currentColor'\n    },\n    '&:focus-visible': {\n      ...focusVisibleStyleBlock()\n    },\n    '&[data-state=\"on\"]': {\n      '&:hover': {\n        bg: 'white',\n        color: '$primary1000'\n      }\n    }\n  },\n  '&[data-state=\"off\"]': {\n    color: '$tonal400',\n    bg: '$tonal50',\n    borderColor: '$tonal200'\n  },\n  '&[data-state=\"on\"]': {\n    [`& ${StyledChipToggleIcon}`]: {\n      display: 'block'\n    }\n  }\n})\n\ntype TChipToggleGroupItem = React.ComponentProps<typeof ToggleGroup.Item> &\n  React.ComponentProps<typeof StyledChipToggleGroupItem>\n\nexport const ChipToggleGroupItem = ({\n  size = 'md',\n  children,\n  ...rest\n}: TChipToggleGroupItem) => {\n  return (\n    <ToggleGroup.Item {...rest} asChild>\n      <StyledChipToggleGroupItem as=\"button\">\n        <StyledChipToggleIcon is={Ok} size={size === 'lg' ? 'md' : 'sm'} />\n        <Chip.Content>{children}</Chip.Content>\n      </StyledChipToggleGroupItem>\n    </ToggleGroup.Item>\n  )\n}\n"],"names":["StyledChipToggleIcon","styled","Icon","StyledChipToggleGroupItem","propName","Chip","focusVisibleStyleBlock","ChipToggleGroupItem","size","children","rest","React","ToggleGroup","Ok"],"mappings":"2hBASA,MAAMA,EAAuBC,EAAOC,EAAM,CACxC,QAAS,MACX,CAAC,EAEKC,EAA4BF,EAAO,WAAW,CAClD,0BAA4BG,GAAa,CAAC,IAAI,EAAE,SAASA,CAAQ,CACnE,CAAC,EAAEC,EAAM,CACP,oBAAqB,CACnB,OAAQ,UACR,UAAW,CACT,GAAI,YACJ,MAAO,YACP,YAAa,cACf,EACA,kBAAmB,CACjB,GAAGC,GACL,EACA,qBAAsB,CACpB,UAAW,CACT,GAAI,QACJ,MAAO,cACT,CACF,CACF,EACA,sBAAuB,CACrB,MAAO,YACP,GAAI,WACJ,YAAa,WACf,EACA,qBAAsB,CACpB,CAAC,KAAKN,KAAyB,CAC7B,QAAS,OACX,CACF,CACF,CAAC,EAKYO,EAAsB,CAAC,CAClC,KAAAC,EAAO,KACP,SAAAC,KACGC,CACL,IAEIC,EAAA,cAACC,EAAY,KAAZ,CAAkB,GAAGF,EAAM,QAAO,EAAA,EACjCC,EAAA,cAACR,EAAA,CAA0B,GAAG,UAC5BQ,EAAA,cAACX,EAAA,CAAqB,GAAIa,EAAI,KAAML,IAAS,KAAO,KAAO,IAAA,CAAM,EACjEG,EAAA,cAACN,EAAK,QAAL,KAAcI,CAAS,CAC1B,CACF"}
+{"version":3,"file":"ChipToggleGroupItem.js","sources":["../../../src/components/chip-toggle-group/ChipToggleGroupItem.tsx"],"sourcesContent":["import { Ok } from '@atom-learning/icons'\nimport * as ToggleGroup from '@radix-ui/react-toggle-group'\nimport * as React from 'react'\n\nimport { Chip } from '~/components/chip'\nimport { Icon } from '~/components/icon'\nimport { styled } from '~/stitches'\nimport { focusVisibleStyleBlock } from '~/utilities'\n\nconst StyledChipToggleIcon = styled(Icon, {\n  display: 'none'\n})\n\nconst StyledChipToggleGroupItem = styled.withConfig({\n  shouldForwardStitchesProp: (propName) => ['as'].includes(propName)\n})(Chip, {\n  '&:not([disabled])': {\n    cursor: 'pointer',\n    '&:hover': {\n      bg: '$grey200',\n      color: '$grey1000',\n      borderColor: 'currentColor'\n    },\n    '&:focus-visible': {\n      ...focusVisibleStyleBlock()\n    },\n    '&[data-state=\"on\"]': {\n      '&:hover': {\n        bg: 'white',\n        color: '$primary1000'\n      }\n    }\n  },\n  '&[data-state=\"off\"]': {\n    color: '$grey800',\n    bg: '$grey100',\n    borderColor: '$grey600'\n  },\n  '&[data-state=\"on\"]': {\n    [`& ${StyledChipToggleIcon}`]: {\n      display: 'block'\n    }\n  }\n})\n\ntype TChipToggleGroupItem = React.ComponentProps<typeof ToggleGroup.Item> &\n  React.ComponentProps<typeof StyledChipToggleGroupItem>\n\nexport const ChipToggleGroupItem = ({\n  size = 'md',\n  children,\n  ...rest\n}: TChipToggleGroupItem) => {\n  return (\n    <ToggleGroup.Item {...rest} asChild>\n      <StyledChipToggleGroupItem as=\"button\">\n        <StyledChipToggleIcon is={Ok} size={size === 'lg' ? 'md' : 'sm'} />\n        <Chip.Content>{children}</Chip.Content>\n      </StyledChipToggleGroupItem>\n    </ToggleGroup.Item>\n  )\n}\n"],"names":["StyledChipToggleIcon","styled","Icon","StyledChipToggleGroupItem","propName","Chip","focusVisibleStyleBlock","ChipToggleGroupItem","size","children","rest","React","ToggleGroup","Ok"],"mappings":"2hBASA,MAAMA,EAAuBC,EAAOC,EAAM,CACxC,QAAS,MACX,CAAC,EAEKC,EAA4BF,EAAO,WAAW,CAClD,0BAA4BG,GAAa,CAAC,IAAI,EAAE,SAASA,CAAQ,CACnE,CAAC,EAAEC,EAAM,CACP,oBAAqB,CACnB,OAAQ,UACR,UAAW,CACT,GAAI,WACJ,MAAO,YACP,YAAa,cACf,EACA,kBAAmB,CACjB,GAAGC,GACL,EACA,qBAAsB,CACpB,UAAW,CACT,GAAI,QACJ,MAAO,cACT,CACF,CACF,EACA,sBAAuB,CACrB,MAAO,WACP,GAAI,WACJ,YAAa,UACf,EACA,qBAAsB,CACpB,CAAC,KAAKN,KAAyB,CAC7B,QAAS,OACX,CACF,CACF,CAAC,EAKYO,EAAsB,CAAC,CAClC,KAAAC,EAAO,KACP,SAAAC,KACGC,CACL,IAEIC,EAAA,cAACC,EAAY,KAAZ,CAAkB,GAAGF,EAAM,QAAO,EAAA,EACjCC,EAAA,cAACR,EAAA,CAA0B,GAAG,UAC5BQ,EAAA,cAACX,EAAA,CAAqB,GAAIa,EAAI,KAAML,IAAS,KAAO,KAAO,IAAA,CAAM,EACjEG,EAAA,cAACN,EAAK,QAAL,KAAcI,CAAS,CAC1B,CACF"}

package/dist/components/combobox/Combobox.d.ts

@@ -204,26 +204,11 @@ export declare const Combobox: import("@atom-learning/stitches-react/types/style
         marsh1000: any;
         marsh1100: any;
         marsh1200: any;
-        tonal50: any;
-        tonal100: any;
-        tonal200: any;
-        tonal300: any;
-        tonal400: any;
-        tonal500: any;
-        tonal600: any;
         alpha100: any;
         alpha150: any;
         alpha200: any;
         alpha250: any;
         alpha600: any;
-        brandRed: any;
-        brandRedAccent: any;
-        brandGreen: any;
-        brandGreenAccent: any;
-        brandPurple: any;
-        brandPurpleAccent: any;
-        brandYellow: any;
-        brandYellowAccent: any;
         infoLight: any;
         info: any;
         infoMid: any;
@@ -584,26 +569,11 @@ export declare const Combobox: import("@atom-learning/stitches-react/types/style
             marsh1000: any;
             marsh1100: any;
             marsh1200: any;
-            tonal50: any;
-            tonal100: any;
-            tonal200: any;
-            tonal300: any;
-            tonal400: any;
-            tonal500: any;
-            tonal600: any;
             alpha100: any;
             alpha150: any;
             alpha200: any;
             alpha250: any;
             alpha600: any;
-            brandRed: any;
-            brandRedAccent: any;
-            brandGreen: any;
-            brandGreenAccent: any;
-            brandPurple: any;
-            brandPurpleAccent: any;
-            brandYellow: any;
-            brandYellowAccent: any;
             infoLight: any;
             info: any;
             infoMid: any;
@@ -971,26 +941,11 @@ export declare const Combobox: import("@atom-learning/stitches-react/types/style
                 marsh1000: any;
                 marsh1100: any;
                 marsh1200: any;
-                tonal50: any;
-                tonal100: any;
-                tonal200: any;
-                tonal300: any;
-                tonal400: any;
-                tonal500: any;
-                tonal600: any;
                 alpha100: any;
                 alpha150: any;
                 alpha200: any;
                 alpha250: any;
                 alpha600: any;
-                brandRed: any;
-                brandRedAccent: any;
-                brandGreen: any;
-                brandGreenAccent: any;
-                brandPurple: any;
-                brandPurpleAccent: any;
-                brandYellow: any;
-                brandYellowAccent: any;
                 infoLight: any;
                 info: any;
                 infoMid: any;
@@ -1351,26 +1306,11 @@ export declare const Combobox: import("@atom-learning/stitches-react/types/style
             marsh1000: any;
             marsh1100: any;
             marsh1200: any;
-            tonal50: any;
-            tonal100: any;
-            tonal200: any;
-            tonal300: any;
-            tonal400: any;
-            tonal500: any;
-            tonal600: any;
             alpha100: any;
             alpha150: any;
             alpha200: any;
             alpha250: any;
             alpha600: any;
-            brandRed: any;
-            brandRedAccent: any;
-            brandGreen: any;
-            brandGreenAccent: any;
-            brandPurple: any;
-            brandPurpleAccent: any;
-            brandYellow: any;
-            brandYellowAccent: any;
             infoLight: any;
             info: any;
             infoMid: any;
@@ -1730,26 +1670,11 @@ export declare const Combobox: import("@atom-learning/stitches-react/types/style
             marsh1000: any;
             marsh1100: any;
             marsh1200: any;
-            tonal50: any;
-            tonal100: any;
-            tonal200: any;
-            tonal300: any;
-            tonal400: any;
-            tonal500: any;
-            tonal600: any;
             alpha100: any;
             alpha150: any;
             alpha200: any;
             alpha250: any;
             alpha600: any;
-            brandRed: any;
-            brandRedAccent: any;
-            brandGreen: any;
-            brandGreenAccent: any;
-            brandPurple: any;
-            brandPurpleAccent: any;
-            brandYellow: any;
-            brandYellowAccent: any;
             infoLight: any;
             info: any;
             infoMid: any;

package/dist/components/combobox/ComboboxInput.d.ts

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

package/dist/components/combobox/ComboboxInput.js

@@ -1,2 +1,2 @@
-import{ComboboxInput as i}from"@reach/combobox";import*as o from"react";import{styled as a,theme as l}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import{encodeBackgroundIcon as d}from"../../utilities/style/encode-background-icon.js";import"../../utilities/style/keyframe-animations.js";const e=a(i,{boxShadow:"none",appearance:"none",backgroundImage:d(l.colors.tonal300.value,"chevron"),backgroundPosition:"right $space$3 top 50%, 0 0",backgroundRepeat:"no-repeat, repeat",backgroundSize:"20px auto, 100%",border:"1px solid $tonal300",borderRadius:"$0",boxSizing:"border-box",color:"$tonal600",cursor:"text",display:"block",fontFamily:"$body",height:"$4",pl:"$3",pr:"$6",transition:"all 100ms ease-out",width:"100%","&::placeholder":{color:"$tonal300",opacity:1},"&:focus-within":{borderColor:"$primary800",outline:"none"},"&[disabled]":{backgroundColor:"$tonal100",color:"$tonal400",cursor:"not-allowed"},variants:{size:{sm:{height:"$3",fontSize:"$sm",lineHeight:1.7},md:{height:"$4",fontSize:"$md",lineHeight:2},lg:{height:"$5",fontSize:"$md",lineHeight:2}},state:{error:{border:"1px solid $danger"}}}}),p=o.forwardRef(({size:r="md",...t},n)=>o.createElement(e,{size:r,...t,ref:n}));export{p as ComboboxInput,e as StyledComboboxInput};
+import{ComboboxInput as n}from"@reach/combobox";import*as o from"react";import{styled as a,theme as d}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import{encodeBackgroundIcon as l}from"../../utilities/style/encode-background-icon.js";import"../../utilities/style/keyframe-animations.js";const e=a(n,{boxShadow:"none",appearance:"none",backgroundImage:l(d.colors.grey700.value,"chevron"),backgroundPosition:"right $space$3 top 50%, 0 0",backgroundRepeat:"no-repeat, repeat",backgroundSize:"20px auto, 100%",border:"1px solid $grey700",borderRadius:"$0",boxSizing:"border-box",color:"$grey1000",cursor:"text",display:"block",fontFamily:"$body",height:"$4",pl:"$3",pr:"$6",transition:"all 100ms ease-out",width:"100%","&::placeholder":{color:"$grey700",opacity:1},"&:focus-within":{borderColor:"$primary800",outline:"none"},"&[disabled]":{backgroundColor:"$grey200",color:"$grey800",cursor:"not-allowed"},variants:{size:{sm:{height:"$3",fontSize:"$sm",lineHeight:1.7},md:{height:"$4",fontSize:"$md",lineHeight:2},lg:{height:"$5",fontSize:"$md",lineHeight:2}},state:{error:{border:"1px solid $danger"}}}}),p=o.forwardRef(({size:r="md",...t},i)=>o.createElement(e,{size:r,...t,ref:i}));export{p as ComboboxInput,e as StyledComboboxInput};
 //# sourceMappingURL=ComboboxInput.js.map

package/dist/components/combobox/ComboboxInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxInput.js","sources":["../../../src/components/combobox/ComboboxInput.tsx"],"sourcesContent":["import { ComboboxInput as BaseComboboxInput } from '@reach/combobox'\nimport * as React from 'react'\n\nimport { styled, theme } from '~/stitches'\nimport { encodeBackgroundIcon } from '~/utilities'\nimport { Override } from '~/utilities/types'\n\nexport const StyledComboboxInput = styled(BaseComboboxInput, {\n  boxShadow: 'none', // prevent default iOS default styling\n  appearance: 'none',\n  backgroundImage: encodeBackgroundIcon(theme.colors.tonal300.value, 'chevron'),\n  backgroundPosition: 'right $space$3 top 50%, 0 0',\n  backgroundRepeat: 'no-repeat, repeat',\n  backgroundSize: '20px auto, 100%',\n  border: '1px solid $tonal300',\n  borderRadius: '$0',\n  boxSizing: 'border-box',\n  color: '$tonal600',\n  cursor: 'text',\n  display: 'block',\n  fontFamily: '$body',\n  height: '$4',\n  pl: '$3',\n  pr: '$6',\n  transition: 'all 100ms ease-out',\n  width: '100%',\n  '&::placeholder': {\n    color: '$tonal300',\n    opacity: 1\n  },\n  '&:focus-within': {\n    borderColor: '$primary800',\n    outline: 'none'\n  },\n  '&[disabled]': {\n    backgroundColor: '$tonal100',\n    color: '$tonal400',\n    cursor: 'not-allowed'\n  },\n  variants: {\n    size: {\n      sm: {\n        height: '$3',\n        fontSize: '$sm',\n        lineHeight: 1.7\n      },\n      md: {\n        height: '$4',\n        fontSize: '$md',\n        lineHeight: 2\n      },\n      lg: {\n        height: '$5',\n        fontSize: '$md',\n        lineHeight: 2\n      }\n    },\n    state: {\n      error: {\n        border: '1px solid $danger'\n      }\n    }\n  }\n})\n\nexport type ComboboxInputProps = React.ComponentProps<\n  typeof StyledComboboxInput\n>\n\nexport const ComboboxInput: React.ForwardRefExoticComponent<ComboboxInputProps> =\n  React.forwardRef(({ size = 'md', ...rest }, ref) => (\n    <StyledComboboxInput size={size} {...rest} ref={ref} />\n  ))\n"],"names":["StyledComboboxInput","styled","BaseComboboxInput","encodeBackgroundIcon","theme","ComboboxInput","React","size","rest","ref"],"mappings":"6XAOO,MAAMA,EAAsBC,EAAOC,EAAmB,CAC3D,UAAW,OACX,WAAY,OACZ,gBAAiBC,EAAqBC,EAAM,OAAO,SAAS,MAAO,SAAS,EAC5E,mBAAoB,8BACpB,iBAAkB,oBAClB,eAAgB,kBAChB,OAAQ,sBACR,aAAc,KACd,UAAW,aACX,MAAO,YACP,OAAQ,OACR,QAAS,QACT,WAAY,QACZ,OAAQ,KACR,GAAI,KACJ,GAAI,KACJ,WAAY,qBACZ,MAAO,OACP,iBAAkB,CAChB,MAAO,YACP,QAAS,CACX,EACA,iBAAkB,CAChB,YAAa,cACb,QAAS,MACX,EACA,cAAe,CACb,gBAAiB,YACjB,MAAO,YACP,OAAQ,aACV,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CACF,OAAQ,KACR,SAAU,MACV,WAAY,GACd,EACA,GAAI,CACF,OAAQ,KACR,SAAU,MACV,WAAY,CACd,EACA,GAAI,CACF,OAAQ,KACR,SAAU,MACV,WAAY,CACd,CACF,EACA,MAAO,CACL,MAAO,CACL,OAAQ,mBACV,CACF,CACF,CACF,CAAC,EAMYC,EACXC,EAAM,WAAW,CAAC,CAAE,KAAAC,EAAO,QAASC,CAAK,EAAGC,IAC1CH,EAAA,cAACN,EAAA,CAAoB,KAAMO,EAAO,GAAGC,EAAM,IAAKC,EAAK,CACtD"}
+{"version":3,"file":"ComboboxInput.js","sources":["../../../src/components/combobox/ComboboxInput.tsx"],"sourcesContent":["import { ComboboxInput as BaseComboboxInput } from '@reach/combobox'\nimport * as React from 'react'\n\nimport { styled, theme } from '~/stitches'\nimport { encodeBackgroundIcon } from '~/utilities'\nimport { Override } from '~/utilities/types'\n\nexport const StyledComboboxInput = styled(BaseComboboxInput, {\n  boxShadow: 'none', // prevent default iOS default styling\n  appearance: 'none',\n  backgroundImage: encodeBackgroundIcon(theme.colors.grey700.value, 'chevron'),\n  backgroundPosition: 'right $space$3 top 50%, 0 0',\n  backgroundRepeat: 'no-repeat, repeat',\n  backgroundSize: '20px auto, 100%',\n  border: '1px solid $grey700',\n  borderRadius: '$0',\n  boxSizing: 'border-box',\n  color: '$grey1000',\n  cursor: 'text',\n  display: 'block',\n  fontFamily: '$body',\n  height: '$4',\n  pl: '$3',\n  pr: '$6',\n  transition: 'all 100ms ease-out',\n  width: '100%',\n  '&::placeholder': {\n    color: '$grey700',\n    opacity: 1\n  },\n  '&:focus-within': {\n    borderColor: '$primary800',\n    outline: 'none'\n  },\n  '&[disabled]': {\n    backgroundColor: '$grey200',\n    color: '$grey800',\n    cursor: 'not-allowed'\n  },\n  variants: {\n    size: {\n      sm: {\n        height: '$3',\n        fontSize: '$sm',\n        lineHeight: 1.7\n      },\n      md: {\n        height: '$4',\n        fontSize: '$md',\n        lineHeight: 2\n      },\n      lg: {\n        height: '$5',\n        fontSize: '$md',\n        lineHeight: 2\n      }\n    },\n    state: {\n      error: {\n        border: '1px solid $danger'\n      }\n    }\n  }\n})\n\nexport type ComboboxInputProps = React.ComponentProps<\n  typeof StyledComboboxInput\n>\n\nexport const ComboboxInput: React.ForwardRefExoticComponent<ComboboxInputProps> =\n  React.forwardRef(({ size = 'md', ...rest }, ref) => (\n    <StyledComboboxInput size={size} {...rest} ref={ref} />\n  ))\n"],"names":["StyledComboboxInput","styled","BaseComboboxInput","encodeBackgroundIcon","theme","ComboboxInput","React","size","rest","ref"],"mappings":"6XAOO,MAAMA,EAAsBC,EAAOC,EAAmB,CAC3D,UAAW,OACX,WAAY,OACZ,gBAAiBC,EAAqBC,EAAM,OAAO,QAAQ,MAAO,SAAS,EAC3E,mBAAoB,8BACpB,iBAAkB,oBAClB,eAAgB,kBAChB,OAAQ,qBACR,aAAc,KACd,UAAW,aACX,MAAO,YACP,OAAQ,OACR,QAAS,QACT,WAAY,QACZ,OAAQ,KACR,GAAI,KACJ,GAAI,KACJ,WAAY,qBACZ,MAAO,OACP,iBAAkB,CAChB,MAAO,WACP,QAAS,CACX,EACA,iBAAkB,CAChB,YAAa,cACb,QAAS,MACX,EACA,cAAe,CACb,gBAAiB,WACjB,MAAO,WACP,OAAQ,aACV,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CACF,OAAQ,KACR,SAAU,MACV,WAAY,GACd,EACA,GAAI,CACF,OAAQ,KACR,SAAU,MACV,WAAY,CACd,EACA,GAAI,CACF,OAAQ,KACR,SAAU,MACV,WAAY,CACd,CACF,EACA,MAAO,CACL,MAAO,CACL,OAAQ,mBACV,CACF,CACF,CACF,CAAC,EAMYC,EACXC,EAAM,WAAW,CAAC,CAAE,KAAAC,EAAO,QAASC,CAAK,EAAGC,IAC1CH,EAAA,cAACN,EAAA,CAAoB,KAAMO,EAAO,GAAGC,EAAM,IAAKC,EAAK,CACtD"}

package/dist/components/combobox/ComboboxList.d.ts

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

package/dist/components/combobox/ComboboxOption.d.ts

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

package/dist/components/combobox/ComboboxOption.js

@@ -1,2 +1,2 @@
-import{ComboboxOption as o}from"@reach/combobox";import{styled as r}from"../../stitches.js";const t=r(o,{color:"$tonal500",cursor:"pointer",m:0,p:"$2",'&:hover, &[aria-selected="true"]':{bg:"$tonal50",borderRadius:"$0"},"[data-user-value]":{color:"$primary800"}});export{t as ComboboxOption};
+import{ComboboxOption as o}from"@reach/combobox";import{styled as r}from"../../stitches.js";const e=r(o,{color:"$grey900",cursor:"pointer",m:0,p:"$2",'&:hover, &[aria-selected="true"]':{bg:"$grey100",borderRadius:"$0"},"[data-user-value]":{color:"$primary800"}});export{e as ComboboxOption};
 //# sourceMappingURL=ComboboxOption.js.map

package/dist/components/combobox/ComboboxOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxOption.js","sources":["../../../src/components/combobox/ComboboxOption.tsx"],"sourcesContent":["import { ComboboxOption as BaseComboboxOption } from '@reach/combobox'\n\nimport { styled } from '~/stitches'\n\nexport const ComboboxOption = styled(BaseComboboxOption, {\n  color: '$tonal500',\n  cursor: 'pointer',\n  m: 0,\n  p: '$2',\n  '&:hover, &[aria-selected=\"true\"]': {\n    bg: '$tonal50',\n    borderRadius: '$0'\n  },\n  '[data-user-value]': {\n    color: '$primary800'\n  }\n})\n"],"names":["ComboboxOption","styled","BaseComboboxOption"],"mappings":"4FAIa,MAAAA,EAAiBC,EAAOC,EAAoB,CACvD,MAAO,YACP,OAAQ,UACR,EAAG,EACH,EAAG,KACH,mCAAoC,CAClC,GAAI,WACJ,aAAc,IAChB,EACA,oBAAqB,CACnB,MAAO,aACT,CACF,CAAC"}
+{"version":3,"file":"ComboboxOption.js","sources":["../../../src/components/combobox/ComboboxOption.tsx"],"sourcesContent":["import { ComboboxOption as BaseComboboxOption } from '@reach/combobox'\n\nimport { styled } from '~/stitches'\n\nexport const ComboboxOption = styled(BaseComboboxOption, {\n  color: '$grey900',\n  cursor: 'pointer',\n  m: 0,\n  p: '$2',\n  '&:hover, &[aria-selected=\"true\"]': {\n    bg: '$grey100',\n    borderRadius: '$0'\n  },\n  '[data-user-value]': {\n    color: '$primary800'\n  }\n})\n"],"names":["ComboboxOption","styled","BaseComboboxOption"],"mappings":"4FAIa,MAAAA,EAAiBC,EAAOC,EAAoB,CACvD,MAAO,WACP,OAAQ,UACR,EAAG,EACH,EAAG,KACH,mCAAoC,CAClC,GAAI,WACJ,aAAc,IAChB,EACA,oBAAqB,CACnB,MAAO,aACT,CACF,CAAC"}

package/dist/components/combobox/ComboboxPopover.d.ts

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

package/dist/components/combobox/ComboboxPopover.js

@@ -1,2 +1,2 @@
-import{ComboboxPopover as o}from"@reach/combobox";import{styled as r}from"../../stitches.js";const b=r(o,{bg:"white",border:"solid 1px $tonal100",borderRadius:"$0",boxShadow:"$1",boxSizing:"border-box",fontFamily:"$body",fontSize:"$md",outline:"none",p:"$1",transform:"translateY($space$2)"});export{b as ComboboxPopover};
+import{ComboboxPopover as o}from"@reach/combobox";import{styled as r}from"../../stitches.js";const e=r(o,{bg:"white",border:"solid 1px $grey200",borderRadius:"$0",boxShadow:"$1",boxSizing:"border-box",fontFamily:"$body",fontSize:"$md",outline:"none",p:"$1",transform:"translateY($space$2)"});export{e as ComboboxPopover};
 //# sourceMappingURL=ComboboxPopover.js.map

package/dist/components/combobox/ComboboxPopover.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxPopover.js","sources":["../../../src/components/combobox/ComboboxPopover.tsx"],"sourcesContent":["import { ComboboxPopover as BaseComboboxPopover } from '@reach/combobox'\n\nimport { styled } from '~/stitches'\n\nexport const ComboboxPopover = styled(BaseComboboxPopover, {\n  bg: 'white',\n  border: 'solid 1px $tonal100',\n  borderRadius: '$0',\n  boxShadow: '$1',\n  boxSizing: 'border-box',\n  fontFamily: '$body',\n  fontSize: '$md',\n  outline: 'none',\n  p: '$1',\n  transform: 'translateY($space$2)'\n})\n"],"names":["ComboboxPopover","styled","BaseComboboxPopover"],"mappings":"6FAIa,MAAAA,EAAkBC,EAAOC,EAAqB,CACzD,GAAI,QACJ,OAAQ,sBACR,aAAc,KACd,UAAW,KACX,UAAW,aACX,WAAY,QACZ,SAAU,MACV,QAAS,OACT,EAAG,KACH,UAAW,sBACb,CAAC"}
+{"version":3,"file":"ComboboxPopover.js","sources":["../../../src/components/combobox/ComboboxPopover.tsx"],"sourcesContent":["import { ComboboxPopover as BaseComboboxPopover } from '@reach/combobox'\n\nimport { styled } from '~/stitches'\n\nexport const ComboboxPopover = styled(BaseComboboxPopover, {\n  bg: 'white',\n  border: 'solid 1px $grey200',\n  borderRadius: '$0',\n  boxShadow: '$1',\n  boxSizing: 'border-box',\n  fontFamily: '$body',\n  fontSize: '$md',\n  outline: 'none',\n  p: '$1',\n  transform: 'translateY($space$2)'\n})\n"],"names":["ComboboxPopover","styled","BaseComboboxPopover"],"mappings":"6FAIa,MAAAA,EAAkBC,EAAOC,EAAqB,CACzD,GAAI,QACJ,OAAQ,qBACR,aAAc,KACd,UAAW,KACX,UAAW,aACX,WAAY,QACZ,SAAU,MACV,QAAS,OACT,EAAG,KACH,UAAW,sBACb,CAAC"}

package/dist/components/data-table/DataTable.d.ts

@@ -224,26 +224,11 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
                 marsh1000: any;
                 marsh1100: any;
                 marsh1200: any;
-                tonal50: any;
-                tonal100: any;
-                tonal200: any;
-                tonal300: any;
-                tonal400: any;
-                tonal500: any;
-                tonal600: any;
                 alpha100: any;
                 alpha150: any;
                 alpha200: any;
                 alpha250: any;
                 alpha600: any;
-                brandRed: any;
-                brandRedAccent: any;
-                brandGreen: any;
-                brandGreenAccent: any;
-                brandPurple: any;
-                brandPurpleAccent: any;
-                brandYellow: any;
-                brandYellowAccent: any;
                 infoLight: any;
                 info: any;
                 infoMid: any;
@@ -891,26 +876,11 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
                 marsh1000: any;
                 marsh1100: any;
                 marsh1200: any;
-                tonal50: any;
-                tonal100: any;
-                tonal200: any;
-                tonal300: any;
-                tonal400: any;
-                tonal500: any;
-                tonal600: any;
                 alpha100: any;
                 alpha150: any;
                 alpha200: any;
                 alpha250: any;
                 alpha600: any;
-                brandRed: any;
-                brandRedAccent: any;
-                brandGreen: any;
-                brandGreenAccent: any;
-                brandPurple: any;
-                brandPurpleAccent: any;
-                brandYellow: any;
-                brandYellowAccent: any;
                 infoLight: any;
                 info: any;
                 infoMid: any;
@@ -1281,26 +1251,11 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
                 marsh1000: any;
                 marsh1100: any;
                 marsh1200: any;
-                tonal50: any;
-                tonal100: any;
-                tonal200: any;
-                tonal300: any;
-                tonal400: any;
-                tonal500: any;
-                tonal600: any;
                 alpha100: any;
                 alpha150: any;
                 alpha200: any;
                 alpha250: any;
                 alpha600: any;
-                brandRed: any;
-                brandRedAccent: any;
-                brandGreen: any;
-                brandGreenAccent: any;
-                brandPurple: any;
-                brandPurpleAccent: any;
-                brandYellow: any;
-                brandYellowAccent: any;
                 infoLight: any;
                 info: any;
                 infoMid: any;
@@ -1669,26 +1624,11 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
                 marsh1000: any;
                 marsh1100: any;
                 marsh1200: any;
-                tonal50: any;
-                tonal100: any;
-                tonal200: any;
-                tonal300: any;
-                tonal400: any;
-                tonal500: any;
-                tonal600: any;
                 alpha100: any;
                 alpha150: any;
                 alpha200: any;
                 alpha250: any;
                 alpha600: any;
-                brandRed: any;
-                brandRedAccent: any;
-                brandGreen: any;
-                brandGreenAccent: any;
-                brandPurple: any;
-                brandPurpleAccent: any;
-                brandYellow: any;
-                brandYellowAccent: any;
                 infoLight: any;
                 info: any;
                 infoMid: any;
@@ -2070,26 +2010,11 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
                 marsh1000: any;
                 marsh1100: any;
                 marsh1200: any;
-                tonal50: any;
-                tonal100: any;
-                tonal200: any;
-                tonal300: any;
-                tonal400: any;
-                tonal500: any;
-                tonal600: any;
                 alpha100: any;
                 alpha150: any;
                 alpha200: any;
                 alpha250: any;
                 alpha600: any;
-                brandRed: any;
-                brandRedAccent: any;
-                brandGreen: any;
-                brandGreenAccent: any;
-                brandPurple: any;
-                brandPurpleAccent: any;
-                brandYellow: any;
-                brandYellowAccent: any;
                 infoLight: any;
                 info: any;
                 infoMid: any;
@@ -2513,26 +2438,11 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
                 marsh1000: any;
                 marsh1100: any;
                 marsh1200: any;
-                tonal50: any;
-                tonal100: any;
-                tonal200: any;
-                tonal300: any;
-                tonal400: any;
-                tonal500: any;
-                tonal600: any;
                 alpha100: any;
                 alpha150: any;
                 alpha200: any;
                 alpha250: any;
                 alpha600: any;
-                brandRed: any;
-                brandRedAccent: any;
-                brandGreen: any;
-                brandGreenAccent: any;
-                brandPurple: any;
-                brandPurpleAccent: any;
-                brandYellow: any;
-                brandYellowAccent: any;
                 infoLight: any;
                 info: any;
                 infoMid: any;
@@ -2905,26 +2815,11 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
                 marsh1000: any;
                 marsh1100: any;
                 marsh1200: any;
-                tonal50: any;
-                tonal100: any;
-                tonal200: any;
-                tonal300: any;
-                tonal400: any;
-                tonal500: any;
-                tonal600: any;
                 alpha100: any;
                 alpha150: any;
                 alpha200: any;
                 alpha250: any;
                 alpha600: any;
-                brandRed: any;
-                brandRedAccent: any;
-                brandGreen: any;
-                brandGreenAccent: any;
-                brandPurple: any;
-                brandPurpleAccent: any;
-                brandYellow: any;
-                brandYellowAccent: any;
                 infoLight: any;
                 info: any;
                 infoMid: any;
@@ -3310,26 +3205,11 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
                     marsh1000: any;
                     marsh1100: any;
                     marsh1200: any;
-                    tonal50: any;
-                    tonal100: any;
-                    tonal200: any;
-                    tonal300: any;
-                    tonal400: any;
-                    tonal500: any;
-                    tonal600: any;
                     alpha100: any;
                     alpha150: any;
                     alpha200: any;
                     alpha250: any;
                     alpha600: any;
-                    brandRed: any;
-                    brandRedAccent: any;
-                    brandGreen: any;
-                    brandGreenAccent: any;
-                    brandPurple: any;
-                    brandPurpleAccent: any;
-                    brandYellow: any;
-                    brandYellowAccent: any;
                     infoLight: any;
                     info: any;
                     infoMid: any;
@@ -3722,26 +3602,11 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
                 marsh1000: any;
                 marsh1100: any;
                 marsh1200: any;
-                tonal50: any;
-                tonal100: any;
-                tonal200: any;
-                tonal300: any;
-                tonal400: any;
-                tonal500: any;
-                tonal600: any;
                 alpha100: any;
                 alpha150: any;
                 alpha200: any;
                 alpha250: any;
                 alpha600: any;
-                brandRed: any;
-                brandRedAccent: any;
-                brandGreen: any;
-                brandGreenAccent: any;
-                brandPurple: any;
-                brandPurpleAccent: any;
-                brandYellow: any;
-                brandYellowAccent: any;
                 infoLight: any;
                 info: any;
                 infoMid: any;
@@ -4129,26 +3994,11 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
                 marsh1000: any;
                 marsh1100: any;
                 marsh1200: any;
-                tonal50: any;
-                tonal100: any;
-                tonal200: any;
-                tonal300: any;
-                tonal400: any;
-                tonal500: any;
-                tonal600: any;
                 alpha100: any;
                 alpha150: any;
                 alpha200: any;
                 alpha250: any;
                 alpha600: any;
-                brandRed: any;
-                brandRedAccent: any;
-                brandGreen: any;
-                brandGreenAccent: any;
-                brandPurple: any;
-                brandPurpleAccent: any;
-                brandYellow: any;
-                brandYellowAccent: any;
                 infoLight: any;
                 info: any;
                 infoMid: any;
@@ -4511,26 +4361,11 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
                 marsh1000: any;
                 marsh1100: any;
                 marsh1200: any;
-                tonal50: any;
-                tonal100: any;
-                tonal200: any;
-                tonal300: any;
-                tonal400: any;
-                tonal500: any;
-                tonal600: any;
                 alpha100: any;
                 alpha150: any;
                 alpha200: any;
                 alpha250: any;
                 alpha600: any;
-                brandRed: any;
-                brandRedAccent: any;
-                brandGreen: any;
-                brandGreenAccent: any;
-                brandPurple: any;
-                brandPurpleAccent: any;
-                brandYellow: any;
-                brandYellowAccent: any;
                 infoLight: any;
                 info: any;
                 infoMid: any;

package/dist/components/data-table/DataTableLoading.d.ts

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