@atom-learning/components 6.0.0-beta.1 → 6.0.0-beta.11

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.d.ts

@@ -1,379 +1,16 @@
 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>>, {
-    theme?: "light" | "tonal" | undefined;
-}, {
-    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>;
-type SliderType = React.ForwardRefExoticComponent<SliderProps> & {
+declare const StyledTrack: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-slider").SliderTrackProps & React.RefAttributes<HTMLSpanElement>, "theme"> & {
+    theme?: ("light" | "tonal" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "light" | "tonal">>) | undefined;
+} & {
+    as?: React.ElementType;
+}, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+declare const StyledSlider: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-slider").SliderProps & React.RefAttributes<HTMLSpanElement>, never> & {
+    as?: React.ElementType;
+}, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export type SliderProps = React.ComponentProps<typeof StyledSlider> & Pick<React.ComponentProps<typeof StyledTrack>, 'theme'>;
+type SliderType = ReturnType<typeof React.forwardRef<HTMLSpanElement, 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 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  Pick<React.ComponentProps<typeof StyledTrack>, 'theme'>\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.d.ts

@@ -5,7 +5,7 @@ import { SliderStepsType } from '../../components/slider/SliderSteps';
 import { SliderValueType } from '../slider/SliderValue';
 type SliderFieldProps = SliderProps & SliderStepsType & SliderValueType & FieldElementWrapperProps;
 export declare const SliderField: {
-    ({ css, hideLabel, label, name, defaultValue, value, validation, outputLabel, min, max, steps, ...remainingProps }: SliderFieldProps): React.JSX.Element;
+    ({ className, hideLabel, label, name, defaultValue, value, validation, outputLabel, min, max, steps, ...remainingProps }: SliderFieldProps): React.JSX.Element;
     displayName: string;
 };
 export {};

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"}