@atom-learning/components 2.33.0 → 2.35.0

package/dist/components/tabs/TabsTriggerList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsTriggerList.js","sources":["../../../src/components/tabs/TabsTriggerList.tsx"],"sourcesContent":["import { List } from '@radix-ui/react-tabs'\nimport React from 'react'\nimport { styled } from '~/stitches'\nimport { ColorScheme } from '~/experiments/color-scheme'\nimport { useWindowSize } from '~/utilities/hooks/useWindowSize'\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\nimport { ActionIcon } from '../action-icon'\nimport { Icon } from '../icon'\nimport { ChevronLeft, ChevronRight } from '@atom-learning/icons'\n\nconst StyledContainer = styled(ColorScheme, {\n  position: 'relative',\n  borderBottom: '1px solid $base3',\n  width: '100%'\n})\n\nconst StyledTriggerList = styled(List, {\n  flexShrink: 0,\n  display: 'flex',\n  width: '100%',\n  overflowX: 'auto',\n  '&::-webkit-scrollbar': { display: 'none' },\n  scrollbarWidth: 'none'\n})\n\nconst StyledChevronActionIcon = styled(ActionIcon, {\n  height: '100% !important',\n  position: 'absolute',\n  top: '50%',\n  transform: 'translateY(-50%)',\n  cursor: 'pointer',\n  background: '$background !important',\n  color: '$interactive1 !important',\n  borderRadius: 0,\n  opacity: 0.9\n})\n\nconst SCROLL_PERCENTAGE = 10\nexport const TabsTriggerList: React.FC<\n  React.ComponentProps<typeof StyledTriggerList> & {\n    colorScheme?: typeof ColorScheme\n  }\n> = ({ children, colorScheme = {}, ...rest }) => {\n  const [listRef, setListRefCallback] = useCallbackRefState()\n\n  const { width: screenWidth } = useWindowSize()\n\n  const [showLeftScroller, setShowLeftScroller] = React.useState<boolean>(false)\n  const [showRightScroller, setShowRightScroller] =\n    React.useState<boolean>(false)\n\n  const scrollTriggerListTo = React.useCallback(\n    (direction: 'left' | 'right') => {\n      if (!listRef) return\n      const { scrollWidth, scrollLeft, offsetWidth } = listRef\n      const scrollAmount = Math.round(scrollWidth * (SCROLL_PERCENTAGE / 100))\n      let left = scrollLeft\n      if (direction === 'right') {\n        const newScrollAmount = scrollLeft + scrollAmount\n        left =\n          newScrollAmount + offsetWidth <= scrollWidth\n            ? newScrollAmount\n            : scrollWidth - offsetWidth\n      } else {\n        const newScrollAmount = scrollLeft - scrollAmount\n        left = newScrollAmount > 0 ? newScrollAmount : 0\n      }\n\n      listRef.scroll({\n        left,\n        behavior: 'smooth'\n      })\n\n      // Relying on setTimeout since scroll does not have a callback / doesn't return a promise :(\n      setTimeout(() => {\n        const { scrollWidth, scrollLeft, offsetWidth } = listRef\n        const scrollDistance = scrollWidth - (scrollLeft + offsetWidth)\n        if (scrollLeft === 0) {\n          setShowLeftScroller(false)\n          setShowRightScroller(true)\n        } else if (scrollDistance < 5) {\n          // sometimes right button does not hide due to few pixel precision\n          setShowRightScroller(false)\n          setShowLeftScroller(true)\n        } else {\n          setShowLeftScroller(true)\n          setShowRightScroller(true)\n        }\n      }, 500)\n    },\n    [listRef]\n  )\n\n  React.useEffect(() => {\n    if (!listRef) return\n    const { offsetWidth, scrollWidth } = listRef\n\n    const shouldShowScroller = scrollWidth > offsetWidth\n\n    // Scroll to left on resize, hide left scroll button and then decide if right scroll button should be visible or not\n    listRef.scroll?.({\n      left: 0\n    })\n    setShowLeftScroller(false)\n    setShowRightScroller(shouldShowScroller)\n  }, [listRef, screenWidth])\n\n  return (\n    <StyledContainer\n      base=\"slate\"\n      accent=\"blue\"\n      interactive=\"hiContrast1\"\n      {...colorScheme}\n      {...rest}\n    >\n      {showLeftScroller && (\n        <StyledChevronActionIcon\n          label=\"scroll left\"\n          size=\"md\"\n          css={{\n            left: 0\n          }}\n          onClick={() => scrollTriggerListTo('left')}\n        >\n          <Icon is={ChevronLeft} />\n        </StyledChevronActionIcon>\n      )}\n\n      <StyledTriggerList ref={setListRefCallback}>{children}</StyledTriggerList>\n\n      {showRightScroller && (\n        <StyledChevronActionIcon\n          label=\"scroll right\"\n          size=\"md\"\n          css={{\n            right: 0\n          }}\n          onClick={() => scrollTriggerListTo('right')}\n        >\n          <Icon is={ChevronRight} />\n        </StyledChevronActionIcon>\n      )}\n    </StyledContainer>\n  )\n}\n\nTabsTriggerList.displayName = 'TabsTriggerList'\n"],"names":["StyledContainer","styled","ColorScheme","StyledTriggerList","List","StyledChevronActionIcon","ActionIcon","SCROLL_PERCENTAGE","TabsTriggerList","children","colorScheme","rest","listRef","setListRefCallback","useCallbackRefState","screenWidth","useWindowSize","showLeftScroller","setShowLeftScroller","React","showRightScroller","setShowRightScroller","scrollTriggerListTo","direction","scrollWidth","scrollLeft","offsetWidth","scrollAmount","left","newScrollAmount","scrollDistance","_a","shouldShowScroller","Icon","ChevronLeft","ChevronRight"],"mappings":"mfAUA,MAAMA,EAAkBC,EAAOC,EAAa,CAC1C,SAAU,WACV,aAAc,mBACd,MAAO,MACT,CAAC,EAEKC,EAAoBF,EAAOG,EAAM,CACrC,WAAY,EACZ,QAAS,OACT,MAAO,OACP,UAAW,OACX,uBAAwB,CAAE,QAAS,MAAO,EAC1C,eAAgB,MAClB,CAAC,EAEKC,EAA0BJ,EAAOK,EAAY,CACjD,OAAQ,kBACR,SAAU,WACV,IAAK,MACL,UAAW,mBACX,OAAQ,UACR,WAAY,yBACZ,MAAO,2BACP,aAAc,EACd,QAAS,EACX,CAAC,EAEKC,EAAoB,GACbC,EAIT,CAAC,CAAE,SAAAC,EAAU,YAAAC,EAAc,CAAA,KAAOC,CAAK,IAAM,CAC/C,KAAM,CAACC,EAASC,CAAkB,EAAIC,IAEhC,CAAE,MAAOC,CAAY,EAAIC,EAAAA,EAEzB,CAACC,EAAkBC,CAAmB,EAAIC,EAAM,SAAkB,EAAK,EACvE,CAACC,EAAmBC,CAAoB,EAC5CF,EAAM,SAAkB,EAAK,EAEzBG,EAAsBH,EAAM,YAC/BI,GAAgC,CAC/B,GAAI,CAACX,EAAS,OACd,KAAM,CAAE,YAAAY,EAAa,WAAAC,EAAY,YAAAC,CAAY,EAAId,EAC3Ce,EAAe,KAAK,MAAMH,GAAejB,EAAoB,IAAI,EACvE,IAAIqB,EAAOH,EACX,GAAIF,IAAc,QAAS,CACzB,MAAMM,EAAkBJ,EAAaE,EACrCC,EACEC,EAAkBH,GAAeF,EAC7BK,EACAL,EAAcE,CACtB,KAAO,CACL,MAAMG,EAAkBJ,EAAaE,EACrCC,EAAOC,EAAkB,EAAIA,EAAkB,CACjD,CAEAjB,EAAQ,OAAO,CACb,KAAAgB,EACA,SAAU,QACZ,CAAC,EAGD,WAAW,IAAM,CACf,KAAM,CAAE,YAAAJ,EAAa,WAAAC,EAAY,YAAAC,CAAY,EAAId,EAC3CkB,EAAiBN,GAAeC,EAAaC,GAC/CD,IAAe,GACjBP,EAAoB,EAAK,EACzBG,EAAqB,EAAI,GAChBS,EAAiB,GAE1BT,EAAqB,EAAK,EAC1BH,EAAoB,EAAI,IAExBA,EAAoB,EAAI,EACxBG,EAAqB,EAAI,EAE7B,EAAG,GAAG,CACR,EACA,CAACT,CAAO,CACV,EAEA,OAAAO,EAAM,UAAU,IAAM,CA7FxB,IAAAY,EA8FI,GAAI,CAACnB,EAAS,OACd,KAAM,CAAE,YAAAc,EAAa,YAAAF,CAAY,EAAIZ,EAE/BoB,EAAqBR,EAAcE,GAGzCK,EAAAnB,EAAQ,SAAR,MAAAmB,EAAA,KAAAnB,EAAiB,CACf,KAAM,CACR,CAAA,EACAM,EAAoB,EAAK,EACzBG,EAAqBW,CAAkB,CACzC,EAAG,CAACpB,EAASG,CAAW,CAAC,EAGvBI,EAAA,cAACnB,EAAA,CACC,KAAK,QACL,OAAO,OACP,YAAY,cACX,GAAGU,EACH,GAAGC,CAEHM,EAAAA,GACCE,EAAA,cAACd,EAAA,CACC,MAAM,cACN,KAAK,KACL,IAAK,CACH,KAAM,CACR,EACA,QAAS,IAAMiB,EAAoB,MAAM,CAAA,EAEzCH,EAAA,cAACc,EAAA,CAAK,GAAIC,CAAAA,CAAa,CACzB,EAGFf,EAAA,cAAChB,EAAA,CAAkB,IAAKU,CAAqBJ,EAAAA,CAAS,EAErDW,GACCD,EAAA,cAACd,EAAA,CACC,MAAM,eACN,KAAK,KACL,IAAK,CACH,MAAO,CACT,EACA,QAAS,IAAMiB,EAAoB,OAAO,CAE1CH,EAAAA,EAAA,cAACc,EAAA,CAAK,GAAIE,CAAc,CAAA,CAC1B,CAEJ,CAEJ,EAEA3B,EAAgB,YAAc"}

package/dist/components/text/Text.d.ts

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

package/dist/components/text/Text.js

@@ -1 +1,2 @@
 import*as o from"react";import{styled as f}from"../../stitches.js";import{capsize as e}from"../../utilities/style/capsize.js";const t={size:{xs:{fontSize:"$xs",lineHeight:1.6,...e(.4364)},sm:{fontSize:"$sm",lineHeight:1.53,...e(.4056)},md:{fontSize:"$md",lineHeight:1.5,...e(.3864)},lg:{fontSize:"$lg",lineHeight:1.52,...e(.3983)},xl:{fontSize:"$xl",lineHeight:1.42,...e(.3506)}},noCapsize:{true:{"&::before, &::after":{display:"none !important"}}}},l=({size:i,noCapsize:n})=>({...t.size[i],...t.noCapsize[`${n}`]}),a=f("p",{fontFamily:"$body",fontWeight:400,margin:0,"& > &":{"&:before, &:after":{display:"none"}},variants:t}),r=o.forwardRef(({size:i="md",...n},s)=>o.createElement(a,{size:i,...n,ref:s}));r.displayName="Text";export{a as StyledText,r as Text,l as getTextVariant,t as textVariants};
+//# sourceMappingURL=Text.js.map

package/dist/components/text/Text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.js","sources":["../../../src/components/text/Text.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS, styled } from '~/stitches'\nimport type { Override } from '~/utilities'\nimport { capsize } from '~/utilities'\n\nexport const textVariants = {\n  size: {\n    xs: { fontSize: '$xs', lineHeight: 1.6, ...capsize(0.4364) },\n    sm: { fontSize: '$sm', lineHeight: 1.53, ...capsize(0.4056) },\n    md: { fontSize: '$md', lineHeight: 1.5, ...capsize(0.3864) },\n    lg: { fontSize: '$lg', lineHeight: 1.52, ...capsize(0.3983) },\n    xl: { fontSize: '$xl', lineHeight: 1.42, ...capsize(0.3506) }\n  },\n  noCapsize: {\n    true: {\n      '&::before, &::after': { display: 'none !important' }\n    }\n  }\n}\n\nexport const getTextVariant: (options: {\n  size: keyof typeof textVariants.size\n  noCapsize?: boolean\n}) => CSS = ({ size, noCapsize }) => ({\n  ...textVariants.size[size],\n  ...textVariants.noCapsize[`${noCapsize}`]\n})\n\nexport const StyledText = styled('p', {\n  fontFamily: '$body',\n  fontWeight: 400,\n  margin: 0,\n  /** Allow nesting `<Text />` inside `<Text />` without forcing a new line and spacing. */\n  '& > &': {\n    '&:before, &:after': { display: 'none' }\n  },\n  variants: textVariants\n})\n\ntype TextProps = Override<\n  React.ComponentProps<typeof StyledText>,\n  {\n    as?:\n      | 'blockquote'\n      | 'caption'\n      | 'dd'\n      | 'dt'\n      | 'figcaption'\n      | 'li'\n      | 'p'\n      | 'span'\n      | 'legend'\n      | React.ComponentType\n      | React.ElementType\n  }\n>\n\nexport const Text: React.ForwardRefExoticComponent<TextProps> =\n  React.forwardRef(({ size = 'md', ...remainingProps }, ref) => (\n    <StyledText size={size} {...remainingProps} ref={ref} />\n  ))\n\nText.displayName = 'Text'\n"],"names":["textVariants","capsize","getTextVariant","size","noCapsize","StyledText","styled","Text","React","remainingProps","ref"],"mappings":"8HAMO,MAAMA,EAAe,CAC1B,KAAM,CACJ,GAAI,CAAE,SAAU,MAAO,WAAY,IAAK,GAAGC,EAAQ,KAAM,CAAE,EAC3D,GAAI,CAAE,SAAU,MAAO,WAAY,KAAM,GAAGA,EAAQ,KAAM,CAAE,EAC5D,GAAI,CAAE,SAAU,MAAO,WAAY,IAAK,GAAGA,EAAQ,KAAM,CAAE,EAC3D,GAAI,CAAE,SAAU,MAAO,WAAY,KAAM,GAAGA,EAAQ,KAAM,CAAE,EAC5D,GAAI,CAAE,SAAU,MAAO,WAAY,KAAM,GAAGA,EAAQ,KAAM,CAAE,CAC9D,EACA,UAAW,CACT,KAAM,CACJ,sBAAuB,CAAE,QAAS,iBAAkB,CACtD,CACF,CACF,EAEaC,EAGD,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,KAAO,CACpC,GAAGJ,EAAa,KAAKG,GACrB,GAAGH,EAAa,UAAU,GAAGI,IAC/B,GAEaC,EAAaC,EAAO,IAAK,CACpC,WAAY,QACZ,WAAY,IACZ,OAAQ,EAER,QAAS,CACP,oBAAqB,CAAE,QAAS,MAAO,CACzC,EACA,SAAUN,CACZ,CAAC,EAoBYO,EACXC,EAAM,WAAW,CAAC,CAAE,KAAAL,EAAO,QAASM,CAAe,EAAGC,IACpDF,EAAA,cAACH,EAAW,CAAA,KAAMF,EAAO,GAAGM,EAAgB,IAAKC,CAAAA,CAAK,CACvD,EAEHH,EAAK,YAAc"}

package/dist/components/textarea/Textarea.d.ts

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

package/dist/components/textarea/Textarea.js

@@ -1 +1,2 @@
 import*as o from"react";import{styled as t}from"../../stitches.js";const n=t("textarea",{boxShadow:"none",fontSize:"$md",appearance:"none",border:"1px solid $tonal400",borderRadius:"$0",boxSizing:"border-box",color:"$tonal600",fontFamily:"$body",fontWeight:400,lineHeight:1.4,minHeight:"$7",px:"$3",py:"calc($2 + $1)",resize:"vertical",transition:"all 75ms ease-out",width:"100%","&:focus":{borderColor:"$primary",outline:"none"},"&[disabled]":{backgroundColor:"$tonal100",color:"$tonal400",cursor:"not-allowed"},"&::placeholder":{color:"$tonal300",opacity:1},variants:{state:{error:{border:"1px solid $danger"}}}}),e=o.forwardRef((r,a)=>o.createElement(n,{...r,ref:a}));e.displayName="Textarea";export{e as Textarea};
+//# sourceMappingURL=Textarea.js.map

package/dist/components/textarea/Textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.js","sources":["../../../src/components/textarea/Textarea.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nconst StyledTextarea = styled('textarea', {\n  boxShadow: 'none', // remove iOS default styling\n  fontSize: '$md', // prevent iOS zooming on focus\n  appearance: 'none',\n  border: '1px solid $tonal400',\n  borderRadius: '$0',\n  boxSizing: 'border-box',\n  color: '$tonal600',\n  fontFamily: '$body',\n  fontWeight: 400,\n  lineHeight: 1.4,\n  minHeight: '$7',\n  px: '$3',\n  py: 'calc($2 + $1)', // offset the line height of the text\n  resize: 'vertical',\n  transition: 'all 75ms ease-out',\n  width: '100%',\n  '&:focus': {\n    borderColor: '$primary',\n    outline: 'none'\n  },\n  '&[disabled]': {\n    backgroundColor: '$tonal100',\n    color: '$tonal400',\n    cursor: 'not-allowed'\n  },\n  '&::placeholder': {\n    color: '$tonal300',\n    opacity: 1\n  },\n  variants: {\n    state: {\n      error: {\n        border: '1px solid $danger'\n      }\n    }\n  }\n})\n\nexport type TextareaProps = React.ComponentProps<typeof StyledTextarea>\n\nexport const Textarea: React.FC<TextareaProps> = React.forwardRef(\n  (props, ref) => <StyledTextarea {...props} ref={ref} />\n)\n\nTextarea.displayName = 'Textarea'\n"],"names":["StyledTextarea","styled","Textarea","React","props","ref"],"mappings":"mEAIA,MAAMA,EAAiBC,EAAO,WAAY,CACxC,UAAW,OACX,SAAU,MACV,WAAY,OACZ,OAAQ,sBACR,aAAc,KACd,UAAW,aACX,MAAO,YACP,WAAY,QACZ,WAAY,IACZ,WAAY,IACZ,UAAW,KACX,GAAI,KACJ,GAAI,gBACJ,OAAQ,WACR,WAAY,oBACZ,MAAO,OACP,UAAW,CACT,YAAa,WACb,QAAS,MACX,EACA,cAAe,CACb,gBAAiB,YACjB,MAAO,YACP,OAAQ,aACV,EACA,iBAAkB,CAChB,MAAO,YACP,QAAS,CACX,EACA,SAAU,CACR,MAAO,CACL,MAAO,CACL,OAAQ,mBACV,CACF,CACF,CACF,CAAC,EAIYC,EAAoCC,EAAM,WACrD,CAACC,EAAOC,IAAQF,EAAA,cAACH,EAAA,CAAgB,GAAGI,EAAO,IAAKC,CAAK,CAAA,CACvD,EAEAH,EAAS,YAAc"}

package/dist/components/textarea-field/TextareaField.js

@@ -1 +1,2 @@
 import*as i from"react";import{useFormContext as c}from"react-hook-form";import{FieldWrapper as f}from"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../form/Form.js";import{useFieldError as u}from"../form/useFieldError.js";import{Textarea as x}from"../textarea/Textarea.js";const a=({css:m=void 0,label:p,name:r,validation:e,prompt:l,description:d,...s})=>{const{register:o}=c(),{error:t}=u(r),n=e?o(e):o;return i.createElement(f,{css:m,description:d,error:t,fieldId:r,label:p,prompt:l,required:Boolean(e==null?void 0:e.required)},i.createElement(x,{id:r,name:r,ref:n,...t&&{state:"error"},...s}))};a.displayName="TextareaField";export{a as TextareaField};
+//# sourceMappingURL=TextareaField.js.map

package/dist/components/textarea-field/TextareaField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextareaField.js","sources":["../../../src/components/textarea-field/TextareaField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n  FieldElementWrapperProps,\n  FieldWrapper\n} from '~/components/field-wrapper'\nimport { useFieldError } from '~/components/form'\nimport { Textarea, TextareaProps } from '~/components/textarea'\n\ntype TextareaFieldProps = TextareaProps & FieldElementWrapperProps\n\nexport const TextareaField: React.FC<TextareaFieldProps> = ({\n  css = undefined,\n  label,\n  name,\n  validation,\n  prompt,\n  description,\n  ...remainingProps\n}) => {\n  const { register } = useFormContext()\n  const { error } = useFieldError(name)\n\n  const ref = validation ? register(validation) : register\n\n  return (\n    <FieldWrapper\n      css={css}\n      description={description}\n      error={error}\n      fieldId={name}\n      label={label}\n      prompt={prompt}\n      required={Boolean(validation?.required)}\n    >\n      <Textarea\n        id={name}\n        name={name}\n        ref={ref}\n        {...(error && { state: 'error' })}\n        {...remainingProps}\n      />\n    </FieldWrapper>\n  )\n}\n\nTextareaField.displayName = 'TextareaField'\n"],"names":["TextareaField","css","label","name","validation","prompt","description","remainingProps","register","useFormContext","error","useFieldError","ref","React","FieldWrapper","Textarea"],"mappings":"kUAYaA,EAA8C,CAAC,CAC1D,IAAAC,EAAM,OACN,MAAAC,EACA,KAAAC,EACA,WAAAC,EACA,OAAAC,EACA,YAAAC,KACGC,CACL,IAAM,CACJ,KAAM,CAAE,SAAAC,CAAS,EAAIC,IACf,CAAE,MAAAC,CAAM,EAAIC,EAAcR,CAAI,EAE9BS,EAAMR,EAAaI,EAASJ,CAAU,EAAII,EAEhD,OACEK,EAAA,cAACC,EAAA,CACC,IAAKb,EACL,YAAaK,EACb,MAAOI,EACP,QAASP,EACT,MAAOD,EACP,OAAQG,EACR,SAAU,QAAQD,GAAA,KAAA,OAAAA,EAAY,QAAQ,CAAA,EAEtCS,EAAA,cAACE,EAAA,CACC,GAAIZ,EACJ,KAAMA,EACN,IAAKS,EACJ,GAAIF,GAAS,CAAE,MAAO,OAAQ,EAC9B,GAAGH,EACN,CACF,CAEJ,EAEAP,EAAc,YAAc"}

package/dist/components/toast/Toast.d.ts

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

package/dist/components/toast/Toast.js

@@ -1 +1,2 @@
 import{Error as g,Close as h}from"@atom-learning/icons";import*as t from"react";import{toast as v}from"react-hot-toast";import{keyframes as a,styled as i}from"../../stitches.js";import{ActionIcon as y}from"../action-icon/ActionIcon.js";import{Icon as s}from"../icon/Icon.js";import{Loader as $}from"../loader/Loader.js";import{Text as w}from"../text/Text.js";const n=400,x=a({"0%":{transform:"translate3d(0,-100%,0)",opacity:0},"100%":{transform:"translate3d(0,0,0)",opacity:1}}),E=a({"0%":{transform:"translate3d(0,0,0)",opacity:1},"100%":{transform:"translate3d(0,-100%,0)",opacity:0}}),k=i("div",{position:"absolute",width:"100%",variants:{visible:{true:{"@allowMotion":{animation:`${x} 250ms cubic-bezier(0.22, 1, 0.36, 1)`}},false:{opacity:0,"@allowMotion":{animation:`${E} 250ms cubic-bezier(0.22, 1, 0.36, 1)`}}}}}),I=i("div",{pointerEvents:"auto",alignItems:"center",borderRadius:"$0",boxShadow:"$1",boxSizing:"border-box",color:"white",display:"flex",minHeight:"$5",pl:"$4",position:"relative",pr:"$6",py:"$4",transition:"background-color 50ms ease-out",width:"100%","@sm":{width:n},"@allowMotion":{transition:"background-color 50ms ease-out, transform 150ms ease-out"},variants:{status:{blank:{bg:"$primary"},error:{bg:"$danger"},loading:{bg:"$primary"},success:{bg:"$success"}}}}),T=t.memo(({ariaLive:l,height:m,id:e,message:c,role:p,type:o="blank",visible:d,calculateOffset:u,updateHeight:b})=>{const f=u(e,{reverseOrder:!0,margin:8});return t.createElement(k,{visible:d},t.createElement(I,{ref:r=>{r&&m===void 0&&b(e,r.getBoundingClientRect().height)},status:o,role:p,"aria-live":l,style:{transform:`translateY(${f}px)`}},o==="error"&&t.createElement(s,{size:"sm",css:{mr:"$3",flex:"0 0 auto"},is:g}),t.createElement(w,null,c),o==="loading"?t.createElement($,{css:{flex:"0 0 auto",ml:"auto"}}):t.createElement(y,{css:{position:"absolute",top:"$2",right:"$2",color:"white","&:hover,&:focus":{color:"white",opacity:.5}},label:"Close alert",onClick:()=>v.dismiss(e)},t.createElement(s,{is:h}))))});export{n as TOAST_WIDTH,T as Toast};
+//# sourceMappingURL=Toast.js.map

package/dist/components/toast/Toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.js","sources":["../../../src/components/toast/Toast.tsx"],"sourcesContent":["import { Close, Error } from '@atom-learning/icons'\nimport * as React from 'react'\nimport { toast } from 'react-hot-toast'\nimport type { Toast as ToastInterface } from 'react-hot-toast/dist/core/types'\n\nimport { keyframes, styled } from '~/stitches'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { Loader } from '../loader/Loader'\nimport { Text } from '../text/Text'\n\nexport const TOAST_WIDTH = 400\n\nconst slideIn = keyframes({\n  '0%': { transform: `translate3d(0,-100%,0)`, opacity: 0 },\n  '100%': { transform: `translate3d(0,0,0)`, opacity: 1 }\n})\nconst slideOut = keyframes({\n  '0%': { transform: `translate3d(0,0,0)`, opacity: 1 },\n  '100%': { transform: `translate3d(0,-100%,0)`, opacity: 0 }\n})\n\nconst ToastContainer = styled('div', {\n  position: 'absolute',\n  width: '100%',\n  variants: {\n    visible: {\n      true: {\n        '@allowMotion': {\n          animation: `${slideIn} 250ms cubic-bezier(0.22, 1, 0.36, 1)`\n        }\n      },\n      false: {\n        opacity: 0,\n        '@allowMotion': {\n          animation: `${slideOut} 250ms cubic-bezier(0.22, 1, 0.36, 1)`\n        }\n      }\n    }\n  }\n})\n\nconst StyledToast = styled('div', {\n  pointerEvents: 'auto',\n  alignItems: 'center',\n  borderRadius: '$0',\n  boxShadow: '$1',\n  boxSizing: 'border-box',\n  color: 'white',\n  display: 'flex',\n  minHeight: '$5',\n  pl: '$4',\n  position: 'relative',\n  pr: '$6',\n  py: '$4',\n  transition: 'background-color 50ms ease-out',\n  width: '100%',\n  '@sm': {\n    width: TOAST_WIDTH\n  },\n  '@allowMotion': {\n    transition: 'background-color 50ms ease-out, transform 150ms ease-out'\n  },\n  variants: {\n    status: {\n      blank: { bg: '$primary' },\n      error: { bg: '$danger' },\n      loading: { bg: '$primary' },\n      success: { bg: '$success' }\n    }\n  }\n})\n\ntype ToastProps = React.ComponentProps<typeof StyledToast> &\n  ToastInterface & {\n    calculateOffset: (\n      id: string,\n      options?: {\n        reverseOrder?: boolean\n        margin?: number\n      }\n    ) => number\n    updateHeight: (toastId: string, height: number) => void\n  }\n\nexport const Toast: React.FC<ToastProps> = React.memo(\n  ({\n    ariaLive,\n    height,\n    id,\n    message,\n    role,\n    type = 'blank',\n    visible,\n    calculateOffset,\n    updateHeight\n  }) => {\n    const offset = calculateOffset(id, {\n      reverseOrder: true,\n      margin: 8\n    })\n\n    const ref = (el) => {\n      if (el && height === undefined) {\n        updateHeight(id, el.getBoundingClientRect().height)\n      }\n    }\n\n    return (\n      <ToastContainer visible={visible}>\n        <StyledToast\n          ref={ref}\n          status={type}\n          role={role}\n          aria-live={ariaLive}\n          style={{ transform: `translateY(${offset}px)` }}\n        >\n          {type === 'error' && (\n            <Icon size=\"sm\" css={{ mr: '$3', flex: '0 0 auto' }} is={Error} />\n          )}\n          <Text>{message}</Text>\n          {type === 'loading' ? (\n            <Loader css={{ flex: '0 0 auto', ml: 'auto' }} />\n          ) : (\n            <ActionIcon\n              css={{\n                position: 'absolute',\n                top: '$2',\n                right: '$2',\n                color: 'white',\n                '&:hover,&:focus': { color: 'white', opacity: 0.5 }\n              }}\n              label=\"Close alert\"\n              onClick={() => toast.dismiss(id)}\n            >\n              <Icon is={Close} />\n            </ActionIcon>\n          )}\n        </StyledToast>\n      </ToastContainer>\n    )\n  }\n)\n"],"names":["TOAST_WIDTH","slideIn","keyframes","slideOut","ToastContainer","styled","StyledToast","Toast","React","ariaLive","height","id","message","role","type","visible","calculateOffset","updateHeight","offset","el","Icon","Error","Text","Loader","ActionIcon","toast","Close"],"mappings":"6WAYaA,EAAc,IAErBC,EAAUC,EAAU,CACxB,KAAM,CAAE,UAAW,yBAA0B,QAAS,CAAE,EACxD,OAAQ,CAAE,UAAW,qBAAsB,QAAS,CAAE,CACxD,CAAC,EACKC,EAAWD,EAAU,CACzB,KAAM,CAAE,UAAW,qBAAsB,QAAS,CAAE,EACpD,OAAQ,CAAE,UAAW,yBAA0B,QAAS,CAAE,CAC5D,CAAC,EAEKE,EAAiBC,EAAO,MAAO,CACnC,SAAU,WACV,MAAO,OACP,SAAU,CACR,QAAS,CACP,KAAM,CACJ,eAAgB,CACd,UAAW,GAAGJ,wCAChB,CACF,EACA,MAAO,CACL,QAAS,EACT,eAAgB,CACd,UAAW,GAAGE,wCAChB,CACF,CACF,CACF,CACF,CAAC,EAEKG,EAAcD,EAAO,MAAO,CAChC,cAAe,OACf,WAAY,SACZ,aAAc,KACd,UAAW,KACX,UAAW,aACX,MAAO,QACP,QAAS,OACT,UAAW,KACX,GAAI,KACJ,SAAU,WACV,GAAI,KACJ,GAAI,KACJ,WAAY,iCACZ,MAAO,OACP,MAAO,CACL,MAAOL,CACT,EACA,eAAgB,CACd,WAAY,0DACd,EACA,SAAU,CACR,OAAQ,CACN,MAAO,CAAE,GAAI,UAAW,EACxB,MAAO,CAAE,GAAI,SAAU,EACvB,QAAS,CAAE,GAAI,UAAW,EAC1B,QAAS,CAAE,GAAI,UAAW,CAC5B,CACF,CACF,CAAC,EAcYO,EAA8BC,EAAM,KAC/C,CAAC,CACC,SAAAC,EACA,OAAAC,EACA,GAAAC,EACA,QAAAC,EACA,KAAAC,EACA,KAAAC,EAAO,QACP,QAAAC,EACA,gBAAAC,EACA,aAAAC,CACF,IAAM,CACJ,MAAMC,EAASF,EAAgBL,EAAI,CACjC,aAAc,GACd,OAAQ,CACV,CAAC,EAQD,OACEH,EAAA,cAACJ,EAAA,CAAe,QAASW,CAAAA,EACvBP,EAAA,cAACF,EAAA,CACC,IATOa,GAAO,CACdA,GAAMT,IAAW,QACnBO,EAAaN,EAAIQ,EAAG,sBAAA,EAAwB,MAAM,CAEtD,EAMM,OAAQL,EACR,KAAMD,EACN,YAAWJ,EACX,MAAO,CAAE,UAAW,cAAcS,MAAY,CAAA,EAE7CJ,IAAS,SACRN,EAAA,cAACY,EAAA,CAAK,KAAK,KAAK,IAAK,CAAE,GAAI,KAAM,KAAM,UAAW,EAAG,GAAIC,CAAO,CAAA,EAElEb,EAAA,cAACc,EAAA,KAAMV,CAAQ,EACdE,IAAS,UACRN,EAAA,cAACe,EAAA,CAAO,IAAK,CAAE,KAAM,WAAY,GAAI,MAAO,CAAA,CAAG,EAE/Cf,EAAA,cAACgB,EAAA,CACC,IAAK,CACH,SAAU,WACV,IAAK,KACL,MAAO,KACP,MAAO,QACP,kBAAmB,CAAE,MAAO,QAAS,QAAS,EAAI,CACpD,EACA,MAAM,cACN,QAAS,IAAMC,EAAM,QAAQd,CAAE,CAE/BH,EAAAA,EAAA,cAACY,EAAA,CAAK,GAAIM,CAAAA,CAAO,CACnB,CAEJ,CACF,CAEJ,CACF"}

package/dist/components/toast/ToastProvider.js

@@ -1 +1,2 @@
 import*as t from"react";import{useToaster as p}from"react-hot-toast";import{default as P}from"react-hot-toast";import{styled as c}from"../../stitches.js";import{TOAST_WIDTH as d,Toast as f}from"./Toast.js";import{MAX_Z_INDEX as u}from"../../constants/zIndices.js";const T=c("div",{left:"$2",position:"fixed",top:"$2",right:"$2",zIndex:u,"@sm":{top:"$3",right:"auto",left:`calc(50% - ${d/2}px)`}}),o=({children:a})=>{const{toasts:r,handlers:s}=p(),{startPause:i,endPause:m,calculateOffset:n,updateHeight:l}=s;return t.createElement(t.Fragment,null,t.createElement(T,{onMouseEnter:i,onMouseLeave:m},r.map(e=>t.createElement(f,{key:e.id,calculateOffset:n,updateHeight:l,...e}))),a)};o.displayName="ToastProvider";export{o as ToastProvider,P as toast};
+//# sourceMappingURL=ToastProvider.js.map

package/dist/components/toast/ToastProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastProvider.js","sources":["../../../src/components/toast/ToastProvider.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useToaster } from 'react-hot-toast'\n\nimport { styled } from '~/stitches'\n\nimport { Toast, TOAST_WIDTH } from './Toast'\n\nexport { default as toast } from 'react-hot-toast'\nimport { MAX_Z_INDEX } from '~/constants/zIndices'\n\nconst Container = styled('div', {\n  left: '$2',\n  position: 'fixed',\n  top: '$2',\n  right: '$2',\n  zIndex: MAX_Z_INDEX,\n  '@sm': {\n    top: '$3',\n    right: 'auto',\n    left: `calc(50% - ${TOAST_WIDTH / 2}px)`\n  }\n})\n\nexport const ToastProvider: React.FC = ({ children }) => {\n  const { toasts, handlers } = useToaster()\n  const { startPause, endPause, calculateOffset, updateHeight } = handlers\n\n  return (\n    <>\n      <Container onMouseEnter={startPause} onMouseLeave={endPause}>\n        {toasts.map((toast) => (\n          <Toast\n            key={toast.id}\n            calculateOffset={calculateOffset}\n            updateHeight={updateHeight}\n            {...toast}\n          />\n        ))}\n      </Container>\n      {children}\n    </>\n  )\n}\n\nToastProvider.displayName = 'ToastProvider'\n"],"names":["Container","styled","MAX_Z_INDEX","TOAST_WIDTH","ToastProvider","children","toasts","handlers","useToaster","startPause","endPause","calculateOffset","updateHeight","React","toast","Toast"],"mappings":"wQAUA,MAAMA,EAAYC,EAAO,MAAO,CAC9B,KAAM,KACN,SAAU,QACV,IAAK,KACL,MAAO,KACP,OAAQC,EACR,MAAO,CACL,IAAK,KACL,MAAO,OACP,KAAM,cAAcC,EAAc,MACpC,CACF,CAAC,EAEYC,EAA0B,CAAC,CAAE,SAAAC,CAAS,IAAM,CACvD,KAAM,CAAE,OAAAC,EAAQ,SAAAC,CAAS,EAAIC,EAAW,EAClC,CAAE,WAAAC,EAAY,SAAAC,EAAU,gBAAAC,EAAiB,aAAAC,CAAa,EAAIL,EAEhE,OACEM,EAAA,cAAAA,EAAA,SACEA,KAAAA,EAAA,cAACb,EAAA,CAAU,aAAcS,EAAY,aAAcC,CAAAA,EAChDJ,EAAO,IAAKQ,GACXD,EAAA,cAACE,EAAA,CACC,IAAKD,EAAM,GACX,gBAAiBH,EACjB,aAAcC,EACb,GAAGE,CACN,CAAA,CACD,CACH,EACCT,CACH,CAEJ,EAEAD,EAAc,YAAc"}

package/dist/components/toggle-group/ToggleGroupButton.d.ts

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

package/dist/components/toggle-group/ToggleGroupButton.js

@@ -1 +1,2 @@
 import*as n from"react";import{styled as f}from"../../stitches.js";import{StyledIcon as g,Icon as r}from"../icon/Icon.js";import{StyledItem as h}from"./ToggleGroupItem.js";const s={sm:"32px",md:"40px",lg:"48px"},u={sm:"$4",md:"$5",lg:"$5"},x={sm:"$2",md:"$3",lg:"$3"},l=i=>({fontSize:`$${i}`,px:u[i],minHeight:s[i],"& > *:not(:last-child)":{mr:x[i]}}),d=f(h,{flexGrow:1,display:"flex",alignItems:"center",justifyContent:"center",fontWeight:600,lineHeight:1,py:"$1",[`& ${g}`]:{flexShrink:0},variants:{size:{sm:l("sm"),md:l("md"),lg:l("lg")},isIconOnly:{true:{}}},compoundVariants:[{isIconOnly:!0,size:"sm",css:{minWidth:s.sm,p:0}},{isIconOnly:!0,size:"md",css:{minWidth:s.md,p:0}},{isIconOnly:!0,size:"lg",css:{minWidth:s.lg,p:0}}]}),I=n.forwardRef(({size:i="md",children:p,...c},y)=>{var m;const t=n.Children.toArray(p),o=t.length<=1,a=o&&n.isValidElement(t[0])&&((m=t[0])==null?void 0:m.type)===r;return n.createElement(d,{ref:y,size:i,isIconOnly:a,...c},t.map(e=>!o&&(typeof e=="string"||typeof e=="number")?n.createElement("span",{key:e},e):n.isValidElement(e)&&(e==null?void 0:e.type)===r?n.cloneElement(e,{...e.props,size:i}):e))});export{d as StyledButton,I as ToggleGroupButton};
+//# sourceMappingURL=ToggleGroupButton.js.map

package/dist/components/toggle-group/ToggleGroupButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroupButton.js","sources":["../../../src/components/toggle-group/ToggleGroupButton.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { Icon, StyledIcon } from '../icon'\nimport { StyledItem } from './ToggleGroupItem'\n\nconst minHeight = {\n  sm: '32px',\n  md: '40px',\n  lg: '48px'\n}\n\nconst px = {\n  sm: '$4',\n  md: '$5',\n  lg: '$5'\n}\n\nconst spacingBetweenElements = {\n  sm: '$2',\n  md: '$3',\n  lg: '$3'\n}\n\nconst getSizeVariant = (size) => ({\n  fontSize: `$${size}`,\n  px: px[size],\n  minHeight: minHeight[size],\n  '& > *:not(:last-child)': {\n    mr: spacingBetweenElements[size]\n  }\n})\n\nexport const StyledButton = styled(StyledItem, {\n  flexGrow: 1,\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  fontWeight: 600,\n  lineHeight: 1,\n  py: '$1',\n  [`& ${StyledIcon}`]: {\n    flexShrink: 0\n  },\n  variants: {\n    size: {\n      sm: getSizeVariant('sm'),\n      md: getSizeVariant('md'),\n      lg: getSizeVariant('lg')\n    },\n    isIconOnly: {\n      true: {}\n    }\n  },\n  compoundVariants: [\n    {\n      isIconOnly: true,\n      size: 'sm',\n      css: {\n        minWidth: minHeight.sm,\n        p: 0\n      }\n    },\n    {\n      isIconOnly: true,\n      size: 'md',\n      css: {\n        minWidth: minHeight.md,\n        p: 0\n      }\n    },\n    {\n      isIconOnly: true,\n      size: 'lg',\n      css: {\n        minWidth: minHeight.lg,\n        p: 0\n      }\n    }\n  ]\n})\n\nexport const ToggleGroupButton: React.ForwardRefExoticComponent<\n  React.ComponentProps<typeof StyledButton>\n> = React.forwardRef(({ size = 'md', children, ...rest }, ref) => {\n  const childrenArray = React.Children.toArray(children)\n  const isSingleChild = childrenArray.length <= 1\n  const isIconOnly =\n    isSingleChild &&\n    React.isValidElement(childrenArray[0]) &&\n    childrenArray[0]?.type === Icon\n\n  return (\n    <StyledButton ref={ref} size={size} isIconOnly={isIconOnly} {...rest}>\n      {\n        childrenArray.map((child) => {\n          if (\n            !isSingleChild &&\n            (typeof child === 'string' || typeof child === 'number')\n          )\n            return <span key={child}>{child}</span>\n          if (React.isValidElement(child)) {\n            if (child?.type === Icon)\n              return React.cloneElement(child, { ...child.props, size })\n          }\n          return child\n        }) as React.ReactElement[]\n      }\n    </StyledButton>\n  )\n})\n"],"names":["minHeight","px","spacingBetweenElements","getSizeVariant","size","StyledButton","styled","StyledItem","StyledIcon","ToggleGroupButton","React","children","rest","ref","_a","childrenArray","isSingleChild","isIconOnly","Icon","child"],"mappings":"4KAOA,MAAMA,EAAY,CAChB,GAAI,OACJ,GAAI,OACJ,GAAI,MACN,EAEMC,EAAK,CACT,GAAI,KACJ,GAAI,KACJ,GAAI,IACN,EAEMC,EAAyB,CAC7B,GAAI,KACJ,GAAI,KACJ,GAAI,IACN,EAEMC,EAAkBC,IAAU,CAChC,SAAU,IAAIA,IACd,GAAIH,EAAGG,GACP,UAAWJ,EAAUI,GACrB,yBAA0B,CACxB,GAAIF,EAAuBE,EAC7B,CACF,GAEaC,EAAeC,EAAOC,EAAY,CAC7C,SAAU,EACV,QAAS,OACT,WAAY,SACZ,eAAgB,SAChB,WAAY,IACZ,WAAY,EACZ,GAAI,KACJ,CAAC,KAAKC,KAAe,CACnB,WAAY,CACd,EACA,SAAU,CACR,KAAM,CACJ,GAAIL,EAAe,IAAI,EACvB,GAAIA,EAAe,IAAI,EACvB,GAAIA,EAAe,IAAI,CACzB,EACA,WAAY,CACV,KAAM,CACR,CAAA,CACF,EACA,iBAAkB,CAChB,CACE,WAAY,GACZ,KAAM,KACN,IAAK,CACH,SAAUH,EAAU,GACpB,EAAG,CACL,CACF,EACA,CACE,WAAY,GACZ,KAAM,KACN,IAAK,CACH,SAAUA,EAAU,GACpB,EAAG,CACL,CACF,EACA,CACE,WAAY,GACZ,KAAM,KACN,IAAK,CACH,SAAUA,EAAU,GACpB,EAAG,CACL,CACF,CACF,CACF,CAAC,EAEYS,EAETC,EAAM,WAAW,CAAC,CAAE,KAAAN,EAAO,KAAM,SAAAO,KAAaC,CAAK,EAAGC,IAAQ,CArFlE,IAAAC,EAsFE,MAAMC,EAAgBL,EAAM,SAAS,QAAQC,CAAQ,EAC/CK,EAAgBD,EAAc,QAAU,EACxCE,EACJD,GACAN,EAAM,eAAeK,EAAc,EAAE,KACrCD,EAAAC,EAAc,KAAd,KAAAD,OAAAA,EAAkB,QAASI,EAE7B,OACER,EAAA,cAACL,EAAA,CAAa,IAAKQ,EAAK,KAAMT,EAAM,WAAYa,EAAa,GAAGL,CAAAA,EAE5DG,EAAc,IAAKI,GAEf,CAACH,IACA,OAAOG,GAAU,UAAY,OAAOA,GAAU,UAExCT,EAAA,cAAC,OAAA,CAAK,IAAKS,CAAAA,EAAQA,CAAM,EAC9BT,EAAM,eAAeS,CAAK,IACxBA,GAAA,KAAA,OAAAA,EAAO,QAASD,EACXR,EAAM,aAAaS,EAAO,CAAE,GAAGA,EAAM,MAAO,KAAAf,CAAK,CAAC,EAEtDe,CACR,CAEL,CAEJ,CAAC"}

package/dist/components/toggle-group/ToggleGroupItem.d.ts

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

package/dist/components/toggle-group/ToggleGroupItem.js

@@ -1 +1,2 @@
 import*as t from"@radix-ui/react-toggle-group";import{styled as e}from"../../stitches.js";import{focusVisibleStyleBlock as o}from"../../utilities/style/focus-visible-style-block.js";const r=e(t.Item,{bg:"white",color:"$tonal400",border:"1px solid $tonal200",cursor:"pointer","&::before":{background:"$tonal200"},"&:not([disabled])":{'&:hover, &:focus-visible, &[data-state="on"]':{"&::before":{background:"none"}},"&:hover":{borderColor:"currentColor !important",color:"$primaryMid"},"&:focus-visible":{...o(),'&[data-state="off"]':{borderColor:"$tonal200 !important"},'&[data-state="on"]':{boxShadow:`inset currentColor 0px 0px 0px 1px, ${o().boxShadow}`}}},"&[disabled]":{opacity:.3,cursor:"not-allowed"},'&[data-state="on"]':{color:"$primary",borderColor:"currentColor !important",boxShadow:"inset currentColor 0px 0px 0px 1px"}}),a=r;export{r as StyledItem,a as ToggleGroupItem};
+//# sourceMappingURL=ToggleGroupItem.js.map

package/dist/components/toggle-group/ToggleGroupItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroupItem.js","sources":["../../../src/components/toggle-group/ToggleGroupItem.tsx"],"sourcesContent":["import * as ToggleGroup from '@radix-ui/react-toggle-group'\n\nimport { styled } from '~/stitches'\nimport { focusVisibleStyleBlock } from '~/utilities'\n\nexport const StyledItem = styled(ToggleGroup.Item, {\n  bg: 'white',\n  color: '$tonal400',\n  border: '1px solid $tonal200',\n  cursor: 'pointer',\n  '&::before': {\n    background: '$tonal200'\n  },\n  '&:not([disabled])': {\n    '&:hover, &:focus-visible, &[data-state=\"on\"]': {\n      '&::before': {\n        background: 'none'\n      }\n    },\n    '&:hover': {\n      borderColor: 'currentColor !important',\n      color: '$primaryMid'\n    },\n    '&:focus-visible': {\n      ...focusVisibleStyleBlock(),\n      '&[data-state=\"off\"]': {\n        borderColor: '$tonal200 !important'\n      },\n      '&[data-state=\"on\"]': {\n        boxShadow: `inset currentColor 0px 0px 0px 1px, ${\n          focusVisibleStyleBlock().boxShadow\n        }`\n      }\n    }\n  },\n  '&[disabled]': {\n    opacity: 0.3,\n    cursor: 'not-allowed'\n  },\n  '&[data-state=\"on\"]': {\n    color: '$primary',\n    borderColor: 'currentColor !important',\n    boxShadow: 'inset currentColor 0px 0px 0px 1px'\n  }\n})\n\nexport const ToggleGroupItem = StyledItem\n"],"names":["StyledItem","styled","ToggleGroup","focusVisibleStyleBlock","ToggleGroupItem"],"mappings":"sLAKO,MAAMA,EAAaC,EAAOC,EAAY,KAAM,CACjD,GAAI,QACJ,MAAO,YACP,OAAQ,sBACR,OAAQ,UACR,YAAa,CACX,WAAY,WACd,EACA,oBAAqB,CACnB,+CAAgD,CAC9C,YAAa,CACX,WAAY,MACd,CACF,EACA,UAAW,CACT,YAAa,0BACb,MAAO,aACT,EACA,kBAAmB,CACjB,GAAGC,EAAAA,EACH,sBAAuB,CACrB,YAAa,sBACf,EACA,qBAAsB,CACpB,UAAW,uCACTA,IAAyB,WAE7B,CACF,CACF,EACA,cAAe,CACb,QAAS,GACT,OAAQ,aACV,EACA,qBAAsB,CACpB,MAAO,WACP,YAAa,0BACb,UAAW,oCACb,CACF,CAAC,EAEYC,EAAkBJ"}

package/dist/components/toggle-group/ToggleGroupRoot.d.ts

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

package/dist/components/toggle-group/ToggleGroupRoot.js

@@ -1 +1,2 @@
 import*as h from"@radix-ui/react-toggle-group";import*as r from"react";import{Stack as f}from"../stack/Stack.js";import{styled as m}from"../../stitches.js";import{StyledItem as t}from"./ToggleGroupItem.js";const s=m(h.Root,{width:"fit-content",variants:{isFullWidth:{true:{width:"100%",[`& ${t}`]:{flexBasis:0,flexGrow:1}}},hasGap:{true:{[`& ${t}`]:{borderRadius:"$0"}},false:{borderRadius:"$0",bg:"white",[`& ${t}`]:{bg:"transparent",borderRadius:0,position:"relative","&:not(:last-child)::before":{content:"",position:"absolute"}}}},direction:{column:{},row:{}}},compoundVariants:[{hasGap:!1,direction:"row",css:{[`& ${t}`]:{"&:not(:last-child)::before":{top:"-1px",height:"calc(100% + 2px)",width:"1px",right:"0",transform:"translateX(150%)"},"&:not(:first-child)":{borderLeftColor:"transparent"},"&:not(:last-child)":{borderRightColor:"transparent"},"&:first-child":{borderTopLeftRadius:"$0",borderBottomLeftRadius:"$0"},"&:last-child":{borderTopRightRadius:"$0",borderBottomRightRadius:"$0"}}}},{hasGap:!1,direction:"column",css:{[`& ${t}`]:{"&:not(:last-child)::before":{bottom:0,left:"-1px",height:"1px",width:"calc(100% + 2px)",transform:"translateY(150%)"},"&:first-child":{borderTopLeftRadius:"$0",borderTopRightRadius:"$0"},"&:last-child":{borderBottomLeftRadius:"$0",borderBottomRightRadius:"$0"},"&:not(:first-child)":{borderTopColor:"transparent"},"&:not(:last-child)":{borderBottomColor:"transparent"}}}}]}),u=o=>o==="horizontal"?"row":"column",b=r.forwardRef(({orientation:o="horizontal",gap:i=!1,isFullWidth:n,children:d,wrap:l="no-wrap",...p},c)=>{const e=typeof i=="number",a=u(o);return r.createElement(s,{ref:c,direction:a,hasGap:e,isFullWidth:n,orientation:o,...p},r.createElement(f,{direction:a,gap:e&&i,align:!1,wrap:l},d))});export{s as StyledRoot,b as ToggleGroupRoot};
+//# sourceMappingURL=ToggleGroupRoot.js.map

package/dist/components/toggle-group/ToggleGroupRoot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroupRoot.js","sources":["../../../src/components/toggle-group/ToggleGroupRoot.tsx"],"sourcesContent":["import * as ToggleGroup from '@radix-ui/react-toggle-group'\nimport * as React from 'react'\n\nimport { Stack } from '~/components/stack'\nimport { styled } from '~/stitches'\n\nimport { StyledItem } from './ToggleGroupItem'\n\ntype RootType = {\n  orientation?: 'horizontal' | 'vertical'\n  gap?: number\n  isFullWidth?: boolean\n  wrap?: 'wrap' | 'no-wrap' | 'wrap-reverse'\n}\n\nexport const StyledRoot = styled(ToggleGroup.Root, {\n  width: 'fit-content',\n  variants: {\n    isFullWidth: {\n      true: {\n        width: '100%',\n        [`& ${StyledItem}`]: {\n          flexBasis: 0,\n          flexGrow: 1\n        }\n      }\n    },\n    hasGap: {\n      true: {\n        [`& ${StyledItem}`]: { borderRadius: '$0' }\n      },\n      false: {\n        borderRadius: '$0',\n        bg: 'white',\n        [`& ${StyledItem}`]: {\n          bg: 'transparent',\n          borderRadius: 0,\n          position: 'relative',\n          '&:not(:last-child)::before': {\n            content: '',\n            position: 'absolute'\n          }\n        }\n      }\n    },\n    direction: {\n      column: {},\n      row: {}\n    }\n  },\n  compoundVariants: [\n    {\n      hasGap: false,\n      direction: 'row',\n      css: {\n        [`& ${StyledItem}`]: {\n          '&:not(:last-child)::before': {\n            top: '-1px',\n            height: 'calc(100% + 2px)',\n            width: '1px',\n            right: '0',\n            transform: 'translateX(150%)'\n          },\n          '&:not(:first-child)': {\n            borderLeftColor: 'transparent'\n          },\n          '&:not(:last-child)': {\n            borderRightColor: 'transparent'\n          },\n          '&:first-child': {\n            borderTopLeftRadius: '$0',\n            borderBottomLeftRadius: '$0'\n          },\n          '&:last-child': {\n            borderTopRightRadius: '$0',\n            borderBottomRightRadius: '$0'\n          }\n        }\n      }\n    },\n    {\n      hasGap: false,\n      direction: 'column',\n      css: {\n        [`& ${StyledItem}`]: {\n          '&:not(:last-child)::before': {\n            bottom: 0,\n            left: '-1px',\n            height: '1px',\n            width: 'calc(100% + 2px)',\n            transform: 'translateY(150%)'\n          },\n          '&:first-child': {\n            borderTopLeftRadius: '$0',\n            borderTopRightRadius: '$0'\n          },\n          '&:last-child': {\n            borderBottomLeftRadius: '$0',\n            borderBottomRightRadius: '$0'\n          },\n          '&:not(:first-child)': {\n            borderTopColor: 'transparent'\n          },\n          '&:not(:last-child)': {\n            borderBottomColor: 'transparent'\n          }\n        }\n      }\n    }\n  ]\n})\n\nconst orientationToDirection = (orientation) =>\n  orientation === 'horizontal' ? 'row' : 'column'\n\nexport const ToggleGroupRoot: React.ForwardRefExoticComponent<\n  React.ComponentProps<typeof StyledRoot> & RootType\n> = React.forwardRef(\n  (\n    {\n      orientation = 'horizontal',\n      gap = false,\n      isFullWidth,\n      children,\n      wrap = 'no-wrap',\n      ...rest\n    },\n    ref\n  ) => {\n    const hasGap = typeof gap === 'number'\n    const direction = orientationToDirection(orientation)\n    return (\n      <StyledRoot\n        ref={ref}\n        direction={direction}\n        hasGap={hasGap}\n        isFullWidth={isFullWidth}\n        orientation={orientation}\n        {...rest}\n      >\n        <Stack\n          direction={direction}\n          gap={hasGap && gap}\n          align={false}\n          wrap={wrap}\n        >\n          {children}\n        </Stack>\n      </StyledRoot>\n    )\n  }\n)\n"],"names":["StyledRoot","styled","ToggleGroup","StyledItem","orientationToDirection","orientation","ToggleGroupRoot","React","gap","isFullWidth","children","wrap","rest","ref","hasGap","direction","Stack"],"mappings":"8MAea,MAAAA,EAAaC,EAAOC,EAAY,KAAM,CACjD,MAAO,cACP,SAAU,CACR,YAAa,CACX,KAAM,CACJ,MAAO,OACP,CAAC,KAAKC,KAAe,CACnB,UAAW,EACX,SAAU,CACZ,CACF,CACF,EACA,OAAQ,CACN,KAAM,CACJ,CAAC,KAAKA,KAAe,CAAE,aAAc,IAAK,CAC5C,EACA,MAAO,CACL,aAAc,KACd,GAAI,QACJ,CAAC,KAAKA,KAAe,CACnB,GAAI,cACJ,aAAc,EACd,SAAU,WACV,6BAA8B,CAC5B,QAAS,GACT,SAAU,UACZ,CACF,CACF,CACF,EACA,UAAW,CACT,OAAQ,CAAC,EACT,IAAK,EACP,CACF,EACA,iBAAkB,CAChB,CACE,OAAQ,GACR,UAAW,MACX,IAAK,CACH,CAAC,KAAKA,KAAe,CACnB,6BAA8B,CAC5B,IAAK,OACL,OAAQ,mBACR,MAAO,MACP,MAAO,IACP,UAAW,kBACb,EACA,sBAAuB,CACrB,gBAAiB,aACnB,EACA,qBAAsB,CACpB,iBAAkB,aACpB,EACA,gBAAiB,CACf,oBAAqB,KACrB,uBAAwB,IAC1B,EACA,eAAgB,CACd,qBAAsB,KACtB,wBAAyB,IAC3B,CACF,CACF,CACF,EACA,CACE,OAAQ,GACR,UAAW,SACX,IAAK,CACH,CAAC,KAAKA,KAAe,CACnB,6BAA8B,CAC5B,OAAQ,EACR,KAAM,OACN,OAAQ,MACR,MAAO,mBACP,UAAW,kBACb,EACA,gBAAiB,CACf,oBAAqB,KACrB,qBAAsB,IACxB,EACA,eAAgB,CACd,uBAAwB,KACxB,wBAAyB,IAC3B,EACA,sBAAuB,CACrB,eAAgB,aAClB,EACA,qBAAsB,CACpB,kBAAmB,aACrB,CACF,CACF,CACF,CACF,CACF,CAAC,EAEKC,EAA0BC,GAC9BA,IAAgB,aAAe,MAAQ,SAE5BC,EAETC,EAAM,WACR,CACE,CACE,YAAAF,EAAc,aACd,IAAAG,EAAM,GACN,YAAAC,EACA,SAAAC,EACA,KAAAC,EAAO,aACJC,CACL,EACAC,IACG,CACH,MAAMC,EAAS,OAAON,GAAQ,SACxBO,EAAYX,EAAuBC,CAAW,EACpD,OACEE,EAAA,cAACP,EACC,CAAA,IAAKa,EACL,UAAWE,EACX,OAAQD,EACR,YAAaL,EACb,YAAaJ,EACZ,GAAGO,CAAAA,EAEJL,EAAA,cAACS,EAAA,CACC,UAAWD,EACX,IAAKD,GAAUN,EACf,MAAO,GACP,KAAMG,CAAAA,EAELD,CACH,CACF,CAEJ,CACF"}