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

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { SliderSteps } from './SliderSteps';
 import { SliderValue } from './SliderValue';
-declare const StyledSlider: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-slider").SliderProps & React.RefAttributes<HTMLSpanElement>>, {
+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;
@@ -11,7 +11,7 @@ declare const StyledSlider: import("@stitches/react/types/styled-component").Sty
     reducedMotion: string;
     allowMotion: string;
     hover: string;
-}, import("@stitches/react/types/css-util").CSS<{
+}, import("@atom-learning/stitches-react/types/css-util").CSS<{
     sm: string;
     md: string;
     lg: string;
@@ -51,6 +51,18 @@ declare const StyledSlider: import("@stitches/react/types/styled-component").Sty
         blue1000: any;
         blue1100: any;
         blue1200: any;
+        pink100: any;
+        pink200: any;
+        pink300: any;
+        pink400: any;
+        pink500: any;
+        pink600: any;
+        pink700: any;
+        pink800: any;
+        pink900: any;
+        pink1000: any;
+        pink1100: any;
+        pink1200: any;
         purple100: any;
         purple200: any;
         purple300: any;
@@ -195,26 +207,11 @@ declare const StyledSlider: import("@stitches/react/types/styled-component").Sty
         marsh1000: any;
         marsh1100: any;
         marsh1200: any;
-        tonal50: any;
-        tonal100: any;
-        tonal200: any;
-        tonal300: any;
-        tonal400: any;
-        tonal500: any;
-        tonal600: any;
         alpha100: any;
         alpha150: any;
         alpha200: any;
         alpha250: any;
         alpha600: any;
-        brandRed: any;
-        brandRedAccent: any;
-        brandGreen: any;
-        brandGreenAccent: any;
-        brandPurple: any;
-        brandPurpleAccent: any;
-        brandYellow: any;
-        brandYellowAccent: any;
         infoLight: any;
         info: any;
         infoMid: any;
@@ -315,59 +312,59 @@ declare const StyledSlider: import("@stitches/react/types/styled-component").Sty
         "1-1": any;
         "3-4": any;
     };
-}, import("@stitches/react/types/config").DefaultThemeMap, {
-    bg: (value: import("@stitches/react/types/css-util").WithPropertyValue<"background">) => {
-        background: import("@stitches/react/types/css-util").WithPropertyValue<"background">;
+}, import("@atom-learning/stitches-react/types/config").DefaultThemeMap, {
+    bg: (value: import("@atom-learning/stitches-react/types/css-util").WithPropertyValue<"background">) => {
+        background: import("@atom-learning/stitches-react/types/css-util").WithPropertyValue<"background">;
     };
-    size: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"size">) => {
-        height: string | number | import("@stitches/react/types/css-util").WithScaleValue<"size">;
-        width: string | number | import("@stitches/react/types/css-util").WithScaleValue<"size">;
+    size: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"size">) => {
+        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: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        padding: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    p: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        padding: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
     };
-    pt: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    pt: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        paddingTop: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
     };
-    pr: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    pr: (value: 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">;
     };
-    pb: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    pb: (value: 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">;
     };
-    pl: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    pl: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        paddingLeft: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
     };
-    px: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-        paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    px: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        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: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-        paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    py: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        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: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        margin: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    m: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        margin: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
     };
-    mt: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    mt: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        marginTop: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
     };
-    mr: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    mr: (value: 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">;
     };
-    mb: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    mb: (value: 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">;
     };
-    ml: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    ml: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        marginLeft: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
     };
-    mx: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-        marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    mx: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        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: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
-        marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
-        marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    my: (value: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">) => {
+        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 declare type SliderProps = React.ComponentProps<typeof StyledSlider>;

package/dist/components/slider/Slider.js

@@ -1,2 +1,2 @@
-import{Track as $,Root as b,Range as g,Thumb as v}from"@radix-ui/react-slider";import*as e from"react";import{styled as t}from"../../stitches.js";import{CSSWrapper as y}from"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import{disabledStyle as a}from"../../utilities/style/disabledStyle.js";import{SliderSteps as S}from"./SliderSteps.js";import{SliderValue as x}from"./SliderValue.js";const o=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"},"&[data-disabled]":a,variants:{theme:{light:{[`${o}`]:{bg:"#fff"}},tonal:{[`${o}`]:{bg:"$tonal200"}}}}}),E=t(g,{bg:"$primary800",borderRadius:"$round",height:"100%",position:"absolute","&[data-disabled]":a}),k=t(v,{bg:"$primary900",borderRadius:"$round",display:"block",size:"$1","&:hover":{bg:"$primary1000"},"&:focus":{outline:"2px solid $primary900",outlineOffset:"2px"},"&[data-disabled]":a}),r=e.forwardRef(({value:l,defaultValue:n,min:d=0,max:m=100,theme:s="tonal",css:p,children:u,...c},f)=>{const i=l||n;return e.createElement(y,{css:p},e.createElement(R,{theme:s,defaultValue:n,value:l,min:d,max:m,ref:f,...c},e.createElement(o,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 $,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};
 //# 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  '&[data-disabled]': disabledStyle,\n  variants: {\n    theme: {\n      light: {\n        [`${StyledTrack}`]: { bg: '#fff' }\n      },\n      tonal: {\n        [`${StyledTrack}`]: { bg: '$tonal200' }\n      }\n    }\n  }\n})\n\nconst StyledRange = styled(Range, {\n  bg: '$primary800',\n  borderRadius: '$round',\n  height: '100%',\n  position: 'absolute',\n  '&[data-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  '&[data-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,mBAAoBC,EACpB,SAAU,CACR,MAAO,CACL,MAAO,CACL,CAAC,GAAGL,KAAgB,CAAE,GAAI,MAAO,CACnC,EACA,MAAO,CACL,CAAC,GAAGA,KAAgB,CAAE,GAAI,WAAY,CACxC,CACF,CACF,CACF,CAAC,EAEKM,EAAcL,EAAOM,EAAO,CAChC,GAAI,cACJ,aAAc,SACd,OAAQ,OACR,SAAU,WACV,mBAAoBF,CACtB,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,mBAAoBJ,CACtB,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 '~/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"}

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 export declare type SliderStepsType = {
     steps?: {
         label: string;
@@ -9,5 +9,5 @@ declare type SliderStepsProps = {
     min: number;
     max: number;
 } & SliderStepsType;
-export declare const SliderSteps: ({ min, max, steps }: SliderStepsProps) => JSX.Element | null;
+export declare const SliderSteps: ({ min, max, steps }: SliderStepsProps) => React.JSX.Element | null;
 export {};

package/dist/components/slider/SliderSteps.js

@@ -1,2 +1,2 @@
-import*as a from"react";import{styled as n}from"../../stitches.js";import{Text as r}from"../text/Text.js";const i=n("div",{height:"$space$3",mt:"$3",position:"relative",width:"100%"}),s=(l,t,o)=>(l-t)/(o-t)*100,m=(l,t,o)=>{const e=s(l,t,o);return e<=10?0:e>=90?100:50},p=({min:l,max:t,steps:o=[]})=>o.length===0?null:a.createElement(i,null,o.map(e=>a.createElement(r,{as:"span",key:e.value,css:{position:"absolute",color:"$tonal300"},style:{left:`${s(e.value,l,t)}%`,transform:`translateX(-${m(e.value,l,t)}%)`}},e.label)));export{p as SliderSteps};
+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};
 //# 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: '$tonal300'\n          }}\n          style={{\n            left: `${getPercentValue(step.value, min, max)}%`,\n            transform: `translateX(-${getTransformValue(\n              step.value,\n              min,\n              max\n            )}%)`\n          }}\n        >\n          {step.label}\n        </Text>\n      ))}\n    </SliderStepsContainer>\n  )\n}\n"],"names":["SliderStepsContainer","styled","getPercentValue","value","min","max","getTransformValue","percentage","SliderSteps","steps","React","step","Text"],"mappings":"0GAeA,MAAMA,EAAuBC,EAAO,MAAO,CACzC,OAAQ,WACR,GAAI,KACJ,SAAU,WACV,MAAO,MACT,CAAC,EAEKC,EAAkB,CAACC,EAAeC,EAAaC,KAC1CF,EAAQC,IAAQC,EAAMD,GAAQ,IAGnCE,EAAoB,CAACH,EAAeC,EAAaC,IAAwB,CAC7E,MAAME,EAAaL,EAAgBC,EAAOC,EAAKC,CAAG,EAElD,OAAIE,GAAc,GAAW,EACzBA,GAAc,GAAW,IACtB,EACT,EAEaC,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,WACT,EACA,MAAO,CACL,KAAM,GAAGT,EAAgBS,EAAK,MAAOP,EAAKC,CAAG,KAC7C,UAAW,eAAeC,EACxBK,EAAK,MACLP,EACAC,CACF,KACF,CAECM,EAAAA,EAAK,KACR,CACD,CACH"}
+{"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"}

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

@@ -1,9 +1,9 @@
-/// <reference types="react" />
+import * as React from 'react';
 export declare type SliderValueType = {
     outputLabel?: (value: number | number[]) => string;
 };
 declare type SliderValueProps = SliderValueType & {
     value?: number[];
 };
-export declare const SliderValue: ({ value, outputLabel }: SliderValueProps) => JSX.Element;
+export declare const SliderValue: ({ value, outputLabel }: SliderValueProps) => React.JSX.Element;
 export {};

package/dist/components/slider/SliderValue.js

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

package/dist/components/slider-field/SliderField.d.ts

@@ -1,11 +1,11 @@
-/// <reference types="react" />
+import React from 'react';
 import { FieldElementWrapperProps } from '../../components/field-wrapper';
 import { SliderProps } from '../../components/slider';
 import { SliderStepsType } from '../../components/slider/SliderSteps';
 import { SliderValueType } from '../slider/SliderValue';
 declare type SliderFieldProps = SliderProps & SliderStepsType & SliderValueType & FieldElementWrapperProps;
 export declare const SliderField: {
-    ({ css, hideLabel, label, name, defaultValue, value, validation, outputLabel, min, max, steps, ...remainingProps }: SliderFieldProps): JSX.Element;
+    ({ css, hideLabel, label, name, defaultValue, value, validation, outputLabel, min, max, steps, ...remainingProps }: SliderFieldProps): React.JSX.Element;
     displayName: string;
 };
 export {};