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

package/dist/components/radio-card/RadioCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioCard.js","sources":["../../../src/components/radio-card/RadioCard.tsx"],"sourcesContent":["import * as RadioGroup from '@radix-ui/react-radio-group'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { Box } from '../box/Box'\n\nexport const StyledRadioCard = styled(RadioGroup.Item, {\n  alignItems: 'center',\n  bg: 'white',\n  border: '1px solid $tonal200',\n  borderRadius: '$0',\n  cursor: 'pointer',\n  display: 'flex',\n  textAlign: 'left',\n  '&[data-state=\"checked\"]': {\n    outline: '2px solid $primary800',\n    outlineOffset: '-2px'\n  },\n  variants: {\n    align: {\n      left: { flexDirection: 'row' },\n      right: { flexDirection: 'row-reverse' }\n    },\n    size: {\n      md: { px: '$4', py: '$3' },\n      lg: { px: '$5', py: '$4' }\n    },\n    isFullWidth: {\n      true: { width: '100%' },\n      false: { width: 'max-content' }\n    }\n  }\n})\n\nconst RadioButton = styled('div', {\n  alignItems: 'center',\n  appearance: 'none',\n  backgroundColor: 'transparent',\n  border: '1px solid $tonal500',\n  borderRadius: '$round',\n  display: 'flex',\n  flexShrink: 0,\n  justifyContent: 'center',\n  p: 0,\n  size: '$1',\n  transition: 'all 50ms ease-out',\n  '[data-state=\"checked\"] &': {\n    backgroundColor: '$primary800',\n    borderColor: '$primary800'\n  },\n  variants: {\n    containerIsFullWidth: {\n      true: {},\n      false: {}\n    },\n    align: {\n      left: { mr: '$4' },\n      right: {}\n    }\n  },\n\n  compoundVariants: [\n    {\n      containerIsFullWidth: true,\n      align: 'right',\n      css: { ml: 'auto' }\n    },\n    {\n      containerIsFullWidth: false,\n      align: 'right',\n      css: { ml: '$4' }\n    }\n  ]\n})\n\nconst Indicator = styled(RadioGroup.Indicator, {\n  backgroundColor: 'white',\n  borderRadius: '$round',\n  position: 'absolute',\n  size: '6px'\n})\n\ntype RadioCardProps = React.ComponentProps<typeof StyledRadioCard>\n\nexport const RadioCard = ({\n  children,\n  isFullWidth = false,\n  size = 'md',\n  align = 'left',\n  ...rest\n}: RadioCardProps) => (\n  <StyledRadioCard\n    {...rest}\n    align={align}\n    isFullWidth={isFullWidth}\n    size={size}\n  >\n    <RadioButton align={align} containerIsFullWidth={isFullWidth}>\n      <Indicator />\n    </RadioButton>\n    <Box>{children}</Box>\n  </StyledRadioCard>\n)\n"],"names":["StyledRadioCard","styled","RadioGroup","RadioButton","Indicator","RadioCard","children","isFullWidth","size","align","rest","React","Box"],"mappings":"qJAOa,MAAAA,EAAkBC,EAAOC,EAAW,KAAM,CACrD,WAAY,SACZ,GAAI,QACJ,OAAQ,sBACR,aAAc,KACd,OAAQ,UACR,QAAS,OACT,UAAW,OACX,0BAA2B,CACzB,QAAS,wBACT,cAAe,MACjB,EACA,SAAU,CACR,MAAO,CACL,KAAM,CAAE,cAAe,KAAM,EAC7B,MAAO,CAAE,cAAe,aAAc,CACxC,EACA,KAAM,CACJ,GAAI,CAAE,GAAI,KAAM,GAAI,IAAK,EACzB,GAAI,CAAE,GAAI,KAAM,GAAI,IAAK,CAC3B,EACA,YAAa,CACX,KAAM,CAAE,MAAO,MAAO,EACtB,MAAO,CAAE,MAAO,aAAc,CAChC,CACF,CACF,CAAC,EAEKC,EAAcF,EAAO,MAAO,CAChC,WAAY,SACZ,WAAY,OACZ,gBAAiB,cACjB,OAAQ,sBACR,aAAc,SACd,QAAS,OACT,WAAY,EACZ,eAAgB,SAChB,EAAG,EACH,KAAM,KACN,WAAY,oBACZ,2BAA4B,CAC1B,gBAAiB,cACjB,YAAa,aACf,EACA,SAAU,CACR,qBAAsB,CACpB,KAAM,CAAA,EACN,MAAO,EACT,EACA,MAAO,CACL,KAAM,CAAE,GAAI,IAAK,EACjB,MAAO,CACT,CAAA,CACF,EAEA,iBAAkB,CAChB,CACE,qBAAsB,GACtB,MAAO,QACP,IAAK,CAAE,GAAI,MAAO,CACpB,EACA,CACE,qBAAsB,GACtB,MAAO,QACP,IAAK,CAAE,GAAI,IAAK,CAClB,CACF,CACF,CAAC,EAEKG,EAAYH,EAAOC,EAAW,UAAW,CAC7C,gBAAiB,QACjB,aAAc,SACd,SAAU,WACV,KAAM,KACR,CAAC,EAIYG,EAAY,CAAC,CACxB,SAAAC,EACA,YAAAC,EAAc,GACd,KAAAC,EAAO,KACP,MAAAC,EAAQ,UACLC,CACL,IACEC,EAAA,cAACX,GACE,GAAGU,EACJ,MAAOD,EACP,YAAaF,EACb,KAAMC,CAAAA,EAENG,EAAA,cAACR,EAAA,CAAY,MAAOM,EAAO,qBAAsBF,CAC/CI,EAAAA,EAAA,cAACP,EAAA,IAAU,CACb,EACAO,EAAA,cAACC,EAAA,KAAKN,CAAS,CACjB"}
+{"version":3,"file":"RadioCard.js","sources":["../../../src/components/radio-card/RadioCard.tsx"],"sourcesContent":["import * as RadioGroup from '@radix-ui/react-radio-group'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { Box } from '../box/Box'\n\nexport const StyledRadioCard = styled(RadioGroup.Item, {\n  alignItems: 'center',\n  bg: 'white',\n  border: '1px solid $grey600',\n  borderRadius: '$0',\n  cursor: 'pointer',\n  display: 'flex',\n  textAlign: 'left',\n  '&[data-state=\"checked\"]': {\n    outline: '2px solid $primary800',\n    outlineOffset: '-2px'\n  },\n  variants: {\n    align: {\n      left: { flexDirection: 'row' },\n      right: { flexDirection: 'row-reverse' }\n    },\n    size: {\n      md: { px: '$4', py: '$3' },\n      lg: { px: '$5', py: '$4' }\n    },\n    isFullWidth: {\n      true: { width: '100%' },\n      false: { width: 'max-content' }\n    }\n  }\n})\n\nconst RadioButton = styled('div', {\n  alignItems: 'center',\n  appearance: 'none',\n  backgroundColor: 'transparent',\n  border: '1px solid $grey900',\n  borderRadius: '$round',\n  display: 'flex',\n  flexShrink: 0,\n  justifyContent: 'center',\n  p: 0,\n  size: '$1',\n  transition: 'all 50ms ease-out',\n  '[data-state=\"checked\"] &': {\n    backgroundColor: '$primary800',\n    borderColor: '$primary800'\n  },\n  variants: {\n    containerIsFullWidth: {\n      true: {},\n      false: {}\n    },\n    align: {\n      left: { mr: '$4' },\n      right: {}\n    }\n  },\n\n  compoundVariants: [\n    {\n      containerIsFullWidth: true,\n      align: 'right',\n      css: { ml: 'auto' }\n    },\n    {\n      containerIsFullWidth: false,\n      align: 'right',\n      css: { ml: '$4' }\n    }\n  ]\n})\n\nconst Indicator = styled(RadioGroup.Indicator, {\n  backgroundColor: 'white',\n  borderRadius: '$round',\n  position: 'absolute',\n  size: '6px'\n})\n\ntype RadioCardProps = React.ComponentProps<typeof StyledRadioCard>\n\nexport const RadioCard = ({\n  children,\n  isFullWidth = false,\n  size = 'md',\n  align = 'left',\n  ...rest\n}: RadioCardProps) => (\n  <StyledRadioCard\n    {...rest}\n    align={align}\n    isFullWidth={isFullWidth}\n    size={size}\n  >\n    <RadioButton align={align} containerIsFullWidth={isFullWidth}>\n      <Indicator />\n    </RadioButton>\n    <Box>{children}</Box>\n  </StyledRadioCard>\n)\n"],"names":["StyledRadioCard","styled","RadioGroup","RadioButton","Indicator","RadioCard","children","isFullWidth","size","align","rest","React","Box"],"mappings":"qJAOa,MAAAA,EAAkBC,EAAOC,EAAW,KAAM,CACrD,WAAY,SACZ,GAAI,QACJ,OAAQ,qBACR,aAAc,KACd,OAAQ,UACR,QAAS,OACT,UAAW,OACX,0BAA2B,CACzB,QAAS,wBACT,cAAe,MACjB,EACA,SAAU,CACR,MAAO,CACL,KAAM,CAAE,cAAe,KAAM,EAC7B,MAAO,CAAE,cAAe,aAAc,CACxC,EACA,KAAM,CACJ,GAAI,CAAE,GAAI,KAAM,GAAI,IAAK,EACzB,GAAI,CAAE,GAAI,KAAM,GAAI,IAAK,CAC3B,EACA,YAAa,CACX,KAAM,CAAE,MAAO,MAAO,EACtB,MAAO,CAAE,MAAO,aAAc,CAChC,CACF,CACF,CAAC,EAEKC,EAAcF,EAAO,MAAO,CAChC,WAAY,SACZ,WAAY,OACZ,gBAAiB,cACjB,OAAQ,qBACR,aAAc,SACd,QAAS,OACT,WAAY,EACZ,eAAgB,SAChB,EAAG,EACH,KAAM,KACN,WAAY,oBACZ,2BAA4B,CAC1B,gBAAiB,cACjB,YAAa,aACf,EACA,SAAU,CACR,qBAAsB,CACpB,KAAM,CAAA,EACN,MAAO,EACT,EACA,MAAO,CACL,KAAM,CAAE,GAAI,IAAK,EACjB,MAAO,CACT,CAAA,CACF,EAEA,iBAAkB,CAChB,CACE,qBAAsB,GACtB,MAAO,QACP,IAAK,CAAE,GAAI,MAAO,CACpB,EACA,CACE,qBAAsB,GACtB,MAAO,QACP,IAAK,CAAE,GAAI,IAAK,CAClB,CACF,CACF,CAAC,EAEKG,EAAYH,EAAOC,EAAW,UAAW,CAC7C,gBAAiB,QACjB,aAAc,SACd,SAAU,WACV,KAAM,KACR,CAAC,EAIYG,EAAY,CAAC,CACxB,SAAAC,EACA,YAAAC,EAAc,GACd,KAAAC,EAAO,KACP,MAAAC,EAAQ,UACLC,CACL,IACEC,EAAA,cAACX,GACE,GAAGU,EACJ,MAAOD,EACP,YAAaF,EACb,KAAMC,CAAAA,EAENG,EAAA,cAACR,EAAA,CAAY,MAAOM,EAAO,qBAAsBF,CAC/CI,EAAAA,EAAA,cAACP,EAAA,IAAU,CACb,EACAO,EAAA,cAACC,EAAA,KAAKN,CAAS,CACjB"}

package/dist/components/search-input/SearchInput.js

@@ -1,2 +1,2 @@
-import{Search as I,Close as $}from"@atom-learning/icons";import*as e from"react";import{ActionIcon as k}from"../action-icon/ActionIcon.js";import{Box as L}from"../box/Box.js";import{Icon as f}from"../icon/Icon.js";import{Input as x}from"../input/Input.js";import{styled as h}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import{getFieldIconSize as M}from"../../utilities/style/get-icon-size.js";import{useCallbackRef as N}from"../../utilities/hooks/useCallbackRef.js";var O=(t=>(t.SEARCH="SEARCH",t.CLEAR="CLEAR",t))(O||{});const T=h(f,{color:"$tonal300",position:"absolute",pointerEvents:"none",variants:{size:{sm:{right:"$2",size:"$1"},md:{right:10,size:20},lg:{right:10,size:20}}}}),V=h(x,{'&::-webkit-search-decoration, &::-webkit-search-cancel-button, &::-webkit-search-results-button, & input[type="search"]::-webkit-search-results-decoration':{display:"none"}}),E=e.forwardRef(({size:t="md",css:C,value:n,defaultValue:l="",onValueChange:s,clearText:b="Clear",onChange:c,...d},v)=>{const[m,R]=N(),[A,u]=e.useState(l),[g,p]=e.useState(l?"CLEAR":"SEARCH");e.useEffect(()=>{typeof n>"u"||(u(n),p(n?"CLEAR":"SEARCH"))},[n]);const S=e.useMemo(()=>M(t),[t]);e.useImperativeHandle(v,()=>m.current);const z=()=>{var r,o;const a=m.current;if(!a)return;const i=(r=Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value"))==null?void 0:r.set;(o=i==null?void 0:i.call)==null||o.call(i,a,"");const H=new Event("input",{bubbles:!0});a.dispatchEvent(H),a.focus(),s==null||s("")},w=r=>{c==null||c(r);const o=r.target.value;u(o),s==null||s(o),p(o?"CLEAR":"SEARCH")},y=()=>g==="SEARCH"?e.createElement(T,{is:I,size:t,css:{size:t=="sm"?"$1":20,top:"50%",transform:"translateY(-50%)"}}):e.createElement(k,{label:b,theme:"neutral",size:S,css:{position:"absolute",top:"50%",transform:"translateY(-50%)",right:"$1"},onClick:z},e.createElement(f,{is:$}));return e.createElement(L,{css:{position:"relative",height:"max-content",...C}},e.createElement(V,{ref:R,size:t,type:"search",...d,value:A,onChange:w,css:{pr:t==="sm"?"$5":"$6"}}),y())});E.displayName="SearchInput";export{E as SearchInput};
+import{Search as I,Close as $}from"@atom-learning/icons";import*as e from"react";import{ActionIcon as k}from"../action-icon/ActionIcon.js";import{Box as L}from"../box/Box.js";import{Icon as f}from"../icon/Icon.js";import{Input as x}from"../input/Input.js";import{styled as h}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import{getFieldIconSize as M}from"../../utilities/style/get-icon-size.js";import{useCallbackRef as N}from"../../utilities/hooks/useCallbackRef.js";var O=(t=>(t.SEARCH="SEARCH",t.CLEAR="CLEAR",t))(O||{});const T=h(f,{color:"$grey700",position:"absolute",pointerEvents:"none",variants:{size:{sm:{right:"$2",size:"$1"},md:{right:10,size:20},lg:{right:10,size:20}}}}),V=h(x,{'&::-webkit-search-decoration, &::-webkit-search-cancel-button, &::-webkit-search-results-button, & input[type="search"]::-webkit-search-results-decoration':{display:"none"}}),E=e.forwardRef(({size:t="md",css:C,value:n,defaultValue:l="",onValueChange:s,clearText:b="Clear",onChange:c,...d},v)=>{const[m,R]=N(),[g,u]=e.useState(l),[A,p]=e.useState(l?"CLEAR":"SEARCH");e.useEffect(()=>{typeof n>"u"||(u(n),p(n?"CLEAR":"SEARCH"))},[n]);const S=e.useMemo(()=>M(t),[t]);e.useImperativeHandle(v,()=>m.current);const z=()=>{var r,o;const a=m.current;if(!a)return;const i=(r=Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value"))==null?void 0:r.set;(o=i==null?void 0:i.call)==null||o.call(i,a,"");const H=new Event("input",{bubbles:!0});a.dispatchEvent(H),a.focus(),s==null||s("")},w=r=>{c==null||c(r);const o=r.target.value;u(o),s==null||s(o),p(o?"CLEAR":"SEARCH")},y=()=>A==="SEARCH"?e.createElement(T,{is:I,size:t,css:{size:t=="sm"?"$1":20,top:"50%",transform:"translateY(-50%)"}}):e.createElement(k,{label:b,theme:"neutral",size:S,css:{position:"absolute",top:"50%",transform:"translateY(-50%)",right:"$1"},onClick:z},e.createElement(f,{is:$}));return e.createElement(L,{css:{position:"relative",height:"max-content",...C}},e.createElement(V,{ref:R,size:t,type:"search",...d,value:g,onChange:w,css:{pr:t==="sm"?"$5":"$6"}}),y())});E.displayName="SearchInput";export{E as SearchInput};
 //# sourceMappingURL=SearchInput.js.map

package/dist/components/search-input/SearchInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.js","sources":["../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { Close, Search } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { ActionIcon } from '~/components/action-icon'\nimport { Box } from '~/components/box/'\nimport { Icon } from '~/components/icon/'\nimport { Input } from '~/components/input/'\nimport { CSS, styled } from '~/stitches'\nimport { getFieldIconSize } from '~/utilities'\nimport { useCallbackRef } from '~/utilities/hooks/useCallbackRef'\n\nexport type SearchInputProps = React.ComponentProps<typeof Input> & {\n  size?: 'sm' | 'md' | 'lg'\n  css?: CSS\n  value?: string\n  defaultValue?: string\n  onValueChange?: (newValue: string) => void\n  clearText?: string\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void\n}\n\nenum INPUT_ICON {\n  SEARCH = 'SEARCH',\n  CLEAR = 'CLEAR'\n}\n\nconst StyledIcon = styled(Icon, {\n  color: '$tonal300',\n  position: 'absolute',\n  pointerEvents: 'none',\n  variants: {\n    size: {\n      sm: {\n        right: '$2',\n        size: '$1'\n      },\n      md: {\n        right: 10,\n        size: 20\n      },\n      lg: {\n        right: 10,\n        size: 20\n      }\n    }\n  }\n})\n\nconst StyledSearchInput = styled(Input, {\n  '&::-webkit-search-decoration, &::-webkit-search-cancel-button, &::-webkit-search-results-button, & input[type=\"search\"]::-webkit-search-results-decoration':\n    {\n      display: 'none'\n    }\n})\n\nexport const SearchInput: React.ForwardRefExoticComponent<SearchInputProps> =\n  React.forwardRef(\n    (\n      {\n        size = 'md',\n        css,\n        value,\n        defaultValue = '',\n        onValueChange,\n        clearText = 'Clear',\n        onChange,\n        ...remainingProps\n      },\n      ref\n    ) => {\n      const [inputElRef, setInputElRef] = useCallbackRef()\n      const [innerValue, setInnerValue] = React.useState(defaultValue)\n      const [activeIcon, setActiveIcon] = React.useState<INPUT_ICON>(\n        defaultValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH\n      )\n      React.useEffect(() => {\n        if (typeof value === 'undefined') return\n        setInnerValue(value)\n        setActiveIcon(value ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH)\n      }, [value])\n\n      const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n      React.useImperativeHandle(\n        ref,\n        () => inputElRef.current as HTMLInputElement\n      )\n\n      const handleClear = () => {\n        const inputEl = inputElRef.current\n        if (!inputEl) return\n\n        // https://stackoverflow.com/a/46012210\n        const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n          window.HTMLInputElement.prototype,\n          'value'\n        )?.set\n        nativeInputValueSetter?.call?.(inputEl, '')\n        const ev2 = new Event('input', {\n          bubbles: true\n        })\n        inputEl.dispatchEvent(ev2)\n        inputEl.focus()\n        onValueChange?.('')\n      }\n\n      const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        onChange?.(event)\n\n        const newValue = event.target.value\n        setInnerValue(newValue)\n        onValueChange?.(newValue)\n        setActiveIcon(newValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH)\n      }\n\n      const getIcon = () => {\n        if (activeIcon === INPUT_ICON.SEARCH)\n          return (\n            <StyledIcon\n              is={Search}\n              size={size}\n              css={{\n                size: size == 'sm' ? '$1' : 20,\n                top: '50%',\n                transform: 'translateY(-50%)'\n              }}\n            />\n          )\n\n        return (\n          <ActionIcon\n            label={clearText}\n            theme=\"neutral\"\n            size={iconSize}\n            css={{\n              position: 'absolute',\n              top: '50%',\n              transform: 'translateY(-50%)',\n              right: '$1'\n            }}\n            onClick={handleClear}\n          >\n            <Icon is={Close} />\n          </ActionIcon>\n        )\n      }\n\n      return (\n        <Box css={{ position: 'relative', height: 'max-content', ...css }}>\n          <StyledSearchInput\n            ref={setInputElRef}\n            size={size}\n            type=\"search\"\n            {...remainingProps}\n            value={innerValue}\n            onChange={handleOnChange}\n            css={{ pr: size === 'sm' ? '$5' : '$6' }}\n          />\n          {getIcon()}\n        </Box>\n      )\n    }\n  )\n\nSearchInput.displayName = 'SearchInput'\n"],"names":["INPUT_ICON","StyledIcon","styled","Icon","StyledSearchInput","Input","SearchInput","React","size","css","value","defaultValue","onValueChange","clearText","onChange","remainingProps","ref","inputElRef","setInputElRef","useCallbackRef","innerValue","setInnerValue","activeIcon","setActiveIcon","iconSize","getFieldIconSize","handleClear","_a","_b","inputEl","nativeInputValueSetter","ev2","handleOnChange","event","newValue","getIcon","Search","ActionIcon","Close","Box"],"mappings":"snBAqBA,IAAKA,GACHA,IAAAA,EAAA,OAAS,SACTA,EAAA,MAAQ,QAFLA,IAAAA,GAAA,CAAA,CAKL,EAAA,MAAMC,EAAaC,EAAOC,EAAM,CAC9B,MAAO,YACP,SAAU,WACV,cAAe,OACf,SAAU,CACR,KAAM,CACJ,GAAI,CACF,MAAO,KACP,KAAM,IACR,EACA,GAAI,CACF,MAAO,GACP,KAAM,EACR,EACA,GAAI,CACF,MAAO,GACP,KAAM,EACR,CACF,CACF,CACF,CAAC,EAEKC,EAAoBF,EAAOG,EAAO,CACtC,6JACE,CACE,QAAS,MACX,CACJ,CAAC,EAEYC,EACXC,EAAM,WACJ,CACE,CACE,KAAAC,EAAO,KACP,IAAAC,EACA,MAAAC,EACA,aAAAC,EAAe,GACf,cAAAC,EACA,UAAAC,EAAY,QACZ,SAAAC,KACGC,CACL,EACAC,IACG,CACH,KAAM,CAACC,EAAYC,CAAa,EAAIC,IAC9B,CAACC,EAAYC,CAAa,EAAId,EAAM,SAASI,CAAY,EACzD,CAACW,EAAYC,CAAa,EAAIhB,EAAM,SACxCI,EAAe,QAAmB,QACpC,EACAJ,EAAM,UAAU,IAAM,CAChB,OAAOG,EAAU,MACrBW,EAAcX,CAAK,EACnBa,EAAcb,EAAQ,QAAmB,QAAiB,EAC5D,EAAG,CAACA,CAAK,CAAC,EAEV,MAAMc,EAAWjB,EAAM,QAAQ,IAAMkB,EAAiBjB,CAAI,EAAG,CAACA,CAAI,CAAC,EAEnED,EAAM,oBACJS,EACA,IAAMC,EAAW,OACnB,EAEA,MAAMS,EAAc,IAAM,CAxFhC,IAAAC,EAAAC,EAyFQ,MAAMC,EAAUZ,EAAW,QAC3B,GAAI,CAACY,EAAS,OAGd,MAAMC,GAAyBH,EAAA,OAAO,yBACpC,OAAO,iBAAiB,UACxB,OACF,IAH+B,YAAAA,EAG5B,KACHC,EAAAE,GAAA,KAAA,OAAAA,EAAwB,OAAxB,MAAAF,EAAA,KAAAE,EAA+BD,EAAS,EACxC,EAAA,MAAME,EAAM,IAAI,MAAM,QAAS,CAC7B,QAAS,EACX,CAAC,EACDF,EAAQ,cAAcE,CAAG,EACzBF,EAAQ,QACRjB,GAAA,MAAAA,EAAgB,EAClB,CAAA,EAEMoB,EAAkBC,GAA+C,CACrEnB,GAAA,MAAAA,EAAWmB,GAEX,MAAMC,EAAWD,EAAM,OAAO,MAC9BZ,EAAca,CAAQ,EACtBtB,GAAA,MAAAA,EAAgBsB,GAChBX,EAAcW,EAAW,QAAmB,QAAiB,CAC/D,EAEMC,EAAU,IACVb,IAAe,SAEff,EAAA,cAACN,EAAA,CACC,GAAImC,EACJ,KAAM5B,EACN,IAAK,CACH,KAAMA,GAAQ,KAAO,KAAO,GAC5B,IAAK,MACL,UAAW,kBACb,CACF,CAAA,EAIFD,EAAA,cAAC8B,EAAA,CACC,MAAOxB,EACP,MAAM,UACN,KAAMW,EACN,IAAK,CACH,SAAU,WACV,IAAK,MACL,UAAW,mBACX,MAAO,IACT,EACA,QAASE,CAETnB,EAAAA,EAAA,cAACJ,EAAA,CAAK,GAAImC,CAAO,CAAA,CACnB,EAIJ,OACE/B,EAAA,cAACgC,EAAA,CAAI,IAAK,CAAE,SAAU,WAAY,OAAQ,cAAe,GAAG9B,CAAI,CAAA,EAC9DF,EAAA,cAACH,EAAA,CACC,IAAKc,EACL,KAAMV,EACN,KAAK,SACJ,GAAGO,EACJ,MAAOK,EACP,SAAUY,EACV,IAAK,CAAE,GAAIxB,IAAS,KAAO,KAAO,IAAK,CAAA,CACzC,EACC2B,EACH,CAAA,CAEJ,CACF,EAEF7B,EAAY,YAAc"}
+{"version":3,"file":"SearchInput.js","sources":["../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { Close, Search } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { ActionIcon } from '~/components/action-icon'\nimport { Box } from '~/components/box/'\nimport { Icon } from '~/components/icon/'\nimport { Input } from '~/components/input/'\nimport { CSS, styled } from '~/stitches'\nimport { getFieldIconSize } from '~/utilities'\nimport { useCallbackRef } from '~/utilities/hooks/useCallbackRef'\n\nexport type SearchInputProps = React.ComponentProps<typeof Input> & {\n  size?: 'sm' | 'md' | 'lg'\n  css?: CSS\n  value?: string\n  defaultValue?: string\n  onValueChange?: (newValue: string) => void\n  clearText?: string\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void\n}\n\nenum INPUT_ICON {\n  SEARCH = 'SEARCH',\n  CLEAR = 'CLEAR'\n}\n\nconst StyledIcon = styled(Icon, {\n  color: '$grey700',\n  position: 'absolute',\n  pointerEvents: 'none',\n  variants: {\n    size: {\n      sm: {\n        right: '$2',\n        size: '$1'\n      },\n      md: {\n        right: 10,\n        size: 20\n      },\n      lg: {\n        right: 10,\n        size: 20\n      }\n    }\n  }\n})\n\nconst StyledSearchInput = styled(Input, {\n  '&::-webkit-search-decoration, &::-webkit-search-cancel-button, &::-webkit-search-results-button, & input[type=\"search\"]::-webkit-search-results-decoration':\n    {\n      display: 'none'\n    }\n})\n\nexport const SearchInput: React.ForwardRefExoticComponent<SearchInputProps> =\n  React.forwardRef(\n    (\n      {\n        size = 'md',\n        css,\n        value,\n        defaultValue = '',\n        onValueChange,\n        clearText = 'Clear',\n        onChange,\n        ...remainingProps\n      },\n      ref\n    ) => {\n      const [inputElRef, setInputElRef] = useCallbackRef()\n      const [innerValue, setInnerValue] = React.useState(defaultValue)\n      const [activeIcon, setActiveIcon] = React.useState<INPUT_ICON>(\n        defaultValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH\n      )\n      React.useEffect(() => {\n        if (typeof value === 'undefined') return\n        setInnerValue(value)\n        setActiveIcon(value ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH)\n      }, [value])\n\n      const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n      React.useImperativeHandle(\n        ref,\n        () => inputElRef.current as HTMLInputElement\n      )\n\n      const handleClear = () => {\n        const inputEl = inputElRef.current\n        if (!inputEl) return\n\n        // https://stackoverflow.com/a/46012210\n        const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n          window.HTMLInputElement.prototype,\n          'value'\n        )?.set\n        nativeInputValueSetter?.call?.(inputEl, '')\n        const ev2 = new Event('input', {\n          bubbles: true\n        })\n        inputEl.dispatchEvent(ev2)\n        inputEl.focus()\n        onValueChange?.('')\n      }\n\n      const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        onChange?.(event)\n\n        const newValue = event.target.value\n        setInnerValue(newValue)\n        onValueChange?.(newValue)\n        setActiveIcon(newValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH)\n      }\n\n      const getIcon = () => {\n        if (activeIcon === INPUT_ICON.SEARCH)\n          return (\n            <StyledIcon\n              is={Search}\n              size={size}\n              css={{\n                size: size == 'sm' ? '$1' : 20,\n                top: '50%',\n                transform: 'translateY(-50%)'\n              }}\n            />\n          )\n\n        return (\n          <ActionIcon\n            label={clearText}\n            theme=\"neutral\"\n            size={iconSize}\n            css={{\n              position: 'absolute',\n              top: '50%',\n              transform: 'translateY(-50%)',\n              right: '$1'\n            }}\n            onClick={handleClear}\n          >\n            <Icon is={Close} />\n          </ActionIcon>\n        )\n      }\n\n      return (\n        <Box css={{ position: 'relative', height: 'max-content', ...css }}>\n          <StyledSearchInput\n            ref={setInputElRef}\n            size={size}\n            type=\"search\"\n            {...remainingProps}\n            value={innerValue}\n            onChange={handleOnChange}\n            css={{ pr: size === 'sm' ? '$5' : '$6' }}\n          />\n          {getIcon()}\n        </Box>\n      )\n    }\n  )\n\nSearchInput.displayName = 'SearchInput'\n"],"names":["INPUT_ICON","StyledIcon","styled","Icon","StyledSearchInput","Input","SearchInput","React","size","css","value","defaultValue","onValueChange","clearText","onChange","remainingProps","ref","inputElRef","setInputElRef","useCallbackRef","innerValue","setInnerValue","activeIcon","setActiveIcon","iconSize","getFieldIconSize","handleClear","_a","_b","inputEl","nativeInputValueSetter","ev2","handleOnChange","event","newValue","getIcon","Search","ActionIcon","Close","Box"],"mappings":"snBAqBA,IAAKA,GACHA,IAAAA,EAAA,OAAS,SACTA,EAAA,MAAQ,QAFLA,IAAAA,GAAA,CAAA,CAKL,EAAA,MAAMC,EAAaC,EAAOC,EAAM,CAC9B,MAAO,WACP,SAAU,WACV,cAAe,OACf,SAAU,CACR,KAAM,CACJ,GAAI,CACF,MAAO,KACP,KAAM,IACR,EACA,GAAI,CACF,MAAO,GACP,KAAM,EACR,EACA,GAAI,CACF,MAAO,GACP,KAAM,EACR,CACF,CACF,CACF,CAAC,EAEKC,EAAoBF,EAAOG,EAAO,CACtC,6JACE,CACE,QAAS,MACX,CACJ,CAAC,EAEYC,EACXC,EAAM,WACJ,CACE,CACE,KAAAC,EAAO,KACP,IAAAC,EACA,MAAAC,EACA,aAAAC,EAAe,GACf,cAAAC,EACA,UAAAC,EAAY,QACZ,SAAAC,KACGC,CACL,EACAC,IACG,CACH,KAAM,CAACC,EAAYC,CAAa,EAAIC,IAC9B,CAACC,EAAYC,CAAa,EAAId,EAAM,SAASI,CAAY,EACzD,CAACW,EAAYC,CAAa,EAAIhB,EAAM,SACxCI,EAAe,QAAmB,QACpC,EACAJ,EAAM,UAAU,IAAM,CAChB,OAAOG,EAAU,MACrBW,EAAcX,CAAK,EACnBa,EAAcb,EAAQ,QAAmB,QAAiB,EAC5D,EAAG,CAACA,CAAK,CAAC,EAEV,MAAMc,EAAWjB,EAAM,QAAQ,IAAMkB,EAAiBjB,CAAI,EAAG,CAACA,CAAI,CAAC,EAEnED,EAAM,oBACJS,EACA,IAAMC,EAAW,OACnB,EAEA,MAAMS,EAAc,IAAM,CAxFhC,IAAAC,EAAAC,EAyFQ,MAAMC,EAAUZ,EAAW,QAC3B,GAAI,CAACY,EAAS,OAGd,MAAMC,GAAyBH,EAAA,OAAO,yBACpC,OAAO,iBAAiB,UACxB,OACF,IAH+B,YAAAA,EAG5B,KACHC,EAAAE,GAAA,KAAA,OAAAA,EAAwB,OAAxB,MAAAF,EAAA,KAAAE,EAA+BD,EAAS,EACxC,EAAA,MAAME,EAAM,IAAI,MAAM,QAAS,CAC7B,QAAS,EACX,CAAC,EACDF,EAAQ,cAAcE,CAAG,EACzBF,EAAQ,QACRjB,GAAA,MAAAA,EAAgB,EAClB,CAAA,EAEMoB,EAAkBC,GAA+C,CACrEnB,GAAA,MAAAA,EAAWmB,GAEX,MAAMC,EAAWD,EAAM,OAAO,MAC9BZ,EAAca,CAAQ,EACtBtB,GAAA,MAAAA,EAAgBsB,GAChBX,EAAcW,EAAW,QAAmB,QAAiB,CAC/D,EAEMC,EAAU,IACVb,IAAe,SAEff,EAAA,cAACN,EAAA,CACC,GAAImC,EACJ,KAAM5B,EACN,IAAK,CACH,KAAMA,GAAQ,KAAO,KAAO,GAC5B,IAAK,MACL,UAAW,kBACb,CACF,CAAA,EAIFD,EAAA,cAAC8B,EAAA,CACC,MAAOxB,EACP,MAAM,UACN,KAAMW,EACN,IAAK,CACH,SAAU,WACV,IAAK,MACL,UAAW,mBACX,MAAO,IACT,EACA,QAASE,CAETnB,EAAAA,EAAA,cAACJ,EAAA,CAAK,GAAImC,CAAO,CAAA,CACnB,EAIJ,OACE/B,EAAA,cAACgC,EAAA,CAAI,IAAK,CAAE,SAAU,WAAY,OAAQ,cAAe,GAAG9B,CAAI,CAAA,EAC9DF,EAAA,cAACH,EAAA,CACC,IAAKc,EACL,KAAMV,EACN,KAAK,SACJ,GAAGO,EACJ,MAAOK,EACP,SAAUY,EACV,IAAK,CAAE,GAAIxB,IAAS,KAAO,KAAO,IAAK,CAAA,CACzC,EACC2B,EACH,CAAA,CAEJ,CACF,EAEF7B,EAAY,YAAc"}

package/dist/components/section-message/SectionMessage.d.ts

@@ -212,26 +212,11 @@ declare const StyledSectionMessage: 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;
@@ -397,7 +382,7 @@ export declare const SectionMessage: {
     Title: (props: Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
         ref?: ((instance: HTMLParagraphElement | null) => void) | React.RefObject<HTMLParagraphElement> | null | undefined;
     }, "size" | "css" | "weight" | "noCapsize" | "family"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
-        weight?: "bold" | "regular" | undefined;
+        weight?: "normal" | "bold" | undefined;
         family?: "display" | "mono" | "body" | undefined;
         size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
         noCapsize?: boolean | "true" | undefined;
@@ -606,26 +591,11 @@ export declare const SectionMessage: {
                 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;
@@ -787,7 +757,7 @@ export declare const SectionMessage: {
     Description: ({ css, ...rest }: Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
         ref?: ((instance: HTMLParagraphElement | null) => void) | React.RefObject<HTMLParagraphElement> | null | undefined;
     }, "size" | "css" | "weight" | "noCapsize" | "family"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
-        weight?: "bold" | "regular" | undefined;
+        weight?: "normal" | "bold" | undefined;
         family?: "display" | "mono" | "body" | undefined;
         size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
         noCapsize?: boolean | "true" | undefined;
@@ -996,26 +966,11 @@ export declare const SectionMessage: {
                 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;
@@ -1383,26 +1338,11 @@ export declare const SectionMessage: {
                 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;
@@ -1774,26 +1714,11 @@ export declare const SectionMessage: {
                 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;
@@ -2174,26 +2099,11 @@ export declare const SectionMessage: {
                 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;
@@ -2563,26 +2473,11 @@ export declare const SectionMessage: {
                 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/select/Select.d.ts

@@ -207,26 +207,11 @@ declare const StyledSelect: 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;

package/dist/components/select/Select.js

@@ -1,2 +1,2 @@
-import*as o from"react";import{styled as p,theme as s}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import{encodeBackgroundIcon as c}from"../../utilities/style/encode-background-icon.js";import"../../utilities/style/keyframe-animations.js";import{disabledStyle as u}from"../../utilities/style/disabledStyle.js";const m=p("select",{appearance:"none",backgroundColor:"white",backgroundImage:c(s.colors.tonal300.value,"chevron"),backgroundRepeat:"no-repeat, repeat",border:"1px solid $tonal300",borderRadius:"$0",color:"$tonal600",display:"block",fontFamily:"$body",fontWeight:400,lineHeight:1.4,transition:"all 75ms ease-out",width:"100%","&:hover":{cursor:"pointer"},"&:focus":{borderColor:"$primary800",outline:"none"},"&::-ms-expand":{display:"none"},"&[disabled], > option[disabled]":u,variants:{size:{sm:{backgroundPosition:"right $space$2 top 50%, 0 0",backgroundSize:"18px auto, 100%",fontSize:"$sm",height:"$3",pl:"$2",pr:"$5"},md:{backgroundPosition:"right $space$3 top 50%, 0 0",backgroundSize:"20px auto, 100%",fontSize:"$md",height:"$4",pl:"$3",pr:"$6"},lg:{backgroundPosition:"right $space$3 top 50%, 0 0",backgroundSize:"20px auto, 100%",fontSize:"$md",height:"$5",pl:"$3",pr:"$6"}},state:{error:{border:"1px solid $danger"}}}}),a=o.forwardRef(({placeholder:r,children:i,size:n="md",...e},d)=>{const t={size:n,ref:d,...e};return[e.value,e.defaultValue].every(l=>l===void 0)&&(t.defaultValue=""),o.createElement(m,{...t},r&&o.createElement("option",{disabled:!0,hidden:!0,value:""},r),i)});a.displayName="Select";export{a as Select};
+import*as o from"react";import{styled as p,theme as s}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import{encodeBackgroundIcon as c}from"../../utilities/style/encode-background-icon.js";import"../../utilities/style/keyframe-animations.js";import{disabledStyle as u}from"../../utilities/style/disabledStyle.js";const m=p("select",{appearance:"none",backgroundColor:"white",backgroundImage:c(s.colors.grey700.value,"chevron"),backgroundRepeat:"no-repeat, repeat",border:"1px solid $grey700",borderRadius:"$0",color:"$grey1000",display:"block",fontFamily:"$body",fontWeight:400,lineHeight:1.4,transition:"all 75ms ease-out",width:"100%","&:hover":{cursor:"pointer"},"&:focus":{borderColor:"$primary800",outline:"none"},"&::-ms-expand":{display:"none"},"&[disabled], > option[disabled]":u,variants:{size:{sm:{backgroundPosition:"right $space$2 top 50%, 0 0",backgroundSize:"18px auto, 100%",fontSize:"$sm",height:"$3",pl:"$2",pr:"$5"},md:{backgroundPosition:"right $space$3 top 50%, 0 0",backgroundSize:"20px auto, 100%",fontSize:"$md",height:"$4",pl:"$3",pr:"$6"},lg:{backgroundPosition:"right $space$3 top 50%, 0 0",backgroundSize:"20px auto, 100%",fontSize:"$md",height:"$5",pl:"$3",pr:"$6"}},state:{error:{border:"1px solid $danger"}}}}),i=o.forwardRef(({placeholder:r,children:a,size:n="md",...e},d)=>{const t={size:n,ref:d,...e};return[e.value,e.defaultValue].every(l=>l===void 0)&&(t.defaultValue=""),o.createElement(m,{...t},r&&o.createElement("option",{disabled:!0,hidden:!0,value:""},r),a)});i.displayName="Select";export{i as Select};
 //# sourceMappingURL=Select.js.map

package/dist/components/select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../src/components/select/Select.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, theme } from '~/stitches'\nimport { disabledStyle, encodeBackgroundIcon } from '~/utilities'\nimport { Override } from '~/utilities/types'\n\nconst StyledSelect = styled('select', {\n  appearance: 'none',\n  backgroundColor: 'white',\n  backgroundImage: encodeBackgroundIcon(theme.colors.tonal300.value, 'chevron'),\n  backgroundRepeat: 'no-repeat, repeat',\n  border: '1px solid $tonal300',\n  borderRadius: '$0',\n  color: '$tonal600',\n  display: 'block',\n  fontFamily: '$body',\n  fontWeight: 400,\n  lineHeight: 1.4,\n  transition: 'all 75ms ease-out',\n  width: '100%',\n  '&:hover': {\n    cursor: 'pointer'\n  },\n  '&:focus': {\n    borderColor: '$primary800',\n    outline: 'none'\n  },\n  '&::-ms-expand': {\n    display: 'none'\n  },\n  '&[disabled], > option[disabled]': disabledStyle,\n  variants: {\n    size: {\n      sm: {\n        backgroundPosition: 'right $space$2 top 50%, 0 0',\n        backgroundSize: '18px auto, 100%',\n        fontSize: '$sm',\n        height: '$3',\n        pl: '$2',\n        pr: '$5'\n      },\n      md: {\n        backgroundPosition: 'right $space$3 top 50%, 0 0',\n        backgroundSize: '20px auto, 100%',\n        fontSize: '$md',\n        height: '$4',\n        pl: '$3',\n        pr: '$6'\n      },\n      lg: {\n        backgroundPosition: 'right $space$3 top 50%, 0 0',\n        backgroundSize: '20px auto, 100%',\n        fontSize: '$md',\n        height: '$5',\n        pl: '$3',\n        pr: '$6'\n      }\n    },\n    state: {\n      error: {\n        border: '1px solid $danger'\n      }\n    }\n  }\n})\n\nexport type SelectProps = Override<\n  React.ComponentProps<typeof StyledSelect>,\n  {\n    as?: never\n    placeholder?: string\n  }\n  // TODO: figure out why uncommenting this causes TS errors in\n  // component declaration\n  // & (\n  //   | { id: string; 'aria-label'?: string }\n  //   | { 'aria-label': string; id?: string }\n  // )\n>\n\nexport const Select: React.ForwardRefExoticComponent<SelectProps> =\n  React.forwardRef(\n    ({ placeholder, children, size = 'md', ...remainingProps }, ref) => {\n      const props = { size, ref, ...remainingProps }\n\n      if (\n        [remainingProps.value, remainingProps.defaultValue].every(\n          (value) => value === undefined\n        )\n      ) {\n        props.defaultValue = ''\n      }\n\n      return (\n        <StyledSelect {...props}>\n          {placeholder && (\n            <option disabled hidden value=\"\">\n              {placeholder}\n            </option>\n          )}\n          {children}\n        </StyledSelect>\n      )\n    }\n  )\n\nSelect.displayName = 'Select'\n"],"names":["StyledSelect","styled","encodeBackgroundIcon","theme","disabledStyle","Select","React","placeholder","children","size","remainingProps","ref","props","value"],"mappings":"oZAMA,MAAMA,EAAeC,EAAO,SAAU,CACpC,WAAY,OACZ,gBAAiB,QACjB,gBAAiBC,EAAqBC,EAAM,OAAO,SAAS,MAAO,SAAS,EAC5E,iBAAkB,oBAClB,OAAQ,sBACR,aAAc,KACd,MAAO,YACP,QAAS,QACT,WAAY,QACZ,WAAY,IACZ,WAAY,IACZ,WAAY,oBACZ,MAAO,OACP,UAAW,CACT,OAAQ,SACV,EACA,UAAW,CACT,YAAa,cACb,QAAS,MACX,EACA,gBAAiB,CACf,QAAS,MACX,EACA,kCAAmCC,EACnC,SAAU,CACR,KAAM,CACJ,GAAI,CACF,mBAAoB,8BACpB,eAAgB,kBAChB,SAAU,MACV,OAAQ,KACR,GAAI,KACJ,GAAI,IACN,EACA,GAAI,CACF,mBAAoB,8BACpB,eAAgB,kBAChB,SAAU,MACV,OAAQ,KACR,GAAI,KACJ,GAAI,IACN,EACA,GAAI,CACF,mBAAoB,8BACpB,eAAgB,kBAChB,SAAU,MACV,OAAQ,KACR,GAAI,KACJ,GAAI,IACN,CACF,EACA,MAAO,CACL,MAAO,CACL,OAAQ,mBACV,CACF,CACF,CACF,CAAC,EAgBYC,EACXC,EAAM,WACJ,CAAC,CAAE,YAAAC,EAAa,SAAAC,EAAU,KAAAC,EAAO,QAASC,CAAe,EAAGC,IAAQ,CAClE,MAAMC,EAAQ,CAAE,KAAAH,EAAM,IAAAE,EAAK,GAAGD,CAAe,EAE7C,MACE,CAACA,EAAe,MAAOA,EAAe,YAAY,EAAE,MACjDG,GAAUA,IAAU,MACvB,IAEAD,EAAM,aAAe,IAIrBN,EAAA,cAACN,EAAA,CAAc,GAAGY,CAAAA,EACfL,GACCD,EAAA,cAAC,UAAO,SAAQ,GAAC,OAAM,GAAC,MAAM,IAC3BC,CACH,EAEDC,CACH,CAEJ,CACF,EAEFH,EAAO,YAAc"}
+{"version":3,"file":"Select.js","sources":["../../../src/components/select/Select.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, theme } from '~/stitches'\nimport { disabledStyle, encodeBackgroundIcon } from '~/utilities'\nimport { Override } from '~/utilities/types'\n\nconst StyledSelect = styled('select', {\n  appearance: 'none',\n  backgroundColor: 'white',\n  backgroundImage: encodeBackgroundIcon(theme.colors.grey700.value, 'chevron'),\n  backgroundRepeat: 'no-repeat, repeat',\n  border: '1px solid $grey700',\n  borderRadius: '$0',\n  color: '$grey1000',\n  display: 'block',\n  fontFamily: '$body',\n  fontWeight: 400,\n  lineHeight: 1.4,\n  transition: 'all 75ms ease-out',\n  width: '100%',\n  '&:hover': {\n    cursor: 'pointer'\n  },\n  '&:focus': {\n    borderColor: '$primary800',\n    outline: 'none'\n  },\n  '&::-ms-expand': {\n    display: 'none'\n  },\n  '&[disabled], > option[disabled]': disabledStyle,\n  variants: {\n    size: {\n      sm: {\n        backgroundPosition: 'right $space$2 top 50%, 0 0',\n        backgroundSize: '18px auto, 100%',\n        fontSize: '$sm',\n        height: '$3',\n        pl: '$2',\n        pr: '$5'\n      },\n      md: {\n        backgroundPosition: 'right $space$3 top 50%, 0 0',\n        backgroundSize: '20px auto, 100%',\n        fontSize: '$md',\n        height: '$4',\n        pl: '$3',\n        pr: '$6'\n      },\n      lg: {\n        backgroundPosition: 'right $space$3 top 50%, 0 0',\n        backgroundSize: '20px auto, 100%',\n        fontSize: '$md',\n        height: '$5',\n        pl: '$3',\n        pr: '$6'\n      }\n    },\n    state: {\n      error: {\n        border: '1px solid $danger'\n      }\n    }\n  }\n})\n\nexport type SelectProps = Override<\n  React.ComponentProps<typeof StyledSelect>,\n  {\n    as?: never\n    placeholder?: string\n  }\n  // TODO: figure out why uncommenting this causes TS errors in\n  // component declaration\n  // & (\n  //   | { id: string; 'aria-label'?: string }\n  //   | { 'aria-label': string; id?: string }\n  // )\n>\n\nexport const Select: React.ForwardRefExoticComponent<SelectProps> =\n  React.forwardRef(\n    ({ placeholder, children, size = 'md', ...remainingProps }, ref) => {\n      const props = { size, ref, ...remainingProps }\n\n      if (\n        [remainingProps.value, remainingProps.defaultValue].every(\n          (value) => value === undefined\n        )\n      ) {\n        props.defaultValue = ''\n      }\n\n      return (\n        <StyledSelect {...props}>\n          {placeholder && (\n            <option disabled hidden value=\"\">\n              {placeholder}\n            </option>\n          )}\n          {children}\n        </StyledSelect>\n      )\n    }\n  )\n\nSelect.displayName = 'Select'\n"],"names":["StyledSelect","styled","encodeBackgroundIcon","theme","disabledStyle","Select","React","placeholder","children","size","remainingProps","ref","props","value"],"mappings":"oZAMA,MAAMA,EAAeC,EAAO,SAAU,CACpC,WAAY,OACZ,gBAAiB,QACjB,gBAAiBC,EAAqBC,EAAM,OAAO,QAAQ,MAAO,SAAS,EAC3E,iBAAkB,oBAClB,OAAQ,qBACR,aAAc,KACd,MAAO,YACP,QAAS,QACT,WAAY,QACZ,WAAY,IACZ,WAAY,IACZ,WAAY,oBACZ,MAAO,OACP,UAAW,CACT,OAAQ,SACV,EACA,UAAW,CACT,YAAa,cACb,QAAS,MACX,EACA,gBAAiB,CACf,QAAS,MACX,EACA,kCAAmCC,EACnC,SAAU,CACR,KAAM,CACJ,GAAI,CACF,mBAAoB,8BACpB,eAAgB,kBAChB,SAAU,MACV,OAAQ,KACR,GAAI,KACJ,GAAI,IACN,EACA,GAAI,CACF,mBAAoB,8BACpB,eAAgB,kBAChB,SAAU,MACV,OAAQ,KACR,GAAI,KACJ,GAAI,IACN,EACA,GAAI,CACF,mBAAoB,8BACpB,eAAgB,kBAChB,SAAU,MACV,OAAQ,KACR,GAAI,KACJ,GAAI,IACN,CACF,EACA,MAAO,CACL,MAAO,CACL,OAAQ,mBACV,CACF,CACF,CACF,CAAC,EAgBYC,EACXC,EAAM,WACJ,CAAC,CAAE,YAAAC,EAAa,SAAAC,EAAU,KAAAC,EAAO,QAASC,CAAe,EAAGC,IAAQ,CAClE,MAAMC,EAAQ,CAAE,KAAAH,EAAM,IAAAE,EAAK,GAAGD,CAAe,EAE7C,MACE,CAACA,EAAe,MAAOA,EAAe,YAAY,EAAE,MACjDG,GAAUA,IAAU,MACvB,IAEAD,EAAM,aAAe,IAIrBN,EAAA,cAACN,EAAA,CAAc,GAAGY,CAAAA,EACfL,GACCD,EAAA,cAAC,UAAO,SAAQ,GAAC,OAAM,GAAC,MAAM,IAC3BC,CACH,EAEDC,CACH,CAEJ,CACF,EAEFH,EAAO,YAAc"}

package/dist/components/side-bar/SideBar.d.ts

@@ -205,26 +205,11 @@ declare const Root: import("@atom-learning/stitches-react/types/styled-component
         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;
@@ -589,26 +574,11 @@ export declare const SideBar: {
             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;
@@ -974,26 +944,11 @@ export declare const SideBar: {
                     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;
@@ -1157,7 +1112,7 @@ export declare const SideBar: {
     BrandName: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
         ref?: ((instance: HTMLParagraphElement | null) => void) | React.RefObject<HTMLParagraphElement> | null | undefined;
     }, "size" | "css" | "weight" | "noCapsize" | "family"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
-        weight?: "bold" | "regular" | undefined;
+        weight?: "normal" | "bold" | undefined;
         family?: "display" | "mono" | "body" | undefined;
         size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
         noCapsize?: boolean | "true" | undefined;
@@ -1366,26 +1321,11 @@ export declare const SideBar: {
                 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;
@@ -1747,26 +1687,11 @@ export declare const SideBar: {
             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;
@@ -2126,26 +2051,11 @@ export declare const SideBar: {
             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;
@@ -2505,26 +2415,11 @@ export declare const SideBar: {
             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;
@@ -2884,26 +2779,11 @@ export declare const SideBar: {
             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;