@veeqo/ui 9.0.0-beta-3 → 9.0.0

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

@@ -1,4 +1,3 @@
 import React from 'react';
 import { SliderComponentPropTypes } from './types';
 export declare const Slider: ({ id, value, min, max, step, onChange, className, e2eClassName, onSlideStart, onSlideEnd, }: SliderComponentPropTypes) => React.JSX.Element;
-//# sourceMappingURL=Slider.d.ts.map

package/dist/components/Slider/Slider.js

@@ -1,2 +1,142 @@
-import e,{useState as r,useRef as n,useCallback as t,useEffect as l}from"react";import{SliderContainer as i,SliderTrack as o,SliderRange as d,SliderDiv as a}from"./styled.js";import{buildClassnames as s}from"../../utils/buildClassnames.js";const u=e=>({container:e?`${e}-slider-container`:void 0,sliderRange:e?`${e}-slider-range`:void 0,slider:e?`${e}-slider`:void 0,startSlider:e?`${e}-start-slider`:void 0,endSlider:e?`${e}-end-slider`:void 0}),m=({id:m,value:v,min:c,max:y,step:f=1,onChange:p,className:E,e2eClassName:g,onSlideStart:A=(()=>{}),onSlideEnd:S=(()=>{})})=>{const[L,w]=r(!1),[h,N]=r(-1),x=n(null),$=n(null),b=n(null),C=u(E),R=u(g),j=t((e=>{var r;if(!L||!x.current)return;const n=h>-1?v[h]:v,t=x.current.getBoundingClientRect();let l=100*(e.pageX-t.x)/t.width/100*(y-c)+c;const i=n-l;if(i>0&&(l=n+Math.ceil(l/f-n/f)*f),i<0&&(l=n+Math.floor(l/f-n/f)*f),n===l)return;l>y&&(l=y),l<c&&(l=c),Array.isArray(v)&&(0===h&&l>v[1]&&([,l]=v),1===h&&l<v[0]&&([l]=v));const o=f.toString().includes(".")?null===(r=f.toString().split(".").pop())||void 0===r?void 0:r.length:0;let d;l=Number(l.toFixed(o)),d=Array.isArray(v)?0===h?[l,v[1]]:[v[0],l]:l,p(d),Array.isArray(d)&&d[0]===d[1]&&(0===h&&N(1),1===h&&N(0))}),[h,L,y,c,p,f,v]),F=t((()=>{w(!1),S()}),[S]),M=t(((e,r)=>{w(!0),A(),"number"==typeof r&&N(r),e.preventDefault()}),[A]);l((()=>{const e=e=>M(e,Array.isArray(v)?0:1),r=e=>M(e,1),n=$.current,t=b.current;return null==n||n.addEventListener("mousedown",e),null==t||t.addEventListener("mousedown",r),document.addEventListener("mousemove",j),document.addEventListener("mouseup",F),()=>{null==n||n.removeEventListener("mousedown",e),null==t||t.removeEventListener("mousedown",r),document.removeEventListener("mousemove",j),document.removeEventListener("mouseup",F)}}),[M,j,F,v]);const B=(r,n,t)=>{let l;return l=s("number"==typeof t?0===t?[null==C?void 0:C.startSlider,null==R?void 0:R.startSlider]:[null==C?void 0:C.endSlider,null==R?void 0:R.endSlider]:[null==C?void 0:C.slider,null==R?void 0:R.slider]),e.createElement(a,{role:"slider",ref:1===t?b:$,className:l,left:r,"aria-valuemin":c,"aria-valuemax":y,"aria-valuenow":n})},D=r=>{const n=100*(r[0]<c?0:r[0]-c)/(y-c),t=100*(r[1]>y?100:r[1]-c)/(y-c),l=t-n;return e.createElement(e.Fragment,null,e.createElement(d,{className:s([null==C?void 0:C.sliderRange,null==R?void 0:R.sliderRange]),left:n,width:l}),B(n,r[0],0),B(t,r[1],1))};let X;return X=Array.isArray(v)?D(v):(e=>{if(Array.isArray(v))return D(v);let r;return r=v>y?100:v<c?0:100*(e-c)/(y-c),B(r,e)})(v),e.createElement(i,{className:s([null==C?void 0:C.container,null==R?void 0:R.container]),id:m,ref:x},e.createElement(o,null),X)};export{m as Slider};
+import React, { useState, useRef, useCallback, useEffect } from 'react';
+import { SliderContainer, SliderTrack, SliderRange, SliderDiv } from './styled.js';
+import { buildClassnames } from '../../utils/buildClassnames.js';
+
+const generateClassNames = (prefix) => ({
+    container: prefix ? `${prefix}-slider-container` : undefined,
+    sliderRange: prefix ? `${prefix}-slider-range` : undefined,
+    slider: prefix ? `${prefix}-slider` : undefined,
+    startSlider: prefix ? `${prefix}-start-slider` : undefined,
+    endSlider: prefix ? `${prefix}-end-slider` : undefined,
+});
+const Slider = ({ id, value, min, max, step = 1, onChange, className, e2eClassName, onSlideStart = () => { }, onSlideEnd = () => { }, }) => {
+    const [isDragging, setIsDragging] = useState(false);
+    const [draggingSliderIndex, setDraggingSliderIndex] = useState(-1);
+    const containerRef = useRef(null);
+    const startSliderRef = useRef(null);
+    const endSliderRef = useRef(null);
+    const classNames = generateClassNames(className);
+    const e2eClassNames = generateClassNames(e2eClassName);
+    const handleMouseMove = useCallback((e) => {
+        var _a;
+        if (!isDragging || !containerRef.current)
+            return;
+        const sliderValue = draggingSliderIndex > -1 ? value[draggingSliderIndex] : value;
+        const containerSize = containerRef.current.getBoundingClientRect();
+        // slider position relative to the container in percents
+        const handleValue = ((e.pageX - containerSize.x) * 100) / containerSize.width;
+        // current value by slider position
+        let newValue = (max - min) * (handleValue / 100) + min;
+        const diff = sliderValue - newValue;
+        // use to apply step to new value
+        if (diff > 0) {
+            newValue = sliderValue + Math.ceil(newValue / step - sliderValue / step) * step;
+        }
+        if (diff < 0) {
+            newValue = sliderValue + Math.floor(newValue / step - sliderValue / step) * step;
+        }
+        if (sliderValue === newValue)
+            return;
+        if (newValue > max)
+            newValue = max;
+        if (newValue < min)
+            newValue = min;
+        if (Array.isArray(value)) {
+            if (draggingSliderIndex === 0 && newValue > value[1])
+                [, newValue] = value;
+            if (draggingSliderIndex === 1 && newValue < value[0])
+                [newValue] = value;
+        }
+        // used to fix 0.30000000000000004 problem
+        const decimalPlaces = step.toString().includes('.')
+            ? (_a = step.toString().split('.').pop()) === null || _a === undefined ? undefined : _a.length
+            : 0;
+        newValue = Number(newValue.toFixed(decimalPlaces));
+        let resultValue;
+        if (Array.isArray(value)) {
+            resultValue = draggingSliderIndex === 0 ? [newValue, value[1]] : [value[0], newValue];
+        }
+        else {
+            resultValue = newValue;
+        }
+        onChange(resultValue);
+        if (Array.isArray(resultValue) && resultValue[0] === resultValue[1]) {
+            if (draggingSliderIndex === 0)
+                setDraggingSliderIndex(1);
+            if (draggingSliderIndex === 1)
+                setDraggingSliderIndex(0);
+        }
+    }, [draggingSliderIndex, isDragging, max, min, onChange, step, value]);
+    const handleMouseUp = useCallback(() => {
+        setIsDragging(false);
+        onSlideEnd();
+    }, [onSlideEnd]);
+    const handleMouseDown = useCallback((e, index) => {
+        setIsDragging(true);
+        onSlideStart();
+        if (typeof index === 'number')
+            setDraggingSliderIndex(index);
+        e.preventDefault();
+    }, [onSlideStart]);
+    useEffect(() => {
+        const handleStartSliderMouseDown = (e) => handleMouseDown(e, Array.isArray(value) ? 0 : 1);
+        const handleEndSliderMouseDown = (e) => handleMouseDown(e, 1);
+        const startSliderEl = startSliderRef.current;
+        const endSliderEl = endSliderRef.current;
+        startSliderEl === null || startSliderEl === undefined ? undefined : startSliderEl.addEventListener('mousedown', handleStartSliderMouseDown);
+        endSliderEl === null || endSliderEl === undefined ? undefined : endSliderEl.addEventListener('mousedown', handleEndSliderMouseDown);
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+        return () => {
+            startSliderEl === null || startSliderEl === undefined ? undefined : startSliderEl.removeEventListener('mousedown', handleStartSliderMouseDown);
+            endSliderEl === null || endSliderEl === undefined ? undefined : endSliderEl.removeEventListener('mousedown', handleEndSliderMouseDown);
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+        };
+    }, [handleMouseDown, handleMouseMove, handleMouseUp, value]);
+    const renderSlider = (left, valueNow, index) => {
+        let sliderClassName;
+        if (typeof index === 'number') {
+            sliderClassName = buildClassnames(index === 0
+                ? [classNames === null || classNames === undefined ? undefined : classNames.startSlider, e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.startSlider]
+                : [classNames === null || classNames === undefined ? undefined : classNames.endSlider, e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.endSlider]);
+        }
+        else {
+            sliderClassName = buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.slider, e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.slider]);
+        }
+        return (React.createElement(SliderDiv, { role: "slider", ref: index === 1 ? endSliderRef : startSliderRef, className: sliderClassName, left: left, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": valueNow }));
+    };
+    const renderRangeSlider = (rangeSliderValue) => {
+        // handle value used to get slider position relative to container from value
+        const handleValueStart = ((rangeSliderValue[0] < min ? 0 : rangeSliderValue[0] - min) * 100) / (max - min);
+        const handleValueEnd = ((rangeSliderValue[1] > max ? 100 : rangeSliderValue[1] - min) * 100) / (max - min);
+        const rangeWidth = handleValueEnd - handleValueStart;
+        return (React.createElement(React.Fragment, null,
+            React.createElement(SliderRange, { className: buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.sliderRange, e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.sliderRange]), left: handleValueStart, width: rangeWidth }),
+            renderSlider(handleValueStart, rangeSliderValue[0], 0),
+            renderSlider(handleValueEnd, rangeSliderValue[1], 1)));
+    };
+    const renderSingleSlider = (sliderValue) => {
+        if (Array.isArray(value))
+            return renderRangeSlider(value);
+        let handleValue;
+        if (value > max)
+            handleValue = 100;
+        else if (value < min)
+            handleValue = 0;
+        else
+            handleValue = ((sliderValue - min) * 100) / (max - min);
+        return renderSlider(handleValue, sliderValue);
+    };
+    let render;
+    if (Array.isArray(value))
+        render = renderRangeSlider(value);
+    else
+        render = renderSingleSlider(value);
+    return (React.createElement(SliderContainer, { className: buildClassnames([classNames === null || classNames === undefined ? undefined : classNames.container, e2eClassNames === null || e2eClassNames === undefined ? undefined : e2eClassNames.container]), id: id, ref: containerRef },
+        React.createElement(SliderTrack, null),
+        render));
+};
+
+export { Slider };
 //# sourceMappingURL=Slider.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"Slider.js","sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":[null],"names":[],"mappings":"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"}

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

@@ -1,2 +1 @@
 export { Slider } from './Slider';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/Slider/styled.cjs

@@ -1,37 +1,23 @@
-"use strict";var e=require("styled-components"),t=require("../../theme/index.cjs");function o(e){return e&&e.__esModule?e:{default:e}}var i=o(e);const r=i.default.div`
-  min-width: 128px;
-  display: inline-block;
-  position: relative;
-  padding: ${8}px 0px;
-`,d=i.default.div`
-  background: ${t.theme.colors.neutral.grey.base};
-  height: ${4}px;
-  border-radius: 20px;
-`,s=i.default.div`
-  position: absolute;
-  top: -${0}px;
-  left: ${e=>`${e.left}%`};
-  width: ${12}px;
-  height: ${12}px;
-  background: white;
-  border: ${4}px solid ${t.theme.colors.secondary.blue.base};
-  border-radius: 50%;
-  touch-action: none;
-  cursor: pointer;
-  margin-left: -${12}px;
+'use strict';
 
-  &:active,
-  &:focus,
-  &:focus-visible,
-  &:focus-within {
-    box-shadow: 0 0 0 4px ${t.theme.colors.secondary.blue.light};
-  }
-`,l=i.default(d)`
-  position: relative;
-  width: ${e=>`${e.width}%`};
-  left: ${e=>`${e.left}%`};
-  background: ${t.theme.colors.secondary.blue.light};
-  bottom: ${4}px;
-  border-radius: 0;
-`;exports.SliderContainer=r,exports.SliderDiv=s,exports.SliderRange=l,exports.SliderTrack=d;
+var styled = require('styled-components');
+var index = require('../../theme/index.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
+const TRACK_HEIGHT = 4;
+const BORDER_SIZE = 4;
+const SLIDER_SIZE = 12;
+const ADDITIONAL_PADDING = 2;
+const SliderContainer = styled__default.default.div.withConfig({ displayName: "vui--SliderContainer", componentId: "vui--103oce3" }) `min-width:128px;display:inline-block;position:relative;padding:${SLIDER_SIZE / 2 + ADDITIONAL_PADDING}px 0px;`;
+const SliderTrack = styled__default.default.div.withConfig({ displayName: "vui--SliderTrack", componentId: "vui--1ctzbzj" }) `background:${index.theme.colors.neutral.grey.base};height:${TRACK_HEIGHT}px;border-radius:20px;`;
+const SliderDiv = styled__default.default.div.withConfig({ displayName: "vui--SliderDiv", componentId: "vui--1tltjvk" }) `position:absolute;top:-${(SLIDER_SIZE - TRACK_HEIGHT) / 2 - ADDITIONAL_PADDING * 2}px;left:${(props) => `${props.left}%`};width:${SLIDER_SIZE}px;height:${SLIDER_SIZE}px;background:white;border:${BORDER_SIZE}px solid ${index.theme.colors.secondary.blue.base};border-radius:50%;touch-action:none;cursor:pointer;margin-left:-${SLIDER_SIZE}px;&:active,&:focus,&:focus-visible,&:focus-within{box-shadow:0 0 0 4px ${index.theme.colors.secondary.blue.light};}`;
+const SliderRange = styled__default.default(SliderTrack).withConfig({ displayName: "vui--SliderRange", componentId: "vui--t3v3py" }) `position:relative;width:${(props) => `${props.width}%`};left:${(props) => `${props.left}%`};background:${index.theme.colors.secondary.blue.light};bottom:${TRACK_HEIGHT}px;border-radius:0;`;
+
+exports.SliderContainer = SliderContainer;
+exports.SliderDiv = SliderDiv;
+exports.SliderRange = SliderRange;
+exports.SliderTrack = SliderTrack;
 //# sourceMappingURL=styled.cjs.map

package/dist/components/Slider/styled.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../src/components/Slider/styled.ts"],"sourcesContent":[null],"names":["styled","div"],"mappings":"iJAgBA,QAkCEA,EAAAA,QAAAC,GAAA;;;;;;;YAlCe;;;;;;WA2BA;YAAA;;YArBF;;;;kBAqBE;;;;;;;;;;;;;YA3BA;;"}
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/Slider/styled.ts"],"sourcesContent":[null],"names":["styled","theme"],"mappings":";;;;;;;;;AAIA,MAAM,YAAY,GAAG,CAAC;AACtB,MAAM,WAAW,GAAG,CAAC;AACrB,MAAM,WAAW,GAAG,EAAE;AACtB,MAAM,kBAAkB,GAAG,CAAC;AAE5B,MAAM,eAAe,GAAGA,uBAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,sBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,+DAAA,EAIrB,WAAW,GAAG,CAAC,GAAG,kBAAkB,CAAA,OAAA;AAGjD,MAAM,WAAW,GAAGA,uBAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,kBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,WAAA,EACdC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAClC,QAAA,EAAA,YAAY;AAIlB,MAAA,SAAS,GAAGD,uBAAM,CAAC,GAAG,CAElB,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,uBAAA,EAAA,CAAC,WAAW,GAAG,YAAY,IAAI,CAAC,GAAG,kBAAkB,GAAG,CAAC,CAAA,QAAA,EACzD,CAAC,KAAK,KAAK,CAAA,EAAG,KAAK,CAAC,IAAI,CAAA,CAAA,CAAG,UAC1B,WAAW,CAAA,UAAA,EACV,WAAW,CAAA,2BAAA,EAEX,WAAW,CAAA,SAAA,EAAYC,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,iEAAA,EAIjD,WAAW,CAAA,wEAAA,EAMDA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA,EAAA;AAI7D,MAAM,WAAW,GAAGD,uBAAM,CAAC,WAAW,CAAC,wGAE5B,CAAC,KAAK,KAAK,CAAG,EAAA,KAAK,CAAC,KAAK,CAAA,CAAA,CAAG,SAC7B,CAAC,KAAK,KAAK,CAAG,EAAA,KAAK,CAAC,IAAI,CAAA,CAAA,CAAG,eACrBC,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CACrC,QAAA,EAAA,YAAY;;;;;;;"}

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

@@ -6,4 +6,3 @@ declare const SliderRange: import("styled-components").StyledComponent<"div", an
     width: number;
 }, never>;
 export { SliderContainer, SliderTrack, SliderRange, SliderDiv };
-//# sourceMappingURL=styled.d.ts.map

package/dist/components/Slider/styled.js

@@ -1,37 +1,14 @@
-import o from"styled-components";import{theme as i}from"../../theme/index.js";const e=o.div`
-  min-width: 128px;
-  display: inline-block;
-  position: relative;
-  padding: ${8}px 0px;
-`,t=o.div`
-  background: ${i.colors.neutral.grey.base};
-  height: ${4}px;
-  border-radius: 20px;
-`,r=o.div`
-  position: absolute;
-  top: -${0}px;
-  left: ${o=>`${o.left}%`};
-  width: ${12}px;
-  height: ${12}px;
-  background: white;
-  border: ${4}px solid ${i.colors.secondary.blue.base};
-  border-radius: 50%;
-  touch-action: none;
-  cursor: pointer;
-  margin-left: -${12}px;
+import styled from 'styled-components';
+import { theme } from '../../theme/index.js';
 
-  &:active,
-  &:focus,
-  &:focus-visible,
-  &:focus-within {
-    box-shadow: 0 0 0 4px ${i.colors.secondary.blue.light};
-  }
-`,s=o(t)`
-  position: relative;
-  width: ${o=>`${o.width}%`};
-  left: ${o=>`${o.left}%`};
-  background: ${i.colors.secondary.blue.light};
-  bottom: ${4}px;
-  border-radius: 0;
-`;export{e as SliderContainer,r as SliderDiv,s as SliderRange,t as SliderTrack};
+const TRACK_HEIGHT = 4;
+const BORDER_SIZE = 4;
+const SLIDER_SIZE = 12;
+const ADDITIONAL_PADDING = 2;
+const SliderContainer = styled.div.withConfig({ displayName: "vui--SliderContainer", componentId: "vui--103oce3" }) `min-width:128px;display:inline-block;position:relative;padding:${SLIDER_SIZE / 2 + ADDITIONAL_PADDING}px 0px;`;
+const SliderTrack = styled.div.withConfig({ displayName: "vui--SliderTrack", componentId: "vui--1ctzbzj" }) `background:${theme.colors.neutral.grey.base};height:${TRACK_HEIGHT}px;border-radius:20px;`;
+const SliderDiv = styled.div.withConfig({ displayName: "vui--SliderDiv", componentId: "vui--1tltjvk" }) `position:absolute;top:-${(SLIDER_SIZE - TRACK_HEIGHT) / 2 - ADDITIONAL_PADDING * 2}px;left:${(props) => `${props.left}%`};width:${SLIDER_SIZE}px;height:${SLIDER_SIZE}px;background:white;border:${BORDER_SIZE}px solid ${theme.colors.secondary.blue.base};border-radius:50%;touch-action:none;cursor:pointer;margin-left:-${SLIDER_SIZE}px;&:active,&:focus,&:focus-visible,&:focus-within{box-shadow:0 0 0 4px ${theme.colors.secondary.blue.light};}`;
+const SliderRange = styled(SliderTrack).withConfig({ displayName: "vui--SliderRange", componentId: "vui--t3v3py" }) `position:relative;width:${(props) => `${props.width}%`};left:${(props) => `${props.left}%`};background:${theme.colors.secondary.blue.light};bottom:${TRACK_HEIGHT}px;border-radius:0;`;
+
+export { SliderContainer, SliderDiv, SliderRange, SliderTrack };
 //# sourceMappingURL=styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../src/components/Slider/styled.ts"],"sourcesContent":[null],"names":["styled","div"],"mappings":"8EAgBA,QAkCEA,EAAAC,GAAA;;;;;;;YAlCe;;;;;;WA2BA;YAAA;;YArBF;;;;kBAqBE;;;;;;;;;;;;;YA3BA;;"}
+{"version":3,"file":"styled.js","sources":["../../../src/components/Slider/styled.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAIA,MAAM,YAAY,GAAG,CAAC;AACtB,MAAM,WAAW,GAAG,CAAC;AACrB,MAAM,WAAW,GAAG,EAAE;AACtB,MAAM,kBAAkB,GAAG,CAAC;AAE5B,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,sBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,+DAAA,EAIrB,WAAW,GAAG,CAAC,GAAG,kBAAkB,CAAA,OAAA;AAGjD,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,kBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,WAAA,EACd,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAClC,QAAA,EAAA,YAAY;AAIlB,MAAA,SAAS,GAAG,MAAM,CAAC,GAAG,CAElB,UAAA,CAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,uBAAA,EAAA,CAAC,WAAW,GAAG,YAAY,IAAI,CAAC,GAAG,kBAAkB,GAAG,CAAC,CAAA,QAAA,EACzD,CAAC,KAAK,KAAK,CAAA,EAAG,KAAK,CAAC,IAAI,CAAA,CAAA,CAAG,UAC1B,WAAW,CAAA,UAAA,EACV,WAAW,CAAA,2BAAA,EAEX,WAAW,CAAA,SAAA,EAAY,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,iEAAA,EAIjD,WAAW,CAAA,wEAAA,EAMD,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA,EAAA;AAI7D,MAAM,WAAW,GAAG,MAAM,CAAC,WAAW,CAAC,wGAE5B,CAAC,KAAK,KAAK,CAAG,EAAA,KAAK,CAAC,KAAK,CAAA,CAAA,CAAG,SAC7B,CAAC,KAAK,KAAK,CAAG,EAAA,KAAK,CAAC,IAAI,CAAA,CAAA,CAAG,eACrB,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CACrC,QAAA,EAAA,YAAY;;;;"}

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

@@ -24,4 +24,3 @@ export type SliderPropTypes = {
 export type SliderRangePropTypes = SliderPropTypes & {
     width: number;
 };
-//# sourceMappingURL=types.d.ts.map

package/dist/components/Stack/Alignments.cjs

@@ -1,2 +1,12 @@
-"use strict";var e;exports.Alignments=void 0,(e=exports.Alignments||(exports.Alignments={})).start="flex-start",e.center="center",e.end="flex-end",e.stretch="stretch",e.between="space-between",e.around="space-around";
+'use strict';
+
+exports.Alignments = void 0;
+(function (Alignments) {
+    Alignments["start"] = "flex-start";
+    Alignments["center"] = "center";
+    Alignments["end"] = "flex-end";
+    Alignments["stretch"] = "stretch";
+    Alignments["between"] = "space-between";
+    Alignments["around"] = "space-around";
+})(exports.Alignments || (exports.Alignments = {}));
 //# sourceMappingURL=Alignments.cjs.map

package/dist/components/Stack/Alignments.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Alignments.cjs","sources":["../../../src/components/Stack/Alignments.ts"],"sourcesContent":[null],"names":["Alignments"],"mappings":"aACE,IAAoBA,EADtBA,QAAsBA,gBAAA,GACAA,+CACH,MAAA,aACjBA,EAAgB,OAAA,SAChBA,EAAmB,IAAA,WACnBA,EAAyB,QAAA,UACzBA,EAAuB,QAAA,gBACxBA,EAAA,OAAA"}
+{"version":3,"file":"Alignments.cjs","sources":["../../../src/components/Stack/Alignments.ts"],"sourcesContent":[null],"names":["Alignments"],"mappings":";;AAAYA;AAAZ,CAAA,UAAY,UAAU,EAAA;AACpB,IAAA,UAAA,CAAA,OAAA,CAAA,GAAA,YAAoB;AACpB,IAAA,UAAA,CAAA,QAAA,CAAA,GAAA,QAAiB;AACjB,IAAA,UAAA,CAAA,KAAA,CAAA,GAAA,UAAgB;AAChB,IAAA,UAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,UAAA,CAAA,SAAA,CAAA,GAAA,eAAyB;AACzB,IAAA,UAAA,CAAA,QAAA,CAAA,GAAA,cAAuB;AACzB,CAAC,EAPWA,kBAAU,KAAVA,kBAAU,GAOrB,EAAA,CAAA,CAAA;;"}

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

@@ -6,4 +6,3 @@ export declare enum Alignments {
     between = "space-between",
     around = "space-around"
 }
-//# sourceMappingURL=Alignments.d.ts.map

package/dist/components/Stack/Alignments.js

@@ -1,2 +1,12 @@
-var e;!function(e){e.start="flex-start",e.center="center",e.end="flex-end",e.stretch="stretch",e.between="space-between",e.around="space-around"}(e||(e={}));export{e as Alignments};
+var Alignments;
+(function (Alignments) {
+    Alignments["start"] = "flex-start";
+    Alignments["center"] = "center";
+    Alignments["end"] = "flex-end";
+    Alignments["stretch"] = "stretch";
+    Alignments["between"] = "space-between";
+    Alignments["around"] = "space-around";
+})(Alignments || (Alignments = {}));
+
+export { Alignments };
 //# sourceMappingURL=Alignments.js.map

package/dist/components/Stack/Alignments.js.map

@@ -1 +1 @@
-{"version":3,"file":"Alignments.js","sources":["../../../src/components/Stack/Alignments.ts"],"sourcesContent":[null],"names":["Alignments"],"mappings":"AAAA,IAAAA,GACE,SAAoBA,GACpBA,EAAiB,MAAA,aACjBA,EAAgB,OAAA,SAChBA,EAAmB,IAAA,WACnBA,EAAyB,QAAA,UACzBA,EAAuB,QAAA,gBACxBA,EAAA,OAAA,eANC"}
+{"version":3,"file":"Alignments.js","sources":["../../../src/components/Stack/Alignments.ts"],"sourcesContent":[null],"names":[],"mappings":"IAAY;AAAZ,CAAA,UAAY,UAAU,EAAA;AACpB,IAAA,UAAA,CAAA,OAAA,CAAA,GAAA,YAAoB;AACpB,IAAA,UAAA,CAAA,QAAA,CAAA,GAAA,QAAiB;AACjB,IAAA,UAAA,CAAA,KAAA,CAAA,GAAA,UAAgB;AAChB,IAAA,UAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,UAAA,CAAA,SAAA,CAAA,GAAA,eAAyB;AACzB,IAAA,UAAA,CAAA,QAAA,CAAA,GAAA,cAAuB;AACzB,CAAC,EAPW,UAAU,KAAV,UAAU,GAOrB,EAAA,CAAA,CAAA;;;;"}

package/dist/components/Stack/Stack.cjs

@@ -1,6 +1,58 @@
-"use strict";var e=require("styled-components"),n=require("./Alignments.cjs"),t=require("../../theme/index.cjs");function i(e){return e&&e.__esModule?e:{default:e}}const s=i(e).default.div`
-  display: flex;
+'use strict';
 
-  ${e=>{const{direction:i="vertical",alignX:s="start",alignY:r="start",spacing:l="base"}=e;let a,c,o,m,u="",g="";return"vertical"===i?(a=s&&n.Alignments[s],c=r&&n.Alignments[r],u=t.theme.sizes[l],o="column"):(a=r&&n.Alignments[r],c=s&&n.Alignments[s],g=t.theme.sizes[l],o="row"),("vertical"===i&&"stretch"===r||"horizontal"===i&&"stretch"===s)&&(m=1),`\n      align-items: ${a};\n      justify-content: ${c};\n      flex-direction: ${o};\n\n      & > * {\n        flex: ${m};\n      }\n\n      & > * + * {\n        margin-top: ${u};\n        margin-left: ${g};\n      }\n    `}}
-`;s.displayName="Stack",exports.Stack=s;
+var styled = require('styled-components');
+var Alignments = require('./Alignments.cjs');
+var index = require('../../theme/index.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
+/**
+ * Layout component.
+ */
+const Stack = styled__default.default.div.withConfig({ displayName: "vui--Stack", componentId: "vui--1mxdupo" }) `display:flex;${(props) => {
+    const { direction = 'vertical', alignX = 'start', alignY = 'start', spacing = 'base' } = props;
+    let alignItems;
+    let justifyContent;
+    let flexDirection;
+    let itemFlex;
+    let marginTop = '';
+    let marginLeft = '';
+    if (direction === 'vertical') {
+        alignItems = alignX && Alignments.Alignments[alignX];
+        justifyContent = alignY && Alignments.Alignments[alignY];
+        marginTop = index.theme.sizes[spacing];
+        flexDirection = 'column';
+    }
+    else {
+        alignItems = alignY && Alignments.Alignments[alignY];
+        justifyContent = alignX && Alignments.Alignments[alignX];
+        marginLeft = index.theme.sizes[spacing];
+        flexDirection = 'row';
+    }
+    // These options result in 'justify-content: stretch' which doesn't exist,
+    // so instead we set the flex of child elements
+    if ((direction === 'vertical' && alignY === 'stretch') ||
+        (direction === 'horizontal' && alignX === 'stretch')) {
+        itemFlex = 1;
+    }
+    return `
+      align-items: ${alignItems};
+      justify-content: ${justifyContent};
+      flex-direction: ${flexDirection};
+
+      & > * {
+        flex: ${itemFlex};
+      }
+
+      & > * + * {
+        margin-top: ${marginTop};
+        margin-left: ${marginLeft};
+      }
+    `;
+}}`;
+Stack.displayName = 'Stack';
+
+exports.Stack = Stack;
 //# sourceMappingURL=Stack.cjs.map

package/dist/components/Stack/Stack.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Stack.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"Stack.cjs","sources":["../../../src/components/Stack/Stack.tsx"],"sourcesContent":[null],"names":["styled","Alignments","theme"],"mappings":";;;;;;;;;;AAOA;;AAEG;AACU,MAAA,KAAK,GAAGA,uBAAM,CAAC,GAAG,CAG3B,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,aAAA,EAAA,CAAC,KAAK,KAAI;AACV,IAAA,MAAM,EAAE,SAAS,GAAG,UAAU,EAAE,MAAM,GAAG,OAAO,EAAE,MAAM,GAAG,OAAO,EAAE,OAAO,GAAG,MAAM,EAAE,GAAG,KAAK;AAE9F,IAAA,IAAI,UAAU;AACd,IAAA,IAAI,cAAc;AAClB,IAAA,IAAI,aAAa;AACjB,IAAA,IAAI,QAAQ;IACZ,IAAI,SAAS,GAAG,EAAE;IAClB,IAAI,UAAU,GAAG,EAAE;IAEnB,IAAI,SAAS,KAAK,UAAU,EAAE;AAC5B,QAAA,UAAU,GAAG,MAAM,IAAIC,qBAAU,CAAC,MAAM,CAAC;AACzC,QAAA,cAAc,GAAG,MAAM,IAAIA,qBAAU,CAAC,MAAM,CAAC;AAC7C,QAAA,SAAS,GAAGC,WAAK,CAAC,KAAK,CAAC,OAAO,CAAC;QAChC,aAAa,GAAG,QAAQ;AACzB;AAAM,SAAA;AACL,QAAA,UAAU,GAAG,MAAM,IAAID,qBAAU,CAAC,MAAM,CAAC;AACzC,QAAA,cAAc,GAAG,MAAM,IAAIA,qBAAU,CAAC,MAAM,CAAC;AAC7C,QAAA,UAAU,GAAGC,WAAK,CAAC,KAAK,CAAC,OAAO,CAAC;QACjC,aAAa,GAAG,KAAK;AACtB;;;IAID,IACE,CAAC,SAAS,KAAK,UAAU,IAAI,MAAM,KAAK,SAAS;SAChD,SAAS,KAAK,YAAY,IAAI,MAAM,KAAK,SAAS,CAAC,EACpD;QACA,QAAQ,GAAG,CAAC;AACb;IAED,OAAO;qBACU,UAAU,CAAA;yBACN,cAAc,CAAA;wBACf,aAAa,CAAA;;;gBAGrB,QAAQ,CAAA;;;;sBAIF,SAAS,CAAA;uBACR,UAAU,CAAA;;KAE5B;AACH,CAAC;AAGH,KAAK,CAAC,WAAW,GAAG,OAAO;;;;"}

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

@@ -3,4 +3,3 @@ import { StackProps } from './types';
  * Layout component.
  */
 export declare const Stack: import("styled-components").StyledComponent<"div", any, StackProps, never>;
-//# sourceMappingURL=Stack.d.ts.map

package/dist/components/Stack/Stack.js

@@ -1,6 +1,52 @@
-import n from"styled-components";import{Alignments as t}from"./Alignments.js";import{theme as e}from"../../theme/index.js";const i=n.div`
-  display: flex;
+import styled from 'styled-components';
+import { Alignments } from './Alignments.js';
+import { theme } from '../../theme/index.js';
 
-  ${n=>{const{direction:i="vertical",alignX:r="start",alignY:s="start",spacing:o="base"}=n;let a,l,c,m,p="",f="";return"vertical"===i?(a=r&&t[r],l=s&&t[s],p=e.sizes[o],c="column"):(a=s&&t[s],l=r&&t[r],f=e.sizes[o],c="row"),("vertical"===i&&"stretch"===s||"horizontal"===i&&"stretch"===r)&&(m=1),`\n      align-items: ${a};\n      justify-content: ${l};\n      flex-direction: ${c};\n\n      & > * {\n        flex: ${m};\n      }\n\n      & > * + * {\n        margin-top: ${p};\n        margin-left: ${f};\n      }\n    `}}
-`;i.displayName="Stack";export{i as Stack};
+/**
+ * Layout component.
+ */
+const Stack = styled.div.withConfig({ displayName: "vui--Stack", componentId: "vui--1mxdupo" }) `display:flex;${(props) => {
+    const { direction = 'vertical', alignX = 'start', alignY = 'start', spacing = 'base' } = props;
+    let alignItems;
+    let justifyContent;
+    let flexDirection;
+    let itemFlex;
+    let marginTop = '';
+    let marginLeft = '';
+    if (direction === 'vertical') {
+        alignItems = alignX && Alignments[alignX];
+        justifyContent = alignY && Alignments[alignY];
+        marginTop = theme.sizes[spacing];
+        flexDirection = 'column';
+    }
+    else {
+        alignItems = alignY && Alignments[alignY];
+        justifyContent = alignX && Alignments[alignX];
+        marginLeft = theme.sizes[spacing];
+        flexDirection = 'row';
+    }
+    // These options result in 'justify-content: stretch' which doesn't exist,
+    // so instead we set the flex of child elements
+    if ((direction === 'vertical' && alignY === 'stretch') ||
+        (direction === 'horizontal' && alignX === 'stretch')) {
+        itemFlex = 1;
+    }
+    return `
+      align-items: ${alignItems};
+      justify-content: ${justifyContent};
+      flex-direction: ${flexDirection};
+
+      & > * {
+        flex: ${itemFlex};
+      }
+
+      & > * + * {
+        margin-top: ${marginTop};
+        margin-left: ${marginLeft};
+      }
+    `;
+}}`;
+Stack.displayName = 'Stack';
+
+export { Stack };
 //# sourceMappingURL=Stack.js.map

package/dist/components/Stack/Stack.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stack.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"Stack.js","sources":["../../../src/components/Stack/Stack.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;AAOA;;AAEG;AACU,MAAA,KAAK,GAAG,MAAM,CAAC,GAAG,CAG3B,UAAA,CAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,aAAA,EAAA,CAAC,KAAK,KAAI;AACV,IAAA,MAAM,EAAE,SAAS,GAAG,UAAU,EAAE,MAAM,GAAG,OAAO,EAAE,MAAM,GAAG,OAAO,EAAE,OAAO,GAAG,MAAM,EAAE,GAAG,KAAK;AAE9F,IAAA,IAAI,UAAU;AACd,IAAA,IAAI,cAAc;AAClB,IAAA,IAAI,aAAa;AACjB,IAAA,IAAI,QAAQ;IACZ,IAAI,SAAS,GAAG,EAAE;IAClB,IAAI,UAAU,GAAG,EAAE;IAEnB,IAAI,SAAS,KAAK,UAAU,EAAE;AAC5B,QAAA,UAAU,GAAG,MAAM,IAAI,UAAU,CAAC,MAAM,CAAC;AACzC,QAAA,cAAc,GAAG,MAAM,IAAI,UAAU,CAAC,MAAM,CAAC;AAC7C,QAAA,SAAS,GAAG,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC;QAChC,aAAa,GAAG,QAAQ;AACzB;AAAM,SAAA;AACL,QAAA,UAAU,GAAG,MAAM,IAAI,UAAU,CAAC,MAAM,CAAC;AACzC,QAAA,cAAc,GAAG,MAAM,IAAI,UAAU,CAAC,MAAM,CAAC;AAC7C,QAAA,UAAU,GAAG,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC;QACjC,aAAa,GAAG,KAAK;AACtB;;;IAID,IACE,CAAC,SAAS,KAAK,UAAU,IAAI,MAAM,KAAK,SAAS;SAChD,SAAS,KAAK,YAAY,IAAI,MAAM,KAAK,SAAS,CAAC,EACpD;QACA,QAAQ,GAAG,CAAC;AACb;IAED,OAAO;qBACU,UAAU,CAAA;yBACN,cAAc,CAAA;wBACf,aAAa,CAAA;;;gBAGrB,QAAQ,CAAA;;;;sBAIF,SAAS,CAAA;uBACR,UAAU,CAAA;;KAE5B;AACH,CAAC;AAGH,KAAK,CAAC,WAAW,GAAG,OAAO;;;;"}

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

@@ -1,2 +1 @@
 export { Stack } from './Stack';
-//# sourceMappingURL=index.d.ts.map

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

@@ -36,4 +36,3 @@ export type StackProps = {
     spacing?: Size;
 };
 export {};
-//# sourceMappingURL=types.d.ts.map

package/dist/components/Stepper/Stepper.cjs

@@ -1,2 +1,20 @@
-"use strict";var e=require("react"),t=require("../../theme/index.cjs"),r=require("./styled.cjs"),n=require("../../tempIcons/DownArrowIcon.cjs"),o=require("../../tempIcons/UpArrowIcon.cjs");function s(e){return e&&e.__esModule?e:{default:e}}var a=s(e);exports.Stepper=({onIncrement:e,onDecrement:s,disabled:c=!1,size:i})=>a.default.createElement(r.Container,{size:i},a.default.createElement(r.StepButton,{type:"button",onClick:e,disabled:c},a.default.createElement(o.UpArrowIcon,{height:t.theme.sizes.base,width:t.theme.sizes.base,color:t.theme.colors.neutral.ink.base})),a.default.createElement(r.StepButton,{type:"button",onClick:s,disabled:c},a.default.createElement(n.DownArrowIcon,{height:t.theme.sizes.base,width:t.theme.sizes.base,color:t.theme.colors.neutral.ink.base})));
+'use strict';
+
+var React = require('react');
+var index = require('../../theme/index.cjs');
+var styled = require('./styled.cjs');
+var DownArrowIcon = require('../../tempIcons/DownArrowIcon.cjs');
+var UpArrowIcon = require('../../tempIcons/UpArrowIcon.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const Stepper = ({ onIncrement, onDecrement, disabled = false, size }) => (React__default.default.createElement(styled.Container, { size: size },
+    React__default.default.createElement(styled.StepButton, { type: "button", onClick: onIncrement, disabled: disabled },
+        React__default.default.createElement(UpArrowIcon.UpArrowIcon, { height: index.theme.sizes.base, width: index.theme.sizes.base, color: index.theme.colors.neutral.ink.base })),
+    React__default.default.createElement(styled.StepButton, { type: "button", onClick: onDecrement, disabled: disabled },
+        React__default.default.createElement(DownArrowIcon.DownArrowIcon, { height: index.theme.sizes.base, width: index.theme.sizes.base, color: index.theme.colors.neutral.ink.base }))));
+
+exports.Stepper = Stepper;
 //# sourceMappingURL=Stepper.cjs.map

package/dist/components/Stepper/Stepper.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.cjs","sources":["../../../src/components/Stepper/Stepper.tsx"],"sourcesContent":[null],"names":["onIncrement","onDecrement","disabled","size","React","default","createElement","Container","StepButton","type","onClick","UpArrowIcon","height","theme","sizes","base","width","color","colors","neutral","ink"],"mappings":"2QAWqB,EAAAA,cAAAC,cAAAC,YAAA,EAAAC,UAAAC,EAAAC,QAAAC,cAAAC,EAAAA,UAAA,CAAAJ,KAAAA,GACnBC,UAAOE,cAAaE,EAACA,WAAA,CAAAC,KAAA,SAAAC,QAAAV,EAAAE,SAAAA,GACtBE,UAAAE,cAAAK,EAAAA,YAAA,CAAAC,OAAAC,EAAAA,MAAAC,MAAAC,KAAAC,MAAAH,EAAAA,MAAAC,MAAAC,KAAAE,MAAAJ,QAAAK,OAAAC,QAAAC,IAAAL,QAEDX,UAAAE,cAAaE,EAAiEA,WAAA,CAAAC,KAAA,SAAAC,QAAAT,EAAAC,SAAAA"}
+{"version":3,"file":"Stepper.cjs","sources":["../../../src/components/Stepper/Stepper.tsx"],"sourcesContent":[null],"names":["React","Container","StepButton","UpArrowIcon","theme","DownArrowIcon"],"mappings":";;;;;;;;;;;;AAea,MAAA,OAAO,GAAG,CAAC,EAAE,WAAW,EAAE,WAAW,EAAE,QAAQ,GAAG,KAAK,EAAE,IAAI,EAAgB,MACxFA,sBAAA,CAAA,aAAA,CAACC,gBAAS,EAAA,EAAC,IAAI,EAAE,IAAI,EAAA;AACnB,IAAAD,sBAAA,CAAA,aAAA,CAACE,iBAAU,EAAA,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAA;AAChE,QAAAF,sBAAA,CAAA,aAAA,CAACG,uBAAW,EAAA,EACV,MAAM,EAAEC,WAAK,CAAC,KAAK,CAAC,IAAI,EACxB,KAAK,EAAEA,WAAK,CAAC,KAAK,CAAC,IAAI,EACvB,KAAK,EAAEA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,GACpC,CACS;AACb,IAAAJ,sBAAA,CAAA,aAAA,CAACE,iBAAU,EAAA,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAA;AAChE,QAAAF,sBAAA,CAAA,aAAA,CAACK,2BAAa,EAAA,EACZ,MAAM,EAAED,WAAK,CAAC,KAAK,CAAC,IAAI,EACxB,KAAK,EAAEA,WAAK,CAAC,KAAK,CAAC,IAAI,EACvB,KAAK,EAAEA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAA,CACpC,CACS,CACH;;;;"}

package/dist/components/Stepper/Stepper.d.ts

@@ -7,4 +7,3 @@ export interface StepperProps {
     size?: ComponentSize;
 }
 export declare const Stepper: ({ onIncrement, onDecrement, disabled, size }: StepperProps) => React.JSX.Element;
-//# sourceMappingURL=Stepper.d.ts.map

package/dist/components/Stepper/Stepper.js

@@ -1,2 +1,14 @@
-import e from"react";import{theme as t}from"../../theme/index.js";import{Container as o,StepButton as r}from"./styled.js";import{DownArrowIcon as s}from"../../tempIcons/DownArrowIcon.js";import{UpArrowIcon as n}from"../../tempIcons/UpArrowIcon.js";const i=({onIncrement:i,onDecrement:m,disabled:c=!1,size:a})=>e.createElement(o,{size:a},e.createElement(r,{type:"button",onClick:i,disabled:c},e.createElement(n,{height:t.sizes.base,width:t.sizes.base,color:t.colors.neutral.ink.base})),e.createElement(r,{type:"button",onClick:m,disabled:c},e.createElement(s,{height:t.sizes.base,width:t.sizes.base,color:t.colors.neutral.ink.base})));export{i as Stepper};
+import React from 'react';
+import { theme } from '../../theme/index.js';
+import { Container, StepButton } from './styled.js';
+import { DownArrowIcon } from '../../tempIcons/DownArrowIcon.js';
+import { UpArrowIcon } from '../../tempIcons/UpArrowIcon.js';
+
+const Stepper = ({ onIncrement, onDecrement, disabled = false, size }) => (React.createElement(Container, { size: size },
+    React.createElement(StepButton, { type: "button", onClick: onIncrement, disabled: disabled },
+        React.createElement(UpArrowIcon, { height: theme.sizes.base, width: theme.sizes.base, color: theme.colors.neutral.ink.base })),
+    React.createElement(StepButton, { type: "button", onClick: onDecrement, disabled: disabled },
+        React.createElement(DownArrowIcon, { height: theme.sizes.base, width: theme.sizes.base, color: theme.colors.neutral.ink.base }))));
+
+export { Stepper };
 //# sourceMappingURL=Stepper.js.map

package/dist/components/Stepper/Stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.js","sources":["../../../src/components/Stepper/Stepper.tsx"],"sourcesContent":[null],"names":["Stepper","onIncrement","onDecrement","disabled","size","React","createElement","Container","StepButton","type","onClick","UpArrowIcon","height","theme","sizes","base","width","color","colors","neutral","ink"],"mappings":"wPAWU,MAACA,EAAU,EAAAC,cAAAC,cAAAC,YAAA,EAAAC,UAAAC,EAAAC,cAAAC,EAAA,CAAAH,KAAAA,GACnBC,EAAOC,cAAaE,EAAC,CAAAC,KAAA,SAAAC,QAAAT,EAAAE,SAAAA,GACtBE,EAAAC,cAAAK,EAAA,CAAAC,OAAAC,EAAAC,MAAAC,KAAAC,MAAAH,EAAAC,MAAAC,KAAAE,MAAAJ,EAAAK,OAAAC,QAAAC,IAAAL,QAEDV,EAAAC,cAAaE,EAAiE,CAAAC,KAAA,SAAAC,QAAAR,EAAAC,SAAAA"}
+{"version":3,"file":"Stepper.js","sources":["../../../src/components/Stepper/Stepper.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAea,MAAA,OAAO,GAAG,CAAC,EAAE,WAAW,EAAE,WAAW,EAAE,QAAQ,GAAG,KAAK,EAAE,IAAI,EAAgB,MACxF,KAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAC,IAAI,EAAE,IAAI,EAAA;AACnB,IAAA,KAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAA;AAChE,QAAA,KAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EACV,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACxB,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACvB,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,GACpC,CACS;AACb,IAAA,KAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAA;AAChE,QAAA,KAAA,CAAA,aAAA,CAAC,aAAa,EAAA,EACZ,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACxB,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EACvB,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAA,CACpC,CACS,CACH;;;;"}

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

@@ -1,2 +1 @@
 export { Stepper } from './Stepper';
-//# sourceMappingURL=index.d.ts.map