@atom-learning/components 6.0.0-beta.5 → 6.0.0-beta.6

package/dist/components/segmented-control/SegmentedControlItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlItem.js","sources":["../../../src/components/segmented-control/SegmentedControlItem.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../stitches'\nimport { Tabs } from '../tabs'\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nconst StyledItem = styled(Tabs.Trigger, {\n  position: 'relative',\n  bg: 'transparent',\n  borderRadius: '$2',\n  p: 0,\n  zIndex: 2,\n  minWidth: '140px',\n  border: '2px solid transparent',\n  variants: {\n    theme: {\n      primary: {\n        '&[data-state=inactive]:hover': {\n          bg: '$primary300'\n        },\n        '&:focus-visible': {\n          borderColor: '$primary800'\n        }\n      },\n      marsh: {\n        '&[data-state=inactive]:hover': {\n          bg: '$marsh300'\n        },\n        '&:focus-visible': {\n          borderColor: '$marsh800'\n        }\n      }\n    },\n    size: {\n      sm: {\n        flex: 'unset',\n        p: '$4 $24',\n        gap: '$3'\n      },\n      md: {\n        flex: 1,\n        p: '$24 $4',\n        gap: '$4'\n      },\n      lg: {\n        flex: 1,\n        p: '$24 $4',\n        gap: '$4'\n      }\n    }\n  },\n  '& > div': { display: 'none' },\n  '& > span': {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center'\n  },\n  '&[data-state=active]': {\n    boxShadow: 'none',\n    border: '2px solid transparent',\n    fontWeight: 600,\n    color: '$textBold',\n    '&:focus-visible': {\n      boxShadow: 'none',\n      borderColor: '$primary800'\n    }\n  },\n  '&[data-state=inactive]': {\n    fontWeight: 400,\n    color: '$grey900'\n  },\n  '&[disabled]': {\n    opacity: 0.3\n  }\n})\n\nexport const SegmentedControlItem = React.forwardRef<\n  HTMLButtonElement,\n  Omit<React.ComponentProps<typeof StyledItem>, 'size'>\n>(({ children, ...props }, ref) => {\n  const { size, theme } = React.useContext(SegmentedControlContext)\n\n  return (\n    <StyledItem {...props} theme={theme} size={size} ref={ref}>\n      {children}\n    </StyledItem>\n  )\n})\n\nSegmentedControlItem.displayName = 'SegmentedControlItem'\n"],"names":["StyledItem","styled","Tabs","SegmentedControlItem","React","children","props","ref","size","theme","SegmentedControlContext"],"mappings":"iLAMA,MAAMA,EAAaC,EAAOC,EAAK,QAAS,CACtC,SAAU,WACV,GAAI,cACJ,aAAc,KACd,EAAG,EACH,OAAQ,EACR,SAAU,QACV,OAAQ,wBACR,SAAU,CACR,MAAO,CACL,QAAS,CACP,+BAAgC,CAC9B,GAAI,aACN,EACA,kBAAmB,CACjB,YAAa,aACf,CACF,EACA,MAAO,CACL,+BAAgC,CAC9B,GAAI,WACN,EACA,kBAAmB,CACjB,YAAa,WACf,CACF,CACF,EACA,KAAM,CACJ,GAAI,CACF,KAAM,QACN,EAAG,SACH,IAAK,IACP,EACA,GAAI,CACF,KAAM,EACN,EAAG,SACH,IAAK,IACP,EACA,GAAI,CACF,KAAM,EACN,EAAG,SACH,IAAK,IACP,CACF,CACF,EACA,UAAW,CAAE,QAAS,MAAO,EAC7B,WAAY,CACV,QAAS,OACT,cAAe,SACf,WAAY,QACd,EACA,uBAAwB,CACtB,UAAW,OACX,OAAQ,wBACR,WAAY,IACZ,MAAO,YACP,kBAAmB,CACjB,UAAW,OACX,YAAa,aACf,CACF,EACA,yBAA0B,CACxB,WAAY,IACZ,MAAO,UACT,EACA,cAAe,CACb,QAAS,EACX,CACF,CAAC,EAEYC,EAAuBC,EAAM,WAGxC,CAAC,CAAE,SAAAC,KAAaC,CAAM,EAAGC,IAAQ,CACjC,KAAM,CAAE,KAAAC,EAAM,MAAAC,CAAM,EAAIL,EAAM,WAAWM,CAAuB,EAEhE,OACEN,EAAA,cAACJ,EAAA,CAAY,GAAGM,EAAO,MAAOG,EAAO,KAAMD,EAAM,IAAKD,CACnDF,EAAAA,CACH,CAEJ,CAAC,EAEDF,EAAqB,YAAc"}
+{"version":3,"file":"SegmentedControlItem.js","sources":["../../../src/components/segmented-control/SegmentedControlItem.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Tabs } from '../tabs'\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nconst StyledItem = styled(Tabs.Trigger, {\n  base: [\n    'relative',\n    'bg-transparent',\n    'rounded-lg',\n    'p-0',\n    'z-2',\n    'min-w-35',\n    'border-2',\n    'border-transparent',\n    '[&>div]:hidden',\n    '[&>span]:flex',\n    '[&>span]:flex-col',\n    '[&>span]:items-center',\n    'data-[state=active]:border-2',\n    'data-[state=active]:border-transparent',\n    'data-[state=active]:focus-visible:border-primary-800',\n    'data-[state=active]:focus-visible:shadow-none',\n    'data-[state=active]:font-semibold',\n    'data-[state=active]:shadow-none',\n    'data-[state=active]:text-(--text-bold)',\n    'data-[state=inactive]:font-normal',\n    'data-[state=inactive]:text-grey-900',\n    'disabled:opacity-30'\n  ],\n  variants: {\n    theme: {\n      primary: [\n        'data-[state=inactive]:hover:bg-primary-300',\n        'focus-visible:border-primary-800'\n      ],\n      marsh: [\n        'data-[state=inactive]:hover:bg-marsh-300',\n        'focus-visible:border-marsh-800'\n      ]\n    },\n    size: {\n      sm: ['flex-[unset]', 'gap-3', 'px-6', 'py-4'],\n      md: ['flex-1', 'gap-4', 'px-4', 'py-6'],\n      lg: ['flex-1', 'gap-4', 'px-4', 'py-6']\n    }\n  }\n})\n\nexport const SegmentedControlItem = React.forwardRef<\n  HTMLButtonElement,\n  Omit<React.ComponentProps<typeof StyledItem>, 'size'>\n>(({ children, ...props }, ref) => {\n  const { size, theme } = React.useContext(SegmentedControlContext)\n\n  return (\n    <StyledItem {...props} theme={theme} size={size} ref={ref}>\n      {children}\n    </StyledItem>\n  )\n})\n\nSegmentedControlItem.displayName = 'SegmentedControlItem'\n"],"names":["StyledItem","styled","Tabs","SegmentedControlItem","React","children","props","ref","size","theme","SegmentedControlContext"],"mappings":"+KAOA,MAAMA,EAAaC,EAAOC,EAAK,QAAS,CACtC,KAAM,CACJ,WACA,iBACA,aACA,MACA,MACA,WACA,WACA,qBACA,iBACA,gBACA,oBACA,wBACA,+BACA,yCACA,uDACA,gDACA,oCACA,kCACA,yCACA,oCACA,sCACA,qBACF,EACA,SAAU,CACR,MAAO,CACL,QAAS,CACP,6CACA,kCACF,EACA,MAAO,CACL,2CACA,gCACF,CACF,EACA,KAAM,CACJ,GAAI,CAAC,eAAgB,QAAS,OAAQ,MAAM,EAC5C,GAAI,CAAC,SAAU,QAAS,OAAQ,MAAM,EACtC,GAAI,CAAC,SAAU,QAAS,OAAQ,MAAM,CACxC,CACF,CACF,CAAC,EAEYC,EAAuBC,EAAM,WAGxC,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAM,EAAGC,IAAQ,CACjC,KAAM,CAAE,KAAAC,EAAM,MAAAC,CAAM,EAAIL,EAAM,WAAWM,CAAuB,EAEhE,OACEN,EAAA,cAACJ,EAAA,CAAY,GAAGM,EAAO,MAAOG,EAAO,KAAMD,EAAM,IAAKD,CAAAA,EACnDF,CACH,CAEJ,CAAC,EAEDF,EAAqB,YAAc"}

package/dist/components/segmented-control/SegmentedControlItemList.js

@@ -1,2 +1,2 @@
-import*as t from"react";import{styled as l}from"../../stitches.js";import{Box as v}from"../box/Box.js";import{Tabs as g}from"../tabs/Tabs.js";import{SegmentedControlContext as b}from"./SegmentedControlContext.js";const C=l(g.TriggerList,{position:"relative",p:"$1",borderRadius:"$3",overflow:"hidden",variants:{theme:{primary:{bg:"$primary200"},marsh:{bg:"$marsh200"}}},'& > div[role="tablist"]':{position:"relative"},"& > button":{zIndex:2}}),E=l(v,{content:"",position:"absolute",bg:"white",borderRadius:"$2",variants:{interacted:{true:{transition:"all 0.3s ease"},false:{transition:"none"}}}}),w=s=>{const{theme:d,defaultValue:c,value:m}=t.useContext(b),a=t.useRef([]),i=t.Children.toArray(s.children).findIndex(e=>(e==null?void 0:e.props.value)===m),[u,f]=t.useState({left:0,height:0,width:0}),[h,p]=t.useState(!1),n=t.useCallback(()=>{const e=a.current[i];if(!e)return;const{width:o,height:r}=e.getBoundingClientRect();f({left:e.offsetLeft,height:r,width:o})},[i]);return t.useEffect(()=>{const e=new ResizeObserver(n),o=a.current;return o.forEach(r=>{r&&e.observe(r)}),()=>{o.forEach(r=>{r&&e.unobserve(r)}),e.disconnect()}},[i,n]),t.useEffect(()=>(window.addEventListener("resize",n),()=>{window.removeEventListener("resize",n)}),[n]),t.useEffect(()=>{n()},[i,n]),t.createElement(C,{theme:d,defaultValue:c,...s},t.createElement(E,{css:{...u},interacted:h}),t.Children.map(s.children,(e,o)=>{if(!t.isValidElement(e))throw new Error("Child passed to SegmentedControlItemList is not a valid element");return t.cloneElement(e,{onClick:r=>{p(!0),e.props.onClick&&e.props.onClick(r)},ref:r=>a.current[o]=r})}))};export{w as SegmentedControlItemList};
+import*as t from"react";import{styled as l}from"../../styled.js";import{Tabs as v}from"../tabs/Tabs.js";import{SegmentedControlContext as g}from"./SegmentedControlContext.js";const b=l(v.TriggerList,{base:["relative","p-1","rounded-xl","overflow-hidden","[&>div[role=tablist]]:relative","[&>button]:z-2"],variants:{theme:{primary:["bg-primary-200"],marsh:["bg-marsh-200"]}}}),C=l("div",{base:["content-['']","absolute","bg-white","rounded-lg"],variants:{interacted:{true:["duration-300","ease-in","transition-all"],false:["transition-none"]}}}),w=s=>{const{theme:d,defaultValue:u,value:c}=t.useContext(g),a=t.useRef([]),i=t.Children.toArray(s.children).findIndex(e=>(e==null?void 0:e.props.value)===c),[m,f]=t.useState({left:0,height:0,width:0}),[h,p]=t.useState(!1),n=t.useCallback(()=>{const e=a.current[i];if(!e)return;const{width:o,height:r}=e.getBoundingClientRect();f({left:e.offsetLeft,height:r,width:o})},[i]);return t.useEffect(()=>{const e=new ResizeObserver(n),o=a.current;return o.forEach(r=>{r&&e.observe(r)}),()=>{o.forEach(r=>{r&&e.unobserve(r)}),e.disconnect()}},[i,n]),t.useEffect(()=>(window.addEventListener("resize",n),()=>{window.removeEventListener("resize",n)}),[n]),t.useEffect(()=>{n()},[i,n]),t.createElement(b,{theme:d,defaultValue:u,...s},t.createElement(C,{interacted:h,style:m}),t.Children.map(s.children,(e,o)=>{if(!t.isValidElement(e))throw new Error("Child passed to SegmentedControlItemList is not a valid element");return t.cloneElement(e,{onClick:r=>{p(!0),e.props.onClick&&e.props.onClick(r)},ref:r=>a.current[o]=r})}))};export{w as SegmentedControlItemList};
 //# sourceMappingURL=SegmentedControlItemList.js.map

package/dist/components/segmented-control/SegmentedControlItemList.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlItemList.js","sources":["../../../src/components/segmented-control/SegmentedControlItemList.tsx"],"sourcesContent":["import invariant from 'invariant'\nimport * as React from 'react'\n\nimport { styled } from '../../stitches'\nimport { Box } from '../box'\nimport { Tabs } from '../tabs'\nimport { SegmentedControlContext } from './SegmentedControlContext'\nimport { SegmentedControlItem } from './SegmentedControlItem'\n\nconst StyledTriggerList = styled(Tabs.TriggerList, {\n  position: 'relative',\n  p: '$1',\n  borderRadius: '$3',\n  overflow: 'hidden',\n  variants: {\n    theme: {\n      primary: { bg: '$primary200' },\n      marsh: { bg: '$marsh200' }\n    }\n  },\n  '& > div[role=\"tablist\"]': {\n    position: 'relative'\n  },\n  '& > button': {\n    zIndex: 2\n  }\n})\n\nconst SelectionIndicator = styled(Box, {\n  content: '',\n  position: 'absolute',\n  bg: 'white',\n  borderRadius: '$2',\n  variants: {\n    interacted: {\n      true: {\n        transition: 'all 0.3s ease'\n      },\n      false: {\n        transition: 'none'\n      }\n    }\n  }\n})\n\nexport const SegmentedControlItemList = (\n  props: React.ComponentProps<typeof Tabs.TriggerList>\n): JSX.Element => {\n  const { theme, defaultValue, value } = React.useContext(\n    SegmentedControlContext\n  )\n\n  const tabsRef = React.useRef<(HTMLElement | null)[]>([])\n\n  const selectedIndex = React.Children.toArray(props.children).findIndex(\n    (child) => (child as React.ReactElement)?.props.value === value\n  )\n\n  const [indicatorStyles, setIndicatorStyles] = React.useState({\n    left: 0,\n    height: 0,\n    width: 0\n  })\n  const [hasInteracted, setHasInteracted] = React.useState(false)\n\n  const updateIndicatorPosition = React.useCallback(() => {\n    const currentTab = tabsRef.current[selectedIndex]\n    if (!currentTab) return\n\n    const { width, height } = currentTab.getBoundingClientRect()\n    setIndicatorStyles({ left: currentTab.offsetLeft, height, width })\n  }, [selectedIndex])\n\n  React.useEffect(() => {\n    const resizeObserver = new ResizeObserver(updateIndicatorPosition)\n    const currentTabs = tabsRef.current\n    currentTabs.forEach((tab) => {\n      if (tab) resizeObserver.observe(tab)\n    })\n\n    return () => {\n      currentTabs.forEach((tab) => {\n        if (tab) resizeObserver.unobserve(tab)\n      })\n      resizeObserver.disconnect()\n    }\n  }, [selectedIndex, updateIndicatorPosition])\n\n  React.useEffect(() => {\n    window.addEventListener('resize', updateIndicatorPosition)\n    return () => {\n      window.removeEventListener('resize', updateIndicatorPosition)\n    }\n  }, [updateIndicatorPosition])\n\n  React.useEffect(() => {\n    updateIndicatorPosition()\n  }, [selectedIndex, updateIndicatorPosition])\n\n  return (\n    <StyledTriggerList theme={theme} defaultValue={defaultValue} {...props}>\n      <SelectionIndicator\n        css={{\n          ...indicatorStyles\n        }}\n        interacted={hasInteracted}\n      />\n      {React.Children.map(props.children, (child, index) => {\n        if (!React.isValidElement(child)) {\n          throw new Error(\n            `Child passed to SegmentedControlItemList is not a valid element`\n          )\n        }\n\n        return React.cloneElement(\n          child as React.ReactElement<\n            React.ComponentProps<typeof SegmentedControlItem>\n          >,\n          {\n            onClick: (e) => {\n              setHasInteracted(true)\n              if (child.props.onClick) child.props.onClick(e)\n            },\n            ref: (el) => (tabsRef.current[index] = el)\n          }\n        )\n      })}\n    </StyledTriggerList>\n  )\n}\n"],"names":["StyledTriggerList","styled","Tabs","SelectionIndicator","Box","SegmentedControlItemList","props","theme","defaultValue","value","React","SegmentedControlContext","tabsRef","selectedIndex","child","indicatorStyles","setIndicatorStyles","hasInteracted","setHasInteracted","updateIndicatorPosition","currentTab","width","height","resizeObserver","currentTabs","tab","index","e","el"],"mappings":"qNASA,MAAMA,EAAoBC,EAAOC,EAAK,YAAa,CACjD,SAAU,WACV,EAAG,KACH,aAAc,KACd,SAAU,SACV,SAAU,CACR,MAAO,CACL,QAAS,CAAE,GAAI,aAAc,EAC7B,MAAO,CAAE,GAAI,WAAY,CAC3B,CACF,EACA,0BAA2B,CACzB,SAAU,UACZ,EACA,aAAc,CACZ,OAAQ,CACV,CACF,CAAC,EAEKC,EAAqBF,EAAOG,EAAK,CACrC,QAAS,GACT,SAAU,WACV,GAAI,QACJ,aAAc,KACd,SAAU,CACR,WAAY,CACV,KAAM,CACJ,WAAY,eACd,EACA,MAAO,CACL,WAAY,MACd,CACF,CACF,CACF,CAAC,EAEYC,EACXC,GACgB,CAChB,KAAM,CAAE,MAAAC,EAAO,aAAAC,EAAc,MAAAC,CAAM,EAAIC,EAAM,WAC3CC,CACF,EAEMC,EAAUF,EAAM,OAA+B,CAAA,CAAE,EAEjDG,EAAgBH,EAAM,SAAS,QAAQJ,EAAM,QAAQ,EAAE,UAC1DQ,IAAWA,GAAA,KAAAA,OAAAA,EAA8B,MAAM,SAAUL,CAC5D,EAEM,CAACM,EAAiBC,CAAkB,EAAIN,EAAM,SAAS,CAC3D,KAAM,EACN,OAAQ,EACR,MAAO,CACT,CAAC,EACK,CAACO,EAAeC,CAAgB,EAAIR,EAAM,SAAS,EAAK,EAExDS,EAA0BT,EAAM,YAAY,IAAM,CACtD,MAAMU,EAAaR,EAAQ,QAAQC,GACnC,GAAI,CAACO,EAAY,OAEjB,KAAM,CAAE,MAAAC,EAAO,OAAAC,CAAO,EAAIF,EAAW,sBACrCJ,EAAAA,EAAmB,CAAE,KAAMI,EAAW,WAAY,OAAAE,EAAQ,MAAAD,CAAM,CAAC,CACnE,EAAG,CAACR,CAAa,CAAC,EAElB,OAAAH,EAAM,UAAU,IAAM,CACpB,MAAMa,EAAiB,IAAI,eAAeJ,CAAuB,EAC3DK,EAAcZ,EAAQ,QAC5B,OAAAY,EAAY,QAASC,GAAQ,CACvBA,GAAKF,EAAe,QAAQE,CAAG,CACrC,CAAC,EAEM,IAAM,CACXD,EAAY,QAASC,GAAQ,CACvBA,GAAKF,EAAe,UAAUE,CAAG,CACvC,CAAC,EACDF,EAAe,WACjB,CAAA,CACF,EAAG,CAACV,EAAeM,CAAuB,CAAC,EAE3CT,EAAM,UAAU,KACd,OAAO,iBAAiB,SAAUS,CAAuB,EAClD,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAuB,CAC9D,GACC,CAACA,CAAuB,CAAC,EAE5BT,EAAM,UAAU,IAAM,CACpBS,EAAwB,CAC1B,EAAG,CAACN,EAAeM,CAAuB,CAAC,EAGzCT,EAAA,cAACV,EAAA,CAAkB,MAAOO,EAAO,aAAcC,EAAe,GAAGF,CAAAA,EAC/DI,EAAA,cAACP,EAAA,CACC,IAAK,CACH,GAAGY,CACL,EACA,WAAYE,CAAAA,CACd,EACCP,EAAM,SAAS,IAAIJ,EAAM,SAAU,CAACQ,EAAOY,IAAU,CACpD,GAAI,CAAChB,EAAM,eAAeI,CAAK,EAC7B,MAAM,IAAI,MACR,iEACF,EAGF,OAAOJ,EAAM,aACXI,EAGA,CACE,QAAUa,GAAM,CACdT,EAAiB,EAAI,EACjBJ,EAAM,MAAM,SAASA,EAAM,MAAM,QAAQa,CAAC,CAChD,EACA,IAAMC,GAAQhB,EAAQ,QAAQc,GAASE,CACzC,CACF,CACF,CAAC,CACH,CAEJ"}
+{"version":3,"file":"SegmentedControlItemList.js","sources":["../../../src/components/segmented-control/SegmentedControlItemList.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Tabs } from '../tabs'\nimport { SegmentedControlContext } from './SegmentedControlContext'\nimport { SegmentedControlItem } from './SegmentedControlItem'\n\nconst StyledTriggerList = styled(Tabs.TriggerList, {\n  base: [\n    'relative',\n    'p-1',\n    'rounded-xl',\n    'overflow-hidden',\n    '[&>div[role=tablist]]:relative',\n    '[&>button]:z-2'\n  ],\n  variants: {\n    theme: {\n      primary: ['bg-primary-200'],\n      marsh: ['bg-marsh-200']\n    }\n  }\n})\n\nconst SelectionIndicator = styled('div', {\n  base: [\"content-['']\", 'absolute', 'bg-white', 'rounded-lg'],\n  variants: {\n    interacted: {\n      true: ['duration-300', 'ease-in', 'transition-all'],\n      false: ['transition-none']\n    }\n  }\n})\n\nexport const SegmentedControlItemList = (\n  props: React.ComponentProps<typeof Tabs.TriggerList>\n): JSX.Element => {\n  const { theme, defaultValue, value } = React.useContext(\n    SegmentedControlContext\n  )\n\n  const tabsRef = React.useRef<(HTMLElement | null)[]>([])\n\n  const selectedIndex = React.Children.toArray(props.children).findIndex(\n    (child) => (child as React.ReactElement)?.props.value === value\n  )\n\n  const [indicatorStyles, setIndicatorStyles] = React.useState({\n    left: 0,\n    height: 0,\n    width: 0\n  })\n  const [hasInteracted, setHasInteracted] = React.useState(false)\n\n  const updateIndicatorPosition = React.useCallback(() => {\n    const currentTab = tabsRef.current[selectedIndex]\n    if (!currentTab) return\n\n    const { width, height } = currentTab.getBoundingClientRect()\n    setIndicatorStyles({ left: currentTab.offsetLeft, height, width })\n  }, [selectedIndex])\n\n  React.useEffect(() => {\n    const resizeObserver = new ResizeObserver(updateIndicatorPosition)\n    const currentTabs = tabsRef.current\n    currentTabs.forEach((tab) => {\n      if (tab) resizeObserver.observe(tab)\n    })\n\n    return () => {\n      currentTabs.forEach((tab) => {\n        if (tab) resizeObserver.unobserve(tab)\n      })\n      resizeObserver.disconnect()\n    }\n  }, [selectedIndex, updateIndicatorPosition])\n\n  React.useEffect(() => {\n    window.addEventListener('resize', updateIndicatorPosition)\n    return () => {\n      window.removeEventListener('resize', updateIndicatorPosition)\n    }\n  }, [updateIndicatorPosition])\n\n  React.useEffect(() => {\n    updateIndicatorPosition()\n  }, [selectedIndex, updateIndicatorPosition])\n\n  return (\n    <StyledTriggerList theme={theme} defaultValue={defaultValue} {...props}>\n      <SelectionIndicator interacted={hasInteracted} style={indicatorStyles} />\n      {React.Children.map(props.children, (child, index) => {\n        if (!React.isValidElement(child)) {\n          throw new Error(\n            `Child passed to SegmentedControlItemList is not a valid element`\n          )\n        }\n\n        return React.cloneElement(\n          child as React.ReactElement<\n            React.ComponentProps<typeof SegmentedControlItem>\n          >,\n          {\n            onClick: (e) => {\n              setHasInteracted(true)\n              if (child.props.onClick) child.props.onClick(e)\n            },\n            ref: (el) => (tabsRef.current[index] = el)\n          }\n        )\n      })}\n    </StyledTriggerList>\n  )\n}\n"],"names":["StyledTriggerList","styled","Tabs","SelectionIndicator","SegmentedControlItemList","props","theme","defaultValue","value","React","SegmentedControlContext","tabsRef","selectedIndex","child","indicatorStyles","setIndicatorStyles","hasInteracted","setHasInteracted","updateIndicatorPosition","currentTab","width","height","resizeObserver","currentTabs","tab","index","e","el"],"mappings":"+KAQA,MAAMA,EAAoBC,EAAOC,EAAK,YAAa,CACjD,KAAM,CACJ,WACA,MACA,aACA,kBACA,iCACA,gBACF,EACA,SAAU,CACR,MAAO,CACL,QAAS,CAAC,gBAAgB,EAC1B,MAAO,CAAC,cAAc,CACxB,CACF,CACF,CAAC,EAEKC,EAAqBF,EAAO,MAAO,CACvC,KAAM,CAAC,eAAgB,WAAY,WAAY,YAAY,EAC3D,SAAU,CACR,WAAY,CACV,KAAM,CAAC,eAAgB,UAAW,gBAAgB,EAClD,MAAO,CAAC,iBAAiB,CAC3B,CACF,CACF,CAAC,EAEYG,EACXC,GACgB,CAChB,KAAM,CAAE,MAAAC,EAAO,aAAAC,EAAc,MAAAC,CAAM,EAAIC,EAAM,WAC3CC,CACF,EAEMC,EAAUF,EAAM,OAA+B,CAAE,CAAA,EAEjDG,EAAgBH,EAAM,SAAS,QAAQJ,EAAM,QAAQ,EAAE,UAC1DQ,IAAWA,GAAA,KAAA,OAAAA,EAA8B,MAAM,SAAUL,CAC5D,EAEM,CAACM,EAAiBC,CAAkB,EAAIN,EAAM,SAAS,CAC3D,KAAM,EACN,OAAQ,EACR,MAAO,CACT,CAAC,EACK,CAACO,EAAeC,CAAgB,EAAIR,EAAM,SAAS,EAAK,EAExDS,EAA0BT,EAAM,YAAY,IAAM,CACtD,MAAMU,EAAaR,EAAQ,QAAQC,CAAa,EAChD,GAAI,CAACO,EAAY,OAEjB,KAAM,CAAE,MAAAC,EAAO,OAAAC,CAAO,EAAIF,EAAW,sBAAsB,EAC3DJ,EAAmB,CAAE,KAAMI,EAAW,WAAY,OAAAE,EAAQ,MAAAD,CAAM,CAAC,CACnE,EAAG,CAACR,CAAa,CAAC,EAElB,OAAAH,EAAM,UAAU,IAAM,CACpB,MAAMa,EAAiB,IAAI,eAAeJ,CAAuB,EAC3DK,EAAcZ,EAAQ,QAC5B,OAAAY,EAAY,QAASC,GAAQ,CACvBA,GAAKF,EAAe,QAAQE,CAAG,CACrC,CAAC,EAEM,IAAM,CACXD,EAAY,QAASC,GAAQ,CACvBA,GAAKF,EAAe,UAAUE,CAAG,CACvC,CAAC,EACDF,EAAe,WACjB,CAAA,CACF,EAAG,CAACV,EAAeM,CAAuB,CAAC,EAE3CT,EAAM,UAAU,KACd,OAAO,iBAAiB,SAAUS,CAAuB,EAClD,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAuB,CAC9D,GACC,CAACA,CAAuB,CAAC,EAE5BT,EAAM,UAAU,IAAM,CACpBS,EACF,CAAA,EAAG,CAACN,EAAeM,CAAuB,CAAC,EAGzCT,EAAA,cAACT,EAAA,CAAkB,MAAOM,EAAO,aAAcC,EAAe,GAAGF,CAC/DI,EAAAA,EAAA,cAACN,EAAA,CAAmB,WAAYa,EAAe,MAAOF,CAAiB,CAAA,EACtEL,EAAM,SAAS,IAAIJ,EAAM,SAAU,CAACQ,EAAOY,IAAU,CACpD,GAAI,CAAChB,EAAM,eAAeI,CAAK,EAC7B,MAAM,IAAI,MACR,iEACF,EAGF,OAAOJ,EAAM,aACXI,EAGA,CACE,QAAUa,GAAM,CACdT,EAAiB,EAAI,EACjBJ,EAAM,MAAM,SAASA,EAAM,MAAM,QAAQa,CAAC,CAChD,EACA,IAAMC,GAAQhB,EAAQ,QAAQc,CAAK,EAAIE,CACzC,CACF,CACF,CAAC,CACH,CAEJ"}

package/dist/components/segmented-control/SegmentedControlRoot.js

@@ -1,2 +1,2 @@
-import*as t from"react";import{styled as v}from"../../stitches.js";import{Tabs as c}from"../tabs/Tabs.js";import{SegmentedControlContext as f}from"./SegmentedControlContext.js";const h=v(c,{"& > div":{border:"none"},variants:{size:{sm:{width:"unset"},md:{},lg:{}}}}),g=({size:n,theme:m="primary",defaultValue:e,children:u,...o})=>{const a=o.value!==void 0,[i,s]=t.useState(e),r=a?o.value:i,l=a?o.onValueChange:s;t.useEffect(()=>{!a&&e&&s(e)},[e,a]);const d=t.useMemo(()=>({size:n,theme:m,defaultValue:e,onValueChange:l,value:r}),[n,m,e,l,r]);return t.createElement(f.Provider,{value:d},t.createElement(h,{size:n,value:r,onValueChange:l,...o},u))};export{g as SegmentedControlRoot};
+import*as o from"react";import{styled as v}from"../../styled.js";import{Tabs as c}from"../tabs/Tabs.js";import{SegmentedControlContext as f}from"./SegmentedControlContext.js";const p=v(c,{base:["[&>div]:border-none"],variants:{size:{sm:["w-[unset]"],md:[],lg:[]}}}),C=({size:n,theme:m="primary",defaultValue:e,children:u,...t})=>{const a=t.value!==void 0,[i,s]=o.useState(e),r=a?t.value:i,l=a?t.onValueChange:s;o.useEffect(()=>{!a&&e&&s(e)},[e,a]);const d=o.useMemo(()=>({size:n,theme:m,defaultValue:e,onValueChange:l,value:r}),[n,m,e,l,r]);return o.createElement(f.Provider,{value:d},o.createElement(p,{size:n,value:r,onValueChange:l,...t},u))};export{C as SegmentedControlRoot};
 //# sourceMappingURL=SegmentedControlRoot.js.map

package/dist/components/segmented-control/SegmentedControlRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlRoot.js","sources":["../../../src/components/segmented-control/SegmentedControlRoot.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../stitches'\nimport { Tabs } from '../tabs'\nimport type { SegmentedControlTheme } from './SegmentedControl.types'\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nconst StyledSegmentedControlRoot = styled(Tabs, {\n  '& > div': { border: 'none' },\n  variants: {\n    size: {\n      sm: {\n        width: 'unset'\n      },\n      md: {},\n      lg: {}\n    }\n  }\n})\n\nexport interface SegmentedControlRootProps\n  extends React.ComponentProps<typeof StyledSegmentedControlRoot> {\n  theme?: SegmentedControlTheme\n}\n\nexport const SegmentedControlRoot = ({\n  size,\n  theme = 'primary',\n  defaultValue,\n  children,\n  ...props\n}: React.PropsWithChildren<SegmentedControlRootProps>): React.JSX.Element => {\n  const isControlled = props.value !== undefined\n\n  const [internalValue, setInternalValue] = React.useState(defaultValue)\n\n  const currentValue = isControlled ? props.value : internalValue\n  const handleValueChange = isControlled\n    ? props.onValueChange\n    : setInternalValue\n\n  React.useEffect(() => {\n    if (!isControlled && defaultValue) {\n      setInternalValue(defaultValue)\n    }\n  }, [defaultValue, isControlled])\n\n  const value = React.useMemo(\n    () => ({\n      size,\n      theme,\n      defaultValue,\n      onValueChange: handleValueChange,\n      value: currentValue\n    }),\n    [size, theme, defaultValue, handleValueChange, currentValue]\n  )\n\n  return (\n    <SegmentedControlContext.Provider value={value}>\n      <StyledSegmentedControlRoot\n        size={size}\n        value={currentValue}\n        onValueChange={handleValueChange}\n        {...props}\n      >\n        {children}\n      </StyledSegmentedControlRoot>\n    </SegmentedControlContext.Provider>\n  )\n}\n"],"names":["StyledSegmentedControlRoot","styled","Tabs","SegmentedControlRoot","size","theme","defaultValue","children","props","isControlled","internalValue","setInternalValue","React","currentValue","handleValueChange","value","SegmentedControlContext"],"mappings":"iLAOA,MAAMA,EAA6BC,EAAOC,EAAM,CAC9C,UAAW,CAAE,OAAQ,MAAO,EAC5B,SAAU,CACR,KAAM,CACJ,GAAI,CACF,MAAO,OACT,EACA,GAAI,CACJ,EAAA,GAAI,CAAA,CACN,CACF,CACF,CAAC,EAOYC,EAAuB,CAAC,CACnC,KAAAC,EACA,MAAAC,EAAQ,UACR,aAAAC,EACA,SAAAC,KACGC,CACL,IAA6E,CAC3E,MAAMC,EAAeD,EAAM,QAAU,OAE/B,CAACE,EAAeC,CAAgB,EAAIC,EAAM,SAASN,CAAY,EAE/DO,EAAeJ,EAAeD,EAAM,MAAQE,EAC5CI,EAAoBL,EACtBD,EAAM,cACNG,EAEJC,EAAM,UAAU,IAAM,CAChB,CAACH,GAAgBH,GACnBK,EAAiBL,CAAY,CAEjC,EAAG,CAACA,EAAcG,CAAY,CAAC,EAE/B,MAAMM,EAAQH,EAAM,QAClB,KAAO,CACL,KAAAR,EACA,MAAAC,EACA,aAAAC,EACA,cAAeQ,EACf,MAAOD,CACT,GACA,CAACT,EAAMC,EAAOC,EAAcQ,EAAmBD,CAAY,CAC7D,EAEA,OACED,EAAA,cAACI,EAAwB,SAAxB,CAAiC,MAAOD,CACvCH,EAAAA,EAAA,cAACZ,EAAA,CACC,KAAMI,EACN,MAAOS,EACP,cAAeC,EACd,GAAGN,CAEHD,EAAAA,CACH,CACF,CAEJ"}
+{"version":3,"file":"SegmentedControlRoot.js","sources":["../../../src/components/segmented-control/SegmentedControlRoot.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Tabs } from '../tabs'\nimport type { SegmentedControlTheme } from './SegmentedControl.types'\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nconst StyledSegmentedControlRoot = styled(Tabs, {\n  base: ['[&>div]:border-none'],\n  variants: {\n    size: {\n      sm: ['w-[unset]'],\n      md: [],\n      lg: []\n    }\n  }\n})\n\nexport interface SegmentedControlRootProps\n  extends React.ComponentProps<typeof StyledSegmentedControlRoot> {\n  theme?: SegmentedControlTheme\n}\n\nexport const SegmentedControlRoot = ({\n  size,\n  theme = 'primary',\n  defaultValue,\n  children,\n  ...props\n}: React.PropsWithChildren<SegmentedControlRootProps>): React.JSX.Element => {\n  const isControlled = props.value !== undefined\n\n  const [internalValue, setInternalValue] = React.useState(defaultValue)\n\n  const currentValue = isControlled ? props.value : internalValue\n  const handleValueChange = isControlled\n    ? props.onValueChange\n    : setInternalValue\n\n  React.useEffect(() => {\n    if (!isControlled && defaultValue) {\n      setInternalValue(defaultValue)\n    }\n  }, [defaultValue, isControlled])\n\n  const value = React.useMemo(\n    () => ({\n      size,\n      theme,\n      defaultValue,\n      onValueChange: handleValueChange,\n      value: currentValue\n    }),\n    [size, theme, defaultValue, handleValueChange, currentValue]\n  )\n\n  return (\n    <SegmentedControlContext.Provider value={value}>\n      <StyledSegmentedControlRoot\n        size={size}\n        value={currentValue}\n        onValueChange={handleValueChange}\n        {...props}\n      >\n        {children}\n      </StyledSegmentedControlRoot>\n    </SegmentedControlContext.Provider>\n  )\n}\n"],"names":["StyledSegmentedControlRoot","styled","Tabs","SegmentedControlRoot","size","theme","defaultValue","children","props","isControlled","internalValue","setInternalValue","React","currentValue","handleValueChange","value","SegmentedControlContext"],"mappings":"+KAQA,MAAMA,EAA6BC,EAAOC,EAAM,CAC9C,KAAM,CAAC,qBAAqB,EAC5B,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,WAAW,EAChB,GAAI,CAAA,EACJ,GAAI,CAAA,CACN,CACF,CACF,CAAC,EAOYC,EAAuB,CAAC,CACnC,KAAAC,EACA,MAAAC,EAAQ,UACR,aAAAC,EACA,SAAAC,EACA,GAAGC,CACL,IAA6E,CAC3E,MAAMC,EAAeD,EAAM,QAAU,OAE/B,CAACE,EAAeC,CAAgB,EAAIC,EAAM,SAASN,CAAY,EAE/DO,EAAeJ,EAAeD,EAAM,MAAQE,EAC5CI,EAAoBL,EACtBD,EAAM,cACNG,EAEJC,EAAM,UAAU,IAAM,CAChB,CAACH,GAAgBH,GACnBK,EAAiBL,CAAY,CAEjC,EAAG,CAACA,EAAcG,CAAY,CAAC,EAE/B,MAAMM,EAAQH,EAAM,QAClB,KAAO,CACL,KAAAR,EACA,MAAAC,EACA,aAAAC,EACA,cAAeQ,EACf,MAAOD,CACT,GACA,CAACT,EAAMC,EAAOC,EAAcQ,EAAmBD,CAAY,CAC7D,EAEA,OACED,EAAA,cAACI,EAAwB,SAAxB,CAAiC,MAAOD,CACvCH,EAAAA,EAAA,cAACZ,EAAA,CACC,KAAMI,EACN,MAAOS,EACP,cAAeC,EACd,GAAGN,CAEHD,EAAAA,CACH,CACF,CAEJ"}

package/dist/components/select/Select.js

@@ -1,2 +1,2 @@
-import*as o from"react";import{styled as s,theme as c}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import{encodeBackgroundIcon as u}from"../../utilities/style/encode-background-icon.js";import"../../utilities/style/keyframe-animations.js";import{disabledStyle as g}from"../../utilities/style/disabledStyle.js";const m=s("select",{appearance:"none",backgroundImage:u(c.colors.grey700.value,"chevron"),backgroundRepeat:"no-repeat, repeat",borderRadius:"$1",color:"$grey1000",display:"block",fontFamily:"$body",fontWeight:400,lineHeight:1.4,width:"100%","&:hover":{cursor:"pointer"},"&::-ms-expand":{display:"none"},"&[disabled], > option[disabled]":g,variants:{size:{sm:{backgroundPosition:"right $space$2 top 50%, 0 0",backgroundSize:"18px auto, 100%",fontSize:"$sm",height:"$3",pl:"$2",pr:"$5"},md:{backgroundPosition:"right $space$3 top 50%, 0 0",backgroundSize:"20px auto, 100%",fontSize:"$md",height:"$4",pl:"$3",pr:"$6"},lg:{backgroundPosition:"right $space$3 top 50%, 0 0",backgroundSize:"20px auto, 100%",fontSize:"$md",height:"$5",pl:"$3",pr:"$6"}},state:{error:{}},appearance:{standard:{backgroundColor:"white",border:"1px solid $grey700","&:focus":{borderColor:"$primary800",outline:"none"}},modern:{backgroundColor:"$grey100",border:"none","&:focus":{outline:"2px solid $blue800",outlineOffset:1,zIndex:1}}}},compoundVariants:[{state:"error",appearance:"standard",css:{borderColor:"$danger"}},{state:"error",appearance:"modern",css:{backgroundColor:"$dangerLight","&:focus":{outlineColor:"$danger"}}}]}),t=o.forwardRef(({placeholder:r,children:n,size:d="md",appearance:i="standard",...e},p)=>{const a={size:d,appearance:i,ref:p,...e};return[e.value,e.defaultValue].every(l=>l===void 0)&&(a.defaultValue=""),o.createElement(m,{...a},r&&o.createElement("option",{disabled:!0,hidden:!0,value:""},r),n)});t.displayName="Select";export{t as Select};
+import*as r from"react";import{styled as p}from"../../styled.js";const c=p("select",{base:["bg-(image:--bg-chevron)","appearance-none","[background-repeat:no-repeat,repeat-x]","rounded-md","text-grey-1000","block","font-body","font-normal","leading-[1.4]","w-full","hover:cursor-pointer","-ms-expand:hidden","disabled:opacity-30","disabled:cursor-not-allowed","*[[disabled]]:opacity-30","*[[disabled]]:cursor-not-allowed"],variants:{size:{sm:["bg-position-[right_--spacing(2)_top_50%,0_0]","bg-size-[18px_auto,100%]","text-sm","h-8","pl-2","pr-8"],md:["bg-position-[right_--spacing(3)_top_50%,0_0]","bg-size-[20px_auto,100%]","text-md","h-10","pl-3","pr-10"],lg:["bg-position-[right_--spacing(3)_top_50%,0_0]","bg-size-[20px_auto,100%]","text-md","h-12","pl-3","pr-10"]},state:{error:[]},appearance:{standard:["bg-white","border","border-grey-700","focus:border-primary-800","focus:outline-none"],modern:["bg-grey-100","border-none","focus:outline-2","focus:outline-blue-800","focus:outline-offset-1","focus:outline-solid","focus:z-1"]}},compoundVariants:[{state:"error",appearance:"standard",class:["border-danger"]},{state:"error",appearance:"modern",class:["bg-danger-light","focus:outline-danger"]}]}),t=r.forwardRef(({placeholder:o,children:n,size:d="md",appearance:s="standard",...e},i)=>{const a={size:d,appearance:s,ref:i,...e};return[e.value,e.defaultValue].every(l=>l===void 0)&&(a.defaultValue=""),r.createElement(c,{...a},o&&r.createElement("option",{disabled:!0,hidden:!0,value:""},o),n)});t.displayName="Select";export{t as Select};
 //# sourceMappingURL=Select.js.map

package/dist/components/select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../src/components/select/Select.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, theme } from '~/stitches'\nimport { disabledStyle, encodeBackgroundIcon } from '~/utilities'\nimport { Override } from '~/utilities/types'\n\nconst StyledSelect = styled('select', {\n  appearance: 'none',\n  backgroundImage: encodeBackgroundIcon(theme.colors.grey700.value, 'chevron'),\n  backgroundRepeat: 'no-repeat, repeat',\n  borderRadius: '$1',\n  color: '$grey1000',\n  display: 'block',\n  fontFamily: '$body',\n  fontWeight: 400,\n  lineHeight: 1.4,\n  width: '100%',\n  '&:hover': {\n    cursor: 'pointer'\n  },\n  '&::-ms-expand': {\n    display: 'none'\n  },\n  '&[disabled], > option[disabled]': disabledStyle,\n  variants: {\n    size: {\n      sm: {\n        backgroundPosition: 'right $space$2 top 50%, 0 0',\n        backgroundSize: '18px auto, 100%',\n        fontSize: '$sm',\n        height: '$3',\n        pl: '$2',\n        pr: '$5'\n      },\n      md: {\n        backgroundPosition: 'right $space$3 top 50%, 0 0',\n        backgroundSize: '20px auto, 100%',\n        fontSize: '$md',\n        height: '$4',\n        pl: '$3',\n        pr: '$6'\n      },\n      lg: {\n        backgroundPosition: 'right $space$3 top 50%, 0 0',\n        backgroundSize: '20px auto, 100%',\n        fontSize: '$md',\n        height: '$5',\n        pl: '$3',\n        pr: '$6'\n      }\n    },\n    state: {\n      error: {}\n    },\n    appearance: {\n      standard: {\n        backgroundColor: 'white',\n        border: '1px solid $grey700',\n        '&:focus': {\n          borderColor: '$primary800',\n          outline: 'none'\n        }\n      },\n      modern: {\n        backgroundColor: '$grey100',\n        border: 'none',\n        '&:focus': {\n          outline: '2px solid $blue800',\n          outlineOffset: 1,\n          zIndex: 1\n        }\n      }\n    }\n  },\n  compoundVariants: [\n    {\n      state: 'error',\n      appearance: 'standard',\n      css: { borderColor: '$danger' }\n    },\n    {\n      state: 'error',\n      appearance: 'modern',\n      css: {\n        backgroundColor: '$dangerLight',\n        '&:focus': {\n          outlineColor: '$danger'\n        }\n      }\n    }\n  ]\n})\n\nexport type SelectProps = Override<\n  React.ComponentProps<typeof StyledSelect>,\n  {\n    as?: never\n    placeholder?: string\n  }\n  // TODO: figure out why uncommenting this causes TS errors in\n  // component declaration\n  // & (\n  //   | { id: string; 'aria-label'?: string }\n  //   | { 'aria-label': string; id?: string }\n  // )\n>\n\nexport const Select: React.ForwardRefExoticComponent<SelectProps> =\n  React.forwardRef(\n    (\n      {\n        placeholder,\n        children,\n        size = 'md',\n        appearance = 'standard',\n        ...remainingProps\n      },\n      ref\n    ) => {\n      const props = { size, appearance, ref, ...remainingProps }\n\n      if (\n        [remainingProps.value, remainingProps.defaultValue].every(\n          (value) => value === undefined\n        )\n      ) {\n        props.defaultValue = ''\n      }\n\n      return (\n        <StyledSelect {...props}>\n          {placeholder && (\n            <option disabled hidden value=\"\">\n              {placeholder}\n            </option>\n          )}\n          {children}\n        </StyledSelect>\n      )\n    }\n  )\n\nSelect.displayName = 'Select'\n"],"names":["StyledSelect","styled","encodeBackgroundIcon","theme","disabledStyle","Select","React","placeholder","children","size","appearance","remainingProps","ref","props","value"],"mappings":"oZAMA,MAAMA,EAAeC,EAAO,SAAU,CACpC,WAAY,OACZ,gBAAiBC,EAAqBC,EAAM,OAAO,QAAQ,MAAO,SAAS,EAC3E,iBAAkB,oBAClB,aAAc,KACd,MAAO,YACP,QAAS,QACT,WAAY,QACZ,WAAY,IACZ,WAAY,IACZ,MAAO,OACP,UAAW,CACT,OAAQ,SACV,EACA,gBAAiB,CACf,QAAS,MACX,EACA,kCAAmCC,EACnC,SAAU,CACR,KAAM,CACJ,GAAI,CACF,mBAAoB,8BACpB,eAAgB,kBAChB,SAAU,MACV,OAAQ,KACR,GAAI,KACJ,GAAI,IACN,EACA,GAAI,CACF,mBAAoB,8BACpB,eAAgB,kBAChB,SAAU,MACV,OAAQ,KACR,GAAI,KACJ,GAAI,IACN,EACA,GAAI,CACF,mBAAoB,8BACpB,eAAgB,kBAChB,SAAU,MACV,OAAQ,KACR,GAAI,KACJ,GAAI,IACN,CACF,EACA,MAAO,CACL,MAAO,CACT,CAAA,EACA,WAAY,CACV,SAAU,CACR,gBAAiB,QACjB,OAAQ,qBACR,UAAW,CACT,YAAa,cACb,QAAS,MACX,CACF,EACA,OAAQ,CACN,gBAAiB,WACjB,OAAQ,OACR,UAAW,CACT,QAAS,qBACT,cAAe,EACf,OAAQ,CACV,CACF,CACF,CACF,EACA,iBAAkB,CAChB,CACE,MAAO,QACP,WAAY,WACZ,IAAK,CAAE,YAAa,SAAU,CAChC,EACA,CACE,MAAO,QACP,WAAY,SACZ,IAAK,CACH,gBAAiB,eACjB,UAAW,CACT,aAAc,SAChB,CACF,CACF,CACF,CACF,CAAC,EAgBYC,EACXC,EAAM,WACJ,CACE,CACE,YAAAC,EACA,SAAAC,EACA,KAAAC,EAAO,KACP,WAAAC,EAAa,cACVC,CACL,EACAC,IACG,CACH,MAAMC,EAAQ,CAAE,KAAAJ,EAAM,WAAAC,EAAY,IAAAE,EAAK,GAAGD,CAAe,EAEzD,MACE,CAACA,EAAe,MAAOA,EAAe,YAAY,EAAE,MACjDG,GAAUA,IAAU,MACvB,IAEAD,EAAM,aAAe,IAIrBP,EAAA,cAACN,EAAA,CAAc,GAAGa,CACfN,EAAAA,GACCD,EAAA,cAAC,SAAO,CAAA,SAAQ,GAAC,OAAM,GAAC,MAAM,EAC3BC,EAAAA,CACH,EAEDC,CACH,CAEJ,CACF,EAEFH,EAAO,YAAc"}
+{"version":3,"file":"Select.js","sources":["../../../src/components/select/Select.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { Override } from '~/utilities/types'\n\nconst StyledSelect = styled('select', {\n  base: [\n    'bg-(image:--bg-chevron)',\n    'appearance-none',\n    '[background-repeat:no-repeat,repeat-x]',\n    'rounded-md',\n    'text-grey-1000',\n    'block',\n    'font-body',\n    'font-normal',\n    'leading-[1.4]',\n    'w-full',\n    'hover:cursor-pointer',\n    '-ms-expand:hidden',\n    'disabled:opacity-30',\n    'disabled:cursor-not-allowed',\n    '*[[disabled]]:opacity-30',\n    '*[[disabled]]:cursor-not-allowed'\n  ],\n  variants: {\n    size: {\n      sm: [\n        'bg-position-[right_--spacing(2)_top_50%,0_0]',\n        'bg-size-[18px_auto,100%]',\n        'text-sm',\n        'h-8',\n        'pl-2',\n        'pr-8'\n      ],\n      md: [\n        'bg-position-[right_--spacing(3)_top_50%,0_0]',\n        'bg-size-[20px_auto,100%]',\n        'text-md',\n        'h-10',\n        'pl-3',\n        'pr-10'\n      ],\n      lg: [\n        'bg-position-[right_--spacing(3)_top_50%,0_0]',\n        'bg-size-[20px_auto,100%]',\n        'text-md',\n        'h-12',\n        'pl-3',\n        'pr-10'\n      ]\n    },\n    state: {\n      error: []\n    },\n    appearance: {\n      standard: [\n        'bg-white',\n        'border',\n        'border-grey-700',\n        'focus:border-primary-800',\n        'focus:outline-none'\n      ],\n      modern: [\n        'bg-grey-100',\n        'border-none',\n        'focus:outline-2',\n        'focus:outline-blue-800',\n        'focus:outline-offset-1',\n        'focus:outline-solid',\n        'focus:z-1'\n      ]\n    }\n  },\n  compoundVariants: [\n    {\n      state: 'error',\n      appearance: 'standard',\n      class: ['border-danger']\n    },\n    {\n      state: 'error',\n      appearance: 'modern',\n      class: ['bg-danger-light', 'focus:outline-danger']\n    }\n  ]\n})\n\nexport type SelectProps = Override<\n  React.ComponentProps<typeof StyledSelect>,\n  {\n    as?: never\n    placeholder?: string\n  }\n  // TODO: figure out why uncommenting this causes TS errors in\n  // component declaration\n  // & (\n  //   | { id: string; 'aria-label'?: string }\n  //   | { 'aria-label': string; id?: string }\n  // )\n>\n\nexport const Select = React.forwardRef<HTMLElement, SelectProps>(\n  (\n    {\n      placeholder,\n      children,\n      size = 'md',\n      appearance = 'standard',\n      ...remainingProps\n    },\n    ref\n  ) => {\n    // Type assertion needed due to responsive variant size prop compatibility\n    const props: React.ComponentProps<typeof StyledSelect> = { \n      size, \n      appearance, \n      ref, \n      ...remainingProps \n    } as React.ComponentProps<typeof StyledSelect>\n\n    if (\n      [remainingProps.value, remainingProps.defaultValue].every(\n        (value) => value === undefined\n      )\n    ) {\n      props.defaultValue = ''\n    }\n\n    return (\n      <StyledSelect {...props}>\n        {placeholder && (\n          <option disabled hidden value=\"\">\n            {placeholder}\n          </option>\n        )}\n        {children}\n      </StyledSelect>\n    )\n  }\n)\n\nSelect.displayName = 'Select'\n"],"names":["StyledSelect","styled","Select","React","placeholder","children","size","appearance","remainingProps","ref","props","value"],"mappings":"iEAKA,MAAMA,EAAeC,EAAO,SAAU,CACpC,KAAM,CACJ,0BACA,kBACA,yCACA,aACA,iBACA,QACA,YACA,cACA,gBACA,SACA,uBACA,oBACA,sBACA,8BACA,2BACA,kCACF,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CACF,+CACA,2BACA,UACA,MACA,OACA,MACF,EACA,GAAI,CACF,+CACA,2BACA,UACA,OACA,OACA,OACF,EACA,GAAI,CACF,+CACA,2BACA,UACA,OACA,OACA,OACF,CACF,EACA,MAAO,CACL,MAAO,EACT,EACA,WAAY,CACV,SAAU,CACR,WACA,SACA,kBACA,2BACA,oBACF,EACA,OAAQ,CACN,cACA,cACA,kBACA,yBACA,yBACA,sBACA,WACF,CACF,CACF,EACA,iBAAkB,CAChB,CACE,MAAO,QACP,WAAY,WACZ,MAAO,CAAC,eAAe,CACzB,EACA,CACE,MAAO,QACP,WAAY,SACZ,MAAO,CAAC,kBAAmB,sBAAsB,CACnD,CACF,CACF,CAAC,EAgBYC,EAASC,EAAM,WAC1B,CACE,CACE,YAAAC,EACA,SAAAC,EACA,KAAAC,EAAO,KACP,WAAAC,EAAa,WACb,GAAGC,CACL,EACAC,IACG,CAEH,MAAMC,EAAmD,CACvD,KAAAJ,EACA,WAAAC,EACA,IAAAE,EACA,GAAGD,CACL,EAEA,MACE,CAACA,EAAe,MAAOA,EAAe,YAAY,EAAE,MACjDG,GAAUA,IAAU,MACvB,IAEAD,EAAM,aAAe,IAIrBP,EAAA,cAACH,EAAA,CAAc,GAAGU,CACfN,EAAAA,GACCD,EAAA,cAAC,SAAA,CAAO,SAAQ,GAAC,OAAM,GAAC,MAAM,EAAA,EAC3BC,CACH,EAEDC,CACH,CAEJ,CACF,EAEAH,EAAO,YAAc"}

package/dist/components/select-field/SelectField.js

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

package/dist/components/select-field/SelectField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectField.js","sources":["../../../src/components/select-field/SelectField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n  FieldElementWrapperProps,\n  FieldWrapper\n} from '~/components/field-wrapper'\nimport { useFieldError, useFormCustomContext } from '~/components/form'\nimport { Select, SelectProps } from '~/components/select'\n\ntype SelectFieldProps = SelectProps & FieldElementWrapperProps\n\nexport const SelectField = ({\n  css = undefined,\n  hideLabel,\n  children,\n  name,\n  label,\n  validation,\n  prompt,\n  description,\n  appearance,\n  ...remainingProps\n}: SelectFieldProps) => {\n  const { register } = useFormContext()\n  const context = useFormCustomContext()\n  const { error } = useFieldError(name)\n  const ref = validation ? register(validation) : register\n  const formAppearance = context?.appearance || appearance\n\n  return (\n    <FieldWrapper\n      css={css}\n      description={description}\n      error={error}\n      fieldId={name}\n      hideLabel={hideLabel}\n      label={label}\n      prompt={prompt}\n      required={Boolean(validation?.required)}\n      appearance={formAppearance}\n    >\n      <Select\n        name={name}\n        id={name}\n        appearance={formAppearance}\n        {...remainingProps}\n        ref={ref}\n        {...(error && { state: 'error' })}\n      >\n        {children}\n      </Select>\n    </FieldWrapper>\n  )\n}\n\nSelectField.displayName = 'SelectField'\n"],"names":["SelectField","css","hideLabel","children","name","label","validation","prompt","description","appearance","remainingProps","register","useFormContext","context","useFormCustomContext","error","useFieldError","ref","formAppearance","React","FieldWrapper","Select"],"mappings":"6XAYa,MAAAA,EAAc,CAAC,CAC1B,IAAAC,EAAM,OACN,UAAAC,EACA,SAAAC,EACA,KAAAC,EACA,MAAAC,EACA,WAAAC,EACA,OAAAC,EACA,YAAAC,EACA,WAAAC,KACGC,CACL,IAAwB,CACtB,KAAM,CAAE,SAAAC,CAAS,EAAIC,EAAe,EAC9BC,EAAUC,EAAAA,EACV,CAAE,MAAAC,CAAM,EAAIC,EAAcZ,CAAI,EAC9Ba,EAAMX,EAAaK,EAASL,CAAU,EAAIK,EAC1CO,GAAiBL,GAAA,KAAA,OAAAA,EAAS,aAAcJ,EAE9C,OACEU,EAAA,cAACC,EAAA,CACC,IAAKnB,EACL,YAAaO,EACb,MAAOO,EACP,QAASX,EACT,UAAWF,EACX,MAAOG,EACP,OAAQE,EACR,SAAU,QAAQD,GAAA,KAAAA,OAAAA,EAAY,QAAQ,EACtC,WAAYY,CAAAA,EAEZC,EAAA,cAACE,EAAA,CACC,KAAMjB,EACN,GAAIA,EACJ,WAAYc,EACX,GAAGR,EACJ,IAAKO,EACJ,GAAIF,GAAS,CAAE,MAAO,OAAQ,CAAA,EAE9BZ,CACH,CACF,CAEJ,EAEAH,EAAY,YAAc"}
+{"version":3,"file":"SelectField.js","sources":["../../../src/components/select-field/SelectField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n  FieldElementWrapperProps,\n  FieldWrapper\n} from '~/components/field-wrapper'\nimport { useFieldError, useFormCustomContext } from '~/components/form'\nimport { Select, SelectProps } from '~/components/select'\n\ntype SelectFieldProps = SelectProps & FieldElementWrapperProps\n\nexport const SelectField = ({\n  className,\n  hideLabel,\n  children,\n  name,\n  label,\n  validation,\n  prompt,\n  description,\n  appearance,\n  ...remainingProps\n}: SelectFieldProps) => {\n  const { register } = useFormContext()\n  const context = useFormCustomContext()\n  const { error } = useFieldError(name)\n  const ref = validation ? register(validation) : register\n  const formAppearance = context?.appearance || appearance\n\n  return (\n    <FieldWrapper\n      className={className}\n      description={description}\n      error={error}\n      fieldId={name}\n      hideLabel={hideLabel}\n      label={label}\n      prompt={prompt}\n      required={Boolean(validation?.required)}\n      appearance={formAppearance}\n    >\n      <Select\n        name={name}\n        id={name}\n        appearance={formAppearance}\n        {...remainingProps}\n        ref={ref}\n        {...(error && { state: 'error' })}\n      >\n        {children}\n      </Select>\n    </FieldWrapper>\n  )\n}\n\nSelectField.displayName = 'SelectField'\n"],"names":["SelectField","className","hideLabel","children","name","label","validation","prompt","description","appearance","remainingProps","register","useFormContext","context","useFormCustomContext","error","useFieldError","ref","formAppearance","React","FieldWrapper","Select"],"mappings":"6XAYa,MAAAA,EAAc,CAAC,CAC1B,UAAAC,EACA,UAAAC,EACA,SAAAC,EACA,KAAAC,EACA,MAAAC,EACA,WAAAC,EACA,OAAAC,EACA,YAAAC,EACA,WAAAC,EACA,GAAGC,CACL,IAAwB,CACtB,KAAM,CAAE,SAAAC,CAAS,EAAIC,EAAAA,EACfC,EAAUC,EAAqB,EAC/B,CAAE,MAAAC,CAAM,EAAIC,EAAcZ,CAAI,EAC9Ba,EAAMX,EAAaK,EAASL,CAAU,EAAIK,EAC1CO,GAAiBL,GAAA,KAAAA,OAAAA,EAAS,aAAcJ,EAE9C,OACEU,EAAA,cAACC,EAAA,CACC,UAAWnB,EACX,YAAaO,EACb,MAAOO,EACP,QAASX,EACT,UAAWF,EACX,MAAOG,EACP,OAAQE,EACR,SAAU,CAAA,EAAQD,GAAA,MAAAA,EAAY,UAC9B,WAAYY,CAAAA,EAEZC,EAAA,cAACE,EAAA,CACC,KAAMjB,EACN,GAAIA,EACJ,WAAYc,EACX,GAAGR,EACJ,IAAKO,EACJ,GAAIF,GAAS,CAAE,MAAO,OAAQ,CAAA,EAE9BZ,CACH,CACF,CAEJ,EAEAH,EAAY,YAAc"}

package/dist/components/side-bar/SideBar.js

@@ -1,2 +1,2 @@
-import t from"react";import{useInteractOutside as f,useFocusWithin as v,useHover as y}from"react-aria";import{createTheme as B,styled as r}from"../../stitches.js";import{SideBarBrand as g,SideBarBrandLogo as S,SideBarBrandName as w,SideBarHeader as E,SideBarBody as H,SideBarFooter as N}from"./SideBarComponents.js";import{SideBarContext as $}from"./SideBarContext.js";const n="5.5rem",D="16rem",F=B({colors:{background:"white",text:"$grey800",border:"$grey200"}}),I=r("div",{position:"sticky",zIndex:1,variants:{type:{static:{},expandable:{width:n}}}}),W=r("div",{bg:"$background",borderRight:"1px solid $border",boxShadow:"4px 0 4px -2px rgba(31, 31, 31, 0)",display:"flex",flexDirection:"column",height:"100%",overflow:"hidden",willChange:"width","@allowMotion":{transition:"width 125ms ease-out, box-shadow 125ms ease-out"},variants:{type:{static:{},expandable:{}},isExpanded:{true:{width:D},false:{width:n}}},compoundVariants:[{isExpanded:!0,type:"expandable",css:{boxShadow:"4px 0 4px -2px rgba(31, 31, 31, 0.1)"}}]}),k=r("div",{bottom:0,left:0,position:"absolute",right:0,top:0,transition:"all",variants:{isVisible:{true:{visibility:"visible",transitionDelay:"0s"},false:{visibility:"hidden",transitionDelay:"50ms"}}}}),e=({className:l=F,children:p,type:a="expandable",offset:s="0px",css:c,...h})=>{const[o,i]=t.useState(a==="static"),d=t.useRef(null);f({ref:d,onInteractOutside:()=>i(!1)});const{focusWithinProps:m}=v({onFocusWithin:()=>i(!0),onBlurWithin:()=>i(!1)}),{hoverProps:x,isHovered:u}=y({onHoverStart:()=>i(!0),onHoverEnd:()=>i(!1)}),b=a==="expandable"?{...m,...x,onTouchEnd:()=>i(!0),ref:d}:{};return t.createElement($.Provider,{value:{isExpanded:o}},t.createElement(I,{...h,className:l,css:{height:`calc(100svh - ${s})`,top:s,...c},type:a},t.createElement(W,{...b,isExpanded:o,type:a},p,a==="expandable"&&t.createElement(k,{isVisible:!u&&!o}))))};e.Brand=g,e.BrandLogo=S,e.BrandName=w,e.Header=E,e.Body=H,e.Footer=N,e.displayName="SideBar";export{e as SideBar};
+import x from"clsx";import a from"react";import{useInteractOutside as v,useFocusWithin as B,useHover as y}from"react-aria";import{styled as i,Theme as g}from"../../styled.js";import{SideBarBrand as w,SideBarBrandLogo as E,SideBarBrandName as S,SideBarHeader as _,SideBarBody as H,SideBarFooter as N}from"./SideBarComponents.js";import{SideBarContext as k}from"./SideBarContext.js";const F={"--background":"white","--text":"var(--color-grey-800)","--border":"var(--color-grey-200)"},W=i("div",{base:["sticky","z-1"],variants:{type:{static:[],expandable:["w-22"]}}}),P=i("div",{base:["bg-(--background)","border-r","border-r-(--border)","shadow-[4px_0_4px_-2px_rgba(31,31,31,0)]","flex","flex-col","h-full","overflow-hidden","will-change-width","motion-safe:duration-125","motion-safe:ease-out","motion-safe:transition-shadow","motion-safe:transition-[width]"],variants:{type:{static:[],expandable:[]},isExpanded:{true:["w-[16rem]"],false:["w-22"]}},compoundVariants:[{isExpanded:!0,type:"expandable",class:["shadow-[4px_0_4px_-2px_rgba(31,31,31,0.1)]"]}]}),T=i("div",{base:["bottom-0","left-0","absolute","right-0","top-0","transition-all"],variants:{isVisible:{true:["delay-0","visible"],false:["delay-50","invisible"]}}}),e=({theme:n,className:d,children:l,type:t="expandable",offset:p="0px",style:m,...c})=>{const[o,r]=a.useState(t==="static"),s=a.useRef(null);v({ref:s,onInteractOutside:()=>r(!1)});const{focusWithinProps:f}=B({onFocusWithin:()=>r(!0),onBlurWithin:()=>r(!1)}),{hoverProps:u,isHovered:b}=y({onHoverStart:()=>r(!0),onHoverEnd:()=>r(!1)}),h=t==="expandable"?{...f,...u,onTouchEnd:()=>r(!0),ref:s}:{};return a.createElement(k.Provider,{value:{isExpanded:o}},a.createElement(g,{theme:n||F},a.createElement(W,{...c,style:{...m,"--offset":p},type:t,className:x("h-[calc(100svh-var(--offset))]","top-(--offset)",d)},a.createElement(P,{...h,isExpanded:o,type:t},l,t==="expandable"&&a.createElement(T,{isVisible:!b&&!o})))))};e.Brand=w,e.BrandLogo=E,e.BrandName=S,e.Header=_,e.Body=H,e.Footer=N,e.displayName="SideBar";export{e as SideBar};
 //# sourceMappingURL=SideBar.js.map

package/dist/components/side-bar/SideBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"SideBar.js","sources":["../../../src/components/side-bar/SideBar.tsx"],"sourcesContent":["import React from 'react'\nimport { useFocusWithin, useHover, useInteractOutside } from 'react-aria'\n\nimport { createTheme, styled } from '~/stitches'\n\nimport {\n  SideBarBody,\n  SideBarBrand,\n  SideBarBrandLogo,\n  SideBarBrandName,\n  SideBarFooter,\n  SideBarHeader\n} from './SideBarComponents'\nimport { SideBarContext } from './SideBarContext'\n\nconst SIZE_COLLAPSED = '5.5rem'\nconst SIZE_EXPANDED = '16rem'\n\nconst light = createTheme({\n  colors: {\n    background: 'white',\n    text: '$grey800',\n    border: '$grey200'\n  }\n})\n\nconst Root = styled('div', {\n  position: 'sticky',\n  zIndex: 1,\n  variants: {\n    type: {\n      static: {},\n      expandable: { width: SIZE_COLLAPSED }\n    }\n  }\n})\n\nconst Content = styled('div', {\n  bg: '$background',\n  borderRight: '1px solid $border',\n  boxShadow: '4px 0 4px -2px rgba(31, 31, 31, 0)',\n  display: 'flex',\n  flexDirection: 'column',\n  height: '100%',\n  overflow: 'hidden',\n  willChange: 'width',\n  '@allowMotion': {\n    transition: 'width 125ms ease-out, box-shadow 125ms ease-out'\n  },\n  variants: {\n    type: {\n      static: {},\n      expandable: {}\n    },\n    isExpanded: {\n      true: { width: SIZE_EXPANDED },\n      false: { width: SIZE_COLLAPSED }\n    }\n  },\n  compoundVariants: [\n    {\n      isExpanded: true,\n      type: 'expandable',\n      css: { boxShadow: '4px 0 4px -2px rgba(31, 31, 31, 0.1)' }\n    }\n  ]\n})\n\nconst PointerBlocker = styled('div', {\n  bottom: 0,\n  left: 0,\n  position: 'absolute',\n  right: 0,\n  top: 0,\n  transition: 'all',\n  variants: {\n    isVisible: {\n      true: { visibility: 'visible', transitionDelay: '0s' },\n      false: { visibility: 'hidden', transitionDelay: '50ms' }\n    }\n  }\n})\n\ntype SideBarProps = React.ComponentProps<typeof Root> & {\n  offset?: number | string\n}\n\nexport const SideBar = ({\n  className = light,\n  children,\n  type = 'expandable',\n  offset = '0px',\n  css,\n  ...rest\n}: SideBarProps) => {\n  const [isExpanded, setIsExpanded] = React.useState(type === 'static')\n  const ref = React.useRef<HTMLDivElement>(null)\n\n  useInteractOutside({\n    ref,\n    onInteractOutside: () => setIsExpanded(false)\n  })\n  const { focusWithinProps } = useFocusWithin({\n    onFocusWithin: () => setIsExpanded(true),\n    onBlurWithin: () => setIsExpanded(false)\n  })\n  const { hoverProps, isHovered } = useHover({\n    onHoverStart: () => setIsExpanded(true),\n    onHoverEnd: () => setIsExpanded(false)\n  })\n  const touchProps = {\n    onTouchEnd: () => setIsExpanded(true)\n  }\n\n  const expandableProps =\n    type === 'expandable'\n      ? {\n          ...focusWithinProps,\n          ...hoverProps,\n          ...touchProps,\n          ref\n        }\n      : {}\n\n  return (\n    <SideBarContext.Provider value={{ isExpanded }}>\n      <Root\n        {...rest}\n        className={className}\n        css={{ height: `calc(100svh - ${offset})`, top: offset, ...css }}\n        type={type}\n      >\n        <Content {...expandableProps} isExpanded={isExpanded} type={type}>\n          {children}\n          {/**\n           * When the SideBar is collapsed, ensure that the initial tap event\n           * is used to expand the nav first before making the items available\n           */}\n          {type === 'expandable' && (\n            <PointerBlocker isVisible={!isHovered && !isExpanded} />\n          )}\n        </Content>\n      </Root>\n    </SideBarContext.Provider>\n  )\n}\n\nSideBar.Brand = SideBarBrand\nSideBar.BrandLogo = SideBarBrandLogo\nSideBar.BrandName = SideBarBrandName\nSideBar.Header = SideBarHeader\nSideBar.Body = SideBarBody\nSideBar.Footer = SideBarFooter\n\nSideBar.displayName = 'SideBar'\n"],"names":["SIZE_COLLAPSED","SIZE_EXPANDED","light","createTheme","Root","styled","Content","PointerBlocker","SideBar","className","children","type","offset","css","rest","isExpanded","setIsExpanded","React","ref","useInteractOutside","focusWithinProps","useFocusWithin","hoverProps","isHovered","useHover","expandableProps","SideBarContext","SideBarBrand","SideBarBrandLogo","SideBarBrandName","SideBarHeader","SideBarBody","SideBarFooter"],"mappings":"iXAeA,MAAMA,EAAiB,SACjBC,EAAgB,QAEhBC,EAAQC,EAAY,CACxB,OAAQ,CACN,WAAY,QACZ,KAAM,WACN,OAAQ,UACV,CACF,CAAC,EAEKC,EAAOC,EAAO,MAAO,CACzB,SAAU,SACV,OAAQ,EACR,SAAU,CACR,KAAM,CACJ,OAAQ,CACR,EAAA,WAAY,CAAE,MAAOL,CAAe,CACtC,CACF,CACF,CAAC,EAEKM,EAAUD,EAAO,MAAO,CAC5B,GAAI,cACJ,YAAa,oBACb,UAAW,qCACX,QAAS,OACT,cAAe,SACf,OAAQ,OACR,SAAU,SACV,WAAY,QACZ,eAAgB,CACd,WAAY,iDACd,EACA,SAAU,CACR,KAAM,CACJ,OAAQ,CAAA,EACR,WAAY,CACd,CAAA,EACA,WAAY,CACV,KAAM,CAAE,MAAOJ,CAAc,EAC7B,MAAO,CAAE,MAAOD,CAAe,CACjC,CACF,EACA,iBAAkB,CAChB,CACE,WAAY,GACZ,KAAM,aACN,IAAK,CAAE,UAAW,sCAAuC,CAC3D,CACF,CACF,CAAC,EAEKO,EAAiBF,EAAO,MAAO,CACnC,OAAQ,EACR,KAAM,EACN,SAAU,WACV,MAAO,EACP,IAAK,EACL,WAAY,MACZ,SAAU,CACR,UAAW,CACT,KAAM,CAAE,WAAY,UAAW,gBAAiB,IAAK,EACrD,MAAO,CAAE,WAAY,SAAU,gBAAiB,MAAO,CACzD,CACF,CACF,CAAC,EAMYG,EAAU,CAAC,CACtB,UAAAC,EAAYP,EACZ,SAAAQ,EACA,KAAAC,EAAO,aACP,OAAAC,EAAS,MACT,IAAAC,KACGC,CACL,IAAoB,CAClB,KAAM,CAACC,EAAYC,CAAa,EAAIC,EAAM,SAASN,IAAS,QAAQ,EAC9DO,EAAMD,EAAM,OAAuB,IAAI,EAE7CE,EAAmB,CACjB,IAAAD,EACA,kBAAmB,IAAMF,EAAc,EAAK,CAC9C,CAAC,EACD,KAAM,CAAE,iBAAAI,CAAiB,EAAIC,EAAe,CAC1C,cAAe,IAAML,EAAc,EAAI,EACvC,aAAc,IAAMA,EAAc,EAAK,CACzC,CAAC,EACK,CAAE,WAAAM,EAAY,UAAAC,CAAU,EAAIC,EAAS,CACzC,aAAc,IAAMR,EAAc,EAAI,EACtC,WAAY,IAAMA,EAAc,EAAK,CACvC,CAAC,EAKKS,EACJd,IAAS,aACL,CACE,GAAGS,EACH,GAAGE,EAPT,WAAY,IAAMN,EAAc,EAAI,EAS9B,IAAAE,CACF,EACA,CAEN,EAAA,OACED,EAAA,cAACS,EAAe,SAAf,CAAwB,MAAO,CAAE,WAAAX,CAAW,CAC3CE,EAAAA,EAAA,cAACb,EAAA,CACE,GAAGU,EACJ,UAAWL,EACX,IAAK,CAAE,OAAQ,iBAAiBG,KAAW,IAAKA,EAAQ,GAAGC,CAAI,EAC/D,KAAMF,GAENM,EAAA,cAACX,EAAA,CAAS,GAAGmB,EAAiB,WAAYV,EAAY,KAAMJ,CAAAA,EACzDD,EAKAC,IAAS,cACRM,EAAA,cAACV,EAAA,CAAe,UAAW,CAACgB,GAAa,CAACR,CAAAA,CAAY,CAE1D,CACF,CACF,CAEJ,EAEAP,EAAQ,MAAQmB,EAChBnB,EAAQ,UAAYoB,EACpBpB,EAAQ,UAAYqB,EACpBrB,EAAQ,OAASsB,EACjBtB,EAAQ,KAAOuB,EACfvB,EAAQ,OAASwB,EAEjBxB,EAAQ,YAAc"}
+{"version":3,"file":"SideBar.js","sources":["../../../src/components/side-bar/SideBar.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\nimport { useFocusWithin, useHover, useInteractOutside } from 'react-aria'\n\nimport { styled, Theme } from '~/styled'\n\nimport {\n  SideBarBody,\n  SideBarBrand,\n  SideBarBrandLogo,\n  SideBarBrandName,\n  SideBarFooter,\n  SideBarHeader\n} from './SideBarComponents'\nimport { SideBarContext } from './SideBarContext'\n\nconst light = {\n  '--background': 'white',\n  '--text': 'var(--color-grey-800)',\n  '--border': 'var(--color-grey-200)'\n}\n\nconst Root = styled('div', {\n  base: ['sticky', 'z-1'],\n  variants: {\n    type: {\n      static: [],\n      expandable: ['w-22']\n    }\n  }\n})\n\nconst Content = styled('div', {\n  base: [\n    'bg-(--background)',\n    'border-r',\n    'border-r-(--border)',\n    'shadow-[4px_0_4px_-2px_rgba(31,31,31,0)]',\n    'flex',\n    'flex-col',\n    'h-full',\n    'overflow-hidden',\n    'will-change-width',\n    'motion-safe:duration-125',\n    'motion-safe:ease-out',\n    'motion-safe:transition-shadow',\n    'motion-safe:transition-[width]'\n  ],\n  variants: {\n    type: {\n      static: [],\n      expandable: []\n    },\n    isExpanded: {\n      true: ['w-[16rem]'],\n      false: ['w-22']\n    }\n  },\n  compoundVariants: [\n    {\n      isExpanded: true,\n      type: 'expandable',\n      class: ['shadow-[4px_0_4px_-2px_rgba(31,31,31,0.1)]']\n    }\n  ]\n})\n\nconst PointerBlocker = styled('div', {\n  base: [\n    'bottom-0',\n    'left-0',\n    'absolute',\n    'right-0',\n    'top-0',\n    'transition-all'\n  ],\n  variants: {\n    isVisible: {\n      true: ['delay-0', 'visible'],\n      false: ['delay-50', 'invisible']\n    }\n  }\n})\n\ntype SideBarProps = React.ComponentProps<typeof Root> & {\n  className?: string\n  offset?: number | string\n} & React.ComponentProps<typeof Theme>\n\nexport const SideBar = ({\n  theme,\n  className,\n  children,\n  type = 'expandable',\n  offset = '0px',\n  style,\n  ...rest\n}: SideBarProps) => {\n  const [isExpanded, setIsExpanded] = React.useState(type === 'static')\n  const ref = React.useRef<HTMLDivElement>(null)\n\n  useInteractOutside({\n    ref,\n    onInteractOutside: () => setIsExpanded(false)\n  })\n  const { focusWithinProps } = useFocusWithin({\n    onFocusWithin: () => setIsExpanded(true),\n    onBlurWithin: () => setIsExpanded(false)\n  })\n  const { hoverProps, isHovered } = useHover({\n    onHoverStart: () => setIsExpanded(true),\n    onHoverEnd: () => setIsExpanded(false)\n  })\n  const touchProps = {\n    onTouchEnd: () => setIsExpanded(true)\n  }\n\n  const expandableProps =\n    type === 'expandable'\n      ? {\n          ...focusWithinProps,\n          ...hoverProps,\n          ...touchProps,\n          ref\n        }\n      : {}\n\n  return (\n    <SideBarContext.Provider value={{ isExpanded }}>\n      <Theme theme={theme || light}>\n        <Root\n          {...rest}\n          style={{ ...style, '--offset': offset }}\n          type={type}\n          className={clsx(\n            'h-[calc(100svh-var(--offset))]',\n            'top-(--offset)',\n            className\n          )}\n        >\n          <Content {...expandableProps} isExpanded={isExpanded} type={type}>\n            {children}\n            {/**\n             * When the SideBar is collapsed, ensure that the initial tap event\n             * is used to expand the nav first before making the items available\n             */}\n            {type === 'expandable' && (\n              <PointerBlocker isVisible={!isHovered && !isExpanded} />\n            )}\n          </Content>\n        </Root>\n      </Theme>\n    </SideBarContext.Provider>\n  )\n}\n\nSideBar.Brand = SideBarBrand\nSideBar.BrandLogo = SideBarBrandLogo\nSideBar.BrandName = SideBarBrandName\nSideBar.Header = SideBarHeader\nSideBar.Body = SideBarBody\nSideBar.Footer = SideBarFooter\n\nSideBar.displayName = 'SideBar'\n"],"names":["light","Root","styled","Content","PointerBlocker","SideBar","theme","className","children","type","offset","style","rest","isExpanded","setIsExpanded","React","ref","useInteractOutside","focusWithinProps","useFocusWithin","hoverProps","isHovered","useHover","expandableProps","SideBarContext","Theme","clsx","SideBarBrand","SideBarBrandLogo","SideBarBrandName","SideBarHeader","SideBarBody","SideBarFooter"],"mappings":"6XAgBA,MAAMA,EAAQ,CACZ,eAAgB,QAChB,SAAU,wBACV,WAAY,uBACd,EAEMC,EAAOC,EAAO,MAAO,CACzB,KAAM,CAAC,SAAU,KAAK,EACtB,SAAU,CACR,KAAM,CACJ,OAAQ,CACR,EAAA,WAAY,CAAC,MAAM,CACrB,CACF,CACF,CAAC,EAEKC,EAAUD,EAAO,MAAO,CAC5B,KAAM,CACJ,oBACA,WACA,sBACA,2CACA,OACA,WACA,SACA,kBACA,oBACA,2BACA,uBACA,gCACA,gCACF,EACA,SAAU,CACR,KAAM,CACJ,OAAQ,CAAA,EACR,WAAY,CAAA,CACd,EACA,WAAY,CACV,KAAM,CAAC,WAAW,EAClB,MAAO,CAAC,MAAM,CAChB,CACF,EACA,iBAAkB,CAChB,CACE,WAAY,GACZ,KAAM,aACN,MAAO,CAAC,4CAA4C,CACtD,CACF,CACF,CAAC,EAEKE,EAAiBF,EAAO,MAAO,CACnC,KAAM,CACJ,WACA,SACA,WACA,UACA,QACA,gBACF,EACA,SAAU,CACR,UAAW,CACT,KAAM,CAAC,UAAW,SAAS,EAC3B,MAAO,CAAC,WAAY,WAAW,CACjC,CACF,CACF,CAAC,EAOYG,EAAU,CAAC,CACtB,MAAAC,EACA,UAAAC,EACA,SAAAC,EACA,KAAAC,EAAO,aACP,OAAAC,EAAS,MACT,MAAAC,EACA,GAAGC,CACL,IAAoB,CAClB,KAAM,CAACC,EAAYC,CAAa,EAAIC,EAAM,SAASN,IAAS,QAAQ,EAC9DO,EAAMD,EAAM,OAAuB,IAAI,EAE7CE,EAAmB,CACjB,IAAAD,EACA,kBAAmB,IAAMF,EAAc,EAAK,CAC9C,CAAC,EACD,KAAM,CAAE,iBAAAI,CAAiB,EAAIC,EAAe,CAC1C,cAAe,IAAML,EAAc,EAAI,EACvC,aAAc,IAAMA,EAAc,EAAK,CACzC,CAAC,EACK,CAAE,WAAAM,EAAY,UAAAC,CAAU,EAAIC,EAAS,CACzC,aAAc,IAAMR,EAAc,EAAI,EACtC,WAAY,IAAMA,EAAc,EAAK,CACvC,CAAC,EAKKS,EACJd,IAAS,aACL,CACE,GAAGS,EACH,GAAGE,EAPT,WAAY,IAAMN,EAAc,EAAI,EAS9B,IAAAE,CACF,EACA,CAAA,EAEN,OACED,EAAA,cAACS,EAAe,SAAf,CAAwB,MAAO,CAAE,WAAAX,CAAW,CAAA,EAC3CE,EAAA,cAACU,EAAA,CAAM,MAAOnB,GAASN,GACrBe,EAAA,cAACd,EAAA,CACE,GAAGW,EACJ,MAAO,CAAE,GAAGD,EAAO,WAAYD,CAAO,EACtC,KAAMD,EACN,UAAWiB,EACT,iCACA,iBACAnB,CACF,CAEAQ,EAAAA,EAAA,cAACZ,EAAA,CAAS,GAAGoB,EAAiB,WAAYV,EAAY,KAAMJ,GACzDD,EAKAC,IAAS,cACRM,EAAA,cAACX,EAAA,CAAe,UAAW,CAACiB,GAAa,CAACR,CAAY,CAAA,CAE1D,CACF,CACF,CACF,CAEJ,EAEAR,EAAQ,MAAQsB,EAChBtB,EAAQ,UAAYuB,EACpBvB,EAAQ,UAAYwB,EACpBxB,EAAQ,OAASyB,EACjBzB,EAAQ,KAAO0B,EACf1B,EAAQ,OAAS2B,EAEjB3B,EAAQ,YAAc"}

package/dist/components/side-bar/SideBarComponents.js

@@ -1,2 +1,2 @@
-import{styled as o}from"../../stitches.js";import{Image as e}from"../image/Image.js";import{Text as r}from"../text/Text.js";const d=o("div",{borderBottom:"1px solid $border",p:"$4",width:"100%"}),t=o("div",{flexGrow:1,overflowY:"auto",overflowX:"hidden",p:"$4",width:"100%"}),i=o("div",{borderTop:"1px solid $border",p:"$4",width:"100%"}),a=o("a",{alignItems:"flex-end",color:"$text",display:"flex",gap:"$4",textDecoration:"none","&:hover, &:focus":{textDecoration:"none"}}),n=e,p=o(r,{color:"$text",whiteSpace:"nowrap"});export{t as SideBarBody,a as SideBarBrand,n as SideBarBrandLogo,p as SideBarBrandName,i as SideBarFooter,d as SideBarHeader};
+import{styled as e}from"../../styled.js";import{Image as r}from"../image/Image.js";import{Text as o}from"../text/Text.js";const d=e("div",{base:["border-b","border-b-(--border)","p-4","w-full"]}),a=e("div",{base:["grow","overflow-y-auto","overflow-x-hidden","p-4","w-full"]}),t=e("div",{base:["border-t","border-t-(--border)","p-4","w-full"]}),i=e("a",{base:["items-end","text-text","flex","gap-4","no-underline","hover:no-underline","focus:no-underline"]}),n=r,b=e(o,{base:["text-text","whitespace-nowrap"]});export{a as SideBarBody,i as SideBarBrand,n as SideBarBrandLogo,b as SideBarBrandName,t as SideBarFooter,d as SideBarHeader};
 //# sourceMappingURL=SideBarComponents.js.map

package/dist/components/side-bar/SideBarComponents.js.map

@@ -1 +1 @@
-{"version":3,"file":"SideBarComponents.js","sources":["../../../src/components/side-bar/SideBarComponents.tsx"],"sourcesContent":["import { styled } from '~/stitches'\n\nimport { Image } from '../image'\nimport { Text } from '../text'\n\nexport const SideBarHeader = styled('div', {\n  borderBottom: '1px solid $border',\n  p: '$4',\n  width: '100%'\n})\n\nexport const SideBarBody = styled('div', {\n  flexGrow: 1,\n  overflowY: 'auto',\n  overflowX: 'hidden',\n  p: '$4',\n  width: '100%'\n})\n\nexport const SideBarFooter = styled('div', {\n  borderTop: '1px solid $border',\n  p: '$4',\n  width: '100%'\n})\n\nexport const SideBarBrand = styled('a', {\n  alignItems: 'flex-end',\n  color: '$text',\n  display: 'flex',\n  gap: '$4',\n  textDecoration: 'none',\n  '&:hover, &:focus': {\n    textDecoration: 'none'\n  }\n})\n\nexport const SideBarBrandLogo = Image\n\nexport const SideBarBrandName = styled(Text, {\n  color: '$text',\n  whiteSpace: 'nowrap'\n})\n"],"names":["SideBarHeader","styled","SideBarBody","SideBarFooter","SideBarBrand","SideBarBrandLogo","Image","SideBarBrandName","Text"],"mappings":"4HAKa,MAAAA,EAAgBC,EAAO,MAAO,CACzC,aAAc,oBACd,EAAG,KACH,MAAO,MACT,CAAC,EAEYC,EAAcD,EAAO,MAAO,CACvC,SAAU,EACV,UAAW,OACX,UAAW,SACX,EAAG,KACH,MAAO,MACT,CAAC,EAEYE,EAAgBF,EAAO,MAAO,CACzC,UAAW,oBACX,EAAG,KACH,MAAO,MACT,CAAC,EAEYG,EAAeH,EAAO,IAAK,CACtC,WAAY,WACZ,MAAO,QACP,QAAS,OACT,IAAK,KACL,eAAgB,OAChB,mBAAoB,CAClB,eAAgB,MAClB,CACF,CAAC,EAEYI,EAAmBC,EAEnBC,EAAmBN,EAAOO,EAAM,CAC3C,MAAO,QACP,WAAY,QACd,CAAC"}
+{"version":3,"file":"SideBarComponents.js","sources":["../../../src/components/side-bar/SideBarComponents.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nimport { Image } from '../image'\nimport { Text } from '../text'\n\nexport const SideBarHeader = styled('div', {\n  base: ['border-b', 'border-b-(--border)', 'p-4', 'w-full']\n})\n\nexport const SideBarBody = styled('div', {\n  base: ['grow', 'overflow-y-auto', 'overflow-x-hidden', 'p-4', 'w-full']\n})\n\nexport const SideBarFooter = styled('div', {\n  base: ['border-t', 'border-t-(--border)', 'p-4', 'w-full']\n})\n\nexport const SideBarBrand = styled('a', {\n  base: [\n    'items-end',\n    'text-text',\n    'flex',\n    'gap-4',\n    'no-underline',\n    'hover:no-underline',\n    'focus:no-underline'\n  ]\n})\n\nexport const SideBarBrandLogo = Image\n\nexport const SideBarBrandName = styled(Text, {\n  base: ['text-text', 'whitespace-nowrap']\n})\n"],"names":["SideBarHeader","styled","SideBarBody","SideBarFooter","SideBarBrand","SideBarBrandLogo","Image","SideBarBrandName","Text"],"mappings":"0HAKa,MAAAA,EAAgBC,EAAO,MAAO,CACzC,KAAM,CAAC,WAAY,sBAAuB,MAAO,QAAQ,CAC3D,CAAC,EAEYC,EAAcD,EAAO,MAAO,CACvC,KAAM,CAAC,OAAQ,kBAAmB,oBAAqB,MAAO,QAAQ,CACxE,CAAC,EAEYE,EAAgBF,EAAO,MAAO,CACzC,KAAM,CAAC,WAAY,sBAAuB,MAAO,QAAQ,CAC3D,CAAC,EAEYG,EAAeH,EAAO,IAAK,CACtC,KAAM,CACJ,YACA,YACA,OACA,QACA,eACA,qBACA,oBACF,CACF,CAAC,EAEYI,EAAmBC,EAEnBC,EAAmBN,EAAOO,EAAM,CAC3C,KAAM,CAAC,YAAa,mBAAmB,CACzC,CAAC"}

package/dist/components/slider/Slider.js

@@ -1,2 +1,2 @@
-import{Track as $,Root as b,Range as g,Thumb as y}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{disabledStyle as o}from"../../utilities/style/disabledStyle.js";import{SliderSteps as S}from"./SliderSteps.js";import{SliderValue as x}from"./SliderValue.js";const a=t($,{borderRadius:"$round",flexGrow:1,position:"relative",'&[data-orientation="horizontal"]':{height:"$space$1"},'&[data-orientation="vertical"]':{width:"$space$1"}}),R=t(b,{alignItems:"center",display:"flex",position:"relative",touchAction:"none",userSelect:"none",cursor:"pointer",'&[data-orientation="horizontal"]':{height:"$1"},'&[data-orientation="vertical"]':{flexDirection:"column",width:"$1"},"&[disabled]":o,variants:{theme:{light:{[`${a}`]:{bg:"#fff"}},tonal:{[`${a}`]:{bg:"$grey600"}}}}}),E=t(g,{bg:"$primary800",borderRadius:"$round",height:"100%",position:"absolute","&[disabled]":o}),k=t(y,{bg:"$primary900",borderRadius:"$round",display:"block",size:"$1","&:hover":{bg:"$primary1000"},"&:focus":{outline:"2px solid $primary900",outlineOffset:"2px"},"&[disabled]":o}),r=e.forwardRef(({value:l,defaultValue:n,min:m=0,max:d=100,theme:s="tonal",css:p,children:u,...c},f)=>{const i=l||n;return e.createElement(v,{css:p},e.createElement(R,{theme:s,defaultValue:n,value:l,min:m,max:d,ref:f,...c},e.createElement(a,null,e.createElement(E,null)),(i==null?void 0:i.length)&&i.map((w,h)=>e.createElement(k,{key:`thumb${h}`}))),u)});r.Value=x,r.Steps=S,r.displayName="Slider";export{r as Slider};
+import{Track as f,Root as b,Range as h,Thumb as v}from"@radix-ui/react-slider";import*as e from"react";import{styled as o}from"../../styled.js";import{CSSWrapper as y}from"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import{SliderSteps as g}from"./SliderSteps.js";import{SliderValue as w}from"./SliderValue.js";const S=o(f,{base:["rounded-round","grow","relative","data-[orientation=horizontal]:h-1","data-[orientation=vertical]:w-1"],variants:{theme:{light:["bg-white"],tonal:["bg-grey-600"]}}}),x=o(b,{base:["items-center","flex","relative","touch-none","select-none","cursor-pointer","data-[orientation=horizontal]:h-4","data-[orientation=vertical]:flex-col","data-[orientation=vertical]:w-4","disabled:cursor-not-allowed","disabled:opacity-30"]}),E=o(h,{base:["bg-primary-800","rounded-round","h-full","absolute","disabled:cursor-not-allowed","disabled:opacity-30"]}),k=o(v,{base:["bg-primary-900","rounded-round","block","size-4","hover:bg-primary-1000","focus:outline-2","focus:outline-offset-2","focus:outline-primary-900","focus:outline-solid","disabled:cursor-not-allowed","disabled:opacity-30"]}),t=e.forwardRef(({value:r,defaultValue:l,min:i=0,max:n=100,theme:d="tonal",className:s,children:m,...u},c)=>{const a=r||l;return e.createElement(y,{className:s},e.createElement(x,{defaultValue:l,value:r,min:i,max:n,ref:c,...u},e.createElement(S,{theme:d},e.createElement(E,null)),(a==null?void 0:a.length)&&a.map((V,p)=>e.createElement(k,{key:"thumb".concat(p)}))),m)});t.Value=w,t.Steps=g,t.displayName="Slider";export{t 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, disabledStyle } 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  '&[disabled]': disabledStyle,\n  variants: {\n    theme: {\n      light: {\n        [`${StyledTrack}`]: { bg: '#fff' }\n      },\n      tonal: {\n        [`${StyledTrack}`]: { bg: '$grey600' }\n      }\n    }\n  }\n})\n\nconst StyledRange = styled(Range, {\n  bg: '$primary800',\n  borderRadius: '$round',\n  height: '100%',\n  position: 'absolute',\n  '&[disabled]': disabledStyle\n})\n\nconst StyledThumb = styled(Thumb, {\n  bg: '$primary900',\n  borderRadius: '$round',\n  display: 'block',\n  size: '$1',\n  '&:hover': {\n    bg: '$primary1000'\n  },\n  '&:focus': {\n    outline: '2px solid $primary900',\n    outlineOffset: '2px'\n  },\n  '&[disabled]': disabledStyle\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","disabledStyle","StyledRange","Range","StyledThumb","Thumb","Slider","React","value","defaultValue","min","max","theme","css","children","remainingProps","ref","values","CSSWrapper","_","i","SliderValue","SliderSteps"],"mappings":"ogBASA,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,cAAeC,EACf,SAAU,CACR,MAAO,CACL,MAAO,CACL,CAAC,GAAGL,KAAgB,CAAE,GAAI,MAAO,CACnC,EACA,MAAO,CACL,CAAC,GAAGA,KAAgB,CAAE,GAAI,UAAW,CACvC,CACF,CACF,CACF,CAAC,EAEKM,EAAcL,EAAOM,EAAO,CAChC,GAAI,cACJ,aAAc,SACd,OAAQ,OACR,SAAU,WACV,cAAeF,CACjB,CAAC,EAEKG,EAAcP,EAAOQ,EAAO,CAChC,GAAI,cACJ,aAAc,SACd,QAAS,QACT,KAAM,KACN,UAAW,CACT,GAAI,cACN,EACA,UAAW,CACT,QAAS,wBACT,cAAe,KACjB,EACA,cAAeJ,CACjB,CAAC,EASYK,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,CAAAA,EACfN,EAAA,cAACR,EAAA,CACC,MAAOa,EACP,aAAcH,EACd,MAAOD,EACP,IAAKE,EACL,IAAKC,EACL,IAAKK,EACJ,GAAGD,CAAAA,EAEJR,EAAA,cAACX,EAAA,KACCW,EAAA,cAACL,EAAA,IAAY,CACf,GACCe,GAAA,KAAA,OAAAA,EAAQ,SACPA,EAAO,IAAI,CAACE,EAAGC,IAAMb,EAAA,cAACH,EAAA,CAAY,IAAK,QAAQgB,GAAAA,CAAK,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 '~/styled'\nimport { CSSWrapper } from '~/utilities'\n\nimport { SliderSteps } from './SliderSteps'\nimport { SliderValue } from './SliderValue'\n\nconst StyledTrack = styled(Track, {\n  base: [\n    'rounded-round',\n    'grow',\n    'relative',\n    'data-[orientation=horizontal]:h-1',\n    'data-[orientation=vertical]:w-1'\n  ],\n  variants: {\n    theme: {\n      light: ['bg-white'],\n      tonal: ['bg-grey-600']\n    }\n  }\n})\n\nconst StyledSlider = styled(Root, {\n  base: [\n    'items-center',\n    'flex',\n    'relative',\n    'touch-none',\n    'select-none',\n    'cursor-pointer',\n    'data-[orientation=horizontal]:h-4',\n    'data-[orientation=vertical]:flex-col',\n    'data-[orientation=vertical]:w-4',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ]\n})\n\nconst StyledRange = styled(Range, {\n  base: [\n    'bg-primary-800',\n    'rounded-round',\n    'h-full',\n    'absolute',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ]\n})\n\nconst StyledThumb = styled(Thumb, {\n  base: [\n    'bg-primary-900',\n    'rounded-round',\n    'block',\n    'size-4',\n    'hover:bg-primary-1000',\n    'focus:outline-2',\n    'focus:outline-offset-2',\n    'focus:outline-primary-900',\n    'focus:outline-solid',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ]\n})\n\nexport type SliderProps = React.ComponentProps<typeof StyledSlider> &\n  React.ComponentProps<typeof StyledTrack>\n\ntype SliderType = ReturnType<\n  typeof React.forwardRef<HTMLSpanElement, SliderProps>\n> & {\n  Value: typeof SliderValue\n  Steps: typeof SliderSteps\n}\n\nexport const Slider = React.forwardRef<HTMLSpanElement, SliderProps>(\n  (\n    {\n      value,\n      defaultValue,\n      min = 0,\n      max = 100,\n      theme = 'tonal',\n      className,\n      children,\n      ...remainingProps\n    },\n    ref\n  ) => {\n    const values = value || defaultValue\n    return (\n      <CSSWrapper className={className}>\n        <StyledSlider\n          defaultValue={defaultValue}\n          value={value}\n          min={min}\n          max={max}\n          ref={ref}\n          {...remainingProps}\n        >\n          <StyledTrack theme={theme}>\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","className","children","remainingProps","ref","values","CSSWrapper","_","i","SliderValue","SliderSteps"],"mappings":"sXASA,MAAMA,EAAcC,EAAOC,EAAO,CAChC,KAAM,CACJ,gBACA,OACA,WACA,oCACA,iCACF,EACA,SAAU,CACR,MAAO,CACL,MAAO,CAAC,UAAU,EAClB,MAAO,CAAC,aAAa,CACvB,CACF,CACF,CAAC,EAEKC,EAAeF,EAAOG,EAAM,CAChC,KAAM,CACJ,eACA,OACA,WACA,aACA,cACA,iBACA,oCACA,uCACA,kCACA,8BACA,qBACF,CACF,CAAC,EAEKC,EAAcJ,EAAOK,EAAO,CAChC,KAAM,CACJ,iBACA,gBACA,SACA,WACA,8BACA,qBACF,CACF,CAAC,EAEKC,EAAcN,EAAOO,EAAO,CAChC,KAAM,CACJ,iBACA,gBACA,QACA,SACA,wBACA,kBACA,yBACA,4BACA,sBACA,8BACA,qBACF,CACF,CAAC,EAYYC,EAASC,EAAM,WAC1B,CACE,CACE,MAAAC,EACA,aAAAC,EACA,IAAAC,EAAM,EACN,IAAAC,EAAM,IACN,MAAAC,EAAQ,QACR,UAAAC,EACA,SAAAC,EACA,GAAGC,CACL,EACAC,IACG,CACH,MAAMC,EAAST,GAASC,EACxB,OACEF,EAAA,cAACW,EAAA,CAAW,UAAWL,CAAAA,EACrBN,EAAA,cAACP,EAAA,CACC,aAAcS,EACd,MAAOD,EACP,IAAKE,EACL,IAAKC,EACL,IAAKK,EACJ,GAAGD,CAAAA,EAEJR,EAAA,cAACV,EAAA,CAAY,MAAOe,CAClBL,EAAAA,EAAA,cAACL,EAAA,IAAY,CACf,GACCe,GAAA,KAAA,OAAAA,EAAQ,SACPA,EAAO,IAAI,CAACE,EAAGC,IAAMb,EAAA,cAACH,EAAA,CAAY,IAAK,QAAQ,OAAAgB,CAAAA,CAAAA,CAAK,CAAE,CAC1D,EACCN,CACH,CAEJ,CACF,EAEAR,EAAO,MAAQe,EACff,EAAO,MAAQgB,EAEfhB,EAAO,YAAc"}

package/dist/components/slider/SliderSteps.js

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

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

@@ -1 +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 = ({ min, max, steps = [] }: SliderStepsProps) => {\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: '$grey700'\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,EAAc,CAAC,CAAE,IAAAJ,EAAK,IAAAC,EAAK,MAAAI,EAAQ,CAAG,CAAA,IAC7CA,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,UACT,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"}
+{"version":3,"file":"SliderSteps.js","sources":["../../../src/components/slider/SliderSteps.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\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  base: ['h-3', 'mt-3', 'relative', 'w-full']\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 = ({ min, max, steps = [] }: SliderStepsProps) => {\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          style={{\n            '--left': `${getPercentValue(step.value, min, max)}%`,\n            '--translate-x': `-${getTransformValue(step.value, min, max)}%`\n          }}\n          className=\"text-grey-700 absolute left-(--left) translate-x-(--translate-x)\"\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":"wGAeA,MAAMA,EAAuBC,EAAO,MAAO,CACzC,KAAM,CAAC,MAAO,OAAQ,WAAY,QAAQ,CAC5C,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,EAAc,CAAC,CAAE,IAAAJ,EAAK,IAAAC,EAAK,MAAAI,EAAQ,CAAG,CAAA,IAC7CA,EAAM,SAAW,EAAU,KAG7BC,EAAA,cAACV,EAAA,KACES,EAAM,IAAKE,GACVD,EAAA,cAACE,EAAA,CACC,GAAG,OACH,IAAKD,EAAK,MACV,MAAO,CACL,SAAU,GAAG,OAAAT,EAAgBS,EAAK,MAAOP,EAAKC,CAAG,EAAC,GAAA,EAClD,gBAAiB,IAAI,OAAAC,EAAkBK,EAAK,MAAOP,EAAKC,CAAG,EAAC,GAAA,CAC9D,EACA,UAAU,kEAETM,EAAAA,EAAK,KACR,CACD,CACH"}

package/dist/components/slider/SliderValue.js

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

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

@@ -1 +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 = ({\n  value = [],\n  outputLabel = (value) => `Current value is ${value}`\n}: SliderValueProps) => {\n  return (\n    <Text css={{ mt: '$4', color: '$grey700', width: '100%' }}>\n      {outputLabel(value.length === 1 ? value[0] : value)}\n    </Text>\n  )\n}\n"],"names":["SliderValue","value","outputLabel","React","Text"],"mappings":"qEAYaA,EAAc,CAAC,CAC1B,MAAAC,EAAQ,CAAC,EACT,YAAAC,EAAeD,GAAU,oBAAoBA,GAC/C,IAEIE,EAAA,cAACC,EAAA,CAAK,IAAK,CAAE,GAAI,KAAM,MAAO,WAAY,MAAO,MAAO,CAAA,EACrDF,EAAYD,EAAM,SAAW,EAAIA,EAAM,GAAKA,CAAK,CACpD"}
+{"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 = ({\n  value = [],\n  outputLabel = (value) => `Current value is ${value}`\n}: SliderValueProps) => {\n  return (\n    <Text className=\"text-grey-700 mt-4 w-full\">\n      {outputLabel(value.length === 1 ? value[0] : value)}\n    </Text>\n  )\n}\n"],"names":["SliderValue","value","outputLabel","React","Text"],"mappings":"+DAYO,MAAMA,EAAc,CAAC,CAC1B,MAAAC,EAAQ,CAAA,EACR,YAAAC,EAAeD,GAAU,oBAAoB,OAAAA,EAC/C,IAEIE,EAAA,cAACC,EAAA,CAAK,UAAU,2BAAA,EACbF,EAAYD,EAAM,SAAW,EAAIA,EAAM,CAAC,EAAIA,CAAK,CACpD"}

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

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

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

@@ -1 +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 = ({\n  css,\n  hideLabel,\n  label,\n  name,\n  defaultValue,\n  value,\n  validation,\n  outputLabel,\n  min = 0,\n  max = 100,\n  steps = [],\n  ...remainingProps\n}: SliderFieldProps) => {\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} hideLabel={hideLabel}>\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","hideLabel","label","name","defaultValue","value","validation","outputLabel","min","max","steps","remainingProps","control","useFormContext","ref","onChange","innerValue","innerName","useController","React","FieldWrapper","Slider"],"mappings":"qPAiBa,MAAAA,EAAc,CAAC,CAC1B,IAAAC,EACA,UAAAC,EACA,MAAAC,EACA,KAAAC,EACA,aAAAC,EACA,MAAAC,EACA,WAAAC,EACA,YAAAC,EACA,IAAAC,EAAM,EACN,IAAAC,EAAM,IACN,MAAAC,EAAQ,CAAA,KACLC,CACL,IAAwB,CACtB,KAAM,CAAE,QAAAC,CAAQ,EAAIC,IACd,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,IAAKpB,EAAK,QAASG,EAAM,MAAOD,EAAO,UAAWD,CAAAA,EAC9DkB,EAAA,cAACE,EAAA,CACC,IAAKP,EACL,KAAMG,EACN,cAAeF,EACf,MAAOC,EACP,IAAKR,EACL,IAAKC,EACJ,GAAGE,GAEJQ,EAAA,cAACE,EAAO,MAAP,CAAa,IAAKb,EAAK,IAAKC,EAAK,MAAOC,CAAO,CAAA,EAEhDS,EAAA,cAACE,EAAO,MAAP,CAAa,MAAOL,EAAY,YAAaT,CAAa,CAAA,CAC7D,CACF,CAEJ,EAEAR,EAAY,YAAc"}
+{"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 = ({\n  className,\n  hideLabel,\n  label,\n  name,\n  defaultValue,\n  value,\n  validation,\n  outputLabel,\n  min = 0,\n  max = 100,\n  steps = [],\n  ...remainingProps\n}: SliderFieldProps) => {\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\n      className={className}\n      fieldId={name}\n      label={label}\n      hideLabel={hideLabel}\n    >\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","className","hideLabel","label","name","defaultValue","value","validation","outputLabel","min","max","steps","remainingProps","control","useFormContext","ref","onChange","innerValue","innerName","useController","React","FieldWrapper","Slider"],"mappings":"qPAiBa,MAAAA,EAAc,CAAC,CAC1B,UAAAC,EACA,UAAAC,EACA,MAAAC,EACA,KAAAC,EACA,aAAAC,EACA,MAAAC,EACA,WAAAC,EACA,YAAAC,EACA,IAAAC,EAAM,EACN,IAAAC,EAAM,IACN,MAAAC,EAAQ,CAAA,EACR,GAAGC,CACL,IAAwB,CACtB,KAAM,CAAE,QAAAC,CAAQ,EAAIC,EACd,EAAA,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,CACC,UAAWpB,EACX,QAASG,EACT,MAAOD,EACP,UAAWD,CAAAA,EAEXkB,EAAA,cAACE,EAAA,CACC,IAAKP,EACL,KAAMG,EACN,cAAeF,EACf,MAAOC,EACP,IAAKR,EACL,IAAKC,EACJ,GAAGE,GAEJQ,EAAA,cAACE,EAAO,MAAP,CAAa,IAAKb,EAAK,IAAKC,EAAK,MAAOC,CAAO,CAAA,EAEhDS,EAAA,cAACE,EAAO,MAAP,CAAa,MAAOL,EAAY,YAAaT,CAAa,CAAA,CAC7D,CACF,CAEJ,EAEAR,EAAY,YAAc"}

package/dist/components/sortable/Handle.js

@@ -1,2 +1,2 @@
-import{DragHandle as l}from"@atom-learning/icons";import*as r from"react";import{styled as s}from"../../stitches.js";import{ActionIcon as m}from"../action-icon/ActionIcon.js";import{Icon as p}from"../icon/Icon.js";const e=s(m,{color:"inherit !important",fill:"currentColor","&[disabled]":{opacity:.3,cursor:"not-allowed",["*"]:{pointerEvents:"none"}},variants:{isDragging:{true:{cursor:"grabbing"},false:{cursor:"grab"}}}}),o=r.forwardRef(({isDragging:a,size:i,...t},n)=>r.createElement(e,{ref:n,isDragging:a,appearance:"simple",hasTooltip:!1,size:i,...t},r.createElement(p,{is:l})));o.displayName="Handle";export{o as Handle,e as StyledHandle};
+import{DragHandle as s}from"@atom-learning/icons";import*as e from"react";import{styled as l}from"../../styled.js";import{ActionIcon as d}from"../action-icon/ActionIcon.js";import{Icon as m}from"../icon/Icon.js";const r=l(d,{base:["text-inherit!","fill-current","disabled:**:pointer-events-none","disabled:cursor-not-allowed","disabled:opacity-30"],variants:{isDragging:{true:["cursor-grabbing"],false:["cursor-grab"]}}}),a=e.forwardRef(({isDragging:i,size:o,...t},n)=>e.createElement(r,{ref:n,isDragging:i,appearance:"simple",hasTooltip:!1,size:o,...t},e.createElement(m,{is:s})));a.displayName="Handle";export{a as Handle,r as StyledHandle};
 //# sourceMappingURL=Handle.js.map

package/dist/components/sortable/Handle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Handle.js","sources":["../../../src/components/sortable/Handle.tsx"],"sourcesContent":["import { DragHandle } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '../../stitches'\nimport { ActionIcon } from '../action-icon'\nimport { Icon } from '../icon'\n\nexport const StyledHandle = styled(ActionIcon, {\n  color: 'inherit !important',\n  fill: 'currentColor',\n  '&[disabled]': {\n    opacity: 0.3,\n    cursor: 'not-allowed',\n    ['*']: {\n      pointerEvents: 'none'\n    }\n  },\n  variants: {\n    isDragging: {\n      true: {\n        cursor: 'grabbing'\n      },\n      false: {\n        cursor: 'grab'\n      }\n    }\n  }\n})\n\nexport type THandleProps = Omit<\n  React.ComponentProps<typeof StyledHandle>,\n  'children'\n> &\n  Pick<React.ComponentProps<typeof Icon>, 'size'>\n\nexport const Handle: React.ForwardRefExoticComponent<THandleProps> =\n  React.forwardRef(({ isDragging, size, ...rest }, ref) => {\n    return (\n      <StyledHandle\n        ref={ref}\n        isDragging={isDragging}\n        appearance=\"simple\"\n        hasTooltip={false}\n        size={size}\n        {...rest}\n      >\n        <Icon is={DragHandle} />\n      </StyledHandle>\n    )\n  })\n\nHandle.displayName = 'Handle'\n"],"names":["StyledHandle","styled","ActionIcon","Handle","React","isDragging","size","rest","ref","Icon","DragHandle"],"mappings":"sNAOO,MAAMA,EAAeC,EAAOC,EAAY,CAC7C,MAAO,qBACP,KAAM,eACN,cAAe,CACb,QAAS,GACT,OAAQ,cACR,CAAC,KAAM,CACL,cAAe,MACjB,CACF,EACA,SAAU,CACR,WAAY,CACV,KAAM,CACJ,OAAQ,UACV,EACA,MAAO,CACL,OAAQ,MACV,CACF,CACF,CACF,CAAC,EAQYC,EACXC,EAAM,WAAW,CAAC,CAAE,WAAAC,EAAY,KAAAC,KAASC,CAAK,EAAGC,IAE7CJ,EAAA,cAACJ,GACC,IAAKQ,EACL,WAAYH,EACZ,WAAW,SACX,WAAY,GACZ,KAAMC,EACL,GAAGC,GAEJH,EAAA,cAACK,EAAA,CAAK,GAAIC,EAAY,CACxB,CAEH,EAEHP,EAAO,YAAc"}
+{"version":3,"file":"Handle.js","sources":["../../../src/components/sortable/Handle.tsx"],"sourcesContent":["import { DragHandle } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { ActionIcon } from '../action-icon'\nimport { Icon } from '../icon'\n\nexport const StyledHandle = styled(ActionIcon, {\n  base: [\n    'text-inherit!',\n    'fill-current',\n    'disabled:**:pointer-events-none',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ],\n  variants: {\n    isDragging: {\n      true: ['cursor-grabbing'],\n      false: ['cursor-grab']\n    }\n  }\n})\n\nexport type THandleProps = Omit<\n  React.ComponentProps<typeof StyledHandle>,\n  'children'\n> &\n  Pick<React.ComponentProps<typeof Icon>, 'size'>\n\nexport const Handle = React.forwardRef<HTMLButtonElement, THandleProps>(\n  ({ isDragging, size, ...rest }, ref) => {\n    return (\n      <StyledHandle\n        ref={ref}\n        isDragging={isDragging}\n        appearance=\"simple\"\n        hasTooltip={false}\n        size={size}\n        {...rest}\n      >\n        <Icon is={DragHandle} />\n      </StyledHandle>\n    )\n  }\n)\n\nHandle.displayName = 'Handle'\n"],"names":["StyledHandle","styled","ActionIcon","Handle","React","isDragging","size","rest","ref","Icon","DragHandle"],"mappings":"oNAQa,MAAAA,EAAeC,EAAOC,EAAY,CAC7C,KAAM,CACJ,gBACA,eACA,kCACA,8BACA,qBACF,EACA,SAAU,CACR,WAAY,CACV,KAAM,CAAC,iBAAiB,EACxB,MAAO,CAAC,aAAa,CACvB,CACF,CACF,CAAC,EAQYC,EAASC,EAAM,WAC1B,CAAC,CAAE,WAAAC,EAAY,KAAAC,EAAM,GAAGC,CAAK,EAAGC,IAE5BJ,EAAA,cAACJ,EACC,CAAA,IAAKQ,EACL,WAAYH,EACZ,WAAW,SACX,WAAY,GACZ,KAAMC,EACL,GAAGC,CAAAA,EAEJH,EAAA,cAACK,EAAA,CAAK,GAAIC,CAAAA,CAAY,CACxB,CAGN,EAEAP,EAAO,YAAc"}

package/dist/components/sortable/SortableHandle.js.map

@@ -1 +1 @@
-{"version":3,"file":"SortableHandle.js","sources":["../../../src/components/sortable/SortableHandle.tsx"],"sourcesContent":["import { useSortable } from '@dnd-kit/sortable'\nimport * as React from 'react'\n\nimport { Handle as DragHandle, THandleProps } from './Handle'\n\nexport type TSortableHandleProps = {\n  targetId: React.ReactText\n  disabled?: boolean\n  label?: string\n} & Omit<THandleProps, 'label'>\n\nexport const SortableHandle = ({\n  targetId,\n  disabled = false,\n  label = 'drag handle',\n  ...rest\n}: TSortableHandleProps) => {\n  const { attributes, listeners, isDragging, setActivatorNodeRef } =\n    useSortable({ id: targetId })\n\n  return (\n    <DragHandle\n      ref={setActivatorNodeRef}\n      isDragging={isDragging}\n      label={label}\n      disabled={disabled}\n      {...(!disabled ? listeners : {})}\n      {...(!disabled ? attributes : {})}\n      {...rest}\n    />\n  )\n}\n\nSortableHandle.displayName = 'SortableHandle'\n"],"names":["SortableHandle","targetId","disabled","label","rest","attributes","listeners","isDragging","setActivatorNodeRef","useSortable","React","DragHandle"],"mappings":"6GAWO,MAAMA,EAAiB,CAAC,CAC7B,SAAAC,EACA,SAAAC,EAAW,GACX,MAAAC,EAAQ,iBACLC,CACL,IAA4B,CAC1B,KAAM,CAAE,WAAAC,EAAY,UAAAC,EAAW,WAAAC,EAAY,oBAAAC,CAAoB,EAC7DC,EAAY,CAAE,GAAIR,CAAS,CAAC,EAE9B,OACES,EAAA,cAACC,EAAA,CACC,IAAKH,EACL,WAAYD,EACZ,MAAOJ,EACP,SAAUD,EACT,GAAKA,EAAuB,CAAA,EAAZI,EAChB,GAAKJ,EAAwB,CAAA,EAAbG,EAChB,GAAGD,CAAAA,CACN,CAEJ,EAEAJ,EAAe,YAAc"}
+{"version":3,"file":"SortableHandle.js","sources":["../../../src/components/sortable/SortableHandle.tsx"],"sourcesContent":["import { useSortable } from '@dnd-kit/sortable'\nimport * as React from 'react'\n\nimport { Handle as DragHandle, THandleProps } from './Handle'\n\nexport type TSortableHandleProps = {\n  targetId: React.ReactText\n  disabled?: boolean\n  label?: string\n} & Omit<THandleProps, 'label'>\n\nexport const SortableHandle = ({\n  targetId,\n  disabled = false,\n  label = 'drag handle',\n  ...rest\n}: TSortableHandleProps) => {\n  const { attributes, listeners, isDragging, setActivatorNodeRef } =\n    useSortable({ id: targetId })\n\n  return (\n    <DragHandle\n      ref={setActivatorNodeRef}\n      isDragging={isDragging}\n      label={label}\n      disabled={disabled}\n      {...(!disabled ? listeners : {})}\n      {...(!disabled ? attributes : {})}\n      {...rest}\n    />\n  )\n}\n\nSortableHandle.displayName = 'SortableHandle'\n"],"names":["SortableHandle","targetId","disabled","label","rest","attributes","listeners","isDragging","setActivatorNodeRef","useSortable","React","DragHandle"],"mappings":"6GAWO,MAAMA,EAAiB,CAAC,CAC7B,SAAAC,EACA,SAAAC,EAAW,GACX,MAAAC,EAAQ,cACR,GAAGC,CACL,IAA4B,CAC1B,KAAM,CAAE,WAAAC,EAAY,UAAAC,EAAW,WAAAC,EAAY,oBAAAC,CAAoB,EAC7DC,EAAY,CAAE,GAAIR,CAAS,CAAC,EAE9B,OACES,EAAA,cAACC,EAAA,CACC,IAAKH,EACL,WAAYD,EACZ,MAAOJ,EACP,SAAUD,EACT,GAAKA,EAAuB,CAAA,EAAZI,EAChB,GAAKJ,EAAwB,CAAA,EAAbG,EAChB,GAAGD,CAAAA,CACN,CAEJ,EAEAJ,EAAe,YAAc"}

package/dist/components/sortable/SortableItem.js

@@ -1,2 +1,2 @@
-import{useSortable as p}from"@dnd-kit/sortable";import{Slot as b}from"@radix-ui/react-slot";import*as g from"react";import{styled as f}from"../../stitches.js";import{Box as x}from"../box/Box.js";const u=f(b),s=({id:l,asChild:o=!1,css:n,isDragHandle:r=!1,disabled:t,...i})=>{const{transform:a,setNodeRef:d,isDragging:e,listeners:c,attributes:m}=p({id:l});return g.createElement(o?u:x,{ref:d,css:{["--scale"]:1,transform:"translateX(calc(var(--translate-x)  * 1px)) translateY(calc(var(--translate-y)  * 1px)) scale(var(--scale))",zIndex:e?5:void 0,["--translate-x"]:(a==null?void 0:a.x)||0,["--translate-y"]:(a==null?void 0:a.y)||0,"&[disabled]":{opacity:.3,cursor:"not-allowed",["*"]:{pointerEvents:"none"}},...r?{cursor:e?"grabbing":"grab"}:{},...n},"data-dragging":e,"data-disabled":t,...r&&!t?c:{},...r&&!t?m:{},...i})};s.displayName="SortableItem";export{s as SortableItem};
+import{useSortable as b}from"@dnd-kit/sortable";import{Slot as y}from"@radix-ui/react-slot";import f from"clsx";import*as g from"react";const s=({id:r,asChild:o=!1,className:d,style:i,isDragHandle:a=!1,disabled:t,...n})=>{const{transform:e,setNodeRef:c,isDragging:l,listeners:m,attributes:p}=b({id:r});return g.createElement(o?y:"div",{ref:c,style:{...i,"--scale":1,"--translate-x":(e==null?void 0:e.x)||0,"--translate-y":(e==null?void 0:e.y)||0},"data-dragging":l,"data-disabled":t,...a&&!t?m:{},...a&&!t?p:{},...n,className:f("translate-x-[calc(var(--translate-x)*1px)]","translate-y-[calc(var(--translate-y)*1px)]","scale-(--scale)",l&&"z-5","disabled:**:pointer-events-none","disabled:cursor-not-allowed","disabled:opacity-30",a&&["[object Object]"],d)})};s.displayName="SortableItem";export{s as SortableItem};
 //# sourceMappingURL=SortableItem.js.map

package/dist/components/sortable/SortableItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SortableItem.js","sources":["../../../src/components/sortable/SortableItem.tsx"],"sourcesContent":["import type { UniqueIdentifier } from '@dnd-kit/core'\nimport { useSortable } from '@dnd-kit/sortable'\nimport { Slot } from '@radix-ui/react-slot'\nimport * as React from 'react'\n\nimport { CSS, styled } from '~/stitches'\n\nimport { Box } from '../box'\n\nexport type TSortableItemProps = {\n  id: UniqueIdentifier\n  asChild?: boolean\n  isDragHandle?: boolean\n  disabled?: boolean\n  css?: CSS\n}\n\nconst StyledSlot = styled(Slot)\n\nexport const SortableItem = ({\n  id,\n  asChild = false,\n  css,\n  isDragHandle = false,\n  disabled,\n  ...rest\n}: React.PropsWithChildren<TSortableItemProps>) => {\n  const { transform, setNodeRef, isDragging, listeners, attributes } =\n    useSortable({ id })\n\n  const Component = asChild ? StyledSlot : Box\n  return (\n    <Component\n      ref={setNodeRef}\n      css={{\n        ['--scale']: 1,\n        transform:\n          'translateX(calc(var(--translate-x)  * 1px)) translateY(calc(var(--translate-y)  * 1px)) scale(var(--scale))',\n        zIndex: isDragging ? 5 : undefined,\n        ['--translate-x']: transform?.x || 0,\n        ['--translate-y']: transform?.y || 0,\n        '&[disabled]': {\n          opacity: 0.3,\n          cursor: 'not-allowed',\n          ['*']: {\n            pointerEvents: 'none'\n          }\n        },\n        ...(isDragHandle ? { cursor: isDragging ? 'grabbing' : 'grab' } : {}),\n        ...css\n      }}\n      data-dragging={isDragging}\n      data-disabled={disabled}\n      {...(isDragHandle && !disabled ? listeners : {})}\n      {...(isDragHandle && !disabled ? attributes : {})}\n      {...rest}\n    />\n  )\n}\n\nSortableItem.displayName = 'SortableItem'\n"],"names":["StyledSlot","styled","Slot","SortableItem","id","asChild","css","isDragHandle","disabled","rest","transform","setNodeRef","isDragging","listeners","attributes","useSortable","React","Box"],"mappings":"mMAiBA,MAAMA,EAAaC,EAAOC,CAAI,EAEjBC,EAAe,CAAC,CAC3B,GAAAC,EACA,QAAAC,EAAU,GACV,IAAAC,EACA,aAAAC,EAAe,GACf,SAAAC,KACGC,CACL,IAAmD,CACjD,KAAM,CAAE,UAAAC,EAAW,WAAAC,EAAY,WAAAC,EAAY,UAAAC,EAAW,WAAAC,CAAW,EAC/DC,EAAY,CAAE,GAAAX,CAAG,CAAC,EAGpB,OACEY,EAAA,cAFgBX,EAAUL,EAAaiB,EAEtC,CACC,IAAKN,EACL,IAAK,CACH,CAAC,WAAY,EACb,UACE,8GACF,OAAQC,EAAa,EAAI,OACzB,CAAC,kBAAkBF,GAAA,KAAA,OAAAA,EAAW,IAAK,EACnC,CAAC,kBAAkBA,GAAA,KAAA,OAAAA,EAAW,IAAK,EACnC,cAAe,CACb,QAAS,GACT,OAAQ,cACR,CAAC,KAAM,CACL,cAAe,MACjB,CACF,EACA,GAAIH,EAAe,CAAE,OAAQK,EAAa,WAAa,MAAO,EAAI,CAAC,EACnE,GAAGN,CACL,EACA,gBAAeM,EACf,gBAAeJ,EACd,GAAID,GAAgB,CAACC,EAAWK,EAAY,CAAA,EAC5C,GAAIN,GAAgB,CAACC,EAAWM,EAAa,CAAA,EAC7C,GAAGL,CAAAA,CACN,CAEJ,EAEAN,EAAa,YAAc"}
+{"version":3,"file":"SortableItem.js","sources":["../../../src/components/sortable/SortableItem.tsx"],"sourcesContent":["import type { UniqueIdentifier } from '@dnd-kit/core'\nimport { useSortable } from '@dnd-kit/sortable'\nimport { Slot } from '@radix-ui/react-slot'\nimport clsx from 'clsx'\nimport * as React from 'react'\n\nexport type TSortableItemProps = {\n  id: UniqueIdentifier\n  asChild?: boolean\n  isDragHandle?: boolean\n  disabled?: boolean\n  className?: string\n  style?: Pick<React.HTMLAttributes<HTMLDivElement>, 'style'>\n}\n\nexport const SortableItem = ({\n  id,\n  asChild = false,\n  className,\n  style,\n  isDragHandle = false,\n  disabled,\n  ...rest\n}: React.PropsWithChildren<TSortableItemProps>) => {\n  const { transform, setNodeRef, isDragging, listeners, attributes } =\n    useSortable({ id })\n\n  const Component = asChild ? Slot : 'div'\n  return (\n    <Component\n      ref={setNodeRef}\n      style={{\n        ...style,\n        '--scale': 1,\n        '--translate-x': transform?.x || 0,\n        '--translate-y': transform?.y || 0\n      }}\n      data-dragging={isDragging}\n      data-disabled={disabled}\n      {...(isDragHandle && !disabled ? listeners : {})}\n      {...(isDragHandle && !disabled ? attributes : {})}\n      {...rest}\n      className={clsx(\n        'translate-x-[calc(var(--translate-x)*1px)]',\n        'translate-y-[calc(var(--translate-y)*1px)]',\n        'scale-(--scale)',\n        isDragging && 'z-5',\n        'disabled:**:pointer-events-none',\n        'disabled:cursor-not-allowed',\n        'disabled:opacity-30',\n        isDragHandle && ['[object Object]'],\n        className\n      )}\n    />\n  )\n}\n\nSortableItem.displayName = 'SortableItem'\n"],"names":["SortableItem","id","asChild","className","style","isDragHandle","disabled","rest","transform","setNodeRef","isDragging","listeners","attributes","useSortable","React","Slot","clsx"],"mappings":"wIAea,MAAAA,EAAe,CAAC,CAC3B,GAAAC,EACA,QAAAC,EAAU,GACV,UAAAC,EACA,MAAAC,EACA,aAAAC,EAAe,GACf,SAAAC,EACA,GAAGC,CACL,IAAmD,CACjD,KAAM,CAAE,UAAAC,EAAW,WAAAC,EAAY,WAAAC,EAAY,UAAAC,EAAW,WAAAC,CAAW,EAC/DC,EAAY,CAAE,GAAAZ,CAAG,CAAC,EAGpB,OACEa,EAAA,cAFgBZ,EAAUa,EAAO,MAEhC,CACC,IAAKN,EACL,MAAO,CACL,GAAGL,EACH,UAAW,EACX,iBAAiBI,GAAA,KAAAA,OAAAA,EAAW,IAAK,EACjC,iBAAiBA,GAAA,KAAAA,OAAAA,EAAW,IAAK,CACnC,EACA,gBAAeE,EACf,gBAAeJ,EACd,GAAID,GAAgB,CAACC,EAAWK,EAAY,CAAC,EAC7C,GAAIN,GAAgB,CAACC,EAAWM,EAAa,CAAA,EAC7C,GAAGL,EACJ,UAAWS,EACT,6CACA,6CACA,kBACAN,GAAc,MACd,kCACA,8BACA,sBACAL,GAAgB,CAAC,iBAAiB,EAClCF,CACF,CACF,CAAA,CAEJ,EAEAH,EAAa,YAAc"}

package/dist/components/sortable/SortableRoot.js

@@ -1,2 +1,2 @@
-import{useSensors as x,useSensor as l,PointerSensor as p,KeyboardSensor as v,DndContext as C,closestCenter as y}from"@dnd-kit/core";import{sortableKeyboardCoordinates as E,arrayMove as D,SortableContext as I}from"@dnd-kit/sortable";import*as o from"react";const c=({sortableIds:t,onSortChange:m,children:S})=>{const[u,s]=o.useState(t);o.useEffect(()=>{s(t)},[t]);const b=x(l(p),l(v,{coordinateGetter:E}));return o.createElement(C,{sensors:b,collisionDetection:y,onDragEnd:f=>{const{active:n,over:e}=f;n.id&&(e==null?void 0:e.id)&&n.id!==(e==null?void 0:e.id)&&s(r=>{const d=r.indexOf(n.id),i=r.indexOf(e.id),a=D(r,d,i);return m({order:a,oldIndex:d,newIndex:i}),a})}},o.createElement(I,{items:u},S))};c.displayName="SortableRoot";export{c as SortableRoot};
+import{useSensors as x,useSensor as l,PointerSensor as p,KeyboardSensor as C,DndContext as v,closestCenter as y}from"@dnd-kit/core";import{sortableKeyboardCoordinates as E,arrayMove as D,SortableContext as I}from"@dnd-kit/sortable";import*as o from"react";const c=({sortableIds:t,onSortChange:m,children:S})=>{const[u,s]=o.useState(t);o.useEffect(()=>{s(t)},[t]);const b=x(l(p),l(C,{coordinateGetter:E}));return o.createElement(v,{sensors:b,collisionDetection:y,onDragEnd:f=>{const{active:n,over:e}=f;n.id&&e!=null&&e.id&&n.id!==(e==null?void 0:e.id)&&s(r=>{const d=r.indexOf(n.id),i=r.indexOf(e.id),a=D(r,d,i);return m({order:a,oldIndex:d,newIndex:i}),a})}},o.createElement(I,{items:u},S))};c.displayName="SortableRoot";export{c as SortableRoot};
 //# sourceMappingURL=SortableRoot.js.map

package/dist/components/sortable/SortableRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"SortableRoot.js","sources":["../../../src/components/sortable/SortableRoot.tsx"],"sourcesContent":["import type { DragEndEvent, UniqueIdentifier } from '@dnd-kit/core'\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors\n} from '@dnd-kit/core'\nimport {\n  arrayMove,\n  SortableContext,\n  sortableKeyboardCoordinates\n} from '@dnd-kit/sortable'\nimport * as React from 'react'\n\ntype TSortableRootProps = {\n  sortableIds: React.ReactText[]\n  onSortChange: (onSortChangeData: {\n    order: UniqueIdentifier[]\n    oldIndex: number\n    newIndex: number\n  }) => void\n}\n\nexport const SortableRoot = ({\n  sortableIds,\n  onSortChange,\n  children\n}: React.PropsWithChildren<TSortableRootProps>) => {\n  const [order, setOrder] = React.useState<React.ReactText[]>(sortableIds)\n  React.useEffect(() => {\n    setOrder(sortableIds)\n  }, [sortableIds])\n\n  const sensors = useSensors(\n    useSensor(PointerSensor),\n    useSensor(KeyboardSensor, {\n      coordinateGetter: sortableKeyboardCoordinates\n    })\n  )\n\n  const handleDragEnd = (event: DragEndEvent) => {\n    const { active, over } = event\n    if (active.id && over?.id && active.id !== over?.id) {\n      setOrder((order) => {\n        const oldIndex = order.indexOf(active.id)\n        const newIndex = order.indexOf(over.id)\n        const newOrder = arrayMove(order, oldIndex, newIndex)\n        onSortChange({ order: newOrder, oldIndex, newIndex })\n        return newOrder\n      })\n    }\n  }\n\n  return (\n    <DndContext\n      sensors={sensors}\n      collisionDetection={closestCenter}\n      onDragEnd={handleDragEnd}\n    >\n      <SortableContext items={order}>{children}</SortableContext>\n    </DndContext>\n  )\n}\n\nSortableRoot.displayName = 'SortableRoot'\n"],"names":["SortableRoot","sortableIds","onSortChange","children","order","setOrder","React","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","sortableKeyboardCoordinates","DndContext","closestCenter","event","active","over","oldIndex","newIndex","newOrder","arrayMove","SortableContext"],"mappings":"gQAyBa,MAAAA,EAAe,CAAC,CAC3B,YAAAC,EACA,aAAAC,EACA,SAAAC,CACF,IAAmD,CACjD,KAAM,CAACC,EAAOC,CAAQ,EAAIC,EAAM,SAA4BL,CAAW,EACvEK,EAAM,UAAU,IAAM,CACpBD,EAASJ,CAAW,CACtB,EAAG,CAACA,CAAW,CAAC,EAEhB,MAAMM,EAAUC,EACdC,EAAUC,CAAa,EACvBD,EAAUE,EAAgB,CACxB,iBAAkBC,CACpB,CAAC,CACH,EAeA,OACEN,EAAA,cAACO,EAAA,CACC,QAASN,EACT,mBAAoBO,EACpB,UAjBmBC,GAAwB,CAC7C,KAAM,CAAE,OAAAC,EAAQ,KAAAC,CAAK,EAAIF,EACrBC,EAAO,KAAMC,GAAA,KAAAA,OAAAA,EAAM,KAAMD,EAAO,MAAOC,GAAA,KAAA,OAAAA,EAAM,KAC/CZ,EAAUD,GAAU,CAClB,MAAMc,EAAWd,EAAM,QAAQY,EAAO,EAAE,EAClCG,EAAWf,EAAM,QAAQa,EAAK,EAAE,EAChCG,EAAWC,EAAUjB,EAAOc,EAAUC,CAAQ,EACpD,OAAAjB,EAAa,CAAE,MAAOkB,EAAU,SAAAF,EAAU,SAAAC,CAAS,CAAC,EAC7CC,CACT,CAAC,CAEL,CAAA,EAQId,EAAA,cAACgB,EAAA,CAAgB,MAAOlB,GAAQD,CAAS,CAC3C,CAEJ,EAEAH,EAAa,YAAc"}
+{"version":3,"file":"SortableRoot.js","sources":["../../../src/components/sortable/SortableRoot.tsx"],"sourcesContent":["import type { DragEndEvent, UniqueIdentifier } from '@dnd-kit/core'\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors\n} from '@dnd-kit/core'\nimport {\n  arrayMove,\n  SortableContext,\n  sortableKeyboardCoordinates\n} from '@dnd-kit/sortable'\nimport * as React from 'react'\n\ntype TSortableRootProps = {\n  sortableIds: React.ReactText[]\n  onSortChange: (onSortChangeData: {\n    order: UniqueIdentifier[]\n    oldIndex: number\n    newIndex: number\n  }) => void\n}\n\nexport const SortableRoot = ({\n  sortableIds,\n  onSortChange,\n  children\n}: React.PropsWithChildren<TSortableRootProps>) => {\n  const [order, setOrder] = React.useState<React.ReactText[]>(sortableIds)\n  React.useEffect(() => {\n    setOrder(sortableIds)\n  }, [sortableIds])\n\n  const sensors = useSensors(\n    useSensor(PointerSensor),\n    useSensor(KeyboardSensor, {\n      coordinateGetter: sortableKeyboardCoordinates\n    })\n  )\n\n  const handleDragEnd = (event: DragEndEvent) => {\n    const { active, over } = event\n    if (active.id && over?.id && active.id !== over?.id) {\n      setOrder((order) => {\n        const oldIndex = order.indexOf(active.id)\n        const newIndex = order.indexOf(over.id)\n        const newOrder = arrayMove(order, oldIndex, newIndex)\n        onSortChange({ order: newOrder, oldIndex, newIndex })\n        return newOrder\n      })\n    }\n  }\n\n  return (\n    <DndContext\n      sensors={sensors}\n      collisionDetection={closestCenter}\n      onDragEnd={handleDragEnd}\n    >\n      <SortableContext items={order}>{children}</SortableContext>\n    </DndContext>\n  )\n}\n\nSortableRoot.displayName = 'SortableRoot'\n"],"names":["SortableRoot","sortableIds","onSortChange","children","order","setOrder","React","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","sortableKeyboardCoordinates","DndContext","closestCenter","event","active","over","oldIndex","newIndex","newOrder","arrayMove","SortableContext"],"mappings":"gQAyBa,MAAAA,EAAe,CAAC,CAC3B,YAAAC,EACA,aAAAC,EACA,SAAAC,CACF,IAAmD,CACjD,KAAM,CAACC,EAAOC,CAAQ,EAAIC,EAAM,SAA4BL,CAAW,EACvEK,EAAM,UAAU,IAAM,CACpBD,EAASJ,CAAW,CACtB,EAAG,CAACA,CAAW,CAAC,EAEhB,MAAMM,EAAUC,EACdC,EAAUC,CAAa,EACvBD,EAAUE,EAAgB,CACxB,iBAAkBC,CACpB,CAAC,CACH,EAeA,OACEN,EAAA,cAACO,EAAA,CACC,QAASN,EACT,mBAAoBO,EACpB,UAjBmBC,GAAwB,CAC7C,KAAM,CAAE,OAAAC,EAAQ,KAAAC,CAAK,EAAIF,EACrBC,EAAO,IAAMC,GAAA,MAAAA,EAAM,IAAMD,EAAO,MAAOC,GAAA,KAAA,OAAAA,EAAM,KAC/CZ,EAAUD,GAAU,CAClB,MAAMc,EAAWd,EAAM,QAAQY,EAAO,EAAE,EAClCG,EAAWf,EAAM,QAAQa,EAAK,EAAE,EAChCG,EAAWC,EAAUjB,EAAOc,EAAUC,CAAQ,EACpD,OAAAjB,EAAa,CAAE,MAAOkB,EAAU,SAAAF,EAAU,SAAAC,CAAS,CAAC,EAC7CC,CACT,CAAC,CAEL,CAAA,EAQId,EAAA,cAACgB,EAAA,CAAgB,MAAOlB,GAAQD,CAAS,CAC3C,CAEJ,EAEAH,EAAa,YAAc"}

package/dist/components/spacer/Spacer.js

@@ -1,2 +1,2 @@
-import{styled as t}from"../../stitches.js";const e=t("div",{flex:1,justifySelf:"stretch",alignSelf:"stretch"});e.displayName="Spacer";export{e as Spacer};
+import{styled as s}from"../../styled.js";const e=s("div",{base:["flex-1","justify-self-stretch","self-stretch"]});e.displayName="Spacer";export{e as Spacer};
 //# sourceMappingURL=Spacer.js.map

package/dist/components/spacer/Spacer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spacer.js","sources":["../../../src/components/spacer/Spacer.tsx"],"sourcesContent":["import { styled } from '~/stitches'\n\n/**\n * A flexible flex spacer that expands along the major axis of its containing flex layout.\n * It renders a `div` by default, and takes up any available space.\n */\nexport const Spacer = styled('div', {\n  flex: 1,\n  justifySelf: 'stretch',\n  alignSelf: 'stretch'\n})\n\nSpacer.displayName = 'Spacer'\n"],"names":["Spacer","styled"],"mappings":"2CAMa,MAAAA,EAASC,EAAO,MAAO,CAClC,KAAM,EACN,YAAa,UACb,UAAW,SACb,CAAC,EAEDD,EAAO,YAAc"}
+{"version":3,"file":"Spacer.js","sources":["../../../src/components/spacer/Spacer.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\n/**\n * A flexible flex spacer that expands along the major axis of its containing flex layout.\n * It renders a `div` by default, and takes up any available space.\n */\nexport const Spacer = styled('div', {\n  base: ['flex-1', 'justify-self-stretch', 'self-stretch']\n})\n\nSpacer.displayName = 'Spacer'\n"],"names":["Spacer","styled"],"mappings":"yCAMa,MAAAA,EAASC,EAAO,MAAO,CAClC,KAAM,CAAC,SAAU,uBAAwB,cAAc,CACzD,CAAC,EAEDD,EAAO,YAAc"}

package/dist/components/stepper/Stepper.js

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