@rio-cloud/rio-uikit 2.1.0 → 2.2.1

package/components/circularProgress/CircularProgress.js

@@ -0,0 +1,197 @@
+import { jsxs as x, jsx as d } from "react/jsx-runtime";
+import { useId as _, useMemo as L } from "react";
+import q from "../../utils/classNames.js";
+import { useReducedMotion as G } from "../../node_modules/framer-motion/dist/es/utils/reduced-motion/use-reduced-motion.js";
+import { motion as z } from "../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js";
+const k = (e, r, n) => Math.min(n, Math.max(r, e)), H = (e) => {
+  switch (e) {
+    case "xs":
+      return 32;
+    case "sm":
+      return 48;
+    case "lg":
+      return 80;
+    case "xl":
+      return 120;
+    default:
+      return 64;
+  }
+}, J = (e) => {
+  switch (e) {
+    case "success":
+      return "var(--brand-success)";
+    case "info":
+      return "var(--brand-info)";
+    case "warning":
+      return "var(--brand-warning)";
+    case "danger":
+      return "var(--brand-danger)";
+    case "secondary":
+      return "var(--brand-secondary)";
+    case "default":
+      return "var(--gray)";
+    case "white":
+      return "var(--color-white)";
+    default:
+      return "var(--brand-primary)";
+  }
+}, K = (e) => {
+  switch (e) {
+    case "decent":
+      return "var(--gray-decent)";
+    case "lightest":
+      return "var(--gray-lightest)";
+    case "lighter":
+      return "var(--gray-lighter)";
+    case "light":
+      return "var(--gray-light)";
+    case "gray":
+      return "var(--gray)";
+    case "dark":
+      return "var(--gray-dark)";
+    case "darker":
+      return "var(--gray-darker)";
+    case "darkest":
+      return "var(--gray-darkest)";
+    case "white":
+      return "var(--color-white)";
+  }
+}, Q = (e, r, n, h) => {
+  const u = {
+    maximumFractionDigits: 0,
+    ...h
+  }, t = new Intl.NumberFormat(void 0, u);
+  if (u.style === "percent") {
+    const i = n - r, m = i === 0 ? 0 : (e - r) / i;
+    return t.format(k(m, 0, 1));
+  }
+  return t.format(e);
+}, oe = (e) => {
+  const {
+    label: r,
+    size: n = "md",
+    color: h = "primary",
+    value: u = 0,
+    valueLabel: t,
+    minValue: i = 0,
+    maxValue: m = 100,
+    formatOptions: b,
+    isIndeterminate: s = !1,
+    showValueLabel: w = !0,
+    strokeWidth: c = 8,
+    trackColor: O = "lighter",
+    trackClassName: R,
+    disableAnimation: S = !1,
+    animationDelay: N = 0,
+    className: B,
+    ringWrapClassName: F,
+    valueLabelClassName: T,
+    labelClassName: j
+  } = e, I = `circular-progress-label-${_()}`, A = G(), f = !(S || A), g = H(n), C = J(h), W = K(O), a = Math.min(i, m), o = Math.max(i, m), l = k(u, a, o), { radius: p, circumference: M, strokeDasharray: $, strokeDashoffset: E, ratio: X } = L(() => {
+    const D = (100 - c) / 2, y = 2 * Math.PI * D, P = o - a, Y = P === 0 ? 0 : (l - a) / P, V = k(Y, 0, 1);
+    return {
+      radius: D,
+      circumference: y,
+      strokeDasharray: y,
+      strokeDashoffset: y * (1 - V),
+      ratio: V
+    };
+  }, [o, a, l, c]), v = L(() => w ? t || Q(l, a, o, b) : null, [b, o, a, l, w, t]);
+  return /* @__PURE__ */ x(
+    "div",
+    {
+      className: `display-flex flex-column align-items-center text-center gap-10 ${B ?? ""}`,
+      "aria-labelledby": r ? I : void 0,
+      children: [
+        /* @__PURE__ */ x(
+          "div",
+          {
+            className: F ?? "",
+            role: "progressbar",
+            "aria-busy": s || void 0,
+            "aria-valuemin": s ? void 0 : a,
+            "aria-valuemax": s ? void 0 : o,
+            "aria-valuenow": s ? void 0 : l,
+            "aria-valuetext": !s && typeof v == "string" ? v : void 0,
+            style: {
+              width: g,
+              height: g,
+              position: "relative",
+              display: "grid",
+              placeItems: "center"
+            },
+            children: [
+              /* @__PURE__ */ x("svg", { width: g, height: g, viewBox: "0 0 100 100", style: { transform: "rotate(-90deg)" }, children: [
+                /* @__PURE__ */ d(
+                  "circle",
+                  {
+                    cx: "50",
+                    cy: "50",
+                    r: p,
+                    fill: "none",
+                    stroke: W,
+                    strokeWidth: c,
+                    className: R ?? ""
+                  }
+                ),
+                s ? /* @__PURE__ */ d(
+                  z.circle,
+                  {
+                    cx: "50",
+                    cy: "50",
+                    r: p,
+                    fill: "none",
+                    stroke: C,
+                    strokeWidth: c,
+                    strokeLinecap: "round",
+                    strokeDasharray: M * 0.35,
+                    strokeDashoffset: 0,
+                    animate: f ? { rotate: 360 } : void 0,
+                    transition: f ? {
+                      repeat: Number.POSITIVE_INFINITY,
+                      ease: "linear",
+                      duration: 1,
+                      delay: N
+                    } : void 0,
+                    style: { transformOrigin: "50px 50px" }
+                  }
+                ) : /* @__PURE__ */ d(
+                  z.circle,
+                  {
+                    cx: "50",
+                    cy: "50",
+                    r: p,
+                    fill: "none",
+                    stroke: C,
+                    strokeWidth: c,
+                    strokeLinecap: "round",
+                    strokeDasharray: $,
+                    initial: f ? { strokeDashoffset: M } : !1,
+                    animate: { strokeDashoffset: E },
+                    transition: f ? { duration: 0.6, ease: "easeOut", delay: N } : void 0
+                  }
+                )
+              ] }),
+              v != null && /* @__PURE__ */ d(
+                "div",
+                {
+                  className: q(
+                    "position-absolute",
+                    "display-grid place-items-center",
+                    T
+                  ),
+                  children: v
+                }
+              )
+            ]
+          }
+        ),
+        r != null && /* @__PURE__ */ d("div", { id: I, className: j ?? "", children: r })
+      ]
+    }
+  );
+};
+export {
+  oe as default
+};
+//# sourceMappingURL=CircularProgress.js.map

package/components/circularProgress/CircularProgress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CircularProgress.js","sources":["../../../src/components/circularProgress/CircularProgress.tsx"],"sourcesContent":["import { useId, useMemo } from 'react';\nimport { motion, useReducedMotion } from 'framer-motion';\n\nimport classNames from '../../utils/classNames';\n\nexport type CircularProgressColor =\n    | 'default'\n    | 'primary'\n    | 'secondary'\n    | 'info'\n    | 'success'\n    | 'warning'\n    | 'danger'\n    | 'white';\n\nexport type CircularProgressSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nexport type CircularProgressTrackColor =\n    | 'decent'\n    | 'lightest'\n    | 'lighter'\n    | 'light'\n    | 'gray'\n    | 'dark'\n    | 'darker'\n    | 'darkest'\n    | 'white';\n\nexport type CircularProgressProps = {\n    /**\n     * Optional text or node shown below the ring.\n     */\n    label?: React.ReactNode;\n\n    /**\n     * Preset size for the component.\n     *\n     * Possible values are:\n     *\n     * - `'xs'`\n     * - `'sm'`\n     * - `'md'`\n     * - `'lg'`\n     * - `'xl'`\n     *\n     * @default 'md'\n     */\n    size?: CircularProgressSize;\n\n    /**\n     * Color preset for the progress ring.\n     *\n     * Possible values are:\n     *\n     * - `'default'`\n     * - `'primary'`\n     * - `'secondary'`\n     * - `'info'`\n     * - `'success'`\n     * - `'warning'`\n     * - `'danger'`\n     * - `'white'`\n     *\n     * @default 'primary'\n     */\n    color?: CircularProgressColor;\n\n    /**\n     * Defaults to 0 to avoid indeterminate/spinner visuals.\n     *\n     * @default 0\n     */\n    value?: number;\n\n    /**\n     * Override the rendered value label content.\n     */\n    valueLabel?: React.ReactNode;\n\n    /**\n     * Minimum value for the range.\n     *\n     * @default 0\n     */\n    minValue?: number;\n\n    /**\n     * Maximum value for the range.\n     *\n     * @default 100\n     */\n    maxValue?: number;\n\n    /**\n     * Formatting for the visible value label.\n     * - If style === \"percent\": formats ratio (value-min)/(max-min)\n     * - Otherwise: formats the raw value (e.g. unit)\n     */\n    formatOptions?: Intl.NumberFormatOptions;\n\n    /**\n     * Indeterminate mode is opt-in. Animates the progress indefinitely.\n     * May come in handy when the value still loads to prevent layout shifting.\n     *\n     * @default false\n     */\n    isIndeterminate?: boolean;\n\n    /**\n     * Toggles the value label in the center of the ring.\n     *\n     * @default true\n     */\n    showValueLabel?: boolean;\n\n    /**\n     * Stroke width used for the ring and track.\n     *\n     * @default 8\n     */\n    strokeWidth?: number;\n\n    /**\n     * Track color preset for the background ring.\n     *\n     * Possible values are:\n     *\n     * - `'decent'`\n     * - `'lightest'`\n     * - `'lighter'`\n     * - `'light'`\n     * - `'gray'`\n     * - `'dark'`\n     * - `'darker'`\n     * - `'darkest'`\n     * - `'white'`\n     *\n     * @default 'lighter'\n     */\n    trackColor?: CircularProgressTrackColor;\n\n    /**\n     * Class name for the track (background ring).\n     */\n    trackClassName?: string;\n\n    /**\n     * Disable motion even if the user allows animations.\n     *\n     * @default false\n     */\n    disableAnimation?: boolean;\n\n    /**\n     * Delay before the progress animation starts (in seconds).\n     *\n     * @default 0\n     */\n    animationDelay?: number;\n\n    /**\n     * Class name for the outer wrapper.\n     */\n    className?: string;\n\n    /**\n     * Class name for the ring wrapper.\n     */\n    ringWrapClassName?: string;\n\n    /**\n     * Class name for the center value label.\n     */\n    valueLabelClassName?: string;\n\n    /**\n     * Class name for the label under the ring.\n     */\n    labelClassName?: string;\n};\n\nconst clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));\n\nconst getSizePx = (size: CircularProgressSize) => {\n    switch (size) {\n        case 'xs':\n            return 32;\n        case 'sm':\n            return 48;\n        case 'lg':\n            return 80;\n        case 'xl':\n            return 120;\n        default:\n            return 64;\n    }\n};\n\nconst getProgressColor = (color: CircularProgressColor) => {\n    switch (color) {\n        case 'success':\n            return 'var(--brand-success)';\n        case 'info':\n            return 'var(--brand-info)';\n        case 'warning':\n            return 'var(--brand-warning)';\n        case 'danger':\n            return 'var(--brand-danger)';\n        case 'secondary':\n            return 'var(--brand-secondary)';\n        case 'default':\n            return 'var(--gray)';\n        case 'white':\n            return 'var(--color-white)';\n        default:\n            return 'var(--brand-primary)';\n    }\n};\n\nconst getTrackColor = (trackColor: CircularProgressTrackColor) => {\n    switch (trackColor) {\n        case 'decent':\n            return 'var(--gray-decent)';\n        case 'lightest':\n            return 'var(--gray-lightest)';\n        case 'lighter':\n            return 'var(--gray-lighter)';\n        case 'light':\n            return 'var(--gray-light)';\n        case 'gray':\n            return 'var(--gray)';\n        case 'dark':\n            return 'var(--gray-dark)';\n        case 'darker':\n            return 'var(--gray-darker)';\n        case 'darkest':\n            return 'var(--gray-darkest)';\n        case 'white':\n            return 'var(--color-white)';\n    }\n};\n\nconst formatValue = (value: number, minValue: number, maxValue: number, formatOptions?: Intl.NumberFormatOptions) => {\n    const options: Intl.NumberFormatOptions = {\n        maximumFractionDigits: 0,\n        ...formatOptions,\n    };\n\n    const formatter = new Intl.NumberFormat(undefined, options);\n\n    if (options.style === 'percent') {\n        const denom = maxValue - minValue;\n        const ratio = denom === 0 ? 0 : (value - minValue) / denom;\n        return formatter.format(clamp(ratio, 0, 1));\n    }\n\n    return formatter.format(value);\n};\n\nconst CircularProgress = (props: CircularProgressProps) => {\n    const {\n        label,\n        size = 'md',\n        color = 'primary',\n\n        value: valueProp = 0,\n        valueLabel,\n\n        minValue = 0,\n        maxValue = 100,\n\n        formatOptions,\n        isIndeterminate = false,\n        showValueLabel = true,\n\n        strokeWidth = 8,\n        trackColor = 'lighter',\n        trackClassName,\n\n        disableAnimation = false,\n        animationDelay = 0,\n\n        className,\n        ringWrapClassName,\n        valueLabelClassName,\n        labelClassName,\n    } = props;\n\n    const reactId = useId();\n    const labelId = `circular-progress-label-${reactId}`;\n\n    const prefersReducedMotion = useReducedMotion();\n    const shouldAnimate = !(disableAnimation || prefersReducedMotion);\n\n    const sizePx = getSizePx(size);\n    const progressColor = getProgressColor(color);\n    const trackColorValue = getTrackColor(trackColor);\n\n    const safeMin = Math.min(minValue, maxValue);\n    const safeMax = Math.max(minValue, maxValue);\n    const safeValue = clamp(valueProp, safeMin, safeMax);\n\n    const { radius, circumference, strokeDasharray, strokeDashoffset, ratio } = useMemo(() => {\n        const viewBoxSize = 100;\n        const r = (viewBoxSize - strokeWidth) / 2;\n        const c = 2 * Math.PI * r;\n\n        const denom = safeMax - safeMin;\n        const progressRatio = denom === 0 ? 0 : (safeValue - safeMin) / denom;\n        const clampedRatio = clamp(progressRatio, 0, 1);\n\n        return {\n            radius: r,\n            circumference: c,\n            strokeDasharray: c,\n            strokeDashoffset: c * (1 - clampedRatio),\n            ratio: clampedRatio,\n        };\n    }, [safeMax, safeMin, safeValue, strokeWidth]);\n\n    const computedValueLabel = useMemo(() => {\n        if (!showValueLabel) {\n            return null;\n        }\n        if (valueLabel) {\n            return valueLabel;\n        }\n        return formatValue(safeValue, safeMin, safeMax, formatOptions);\n    }, [formatOptions, safeMax, safeMin, safeValue, showValueLabel, valueLabel]);\n\n    return (\n        <div\n            className={`display-flex flex-column align-items-center text-center gap-10 ${className ?? ''}`}\n            aria-labelledby={label ? labelId : undefined}\n        >\n            <div\n                className={ringWrapClassName ?? ''}\n                role='progressbar'\n                aria-busy={isIndeterminate || undefined}\n                aria-valuemin={!isIndeterminate ? safeMin : undefined}\n                aria-valuemax={!isIndeterminate ? safeMax : undefined}\n                aria-valuenow={!isIndeterminate ? safeValue : undefined}\n                aria-valuetext={\n                    !isIndeterminate && typeof computedValueLabel === 'string' ? computedValueLabel : undefined\n                }\n                style={{\n                    width: sizePx,\n                    height: sizePx,\n                    position: 'relative',\n                    display: 'grid',\n                    placeItems: 'center',\n                }}\n            >\n                <svg width={sizePx} height={sizePx} viewBox='0 0 100 100' style={{ transform: 'rotate(-90deg)' }}>\n                    <circle\n                        cx='50'\n                        cy='50'\n                        r={radius}\n                        fill='none'\n                        stroke={trackColorValue}\n                        strokeWidth={strokeWidth}\n                        className={trackClassName ?? ''}\n                    />\n\n                    {isIndeterminate ? (\n                        <motion.circle\n                            cx='50'\n                            cy='50'\n                            r={radius}\n                            fill='none'\n                            stroke={progressColor}\n                            strokeWidth={strokeWidth}\n                            strokeLinecap='round'\n                            strokeDasharray={circumference * 0.35}\n                            strokeDashoffset={0}\n                            animate={shouldAnimate ? { rotate: 360 } : undefined}\n                            transition={\n                                shouldAnimate\n                                    ? {\n                                          repeat: Number.POSITIVE_INFINITY,\n                                          ease: 'linear',\n                                          duration: 1,\n                                          delay: animationDelay,\n                                      }\n                                    : undefined\n                            }\n                            style={{ transformOrigin: '50px 50px' }}\n                        />\n                    ) : (\n                        <motion.circle\n                            cx='50'\n                            cy='50'\n                            r={radius}\n                            fill='none'\n                            stroke={progressColor}\n                            strokeWidth={strokeWidth}\n                            strokeLinecap='round'\n                            strokeDasharray={strokeDasharray}\n                            initial={shouldAnimate ? { strokeDashoffset: circumference } : false}\n                            animate={{ strokeDashoffset }}\n                            transition={\n                                shouldAnimate ? { duration: 0.6, ease: 'easeOut', delay: animationDelay } : undefined\n                            }\n                        />\n                    )}\n                </svg>\n\n                {computedValueLabel != null && (\n                    <div\n                        className={classNames(\n                            'position-absolute',\n                            'display-grid place-items-center',\n                            valueLabelClassName\n                        )}\n                    >\n                        {computedValueLabel}\n                    </div>\n                )}\n            </div>\n\n            {label != null && (\n                <div id={labelId} className={labelClassName ?? ''}>\n                    {label}\n                </div>\n            )}\n        </div>\n    );\n};\n\nexport default CircularProgress;\n"],"names":["clamp","value","min","max","getSizePx","size","getProgressColor","color","getTrackColor","trackColor","formatValue","minValue","maxValue","formatOptions","options","formatter","denom","ratio","CircularProgress","props","label","valueProp","valueLabel","isIndeterminate","showValueLabel","strokeWidth","trackClassName","disableAnimation","animationDelay","className","ringWrapClassName","valueLabelClassName","labelClassName","labelId","useId","prefersReducedMotion","useReducedMotion","shouldAnimate","sizePx","progressColor","trackColorValue","safeMin","safeMax","safeValue","radius","circumference","strokeDasharray","strokeDashoffset","useMemo","r","c","progressRatio","clampedRatio","computedValueLabel","jsxs","jsx","motion","classNames"],"mappings":"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"}

package/components/clearableInput/ClearableInput.js

@@ -1,10 +1,10 @@
 import { jsxs as ue, jsx as i } from "react/jsx-runtime";
 import { forwardRef as ce, useState as d, useRef as pe } from "react";
-import h from "classnames";
 import { omit as me, isEmpty as fe } from "es-toolkit/compat";
 import { isNil as de, isFunction as he } from "es-toolkit/predicate";
 import { noop as t } from "es-toolkit/function";
 import { IMaskInput as ge } from "react-imask";
+import h from "../../utils/classNames.js";
 import ve from "../../hooks/usePrevious.js";
 import Ce from "../../hooks/useMergeRefs.js";
 const R = "text", ke = ["text", "password", "email"], T = (u) => !fe(`${u}`), Te = ce((u, g) => {
@@ -18,11 +18,11 @@ const R = "text", ke = ["text", "password", "email"], T = (u) => !fe(`${u}`), Te
     inputRef: v,
     autoComplete: O,
     onChange: n = t,
-    onBlur: j = t,
-    onFocus: A = t,
+    onBlur: _ = t,
+    onFocus: j = t,
     onClear: C = t,
-    onKeyPress: K = t,
-    onClick: _ = t,
+    onKeyPress: A = t,
+    onClick: K = t,
     mask: k,
     maskPlaceholder: U = "_",
     maskVisibility: Y = "always",
@@ -75,11 +75,11 @@ const R = "text", ke = ["text", "password", "email"], T = (u) => !fe(`${u}`), Te
     };
     f.target.unmaskedValue = a.unmaskedValue, x || l(e), n(e, f);
   }, ee = (e) => {
-    V(!0), A(e);
+    V(!0), j(e);
   }, te = (e) => {
-    V(!1), j(e);
+    V(!1), _(e);
   }, se = (e) => {
-    K(e);
+    A(e);
   }, ne = (e) => {
     l(""), n("", e), C && C(e);
   }, ae = h(
@@ -105,7 +105,7 @@ const R = "text", ke = ["text", "password", "email"], T = (u) => !fe(`${u}`), Te
     onFocus: ee,
     onChange: r ? void 0 : X,
     // In case of masked input, the onAccept callback is used
-    onClick: _,
+    onClick: K,
     disabled: c,
     maxLength: r ? void 0 : M,
     tabIndex: S

package/components/clearableInput/ClearableInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"ClearableInput.js","sources":["../../../src/components/clearableInput/ClearableInput.tsx"],"sourcesContent":["/** biome-ignore-all lint/complexity/noBannedTypes: <explanation> */\nimport React, { useState, forwardRef, type ForwardedRef, useRef } from 'react';\nimport classNames from 'classnames';\nimport { isEmpty, omit } from 'es-toolkit/compat';\nimport { isFunction, isNil } from 'es-toolkit/predicate';\nimport { noop } from 'es-toolkit/function';\nimport { IMaskInput } from 'react-imask';\n\nimport usePrevious from '../../hooks/usePrevious';\nimport useMergeRefs from '../../hooks/useMergeRefs';\n\nexport const DEFAULT_TYPE = 'text';\nexport const SUPPORTED_TYPES = ['text', 'password', 'email'];\n\nexport type MaskVisibility = 'always' | 'onFocus' | 'never';\nexport type MaskDefinition = {\n    mask: string;\n    definitions?: Record<string, string | RegExp>;\n    startsWith?: string;\n    [key: string]: any;\n};\n\nexport type ClearableInputProps = {\n    /**\n     * Gives the input element the id.\n     */\n    id?: string;\n\n    /**\n     * Gives the input element a name.\n     */\n    name?: string;\n\n    /**\n     * The translated text that shall be shown when the input is empty.\n     */\n    placeholder?: string | React.ReactNode;\n\n    /**\n     * Defines the type of the input itself.\n     *\n     * There are three types supported:\n     * `text`, `email`, `password`.\n     *\n     * @default 'text'\n     */\n    type?: 'text' | 'password' | 'email';\n\n    /**\n     * Initial value of the ClearableInput. Pass this prop if you want to use this\n     * component as an uncontrolled component.\n     */\n    defaultValue?: string;\n\n    /**\n     * Value of the ClearableInput. Pass this prop if you want to use this\n     * component as a controlled component.\n     */\n    value?: string;\n\n    /**\n     * Defines the maximum amount of characters that can be entered.\n     */\n    maxLength?: number;\n\n    /**\n     * Defines the tab index to be added to the input element.\n     *\n     * @default 0\n     */\n    tabIndex?: number;\n\n    /**\n     * Defined whether or not the input has the error styling.\n     *\n     * @default false\n     */\n    hasError?: boolean;\n\n    /**\n     * The callback ref for the underlying input. Alternatively, use can use a forward ref.\n     */\n    inputRef?: React.RefObject<HTMLInputElement>;\n\n    /**\n     * Sets autocomplete value for autosuggest forms.\n     */\n    autoComplete?: string;\n\n    /**\n     * Callback function for when the value changes. Receives new value as an argument.\n     * @param newValue\n     * @param event\n     * @returns\n     */\n    onChange?: (\n        newValue: string,\n        event: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLSpanElement>\n    ) => void;\n\n    /**\n     * Callback function which gets triggered when the input looses the focus.\n     * @param event\n     * @returns\n     */\n    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;\n\n    /**\n     * Callback function which gets triggered when the input gains the focus.\n     * @param event\n     * @returns\n     */\n    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;\n\n    /**\n     * Callback function for when the value is cleared via the clear button.\n     * @param event\n     * @returns\n     */\n    onClear?: (event: React.MouseEvent<HTMLSpanElement>) => void;\n\n    /**\n     * Callback function for every key pressed including `Enter` key.\n     * @param event\n     * @returns\n     */\n    onKeyPress?: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n\n    /**\n     * Callback triggered when clicked into the input to react on it like when using an auto suggest dropdown\n     * @param event\n     * @returns\n     */\n    onClick?: (event: React.MouseEvent<HTMLInputElement>) => void;\n\n    /**\n     * The mask prop will allow to use the component with an input mask.\n     * It defines the pattern that should be followed.\n     *\n     * For more details on masking, checkout the third party documentation for the\n     * input mask here: {@link https://imask.js.org/guide.html}\n     *\n     * Simple masks can be defined as strings.\n     *\n     * The following characters will define mask format:\n     *\n     * - \"0\" = allowed input: \"0-9\" (digit)\n     * - \"a\" = allowed input: \"a-z, A-Z\" (letter)\n     * - \"*\" = allowed input: any character\n     * - \"#\" = allowed input: \"0-9, a-z, A-Z\" (digit or letter)\n     *\n     * Other chars which is not in custom definitions supposed to be fixed:\n     *\n     * - [] - make input optional\n     * - {} - include fixed part in unmasked value\n     * - ` - prevent symbols shift back\n     *\n     * If definition character should be treated as fixed it should be escaped by \\\\ (E.g. \\\\0).\n     *\n     * Additionally you can provide custom definitions.\n     *\n     * @example\n     * '-- ### ### ###' or '+49 00 000 00'\n     */\n    mask?: string | (string | RegExp)[] | RegExp | DateConstructor | number | Function | MaskDefinition[];\n\n    /**\n     * Placeholder to cover unfilled parts of the mask.\n     *\n     * @default '_'\n     */\n    maskPlaceholder?: string | null;\n\n    /**\n     * Enable characters overwriting\n     *\n     * @default true\n     */\n    maskOverwrite?: boolean | 'shift' | undefined;\n\n    /**\n     * Chooses the mask for dynamic masking depending on input value.\n     * Note, this function may not be an empty function, otherwise the mask selection won't work\n     */\n    maskDispatch?: (appended: string, dynamicMasked: any) => any;\n\n    /**\n     * Controls when the mask pattern is visible.\n     *\n     * - 'always': Mask is always visible\n     * - 'onFocus': Mask is hidden but shown when input is focused\n     * - 'never': Mask is never shown\n     *\n     * @default 'always'\n     */\n    maskVisibility?: MaskVisibility;\n\n    /**\n     * Custom definitions to have more control over your mask. The defined character will be replaced in your mask.\n     *\n     * @example\n     * mask='AAA AAA.AA'\n     * maskDefinitions={{ A: /[A-Z0-9]/ }}\n     */\n    maskDefinitions?: Record<string, string | RegExp>;\n\n    /**\n     * Minimum value to be entered. This prop is extended to accept a Date\n     * when used with an input mask.\n     */\n    min?: string | number | undefined | Date;\n\n    /**\n     * Maximum value to be entered. This prop is extended to accept a Date\n     * when used with an input mask.\n     */\n    max?: string | number | undefined | Date;\n\n    /**\n     * Disabled the input component.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Additional classes to be set on the input element.\n     */\n    inputClassName?: string;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n\n    /**\n     * Render-prop to customize the rendered input.\n     *\n     * The function gets the `inputProps` passed and is responsible for rendering the custom `<input>` component.\n     *\n     * Receives the computed `input` props so you can render your own field. See: {@link https://reactjs.org/docs/render-props.html}\n     */\n    children?: (props: React.InputHTMLAttributes<HTMLInputElement>) => React.ReactNode;\n};\n\nconst hasValue = (value: unknown) => !isEmpty(`${value}`);\n\nconst ClearableInput = forwardRef((props: ClearableInputProps, ref: ForwardedRef<HTMLInputElement>) => {\n    const {\n        type = DEFAULT_TYPE,\n        defaultValue,\n        value,\n        maxLength,\n        tabIndex = 0,\n        hasError = false,\n        inputRef,\n        autoComplete,\n        onChange = noop,\n        onBlur = noop,\n        onFocus = noop,\n        onClear = noop,\n        onKeyPress = noop,\n        onClick = noop,\n        mask,\n        maskPlaceholder = '_',\n        maskVisibility = 'always',\n        maskOverwrite = true,\n        maskDefinitions,\n        maskDispatch,\n        inputClassName = '',\n        disabled = false,\n        className = '',\n        children,\n        ...remainingProps\n    } = props;\n\n    const initialValue = value || defaultValue || '';\n\n    const [inputValue, setInputValue] = useState(initialValue);\n    const [showClear, setShowClear] = useState(hasValue(initialValue));\n    const [isFocused, setIsFocused] = useState(false);\n\n    const isControlled = !isNil(value);\n\n    const internalMaskRef = useRef<HTMLInputElement>(null);\n    const mergedInternalMaskRef = useMergeRefs(internalMaskRef, inputRef, ref);\n\n    const hasMask = !!mask;\n\n    // Calculate if mask should be visible (lazy=false means visible, lazy=true means hidden)\n    const shouldShowMask = () => {\n        switch (maskVisibility) {\n            case 'always':\n                return true;\n            case 'onFocus':\n                return isFocused;\n            case 'never':\n                return false;\n            default:\n                return isFocused;\n        }\n    };\n\n    // Handles new input value and saves it in the local state.\n    // The value stored in the state is used for rendering.\n    const changeInternalValue = (newValue = '') => {\n        // this is there to prevent that onChange and UNSAFE_componentWillReceiveProps set state at the same time\n        if (inputValue === newValue) {\n            return;\n        }\n\n        setInputValue(newValue);\n        setShowClear(hasValue(newValue));\n    };\n\n    // important for when used as a controlled component and value changes from the outside.\n    const previousValue = usePrevious(value);\n    if (previousValue !== value) {\n        changeInternalValue(value);\n    }\n\n    // only gets triggered on user interaction.\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        const newValue = event.target.value;\n\n        if (isControlled) {\n            onChange(newValue, event);\n        } else {\n            changeInternalValue(newValue);\n            onChange(newValue, event);\n        }\n    };\n\n    const handleAccept = (newValue: string, maskRef: any, event?: InputEvent) => {\n        if (!internalMaskRef.current) {\n            return;\n        }\n\n        // Simulate a ChangeEvent for backwards compatibility since react-imask does not return a change event itself\n        const syntheticEvent = {\n            target: internalMaskRef.current,\n            currentTarget: internalMaskRef.current,\n            // Standard synthetic event props\n            bubbles: true,\n            cancelable: true,\n            defaultPrevented: false,\n            isTrusted: true,\n            preventDefault: () => {},\n            stopPropagation: () => {},\n            persist: () => {},\n            nativeEvent: {} as any,\n            type: 'change',\n            timeStamp: Date.now(),\n        } as unknown as React.ChangeEvent<HTMLInputElement>;\n\n        // Set unmasked value manually if needed\n        // (you can use data-attributes or attach it directly)\n        (syntheticEvent.target as any).unmaskedValue = maskRef.unmaskedValue;\n\n        if (isControlled) {\n            onChange(newValue, syntheticEvent);\n        } else {\n            changeInternalValue(newValue);\n            onChange(newValue, syntheticEvent);\n        }\n    };\n\n    const handleInputFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n        setIsFocused(true);\n        onFocus(event);\n    };\n\n    const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n        setIsFocused(false);\n        onBlur(event);\n    };\n\n    // Will be triggered on every key press but also when pressing 'Enter' for example\n    const handleKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        onKeyPress(event);\n    };\n\n    const clearInputValue = (event: React.MouseEvent<HTMLSpanElement>) => {\n        changeInternalValue('');\n        onChange('', event);\n\n        if (onClear) {\n            onClear(event);\n        }\n    };\n\n    const classes = classNames(\n        'ClearableInput',\n        'input-group',\n        hasError && 'has-error',\n        disabled && 'pointer-events-none',\n        className && className\n    );\n\n    const inputClassNames = classNames(\n        'form-control',\n        inputClassName,\n        showClear && 'withClearButton',\n        hasMask && 'withInputMask',\n        disabled && 'disabled'\n    );\n\n    const clearButtonClassNames = classNames('clearButton', !showClear && 'hide');\n\n    const convertedType = type?.toLowerCase();\n    const inputType = SUPPORTED_TYPES.indexOf(convertedType) !== -1 ? convertedType : DEFAULT_TYPE;\n\n    const inputProps = {\n        ...omit(remainingProps, ['value', 'defaultValue', 'onClear']),\n        className: inputClassNames,\n        autoComplete,\n        type: inputType,\n        value: inputValue,\n        onKeyPress: handleKeyPress,\n        onBlur: handleInputBlur,\n        onFocus: handleInputFocus,\n        onChange: hasMask ? undefined : handleChange, // In case of masked input, the onAccept callback is used\n        onClick,\n        disabled,\n        maxLength: hasMask ? undefined : maxLength,\n        tabIndex,\n    } as any;\n\n    // The dispatch function may not be an empty function. Specify it when\n    // using dynamic masking and need more control over which mask gets selected\n    const maskDispatchObj: any = {};\n    if (maskDispatch) {\n        maskDispatchObj.dispatch = maskDispatch;\n    }\n\n    const input = hasMask ? (\n        <IMaskInput\n            {...inputProps}\n            inputRef={mergedInternalMaskRef}\n            mask={mask}\n            definitions={maskDefinitions}\n            {...maskDispatchObj}\n            placeholderChar={maskPlaceholder}\n            onAccept={handleAccept}\n            lazy={!shouldShowMask()}\n            overwrite={maskOverwrite}\n        />\n    ) : (\n        <input {...inputProps} ref={inputRef || ref} />\n    );\n\n    return (\n        <div className={classes}>\n            {children && isFunction(children) ? children(inputProps) : input}\n            <span className={clearButtonClassNames} onClick={clearInputValue}>\n                <span className='clearButtonIcon rioglyph rioglyph-remove-sign' />\n            </span>\n        </div>\n    );\n});\n\nexport default ClearableInput;\n"],"names":["DEFAULT_TYPE","SUPPORTED_TYPES","hasValue","value","isEmpty","ClearableInput","forwardRef","props","ref","type","defaultValue","maxLength","tabIndex","hasError","inputRef","autoComplete","onChange","noop","onBlur","onFocus","onClear","onKeyPress","onClick","mask","maskPlaceholder","maskVisibility","maskOverwrite","maskDefinitions","maskDispatch","inputClassName","disabled","className","children","remainingProps","initialValue","inputValue","setInputValue","useState","showClear","setShowClear","isFocused","setIsFocused","isControlled","isNil","internalMaskRef","useRef","mergedInternalMaskRef","useMergeRefs","hasMask","shouldShowMask","changeInternalValue","newValue","usePrevious","handleChange","event","handleAccept","maskRef","syntheticEvent","handleInputFocus","handleInputBlur","handleKeyPress","clearInputValue","classes","classNames","inputClassNames","clearButtonClassNames","convertedType","inputType","inputProps","omit","maskDispatchObj","input","jsx","IMaskInput","jsxs","isFunction"],"mappings":"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"}
+{"version":3,"file":"ClearableInput.js","sources":["../../../src/components/clearableInput/ClearableInput.tsx"],"sourcesContent":["/** biome-ignore-all lint/complexity/noBannedTypes: <explanation> */\nimport React, { useState, forwardRef, type ForwardedRef, useRef } from 'react';\nimport { isEmpty, omit } from 'es-toolkit/compat';\nimport { isFunction, isNil } from 'es-toolkit/predicate';\nimport { noop } from 'es-toolkit/function';\nimport { IMaskInput } from 'react-imask';\n\nimport classNames from '../../utils/classNames';\nimport usePrevious from '../../hooks/usePrevious';\nimport useMergeRefs from '../../hooks/useMergeRefs';\n\nexport const DEFAULT_TYPE = 'text';\nexport const SUPPORTED_TYPES = ['text', 'password', 'email'];\n\nexport type MaskVisibility = 'always' | 'onFocus' | 'never';\nexport type MaskDefinition = {\n    mask: string;\n    definitions?: Record<string, string | RegExp>;\n    startsWith?: string;\n    [key: string]: any;\n};\n\nexport type ClearableInputProps = {\n    /**\n     * Gives the input element the id.\n     */\n    id?: string;\n\n    /**\n     * Gives the input element a name.\n     */\n    name?: string;\n\n    /**\n     * The translated text that shall be shown when the input is empty.\n     */\n    placeholder?: string | React.ReactNode;\n\n    /**\n     * Defines the type of the input itself.\n     *\n     * There are three types supported:\n     * `text`, `email`, `password`.\n     *\n     * @default 'text'\n     */\n    type?: 'text' | 'password' | 'email';\n\n    /**\n     * Initial value of the ClearableInput. Pass this prop if you want to use this\n     * component as an uncontrolled component.\n     */\n    defaultValue?: string;\n\n    /**\n     * Value of the ClearableInput. Pass this prop if you want to use this\n     * component as a controlled component.\n     */\n    value?: string;\n\n    /**\n     * Defines the maximum amount of characters that can be entered.\n     */\n    maxLength?: number;\n\n    /**\n     * Defines the tab index to be added to the input element.\n     *\n     * @default 0\n     */\n    tabIndex?: number;\n\n    /**\n     * Defined whether or not the input has the error styling.\n     *\n     * @default false\n     */\n    hasError?: boolean;\n\n    /**\n     * The callback ref for the underlying input. Alternatively, use can use a forward ref.\n     */\n    inputRef?: React.RefObject<HTMLInputElement>;\n\n    /**\n     * Sets autocomplete value for autosuggest forms.\n     */\n    autoComplete?: string;\n\n    /**\n     * Callback function for when the value changes. Receives new value as an argument.\n     * @param newValue\n     * @param event\n     * @returns\n     */\n    onChange?: (\n        newValue: string,\n        event: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLSpanElement>\n    ) => void;\n\n    /**\n     * Callback function which gets triggered when the input looses the focus.\n     * @param event\n     * @returns\n     */\n    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;\n\n    /**\n     * Callback function which gets triggered when the input gains the focus.\n     * @param event\n     * @returns\n     */\n    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;\n\n    /**\n     * Callback function for when the value is cleared via the clear button.\n     * @param event\n     * @returns\n     */\n    onClear?: (event: React.MouseEvent<HTMLSpanElement>) => void;\n\n    /**\n     * Callback function for every key pressed including `Enter` key.\n     * @param event\n     * @returns\n     */\n    onKeyPress?: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n\n    /**\n     * Callback triggered when clicked into the input to react on it like when using an auto suggest dropdown\n     * @param event\n     * @returns\n     */\n    onClick?: (event: React.MouseEvent<HTMLInputElement>) => void;\n\n    /**\n     * The mask prop will allow to use the component with an input mask.\n     * It defines the pattern that should be followed.\n     *\n     * For more details on masking, checkout the third party documentation for the\n     * input mask here: {@link https://imask.js.org/guide.html}\n     *\n     * Simple masks can be defined as strings.\n     *\n     * The following characters will define mask format:\n     *\n     * - \"0\" = allowed input: \"0-9\" (digit)\n     * - \"a\" = allowed input: \"a-z, A-Z\" (letter)\n     * - \"*\" = allowed input: any character\n     * - \"#\" = allowed input: \"0-9, a-z, A-Z\" (digit or letter)\n     *\n     * Other chars which is not in custom definitions supposed to be fixed:\n     *\n     * - [] - make input optional\n     * - {} - include fixed part in unmasked value\n     * - ` - prevent symbols shift back\n     *\n     * If definition character should be treated as fixed it should be escaped by \\\\ (E.g. \\\\0).\n     *\n     * Additionally you can provide custom definitions.\n     *\n     * @example\n     * '-- ### ### ###' or '+49 00 000 00'\n     */\n    mask?: string | (string | RegExp)[] | RegExp | DateConstructor | number | Function | MaskDefinition[];\n\n    /**\n     * Placeholder to cover unfilled parts of the mask.\n     *\n     * @default '_'\n     */\n    maskPlaceholder?: string | null;\n\n    /**\n     * Enable characters overwriting\n     *\n     * @default true\n     */\n    maskOverwrite?: boolean | 'shift' | undefined;\n\n    /**\n     * Chooses the mask for dynamic masking depending on input value.\n     * Note, this function may not be an empty function, otherwise the mask selection won't work\n     */\n    maskDispatch?: (appended: string, dynamicMasked: any) => any;\n\n    /**\n     * Controls when the mask pattern is visible.\n     *\n     * - 'always': Mask is always visible\n     * - 'onFocus': Mask is hidden but shown when input is focused\n     * - 'never': Mask is never shown\n     *\n     * @default 'always'\n     */\n    maskVisibility?: MaskVisibility;\n\n    /**\n     * Custom definitions to have more control over your mask. The defined character will be replaced in your mask.\n     *\n     * @example\n     * mask='AAA AAA.AA'\n     * maskDefinitions={{ A: /[A-Z0-9]/ }}\n     */\n    maskDefinitions?: Record<string, string | RegExp>;\n\n    /**\n     * Minimum value to be entered. This prop is extended to accept a Date\n     * when used with an input mask.\n     */\n    min?: string | number | undefined | Date;\n\n    /**\n     * Maximum value to be entered. This prop is extended to accept a Date\n     * when used with an input mask.\n     */\n    max?: string | number | undefined | Date;\n\n    /**\n     * Disabled the input component.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Additional classes to be set on the input element.\n     */\n    inputClassName?: string;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n\n    /**\n     * Render-prop to customize the rendered input.\n     *\n     * The function gets the `inputProps` passed and is responsible for rendering the custom `<input>` component.\n     *\n     * Receives the computed `input` props so you can render your own field. See: {@link https://reactjs.org/docs/render-props.html}\n     */\n    children?: (props: React.InputHTMLAttributes<HTMLInputElement>) => React.ReactNode;\n};\n\nconst hasValue = (value: unknown) => !isEmpty(`${value}`);\n\nconst ClearableInput = forwardRef((props: ClearableInputProps, ref: ForwardedRef<HTMLInputElement>) => {\n    const {\n        type = DEFAULT_TYPE,\n        defaultValue,\n        value,\n        maxLength,\n        tabIndex = 0,\n        hasError = false,\n        inputRef,\n        autoComplete,\n        onChange = noop,\n        onBlur = noop,\n        onFocus = noop,\n        onClear = noop,\n        onKeyPress = noop,\n        onClick = noop,\n        mask,\n        maskPlaceholder = '_',\n        maskVisibility = 'always',\n        maskOverwrite = true,\n        maskDefinitions,\n        maskDispatch,\n        inputClassName = '',\n        disabled = false,\n        className = '',\n        children,\n        ...remainingProps\n    } = props;\n\n    const initialValue = value || defaultValue || '';\n\n    const [inputValue, setInputValue] = useState(initialValue);\n    const [showClear, setShowClear] = useState(hasValue(initialValue));\n    const [isFocused, setIsFocused] = useState(false);\n\n    const isControlled = !isNil(value);\n\n    const internalMaskRef = useRef<HTMLInputElement>(null);\n    const mergedInternalMaskRef = useMergeRefs(internalMaskRef, inputRef, ref);\n\n    const hasMask = !!mask;\n\n    // Calculate if mask should be visible (lazy=false means visible, lazy=true means hidden)\n    const shouldShowMask = () => {\n        switch (maskVisibility) {\n            case 'always':\n                return true;\n            case 'onFocus':\n                return isFocused;\n            case 'never':\n                return false;\n            default:\n                return isFocused;\n        }\n    };\n\n    // Handles new input value and saves it in the local state.\n    // The value stored in the state is used for rendering.\n    const changeInternalValue = (newValue = '') => {\n        // this is there to prevent that onChange and UNSAFE_componentWillReceiveProps set state at the same time\n        if (inputValue === newValue) {\n            return;\n        }\n\n        setInputValue(newValue);\n        setShowClear(hasValue(newValue));\n    };\n\n    // important for when used as a controlled component and value changes from the outside.\n    const previousValue = usePrevious(value);\n    if (previousValue !== value) {\n        changeInternalValue(value);\n    }\n\n    // only gets triggered on user interaction.\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        const newValue = event.target.value;\n\n        if (isControlled) {\n            onChange(newValue, event);\n        } else {\n            changeInternalValue(newValue);\n            onChange(newValue, event);\n        }\n    };\n\n    const handleAccept = (newValue: string, maskRef: any, _event?: InputEvent) => {\n        if (!internalMaskRef.current) {\n            return;\n        }\n\n        // Simulate a ChangeEvent for backwards compatibility since react-imask does not return a change event itself\n        const syntheticEvent = {\n            target: internalMaskRef.current,\n            currentTarget: internalMaskRef.current,\n            // Standard synthetic event props\n            bubbles: true,\n            cancelable: true,\n            defaultPrevented: false,\n            isTrusted: true,\n            preventDefault: () => {},\n            stopPropagation: () => {},\n            persist: () => {},\n            nativeEvent: {} as any,\n            type: 'change',\n            timeStamp: Date.now(),\n        } as unknown as React.ChangeEvent<HTMLInputElement>;\n\n        // Set unmasked value manually if needed\n        // (you can use data-attributes or attach it directly)\n        (syntheticEvent.target as any).unmaskedValue = maskRef.unmaskedValue;\n\n        if (isControlled) {\n            onChange(newValue, syntheticEvent);\n        } else {\n            changeInternalValue(newValue);\n            onChange(newValue, syntheticEvent);\n        }\n    };\n\n    const handleInputFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n        setIsFocused(true);\n        onFocus(event);\n    };\n\n    const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n        setIsFocused(false);\n        onBlur(event);\n    };\n\n    // Will be triggered on every key press but also when pressing 'Enter' for example\n    const handleKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        onKeyPress(event);\n    };\n\n    const clearInputValue = (event: React.MouseEvent<HTMLSpanElement>) => {\n        changeInternalValue('');\n        onChange('', event);\n\n        if (onClear) {\n            onClear(event);\n        }\n    };\n\n    const classes = classNames(\n        'ClearableInput',\n        'input-group',\n        hasError && 'has-error',\n        disabled && 'pointer-events-none',\n        className && className\n    );\n\n    const inputClassNames = classNames(\n        'form-control',\n        inputClassName,\n        showClear && 'withClearButton',\n        hasMask && 'withInputMask',\n        disabled && 'disabled'\n    );\n\n    const clearButtonClassNames = classNames('clearButton', !showClear && 'hide');\n\n    const convertedType = type?.toLowerCase();\n    const inputType = SUPPORTED_TYPES.indexOf(convertedType) !== -1 ? convertedType : DEFAULT_TYPE;\n\n    const inputProps = {\n        ...omit(remainingProps, ['value', 'defaultValue', 'onClear']),\n        className: inputClassNames,\n        autoComplete,\n        type: inputType,\n        value: inputValue,\n        onKeyPress: handleKeyPress,\n        onBlur: handleInputBlur,\n        onFocus: handleInputFocus,\n        onChange: hasMask ? undefined : handleChange, // In case of masked input, the onAccept callback is used\n        onClick,\n        disabled,\n        maxLength: hasMask ? undefined : maxLength,\n        tabIndex,\n    } as any;\n\n    // The dispatch function may not be an empty function. Specify it when\n    // using dynamic masking and need more control over which mask gets selected\n    const maskDispatchObj: any = {};\n    if (maskDispatch) {\n        maskDispatchObj.dispatch = maskDispatch;\n    }\n\n    const input = hasMask ? (\n        <IMaskInput\n            {...inputProps}\n            inputRef={mergedInternalMaskRef}\n            mask={mask}\n            definitions={maskDefinitions}\n            {...maskDispatchObj}\n            placeholderChar={maskPlaceholder}\n            onAccept={handleAccept}\n            lazy={!shouldShowMask()}\n            overwrite={maskOverwrite}\n        />\n    ) : (\n        <input {...inputProps} ref={inputRef || ref} />\n    );\n\n    return (\n        <div className={classes}>\n            {children && isFunction(children) ? children(inputProps) : input}\n            <span className={clearButtonClassNames} onClick={clearInputValue}>\n                <span className='clearButtonIcon rioglyph rioglyph-remove-sign' />\n            </span>\n        </div>\n    );\n});\n\nexport default ClearableInput;\n"],"names":["DEFAULT_TYPE","SUPPORTED_TYPES","hasValue","value","isEmpty","ClearableInput","forwardRef","props","ref","type","defaultValue","maxLength","tabIndex","hasError","inputRef","autoComplete","onChange","noop","onBlur","onFocus","onClear","onKeyPress","onClick","mask","maskPlaceholder","maskVisibility","maskOverwrite","maskDefinitions","maskDispatch","inputClassName","disabled","className","children","remainingProps","initialValue","inputValue","setInputValue","useState","showClear","setShowClear","isFocused","setIsFocused","isControlled","isNil","internalMaskRef","useRef","mergedInternalMaskRef","useMergeRefs","hasMask","shouldShowMask","changeInternalValue","newValue","usePrevious","handleChange","event","handleAccept","maskRef","_event","syntheticEvent","handleInputFocus","handleInputBlur","handleKeyPress","clearInputValue","classes","classNames","inputClassNames","clearButtonClassNames","convertedType","inputType","inputProps","omit","maskDispatchObj","input","jsx","IMaskInput","jsxs","isFunction"],"mappings":"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"}

package/components/dataTabs/DataTabHeader.js

@@ -1,6 +1,6 @@
 import { jsxs as f, jsx as p } from "react/jsx-runtime";
 import { useState as T } from "react";
-import H from "classnames";
+import H from "../../utils/classNames.js";
 const $ = (o) => {
   const {
     tabKey: s,

package/components/dataTabs/DataTabHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTabHeader.js","sources":["../../../src/components/dataTabs/DataTabHeader.tsx"],"sourcesContent":["import type React from 'react';\nimport { useState } from 'react';\nimport classNames from 'classnames';\n\nexport type DataTabHeaderProps = {\n    isActive?: boolean;\n    tabKey: string;\n    title: React.ReactNode;\n    onSelectTab?: (event: React.MouseEvent<HTMLLIElement>) => void;\n    isFirstTab?: boolean;\n    isLastTab?: boolean;\n    tabFirstChildClassName?: string;\n    tabLastChildClassName?: string;\n    tabClassName?: string;\n    tabHoverClassName?: string;\n    tabActiveClassName?: string;\n    arrowClassName?: string;\n    className?: string;\n};\n\nconst DataTabHeader = (props: DataTabHeaderProps) => {\n    const {\n        tabKey,\n        title,\n        isActive,\n        isFirstTab,\n        isLastTab,\n        onSelectTab,\n        tabFirstChildClassName,\n        tabLastChildClassName,\n        tabClassName,\n        tabHoverClassName,\n        tabActiveClassName,\n        arrowClassName,\n        className,\n    } = props;\n\n    const [isHovering, setIsHovering] = useState(false);\n\n    const tabClassNames = classNames(\n        'DataTab',\n        'tab',\n        isFirstTab && tabFirstChildClassName,\n        isLastTab && tabLastChildClassName,\n        !isHovering && !isActive && tabClassName,\n        isHovering && !isActive && tabHoverClassName,\n        isActive && `active ${tabActiveClassName}`,\n        !isActive && 'cursor-pointer',\n        className && className\n    );\n\n    return (\n        <li\n            key={tabKey}\n            className={tabClassNames}\n            onClick={onSelectTab}\n            data-tabkey={tabKey}\n            onMouseEnter={() => setIsHovering(true)}\n            onMouseLeave={() => setIsHovering(false)}\n        >\n            {title}\n            <div className={`arrow ${arrowClassName} ${isActive ? 'in' : ''}`} />\n        </li>\n    );\n};\n\nexport default DataTabHeader;\n"],"names":["DataTabHeader","props","tabKey","title","isActive","isFirstTab","isLastTab","onSelectTab","tabFirstChildClassName","tabLastChildClassName","tabClassName","tabHoverClassName","tabActiveClassName","arrowClassName","className","isHovering","setIsHovering","useState","tabClassNames","classNames","jsxs","jsx"],"mappings":";;;AAoBA,MAAMA,IAAgB,CAACC,MAA8B;AACjD,QAAM;AAAA,IACF,QAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,YAAAC;AAAA,IACA,WAAAC;AAAA,IACA,aAAAC;AAAA,IACA,wBAAAC;AAAA,IACA,uBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,WAAAC;AAAA,EAAA,IACAb,GAEE,CAACc,GAAYC,CAAa,IAAIC,EAAS,EAAK,GAE5CC,IAAgBC;AAAA,IAClB;AAAA,IACA;AAAA,IACAd,KAAcG;AAAA,IACdF,KAAaG;AAAA,IACb,CAACM,KAAc,CAACX,KAAYM;AAAA,IAC5BK,KAAc,CAACX,KAAYO;AAAA,IAC3BP,KAAY,UAAUQ,CAAkB;AAAA,IACxC,CAACR,KAAY;AAAA,IACbU,KAAaA;AAAA,EAAA;AAGjB,SACI,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MAEG,WAAWF;AAAA,MACX,SAASX;AAAA,MACT,eAAaL;AAAA,MACb,cAAc,MAAMc,EAAc,EAAI;AAAA,MACtC,cAAc,MAAMA,EAAc,EAAK;AAAA,MAEtC,UAAA;AAAA,QAAAb;AAAA,QACD,gBAAAkB,EAAC,SAAI,WAAW,SAASR,CAAc,IAAIT,IAAW,OAAO,EAAE,GAAA,CAAI;AAAA,MAAA;AAAA,IAAA;AAAA,IAR9DF;AAAA,EAAA;AAWjB;"}
+{"version":3,"file":"DataTabHeader.js","sources":["../../../src/components/dataTabs/DataTabHeader.tsx"],"sourcesContent":["import type React from 'react';\nimport { useState } from 'react';\n\nimport classNames from '../../utils/classNames';\n\nexport type DataTabHeaderProps = {\n    isActive?: boolean;\n    tabKey: string;\n    title: React.ReactNode;\n    onSelectTab?: (event: React.MouseEvent<HTMLLIElement>) => void;\n    isFirstTab?: boolean;\n    isLastTab?: boolean;\n    tabFirstChildClassName?: string;\n    tabLastChildClassName?: string;\n    tabClassName?: string;\n    tabHoverClassName?: string;\n    tabActiveClassName?: string;\n    arrowClassName?: string;\n    className?: string;\n};\n\nconst DataTabHeader = (props: DataTabHeaderProps) => {\n    const {\n        tabKey,\n        title,\n        isActive,\n        isFirstTab,\n        isLastTab,\n        onSelectTab,\n        tabFirstChildClassName,\n        tabLastChildClassName,\n        tabClassName,\n        tabHoverClassName,\n        tabActiveClassName,\n        arrowClassName,\n        className,\n    } = props;\n\n    const [isHovering, setIsHovering] = useState(false);\n\n    const tabClassNames = classNames(\n        'DataTab',\n        'tab',\n        isFirstTab && tabFirstChildClassName,\n        isLastTab && tabLastChildClassName,\n        !isHovering && !isActive && tabClassName,\n        isHovering && !isActive && tabHoverClassName,\n        isActive && `active ${tabActiveClassName}`,\n        !isActive && 'cursor-pointer',\n        className && className\n    );\n\n    return (\n        <li\n            key={tabKey}\n            className={tabClassNames}\n            onClick={onSelectTab}\n            data-tabkey={tabKey}\n            onMouseEnter={() => setIsHovering(true)}\n            onMouseLeave={() => setIsHovering(false)}\n        >\n            {title}\n            <div className={`arrow ${arrowClassName} ${isActive ? 'in' : ''}`} />\n        </li>\n    );\n};\n\nexport default DataTabHeader;\n"],"names":["DataTabHeader","props","tabKey","title","isActive","isFirstTab","isLastTab","onSelectTab","tabFirstChildClassName","tabLastChildClassName","tabClassName","tabHoverClassName","tabActiveClassName","arrowClassName","className","isHovering","setIsHovering","useState","tabClassNames","classNames","jsxs","jsx"],"mappings":";;;AAqBA,MAAMA,IAAgB,CAACC,MAA8B;AACjD,QAAM;AAAA,IACF,QAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,YAAAC;AAAA,IACA,WAAAC;AAAA,IACA,aAAAC;AAAA,IACA,wBAAAC;AAAA,IACA,uBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,WAAAC;AAAA,EAAA,IACAb,GAEE,CAACc,GAAYC,CAAa,IAAIC,EAAS,EAAK,GAE5CC,IAAgBC;AAAA,IAClB;AAAA,IACA;AAAA,IACAd,KAAcG;AAAA,IACdF,KAAaG;AAAA,IACb,CAACM,KAAc,CAACX,KAAYM;AAAA,IAC5BK,KAAc,CAACX,KAAYO;AAAA,IAC3BP,KAAY,UAAUQ,CAAkB;AAAA,IACxC,CAACR,KAAY;AAAA,IACbU,KAAaA;AAAA,EAAA;AAGjB,SACI,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MAEG,WAAWF;AAAA,MACX,SAASX;AAAA,MACT,eAAaL;AAAA,MACb,cAAc,MAAMc,EAAc,EAAI;AAAA,MACtC,cAAc,MAAMA,EAAc,EAAK;AAAA,MAEtC,UAAA;AAAA,QAAAb;AAAA,QACD,gBAAAkB,EAAC,SAAI,WAAW,SAASR,CAAc,IAAIT,IAAW,OAAO,EAAE,GAAA,CAAI;AAAA,MAAA;AAAA,IAAA;AAAA,IAR9DF;AAAA,EAAA;AAWjB;"}

package/components/dataTabs/DataTabs.js

@@ -1,7 +1,7 @@
 import { jsxs as j, jsx as n } from "react/jsx-runtime";
 import r, { useState as m } from "react";
-import E from "classnames";
-import { AnimatePresence as H } from "motion/react";
+import { AnimatePresence as E } from "motion/react";
+import H from "../../utils/classNames.js";
 import I from "./DataTabHeader.js";
 const W = (i) => {
   const [a] = i;
@@ -32,7 +32,7 @@ const W = (i) => {
   a !== w && (a && D(a), x(a));
   const k = (t) => {
     C(t.currentTarget?.getAttribute("data-tabkey"));
-  }, S = E(
+  }, S = H(
     "DataTabsContainer",
     d && "DataTab-bordered",
     p,
@@ -44,7 +44,7 @@ const W = (i) => {
         disableTransition: l
       }) : null);
     const t = r.Children.toArray(s).filter((e) => e.props.tabKey === o).map((e) => r.cloneElement(e, { active: !0, disableTransition: l }));
-    return /* @__PURE__ */ n(H, { initial: !1, mode: "wait", children: t });
+    return /* @__PURE__ */ n(E, { initial: !1, mode: "wait", children: t });
   };
   return /* @__PURE__ */ j("div", { ...K, className: S, children: [
     /* @__PURE__ */ n("div", { className: `DataTabsWrapper ${y}`, children: /* @__PURE__ */ n("ul", { className: "DataTabs", role: "tabList", children: r.Children.map(s, (t, e) => {

package/components/dataTabs/DataTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTabs.js","sources":["../../../src/components/dataTabs/DataTabs.tsx"],"sourcesContent":["import React, { type PropsWithChildren, useState } from 'react';\nimport classNames from 'classnames';\nimport { AnimatePresence } from 'motion/react';\n\nimport type { DataTabProps } from './DataTab';\nimport DataTabHeader from './DataTabHeader';\n\ntype DataTabElement = React.ReactElement<DataTabProps>;\n\nconst getFirstTabKey = (children: React.ReactNode): string => {\n    const [firstItem] = children as DataTabElement[];\n    return firstItem?.props.tabKey;\n};\n\nexport type DataTabsProps = {\n    /**\n     * Sets key and id.\n     *\n     * @default ''\n     */\n    activeKey?: string;\n\n    /**\n     * Whether the component should add a border.\n     *\n     * @default true\n     */\n    bordered?: boolean;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n\n    /**\n     * Tab content that is used for all tabs.\n     *\n     * Using a common tab content will ignore any DataTab child. Additionally, there will be no transition when\n     * switching tabs as it is a single tab content component.\n     */\n    commonTabContent?: React.ReactNode;\n\n    /**\n     * Transitions between tab contents are enabled by default. Set if you want to disable them.\n     *\n     * The Navigation tabs will still remain animated.\n     *\n     * @default false\n     */\n    disableTransition?: boolean;\n\n    /**\n     * Additional classes to be set on the arrow.\n     *\n     * @default 'bg-highlight-dark border-color-transparent'\n     */\n    arrowClassName?: string;\n\n    /**\n     * Called when a tab is being activated.\n     *\n     * @param tabKey Of the activated tab.\n     */\n    onSelectTab?: (tabKey: string) => void;\n\n    /**\n     * Additional classes to be set on the tab element.\n     */\n    tabClassName?: string;\n\n    /**\n     * Utility hover classes to be set on the tab element.\n     *\n     * @default 'bg-highlight-decent text-color-darkest'\n     */\n    tabHoverClassName?: string;\n\n    /**\n     * Utility active classes to be set on the tab element.\n     *\n     * @default 'bg-highlight-dark text-color-white'\n     */\n    tabActiveClassName?: string;\n\n    /**\n     * Utility first-child classes to be set on the tab element.\n     */\n    tabFirstChildClassName?: string;\n\n    /**\n     * Utility last-child classes to be set on the tab element.\n     */\n    tabLastChildClassName?: string;\n\n    /**\n     * Utility content classes to be set on the tab element.\n     */\n    tabContentClassName?: string;\n\n    /**\n     * Additional classes to be set on the tabs wrapper element.\n     */\n    tabsWrapperClassName?: string;\n\n    /**\n     * Whether the layout should be vertical.\n     *\n     * @default false\n     */\n    vertical?: boolean;\n};\n\nconst DataTabs = (props: PropsWithChildren<DataTabsProps>) => {\n    const {\n        activeKey = '',\n        bordered = true,\n        className: wrapperClassName,\n        commonTabContent,\n        disableTransition = false,\n        arrowClassName = 'bg-highlight-dark border-color-transparent',\n        onSelectTab = () => {},\n        tabActiveClassName = 'bg-highlight-dark text-color-white',\n        tabClassName = '',\n        tabContentClassName = '',\n        tabFirstChildClassName = '',\n        tabHoverClassName = 'bg-highlight-decent text-color-darkest',\n        tabLastChildClassName = '',\n        tabsWrapperClassName = '',\n        vertical = false,\n        children,\n        ...remainingProps\n    } = props;\n\n    const [internalActiveKey, setInternalActiveKey] = useState(\n        activeKey || getFirstTabKey(React.Children.toArray(children))\n    );\n\n    // Update internal activeKey when props change\n    const [previousActiveKey, setPreviousActiveKey] = useState(activeKey);\n    if (activeKey !== previousActiveKey) {\n        activeKey && setInternalActiveKey(activeKey);\n        setPreviousActiveKey(activeKey);\n    }\n\n    const handleSelectTab = (event: React.MouseEvent<HTMLLIElement>) => {\n        onSelectTab(event.currentTarget?.getAttribute('data-tabkey') as string);\n    };\n\n    const wrapperClassNames = classNames(\n        'DataTabsContainer',\n        bordered && 'DataTab-bordered',\n        wrapperClassName,\n        vertical ? 'DataTabs-vertical' : 'DataTabs-horizontal'\n    );\n\n    const enrichChildren = () => {\n        if (disableTransition) {\n            return React.Children.map(children as DataTabElement[], child => {\n                if (!child) {\n                    return null;\n                }\n                return React.cloneElement(child, {\n                    active: child.props.tabKey === internalActiveKey,\n                    disableTransition,\n                });\n            });\n        }\n\n        const enhancedChildren = (React.Children.toArray(children) as DataTabElement[])\n            .filter(child => child.props.tabKey === internalActiveKey)\n            .map(child => React.cloneElement(child, { active: true, disableTransition }));\n\n        return (\n            <AnimatePresence initial={false} mode='wait'>\n                {enhancedChildren}\n            </AnimatePresence>\n        );\n    };\n\n    return (\n        <div {...remainingProps} className={wrapperClassNames}>\n            <div className={`DataTabsWrapper ${tabsWrapperClassName}`}>\n                <ul className='DataTabs' role='tabList'>\n                    {React.Children.map(children as DataTabElement[], (child, index) => {\n                        if (!child) {\n                            return null;\n                        }\n\n                        const { tabKey, title, className } = child.props;\n\n                        return (\n                            <DataTabHeader\n                                isActive={tabKey === internalActiveKey}\n                                tabKey={tabKey}\n                                title={title}\n                                onSelectTab={handleSelectTab}\n                                isFirstTab={index === 0}\n                                isLastTab={!!((children as DataTabElement[])?.length - 1)}\n                                tabFirstChildClassName={tabFirstChildClassName}\n                                tabLastChildClassName={tabLastChildClassName}\n                                tabActiveClassName={tabActiveClassName}\n                                tabClassName={tabClassName}\n                                tabHoverClassName={tabHoverClassName}\n                                arrowClassName={arrowClassName}\n                                className={className}\n                            />\n                        );\n                    })}\n                </ul>\n            </div>\n            <div className={`tab-content ${tabContentClassName}`} role='tabpanel'>\n                {commonTabContent ? commonTabContent : enrichChildren()}\n            </div>\n        </div>\n    );\n};\n\nexport default DataTabs;\n"],"names":["getFirstTabKey","children","firstItem","DataTabs","props","activeKey","bordered","wrapperClassName","commonTabContent","disableTransition","arrowClassName","onSelectTab","tabActiveClassName","tabClassName","tabContentClassName","tabFirstChildClassName","tabHoverClassName","tabLastChildClassName","tabsWrapperClassName","vertical","remainingProps","internalActiveKey","setInternalActiveKey","useState","React","previousActiveKey","setPreviousActiveKey","handleSelectTab","event","wrapperClassNames","classNames","enrichChildren","child","enhancedChildren","AnimatePresence","jsxs","jsx","index","tabKey","title","className","DataTabHeader"],"mappings":";;;;;AASA,MAAMA,IAAiB,CAACC,MAAsC;AAC1D,QAAM,CAACC,CAAS,IAAID;AACpB,SAAOC,GAAW,MAAM;AAC5B,GAoGMC,IAAW,CAACC,MAA4C;AAC1D,QAAM;AAAA,IACF,WAAAC,IAAY;AAAA,IACZ,UAAAC,IAAW;AAAA,IACX,WAAWC;AAAA,IACX,kBAAAC;AAAA,IACA,mBAAAC,IAAoB;AAAA,IACpB,gBAAAC,IAAiB;AAAA,IACjB,aAAAC,IAAc,MAAM;AAAA,IAAC;AAAA,IACrB,oBAAAC,IAAqB;AAAA,IACrB,cAAAC,IAAe;AAAA,IACf,qBAAAC,IAAsB;AAAA,IACtB,wBAAAC,IAAyB;AAAA,IACzB,mBAAAC,IAAoB;AAAA,IACpB,uBAAAC,IAAwB;AAAA,IACxB,sBAAAC,IAAuB;AAAA,IACvB,UAAAC,IAAW;AAAA,IACX,UAAAlB;AAAA,IACA,GAAGmB;AAAA,EAAA,IACHhB,GAEE,CAACiB,GAAmBC,CAAoB,IAAIC;AAAA,IAC9ClB,KAAaL,EAAewB,EAAM,SAAS,QAAQvB,CAAQ,CAAC;AAAA,EAAA,GAI1D,CAACwB,GAAmBC,CAAoB,IAAIH,EAASlB,CAAS;AACpE,EAAIA,MAAcoB,MACdpB,KAAaiB,EAAqBjB,CAAS,GAC3CqB,EAAqBrB,CAAS;AAGlC,QAAMsB,IAAkB,CAACC,MAA2C;AAChE,IAAAjB,EAAYiB,EAAM,eAAe,aAAa,aAAa,CAAW;AAAA,EAC1E,GAEMC,IAAoBC;AAAA,IACtB;AAAA,IACAxB,KAAY;AAAA,IACZC;AAAA,IACAY,IAAW,sBAAsB;AAAA,EAAA,GAG/BY,IAAiB,MAAM;AACzB,QAAItB;AACA,aAAOe,EAAM,SAAS,IAAIvB,GAA8B,CAAA+B,MAC/CA,IAGER,EAAM,aAAaQ,GAAO;AAAA,QAC7B,QAAQA,EAAM,MAAM,WAAWX;AAAA,QAC/B,mBAAAZ;AAAA,MAAA,CACH,IALU,IAMd;AAGL,UAAMwB,IAAoBT,EAAM,SAAS,QAAQvB,CAAQ,EACpD,OAAO,CAAA+B,MAASA,EAAM,MAAM,WAAWX,CAAiB,EACxD,IAAI,CAAAW,MAASR,EAAM,aAAaQ,GAAO,EAAE,QAAQ,IAAM,mBAAAvB,EAAA,CAAmB,CAAC;AAEhF,6BACKyB,GAAA,EAAgB,SAAS,IAAO,MAAK,QACjC,UAAAD,GACL;AAAA,EAER;AAEA,SACI,gBAAAE,EAAC,OAAA,EAAK,GAAGf,GAAgB,WAAWS,GAChC,UAAA;AAAA,IAAA,gBAAAO,EAAC,SAAI,WAAW,mBAAmBlB,CAAoB,IACnD,4BAAC,MAAA,EAAG,WAAU,YAAW,MAAK,WACzB,UAAAM,EAAM,SAAS,IAAIvB,GAA8B,CAAC+B,GAAOK,MAAU;AAChE,UAAI,CAACL;AACD,eAAO;AAGX,YAAM,EAAE,QAAAM,GAAQ,OAAAC,GAAO,WAAAC,EAAA,IAAcR,EAAM;AAE3C,aACI,gBAAAI;AAAA,QAACK;AAAA,QAAA;AAAA,UACG,UAAUH,MAAWjB;AAAA,UACrB,QAAAiB;AAAA,UACA,OAAAC;AAAA,UACA,aAAaZ;AAAA,UACb,YAAYU,MAAU;AAAA,UACtB,WAAW,CAAC,EAAGpC,GAA+B,SAAS;AAAA,UACvD,wBAAAc;AAAA,UACA,uBAAAE;AAAA,UACA,oBAAAL;AAAA,UACA,cAAAC;AAAA,UACA,mBAAAG;AAAA,UACA,gBAAAN;AAAA,UACA,WAAA8B;AAAA,QAAA;AAAA,MAAA;AAAA,IAGZ,CAAC,GACL,GACJ;AAAA,IACA,gBAAAJ,EAAC,OAAA,EAAI,WAAW,eAAetB,CAAmB,IAAI,MAAK,YACtD,UAAAN,KAAsCuB,EAAA,EAAe,CAC1D;AAAA,EAAA,GACJ;AAER;"}
+{"version":3,"file":"DataTabs.js","sources":["../../../src/components/dataTabs/DataTabs.tsx"],"sourcesContent":["import React, { type PropsWithChildren, useState } from 'react';\nimport { AnimatePresence } from 'motion/react';\n\nimport classNames from '../../utils/classNames';\nimport type { DataTabProps } from './DataTab';\nimport DataTabHeader from './DataTabHeader';\n\ntype DataTabElement = React.ReactElement<DataTabProps>;\n\nconst getFirstTabKey = (children: React.ReactNode): string => {\n    const [firstItem] = children as DataTabElement[];\n    return firstItem?.props.tabKey;\n};\n\nexport type DataTabsProps = {\n    /**\n     * Sets key and id.\n     *\n     * @default ''\n     */\n    activeKey?: string;\n\n    /**\n     * Whether the component should add a border.\n     *\n     * @default true\n     */\n    bordered?: boolean;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n\n    /**\n     * Tab content that is used for all tabs.\n     *\n     * Using a common tab content will ignore any DataTab child. Additionally, there will be no transition when\n     * switching tabs as it is a single tab content component.\n     */\n    commonTabContent?: React.ReactNode;\n\n    /**\n     * Transitions between tab contents are enabled by default. Set if you want to disable them.\n     *\n     * The Navigation tabs will still remain animated.\n     *\n     * @default false\n     */\n    disableTransition?: boolean;\n\n    /**\n     * Additional classes to be set on the arrow.\n     *\n     * @default 'bg-highlight-dark border-color-transparent'\n     */\n    arrowClassName?: string;\n\n    /**\n     * Called when a tab is being activated.\n     *\n     * @param tabKey Of the activated tab.\n     */\n    onSelectTab?: (tabKey: string) => void;\n\n    /**\n     * Additional classes to be set on the tab element.\n     */\n    tabClassName?: string;\n\n    /**\n     * Utility hover classes to be set on the tab element.\n     *\n     * @default 'bg-highlight-decent text-color-darkest'\n     */\n    tabHoverClassName?: string;\n\n    /**\n     * Utility active classes to be set on the tab element.\n     *\n     * @default 'bg-highlight-dark text-color-white'\n     */\n    tabActiveClassName?: string;\n\n    /**\n     * Utility first-child classes to be set on the tab element.\n     */\n    tabFirstChildClassName?: string;\n\n    /**\n     * Utility last-child classes to be set on the tab element.\n     */\n    tabLastChildClassName?: string;\n\n    /**\n     * Utility content classes to be set on the tab element.\n     */\n    tabContentClassName?: string;\n\n    /**\n     * Additional classes to be set on the tabs wrapper element.\n     */\n    tabsWrapperClassName?: string;\n\n    /**\n     * Whether the layout should be vertical.\n     *\n     * @default false\n     */\n    vertical?: boolean;\n};\n\nconst DataTabs = (props: PropsWithChildren<DataTabsProps>) => {\n    const {\n        activeKey = '',\n        bordered = true,\n        className: wrapperClassName,\n        commonTabContent,\n        disableTransition = false,\n        arrowClassName = 'bg-highlight-dark border-color-transparent',\n        onSelectTab = () => {},\n        tabActiveClassName = 'bg-highlight-dark text-color-white',\n        tabClassName = '',\n        tabContentClassName = '',\n        tabFirstChildClassName = '',\n        tabHoverClassName = 'bg-highlight-decent text-color-darkest',\n        tabLastChildClassName = '',\n        tabsWrapperClassName = '',\n        vertical = false,\n        children,\n        ...remainingProps\n    } = props;\n\n    const [internalActiveKey, setInternalActiveKey] = useState(\n        activeKey || getFirstTabKey(React.Children.toArray(children))\n    );\n\n    // Update internal activeKey when props change\n    const [previousActiveKey, setPreviousActiveKey] = useState(activeKey);\n    if (activeKey !== previousActiveKey) {\n        activeKey && setInternalActiveKey(activeKey);\n        setPreviousActiveKey(activeKey);\n    }\n\n    const handleSelectTab = (event: React.MouseEvent<HTMLLIElement>) => {\n        onSelectTab(event.currentTarget?.getAttribute('data-tabkey') as string);\n    };\n\n    const wrapperClassNames = classNames(\n        'DataTabsContainer',\n        bordered && 'DataTab-bordered',\n        wrapperClassName,\n        vertical ? 'DataTabs-vertical' : 'DataTabs-horizontal'\n    );\n\n    const enrichChildren = () => {\n        if (disableTransition) {\n            return React.Children.map(children as DataTabElement[], child => {\n                if (!child) {\n                    return null;\n                }\n                return React.cloneElement(child, {\n                    active: child.props.tabKey === internalActiveKey,\n                    disableTransition,\n                });\n            });\n        }\n\n        const enhancedChildren = (React.Children.toArray(children) as DataTabElement[])\n            .filter(child => child.props.tabKey === internalActiveKey)\n            .map(child => React.cloneElement(child, { active: true, disableTransition }));\n\n        return (\n            <AnimatePresence initial={false} mode='wait'>\n                {enhancedChildren}\n            </AnimatePresence>\n        );\n    };\n\n    return (\n        <div {...remainingProps} className={wrapperClassNames}>\n            <div className={`DataTabsWrapper ${tabsWrapperClassName}`}>\n                <ul className='DataTabs' role='tabList'>\n                    {React.Children.map(children as DataTabElement[], (child, index) => {\n                        if (!child) {\n                            return null;\n                        }\n\n                        const { tabKey, title, className } = child.props;\n\n                        return (\n                            <DataTabHeader\n                                isActive={tabKey === internalActiveKey}\n                                tabKey={tabKey}\n                                title={title}\n                                onSelectTab={handleSelectTab}\n                                isFirstTab={index === 0}\n                                isLastTab={!!((children as DataTabElement[])?.length - 1)}\n                                tabFirstChildClassName={tabFirstChildClassName}\n                                tabLastChildClassName={tabLastChildClassName}\n                                tabActiveClassName={tabActiveClassName}\n                                tabClassName={tabClassName}\n                                tabHoverClassName={tabHoverClassName}\n                                arrowClassName={arrowClassName}\n                                className={className}\n                            />\n                        );\n                    })}\n                </ul>\n            </div>\n            <div className={`tab-content ${tabContentClassName}`} role='tabpanel'>\n                {commonTabContent ? commonTabContent : enrichChildren()}\n            </div>\n        </div>\n    );\n};\n\nexport default DataTabs;\n"],"names":["getFirstTabKey","children","firstItem","DataTabs","props","activeKey","bordered","wrapperClassName","commonTabContent","disableTransition","arrowClassName","onSelectTab","tabActiveClassName","tabClassName","tabContentClassName","tabFirstChildClassName","tabHoverClassName","tabLastChildClassName","tabsWrapperClassName","vertical","remainingProps","internalActiveKey","setInternalActiveKey","useState","React","previousActiveKey","setPreviousActiveKey","handleSelectTab","event","wrapperClassNames","classNames","enrichChildren","child","enhancedChildren","AnimatePresence","jsxs","jsx","index","tabKey","title","className","DataTabHeader"],"mappings":"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"}

package/components/datepicker/DatePicker.js

@@ -1,16 +1,16 @@
 import { jsx as C } from "react/jsx-runtime";
 import { forwardRef as L, useState as N } from "react";
-import O from "classnames";
 import o from "react-datetime";
-import { noop as A } from "es-toolkit/function";
-const _ = o?.default ? o.default : o, k = "en-GB", x = 0, U = L((s, y) => {
+import { noop as O } from "es-toolkit/function";
+import _ from "../../utils/classNames.js";
+const A = o?.default ? o.default : o, k = "en-GB", x = 0, U = L((s, y) => {
   const {
     id: n,
     dropup: c = !1,
     alignRight: i = !1,
     locale: l = k,
     minWidth: p = x,
-    onChange: m = A,
+    onChange: m = O,
     mandatory: f = !0,
     dateValidation: r,
     clearableInput: u = !1,
@@ -21,7 +21,7 @@ const _ = o?.default ? o.default : o, k = "en-GB", x = 0, U = L((s, y) => {
   } = s, [g, P] = N(!1), E = (t) => r ? r(t) : typeof t == "object", I = (t) => {
     const e = f ? E(t) : !0;
     P(!e), m(t, e);
-  }, b = O(
+  }, b = _(
     "DatePicker",
     "form-group",
     g && "has-error",
@@ -30,7 +30,7 @@ const _ = o?.default ? o.default : o, k = "en-GB", x = 0, U = L((s, y) => {
     a && a
   ), j = { id: n, ...h };
   return /* @__PURE__ */ C(
-    _,
+    A,
     {
       ...D,
       locale: l,

package/components/datepicker/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","sources":["../../../src/components/datepicker/DatePicker.tsx"],"sourcesContent":["import type React from 'react';\nimport { useState, forwardRef } from 'react';\nimport classNames from 'classnames';\nimport type { Moment } from 'moment';\nimport DatetimeImport, { type DatetimepickerProps } from 'react-datetime';\nimport { noop } from 'es-toolkit/function';\n\n// Fix: Handle ESM/CJS interop by unwrapping default if necessary\n// @ts-expect-error\nconst Datetime = DatetimeImport?.default ? DatetimeImport.default : DatetimeImport;\n\nconst DEFAULT_LOCALE = 'en-GB';\nconst DEFAULT_MIN_WIDTH = 0;\n\nexport type DatePickerProps = Omit<DatetimepickerProps, 'onChange' | 'initialValue'> & {\n    /**\n     * An id used for the internal input element.\n     */\n    id?: string;\n\n    /**\n     * The moment locale to be used for the date picker.\n     * Make sure to import the respective moment locale files.\n     *\n     * @default 'en-GB'\n     * @example import 'moment/dist/locale/de';\n     */\n    locale?: string;\n\n    /**\n     * Once the day has been selected, the date picker will be closed automatically.\n     *\n     * @default true\n     */\n    closeOnSelect?: boolean;\n\n    /**\n     * Default value of the DatePicker (date or moment).\n     */\n    initialValue?: Date | Moment;\n\n    /**\n     * Value of the DatePicker (date or moment). Use this only if you want to use\n     * this component as a controlled component\n     */\n    value?: Date | string | Moment;\n\n    /*\n     * Defines the format for the date. It accepts any moment.js date format.\n     * If true the date will be displayed using the defaults for the current locale.\n     * If false the date picker is disabled and the component can be used as time picker.\n     */\n    dateFormat?: boolean | string;\n\n    /*\n     * Defines the format for the time. It accepts any moment.js time format.\n     * If true the time will be displayed using the defaults for the current locale.\n     * If false the time picker is disabled and the component can be used as date picker.\n     */\n    timeFormat?: boolean | string;\n\n    /*\n     * Defines additional attributes for the input element of the component.\n     */\n    inputProps?: React.HTMLProps<HTMLInputElement>;\n\n    /**\n     * Defines whether the dropdown opens upwards or not.\n     *\n     * @default false\n     */\n    dropup?: boolean;\n\n    /**\n     * Opens the picker right aligned.\n     *\n     * @default false\n     */\n\n    alignRight?: boolean;\n\n    /**\n     * Defines whether the clearableInput button is shown.\n     *\n     * @default false\n     */\n    clearableInput?: boolean;\n\n    /**\n     * Optional min-width value (without px). Since the DatePicker has a max-width of 100%\n     * you can also set a high minWidth number to use 100% with of the parent element.\n     * A value of \"0\" means no extra width is set and it becomes 100% width of the parent.\n     *\n     * @default 0\n     */\n    minWidth?: number;\n\n    /**\n     * Callback function when the value changes. Receives the new date (moment)\n     * and a boolean (whether date is valid or not) as arguments.\n     *\n     * @param value\n     * @param isValid\n     * @returns\n     */\n    onChange?: (value: Moment | string, isValid: boolean) => void;\n\n    /**\n     * Defines whether the input shows an error when the date is invalid or cleared.\n     *\n     * @default true\n     */\n    mandatory?: boolean;\n\n    /**\n     * Overwrites the internal date validation function in case you need to customize it.\n     *\n     * @param date\n     * @returns\n     */\n    dateValidation?: (date: Moment | string) => boolean;\n\n    /**\n     * Additional classes to be set on the DatePicker element.\n     */\n    className?: string;\n};\n\nconst DatePicker = forwardRef((props: DatePickerProps, ref) => {\n    const {\n        id,\n        dropup = false,\n        alignRight = false,\n        locale = DEFAULT_LOCALE,\n        minWidth = DEFAULT_MIN_WIDTH,\n        onChange = noop,\n        mandatory = true,\n        dateValidation,\n        clearableInput = false,\n        closeOnSelect = true,\n        inputProps,\n        className,\n        ...remainingProp\n    } = props;\n\n    const [hasError, setHasError] = useState(false);\n\n    const validateDate = (dateToValidate: Moment | string) => {\n        // If the entered date complies with the defined dateFormat, the Datetime component\n        // returns a moment object, otherwise the return value is a string.\n        // Note, using a isValid() function from moment or the Date object itself will result in\n        // different outcome in various browsers.\n        // For instance `new Date('1')` or `moment('1')` are valid dates in Chrome where it defaults\n        // to \"01/01/2001\" whereas in Firefox it is an invalid date.\n        // The solution is to compare the entered value to the date format which is done by React Datetime.\n        const isDateObject = typeof dateToValidate === 'object';\n\n        return dateValidation ? dateValidation(dateToValidate) : isDateObject;\n    };\n\n    const handleChange = (date: Moment | string) => {\n        const isValid = mandatory ? validateDate(date) : true;\n        setHasError(!isValid);\n        onChange(date, isValid);\n    };\n\n    const classes = classNames(\n        'DatePicker',\n        'form-group',\n        hasError && 'has-error',\n        dropup && 'dropup',\n        alignRight && 'align-right',\n        className && className\n    );\n\n    // This way we can expose the \"id\" as top level prop and not as part of the inputProps which\n    // makes the use of the id much more convenient\n    const enhancedInputProps = { id, ...inputProps };\n\n    return (\n        <Datetime\n            // TODO: add support for setting ref to the input. Maybe add a \"inputRef\" prop to react-datetime\n            // ref={ref}\n            {...remainingProp}\n            locale={locale}\n            clearableInput={clearableInput}\n            closeOnSelect={closeOnSelect}\n            onChange={handleChange}\n            minWidth={minWidth}\n            inputProps={enhancedInputProps}\n            className={classes}\n        />\n    );\n});\n\nexport default DatePicker;\n"],"names":["Datetime","DatetimeImport","DEFAULT_LOCALE","DEFAULT_MIN_WIDTH","DatePicker","forwardRef","props","ref","id","dropup","alignRight","locale","minWidth","onChange","noop","mandatory","dateValidation","clearableInput","closeOnSelect","inputProps","className","remainingProp","hasError","setHasError","useState","validateDate","dateToValidate","handleChange","date","isValid","classes","classNames","enhancedInputProps","jsx"],"mappings":";;;;;AASA,MAAMA,IAAWC,GAAgB,UAAUA,EAAe,UAAUA,GAE9DC,IAAiB,SACjBC,IAAoB,GAoHpBC,IAAaC,EAAW,CAACC,GAAwBC,MAAQ;AAC3D,QAAM;AAAA,IACF,IAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,IACT,YAAAC,IAAa;AAAA,IACb,QAAAC,IAAST;AAAA,IACT,UAAAU,IAAWT;AAAA,IACX,UAAAU,IAAWC;AAAA,IACX,WAAAC,IAAY;AAAA,IACZ,gBAAAC;AAAA,IACA,gBAAAC,IAAiB;AAAA,IACjB,eAAAC,IAAgB;AAAA,IAChB,YAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHf,GAEE,CAACgB,GAAUC,CAAW,IAAIC,EAAS,EAAK,GAExCC,IAAe,CAACC,MAUXV,IAAiBA,EAAeU,CAAc,IAFhC,OAAOA,KAAmB,UAK7CC,IAAe,CAACC,MAA0B;AAC5C,UAAMC,IAAUd,IAAYU,EAAaG,CAAI,IAAI;AACjD,IAAAL,EAAY,CAACM,CAAO,GACpBhB,EAASe,GAAMC,CAAO;AAAA,EAC1B,GAEMC,IAAUC;AAAA,IACZ;AAAA,IACA;AAAA,IACAT,KAAY;AAAA,IACZb,KAAU;AAAA,IACVC,KAAc;AAAA,IACdU,KAAaA;AAAA,EAAA,GAKXY,IAAqB,EAAE,IAAAxB,GAAI,GAAGW,EAAA;AAEpC,SACI,gBAAAc;AAAA,IAACjC;AAAA,IAAA;AAAA,MAGI,GAAGqB;AAAA,MACJ,QAAAV;AAAA,MACA,gBAAAM;AAAA,MACA,eAAAC;AAAA,MACA,UAAUS;AAAA,MACV,UAAAf;AAAA,MACA,YAAYoB;AAAA,MACZ,WAAWF;AAAA,IAAA;AAAA,EAAA;AAGvB,CAAC;"}
+{"version":3,"file":"DatePicker.js","sources":["../../../src/components/datepicker/DatePicker.tsx"],"sourcesContent":["import type React from 'react';\nimport { useState, forwardRef } from 'react';\nimport type { Moment } from 'moment';\nimport DatetimeImport, { type DatetimepickerProps } from 'react-datetime';\nimport { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\n\n// Fix: Handle ESM/CJS interop by unwrapping default if necessary\n// @ts-expect-error\nconst Datetime = DatetimeImport?.default ? DatetimeImport.default : DatetimeImport;\n\nconst DEFAULT_LOCALE = 'en-GB';\nconst DEFAULT_MIN_WIDTH = 0;\n\nexport type DatePickerProps = Omit<DatetimepickerProps, 'onChange' | 'initialValue'> & {\n    /**\n     * An id used for the internal input element.\n     */\n    id?: string;\n\n    /**\n     * The moment locale to be used for the date picker.\n     * Make sure to import the respective moment locale files.\n     *\n     * @default 'en-GB'\n     * @example import 'moment/dist/locale/de';\n     */\n    locale?: string;\n\n    /**\n     * Once the day has been selected, the date picker will be closed automatically.\n     *\n     * @default true\n     */\n    closeOnSelect?: boolean;\n\n    /**\n     * Default value of the DatePicker (date or moment).\n     */\n    initialValue?: Date | Moment;\n\n    /**\n     * Value of the DatePicker (date or moment). Use this only if you want to use\n     * this component as a controlled component\n     */\n    value?: Date | string | Moment;\n\n    /*\n     * Defines the format for the date. It accepts any moment.js date format.\n     * If true the date will be displayed using the defaults for the current locale.\n     * If false the date picker is disabled and the component can be used as time picker.\n     */\n    dateFormat?: boolean | string;\n\n    /*\n     * Defines the format for the time. It accepts any moment.js time format.\n     * If true the time will be displayed using the defaults for the current locale.\n     * If false the time picker is disabled and the component can be used as date picker.\n     */\n    timeFormat?: boolean | string;\n\n    /*\n     * Defines additional attributes for the input element of the component.\n     */\n    inputProps?: React.HTMLProps<HTMLInputElement>;\n\n    /**\n     * Defines whether the dropdown opens upwards or not.\n     *\n     * @default false\n     */\n    dropup?: boolean;\n\n    /**\n     * Opens the picker right aligned.\n     *\n     * @default false\n     */\n\n    alignRight?: boolean;\n\n    /**\n     * Defines whether the clearableInput button is shown.\n     *\n     * @default false\n     */\n    clearableInput?: boolean;\n\n    /**\n     * Optional min-width value (without px). Since the DatePicker has a max-width of 100%\n     * you can also set a high minWidth number to use 100% with of the parent element.\n     * A value of \"0\" means no extra width is set and it becomes 100% width of the parent.\n     *\n     * @default 0\n     */\n    minWidth?: number;\n\n    /**\n     * Callback function when the value changes. Receives the new date (moment)\n     * and a boolean (whether date is valid or not) as arguments.\n     *\n     * @param value\n     * @param isValid\n     * @returns\n     */\n    onChange?: (value: Moment | string, isValid: boolean) => void;\n\n    /**\n     * Defines whether the input shows an error when the date is invalid or cleared.\n     *\n     * @default true\n     */\n    mandatory?: boolean;\n\n    /**\n     * Overwrites the internal date validation function in case you need to customize it.\n     *\n     * @param date\n     * @returns\n     */\n    dateValidation?: (date: Moment | string) => boolean;\n\n    /**\n     * Additional classes to be set on the DatePicker element.\n     */\n    className?: string;\n};\n\nconst DatePicker = forwardRef((props: DatePickerProps, _ref) => {\n    const {\n        id,\n        dropup = false,\n        alignRight = false,\n        locale = DEFAULT_LOCALE,\n        minWidth = DEFAULT_MIN_WIDTH,\n        onChange = noop,\n        mandatory = true,\n        dateValidation,\n        clearableInput = false,\n        closeOnSelect = true,\n        inputProps,\n        className,\n        ...remainingProp\n    } = props;\n\n    const [hasError, setHasError] = useState(false);\n\n    const validateDate = (dateToValidate: Moment | string) => {\n        // If the entered date complies with the defined dateFormat, the Datetime component\n        // returns a moment object, otherwise the return value is a string.\n        // Note, using a isValid() function from moment or the Date object itself will result in\n        // different outcome in various browsers.\n        // For instance `new Date('1')` or `moment('1')` are valid dates in Chrome where it defaults\n        // to \"01/01/2001\" whereas in Firefox it is an invalid date.\n        // The solution is to compare the entered value to the date format which is done by React Datetime.\n        const isDateObject = typeof dateToValidate === 'object';\n\n        return dateValidation ? dateValidation(dateToValidate) : isDateObject;\n    };\n\n    const handleChange = (date: Moment | string) => {\n        const isValid = mandatory ? validateDate(date) : true;\n        setHasError(!isValid);\n        onChange(date, isValid);\n    };\n\n    const classes = classNames(\n        'DatePicker',\n        'form-group',\n        hasError && 'has-error',\n        dropup && 'dropup',\n        alignRight && 'align-right',\n        className && className\n    );\n\n    // This way we can expose the \"id\" as top level prop and not as part of the inputProps which\n    // makes the use of the id much more convenient\n    const enhancedInputProps = { id, ...inputProps };\n\n    return (\n        <Datetime\n            // TODO: add support for setting ref to the input. Maybe add a \"inputRef\" prop to react-datetime\n            // ref={ref}\n            {...remainingProp}\n            locale={locale}\n            clearableInput={clearableInput}\n            closeOnSelect={closeOnSelect}\n            onChange={handleChange}\n            minWidth={minWidth}\n            inputProps={enhancedInputProps}\n            className={classes}\n        />\n    );\n});\n\nexport default DatePicker;\n"],"names":["Datetime","DatetimeImport","DEFAULT_LOCALE","DEFAULT_MIN_WIDTH","DatePicker","forwardRef","props","_ref","id","dropup","alignRight","locale","minWidth","onChange","noop","mandatory","dateValidation","clearableInput","closeOnSelect","inputProps","className","remainingProp","hasError","setHasError","useState","validateDate","dateToValidate","handleChange","date","isValid","classes","classNames","enhancedInputProps","jsx"],"mappings":";;;;;AAUA,MAAMA,IAAWC,GAAgB,UAAUA,EAAe,UAAUA,GAE9DC,IAAiB,SACjBC,IAAoB,GAoHpBC,IAAaC,EAAW,CAACC,GAAwBC,MAAS;AAC5D,QAAM;AAAA,IACF,IAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,IACT,YAAAC,IAAa;AAAA,IACb,QAAAC,IAAST;AAAA,IACT,UAAAU,IAAWT;AAAA,IACX,UAAAU,IAAWC;AAAA,IACX,WAAAC,IAAY;AAAA,IACZ,gBAAAC;AAAA,IACA,gBAAAC,IAAiB;AAAA,IACjB,eAAAC,IAAgB;AAAA,IAChB,YAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHf,GAEE,CAACgB,GAAUC,CAAW,IAAIC,EAAS,EAAK,GAExCC,IAAe,CAACC,MAUXV,IAAiBA,EAAeU,CAAc,IAFhC,OAAOA,KAAmB,UAK7CC,IAAe,CAACC,MAA0B;AAC5C,UAAMC,IAAUd,IAAYU,EAAaG,CAAI,IAAI;AACjD,IAAAL,EAAY,CAACM,CAAO,GACpBhB,EAASe,GAAMC,CAAO;AAAA,EAC1B,GAEMC,IAAUC;AAAA,IACZ;AAAA,IACA;AAAA,IACAT,KAAY;AAAA,IACZb,KAAU;AAAA,IACVC,KAAc;AAAA,IACdU,KAAaA;AAAA,EAAA,GAKXY,IAAqB,EAAE,IAAAxB,GAAI,GAAGW,EAAA;AAEpC,SACI,gBAAAc;AAAA,IAACjC;AAAA,IAAA;AAAA,MAGI,GAAGqB;AAAA,MACJ,QAAAV;AAAA,MACA,gBAAAM;AAAA,MACA,eAAAC;AAAA,MACA,UAAUS;AAAA,MACV,UAAAf;AAAA,MACA,YAAYoB;AAAA,MACZ,WAAWF;AAAA,IAAA;AAAA,EAAA;AAGvB,CAAC;"}

package/components/datepicker/DateRangePicker.js

@@ -3,7 +3,7 @@ import t from "prop-types";
 import b from "react-dom";
 import j from "react-onclickoutside";
 import o from "moment";
-import p from "classnames";
+import p from "../../utils/classNames.js";
 import { isNil as R, isNull as T, isEqual as _ } from "es-toolkit/predicate";
 import y from "./DatePicker.js";
 import $ from "../../utils/getDropDirection.js";