@rio-cloud/rio-uikit 2.0.1 → 2.2.0

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.d.ts

@@ -26,6 +26,8 @@ export type ClearableInputProps = {
      *
      * There are three types supported:
      * `text`, `email`, `password`.
+     *
+     * @default 'text'
      */
     type?: 'text' | 'password' | 'email';
     /**
@@ -44,10 +46,14 @@ export type ClearableInputProps = {
     maxLength?: number;
     /**
      * Defines the tab index to be added to the input element.
+     *
+     * @default 0
      */
     tabIndex?: number;
     /**
      * Defined whether or not the input has the error styling.
+     *
+     * @default false
      */
     hasError?: boolean;
     /**
@@ -106,21 +112,16 @@ export type ClearableInputProps = {
      *
      * The following characters will define mask format:
      *
-     * "0" = allowed input: "0-9" (digit)
-     *
-     * "a" = allowed input: "a-z, A-Z" (letter)
-     *
-     * "*" = allowed input: any character
-     *
-     * "#" = allowed input: "0-9, a-z, A-Z" (digit or letter)
+     * - "0" = allowed input: "0-9" (digit)
+     * - "a" = allowed input: "a-z, A-Z" (letter)
+     * - "*" = allowed input: any character
+     * - "#" = allowed input: "0-9, a-z, A-Z" (digit or letter)
      *
      * Other chars which is not in custom definitions supposed to be fixed:
      *
-     * [] - make input optional
-     *
-     * {} - include fixed part in unmasked value
-     *
-     * ` - prevent symbols shift back
+     * - [] - make input optional
+     * - {} - include fixed part in unmasked value
+     * - ` - prevent symbols shift back
      *
      * If definition character should be treated as fixed it should be escaped by \\ (E.g. \\0).
      *
@@ -149,8 +150,9 @@ export type ClearableInputProps = {
     maskDispatch?: (appended: string, dynamicMasked: any) => any;
     /**
      * Controls when the mask pattern is visible.
+     *
      * - 'always': Mask is always visible
-     * - 'onFocus': Mask is hidden but shown when input is focused (default)
+     * - 'onFocus': Mask is hidden but shown when input is focused
      * - 'never': Mask is never shown
      *
      * @default 'always'
@@ -188,15 +190,14 @@ export type ClearableInputProps = {
      * Additional classes to be set on the wrapper element.
      */
     className?: string;
-};
-type ChildrenProp = {
     /**
-     * Providing a function enables the render props approach. The function gets the input props
-     * passed and is responsible for rendering the custom `input` component.
-     * @param props
-     * @returns
+     * Render-prop to customize the rendered input.
+     *
+     * The function gets the `inputProps` passed and is responsible for rendering the custom `<input>` component.
+     *
+     * Receives the computed `input` props so you can render your own field. See: {@link https://reactjs.org/docs/render-props.html}
      */
     children?: (props: React.InputHTMLAttributes<HTMLInputElement>) => React.ReactNode;
 };
-declare const ClearableInput: React.ForwardRefExoticComponent<ClearableInputProps & ChildrenProp & React.RefAttributes<HTMLInputElement>>;
+declare const ClearableInput: React.ForwardRefExoticComponent<ClearableInputProps & React.RefAttributes<HTMLInputElement>>;
 export default ClearableInput;

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    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    tabIndex?: number;\n\n    /**\n     * Defined whether or not the input has the error styling.\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     *\n     * \"a\" = allowed input: \"a-z, A-Z\" (letter)\n     *\n     * \"*\" = allowed input: any character\n     *\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     *\n     * {} - include fixed part in unmasked value\n     *\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     * - 'always': Mask is always visible\n     * - 'onFocus': Mask is hidden but shown when input is focused (default)\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\ntype ChildrenProp = {\n    /**\n     * Providing a function enables the render props approach. The function gets the input props\n     * passed and is responsible for rendering the custom `input` component.\n     * @param props\n     * @returns\n     */\n    children?: (props: React.InputHTMLAttributes<HTMLInputElement>) => React.ReactNode;\n};\n\nconst hasValue = (value: unknown) => !isEmpty(`${value}`);\n\nconst ClearableInput = forwardRef((props: ClearableInputProps & ChildrenProp, 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":";;;;;;;;;AAWO,MAAMA,IAAe,QACfC,KAAkB,CAAC,QAAQ,YAAY,OAAO,GAyOrDC,IAAW,CAACC,MAAmB,CAACC,GAAQ,GAAGD,CAAK,EAAE,GAElDE,KAAiBC,GAAW,CAACC,GAA4BC,MAAwC;AACnG,QAAM;AAAA,IACF,MAAAC,IAAOT;AAAA,IACP,cAAAU;AAAA,IACA,OAAAP;AAAA,IACA,WAAAQ;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,UAAAC,IAAW;AAAA,IACX,UAAAC;AAAA,IACA,cAAAC;AAAA,IACA,UAAAC,IAAWC;AAAA,IACX,QAAAC,IAASD;AAAA,IACT,SAAAE,IAAUF;AAAA,IACV,SAAAG,IAAUH;AAAA,IACV,YAAAI,IAAaJ;AAAA,IACb,SAAAK,IAAUL;AAAA,IACV,MAAAM;AAAA,IACA,iBAAAC,IAAkB;AAAA,IAClB,gBAAAC,IAAiB;AAAA,IACjB,eAAAC,IAAgB;AAAA,IAChB,iBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,gBAAAC,IAAiB;AAAA,IACjB,UAAAC,IAAW;AAAA,IACX,WAAAC,IAAY;AAAA,IACZ,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACH1B,GAEE2B,IAAe/B,KAASO,KAAgB,IAExC,CAACyB,GAAYC,CAAa,IAAIC,EAASH,CAAY,GACnD,CAACI,GAAWC,CAAY,IAAIF,EAASnC,EAASgC,CAAY,CAAC,GAC3D,CAACM,GAAWC,CAAY,IAAIJ,EAAS,EAAK,GAE1CK,IAAe,CAACC,GAAMxC,CAAK,GAE3ByC,IAAkBC,GAAyB,IAAI,GAC/CC,IAAwBC,GAAaH,GAAiB9B,GAAUN,CAAG,GAEnEwC,IAAU,CAAC,CAACzB,GAGZ0B,IAAiB,MAAM;AACzB,YAAQxB,GAAA;AAAA,MACJ,KAAK;AACD,eAAO;AAAA,MACX,KAAK;AACD,eAAOe;AAAA,MACX,KAAK;AACD,eAAO;AAAA,MACX;AACI,eAAOA;AAAA,IAAA;AAAA,EAEnB,GAIMU,IAAsB,CAACC,IAAW,OAAO;AAE3C,IAAIhB,MAAegB,MAInBf,EAAce,CAAQ,GACtBZ,EAAarC,EAASiD,CAAQ,CAAC;AAAA,EACnC;AAIA,EADsBC,GAAYjD,CAAK,MACjBA,KAClB+C,EAAoB/C,CAAK;AAI7B,QAAMkD,IAAe,CAACC,MAA+C;AACjE,UAAMH,IAAWG,EAAM,OAAO;AAE9B,IAAIZ,KAGAQ,EAAoBC,CAAQ,GAC5BnC,EAASmC,GAAUG,CAAK;AAAA,EAEhC,GAEMC,IAAe,CAACJ,GAAkBK,GAAcC,OAAwB;AAC1E,QAAI,CAACb,EAAgB;AACjB;AAIJ,UAAMc,IAAiB;AAAA,MACnB,QAAQd,EAAgB;AAAA,MACxB,eAAeA,EAAgB;AAAA;AAAA,MAE/B,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,kBAAkB;AAAA,MAClB,WAAW;AAAA,MACX,gBAAgB,MAAM;AAAA,MAAC;AAAA,MACvB,iBAAiB,MAAM;AAAA,MAAC;AAAA,MACxB,SAAS,MAAM;AAAA,MAAC;AAAA,MAChB,aAAa,CAAA;AAAA,MACb,MAAM;AAAA,MACN,WAAW,KAAK,IAAA;AAAA,IAAI;AAKvB,IAAAc,EAAe,OAAe,gBAAgBF,EAAQ,eAEnDd,KAGAQ,EAAoBC,CAAQ,GAC5BnC,EAASmC,GAAUO,CAAc;AAAA,EAEzC,GAEMC,KAAmB,CAACL,MAA8C;AACpE,IAAAb,EAAa,EAAI,GACjBtB,EAAQmC,CAAK;AAAA,EACjB,GAEMM,KAAkB,CAACN,MAA8C;AACnE,IAAAb,EAAa,EAAK,GAClBvB,EAAOoC,CAAK;AAAA,EAChB,GAGMO,KAAiB,CAACP,MAAiD;AACrE,IAAAjC,EAAWiC,CAAK;AAAA,EACpB,GAEMQ,KAAkB,CAACR,MAA6C;AAClE,IAAAJ,EAAoB,EAAE,GACtBlC,EAAS,IAAIsC,CAAK,GAEdlC,KACAA,EAAQkC,CAAK;AAAA,EAErB,GAEMS,KAAUC;AAAA,IACZ;AAAA,IACA;AAAA,IACAnD,KAAY;AAAA,IACZiB,KAAY;AAAA,IACZC,KAAaA;AAAA,EAAA,GAGXkC,KAAkBD;AAAA,IACpB;AAAA,IACAnC;AAAA,IACAS,KAAa;AAAA,IACbU,KAAW;AAAA,IACXlB,KAAY;AAAA,EAAA,GAGVoC,KAAwBF,EAAW,eAAe,CAAC1B,KAAa,MAAM,GAEtE6B,IAAgB1D,GAAM,YAAA,GACtB2D,KAAYnE,GAAgB,QAAQkE,CAAa,MAAM,KAAKA,IAAgBnE,GAE5EqE,IAAa;AAAA,IACf,GAAGC,GAAKrC,GAAgB,CAAC,SAAS,gBAAgB,SAAS,CAAC;AAAA,IAC5D,WAAWgC;AAAA,IACX,cAAAlD;AAAA,IACA,MAAMqD;AAAA,IACN,OAAOjC;AAAA,IACP,YAAY0B;AAAA,IACZ,QAAQD;AAAA,IACR,SAASD;AAAA,IACT,UAAUX,IAAU,SAAYK;AAAA;AAAA,IAChC,SAAA/B;AAAA,IACA,UAAAQ;AAAA,IACA,WAAWkB,IAAU,SAAYrC;AAAA,IACjC,UAAAC;AAAA,EAAA,GAKE2D,IAAuB,CAAA;AAC7B,EAAI3C,MACA2C,EAAgB,WAAW3C;AAG/B,QAAM4C,KAAQxB,IACV,gBAAAyB;AAAA,IAACC;AAAA,IAAA;AAAA,MACI,GAAGL;AAAA,MACJ,UAAUvB;AAAA,MACV,MAAAvB;AAAA,MACA,aAAaI;AAAA,MACZ,GAAG4C;AAAA,MACJ,iBAAiB/C;AAAA,MACjB,UAAU+B;AAAA,MACV,MAAM,CAACN,EAAA;AAAA,MACP,WAAWvB;AAAA,IAAA;AAAA,EAAA,IAGf,gBAAA+C,EAAC,SAAA,EAAO,GAAGJ,GAAY,KAAKvD,KAAYN,GAAK;AAGjD,SACI,gBAAAmE,GAAC,OAAA,EAAI,WAAWZ,IACX,UAAA;AAAA,IAAA/B,KAAY4C,GAAW5C,CAAQ,IAAIA,EAASqC,CAAU,IAAIG;AAAA,IAC3D,gBAAAC,EAAC,QAAA,EAAK,WAAWP,IAAuB,SAASJ,IAC7C,UAAA,gBAAAW,EAAC,QAAA,EAAK,WAAU,gDAAA,CAAgD,EAAA,CACpE;AAAA,EAAA,GACJ;AAER,CAAC;"}

package/components/collapse/Collapse.d.ts

@@ -2,6 +2,7 @@ import { PropsWithChildren } from 'react';
 type CollapseProps = {
     /**
      * Show the component and triggers the expand or collapse animation.
+     *
      * @default false
      */
     open: boolean | undefined;
@@ -11,11 +12,13 @@ type CollapseProps = {
     unmountOnExit?: boolean;
     /**
      * Run the expand animation when the component mounts, if it is initially shown.
+     *
      * @default false
      */
     appear?: boolean;
     /**
      * Duration of the collapse animation in milliseconds.
+     *
      * @default 270
      */
     timeout?: number;

package/components/collapse/Collapse.js

@@ -1,27 +1,27 @@
-import { jsx as t, Fragment as u } from "react/jsx-runtime";
-import { AnimatePresence as I, motion as x } from "motion/react";
+import { jsx as e } from "react/jsx-runtime";
+import { AnimatePresence as u, motion as I } from "motion/react";
 import { noop as o } from "es-toolkit/function";
-const E = 200, _ = (a) => {
+const x = 200, S = (a) => {
   const {
-    open: n = !1,
+    open: t = !1,
     unmountOnExit: i = !1,
     appear: l = !1,
-    timeout: s = E,
+    timeout: s = x,
     onEntered: p = o,
     onExited: c = o,
     onAnimationStart: m = o,
     children: r
-  } = a, d = !i, h = () => m(), A = (e) => {
-    e === "open" && p(), e === "collapsed" && c();
+  } = a, d = !i, h = () => m(), A = (n) => {
+    n === "open" && p(), n === "collapsed" && c();
   }, f = {
     open: { opacity: 1, height: "auto" },
     collapsed: { opacity: 0, height: 0 }
   };
-  return /* @__PURE__ */ t(u, { children: /* @__PURE__ */ t(I, { initial: l, mode: "wait", children: (n || d) && /* @__PURE__ */ t(
-    x.div,
+  return /* @__PURE__ */ e(u, { initial: l, mode: "wait", children: (t || d) && /* @__PURE__ */ e(
+    I.div,
     {
       initial: "collapsed",
-      animate: n ? "open" : "collapsed",
+      animate: t ? "open" : "collapsed",
       exit: "collapsed",
       className: "collapse display-block width-100pct",
       variants: f,
@@ -31,9 +31,9 @@ const E = 200, _ = (a) => {
       children: r
     },
     "content"
-  ) }) });
+  ) });
 };
 export {
-  _ as default
+  S as default
 };
 //# sourceMappingURL=Collapse.js.map

package/components/collapse/Collapse.js.map

@@ -1 +1 @@
-{"version":3,"file":"Collapse.js","sources":["../../../src/components/collapse/Collapse.tsx"],"sourcesContent":["// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains\nimport { type PropsWithChildren } from 'react';\nimport { motion, AnimatePresence, type AnimationDefinition } from 'motion/react';\nimport { noop } from 'es-toolkit/function';\n\nconst DEFAULT_ANIMATION_TIME_IN_MS = 200;\n\ntype CollapseProps = {\n    /**\n     * Show the component and triggers the expand or collapse animation.\n     * @default false\n     */\n    open: boolean | undefined;\n\n    /**\n     * Unmount the component (remove it from the DOM) when it is collapsed.\n     */\n    unmountOnExit?: boolean;\n\n    /**\n     * Run the expand animation when the component mounts, if it is initially shown.\n     * @default false\n     */\n    appear?: boolean;\n\n    /**\n     * Duration of the collapse animation in milliseconds.\n     * @default 270\n     */\n    timeout?: number;\n\n    /**\n     * Callback fired after the component has expanded.\n     * @returns\n     */\n    onEntered?: () => void;\n\n    /**\n     * Callback fired after the component has collapsed.\n     * @returns\n     */\n    onExited?: () => void;\n\n    /**\n     * Callback fired when the animation starts for either expand or collapse.\n     */\n    onAnimationStart?: () => void;\n};\n\nconst Collapse = (props: PropsWithChildren<CollapseProps>) => {\n    const {\n        open = false,\n        unmountOnExit = false,\n        appear = false,\n        timeout = DEFAULT_ANIMATION_TIME_IN_MS,\n        onEntered = noop,\n        onExited = noop,\n        onAnimationStart = noop,\n        children,\n    } = props;\n\n    const shouldKeepContentInDom = !unmountOnExit;\n\n    const handleAnimationStart = () => onAnimationStart();\n    const handleAnimationComplete = (definition: AnimationDefinition) => {\n        if (definition === 'open') {\n            onEntered();\n        }\n        if (definition === 'collapsed') {\n            onExited();\n        }\n    };\n\n    const variants = {\n        open: { opacity: 1, height: 'auto' },\n        collapsed: { opacity: 0, height: 0 },\n    };\n\n    return (\n        <>\n            <AnimatePresence initial={appear} mode='wait'>\n                {(open || shouldKeepContentInDom) && (\n                    <motion.div\n                        key='content'\n                        initial='collapsed'\n                        animate={open ? 'open' : 'collapsed'}\n                        exit='collapsed'\n                        className='collapse display-block width-100pct'\n                        variants={variants}\n                        transition={{ duration: timeout / 1000, ease: 'easeIn' }}\n                        onAnimationComplete={handleAnimationComplete}\n                        onAnimationStart={handleAnimationStart}\n                    >\n                        {children}\n                    </motion.div>\n                )}\n            </AnimatePresence>\n        </>\n    );\n};\n//\n\nexport default Collapse;\n"],"names":["DEFAULT_ANIMATION_TIME_IN_MS","Collapse","props","open","unmountOnExit","appear","timeout","onEntered","noop","onExited","onAnimationStart","children","shouldKeepContentInDom","handleAnimationStart","handleAnimationComplete","definition","variants","jsx","Fragment","AnimatePresence","motion"],"mappings":";;;AAKA,MAAMA,IAA+B,KA4C/BC,IAAW,CAACC,MAA4C;AAC1D,QAAM;AAAA,IACF,MAAAC,IAAO;AAAA,IACP,eAAAC,IAAgB;AAAA,IAChB,QAAAC,IAAS;AAAA,IACT,SAAAC,IAAUN;AAAA,IACV,WAAAO,IAAYC;AAAA,IACZ,UAAAC,IAAWD;AAAA,IACX,kBAAAE,IAAmBF;AAAA,IACnB,UAAAG;AAAA,EAAA,IACAT,GAEEU,IAAyB,CAACR,GAE1BS,IAAuB,MAAMH,EAAA,GAC7BI,IAA0B,CAACC,MAAoC;AACjE,IAAIA,MAAe,UACfR,EAAA,GAEAQ,MAAe,eACfN,EAAA;AAAA,EAER,GAEMO,IAAW;AAAA,IACb,MAAM,EAAE,SAAS,GAAG,QAAQ,OAAA;AAAA,IAC5B,WAAW,EAAE,SAAS,GAAG,QAAQ,EAAA;AAAA,EAAE;AAGvC,SACI,gBAAAC,EAAAC,GAAA,EACI,4BAACC,GAAA,EAAgB,SAASd,GAAQ,MAAK,QACjC,gBAAQO,MACN,gBAAAK;AAAA,IAACG,EAAO;AAAA,IAAP;AAAA,MAEG,SAAQ;AAAA,MACR,SAASjB,IAAO,SAAS;AAAA,MACzB,MAAK;AAAA,MACL,WAAU;AAAA,MACV,UAAAa;AAAA,MACA,YAAY,EAAE,UAAUV,IAAU,KAAM,MAAM,SAAA;AAAA,MAC9C,qBAAqBQ;AAAA,MACrB,kBAAkBD;AAAA,MAEjB,UAAAF;AAAA,IAAA;AAAA,IAVG;AAAA,EAAA,GAahB,EAAA,CACJ;AAER;"}
+{"version":3,"file":"Collapse.js","sources":["../../../src/components/collapse/Collapse.tsx"],"sourcesContent":["// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains\nimport { type PropsWithChildren } from 'react';\nimport { motion, AnimatePresence, type AnimationDefinition } from 'motion/react';\nimport { noop } from 'es-toolkit/function';\n\nconst DEFAULT_ANIMATION_TIME_IN_MS = 200;\n\ntype CollapseProps = {\n    /**\n     * Show the component and triggers the expand or collapse animation.\n     *\n     * @default false\n     */\n    open: boolean | undefined;\n\n    /**\n     * Unmount the component (remove it from the DOM) when it is collapsed.\n     */\n    unmountOnExit?: boolean;\n\n    /**\n     * Run the expand animation when the component mounts, if it is initially shown.\n     *\n     * @default false\n     */\n    appear?: boolean;\n\n    /**\n     * Duration of the collapse animation in milliseconds.\n     *\n     * @default 270\n     */\n    timeout?: number;\n\n    /**\n     * Callback fired after the component has expanded.\n     * @returns\n     */\n    onEntered?: () => void;\n\n    /**\n     * Callback fired after the component has collapsed.\n     * @returns\n     */\n    onExited?: () => void;\n\n    /**\n     * Callback fired when the animation starts for either expand or collapse.\n     */\n    onAnimationStart?: () => void;\n};\n\nconst Collapse = (props: PropsWithChildren<CollapseProps>) => {\n    const {\n        open = false,\n        unmountOnExit = false,\n        appear = false,\n        timeout = DEFAULT_ANIMATION_TIME_IN_MS,\n        onEntered = noop,\n        onExited = noop,\n        onAnimationStart = noop,\n        children,\n    } = props;\n\n    const shouldKeepContentInDom = !unmountOnExit;\n\n    const handleAnimationStart = () => onAnimationStart();\n    const handleAnimationComplete = (definition: AnimationDefinition) => {\n        if (definition === 'open') {\n            onEntered();\n        }\n        if (definition === 'collapsed') {\n            onExited();\n        }\n    };\n\n    const variants = {\n        open: { opacity: 1, height: 'auto' },\n        collapsed: { opacity: 0, height: 0 },\n    };\n\n    return (\n        <AnimatePresence initial={appear} mode='wait'>\n            {(open || shouldKeepContentInDom) && (\n                <motion.div\n                    key='content'\n                    initial='collapsed'\n                    animate={open ? 'open' : 'collapsed'}\n                    exit='collapsed'\n                    className='collapse display-block width-100pct'\n                    variants={variants}\n                    transition={{ duration: timeout / 1000, ease: 'easeIn' }}\n                    onAnimationComplete={handleAnimationComplete}\n                    onAnimationStart={handleAnimationStart}\n                >\n                    {children}\n                </motion.div>\n            )}\n        </AnimatePresence>\n    );\n};\n//\n\nexport default Collapse;\n"],"names":["DEFAULT_ANIMATION_TIME_IN_MS","Collapse","props","open","unmountOnExit","appear","timeout","onEntered","noop","onExited","onAnimationStart","children","shouldKeepContentInDom","handleAnimationStart","handleAnimationComplete","definition","variants","AnimatePresence","jsx","motion"],"mappings":";;;AAKA,MAAMA,IAA+B,KA+C/BC,IAAW,CAACC,MAA4C;AAC1D,QAAM;AAAA,IACF,MAAAC,IAAO;AAAA,IACP,eAAAC,IAAgB;AAAA,IAChB,QAAAC,IAAS;AAAA,IACT,SAAAC,IAAUN;AAAA,IACV,WAAAO,IAAYC;AAAA,IACZ,UAAAC,IAAWD;AAAA,IACX,kBAAAE,IAAmBF;AAAA,IACnB,UAAAG;AAAA,EAAA,IACAT,GAEEU,IAAyB,CAACR,GAE1BS,IAAuB,MAAMH,EAAA,GAC7BI,IAA0B,CAACC,MAAoC;AACjE,IAAIA,MAAe,UACfR,EAAA,GAEAQ,MAAe,eACfN,EAAA;AAAA,EAER,GAEMO,IAAW;AAAA,IACb,MAAM,EAAE,SAAS,GAAG,QAAQ,OAAA;AAAA,IAC5B,WAAW,EAAE,SAAS,GAAG,QAAQ,EAAA;AAAA,EAAE;AAGvC,2BACKC,GAAA,EAAgB,SAASZ,GAAQ,MAAK,QACjC,gBAAQO,MACN,gBAAAM;AAAA,IAACC,EAAO;AAAA,IAAP;AAAA,MAEG,SAAQ;AAAA,MACR,SAAShB,IAAO,SAAS;AAAA,MACzB,MAAK;AAAA,MACL,WAAU;AAAA,MACV,UAAAa;AAAA,MACA,YAAY,EAAE,UAAUV,IAAU,KAAM,MAAM,SAAA;AAAA,MAC9C,qBAAqBQ;AAAA,MACrB,kBAAkBD;AAAA,MAEjB,UAAAF;AAAA,IAAA;AAAA,IAVG;AAAA,EAAA,GAahB;AAER;"}

package/components/contentLoader/ContentLoader.d.ts

@@ -4,21 +4,25 @@ declare const CIRCLE = "circle";
 export type ContentLoaderProps = {
     /**
      * Sets the animation speed.
+     *
      * @default 2
      */
     speed?: number;
     /**
      * Sets the height of the svg element.
+     *
      * @default 14
      */
     height?: string | number;
     /**
      * Sets the width of the svg element.
+     *
      * @default 100%
      */
     width?: string | number;
     /**
      * Sets the radius of the svg element. Only relevant for circle elements.
+     *
      * @default 16
      */
     radius?: number;
@@ -33,9 +37,13 @@ export type ContentLoaderProps = {
      * Additional class names to ab added to the wrapping svg element.
      */
     className?: string;
-    /** Rect object prop. Used internally. */
+    /**
+     * Rect object prop. Used internally.
+     */
     rx?: number;
-    /** Rect object prop. Used internally. */
+    /**
+     * Rect object prop. Used internally.
+     */
     ry?: number;
 };
 type ContentLoaderPropsWithChildren = PropsWithChildren<ContentLoaderProps>;