@atom-learning/components 2.33.0 → 2.35.0

package/dist/components/sidedrawer/SidedrawerContent.d.ts

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

package/dist/components/sidedrawer/SidedrawerContent.js

@@ -1 +1,2 @@
 import{Content as a,Portal as i}from"@radix-ui/react-dialog";import t from"react";import{MAX_Z_INDEX as r}from"../../constants/zIndices.js";import{styled as n}from"../../stitches.js";import{SidedrawerOverlay as d}from"./SidedrawerOverlay.js";import{slideInLeft as l,slideOutLeft as m}from"../../utilities/style/keyframe-animations.js";const s=n(a,{bg:"white",boxShadow:"$2",display:"flex",flexDirection:"column",position:"fixed",top:0,left:0,height:"100%",maxWidth:"304px",width:"100%",zIndex:r,"@allowMotion":{'&[data-state="open"]':{animation:`${l} 250ms ease-out`},'&[data-state="closed"]':{animation:`${m} 250ms ease-out`}}}),f=({children:e,...o})=>t.createElement(i,null,t.createElement(d,{"data-testid":"sidedrawer_overlay"}),t.createElement(s,{role:"navigation",...o},e));export{f as SidedrawerContent};
+//# sourceMappingURL=SidedrawerContent.js.map

package/dist/components/sidedrawer/SidedrawerContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidedrawerContent.js","sources":["../../../src/components/sidedrawer/SidedrawerContent.tsx"],"sourcesContent":["import { Content, Portal } from '@radix-ui/react-dialog'\nimport React from 'react'\n\nimport { MAX_Z_INDEX } from '~/constants/zIndices'\nimport { styled } from '~/stitches'\nimport { slideInLeft, slideOutLeft } from '~/utilities'\n\nimport { SidedrawerOverlay } from './SidedrawerOverlay'\n\nconst StyledContent = styled(Content, {\n  bg: 'white',\n  boxShadow: '$2',\n  display: 'flex',\n  flexDirection: 'column',\n  position: 'fixed',\n  top: 0,\n  left: 0,\n  height: '100%',\n  maxWidth: '304px',\n  width: '100%',\n  zIndex: MAX_Z_INDEX,\n  '@allowMotion': {\n    '&[data-state=\"open\"]': {\n      animation: `${slideInLeft} 250ms ease-out`\n    },\n    '&[data-state=\"closed\"]': {\n      animation: `${slideOutLeft} 250ms ease-out`\n    }\n  }\n})\n\nexport const SidedrawerContent: React.FC<\n  React.ComponentProps<typeof StyledContent>\n> = ({ children, ...remainingProps }) => (\n  <Portal>\n    <SidedrawerOverlay data-testid=\"sidedrawer_overlay\" />\n    <StyledContent role=\"navigation\" {...remainingProps}>\n      {children}\n    </StyledContent>\n  </Portal>\n)\n"],"names":["StyledContent","styled","Content","MAX_Z_INDEX","slideInLeft","slideOutLeft","SidedrawerContent","children","remainingProps","React","Portal","SidedrawerOverlay"],"mappings":"+UASA,MAAMA,EAAgBC,EAAOC,EAAS,CACpC,GAAI,QACJ,UAAW,KACX,QAAS,OACT,cAAe,SACf,SAAU,QACV,IAAK,EACL,KAAM,EACN,OAAQ,OACR,SAAU,QACV,MAAO,OACP,OAAQC,EACR,eAAgB,CACd,uBAAwB,CACtB,UAAW,GAAGC,kBAChB,EACA,yBAA0B,CACxB,UAAW,GAAGC,kBAChB,CACF,CACF,CAAC,EAEYC,EAET,CAAC,CAAE,SAAAC,KAAaC,CAAe,IACjCC,EAAA,cAACC,EAAA,KACCD,EAAA,cAACE,EAAA,CAAkB,cAAY,qBAAqB,EACpDF,EAAA,cAACT,EAAA,CAAc,KAAK,aAAc,GAAGQ,CAClCD,EAAAA,CACH,CACF"}

package/dist/components/sidedrawer/SidedrawerFooter.d.ts

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

package/dist/components/sidedrawer/SidedrawerFooter.js

@@ -1 +1,2 @@
 import{styled as o}from"../../stitches.js";const t=o("footer",{alignItems:"center",borderTop:"1px solid $tonal100",bottom:0,boxShadow:"$3",display:"flex",height:"$6",justifyContent:"center",p:"$3",width:"100%"});export{t as SidedrawerFooter};
+//# sourceMappingURL=SidedrawerFooter.js.map

package/dist/components/sidedrawer/SidedrawerFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidedrawerFooter.js","sources":["../../../src/components/sidedrawer/SidedrawerFooter.tsx"],"sourcesContent":["import { styled } from '~/stitches'\n\nexport const SidedrawerFooter = styled('footer', {\n  alignItems: 'center',\n  borderTop: '1px solid $tonal100',\n  bottom: 0,\n  boxShadow: '$3',\n  display: 'flex',\n  height: '$6',\n  justifyContent: 'center',\n  p: '$3',\n  width: '100%'\n})\n"],"names":["SidedrawerFooter","styled"],"mappings":"2CAEa,MAAAA,EAAmBC,EAAO,SAAU,CAC/C,WAAY,SACZ,UAAW,sBACX,OAAQ,EACR,UAAW,KACX,QAAS,OACT,OAAQ,KACR,eAAgB,SAChB,EAAG,KACH,MAAO,MACT,CAAC"}

package/dist/components/sidedrawer/SidedrawerHeader.d.ts

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

package/dist/components/sidedrawer/SidedrawerHeader.js

@@ -1 +1,2 @@
 import e from"react";import{styled as o}from"../../stitches.js";import{TopBar as d}from"../top-bar/TopBar.js";const m=o("header",{"> div":{width:"100%"}}),a=({children:r,...t})=>e.createElement(m,{...t},e.createElement(d,{css:{mx:"$3"}},r));export{a as SidedrawerHeader};
+//# sourceMappingURL=SidedrawerHeader.js.map

package/dist/components/sidedrawer/SidedrawerHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidedrawerHeader.js","sources":["../../../src/components/sidedrawer/SidedrawerHeader.tsx"],"sourcesContent":["import React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { TopBar } from '../top-bar'\n\nconst StyledHeader = styled('header', {\n  '> div': {\n    width: '100%'\n  }\n})\n\nexport const SidedrawerHeader: React.FC<\n  React.ComponentProps<typeof StyledHeader>\n> = ({ children, ...remainingProps }) => (\n  <StyledHeader {...remainingProps}>\n    <TopBar\n      css={{\n        mx: '$3'\n      }}\n    >\n      {children}\n    </TopBar>\n  </StyledHeader>\n)\n"],"names":["StyledHeader","styled","SidedrawerHeader","children","remainingProps","React","TopBar"],"mappings":"8GAMA,MAAMA,EAAeC,EAAO,SAAU,CACpC,QAAS,CACP,MAAO,MACT,CACF,CAAC,EAEYC,EAET,CAAC,CAAE,SAAAC,KAAaC,CAAe,IACjCC,EAAA,cAACL,EAAA,CAAc,GAAGI,GAChBC,EAAA,cAACC,EAAA,CACC,IAAK,CACH,GAAI,IACN,CAECH,EAAAA,CACH,CACF"}

package/dist/components/sidedrawer/SidedrawerItem.js

@@ -1 +1,2 @@
 import a from"react";import{styled as c}from"../../stitches.js";import{sidedrawerItemStyles as l}from"./Sidedrawer.styles.js";const d=c("a",l),n=c("button",l),s=({active:e,children:t,disabled:m,href:r,onClick:i,...o})=>r?a.createElement(d,{active:e,href:r,onClick:i,...o},t):a.createElement(n,{active:e,disabled:m,onClick:i,...o},t);export{s as SidedrawerItem};
+//# sourceMappingURL=SidedrawerItem.js.map

package/dist/components/sidedrawer/SidedrawerItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidedrawerItem.js","sources":["../../../src/components/sidedrawer/SidedrawerItem.tsx"],"sourcesContent":["import React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { sidedrawerItemStyles } from './Sidedrawer.styles'\n\nconst StyledLink = styled('a', sidedrawerItemStyles)\nconst StyledButton = styled('button', sidedrawerItemStyles)\n\ntype SidedrawerItemProps = {\n  active?: boolean\n  disabled?: boolean\n  href?: string\n  onClick?: () => void\n}\n\nexport const SidedrawerItem: React.FC<SidedrawerItemProps> = ({\n  active,\n  children,\n  disabled,\n  href,\n  onClick,\n  ...remainingProps\n}) => {\n  if (href) {\n    return (\n      <StyledLink\n        active={active}\n        href={href}\n        onClick={onClick}\n        {...remainingProps}\n      >\n        {children}\n      </StyledLink>\n    )\n  }\n\n  return (\n    <StyledButton\n      active={active}\n      disabled={disabled}\n      onClick={onClick}\n      {...remainingProps}\n    >\n      {children}\n    </StyledButton>\n  )\n}\n"],"names":["StyledLink","styled","sidedrawerItemStyles","StyledButton","SidedrawerItem","active","children","disabled","href","onClick","remainingProps","React"],"mappings":"8HAMA,MAAMA,EAAaC,EAAO,IAAKC,CAAoB,EAC7CC,EAAeF,EAAO,SAAUC,CAAoB,EAS7CE,EAAgD,CAAC,CAC5D,OAAAC,EACA,SAAAC,EACA,SAAAC,EACA,KAAAC,EACA,QAAAC,KACGC,CACL,IACMF,EAEAG,EAAA,cAACX,EAAA,CACC,OAAQK,EACR,KAAMG,EACN,QAASC,EACR,GAAGC,CAEHJ,EAAAA,CACH,EAKFK,EAAA,cAACR,EAAA,CACC,OAAQE,EACR,SAAUE,EACV,QAASE,EACR,GAAGC,GAEHJ,CACH"}

package/dist/components/sidedrawer/SidedrawerOverlay.d.ts

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

package/dist/components/sidedrawer/SidedrawerOverlay.js

@@ -1 +1,2 @@
 import{Overlay as o}from"@radix-ui/react-dialog";import{MAX_Z_INDEX as t}from"../../constants/zIndices.js";import{styled as a}from"../../stitches.js";import{fadeIn as e,fadeOut as i}from"../../utilities/style/keyframe-animations.js";const r=a(o,{animationFillMode:"forwards",bg:"$alpha600",cursor:"pointer",height:"100vh",left:"0",position:"fixed",top:"0",width:"100vw",zIndex:t-1,"@allowMotion":{'&[data-state="open"]':{animation:`${e} 250ms ease-out`},'&[data-state="closed"]':{animation:`${i} 550ms ease-out`}}});export{r as SidedrawerOverlay};
+//# sourceMappingURL=SidedrawerOverlay.js.map

package/dist/components/sidedrawer/SidedrawerOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidedrawerOverlay.js","sources":["../../../src/components/sidedrawer/SidedrawerOverlay.tsx"],"sourcesContent":["import { Overlay } from '@radix-ui/react-dialog'\n\nimport { MAX_Z_INDEX } from '~/constants/zIndices'\nimport { styled } from '~/stitches'\nimport { fadeIn, fadeOut } from '~/utilities'\n\nexport const SidedrawerOverlay = styled(Overlay, {\n  animationFillMode: 'forwards',\n  bg: '$alpha600',\n  cursor: 'pointer',\n  height: '100vh',\n  left: '0',\n  position: 'fixed',\n  top: '0',\n  width: '100vw',\n  zIndex: MAX_Z_INDEX - 1,\n  '@allowMotion': {\n    '&[data-state=\"open\"]': {\n      animation: `${fadeIn} 250ms ease-out`\n    },\n    '&[data-state=\"closed\"]': {\n      animation: `${fadeOut} 550ms ease-out`\n    }\n  }\n})\n"],"names":["SidedrawerOverlay","styled","Overlay","MAX_Z_INDEX","fadeIn","fadeOut"],"mappings":"yOAMO,MAAMA,EAAoBC,EAAOC,EAAS,CAC/C,kBAAmB,WACnB,GAAI,YACJ,OAAQ,UACR,OAAQ,QACR,KAAM,IACN,SAAU,QACV,IAAK,IACL,MAAO,QACP,OAAQC,EAAc,EACtB,eAAgB,CACd,uBAAwB,CACtB,UAAW,GAAGC,kBAChB,EACA,yBAA0B,CACxB,UAAW,GAAGC,kBAChB,CACF,CACF,CAAC"}

package/dist/components/sidedrawer/SidedrawerTrigger.d.ts

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

package/dist/components/sidedrawer/SidedrawerTrigger.js

@@ -1 +1,2 @@
 import{Trigger as r}from"@radix-ui/react-dialog";import{styled as e}from"../../stitches.js";const o=e(r,{});export{o as SidedrawerTrigger};
+//# sourceMappingURL=SidedrawerTrigger.js.map

package/dist/components/sidedrawer/SidedrawerTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidedrawerTrigger.js","sources":["../../../src/components/sidedrawer/SidedrawerTrigger.tsx"],"sourcesContent":["import { Trigger } from '@radix-ui/react-dialog'\n\nimport { styled } from '~/stitches'\n\nexport const SidedrawerTrigger = styled(Trigger, {})\n"],"names":["SidedrawerTrigger","styled","Trigger"],"mappings":"4FAIO,MAAMA,EAAoBC,EAAOC,EAAS,CAAE,CAAA"}

package/dist/components/slider/Slider.d.ts

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

package/dist/components/slider/Slider.js

@@ -1 +1,2 @@
 import{Track as f,Root as h,Range as b,Thumb as g}from"@radix-ui/react-slider";import*as e from"react";import{styled as t}from"../../stitches.js";import{SliderSteps as v}from"./SliderSteps.js";import{SliderValue as x}from"./SliderValue.js";import{CSSWrapper as y}from"../../utilities/css-wrapper/CSSWrapper.js";const a=t(f,{borderRadius:"$round",flexGrow:1,position:"relative",'&[data-orientation="horizontal"]':{height:"$space$1"},'&[data-orientation="vertical"]':{width:"$space$1"}}),S=t(h,{alignItems:"center",display:"flex",position:"relative",touchAction:"none",userSelect:"none",cursor:"pointer",'&[data-orientation="horizontal"]':{height:"$1"},'&[data-orientation="vertical"]':{flexDirection:"column",width:"$1"},"&[data-disabled]":{cursor:"not-allowed",bg:"$tonal100"},variants:{theme:{light:{[`${a}`]:{bg:"#fff"}},tonal:{[`${a}`]:{bg:"$tonal200"}}}}}),w=t(b,{bg:"$primary",borderRadius:"$round",height:"100%",position:"absolute","&[data-disabled]":{bg:"$tonal200",cursor:"not-allowed"}}),R=t(g,{bg:"$primaryMid",borderRadius:"$round",display:"block",size:"$1","&:hover":{bg:"$primaryDark"},"&:focus":{outline:"2px solid $primaryMid",outlineOffset:"2px"},"&[data-disabled]":{bg:"$tonal200",cursor:"not-allowed"}}),o=e.forwardRef(({value:i,defaultValue:l,min:n=0,max:d=100,theme:s="tonal",css:m,children:u,...c},p)=>{const r=i||l;return e.createElement(y,{css:m},e.createElement(S,{theme:s,defaultValue:l,value:i,min:n,max:d,ref:p,...c},e.createElement(a,null,e.createElement(w,null)),(r==null?void 0:r.length)&&r.map((k,$)=>e.createElement(R,{key:`thumb${$}`}))),u)});o.Value=x,o.Steps=v,o.displayName="Slider";export{o as Slider};
+//# sourceMappingURL=Slider.js.map

package/dist/components/slider/Slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.js","sources":["../../../src/components/slider/Slider.tsx"],"sourcesContent":["import { Range, Root, Thumb, Track } from '@radix-ui/react-slider'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { CSSWrapper } from '~/utilities'\n\nimport { SliderSteps } from './SliderSteps'\nimport { SliderValue } from './SliderValue'\n\nconst StyledTrack = styled(Track, {\n  borderRadius: '$round',\n  flexGrow: 1,\n  position: 'relative',\n  '&[data-orientation=\"horizontal\"]': { height: '$space$1' },\n  '&[data-orientation=\"vertical\"]': { width: '$space$1' }\n})\n\nconst StyledSlider = styled(Root, {\n  alignItems: 'center',\n  display: 'flex',\n  position: 'relative',\n  touchAction: 'none',\n  userSelect: 'none',\n  cursor: 'pointer',\n  '&[data-orientation=\"horizontal\"]': {\n    height: '$1'\n  },\n  '&[data-orientation=\"vertical\"]': {\n    flexDirection: 'column',\n    width: '$1'\n  },\n  '&[data-disabled]': { cursor: 'not-allowed', bg: '$tonal100' },\n  variants: {\n    theme: {\n      light: {\n        [`${StyledTrack}`]: { bg: '#fff' }\n      },\n      tonal: {\n        [`${StyledTrack}`]: { bg: '$tonal200' }\n      }\n    }\n  }\n})\n\nconst StyledRange = styled(Range, {\n  bg: '$primary',\n  borderRadius: '$round',\n  height: '100%',\n  position: 'absolute',\n  '&[data-disabled]': { bg: '$tonal200', cursor: 'not-allowed' }\n})\n\nconst StyledThumb = styled(Thumb, {\n  bg: '$primaryMid',\n  borderRadius: '$round',\n  display: 'block',\n  size: '$1',\n  '&:hover': {\n    bg: '$primaryDark'\n  },\n  '&:focus': {\n    outline: '2px solid $primaryMid',\n    outlineOffset: '2px'\n  },\n  '&[data-disabled]': { bg: '$tonal200', cursor: 'not-allowed' }\n})\n\nexport type SliderProps = React.ComponentProps<typeof StyledSlider>\n\ntype SliderType = React.ForwardRefExoticComponent<SliderProps> & {\n  Value: typeof SliderValue\n  Steps: typeof SliderSteps\n}\n\nexport const Slider: SliderType = React.forwardRef(\n  (\n    {\n      value,\n      defaultValue,\n      min = 0,\n      max = 100,\n      theme = 'tonal',\n      css,\n      children,\n      ...remainingProps\n    },\n    ref\n  ) => {\n    const values = value || defaultValue\n    return (\n      <CSSWrapper css={css}>\n        <StyledSlider\n          theme={theme}\n          defaultValue={defaultValue}\n          value={value}\n          min={min}\n          max={max}\n          ref={ref}\n          {...remainingProps}\n        >\n          <StyledTrack>\n            <StyledRange />\n          </StyledTrack>\n          {values?.length &&\n            values.map((_, i) => <StyledThumb key={`thumb${i}`} />)}\n        </StyledSlider>\n        {children}\n      </CSSWrapper>\n    )\n  }\n) as SliderType\n\nSlider.Value = SliderValue\nSlider.Steps = SliderSteps\n\nSlider.displayName = 'Slider'\n"],"names":["StyledTrack","styled","Track","StyledSlider","Root","StyledRange","Range","StyledThumb","Thumb","Slider","React","value","defaultValue","min","max","theme","css","children","remainingProps","ref","values","CSSWrapper","_","i","SliderValue","SliderSteps"],"mappings":"uTASA,MAAMA,EAAcC,EAAOC,EAAO,CAChC,aAAc,SACd,SAAU,EACV,SAAU,WACV,mCAAoC,CAAE,OAAQ,UAAW,EACzD,iCAAkC,CAAE,MAAO,UAAW,CACxD,CAAC,EAEKC,EAAeF,EAAOG,EAAM,CAChC,WAAY,SACZ,QAAS,OACT,SAAU,WACV,YAAa,OACb,WAAY,OACZ,OAAQ,UACR,mCAAoC,CAClC,OAAQ,IACV,EACA,iCAAkC,CAChC,cAAe,SACf,MAAO,IACT,EACA,mBAAoB,CAAE,OAAQ,cAAe,GAAI,WAAY,EAC7D,SAAU,CACR,MAAO,CACL,MAAO,CACL,CAAC,GAAGJ,KAAgB,CAAE,GAAI,MAAO,CACnC,EACA,MAAO,CACL,CAAC,GAAGA,KAAgB,CAAE,GAAI,WAAY,CACxC,CACF,CACF,CACF,CAAC,EAEKK,EAAcJ,EAAOK,EAAO,CAChC,GAAI,WACJ,aAAc,SACd,OAAQ,OACR,SAAU,WACV,mBAAoB,CAAE,GAAI,YAAa,OAAQ,aAAc,CAC/D,CAAC,EAEKC,EAAcN,EAAOO,EAAO,CAChC,GAAI,cACJ,aAAc,SACd,QAAS,QACT,KAAM,KACN,UAAW,CACT,GAAI,cACN,EACA,UAAW,CACT,QAAS,wBACT,cAAe,KACjB,EACA,mBAAoB,CAAE,GAAI,YAAa,OAAQ,aAAc,CAC/D,CAAC,EASYC,EAAqBC,EAAM,WACtC,CACE,CACE,MAAAC,EACA,aAAAC,EACA,IAAAC,EAAM,EACN,IAAAC,EAAM,IACN,MAAAC,EAAQ,QACR,IAAAC,EACA,SAAAC,KACGC,CACL,EACAC,IACG,CACH,MAAMC,EAAST,GAASC,EACxB,OACEF,EAAA,cAACW,EAAA,CAAW,IAAKL,CACfN,EAAAA,EAAA,cAACP,EAAA,CACC,MAAOY,EACP,aAAcH,EACd,MAAOD,EACP,IAAKE,EACL,IAAKC,EACL,IAAKK,EACJ,GAAGD,CAEJR,EAAAA,EAAA,cAACV,EAAA,KACCU,EAAA,cAACL,EAAA,IAAY,CACf,GACCe,GAAA,KAAA,OAAAA,EAAQ,SACPA,EAAO,IAAI,CAACE,EAAGC,IAAMb,EAAA,cAACH,EAAA,CAAY,IAAK,QAAQgB,GAAK,CAAA,CAAE,CAC1D,EACCN,CACH,CAEJ,CACF,EAEAR,EAAO,MAAQe,EACff,EAAO,MAAQgB,EAEfhB,EAAO,YAAc"}

package/dist/components/slider/SliderSteps.js

@@ -1 +1,2 @@
 import*as a from"react";import{styled as n}from"../../stitches.js";import{Text as r}from"../text/Text.js";const i=n("div",{height:"$space$3",mt:"$3",position:"relative",width:"100%"}),s=(l,t,o)=>(l-t)/(o-t)*100,m=(l,t,o)=>{const e=s(l,t,o);return e<=10?0:e>=90?100:50},p=({min:l,max:t,steps:o=[]})=>o.length===0?null:a.createElement(i,null,o.map(e=>a.createElement(r,{as:"span",key:e.value,css:{position:"absolute",color:"$tonal300"},style:{left:`${s(e.value,l,t)}%`,transform:`translateX(-${m(e.value,l,t)}%)`}},e.label)));export{p as SliderSteps};
+//# sourceMappingURL=SliderSteps.js.map

package/dist/components/slider/SliderSteps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderSteps.js","sources":["../../../src/components/slider/SliderSteps.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { Text } from '../text'\n\nexport type SliderStepsType = {\n  steps?: { label: string; value: number }[]\n}\n\ntype SliderStepsProps = {\n  min: number\n  max: number\n} & SliderStepsType\n\nconst SliderStepsContainer = styled('div', {\n  height: '$space$3',\n  mt: '$3',\n  position: 'relative',\n  width: '100%'\n})\n\nconst getPercentValue = (value: number, min: number, max: number): number => {\n  return ((value - min) / (max - min)) * 100\n}\n\nconst getTransformValue = (value: number, min: number, max: number): number => {\n  const percentage = getPercentValue(value, min, max)\n\n  if (percentage <= 10) return 0\n  if (percentage >= 90) return 100\n  return 50\n}\n\nexport const SliderSteps: React.FC<SliderStepsProps> = ({\n  min,\n  max,\n  steps = []\n}) => {\n  if (steps.length === 0) return null\n\n  return (\n    <SliderStepsContainer>\n      {steps.map((step) => (\n        <Text\n          as=\"span\"\n          key={step.value}\n          css={{\n            position: 'absolute',\n            color: '$tonal300'\n          }}\n          style={{\n            left: `${getPercentValue(step.value, min, max)}%`,\n            transform: `translateX(-${getTransformValue(\n              step.value,\n              min,\n              max\n            )}%)`\n          }}\n        >\n          {step.label}\n        </Text>\n      ))}\n    </SliderStepsContainer>\n  )\n}\n"],"names":["SliderStepsContainer","styled","getPercentValue","value","min","max","getTransformValue","percentage","SliderSteps","steps","React","step","Text"],"mappings":"0GAeA,MAAMA,EAAuBC,EAAO,MAAO,CACzC,OAAQ,WACR,GAAI,KACJ,SAAU,WACV,MAAO,MACT,CAAC,EAEKC,EAAkB,CAACC,EAAeC,EAAaC,KAC1CF,EAAQC,IAAQC,EAAMD,GAAQ,IAGnCE,EAAoB,CAACH,EAAeC,EAAaC,IAAwB,CAC7E,MAAME,EAAaL,EAAgBC,EAAOC,EAAKC,CAAG,EAElD,OAAIE,GAAc,GAAW,EACzBA,GAAc,GAAW,IACtB,EACT,EAEaC,EAA0C,CAAC,CACtD,IAAAJ,EACA,IAAAC,EACA,MAAAI,EAAQ,CACV,CAAA,IACMA,EAAM,SAAW,EAAU,KAG7BC,EAAA,cAACV,EAAA,KACES,EAAM,IAAKE,GACVD,EAAA,cAACE,EAAA,CACC,GAAG,OACH,IAAKD,EAAK,MACV,IAAK,CACH,SAAU,WACV,MAAO,WACT,EACA,MAAO,CACL,KAAM,GAAGT,EAAgBS,EAAK,MAAOP,EAAKC,CAAG,KAC7C,UAAW,eAAeC,EACxBK,EAAK,MACLP,EACAC,CACF,KACF,CAECM,EAAAA,EAAK,KACR,CACD,CACH"}

package/dist/components/slider/SliderValue.js

@@ -1 +1,2 @@
 import*as r from"react";import{Text as l}from"../text/Text.js";const a=({value:t=[],outputLabel:e=o=>`Current value is ${o}`})=>r.createElement(l,{css:{mt:"$4",color:"$tonal300",width:"100%"}},e(t.length===1?t[0]:t));export{a as SliderValue};
+//# sourceMappingURL=SliderValue.js.map

package/dist/components/slider/SliderValue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderValue.js","sources":["../../../src/components/slider/SliderValue.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Text } from '../text'\n\nexport type SliderValueType = {\n  outputLabel?: (value: number | number[]) => string\n}\n\ntype SliderValueProps = SliderValueType & {\n  value?: number[]\n}\n\nexport const SliderValue: React.FC<SliderValueProps> = ({\n  value = [],\n  outputLabel = (value) => `Current value is ${value}`\n}) => {\n  return (\n    <Text css={{ mt: '$4', color: '$tonal300', width: '100%' }}>\n      {outputLabel(value.length === 1 ? value[0] : value)}\n    </Text>\n  )\n}\n"],"names":["SliderValue","value","outputLabel","React","Text"],"mappings":"qEAYaA,EAA0C,CAAC,CACtD,MAAAC,EAAQ,CAAC,EACT,YAAAC,EAAeD,GAAU,oBAAoBA,GAC/C,IAEIE,EAAA,cAACC,EAAA,CAAK,IAAK,CAAE,GAAI,KAAM,MAAO,YAAa,MAAO,MAAO,CAAA,EACtDF,EAAYD,EAAM,SAAW,EAAIA,EAAM,GAAKA,CAAK,CACpD"}

package/dist/components/slider-field/SliderField.js

@@ -1 +1,2 @@
 import e from"react";import{useFormContext as b,useController as g}from"react-hook-form";import{FieldWrapper as C}from"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import{Slider as t}from"../slider/Slider.js";const u=({css:i,label:s,name:a,defaultValue:d,value:l,validation:f,outputLabel:p,min:r=0,max:n=100,steps:c=[],...v})=>{const{control:x}=b(),{field:{ref:E,onChange:m,value:o,name:S}}=g({name:a,control:x,rules:f,defaultValue:d});return e.useEffect(()=>{l!=null&&l.length&&m(l)},[JSON.stringify(l)]),e.createElement(C,{css:i,fieldId:a,label:s},e.createElement(t,{ref:E,name:S,onValueChange:m,value:o,min:r,max:n,...v},e.createElement(t.Steps,{min:r,max:n,steps:c}),e.createElement(t.Value,{value:o,outputLabel:p})))};u.displayName="SliderField";export{u as SliderField};
+//# sourceMappingURL=SliderField.js.map

package/dist/components/slider-field/SliderField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderField.js","sources":["../../../src/components/slider-field/SliderField.tsx"],"sourcesContent":["import React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport {\n  FieldElementWrapperProps,\n  FieldWrapper\n} from '~/components/field-wrapper'\nimport { Slider, SliderProps } from '~/components/slider'\nimport { SliderStepsType } from '~/components/slider/SliderSteps'\n\nimport { SliderValueType } from '../slider/SliderValue'\n\ntype SliderFieldProps = SliderProps &\n  SliderStepsType &\n  SliderValueType &\n  FieldElementWrapperProps\n\nexport const SliderField: React.FC<SliderFieldProps> = ({\n  css,\n  label,\n  name,\n  defaultValue,\n  value,\n  validation,\n  outputLabel,\n  min = 0,\n  max = 100,\n  steps = [],\n  ...remainingProps\n}) => {\n  const { control } = useFormContext()\n  const {\n    field: { ref, onChange, value: innerValue, name: innerName }\n  } = useController({\n    name,\n    control,\n    rules: validation,\n    defaultValue\n  })\n\n  React.useEffect(() => {\n    // Update the react-hook-form inner value to match what is passed in.\n    if (value?.length) onChange(value)\n  }, [JSON.stringify(value)])\n\n  return (\n    <FieldWrapper css={css} fieldId={name} label={label}>\n      <Slider\n        ref={ref}\n        name={innerName}\n        onValueChange={onChange}\n        value={innerValue}\n        min={min}\n        max={max}\n        {...remainingProps}\n      >\n        <Slider.Steps min={min} max={max} steps={steps} />\n\n        <Slider.Value value={innerValue} outputLabel={outputLabel} />\n      </Slider>\n    </FieldWrapper>\n  )\n}\n\nSliderField.displayName = 'SliderField'\n"],"names":["SliderField","css","label","name","defaultValue","value","validation","outputLabel","min","max","steps","remainingProps","control","useFormContext","ref","onChange","innerValue","innerName","useController","React","FieldWrapper","Slider"],"mappings":"qPAiBO,MAAMA,EAA0C,CAAC,CACtD,IAAAC,EACA,MAAAC,EACA,KAAAC,EACA,aAAAC,EACA,MAAAC,EACA,WAAAC,EACA,YAAAC,EACA,IAAAC,EAAM,EACN,IAAAC,EAAM,IACN,MAAAC,EAAQ,CAAA,KACLC,CACL,IAAM,CACJ,KAAM,CAAE,QAAAC,CAAQ,EAAIC,EAAAA,EACd,CACJ,MAAO,CAAE,IAAAC,EAAK,SAAAC,EAAU,MAAOC,EAAY,KAAMC,CAAU,CAC7D,EAAIC,EAAc,CAChB,KAAAf,EACA,QAAAS,EACA,MAAON,EACP,aAAAF,CACF,CAAC,EAED,OAAAe,EAAM,UAAU,IAAM,CAEhBd,GAAA,MAAAA,EAAO,QAAQU,EAASV,CAAK,CACnC,EAAG,CAAC,KAAK,UAAUA,CAAK,CAAC,CAAC,EAGxBc,EAAA,cAACC,EAAA,CAAa,IAAKnB,EAAK,QAASE,EAAM,MAAOD,CAC5CiB,EAAAA,EAAA,cAACE,EAAA,CACC,IAAKP,EACL,KAAMG,EACN,cAAeF,EACf,MAAOC,EACP,IAAKR,EACL,IAAKC,EACJ,GAAGE,CAAAA,EAEJQ,EAAA,cAACE,EAAO,MAAP,CAAa,IAAKb,EAAK,IAAKC,EAAK,MAAOC,EAAO,EAEhDS,EAAA,cAACE,EAAO,MAAP,CAAa,MAAOL,EAAY,YAAaT,EAAa,CAC7D,CACF,CAEJ,EAEAP,EAAY,YAAc"}

package/dist/components/stack/Stack.d.ts

@@ -5,7 +5,7 @@ declare const StyledStack: import("@stitches/react/types/styled-component").Styl
     wrap?: "wrap" | "wrap-reverse" | "no-wrap" | undefined;
     justify?: boolean | "center" | "false" | "end" | "start" | undefined;
     align?: boolean | "center" | "false" | "end" | "start" | undefined;
-    gap?: number | boolean | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "false" | undefined;
+    gap?: number | boolean | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "24" | "false" | undefined;
 }, {
     sm: string;
     md: string;
@@ -29,6 +29,42 @@ declare const StyledStack: import("@stitches/react/types/styled-component").Styl
         textPlaceholder: any;
         background: any;
         backgroundAccent: any;
+        grey100: any;
+        grey200: any;
+        grey300: any;
+        grey400: any;
+        grey500: any;
+        grey600: any;
+        grey700: any;
+        grey800: any;
+        grey900: any;
+        grey1000: any;
+        grey1100: any;
+        grey1200: any;
+        blue100: any;
+        blue200: any;
+        blue300: any;
+        blue400: any;
+        blue500: any;
+        blue600: any;
+        blue700: any;
+        blue800: any;
+        blue900: any;
+        blue1000: any;
+        blue1100: any;
+        blue1200: any;
+        purple100: any;
+        purple200: any;
+        purple300: any;
+        purple400: any;
+        purple500: any;
+        purple600: any;
+        purple700: any;
+        purple800: any;
+        purple900: any;
+        purple1000: any;
+        purple1100: any;
+        purple1200: any;
         tonal50: any;
         tonal100: any;
         tonal200: any;
@@ -86,6 +122,7 @@ declare const StyledStack: import("@stitches/react/types/styled-component").Styl
         "7": any;
         "8": any;
         "9": any;
+        "24": any;
     };
     fontSizes: {
         xs: any;

package/dist/components/stack/Stack.js

@@ -1 +1,2 @@
 import*as e from"react";import{styled as p}from"../../stitches.js";import{CSSWrapper as c}from"../../utilities/css-wrapper/CSSWrapper.js";import{createThemeVariants as m}from"../../utilities/create-theme-variants/createThemeVariants.js";const w=p("div",{display:"flex","& > *":{m:0},variants:{direction:{row:{flexDirection:"row"},"row-reverse":{flexDirection:"row-reverse"},column:{flexDirection:"column"}},wrap:{wrap:{flexWrap:"wrap"},"no-wrap":{flexWrap:"no-wrap"},"wrap-reverse":{flexWrap:"wrap-reverse"}},justify:{start:{justifyContent:"flex-start"},center:{justifyContent:"center"},end:{justifyContent:"flex-end"},false:{}},align:{start:{alignItems:"flex-start"},center:{alignItems:"center"},end:{alignItems:"flex-end"},false:{}},gap:{...m("space",{mt:"-$key",ml:"-$key","& > *":{mt:"$key",ml:"$key"}}),false:{}}}}),a=e.forwardRef(({css:n,gap:s=2,direction:r="row",wrap:i="wrap",justify:o="start",align:t,...l},f)=>e.createElement(c,{css:n},e.createElement(w,{ref:f,direction:r,gap:s,wrap:i,justify:o,align:typeof t>"u"&&r!=="column"?"center":t,...l})));a.displayName="Stack";export{a as Stack};
+//# sourceMappingURL=Stack.js.map

package/dist/components/stack/Stack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stack.js","sources":["../../../src/components/stack/Stack.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS, styled } from '~/stitches'\nimport { createThemeVariants } from '~/utilities'\nimport { CSSWrapper } from '~/utilities/css-wrapper'\n\nconst StyledStack = styled('div', {\n  display: 'flex',\n  '& > *': {\n    m: 0\n  },\n  variants: {\n    direction: {\n      row: {\n        flexDirection: 'row'\n      },\n      'row-reverse': {\n        flexDirection: 'row-reverse'\n      },\n      column: {\n        flexDirection: 'column'\n      }\n    },\n    wrap: {\n      wrap: {\n        flexWrap: 'wrap'\n      },\n      'no-wrap': {\n        flexWrap: 'no-wrap'\n      },\n      'wrap-reverse': {\n        flexWrap: 'wrap-reverse'\n      }\n    },\n    justify: {\n      start: { justifyContent: 'flex-start' },\n      center: { justifyContent: 'center' },\n      end: { justifyContent: 'flex-end' },\n      false: {}\n    },\n    align: {\n      start: { alignItems: 'flex-start' },\n      center: { alignItems: 'center' },\n      end: { alignItems: 'flex-end' },\n      false: {}\n    },\n    gap: {\n      ...createThemeVariants('space', {\n        mt: '-$key',\n        ml: '-$key',\n        '& > *': {\n          mt: '$key',\n          ml: '$key'\n        }\n      }),\n      false: {}\n    }\n  }\n})\n\ntype StackPropsType = React.ComponentProps<typeof StyledStack> & {\n  css?: CSS\n  as?: any\n} // (!) `css` and `as` are both props that come from `stitches`. It would be better to figure out and export the appropriate type for them in stitches!\n\nexport const Stack: React.ForwardRefExoticComponent<StackPropsType> =\n  React.forwardRef(\n    (\n      {\n        css,\n        gap = 2,\n        direction = 'row',\n        wrap = 'wrap',\n        justify = 'start',\n        align,\n        ...remainingProps\n      },\n      ref\n    ) => {\n      return (\n        <CSSWrapper css={css}>\n          <StyledStack\n            ref={ref}\n            direction={direction}\n            gap={gap}\n            wrap={wrap}\n            justify={justify}\n            align={\n              typeof align === 'undefined' && direction !== 'column'\n                ? 'center'\n                : align\n            }\n            {...remainingProps}\n          />\n        </CSSWrapper>\n      )\n    }\n  )\n\nStack.displayName = 'Stack'\n"],"names":["StyledStack","styled","createThemeVariants","Stack","React","css","gap","direction","wrap","justify","align","remainingProps","ref","CSSWrapper"],"mappings":"6OAMA,MAAMA,EAAcC,EAAO,MAAO,CAChC,QAAS,OACT,QAAS,CACP,EAAG,CACL,EACA,SAAU,CACR,UAAW,CACT,IAAK,CACH,cAAe,KACjB,EACA,cAAe,CACb,cAAe,aACjB,EACA,OAAQ,CACN,cAAe,QACjB,CACF,EACA,KAAM,CACJ,KAAM,CACJ,SAAU,MACZ,EACA,UAAW,CACT,SAAU,SACZ,EACA,eAAgB,CACd,SAAU,cACZ,CACF,EACA,QAAS,CACP,MAAO,CAAE,eAAgB,YAAa,EACtC,OAAQ,CAAE,eAAgB,QAAS,EACnC,IAAK,CAAE,eAAgB,UAAW,EAClC,MAAO,CACT,CAAA,EACA,MAAO,CACL,MAAO,CAAE,WAAY,YAAa,EAClC,OAAQ,CAAE,WAAY,QAAS,EAC/B,IAAK,CAAE,WAAY,UAAW,EAC9B,MAAO,CACT,CAAA,EACA,IAAK,CACH,GAAGC,EAAoB,QAAS,CAC9B,GAAI,QACJ,GAAI,QACJ,QAAS,CACP,GAAI,OACJ,GAAI,MACN,CACF,CAAC,EACD,MAAO,EACT,CACF,CACF,CAAC,EAOYC,EACXC,EAAM,WACJ,CACE,CACE,IAAAC,EACA,IAAAC,EAAM,EACN,UAAAC,EAAY,MACZ,KAAAC,EAAO,OACP,QAAAC,EAAU,QACV,MAAAC,KACGC,CACL,EACAC,IAGER,EAAA,cAACS,EAAA,CAAW,IAAKR,GACfD,EAAA,cAACJ,EAAA,CACC,IAAKY,EACL,UAAWL,EACX,IAAKD,EACL,KAAME,EACN,QAASC,EACT,MACE,OAAOC,EAAU,KAAeH,IAAc,SAC1C,SACAG,EAEL,GAAGC,EACN,CACF,CAGN,EAEFR,EAAM,YAAc"}

package/dist/components/stack-content/StackContent.d.ts

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

package/dist/components/stack-content/StackContent.js

@@ -1 +1,2 @@
 import*as t from"react";import{styled as r}from"../../stitches.js";import{StyledDivider as e}from"../divider/Divider.js";import{StyledHeading as d}from"../heading/Heading.js";import{StyledImage as a}from"../image/Image.js";import{StyledList as l}from"../list/List.js";import{StyledText as c}from"../text/Text.js";const f=r("div",{"& > *":{"&:not(:first-child)":{mt:"$5"},"&:not(:last-child)":{mb:"$5"}},[`& > ${d}`]:{maxWidth:"65ch"},[`& > ${c}`]:{maxWidth:"75ch"},[`& > ${l}`]:{maxWidth:"75ch"},[`& > ${e}`]:{my:"$5"},[`& > ${a}`]:{display:"block","&:not(:first-child)":{mt:"$6"},"&:not(:last-child)":{mb:"$6"}}}),m=t.forwardRef((o,i)=>t.createElement(f,{ref:i,...o}));m.displayName="StackContent";export{m as StackContent};
+//# sourceMappingURL=StackContent.js.map

package/dist/components/stack-content/StackContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackContent.js","sources":["../../../src/components/stack-content/StackContent.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport type { CSS } from '~/stitches'\nimport { styled } from '~/stitches'\n\nimport { StyledDivider } from '../divider/Divider'\nimport { StyledHeading } from '../heading/Heading'\nimport { StyledImage } from '../image/Image'\nimport { StyledList } from '../list/List'\nimport { StyledText } from '../text/Text'\n\nconst StyledStackContent = styled('div', {\n  '& > *': {\n    '&:not(:first-child)': { mt: '$5' },\n    '&:not(:last-child)': { mb: '$5' }\n  },\n  [`& > ${StyledHeading}`]: {\n    maxWidth: '65ch'\n  },\n  [`& > ${StyledText}`]: {\n    maxWidth: '75ch'\n  },\n  [`& > ${StyledList}`]: {\n    maxWidth: '75ch'\n  },\n  [`& > ${StyledDivider}`]: {\n    my: '$5'\n  },\n  [`& > ${StyledImage}`]: {\n    display: 'block',\n    '&:not(:first-child)': { mt: '$6' },\n    '&:not(:last-child)': { mb: '$6' }\n  }\n})\n\ntype StackContentProps = React.ComponentProps<typeof StyledStackContent> & {\n  children: React.ReactNode\n  css?: CSS\n}\n\nexport const StackContent: React.ForwardRefExoticComponent<StackContentProps> =\n  React.forwardRef((props, ref) => <StyledStackContent ref={ref} {...props} />)\n\nStackContent.displayName = 'StackContent'\n"],"names":["StyledStackContent","styled","StyledHeading","StyledText","StyledList","StyledDivider","StyledImage","StackContent","React","props","ref"],"mappings":"yTAWA,MAAMA,EAAqBC,EAAO,MAAO,CACvC,QAAS,CACP,sBAAuB,CAAE,GAAI,IAAK,EAClC,qBAAsB,CAAE,GAAI,IAAK,CACnC,EACA,CAAC,OAAOC,KAAkB,CACxB,SAAU,MACZ,EACA,CAAC,OAAOC,KAAe,CACrB,SAAU,MACZ,EACA,CAAC,OAAOC,KAAe,CACrB,SAAU,MACZ,EACA,CAAC,OAAOC,KAAkB,CACxB,GAAI,IACN,EACA,CAAC,OAAOC,KAAgB,CACtB,QAAS,QACT,sBAAuB,CAAE,GAAI,IAAK,EAClC,qBAAsB,CAAE,GAAI,IAAK,CACnC,CACF,CAAC,EAOYC,EACXC,EAAM,WAAW,CAACC,EAAOC,IAAQF,EAAA,cAACR,EAAA,CAAmB,IAAKU,EAAM,GAAGD,CAAO,CAAA,CAAE,EAE9EF,EAAa,YAAc"}

package/dist/components/stepper/Stepper.js

@@ -1 +1,2 @@
 import c from"invariant";import*as r from"react";import{Box as h}from"../box/Box.js";import{StepperProvider as C}from"./stepper-context/StepperContext.js";import{StepperStepBack as f}from"./StepperStepBack.js";import{StepperStepForward as w}from"./StepperStepForward.js";import{StepperSteps as u}from"./StepperSteps.js";const e=({children:s,stepCount:t,allowSkip:i,onComplete:n,onStepChange:l,direction:a="horizontal",steps:o,hideLabels:m=!1,showCompletedIcons:d=!1,css:S})=>{c(!(t&&o),"`Stepper` should only be given one of `stepCount` or `steps`. When both are provided, `steps` will be used and `stepCount` will be ignored.");const p=(o==null?void 0:o.length)||t||0;return r.createElement(C,{stepCount:p,allowSkip:i,onComplete:n,onStepChange:t?l:void 0,direction:a,steps:o||Array(p).fill(""),hideLabels:m,showCompletedIcons:d},r.createElement(h,{"aria-label":"progress",css:{width:"100%",...S}},s))};e.StepBack=f,e.StepForward=w,e.Steps=u,e.displayName="Stepper";export{e as Stepper};
+//# sourceMappingURL=Stepper.js.map

package/dist/components/stepper/Stepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.js","sources":["../../../src/components/stepper/Stepper.tsx"],"sourcesContent":["import invariant from 'invariant'\nimport * as React from 'react'\n\nimport { Box } from '../box/Box'\nimport { StepperProvider } from './stepper-context/StepperContext'\nimport { StepperStepBack } from './StepperStepBack'\nimport { StepperStepForward } from './StepperStepForward'\nimport { StepperSteps } from './StepperSteps'\nimport { IStepperProps } from './types'\n\nexport const Stepper: React.FC<IStepperProps> & {\n  StepBack: typeof StepperStepBack\n  StepForward: typeof StepperStepForward\n  Steps: typeof StepperSteps\n} = ({\n  children,\n  stepCount,\n  allowSkip,\n  onComplete,\n  onStepChange,\n  direction = 'horizontal',\n  steps,\n  hideLabels = false,\n  showCompletedIcons = false,\n  css\n}) => {\n  invariant(\n    !(stepCount && steps),\n    '`Stepper` should only be given one of `stepCount` or `steps`. When both are provided, `steps` will be used and `stepCount` will be ignored.'\n  )\n\n  const count = steps?.length || stepCount || 0\n\n  return (\n    <StepperProvider\n      stepCount={count}\n      allowSkip={allowSkip}\n      onComplete={onComplete}\n      onStepChange={stepCount ? onStepChange : undefined}\n      direction={direction}\n      steps={steps || Array(count).fill('')}\n      hideLabels={hideLabels}\n      showCompletedIcons={showCompletedIcons}\n    >\n      <Box\n        aria-label=\"progress\"\n        css={{\n          width: '100%',\n          ...css\n        }}\n      >\n        {children}\n      </Box>\n    </StepperProvider>\n  )\n}\n\nStepper.StepBack = StepperStepBack\nStepper.StepForward = StepperStepForward\nStepper.Steps = StepperSteps\n\nStepper.displayName = 'Stepper'\n"],"names":["Stepper","children","stepCount","allowSkip","onComplete","onStepChange","direction","steps","hideLabels","showCompletedIcons","css","invariant","count","React","StepperProvider","Box","StepperStepBack","StepperStepForward","StepperSteps"],"mappings":"gUAUO,MAAMA,EAIT,CAAC,CACH,SAAAC,EACA,UAAAC,EACA,UAAAC,EACA,WAAAC,EACA,aAAAC,EACA,UAAAC,EAAY,aACZ,MAAAC,EACA,WAAAC,EAAa,GACb,mBAAAC,EAAqB,GACrB,IAAAC,CACF,IAAM,CACJC,EACE,EAAET,GAAaK,GACf,6IACF,EAEA,MAAMK,GAAQL,GAAA,KAAA,OAAAA,EAAO,SAAUL,GAAa,EAE5C,OACEW,EAAA,cAACC,EAAA,CACC,UAAWF,EACX,UAAWT,EACX,WAAYC,EACZ,aAAcF,EAAYG,EAAe,OACzC,UAAWC,EACX,MAAOC,GAAS,MAAMK,CAAK,EAAE,KAAK,EAAE,EACpC,WAAYJ,EACZ,mBAAoBC,CAEpBI,EAAAA,EAAA,cAACE,EAAA,CACC,aAAW,WACX,IAAK,CACH,MAAO,OACP,GAAGL,CACL,CAAA,EAECT,CACH,CACF,CAEJ,EAEAD,EAAQ,SAAWgB,EACnBhB,EAAQ,YAAciB,EACtBjB,EAAQ,MAAQkB,EAEhBlB,EAAQ,YAAc"}

package/dist/components/stepper/StepperStepBack.js

@@ -1 +1,2 @@
 import*as i from"react";import{Button as n}from"../button/Button.js";import{useStepper as a}from"./stepper-context/StepperContext.js";const l=({label:e,children:o,...r})=>{const{activeStep:t,goToPreviousStep:p}=a();return i.createElement(n,{size:"sm",appearance:"outline",...r,disabled:t===0,onClick:p},o||(e==null?void 0:e(t)))};export{l as StepperStepBack};
+//# sourceMappingURL=StepperStepBack.js.map

package/dist/components/stepper/StepperStepBack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepperStepBack.js","sources":["../../../src/components/stepper/StepperStepBack.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Button } from '../button'\nimport { useStepper } from './stepper-context/StepperContext'\nimport { IStepperNavigateProps } from './types'\n\nexport const StepperStepBack: React.FC<\n  IStepperNavigateProps & Omit<React.ComponentProps<typeof Button>, 'children'>\n> = ({ label, children, ...rest }) => {\n  const { activeStep, goToPreviousStep } = useStepper()\n  return (\n    <Button\n      size=\"sm\"\n      appearance=\"outline\"\n      {...rest}\n      disabled={activeStep === 0}\n      onClick={goToPreviousStep}\n    >\n      {children || label?.(activeStep)}\n    </Button>\n  )\n}\n"],"names":["StepperStepBack","label","children","rest","activeStep","goToPreviousStep","useStepper","React","Button"],"mappings":"sIAMO,MAAMA,EAET,CAAC,CAAE,MAAAC,EAAO,SAAAC,KAAaC,CAAK,IAAM,CACpC,KAAM,CAAE,WAAAC,EAAY,iBAAAC,CAAiB,EAAIC,IACzC,OACEC,EAAA,cAACC,EAAA,CACC,KAAK,KACL,WAAW,UACV,GAAGL,EACJ,SAAUC,IAAe,EACzB,QAASC,CAAAA,EAERH,IAAYD,GAAA,KAAA,OAAAA,EAAQG,CAAAA,EACvB,CAEJ"}