@cube-dev/ui-kit 0.25.0 → 0.26.1

package/es/components/content/Divider.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.25.0
+ * @cube-dev/ui-kit v0.26.1
  * Released under the MIT license.
  */
 

package/es/components/content/Footer.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.25.0
+ * @cube-dev/ui-kit v0.26.1
  * Released under the MIT license.
  */
 

package/es/components/content/Header.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.25.0
+ * @cube-dev/ui-kit v0.26.1
  * Released under the MIT license.
  */
 

package/es/components/content/Paragraph.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.25.0
+ * @cube-dev/ui-kit v0.26.1
  * Released under the MIT license.
  */
 

package/es/components/content/Placeholder/Placeholder.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.25.0
+ * @cube-dev/ui-kit v0.26.1
  * Released under the MIT license.
  */
 

package/es/components/content/PrismCode/PrismCode.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.25.0
+ * @cube-dev/ui-kit v0.26.1
  * Released under the MIT license.
  */
 

package/es/components/content/Result/Result.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.25.0
+ * @cube-dev/ui-kit v0.26.1
  * Released under the MIT license.
  */
 

package/es/components/content/Skeleton/Skeleton.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.25.0
+ * @cube-dev/ui-kit v0.26.1
  * Released under the MIT license.
  */
 

package/es/components/content/Tag/Tag.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.25.0
+ * @cube-dev/ui-kit v0.26.1
  * Released under the MIT license.
  */
 

package/es/components/content/Text.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.25.0
+ * @cube-dev/ui-kit v0.26.1
  * Released under the MIT license.
  */
 

package/es/components/content/Title.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.25.0
+ * @cube-dev/ui-kit v0.26.1
  * Released under the MIT license.
  */
 

package/es/components/forms/Checkbox/Checkbox.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.25.0
+ * @cube-dev/ui-kit v0.26.1
  * Released under the MIT license.
  */
 

package/es/components/forms/Checkbox/CheckboxGroup.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.25.0
+ * @cube-dev/ui-kit v0.26.1
  * Released under the MIT license.
  */
 

package/es/components/forms/Checkbox/context.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.25.0
+ * @cube-dev/ui-kit v0.26.1
  * Released under the MIT license.
  */
 

package/es/components/forms/DatePicker/DateInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.25.0
+ * @cube-dev/ui-kit v0.26.1
  * Released under the MIT license.
  */
 
@@ -16,7 +16,7 @@ import { wrapWithField } from '../wrapper';
 import { CONTAINER_STYLES, extractStyles, } from '../../../tasty';
 import { mergeProps } from '../../../utils/react';
 import { useFieldProps, useFormProps } from '../Form';
-import { useFocusManagerRef } from './utils';
+import { formatSegments, useFocusManagerRef } from './utils';
 import { DateInputBase } from './DateInputBase';
 import { DatePickerSegment } from './DatePickerSegment';
 import { DEFAULT_DATE_PROPS } from './props';
@@ -32,7 +32,7 @@ function DateInput(props, ref) {
         }),
     });
     props = Object.assign({}, DEFAULT_DATE_PROPS, props);
-    let { autoFocus, isDisabled, inputStyles, wrapperStyles, isReadOnly, isRequired, size = 'medium', } = props;
+    let { autoFocus, isDisabled, inputStyles, wrapperStyles, isReadOnly, isRequired, size = 'medium', useLocale: useLocaleProp, } = props;
     let styles = extractStyles(props, CONTAINER_STYLES, wrapperStyles);
     let domRef = useFocusManagerRef(ref);
     let { locale } = useLocale();
@@ -41,6 +41,9 @@ function DateInput(props, ref) {
         locale,
         createCalendar,
     });
+    if (!useLocaleProp) {
+        state.segments = formatSegments(state.segments);
+    }
     let fieldRef = useRef(null);
     let { labelProps, fieldProps } = useDateField(props, state, fieldRef);
     const component = (_jsx(DateInputBase, { ref: fieldRef, size: size, fieldProps: fieldProps, isDisabled: isDisabled, autoFocus: autoFocus, validationState: state.validationState, styles: wrapperStyles, inputStyles: inputStyles, children: state.segments.map((segment, i) => (_jsx(DatePickerSegment, { segment: segment, state: state, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired }, i))) }, void 0));

package/es/components/forms/DatePicker/DateInputBase.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.25.0
+ * @cube-dev/ui-kit v0.26.1
  * Released under the MIT license.
  */
 
@@ -34,7 +34,7 @@ function DateInputBase(props, ref) {
     let inputRef = useRef(null);
     let { isDisabled, inputStyles, children, fieldProps, style, disableFocusRing, autoFocus, validationState, isLoading, size = 'medium', } = props;
     let styles = extractStyles(props, CONTAINER_STYLES);
-    let { focusProps, isFocusVisible, isFocused } = useFocusRing({
+    let { focusProps, isFocused } = useFocusRing({
         isTextInput: true,
         within: true,
         autoFocus,
@@ -44,9 +44,8 @@ function DateInputBase(props, ref) {
     let validation = cloneElement(validationIcon);
     return (_jsxs(DateInputWrapperElement, { styles: styles, "data-size": size, mods: {
             disabled: isDisabled,
-            focused: isFocused,
+            focused: isFocused && !disableFocusRing,
             invalid: isInvalid,
-            'focus-ring': isFocusVisible && !disableFocusRing,
         }, ...mergeProps(fieldProps ?? {}, focusProps), style: style, children: [_jsx("div", { "data-element": "Contents", role: "presentation", children: _jsx(DateInputElement, { ref: mergeRefs(ref, inputRef), "data-size": size, role: "presentation", styles: inputStyles, children: children }, void 0) }, void 0), validationState && !isLoading ? validation : undefined] }, void 0));
 }
 const _DateInputBase = React.forwardRef(DateInputBase);

package/es/components/forms/DatePicker/DatePicker.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.25.0
+ * @cube-dev/ui-kit v0.26.1
  * Released under the MIT license.
  */
 
@@ -9,12 +9,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useRef } from 'react';
 import { useDatePicker } from '@react-aria/datepicker';
 import { useDatePickerState } from '@react-stately/datepicker';
+import { useFocusRing } from '@react-aria/focus';
 import { useProviderProps } from '../../../provider';
 import { wrapWithField } from '../wrapper';
 import { CONTAINER_STYLES, extractStyles, } from '../../../tasty';
 import { mergeProps } from '../../../utils/react';
 import { useFieldProps, useFormProps } from '../Form';
-import { Space } from '../../layout/Space';
 import { Dialog, DialogTrigger } from '../../overlays/Dialog';
 import { Calendar } from '../../other/Calendar/Calendar';
 import { useFocusManagerRef } from './utils';
@@ -24,6 +24,7 @@ import { TimeInput } from './TimeInput';
 import { DatePickerButton } from './DatePickerButton';
 import { DEFAULT_DATE_PROPS } from './props';
 import { dateMessages } from './intl';
+import { DatePickerElement } from './DatePickerElement';
 function DatePicker(props, ref) {
     props = useProviderProps(props);
     props = useFormProps(props);
@@ -32,7 +33,7 @@ function DatePicker(props, ref) {
     });
     props = Object.assign({}, DEFAULT_DATE_PROPS, props);
     let styles = extractStyles(props, CONTAINER_STYLES);
-    let { size, placeholderValue, isDisabled, validationState } = props;
+    let { size, placeholderValue, isDisabled, validationState, useLocale: useLocaleProp, autoFocus, } = props;
     let targetRef = useRef(null);
     let state = useDatePickerState({
         ...props,
@@ -40,6 +41,16 @@ function DatePicker(props, ref) {
     });
     let { isOpen, setOpen } = state;
     let domRef = useFocusManagerRef(ref);
+    let { isFocused, focusProps } = useFocusRing({
+        within: true,
+        isTextInput: true,
+        autoFocus,
+    });
+    let { isFocused: isFocusedButton, focusProps: focusPropsButton } = useFocusRing({
+        within: false,
+        isTextInput: false,
+        autoFocus,
+    });
     let { groupProps, labelProps, fieldProps, buttonProps, dialogProps, calendarProps, } = useDatePicker(props, state, targetRef);
     let placeholder = placeholderValue;
     let timePlaceholder = placeholder && 'hour' in placeholder ? placeholder : undefined;
@@ -53,7 +64,7 @@ function DatePicker(props, ref) {
     let showTimeField = !!timeGranularity;
     //
     // let visibleMonths = useVisibleMonths(maxVisibleMonths);
-    const component = (_jsxs(Space, { ref: targetRef, gap: "0", styles: props.wrapperStyles, children: [_jsx(DateInputBase, { disableFocusRing: true, radius: "left", border: "top left bottom", isDisabled: isDisabled, validationState: validationState, size: size, children: _jsx(DatePickerInput, { ...fieldProps }, void 0) }, void 0), _jsxs(DialogTrigger, { hideArrow: true, type: "popover", mobileType: "tray", placement: "bottom right", targetRef: targetRef, isOpen: isOpen, shouldFlip: props.shouldFlip, onOpenChange: setOpen, children: [_jsx(DatePickerButton, { size: size, ...buttonProps, isDisabled: isDisabled }, void 0), _jsxs(Dialog, { ...dialogProps, width: "max-content", children: [_jsx(Calendar, { ...calendarProps }, void 0), showTimeField && (_jsx(TimeInput, { padding: "1x", label: dateMessages['time'], value: state.timeValue, placeholderValue: timePlaceholder, granularity: timeGranularity, minValue: timeMinValue, maxValue: timeMaxValue, hourCycle: props.hourCycle, hideTimeZone: props.hideTimeZone, onChange: state.setTimeValue }, void 0))] }, void 0)] }, void 0)] }, void 0));
+    const component = (_jsxs(DatePickerElement, { ref: targetRef, styles: props.wrapperStyles, mods: { focused: isFocused && !isFocusedButton }, ...focusProps, children: [_jsx(DateInputBase, { disableFocusRing: true, radius: "left", border: "top left bottom", isDisabled: isDisabled, validationState: validationState, size: size, children: _jsx(DatePickerInput, { useLocale: useLocaleProp, ...fieldProps }, void 0) }, void 0), _jsxs(DialogTrigger, { hideArrow: true, type: "popover", mobileType: "tray", placement: "bottom right", targetRef: targetRef, isOpen: isOpen, shouldFlip: props.shouldFlip, onOpenChange: setOpen, children: [_jsx(DatePickerButton, { size: size, ...mergeProps(buttonProps, focusPropsButton), isDisabled: isDisabled }, void 0), _jsxs(Dialog, { ...dialogProps, width: "max-content", children: [_jsx(Calendar, { ...calendarProps }, void 0), showTimeField && (_jsx(TimeInput, { padding: "1x", label: dateMessages['time'], value: state.timeValue, placeholderValue: timePlaceholder, granularity: timeGranularity, minValue: timeMinValue, maxValue: timeMaxValue, hourCycle: props.hourCycle, hideTimeZone: props.hideTimeZone, onChange: state.setTimeValue }, void 0))] }, void 0)] }, void 0)] }, void 0));
     return wrapWithField(component, domRef, {
         ...props,
         styles,

package/es/components/forms/DatePicker/DatePickerButton.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.25.0
+ * @cube-dev/ui-kit v0.26.1
  * Released under the MIT license.
  */
 

package/es/components/forms/DatePicker/DatePickerElement.js

@@ -0,0 +1,21 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.26.1
+ * Released under the MIT license.
+ */
+
+import { tasty } from '../../../tasty';
+import { Space } from '../../layout/Space';
+export const DatePickerElement = tasty(Space, {
+    styles: {
+        gap: 0,
+        outline: {
+            '': '#purple-03.0',
+            focused: '#purple-03',
+        },
+        radius: true,
+    },
+});
+
+        

package/es/components/forms/DatePicker/DatePickerInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.25.0
+ * @cube-dev/ui-kit v0.26.1
  * Released under the MIT license.
  */
 
@@ -13,6 +13,7 @@ import { useDateFieldState } from '@react-stately/datepicker';
 import { useLocale } from '@react-aria/i18n';
 import { tasty } from '../../../tasty';
 import { DatePickerSegment } from './DatePickerSegment';
+import { formatSegments } from './utils';
 const DateInputElement = tasty({
     role: 'presentation',
     styles: {
@@ -22,7 +23,7 @@ const DateInputElement = tasty({
     },
 });
 export function DatePickerInput(props) {
-    let { isDisabled, isReadOnly, isRequired } = props;
+    let { isDisabled, isReadOnly, isRequired, useLocale: useLocaleProp } = props;
     let ref = useRef(null);
     let { locale } = useLocale();
     let state = useDateFieldState({
@@ -30,6 +31,9 @@ export function DatePickerInput(props) {
         locale,
         createCalendar,
     });
+    if (!useLocaleProp) {
+        state.segments = formatSegments(state.segments);
+    }
     let { fieldProps } = useDateField(props, state, ref);
     return (_jsx(DateInputElement, { ref: ref, ...fieldProps, children: state.segments.map((segment, i) => (_jsx(DatePickerSegment, { segment: segment, state: state, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired }, i))) }, void 0));
 }

package/es/components/forms/DatePicker/DatePickerSegment.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.25.0
+ * @cube-dev/ui-kit v0.26.1
  * Released under the MIT license.
  */
 

package/es/components/forms/DatePicker/DateRangePicker.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.25.0
+ * @cube-dev/ui-kit v0.26.1
  * Released under the MIT license.
  */
 
@@ -9,6 +9,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useRef } from 'react';
 import { useDateRangePicker } from '@react-aria/datepicker';
 import { useDateRangePickerState } from '@react-stately/datepicker';
+import { useFocusRing } from '@react-aria/focus';
 import { useProviderProps } from '../../../provider';
 import { wrapWithField } from '../wrapper';
 import { CONTAINER_STYLES, extractStyles, tasty, } from '../../../tasty';
@@ -24,10 +25,11 @@ import { TimeInput } from './TimeInput';
 import { DatePickerButton } from './DatePickerButton';
 import { DEFAULT_DATE_PROPS } from './props';
 import { dateMessages } from './intl';
+import { DatePickerElement } from './DatePickerElement';
 const DateRangeDash = tasty({
     'aria-hidden': 'true',
     'data-qa': 'DateRangeDash',
-    children: '–',
+    children: '––',
     styles: {
         padding: '0 .5x',
     },
@@ -40,13 +42,23 @@ function DateRangePicker(props, ref) {
     });
     props = Object.assign({}, DEFAULT_DATE_PROPS, props);
     let styles = extractStyles(props, CONTAINER_STYLES);
-    let { size, shouldFlip, placeholderValue, isDisabled, validationState } = props;
+    let { size, shouldFlip, placeholderValue, isDisabled, validationState, useLocale: useLocaleProp, autoFocus, } = props;
     let targetRef = useRef(null);
     let state = useDateRangePickerState({
         ...props,
         shouldCloseOnSelect: () => !state.hasTime,
     });
     let { isOpen, setOpen } = state;
+    let { isFocused, focusProps } = useFocusRing({
+        within: true,
+        isTextInput: true,
+        autoFocus,
+    });
+    let { isFocused: isFocusedButton, focusProps: focusPropsButton } = useFocusRing({
+        within: false,
+        isTextInput: false,
+        autoFocus,
+    });
     let domRef = useFocusManagerRef(ref);
     let { groupProps, labelProps, startFieldProps, endFieldProps, buttonProps, dialogProps, calendarProps, } = useDateRangePicker(props, state, targetRef);
     let placeholder = placeholderValue;
@@ -61,7 +73,7 @@ function DateRangePicker(props, ref) {
     let showTimeField = !!timeGranularity;
     //
     // let visibleMonths = useVisibleMonths(maxVisibleMonths);
-    const component = (_jsxs(Space, { ref: targetRef, gap: "0", styles: props.wrapperStyles, children: [_jsxs(DateInputBase, { disableFocusRing: true, isDisabled: isDisabled, validationState: validationState, size: size, styles: { radius: 'left', border: 'top left bottom' }, children: [_jsx(DatePickerInput, { ...startFieldProps }, void 0), _jsx(DateRangeDash, {}, void 0), _jsx(DatePickerInput, { ...endFieldProps }, void 0)] }, void 0), _jsxs(DialogTrigger, { hideArrow: true, type: "popover", mobileType: "tray", placement: "bottom right", targetRef: targetRef, isOpen: isOpen, shouldFlip: shouldFlip, onOpenChange: setOpen, children: [_jsx(DatePickerButton, { size: size, ...buttonProps, isDisabled: isDisabled }, void 0), _jsxs(Dialog, { ...dialogProps, width: "max-content", children: [_jsx(RangeCalendar, { ...calendarProps }, void 0), showTimeField && (_jsxs(Space, { children: [_jsx(TimeInput, { padding: "1x", label: dateMessages['startTime'], value: state.timeRange?.start || null, placeholderValue: timePlaceholder, granularity: timeGranularity, minValue: timeMinValue, maxValue: timeMaxValue, hourCycle: props.hourCycle, hideTimeZone: props.hideTimeZone, onChange: (v) => state.setTime('start', v) }, void 0), _jsx(TimeInput, { padding: "1x", label: dateMessages['endTime'], value: state.timeRange?.end || null, placeholderValue: timePlaceholder, granularity: timeGranularity, minValue: timeMinValue, maxValue: timeMaxValue, hourCycle: props.hourCycle, hideTimeZone: props.hideTimeZone, onChange: (v) => state.setTime('end', v) }, void 0)] }, void 0))] }, void 0)] }, void 0)] }, void 0));
+    const component = (_jsxs(DatePickerElement, { ref: targetRef, styles: props.wrapperStyles, mods: { focused: isFocused && !isFocusedButton }, ...focusProps, children: [_jsxs(DateInputBase, { disableFocusRing: true, isDisabled: isDisabled, validationState: validationState, size: size, styles: { radius: 'left', border: 'top left bottom' }, children: [_jsx(DatePickerInput, { useLocale: useLocaleProp, ...startFieldProps }, void 0), _jsx(DateRangeDash, {}, void 0), _jsx(DatePickerInput, { useLocale: useLocaleProp, ...endFieldProps }, void 0)] }, void 0), _jsxs(DialogTrigger, { hideArrow: true, type: "popover", mobileType: "tray", placement: "bottom right", targetRef: targetRef, isOpen: isOpen, shouldFlip: shouldFlip, onOpenChange: setOpen, children: [_jsx(DatePickerButton, { size: size, ...mergeProps(buttonProps, focusPropsButton), isDisabled: isDisabled }, void 0), _jsxs(Dialog, { ...dialogProps, width: "max-content", children: [_jsx(RangeCalendar, { ...calendarProps }, void 0), showTimeField && (_jsxs(Space, { children: [_jsx(TimeInput, { padding: "1x", label: dateMessages['startTime'], value: state.timeRange?.start || null, placeholderValue: timePlaceholder, granularity: timeGranularity, minValue: timeMinValue, maxValue: timeMaxValue, hourCycle: props.hourCycle, hideTimeZone: props.hideTimeZone, onChange: (v) => state.setTime('start', v) }, void 0), _jsx(TimeInput, { padding: "1x", label: dateMessages['endTime'], value: state.timeRange?.end || null, placeholderValue: timePlaceholder, granularity: timeGranularity, minValue: timeMinValue, maxValue: timeMaxValue, hourCycle: props.hourCycle, hideTimeZone: props.hideTimeZone, onChange: (v) => state.setTime('end', v) }, void 0)] }, void 0))] }, void 0)] }, void 0)] }, void 0));
     return wrapWithField(component, domRef, {
         ...props,
         styles,

package/es/components/forms/DatePicker/TimeInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.25.0
+ * @cube-dev/ui-kit v0.26.1
  * Released under the MIT license.
  */
 

package/es/components/forms/DatePicker/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.25.0
+ * @cube-dev/ui-kit v0.26.1
  * Released under the MIT license.
  */
 

package/es/components/forms/DatePicker/intl.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.25.0
+ * @cube-dev/ui-kit v0.26.1
  * Released under the MIT license.
  */
 

package/es/components/forms/DatePicker/parseDate.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.25.0
+ * @cube-dev/ui-kit v0.26.1
  * Released under the MIT license.
  */
 

package/es/components/forms/DatePicker/props.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.25.0
+ * @cube-dev/ui-kit v0.26.1
  * Released under the MIT license.
  */
 

package/es/components/forms/DatePicker/utils.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.25.0
+ * @cube-dev/ui-kit v0.26.1
  * Released under the MIT license.
  */
 
@@ -65,5 +65,34 @@ export function useFocusManagerRef(ref) {
     }));
     return domRef;
 }
+export function formatSegments(segments) {
+    segments = JSON.parse(JSON.stringify(segments));
+    segments.forEach((segment) => {
+        if (segment.type === 'literal') {
+            if (segment.text === '/') {
+                segment.text = '-';
+            }
+            if (segment.text === ', ') {
+                segment.text = ' ';
+            }
+        }
+    });
+    const year = segments.find((s) => s.type === 'year');
+    if (year) {
+        segments.splice(segments.indexOf(year), 1);
+        segments.unshift(year);
+    }
+    const month = segments.find((s) => s.type === 'month');
+    if (month) {
+        segments.splice(segments.indexOf(month), 1);
+        segments.splice(2, 0, month);
+    }
+    const day = segments.find((s) => s.type === 'day');
+    if (day) {
+        segments.splice(segments.indexOf(day), 1);
+        segments.splice(4, 0, day);
+    }
+    return segments;
+}
 
         

package/es/components/forms/FieldWrapper/FieldWrapper.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.25.0
+ * @cube-dev/ui-kit v0.26.1
  * Released under the MIT license.
  */
 

package/es/components/forms/FieldWrapper/extract-field-wrapper-props.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.25.0
+ * @cube-dev/ui-kit v0.26.1
  * Released under the MIT license.
  */
 

package/es/components/forms/FieldWrapper/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.25.0
+ * @cube-dev/ui-kit v0.26.1
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.25.0
+ * @cube-dev/ui-kit v0.26.1
  * Released under the MIT license.
  */
 

package/es/components/forms/FileInput/FileInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.25.0
+ * @cube-dev/ui-kit v0.26.1
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.25.0
+ * @cube-dev/ui-kit v0.26.1
  * Released under the MIT license.
  */
 

package/es/components/forms/Form/Form.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.25.0
+ * @cube-dev/ui-kit v0.26.1
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.25.0
+ * @cube-dev/ui-kit v0.26.1
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.25.0
+ * @cube-dev/ui-kit v0.26.1
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.25.0
+ * @cube-dev/ui-kit v0.26.1
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.25.0
+ * @cube-dev/ui-kit v0.26.1
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.25.0
+ * @cube-dev/ui-kit v0.26.1
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.25.0
+ * @cube-dev/ui-kit v0.26.1
  * Released under the MIT license.
  */