@central-design-system/components 4.0.0-alpha.1 → 4.0.0-alpha.3

package/dist/esm-node/src/components/CdsOtpInput/composables/useOtpInput.mjs

@@ -0,0 +1,329 @@
+import { shallowRef, toRef, toValue, computed } from "vue";
+const OtpInputPatterns = {
+  numeric: /[0-9]/,
+  alpha: /[a-zA-Z]/,
+  alphanumeric: /[a-zA-Z0-9]/,
+  "unicode-alpha": new RegExp("\\p{L}", "u"),
+  "unicode-alphanumeric": /[\p{L}\p{N}]/u
+};
+const IME_SCRIPT_RE = /[\p{Script=Han}\p{Script=Hiragana}\p{Script=Katakana}\p{Script=Hangul}\p{Script=Bopomofo}]/u;
+const graphemeSegmenter = /* @__PURE__ */ new Intl.Segmenter(void 0, { granularity: "grapheme" });
+function useOtpInput(options) {
+  const {
+    value,
+    length: _length = 6,
+    pattern,
+    type = "number",
+    masked = false,
+    placeholder,
+    isFocused = shallowRef(false)
+  } = options;
+  const selection = shallowRef(null);
+  const composition = shallowRef("");
+  const isComposing = shallowRef(false);
+  let prevSelection = null;
+  let anchorG = null;
+  let focusG = null;
+  const length = toRef(() => Number(toValue(_length)));
+  const isMasked = toRef(() => toValue(masked) || toValue(type) === "password");
+  const effectivePattern = toRef(() => {
+    const p = toValue(pattern);
+    if (p instanceof RegExp) return p;
+    if (p != null) return OtpInputPatterns[p] ?? null;
+    if (toValue(type) === "number") return OtpInputPatterns.numeric;
+    return null;
+  });
+  const inputMode = toRef(
+    () => effectivePattern.value === OtpInputPatterns.numeric ? "numeric" : "text"
+  );
+  function graphemes(s) {
+    return Array.from(graphemeSegmenter.segment(s), (seg) => seg.segment);
+  }
+  function codeUnitsToGraphemeIndex(s, pos) {
+    let count = 0;
+    for (const seg of graphemeSegmenter.segment(s)) {
+      if (seg.index >= pos) break;
+      count++;
+    }
+    return count;
+  }
+  function graphemeIndexToCodeUnits(s, gIndex) {
+    if (gIndex <= 0) return 0;
+    let count = 0;
+    for (const seg of graphemeSegmenter.segment(s)) {
+      if (count === gIndex) return seg.index;
+      count++;
+    }
+    return s.length;
+  }
+  const slots = computed(() => {
+    const chars = graphemes(value.value);
+    const compositionChars = graphemes(composition.value);
+    const placeholderChar = toValue(placeholder) ?? null;
+    const currentSelection = selection.value;
+    const startG = currentSelection ? codeUnitsToGraphemeIndex(value.value, currentSelection.start) : null;
+    const endG = currentSelection ? codeUnitsToGraphemeIndex(value.value, currentSelection.end) : null;
+    const compositionStart = startG ?? chars.length;
+    return Array.from({ length: length.value }, (_, i) => {
+      const char = chars[i] ?? null;
+      const displayChar = char !== null && isMasked.value ? "•" : char;
+      let compositionChar = null;
+      if (composition.value && i >= compositionStart) {
+        const offset = i - compositionStart;
+        const c = compositionChars[offset];
+        if (c != null) compositionChar = isMasked.value ? "•" : c;
+      }
+      const isActive = !!(isFocused.value && startG !== null && endG !== null && (startG === endG && i === startG || i >= startG && i < endG));
+      return {
+        char: displayChar,
+        compositionChar,
+        placeholderChar,
+        isActive,
+        hasFakeCaret: isActive && char === null && compositionChar === null
+      };
+    });
+  });
+  function filter(text) {
+    const re = effectivePattern.value;
+    if (!re) return text;
+    return graphemes(text).filter((c) => re.test(c)).join("");
+  }
+  function clampGraphemes(text, max) {
+    const chars = graphemes(text);
+    if (chars.length <= max) return text;
+    return chars.slice(0, max).join("");
+  }
+  function isImeText(text) {
+    return IME_SCRIPT_RE.test(text);
+  }
+  function setValue(text) {
+    const next = clampGraphemes(filter(text), length.value);
+    value.value = next;
+    return next;
+  }
+  function insert(text, range) {
+    const current = value.value;
+    const start = (range == null ? void 0 : range.start) ?? current.length;
+    const end = (range == null ? void 0 : range.end) ?? current.length;
+    const filtered = filter(text);
+    const next = clampGraphemes(current.slice(0, start) + filtered + current.slice(end), length.value);
+    value.value = next;
+    const insertEnd = Math.min(start + filtered.length, next.length);
+    const insertEndG = codeUnitsToGraphemeIndex(next, insertEnd);
+    const cursorG = Math.min(insertEndG, length.value - 1);
+    const cursor = graphemeIndexToCodeUnits(next, cursorG);
+    setSelection(cursor, insertEnd, "forward");
+    return next;
+  }
+  function deleteRange(start, end) {
+    const current = value.value;
+    const next = current.slice(0, start) + current.slice(end);
+    value.value = next;
+    const newEnd = Math.min(start + 1, next.length);
+    setSelection(start, newEnd, "forward");
+    return next;
+  }
+  function bulkDelete(isBackward) {
+    const current = value.value;
+    const currentSelection = selection.value;
+    const next = isBackward ? current.slice((currentSelection == null ? void 0 : currentSelection.end) ?? current.length) : current.slice(0, (currentSelection == null ? void 0 : currentSelection.start) ?? 0);
+    value.value = next;
+    if (next.length === 0) setSelection(0, 0, "none");
+    else if (isBackward) setSelection(0, 1, "forward");
+    else setSelection(next.length, next.length, "none");
+    return next;
+  }
+  function setSelection(start, end, direction = "none") {
+    if (start === null || end === null) {
+      selection.value = null;
+      anchorG = null;
+      focusG = null;
+      return;
+    }
+    const next = { start, end, direction };
+    selection.value = next;
+    prevSelection = next;
+    const startG = codeUnitsToGraphemeIndex(value.value, start);
+    anchorG = startG;
+    focusG = startG;
+  }
+  function clearSelection() {
+    selection.value = null;
+    anchorG = null;
+    focusG = null;
+  }
+  function selectAtEnd() {
+    const current = value.value;
+    const graphemeCount = graphemes(current).length;
+    let start;
+    let end;
+    if (graphemeCount >= length.value) {
+      start = graphemeIndexToCodeUnits(current, length.value - 1);
+      end = current.length;
+    } else {
+      start = current.length;
+      end = current.length;
+    }
+    const next = { start, end, direction: "forward" };
+    selection.value = next;
+    prevSelection = next;
+    anchorG = graphemeCount >= length.value ? length.value - 1 : graphemeCount;
+    focusG = anchorG;
+    return next;
+  }
+  function selectSlot(index) {
+    const current = value.value;
+    const graphemeCount = graphemes(current).length;
+    const clamped = Math.min(index, graphemeCount);
+    const start = graphemeIndexToCodeUnits(current, clamped);
+    const end = clamped < graphemeCount ? graphemeIndexToCodeUnits(current, clamped + 1) : current.length;
+    const next = { start, end, direction: "forward" };
+    selection.value = next;
+    prevSelection = next;
+    anchorG = clamped;
+    focusG = clamped;
+    return next;
+  }
+  function extendSelection(direction) {
+    const current = value.value;
+    const valueG = graphemes(current).length;
+    if (valueG === 0) return null;
+    const maxFocus = Math.min(length.value - 1, valueG);
+    if (anchorG === null || focusG === null) {
+      const currentSelection = selection.value;
+      if (!currentSelection) return null;
+      const selectionStartG = codeUnitsToGraphemeIndex(current, currentSelection.start);
+      const selectionEndG = codeUnitsToGraphemeIndex(current, currentSelection.end);
+      if (selectionEndG - selectionStartG <= 1) {
+        anchorG = selectionStartG;
+        focusG = selectionStartG;
+      } else if (currentSelection.direction === "backward") {
+        anchorG = selectionEndG - 1;
+        focusG = selectionStartG;
+      } else {
+        anchorG = selectionStartG;
+        focusG = selectionEndG - 1;
+      }
+    }
+    const newFocus = Math.max(0, Math.min(maxFocus, focusG + direction));
+    focusG = newFocus;
+    const minG = Math.min(anchorG, newFocus);
+    const maxG = Math.max(anchorG, newFocus);
+    const start = graphemeIndexToCodeUnits(current, minG);
+    const end = maxG + 1 >= valueG ? current.length : graphemeIndexToCodeUnits(current, maxG + 1);
+    const newDirection = newFocus < anchorG ? "backward" : "forward";
+    const next = { start, end, direction: newDirection };
+    selection.value = next;
+    prevSelection = next;
+    return next;
+  }
+  function syncSelection(raw) {
+    if (isComposing.value) return selection.value;
+    const { value: inputValue, selectionStart, selectionEnd, selectionDirection, maxLength } = raw;
+    if (selectionStart === null || selectionEnd === null) {
+      selection.value = null;
+      prevSelection = null;
+      return null;
+    }
+    const valueG = graphemes(inputValue).length;
+    const startG = codeUnitsToGraphemeIndex(inputValue, selectionStart);
+    const endG = codeUnitsToGraphemeIndex(inputValue, selectionEnd);
+    let outStartG = -1;
+    let outEndG = -1;
+    let direction;
+    if (valueG !== 0) {
+      const isSingleCaret = startG === endG;
+      const isInsertMode = startG === valueG && valueG < maxLength;
+      if (isSingleCaret && !isInsertMode) {
+        if (startG === 0) {
+          outStartG = 0;
+          outEndG = 1;
+          direction = "forward";
+        } else if (startG === maxLength) {
+          outStartG = startG - 1;
+          outEndG = startG;
+          direction = "backward";
+        } else if (maxLength > 1 && valueG > 1) {
+          let offset = 0;
+          if (prevSelection !== null) {
+            const prevStartG = codeUnitsToGraphemeIndex(inputValue, prevSelection.start);
+            const prevEndG = codeUnitsToGraphemeIndex(inputValue, prevSelection.end);
+            direction = startG < prevEndG ? "backward" : "forward";
+            const wasPreviouslyInserting = prevStartG === prevEndG && prevStartG < maxLength;
+            const wasMultiSlot = prevEndG - prevStartG > 1;
+            if (direction === "backward" && !wasPreviouslyInserting && !wasMultiSlot) {
+              offset = -1;
+            }
+          }
+          outStartG = offset + startG;
+          outEndG = offset + startG + 1;
+        }
+      }
+    }
+    const finalStartG = outStartG !== -1 ? outStartG : startG;
+    const finalEndG = outEndG !== -1 ? outEndG : endG;
+    const finalStart = graphemeIndexToCodeUnits(inputValue, finalStartG);
+    const finalEnd = graphemeIndexToCodeUnits(inputValue, finalEndG);
+    const finalDirection = direction ?? selectionDirection ?? "none";
+    const next = { start: finalStart, end: finalEnd, direction: finalDirection };
+    selection.value = next;
+    prevSelection = next;
+    if (finalEndG - finalStartG <= 1) {
+      anchorG = finalStartG;
+      focusG = finalStartG;
+    }
+    return next;
+  }
+  function startComposition() {
+    isComposing.value = true;
+    composition.value = "";
+  }
+  function updateComposition(data) {
+    composition.value = IME_SCRIPT_RE.test(data) ? data : "";
+  }
+  function endComposition() {
+    isComposing.value = false;
+    composition.value = "";
+  }
+  function reset() {
+    value.value = "";
+    selection.value = null;
+    composition.value = "";
+    isComposing.value = false;
+    prevSelection = null;
+    anchorG = null;
+    focusG = null;
+  }
+  return {
+    value,
+    length,
+    slots,
+    selection,
+    composition,
+    isComposing,
+    isFocused,
+    effectivePattern,
+    inputMode,
+    filter,
+    isImeText,
+    setValue,
+    insert,
+    deleteRange,
+    bulkDelete,
+    syncSelection,
+    setSelection,
+    clearSelection,
+    selectAtEnd,
+    selectSlot,
+    extendSelection,
+    startComposition,
+    updateComposition,
+    endComposition,
+    reset
+  };
+}
+export {
+  OtpInputPatterns as O,
+  useOtpInput as u
+};
+//# sourceMappingURL=useOtpInput.mjs.map

package/dist/esm-node/src/components/CdsOtpInput/index.mjs

@@ -0,0 +1,17 @@
+import { w as withConstants } from "../../core/withConstants.mjs";
+import { c as CdsOtpInputConstants, C as CdsOtpFieldConstants, a as CdsOtpGroupConstants, b as CdsOtpSeparatorConstants } from "./api/CdsOtpInput.constants.mjs";
+import { _ as _sfc_main$1 } from "./CdsOtpField.vue_vue_type_script_setup_true_lang.mjs";
+import { _ as _sfc_main$2 } from "./CdsOtpGroup.vue_vue_type_script_setup_true_lang.mjs";
+import { _ as _sfc_main } from "./CdsOtpInput.vue_vue_type_script_setup_true_lang.mjs";
+import { _ as _sfc_main$3 } from "./CdsOtpSeparator.vue_vue_type_script_setup_true_lang.mjs";
+const CdsOtpInput = withConstants(_sfc_main, CdsOtpInputConstants);
+const CdsOtpField = withConstants(_sfc_main$1, CdsOtpFieldConstants);
+const CdsOtpGroup = withConstants(_sfc_main$2, CdsOtpGroupConstants);
+const CdsOtpSeparator = withConstants(_sfc_main$3, CdsOtpSeparatorConstants);
+export {
+  CdsOtpField as C,
+  CdsOtpGroup as a,
+  CdsOtpInput as b,
+  CdsOtpSeparator as c
+};
+//# sourceMappingURL=index.mjs.map

package/dist/esm-node/src/components/CdsOverlay/CdsOverlay.vue_vue_type_script_setup_true_lang.mjs

@@ -7,6 +7,7 @@ import { a as useRouter, b as useBackButton } from "../../composables/useRouter/
 import { u as useScopeId } from "../../composables/useScopeId/useScopeId.mjs";
 import { u as useStack } from "../../composables/useStack/useStack.mjs";
 import { u as useTeleport } from "../../composables/useTeleport/useTeleport.mjs";
+import { p as provideTheme } from "../../composables/useTheme/useTheme.mjs";
 import { s as standardEasing, M as MaybeTransition } from "../../composables/useTransition/useTransition.mjs";
 import { g as getCurrentInstance } from "../../core/getCurrentInstance.mjs";
 import { u as useDefaults } from "../../core/useDefaults.mjs";
@@ -24,7 +25,6 @@ import { u as useActivator } from "./composables/useActivator.mjs";
 import { u as useLocationStrategies } from "./composables/useLocationStrategies.mjs";
 import { u as useScrollStrategies } from "./composables/useScrollStrategies.mjs";
 import { C as ClickOutside } from "../../directives/click-outside/index.mjs";
-import { p as provideTheme } from "../../composables/useTheme/useTheme.mjs";
 import { u as useDimensions } from "../../composables/useDimensions/useDimensions.mjs";
 import { a as useBackgroundColor } from "../../composables/useColor/useColor.mjs";
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/esm-node/src/components/CdsOverlay/api/CdsOverlay.props.mjs

@@ -3,12 +3,12 @@ import { d as defineScrollStrategiesProps } from "../composables/useScrollStrate
 import { d as defineDisabledProps } from "../../../composables/useDisabled/useDisabled.mjs";
 import { d as defineFocusTrapProps } from "../../../composables/useFocus/useFocusTrap.mjs";
 import { d as defineLazyProps } from "../../../composables/useLazy/useLazy.mjs";
+import { d as defineThemeProps } from "../../../composables/useTheme/useTheme.mjs";
 import { b as defineTransitionProps } from "../../../composables/useTransition/useTransition.mjs";
 import { d as defineComponentProps } from "../../../core/defineComponent.mjs";
 import { p as propsFactory } from "../../../core/propsFactory.mjs";
 import { d as defineActivatorProps } from "../composables/useActivator.mjs";
 import { C as CdsOverlayConstants } from "./CdsOverlay.constants.mjs";
-import { d as defineThemeProps } from "../../../composables/useTheme/useTheme.mjs";
 import { d as defineDimensionsProps } from "../../../composables/useDimensions/useDimensions.mjs";
 const defineCdsOverlayProps = propsFactory(
   {

package/dist/esm-node/src/components/CdsPage/CdsPage.vue_vue_type_script_setup_true_lang.mjs

@@ -1,4 +1,5 @@
 import { defineComponent, useSlots, computed, unref, createVNode } from "vue";
+import { u as useDisplay } from "../../composables/useDisplay/useDisplay.mjs";
 import { u as useDefaults } from "../../core/useDefaults.mjs";
 import { c as classNames } from "../../utils/dom/classNames.mjs";
 import { w as warn } from "../../utils/dom/console.mjs";
@@ -6,7 +7,6 @@ import { u as useInjectMain } from "../CdsMain/context.mjs";
 import { C as CdsPageConstants } from "./api/CdsPage.constants.mjs";
 import { d as defineCdsPageProps } from "./api/CdsPage.props.mjs";
 import { u as useInjectLayout } from "../../composables/useLayout/context.mjs";
-import { u as useDisplay } from "../../composables/useDisplay/useDisplay.mjs";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: CdsPageConstants.name

package/dist/esm-node/src/components/CdsPagination/CdsPagination.vue_vue_type_script_setup_true_lang.mjs

@@ -1,7 +1,9 @@
 import { defineComponent, useSlots, shallowRef, ref, computed, unref, createVNode, nextTick } from "vue";
 import { u as useDisabled } from "../../composables/useDisabled/useDisabled.mjs";
+import { u as useDisplay } from "../../composables/useDisplay/useDisplay.mjs";
 import { a as useLocale, u as useRtl } from "../../composables/useLocale/useLocale.mjs";
 import { u as useResizeObserver } from "../../composables/useResizeObserver/useResizeObserver.mjs";
+import { p as provideTheme } from "../../composables/useTheme/useTheme.mjs";
 import { u as useDefaults } from "../../core/useDefaults.mjs";
 import { u as useProxyModel } from "../../core/useProxyModel.mjs";
 import { v as createRange, _ as keyNames } from "../../utils/helpers.mjs";
@@ -10,8 +12,6 @@ import { C as CdsFunctionalButton } from "../CdsFunctionalButton/index.mjs";
 import { C as CdsTextInput } from "../CdsTextInput/index.mjs";
 import { C as CdsPaginationConstants } from "./api/CdsPagination.constants.mjs";
 import { d as defineCdsPaginationProps } from "./api/CdsPagination.props.mjs";
-import { p as provideTheme } from "../../composables/useTheme/useTheme.mjs";
-import { u as useDisplay } from "../../composables/useDisplay/useDisplay.mjs";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: CdsPaginationConstants.name

package/dist/esm-node/src/components/CdsPagination/api/CdsPagination.props.mjs

@@ -1,9 +1,9 @@
 import { d as defineDisabledProps } from "../../../composables/useDisabled/useDisabled.mjs";
 import { I as IconValue } from "../../../composables/useIcons/internal/useIcons.constants.mjs";
+import { d as defineThemeProps } from "../../../composables/useTheme/useTheme.mjs";
 import { a as defineTagProps, d as defineComponentProps } from "../../../core/defineComponent.mjs";
 import { p as propsFactory } from "../../../core/propsFactory.mjs";
 import { C as CdsPaginationConstants } from "./CdsPagination.constants.mjs";
-import { d as defineThemeProps } from "../../../composables/useTheme/useTheme.mjs";
 const defineCdsPaginationProps = propsFactory(
   {
     /** Начальная страница */

package/dist/esm-node/src/components/CdsProgressBar/CdsProgressBar.vue_vue_type_script_setup_true_lang.mjs

@@ -1,6 +1,7 @@
 import { defineComponent, useSlots, shallowRef, computed, unref, createVNode, Transition, Fragment } from "vue";
 import { u as useRtl } from "../../composables/useLocale/useLocale.mjs";
 import { u as useLocation } from "../../composables/useLocation/useLocation.mjs";
+import { p as provideTheme } from "../../composables/useTheme/useTheme.mjs";
 import { u as useDefaults } from "../../core/useDefaults.mjs";
 import { u as useProxyModel } from "../../core/useProxyModel.mjs";
 import { u as useToggleScope } from "../../core/useToggleScope.mjs";
@@ -9,7 +10,6 @@ import { c as classNames } from "../../utils/dom/classNames.mjs";
 import { C as CdsProgressBarConstants } from "./api/CdsProgressBar.constants.mjs";
 import { d as defineCdsProgressBarProps } from "./api/CdsProgressBar.props.mjs";
 import { u as useChunks } from "./composables/useChunk.mjs";
-import { p as provideTheme } from "../../composables/useTheme/useTheme.mjs";
 import { u as useTextColor, a as useBackgroundColor } from "../../composables/useColor/useColor.mjs";
 import { u as useElementIntersection } from "../../hooks/useIntersectionObserver/index.mjs";
 import { u as useResizeObserver } from "../../hooks/useResizeObserver/index.mjs";

package/dist/esm-node/src/components/CdsProgressBar/api/CdsProgressBar.props.mjs

@@ -1,9 +1,9 @@
 import { d as defineLocationProps } from "../../../composables/useLocation/useLocation.mjs";
+import { d as defineThemeProps } from "../../../composables/useTheme/useTheme.mjs";
 import { d as defineComponentProps, a as defineTagProps } from "../../../core/defineComponent.mjs";
 import { p as propsFactory } from "../../../core/propsFactory.mjs";
 import { d as defineChunksProps } from "../composables/useChunk.mjs";
 import { C as CdsProgressBarConstants } from "./CdsProgressBar.constants.mjs";
-import { d as defineThemeProps } from "../../../composables/useTheme/useTheme.mjs";
 import { d as defineColorProps } from "../../../composables/useColor/useColor.mjs";
 const defineCdsProgressBarProps = propsFactory(
   {

package/dist/esm-node/src/components/CdsProgressCircle/CdsProgressCircle.vue_vue_type_script_setup_true_lang.mjs

@@ -1,12 +1,12 @@
 import { defineComponent, useSlots, shallowRef, toRef, unref, computed, createVNode } from "vue";
 import { u as useReveal } from "../../composables/useReveal/useReveal.mjs";
+import { p as provideTheme } from "../../composables/useTheme/useTheme.mjs";
 import { u as useDefaults } from "../../core/useDefaults.mjs";
 import { c as clamp, u as convertToUnit } from "../../utils/helpers.mjs";
 import { c as classNames } from "../../utils/dom/classNames.mjs";
 import { P as PREFERS_REDUCED_MOTION } from "../../utils/dom/globals.mjs";
 import { C as CdsProgressCircleConstants } from "./api/CdsProgressCircle.constants.mjs";
 import { d as defineCdsProgressCircleProps } from "./api/CdsProgressCircle.props.mjs";
-import { p as provideTheme } from "../../composables/useTheme/useTheme.mjs";
 import { u as useSize } from "../../composables/useSize/useSize.mjs";
 import { u as useTextColor } from "../../composables/useColor/useColor.mjs";
 import { a as useElementSize } from "../../hooks/useResizeObserver/index.mjs";

package/dist/esm-node/src/components/CdsProgressCircle/api/CdsProgressCircle.props.mjs

@@ -1,8 +1,8 @@
 import { d as defineRevealProps } from "../../../composables/useReveal/useReveal.mjs";
+import { d as defineThemeProps } from "../../../composables/useTheme/useTheme.mjs";
 import { a as defineTagProps, d as defineComponentProps } from "../../../core/defineComponent.mjs";
 import { p as propsFactory } from "../../../core/propsFactory.mjs";
 import { C as CdsProgressCircleConstants } from "./CdsProgressCircle.constants.mjs";
-import { d as defineThemeProps } from "../../../composables/useTheme/useTheme.mjs";
 import { d as defineSizeProps } from "../../../composables/useSize/useSize.mjs";
 const defineCdsProgressCircleProps = propsFactory(
   {

package/dist/esm-node/src/components/CdsSkeletonLoader/CdsSkeletonLoader.vue_vue_type_script_setup_true_lang.mjs

@@ -1,4 +1,5 @@
 import { defineComponent, useSlots, computed, createVNode, unref } from "vue";
+import { p as provideTheme } from "../../composables/useTheme/useTheme.mjs";
 import { u as useDefaults } from "../../core/useDefaults.mjs";
 import { ac as wrapInArray } from "../../utils/helpers.mjs";
 import { c as classNames } from "../../utils/dom/classNames.mjs";
@@ -6,7 +7,6 @@ import { C as CdsSkeletonLoaderConstants } from "./api/CdsSkeletonLoader.constan
 import { d as defineCdsSkeletonLoaderProps } from "./api/CdsSkeletonLoader.props.mjs";
 import { a as allowedTypes } from "./api/CdsSkeletonLoader.types.mjs";
 import { u as useDimensions } from "../../composables/useDimensions/useDimensions.mjs";
-import { p as provideTheme } from "../../composables/useTheme/useTheme.mjs";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: CdsSkeletonLoaderConstants.name

package/dist/esm-node/src/components/CdsSkeletonLoader/api/CdsSkeletonLoader.props.mjs

@@ -1,7 +1,7 @@
+import { d as defineThemeProps } from "../../../composables/useTheme/useTheme.mjs";
 import { d as defineComponentProps } from "../../../core/defineComponent.mjs";
 import { p as propsFactory } from "../../../core/propsFactory.mjs";
 import { C as CdsSkeletonLoaderConstants } from "./CdsSkeletonLoader.constants.mjs";
-import { d as defineThemeProps } from "../../../composables/useTheme/useTheme.mjs";
 import { d as defineDimensionsProps } from "../../../composables/useDimensions/useDimensions.mjs";
 const defineCdsSkeletonLoaderProps = propsFactory(
   {

package/dist/esm-node/src/components/CdsSlideGroup/CdsSlideGroup.vue_vue_type_script_setup_true_lang.mjs

@@ -1,5 +1,6 @@
 import { defineComponent, useSlots, shallowRef, computed, unref, watch, createVNode } from "vue";
 import { u as useDirection } from "../../composables/useDirection/useDirection.mjs";
+import { u as useDisplay } from "../../composables/useDisplay/useDisplay.mjs";
 import { u as useGoTo } from "../../composables/useGoTo/useGoTo.mjs";
 import { u as useGroup } from "../../composables/useGroup/useGroup.mjs";
 import { u as useRtl } from "../../composables/useLocale/useLocale.mjs";
@@ -13,7 +14,6 @@ import { C as CdsFunctionalButton } from "../CdsFunctionalButton/index.mjs";
 import { C as CdsSlideGroupConstants } from "./api/CdsSlideGroup.constants.mjs";
 import { d as defineCdsSlideGroupProps } from "./api/CdsSlideGroup.props.mjs";
 import { c as calculateCenteredTarget, a as calculateUpdatedTarget, g as getOffsetSize, b as getScrollPosition, d as getScrollSize } from "./utils/calculateTargets.mjs";
-import { u as useDisplay } from "../../composables/useDisplay/useDisplay.mjs";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: CdsSlideGroupConstants.name

package/dist/esm-node/src/components/CdsSlideGroup/api/CdsSlideGroup.props.mjs

@@ -1,11 +1,11 @@
 import { d as defineDirectionProps } from "../../../composables/useDirection/useDirection.mjs";
+import { d as defineDisplayProps } from "../../../composables/useDisplay/useDisplay.mjs";
 import { d as defineGroupProps } from "../../../composables/useGroup/useGroup.mjs";
 import { d as defineGroupItemProps } from "../../../composables/useGroup/useGroupItem.mjs";
 import { I as IconValue } from "../../../composables/useIcons/internal/useIcons.constants.mjs";
 import { a as defineTagProps, d as defineComponentProps } from "../../../core/defineComponent.mjs";
 import { p as propsFactory } from "../../../core/propsFactory.mjs";
 import { C as CdsSlideGroupConstants, a as CdsSlideGroupSymbol, b as CdsSlideGroupItemConstants } from "./CdsSlideGroup.constants.mjs";
-import { d as defineDisplayProps } from "../../../composables/useDisplay/useDisplay.mjs";
 const defineCdsSlideGroupProps = propsFactory(
   {
     /** Принудительно выравнивает активный компонент по центру. */

package/dist/esm-node/src/components/CdsSlideView/api/CdsSlideView.props.mjs

@@ -3,10 +3,10 @@ import { d as defineDisabledProps } from "../../../composables/useDisabled/useDi
 import { d as defineGroupProps } from "../../../composables/useGroup/useGroup.mjs";
 import { d as defineGroupItemProps } from "../../../composables/useGroup/useGroupItem.mjs";
 import { d as defineLazyProps } from "../../../composables/useLazy/useLazy.mjs";
+import { d as defineThemeProps } from "../../../composables/useTheme/useTheme.mjs";
 import { a as defineTagProps, d as defineComponentProps } from "../../../core/defineComponent.mjs";
 import { p as propsFactory } from "../../../core/propsFactory.mjs";
 import { C as CdsSlideViewConstants } from "./CdsSlideView.constants.mjs";
-import { d as defineThemeProps } from "../../../composables/useTheme/useTheme.mjs";
 const defineCdsSlideViewProps = propsFactory(
   {
     continuous: Boolean,

package/dist/esm-node/src/components/CdsStages/CdsStages.vue_vue_type_script_setup_true_lang.mjs

@@ -1,10 +1,10 @@
 import { defineComponent, computed, unref, createVNode } from "vue";
 import { u as useItems } from "../../composables/useItems/useItems.mjs";
+import { p as provideTheme } from "../../composables/useTheme/useTheme.mjs";
 import { u as useDefaults } from "../../core/useDefaults.mjs";
 import { c as classNames } from "../../utils/dom/classNames.mjs";
 import { C as CdsStagesConstants } from "./api/CdsStages.constants.mjs";
 import { d as defineCdsStagesProps } from "./api/CdsStages.props.mjs";
-import { p as provideTheme } from "../../composables/useTheme/useTheme.mjs";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: CdsStagesConstants.name

package/dist/esm-node/src/components/CdsStages/api/CdsStages.props.mjs

@@ -1,8 +1,8 @@
 import { d as defineItemsProps } from "../../../composables/useItems/useItems.mjs";
+import { d as defineThemeProps } from "../../../composables/useTheme/useTheme.mjs";
 import { d as defineComponentProps } from "../../../core/defineComponent.mjs";
 import { p as propsFactory } from "../../../core/propsFactory.mjs";
 import { C as CdsStagesConstants } from "./CdsStages.constants.mjs";
-import { d as defineThemeProps } from "../../../composables/useTheme/useTheme.mjs";
 const defineCdsStagesProps = propsFactory(
   {
     /** Текущий этап */

package/dist/esm-node/src/components/CdsStatus/CdsStatus.vue_vue_type_script_setup_true_lang.mjs

@@ -1,12 +1,12 @@
 import { defineComponent, useSlots, computed, unref, createVNode } from "vue";
 import { u as useStatus } from "../../composables/useStatus/useStatus.mjs";
 import { u as useText } from "../../composables/useText/useText.mjs";
+import { p as provideTheme } from "../../composables/useTheme/useTheme.mjs";
 import { u as useDefaults } from "../../core/useDefaults.mjs";
 import { c as classNames } from "../../utils/dom/classNames.mjs";
 import { C as CdsIcon } from "../CdsIcon/index.mjs";
 import { C as CdsStatusConstants } from "./api/CdsStatus.constants.mjs";
 import { d as defineCdsStatusProps } from "./api/CdsStatus.props.mjs";
-import { p as provideTheme } from "../../composables/useTheme/useTheme.mjs";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: CdsStatusConstants.name

package/dist/esm-node/src/components/CdsStatus/api/CdsStatus.props.mjs

@@ -1,9 +1,9 @@
 import { d as defineStatusProps } from "../../../composables/useStatus/useStatus.mjs";
 import { d as defineTextProps } from "../../../composables/useText/useText.mjs";
+import { d as defineThemeProps } from "../../../composables/useTheme/useTheme.mjs";
 import { d as defineComponentProps } from "../../../core/defineComponent.mjs";
 import { p as propsFactory } from "../../../core/propsFactory.mjs";
 import { C as CdsStatusConstants } from "./CdsStatus.constants.mjs";
-import { d as defineThemeProps } from "../../../composables/useTheme/useTheme.mjs";
 const defineCdsStatusProps = propsFactory(
   {
     ...defineStatusProps(),

package/dist/esm-node/src/components/CdsSteps/api/CdsSteps.props.mjs

@@ -3,11 +3,11 @@ import { d as defineGroupProps } from "../../../composables/useGroup/useGroup.mj
 import { d as defineGroupItemProps } from "../../../composables/useGroup/useGroupItem.mjs";
 import { d as defineItemsProps } from "../../../composables/useItems/useItems.mjs";
 import { d as defineReadonlyProps } from "../../../composables/useReadonly/useReadonly.mjs";
+import { d as defineThemeProps } from "../../../composables/useTheme/useTheme.mjs";
 import { d as defineComponentProps, a as defineTagProps } from "../../../core/defineComponent.mjs";
 import { p as propsFactory } from "../../../core/propsFactory.mjs";
 import { a3 as omit, a7 as pick } from "../../../utils/helpers.mjs";
 import { C as CdsStepsActionsConstants, a as CdsStepsItemConstants, b as CdsStepsViewConstants, c as CdsStepsViewItemConstants, d as CdsStepsConstants } from "./CdsSteps.constants.mjs";
-import { d as defineThemeProps } from "../../../composables/useTheme/useTheme.mjs";
 const defineCdsStepsItemProps = propsFactory(
   {
     /** Заголовок шага */

package/dist/esm-node/src/components/CdsSurface/CdsSurface.vue_vue_type_script_setup_true_lang.mjs

@@ -1,11 +1,11 @@
 import { defineComponent, useSlots, createVNode, unref } from "vue";
 import { u as useLocation } from "../../composables/useLocation/useLocation.mjs";
 import { u as usePosition } from "../../composables/usePosition/usePosition.mjs";
+import { p as provideTheme } from "../../composables/useTheme/useTheme.mjs";
 import { u as useDefaults } from "../../core/useDefaults.mjs";
 import { c as classNames } from "../../utils/dom/classNames.mjs";
 import { C as CdsSurfaceConstants } from "./api/CdsSurface.constants.mjs";
 import { d as defineCdsSurfaceProps } from "./api/CdsSurface.props.mjs";
-import { p as provideTheme } from "../../composables/useTheme/useTheme.mjs";
 import { a as useBackgroundColor } from "../../composables/useColor/useColor.mjs";
 import { u as useDimensions } from "../../composables/useDimensions/useDimensions.mjs";
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/esm-node/src/components/CdsSurface/api/CdsSurface.props.mjs

@@ -1,9 +1,9 @@
 import { d as defineLocationProps } from "../../../composables/useLocation/useLocation.mjs";
 import { d as definePositionProps } from "../../../composables/usePosition/usePosition.mjs";
+import { d as defineThemeProps } from "../../../composables/useTheme/useTheme.mjs";
 import { a as defineTagProps, d as defineComponentProps } from "../../../core/defineComponent.mjs";
 import { p as propsFactory } from "../../../core/propsFactory.mjs";
 import { C as CdsSurfaceConstants } from "./CdsSurface.constants.mjs";
-import { d as defineThemeProps } from "../../../composables/useTheme/useTheme.mjs";
 import { d as defineDimensionsProps } from "../../../composables/useDimensions/useDimensions.mjs";
 const defineCdsSurfaceProps = propsFactory(
   {