fictoan-react 1.8.4 → 1.9.1-alpha.25

package/dist/components/Form/ListBox/ListBox.js

@@ -1,6 +1,6 @@
 "use client";
 "use client;";
-import React__default, { useState, useEffect, useRef } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import { Div } from "../../Element/Tags.js";
 import { InputField } from "../InputField/InputField.js";
 import { Badge } from "../../Badge/Badge.js";
@@ -8,7 +8,7 @@ import { Text } from "../../Typography/Text.js";
 import { BaseInputComponent } from "../BaseInputComponent/BaseInputComponent.js";
 import { u as useClickOutside } from "../../../UseClickOutside-CJ5IQE6n.js";
 import { searchOptions } from "./listBoxUtils.js";
-const ListBox = React__default.forwardRef(
+const ListBox = React.forwardRef(
   ({
     options,
     label,
@@ -167,7 +167,7 @@ const ListBox = React__default.forwardRef(
         activeOption == null ? void 0 : activeOption.scrollIntoView({ block: "nearest" });
       }
     }, [activeIndex]);
-    return /* @__PURE__ */ React__default.createElement(
+    return /* @__PURE__ */ React.createElement(
       BaseInputComponent,
       {
         "data-list-box": true,
@@ -176,7 +176,7 @@ const ListBox = React__default.forwardRef(
         ref: effectiveRef,
         ...props
       },
-      label && /* @__PURE__ */ React__default.createElement(
+      label && /* @__PURE__ */ React.createElement(
         "label",
         {
           id: `${listboxId}-label`,
@@ -185,7 +185,7 @@ const ListBox = React__default.forwardRef(
         },
         label
       ),
-      /* @__PURE__ */ React__default.createElement(
+      /* @__PURE__ */ React.createElement(
         Div,
         {
           className: "list-box-input-wrapper",
@@ -199,7 +199,7 @@ const ListBox = React__default.forwardRef(
           "aria-owns": `${listboxId}-listbox`,
           tabIndex: disabled ? -1 : 0
         },
-        allowMultiSelect ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, selectedOptions.length > 0 ? /* @__PURE__ */ React__default.createElement(Div, { className: "options-wrapper" }, /* @__PURE__ */ React__default.createElement(Div, { className: "options-list" }, selectedOptions.map((option) => /* @__PURE__ */ React__default.createElement(
+        allowMultiSelect ? /* @__PURE__ */ React.createElement(React.Fragment, null, selectedOptions.length > 0 ? /* @__PURE__ */ React.createElement(Div, { className: "options-wrapper" }, /* @__PURE__ */ React.createElement(Div, { className: "options-list" }, selectedOptions.map((option) => /* @__PURE__ */ React.createElement(
           Badge,
           {
             key: option.value,
@@ -211,7 +211,7 @@ const ListBox = React__default.forwardRef(
             textColour: badgeTextColour || badgeTextColor
           },
           option.label
-        ))), selectionLimit && selectedOptions.length >= selectionLimit && /* @__PURE__ */ React__default.createElement(
+        ))), selectionLimit && selectedOptions.length >= selectionLimit && /* @__PURE__ */ React.createElement(
           Text,
           {
             className: "options-limit-warning",
@@ -223,7 +223,7 @@ const ListBox = React__default.forwardRef(
           selectionLimit,
           " option",
           selectionLimit === 1 ? "" : "s"
-        )) : /* @__PURE__ */ React__default.createElement("span", { className: "placeholder" }, placeholder), selectedOptions.length > 0 && /* @__PURE__ */ React__default.createElement(
+        )) : /* @__PURE__ */ React.createElement("span", { className: "placeholder" }, placeholder), selectedOptions.length > 0 && /* @__PURE__ */ React.createElement(
           Div,
           {
             className: "icon-wrapper clear-all",
@@ -233,21 +233,21 @@ const ListBox = React__default.forwardRef(
             tabIndex: 0,
             "aria-label": "Clear all selected options"
           },
-          /* @__PURE__ */ React__default.createElement("svg", { viewBox: "0 0 24 24", "aria-hidden": "true" }, /* @__PURE__ */ React__default.createElement("line", { x1: "5", y1: "5", x2: "19", y2: "19" }), /* @__PURE__ */ React__default.createElement("line", { x1: "5", y1: "19", x2: "19", y2: "5" }))
+          /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 24 24", "aria-hidden": "true" }, /* @__PURE__ */ React.createElement("line", { x1: "5", y1: "5", x2: "19", y2: "19" }), /* @__PURE__ */ React.createElement("line", { x1: "5", y1: "19", x2: "19", y2: "5" }))
         )) : (
           // FOR PLAIN TEXT SINGLE-SELECT OPTION =========================================================
-          selectedOption ? /* @__PURE__ */ React__default.createElement(Text, { className: "selected-option" }, selectedOption.label) : /* @__PURE__ */ React__default.createElement("span", { className: "placeholder" }, placeholder)
+          selectedOption ? /* @__PURE__ */ React.createElement(Text, { className: "selected-option" }, selectedOption.label) : /* @__PURE__ */ React.createElement("span", { className: "placeholder" }, placeholder)
         ),
-        /* @__PURE__ */ React__default.createElement(Div, { className: "icon-wrapper chevrons" }, /* @__PURE__ */ React__default.createElement("svg", { viewBox: "0 0 24 24", "aria-hidden": "true" }, /* @__PURE__ */ React__default.createElement("polyline", { points: "6 9 12 4 18 9" }), /* @__PURE__ */ React__default.createElement("polyline", { points: "6 15 12 20 18 15" })))
+        /* @__PURE__ */ React.createElement(Div, { className: "icon-wrapper chevrons" }, /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 24 24", "aria-hidden": "true" }, /* @__PURE__ */ React.createElement("polyline", { points: "6 9 12 4 18 9" }), /* @__PURE__ */ React.createElement("polyline", { points: "6 15 12 20 18 15" })))
       ),
-      isOpen && !disabled && /* @__PURE__ */ React__default.createElement(
+      isOpen && !disabled && /* @__PURE__ */ React.createElement(
         Div,
         {
           className: "list-box-dropdown",
           role: "dialog",
           "aria-label": `${label || "Options"} dropdown`
         },
-        /* @__PURE__ */ React__default.createElement(Div, { className: "list-box-search-wrapper" }, /* @__PURE__ */ React__default.createElement(
+        /* @__PURE__ */ React.createElement(Div, { className: "list-box-search-wrapper" }, /* @__PURE__ */ React.createElement(
           InputField,
           {
             type: "text",
@@ -262,7 +262,7 @@ const ListBox = React__default.forwardRef(
             "aria-controls": `${listboxId}-listbox`,
             "aria-label": "Search options"
           }
-        ), allowCustomEntries && searchValue.trim() && !selectedOptions.some((opt) => opt.label.toLowerCase() === searchValue.trim().toLowerCase()) && /* @__PURE__ */ React__default.createElement(
+        ), allowCustomEntries && searchValue.trim() && !selectedOptions.some((opt) => opt.label.toLowerCase() === searchValue.trim().toLowerCase()) && /* @__PURE__ */ React.createElement(
           "kbd",
           {
             className: "list-box-enter-key",
@@ -270,7 +270,7 @@ const ListBox = React__default.forwardRef(
           },
           "↵"
         )),
-        /* @__PURE__ */ React__default.createElement(
+        /* @__PURE__ */ React.createElement(
           "ul",
           {
             id: `${listboxId}-listbox`,
@@ -281,7 +281,7 @@ const ListBox = React__default.forwardRef(
             "aria-busy": props.isLoading,
             tabIndex: -1
           },
-          filteredOptions.length > 0 ? filteredOptions.map((option, index) => /* @__PURE__ */ React__default.createElement(
+          filteredOptions.length > 0 ? filteredOptions.map((option, index) => /* @__PURE__ */ React.createElement(
             "li",
             {
               key: option.value,
@@ -295,7 +295,7 @@ const ListBox = React__default.forwardRef(
               tabIndex: -1
             },
             option.customLabel || option.label
-          )) : /* @__PURE__ */ React__default.createElement(
+          )) : /* @__PURE__ */ React.createElement(
             "li",
             {
               className: "list-box-option disabled",

package/dist/components/Form/PinInputField/PinInputField.js

@@ -1,6 +1,6 @@
 "use client";
 "use client;";
-import React__default, { useRef, useState, useCallback, useEffect, createRef, useImperativeHandle } from "react";
+import React, { useRef, useState, useCallback, useEffect, createRef, useImperativeHandle } from "react";
 import { InputField } from "../InputField/InputField.js";
 import { Div } from "../../Element/Tags.js";
 function validate(value, type) {
@@ -9,7 +9,7 @@ function validate(value, type) {
   const regex = type === "alphanumeric" ? ALPHA_NUMERIC_REGEX : NUMERIC_REGEX;
   return regex.test(value);
 }
-const PinInputField = React__default.forwardRef(
+const PinInputField = React.forwardRef(
   ({
     numberOfFields: length,
     onChange,
@@ -174,7 +174,7 @@ const PinInputField = React__default.forwardRef(
     if (isFullWidth) {
       classNames.push("full-width");
     }
-    return /* @__PURE__ */ React__default.createElement(
+    return /* @__PURE__ */ React.createElement(
       Div,
       {
         "data-pin-input-field": true,
@@ -185,7 +185,7 @@ const PinInputField = React__default.forwardRef(
         "aria-required": props.required,
         ...props
       },
-      [...Array(length)].map((_, i) => /* @__PURE__ */ React__default.createElement(
+      [...Array(length)].map((_, i) => /* @__PURE__ */ React.createElement(
         InputField,
         {
           key: i,

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

@@ -1,14 +1,14 @@
 "use client";
 "use client;";
-import React__default from "react";
+import React from "react";
 import { Element } from "../../Element/Element.js";
 import { BaseInputComponent } from "../BaseInputComponent/BaseInputComponent.js";
-const RadioButton = React__default.forwardRef(
+const RadioButton = React.forwardRef(
   ({
     onClick,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ React__default.createElement(
+    return /* @__PURE__ */ React.createElement(
       Element,
       {
         as: "div",
@@ -19,7 +19,7 @@ const RadioButton = React__default.forwardRef(
         "aria-checked": props.checked,
         "aria-disabled": props.disabled
       },
-      /* @__PURE__ */ React__default.createElement(
+      /* @__PURE__ */ React.createElement(
         BaseInputComponent,
         {
           as: "input",

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

@@ -1,16 +1,16 @@
 "use client";
 "use client;";
-import React__default from "react";
+import React from "react";
 import { RadioButton } from "./RadioButton.js";
 import { Element } from "../../Element/Element.js";
 import { BaseInputComponent } from "../BaseInputComponent/BaseInputComponent.js";
 const RadioGroupOptions = ({ options, defaultValue, required, ...props }) => {
-  return /* @__PURE__ */ React__default.createElement(Element, { as: "div", required }, options.map((option, index) => {
-    return /* @__PURE__ */ React__default.createElement(RadioButton, { key: index, ...props, ...option });
+  return /* @__PURE__ */ React.createElement(Element, { as: "div", required }, options.map((option, index) => {
+    return /* @__PURE__ */ React.createElement(RadioButton, { key: index, ...props, ...option });
   }));
 };
-const RadioGroup = React__default.forwardRef((props, ref) => {
-  return /* @__PURE__ */ React__default.createElement(BaseInputComponent, { as: RadioGroupOptions, ref, ...props });
+const RadioGroup = React.forwardRef((props, ref) => {
+  return /* @__PURE__ */ React.createElement(BaseInputComponent, { as: RadioGroupOptions, ref, ...props });
 });
 export {
   RadioGroup

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

@@ -1,10 +1,10 @@
 "use client";
 "use client;";
-import React__default from "react";
+import React from "react";
 import { Div } from "../../Element/Tags.js";
 import { BaseInputComponent } from "../BaseInputComponent/BaseInputComponent.js";
 const RadioTabGroupOptions = ({ options, defaultValue, value, required, ...props }) => {
-  return /* @__PURE__ */ React__default.createElement(Div, { "data-radio-tab-group": true, name: props.name, required }, options.map((option) => /* @__PURE__ */ React__default.createElement(React__default.Fragment, { key: option.id }, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React.createElement(Div, { "data-radio-tab-group": true, name: props.name, required }, options.map((option) => /* @__PURE__ */ React.createElement(React.Fragment, { key: option.id }, /* @__PURE__ */ React.createElement(
     "input",
     {
       type: "radio",
@@ -12,15 +12,15 @@ const RadioTabGroupOptions = ({ options, defaultValue, value, required, ...props
       ...option,
       checked: value === option.value
     }
-  ), /* @__PURE__ */ React__default.createElement("label", { htmlFor: option.id }, option.label))));
+  ), /* @__PURE__ */ React.createElement("label", { htmlFor: option.id }, option.label))));
 };
-const RadioTabGroup = React__default.forwardRef(
+const RadioTabGroup = React.forwardRef(
   ({ size = "medium", ...props }, ref) => {
     let classNames = [];
     if (size) {
       classNames.push(`size-${size}`);
     }
-    return /* @__PURE__ */ React__default.createElement(
+    return /* @__PURE__ */ React.createElement(
       BaseInputComponent,
       {
         as: RadioTabGroupOptions,

package/dist/components/Form/Range/Range.js

@@ -1,13 +1,13 @@
 "use client";
 "use client;";
-import React__default from "react";
+import React from "react";
 import { Element } from "../../Element/Element.js";
 import { Div } from "../../Element/Tags.js";
 import { BaseInputComponent } from "../BaseInputComponent/BaseInputComponent.js";
 import { InputLabel } from "../InputLabel/InputLabel.js";
 import { Text } from "../../Typography/Text.js";
-const Range = React__default.forwardRef(({ label, value, suffix, ...props }, ref) => {
-  return /* @__PURE__ */ React__default.createElement(Element, { "data-range": true, ref }, label && /* @__PURE__ */ React__default.createElement(Div, { "data-range-meta": true }, /* @__PURE__ */ React__default.createElement(InputLabel, { className: "range-label", label, htmlFor: props.id }), /* @__PURE__ */ React__default.createElement(Text, { className: "range-value" }, value, suffix && suffix)), /* @__PURE__ */ React__default.createElement(
+const Range = React.forwardRef(({ label, value, suffix, ...props }, ref) => {
+  return /* @__PURE__ */ React.createElement(Element, { "data-range": true, ref }, label && /* @__PURE__ */ React.createElement(Div, { "data-range-meta": true }, /* @__PURE__ */ React.createElement(InputLabel, { className: "range-label", label, htmlFor: props.id }), /* @__PURE__ */ React.createElement(Text, { className: "range-value" }, value, suffix && suffix)), /* @__PURE__ */ React.createElement(
     BaseInputComponent,
     {
       as: "input",

package/dist/components/Form/Select/Select.js

@@ -1,21 +1,21 @@
 "use client";
 "use client;";
-import React__default from "react";
+import React from "react";
 import { Element } from "../../Element/Element.js";
 import { BaseInputComponent } from "../BaseInputComponent/BaseInputComponent.js";
 import { Div } from "../../Element/Tags.js";
 const SelectWithOptions = ({ options, className, ...props }) => {
-  const renderOption = (option) => /* @__PURE__ */ React__default.createElement(Element, { as: "option", key: option.value, value: option.value, disabled: option.disabled }, option.label);
-  const renderOptGroup = (group) => /* @__PURE__ */ React__default.createElement(Element, { as: "optgroup", key: group.label, label: group.label }, group.options.map(renderOption));
-  return /* @__PURE__ */ React__default.createElement(Div, { "data-select": true, className, disabled: props.disabled }, /* @__PURE__ */ React__default.createElement(Element, { as: "select", ...props }, options.map(
+  const renderOption = (option) => /* @__PURE__ */ React.createElement(Element, { as: "option", key: option.value, value: option.value, disabled: option.disabled }, option.label);
+  const renderOptGroup = (group) => /* @__PURE__ */ React.createElement(Element, { as: "optgroup", key: group.label, label: group.label }, group.options.map(renderOption));
+  return /* @__PURE__ */ React.createElement(Div, { "data-select": true, className, disabled: props.disabled }, /* @__PURE__ */ React.createElement(Element, { as: "select", ...props }, options.map(
     (option) => (
       // @ts-ignore
       "options" in option ? renderOptGroup(option) : renderOption(option)
     )
   )));
 };
-const Select = React__default.forwardRef((props, ref) => {
-  return /* @__PURE__ */ React__default.createElement(BaseInputComponent, { as: SelectWithOptions, ref, ...props });
+const Select = React.forwardRef((props, ref) => {
+  return /* @__PURE__ */ React.createElement(BaseInputComponent, { as: SelectWithOptions, ref, ...props });
 });
 export {
   Select

package/dist/components/Form/TextArea/TextArea.js

@@ -1,9 +1,9 @@
 "use client";
 "use client;";
-import React__default from "react";
+import React from "react";
 import { BaseInputComponent } from "../BaseInputComponent/BaseInputComponent.js";
-const TextArea = React__default.forwardRef((props, ref) => {
-  return /* @__PURE__ */ React__default.createElement(BaseInputComponent, { as: "textarea", "data-textarea": true, ref, placeholder: " ", ...props });
+const TextArea = React.forwardRef((props, ref) => {
+  return /* @__PURE__ */ React.createElement(BaseInputComponent, { as: "textarea", "data-textarea": true, ref, placeholder: " ", ...props });
 });
 export {
   TextArea

package/dist/components/Meter/Meter.js

@@ -1,9 +1,9 @@
 "use client";
 "use client;";
-import React__default from "react";
+import React from "react";
 import { Element } from "../Element/Element.js";
 import { Text } from "../Typography/Text.js";
-const Meter = React__default.forwardRef(
+const Meter = React.forwardRef(
   ({
     label,
     value,
@@ -32,29 +32,29 @@ const Meter = React__default.forwardRef(
       }
       return `Current value is ${value}${suffix || ""} (${percentage.toFixed(1)}%). Status: ${status}`;
     };
-    return /* @__PURE__ */ React__default.createElement(
+    return /* @__PURE__ */ React.createElement(
       "div",
       {
         role: "region",
         "aria-label": ariaLabel || "Meter indicator"
       },
-      label && /* @__PURE__ */ React__default.createElement(
+      label && /* @__PURE__ */ React.createElement(
         Element,
         {
           as: "div",
           "data-meter-meta": true,
           id: `meter-label-${label.toLowerCase().replace(/\s+/g, "-")}`
         },
-        /* @__PURE__ */ React__default.createElement(Text, null, label),
-        /* @__PURE__ */ React__default.createElement(Text, null, value, suffix && suffix)
+        /* @__PURE__ */ React.createElement(Text, null, label),
+        /* @__PURE__ */ React.createElement(Text, null, value, suffix && suffix)
       ),
-      /* @__PURE__ */ React__default.createElement(
+      /* @__PURE__ */ React.createElement(
         "div",
         {
           className: "meter-wrapper",
           role: "presentation"
         },
-        /* @__PURE__ */ React__default.createElement(
+        /* @__PURE__ */ React.createElement(
           Element,
           {
             as: "meter",
@@ -76,7 +76,7 @@ const Meter = React__default.forwardRef(
             "aria-describedby": description ? `meter-description-${label == null ? void 0 : label.toLowerCase().replace(/\s+/g, "-")}` : void 0
           }
         ),
-        showOptimumMarker && optimum && /* @__PURE__ */ React__default.createElement(
+        showOptimumMarker && optimum && /* @__PURE__ */ React.createElement(
           "div",
           {
             className: "optimum-marker",
@@ -87,7 +87,7 @@ const Meter = React__default.forwardRef(
           }
         )
       ),
-      description && /* @__PURE__ */ React__default.createElement(
+      description && /* @__PURE__ */ React.createElement(
         "div",
         {
           id: `meter-description-${label == null ? void 0 : label.toLowerCase().replace(/\s+/g, "-")}`,

package/dist/components/Modal/Modal.js

@@ -1,9 +1,9 @@
 "use client";
 "use client;";
-import React__default, { useEffect } from "react";
+import React, { useEffect } from "react";
 import { Element } from "../Element/Element.js";
 import { Text } from "../Typography/Text.js";
-const Modal = React__default.forwardRef(
+const Modal = React.forwardRef(
   ({
     id,
     children,
@@ -32,7 +32,7 @@ const Modal = React__default.forwardRef(
       document.addEventListener("keydown", handleEscape);
       return () => document.removeEventListener("keydown", handleEscape);
     }, [id, isDismissible]);
-    return /* @__PURE__ */ React__default.createElement(
+    return /* @__PURE__ */ React.createElement(
       Element,
       {
         as: "dialog",
@@ -47,7 +47,7 @@ const Modal = React__default.forwardRef(
         "aria-describedby": descriptionId,
         ...props
       },
-      isDismissible && /* @__PURE__ */ React__default.createElement(
+      isDismissible && /* @__PURE__ */ React.createElement(
         Text,
         {
           className: "dismiss-button",
@@ -57,8 +57,8 @@ const Modal = React__default.forwardRef(
         },
         "×"
       ),
-      description && /* @__PURE__ */ React__default.createElement("div", { id: descriptionId, className: "sr-only" }, description),
-      /* @__PURE__ */ React__default.createElement("div", { role: "document" }, children)
+      description && /* @__PURE__ */ React.createElement("div", { id: descriptionId, className: "sr-only" }, description),
+      /* @__PURE__ */ React.createElement("div", { role: "document" }, children)
     );
   }
 );

package/dist/components/Notification/NotificationItem/NotificationItem.js

@@ -1,9 +1,9 @@
 "use client";
 "use client;";
-import React__default, { useState, useEffect } from "react";
+import React, { useState, useEffect } from "react";
 import { Div } from "../../Element/Tags.js";
 import { Element } from "../../Element/Element.js";
-const NotificationItem = React__default.forwardRef(
+const NotificationItem = React.forwardRef(
   ({
     showWhen,
     closeWhen,
@@ -53,7 +53,7 @@ const NotificationItem = React__default.forwardRef(
       error: "alert",
       success: "status"
     };
-    return isVisible && /* @__PURE__ */ React__default.createElement(
+    return isVisible && /* @__PURE__ */ React.createElement(
       Element,
       {
         as: "div",
@@ -67,8 +67,8 @@ const NotificationItem = React__default.forwardRef(
         "aria-label": title,
         ...props
       },
-      /* @__PURE__ */ React__default.createElement("div", { id: `notification-content-${props.id}` }, children, description && /* @__PURE__ */ React__default.createElement("span", { className: "sr-only" }, description)),
-      isDismissible && /* @__PURE__ */ React__default.createElement(
+      /* @__PURE__ */ React.createElement("div", { id: `notification-content-${props.id}` }, children, description && /* @__PURE__ */ React.createElement("span", { className: "sr-only" }, description)),
+      isDismissible && /* @__PURE__ */ React.createElement(
         Div,
         {
           className: "dismiss-button",
@@ -77,7 +77,7 @@ const NotificationItem = React__default.forwardRef(
           "aria-label": "Dismiss notification",
           tabIndex: 0
         },
-        /* @__PURE__ */ React__default.createElement("span", { className: "sr-only" }, "Close notification")
+        /* @__PURE__ */ React.createElement("span", { className: "sr-only" }, "Close notification")
       )
     );
   }

package/dist/components/Notification/NotificationsWrapper/NotificationsWrapper.js

@@ -1,8 +1,8 @@
 "use client";
 "use client;";
-import React__default from "react";
+import React from "react";
 import { Element } from "../../Element/Element.js";
-const NotificationsWrapper = React__default.forwardRef(
+const NotificationsWrapper = React.forwardRef(
   ({
     position = "right",
     anchor = "top",
@@ -15,9 +15,9 @@ const NotificationsWrapper = React__default.forwardRef(
     if (position) classNames.push(position);
     if (anchor) classNames.push(anchor);
     if (order) classNames.push(order);
-    const childrenCount = React__default.Children.count(children);
+    const childrenCount = React.Children.count(children);
     if (childrenCount === 0) return null;
-    return /* @__PURE__ */ React__default.createElement(
+    return /* @__PURE__ */ React.createElement(
       Element,
       {
         as: "section",

package/dist/components/OptionCard/OptionCard.js

@@ -1,6 +1,6 @@
 "use client";
 "use client;";
-import React__default, { createContext, useState, useCallback, useContext } from "react";
+import React, { createContext, useState, useCallback, useContext } from "react";
 import { Element } from "../Element/Element.js";
 import { Card } from "../Card/Card.js";
 const OptionCardsContext = createContext({
@@ -43,7 +43,7 @@ const OptionCardsGroup = ({
   const isSelected = useCallback((id) => {
     return selectedIds.has(id);
   }, [selectedIds]);
-  return /* @__PURE__ */ React__default.createElement(OptionCardsContext.Provider, { value: { isSelected, toggleSelection, showTickIcon, tickPosition } }, /* @__PURE__ */ React__default.createElement("div", { "data-option-cards-group": true, className: `tick-${tickPosition}` }, children));
+  return /* @__PURE__ */ React.createElement(OptionCardsContext.Provider, { value: { isSelected, toggleSelection, showTickIcon, tickPosition } }, /* @__PURE__ */ React.createElement("div", { "data-option-cards-group": true, className: `tick-${tickPosition}` }, children));
 };
 const useOptionCard = (id) => {
   const context = useContext(OptionCardsContext);
@@ -93,7 +93,7 @@ const OptionCard = ({ id, children, disabled = false, ...props }) => {
       toggleSelection();
     }
   };
-  return /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React.createElement(
     Element,
     {
       as: Card,
@@ -109,7 +109,7 @@ const OptionCard = ({ id, children, disabled = false, ...props }) => {
       onMouseLeave: handleMouseLeave,
       ...props
     },
-    showTickIcon && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("svg", { viewBox: "0 0 24 24", className: "tick-icon" }, /* @__PURE__ */ React__default.createElement("circle", { cx: "12", cy: "12", r: "11" }), /* @__PURE__ */ React__default.createElement("path", { d: "M8 13 L11 15 L16 9" })), /* @__PURE__ */ React__default.createElement("svg", { viewBox: "0 0 24 24", className: "deselect-icon" }, /* @__PURE__ */ React__default.createElement("circle", { cx: "12", cy: "12", r: "11" }), /* @__PURE__ */ React__default.createElement("path", { d: "M8 8 L16 16 M16 8 L8 16" }))),
+    showTickIcon && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 24 24", className: "tick-icon" }, /* @__PURE__ */ React.createElement("circle", { cx: "12", cy: "12", r: "11" }), /* @__PURE__ */ React.createElement("path", { d: "M8 13 L11 15 L16 9" })), /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 24 24", className: "deselect-icon" }, /* @__PURE__ */ React.createElement("circle", { cx: "12", cy: "12", r: "11" }), /* @__PURE__ */ React.createElement("path", { d: "M8 8 L16 16 M16 8 L8 16" }))),
     children
   );
 };

package/dist/components/Pagination/Pagination.js

@@ -1,6 +1,6 @@
 "use client";
 "use client;";
-import React__default from "react";
+import React from "react";
 import { Element } from "../Element/Element.js";
 import { Div } from "../Element/Tags.js";
 import { Text } from "../Typography/Text.js";
@@ -17,7 +17,7 @@ const defaultRenderItem = ({
   ...props
 }) => {
   if (type === "ellipsis") {
-    return /* @__PURE__ */ React__default.createElement(Text, { className: "pagination-ellipsis" }, "...");
+    return /* @__PURE__ */ React.createElement(Text, { className: "pagination-ellipsis" }, "...");
   }
   const paginationItemProps = {
     type: "button",
@@ -29,21 +29,21 @@ const defaultRenderItem = ({
   let content;
   switch (type) {
     case "first":
-      content = content = /* @__PURE__ */ React__default.createElement("svg", { viewBox: "0 0 24 24" }, /* @__PURE__ */ React__default.createElement("line", { x1: "5", y1: "18", x2: "5", y2: "6" }), /* @__PURE__ */ React__default.createElement("polyline", { points: "14 18 9 12 14 6" }), /* @__PURE__ */ React__default.createElement("line", { x1: "10", y1: "12", x2: "19", y2: "12" }));
+      content = content = /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 24 24" }, /* @__PURE__ */ React.createElement("line", { x1: "5", y1: "18", x2: "5", y2: "6" }), /* @__PURE__ */ React.createElement("polyline", { points: "14 18 9 12 14 6" }), /* @__PURE__ */ React.createElement("line", { x1: "10", y1: "12", x2: "19", y2: "12" }));
       break;
     case "previous":
-      content = /* @__PURE__ */ React__default.createElement("svg", { viewBox: "0 0 24 24" }, /* @__PURE__ */ React__default.createElement("polyline", { points: "12 18 7 12 12 6" }), /* @__PURE__ */ React__default.createElement("line", { x1: "8", y1: "12", x2: "17", y2: "12" }));
+      content = /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 24 24" }, /* @__PURE__ */ React.createElement("polyline", { points: "12 18 7 12 12 6" }), /* @__PURE__ */ React.createElement("line", { x1: "8", y1: "12", x2: "17", y2: "12" }));
       break;
     case "next":
-      content = content = /* @__PURE__ */ React__default.createElement("svg", { viewBox: "0 0 24 24" }, /* @__PURE__ */ React__default.createElement("polyline", { points: "12 6 17 12 12 18" }), /* @__PURE__ */ React__default.createElement("line", { x1: "16", y1: "12", x2: "7", y2: "12" }));
+      content = content = /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 24 24" }, /* @__PURE__ */ React.createElement("polyline", { points: "12 6 17 12 12 18" }), /* @__PURE__ */ React.createElement("line", { x1: "16", y1: "12", x2: "7", y2: "12" }));
       break;
     case "last":
-      content = content = /* @__PURE__ */ React__default.createElement("svg", { viewBox: "0 0 24 24" }, /* @__PURE__ */ React__default.createElement("polyline", { points: "10 6 15 12 10 18" }), /* @__PURE__ */ React__default.createElement("line", { x1: "19", y1: "6", x2: "19", y2: "18" }), /* @__PURE__ */ React__default.createElement("line", { x1: "14", y1: "12", x2: "5", y2: "12" }));
+      content = content = /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 24 24" }, /* @__PURE__ */ React.createElement("polyline", { points: "10 6 15 12 10 18" }), /* @__PURE__ */ React.createElement("line", { x1: "19", y1: "6", x2: "19", y2: "18" }), /* @__PURE__ */ React.createElement("line", { x1: "14", y1: "12", x2: "5", y2: "12" }));
       break;
     default:
       content = page;
   }
-  return /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React.createElement(
     Button,
     {
       kind: "custom",
@@ -52,7 +52,7 @@ const defaultRenderItem = ({
     content
   );
 };
-const Pagination = React__default.forwardRef(
+const Pagination = React.forwardRef(
   ({
     totalItems,
     currentPage,
@@ -85,7 +85,7 @@ const Pagination = React__default.forwardRef(
       currentPage,
       itemsToShowEachSide
     });
-    const [goToPage, setGoToPage] = React__default.useState("");
+    const [goToPage, setGoToPage] = React.useState("");
     const handlePageInputChange = (e) => {
       setGoToPage(e.target.value);
     };
@@ -99,7 +99,7 @@ const Pagination = React__default.forwardRef(
       }
     };
     if (totalItems === 0) {
-      return /* @__PURE__ */ React__default.createElement(Text, { className: "pagination-empty" }, emptyText || "No items to display");
+      return /* @__PURE__ */ React.createElement(Text, { className: "pagination-empty" }, emptyText || "No items to display");
     }
     let classNames = ["pagination"];
     if (kind) {
@@ -111,7 +111,7 @@ const Pagination = React__default.forwardRef(
     if (isLoading) {
       classNames.push("loading");
     }
-    return /* @__PURE__ */ React__default.createElement(
+    return /* @__PURE__ */ React.createElement(
       Element,
       {
         as: "nav",
@@ -122,7 +122,7 @@ const Pagination = React__default.forwardRef(
         "aria-label": "pagination",
         ...props
       },
-      /* @__PURE__ */ React__default.createElement(Div, { className: "pagination-controls" }, showGoToFirstItemButton && (!hideDisabledButtons || hasPrevPage) && renderItem({
+      /* @__PURE__ */ React.createElement(Div, { className: "pagination-controls" }, showGoToFirstItemButton && (!hideDisabledButtons || hasPrevPage) && renderItem({
         type: "first",
         disabled: !hasPrevPage || disabled,
         selected: false,
@@ -158,8 +158,8 @@ const Pagination = React__default.forwardRef(
         disabled: !hasNextPage || disabled,
         selected: false,
         onClick: () => onPageChange(totalPages)
-      }), isLoading && /* @__PURE__ */ React__default.createElement(Div, { className: "pagination-loading" }, /* @__PURE__ */ React__default.createElement(Spinner, null), loadingText && /* @__PURE__ */ React__default.createElement(Text, { size: "small" }, loadingText))),
-      /* @__PURE__ */ React__default.createElement(Div, { className: "pagination-info" }, /* @__PURE__ */ React__default.createElement(Text, { size: "small" }, "Showing ", itemDisplayText, " ", rangeStart, " of ", totalItems), showGoToInput && /* @__PURE__ */ React__default.createElement(Div, { className: "pagination-go-to" }, /* @__PURE__ */ React__default.createElement(
+      }), isLoading && /* @__PURE__ */ React.createElement(Div, { className: "pagination-loading" }, /* @__PURE__ */ React.createElement(Spinner, null), loadingText && /* @__PURE__ */ React.createElement(Text, { size: "small" }, loadingText))),
+      /* @__PURE__ */ React.createElement(Div, { className: "pagination-info" }, /* @__PURE__ */ React.createElement(Text, { size: "small" }, "Showing ", itemDisplayText, " ", rangeStart, " of ", totalItems), showGoToInput && /* @__PURE__ */ React.createElement(Div, { className: "pagination-go-to" }, /* @__PURE__ */ React.createElement(
         "input",
         {
           type: "number",