@atom-learning/components 2.51.0 → 2.53.0

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

@@ -157,6 +157,13 @@ declare const StyledContent: import("@stitches/react/types/styled-component").St
         "2": any;
         "3": any;
     };
+    ratios: {
+        "16-9": any;
+        "3-2": any;
+        "4-3": any;
+        "1-1": any;
+        "3-4": any;
+    };
 }, import("@stitches/react/types/config").DefaultThemeMap, {
     bg: (value: import("@stitches/react/types/css-util").WithPropertyValue<"background">) => {
         background: import("@stitches/react/types/css-util").WithPropertyValue<"background">;

package/dist/components/sidedrawer/SidedrawerContent.js

@@ -1,2 +1,2 @@
-import{Content as i,Portal as a}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"../../utilities/css-wrapper/CSSWrapper.js";import"color2k";import{slideInLeft as m,slideOutLeft as d}from"../../utilities/style/keyframe-animations.js";import{SidedrawerOverlay as l}from"./SidedrawerOverlay.js";const s=n(i,{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:`${m} 250ms ease-out`},'&[data-state="closed"]':{animation:`${d} 250ms ease-out`}}}),p=({children:e,...o})=>t.createElement(a,null,t.createElement(l,{"data-testid":"sidedrawer_overlay"}),t.createElement(s,{role:"navigation",...o},e));export{p as SidedrawerContent};
+import{Content as i,Portal as a}from"@radix-ui/react-dialog";import t from"react";import{MAX_Z_INDEX as r}from"../../constants/zIndices.js";import{styled as m}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{slideInLeft as n,slideOutLeft as d}from"../../utilities/style/keyframe-animations.js";import{SidedrawerOverlay as l}from"./SidedrawerOverlay.js";const s=m(i,{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:`${n} 250ms ease-out`},'&[data-state="closed"]':{animation:`${d} 250ms ease-out`}}}),p=({children:e,...o})=>t.createElement(a,null,t.createElement(l,{"data-testid":"sidedrawer_overlay"}),t.createElement(s,{role:"navigation",...o},e));export{p as SidedrawerContent};
 //# sourceMappingURL=SidedrawerContent.js.map

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

@@ -1 +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":"iZASA,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"}
+{"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":"kdASA,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

@@ -156,6 +156,13 @@ export declare const SidedrawerFooter: import("@stitches/react/types/styled-comp
         "2": any;
         "3": any;
     };
+    ratios: {
+        "16-9": any;
+        "3-2": any;
+        "4-3": any;
+        "1-1": any;
+        "3-4": any;
+    };
 }, import("@stitches/react/types/config").DefaultThemeMap, {
     bg: (value: import("@stitches/react/types/css-util").WithPropertyValue<"background">) => {
         background: import("@stitches/react/types/css-util").WithPropertyValue<"background">;

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

@@ -157,6 +157,13 @@ declare const StyledHeader: import("@stitches/react/types/styled-component").Sty
         "2": any;
         "3": any;
     };
+    ratios: {
+        "16-9": any;
+        "3-2": any;
+        "4-3": any;
+        "1-1": any;
+        "3-4": any;
+    };
 }, import("@stitches/react/types/config").DefaultThemeMap, {
     bg: (value: import("@stitches/react/types/css-util").WithPropertyValue<"background">) => {
         background: import("@stitches/react/types/css-util").WithPropertyValue<"background">;

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

@@ -157,6 +157,13 @@ export declare const SidedrawerOverlay: import("@stitches/react/types/styled-com
         "2": any;
         "3": any;
     };
+    ratios: {
+        "16-9": any;
+        "3-2": any;
+        "4-3": any;
+        "1-1": any;
+        "3-4": any;
+    };
 }, import("@stitches/react/types/config").DefaultThemeMap, {
     bg: (value: import("@stitches/react/types/css-util").WithPropertyValue<"background">) => {
         background: import("@stitches/react/types/css-util").WithPropertyValue<"background">;

package/dist/components/sidedrawer/SidedrawerOverlay.js

@@ -1,2 +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"../../utilities/css-wrapper/CSSWrapper.js";import"color2k";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};
+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"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";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

@@ -1 +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":"2SAMO,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"}
+{"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":"4WAMO,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

@@ -157,6 +157,13 @@ export declare const SidedrawerTrigger: import("@stitches/react/types/styled-com
         "2": any;
         "3": any;
     };
+    ratios: {
+        "16-9": any;
+        "3-2": any;
+        "4-3": any;
+        "1-1": any;
+        "3-4": any;
+    };
 }, import("@stitches/react/types/config").DefaultThemeMap, {
     bg: (value: import("@stitches/react/types/css-util").WithPropertyValue<"background">) => {
         background: import("@stitches/react/types/css-util").WithPropertyValue<"background">;

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

@@ -161,6 +161,13 @@ declare const StyledSlider: import("@stitches/react/types/styled-component").Sty
         "2": any;
         "3": any;
     };
+    ratios: {
+        "16-9": any;
+        "3-2": any;
+        "4-3": any;
+        "1-1": any;
+        "3-4": any;
+    };
 }, import("@stitches/react/types/config").DefaultThemeMap, {
     bg: (value: import("@stitches/react/types/css-util").WithPropertyValue<"background">) => {
         background: import("@stitches/react/types/css-util").WithPropertyValue<"background">;

package/dist/components/slider/Slider.js

@@ -1,2 +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{CSSWrapper as v}from"../../utilities/css-wrapper/CSSWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import{SliderSteps as x}from"./SliderSteps.js";import{SliderValue as y}from"./SliderValue.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,...p},c)=>{const r=i||l;return e.createElement(v,{css:m},e.createElement(S,{theme:s,defaultValue:l,value:i,min:n,max:d,ref:c,...p},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=y,o.Steps=x,o.displayName="Slider";export{o as Slider};
+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{CSSWrapper as v}from"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import{SliderSteps as x}from"./SliderSteps.js";import{SliderValue as y}from"./SliderValue.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:m="tonal",css:s,children:u,...p},c)=>{const r=i||l;return e.createElement(v,{css:s},e.createElement(S,{theme:m,defaultValue:l,value:i,min:n,max:d,ref:c,...p},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=y,o.Steps=x,o.displayName="Slider";export{o as Slider};
 //# sourceMappingURL=Slider.js.map

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

@@ -1 +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":"4XASA,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"}
+{"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":"6bASA,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/sortable/Handle.d.ts

@@ -166,6 +166,13 @@ export declare const StyledHandle: import("@stitches/react/types/styled-componen
             "2": any;
             "3": any;
         };
+        ratios: {
+            "16-9": any;
+            "3-2": any;
+            "4-3": any;
+            "1-1": any;
+            "3-4": any;
+        };
     }, import("@stitches/react/types/config").DefaultThemeMap, {
         bg: (value: import("@stitches/react/types/css-util").WithPropertyValue<"background">) => {
             background: import("@stitches/react/types/css-util").WithPropertyValue<"background">;
@@ -400,6 +407,13 @@ export declare const StyledHandle: import("@stitches/react/types/styled-componen
         "2": any;
         "3": any;
     };
+    ratios: {
+        "16-9": any;
+        "3-2": any;
+        "4-3": any;
+        "1-1": any;
+        "3-4": any;
+    };
 }, import("@stitches/react/types/config").DefaultThemeMap, {
     bg: (value: import("@stitches/react/types/css-util").WithPropertyValue<"background">) => {
         background: import("@stitches/react/types/css-util").WithPropertyValue<"background">;

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

@@ -164,6 +164,13 @@ declare const StyledStack: import("@stitches/react/types/styled-component").Styl
         "2": any;
         "3": any;
     };
+    ratios: {
+        "16-9": any;
+        "3-2": any;
+        "4-3": any;
+        "1-1": any;
+        "3-4": any;
+    };
 }, import("@stitches/react/types/config").DefaultThemeMap, {
     bg: (value: import("@stitches/react/types/css-util").WithPropertyValue<"background">) => {
         background: import("@stitches/react/types/css-util").WithPropertyValue<"background">;

package/dist/components/stack/Stack.js

@@ -1,2 +1,2 @@
-import*as e from"react";import{styled as f}from"../../stitches.js";import{createThemeVariants as m}from"../../utilities/create-theme-variants/createThemeVariants.js";import{CSSWrapper as c}from"../../utilities/css-wrapper/CSSWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";const w=f("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:i=2,direction:r="row",wrap:o="wrap",justify:s="start",align:t,...l},p)=>e.createElement(c,{css:n},e.createElement(w,{ref:p,direction:r,gap:i,wrap:o,justify:s,align:typeof t>"u"&&r!=="column"?"center":t,...l})));a.displayName="Stack";export{a as Stack};
+import*as e from"react";import{styled as f}from"../../stitches.js";import{createThemeVariants as m}from"../../utilities/create-theme-variants/createThemeVariants.js";import{CSSWrapper as c}from"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";const w=f("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:i=2,direction:r="row",wrap:o="wrap",justify:s="start",align:t,...l},p)=>e.createElement(c,{css:n},e.createElement(w,{ref:p,direction:r,gap:i,wrap:o,justify:s,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

@@ -1 +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":"kTAMA,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"}
+{"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":"mXAMA,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

@@ -158,6 +158,13 @@ declare const StyledStackContent: import("@stitches/react/types/styled-component
         "2": any;
         "3": any;
     };
+    ratios: {
+        "16-9": any;
+        "3-2": any;
+        "4-3": any;
+        "1-1": any;
+        "3-4": any;
+    };
 }, import("@stitches/react/types/config").DefaultThemeMap, {
     bg: (value: import("@stitches/react/types/css-util").WithPropertyValue<"background">) => {
         background: import("@stitches/react/types/css-util").WithPropertyValue<"background">;

package/dist/components/stepper/StepperStepBullet.d.ts

@@ -156,6 +156,13 @@ export declare const StepperStepBullet: import("@stitches/react/types/styled-com
         "2": any;
         "3": any;
     };
+    ratios: {
+        "16-9": any;
+        "3-2": any;
+        "4-3": any;
+        "1-1": any;
+        "3-4": any;
+    };
 }, import("@stitches/react/types/config").DefaultThemeMap, {
     bg: (value: import("@stitches/react/types/css-util").WithPropertyValue<"background">) => {
         background: import("@stitches/react/types/css-util").WithPropertyValue<"background">;
@@ -370,6 +377,13 @@ export declare const StepperStepBullet: import("@stitches/react/types/styled-com
         "2": any;
         "3": any;
     };
+    ratios: {
+        "16-9": any;
+        "3-2": any;
+        "4-3": any;
+        "1-1": any;
+        "3-4": any;
+    };
 }, import("@stitches/react/types/config").DefaultThemeMap, {
     bg: (value: import("@stitches/react/types/css-util").WithPropertyValue<"background">) => {
         background: import("@stitches/react/types/css-util").WithPropertyValue<"background">;

package/dist/components/stepper/StepperStepContainer.d.ts

@@ -156,6 +156,13 @@ export declare const StepperStepContainer: import("@stitches/react/types/styled-
         "2": any;
         "3": any;
     };
+    ratios: {
+        "16-9": any;
+        "3-2": any;
+        "4-3": any;
+        "1-1": any;
+        "3-4": any;
+    };
 }, import("@stitches/react/types/config").DefaultThemeMap, {
     bg: (value: import("@stitches/react/types/css-util").WithPropertyValue<"background">) => {
         background: import("@stitches/react/types/css-util").WithPropertyValue<"background">;
@@ -373,6 +380,13 @@ export declare const StepperStepContainer: import("@stitches/react/types/styled-
         "2": any;
         "3": any;
     };
+    ratios: {
+        "16-9": any;
+        "3-2": any;
+        "4-3": any;
+        "1-1": any;
+        "3-4": any;
+    };
 }, import("@stitches/react/types/config").DefaultThemeMap, {
     bg: (value: import("@stitches/react/types/css-util").WithPropertyValue<"background">) => {
         background: import("@stitches/react/types/css-util").WithPropertyValue<"background">;

package/dist/components/stepper/StepperStepLabel.d.ts

@@ -163,6 +163,13 @@ export declare const StepperStepLabel: import("@stitches/react/types/styled-comp
             "2": any;
             "3": any;
         };
+        ratios: {
+            "16-9": any;
+            "3-2": any;
+            "4-3": any;
+            "1-1": any;
+            "3-4": any;
+        };
     }, import("@stitches/react/types/config").DefaultThemeMap, {
         bg: (value: import("@stitches/react/types/css-util").WithPropertyValue<"background">) => {
             background: import("@stitches/react/types/css-util").WithPropertyValue<"background">;
@@ -381,6 +388,13 @@ export declare const StepperStepLabel: import("@stitches/react/types/styled-comp
         "2": any;
         "3": any;
     };
+    ratios: {
+        "16-9": any;
+        "3-2": any;
+        "4-3": any;
+        "1-1": any;
+        "3-4": any;
+    };
 }, import("@stitches/react/types/config").DefaultThemeMap, {
     bg: (value: import("@stitches/react/types/css-util").WithPropertyValue<"background">) => {
         background: import("@stitches/react/types/css-util").WithPropertyValue<"background">;

package/dist/components/switch/Switch.d.ts

@@ -158,6 +158,13 @@ declare const StyledSwitch: import("@stitches/react/types/styled-component").Sty
         "2": any;
         "3": any;
     };
+    ratios: {
+        "16-9": any;
+        "3-2": any;
+        "4-3": any;
+        "1-1": any;
+        "3-4": any;
+    };
 }, import("@stitches/react/types/config").DefaultThemeMap, {
     bg: (value: import("@stitches/react/types/css-util").WithPropertyValue<"background">) => {
         background: import("@stitches/react/types/css-util").WithPropertyValue<"background">;

package/dist/components/table/Table.d.ts

@@ -178,6 +178,13 @@ declare const StyledTable: import("@stitches/react/types/styled-component").Styl
         "2": any;
         "3": any;
     };
+    ratios: {
+        "16-9": any;
+        "3-2": any;
+        "4-3": any;
+        "1-1": any;
+        "3-4": any;
+    };
 }, import("@stitches/react/types/config").DefaultThemeMap, {
     bg: (value: import("@stitches/react/types/css-util").WithPropertyValue<"background">) => {
         background: import("@stitches/react/types/css-util").WithPropertyValue<"background">;

package/dist/components/table/TableBody.d.ts

@@ -159,6 +159,13 @@ declare const StyledTableBody: import("@stitches/react/types/styled-component").
         "2": any;
         "3": any;
     };
+    ratios: {
+        "16-9": any;
+        "3-2": any;
+        "4-3": any;
+        "1-1": any;
+        "3-4": any;
+    };
 }, import("@stitches/react/types/config").DefaultThemeMap, {
     bg: (value: import("@stitches/react/types/css-util").WithPropertyValue<"background">) => {
         background: import("@stitches/react/types/css-util").WithPropertyValue<"background">;

package/dist/components/table/TableCell.d.ts

@@ -156,6 +156,13 @@ export declare const TableCell: import("@stitches/react/types/styled-component")
         "2": any;
         "3": any;
     };
+    ratios: {
+        "16-9": any;
+        "3-2": any;
+        "4-3": any;
+        "1-1": any;
+        "3-4": any;
+    };
 }, import("@stitches/react/types/config").DefaultThemeMap, {
     bg: (value: import("@stitches/react/types/css-util").WithPropertyValue<"background">) => {
         background: import("@stitches/react/types/css-util").WithPropertyValue<"background">;

package/dist/components/table/TableFooter.d.ts

@@ -156,6 +156,13 @@ export declare const TableFooter: import("@stitches/react/types/styled-component
         "2": any;
         "3": any;
     };
+    ratios: {
+        "16-9": any;
+        "3-2": any;
+        "4-3": any;
+        "1-1": any;
+        "3-4": any;
+    };
 }, import("@stitches/react/types/config").DefaultThemeMap, {
     bg: (value: import("@stitches/react/types/css-util").WithPropertyValue<"background">) => {
         background: import("@stitches/react/types/css-util").WithPropertyValue<"background">;

package/dist/components/table/TableFooterCell.d.ts

@@ -156,6 +156,13 @@ export declare const TableFooterCell: import("@stitches/react/types/styled-compo
         "2": any;
         "3": any;
     };
+    ratios: {
+        "16-9": any;
+        "3-2": any;
+        "4-3": any;
+        "1-1": any;
+        "3-4": any;
+    };
 }, import("@stitches/react/types/config").DefaultThemeMap, {
     bg: (value: import("@stitches/react/types/css-util").WithPropertyValue<"background">) => {
         background: import("@stitches/react/types/css-util").WithPropertyValue<"background">;

package/dist/components/table/TableHeader.d.ts

@@ -164,6 +164,13 @@ declare const StyledTableHeader: import("@stitches/react/types/styled-component"
         "2": any;
         "3": any;
     };
+    ratios: {
+        "16-9": any;
+        "3-2": any;
+        "4-3": any;
+        "1-1": any;
+        "3-4": any;
+    };
 }, import("@stitches/react/types/config").DefaultThemeMap, {
     bg: (value: import("@stitches/react/types/css-util").WithPropertyValue<"background">) => {
         background: import("@stitches/react/types/css-util").WithPropertyValue<"background">;

package/dist/components/table/TableHeaderCell.d.ts

@@ -156,6 +156,13 @@ export declare const TableHeaderCell: import("@stitches/react/types/styled-compo
         "2": any;
         "3": any;
     };
+    ratios: {
+        "16-9": any;
+        "3-2": any;
+        "4-3": any;
+        "1-1": any;
+        "3-4": any;
+    };
 }, import("@stitches/react/types/config").DefaultThemeMap, {
     bg: (value: import("@stitches/react/types/css-util").WithPropertyValue<"background">) => {
         background: import("@stitches/react/types/css-util").WithPropertyValue<"background">;

package/dist/components/table/TableRow.d.ts

@@ -157,6 +157,13 @@ export declare const StyledRow: import("@stitches/react/types/styled-component")
         "2": any;
         "3": any;
     };
+    ratios: {
+        "16-9": any;
+        "3-2": any;
+        "4-3": any;
+        "1-1": any;
+        "3-4": any;
+    };
 }, import("@stitches/react/types/config").DefaultThemeMap, {
     bg: (value: import("@stitches/react/types/css-util").WithPropertyValue<"background">) => {
         background: import("@stitches/react/types/css-util").WithPropertyValue<"background">;
@@ -373,6 +380,13 @@ export declare const TableRow: React.ForwardRefExoticComponent<Pick<Omit<Pick<Re
             "2": any;
             "3": any;
         };
+        ratios: {
+            "16-9": any;
+            "3-2": any;
+            "4-3": any;
+            "1-1": any;
+            "3-4": any;
+        };
     }, import("@stitches/react/types/config").DefaultThemeMap, {
         bg: (value: import("@stitches/react/types/css-util").WithPropertyValue<"background">) => {
             background: import("@stitches/react/types/css-util").WithPropertyValue<"background">;

package/dist/components/tabs/Tabs.d.ts

@@ -161,6 +161,13 @@ declare const StyledRoot: import("@stitches/react/types/styled-component").Style
         "2": any;
         "3": any;
     };
+    ratios: {
+        "16-9": any;
+        "3-2": any;
+        "4-3": any;
+        "1-1": any;
+        "3-4": any;
+    };
 }, import("@stitches/react/types/config").DefaultThemeMap, {
     bg: (value: import("@stitches/react/types/css-util").WithPropertyValue<"background">) => {
         background: import("@stitches/react/types/css-util").WithPropertyValue<"background">;

package/dist/components/tabs/TabsContent.d.ts

@@ -157,6 +157,13 @@ export declare const TabsContent: import("@stitches/react/types/styled-component
         "2": any;
         "3": any;
     };
+    ratios: {
+        "16-9": any;
+        "3-2": any;
+        "4-3": any;
+        "1-1": any;
+        "3-4": any;
+    };
 }, import("@stitches/react/types/config").DefaultThemeMap, {
     bg: (value: import("@stitches/react/types/css-util").WithPropertyValue<"background">) => {
         background: import("@stitches/react/types/css-util").WithPropertyValue<"background">;

package/dist/components/tabs/TabsTrigger.d.ts

@@ -157,6 +157,13 @@ declare const StyledTabsTrigger: import("@stitches/react/types/styled-component"
         "2": any;
         "3": any;
     };
+    ratios: {
+        "16-9": any;
+        "3-2": any;
+        "4-3": any;
+        "1-1": any;
+        "3-4": any;
+    };
 }, import("@stitches/react/types/config").DefaultThemeMap, {
     bg: (value: import("@stitches/react/types/css-util").WithPropertyValue<"background">) => {
         background: import("@stitches/react/types/css-util").WithPropertyValue<"background">;

package/dist/components/tabs/TabsTrigger.js

@@ -1,2 +1,2 @@
-import{Trigger as c}from"@radix-ui/react-tabs";import*as e from"react";import{styled as t}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"color2k";import{focusVisibleStyleBlock as n}from"../../utilities/style/focus-visible-style-block.js";import"../../utilities/style/keyframe-animations.js";import{Text as l}from"../text/Text.js";const o=t("div",{position:"absolute",inset:0,height:"calc(100% + 2px)",opacity:0,bg:"$interactive1"}),s=t(c,{background:"none",border:"none",cursor:"pointer",flexShrink:0,p:"$4",userSelect:"none",borderBottom:"2px solid transparent",position:"relative",'&[data-state="active"]':{color:"$interactive1",fontWeight:600,letterSpacing:"-0.005em",borderColor:"currentColor"},"&[data-disabled]":{opacity:.3,cursor:"not-allowed"},"&:not([data-disabled])":{"&:hover, &:focus-visible":{color:"$interactive2",[`& ${o}`]:{opacity:.07}},"&:active":{color:"$interactive3"},"&:focus-visible":{...n()}}}),r=({children:i,...a})=>e.createElement(s,{...a},e.createElement(l,{size:"sm",as:"span"},i),e.createElement(o,null));r.displayName="TabsTrigger";export{r as TabsTrigger};
+import{Trigger as c}from"@radix-ui/react-tabs";import*as e from"react";import{styled as t}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{focusVisibleStyleBlock as n}from"../../utilities/style/focus-visible-style-block.js";import"../../utilities/style/keyframe-animations.js";import{Text as l}from"../text/Text.js";const o=t("div",{position:"absolute",inset:0,height:"calc(100% + 2px)",opacity:0,bg:"$interactive1"}),s=t(c,{background:"none",border:"none",cursor:"pointer",flexShrink:0,p:"$4",userSelect:"none",borderBottom:"2px solid transparent",position:"relative",'&[data-state="active"]':{color:"$interactive1",fontWeight:600,letterSpacing:"-0.005em",borderColor:"currentColor"},"&[data-disabled]":{opacity:.3,cursor:"not-allowed"},"&:not([data-disabled])":{"&:hover, &:focus-visible":{color:"$interactive2",[`& ${o}`]:{opacity:.07}},"&:active":{color:"$interactive3"},"&:focus-visible":{...n()}}}),r=({children:i,...a})=>e.createElement(s,{...a},e.createElement(l,{size:"sm",as:"span"},i),e.createElement(o,null));r.displayName="TabsTrigger";export{r as TabsTrigger};
 //# sourceMappingURL=TabsTrigger.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TabsTrigger.js","sources":["../../../src/components/tabs/TabsTrigger.tsx"],"sourcesContent":["import { Trigger } from '@radix-ui/react-tabs'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { focusVisibleStyleBlock } from '~/utilities'\n\nimport { Text } from '../text'\n\nconst StyledTabsTriggerHoverBackground = styled('div', {\n  position: 'absolute',\n  inset: 0,\n  height: 'calc(100% + 2px)',\n  opacity: 0,\n  bg: '$interactive1'\n})\n\nconst StyledTabsTrigger = styled(Trigger, {\n  background: 'none',\n  border: 'none',\n  cursor: 'pointer',\n  flexShrink: 0,\n  p: '$4',\n  userSelect: 'none',\n  borderBottom: '2px solid transparent',\n  position: 'relative',\n  '&[data-state=\"active\"]': {\n    color: '$interactive1',\n    fontWeight: 600,\n    letterSpacing: '-0.005em',\n    borderColor: 'currentColor'\n  },\n  '&[data-disabled]': {\n    opacity: 0.3,\n    cursor: 'not-allowed'\n  },\n  '&:not([data-disabled])': {\n    '&:hover, &:focus-visible': {\n      color: '$interactive2',\n      [`& ${StyledTabsTriggerHoverBackground}`]: {\n        opacity: 0.07\n      }\n    },\n    '&:active': {\n      color: '$interactive3'\n    },\n    '&:focus-visible': {\n      ...focusVisibleStyleBlock()\n    }\n  }\n})\n\ninterface TabsTriggerProps\n  extends React.ComponentProps<typeof StyledTabsTrigger> {\n  value: string\n}\n\nexport const TabsTrigger: React.FC<TabsTriggerProps> = ({\n  children,\n  ...rest\n}) => (\n  <StyledTabsTrigger {...rest}>\n    <Text size=\"sm\" as=\"span\">\n      {children}\n    </Text>\n    <StyledTabsTriggerHoverBackground />\n  </StyledTabsTrigger>\n)\n\nTabsTrigger.displayName = 'TabsTrigger'\n"],"names":["StyledTabsTriggerHoverBackground","styled","StyledTabsTrigger","Trigger","focusVisibleStyleBlock","TabsTrigger","children","rest","React","Text"],"mappings":"4WAQA,MAAMA,EAAmCC,EAAO,MAAO,CACrD,SAAU,WACV,MAAO,EACP,OAAQ,mBACR,QAAS,EACT,GAAI,eACN,CAAC,EAEKC,EAAoBD,EAAOE,EAAS,CACxC,WAAY,OACZ,OAAQ,OACR,OAAQ,UACR,WAAY,EACZ,EAAG,KACH,WAAY,OACZ,aAAc,wBACd,SAAU,WACV,yBAA0B,CACxB,MAAO,gBACP,WAAY,IACZ,cAAe,WACf,YAAa,cACf,EACA,mBAAoB,CAClB,QAAS,GACT,OAAQ,aACV,EACA,yBAA0B,CACxB,2BAA4B,CAC1B,MAAO,gBACP,CAAC,KAAKH,KAAqC,CACzC,QAAS,GACX,CACF,EACA,WAAY,CACV,MAAO,eACT,EACA,kBAAmB,CACjB,GAAGI,GACL,CACF,CACF,CAAC,EAOYC,EAA0C,CAAC,CACtD,SAAAC,KACGC,CACL,IACEC,EAAA,cAACN,EAAA,CAAmB,GAAGK,GACrBC,EAAA,cAACC,EAAA,CAAK,KAAK,KAAK,GAAG,MAAA,EAChBH,CACH,EACAE,EAAA,cAACR,EAAA,IAAiC,CACpC,EAGFK,EAAY,YAAc"}
+{"version":3,"file":"TabsTrigger.js","sources":["../../../src/components/tabs/TabsTrigger.tsx"],"sourcesContent":["import { Trigger } from '@radix-ui/react-tabs'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { focusVisibleStyleBlock } from '~/utilities'\n\nimport { Text } from '../text'\n\nconst StyledTabsTriggerHoverBackground = styled('div', {\n  position: 'absolute',\n  inset: 0,\n  height: 'calc(100% + 2px)',\n  opacity: 0,\n  bg: '$interactive1'\n})\n\nconst StyledTabsTrigger = styled(Trigger, {\n  background: 'none',\n  border: 'none',\n  cursor: 'pointer',\n  flexShrink: 0,\n  p: '$4',\n  userSelect: 'none',\n  borderBottom: '2px solid transparent',\n  position: 'relative',\n  '&[data-state=\"active\"]': {\n    color: '$interactive1',\n    fontWeight: 600,\n    letterSpacing: '-0.005em',\n    borderColor: 'currentColor'\n  },\n  '&[data-disabled]': {\n    opacity: 0.3,\n    cursor: 'not-allowed'\n  },\n  '&:not([data-disabled])': {\n    '&:hover, &:focus-visible': {\n      color: '$interactive2',\n      [`& ${StyledTabsTriggerHoverBackground}`]: {\n        opacity: 0.07\n      }\n    },\n    '&:active': {\n      color: '$interactive3'\n    },\n    '&:focus-visible': {\n      ...focusVisibleStyleBlock()\n    }\n  }\n})\n\ninterface TabsTriggerProps\n  extends React.ComponentProps<typeof StyledTabsTrigger> {\n  value: string\n}\n\nexport const TabsTrigger: React.FC<TabsTriggerProps> = ({\n  children,\n  ...rest\n}) => (\n  <StyledTabsTrigger {...rest}>\n    <Text size=\"sm\" as=\"span\">\n      {children}\n    </Text>\n    <StyledTabsTriggerHoverBackground />\n  </StyledTabsTrigger>\n)\n\nTabsTrigger.displayName = 'TabsTrigger'\n"],"names":["StyledTabsTriggerHoverBackground","styled","StyledTabsTrigger","Trigger","focusVisibleStyleBlock","TabsTrigger","children","rest","React","Text"],"mappings":"6aAQA,MAAMA,EAAmCC,EAAO,MAAO,CACrD,SAAU,WACV,MAAO,EACP,OAAQ,mBACR,QAAS,EACT,GAAI,eACN,CAAC,EAEKC,EAAoBD,EAAOE,EAAS,CACxC,WAAY,OACZ,OAAQ,OACR,OAAQ,UACR,WAAY,EACZ,EAAG,KACH,WAAY,OACZ,aAAc,wBACd,SAAU,WACV,yBAA0B,CACxB,MAAO,gBACP,WAAY,IACZ,cAAe,WACf,YAAa,cACf,EACA,mBAAoB,CAClB,QAAS,GACT,OAAQ,aACV,EACA,yBAA0B,CACxB,2BAA4B,CAC1B,MAAO,gBACP,CAAC,KAAKH,KAAqC,CACzC,QAAS,GACX,CACF,EACA,WAAY,CACV,MAAO,eACT,EACA,kBAAmB,CACjB,GAAGI,GACL,CACF,CACF,CAAC,EAOYC,EAA0C,CAAC,CACtD,SAAAC,KACGC,CACL,IACEC,EAAA,cAACN,EAAA,CAAmB,GAAGK,GACrBC,EAAA,cAACC,EAAA,CAAK,KAAK,KAAK,GAAG,MAAA,EAChBH,CACH,EACAE,EAAA,cAACR,EAAA,IAAiC,CACpC,EAGFK,EAAY,YAAc"}

package/dist/components/tabs/TabsTriggerList.d.ts

@@ -158,6 +158,13 @@ declare const StyledTriggerList: import("@stitches/react/types/styled-component"
         "2": any;
         "3": any;
     };
+    ratios: {
+        "16-9": any;
+        "3-2": any;
+        "4-3": any;
+        "1-1": any;
+        "3-4": any;
+    };
 }, import("@stitches/react/types/config").DefaultThemeMap, {
     bg: (value: import("@stitches/react/types/css-util").WithPropertyValue<"background">) => {
         background: import("@stitches/react/types/css-util").WithPropertyValue<"background">;

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

@@ -197,6 +197,13 @@ export declare const StyledText: import("@stitches/react/types/styled-component"
         "2": any;
         "3": any;
     };
+    ratios: {
+        "16-9": any;
+        "3-2": any;
+        "4-3": any;
+        "1-1": any;
+        "3-4": any;
+    };
 }, import("@stitches/react/types/config").DefaultThemeMap, {
     bg: (value: import("@stitches/react/types/css-util").WithPropertyValue<"background">) => {
         background: import("@stitches/react/types/css-util").WithPropertyValue<"background">;
@@ -218,7 +225,7 @@ export declare const StyledText: import("@stitches/react/types/styled-component"
         paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
     pl: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">; /** Allow nesting `<Text />` inside `<Text />` without forcing a new line and spacing. */
     };
     px: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
         paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;