@cube-dev/ui-kit 0.0.0-canary-397306f → 0.0.0-canary-24fd9c3

package/cjs/components/forms/FieldWrapper/types.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * Released under the MIT license.
  */
 

package/cjs/components/forms/FileInput/FileInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * Released under the MIT license.
  */
 

package/cjs/components/forms/Form/Field.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * Released under the MIT license.
  */
 

package/cjs/components/forms/Form/Form.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * Released under the MIT license.
  */
 

package/cjs/components/forms/Form/Submit/Submit.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * Released under the MIT license.
  */
 

package/cjs/components/forms/Form/Submit/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * Released under the MIT license.
  */
 

package/cjs/components/forms/Form/SubmitError.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * Released under the MIT license.
  */
 

package/cjs/components/forms/Form/index.js

@@ -1,13 +1,13 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * Released under the MIT license.
  */
 
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useFieldProps = exports.SubmitError = exports.FormContext = exports.useForm = exports.Field = exports.Form = exports.useFormProps = void 0;
+exports.SubmitError = exports.FormContext = exports.useForm = exports.Field = exports.Form = exports.useFormProps = void 0;
 const Field_1 = require("./Field");
 Object.defineProperty(exports, "Field", { enumerable: true, get: function () { return Field_1.Field; } });
 const SubmitError_1 = require("./SubmitError");
@@ -19,7 +19,5 @@ Object.defineProperty(exports, "useFormProps", { enumerable: true, get: function
 Object.defineProperty(exports, "FormContext", { enumerable: true, get: function () { return Form_1.FormContext; } });
 const Form = Object.assign(Form_1.Form, { Item: Field_1.Field, useForm: useForm_1.useForm, SubmitError: SubmitError_1.SubmitError });
 exports.Form = Form;
-var use_field_1 = require("./use-field");
-Object.defineProperty(exports, "useFieldProps", { enumerable: true, get: function () { return use_field_1.useFieldProps; } });
 
         

package/cjs/components/forms/Form/types.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * Released under the MIT license.
  */
 

package/cjs/components/forms/Form/use-field/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * Released under the MIT license.
  */
 

package/cjs/components/forms/Form/use-field/types.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * Released under the MIT license.
  */
 

package/cjs/components/forms/Form/use-field/use-field-props.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * Released under the MIT license.
  */
 
@@ -12,7 +12,6 @@ const react_1 = require("react");
 const react_2 = require("react");
 const _internal_1 = require("../../../../_internal");
 const Field_1 = require("../Field");
-const react_3 = require("../../../../utils/react");
 const use_field_1 = require("./use-field");
 function useFieldProps(props, params = {}) {
     // We use ref here to "memoize" initial value
@@ -23,9 +22,7 @@ function useFieldProps(props, params = {}) {
     }), defaultValidationTrigger = 'onBlur', } = params;
     const isInsideLegacyField = (0, Field_1.useInsideLegacyField)();
     (0, _internal_1.useWarn)(isInsideLegacyField, '<Field /> is deprecated, use component without <Field /> instead.');
-    if (isInsideLegacyField === true ||
-        isDisabledRef.current === true ||
-        props.name == null) {
+    if (isInsideLegacyField || isDisabledRef.current || props.name == null) {
         return props;
     }
     // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -38,13 +35,21 @@ function useFieldProps(props, params = {}) {
     // TODO: remove type casting after updating to typescipt@4.9
     'onBlur' in props ? props.onBlur : undefined);
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    const onChangeEvent = (0, _internal_1.useEvent)((value, dontTouch) => field?.onChange?.(value, dontTouch, field?.validateTrigger ?? defaultValidationTrigger));
+    const onChangeEvent = (0, _internal_1.useEvent)((value, dontTouch) => {
+        return field?.onChange?.(value, dontTouch, field?.validateTrigger ?? defaultValidationTrigger);
+    });
     const result = isOutsideOfForm
         ? props
-        : (0, react_3.mergeProps)(props, field, valuePropsMapper({ value: field.value, onChange: onChangeEvent }), {
+        : {
+            ...props,
+            ...field,
+            ...valuePropsMapper({
+                value: field.value,
+                onChange: onChangeEvent,
+            }),
             validateTrigger: field.validateTrigger ?? defaultValidationTrigger,
             onBlur: onBlurChained,
-        });
+        };
     if (process.env.NODE_ENV === 'development') {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         (0, react_2.useDebugValue)(result);

package/cjs/components/forms/Form/use-field/use-field.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * Released under the MIT license.
  */
 
@@ -131,7 +131,6 @@ function useField(props, params) {
     }), [
         form,
         field,
-        field?.inputValue,
         fieldId,
         fieldName,
         isRequired,

package/cjs/components/forms/Form/useForm.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * Released under the MIT license.
  */
 

package/cjs/components/forms/Form/validation.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * Released under the MIT license.
  */
 

package/cjs/components/forms/Input/Input.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * Released under the MIT license.
  */
 

package/cjs/components/forms/Input/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * Released under the MIT license.
  */
 

package/cjs/components/forms/Label.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * Released under the MIT license.
  */
 

package/cjs/components/forms/NumberInput/NumberInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * Released under the MIT license.
  */
 
@@ -36,7 +36,7 @@ const StepperContainer = (0, tasty_1.tasty)({
 function NumberInput(props, ref) {
     props = (0, nullableValue_1.castNullableNumberValue)(props);
     props = (0, provider_1.useProviderProps)(props);
-    props = (0, Form_1.useFieldProps)(props);
+    props = (0, Form_1.useFormProps)(props);
     let { hideStepper, suffix, value, defaultValue, onChange, ...otherProps } = props;
     let showStepper = !hideStepper;
     let { locale } = (0, i18n_1.useLocale)();

package/cjs/components/forms/NumberInput/StepButton.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * Released under the MIT license.
  */
 

package/cjs/components/forms/PasswordInput/PasswordInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * Released under the MIT license.
  */
 
@@ -16,29 +16,20 @@ const TextInputBase_1 = require("../TextInput/TextInputBase");
 const provider_1 = require("../../../provider");
 const actions_1 = require("../../actions");
 const nullableValue_1 = require("../../../utils/react/nullableValue");
-const Form_1 = require("../Form");
 function PasswordInput(props, ref) {
     props = (0, nullableValue_1.castNullableStringValue)(props);
-    props = (0, provider_1.useProviderProps)(props);
-    props = (0, Form_1.useFieldProps)(props, {
-        defaultValidationTrigger: 'onBlur',
-        valuePropsMapper: ({ value, onChange }) => ({
-            value: value?.toString() ?? '',
-            onChange,
-        }),
-    });
+    let { suffix, multiLine, ...otherProps } = (0, provider_1.useProviderProps)({ ...props });
     let [type, setType] = (0, react_1.useState)('password');
     let inputRef = (0, react_1.useRef)(null);
     let { labelProps, inputProps } = (0, textfield_1.useTextField)({
-        ...props,
+        ...otherProps,
         type,
     }, inputRef);
-    const { suffix, multiLine, ...rest } = props;
-    const toggleType = (0, react_1.useCallback)(() => {
+    const toggleType = (0, react_1.useCallback)((e) => {
         setType((type) => (type === 'password' ? 'text' : 'password'));
     }, []);
     const wrappedSuffix = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [suffix, (0, jsx_runtime_1.jsx)(actions_1.Button, { excludeFromTabOrder: true, type: "neutral", htmlType: "button", placeSelf: "stretch", height: "auto", radius: "right", width: "4x", label: "Toggle masking", icon: type === 'password' ? (0, jsx_runtime_1.jsx)(icons_1.EyeInvisibleOutlined, {}) : (0, jsx_runtime_1.jsx)(icons_1.EyeOutlined, {}), onPress: toggleType })] }));
-    return ((0, jsx_runtime_1.jsx)(TextInputBase_1.TextInputBase, { ref: ref, labelProps: labelProps, inputProps: inputProps, inputRef: inputRef, inputStyles: { paddingRight: '4x' }, type: type, suffixPosition: "after", suffix: wrappedSuffix, multiLine: multiLine, ...rest }));
+    return ((0, jsx_runtime_1.jsx)(TextInputBase_1.TextInputBase, { ref: ref, labelProps: labelProps, inputProps: inputProps, inputRef: inputRef, inputStyles: { paddingRight: '4x' }, type: type, suffixPosition: "after", suffix: wrappedSuffix, multiLine: multiLine, ...otherProps }));
 }
 /**
  * PasswordInputs are password inputs that allow users to input passwords or code entries

package/cjs/components/forms/RadioGroup/Radio.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * Released under the MIT license.
  */
 
@@ -118,7 +118,6 @@ const RadioLabelElement = (0, tasty_1.tasty)({
 function Radio(props, ref) {
     props = (0, provider_1.useProviderProps)(props);
     props = (0, Form_1.useFormProps)(props);
-    props = (0, Form_1.useFieldProps)(props, { defaultValidationTrigger: 'onChange' });
     let { qa, isDisabled, validationState, children, label, autoFocus, labelStyles, labelProps, inputStyles, type = 'radio', 'aria-label': ariaLabel, ...otherProps } = props;
     let isButton = type === 'button';
     label = label || children;

package/cjs/components/forms/RadioGroup/RadioGroup.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * Released under the MIT license.
  */
 
@@ -36,7 +36,6 @@ function RadioGroup(props, ref) {
     props = (0, nullableValue_1.castNullableStringValue)(props);
     props = (0, provider_1.useProviderProps)(props);
     props = (0, Form_1.useFormProps)(props);
-    props = (0, Form_1.useFieldProps)(props, { defaultValidationTrigger: 'onChange' });
     let { isDisabled, isRequired, necessityIndicator, label, extra, labelPosition = 'top', validationState, children, orientation = 'vertical', message, description, labelStyles, requiredMark = true, tooltip, isHidden, styles, groupStyles, insideForm, labelSuffix, ...otherProps } = props;
     let domRef = (0, utils_1.useDOMRef)(ref);
     styles = (0, tasty_1.extractStyles)(otherProps, tasty_1.OUTER_STYLES, styles);

package/cjs/components/forms/RadioGroup/context.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * Released under the MIT license.
  */
 

package/cjs/components/forms/SearchInput/SearchInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * Released under the MIT license.
  */
 

package/cjs/components/forms/Slider/Gradation.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * Released under the MIT license.
  */
 

package/cjs/components/forms/Slider/Header.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * Released under the MIT license.
  */
 

package/cjs/components/forms/Slider/RangeSlider.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * Released under the MIT license.
  */
 

package/cjs/components/forms/Slider/Slider.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * Released under the MIT license.
  */
 
@@ -16,7 +16,7 @@ const SliderTrack_1 = require("./SliderTrack");
 const SliderBase_1 = require("./SliderBase");
 const Gradation_1 = require("./Gradation");
 function Slider(props, ref) {
-    const { onChange, onChangeEnd, value, defaultValue, getValueLabel, isDisabled, styles, gradation, orientation, ...otherProps } = props;
+    let { onChange, onChangeEnd, value, defaultValue, getValueLabel, isDisabled, styles, gradation, orientation, ...otherProps } = props;
     let baseProps = {
         ...otherProps,
         // Normalize `value: number[]` to `value: number`
@@ -28,10 +28,10 @@ function Slider(props, ref) {
         onChangeEnd: (v) => {
             onChangeEnd?.(v[0]);
         },
-        getValueLabel: getValueLabel ? ([v]) => getValueLabel(v) : undefined,
+        getValueLabel: getValueLabel ? ([v]) => getValueLabel?.(v) : undefined,
     };
-    const extractedStyles = (0, tasty_1.extractStyles)(otherProps, tasty_1.OUTER_STYLES, styles);
-    return ((0, jsx_runtime_1.jsx)(SliderBase_1.SliderBase, { ...otherProps, ...baseProps, ref: ref, orientation: orientation, styles: extractedStyles, children: ({ trackRef, inputRef, state }) => {
+    styles = (0, tasty_1.extractStyles)(otherProps, tasty_1.OUTER_STYLES, styles);
+    return ((0, jsx_runtime_1.jsx)(SliderBase_1.SliderBase, { ...otherProps, ...baseProps, orientation: orientation, styles: styles, children: ({ trackRef, inputRef, state }) => {
             return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Gradation_1.Gradation, { state: state, ranges: [0, 1], values: gradation }), (0, jsx_runtime_1.jsx)(SliderTrack_1.SliderTrack, { state: state, isDisabled: isDisabled, orientation: orientation }), (0, jsx_runtime_1.jsx)(SliderThumb_1.SliderThumb, { index: 0, state: state, inputRef: inputRef, trackRef: trackRef, isDisabled: isDisabled })] }));
         } }));
 }

package/cjs/components/forms/Slider/SliderBase.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * Released under the MIT license.
  */
 
@@ -14,7 +14,7 @@ const utils_1 = require("@react-spectrum/utils");
 const slider_1 = require("@react-stately/slider");
 const slider_2 = require("@react-aria/slider");
 const i18n_1 = require("@react-aria/i18n");
-const FieldWrapper_1 = require("../FieldWrapper");
+const FieldWrapper_1 = require("../../forms/FieldWrapper");
 const tasty_1 = require("../../../tasty");
 const Form_1 = require("../Form");
 const Text_1 = require("../../content/Text");
@@ -26,14 +26,7 @@ const LabelValueElement = (0, tasty_1.tasty)(Text_1.Text, {
     },
 });
 function SliderBase(allProps, ref) {
-    let props = (0, Form_1.useFormProps)(allProps);
-    props = (0, Form_1.useFieldProps)(props, {
-        defaultValidationTrigger: 'onChange',
-        valuePropsMapper: ({ value, onChange }) => ({
-            value: value != null ? value : undefined,
-            onChange: onChange,
-        }),
-    });
+    const props = (0, Form_1.useFormProps)(allProps);
     let { labelPosition, label, extra, styles, isRequired, validationState, message, description, requiredMark, labelSuffix, labelStyles, necessityIndicator, gradation, isDisabled, inputStyles, minValue = 0, maxValue = 100, inputWidth, formatOptions, getValueLabel, onChange, onChangeEnd, children, showValueLabel = true, orientation: formOrientation, ...otherProps } = props;
     let orientation = allProps.orientation || 'horizontal';
     // `Math.abs(Math.sign(a) - Math.sign(b)) === 2` is true if the values have a different sign.

package/cjs/components/forms/Slider/SliderInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * Released under the MIT license.
  */
 

package/cjs/components/forms/Slider/SliderThumb.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * Released under the MIT license.
  */
 

package/cjs/components/forms/Slider/SliderTrack.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * Released under the MIT license.
  */
 
@@ -12,12 +12,20 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const elements_1 = require("./elements");
 function SliderTrack(props) {
-    const { isDisabled, orientation = 'horizontal' } = props;
+    const { isDisabled, state, orientation = 'horizontal' } = props;
+    const selectedTrack = [state.getThumbPercent(0), state.getThumbPercent(1)];
+    const showRangeTrack = !Number.isNaN(selectedTrack[1]);
     const mods = (0, react_1.useMemo)(() => ({
         disabled: isDisabled,
         horizontal: orientation === 'horizontal',
-    }), [isDisabled]);
-    return (0, jsx_runtime_1.jsx)(elements_1.SliderTrackContainerElement, { mods: mods });
+        range: showRangeTrack,
+    }), [isDisabled, showRangeTrack]);
+    return ((0, jsx_runtime_1.jsx)(elements_1.SliderTrackContainerElement, { mods: mods, style: showRangeTrack
+            ? {
+                '--slider-range-start': `${selectedTrack[0] * 100}%`,
+                '--slider-range-end': `${selectedTrack[1] * 100}%`,
+            }
+            : {} }));
 }
 exports.SliderTrack = SliderTrack;
 

package/cjs/components/forms/Slider/elements.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * Released under the MIT license.
  */
 
@@ -57,6 +57,19 @@ exports.SliderTrackContainerElement = (0, tasty_1.tasty)({
             horizontal: '100%',
         },
         radius: true,
+        '&::before': {
+            content: '""',
+            display: {
+                '': 'none',
+                range: 'block',
+            },
+            position: 'absolute',
+            top: 0,
+            bottom: 0,
+            fill: '#purple',
+            left: '@slider-range-start',
+            width: '(@slider-range-end - @slider-range-start)',
+        },
     },
 });
 exports.SliderGradationElement = (0, tasty_1.tasty)({

package/cjs/components/forms/Slider/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * Released under the MIT license.
  */
 

package/cjs/components/forms/Slider/types.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * Released under the MIT license.
  */
 

package/cjs/components/forms/Switch/Switch.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-397306f
+ * @cube-dev/ui-kit v0.0.0-canary-24fd9c3
  * Released under the MIT license.
  */
 
@@ -21,10 +21,10 @@ const interactions_2 = require("../../../utils/react/interactions");
 const react_2 = require("../../../utils/react");
 const HiddenInput_1 = require("../../HiddenInput");
 const Label_1 = require("../Label");
+const Form_1 = require("../Form/Form");
 const Text_1 = require("../../content/Text");
 const FieldWrapper_1 = require("../FieldWrapper");
 const nullableValue_1 = require("../../../utils/react/nullableValue");
-const Form_1 = require("../Form");
 const SwitchWrapperElement = (0, tasty_1.tasty)({
     qa: 'SwitchWrapper',
     styles: {
@@ -116,14 +116,6 @@ function Switch(props, ref) {
     props = (0, nullableValue_1.castNullableIsSelected)(props);
     props = (0, provider_1.useProviderProps)(props);
     props = (0, Form_1.useFormProps)(props);
-    props = (0, Form_1.useFieldProps)(props, {
-        defaultValidationTrigger: 'onChange',
-        valuePropsMapper: ({ value, onChange }) => ({
-            isSelected: value != null ? value : false,
-            isIndeterminate: false,
-            onChange: onChange,
-        }),
-    });
     let { qa, isDisabled = false, autoFocus, children, label, extra, labelProps, labelStyles, isLoading, insideForm, validationState, message, description, labelPosition, inputStyles, requiredMark = true, tooltip, labelSuffix, size = 'large', ...otherProps } = props;
     let styles = (0, tasty_1.extractStyles)(props, tasty_1.OUTER_STYLES);
     inputStyles = (0, tasty_1.extractStyles)(props, tasty_1.BLOCK_STYLES, inputStyles);
@@ -145,7 +137,7 @@ function Switch(props, ref) {
         hovered: isHovered,
         focused: isFocused,
     };
-    const switchField = ((0, jsx_runtime_1.jsxs)(SwitchWrapperElement, { mods: mods, "data-size": size, children: [(0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { "data-qa": "HiddenInput", ...(0, react_2.mergeProps)(inputProps, focusProps), ref: inputRef }), (0, jsx_runtime_1.jsx)(SwitchElement, { qa: qa || 'Switch', mods: mods, "data-size": size, styles: inputStyles, children: (0, jsx_runtime_1.jsx)("div", { "data-element": "Thumb", "aria-hidden": "true" }) }), children ? (0, jsx_runtime_1.jsx)(Text_1.Text, { children: children }) : null] }));
+    const switchField = ((0, jsx_runtime_1.jsxs)(SwitchWrapperElement, { mods: mods, "data-size": size, children: [(0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { "data-qa": "HiddenInput", ...(0, react_2.mergeProps)(inputProps, focusProps), ref: inputRef }), (0, jsx_runtime_1.jsx)(SwitchElement, { qa: qa || 'Switch', mods: mods, "data-size": size, styles: inputStyles, children: (0, jsx_runtime_1.jsx)("div", { "data-element": "Thumb", "aria-hidden": "true" }) }), children ? (0, jsx_runtime_1.jsx)(Text_1.Text, { nowrap: true, children: children }) : null] }));
     if (insideForm) {
         return ((0, jsx_runtime_1.jsx)(FieldWrapper_1.FieldWrapper, { ...{
                 as: 'label',