@atom-learning/components 2.37.0 → 2.38.0

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

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

package/dist/components/text/Text.js

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

package/dist/components/toast/Toast.js

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

package/dist/components/toast/ToastProvider.js

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

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

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

package/dist/components/tooltip/TooltipContent.js

@@ -1,2 +1,2 @@
-import{Content as m,Arrow as l}from"@radix-ui/react-tooltip";import*as t from"react";import{TOOLTIP_Z_INDEX as r}from"../../constants/zIndices.js";import{styled as a}from"../../stitches.js";import{slideDownAndFade as s,slideLeftAndFade as p,slideUpAndFade as f,slideRightAndFade as c}from"../../utilities/style/keyframe-animations.js";const h=a(m,{backgroundColor:"$tonal500",borderRadius:"$0",boxShadow:"$0",color:"white",fontFamily:"$body",fontSize:"$sm",lineHeight:1.5,whiteSpace:"normal",px:"$3",py:"$2",zIndex:r,"@allowMotion":{animationDuration:"75ms",animationTimingFunction:"cubic-bezier(0.16, 1, 0.3, 1)",willChange:"transform, opacity",'&[data-state="delayed-open"]':{'&[data-side="top"]':{animationName:s},'&[data-side="right"]':{animationName:p},'&[data-side="bottom"]':{animationName:f},'&[data-side="left"]':{animationName:c}}},variants:{size:{sm:{maxWidth:"100px"},md:{maxWidth:"250px"},lg:{maxWidth:"400px"}}}}),x=a(l,{fill:"$tonal500",'[data-align="end"] &':{mr:"$2"},'[data-align="start"] &':{ml:"$2"}}),$=({children:i,side:e="top",sideOffset:o=4,size:n="md",...d})=>t.createElement(h,{side:e,sideOffset:o,size:n,...d},i,t.createElement(x,null));export{$ as TooltipContent};
+import{Content as m,Arrow as l}from"@radix-ui/react-tooltip";import*as a from"react";import{TOOLTIP_Z_INDEX as r}from"../../constants/zIndices.js";import{styled as t}from"../../stitches.js";import{slideDownAndFade as s,slideLeftAndFade as p,slideUpAndFade as f,slideRightAndFade as c}from"../../utilities/style/keyframe-animations.js";const h=t(m,{backgroundColor:"$tonal500",borderRadius:"$0",boxShadow:"$0",color:"white",fontFamily:"$body",fontSize:"$sm",lineHeight:1.5,whiteSpace:"normal",px:"$3",py:"$2",zIndex:r,"@allowMotion":{animationDuration:"75ms",animationTimingFunction:"cubic-bezier(0.16, 1, 0.3, 1)",willChange:"transform, opacity",'&[data-state="delayed-open"]':{'&[data-side="top"]':{animationName:s},'&[data-side="right"]':{animationName:p},'&[data-side="bottom"]':{animationName:f},'&[data-side="left"]':{animationName:c}}},variants:{size:{sm:{maxWidth:"100px"},md:{maxWidth:"250px"},lg:{maxWidth:"400px"}}}}),x=t(l,{fill:"$tonal500",'[data-align="end"] &':{mr:"$2"},'[data-align="start"] &':{ml:"$2"}}),$=({children:i,side:e="top",sideOffset:o=4,size:n="md",...d})=>a.createElement(h,{side:e,sideOffset:o,size:n,...d},i,a.createElement(x,null));export{$ as TooltipContent};
 //# sourceMappingURL=TooltipContent.js.map

package/dist/components/video/Video.js

@@ -1,2 +1,2 @@
-import*as e from"react";import m from"react-player/vimeo";import{Box as p}from"../box/Box.js";import{styled as a}from"../../stitches.js";import{CSSWrapper as l}from"../../utilities/css-wrapper/CSSWrapper.js";const f=a(m,{}),o=e.forwardRef(({id:t,ratio:r=9/16,css:i,...s},d)=>e.createElement(l,{css:i},e.createElement(p,{css:{borderRadius:"$0",position:"relative",paddingTop:`${r*100}%`,overflow:"hidden",height:0,width:"100%"}},e.createElement(f,{...s,role:"figure",url:`https://player.vimeo.com/video/${t}`,height:"100%",width:"100%",css:{position:"absolute",top:0,left:0},ref:d}))));o.displayName="Video";export{o as Video};
+import*as e from"react";import m from"react-player/vimeo";import{Box as p}from"../box/Box.js";import{styled as a}from"../../stitches.js";import{CSSWrapper as l}from"../../utilities/css-wrapper/CSSWrapper.js";const f=a(m,{}),o=e.forwardRef(({id:r,ratio:t=9/16,css:i,...s},d)=>e.createElement(l,{css:i},e.createElement(p,{css:{borderRadius:"$0",position:"relative",paddingTop:`${t*100}%`,overflow:"hidden",height:0,width:"100%"}},e.createElement(f,{...s,role:"figure",url:`https://player.vimeo.com/video/${r}`,height:"100%",width:"100%",css:{position:"absolute",top:0,left:0},ref:d}))));o.displayName="Video";export{o as Video};
 //# sourceMappingURL=Video.js.map

package/dist/experiments/color-scheme/ColorScheme.js

@@ -1,2 +1,2 @@
-import*as o from"react";import{styled as f,colorSchemes as e}from"./stitches.colorscheme.config.js";import{Slot as d}from"@radix-ui/react-slot";const p=f("div"),t=o.forwardRef(({base:r="",accent:a="",interactive:c="",className:m,asChild:s=!1,...i},l)=>{const n=[m,e[`interactive-${c}`],e[`accent-${a}`],e[`base-${r}`]].filter(Boolean).join(" ");return o.createElement(s?d:p,{ref:l,className:n,...i})});t.displayName="ColorScheme";export{t as ColorScheme};
+import*as o from"react";import{styled as f,colorSchemes as e}from"./stitches.colorscheme.config.js";import{Slot as d}from"@radix-ui/react-slot";const p=f("div"),r=o.forwardRef(({base:t="",accent:a="",interactive:c="",className:m,asChild:s=!1,...i},l)=>{const n=[m,e[`interactive-${c}`],e[`accent-${a}`],e[`base-${t}`]].filter(Boolean).join(" ");return o.createElement(s?d:p,{ref:l,className:n,...i})});r.displayName="ColorScheme";export{r as ColorScheme};
 //# sourceMappingURL=ColorScheme.js.map