@atom-learning/components 5.14.0 → 6.0.0-beta.0

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

@@ -1 +1 @@
-{"version":3,"file":"TabsTriggerList.js","sources":["../../../src/components/tabs/TabsTriggerList.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@atom-learning/icons'\nimport { List } from '@radix-ui/react-tabs'\nimport React from 'react'\n\nimport { ColorScheme, TcolorScheme } from '~/experiments/color-scheme'\nimport { styled } from '~/stitches'\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\nimport { useScrollPosition } from '~/utilities/hooks/useScrollPosition'\nimport { useSize } from '~/utilities/hooks/useSize'\n\nimport { ActionIcon } from '../action-icon'\nimport { Icon } from '../icon'\n\nconst StyledContainer = styled(ColorScheme, {\n  position: 'relative',\n  borderBottom: '1px solid $base4',\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: '$base1 !important',\n  color: '$interactive1 !important',\n  borderRadius: 0,\n  opacity: 0.9\n})\n\nconst SCROLL_STEP = 0.8 // Used to scroll 80% of clientWidth\n\nexport const TabsTriggerList = ({\n  children,\n  colorScheme = {},\n  ...rest\n}: React.ComponentProps<typeof StyledTriggerList> & {\n  colorScheme?: TcolorScheme\n}) => {\n  const [listRef, setListRefCallback] = useCallbackRefState()\n\n  const { width } = useSize({ element: listRef, delay: 500 })\n  const { left } = useScrollPosition({\n    element: listRef,\n    delay: 100,\n    delayMethod: 'debounce'\n  })\n\n  const canScrollXAxis = React.useMemo(() => {\n    if (!listRef) return false\n    return listRef.scrollWidth > listRef.clientWidth\n  }, [width, listRef])\n\n  const canScrollLeft = React.useMemo(() => {\n    if (!canScrollXAxis) return false\n    return left > 0\n  }, [left, canScrollXAxis])\n\n  const canScrollRight = React.useMemo(() => {\n    if (!listRef || !canScrollXAxis) return false\n    return listRef.scrollWidth - left - listRef.clientWidth > 1 // 1 rather than 0 to account for sub-pixel widths and calculations\n  }, [listRef, left, canScrollXAxis])\n\n  const scrollList = React.useCallback(\n    (stepModifier) => {\n      if (!listRef) return\n      listRef.scroll({\n        left: listRef.scrollLeft + listRef.clientWidth * stepModifier,\n        behavior: 'smooth'\n      })\n    },\n    [listRef]\n  )\n\n  return (\n    <StyledContainer\n      base=\"grey1\"\n      accent=\"primary1\"\n      interactive=\"hiContrast\"\n      {...colorScheme}\n      {...rest}\n    >\n      <StyledTriggerList ref={setListRefCallback}>{children}</StyledTriggerList>\n\n      {canScrollLeft && (\n        <StyledChevronActionIcon\n          label=\"scroll left\"\n          size=\"md\"\n          css={{\n            left: 0\n          }}\n          onClick={() => scrollList(-SCROLL_STEP)}\n          tabIndex={-1}\n        >\n          <Icon is={ChevronLeft} />\n        </StyledChevronActionIcon>\n      )}\n\n      {canScrollRight && (\n        <StyledChevronActionIcon\n          label=\"scroll right\"\n          size=\"md\"\n          css={{\n            right: 0\n          }}\n          onClick={() => scrollList(SCROLL_STEP)}\n          tabIndex={-1}\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_STEP","TabsTriggerList","children","colorScheme","rest","listRef","setListRefCallback","useCallbackRefState","width","useSize","left","useScrollPosition","canScrollXAxis","React","canScrollLeft","canScrollRight","scrollList","stepModifier","Icon","ChevronLeft","ChevronRight"],"mappings":"sjBAaA,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,oBACZ,MAAO,2BACP,aAAc,EACd,QAAS,EACX,CAAC,EAEKC,EAAc,GAEPC,EAAkB,CAAC,CAC9B,SAAAC,EACA,YAAAC,EAAc,CAAA,KACXC,CACL,IAEM,CACJ,KAAM,CAACC,EAASC,CAAkB,EAAIC,IAEhC,CAAE,MAAAC,CAAM,EAAIC,EAAQ,CAAE,QAASJ,EAAS,MAAO,GAAI,CAAC,EACpD,CAAE,KAAAK,CAAK,EAAIC,EAAkB,CACjC,QAASN,EACT,MAAO,IACP,YAAa,UACf,CAAC,EAEKO,EAAiBC,EAAM,QAAQ,IAC9BR,EACEA,EAAQ,YAAcA,EAAQ,YADhB,GAEpB,CAACG,EAAOH,CAAO,CAAC,EAEbS,EAAgBD,EAAM,QAAQ,IAC7BD,EACEF,EAAO,EADc,GAE3B,CAACA,EAAME,CAAc,CAAC,EAEnBG,EAAiBF,EAAM,QAAQ,IAC/B,CAACR,GAAW,CAACO,EAAuB,GACjCP,EAAQ,YAAcK,EAAOL,EAAQ,YAAc,EACzD,CAACA,EAASK,EAAME,CAAc,CAAC,EAE5BI,EAAaH,EAAM,YACtBI,GAAiB,CACZ,CAACZ,GACLA,EAAQ,OAAO,CACb,KAAMA,EAAQ,WAAaA,EAAQ,YAAcY,EACjD,SAAU,QACZ,CAAC,CACH,EACA,CAACZ,CAAO,CACV,EAEA,OACEQ,EAAA,cAACpB,EAAA,CACC,KAAK,QACL,OAAO,WACP,YAAY,aACX,GAAGU,EACH,GAAGC,CAAAA,EAEJS,EAAA,cAACjB,EAAA,CAAkB,IAAKU,GAAqBJ,CAAS,EAErDY,GACCD,EAAA,cAACf,EAAA,CACC,MAAM,cACN,KAAK,KACL,IAAK,CACH,KAAM,CACR,EACA,QAAS,IAAMkB,EAAW,CAAChB,CAAW,EACtC,SAAU,EAAA,EAEVa,EAAA,cAACK,EAAA,CAAK,GAAIC,CAAa,CAAA,CACzB,EAGDJ,GACCF,EAAA,cAACf,EAAA,CACC,MAAM,eACN,KAAK,KACL,IAAK,CACH,MAAO,CACT,EACA,QAAS,IAAMkB,EAAWhB,CAAW,EACrC,SAAU,EAAA,EAEVa,EAAA,cAACK,EAAA,CAAK,GAAIE,EAAc,CAC1B,CAEJ,CAEJ,EAEAnB,EAAgB,YAAc"}
+{"version":3,"file":"TabsTriggerList.js","sources":["../../../src/components/tabs/TabsTriggerList.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@atom-learning/icons'\nimport { List } from '@radix-ui/react-tabs'\nimport React from 'react'\n\nimport { ColorScheme, TcolorScheme } from '~/experiments/color-scheme'\nimport { styled } from '~/styled'\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\nimport { useScrollPosition } from '~/utilities/hooks/useScrollPosition'\nimport { useSize } from '~/utilities/hooks/useSize'\n\nimport { ActionIcon } from '../action-icon'\nimport { Icon } from '../icon'\n\nconst StyledContainer = styled(ColorScheme, {\n  base: ['relative', 'border-b', 'border-b-(--base-4)', 'w-full']\n})\n\nconst StyledTriggerList = styled(List, {\n  base: [\n    'shrink-0',\n    'flex',\n    'w-full',\n    'overflow-x-auto',\n    '-webkit-scrollbar:hidden',\n    '[scrollbar-width:none]'\n  ]\n})\n\nconst StyledChevronActionIcon = styled(ActionIcon, {\n  base: [\n    'h-full!',\n    'absolute',\n    'top-1/2',\n    '-translate-y-1/2',\n    'cursor-pointer',\n    'bg-(--base-1)!',\n    'text-(--interactive-1)!',\n    'rounded-none',\n    'opacity-90'\n  ]\n})\n\nconst SCROLL_STEP = 0.8 // Used to scroll 80% of clientWidth\n\nexport const TabsTriggerList = ({\n  children,\n  colorScheme = {},\n  ...rest\n}: React.ComponentProps<typeof StyledTriggerList> & {\n  colorScheme?: TcolorScheme\n}) => {\n  const [listRef, setListRefCallback] = useCallbackRefState()\n\n  const { width } = useSize({ element: listRef, delay: 500 })\n  const { left } = useScrollPosition({\n    element: listRef,\n    delay: 100,\n    delayMethod: 'debounce'\n  })\n\n  const canScrollXAxis = React.useMemo(() => {\n    if (!listRef) return false\n    return listRef.scrollWidth > listRef.clientWidth\n  }, [width, listRef])\n\n  const canScrollLeft = React.useMemo(() => {\n    if (!canScrollXAxis) return false\n    return left > 0\n  }, [left, canScrollXAxis])\n\n  const canScrollRight = React.useMemo(() => {\n    if (!listRef || !canScrollXAxis) return false\n    return listRef.scrollWidth - left - listRef.clientWidth > 1 // 1 rather than 0 to account for sub-pixel widths and calculations\n  }, [listRef, left, canScrollXAxis])\n\n  const scrollList = React.useCallback(\n    (stepModifier) => {\n      if (!listRef) return\n      listRef.scroll({\n        left: listRef.scrollLeft + listRef.clientWidth * stepModifier,\n        behavior: 'smooth'\n      })\n    },\n    [listRef]\n  )\n\n  return (\n    <StyledContainer\n      base=\"grey1\"\n      accent=\"primary1\"\n      interactive=\"hiContrast\"\n      {...colorScheme}\n      {...rest}\n    >\n      <StyledTriggerList ref={setListRefCallback}>{children}</StyledTriggerList>\n\n      {canScrollLeft && (\n        <StyledChevronActionIcon\n          label=\"scroll left\"\n          size=\"md\"\n          onClick={() => scrollList(-SCROLL_STEP)}\n          tabIndex={-1}\n          className=\"left-0\"\n        >\n          <Icon is={ChevronLeft} />\n        </StyledChevronActionIcon>\n      )}\n\n      {canScrollRight && (\n        <StyledChevronActionIcon\n          label=\"scroll right\"\n          size=\"md\"\n          onClick={() => scrollList(SCROLL_STEP)}\n          tabIndex={-1}\n          className=\"right-0\"\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_STEP","TabsTriggerList","children","colorScheme","rest","listRef","setListRefCallback","useCallbackRefState","width","useSize","left","useScrollPosition","canScrollXAxis","React","canScrollLeft","canScrollRight","scrollList","stepModifier","Icon","ChevronLeft","ChevronRight"],"mappings":"ojBAaA,MAAMA,EAAkBC,EAAOC,EAAa,CAC1C,KAAM,CAAC,WAAY,WAAY,sBAAuB,QAAQ,CAChE,CAAC,EAEKC,EAAoBF,EAAOG,EAAM,CACrC,KAAM,CACJ,WACA,OACA,SACA,kBACA,2BACA,wBACF,CACF,CAAC,EAEKC,EAA0BJ,EAAOK,EAAY,CACjD,KAAM,CACJ,UACA,WACA,UACA,mBACA,iBACA,iBACA,0BACA,eACA,YACF,CACF,CAAC,EAEKC,EAAc,GAEPC,EAAkB,CAAC,CAC9B,SAAAC,EACA,YAAAC,EAAc,CACd,EAAA,GAAGC,CACL,IAEM,CACJ,KAAM,CAACC,EAASC,CAAkB,EAAIC,EAEhC,EAAA,CAAE,MAAAC,CAAM,EAAIC,EAAQ,CAAE,QAASJ,EAAS,MAAO,GAAI,CAAC,EACpD,CAAE,KAAAK,CAAK,EAAIC,EAAkB,CACjC,QAASN,EACT,MAAO,IACP,YAAa,UACf,CAAC,EAEKO,EAAiBC,EAAM,QAAQ,IAC9BR,EACEA,EAAQ,YAAcA,EAAQ,YADhB,GAEpB,CAACG,EAAOH,CAAO,CAAC,EAEbS,EAAgBD,EAAM,QAAQ,IAC7BD,EACEF,EAAO,EADc,GAE3B,CAACA,EAAME,CAAc,CAAC,EAEnBG,EAAiBF,EAAM,QAAQ,IAC/B,CAACR,GAAW,CAACO,EAAuB,GACjCP,EAAQ,YAAcK,EAAOL,EAAQ,YAAc,EACzD,CAACA,EAASK,EAAME,CAAc,CAAC,EAE5BI,EAAaH,EAAM,YACtBI,GAAiB,CACXZ,GACLA,EAAQ,OAAO,CACb,KAAMA,EAAQ,WAAaA,EAAQ,YAAcY,EACjD,SAAU,QACZ,CAAC,CACH,EACA,CAACZ,CAAO,CACV,EAEA,OACEQ,EAAA,cAACpB,EAAA,CACC,KAAK,QACL,OAAO,WACP,YAAY,aACX,GAAGU,EACH,GAAGC,GAEJS,EAAA,cAACjB,EAAA,CAAkB,IAAKU,CAAAA,EAAqBJ,CAAS,EAErDY,GACCD,EAAA,cAACf,EAAA,CACC,MAAM,cACN,KAAK,KACL,QAAS,IAAMkB,EAAW,CAAChB,CAAW,EACtC,SAAU,GACV,UAAU,UAEVa,EAAA,cAACK,EAAA,CAAK,GAAIC,CAAAA,CAAa,CACzB,EAGDJ,GACCF,EAAA,cAACf,EAAA,CACC,MAAM,eACN,KAAK,KACL,QAAS,IAAMkB,EAAWhB,CAAW,EACrC,SAAU,GACV,UAAU,SAAA,EAEVa,EAAA,cAACK,EAAA,CAAK,GAAIE,EAAc,CAC1B,CAEJ,CAEJ,EAEAnB,EAAgB,YAAc"}

package/dist/components/text/Text.js

@@ -1,2 +1,2 @@
-import*as n from"react";import{styled as f}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import{capsize as e}from"../../utilities/style/capsize.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";const i={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"}}}},s=({size:t,noCapsize:o})=>({...i.size[t],...i.noCapsize[`${o}`]}),a=f("p",{m:0,"& > &":{"&:before, &:after":{display:"none"}},variants:{...i,weight:{normal:{fontWeight:400},bold:{fontWeight:600}},family:{body:{fontFamily:"$body"},display:{fontFamily:"$display"},mono:{fontFamily:"$mono"}}}}),m=n.forwardRef(({size:t="md",family:o="body",...l},r)=>n.createElement(a,{size:t,family:o,...l,ref:r}));m.displayName="Text";export{a as StyledText,m as Text,s as getTextVariant,i as textVariants};
+import*as a from"react";import{styled as l}from"../../styled.js";const t={size:{xs:["text-xs","leading-[1.6]","capsize-[0.4364]"],sm:["text-sm","leading-[1.53]","capsize-[0.4056]"],md:["text-md","leading-normal","capsize-[0.3864]"],lg:["text-lg","leading-[1.52]","capsize-[0.3983]"],xl:["text-xl","leading-[1.42]","capsize-[0.3506]"]},noCapsize:{true:["before:hidden!","after:hidden!"]}},m=e=>t.size[e.size],i=l("p",{base:["m-0","[&>&]:before:hidden","[&>&]:after:hidden"],variants:{...t,weight:{normal:["font-normal"],bold:["font-semibold"]},family:{body:["font-body"],display:["font-display"],mono:["font-mono"]}}}),d=a.forwardRef(({size:e="md",family:o="body",...n},s)=>a.createElement(i,{size:e,family:o,...n,ref:s}));d.displayName="Text";export{i as StyledText,d as Text,m as getTextVariant,t as textVariants};
 //# sourceMappingURL=Text.js.map

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

@@ -1 +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: {\n      fontSize: '$xs',\n      lineHeight: 1.6,\n      ...capsize(0.4364)\n    },\n    sm: {\n      fontSize: '$sm',\n      lineHeight: 1.53,\n      ...capsize(0.4056)\n    },\n    md: {\n      fontSize: '$md',\n      lineHeight: 1.5,\n      ...capsize(0.3864)\n    },\n    lg: {\n      fontSize: '$lg',\n      lineHeight: 1.52,\n      ...capsize(0.3983)\n    },\n    xl: {\n      fontSize: '$xl',\n      lineHeight: 1.42,\n      ...capsize(0.3506)\n    }\n  },\n  noCapsize: {\n    true: {\n      '&::before, &::after': {\n        display: 'none !important'\n      }\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  m: 0,\n  /** Allow nesting `<Text />` inside `<Text />` without forcing a new line and spacing. */\n  '& > &': {\n    '&:before, &:after': { display: 'none' }\n  },\n  variants: {\n    ...textVariants,\n    weight: {\n      normal: { fontWeight: 400 },\n      bold: { fontWeight: 600 }\n    },\n    family: {\n      body: { fontFamily: '$body' },\n      display: { fontFamily: '$display' },\n      mono: { fontFamily: '$mono' }\n    }\n  }\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(\n    ({ size = 'md', family = 'body', ...remainingProps }, ref) => (\n      <StyledText size={size} family={family} {...remainingProps} ref={ref} />\n    )\n  )\n\nText.displayName = 'Text'\n"],"names":["textVariants","capsize","getTextVariant","size","noCapsize","StyledText","styled","Text","React","family","remainingProps","ref"],"mappings":"sTAMa,MAAAA,EAAe,CAC1B,KAAM,CACJ,GAAI,CACF,SAAU,MACV,WAAY,IACZ,GAAGC,EAAQ,KAAM,CACnB,EACA,GAAI,CACF,SAAU,MACV,WAAY,KACZ,GAAGA,EAAQ,KAAM,CACnB,EACA,GAAI,CACF,SAAU,MACV,WAAY,IACZ,GAAGA,EAAQ,KAAM,CACnB,EACA,GAAI,CACF,SAAU,MACV,WAAY,KACZ,GAAGA,EAAQ,KAAM,CACnB,EACA,GAAI,CACF,SAAU,MACV,WAAY,KACZ,GAAGA,EAAQ,KAAM,CACnB,CACF,EACA,UAAW,CACT,KAAM,CACJ,sBAAuB,CACrB,QAAS,iBACX,CACF,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,EAAG,EAEH,QAAS,CACP,oBAAqB,CAAE,QAAS,MAAO,CACzC,EACA,SAAU,CACR,GAAGN,EACH,OAAQ,CACN,OAAQ,CAAE,WAAY,GAAI,EAC1B,KAAM,CAAE,WAAY,GAAI,CAC1B,EACA,OAAQ,CACN,KAAM,CAAE,WAAY,OAAQ,EAC5B,QAAS,CAAE,WAAY,UAAW,EAClC,KAAM,CAAE,WAAY,OAAQ,CAC9B,CACF,CACF,CAAC,EAoBYO,EACXC,EAAM,WACJ,CAAC,CAAE,KAAAL,EAAO,KAAM,OAAAM,EAAS,UAAWC,CAAe,EAAGC,IACpDH,EAAA,cAACH,EAAW,CAAA,KAAMF,EAAM,OAAQM,EAAS,GAAGC,EAAgB,IAAKC,EAAK,CAE1E,EAEFJ,EAAK,YAAc"}
+{"version":3,"file":"Text.js","sources":["../../../src/components/text/Text.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport type { Override } from '~/utilities'\n\nexport const textVariants = {\n  size: {\n    xs: ['text-xs', 'leading-[1.6]', 'capsize-[0.4364]'],\n    sm: ['text-sm', 'leading-[1.53]', 'capsize-[0.4056]'],\n    md: ['text-md', 'leading-normal', 'capsize-[0.3864]'],\n    lg: ['text-lg', 'leading-[1.52]', 'capsize-[0.3983]'],\n    xl: ['text-xl', 'leading-[1.42]', 'capsize-[0.3506]']\n  },\n  noCapsize: {\n    true: ['before:hidden!', 'after:hidden!']\n  }\n}\n\nexport const getTextVariant = (options: {\n  size: keyof typeof textVariants.size\n}): string[] => textVariants.size[options.size]\n\nexport const StyledText = styled('p', {\n  base: ['m-0', '[&>&]:before:hidden', '[&>&]:after:hidden'],\n  variants: {\n    ...textVariants,\n    weight: {\n      normal: ['font-normal'],\n      bold: ['font-semibold']\n    },\n    family: {\n      body: ['font-body'],\n      display: ['font-display'],\n      mono: ['font-mono']\n    }\n  }\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(\n    ({ size = 'md', family = 'body', ...remainingProps }, ref) => (\n      <StyledText size={size} family={family} {...remainingProps} ref={ref} />\n    )\n  )\n\nText.displayName = 'Text'\n"],"names":["textVariants","getTextVariant","options","StyledText","styled","Text","React","size","family","remainingProps","ref"],"mappings":"iEAKa,MAAAA,EAAe,CAC1B,KAAM,CACJ,GAAI,CAAC,UAAW,gBAAiB,kBAAkB,EACnD,GAAI,CAAC,UAAW,iBAAkB,kBAAkB,EACpD,GAAI,CAAC,UAAW,iBAAkB,kBAAkB,EACpD,GAAI,CAAC,UAAW,iBAAkB,kBAAkB,EACpD,GAAI,CAAC,UAAW,iBAAkB,kBAAkB,CACtD,EACA,UAAW,CACT,KAAM,CAAC,iBAAkB,eAAe,CAC1C,CACF,EAEaC,EAAkBC,GAEfF,EAAa,KAAKE,EAAQ,IAAI,EAEjCC,EAAaC,EAAO,IAAK,CACpC,KAAM,CAAC,MAAO,sBAAuB,oBAAoB,EACzD,SAAU,CACR,GAAGJ,EACH,OAAQ,CACN,OAAQ,CAAC,aAAa,EACtB,KAAM,CAAC,eAAe,CACxB,EACA,OAAQ,CACN,KAAM,CAAC,WAAW,EAClB,QAAS,CAAC,cAAc,EACxB,KAAM,CAAC,WAAW,CACpB,CACF,CACF,CAAC,EAoBYK,EACXC,EAAM,WACJ,CAAC,CAAE,KAAAC,EAAO,KAAM,OAAAC,EAAS,OAAQ,GAAGC,CAAe,EAAGC,IACpDJ,EAAA,cAACH,EAAA,CAAW,KAAMI,EAAM,OAAQC,EAAS,GAAGC,EAAgB,IAAKC,CAAAA,CAAK,CAE1E,EAEFL,EAAK,YAAc"}

package/dist/components/textarea/Textarea.js

@@ -1,2 +1,2 @@
-import*as e from"react";import{styled as n}from"../../stitches.js";const t=n("textarea",{boxShadow:"none",fontSize:"$md",appearance:"none",borderRadius:"$1",boxSizing:"border-box",color:"$grey1000",fontFamily:"$body",fontWeight:400,lineHeight:1.4,m:0,minHeight:"$7",px:"$3",py:"calc($2 + $1)",resize:"vertical",width:"100%","&[disabled]":{backgroundColor:"$grey200",color:"$grey800",cursor:"not-allowed"},"&::placeholder":{color:"$grey700",opacity:1},variants:{appearance:{standard:{background:"white",border:"1px solid $grey800","&:focus-within":{borderColor:"$primary800",outline:"none"}},modern:{background:"$grey100",border:"none","&:focus-within":{outline:"2px solid $blue800",outlineOffset:1,zIndex:1}}},state:{error:{}}},defaultVariants:{appearance:"standard"},compoundVariants:[{state:"error",appearance:"standard",css:{borderColor:"$danger"}},{state:"error",appearance:"modern",css:{bg:"$dangerLight","&:focus-within":{outlineColor:"$danger"}}}]}),r=e.forwardRef((o,a)=>e.createElement(t,{...o,ref:a}));r.displayName="Textarea";export{r as Textarea};
+import*as e from"react";import{styled as t}from"../../styled.js";const n=t("textarea",{base:["shadow-none","text-md","appearance-none","rounded-md","box-border","text-grey-1000","font-body","font-normal","leading-[1.4]","m-0","min-h-24","px-3","py-3","resize-y","w-full","disabled:bg-grey-200","disabled:cursor-not-allowed","disabled:text-grey-800","placeholder:opacity-100","placeholder:text-grey-700"],variants:{appearance:{standard:["bg-white","border","border-grey-800","focus-within:border-primary-800","focus-within:outline-none"],modern:["bg-grey-100","border-none","focus-within:outline-2","focus-within:outline-blue-800","focus-within:outline-offset-1","focus-within:outline-solid","focus-within:z-1"]},state:{error:[]}},defaultVariants:{appearance:"standard"},compoundVariants:[{state:"error",appearance:"standard",class:["border-danger"]},{state:"error",appearance:"modern",class:["bg-danger-light","focus-within:outline-danger"]}]}),r=e.forwardRef((a,o)=>e.createElement(n,{...a,ref:o}));r.displayName="Textarea";export{r as Textarea};
 //# sourceMappingURL=Textarea.js.map

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

@@ -1 +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  borderRadius: '$1',\n  boxSizing: 'border-box',\n  color: '$grey1000',\n  fontFamily: '$body',\n  fontWeight: 400,\n  lineHeight: 1.4,\n  m: 0,\n  minHeight: '$7',\n  px: '$3',\n  py: 'calc($2 + $1)', // offset the line height of the text\n  resize: 'vertical',\n  width: '100%',\n  '&[disabled]': {\n    backgroundColor: '$grey200',\n    color: '$grey800',\n    cursor: 'not-allowed'\n  },\n  '&::placeholder': {\n    color: '$grey700',\n    opacity: 1\n  },\n  variants: {\n    appearance: {\n      standard: {\n        background: 'white',\n        border: '1px solid $grey800',\n        '&:focus-within': {\n          borderColor: '$primary800',\n          outline: 'none'\n        }\n      },\n      modern: {\n        background: '$grey100',\n        border: 'none',\n        '&:focus-within': {\n          outline: '2px solid $blue800',\n          outlineOffset: 1,\n          zIndex: 1\n        }\n      }\n    },\n    state: {\n      error: {}\n    }\n  },\n  defaultVariants: {\n    appearance: 'standard'\n  },\n  compoundVariants: [\n    {\n      state: 'error',\n      appearance: 'standard',\n      css: { borderColor: '$danger' }\n    },\n    {\n      state: 'error',\n      appearance: 'modern',\n      css: {\n        bg: '$dangerLight',\n        '&:focus-within': {\n          outlineColor: '$danger'\n        }\n      }\n    }\n  ]\n})\n\nexport type TextareaProps = React.ComponentProps<typeof StyledTextarea>\n\nexport const Textarea: React.ForwardRefExoticComponent<TextareaProps> =\n  React.forwardRef((props, ref) => <StyledTextarea {...props} ref={ref} />)\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,aAAc,KACd,UAAW,aACX,MAAO,YACP,WAAY,QACZ,WAAY,IACZ,WAAY,IACZ,EAAG,EACH,UAAW,KACX,GAAI,KACJ,GAAI,gBACJ,OAAQ,WACR,MAAO,OACP,cAAe,CACb,gBAAiB,WACjB,MAAO,WACP,OAAQ,aACV,EACA,iBAAkB,CAChB,MAAO,WACP,QAAS,CACX,EACA,SAAU,CACR,WAAY,CACV,SAAU,CACR,WAAY,QACZ,OAAQ,qBACR,iBAAkB,CAChB,YAAa,cACb,QAAS,MACX,CACF,EACA,OAAQ,CACN,WAAY,WACZ,OAAQ,OACR,iBAAkB,CAChB,QAAS,qBACT,cAAe,EACf,OAAQ,CACV,CACF,CACF,EACA,MAAO,CACL,MAAO,CAAA,CACT,CACF,EACA,gBAAiB,CACf,WAAY,UACd,EACA,iBAAkB,CAChB,CACE,MAAO,QACP,WAAY,WACZ,IAAK,CAAE,YAAa,SAAU,CAChC,EACA,CACE,MAAO,QACP,WAAY,SACZ,IAAK,CACH,GAAI,eACJ,iBAAkB,CAChB,aAAc,SAChB,CACF,CACF,CACF,CACF,CAAC,EAIYC,EACXC,EAAM,WAAW,CAACC,EAAOC,IAAQF,EAAA,cAACH,EAAA,CAAgB,GAAGI,EAAO,IAAKC,CAAAA,CAAK,CAAE,EAE1EH,EAAS,YAAc"}
+{"version":3,"file":"Textarea.js","sources":["../../../src/components/textarea/Textarea.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nconst StyledTextarea = styled('textarea', {\n  base: [\n    'shadow-none',\n    'text-md',\n    'appearance-none',\n    'rounded-md',\n    'box-border',\n    'text-grey-1000',\n    'font-body',\n    'font-normal',\n    'leading-[1.4]',\n    'm-0',\n    'min-h-24',\n    'px-3',\n    'py-3',\n    'resize-y',\n    'w-full',\n    'disabled:bg-grey-200',\n    'disabled:cursor-not-allowed',\n    'disabled:text-grey-800',\n    'placeholder:opacity-100',\n    'placeholder:text-grey-700'\n  ],\n  variants: {\n    appearance: {\n      standard: [\n        'bg-white',\n        'border',\n        'border-grey-800',\n        'focus-within:border-primary-800',\n        'focus-within:outline-none'\n      ],\n      modern: [\n        'bg-grey-100',\n        'border-none',\n        'focus-within:outline-2',\n        'focus-within:outline-blue-800',\n        'focus-within:outline-offset-1',\n        'focus-within:outline-solid',\n        'focus-within:z-1'\n      ]\n    },\n    state: {\n      error: []\n    }\n  },\n  defaultVariants: {\n    appearance: 'standard'\n  },\n  compoundVariants: [\n    {\n      state: 'error',\n      appearance: 'standard',\n      class: ['border-danger']\n    },\n    {\n      state: 'error',\n      appearance: 'modern',\n      class: ['bg-danger-light', 'focus-within:outline-danger']\n    }\n  ]\n})\n\nexport type TextareaProps = React.ComponentProps<typeof StyledTextarea>\n\nexport const Textarea: React.ForwardRefExoticComponent<TextareaProps> =\n  React.forwardRef((props, ref) => <StyledTextarea {...props} ref={ref} />)\n\nTextarea.displayName = 'Textarea'\n"],"names":["StyledTextarea","styled","Textarea","React","props","ref"],"mappings":"iEAIA,MAAMA,EAAiBC,EAAO,WAAY,CACxC,KAAM,CACJ,cACA,UACA,kBACA,aACA,aACA,iBACA,YACA,cACA,gBACA,MACA,WACA,OACA,OACA,WACA,SACA,uBACA,8BACA,yBACA,0BACA,2BACF,EACA,SAAU,CACR,WAAY,CACV,SAAU,CACR,WACA,SACA,kBACA,kCACA,2BACF,EACA,OAAQ,CACN,cACA,cACA,yBACA,gCACA,gCACA,6BACA,kBACF,CACF,EACA,MAAO,CACL,MAAO,CACT,CAAA,CACF,EACA,gBAAiB,CACf,WAAY,UACd,EACA,iBAAkB,CAChB,CACE,MAAO,QACP,WAAY,WACZ,MAAO,CAAC,eAAe,CACzB,EACA,CACE,MAAO,QACP,WAAY,SACZ,MAAO,CAAC,kBAAmB,6BAA6B,CAC1D,CACF,CACF,CAAC,EAIYC,EACXC,EAAM,WAAW,CAACC,EAAOC,IAAQF,EAAA,cAACH,EAAA,CAAgB,GAAGI,EAAO,IAAKC,CAAK,CAAA,CAAE,EAE1EH,EAAS,YAAc"}

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

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

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

@@ -1 +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, useFormCustomContext } from '~/components/form'\nimport { Textarea, TextareaProps } from '~/components/textarea'\n\ntype TextareaFieldProps = TextareaProps & FieldElementWrapperProps\n\nexport const TextareaField = ({\n  css = undefined,\n  hideLabel,\n  label,\n  name,\n  validation,\n  prompt,\n  description,\n  appearance,\n  ...remainingProps\n}: TextareaFieldProps) => {\n  const { register } = useFormContext()\n  const context = useFormCustomContext()\n  const { error } = useFieldError(name)\n  const ref = validation ? register(validation) : register\n  const formAppearance = context?.appearance || appearance\n\n  return (\n    <FieldWrapper\n      css={css}\n      description={description}\n      error={error}\n      fieldId={name}\n      hideLabel={hideLabel}\n      label={label}\n      prompt={prompt}\n      required={Boolean(validation?.required)}\n      appearance={formAppearance}\n    >\n      <Textarea\n        id={name}\n        name={name}\n        ref={ref}\n        appearance={formAppearance}\n        {...(error && { state: 'error' })}\n        {...remainingProps}\n      />\n    </FieldWrapper>\n  )\n}\n\nTextareaField.displayName = 'TextareaField'\n"],"names":["TextareaField","css","hideLabel","label","name","validation","prompt","description","appearance","remainingProps","register","useFormContext","context","useFormCustomContext","error","useFieldError","ref","formAppearance","React","FieldWrapper","Textarea"],"mappings":"mYAYa,MAAAA,EAAgB,CAAC,CAC5B,IAAAC,EAAM,OACN,UAAAC,EACA,MAAAC,EACA,KAAAC,EACA,WAAAC,EACA,OAAAC,EACA,YAAAC,EACA,WAAAC,KACGC,CACL,IAA0B,CACxB,KAAM,CAAE,SAAAC,CAAS,EAAIC,EACfC,EAAAA,EAAUC,IACV,CAAE,MAAAC,CAAM,EAAIC,EAAcX,CAAI,EAC9BY,EAAMX,EAAaK,EAASL,CAAU,EAAIK,EAC1CO,GAAiBL,GAAA,KAAA,OAAAA,EAAS,aAAcJ,EAE9C,OACEU,EAAA,cAACC,EAAA,CACC,IAAKlB,EACL,YAAaM,EACb,MAAOO,EACP,QAASV,EACT,UAAWF,EACX,MAAOC,EACP,OAAQG,EACR,SAAU,QAAQD,GAAA,KAAA,OAAAA,EAAY,QAAQ,EACtC,WAAYY,CAEZC,EAAAA,EAAA,cAACE,EAAA,CACC,GAAIhB,EACJ,KAAMA,EACN,IAAKY,EACL,WAAYC,EACX,GAAIH,GAAS,CAAE,MAAO,OAAQ,EAC9B,GAAGL,CACN,CAAA,CACF,CAEJ,EAEAT,EAAc,YAAc"}
+{"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, useFormCustomContext } from '~/components/form'\nimport { Textarea, TextareaProps } from '~/components/textarea'\n\ntype TextareaFieldProps = TextareaProps & FieldElementWrapperProps\n\nexport const TextareaField = ({\n  className,\n  hideLabel,\n  label,\n  name,\n  validation,\n  prompt,\n  description,\n  appearance,\n  ...remainingProps\n}: TextareaFieldProps) => {\n  const { register } = useFormContext()\n  const context = useFormCustomContext()\n  const { error } = useFieldError(name)\n  const ref = validation ? register(validation) : register\n  const formAppearance = context?.appearance || appearance\n\n  return (\n    <FieldWrapper\n      className={className}\n      description={description}\n      error={error}\n      fieldId={name}\n      hideLabel={hideLabel}\n      label={label}\n      prompt={prompt}\n      required={Boolean(validation?.required)}\n      appearance={formAppearance}\n    >\n      <Textarea\n        id={name}\n        name={name}\n        ref={ref}\n        appearance={formAppearance}\n        {...(error && { state: 'error' })}\n        {...remainingProps}\n      />\n    </FieldWrapper>\n  )\n}\n\nTextareaField.displayName = 'TextareaField'\n"],"names":["TextareaField","className","hideLabel","label","name","validation","prompt","description","appearance","remainingProps","register","useFormContext","context","useFormCustomContext","error","useFieldError","ref","formAppearance","React","FieldWrapper","Textarea"],"mappings":"mYAYa,MAAAA,EAAgB,CAAC,CAC5B,UAAAC,EACA,UAAAC,EACA,MAAAC,EACA,KAAAC,EACA,WAAAC,EACA,OAAAC,EACA,YAAAC,EACA,WAAAC,EACA,GAAGC,CACL,IAA0B,CACxB,KAAM,CAAE,SAAAC,CAAS,EAAIC,IACfC,EAAUC,EAAqB,EAC/B,CAAE,MAAAC,CAAM,EAAIC,EAAcX,CAAI,EAC9BY,EAAMX,EAAaK,EAASL,CAAU,EAAIK,EAC1CO,GAAiBL,GAAA,KAAA,OAAAA,EAAS,aAAcJ,EAE9C,OACEU,EAAA,cAACC,EAAA,CACC,UAAWlB,EACX,YAAaM,EACb,MAAOO,EACP,QAASV,EACT,UAAWF,EACX,MAAOC,EACP,OAAQG,EACR,SAAU,CAAA,EAAQD,GAAA,MAAAA,EAAY,UAC9B,WAAYY,CAAAA,EAEZC,EAAA,cAACE,EAAA,CACC,GAAIhB,EACJ,KAAMA,EACN,IAAKY,EACL,WAAYC,EACX,GAAIH,GAAS,CAAE,MAAO,OAAQ,EAC9B,GAAGL,CAAAA,CACN,CACF,CAEJ,EAEAT,EAAc,YAAc"}

package/dist/components/tile/Tile.js

@@ -1,2 +1,2 @@
-import r from"react";import{ColorScheme as s}from"../../experiments/color-scheme/ColorScheme.js";import{styled as n}from"../../stitches.js";const e=n("div",{all:"unset",boxSizing:"border-box",display:"flex",flexDirection:"column",position:"relative",border:"1px solid",bg:"$base1",color:"$foreground",borderColor:"transparent",variants:{borderRadius:{sm:{borderRadius:"$0"},md:{borderRadius:"$1"},lg:{borderRadius:"$3"}},border:{true:{borderColor:"$base3"}},diffused:{true:{"@supports (background-color: color-mix(in hsl, white 50%, transparent))":{bg:"color-mix(in hsl, $base1 70%, transparent)",backdropFilter:"blur(8px)"}}}}}),o=r.forwardRef(({children:i,borderRadius:a="lg",colorScheme:l={},...d},t)=>r.createElement(s,{asChild:!0,base:"grey1",accent:"primary2",interactive:"loContrast",...l},r.createElement(e,{ref:t,borderRadius:a,...d},i)));o.displayName="Tile";export{e as StyledTile,o as Tile};
+import r from"react";import{ColorScheme as i}from"../../experiments/color-scheme/ColorScheme.js";import{styled as n}from"../../styled.js";const e=n("div",{base:["box-border","flex","flex-col","relative","border","bg-(--base-1)","text-(--foreground)","border-transparent"],variants:{borderRadius:{sm:["rounded-sm"],md:["rounded-md"],lg:["rounded-xl"]},border:{true:["border-(--base-3)"]},diffused:{true:["[@supports(background-color:color-mix(in_hsl,white_50%,transparent))]:bg-[color-mix(in_hsl,(--base-1)_70%,transparent)]","[@supports(background-color:color-mix(in_hsl,white_50%,transparent))]:backdrop-blur-sm]"]}}}),o=r.forwardRef(({children:t,borderRadius:a="lg",colorScheme:d={},...l},s)=>r.createElement(i,{asChild:!0,base:"grey1",accent:"primary2",interactive:"loContrast",...d},r.createElement(e,{ref:s,borderRadius:a,...l},t)));o.displayName="Tile";export{e as StyledTile,o as Tile};
 //# sourceMappingURL=Tile.js.map

package/dist/components/tile/Tile.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tile.js","sources":["../../../src/components/tile/Tile.tsx"],"sourcesContent":["import React from 'react'\n\nimport { ColorScheme, TcolorScheme } from '~/experiments/color-scheme'\nimport { styled } from '~/stitches'\n\nexport const StyledTile = styled('div', {\n  all: 'unset', // important for buttons etc\n  boxSizing: 'border-box',\n  display: 'flex',\n  flexDirection: 'column',\n  position: 'relative', // for pseudo-elements\n  border: '1px solid',\n  bg: '$base1',\n  color: '$foreground',\n  borderColor: 'transparent',\n  variants: {\n    borderRadius: {\n      sm: { borderRadius: '$0' },\n      md: { borderRadius: '$1' },\n      lg: { borderRadius: '$3' }\n    },\n    border: {\n      true: { borderColor: '$base3' }\n    },\n    diffused: {\n      true: {\n        '@supports (background-color: color-mix(in hsl, white 50%, transparent))':\n          {\n            bg: 'color-mix(in hsl, $base1 70%, transparent)',\n            backdropFilter: 'blur(8px)'\n          }\n      }\n    }\n  }\n})\n\ntype TTileProps = React.ComponentProps<typeof StyledTile> & {\n  colorScheme?: TcolorScheme\n}\n\nexport const Tile: React.ForwardRefExoticComponent<TTileProps> =\n  React.forwardRef(\n    ({ children, borderRadius = 'lg', colorScheme = {}, ...rest }, ref) => (\n      <ColorScheme\n        asChild\n        base=\"grey1\"\n        accent=\"primary2\"\n        interactive=\"loContrast\"\n        {...colorScheme}\n      >\n        <StyledTile ref={ref} borderRadius={borderRadius} {...rest}>\n          {children}\n        </StyledTile>\n      </ColorScheme>\n    )\n  )\n\nTile.displayName = 'Tile'\n"],"names":["StyledTile","styled","Tile","React","children","borderRadius","colorScheme","rest","ref","ColorScheme"],"mappings":"4IAKO,MAAMA,EAAaC,EAAO,MAAO,CACtC,IAAK,QACL,UAAW,aACX,QAAS,OACT,cAAe,SACf,SAAU,WACV,OAAQ,YACR,GAAI,SACJ,MAAO,cACP,YAAa,cACb,SAAU,CACR,aAAc,CACZ,GAAI,CAAE,aAAc,IAAK,EACzB,GAAI,CAAE,aAAc,IAAK,EACzB,GAAI,CAAE,aAAc,IAAK,CAC3B,EACA,OAAQ,CACN,KAAM,CAAE,YAAa,QAAS,CAChC,EACA,SAAU,CACR,KAAM,CACJ,0EACE,CACE,GAAI,6CACJ,eAAgB,WAClB,CACJ,CACF,CACF,CACF,CAAC,EAMYC,EACXC,EAAM,WACJ,CAAC,CAAE,SAAAC,EAAU,aAAAC,EAAe,KAAM,YAAAC,EAAc,CAAOC,KAAAA,CAAK,EAAGC,IAC7DL,EAAA,cAACM,EAAA,CACC,QAAO,GACP,KAAK,QACL,OAAO,WACP,YAAY,aACX,GAAGH,CAAAA,EAEJH,EAAA,cAACH,EAAW,CAAA,IAAKQ,EAAK,aAAcH,EAAe,GAAGE,CACnDH,EAAAA,CACH,CACF,CAEJ,EAEFF,EAAK,YAAc"}
+{"version":3,"file":"Tile.js","sources":["../../../src/components/tile/Tile.tsx"],"sourcesContent":["import React from 'react'\n\nimport { ColorScheme, TcolorScheme } from '~/experiments/color-scheme'\nimport { styled } from '~/styled'\n\nexport const StyledTile = styled('div', {\n  base: [\n    'box-border',\n    'flex',\n    'flex-col',\n    'relative',\n    'border',\n    'bg-(--base-1)',\n    'text-(--foreground)',\n    'border-transparent'\n  ],\n  variants: {\n    borderRadius: {\n      sm: ['rounded-sm'],\n      md: ['rounded-md'],\n      lg: ['rounded-xl']\n    },\n    border: {\n      true: ['border-(--base-3)']\n    },\n    diffused: {\n      true: [\n        '[@supports(background-color:color-mix(in_hsl,white_50%,transparent))]:bg-[color-mix(in_hsl,(--base-1)_70%,transparent)]',\n        '[@supports(background-color:color-mix(in_hsl,white_50%,transparent))]:backdrop-blur-sm]'\n      ]\n    }\n  }\n})\n\ntype TTileProps = React.ComponentProps<typeof StyledTile> & {\n  colorScheme?: TcolorScheme\n}\n\nexport const Tile: React.ForwardRefExoticComponent<TTileProps> =\n  React.forwardRef(\n    ({ children, borderRadius = 'lg', colorScheme = {}, ...rest }, ref) => (\n      <ColorScheme\n        asChild\n        base=\"grey1\"\n        accent=\"primary2\"\n        interactive=\"loContrast\"\n        {...colorScheme}\n      >\n        <StyledTile ref={ref} borderRadius={borderRadius} {...rest}>\n          {children}\n        </StyledTile>\n      </ColorScheme>\n    )\n  )\n\nTile.displayName = 'Tile'\n"],"names":["StyledTile","styled","Tile","React","children","borderRadius","colorScheme","rest","ref","ColorScheme"],"mappings":"0IAKO,MAAMA,EAAaC,EAAO,MAAO,CACtC,KAAM,CACJ,aACA,OACA,WACA,WACA,SACA,gBACA,sBACA,oBACF,EACA,SAAU,CACR,aAAc,CACZ,GAAI,CAAC,YAAY,EACjB,GAAI,CAAC,YAAY,EACjB,GAAI,CAAC,YAAY,CACnB,EACA,OAAQ,CACN,KAAM,CAAC,mBAAmB,CAC5B,EACA,SAAU,CACR,KAAM,CACJ,0HACA,yFACF,CACF,CACF,CACF,CAAC,EAMYC,EACXC,EAAM,WACJ,CAAC,CAAE,SAAAC,EAAU,aAAAC,EAAe,KAAM,YAAAC,EAAc,GAAI,GAAGC,CAAK,EAAGC,IAC7DL,EAAA,cAACM,EAAA,CACC,QAAO,GACP,KAAK,QACL,OAAO,WACP,YAAY,aACX,GAAGH,CAAAA,EAEJH,EAAA,cAACH,GAAW,IAAKQ,EAAK,aAAcH,EAAe,GAAGE,CAAAA,EACnDH,CACH,CACF,CAEJ,EAEFF,EAAK,YAAc"}

package/dist/components/tile-interactive/TileInteractive.js

@@ -1,2 +1,2 @@
-import i from"react";import{Tile as p}from"../tile/Tile.js";import"../flex/Flex.js";import{styled as l}from"../../stitches.js";const c=l.withConfig({shouldForwardStitchesProp:t=>["as"].includes(t)})(p,{"&[disabled]":{opacity:.3,cursor:"not-allowed"},"&:not([disabled])":{cursor:"pointer",transform:"translateY(0)",transition:"transform 250ms ease","&::after":{content:"",position:"absolute",inset:0,boxShadow:"$2",opacity:0,transition:"opacity 250ms ease-out",borderRadius:"inherit",pointerEvents:"none"},"&:hover":{transform:"translateY(-$space$0)","&::after":{opacity:1}},"&:active":{bg:"$base2"},"&:focus-visible":{outline:"none",position:"relative",zIndex:1,boxShadow:"white 0px 0px 0px 2px, $colors$primary800 0px 0px 0px 4px"}}}),r=i.forwardRef(({onClick:t,href:o,type:a="button",as:e,...n},s)=>i.createElement(c,{...n,...o?{as:e||"a",href:o,onClick:void 0}:{as:e||"button",type:a,onClick:t},ref:s}));r.displayName="TileInteractive";export{r as TileInteractive};
+import o from"react";import{Tile as l}from"../tile/Tile.js";import"../flex/Flex.js";import{styled as r}from"../../styled.js";const b=r(l,{base:["disabled:cursor-not-allowed","disabled:opacity-30","not-disabled:active:bg-(--base-2)","not-disabled:after:absolute",'not-disabled:after:content-[""]',"not-disabled:after:duration-250","not-disabled:after:ease-out","not-disabled:after:inset-0","not-disabled:after:opacity-0","not-disabled:after:pointer-events-none","not-disabled:after:rounded-[inherit]","not-disabled:after:shadow-lg","not-disabled:after:transition-opacity","not-disabled:cursor-pointer","not-disabled:duration-250","not-disabled:ease-in","not-disabled:focus-visible:outline-none","not-disabled:focus-visible:relative","not-disabled:focus-visible:shadow-[$colors$primary800_0px_0px_0px_4px]","not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]","not-disabled:focus-visible:z-1","not-disabled:hover:after:opacity-100","not-disabled:hover:-translate-y-0.5","not-disabled:transition-transform","not-disabled:translate-y-0"]}),a=o.forwardRef(({onClick:i,href:e,type:d="button",as:t,...s},n)=>o.createElement(b,{...s,...e?{as:t||"a",href:e,onClick:void 0}:{as:t||"button",type:d,onClick:i},ref:n}));a.displayName="TileInteractive";export{a as TileInteractive};
 //# sourceMappingURL=TileInteractive.js.map

package/dist/components/tile-interactive/TileInteractive.js.map

@@ -1 +1 @@
-{"version":3,"file":"TileInteractive.js","sources":["../../../src/components/tile-interactive/TileInteractive.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Tile } from '~/components/tile'\nimport { styled } from '~/stitches'\nimport { NavigatorActions } from '~/types'\n\nconst StyledTileInteractive = styled.withConfig({\n  shouldForwardStitchesProp: (propName) => ['as'].includes(propName)\n})(Tile, {\n  '&[disabled]': {\n    opacity: 0.3,\n    cursor: 'not-allowed'\n  },\n  '&:not([disabled])': {\n    cursor: 'pointer',\n    transform: 'translateY(0)',\n    transition: 'transform 250ms ease',\n    '&::after': {\n      content: '',\n      position: 'absolute',\n      inset: 0,\n      boxShadow: '$2',\n      opacity: 0,\n      transition: 'opacity 250ms ease-out',\n      borderRadius: 'inherit',\n      pointerEvents: 'none'\n    },\n    '&:hover': {\n      transform: 'translateY(-$space$0)',\n      '&::after': {\n        opacity: 1\n      }\n    },\n    '&:active': {\n      bg: '$base2'\n    },\n    '&:focus-visible': {\n      outline: 'none',\n      position: 'relative',\n      zIndex: 1,\n      boxShadow: `white 0px 0px 0px 2px, $colors$primary800 0px 0px 0px 4px`\n    }\n  }\n})\n\ntype TTileInteractiveProps = React.ComponentProps<\n  typeof StyledTileInteractive\n> & {\n  as?: React.ComponentType | React.ElementType\n} & React.ButtonHTMLAttributes<HTMLButtonElement> &\n  NavigatorActions\n\nexport const TileInteractive: React.ForwardRefExoticComponent<TTileInteractiveProps> =\n  React.forwardRef(({ onClick, href, type = 'button', as, ...rest }, ref) => {\n    const isLink = !!href\n    const elementSpecificProps = isLink\n      ? {\n          as: as || ('a' as React.ElementType),\n          href,\n          onClick: undefined\n        }\n      : { as: as || ('button' as React.ElementType), type, onClick }\n\n    return (\n      <StyledTileInteractive {...rest} {...elementSpecificProps} ref={ref} />\n    )\n  })\n\nTileInteractive.displayName = 'TileInteractive'\n"],"names":["StyledTileInteractive","styled","propName","Tile","TileInteractive","React","onClick","href","type","as","rest","ref"],"mappings":"+HAMA,MAAMA,EAAwBC,EAAO,WAAW,CAC9C,0BAA4BC,GAAa,CAAC,IAAI,EAAE,SAASA,CAAQ,CACnE,CAAC,EAAEC,EAAM,CACP,cAAe,CACb,QAAS,GACT,OAAQ,aACV,EACA,oBAAqB,CACnB,OAAQ,UACR,UAAW,gBACX,WAAY,uBACZ,WAAY,CACV,QAAS,GACT,SAAU,WACV,MAAO,EACP,UAAW,KACX,QAAS,EACT,WAAY,yBACZ,aAAc,UACd,cAAe,MACjB,EACA,UAAW,CACT,UAAW,wBACX,WAAY,CACV,QAAS,CACX,CACF,EACA,WAAY,CACV,GAAI,QACN,EACA,kBAAmB,CACjB,QAAS,OACT,SAAU,WACV,OAAQ,EACR,UAAW,2DACb,CACF,CACF,CAAC,EASYC,EACXC,EAAM,WAAW,CAAC,CAAE,QAAAC,EAAS,KAAAC,EAAM,KAAAC,EAAO,SAAU,GAAAC,KAAOC,CAAK,EAAGC,IAW/DN,EAAA,cAACL,EAAA,CAAuB,GAAGU,EAAO,GAVnBH,EAEb,CACE,GAAIE,GAAO,IACX,KAAAF,EACA,QAAS,MACX,EACA,CAAE,GAAIE,GAAO,SAAgC,KAAAD,EAAM,QAAAF,CAAQ,EAGF,IAAKK,CAAAA,CAAK,CAExE,EAEHP,EAAgB,YAAc"}
+{"version":3,"file":"TileInteractive.js","sources":["../../../src/components/tile-interactive/TileInteractive.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Tile } from '~/components/tile'\nimport { styled } from '~/styled'\nimport { NavigatorActions } from '~/types'\n\nconst StyledTileInteractive = styled(Tile, {\n  base: [\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30',\n    'not-disabled:active:bg-(--base-2)',\n    'not-disabled:after:absolute',\n    'not-disabled:after:content-[\"\"]',\n    'not-disabled:after:duration-250',\n    'not-disabled:after:ease-out',\n    'not-disabled:after:inset-0',\n    'not-disabled:after:opacity-0',\n    'not-disabled:after:pointer-events-none',\n    'not-disabled:after:rounded-[inherit]',\n    'not-disabled:after:shadow-lg',\n    'not-disabled:after:transition-opacity',\n    'not-disabled:cursor-pointer',\n    'not-disabled:duration-250',\n    'not-disabled:ease-in',\n    'not-disabled:focus-visible:outline-none',\n    'not-disabled:focus-visible:relative',\n    'not-disabled:focus-visible:shadow-[$colors$primary800_0px_0px_0px_4px]',\n    'not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]',\n    'not-disabled:focus-visible:z-1',\n    'not-disabled:hover:after:opacity-100',\n    'not-disabled:hover:-translate-y-0.5',\n    'not-disabled:transition-transform',\n    'not-disabled:translate-y-0'\n  ]\n})\n\ntype TTileInteractiveProps = React.ComponentProps<\n  typeof StyledTileInteractive\n> & {\n  as?: React.ComponentType | React.ElementType\n} & React.ButtonHTMLAttributes<HTMLButtonElement> &\n  NavigatorActions\n\nexport const TileInteractive: React.ForwardRefExoticComponent<TTileInteractiveProps> =\n  React.forwardRef(({ onClick, href, type = 'button', as, ...rest }, ref) => {\n    const isLink = !!href\n    const elementSpecificProps = isLink\n      ? {\n          as: as || ('a' as React.ElementType),\n          href,\n          onClick: undefined\n        }\n      : { as: as || ('button' as React.ElementType), type, onClick }\n\n    return (\n      <StyledTileInteractive {...rest} {...elementSpecificProps} ref={ref} />\n    )\n  })\n\nTileInteractive.displayName = 'TileInteractive'\n"],"names":["StyledTileInteractive","styled","Tile","TileInteractive","React","onClick","href","type","as","rest","ref"],"mappings":"6HAMA,MAAMA,EAAwBC,EAAOC,EAAM,CACzC,KAAM,CACJ,8BACA,sBACA,oCACA,8BACA,kCACA,kCACA,8BACA,6BACA,+BACA,yCACA,uCACA,+BACA,wCACA,8BACA,4BACA,uBACA,0CACA,sCACA,yEACA,4DACA,iCACA,uCACA,sCACA,oCACA,4BACF,CACF,CAAC,EASYC,EACXC,EAAM,WAAW,CAAC,CAAE,QAAAC,EAAS,KAAAC,EAAM,KAAAC,EAAO,SAAU,GAAAC,EAAI,GAAGC,CAAK,EAAGC,IAW/DN,EAAA,cAACJ,EAAA,CAAuB,GAAGS,EAAO,GAVnBH,EAEb,CACE,GAAIE,GAAO,IACX,KAAAF,EACA,QAAS,MACX,EACA,CAAE,GAAIE,GAAO,SAAgC,KAAAD,EAAM,QAAAF,CAAQ,EAGF,IAAKK,CAAK,CAAA,CAExE,EAEHP,EAAgB,YAAc"}

package/dist/components/tile-toggle-group/TileToggleGroupItem.js

@@ -1,2 +1,2 @@
-import*as r from"@radix-ui/react-toggle-group";import*as t from"react";import{TileInteractive as i}from"../tile-interactive/TileInteractive.js";import{styled as a}from"../../stitches.js";const n=a.withConfig({shouldForwardStitchesProp:e=>["as"].includes(e)})(i,{"&:not([disabled])":{'&[data-state="on"]':{"&:hover":{bg:"$interactive2"},"&:active":{bg:"$interactive3"}}},'&[data-state="on"]':{bg:"$interactive1",borderColor:"$accent8","&::before":{content:"",position:"absolute",inset:-1,boxShadow:"inset $colors$accent8 0px 0px 0px 2px",borderRadius:"inherit",zIndex:1}}}),s=({children:e,...o})=>t.createElement(r.Item,{...o,asChild:!0},t.createElement(n,{as:"button"},e));export{s as TileToggleGroupItem};
+import*as o from"@radix-ui/react-toggle-group";import*as t from"react";import{TileInteractive as n}from"../tile-interactive/TileInteractive.js";import{styled as r}from"../../styled.js";const s=r(n,{base:["not-disabled:data-[state=on]:active:bg-(--interactive-3)","not-disabled:data-[state=on]:hover:bg-(--interactive-2)","data-[state=on]:before:-inset-1","data-[state=on]:before:absolute",'data-[state=on]:before:content-[""]',"data-[state=on]:before:rounded-[inherit]","data-[state=on]:before:shadow-[inset_$colors$accent8_0px_0px_0px_2px]","data-[state=on]:before:z-1","data-[state=on]:bg-(--interactive-1)","data-[state=on]:border-(--accent-8)"]}),d=({children:e,...a})=>t.createElement(o.Item,{...a,asChild:!0},t.createElement(s,{as:"button"},e));export{d as TileToggleGroupItem};
 //# sourceMappingURL=TileToggleGroupItem.js.map

package/dist/components/tile-toggle-group/TileToggleGroupItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"TileToggleGroupItem.js","sources":["../../../src/components/tile-toggle-group/TileToggleGroupItem.tsx"],"sourcesContent":["import * as ToggleGroup from '@radix-ui/react-toggle-group'\nimport * as React from 'react'\n\nimport { TileInteractive } from '~/components/tile-interactive'\nimport { styled } from '~/stitches'\n\nconst StyledTileToggleGroupItem = styled.withConfig({\n  shouldForwardStitchesProp: (propName) => ['as'].includes(propName)\n})(TileInteractive, {\n  '&:not([disabled])': {\n    '&[data-state=\"on\"]': {\n      '&:hover': {\n        bg: '$interactive2'\n      },\n      '&:active': {\n        bg: '$interactive3'\n      }\n    }\n  },\n  '&[data-state=\"on\"]': {\n    bg: '$interactive1',\n    borderColor: '$accent8',\n    '&::before': {\n      content: '',\n      position: 'absolute',\n      inset: -1, // account for 1px Tile border\n      boxShadow: 'inset $colors$accent8 0px 0px 0px 2px',\n      borderRadius: 'inherit',\n      zIndex: 1 // so it's over anything nested which touches sides\n    }\n  }\n})\n\ntype TTileToggleGroupItem = React.ComponentProps<typeof ToggleGroup.Item> &\n  React.ComponentProps<typeof StyledTileToggleGroupItem>\n\nexport const TileToggleGroupItem = ({\n  children,\n  ...rest\n}: TTileToggleGroupItem) => {\n  return (\n    <ToggleGroup.Item {...rest} asChild>\n      <StyledTileToggleGroupItem as=\"button\">\n        {children}\n      </StyledTileToggleGroupItem>\n    </ToggleGroup.Item>\n  )\n}\n"],"names":["StyledTileToggleGroupItem","styled","propName","TileInteractive","TileToggleGroupItem","children","rest","React","ToggleGroup"],"mappings":"2LAMA,MAAMA,EAA4BC,EAAO,WAAW,CAClD,0BAA4BC,GAAa,CAAC,IAAI,EAAE,SAASA,CAAQ,CACnE,CAAC,EAAEC,EAAiB,CAClB,oBAAqB,CACnB,qBAAsB,CACpB,UAAW,CACT,GAAI,eACN,EACA,WAAY,CACV,GAAI,eACN,CACF,CACF,EACA,qBAAsB,CACpB,GAAI,gBACJ,YAAa,WACb,YAAa,CACX,QAAS,GACT,SAAU,WACV,MAAO,GACP,UAAW,wCACX,aAAc,UACd,OAAQ,CACV,CACF,CACF,CAAC,EAKYC,EAAsB,CAAC,CAClC,SAAAC,KACGC,CACL,IAEIC,EAAA,cAACC,EAAY,KAAZ,CAAkB,GAAGF,EAAM,QAAO,IACjCC,EAAA,cAACP,EAAA,CAA0B,GAAG,QAC3BK,EAAAA,CACH,CACF"}
+{"version":3,"file":"TileToggleGroupItem.js","sources":["../../../src/components/tile-toggle-group/TileToggleGroupItem.tsx"],"sourcesContent":["import * as ToggleGroup from '@radix-ui/react-toggle-group'\nimport * as React from 'react'\n\nimport { TileInteractive } from '~/components/tile-interactive'\nimport { styled } from '~/styled'\n\nconst StyledTileToggleGroupItem = styled(TileInteractive, {\n  base: [\n    'not-disabled:data-[state=on]:active:bg-(--interactive-3)',\n    'not-disabled:data-[state=on]:hover:bg-(--interactive-2)',\n    'data-[state=on]:before:-inset-1',\n    'data-[state=on]:before:absolute',\n    'data-[state=on]:before:content-[\"\"]',\n    'data-[state=on]:before:rounded-[inherit]',\n    'data-[state=on]:before:shadow-[inset_$colors$accent8_0px_0px_0px_2px]',\n    'data-[state=on]:before:z-1',\n    'data-[state=on]:bg-(--interactive-1)',\n    'data-[state=on]:border-(--accent-8)'\n  ]\n})\n\ntype TTileToggleGroupItem = React.ComponentProps<typeof ToggleGroup.Item> &\n  React.ComponentProps<typeof StyledTileToggleGroupItem>\n\nexport const TileToggleGroupItem = ({\n  children,\n  ...rest\n}: TTileToggleGroupItem) => {\n  return (\n    <ToggleGroup.Item {...rest} asChild>\n      <StyledTileToggleGroupItem as=\"button\">\n        {children}\n      </StyledTileToggleGroupItem>\n    </ToggleGroup.Item>\n  )\n}\n"],"names":["StyledTileToggleGroupItem","styled","TileInteractive","TileToggleGroupItem","children","rest","React","ToggleGroup"],"mappings":"yLAMA,MAAMA,EAA4BC,EAAOC,EAAiB,CACxD,KAAM,CACJ,2DACA,0DACA,kCACA,kCACA,sCACA,2CACA,wEACA,6BACA,uCACA,qCACF,CACF,CAAC,EAKYC,EAAsB,CAAC,CAClC,SAAAC,EACA,GAAGC,CACL,IAEIC,EAAA,cAACC,EAAY,KAAZ,CAAkB,GAAGF,EAAM,QAAO,EACjCC,EAAAA,EAAA,cAACN,EAAA,CAA0B,GAAG,QAC3BI,EAAAA,CACH,CACF"}

package/dist/components/tile-toggle-group/TileToggleGroupRoot.js

@@ -1,2 +1,2 @@
-import*as r from"react";import"../tile/Tile.js";import{TileGroup as i}from"../tile/TileGroup.js";import{ToggleGroup as n}from"../../utilities/radix-overrides/toggle-group/index.js";const p=o=>o==="horizontal"?"row":o==="vertical"?"column":void 0,a=r.forwardRef((o,t)=>{const e=p(o.orientation);return r.createElement(i,{ref:t,as:n.Root,direction:e,gap:"2",wrap:"wrap",...o})});export{a as TileToggleGroupRoot};
+import l from"clsx";import*as e from"react";import{ToggleGroup as t}from"../../utilities/radix-overrides/toggle-group/index.js";const a=e.forwardRef((o,r)=>e.createElement(t.Root,{ref:r,...o,className:l(o.className,"flex","gap-2",o.orientation==="horizontal"?"flex-row":"flex-col","flex-wrap")}));export{a as TileToggleGroupRoot};
 //# sourceMappingURL=TileToggleGroupRoot.js.map

package/dist/components/tile-toggle-group/TileToggleGroupRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"TileToggleGroupRoot.js","sources":["../../../src/components/tile-toggle-group/TileToggleGroupRoot.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { TileGroup } from '~/components/tile'\nimport { ToggleGroup } from '~/utilities/radix-overrides/toggle-group'\n\ntype TTileToggleGroupRootProps = React.ComponentProps<typeof TileGroup> &\n  React.ComponentProps<typeof ToggleGroup.Root>\n\nconst orientationToDirection = (orientation) =>\n  orientation === 'horizontal'\n    ? 'row'\n    : orientation === 'vertical'\n      ? 'column'\n      : undefined\n\nexport const TileToggleGroupRoot: React.ForwardRefExoticComponent<TTileToggleGroupRootProps> =\n  React.forwardRef((props, ref) => {\n    const direction = orientationToDirection(props.orientation)\n    return (\n      <TileGroup\n        ref={ref}\n        as={ToggleGroup.Root}\n        direction={direction}\n        gap=\"2\"\n        wrap=\"wrap\"\n        {...props}\n      />\n    )\n  })\n"],"names":["orientationToDirection","orientation","TileToggleGroupRoot","React","props","ref","direction","TileGroup","ToggleGroup"],"mappings":"qLAQA,MAAMA,EAA0BC,GAC9BA,IAAgB,aACZ,MACAA,IAAgB,WACd,SACA,OAEKC,EACXC,EAAM,WAAW,CAACC,EAAOC,IAAQ,CAC/B,MAAMC,EAAYN,EAAuBI,EAAM,WAAW,EAC1D,OACED,EAAA,cAACI,EAAA,CACC,IAAKF,EACL,GAAIG,EAAY,KAChB,UAAWF,EACX,IAAI,IACJ,KAAK,OACJ,GAAGF,CACN,CAAA,CAEJ,CAAC"}
+{"version":3,"file":"TileToggleGroupRoot.js","sources":["../../../src/components/tile-toggle-group/TileToggleGroupRoot.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { TileGroup } from '~/components/tile'\nimport { ToggleGroup } from '~/utilities/radix-overrides/toggle-group'\n\ntype TTileToggleGroupRootProps = React.ComponentProps<typeof TileGroup> &\n  React.ComponentProps<typeof ToggleGroup.Root>\n\nexport const TileToggleGroupRoot: React.ForwardRefExoticComponent<TTileToggleGroupRootProps> =\n  React.forwardRef((props, ref) => (\n    <ToggleGroup.Root\n      ref={ref}\n      {...props}\n      className={clsx(\n        props.className,\n        'flex',\n        'gap-2',\n        props.orientation === 'horizontal' ? 'flex-row' : 'flex-col',\n        'flex-wrap'\n      )}\n    />\n  ))\n"],"names":["TileToggleGroupRoot","React","props","ref","ToggleGroup","clsx"],"mappings":"gIASO,MAAMA,EACXC,EAAM,WAAW,CAACC,EAAOC,IACvBF,EAAA,cAACG,EAAY,KAAZ,CACC,IAAKD,EACJ,GAAGD,EACJ,UAAWG,EACTH,EAAM,UACN,OACA,QACAA,EAAM,cAAgB,aAAe,WAAa,WAClD,WACF,EACF,CACD"}

package/dist/components/toast/Toast.js

@@ -1,2 +1,2 @@
-import*as s from"react";import{styled as n}from"../../stitches.js";import{Flex as a}from"../flex/Flex.js";import{ToastCloseButton as i}from"./ToastCloseButton.js";import{ToastIcon as m}from"./ToastIcon.js";import{useToastContext as c}from"./ToastProvider.js";const e=n(a,{pointerEvents:"auto",borderRadius:"$3",boxShadow:"$1",boxSizing:"border-box",color:"white",minHeight:"$5",position:"relative",px:"$4",py:"$1",transition:"background-color 125ms ease-out","@allowMotion":{transition:"background-color 125ms ease-out, transform 125ms ease-out"},variants:{type:{loading:{bg:"$info"},blank:{bg:"$info"},success:{bg:"$success"},error:{bg:"$danger"}}}}),o=t=>{const{type:r}=c();return s.createElement(e,{align:"center",type:t.type||r,...t})};o.Icon=m,o.Close=i;export{e as StyledToast,o as Toast};
+import*as s from"react";import{styled as n}from"../../styled.js";import{Flex as a}from"../flex/Flex.js";import{ToastCloseButton as i}from"./ToastCloseButton.js";import{ToastIcon as m}from"./ToastIcon.js";import{useToastContext as p}from"./ToastProvider.js";const e=n(a,{base:["pointer-events-auto","rounded-xl","shadow-md","box-border","text-white","min-h-12","relative","px-4","py-1","motion-safe:duration-125","motion-safe:ease-out","motion-safe:transition-colors","motion-safe:transition-transform"],variants:{type:{loading:["bg-info"],blank:["bg-info"],success:["bg-success"],error:["bg-danger"]}}}),o=t=>{const{type:r}=p();return s.createElement(e,{align:"center",type:t.type||r,...t})};o.Icon=m,o.Close=i;export{e as StyledToast,o as Toast};
 //# sourceMappingURL=Toast.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Toast.js","sources":["../../../src/components/toast/Toast.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { Flex } from '../flex'\nimport { ToastCloseButton } from './ToastCloseButton'\nimport { ToastIcon } from './ToastIcon'\nimport { useToastContext } from './ToastProvider'\n\nexport const StyledToast = styled(Flex, {\n  pointerEvents: 'auto',\n  borderRadius: '$3',\n  boxShadow: '$1',\n  boxSizing: 'border-box',\n  color: 'white',\n  minHeight: '$5',\n  position: 'relative',\n  px: '$4',\n  py: '$1',\n  transition: 'background-color 125ms ease-out',\n  '@allowMotion': {\n    transition: 'background-color 125ms ease-out, transform 125ms ease-out'\n  },\n  variants: {\n    type: {\n      loading: { bg: '$info' },\n      blank: { bg: '$info' },\n      success: { bg: '$success' },\n      error: { bg: '$danger' }\n    }\n  }\n})\n\nexport const Toast = (props: React.ComponentProps<typeof StyledToast>) => {\n  const { type } = useToastContext()\n  return <StyledToast align=\"center\" type={props.type || type} {...props} />\n}\n\nToast.Icon = ToastIcon\nToast.Close = ToastCloseButton\n"],"names":["StyledToast","styled","Flex","Toast","props","type","useToastContext","React","ToastIcon","ToastCloseButton"],"mappings":"mQASa,MAAAA,EAAcC,EAAOC,EAAM,CACtC,cAAe,OACf,aAAc,KACd,UAAW,KACX,UAAW,aACX,MAAO,QACP,UAAW,KACX,SAAU,WACV,GAAI,KACJ,GAAI,KACJ,WAAY,kCACZ,eAAgB,CACd,WAAY,2DACd,EACA,SAAU,CACR,KAAM,CACJ,QAAS,CAAE,GAAI,OAAQ,EACvB,MAAO,CAAE,GAAI,OAAQ,EACrB,QAAS,CAAE,GAAI,UAAW,EAC1B,MAAO,CAAE,GAAI,SAAU,CACzB,CACF,CACF,CAAC,EAEYC,EAASC,GAAoD,CACxE,KAAM,CAAE,KAAAC,CAAK,EAAIC,EAAAA,EACjB,OAAOC,EAAA,cAACP,EAAA,CAAY,MAAM,SAAS,KAAMI,EAAM,MAAQC,EAAO,GAAGD,CAAO,CAAA,CAC1E,EAEAD,EAAM,KAAOK,EACbL,EAAM,MAAQM"}
+{"version":3,"file":"Toast.js","sources":["../../../src/components/toast/Toast.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Flex } from '../flex'\nimport { ToastCloseButton } from './ToastCloseButton'\nimport { ToastIcon } from './ToastIcon'\nimport { useToastContext } from './ToastProvider'\n\nexport const StyledToast = styled(Flex, {\n  base: [\n    'pointer-events-auto',\n    'rounded-xl',\n    'shadow-md',\n    'box-border',\n    'text-white',\n    'min-h-12',\n    'relative',\n    'px-4',\n    'py-1',\n    'motion-safe:duration-125',\n    'motion-safe:ease-out',\n    'motion-safe:transition-colors',\n    'motion-safe:transition-transform'\n  ],\n  variants: {\n    type: {\n      loading: ['bg-info'],\n      blank: ['bg-info'],\n      success: ['bg-success'],\n      error: ['bg-danger']\n    }\n  }\n})\n\nexport const Toast = (props: React.ComponentProps<typeof StyledToast>) => {\n  const { type } = useToastContext()\n  return <StyledToast align=\"center\" type={props.type || type} {...props} />\n}\n\nToast.Icon = ToastIcon\nToast.Close = ToastCloseButton\n"],"names":["StyledToast","styled","Flex","Toast","props","type","useToastContext","React","ToastIcon","ToastCloseButton"],"mappings":"uQASaA,EAAcC,EAAOC,EAAM,CACtC,KAAM,CACJ,sBACA,aACA,YACA,aACA,aACA,WACA,WACA,OACA,OACA,2BACA,uBACA,gCACA,kCACF,EACA,SAAU,CACR,KAAM,CACJ,QAAS,CAAC,SAAS,EACnB,MAAO,CAAC,SAAS,EACjB,QAAS,CAAC,YAAY,EACtB,MAAO,CAAC,WAAW,CACrB,CACF,CACF,CAAC,EAEYC,EAASC,GAAoD,CACxE,KAAM,CAAE,KAAAC,CAAK,EAAIC,IACjB,OAAOC,EAAA,cAACP,EAAA,CAAY,MAAM,SAAS,KAAMI,EAAM,MAAQC,EAAO,GAAGD,CAAO,CAAA,CAC1E,EAEAD,EAAM,KAAOK,EACbL,EAAM,MAAQM"}

package/dist/components/toast/ToastCloseButton.js

@@ -1,2 +1,2 @@
-import{Close as i}from"@atom-learning/icons";import*as t from"react";import{toast as m}from"react-hot-toast";import{ActionIcon as l}from"../action-icon/ActionIcon.js";import{Icon as c}from"../icon/Icon.js";import{useToastContext as n}from"./ToastProvider.js";const a=({onDismiss:o,label:e="Close alert",...r})=>{const{id:s}=n();return t.createElement(l,{css:{color:"white",mr:"-$2","&:hover,&:focus":{color:"white",opacity:.8}},label:e,onClick:()=>{m.dismiss(s),o==null||o()},...r},t.createElement(c,{is:i}))};export{a as ToastCloseButton};
+import{Close as i}from"@atom-learning/icons";import m from"clsx";import*as t from"react";import{toast as l}from"react-hot-toast";import{ActionIcon as a}from"../action-icon/ActionIcon.js";import{Icon as c}from"../icon/Icon.js";import{useToastContext as n}from"./ToastProvider.js";const p=({onDismiss:o,label:e="Close alert",...r})=>{const{id:s}=n();return t.createElement(a,{label:e,onClick:()=>{l.dismiss(s),o==null||o()},...r,className:m("text-white","-mr-2","hover:opacity-80","hover:text-white","focus:opacity-80","focus:text-white")},t.createElement(c,{is:i}))};export{p as ToastCloseButton};
 //# sourceMappingURL=ToastCloseButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ToastCloseButton.js","sources":["../../../src/components/toast/ToastCloseButton.tsx"],"sourcesContent":["import { Close } from '@atom-learning/icons'\nimport * as React from 'react'\nimport { toast } from 'react-hot-toast'\nimport type { Toast } from 'react-hot-toast/dist/core/types'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { useToastContext } from './ToastProvider'\n\nexport interface ToastCloseButtonProps\n  extends Omit<React.ComponentProps<typeof ActionIcon>, 'label' | 'children'> {\n  onDismiss?: () => void\n  label?: string\n}\n\nexport const ToastCloseButton = ({\n  onDismiss,\n  label = 'Close alert',\n  ...rest\n}: ToastCloseButtonProps): JSX.Element => {\n  const { id } = useToastContext()\n\n  return (\n    <ActionIcon\n      css={{\n        color: 'white',\n        mr: '-$2',\n        '&:hover,&:focus': { color: 'white', opacity: 0.8 }\n      }}\n      label={label}\n      onClick={() => {\n        toast.dismiss(id)\n        onDismiss?.()\n      }}\n      {...rest}\n    >\n      <Icon is={Close} />\n    </ActionIcon>\n  )\n}\n"],"names":["ToastCloseButton","onDismiss","label","rest","id","useToastContext","React","ActionIcon","toast","Icon","Close"],"mappings":"mQAea,MAAAA,EAAmB,CAAC,CAC/B,UAAAC,EACA,MAAAC,EAAQ,iBACLC,CACL,IAA0C,CACxC,KAAM,CAAE,GAAAC,CAAG,EAAIC,IAEf,OACEC,EAAA,cAACC,EAAA,CACC,IAAK,CACH,MAAO,QACP,GAAI,MACJ,kBAAmB,CAAE,MAAO,QAAS,QAAS,EAAI,CACpD,EACA,MAAOL,EACP,QAAS,IAAM,CACbM,EAAM,QAAQJ,CAAE,EAChBH,GAAA,MAAAA,EACF,CAAA,EACC,GAAGE,CAAAA,EAEJG,EAAA,cAACG,EAAA,CAAK,GAAIC,CAAAA,CAAO,CACnB,CAEJ"}
+{"version":3,"file":"ToastCloseButton.js","sources":["../../../src/components/toast/ToastCloseButton.tsx"],"sourcesContent":["import { Close } from '@atom-learning/icons'\nimport clsx from 'clsx'\nimport * as React from 'react'\nimport { toast } from 'react-hot-toast'\nimport type { Toast } from 'react-hot-toast/dist/core/types'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { useToastContext } from './ToastProvider'\n\nexport interface ToastCloseButtonProps\n  extends Omit<React.ComponentProps<typeof ActionIcon>, 'label' | 'children'> {\n  onDismiss?: () => void\n  label?: string\n}\n\nexport const ToastCloseButton = ({\n  onDismiss,\n  label = 'Close alert',\n  ...rest\n}: ToastCloseButtonProps): JSX.Element => {\n  const { id } = useToastContext()\n\n  return (\n    <ActionIcon\n      label={label}\n      onClick={() => {\n        toast.dismiss(id)\n        onDismiss?.()\n      }}\n      {...rest}\n      className={clsx(\n        'text-white',\n        '-mr-2',\n        'hover:opacity-80',\n        'hover:text-white',\n        'focus:opacity-80',\n        'focus:text-white'\n      )}\n    >\n      <Icon is={Close} />\n    </ActionIcon>\n  )\n}\n"],"names":["ToastCloseButton","onDismiss","label","rest","id","useToastContext","React","ActionIcon","toast","clsx","Icon","Close"],"mappings":"uRAgBO,MAAMA,EAAmB,CAAC,CAC/B,UAAAC,EACA,MAAAC,EAAQ,cACR,GAAGC,CACL,IAA0C,CACxC,KAAM,CAAE,GAAAC,CAAG,EAAIC,EAAgB,EAE/B,OACEC,EAAA,cAACC,EAAA,CACC,MAAOL,EACP,QAAS,IAAM,CACbM,EAAM,QAAQJ,CAAE,EAChBH,GAAA,MAAAA,EACF,CAAA,EACC,GAAGE,EACJ,UAAWM,EACT,aACA,QACA,mBACA,mBACA,mBACA,kBACF,CAAA,EAEAH,EAAA,cAACI,EAAA,CAAK,GAAIC,CAAAA,CAAO,CACnB,CAEJ"}

package/dist/components/toast/ToastIcon.js

@@ -1,2 +1,2 @@
-import e from"react";import{Icon as t}from"../icon/Icon.js";const m=o=>e.createElement(t,{size:"sm",css:{mr:"$3",flex:"0 0 auto"},...o});export{m as ToastIcon};
+import o from"react";import{Icon as t}from"../icon/Icon.js";const m=e=>o.createElement(t,{size:"sm",...e,className:"mr-3 flex-[0_0_auto]"});export{m as ToastIcon};
 //# sourceMappingURL=ToastIcon.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ToastIcon.js","sources":["../../../src/components/toast/ToastIcon.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Icon } from '../icon'\n\nexport const ToastIcon = (\n  props: React.ComponentProps<typeof Icon>\n): JSX.Element => (\n  <Icon size=\"sm\" css={{ mr: '$3', flex: '0 0 auto' }} {...props} />\n)\n"],"names":["ToastIcon","props","React","Icon"],"mappings":"4DAIO,MAAMA,EACXC,GAEAC,EAAA,cAACC,EAAA,CAAK,KAAK,KAAK,IAAK,CAAE,GAAI,KAAM,KAAM,UAAW,EAAI,GAAGF,CAAO,CAAA"}
+{"version":3,"file":"ToastIcon.js","sources":["../../../src/components/toast/ToastIcon.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Icon } from '../icon'\n\nexport const ToastIcon = (\n  props: React.ComponentProps<typeof Icon>\n): JSX.Element => <Icon size=\"sm\" {...props} className=\"mr-3 flex-[0_0_auto]\" />\n"],"names":["ToastIcon","props","React","Icon"],"mappings":"kEAIaA,EACXC,GACgBC,EAAA,cAACC,EAAA,CAAK,KAAK,KAAM,GAAGF,EAAO,UAAU,sBAAuB,CAAA"}

package/dist/components/toast/ToastProvider.js

@@ -1,2 +1,2 @@
-import{Error as i}from"@atom-learning/icons";import*as e from"react";import{useToaster as g}from"react-hot-toast";import{default as S}from"react-hot-toast";import{styled as n,keyframes as l}from"../../stitches.js";import{Spacer as h}from"../spacer/Spacer.js";import{Text as T}from"../text/Text.js";import{Toast as a}from"./Toast.js";const w=n("div",{position:"fixed",zIndex:2147483647,inset:"$2",pointerEvents:"none","@sm":{top:"$3"}}),$=l({"0%":{transform:"translateY(-100%)",opacity:0},"100%":{transform:"translateY(0)",opacity:1}}),C=l({"0%":{transform:"translateY(0)",opacity:1},"100%":{transform:"translateY(-100%)",opacity:0}}),P=n("div",{position:"absolute",width:"100%",display:"flex",justifyContent:"center",alignItems:"center",borderRadius:"$0",boxSizing:"border-box",minHeight:"$5",variants:{visible:{true:{"@allowMotion":{animation:`${$} 250ms cubic-bezier(0.22, 1, 0.36, 1)`}},false:{opacity:0,"@allowMotion":{animation:`${C} 250ms cubic-bezier(0.22, 1, 0.36, 1)`}}}}}),m=e.createContext(null),c=({children:o,css:u})=>{const{toasts:d,handlers:f}=g(),{startPause:p,endPause:v,calculateOffset:x,updateHeight:y}=f;return e.createElement(e.Fragment,null,e.createElement(w,{onMouseEnter:p,onMouseLeave:v,css:u},d.map(t=>{const{message:r}=t,b=x(t.id,{reverseOrder:!0,margin:8}),E=s=>{s&&t.height===void 0&&y(t.id,s.getBoundingClientRect().height)};return e.createElement(P,{key:t.id,ref:E,visible:t.visible,role:t.role,"aria-live":t.ariaLive,style:{"--offset":`${b}px`},css:{top:"var(--offset)"}},e.createElement(m.Provider,{value:t},typeof r=="function"?r(t):e.isValidElement(r)?r:e.createElement(a,{css:{width:"400px"}},t.type==="error"&&e.createElement(a.Icon,{is:i}),e.createElement(T,null,r),e.createElement(h,null),e.createElement(a.Close,null))))})),o)},z=()=>{const o=e.useContext(m);if(!o)throw new i("useToastContext must be used within a ToastProvider");return o};c.displayName="ToastProvider";export{c as ToastProvider,S as toast,z as useToastContext};
+import{Error as i}from"@atom-learning/icons";import*as e from"react";import{useToaster as h}from"react-hot-toast";import{default as B}from"react-hot-toast";import{styled as n}from"../../styled.js";import{Spacer as y}from"../spacer/Spacer.js";import{Text as g}from"../text/Text.js";import{Toast as s}from"./Toast.js";const T=n("div",{base:["fixed","z-2147483647","inset-2","pointer-events-none","sm:top-3"]}),C=n("div",{base:["absolute","w-full","flex","justify-center","items-center","rounded-sm","box-border","min-h-12","[--slide-opacity-out:0]","[--slide-direction-out-y:-100%]"],variants:{visible:{true:["motion-safe:animate-slide-direction-in"],false:["opacity-0","motion-safe:animate-slide-direction-out"]}}}),l=e.createContext(null),m=({children:r,className:c})=>{const{toasts:d,handlers:u}=h(),{startPause:f,endPause:p,calculateOffset:v,updateHeight:x}=u;return e.createElement(e.Fragment,null,e.createElement(T,{onMouseEnter:f,onMouseLeave:p,className:c},d.map(t=>{const{message:o}=t,E=v(t.id,{reverseOrder:!0,margin:8}),b=a=>{a&&t.height===void 0&&x(t.id,a.getBoundingClientRect().height)};return e.createElement(C,{key:t.id,ref:b,visible:t.visible,role:t.role,"aria-live":t.ariaLive,style:{"--offset":"".concat(E,"px")},className:"top-(--offset)"},e.createElement(l.Provider,{value:t},typeof o=="function"?o(t):e.isValidElement(o)?o:e.createElement(s,{className:"w-100"},t.type==="error"&&e.createElement(s.Icon,{is:i}),e.createElement(g,null,o),e.createElement(y,null),e.createElement(s.Close,null))))})),r)},P=()=>{const r=e.useContext(l);if(!r)throw new i("useToastContext must be used within a ToastProvider");return r};m.displayName="ToastProvider";export{m as ToastProvider,B as toast,P as useToastContext};
 //# sourceMappingURL=ToastProvider.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ToastProvider.js","sources":["../../../src/components/toast/ToastProvider.tsx"],"sourcesContent":["import { Error } from '@atom-learning/icons'\nimport * as React from 'react'\nimport { useToaster } from 'react-hot-toast'\n\nimport { CSS, keyframes, styled } from '~/stitches'\nexport { default as toast } from 'react-hot-toast'\nimport type { Toast as ToastType } from 'react-hot-toast/dist/core/types'\n\nimport { Spacer } from '../spacer'\nimport { Text } from '../text'\nimport { Toast } from './Toast'\n\nconst ToastProviderBase = styled('div', {\n  position: 'fixed',\n  zIndex: 2147483647,\n  inset: '$2',\n  pointerEvents: 'none',\n  '@sm': {\n    top: '$3'\n  }\n})\n\nconst slideIn = keyframes({\n  '0%': { transform: 'translateY(-100%)', opacity: 0 },\n  '100%': { transform: `translateY(0)`, opacity: 1 }\n})\n\nconst slideOut = keyframes({\n  '0%': { transform: `translateY(0)`, opacity: 1 },\n  '100%': { transform: `translateY(-100%)`, opacity: 0 }\n})\n\nconst ToastWrapper = styled('div', {\n  position: 'absolute',\n  width: '100%',\n  display: 'flex',\n  justifyContent: 'center',\n  alignItems: 'center',\n  borderRadius: '$0',\n  boxSizing: 'border-box',\n  minHeight: '$5',\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 ToastContext = React.createContext<Pick<\n  ToastType,\n  'type' | 'id' | 'message'\n> | null>(null)\n\nexport const ToastProvider = ({\n  children,\n  css\n}: React.PropsWithChildren<{ css?: CSS }>) => {\n  const { toasts, handlers } = useToaster()\n  const { startPause, endPause, calculateOffset, updateHeight } = handlers\n\n  return (\n    <>\n      <ToastProviderBase\n        onMouseEnter={startPause}\n        onMouseLeave={endPause}\n        css={css}\n      >\n        {toasts.map((toast) => {\n          const { message: children } = toast\n\n          const offset = calculateOffset(toast.id, {\n            reverseOrder: true,\n            margin: 8\n          })\n\n          const ref = (el: HTMLDivElement | null) => {\n            if (el && toast.height === undefined) {\n              updateHeight(toast.id, el.getBoundingClientRect().height)\n            }\n          }\n\n          return (\n            <ToastWrapper\n              key={toast.id}\n              ref={ref}\n              visible={toast.visible}\n              role={toast.role}\n              aria-live={toast.ariaLive}\n              style={{ '--offset': `${offset}px` }}\n              css={{ top: 'var(--offset)' }}\n            >\n              <ToastContext.Provider value={toast}>\n                {typeof children === 'function' ? (\n                  children(toast)\n                ) : React.isValidElement(children) ? (\n                  children\n                ) : (\n                  <Toast css={{ width: '400px' }}>\n                    {toast.type === 'error' && <Toast.Icon is={Error} />}\n                    <Text>{children}</Text>\n                    <Spacer />\n                    <Toast.Close />\n                  </Toast>\n                )}\n              </ToastContext.Provider>\n            </ToastWrapper>\n          )\n        })}\n      </ToastProviderBase>\n      {children}\n    </>\n  )\n}\n\nexport const useToastContext = () => {\n  const context = React.useContext(ToastContext)\n\n  if (!context) {\n    throw new Error('useToastContext must be used within a ToastProvider')\n  }\n\n  return context\n}\n\nToastProvider.displayName = 'ToastProvider'\n"],"names":["ToastProviderBase","styled","slideIn","keyframes","slideOut","ToastWrapper","ToastContext","React","ToastProvider","children","css","toasts","handlers","useToaster","startPause","endPause","calculateOffset","updateHeight","toast","offset","ref","el","Toast","Error","Text","Spacer","useToastContext","context"],"mappings":"6UAYA,MAAMA,EAAoBC,EAAO,MAAO,CACtC,SAAU,QACV,OAAQ,WACR,MAAO,KACP,cAAe,OACf,MAAO,CACL,IAAK,IACP,CACF,CAAC,EAEKC,EAAUC,EAAU,CACxB,KAAM,CAAE,UAAW,oBAAqB,QAAS,CAAE,EACnD,OAAQ,CAAE,UAAW,gBAAiB,QAAS,CAAE,CACnD,CAAC,EAEKC,EAAWD,EAAU,CACzB,KAAM,CAAE,UAAW,gBAAiB,QAAS,CAAE,EAC/C,OAAQ,CAAE,UAAW,oBAAqB,QAAS,CAAE,CACvD,CAAC,EAEKE,EAAeJ,EAAO,MAAO,CACjC,SAAU,WACV,MAAO,OACP,QAAS,OACT,eAAgB,SAChB,WAAY,SACZ,aAAc,KACd,UAAW,aACX,UAAW,KACX,SAAU,CACR,QAAS,CACP,KAAM,CACJ,eAAgB,CACd,UAAW,GAAGC,wCAChB,CACF,EACA,MAAO,CACL,QAAS,EACT,eAAgB,CACd,UAAW,GAAGE,wCAChB,CACF,CACF,CACF,CACF,CAAC,EAEKE,EAAeC,EAAM,cAGjB,IAAI,EAEDC,EAAgB,CAAC,CAC5B,SAAAC,EACA,IAAAC,CACF,IAA8C,CAC5C,KAAM,CAAE,OAAAC,EAAQ,SAAAC,CAAS,EAAIC,EAAW,EAClC,CAAE,WAAAC,EAAY,SAAAC,EAAU,gBAAAC,EAAiB,aAAAC,CAAa,EAAIL,EAEhE,OACEL,EAAA,cAAAA,EAAA,SAAA,KACEA,EAAA,cAACP,EAAA,CACC,aAAcc,EACd,aAAcC,EACd,IAAKL,CAEJC,EAAAA,EAAO,IAAKO,GAAU,CACrB,KAAM,CAAE,QAAST,CAAS,EAAIS,EAExBC,EAASH,EAAgBE,EAAM,GAAI,CACvC,aAAc,GACd,OAAQ,CACV,CAAC,EAEKE,EAAOC,GAA8B,CACrCA,GAAMH,EAAM,SAAW,QACzBD,EAAaC,EAAM,GAAIG,EAAG,sBAAwB,EAAA,MAAM,CAE5D,EAEA,OACEd,EAAA,cAACF,EAAA,CACC,IAAKa,EAAM,GACX,IAAKE,EACL,QAASF,EAAM,QACf,KAAMA,EAAM,KACZ,YAAWA,EAAM,SACjB,MAAO,CAAE,WAAY,GAAGC,KAAW,EACnC,IAAK,CAAE,IAAK,eAAgB,CAE5BZ,EAAAA,EAAA,cAACD,EAAa,SAAb,CAAsB,MAAOY,CAC3B,EAAA,OAAOT,GAAa,WACnBA,EAASS,CAAK,EACZX,EAAM,eAAeE,CAAQ,EAC/BA,EAEAF,EAAA,cAACe,EAAA,CAAM,IAAK,CAAE,MAAO,OAAQ,CAAA,EAC1BJ,EAAM,OAAS,SAAWX,EAAA,cAACe,EAAM,KAAN,CAAW,GAAIC,CAAO,CAAA,EAClDhB,EAAA,cAACiB,EAAA,KAAMf,CAAS,EAChBF,EAAA,cAACkB,EAAA,IAAO,EACRlB,EAAA,cAACe,EAAM,MAAN,IAAY,CACf,CAEJ,CACF,CAEJ,CAAC,CACH,EACCb,CACH,CAEJ,EAEaiB,EAAkB,IAAM,CACnC,MAAMC,EAAUpB,EAAM,WAAWD,CAAY,EAE7C,GAAI,CAACqB,EACH,MAAM,IAAIJ,EAAM,qDAAqD,EAGvE,OAAOI,CACT,EAEAnB,EAAc,YAAc"}
+{"version":3,"file":"ToastProvider.js","sources":["../../../src/components/toast/ToastProvider.tsx"],"sourcesContent":["import { Error } from '@atom-learning/icons'\nimport * as React from 'react'\nimport { useToaster } from 'react-hot-toast'\nimport type { Toast as ToastType } from 'react-hot-toast/dist/core/types'\n\nimport { styled } from '~/styled'\n\nimport { Spacer } from '../spacer'\nimport { Text } from '../text'\nimport { Toast } from './Toast'\n\nexport { default as toast } from 'react-hot-toast'\n\nconst ToastProviderBase = styled('div', {\n  base: ['fixed', 'z-2147483647', 'inset-2', 'pointer-events-none', 'sm:top-3']\n})\n\nconst ToastWrapper = styled('div', {\n  base: [\n    'absolute',\n    'w-full',\n    'flex',\n    'justify-center',\n    'items-center',\n    'rounded-sm',\n    'box-border',\n    'min-h-12',\n    '[--slide-opacity-out:0]',\n    '[--slide-direction-out-y:-100%]'\n  ],\n  variants: {\n    visible: {\n      true: ['motion-safe:animate-slide-direction-in'],\n      false: ['opacity-0', 'motion-safe:animate-slide-direction-out']\n    }\n  }\n})\n\nconst ToastContext = React.createContext<Pick<\n  ToastType,\n  'type' | 'id' | 'message'\n> | null>(null)\n\nexport const ToastProvider = ({\n  children,\n  className\n}: React.PropsWithChildren<{ className?: string }>) => {\n  const { toasts, handlers } = useToaster()\n  const { startPause, endPause, calculateOffset, updateHeight } = handlers\n\n  return (\n    <>\n      <ToastProviderBase\n        onMouseEnter={startPause}\n        onMouseLeave={endPause}\n        className={className}\n      >\n        {toasts.map((toast) => {\n          const { message: children } = toast\n\n          const offset = calculateOffset(toast.id, {\n            reverseOrder: true,\n            margin: 8\n          })\n\n          const ref = (el: HTMLDivElement | null) => {\n            if (el && toast.height === undefined) {\n              updateHeight(toast.id, el.getBoundingClientRect().height)\n            }\n          }\n\n          return (\n            <ToastWrapper\n              key={toast.id}\n              ref={ref}\n              visible={toast.visible}\n              role={toast.role}\n              aria-live={toast.ariaLive}\n              style={{ '--offset': `${offset}px` }}\n              className=\"top-(--offset)\"\n            >\n              <ToastContext.Provider value={toast}>\n                {typeof children === 'function' ? (\n                  children(toast)\n                ) : React.isValidElement(children) ? (\n                  children\n                ) : (\n                  <Toast className=\"w-100\">\n                    {toast.type === 'error' && <Toast.Icon is={Error} />}\n                    <Text>{children}</Text>\n                    <Spacer />\n                    <Toast.Close />\n                  </Toast>\n                )}\n              </ToastContext.Provider>\n            </ToastWrapper>\n          )\n        })}\n      </ToastProviderBase>\n      {children}\n    </>\n  )\n}\n\nexport const useToastContext = () => {\n  const context = React.useContext(ToastContext)\n\n  if (!context) {\n    throw new Error('useToastContext must be used within a ToastProvider')\n  }\n\n  return context\n}\n\nToastProvider.displayName = 'ToastProvider'\n"],"names":["ToastProviderBase","styled","ToastWrapper","ToastContext","React","ToastProvider","children","className","toasts","handlers","useToaster","startPause","endPause","calculateOffset","updateHeight","toast","offset","ref","el","Toast","Error","Text","Spacer","useToastContext","context"],"mappings":"4TAaA,MAAMA,EAAoBC,EAAO,MAAO,CACtC,KAAM,CAAC,QAAS,eAAgB,UAAW,sBAAuB,UAAU,CAC9E,CAAC,EAEKC,EAAeD,EAAO,MAAO,CACjC,KAAM,CACJ,WACA,SACA,OACA,iBACA,eACA,aACA,aACA,WACA,0BACA,iCACF,EACA,SAAU,CACR,QAAS,CACP,KAAM,CAAC,wCAAwC,EAC/C,MAAO,CAAC,YAAa,yCAAyC,CAChE,CACF,CACF,CAAC,EAEKE,EAAeC,EAAM,cAGjB,IAAI,EAEDC,EAAgB,CAAC,CAC5B,SAAAC,EACA,UAAAC,CACF,IAAuD,CACrD,KAAM,CAAE,OAAAC,EAAQ,SAAAC,CAAS,EAAIC,EAAW,EAClC,CAAE,WAAAC,EAAY,SAAAC,EAAU,gBAAAC,EAAiB,aAAAC,CAAa,EAAIL,EAEhE,OACEL,EAAA,cAAAA,EAAA,SACEA,KAAAA,EAAA,cAACJ,EAAA,CACC,aAAcW,EACd,aAAcC,EACd,UAAWL,CAAAA,EAEVC,EAAO,IAAKO,GAAU,CACrB,KAAM,CAAE,QAAST,CAAS,EAAIS,EAExBC,EAASH,EAAgBE,EAAM,GAAI,CACvC,aAAc,GACd,OAAQ,CACV,CAAC,EAEKE,EAAOC,GAA8B,CACrCA,GAAMH,EAAM,SAAW,QACzBD,EAAaC,EAAM,GAAIG,EAAG,wBAAwB,MAAM,CAE5D,EAEA,OACEd,EAAA,cAACF,EAAA,CACC,IAAKa,EAAM,GACX,IAAKE,EACL,QAASF,EAAM,QACf,KAAMA,EAAM,KACZ,YAAWA,EAAM,SACjB,MAAO,CAAE,WAAY,GAAG,OAAAC,EAAM,IAAA,CAAK,EACnC,UAAU,gBAEVZ,EAAAA,EAAA,cAACD,EAAa,SAAb,CAAsB,MAAOY,CAC3B,EAAA,OAAOT,GAAa,WACnBA,EAASS,CAAK,EACZX,EAAM,eAAeE,CAAQ,EAC/BA,EAEAF,EAAA,cAACe,EAAA,CAAM,UAAU,OACdJ,EAAAA,EAAM,OAAS,SAAWX,EAAA,cAACe,EAAM,KAAN,CAAW,GAAIC,CAAAA,CAAO,EAClDhB,EAAA,cAACiB,EAAA,KAAMf,CAAS,EAChBF,EAAA,cAACkB,EAAA,IAAO,EACRlB,EAAA,cAACe,EAAM,MAAN,IAAY,CACf,CAEJ,CACF,CAEJ,CAAC,CACH,EACCb,CACH,CAEJ,EAEaiB,EAAkB,IAAM,CACnC,MAAMC,EAAUpB,EAAM,WAAWD,CAAY,EAE7C,GAAI,CAACqB,EACH,MAAM,IAAIJ,EAAM,qDAAqD,EAGvE,OAAOI,CACT,EAEAnB,EAAc,YAAc"}

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

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

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

@@ -1 +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 } from '../icon'\nimport { StyledItem } from './ToggleGroupItem'\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  variants: {\n    size: {\n      sm: {\n        fontSize: `$sm`,\n        px: '$4',\n        minHeight: '32px',\n        '& > *:not(:last-child)': {\n          mr: '$2'\n        }\n      },\n      md: {\n        fontSize: `$md`,\n        px: '$5',\n        minHeight: '40px',\n        '& > *:not(:last-child)': {\n          mr: '$3'\n        }\n      },\n      lg: {\n        fontSize: `$lg`,\n        px: '$5',\n        minHeight: '48px',\n        '& > *:not(:last-child)': {\n          mr: '$3'\n        }\n      }\n    },\n    isIconOnly: {\n      true: {}\n    },\n    theme: {\n      standard: {},\n      modern: {}\n    }\n  },\n  compoundVariants: [\n    {\n      isIconOnly: true,\n      size: 'sm',\n      css: {\n        minWidth: '32px',\n        p: 0\n      }\n    },\n    {\n      isIconOnly: true,\n      size: 'md',\n      css: {\n        minWidth: '40px',\n        p: 0\n      }\n    },\n    {\n      isIconOnly: true,\n      size: 'lg',\n      css: {\n        minWidth: '48px',\n        p: 0\n      }\n    },\n    {\n      isIconOnly: true,\n      size: 'sm',\n      theme: 'modern',\n      css: {\n        minWidth: '40px',\n        p: 0\n      }\n    },\n    {\n      isIconOnly: true,\n      size: 'md',\n      theme: 'modern',\n      css: {\n        minWidth: '48px',\n        p: 0\n      }\n    },\n    {\n      isIconOnly: true,\n      size: 'lg',\n      theme: 'modern',\n      css: {\n        minWidth: '60px',\n        p: 0\n      }\n    }\n  ]\n})\n\nexport const ToggleGroupButton: React.ForwardRefExoticComponent<\n  React.ComponentProps<typeof StyledButton>\n> = React.forwardRef(\n  ({ size = 'md', theme = 'standard', 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\n        ref={ref}\n        size={size}\n        isIconOnly={isIconOnly}\n        theme={theme}\n        {...rest}\n      >\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)\n"],"names":["StyledButton","styled","StyledItem","ToggleGroupButton","React","size","theme","children","rest","ref","_a","childrenArray","isSingleChild","isIconOnly","Icon","child"],"mappings":"4JAOa,MAAAA,EAAeC,EAAOC,EAAY,CAC7C,SAAU,EACV,QAAS,OACT,WAAY,SACZ,eAAgB,SAChB,WAAY,IACZ,WAAY,EACZ,GAAI,KACJ,SAAU,CACR,KAAM,CACJ,GAAI,CACF,SAAU,MACV,GAAI,KACJ,UAAW,OACX,yBAA0B,CACxB,GAAI,IACN,CACF,EACA,GAAI,CACF,SAAU,MACV,GAAI,KACJ,UAAW,OACX,yBAA0B,CACxB,GAAI,IACN,CACF,EACA,GAAI,CACF,SAAU,MACV,GAAI,KACJ,UAAW,OACX,yBAA0B,CACxB,GAAI,IACN,CACF,CACF,EACA,WAAY,CACV,KAAM,CAAA,CACR,EACA,MAAO,CACL,SAAU,CACV,EAAA,OAAQ,CACV,CAAA,CACF,EACA,iBAAkB,CAChB,CACE,WAAY,GACZ,KAAM,KACN,IAAK,CACH,SAAU,OACV,EAAG,CACL,CACF,EACA,CACE,WAAY,GACZ,KAAM,KACN,IAAK,CACH,SAAU,OACV,EAAG,CACL,CACF,EACA,CACE,WAAY,GACZ,KAAM,KACN,IAAK,CACH,SAAU,OACV,EAAG,CACL,CACF,EACA,CACE,WAAY,GACZ,KAAM,KACN,MAAO,SACP,IAAK,CACH,SAAU,OACV,EAAG,CACL,CACF,EACA,CACE,WAAY,GACZ,KAAM,KACN,MAAO,SACP,IAAK,CACH,SAAU,OACV,EAAG,CACL,CACF,EACA,CACE,WAAY,GACZ,KAAM,KACN,MAAO,SACP,IAAK,CACH,SAAU,OACV,EAAG,CACL,CACF,CACF,CACF,CAAC,EAEYC,EAETC,EAAM,WACR,CAAC,CAAE,KAAAC,EAAO,KAAM,MAAAC,EAAQ,WAAY,SAAAC,KAAaC,CAAK,EAAGC,IAAQ,CA5GnE,IAAAC,EA6GI,MAAMC,EAAgBP,EAAM,SAAS,QAAQG,CAAQ,EAC/CK,EAAgBD,EAAc,QAAU,EACxCE,EACJD,GACAR,EAAM,eAAeO,EAAc,EAAE,KACrCD,EAAAC,EAAc,KAAd,KAAAD,OAAAA,EAAkB,QAASI,EAE7B,OACEV,EAAA,cAACJ,EACC,CAAA,IAAKS,EACL,KAAMJ,EACN,WAAYQ,EACZ,MAAOP,EACN,GAAGE,CAAAA,EAGFG,EAAc,IAAKI,GAEf,CAACH,IACA,OAAOG,GAAU,UAAY,OAAOA,GAAU,UAExCX,EAAA,cAAC,QAAK,IAAKW,CAAAA,EAAQA,CAAM,EAC9BX,EAAM,eAAeW,CAAK,IACxBA,GAAA,KAAAA,OAAAA,EAAO,QAASD,EACXV,EAAM,aAAaW,EAAO,CAAE,GAAGA,EAAM,MAAO,KAAAV,CAAK,CAAC,EAEtDU,CACR,CAEL,CAEJ,CACF"}
+{"version":3,"file":"ToggleGroupButton.js","sources":["../../../src/components/toggle-group/ToggleGroupButton.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Icon } from '../icon'\nimport { ToggleGroupItem } from './ToggleGroupItem'\n\nexport const StyledButton = styled(ToggleGroupItem, {\n  base: [\n    'grow',\n    'flex',\n    'items-center',\n    'justify-center',\n    'font-semibold',\n    'leading-[1]',\n    'py-1'\n  ],\n  variants: {\n    size: {\n      sm: ['*:not-last:mr-2', 'min-h-8', 'px-4', 'text-sm'],\n      md: ['*:not-last:mr-3', 'min-h-10', 'px-8', 'text-md'],\n      lg: ['*:not-last:mr-3', 'min-h-12', 'px-8', 'text-lg']\n    },\n    isIconOnly: {\n      true: []\n    },\n    theme: {\n      standard: [],\n      modern: []\n    }\n  },\n  compoundVariants: [\n    {\n      isIconOnly: true,\n      size: 'sm',\n      class: ['min-w-8', 'p-0']\n    },\n    {\n      isIconOnly: true,\n      size: 'md',\n      class: ['min-w-10', 'p-0']\n    },\n    {\n      isIconOnly: true,\n      size: 'lg',\n      class: ['min-w-12', 'p-0']\n    },\n    {\n      isIconOnly: true,\n      size: 'sm',\n      theme: 'modern',\n      class: ['min-w-10', 'p-0']\n    },\n    {\n      isIconOnly: true,\n      size: 'md',\n      theme: 'modern',\n      class: ['min-w-12', 'p-0']\n    },\n    {\n      isIconOnly: true,\n      size: 'lg',\n      theme: 'modern',\n      class: ['min-w-15', 'p-0']\n    }\n  ]\n})\n\nexport const ToggleGroupButton: React.ForwardRefExoticComponent<\n  React.ComponentProps<typeof StyledButton>\n> = React.forwardRef(\n  ({ size = 'md', theme = 'standard', 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\n        ref={ref}\n        size={size}\n        isIconOnly={isIconOnly}\n        theme={theme}\n        {...rest}\n      >\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)\n"],"names":["StyledButton","styled","ToggleGroupItem","ToggleGroupButton","React","size","theme","children","rest","ref","_a","childrenArray","isSingleChild","isIconOnly","Icon","child"],"mappings":"+JAOO,MAAMA,EAAeC,EAAOC,EAAiB,CAClD,KAAM,CACJ,OACA,OACA,eACA,iBACA,gBACA,cACA,MACF,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,kBAAmB,UAAW,OAAQ,SAAS,EACpD,GAAI,CAAC,kBAAmB,WAAY,OAAQ,SAAS,EACrD,GAAI,CAAC,kBAAmB,WAAY,OAAQ,SAAS,CACvD,EACA,WAAY,CACV,KAAM,CAAA,CACR,EACA,MAAO,CACL,SAAU,CAAA,EACV,OAAQ,CACV,CAAA,CACF,EACA,iBAAkB,CAChB,CACE,WAAY,GACZ,KAAM,KACN,MAAO,CAAC,UAAW,KAAK,CAC1B,EACA,CACE,WAAY,GACZ,KAAM,KACN,MAAO,CAAC,WAAY,KAAK,CAC3B,EACA,CACE,WAAY,GACZ,KAAM,KACN,MAAO,CAAC,WAAY,KAAK,CAC3B,EACA,CACE,WAAY,GACZ,KAAM,KACN,MAAO,SACP,MAAO,CAAC,WAAY,KAAK,CAC3B,EACA,CACE,WAAY,GACZ,KAAM,KACN,MAAO,SACP,MAAO,CAAC,WAAY,KAAK,CAC3B,EACA,CACE,WAAY,GACZ,KAAM,KACN,MAAO,SACP,MAAO,CAAC,WAAY,KAAK,CAC3B,CACF,CACF,CAAC,EAEYC,EAETC,EAAM,WACR,CAAC,CAAE,KAAAC,EAAO,KAAM,MAAAC,EAAQ,WAAY,SAAAC,EAAU,GAAGC,CAAK,EAAGC,IAAQ,CAvEnE,IAAAC,EAwEI,MAAMC,EAAgBP,EAAM,SAAS,QAAQG,CAAQ,EAC/CK,EAAgBD,EAAc,QAAU,EACxCE,EACJD,GACAR,EAAM,eAAeO,EAAc,CAAC,CAAC,KACrCD,EAAAC,EAAc,CAAC,IAAf,KAAA,OAAAD,EAAkB,QAASI,EAE7B,OACEV,EAAA,cAACJ,EACC,CAAA,IAAKS,EACL,KAAMJ,EACN,WAAYQ,EACZ,MAAOP,EACN,GAAGE,CAGFG,EAAAA,EAAc,IAAKI,GAEf,CAACH,IACA,OAAOG,GAAU,UAAY,OAAOA,GAAU,UAExCX,EAAA,cAAC,OAAK,CAAA,IAAKW,CAAQA,EAAAA,CAAM,EAC9BX,EAAM,eAAeW,CAAK,IACxBA,GAAA,KAAAA,OAAAA,EAAO,QAASD,EACXV,EAAM,aAAaW,EAAO,CAAE,GAAGA,EAAM,MAAO,KAAAV,CAAK,CAAC,EAEtDU,CACR,CAEL,CAEJ,CACF"}

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

@@ -1,2 +1,2 @@
-import*as r from"@radix-ui/react-toggle-group";import{styled as e}from"../../stitches.js";const o=e(r.Item,{cursor:"pointer","&[disabled]":{opacity:.3,cursor:"not-allowed"},variants:{theme:{standard:{bg:"white",color:"$grey800",border:"1px solid $grey600","&::before":{background:"$grey600"},"&:not([disabled])":{'&:hover, &:focus-visible, &[data-state="on"]':{"&::before":{background:"none"}},"&:hover":{borderColor:"currentColor !important",color:"$primary900"},"&:focus-visible":{outline:"none",position:"relative",zIndex:1,boxShadow:"white 0px 0px 0px 2px, $colors$primary800 0px 0px 0px 4px",'&[data-state="off"]':{borderColor:"$grey600 !important"},'&[data-state="on"]':{boxShadow:"inset currentColor 0px 0px 0px 1px, white 0px 0px 0px 2px, $colors$primary800 0px 0px 0px 4px"}}},'&[data-state="on"]':{color:"$primary800",borderColor:"currentColor !important",boxShadow:"inset currentColor 0px 0px 0px 1px"}},modern:{bg:"$grey200",borderRadius:"$1",overflow:"hidden",border:"0","&:not([disabled])":{"&:hover":{color:"$primary900"},"&:focus-visible":{outline:"none",position:"relative",zIndex:1,boxShadow:"white 0px 0px 0px 2px, $colors$primary800 0px 0px 0px 4px",'&[data-state="off"]':{borderColor:"$grey600 !important"},'&[data-state="on"]':{boxShadow:"inset currentColor 0px 0px 0px 1px white 0px 0px 0px 2px, $colors$primary800 0px 0px 0px 4px"}}},'&[data-state="on"]':{color:"$grey800",border:"1px solid $grey200 !important",bg:"white",boxShadow:"none !important"}}}}}),t=o;export{o as StyledItem,t as ToggleGroupItem};
+import*as e from"@radix-ui/react-toggle-group";import{styled as o}from"../../styled.js";const t=o(e.Item,{base:["cursor-pointer","disabled:cursor-not-allowed","disabled:opacity-30"],variants:{theme:{standard:["before:bg-grey-600","bg-white","border","border-grey-600","data-[state=on]:border-current!","data-[state=on]:shadow-[inset_currentColor_0px_0px_0px_1px]","data-[state=on]:text-primary-800","not-disabled:data-[state=on]:before:bg-none","not-disabled:focus-visible:before:bg-none","not-disabled:focus-visible:data-[state=off]:border-grey-600!","not-disabled:focus-visible:data-[state=on]:shadow-[$colors$primary800_0px_0px_0px_4px]","not-disabled:focus-visible:data-[state=on]:shadow-[inset_currentColor_0px_0px_0px_1px]","not-disabled:focus-visible:data-[state=on]:shadow-[white_0px_0px_0px_2px]","not-disabled:focus-visible:outline-none","not-disabled:focus-visible:relative","not-disabled:focus-visible:shadow-[$colors$primary800_0px_0px_0px_4px]","not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]","not-disabled:focus-visible:z-1","not-disabled:hover:before:bg-none","not-disabled:hover:border-current!","not-disabled:hover:text-primary-900","text-grey-800"],modern:["bg-grey-200","border-none","data-[state=on]:bg-white","data-[state=on]:border!","data-[state=on]:border-grey-200!","data-[state=on]:shadow-none!","data-[state=on]:text-grey-800","not-disabled:focus-visible:data-[state=off]:border-grey-600!","not-disabled:focus-visible:data-[state=on]:shadow-[$colors$primary800_0px_0px_0px_4px]","not-disabled:focus-visible:data-[state=on]:shadow-[inset_currentColor_0px_0px_0px_1px_white_0px_0px_0px_2px]","not-disabled:focus-visible:outline-none","not-disabled:focus-visible:relative","not-disabled:focus-visible:shadow-[$colors$primary800_0px_0px_0px_4px]","not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]","not-disabled:focus-visible:z-1","not-disabled:hover:text-primary-900","overflow-hidden","rounded-md"]}},defaultVariants:{theme:"standard"}});export{t as ToggleGroupItem};
 //# sourceMappingURL=ToggleGroupItem.js.map

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

@@ -1 +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'\n\nexport const StyledItem = styled(ToggleGroup.Item, {\n  cursor: 'pointer',\n  '&[disabled]': {\n    opacity: 0.3,\n    cursor: 'not-allowed'\n  },\n  variants: {\n    theme: {\n      standard: {\n        bg: 'white',\n        color: '$grey800',\n        border: '1px solid $grey600',\n        '&::before': {\n          background: '$grey600'\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: '$primary900'\n          },\n          '&:focus-visible': {\n            outline: 'none',\n            position: 'relative',\n            zIndex: 1,\n            boxShadow: `white 0px 0px 0px 2px, $colors$primary800 0px 0px 0px 4px`,\n            '&[data-state=\"off\"]': {\n              borderColor: '$grey600 !important'\n            },\n            '&[data-state=\"on\"]': {\n              boxShadow: `inset currentColor 0px 0px 0px 1px, white 0px 0px 0px 2px, $colors$primary800 0px 0px 0px 4px`\n            }\n          }\n        },\n        '&[data-state=\"on\"]': {\n          color: '$primary800',\n          borderColor: 'currentColor !important',\n          boxShadow: 'inset currentColor 0px 0px 0px 1px'\n        }\n      },\n      modern: {\n        bg: '$grey200',\n        borderRadius: '$1',\n        overflow: 'hidden',\n        border: '0',\n        '&:not([disabled])': {\n          '&:hover': {\n            color: '$primary900'\n          },\n          '&:focus-visible': {\n            outline: 'none',\n            position: 'relative',\n            zIndex: 1,\n            boxShadow: `white 0px 0px 0px 2px, $colors$primary800 0px 0px 0px 4px`,\n            '&[data-state=\"off\"]': {\n              borderColor: '$grey600 !important'\n            },\n            '&[data-state=\"on\"]': {\n              boxShadow: `inset currentColor 0px 0px 0px 1px white 0px 0px 0px 2px, $colors$primary800 0px 0px 0px 4px`\n            }\n          }\n        },\n        '&[data-state=\"on\"]': {\n          color: '$grey800',\n          border: '1px solid $grey200 !important',\n          bg: 'white',\n          boxShadow: 'none !important'\n        }\n      }\n    }\n  }\n})\n\nexport const ToggleGroupItem = StyledItem\n"],"names":["StyledItem","styled","ToggleGroup","ToggleGroupItem"],"mappings":"0FAIO,MAAMA,EAAaC,EAAOC,EAAY,KAAM,CACjD,OAAQ,UACR,cAAe,CACb,QAAS,GACT,OAAQ,aACV,EACA,SAAU,CACR,MAAO,CACL,SAAU,CACR,GAAI,QACJ,MAAO,WACP,OAAQ,qBACR,YAAa,CACX,WAAY,UACd,EACA,oBAAqB,CACnB,+CAAgD,CAC9C,YAAa,CACX,WAAY,MACd,CACF,EACA,UAAW,CACT,YAAa,0BACb,MAAO,aACT,EACA,kBAAmB,CACjB,QAAS,OACT,SAAU,WACV,OAAQ,EACR,UAAW,4DACX,sBAAuB,CACrB,YAAa,qBACf,EACA,qBAAsB,CACpB,UAAW,+FACb,CACF,CACF,EACA,qBAAsB,CACpB,MAAO,cACP,YAAa,0BACb,UAAW,oCACb,CACF,EACA,OAAQ,CACN,GAAI,WACJ,aAAc,KACd,SAAU,SACV,OAAQ,IACR,oBAAqB,CACnB,UAAW,CACT,MAAO,aACT,EACA,kBAAmB,CACjB,QAAS,OACT,SAAU,WACV,OAAQ,EACR,UAAW,4DACX,sBAAuB,CACrB,YAAa,qBACf,EACA,qBAAsB,CACpB,UAAW,8FACb,CACF,CACF,EACA,qBAAsB,CACpB,MAAO,WACP,OAAQ,gCACR,GAAI,QACJ,UAAW,iBACb,CACF,CACF,CACF,CACF,CAAC,EAEYC,EAAkBH"}
+{"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 '~/styled'\n\nexport const ToggleGroupItem = styled(ToggleGroup.Item, {\n  base: [\n    'cursor-pointer',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ],\n  variants: {\n    theme: {\n      standard: [\n        'before:bg-grey-600',\n        'bg-white',\n        'border',\n        'border-grey-600',\n        'data-[state=on]:border-current!',\n        'data-[state=on]:shadow-[inset_currentColor_0px_0px_0px_1px]',\n        'data-[state=on]:text-primary-800',\n        'not-disabled:data-[state=on]:before:bg-none',\n        'not-disabled:focus-visible:before:bg-none',\n        'not-disabled:focus-visible:data-[state=off]:border-grey-600!',\n        'not-disabled:focus-visible:data-[state=on]:shadow-[$colors$primary800_0px_0px_0px_4px]',\n        'not-disabled:focus-visible:data-[state=on]:shadow-[inset_currentColor_0px_0px_0px_1px]',\n        'not-disabled:focus-visible:data-[state=on]:shadow-[white_0px_0px_0px_2px]',\n        'not-disabled:focus-visible:outline-none',\n        'not-disabled:focus-visible:relative',\n        'not-disabled:focus-visible:shadow-[$colors$primary800_0px_0px_0px_4px]',\n        'not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]',\n        'not-disabled:focus-visible:z-1',\n        'not-disabled:hover:before:bg-none',\n        'not-disabled:hover:border-current!',\n        'not-disabled:hover:text-primary-900',\n        'text-grey-800'\n      ],\n      modern: [\n        'bg-grey-200',\n        'border-none',\n        'data-[state=on]:bg-white',\n        'data-[state=on]:border!',\n        'data-[state=on]:border-grey-200!',\n        'data-[state=on]:shadow-none!',\n        'data-[state=on]:text-grey-800',\n        'not-disabled:focus-visible:data-[state=off]:border-grey-600!',\n        'not-disabled:focus-visible:data-[state=on]:shadow-[$colors$primary800_0px_0px_0px_4px]',\n        'not-disabled:focus-visible:data-[state=on]:shadow-[inset_currentColor_0px_0px_0px_1px_white_0px_0px_0px_2px]',\n        'not-disabled:focus-visible:outline-none',\n        'not-disabled:focus-visible:relative',\n        'not-disabled:focus-visible:shadow-[$colors$primary800_0px_0px_0px_4px]',\n        'not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]',\n        'not-disabled:focus-visible:z-1',\n        'not-disabled:hover:text-primary-900',\n        'overflow-hidden',\n        'rounded-md'\n      ]\n    }\n  },\n  defaultVariants: {\n    theme: 'standard'\n  }\n})\n"],"names":["ToggleGroupItem","styled","ToggleGroup"],"mappings":"wFAIO,MAAMA,EAAkBC,EAAOC,EAAY,KAAM,CACtD,KAAM,CACJ,iBACA,8BACA,qBACF,EACA,SAAU,CACR,MAAO,CACL,SAAU,CACR,qBACA,WACA,SACA,kBACA,kCACA,8DACA,mCACA,8CACA,4CACA,+DACA,yFACA,yFACA,4EACA,0CACA,sCACA,yEACA,4DACA,iCACA,oCACA,qCACA,sCACA,eACF,EACA,OAAQ,CACN,cACA,cACA,2BACA,0BACA,mCACA,+BACA,gCACA,+DACA,yFACA,+GACA,0CACA,sCACA,yEACA,4DACA,iCACA,sCACA,kBACA,YACF,CACF,CACF,EACA,gBAAiB,CACf,MAAO,UACT,CACF,CAAC"}

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

@@ -1,2 +1,2 @@
-import*as t from"react";import{Flex as p}from"../flex/Flex.js";import{styled as f}from"../../stitches.js";import{ToggleGroup as u}from"../../utilities/radix-overrides/toggle-group/index.js";const n=f(u.Root,{width:"fit-content",variants:{isFullWidth:{true:{width:"100%","& [data-radix-collection-item]":{flexBasis:0,flexGrow:1}},false:{width:"auto"}},hasGap:{true:{"& [data-radix-collection-item]":{borderRadius:"$1"}},false:{borderRadius:"$1","& [data-radix-collection-item]":{position:"relative","&:not(:last-child)":{"&::before":{content:"",position:"absolute"}}}}},direction:{column:{},row:{}},theme:{standard:{},modern:{bg:"$grey200"}}},compoundVariants:[{hasGap:!1,direction:"row",theme:"standard",css:{"& [data-radix-collection-item]":{borderRadius:0,"&: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:"$1",borderBottomLeftRadius:"$1"},"&:last-child":{borderTopRightRadius:"$1",borderBottomRightRadius:"$1"}}}},{hasGap:!1,direction:"column",theme:"standard",css:{"& [data-radix-collection-item]":{"&: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"}}}},{hasGap:!1,theme:"modern",css:{}},{hasGap:!1,theme:"standard",css:{bg:"white","& [data-radix-collection-item]":{bg:"transparent",borderRadius:0}}}]}),b=o=>o==="horizontal"?"row":"column",R=t.forwardRef(({orientation:o="horizontal",gap:e,isFullWidth:s,children:l,theme:a="standard",wrap:c,...h},m)=>{const i=typeof e=="number",d=b(o);return t.createElement(n,{ref:m,direction:d,hasGap:i,isFullWidth:s,orientation:o,theme:a,...h},t.createElement(p,{direction:d,gap:i?e:void 0,wrap:c||"nowrap"},t.Children.toArray(l).map(r=>t.isValidElement(r)?t.cloneElement(r,{...r.props,theme:a}):r)))});export{n as StyledRoot,R as ToggleGroupRoot};
+import*as t from"react";import{Flex as p}from"../flex/Flex.js";import{styled as f}from"../../styled.js";import{ToggleGroup as b}from"../../utilities/radix-overrides/toggle-group/index.js";const n=f(b.Root,{base:["w-fit"],variants:{isFullWidth:{true:["**:data-radix-collection-item:basis-0","**:data-radix-collection-item:grow","w-full"],false:["w-auto"]},hasGap:{true:["**:data-radix-collection-item:rounded-md"],false:["**:data-radix-collection-item:not-last:before:absolute","**:data-radix-collection-item:not-last:before:content-['']","**:data-radix-collection-item:relative","rounded-md"]},direction:{column:[],row:[]},theme:{standard:[],modern:["bg-grey-200"]}},compoundVariants:[{hasGap:!1,direction:"row",theme:"standard",class:["**:data-radix-collection-item:first:rounded-l-md","**:data-radix-collection-item:last:rounded-r-md","**:data-radix-collection-item:not-first:border-l-transparent","**:data-radix-collection-item:not-last:before:h-[calc(100%+2px)]","**:data-radix-collection-item:not-last:before:right-0","**:data-radix-collection-item:not-last:before:-top-px","**:data-radix-collection-item:not-last:before:translate-x-3/2","**:data-radix-collection-item:not-last:before:w-px","**:data-radix-collection-item:not-last:border-r-transparent","**:data-radix-collection-item:rounded-none"]},{hasGap:!1,direction:"column",theme:"standard",class:["**:data-radix-collection-item:first:rounded-t-sm","**:data-radix-collection-item:last:rounded-b-sm","**:data-radix-collection-item:not-first:border-t-transparent","**:data-radix-collection-item:not-last:before:bottom-0","**:data-radix-collection-item:not-last:before:h-px","**:data-radix-collection-item:not-last:before:-left-px","**:data-radix-collection-item:not-last:before:translate-y-3/2","**:data-radix-collection-item:not-last:before:w-[calc(100%+2px)]","**:data-radix-collection-item:not-last:border-b-transparent"]},{hasGap:!1,theme:"modern",class:[]},{hasGap:!1,theme:"standard",class:["**:data-radix-collection-item:bg-transparent","**:data-radix-collection-item:rounded-none","bg-white"]}]}),h=a=>a==="horizontal"?"row":"column",u=t.forwardRef(({orientation:a="horizontal",gap:o,isFullWidth:d,children:c,theme:r="standard",wrap:s,...m},x)=>{const i=typeof o=="number",l=h(a);return t.createElement(n,{ref:x,direction:l,hasGap:i,isFullWidth:d,orientation:a,theme:r,...m},t.createElement(p,{direction:l,gap:i?o:void 0,wrap:s||"nowrap"},t.Children.toArray(c).map(e=>t.isValidElement(e)?t.cloneElement(e,{...e.props,theme:r}):e)))});export{n as StyledRoot,u as ToggleGroupRoot};
 //# sourceMappingURL=ToggleGroupRoot.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroupRoot.js","sources":["../../../src/components/toggle-group/ToggleGroupRoot.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Flex } from '~/components/flex'\nimport { styled } from '~/stitches'\nimport { ToggleGroup } from '~/utilities/radix-overrides/toggle-group'\n\nimport { StyledItem } from './ToggleGroupItem'\n\ntype RootType = {\n  orientation?: 'horizontal' | 'vertical'\n  isFullWidth?: boolean\n}\n\nexport const StyledRoot = styled(ToggleGroup.Root, {\n  width: 'fit-content',\n  variants: {\n    isFullWidth: {\n      true: {\n        width: '100%',\n        '& [data-radix-collection-item]': {\n          flexBasis: 0,\n          flexGrow: 1\n        }\n      },\n      false: {\n        width: 'auto'\n      }\n    },\n    hasGap: {\n      true: {\n        '& [data-radix-collection-item]': {\n          borderRadius: '$1'\n        }\n      },\n      false: {\n        borderRadius: '$1',\n        '& [data-radix-collection-item]': {\n          position: 'relative',\n          '&:not(:last-child)': {\n            '&::before': {\n              content: '',\n              position: 'absolute'\n            }\n          }\n        }\n      }\n    },\n    direction: {\n      column: {},\n      row: {}\n    },\n    theme: {\n      standard: {},\n      modern: { bg: '$grey200' }\n    }\n  },\n  compoundVariants: [\n    {\n      hasGap: false,\n      direction: 'row',\n      theme: 'standard',\n      css: {\n        '& [data-radix-collection-item]': {\n          borderRadius: 0,\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: '$1',\n            borderBottomLeftRadius: '$1'\n          },\n          '&:last-child': {\n            borderTopRightRadius: '$1',\n            borderBottomRightRadius: '$1'\n          }\n        }\n      }\n    },\n    {\n      hasGap: false,\n      direction: 'column',\n      theme: 'standard',\n      css: {\n        '& [data-radix-collection-item]': {\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      hasGap: false,\n      theme: 'modern',\n      css: {}\n    },\n    {\n      hasGap: false,\n      theme: 'standard',\n      css: {\n        bg: 'white',\n        '& [data-radix-collection-item]': {\n          bg: 'transparent',\n          borderRadius: 0\n        }\n      }\n    }\n  ]\n})\n\nconst orientationToDirection = (orientation) =>\n  orientation === 'horizontal' ? 'row' : 'column'\n\nexport const ToggleGroupRoot: React.ForwardRefExoticComponent<\n  Pick<React.ComponentProps<typeof Flex>, 'gap' | 'wrap'> &\n    React.ComponentProps<typeof StyledRoot> &\n    RootType\n> = React.forwardRef(\n  (\n    {\n      orientation = 'horizontal',\n      gap,\n      isFullWidth,\n      children,\n      theme = 'standard',\n      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        theme={theme}\n        {...rest}\n      >\n        <Flex\n          direction={direction}\n          gap={hasGap ? gap : undefined}\n          wrap={wrap || 'nowrap'}\n        >\n          {\n            React.Children.toArray(children).map((child) => {\n              if (React.isValidElement(child)) {\n                return React.cloneElement(child, { ...child.props, theme })\n              }\n              return child\n            }) as React.ReactElement[]\n          }\n        </Flex>\n      </StyledRoot>\n    )\n  }\n)\n"],"names":["StyledRoot","styled","ToggleGroup","orientationToDirection","orientation","ToggleGroupRoot","React","gap","isFullWidth","children","theme","wrap","rest","ref","hasGap","direction","Flex","child"],"mappings":"8LAaO,MAAMA,EAAaC,EAAOC,EAAY,KAAM,CACjD,MAAO,cACP,SAAU,CACR,YAAa,CACX,KAAM,CACJ,MAAO,OACP,iCAAkC,CAChC,UAAW,EACX,SAAU,CACZ,CACF,EACA,MAAO,CACL,MAAO,MACT,CACF,EACA,OAAQ,CACN,KAAM,CACJ,iCAAkC,CAChC,aAAc,IAChB,CACF,EACA,MAAO,CACL,aAAc,KACd,iCAAkC,CAChC,SAAU,WACV,qBAAsB,CACpB,YAAa,CACX,QAAS,GACT,SAAU,UACZ,CACF,CACF,CACF,CACF,EACA,UAAW,CACT,OAAQ,CACR,EAAA,IAAK,CACP,CAAA,EACA,MAAO,CACL,SAAU,CAAA,EACV,OAAQ,CAAE,GAAI,UAAW,CAC3B,CACF,EACA,iBAAkB,CAChB,CACE,OAAQ,GACR,UAAW,MACX,MAAO,WACP,IAAK,CACH,iCAAkC,CAChC,aAAc,EACd,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,MAAO,WACP,IAAK,CACH,iCAAkC,CAChC,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,EACA,CACE,OAAQ,GACR,MAAO,SACP,IAAK,CAAA,CACP,EACA,CACE,OAAQ,GACR,MAAO,WACP,IAAK,CACH,GAAI,QACJ,iCAAkC,CAChC,GAAI,cACJ,aAAc,CAChB,CACF,CACF,CACF,CACF,CAAC,EAEKC,EAA0BC,GAC9BA,IAAgB,aAAe,MAAQ,SAE5BC,EAITC,EAAM,WACR,CACE,CACE,YAAAF,EAAc,aACd,IAAAG,EACA,YAAAC,EACA,SAAAC,EACA,MAAAC,EAAQ,WACR,KAAAC,KACGC,CACL,EACAC,IACG,CACH,MAAMC,EAAS,OAAOP,GAAQ,SACxBQ,EAAYZ,EAAuBC,CAAW,EACpD,OACEE,EAAA,cAACN,GACC,IAAKa,EACL,UAAWE,EACX,OAAQD,EACR,YAAaN,EACb,YAAaJ,EACb,MAAOM,EACN,GAAGE,CAEJN,EAAAA,EAAA,cAACU,EAAA,CACC,UAAWD,EACX,IAAKD,EAASP,EAAM,OACpB,KAAMI,GAAQ,QAGZL,EAAAA,EAAM,SAAS,QAAQG,CAAQ,EAAE,IAAKQ,GAChCX,EAAM,eAAeW,CAAK,EACrBX,EAAM,aAAaW,EAAO,CAAE,GAAGA,EAAM,MAAO,MAAAP,CAAM,CAAC,EAErDO,CACR,CAEL,CACF,CAEJ,CACF"}
+{"version":3,"file":"ToggleGroupRoot.js","sources":["../../../src/components/toggle-group/ToggleGroupRoot.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Flex } from '~/components/flex'\nimport { styled } from '~/styled'\nimport { ToggleGroup } from '~/utilities/radix-overrides/toggle-group'\n\ntype RootType = {\n  orientation?: 'horizontal' | 'vertical'\n  isFullWidth?: boolean\n}\n\nexport const StyledRoot = styled(ToggleGroup.Root, {\n  base: ['w-fit'],\n  variants: {\n    isFullWidth: {\n      true: [\n        '**:data-radix-collection-item:basis-0',\n        '**:data-radix-collection-item:grow',\n        'w-full'\n      ],\n      false: ['w-auto']\n    },\n    hasGap: {\n      true: ['**:data-radix-collection-item:rounded-md'],\n      false: [\n        '**:data-radix-collection-item:not-last:before:absolute',\n        \"**:data-radix-collection-item:not-last:before:content-['']\",\n        '**:data-radix-collection-item:relative',\n        'rounded-md'\n      ]\n    },\n    direction: {\n      column: [],\n      row: []\n    },\n    theme: {\n      standard: [],\n      modern: ['bg-grey-200']\n    }\n  },\n  compoundVariants: [\n    {\n      hasGap: false,\n      direction: 'row',\n      theme: 'standard',\n      class: [\n        '**:data-radix-collection-item:first:rounded-l-md',\n        '**:data-radix-collection-item:last:rounded-r-md',\n        '**:data-radix-collection-item:not-first:border-l-transparent',\n        '**:data-radix-collection-item:not-last:before:h-[calc(100%+2px)]',\n        '**:data-radix-collection-item:not-last:before:right-0',\n        '**:data-radix-collection-item:not-last:before:-top-px',\n        '**:data-radix-collection-item:not-last:before:translate-x-3/2',\n        '**:data-radix-collection-item:not-last:before:w-px',\n        '**:data-radix-collection-item:not-last:border-r-transparent',\n        '**:data-radix-collection-item:rounded-none'\n      ]\n    },\n    {\n      hasGap: false,\n      direction: 'column',\n      theme: 'standard',\n      class: [\n        '**:data-radix-collection-item:first:rounded-t-sm',\n        '**:data-radix-collection-item:last:rounded-b-sm',\n        '**:data-radix-collection-item:not-first:border-t-transparent',\n        '**:data-radix-collection-item:not-last:before:bottom-0',\n        '**:data-radix-collection-item:not-last:before:h-px',\n        '**:data-radix-collection-item:not-last:before:-left-px',\n        '**:data-radix-collection-item:not-last:before:translate-y-3/2',\n        '**:data-radix-collection-item:not-last:before:w-[calc(100%+2px)]',\n        '**:data-radix-collection-item:not-last:border-b-transparent'\n      ]\n    },\n    {\n      hasGap: false,\n      theme: 'modern',\n      class: []\n    },\n    {\n      hasGap: false,\n      theme: 'standard',\n      class: [\n        '**:data-radix-collection-item:bg-transparent',\n        '**:data-radix-collection-item:rounded-none',\n        'bg-white'\n      ]\n    }\n  ]\n})\n\nconst orientationToDirection = (orientation) =>\n  orientation === 'horizontal' ? 'row' : 'column'\n\nexport const ToggleGroupRoot: React.ForwardRefExoticComponent<\n  Pick<React.ComponentProps<typeof Flex>, 'gap' | 'wrap'> &\n    React.ComponentProps<typeof StyledRoot> &\n    RootType\n> = React.forwardRef(\n  (\n    {\n      orientation = 'horizontal',\n      gap,\n      isFullWidth,\n      children,\n      theme = 'standard',\n      wrap,\n      ...rest\n    },\n    ref\n  ) => {\n    const hasGap = typeof gap === 'number'\n    const direction = orientationToDirection(orientation)\n\n    return (\n      <StyledRoot\n        ref={ref}\n        direction={direction}\n        hasGap={hasGap}\n        isFullWidth={isFullWidth}\n        orientation={orientation}\n        theme={theme}\n        {...rest}\n      >\n        <Flex\n          direction={direction}\n          gap={hasGap ? gap : undefined}\n          wrap={wrap || 'nowrap'}\n        >\n          {\n            React.Children.toArray(children).map((child) => {\n              if (React.isValidElement(child)) {\n                return React.cloneElement(child, { ...child.props, theme })\n              }\n              return child\n            }) as React.ReactElement[]\n          }\n        </Flex>\n      </StyledRoot>\n    )\n  }\n)\n"],"names":["StyledRoot","styled","ToggleGroup","orientationToDirection","orientation","ToggleGroupRoot","React","gap","isFullWidth","children","theme","wrap","rest","ref","hasGap","direction","Flex","child"],"mappings":"4LAWa,MAAAA,EAAaC,EAAOC,EAAY,KAAM,CACjD,KAAM,CAAC,OAAO,EACd,SAAU,CACR,YAAa,CACX,KAAM,CACJ,wCACA,qCACA,QACF,EACA,MAAO,CAAC,QAAQ,CAClB,EACA,OAAQ,CACN,KAAM,CAAC,0CAA0C,EACjD,MAAO,CACL,yDACA,6DACA,yCACA,YACF,CACF,EACA,UAAW,CACT,OAAQ,CAAC,EACT,IAAK,CAAA,CACP,EACA,MAAO,CACL,SAAU,CAAC,EACX,OAAQ,CAAC,aAAa,CACxB,CACF,EACA,iBAAkB,CAChB,CACE,OAAQ,GACR,UAAW,MACX,MAAO,WACP,MAAO,CACL,mDACA,kDACA,+DACA,mEACA,wDACA,wDACA,gEACA,qDACA,8DACA,4CACF,CACF,EACA,CACE,OAAQ,GACR,UAAW,SACX,MAAO,WACP,MAAO,CACL,mDACA,kDACA,+DACA,yDACA,qDACA,yDACA,gEACA,mEACA,6DACF,CACF,EACA,CACE,OAAQ,GACR,MAAO,SACP,MAAO,EACT,EACA,CACE,OAAQ,GACR,MAAO,WACP,MAAO,CACL,+CACA,6CACA,UACF,CACF,CACF,CACF,CAAC,EAEKC,EAA0BC,GAC9BA,IAAgB,aAAe,MAAQ,SAE5BC,EAITC,EAAM,WACR,CACE,CACE,YAAAF,EAAc,aACd,IAAAG,EACA,YAAAC,EACA,SAAAC,EACA,MAAAC,EAAQ,WACR,KAAAC,EACA,GAAGC,CACL,EACAC,IACG,CACH,MAAMC,EAAS,OAAOP,GAAQ,SACxBQ,EAAYZ,EAAuBC,CAAW,EAEpD,OACEE,EAAA,cAACN,EACC,CAAA,IAAKa,EACL,UAAWE,EACX,OAAQD,EACR,YAAaN,EACb,YAAaJ,EACb,MAAOM,EACN,GAAGE,CAAAA,EAEJN,EAAA,cAACU,EAAA,CACC,UAAWD,EACX,IAAKD,EAASP,EAAM,OACpB,KAAMI,GAAQ,QAAA,EAGZL,EAAM,SAAS,QAAQG,CAAQ,EAAE,IAAKQ,GAChCX,EAAM,eAAeW,CAAK,EACrBX,EAAM,aAAaW,EAAO,CAAE,GAAGA,EAAM,MAAO,MAAAP,CAAM,CAAC,EAErDO,CACR,CAEL,CACF,CAEJ,CACF"}