fictoan-react 2.0.0-beta.18 → 2.0.0-beta.19

package/dist/components/Form/RadioButton/RadioTabGroup.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 
-export declare const RadioTabGroup: React.ForwardRefExoticComponent<Omit<import('./constants').RadioGroupProps, "name" | keyof import('./constants').RadioTabGroupCustomProps> & import('./constants').RadioTabGroupCustomProps & import('../../Element/constants').CommonProps & {
+export declare const RadioTabGroup: React.ForwardRefExoticComponent<Omit<import('./constants').RadioGroupProps, "name" | keyof import('./constants').RadioTabGroupCustomProps> & import('./constants').RadioTabGroupCustomProps & import('../../..').CommonProps & {
     name?: string;
 } & React.RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=RadioTabGroup.d.ts.map

package/dist/components/Form/RadioButton/RadioTabGroup.js

@@ -1,12 +1,12 @@
 "use client";
 import { jsx as s, jsxs as d } from "react/jsx-runtime";
-import y, { useMemo as Y, useRef as M, useState as p, useCallback as X, useEffect as q } from "react";
+import y, { useMemo as Z, useRef as B, useState as p, useCallback as M, useEffect as X } from "react";
 import { Div as c } from "../../Element/Tags.js";
-import { deriveAriaIds as Z, FormItem as _ } from "../FormItem/FormItem.js";
-import { separateWrapperProps as tt } from "../../../utils/propSeparation.js";
+import { deriveAriaIds as _, FormItem as tt } from "../FormItem/FormItem.js";
+import { separateWrapperProps as et } from "../../../utils/propSeparation.js";
 /* empty css                    */
-import { Element as et } from "../../Element/Element.js";
-const rt = y.forwardRef(
+import { Element as rt } from "../../Element/Element.js";
+const ot = y.forwardRef(
   ({
     id: u,
     name: S,
@@ -14,43 +14,43 @@ const rt = y.forwardRef(
     helpText: N,
     errorText: m,
     options: f,
-    defaultValue: ot,
+    defaultValue: st,
     value: h,
     required: P,
     onChange: b,
     size: v = "medium",
-    bgColour: st,
-    disabled: C,
-    ...G
-  }, j) => {
-    const R = Y(() => S || u, [S, u]), i = M(null), [F, E] = p({
+    bgColour: q,
+    disabled: G,
+    ...j
+  }, C) => {
+    const E = Z(() => S || u, [S, u]), i = B(null), [R, T] = p({
       width: 0,
       transform: "translateX(0)"
-    }), [$, T] = p(!1), [a, D] = p(0), [w, L] = p(0), g = M([]), W = X(() => {
+    }), [F, D] = p(!1), [a, L] = p(0), [w, O] = p(0), W = B([]), g = M(() => {
       if (!i.current) return;
       const t = i.current, e = t.closest("[data-input-wrapper]");
       if (t && e) {
         const o = t.scrollWidth, n = e.clientWidth, r = o > n;
-        T(r), L(r ? o - n : 0);
+        D(r), O(r ? o - n : 0);
       }
     }, []);
-    q(() => {
+    X(() => {
       const t = i.current;
       if (!t) return;
-      W();
+      g();
       const e = new ResizeObserver(() => {
-        W();
+        g();
       });
       return e.observe(t), t.closest("[data-input-wrapper]") && e.observe(t.closest("[data-input-wrapper]")), () => e.disconnect();
-    }, [W]), q(() => {
+    }, [g]), X(() => {
       const t = f.findIndex((e) => e.value === h);
       if (t >= 0) {
         const e = () => {
-          const o = g.current[t];
+          const o = W.current[t];
           if (o) {
             const n = o.offsetWidth;
             let r = "translateX(0)";
-            t > 0 && (r = `translateX(${g.current.slice(0, t).reduce((U, I) => U + ((I == null ? void 0 : I.offsetWidth) || 0), 0)}px)`), E({ width: n, transform: r });
+            t > 0 && (r = `translateX(${W.current.slice(0, t).reduce((Y, I) => Y + ((I == null ? void 0 : I.offsetWidth) || 0), 0)}px)`), T({ width: n, transform: r });
           }
         };
         if (document.fonts && document.fonts.ready)
@@ -65,21 +65,21 @@ const rt = y.forwardRef(
         }
       }
     }, [h, f]);
-    const O = (t) => {
+    const V = (t) => {
       b == null || b(t.target.value);
-    }, { wrapperProps: V, inputProps: z } = tt(G), A = X((t) => {
+    }, { wrapperProps: z, inputProps: H } = et(j), $ = M((t) => {
       const e = i.current;
       if (!e) return;
       const n = e.clientWidth * 0.8;
       let r = t === "right" ? Math.min(a + n, w) : Math.max(a - n, 0);
-      D(r), requestAnimationFrame(() => {
+      L(r), requestAnimationFrame(() => {
         e.style.transform = `translateX(-${r}px)`;
       });
-    }, [a, w]), H = a > 0, J = a < w, k = [];
-    v && k.push(`size-${v}`);
-    const K = y.useId(), l = u || `radio-tab-group-${K.replace(/:/g, "")}`, { describedBy: Q } = Z(l, N, m);
+    }, [a, w]), J = a > 0, K = a < w, A = [];
+    v && A.push(`size-${v}`);
+    const Q = y.useId(), l = u || `radio-tab-group-${Q.replace(/:/g, "")}`, { describedBy: U } = _(l, N, m);
     return /* @__PURE__ */ s(
-      _,
+      tt,
       {
         label: x,
         htmlFor: l,
@@ -87,28 +87,28 @@ const rt = y.forwardRef(
         errorText: m,
         required: P,
         size: v,
-        ...V,
+        ...z,
         children: /* @__PURE__ */ d(
-          et,
+          rt,
           {
             as: "div",
             "data-radio-tab-group": !0,
-            ref: j,
+            ref: C,
             id: l,
-            classNames: k,
-            name: R,
+            classNames: A,
+            bgColour: q,
             role: "radiogroup",
             "aria-label": x,
             "aria-invalid": !!m || void 0,
             "aria-required": P,
-            "aria-describedby": Q,
-            ...z,
+            "aria-describedby": U,
+            ...H,
             children: [
-              $ && H && /* @__PURE__ */ s(
+              F && J && /* @__PURE__ */ s(
                 c,
                 {
                   className: "scroll-button left",
-                  onClick: () => A("left"),
+                  onClick: () => $("left"),
                   children: /* @__PURE__ */ s("svg", { viewBox: "0 0 24 24", children: /* @__PURE__ */ s("polyline", { points: "15 18 9 12 15 6" }) })
                 }
               ),
@@ -124,8 +124,8 @@ const rt = y.forwardRef(
                         {
                           className: "indicator",
                           style: {
-                            width: `${F.width}px`,
-                            transform: F.transform
+                            width: `${R.width}px`,
+                            transform: R.transform
                           }
                         }
                       ),
@@ -138,17 +138,17 @@ const rt = y.forwardRef(
                               type: "radio",
                               ...n,
                               id: r,
-                              name: R,
+                              name: E,
                               checked: h === t.value,
-                              disabled: C || t.disabled,
-                              onChange: O
+                              disabled: G || t.disabled,
+                              onChange: V
                             }
                           ),
                           /* @__PURE__ */ s(
                             "label",
                             {
-                              ref: (B) => {
-                                g.current[e] = B;
+                              ref: (k) => {
+                                W.current[e] = k;
                               },
                               htmlFor: r,
                               children: t.label
@@ -159,11 +159,11 @@ const rt = y.forwardRef(
                     ]
                   }
                 ),
-                $ && J && /* @__PURE__ */ s(
+                F && K && /* @__PURE__ */ s(
                   c,
                   {
                     className: "scroll-button right",
-                    onClick: () => A("right"),
+                    onClick: () => $("right"),
                     children: /* @__PURE__ */ s("svg", { viewBox: "0 0 24 24", children: /* @__PURE__ */ s("polyline", { points: "9 6 15 12 9 18" }) })
                   }
                 )
@@ -175,8 +175,8 @@ const rt = y.forwardRef(
     );
   }
 );
-rt.displayName = "RadioTabGroup";
+ot.displayName = "RadioTabGroup";
 export {
-  rt as RadioTabGroup
+  ot as RadioTabGroup
 };
 //# sourceMappingURL=RadioTabGroup.js.map

package/dist/components/Form/RadioButton/RadioTabGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioTabGroup.js","sources":["../../../../src/components/Form/RadioButton/RadioTabGroup.tsx"],"sourcesContent":["// REACT CORE ==========================================================================================================\nimport React, { useMemo, useRef, useEffect, useState, useCallback } from \"react\";\n\n// LOCAL COMPONENTS ====================================================================================================\nimport { Div } from \"$tags\";\nimport { Element } from \"$element\";\nimport { FormItem, deriveAriaIds } from \"../FormItem/FormItem\";\nimport { SpacingTypes } from \"../../Element/constants\";\nimport { separateWrapperProps } from \"../../../utils/propSeparation\";\n\n// STYLES ==============================================================================================================\nimport \"./radio-tab-group.css\";\n\n// OTHER ===============================================================================================================\nimport { RadioTabGroupProps, RadioButtonElementType } from \"./constants\";\n\ninterface IndicatorPosition {\n    width: number;\n    transform: string;\n}\n\n// COMPONENT ///////////////////////////////////////////////////////////////////////////////////////////////////////////\nexport const RadioTabGroup = React.forwardRef<HTMLDivElement, RadioTabGroupProps>(\n    (\n        {\n            id,\n            name,\n            label,\n            helpText,\n            errorText,\n            options,\n            defaultValue,\n            value,\n            required,\n            onChange,\n            size = \"medium\",\n            bgColour,\n            disabled,\n            ...props\n        },\n        ref\n    ) => {\n        const derivedName = useMemo(() => name || id, [name, id]);\n        const optionsWrapperRef = useRef<HTMLDivElement>(null);\n\n        const [indicatorPos, setIndicatorPos] = useState<IndicatorPosition>({\n            width: 0,\n            transform: \"translateX(0)\",\n        });\n        const [needsScroll, setNeedsScroll] = useState(false);\n        const [scrollPosition, setScrollPosition] = useState(0);\n        const [maxScroll, setMaxScroll] = useState(0);\n\n        const labelsRef = useRef<(HTMLLabelElement | null)[]>([]);\n\n        const measureWidths = useCallback(() => {\n            if (!optionsWrapperRef.current) return;\n\n            const wrapper = optionsWrapperRef.current;\n            const inputWrapper = wrapper.closest(\"[data-input-wrapper]\");\n\n            if (wrapper && inputWrapper) {\n                const totalContentWidth = wrapper.scrollWidth;\n                const availableWidth = inputWrapper.clientWidth;\n                const needsToScroll = totalContentWidth > availableWidth;\n\n                setNeedsScroll(needsToScroll);\n                setMaxScroll(needsToScroll ? totalContentWidth - availableWidth : 0);\n            }\n        }, []);\n\n        useEffect(() => {\n            const wrapper = optionsWrapperRef.current;\n            if (!wrapper) return;\n\n            // Initial measurement\n            measureWidths();\n\n            // Set up observer for size changes\n            const observer = new ResizeObserver(() => {\n                measureWidths();\n            });\n\n            observer.observe(wrapper);\n            if (wrapper.closest(\"[data-input-wrapper]\")) {\n                observer.observe(wrapper.closest(\"[data-input-wrapper]\") as Element);\n            }\n\n            return () => observer.disconnect();\n        }, [measureWidths]);\n\n        // Update indicator position based on selected radio\n        useEffect(() => {\n            const selectedIndex = options.findIndex(option => option.value === value);\n            if (selectedIndex >= 0) {\n                const updateIndicator = () => {\n                    const label = labelsRef.current[selectedIndex];\n                    if (label) {\n                        const width = label.offsetWidth;\n                        let transform = \"translateX(0)\";\n\n                        if (selectedIndex > 0) {\n                            const offset = labelsRef.current\n                                .slice(0, selectedIndex)\n                                .reduce((acc, label) => acc + (label?.offsetWidth || 0), 0);\n                            transform = `translateX(${offset}px)`;\n                        }\n\n                        setIndicatorPos({ width, transform });\n                    }\n                };\n\n                // Wait for fonts to load before measuring to get correct widths\n                if (document.fonts && document.fonts.ready) {\n                    document.fonts.ready.then(() => {\n                        requestAnimationFrame(() => {\n                            requestAnimationFrame(updateIndicator);\n                        });\n                    });\n                } else {\n                    const timeoutId = setTimeout(updateIndicator, 100);\n                    return () => clearTimeout(timeoutId);\n                }\n            }\n        }, [value, options]);\n\n        const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n            onChange?.(e.target.value);\n        };\n\n        // Separate wrapper-level props (margin, padding, etc.) from component-specific props\n        const { wrapperProps, inputProps } = separateWrapperProps(props);\n\n        const handleScroll = useCallback((direction: \"left\" | \"right\") => {\n            const wrapper = optionsWrapperRef.current;\n            if (!wrapper) return;\n\n            const visibleWidth = wrapper.clientWidth;\n            const scrollAmount = visibleWidth * 0.8;\n\n            let newPosition = direction === \"right\"\n                ? Math.min(scrollPosition + scrollAmount, maxScroll)\n                : Math.max(scrollPosition - scrollAmount, 0);\n\n            setScrollPosition(newPosition);\n\n            requestAnimationFrame(() => {\n                wrapper.style.transform = `translateX(-${newPosition}px)`;\n            });\n        }, [scrollPosition, maxScroll]);\n\n        const canScrollLeft = scrollPosition > 0;\n        const canScrollRight = scrollPosition < maxScroll;\n\n        const classNames: string[] = [];\n        if (size) {\n            classNames.push(`size-${size}`);\n        }\n\n        const reactId = React.useId();\n        const finalGroupId = id || `radio-tab-group-${reactId.replace(/:/g, \"\")}`;\n        const { describedBy } = deriveAriaIds(finalGroupId, helpText, errorText);\n\n        return (\n            <FormItem\n                label={label}\n                htmlFor={finalGroupId}\n                helpText={helpText}\n                errorText={errorText}\n                required={required}\n                size={size}\n                {...wrapperProps}\n            >\n                <Element\n                    as=\"div\"\n                    data-radio-tab-group\n                    ref={ref}\n                    id={finalGroupId}\n                    classNames={classNames}\n                    name={derivedName}\n                    role=\"radiogroup\"\n                    aria-label={label}\n                    aria-invalid={Boolean(errorText) || undefined}\n                    aria-required={required}\n                    aria-describedby={describedBy}\n                    {...inputProps}\n                >\n                    {/* LEFT SCROLL BUTTON */}\n                    {needsScroll && canScrollLeft && (\n                        <Div\n                            className=\"scroll-button left\"\n                            onClick={() => handleScroll(\"left\")}\n                        >\n                            <svg viewBox=\"0 0 24 24\">\n                                <polyline points=\"15 18 9 12 15 6\" />\n                            </svg>\n                        </Div>\n                    )}\n\n                    {/* RADIO OPTIONS */}\n                    <Div className=\"rtg-options-container\">\n                        <Div\n                            className=\"rtg-options-wrapper\"\n                            ref={optionsWrapperRef}\n                        >\n                            {/* INDICATOR */}\n                            <Div\n                                className=\"indicator\"\n                                style={{\n                                    width: `${indicatorPos.width}px`,\n                                    transform: indicatorPos.transform,\n                                }}\n                            />\n\n                            {options.map((option, index) => {\n                                const { id: optionId, ...optionProps } = option;\n                                const finalId = optionId || `${finalGroupId}-option-${index}`;\n\n                                return (\n                                    <React.Fragment key={finalId}>\n                                        <input\n                                            type=\"radio\"\n                                            {...optionProps}\n                                            id={finalId}\n                                            name={derivedName}\n                                            checked={value === option.value}\n                                            disabled={disabled || option.disabled}\n                                            onChange={handleChange}\n                                        />\n                                        <label\n                                            ref={el => { labelsRef.current[index] = el; }}\n                                            htmlFor={finalId}\n                                        >\n                                            {option.label}\n                                        </label>\n                                    </React.Fragment>\n                                );\n                            })}\n                        </Div>\n\n                        {/* RIGHT SCROLL BUTTON */}\n                        {needsScroll && canScrollRight && (\n                            <Div\n                                className=\"scroll-button right\"\n                                onClick={() => handleScroll(\"right\")}\n                            >\n                                <svg viewBox=\"0 0 24 24\">\n                                    <polyline points=\"9 6 15 12 9 18\" />\n                                </svg>\n                            </Div>\n                        )}\n                    </Div>\n                </Element>\n            </FormItem>\n        );\n    }\n);\nRadioTabGroup.displayName = \"RadioTabGroup\";\n"],"names":["RadioTabGroup","React","id","name","label","helpText","errorText","options","defaultValue","value","required","onChange","size","bgColour","disabled","props","ref","derivedName","useMemo","optionsWrapperRef","useRef","indicatorPos","setIndicatorPos","useState","needsScroll","setNeedsScroll","scrollPosition","setScrollPosition","maxScroll","setMaxScroll","labelsRef","measureWidths","useCallback","wrapper","inputWrapper","totalContentWidth","availableWidth","needsToScroll","useEffect","observer","selectedIndex","option","updateIndicator","width","transform","acc","timeoutId","handleChange","e","wrapperProps","inputProps","separateWrapperProps","handleScroll","direction","scrollAmount","newPosition","canScrollLeft","canScrollRight","classNames","reactId","finalGroupId","describedBy","deriveAriaIds","jsx","FormItem","jsxs","Element","Div","index","optionId","optionProps","finalId","el"],"mappings":"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"}
+{"version":3,"file":"RadioTabGroup.js","sources":["../../../../src/components/Form/RadioButton/RadioTabGroup.tsx"],"sourcesContent":["// REACT CORE ==========================================================================================================\nimport React, { useMemo, useRef, useEffect, useState, useCallback } from \"react\";\n\n// LOCAL COMPONENTS ====================================================================================================\nimport { Div } from \"$tags\";\nimport { Element } from \"$element\";\nimport { FormItem, deriveAriaIds } from \"../FormItem/FormItem\";\nimport { SpacingTypes } from \"../../Element/constants\";\nimport { separateWrapperProps } from \"../../../utils/propSeparation\";\n\n// STYLES ==============================================================================================================\nimport \"./radio-tab-group.css\";\n\n// OTHER ===============================================================================================================\nimport { RadioTabGroupProps, RadioButtonElementType } from \"./constants\";\n\ninterface IndicatorPosition {\n    width: number;\n    transform: string;\n}\n\n// COMPONENT ///////////////////////////////////////////////////////////////////////////////////////////////////////////\nexport const RadioTabGroup = React.forwardRef<HTMLDivElement, RadioTabGroupProps>(\n    (\n        {\n            id,\n            name,\n            label,\n            helpText,\n            errorText,\n            options,\n            defaultValue,\n            value,\n            required,\n            onChange,\n            size = \"medium\",\n            bgColour,\n            disabled,\n            ...props\n        },\n        ref\n    ) => {\n        const derivedName = useMemo(() => name || id, [name, id]);\n        const optionsWrapperRef = useRef<HTMLDivElement>(null);\n\n        const [indicatorPos, setIndicatorPos] = useState<IndicatorPosition>({\n            width: 0,\n            transform: \"translateX(0)\",\n        });\n        const [needsScroll, setNeedsScroll] = useState(false);\n        const [scrollPosition, setScrollPosition] = useState(0);\n        const [maxScroll, setMaxScroll] = useState(0);\n\n        const labelsRef = useRef<(HTMLLabelElement | null)[]>([]);\n\n        const measureWidths = useCallback(() => {\n            if (!optionsWrapperRef.current) return;\n\n            const wrapper = optionsWrapperRef.current;\n            const inputWrapper = wrapper.closest(\"[data-input-wrapper]\");\n\n            if (wrapper && inputWrapper) {\n                const totalContentWidth = wrapper.scrollWidth;\n                const availableWidth = inputWrapper.clientWidth;\n                const needsToScroll = totalContentWidth > availableWidth;\n\n                setNeedsScroll(needsToScroll);\n                setMaxScroll(needsToScroll ? totalContentWidth - availableWidth : 0);\n            }\n        }, []);\n\n        useEffect(() => {\n            const wrapper = optionsWrapperRef.current;\n            if (!wrapper) return;\n\n            // Initial measurement\n            measureWidths();\n\n            // Set up observer for size changes\n            const observer = new ResizeObserver(() => {\n                measureWidths();\n            });\n\n            observer.observe(wrapper);\n            if (wrapper.closest(\"[data-input-wrapper]\")) {\n                observer.observe(wrapper.closest(\"[data-input-wrapper]\") as Element);\n            }\n\n            return () => observer.disconnect();\n        }, [measureWidths]);\n\n        // Update indicator position based on selected radio\n        useEffect(() => {\n            const selectedIndex = options.findIndex(option => option.value === value);\n            if (selectedIndex >= 0) {\n                const updateIndicator = () => {\n                    const label = labelsRef.current[selectedIndex];\n                    if (label) {\n                        const width = label.offsetWidth;\n                        let transform = \"translateX(0)\";\n\n                        if (selectedIndex > 0) {\n                            const offset = labelsRef.current\n                                .slice(0, selectedIndex)\n                                .reduce((acc, label) => acc + (label?.offsetWidth || 0), 0);\n                            transform = `translateX(${offset}px)`;\n                        }\n\n                        setIndicatorPos({ width, transform });\n                    }\n                };\n\n                // Wait for fonts to load before measuring to get correct widths\n                if (document.fonts && document.fonts.ready) {\n                    document.fonts.ready.then(() => {\n                        requestAnimationFrame(() => {\n                            requestAnimationFrame(updateIndicator);\n                        });\n                    });\n                } else {\n                    const timeoutId = setTimeout(updateIndicator, 100);\n                    return () => clearTimeout(timeoutId);\n                }\n            }\n        }, [value, options]);\n\n        const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n            onChange?.(e.target.value);\n        };\n\n        // Separate wrapper-level props (margin, padding, etc.) from component-specific props\n        const { wrapperProps, inputProps } = separateWrapperProps(props);\n\n        const handleScroll = useCallback((direction: \"left\" | \"right\") => {\n            const wrapper = optionsWrapperRef.current;\n            if (!wrapper) return;\n\n            const visibleWidth = wrapper.clientWidth;\n            const scrollAmount = visibleWidth * 0.8;\n\n            let newPosition = direction === \"right\"\n                ? Math.min(scrollPosition + scrollAmount, maxScroll)\n                : Math.max(scrollPosition - scrollAmount, 0);\n\n            setScrollPosition(newPosition);\n\n            requestAnimationFrame(() => {\n                wrapper.style.transform = `translateX(-${newPosition}px)`;\n            });\n        }, [scrollPosition, maxScroll]);\n\n        const canScrollLeft = scrollPosition > 0;\n        const canScrollRight = scrollPosition < maxScroll;\n\n        const classNames: string[] = [];\n        if (size) {\n            classNames.push(`size-${size}`);\n        }\n\n        const reactId = React.useId();\n        const finalGroupId = id || `radio-tab-group-${reactId.replace(/:/g, \"\")}`;\n        const { describedBy } = deriveAriaIds(finalGroupId, helpText, errorText);\n\n        return (\n            <FormItem\n                label={label}\n                htmlFor={finalGroupId}\n                helpText={helpText}\n                errorText={errorText}\n                required={required}\n                size={size}\n                {...wrapperProps}\n            >\n                <Element\n                    as=\"div\"\n                    data-radio-tab-group\n                    ref={ref}\n                    id={finalGroupId}\n                    classNames={classNames}\n                    bgColour={bgColour}\n                    role=\"radiogroup\"\n                    aria-label={label}\n                    aria-invalid={Boolean(errorText) || undefined}\n                    aria-required={required}\n                    aria-describedby={describedBy}\n                    {...inputProps}\n                >\n                    {/* LEFT SCROLL BUTTON */}\n                    {needsScroll && canScrollLeft && (\n                        <Div\n                            className=\"scroll-button left\"\n                            onClick={() => handleScroll(\"left\")}\n                        >\n                            <svg viewBox=\"0 0 24 24\">\n                                <polyline points=\"15 18 9 12 15 6\" />\n                            </svg>\n                        </Div>\n                    )}\n\n                    {/* RADIO OPTIONS */}\n                    <Div className=\"rtg-options-container\">\n                        <Div\n                            className=\"rtg-options-wrapper\"\n                            ref={optionsWrapperRef}\n                        >\n                            {/* INDICATOR */}\n                            <Div\n                                className=\"indicator\"\n                                style={{\n                                    width: `${indicatorPos.width}px`,\n                                    transform: indicatorPos.transform,\n                                }}\n                            />\n\n                            {options.map((option, index) => {\n                                const { id: optionId, ...optionProps } = option;\n                                const finalId = optionId || `${finalGroupId}-option-${index}`;\n\n                                return (\n                                    <React.Fragment key={finalId}>\n                                        <input\n                                            type=\"radio\"\n                                            {...optionProps}\n                                            id={finalId}\n                                            name={derivedName}\n                                            checked={value === option.value}\n                                            disabled={disabled || option.disabled}\n                                            onChange={handleChange}\n                                        />\n                                        <label\n                                            ref={el => { labelsRef.current[index] = el; }}\n                                            htmlFor={finalId}\n                                        >\n                                            {option.label}\n                                        </label>\n                                    </React.Fragment>\n                                );\n                            })}\n                        </Div>\n\n                        {/* RIGHT SCROLL BUTTON */}\n                        {needsScroll && canScrollRight && (\n                            <Div\n                                className=\"scroll-button right\"\n                                onClick={() => handleScroll(\"right\")}\n                            >\n                                <svg viewBox=\"0 0 24 24\">\n                                    <polyline points=\"9 6 15 12 9 18\" />\n                                </svg>\n                            </Div>\n                        )}\n                    </Div>\n                </Element>\n            </FormItem>\n        );\n    }\n);\nRadioTabGroup.displayName = \"RadioTabGroup\";\n"],"names":["RadioTabGroup","React","id","name","label","helpText","errorText","options","defaultValue","value","required","onChange","size","bgColour","disabled","props","ref","derivedName","useMemo","optionsWrapperRef","useRef","indicatorPos","setIndicatorPos","useState","needsScroll","setNeedsScroll","scrollPosition","setScrollPosition","maxScroll","setMaxScroll","labelsRef","measureWidths","useCallback","wrapper","inputWrapper","totalContentWidth","availableWidth","needsToScroll","useEffect","observer","selectedIndex","option","updateIndicator","width","transform","acc","timeoutId","handleChange","e","wrapperProps","inputProps","separateWrapperProps","handleScroll","direction","scrollAmount","newPosition","canScrollLeft","canScrollRight","classNames","reactId","finalGroupId","describedBy","deriveAriaIds","jsx","FormItem","jsxs","Element","Div","index","optionId","optionProps","finalId","el"],"mappings":"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"}

package/dist/components/Form/Select/Select.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 
-export declare const Select: React.ForwardRefExoticComponent<Omit<import('../../Element/constants').CommonAndHTMLProps<HTMLSelectElement>, keyof import('./constants').SelectCustomProps> & import('./constants').SelectCustomProps & React.RefAttributes<HTMLSelectElement>>;
+export declare const Select: React.ForwardRefExoticComponent<Omit<import('../../..').CommonAndHTMLProps<HTMLSelectElement>, keyof import('./constants').SelectCustomProps> & import('./constants').SelectCustomProps & React.RefAttributes<HTMLSelectElement>>;
 //# sourceMappingURL=Select.d.ts.map

package/dist/components/Form/Select/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/Select/Select.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkB,MAAM,OAAO,CAAC;AASvC,OAAO,cAAc,CAAC;AAMtB,eAAO,MAAM,MAAM,kPAsFlB,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/Select/Select.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkB,MAAM,OAAO,CAAC;AASvC,OAAO,cAAc,CAAC;AAMtB,eAAO,MAAM,MAAM,mOAsFlB,CAAC"}

package/dist/components/Meter/Meter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Meter.d.ts","sourceRoot":"","sources":["../../../src/components/Meter/Meter.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAOvE,OAAO,aAAa,CAAC;AAKrB,MAAM,WAAW,qBAAqB;IAClC,MAAO,CAAC,EAAG,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,gBAAgB;IAC7B,GAAG,EAAmB,MAAM,CAAC;IAC7B,GAAG,EAAmB,MAAM,CAAC;IAC7B,GAAG,EAAmB,MAAM,CAAC;IAC7B,IAAI,EAAkB,MAAM,CAAC;IAC7B,KAAK,EAAiB,MAAM,CAAC;IAC7B,OAAkB,CAAC,EAAG,MAAM,CAAC;IAC7B,iBAAkB,CAAC,EAAG,OAAO,CAAC;IAC9B,MAAkB,CAAC,EAAG,MAAM,CAAC;IAC7B,MAAkB,CAAC,EAAG,MAAM,CAAC;IAC7B,KAAkB,CAAC,EAAG,MAAM,CAAC;IAC7B,SAAkB,CAAC,EAAG,MAAM,CAAC;IAC7B,WAAkB,CAAC,EAAG,MAAM,CAAC;CAChC;AAED,MAAM,MAAM,gBAAgB,GAAG,gBAAgB,CAAC;AAChD,MAAM,MAAM,UAAU,GAAG,gBAAgB,GAAG,WAAW,CAAC;AACxD,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,kBAAkB,CAAC,cAAc,CAAC,EAAE,MAAM,qBAAqB,CAAC,GACrE,qBAAqB,CAAC;AAInD,eAAO,MAAM,KAAK,yGA4GjB,CAAC"}
+{"version":3,"file":"Meter.d.ts","sourceRoot":"","sources":["../../../src/components/Meter/Meter.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAOvE,OAAO,aAAa,CAAC;AAKrB,MAAM,WAAW,qBAAqB;IAClC,MAAO,CAAC,EAAG,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,gBAAgB;IAC7B,GAAG,EAAmB,MAAM,CAAC;IAC7B,GAAG,EAAmB,MAAM,CAAC;IAC7B,GAAG,EAAmB,MAAM,CAAC;IAC7B,IAAI,EAAkB,MAAM,CAAC;IAC7B,KAAK,EAAiB,MAAM,CAAC;IAC7B,OAAkB,CAAC,EAAG,MAAM,CAAC;IAC7B,iBAAkB,CAAC,EAAG,OAAO,CAAC;IAC9B,MAAkB,CAAC,EAAG,MAAM,CAAC;IAC7B,MAAkB,CAAC,EAAG,MAAM,CAAC;IAC7B,KAAkB,CAAC,EAAG,MAAM,CAAC;IAC7B,SAAkB,CAAC,EAAG,MAAM,CAAC;IAC7B,WAAkB,CAAC,EAAG,MAAM,CAAC;CAChC;AAED,MAAM,MAAM,gBAAgB,GAAG,gBAAgB,CAAC;AAChD,MAAM,MAAM,UAAU,GAAG,gBAAgB,GAAG,WAAW,CAAC;AACxD,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,kBAAkB,CAAC,cAAc,CAAC,EAAE,MAAM,qBAAqB,CAAC,GACrE,qBAAqB,CAAC;AAInD,eAAO,MAAM,KAAK,yGA2GjB,CAAC"}

package/dist/components/Meter/Meter.js

@@ -1,88 +1,83 @@
 "use client";
-import { jsxs as i, jsx as d } from "react/jsx-runtime";
-import L from "react";
-import { separateWrapperProps as M } from "../../utils/propSeparation.js";
+import { jsxs as o, jsx as i } from "react/jsx-runtime";
+import h from "react";
+import { separateWrapperProps as j } from "../../utils/propSeparation.js";
 /* empty css          */
-import { Text as g } from "../Typography/Text.js";
+import { Text as f } from "../Typography/Text.js";
 import { Element as p } from "../Element/Element.js";
-const j = L.forwardRef(
+const x = h.forwardRef(
   ({
-    label: e,
-    value: r,
-    height: h,
-    suffix: c,
-    showOptimumMarker: f,
-    ariaLabel: m,
-    description: n,
-    min: t,
-    max: s,
-    low: $,
-    high: w,
-    optimum: o,
-    ...u
-  }, v) => {
-    const P = o ? (o - t) / (s - t) * 100 : 0, l = () => {
-      const C = (r - t) / (s - t) * 100;
-      let a;
-      return r <= $ ? a = "Low" : r >= w ? a = "High" : a = "Normal", `Current value is ${r}${c || ""} (${C.toFixed(1)}%). Status: ${a}`;
-    }, { wrapperProps: y, inputProps: N } = M(u);
-    return /* @__PURE__ */ i(
+    label: a,
+    value: e,
+    height: u,
+    suffix: d,
+    showOptimumMarker: w,
+    ariaLabel: y,
+    description: c,
+    min: r,
+    max: n,
+    low: l,
+    high: m,
+    optimum: t,
+    ...N
+  }, P) => {
+    const $ = `meter-description-${h.useId().replace(/:/g, "")}`, g = t ? (t - r) / (n - r) * 100 : 0, v = () => {
+      const b = (e - r) / (n - r) * 100;
+      let s;
+      return e <= l ? s = "Low" : e >= m ? s = "High" : s = "Normal", `Current value is ${e}${d || ""} (${b.toFixed(1)}%). Status: ${s}`;
+    }, { wrapperProps: I, inputProps: M } = j(N);
+    return /* @__PURE__ */ o(
       p,
       {
         as: "div",
-        role: "region",
-        "aria-label": m || "Meter indicator",
-        ...y,
+        ...I,
         children: [
-          e && /* @__PURE__ */ i(
+          a && /* @__PURE__ */ o(
             p,
             {
               as: "div",
               "data-meter-meta": !0,
-              id: `meter-label-${e.toLowerCase().replace(/\s+/g, "-")}`,
+              id: `meter-label-${a.toLowerCase().replace(/\s+/g, "-")}`,
               children: [
-                /* @__PURE__ */ d(g, { children: e }),
-                /* @__PURE__ */ i(g, { children: [
-                  r,
-                  c && c
+                /* @__PURE__ */ i(f, { children: a }),
+                /* @__PURE__ */ o(f, { children: [
+                  e,
+                  d && d
                 ] })
               ]
             }
           ),
-          /* @__PURE__ */ i(
+          /* @__PURE__ */ o(
             "div",
             {
               className: "meter-wrapper",
               role: "presentation",
               children: [
-                /* @__PURE__ */ d(
+                /* @__PURE__ */ i(
                   p,
                   {
                     as: "meter",
                     "data-meter": !0,
-                    ref: v,
-                    value: r,
-                    min: t,
-                    max: s,
-                    low: $,
-                    high: w,
-                    optimum: o,
-                    ...N,
-                    style: { height: h },
-                    "aria-label": e || m || "Progress meter",
-                    "aria-valuemin": t,
-                    "aria-valuemax": s,
-                    "aria-valuenow": r,
-                    "aria-valuetext": l(),
-                    "aria-describedby": n ? `meter-description-${e == null ? void 0 : e.toLowerCase().replace(/\s+/g, "-")}` : void 0
+                    ref: P,
+                    value: e,
+                    min: r,
+                    max: n,
+                    low: l,
+                    high: m,
+                    optimum: t,
+                    ...M,
+                    style: { height: u },
+                    "aria-label": a || y || "Meter",
+                    "aria-valuetext": v(),
+                    "aria-describedby": c ? $ : void 0
                   }
                 ),
-                f && o && /* @__PURE__ */ d(
+                w && t && /* @__PURE__ */ i(
                   "div",
                   {
                     className: "optimum-marker",
-                    style: { left: `calc(${P}% - var(--meter-border-width))` },
-                    title: `Optimum: ${o}`,
+                    style: { left: `calc(${g}% - var(--meter-border-width))` },
+                    title: `Optimum: ${t}`,
                     role: "presentation",
                     "aria-hidden": "true"
                   }
@@ -90,12 +85,12 @@ const j = L.forwardRef(
               ]
             }
           ),
-          n && /* @__PURE__ */ d(
+          c && /* @__PURE__ */ i(
             "div",
             {
-              id: `meter-description-${e == null ? void 0 : e.toLowerCase().replace(/\s+/g, "-")}`,
+              id: $,
               className: "sr-only",
-              children: n
+              children: c
             }
           )
         ]
@@ -103,8 +98,8 @@ const j = L.forwardRef(
     );
   }
 );
-j.displayName = "Meter";
+x.displayName = "Meter";
 export {
-  j as Meter
+  x as Meter
 };
 //# sourceMappingURL=Meter.js.map

package/dist/components/Meter/Meter.js.map

@@ -1 +1 @@
-{"version":3,"file":"Meter.js","sources":["../../../src/components/Meter/Meter.tsx"],"sourcesContent":["// REACT CORE ==========================================================================================================\nimport React from \"react\";\n\n// LOCAL COMPONENTS ====================================================================================================\nimport { CommonAndHTMLProps, CommonProps } from \"../Element/constants\";\nimport { Element } from \"$element\";\n\n// UTILS ===============================================================================================================\nimport { separateWrapperProps } from \"../../utils/propSeparation\";\n\n// STYLES ==============================================================================================================\nimport \"./meter.css\";\n\n// OTHER ===============================================================================================================\nimport { Text } from \"../Typography/Text\";\n\nexport interface MeterLabelCustomProps {\n    suffix ? : string;\n}\n\nexport interface MeterCustomProps {\n    min                 : number;\n    max                 : number;\n    low                 : number;\n    high                : number;\n    value               : number;\n    optimum           ? : number;\n    showOptimumMarker ? : boolean;\n    suffix            ? : string;\n    height            ? : string;\n    label             ? : string;\n    ariaLabel         ? : string;\n    description       ? : string;\n}\n\nexport type MeterElementType = HTMLMeterElement;\nexport type MeterProps = MeterCustomProps & CommonProps;\nexport type MeterMetaProps = Omit<CommonAndHTMLProps<HTMLDivElement>, keyof MeterLabelCustomProps> &\n                             MeterLabelCustomProps;\n\n// TODO: Add size for label\n// COMPONENT ///////////////////////////////////////////////////////////////////////////////////////////////////////////\nexport const Meter = React.forwardRef(\n    ({\n        label,\n        value,\n        height,\n        suffix,\n        showOptimumMarker,\n        ariaLabel,\n        description,\n        min,\n        max,\n        low,\n        high,\n        optimum,\n        ...props\n    } : MeterProps, ref : React.Ref<MeterElementType>) => {\n        const optimumPositionPercent = optimum ? (\n            (optimum - min) / (max - min)\n        ) * 100 : 0;\n\n        const getValueDescription = () => {\n            const percentage = (\n                (value - min) / (max - min)\n            ) * 100;\n            let status : string;\n\n            if (value <= low) {\n                status = \"Low\";\n            } else if (value >= high) {\n                status = \"High\";\n            } else {\n                status = \"Normal\";\n            }\n\n            return `Current value is ${value}${suffix || \"\"} (${percentage.toFixed(1)}%). Status: ${status}`;\n        };\n\n        // Separate wrapper-level props (margin, padding, etc.) from meter-specific props\n        const {wrapperProps, inputProps} = separateWrapperProps(props);\n\n        return (\n            <Element<HTMLDivElement>\n                as=\"div\"\n                role=\"region\"\n                aria-label={ariaLabel || \"Meter indicator\"}\n                {...wrapperProps}\n            >\n                {label && (\n                    <Element<HTMLDivElement>\n                        as=\"div\"\n                        data-meter-meta\n                        id={`meter-label-${label.toLowerCase().replace(/\\s+/g, \"-\")}`}\n                    >\n                        <Text>{label}</Text>\n                        <Text>\n                            {value}\n                            {suffix && suffix}\n                        </Text>\n                    </Element>\n                )}\n\n                <div\n                    className=\"meter-wrapper\"\n                    role=\"presentation\"\n                >\n                    <Element<MeterElementType>\n                        as=\"meter\"\n                        data-meter\n                        ref={ref}\n                        value={value}\n                        min={min}\n                        max={max}\n                        low={low}\n                        high={high}\n                        optimum={optimum}\n                        {...inputProps}\n                        style={{height}}\n                        aria-label={label || ariaLabel || \"Progress meter\"}\n                        aria-valuemin={min}\n                        aria-valuemax={max}\n                        aria-valuenow={value}\n                        aria-valuetext={getValueDescription()}\n                        aria-describedby={description ? `meter-description-${label?.toLowerCase()\n                            .replace(/\\s+/g, \"-\")}` : undefined}\n                    />\n\n                    {showOptimumMarker && optimum && (\n                        <div\n                            className=\"optimum-marker\"\n                            style={{left : `calc(${optimumPositionPercent}% - var(--meter-border-width))`}}\n                            title={`Optimum: ${optimum}`}\n                            role=\"presentation\"\n                            aria-hidden=\"true\"\n                        />\n                    )}\n                </div>\n\n                {description && (\n                    <div\n                        id={`meter-description-${label?.toLowerCase().replace(/\\s+/g, \"-\")}`}\n                        className=\"sr-only\"\n                    >\n                        {description}\n                    </div>\n                )}\n            </Element>\n        );\n    },\n);\nMeter.displayName = \"Meter\";"],"names":["Meter","React","label","value","height","suffix","showOptimumMarker","ariaLabel","description","min","max","low","high","optimum","props","ref","optimumPositionPercent","getValueDescription","percentage","status","wrapperProps","inputProps","separateWrapperProps","jsxs","Element","jsx","Text"],"mappings":"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"}
+{"version":3,"file":"Meter.js","sources":["../../../src/components/Meter/Meter.tsx"],"sourcesContent":["// REACT CORE ==========================================================================================================\nimport React from \"react\";\n\n// LOCAL COMPONENTS ====================================================================================================\nimport { CommonAndHTMLProps, CommonProps } from \"../Element/constants\";\nimport { Element } from \"$element\";\n\n// UTILS ===============================================================================================================\nimport { separateWrapperProps } from \"../../utils/propSeparation\";\n\n// STYLES ==============================================================================================================\nimport \"./meter.css\";\n\n// OTHER ===============================================================================================================\nimport { Text } from \"../Typography/Text\";\n\nexport interface MeterLabelCustomProps {\n    suffix ? : string;\n}\n\nexport interface MeterCustomProps {\n    min                 : number;\n    max                 : number;\n    low                 : number;\n    high                : number;\n    value               : number;\n    optimum           ? : number;\n    showOptimumMarker ? : boolean;\n    suffix            ? : string;\n    height            ? : string;\n    label             ? : string;\n    ariaLabel         ? : string;\n    description       ? : string;\n}\n\nexport type MeterElementType = HTMLMeterElement;\nexport type MeterProps = MeterCustomProps & CommonProps;\nexport type MeterMetaProps = Omit<CommonAndHTMLProps<HTMLDivElement>, keyof MeterLabelCustomProps> &\n                             MeterLabelCustomProps;\n\n// TODO: Add size for label\n// COMPONENT ///////////////////////////////////////////////////////////////////////////////////////////////////////////\nexport const Meter = React.forwardRef(\n    ({\n        label,\n        value,\n        height,\n        suffix,\n        showOptimumMarker,\n        ariaLabel,\n        description,\n        min,\n        max,\n        low,\n        high,\n        optimum,\n        ...props\n    } : MeterProps, ref : React.Ref<MeterElementType>) => {\n        // useId (not the label slug) so the description id is stable and unique even\n        // without a label; strip the colons useId emits so it is selector-safe.\n        const reactId       = React.useId();\n        const descriptionId = `meter-description-${reactId.replace(/:/g, \"\")}`;\n\n        const optimumPositionPercent = optimum ? (\n            (optimum - min) / (max - min)\n        ) * 100 : 0;\n\n        const getValueDescription = () => {\n            const percentage = (\n                (value - min) / (max - min)\n            ) * 100;\n            let status : string;\n\n            if (value <= low) {\n                status = \"Low\";\n            } else if (value >= high) {\n                status = \"High\";\n            } else {\n                status = \"Normal\";\n            }\n\n            return `Current value is ${value}${suffix || \"\"} (${percentage.toFixed(1)}%). Status: ${status}`;\n        };\n\n        // Separate wrapper-level props (margin, padding, etc.) from meter-specific props\n        const {wrapperProps, inputProps} = separateWrapperProps(props);\n\n        return (\n            <Element<HTMLDivElement>\n                as=\"div\"\n                {...wrapperProps}\n            >\n                {label && (\n                    <Element<HTMLDivElement>\n                        as=\"div\"\n                        data-meter-meta\n                        id={`meter-label-${label.toLowerCase().replace(/\\s+/g, \"-\")}`}\n                    >\n                        <Text>{label}</Text>\n                        <Text>\n                            {value}\n                            {suffix && suffix}\n                        </Text>\n                    </Element>\n                )}\n\n                <div\n                    className=\"meter-wrapper\"\n                    role=\"presentation\"\n                >\n                    <Element<MeterElementType>\n                        as=\"meter\"\n                        data-meter\n                        ref={ref}\n                        value={value}\n                        min={min}\n                        max={max}\n                        low={low}\n                        high={high}\n                        optimum={optimum}\n                        {...inputProps}\n                        style={{height}}\n                        aria-label={label || ariaLabel || \"Meter\"}\n                        aria-valuetext={getValueDescription()}\n                        aria-describedby={description ? descriptionId : undefined}\n                    />\n\n                    {showOptimumMarker && optimum && (\n                        <div\n                            className=\"optimum-marker\"\n                            style={{left : `calc(${optimumPositionPercent}% - var(--meter-border-width))`}}\n                            title={`Optimum: ${optimum}`}\n                            role=\"presentation\"\n                            aria-hidden=\"true\"\n                        />\n                    )}\n                </div>\n\n                {description && (\n                    <div\n                        id={descriptionId}\n                        className=\"sr-only\"\n                    >\n                        {description}\n                    </div>\n                )}\n            </Element>\n        );\n    },\n);\nMeter.displayName = \"Meter\";"],"names":["Meter","React","label","value","height","suffix","showOptimumMarker","ariaLabel","description","min","max","low","high","optimum","props","ref","descriptionId","optimumPositionPercent","getValueDescription","percentage","status","wrapperProps","inputProps","separateWrapperProps","jsxs","Element","jsx","Text"],"mappings":";;;;;;AA0CO,MAAMA,IAAQC,EAAM;AAAA,EACvB,CAAC;AAAA,IACG,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,QAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,WAAAC;AAAA,IACA,aAAAC;AAAA,IACA,KAAAC;AAAA,IACA,KAAAC;AAAA,IACA,KAAAC;AAAA,IACA,MAAAC;AAAA,IACA,SAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GACSC,MAAsC;AAIlD,UAAMC,IAAgB,qBADAf,EAAM,MAAA,EACuB,QAAQ,MAAM,EAAE,CAAC,IAE9DgB,IAAyBJ,KAC1BA,IAAUJ,MAAQC,IAAMD,KACzB,MAAM,GAEJS,IAAsB,MAAM;AAC9B,YAAMC,KACDhB,IAAQM,MAAQC,IAAMD,KACvB;AACJ,UAAIW;AAEJ,aAAIjB,KAASQ,IACTS,IAAS,QACFjB,KAASS,IAChBQ,IAAS,SAETA,IAAS,UAGN,oBAAoBjB,CAAK,GAAGE,KAAU,EAAE,KAAKc,EAAW,QAAQ,CAAC,CAAC,eAAeC,CAAM;AAAA,IAClG,GAGM,EAAC,cAAAC,GAAc,YAAAC,MAAcC,EAAqBT,CAAK;AAE7D,WACI,gBAAAU;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,IAAG;AAAA,QACF,GAAGJ;AAAA,QAEH,UAAA;AAAA,UAAAnB,KACG,gBAAAsB;AAAA,YAACC;AAAA,YAAA;AAAA,cACG,IAAG;AAAA,cACH,mBAAe;AAAA,cACf,IAAI,eAAevB,EAAM,YAAA,EAAc,QAAQ,QAAQ,GAAG,CAAC;AAAA,cAE3D,UAAA;AAAA,gBAAA,gBAAAwB,EAACC,KAAM,UAAAzB,EAAA,CAAM;AAAA,kCACZyB,GAAA,EACI,UAAA;AAAA,kBAAAxB;AAAA,kBACAE,KAAUA;AAAA,gBAAA,EAAA,CACf;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAIR,gBAAAmB;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,WAAU;AAAA,cACV,MAAK;AAAA,cAEL,UAAA;AAAA,gBAAA,gBAAAE;AAAA,kBAACD;AAAA,kBAAA;AAAA,oBACG,IAAG;AAAA,oBACH,cAAU;AAAA,oBACV,KAAAV;AAAA,oBACA,OAAAZ;AAAA,oBACA,KAAAM;AAAA,oBACA,KAAAC;AAAA,oBACA,KAAAC;AAAA,oBACA,MAAAC;AAAA,oBACA,SAAAC;AAAA,oBACC,GAAGS;AAAA,oBACJ,OAAO,EAAC,QAAAlB,EAAA;AAAA,oBACR,cAAYF,KAASK,KAAa;AAAA,oBAClC,kBAAgBW,EAAA;AAAA,oBAChB,oBAAkBV,IAAcQ,IAAgB;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAGnDV,KAAqBO,KAClB,gBAAAa;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACG,WAAU;AAAA,oBACV,OAAO,EAAC,MAAO,QAAQT,CAAsB,iCAAA;AAAA,oBAC7C,OAAO,YAAYJ,CAAO;AAAA,oBAC1B,MAAK;AAAA,oBACL,eAAY;AAAA,kBAAA;AAAA,gBAAA;AAAA,cAChB;AAAA,YAAA;AAAA,UAAA;AAAA,UAIPL,KACG,gBAAAkB;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,IAAIV;AAAA,cACJ,WAAU;AAAA,cAET,UAAAR;AAAA,YAAA;AAAA,UAAA;AAAA,QACL;AAAA,MAAA;AAAA,IAAA;AAAA,EAIhB;AACJ;AACAR,EAAM,cAAc;"}

package/dist/components/Modal/Modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAGzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAI1D,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC;AAE9C,MAAM,WAAW,gBAAgB;IACzB,EAAE,EAAgB,MAAM,CAAC;IACzB,MAAc,CAAC,EAAG,OAAO,CAAC;IAC1B,OAAc,CAAC,EAAG,MAAM,IAAI,CAAC;IAC7B,aAAc,CAAC,EAAG,OAAO,CAAC;IAC1B,YAAc,CAAC,EAAG,OAAO,CAAC;IAC1B,YAAc,CAAC,EAAG,OAAO,CAAC;IAC1B,KAAc,CAAC,EAAG,MAAM,CAAC;IACzB,WAAc,CAAC,EAAG,MAAM,CAAC;CAChC;AAED,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,EAAE,MAAM,gBAAgB,CAAC,GAAG,gBAAgB,CAAC;AAG/G,eAAO,MAAM,KAAK,4JAwGjB,CAAC"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAGzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAI1D,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC;AAE9C,MAAM,WAAW,gBAAgB;IACzB,EAAE,EAAgB,MAAM,CAAC;IACzB,MAAc,CAAC,EAAG,OAAO,CAAC;IAC1B,OAAc,CAAC,EAAG,MAAM,IAAI,CAAC;IAC7B,aAAc,CAAC,EAAG,OAAO,CAAC;IAC1B,YAAc,CAAC,EAAG,OAAO,CAAC;IAC1B,YAAc,CAAC,EAAG,OAAO,CAAC;IAC1B,KAAc,CAAC,EAAG,MAAM,CAAC;IACzB,WAAc,CAAC,EAAG,MAAM,CAAC;CAChC;AAED,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,EAAE,MAAM,gBAAgB,CAAC,GAAG,gBAAgB,CAAC;AAG/G,eAAO,MAAM,KAAK,4JA4GjB,CAAC"}

package/dist/components/Modal/Modal.js

@@ -1,27 +1,28 @@
 "use client";
 import { jsxs as E, jsx as n } from "react/jsx-runtime";
-import y, { useEffect as m } from "react";
+import y, { useEffect as u } from "react";
 /* empty css          */
 import { Element as x } from "../Element/Element.js";
 const M = y.forwardRef(
   ({
-    id: u,
-    children: s,
-    classNames: l = [],
-    isOpen: r = !1,
-    onClose: o,
+    id: m,
+    children: f,
+    classNames: o = [],
+    isOpen: d = !1,
+    onClose: r,
     isDismissible: i = !0,
-    showBackdrop: f,
+    showBackdrop: s,
     blurBackdrop: p,
     label: g,
-    description: d,
+    description: l,
     ...b
   }, h) => {
-    const t = `${u}`, c = d ? `${t}-description` : void 0;
-    return f && l.push("show-backdrop"), p && l.push("blur-backdrop"), m(() => {
+    o = [...o];
+    const t = `${m}`, c = l ? `${t}-description` : void 0;
+    return s && o.push("show-backdrop"), p && o.push("blur-backdrop"), u(() => {
       const e = document.querySelector(`#${t}[data-modal]`);
       if (!(!e || !(e instanceof HTMLElement)))
-        if (r) {
+        if (d) {
           e.showPopover();
           const a = e.querySelectorAll(
             'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
@@ -29,14 +30,14 @@ const M = y.forwardRef(
           a.length && a[0].focus();
         } else
           e.matches(":popover-open") && e.hidePopover();
-    }, [r, t]), m(() => {
+    }, [d, t]), u(() => {
       const e = document.querySelector(`#${t}[data-modal]`);
       if (!e || !(e instanceof HTMLElement)) return;
       const a = (v) => {
-        v.newState === "closed" && r && o && o();
+        v.newState === "closed" && d && r && r();
       };
       return e.addEventListener("toggle", a), () => e.removeEventListener("toggle", a);
-    }, [t, r, o]), /* @__PURE__ */ E(
+    }, [t, d, r]), /* @__PURE__ */ E(
       x,
       {
         as: "dialog",
@@ -44,25 +45,25 @@ const M = y.forwardRef(
         "data-modal": !0,
         popover: i ? "auto" : "manual",
         ref: h,
-        classNames: l,
+        classNames: o,
         role: "dialog",
         "aria-modal": "true",
         "aria-label": g || "Modal dialog",
         "aria-describedby": c,
         ...b,
         children: [
-          i && o && /* @__PURE__ */ n(
+          i && r && /* @__PURE__ */ n(
             "button",
             {
               type: "button",
               className: "dismiss-button",
-              onClick: o,
+              onClick: r,
               "aria-label": "Close modal",
               children: "×"
             }
           ),
-          d && /* @__PURE__ */ n("div", { id: c, className: "sr-only", children: d }),
-          /* @__PURE__ */ n("div", { role: "document", children: s })
+          l && /* @__PURE__ */ n("div", { id: c, className: "sr-only", children: l }),
+          /* @__PURE__ */ n("div", { role: "document", children: f })
         ]
       }
     );