@atom-learning/components 5.11.0 → 5.12.1

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

@@ -1,7 +1,8 @@
+import type { VariantProps } from '@atom-learning/stitches-react';
 import * as React from 'react';
 import { SliderSteps } from './SliderSteps';
 import { SliderValue } from './SliderValue';
-declare const StyledSlider: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-slider").SliderProps & React.RefAttributes<HTMLSpanElement>>, {
+declare const StyledTrack: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-slider").SliderTrackProps & React.RefAttributes<HTMLSpanElement>>, {
     theme?: "light" | "tonal" | undefined;
 }, {
     sm: string;
@@ -372,7 +373,376 @@ declare const StyledSlider: import("@atom-learning/stitches-react/types/styled-c
         marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
     };
 }>>;
-export type SliderProps = React.ComponentProps<typeof StyledSlider>;
+declare const StyledSlider: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-slider").SliderProps & React.RefAttributes<HTMLSpanElement>>, {}, {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    reducedMotion: string;
+    allowMotion: string;
+    hover: string;
+}, import("@atom-learning/stitches-react/types/css-util").CSS<{
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    reducedMotion: string;
+    allowMotion: string;
+    hover: string;
+}, {
+    colors: {
+        textBold: string;
+        textRegular: string;
+        textSubtle: string;
+        textMinimal: string;
+        background: string;
+        backgroundAccent: string;
+        grey100: string;
+        grey200: string;
+        grey300: string;
+        grey400: string;
+        grey500: string;
+        grey600: string;
+        grey700: string;
+        grey800: string;
+        grey900: string;
+        grey1000: string;
+        grey1100: string;
+        grey1200: string;
+        blue100: string;
+        blue200: string;
+        blue300: string;
+        blue400: string;
+        blue500: string;
+        blue600: string;
+        blue700: string;
+        blue800: string;
+        blue900: string;
+        blue1000: string;
+        blue1100: string;
+        blue1200: string;
+        pink100: string;
+        pink200: string;
+        pink300: string;
+        pink400: string;
+        pink500: string;
+        pink600: string;
+        pink700: string;
+        pink800: string;
+        pink900: string;
+        pink1000: string;
+        pink1100: string;
+        pink1200: string;
+        purple100: string;
+        purple200: string;
+        purple300: string;
+        purple400: string;
+        purple500: string;
+        purple600: string;
+        purple700: string;
+        purple800: string;
+        purple900: string;
+        purple1000: string;
+        purple1100: string;
+        purple1200: string;
+        cyan100: string;
+        cyan200: string;
+        cyan300: string;
+        cyan400: string;
+        cyan500: string;
+        cyan600: string;
+        cyan700: string;
+        cyan800: string;
+        cyan900: string;
+        cyan1000: string;
+        cyan1100: string;
+        cyan1200: string;
+        green100: string;
+        green200: string;
+        green300: string;
+        green400: string;
+        green500: string;
+        green600: string;
+        green700: string;
+        green800: string;
+        green900: string;
+        green1000: string;
+        green1100: string;
+        green1200: string;
+        magenta100: string;
+        magenta200: string;
+        magenta300: string;
+        magenta400: string;
+        magenta500: string;
+        magenta600: string;
+        magenta700: string;
+        magenta800: string;
+        magenta900: string;
+        magenta1000: string;
+        magenta1100: string;
+        magenta1200: string;
+        red100: string;
+        red200: string;
+        red300: string;
+        red400: string;
+        red500: string;
+        red600: string;
+        red700: string;
+        red800: string;
+        red900: string;
+        red1000: string;
+        red1100: string;
+        red1200: string;
+        teal100: string;
+        teal200: string;
+        teal300: string;
+        teal400: string;
+        teal500: string;
+        teal600: string;
+        teal700: string;
+        teal800: string;
+        teal900: string;
+        teal1000: string;
+        teal1100: string;
+        teal1200: string;
+        orange100: string;
+        orange200: string;
+        orange300: string;
+        orange400: string;
+        orange500: string;
+        orange600: string;
+        orange700: string;
+        orange800: string;
+        orange900: string;
+        orange1000: string;
+        orange1100: string;
+        orange1200: string;
+        yellow100: string;
+        yellow200: string;
+        yellow300: string;
+        yellow400: string;
+        yellow500: string;
+        yellow600: string;
+        yellow700: string;
+        yellow800: string;
+        yellow900: string;
+        yellow1000: string;
+        yellow1100: string;
+        yellow1200: string;
+        lime100: string;
+        lime200: string;
+        lime300: string;
+        lime400: string;
+        lime500: string;
+        lime600: string;
+        lime700: string;
+        lime800: string;
+        lime900: string;
+        lime1000: string;
+        lime1100: string;
+        lime1200: string;
+        lapis100: string;
+        lapis200: string;
+        lapis300: string;
+        lapis400: string;
+        lapis500: string;
+        lapis600: string;
+        lapis700: string;
+        lapis800: string;
+        lapis900: string;
+        lapis1000: string;
+        lapis1100: string;
+        lapis1200: string;
+        maroon100: string;
+        maroon200: string;
+        maroon300: string;
+        maroon400: string;
+        maroon500: string;
+        maroon600: string;
+        maroon700: string;
+        maroon800: string;
+        maroon900: string;
+        maroon1000: string;
+        maroon1100: string;
+        maroon1200: string;
+        marsh100: string;
+        marsh200: string;
+        marsh300: string;
+        marsh400: string;
+        marsh500: string;
+        marsh600: string;
+        marsh700: string;
+        marsh800: string;
+        marsh900: string;
+        marsh1000: string;
+        marsh1100: string;
+        marsh1200: string;
+        alpha100: string;
+        alpha150: string;
+        alpha200: string;
+        alpha250: string;
+        alpha600: string;
+        infoLight: string;
+        info: string;
+        infoMid: string;
+        infoDark: string;
+        successLight: string;
+        success: string;
+        successMid: string;
+        successDark: string;
+        dangerLight: string;
+        danger: string;
+        dangerMid: string;
+        dangerDark: string;
+        warningLight: string;
+        warning: string;
+        warningMid: string;
+        warningDark: string;
+        warningText: string;
+        subjectEnglish: string;
+        subjectMaths: string;
+        subjectScience: string;
+        subjectVerbalReasoning: string;
+        subjectNonVerbalReasoning: string;
+        subjectCreativeWriting: string;
+        subjectExamSkills: string;
+        subjectGcseEnglishLiterature: string;
+        subjectGcseMaths: string;
+        subjectGcseChemistry: string;
+        subjectGcsePhysics: string;
+        subjectGcseBiology: string;
+        glBlueLight: string;
+        glBluePrimary: string;
+        glBlueDark: string;
+        primary100: string;
+        primary200: string;
+        primary300: string;
+        primary400: string;
+        primary500: string;
+        primary600: string;
+        primary700: string;
+        primary800: string;
+        primary900: string;
+        primary1000: string;
+        primary1100: string;
+        primary1200: string;
+    };
+    space: {
+        "0": string;
+        "1": string;
+        "2": string;
+        "3": string;
+        "4": string;
+        "5": string;
+        "6": string;
+        "7": string;
+        "8": string;
+        "9": string;
+        "24": string;
+    };
+    fontSizes: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+        "3xl": string;
+        "4xl": string;
+    };
+    fonts: {
+        sans: string;
+        mono: string;
+        display: string;
+        body: string;
+    };
+    sizes: {
+        "0": string;
+        "1": string;
+        "2": string;
+        "3": string;
+        "4": string;
+        "5": string;
+        "6": string;
+        "7": string;
+        "8": string;
+    };
+    radii: {
+        "0": string;
+        "1": string;
+        "2": string;
+        "3": string;
+        round: string;
+    };
+    shadows: {
+        "0": string;
+        "1": string;
+        "2": string;
+        "3": string;
+    };
+    ratios: {
+        "16-9": string;
+        "3-2": string;
+        "4-3": string;
+        "1-1": string;
+        "3-4": string;
+    };
+}, import("@atom-learning/stitches-react/types/config").DefaultThemeMap, {
+    bg: (value: import("@atom-learning/stitches-react").PropertyValue<"background">) => {
+        background: import("@atom-learning/stitches-react/types/css-util").WithPropertyValue<"background">;
+    };
+    size: (value: import("@atom-learning/stitches-react").ScaleValue<"size"> | number | string) => {
+        height: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"size">;
+        width: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"size">;
+    };
+    p: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
+        padding: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+    };
+    pt: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
+        paddingTop: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+    };
+    pr: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
+        paddingRight: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+    };
+    pb: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
+        paddingBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+    };
+    pl: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
+        paddingLeft: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+    };
+    px: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
+        paddingLeft: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+        paddingRight: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+    };
+    py: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
+        paddingTop: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+        paddingBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+    };
+    m: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
+        margin: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+    };
+    mt: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
+        marginTop: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+    };
+    mr: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
+        marginRight: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+    };
+    mb: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
+        marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+    };
+    ml: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
+        marginLeft: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+    };
+    mx: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
+        marginLeft: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+        marginRight: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+    };
+    my: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
+        marginTop: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+        marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+    };
+}>>;
+export type SliderProps = React.ComponentProps<typeof StyledSlider> & VariantProps<typeof StyledTrack>;
 type SliderType = React.ForwardRefExoticComponent<SliderProps> & {
     Value: typeof SliderValue;
     Steps: typeof SliderSteps;

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 h,Range as $,Thumb as b}from"@radix-ui/react-slider";import*as e from"react";import{styled as t}from"../../stitches.js";import{CSSWrapper as g}from"../../utilities/css-wrapper/CSSWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import{SliderSteps as y}from"./SliderSteps.js";import{SliderValue as v}from"./SliderValue.js";const x=t(f,{borderRadius:"$round",flexGrow:1,position:"relative",'&[data-orientation="horizontal"]':{height:"$space$1"},'&[data-orientation="vertical"]':{width:"$space$1"},variants:{theme:{light:{bg:"#fff"},tonal:{bg:"$grey600"}}}}),S=t(h,{alignItems:"center",display:"flex",position:"relative",touchAction:"none",userSelect:"none",cursor:"pointer",'&[data-orientation="horizontal"]':{height:"$1"},'&[data-orientation="vertical"]':{flexDirection:"column",width:"$1"},"&[disabled]":{opacity:.3,cursor:"not-allowed"}}),w=t($,{bg:"$primary800",borderRadius:"$round",height:"100%",position:"absolute","&[disabled]":{opacity:.3,cursor:"not-allowed"}}),R=t(b,{bg:"$primary900",borderRadius:"$round",display:"block",size:"$1","&:hover":{bg:"$primary1000"},"&:focus":{outline:"2px solid $primary900",outlineOffset:"2px"},"&[disabled]":{opacity:.3,cursor:"not-allowed"}}),r=e.forwardRef(({value:i,defaultValue:a,min:l=0,max:n=100,theme:d="tonal",css:m,children:s,...p},c)=>{const o=i||a;return e.createElement(g,{css:m},e.createElement(S,{defaultValue:a,value:i,min:l,max:n,ref:c,...p},e.createElement(x,{theme:d},e.createElement(w,null)),(o==null?void 0:o.length)&&o.map((E,u)=>e.createElement(R,{key:`thumb${u}`}))),s)});r.Value=v,r.Steps=y,r.displayName="Slider";export{r 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 type { VariantProps } from '@atom-learning/stitches-react'\nimport { Range, Root, Thumb, Track } from '@radix-ui/react-slider'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { CSSWrapper } from '~/utilities'\n\nimport { SliderSteps } from './SliderSteps'\nimport { SliderValue } from './SliderValue'\n\nconst StyledTrack = styled(Track, {\n  borderRadius: '$round',\n  flexGrow: 1,\n  position: 'relative',\n  '&[data-orientation=\"horizontal\"]': { height: '$space$1' },\n  '&[data-orientation=\"vertical\"]': { width: '$space$1' },\n  variants: {\n    theme: {\n      light: { bg: '#fff' },\n      tonal: { bg: '$grey600' }\n    }\n  }\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]': {\n    opacity: 0.3,\n    cursor: 'not-allowed'\n  }\n})\n\nconst StyledRange = styled(Range, {\n  bg: '$primary800',\n  borderRadius: '$round',\n  height: '100%',\n  position: 'absolute',\n  '&[disabled]': {\n    opacity: 0.3,\n    cursor: 'not-allowed'\n  }\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]': {\n    opacity: 0.3,\n    cursor: 'not-allowed'\n  }\n})\n\nexport type SliderProps = React.ComponentProps<typeof StyledSlider> &\n  VariantProps<typeof StyledTrack>\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          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","css","children","remainingProps","ref","values","CSSWrapper","_","i","SliderValue","SliderSteps"],"mappings":"6bAUA,MAAMA,EAAcC,EAAOC,EAAO,CAChC,aAAc,SACd,SAAU,EACV,SAAU,WACV,mCAAoC,CAAE,OAAQ,UAAW,EACzD,iCAAkC,CAAE,MAAO,UAAW,EACtD,SAAU,CACR,MAAO,CACL,MAAO,CAAE,GAAI,MAAO,EACpB,MAAO,CAAE,GAAI,UAAW,CAC1B,CACF,CACF,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,cAAe,CACb,QAAS,GACT,OAAQ,aACV,CACF,CAAC,EAEKC,EAAcJ,EAAOK,EAAO,CAChC,GAAI,cACJ,aAAc,SACd,OAAQ,OACR,SAAU,WACV,cAAe,CACb,QAAS,GACT,OAAQ,aACV,CACF,CAAC,EAEKC,EAAcN,EAAOO,EAAO,CAChC,GAAI,cACJ,aAAc,SACd,QAAS,QACT,KAAM,KACN,UAAW,CACT,GAAI,cACN,EACA,UAAW,CACT,QAAS,wBACT,cAAe,KACjB,EACA,cAAe,CACb,QAAS,GACT,OAAQ,aACV,CACF,CAAC,EAUYC,EAAqBC,EAAM,WACtC,CACE,CACE,MAAAC,EACA,aAAAC,EACA,IAAAC,EAAM,EACN,IAAAC,EAAM,IACN,MAAAC,EAAQ,QACR,IAAAC,EACA,SAAAC,KACGC,CACL,EACAC,IACG,CACH,MAAMC,EAAST,GAASC,EACxB,OACEF,EAAA,cAACW,EAAA,CAAW,IAAKL,CACfN,EAAAA,EAAA,cAACP,EAAA,CACC,aAAcS,EACd,MAAOD,EACP,IAAKE,EACL,IAAKC,EACL,IAAKK,EACJ,GAAGD,CAEJR,EAAAA,EAAA,cAACV,EAAA,CAAY,MAAOe,CAClBL,EAAAA,EAAA,cAACL,EAAA,IAAY,CACf,GACCe,GAAA,KAAAA,OAAAA,EAAQ,SACPA,EAAO,IAAI,CAACE,EAAGC,IAAMb,EAAA,cAACH,EAAA,CAAY,IAAK,QAAQgB,GAAK,CAAA,CAAE,CAC1D,EACCN,CACH,CAEJ,CACF,EAEAR,EAAO,MAAQe,EACff,EAAO,MAAQgB,EAEfhB,EAAO,YAAc"}

package/dist/components/sortable/Handle.d.ts

@@ -3,7 +3,7 @@ import { Icon } from '../icon';
 export declare const StyledHandle: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
 }, "appearance" | "size" | "css" | "theme" | "isRounded"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
-    theme?: "success" | "danger" | "warning" | "primary" | "white" | "neutral" | undefined;
+    theme?: "success" | "danger" | "warning" | "neutral" | "white" | "primary" | undefined;
     appearance?: "outline" | "solid" | "simple" | undefined;
     size?: "xs" | "sm" | "md" | "lg" | undefined;
     isRounded?: boolean | "true" | undefined;
@@ -377,8 +377,8 @@ export declare const StyledHandle: import("@atom-learning/stitches-react/types/s
             marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
         };
     }> | undefined;
-}, "appearance" | "size" | "theme" | "label" | "children" | "as" | "hasTooltip" | "tooltipSide" | "isRounded" | keyof import("../../types").NavigatorActions> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
-    theme?: "success" | "danger" | "warning" | "primary" | "white" | "neutral" | undefined;
+}, "appearance" | "size" | "theme" | "label" | "children" | "as" | keyof import("../../types").NavigatorActions | "hasTooltip" | "tooltipSide" | "isRounded"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
+    theme?: "success" | "danger" | "warning" | "neutral" | "white" | "primary" | undefined;
     appearance?: "outline" | "solid" | "simple" | undefined;
     size?: "xs" | "sm" | "md" | "lg" | undefined;
     isRounded?: boolean | "true" | undefined;

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 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};
 //# 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 '../../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,MAAO,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"}

package/dist/components/sortable/SortableItem.d.ts

@@ -1,14 +1,16 @@
 import type { UniqueIdentifier } from '@dnd-kit/core';
 import * as React from 'react';
 import { CSS } from '../../stitches';
+import { Box } from '../box';
 export type TSortableItemProps = {
     id: UniqueIdentifier;
     asChild?: boolean;
     isDragHandle?: boolean;
     disabled?: boolean;
     css?: CSS;
+    style?: Pick<React.ComponentProps<typeof Box>, 'style'>;
 };
 export declare const SortableItem: {
-    ({ id, asChild, css, isDragHandle, disabled, ...rest }: React.PropsWithChildren<TSortableItemProps>): React.JSX.Element;
+    ({ id, asChild, css, style, isDragHandle, disabled, ...rest }: React.PropsWithChildren<TSortableItemProps>): React.JSX.Element;
     displayName: string;
 };

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 g}from"@radix-ui/react-slot";import*as f from"react";import{styled as x}from"../../stitches.js";import{Box as y}from"../box/Box.js";const u=x(g),s=({id:l,asChild:o=!1,css:n,style:i,isDragHandle:r=!1,disabled:t,...d})=>{const{transform:a,setNodeRef:c,isDragging:e,listeners:m,attributes:p}=b({id:l});return f.createElement(o?u:y,{ref:c,style:{...i,"--scale":1,"--translate-x":(a==null?void 0:a.x)||0,"--translate-y":(a==null?void 0:a.y)||0},css:{transform:"translateX(calc(var(--translate-x)  * 1px)) translateY(calc(var(--translate-y)  * 1px)) scale(var(--scale))",zIndex:e?5:void 0,"&[disabled]":{opacity:.3,cursor:"not-allowed","& *":{pointerEvents:"none"}},...r&&{cursor:e?"grabbing":"grab"},...n},"data-dragging":e,"data-disabled":t,...r&&!t?m:{},...r&&!t?p:{},...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 * 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  style?: Pick<React.ComponentProps<typeof Box>, 'style'>\n}\n\nconst StyledSlot = styled(Slot)\n\nexport const SortableItem = ({\n  id,\n  asChild = false,\n  css,\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 ? StyledSlot : Box\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      css={{\n        transform:\n          'translateX(calc(var(--translate-x)  * 1px)) translateY(calc(var(--translate-y)  * 1px)) scale(var(--scale))',\n        zIndex: isDragging ? 5 : undefined,\n        '&[disabled]': {\n          opacity: 0.3,\n          cursor: 'not-allowed',\n          '& *': { pointerEvents: 'none' }\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","style","isDragHandle","disabled","rest","transform","setNodeRef","isDragging","listeners","attributes","useSortable","React","Box"],"mappings":"mMAkBA,MAAMA,EAAaC,EAAOC,CAAI,EAEjBC,EAAe,CAAC,CAC3B,GAAAC,EACA,QAAAC,EAAU,GACV,IAAAC,EACA,MAAAC,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,GAAAZ,CAAG,CAAC,EAGpB,OACEa,EAAA,cAFgBZ,EAAUL,EAAakB,EAEtC,CACC,IAAKN,EACL,MAAO,CACL,GAAGL,EACH,UAAW,EACX,iBAAiBI,GAAA,KAAA,OAAAA,EAAW,IAAK,EACjC,iBAAiBA,GAAA,KAAA,OAAAA,EAAW,IAAK,CACnC,EACA,IAAK,CACH,UACE,8GACF,OAAQE,EAAa,EAAI,OACzB,cAAe,CACb,QAAS,GACT,OAAQ,cACR,MAAO,CAAE,cAAe,MAAO,CACjC,EACA,GAAIL,GAAgB,CAAE,OAAQK,EAAa,WAAa,MAAO,EAC/D,GAAGP,CACL,EACA,gBAAeO,EACf,gBAAeJ,EACd,GAAID,GAAgB,CAACC,EAAWK,EAAY,CAAA,EAC5C,GAAIN,GAAgB,CAACC,EAAWM,EAAa,CAAA,EAC7C,GAAGL,CAAAA,CACN,CAEJ,EAEAP,EAAa,YAAc"}

package/dist/components/sortable/index.d.ts

@@ -11,7 +11,7 @@ export declare const Sortable: {
         displayName: string;
     };
     Item: {
-        ({ id, asChild, css, isDragHandle, disabled, ...rest }: import("react").PropsWithChildren<import("./SortableItem").TSortableItemProps>): import("react").JSX.Element;
+        ({ id, asChild, css, style, isDragHandle, disabled, ...rest }: import("react").PropsWithChildren<import("./SortableItem").TSortableItemProps>): import("react").JSX.Element;
         displayName: string;
     };
     Handle: {

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

@@ -1,8 +1,8 @@
 export declare const StepperStepBullet: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<import("@atom-learning/stitches-react/types/styled-component").StyledComponent<"div", {
-    direction?: "inherit" | "initial" | "revert" | "unset" | "row" | "column" | "column-reverse" | "row-reverse" | "revert-layer" | undefined;
-    wrap?: "inherit" | "initial" | "revert" | "unset" | "wrap" | "nowrap" | "wrap-reverse" | "revert-layer" | undefined;
-    justify?: "left" | "right" | "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "end" | "start" | "space-around" | "space-between" | "space-evenly" | "flex-end" | "flex-start" | "normal" | "revert-layer" | "unsafe" | "safe" | undefined;
-    align?: "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "end" | "start" | "flex-end" | "flex-start" | "baseline" | "normal" | "self-end" | "self-start" | "revert-layer" | "unsafe" | "safe" | "first baseline" | "last baseline" | undefined;
+    direction?: "inherit" | "initial" | "revert" | "unset" | "row" | "row-reverse" | "column" | "column-reverse" | "revert-layer" | undefined;
+    wrap?: "inherit" | "initial" | "revert" | "unset" | "revert-layer" | "wrap" | "nowrap" | "wrap-reverse" | undefined;
+    justify?: "left" | "right" | "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "revert-layer" | "normal" | "unsafe" | "safe" | "start" | "end" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | undefined;
+    align?: "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "revert-layer" | "normal" | "unsafe" | "safe" | "start" | "end" | "flex-start" | "flex-end" | "self-start" | "self-end" | "baseline" | "first baseline" | "last baseline" | undefined;
     gap?: number | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "24" | undefined;
 }, {
     sm: string;

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

@@ -1,8 +1,8 @@
 export declare const StepperStepContainer: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<import("@atom-learning/stitches-react/types/styled-component").StyledComponent<"div", {
-    direction?: "inherit" | "initial" | "revert" | "unset" | "row" | "column" | "column-reverse" | "row-reverse" | "revert-layer" | undefined;
-    wrap?: "inherit" | "initial" | "revert" | "unset" | "wrap" | "nowrap" | "wrap-reverse" | "revert-layer" | undefined;
-    justify?: "left" | "right" | "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "end" | "start" | "space-around" | "space-between" | "space-evenly" | "flex-end" | "flex-start" | "normal" | "revert-layer" | "unsafe" | "safe" | undefined;
-    align?: "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "end" | "start" | "flex-end" | "flex-start" | "baseline" | "normal" | "self-end" | "self-start" | "revert-layer" | "unsafe" | "safe" | "first baseline" | "last baseline" | undefined;
+    direction?: "inherit" | "initial" | "revert" | "unset" | "row" | "row-reverse" | "column" | "column-reverse" | "revert-layer" | undefined;
+    wrap?: "inherit" | "initial" | "revert" | "unset" | "revert-layer" | "wrap" | "nowrap" | "wrap-reverse" | undefined;
+    justify?: "left" | "right" | "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "revert-layer" | "normal" | "unsafe" | "safe" | "start" | "end" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | undefined;
+    align?: "center" | "stretch" | "inherit" | "initial" | "revert" | "unset" | "revert-layer" | "normal" | "unsafe" | "safe" | "start" | "end" | "flex-start" | "flex-end" | "self-start" | "self-end" | "baseline" | "first baseline" | "last baseline" | undefined;
     gap?: number | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "24" | undefined;
 }, {
     sm: string;

package/dist/components/stepper/StepperStepContainer.js

@@ -1,2 +1,2 @@
-import{styled as t}from"../../stitches.js";import{Flex as e}from"../flex/Flex.js";const i=t(e,{position:"relative",fontFamily:"$body",fontWeight:600,fontSize:"$md",alignItems:"center","&:not(:last-child)::after":{content:"",position:"absolute"},"&:focus-visible":{outline:"none"},variants:{canInteract:{true:{}},direction:{vertical:{py:"$3",flexDirection:"row","&:not(:last-child)::after":{height:"100%",width:"4px",left:"14px",top:"50%"}},horizontal:{px:"$2",flexDirection:"column","&:not(:last-child)::after":{width:"100%",height:"4px",left:"50%",top:"14px"}}},separator:{default:{"&:not(:last-child)::after":{bg:"$grey200"}},active:{"&:not(:last-child)::after":{bg:"$primary800"}},success:{"&:not(:last-child)::after":{bg:"$success"}},viewed:{"&:not(:last-child)::after":{bg:"$grey600"}}},status:{completed:{},active:{},default:{},viewed:{},success:{},reviewed:{}}},compoundVariants:[{canInteract:!0,status:"completed",css:{"&:hover":{"& :first-child":{bg:"$primary900",color:"white !important"},"& :last-child":{color:"$primary900"}},"&:focus-visible":{"& :first-child":{outline:"2px solid $primary800",outlineOffset:"2px"}}}},{canInteract:!0,status:"active",css:{"&:hover":{"& :first-child":{borderColor:"$grey800",color:"$grey1000"},"& :last-child":{color:"$grey1000"}},"&:focus-visible":{"& :first-child":{outline:"2px solid $primary800",outlineOffset:"2px"}}}},{canInteract:!0,status:"viewed",css:{"&:hover":{"& :first-child":{borderColor:"$grey800",color:"$grey1000"},"& :last-child":{color:"$grey1000"}},"&:focus-visible":{"& :first-child":{outline:"2px solid $primary800 !important",outlineOffset:"2px !important"}}}},{canInteract:!0,status:"reviewed",css:{"&:focus-visible":{"& :first-child":{outline:"2px solid $primary800 !important",outlineOffset:"2px !important"}}}}]});export{i as StepperStepContainer};
+import{styled as t}from"../../stitches.js";import{Flex as e}from"../flex/Flex.js";const i=t(e,{position:"relative",fontFamily:"$body",fontWeight:600,fontSize:"$md",alignItems:"center","&:not(:last-child)":{"&::after":{content:"",position:"absolute"}},"&:focus-visible":{outline:"none"},variants:{canInteract:{true:{}},direction:{vertical:{py:"$3",flexDirection:"row","&:not(:last-child)":{"&::after":{height:"100%",width:"4px",left:"14px",top:"50%"}}},horizontal:{px:"$2",flexDirection:"column","&:not(:last-child)":{"&::after":{width:"100%",height:"4px",left:"50%",top:"14px"}}}},separator:{default:{"&:not(:last-child)":{"&::after":{bg:"$grey200"}}},active:{"&:not(:last-child)":{"&::after":{bg:"$primary800"}}},success:{"&:not(:last-child)":{"&::after":{bg:"$success"}}},viewed:{"&:not(:last-child)":{"&::after":{bg:"$grey600"}}}},status:{completed:{},active:{},default:{},viewed:{},success:{},reviewed:{}}},compoundVariants:[{canInteract:!0,status:"completed",css:{"&:hover":{"& :first-child":{bg:"$primary900",color:"white !important"},"& :last-child":{color:"$primary900"}},"&:focus-visible":{"& :first-child":{outline:"2px solid $primary800",outlineOffset:"2px"}}}},{canInteract:!0,status:"active",css:{"&:hover":{"& :first-child":{borderColor:"$grey800",color:"$grey1000"},"& :last-child":{color:"$grey1000"}},"&:focus-visible":{"& :first-child":{outline:"2px solid $primary800",outlineOffset:"2px"}}}},{canInteract:!0,status:"viewed",css:{"&:hover":{"& :first-child":{borderColor:"$grey800",color:"$grey1000"},"& :last-child":{color:"$grey1000"}},"&:focus-visible":{"& :first-child":{outline:"2px solid $primary800 !important",outlineOffset:"2px !important"}}}},{canInteract:!0,status:"reviewed",css:{"&:focus-visible":{"& :first-child":{outline:"2px solid $primary800 !important",outlineOffset:"2px !important"}}}}]});export{i as StepperStepContainer};
 //# sourceMappingURL=StepperStepContainer.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"StepperStepContainer.js","sources":["../../../src/components/stepper/StepperStepContainer.tsx"],"sourcesContent":["import { styled } from '~/stitches'\n\nimport { Flex } from '../flex'\n\nexport const StepperStepContainer = styled(Flex, {\n  position: 'relative',\n  fontFamily: '$body',\n  fontWeight: 600,\n  fontSize: '$md',\n  alignItems: 'center',\n  '&:not(:last-child)::after': {\n    content: '',\n    position: 'absolute'\n  },\n  '&:focus-visible': {\n    outline: 'none'\n  },\n  variants: {\n    canInteract: { true: {} },\n    direction: {\n      vertical: {\n        py: '$3',\n        flexDirection: 'row',\n        '&:not(:last-child)::after': {\n          height: '100%',\n          width: '4px',\n          left: '14px',\n          top: '50%'\n        }\n      },\n      horizontal: {\n        px: '$2',\n        flexDirection: 'column',\n        '&:not(:last-child)::after': {\n          width: '100%',\n          height: '4px',\n          left: '50%',\n          top: '14px'\n        }\n      }\n    },\n    separator: {\n      default: { '&:not(:last-child)::after': { bg: '$grey200' } },\n      active: { '&:not(:last-child)::after': { bg: '$primary800' } },\n      success: { '&:not(:last-child)::after': { bg: '$success' } },\n      viewed: { '&:not(:last-child)::after': { bg: '$grey600' } }\n    },\n    status: {\n      completed: {},\n      active: {},\n      default: {},\n      viewed: {},\n      success: {},\n      reviewed: {}\n    }\n  },\n  compoundVariants: [\n    {\n      canInteract: true,\n      status: 'completed',\n      css: {\n        '&:hover': {\n          '& :first-child': { bg: '$primary900', color: 'white !important' },\n          '& :last-child': { color: '$primary900' }\n        },\n        '&:focus-visible': {\n          '& :first-child': {\n            outline: '2px solid $primary800',\n            outlineOffset: '2px'\n          }\n        }\n      }\n    },\n    {\n      canInteract: true,\n      status: 'active',\n      css: {\n        '&:hover': {\n          '& :first-child': { borderColor: '$grey800', color: '$grey1000' },\n          '& :last-child': { color: '$grey1000' }\n        },\n        '&:focus-visible': {\n          '& :first-child': {\n            outline: '2px solid $primary800',\n            outlineOffset: '2px'\n          }\n        }\n      }\n    },\n    {\n      canInteract: true,\n      status: 'viewed',\n      css: {\n        '&:hover': {\n          '& :first-child': { borderColor: '$grey800', color: '$grey1000' },\n          '& :last-child': { color: '$grey1000' }\n        },\n        '&:focus-visible': {\n          '& :first-child': {\n            outline: '2px solid $primary800 !important',\n            outlineOffset: '2px !important'\n          }\n        }\n      }\n    },\n    {\n      canInteract: true,\n      status: 'reviewed',\n      css: {\n        '&:focus-visible': {\n          '& :first-child': {\n            outline: '2px solid $primary800 !important',\n            outlineOffset: '2px !important'\n          }\n        }\n      }\n    }\n  ]\n})\n"],"names":["StepperStepContainer","styled","Flex"],"mappings":"kFAIO,MAAMA,EAAuBC,EAAOC,EAAM,CAC/C,SAAU,WACV,WAAY,QACZ,WAAY,IACZ,SAAU,MACV,WAAY,SACZ,4BAA6B,CAC3B,QAAS,GACT,SAAU,UACZ,EACA,kBAAmB,CACjB,QAAS,MACX,EACA,SAAU,CACR,YAAa,CAAE,KAAM,EAAG,EACxB,UAAW,CACT,SAAU,CACR,GAAI,KACJ,cAAe,MACf,4BAA6B,CAC3B,OAAQ,OACR,MAAO,MACP,KAAM,OACN,IAAK,KACP,CACF,EACA,WAAY,CACV,GAAI,KACJ,cAAe,SACf,4BAA6B,CAC3B,MAAO,OACP,OAAQ,MACR,KAAM,MACN,IAAK,MACP,CACF,CACF,EACA,UAAW,CACT,QAAS,CAAE,4BAA6B,CAAE,GAAI,UAAW,CAAE,EAC3D,OAAQ,CAAE,4BAA6B,CAAE,GAAI,aAAc,CAAE,EAC7D,QAAS,CAAE,4BAA6B,CAAE,GAAI,UAAW,CAAE,EAC3D,OAAQ,CAAE,4BAA6B,CAAE,GAAI,UAAW,CAAE,CAC5D,EACA,OAAQ,CACN,UAAW,GACX,OAAQ,CAAA,EACR,QAAS,CACT,EAAA,OAAQ,CAAA,EACR,QAAS,CAAC,EACV,SAAU,EACZ,CACF,EACA,iBAAkB,CAChB,CACE,YAAa,GACb,OAAQ,YACR,IAAK,CACH,UAAW,CACT,iBAAkB,CAAE,GAAI,cAAe,MAAO,kBAAmB,EACjE,gBAAiB,CAAE,MAAO,aAAc,CAC1C,EACA,kBAAmB,CACjB,iBAAkB,CAChB,QAAS,wBACT,cAAe,KACjB,CACF,CACF,CACF,EACA,CACE,YAAa,GACb,OAAQ,SACR,IAAK,CACH,UAAW,CACT,iBAAkB,CAAE,YAAa,WAAY,MAAO,WAAY,EAChE,gBAAiB,CAAE,MAAO,WAAY,CACxC,EACA,kBAAmB,CACjB,iBAAkB,CAChB,QAAS,wBACT,cAAe,KACjB,CACF,CACF,CACF,EACA,CACE,YAAa,GACb,OAAQ,SACR,IAAK,CACH,UAAW,CACT,iBAAkB,CAAE,YAAa,WAAY,MAAO,WAAY,EAChE,gBAAiB,CAAE,MAAO,WAAY,CACxC,EACA,kBAAmB,CACjB,iBAAkB,CAChB,QAAS,mCACT,cAAe,gBACjB,CACF,CACF,CACF,EACA,CACE,YAAa,GACb,OAAQ,WACR,IAAK,CACH,kBAAmB,CACjB,iBAAkB,CAChB,QAAS,mCACT,cAAe,gBACjB,CACF,CACF,CACF,CACF,CACF,CAAC"}
+{"version":3,"file":"StepperStepContainer.js","sources":["../../../src/components/stepper/StepperStepContainer.tsx"],"sourcesContent":["import { styled } from '~/stitches'\n\nimport { Flex } from '../flex'\n\nexport const StepperStepContainer = styled(Flex, {\n  position: 'relative',\n  fontFamily: '$body',\n  fontWeight: 600,\n  fontSize: '$md',\n  alignItems: 'center',\n  '&:not(:last-child)': {\n    '&::after': {\n      content: '',\n      position: 'absolute'\n    }\n  },\n  '&:focus-visible': {\n    outline: 'none'\n  },\n  variants: {\n    canInteract: { true: {} },\n    direction: {\n      vertical: {\n        py: '$3',\n        flexDirection: 'row',\n        '&:not(:last-child)': {\n          '&::after': {\n            height: '100%',\n            width: '4px',\n            left: '14px',\n            top: '50%'\n          }\n        }\n      },\n      horizontal: {\n        px: '$2',\n        flexDirection: 'column',\n        '&:not(:last-child)': {\n          '&::after': {\n            width: '100%',\n            height: '4px',\n            left: '50%',\n            top: '14px'\n          }\n        }\n      }\n    },\n    separator: {\n      default: {\n        '&:not(:last-child)': {\n          '&::after': { bg: '$grey200' }\n        }\n      },\n      active: {\n        '&:not(:last-child)': {\n          '&::after': { bg: '$primary800' }\n        }\n      },\n      success: {\n        '&:not(:last-child)': {\n          '&::after': { bg: '$success' }\n        }\n      },\n      viewed: {\n        '&:not(:last-child)': {\n          '&::after': { bg: '$grey600' }\n        }\n      }\n    },\n    status: {\n      completed: {},\n      active: {},\n      default: {},\n      viewed: {},\n      success: {},\n      reviewed: {}\n    }\n  },\n  compoundVariants: [\n    {\n      canInteract: true,\n      status: 'completed',\n      css: {\n        '&:hover': {\n          '& :first-child': { bg: '$primary900', color: 'white !important' },\n          '& :last-child': { color: '$primary900' }\n        },\n        '&:focus-visible': {\n          '& :first-child': {\n            outline: '2px solid $primary800',\n            outlineOffset: '2px'\n          }\n        }\n      }\n    },\n    {\n      canInteract: true,\n      status: 'active',\n      css: {\n        '&:hover': {\n          '& :first-child': { borderColor: '$grey800', color: '$grey1000' },\n          '& :last-child': { color: '$grey1000' }\n        },\n        '&:focus-visible': {\n          '& :first-child': {\n            outline: '2px solid $primary800',\n            outlineOffset: '2px'\n          }\n        }\n      }\n    },\n    {\n      canInteract: true,\n      status: 'viewed',\n      css: {\n        '&:hover': {\n          '& :first-child': { borderColor: '$grey800', color: '$grey1000' },\n          '& :last-child': { color: '$grey1000' }\n        },\n        '&:focus-visible': {\n          '& :first-child': {\n            outline: '2px solid $primary800 !important',\n            outlineOffset: '2px !important'\n          }\n        }\n      }\n    },\n    {\n      canInteract: true,\n      status: 'reviewed',\n      css: {\n        '&:focus-visible': {\n          '& :first-child': {\n            outline: '2px solid $primary800 !important',\n            outlineOffset: '2px !important'\n          }\n        }\n      }\n    }\n  ]\n})\n"],"names":["StepperStepContainer","styled","Flex"],"mappings":"kFAIO,MAAMA,EAAuBC,EAAOC,EAAM,CAC/C,SAAU,WACV,WAAY,QACZ,WAAY,IACZ,SAAU,MACV,WAAY,SACZ,qBAAsB,CACpB,WAAY,CACV,QAAS,GACT,SAAU,UACZ,CACF,EACA,kBAAmB,CACjB,QAAS,MACX,EACA,SAAU,CACR,YAAa,CAAE,KAAM,CAAG,CAAA,EACxB,UAAW,CACT,SAAU,CACR,GAAI,KACJ,cAAe,MACf,qBAAsB,CACpB,WAAY,CACV,OAAQ,OACR,MAAO,MACP,KAAM,OACN,IAAK,KACP,CACF,CACF,EACA,WAAY,CACV,GAAI,KACJ,cAAe,SACf,qBAAsB,CACpB,WAAY,CACV,MAAO,OACP,OAAQ,MACR,KAAM,MACN,IAAK,MACP,CACF,CACF,CACF,EACA,UAAW,CACT,QAAS,CACP,qBAAsB,CACpB,WAAY,CAAE,GAAI,UAAW,CAC/B,CACF,EACA,OAAQ,CACN,qBAAsB,CACpB,WAAY,CAAE,GAAI,aAAc,CAClC,CACF,EACA,QAAS,CACP,qBAAsB,CACpB,WAAY,CAAE,GAAI,UAAW,CAC/B,CACF,EACA,OAAQ,CACN,qBAAsB,CACpB,WAAY,CAAE,GAAI,UAAW,CAC/B,CACF,CACF,EACA,OAAQ,CACN,UAAW,CACX,EAAA,OAAQ,CAAC,EACT,QAAS,CAAA,EACT,OAAQ,GACR,QAAS,CAAA,EACT,SAAU,CACZ,CAAA,CACF,EACA,iBAAkB,CAChB,CACE,YAAa,GACb,OAAQ,YACR,IAAK,CACH,UAAW,CACT,iBAAkB,CAAE,GAAI,cAAe,MAAO,kBAAmB,EACjE,gBAAiB,CAAE,MAAO,aAAc,CAC1C,EACA,kBAAmB,CACjB,iBAAkB,CAChB,QAAS,wBACT,cAAe,KACjB,CACF,CACF,CACF,EACA,CACE,YAAa,GACb,OAAQ,SACR,IAAK,CACH,UAAW,CACT,iBAAkB,CAAE,YAAa,WAAY,MAAO,WAAY,EAChE,gBAAiB,CAAE,MAAO,WAAY,CACxC,EACA,kBAAmB,CACjB,iBAAkB,CAChB,QAAS,wBACT,cAAe,KACjB,CACF,CACF,CACF,EACA,CACE,YAAa,GACb,OAAQ,SACR,IAAK,CACH,UAAW,CACT,iBAAkB,CAAE,YAAa,WAAY,MAAO,WAAY,EAChE,gBAAiB,CAAE,MAAO,WAAY,CACxC,EACA,kBAAmB,CACjB,iBAAkB,CAChB,QAAS,mCACT,cAAe,gBACjB,CACF,CACF,CACF,EACA,CACE,YAAa,GACb,OAAQ,WACR,IAAK,CACH,kBAAmB,CACjB,iBAAkB,CAChB,QAAS,mCACT,cAAe,gBACjB,CACF,CACF,CACF,CACF,CACF,CAAC"}