@trilogy-ds/react 0.0.26-esm-cjs → 0.0.28-esm-cjs

package/lib/index.js

@@ -127,6 +127,10 @@ __export(index_exports, {
   Device: () => Device,
   DirectionEnum: () => DirectionEnum,
   Divider: () => Divider_default,
+  Dropdown: () => Dropdown_default,
+  DropdownGroup: () => DropdownGroup_default,
+  DropdownItem: () => DropdownItem_default,
+  DropdownTrigger: () => DropdownTrigger_default,
   Fab: () => Fab_default,
   FlexBox: () => FlexBox_default,
   FlexItem: () => FlexItem_default,
@@ -295,7 +299,7 @@ module.exports = __toCommonJS(index_exports);
 // components/accordion/Accordion.tsx
 var React7 = __toESM(require("react"));
 
-// context/context/index.tsx
+// context/context/trilogyContext.tsx
 var React = __toESM(require("react"));
 var TrilogyContext = React.createContext({
   styled: false,
@@ -309,18 +313,18 @@ var useTrilogyContext = () => {
   return context;
 };
 
-// context/provider/index.tsx
+// context/provider/provider.tsx
 var import_react = __toESM(require("react"));
 
 // version.ts
-var version = "0.0.26-esm-cjs";
+var version = "0.0.28-esm-cjs";
 
 // version.json
 var version_default = {
   VERSION: "410"
 };
 
-// context/provider/index.tsx
+// context/provider/provider.tsx
 var getHrefFromAssetUri = (assetUrl, theme, mangled) => {
   return assetUrl.replace("%VERSION%", version).replace("%THEME%", theme).replace("%MANGLED%", mangled ? "-mangled" : "");
 };
@@ -357,7 +361,7 @@ var StatesContext = (0, import_react2.createContext)({
   flat: false
 });
 
-// context/providerStyled/index.tsx
+// context/providerStyled/providerStyled.tsx
 var React5 = __toESM(require("react"));
 var TrilogyProviderStyled = ({
   children,
@@ -383,7 +387,7 @@ var TrilogyProviderStyled = ({
   return /* @__PURE__ */ React5.createElement(TrilogyContext.Provider, { value: { styled, setStyled, hash, setHash } }, StyleComponent2 ? /* @__PURE__ */ React5.createElement(React5.Suspense, { fallback: null }, /* @__PURE__ */ React5.createElement(StyleComponent2, null, children)) : children);
 };
 
-// context/providerTheme/index.tsx
+// context/providerTheme/providerTheme.tsx
 var import_react5 = __toESM(require("react"));
 var defaultTheme = {
   icons: {},
@@ -581,6 +585,7 @@ var TrilogyColor = /* @__PURE__ */ ((TrilogyColor4) => {
   TrilogyColor4["NEUTRAL"] = "NEUTRAL";
   TrilogyColor4["NEUTRAL_FADE"] = "NEUTRAL_FADE";
   TrilogyColor4["STROKE"] = "STROKE";
+  TrilogyColor4["STROKE_FADE"] = "STROKE_FADE";
   return TrilogyColor4;
 })(TrilogyColor || {});
 var colors = {
@@ -603,7 +608,8 @@ var colors = {
   ["DISABLED_FADE" /* DISABLED_FADE */]: ["#D1D1D1", "disabled-fade", "white"],
   ["NEUTRAL" /* NEUTRAL */]: ["#707070", "grey", "white"],
   ["NEUTRAL_FADE" /* NEUTRAL_FADE */]: ["#F4F4F4", "grey-fade", "white"],
-  ["STROKE" /* STROKE */]: ["#BBC1CE", "stroke", "white"]
+  ["STROKE" /* STROKE */]: ["#BBC1CE", "stroke", "white"],
+  ["STROKE_FADE" /* STROKE_FADE */]: ["#cadbe8", "stroke-fade", "white"]
 };
 var getColorClassName = (trilogyColor) => {
   const color = colors[trilogyColor];
@@ -700,72 +706,70 @@ var Justifiable = /* @__PURE__ */ ((Justifiable2) => {
   Justifiable2["SPACE_BETWEEN"] = "SPACE_BETWEEN";
   return Justifiable2;
 })(Justifiable || {});
-var Justify = /* @__PURE__ */ ((Justify3) => {
-  Justify3["CENTER"] = "CENTER";
-  Justify3["START"] = "START";
-  Justify3["END"] = "END";
-  Justify3["SPACE_BETWEEN"] = "SPACE_BETWEEN";
-  Justify3["SPACE_AROUND"] = "SPACE_AROUND";
-  Justify3["SPACE_EVENLY"] = "SPACE_EVENLY";
-  return Justify3;
+var Justify = /* @__PURE__ */ ((Justify2) => {
+  Justify2["CENTER"] = "CENTER";
+  Justify2["START"] = "START";
+  Justify2["END"] = "END";
+  Justify2["SPACE_BETWEEN"] = "SPACE_BETWEEN";
+  Justify2["SPACE_AROUND"] = "SPACE_AROUND";
+  Justify2["SPACE_EVENLY"] = "SPACE_EVENLY";
+  return Justify2;
 })(Justify || {});
 var getJustifyStyle = (justifyContent) => {
-  switch (justifyContent) {
-    case "JUSTIFIED_CENTER":
+  if (!justifyContent) return "flex-start";
+  switch (true) {
+    case ["CENTER", "JUSTIFIED_CENTER"].includes(justifyContent):
       return "center";
-    case "JUSTIFIED_START":
+    case ["START", "JUSTIFIED_START"].includes(justifyContent):
       return "flex-start";
-    case "JUSTIFIED_END":
+    case ["END", "JUSTIFIED_END"].includes(justifyContent):
       return "flex-end";
-    case "SPACE_BETWEEN":
+    case ["SPACE_BETWEEN", "SPACE_BETWEEN"].includes(justifyContent):
       return "space-between";
+    case justifyContent === "SPACE_AROUND":
+      return "space-around";
     default:
       return "flex-start";
   }
 };
 var getJustifyClassName = (justifyContent) => {
-  switch (justifyContent) {
-    case "JUSTIFIED_CENTER":
+  if (!justifyContent) return "flex-start";
+  switch (true) {
+    case ["CENTER", "JUSTIFIED_CENTER"].includes(justifyContent):
       return "centered";
-    case "CENTER":
-      return "justified-center";
-    case "JUSTIFIED_START":
+    case ["START", "JUSTIFIED_START"].includes(justifyContent):
       return "justified-start";
-    case "START":
-      return "justified-start";
-    case "JUSTIFIED_END":
-      return "justified-end";
-    case "END":
+    case ["END", "JUSTIFIED_END"].includes(justifyContent):
       return "justified-end";
-    case "SPACE_BETWEEN":
+    case ["SPACE_BETWEEN", "SPACE_BETWEEN"].includes(justifyContent):
       return "spaced-between";
-    case "SPACE_AROUND":
-      return "spaced-around";
-    case "SPACE_EVENLY":
+    case justifyContent === "SPACE_EVENLY":
       return "spaced-evenly";
     default:
       return "justified-start";
   }
 };
 var getJustifiedClassName = (justifyContent) => {
-  switch (justifyContent) {
-    case "ALIGNED_CENTER":
+  if (!justifyContent) return "justified-start";
+  switch (true) {
+    case ["ALIGNED_CENTER", "CENTER"].includes(justifyContent):
       return "justified-center";
-    case "ALIGNED_START":
+    case ["START", "ALIGNED_START"].includes(justifyContent):
       return "justified-start";
-    case "ALIGNED_END":
+    case ["ALIGNED_END", "END"].includes(justifyContent):
       return "justified-end";
     default:
       return "justified-start";
   }
 };
 var getJustifySelfClassName = (justifyContent) => {
-  switch (justifyContent) {
-    case "ALIGNED_CENTER":
+  if (!justifyContent) return "justified-selfstart";
+  switch (true) {
+    case ["ALIGNED_CENTER", "CENTER"].includes(justifyContent):
       return "justified-self-center";
-    case "ALIGNED_START":
+    case ["START", "ALIGNED_START"].includes(justifyContent):
       return "justified-self-start";
-    case "ALIGNED_END":
+    case ["ALIGNED_END", "END"].includes(justifyContent):
       return "justified-selfend";
     default:
       return "justified-selfstart";
@@ -1221,7 +1225,7 @@ var Alert = React15.forwardRef(
           className: classes,
           ...others
         },
-        /* @__PURE__ */ React15.createElement(Icon_default, { name: iconAlert }),
+        /* @__PURE__ */ React15.createElement(Icon_default, { name: iconAlert, className: "alert-icon" }),
         /* @__PURE__ */ React15.createElement("div", { className: hashClass(styled, (0, import_clsx8.default)("body")) }, title && typeof title.valueOf() === "string" ? /* @__PURE__ */ React15.createElement(Title_default, { markup, level: 6 /* SIX */ }, title) : title, description && typeof description.valueOf() === "string" ? /* @__PURE__ */ React15.createElement(Text_default, { level: 2 /* TWO */ }, description) : description)
       );
     }
@@ -1354,12 +1358,13 @@ var getAlignClassName = (alignType) => {
   }
 };
 var getAlignStyle = (alignType) => {
-  switch (alignType) {
-    case "ALIGNED_CENTER":
+  if (!alignType) return "flex-start";
+  switch (true) {
+    case ["ALIGNED_CENTER", "CENTER"].includes(alignType):
       return "center";
-    case "ALIGNED_START":
+    case ["START", "ALIGNED_START"].includes(alignType):
       return "flex-start";
-    case "ALIGNED_END":
+    case ["ALIGNED_END", "END"].includes(alignType):
       return "flex-end";
     default:
       return "flex-start";
@@ -2076,7 +2081,7 @@ var Input = import_react14.default.forwardRef(
           }
         }
       }
-    ), loading && /* @__PURE__ */ import_react14.default.createElement("span", { className: loader })), help && /* @__PURE__ */ import_react14.default.createElement(Text_default, { className: helpClasses, id: idHelp }, help), securityGauge && type === "password" /* PASSWORD */ && /* @__PURE__ */ import_react14.default.createElement(
+    ), loading && /* @__PURE__ */ import_react14.default.createElement("span", { className: loader })), help && typeof help === "string" ? /* @__PURE__ */ import_react14.default.createElement(Text_default, { className: helpClasses, id: idHelp }, help) : help, securityGauge && type === "password" /* PASSWORD */ && /* @__PURE__ */ import_react14.default.createElement(
       InputGauge_default,
       {
         validationRules,
@@ -2234,8 +2239,7 @@ var AutoCompleteRef = ({
   (0, import_react15.useEffect)(() => {
     setSearch(matching(data, _inputValue));
   }, [data]);
-  const onTextChanged = async (e) => {
-    setIsAutocompleteMenuVisible(true);
+  const handleChangeInputValue = (e) => {
     if (onChange) {
       onChange({
         inputName: name || "",
@@ -2255,6 +2259,9 @@ var AutoCompleteRef = ({
     } else {
       setInputValue(e.inputValue);
     }
+  };
+  const getSuggestionsHandler = async (e) => {
+    setIsAutocompleteMenuVisible(true);
     if (getSuggestions) {
       const data2 = await getSuggestions(e.inputValue);
       setSearch(data2);
@@ -2262,7 +2269,7 @@ var AutoCompleteRef = ({
       setSearch(matching(data, e.inputValue));
     }
   };
-  const onInputChange = debounceSuggestionsTimeout ? debounce(onTextChanged, debounceSuggestionsTimeout) : onTextChanged;
+  const onInputChange = debounceSuggestionsTimeout ? debounce(getSuggestionsHandler, debounceSuggestionsTimeout) : getSuggestionsHandler;
   const suggestionSelected = (value2, data2, search2) => {
     setIsAutocompleteMenuVisible(false);
     setInputValue(getLabel(value2));
@@ -2321,6 +2328,7 @@ var AutoCompleteRef = ({
       onKeyUp: handleKeyPress,
       value: _inputValue,
       onChange: (event) => {
+        handleChangeInputValue(event);
         onInputChange(event);
       },
       onIconClick,
@@ -5043,10 +5051,302 @@ var Divider = import_react34.default.forwardRef(({
 Divider.displayName = "Divider" /* Divider */;
 var Divider_default = Divider;
 
-// components/fab/Fab.tsx
-var import_clsx49 = __toESM(require("clsx"));
+// components/dropdown/Dropdown.tsx
+var import_clsx50 = __toESM(require("clsx"));
+var React64 = __toESM(require("react"));
+
+// components/dropdown/context/DropdownContext.tsx
 var import_react35 = __toESM(require("react"));
-var Fab = import_react35.default.forwardRef(({
+var DropdownContext = (0, import_react35.createContext)(void 0);
+var useDropdownContext = () => {
+  const context = (0, import_react35.useContext)(DropdownContext);
+  if (!context) {
+    throw new Error("useDropdownContext must be used within a DropdownProvider");
+  }
+  return context;
+};
+var DropdownProvider = ({
+  children,
+  defaultOpen = false,
+  onToggle
+}) => {
+  const [isOpen, setIsOpen] = (0, import_react35.useState)(defaultOpen);
+  const toggle = () => {
+    const newState = !isOpen;
+    setIsOpen(newState);
+    onToggle == null ? void 0 : onToggle(newState);
+  };
+  const open = () => {
+    setIsOpen(true);
+    onToggle == null ? void 0 : onToggle(true);
+  };
+  const close = () => {
+    setIsOpen(false);
+    onToggle == null ? void 0 : onToggle(false);
+  };
+  const value = {
+    isOpen,
+    toggle,
+    open,
+    close
+  };
+  return /* @__PURE__ */ import_react35.default.createElement(DropdownContext.Provider, { value }, children);
+};
+
+// components/dropdown/trigger/DropdownTrigger.tsx
+var React63 = __toESM(require("react"));
+var import_clsx49 = __toESM(require("clsx"));
+var DropdownTrigger = React63.forwardRef(
+  ({
+    children,
+    onClick,
+    className,
+    testId,
+    ...others
+  }, ref) => {
+    const { styled } = useTrilogyContext();
+    let contextState = null;
+    try {
+      contextState = useDropdownContext();
+    } catch {
+      contextState = null;
+    }
+    const classes = hashClass(
+      styled,
+      (0, import_clsx49.default)(
+        "dropdown-trigger",
+        className
+      )
+    );
+    const handleClick = (event) => {
+      if (contextState) {
+        contextState.toggle();
+      }
+      onClick == null ? void 0 : onClick(event);
+    };
+    const enhancedChildren = React63.Children.map(children, (child) => {
+      if (React63.isValidElement(child)) {
+        if (!child.props.onClick) {
+          return React63.cloneElement(child, {
+            onClick: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              handleClick(e);
+            }
+          });
+        }
+        return React63.cloneElement(child, {
+          onClick: (e) => {
+            var _a, _b;
+            (_b = (_a = child.props).onClick) == null ? void 0 : _b.call(_a, e);
+            if (!e.defaultPrevented) {
+              handleClick(e);
+            }
+          }
+        });
+      }
+      return child;
+    });
+    return /* @__PURE__ */ React63.createElement(
+      "div",
+      {
+        ref,
+        className: classes,
+        onClick: handleClick,
+        "data-testid": testId,
+        ...others
+      },
+      enhancedChildren
+    );
+  }
+);
+DropdownTrigger.displayName = "DropdownTrigger" /* DropdownTrigger */;
+var DropdownTrigger_default = DropdownTrigger;
+
+// components/dropdown/Dropdown.tsx
+var DropdownContent = React64.forwardRef(
+  ({
+    children,
+    className,
+    testId,
+    ...others
+  }, ref) => {
+    const { styled } = useTrilogyContext();
+    const dropdownRef = React64.useRef(null);
+    const menuRef = React64.useRef(null);
+    const hasDropdownTrigger = React64.Children.toArray(children).some(
+      (child) => React64.isValidElement(child) && child.type === DropdownTrigger_default
+    );
+    const { isOpen } = useDropdownContext();
+    React64.useEffect(() => {
+      if (!isOpen || !dropdownRef.current || !menuRef.current) return;
+      const dropdown = dropdownRef.current;
+      const menu = menuRef.current;
+      const checkPosition = () => {
+        const rect = dropdown.getBoundingClientRect();
+        const viewportHeight = window.innerHeight;
+        const spaceBelow = viewportHeight - rect.bottom - 8;
+        const spaceAbove = rect.top - 8;
+        const menuHeight = 300;
+        if (spaceBelow < menuHeight && spaceAbove >= menuHeight) {
+          menu.setAttribute("data-position", "upward");
+        } else {
+          menu.removeAttribute("data-position");
+        }
+      };
+      requestAnimationFrame(checkPosition);
+    }, [isOpen]);
+    const classes = hashClass(
+      styled,
+      (0, import_clsx50.default)(
+        "dropdown",
+        isOpen && is("active"),
+        !hasDropdownTrigger && "dropdown-manual",
+        className
+      )
+    );
+    const triggerChildren = [];
+    const contentChildren = [];
+    if (hasDropdownTrigger) {
+      React64.Children.forEach(children, (child) => {
+        if (React64.isValidElement(child) && child.type === DropdownTrigger_default) {
+          triggerChildren.push(child);
+        } else {
+          contentChildren.push(child);
+        }
+      });
+    }
+    return /* @__PURE__ */ React64.createElement(
+      "div",
+      {
+        ref: (node) => {
+          if (dropdownRef.current !== node) {
+            dropdownRef.current = node;
+          }
+          if (typeof ref === "function") {
+            ref(node);
+          } else if (ref) {
+            ref.current = node;
+          }
+        },
+        className: classes,
+        "data-testid": testId,
+        ...others
+      },
+      hasDropdownTrigger ? triggerChildren : null,
+      /* @__PURE__ */ React64.createElement("div", { ref: menuRef, className: hashClass(styled, "dropdown-menu") }, /* @__PURE__ */ React64.createElement("div", { className: hashClass(styled, "dropdown-content") }, hasDropdownTrigger ? contentChildren : children))
+    );
+  }
+);
+var Dropdown = React64.forwardRef(
+  ({
+    children,
+    isActive,
+    defaultOpen,
+    onToggle,
+    className,
+    testId,
+    ...others
+  }, ref) => {
+    const hasDropdownTrigger = React64.Children.toArray(children).some(
+      (child) => React64.isValidElement(child) && child.type === DropdownTrigger_default
+    );
+    const useTrigger = defaultOpen !== void 0 || onToggle !== void 0 || hasDropdownTrigger;
+    const isManualMode = !useTrigger && isActive !== void 0;
+    const providerDefaultOpen = isManualMode ? isActive : defaultOpen;
+    return /* @__PURE__ */ React64.createElement(DropdownProvider, { defaultOpen: providerDefaultOpen, onToggle }, /* @__PURE__ */ React64.createElement(
+      DropdownContent,
+      {
+        ref,
+        className,
+        testId,
+        ...others
+      },
+      children
+    ));
+  }
+);
+Dropdown.displayName = "Dropdown" /* Dropdown */;
+var Dropdown_default = Dropdown;
+
+// components/dropdown/group/DropdownGroup.tsx
+var import_clsx51 = __toESM(require("clsx"));
+var React65 = __toESM(require("react"));
+var DropdownGroup = React65.forwardRef(
+  ({ className, id, children, hideSeparator, testId, ...others }, ref) => {
+    const { styled } = useTrilogyContext();
+    const classes = hashClass(styled, (0, import_clsx51.default)("dropdown-group", hideSeparator && is("no-separator"), className));
+    return /* @__PURE__ */ React65.createElement("div", { ref, id, className: classes, role: "group", "data-testid": testId, ...others }, children);
+  }
+);
+DropdownGroup.displayName = "DropdownGroup" /* DropdownGroup */;
+var DropdownGroup_default = DropdownGroup;
+
+// components/dropdown/item/DropdownItem.tsx
+var import_clsx52 = __toESM(require("clsx"));
+var React66 = __toESM(require("react"));
+var DropdownItem = React66.forwardRef(
+  ({
+    children,
+    iconName,
+    active,
+    disabled,
+    onSelect,
+    ...others
+  }, ref) => {
+    const { styled } = useTrilogyContext();
+    const classes = hashClass(
+      styled,
+      (0, import_clsx52.default)(
+        "dropdown-item",
+        active && is("active"),
+        disabled && is("disabled")
+      )
+    );
+    const handleClick = (e) => {
+      if (disabled) {
+        e.preventDefault();
+        return;
+      }
+      if (onSelect) {
+        onSelect();
+      }
+    };
+    const handleKeyDown = (e) => {
+      if (disabled) return;
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        if (onSelect) {
+          onSelect();
+        }
+      }
+    };
+    return /* @__PURE__ */ React66.createElement(
+      "button",
+      {
+        ref,
+        type: "button",
+        className: classes,
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        disabled,
+        "aria-disabled": disabled,
+        role: "menuitem",
+        tabIndex: disabled ? -1 : 0,
+        ...others
+      },
+      iconName && /* @__PURE__ */ React66.createElement(Icon_default, { name: iconName, size: "smaller" /* SMALLER */ }),
+      children
+    );
+  }
+);
+DropdownItem.displayName = "DropdownItem" /* DropdownItem */;
+var DropdownItem_default = DropdownItem;
+
+// components/fab/Fab.tsx
+var import_clsx53 = __toESM(require("clsx"));
+var import_react36 = __toESM(require("react"));
+var Fab = import_react36.default.forwardRef(({
   children,
   extended,
   iconName,
@@ -5063,8 +5363,8 @@ var Fab = import_react35.default.forwardRef(({
   ...others
 }, ref) => {
   const { styled } = useTrilogyContext();
-  const [isExtended, setIsExtended] = (0, import_react35.useState)(extended || false);
-  (0, import_react35.useEffect)(() => {
+  const [isExtended, setIsExtended] = (0, import_react36.useState)(extended || false);
+  (0, import_react36.useEffect)(() => {
     setIsExtended(extended || false);
   }, [isExtended]);
   const positionStyle = top || bottom || left || right ? {
@@ -5076,8 +5376,8 @@ var Fab = import_react35.default.forwardRef(({
   } : {
     position: "relative"
   };
-  const _className = hashClass(styled, (0, import_clsx49.default)("fab", extended && is("extended"), className));
-  return /* @__PURE__ */ import_react35.default.createElement(
+  const _className = hashClass(styled, (0, import_clsx53.default)("fab", extended && is("extended"), className));
+  return /* @__PURE__ */ import_react36.default.createElement(
     "button",
     {
       ref,
@@ -5092,7 +5392,7 @@ var Fab = import_react35.default.forwardRef(({
       ...others,
       className: _className
     },
-    /* @__PURE__ */ import_react35.default.createElement(Icon_default, { name: iconName }),
+    /* @__PURE__ */ import_react36.default.createElement(Icon_default, { name: iconName }),
     children
   );
 });
@@ -5100,8 +5400,8 @@ Fab.displayName = "Fab" /* Fab */;
 var Fab_default = Fab;
 
 // components/flex-box/FlexBox.tsx
-var import_clsx50 = __toESM(require("clsx"));
-var import_react36 = __toESM(require("react"));
+var import_clsx54 = __toESM(require("clsx"));
+var import_react37 = __toESM(require("react"));
 var generateClassNames = ({ value, getClassName }) => {
   if (!value) return [];
   if (typeof value === "string" || typeof value === "number") {
@@ -5124,17 +5424,37 @@ var generateWrapClassNames = ({ value, getClassName }) => {
   }
   return [];
 };
-var FlexBox = import_react36.default.forwardRef(
+var getJustifyClassName2 = (justifyContent) => {
+  if (!justifyContent) return "flex-start";
+  switch (true) {
+    case ["CENTER", "JUSTIFIED_CENTER"].includes(justifyContent):
+      return "justified-center";
+    case ["START", "JUSTIFIED_START"].includes(justifyContent):
+      return "justified-start";
+    case ["END", "JUSTIFIED_END"].includes(justifyContent):
+      return "justified-end";
+    case ["SPACE_BETWEEN", "SPACE_BETWEEN"].includes(justifyContent):
+      return "spaced-between";
+    case justifyContent === "SPACE_EVENLY":
+      return "spaced-evenly";
+    case justifyContent === "SPACE_AROUND":
+      return "spaced-around";
+    default:
+      return "justified-start";
+  }
+};
+var FlexBox = import_react37.default.forwardRef(
   ({ className, id, gap, direction, align, justify, wrap, scrollable, fullheight, mobile, ...others }, ref) => {
     const { styled } = useTrilogyContext();
+    const gapClasses = gap === 0 ? [is("gapless")] : generateClassNames({ value: gap, getClassName: (val) => has(`gap-${val}`) });
     const classes = hashClass(
       styled,
-      (0, import_clsx50.default)([
+      (0, import_clsx54.default)([
         "flex-box",
         ...generateClassNames({ value: direction, getClassName: (val) => is(`direction-${val}`) }),
         ...generateClassNames({ value: align, getClassName: (val) => is(getAlignClassName(val)) }),
-        ...generateClassNames({ value: justify, getClassName: (val) => is(getJustifyClassName(val)) }),
-        ...generateClassNames({ value: gap, getClassName: (val) => has(`gap-${val}`) }),
+        ...generateClassNames({ value: justify, getClassName: (val) => is(getJustifyClassName2(val)) }),
+        ...gapClasses,
         ...generateWrapClassNames({ value: wrap, getClassName: (val) => is(`wrap`) }),
         scrollable && is("scrollable"),
         fullheight && is("fullheight"),
@@ -5142,22 +5462,22 @@ var FlexBox = import_react36.default.forwardRef(
         className
       ])
     );
-    return /* @__PURE__ */ import_react36.default.createElement("div", { ref, id, className: classes, ...others });
+    return /* @__PURE__ */ import_react37.default.createElement("div", { ref, id, className: classes, ...others });
   }
 );
 FlexBox.displayName = "FlexBox" /* FlexBox */;
 var FlexBox_default = FlexBox;
 
 // components/flex-box/flex-item/FlexItem.tsx
-var import_clsx51 = __toESM(require("clsx"));
-var import_react37 = __toESM(require("react"));
-var FlexItem = import_react37.default.forwardRef(
+var import_clsx55 = __toESM(require("clsx"));
+var import_react38 = __toESM(require("react"));
+var FlexItem = import_react38.default.forwardRef(
   ({ className, id, size: size2, narrow, verticalAlign, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     const isNumber = typeof size2 === "number";
     const classes = hashClass(
       styled,
-      (0, import_clsx51.default)(
+      (0, import_clsx55.default)(
         "flex-item",
         size2 && isNumber && is(`${size2}`),
         size2 && !isNumber && (size2 == null ? void 0 : size2.desktop) && is(`${size2.desktop}-desktop`),
@@ -5171,21 +5491,21 @@ var FlexItem = import_react37.default.forwardRef(
         className
       )
     );
-    return /* @__PURE__ */ import_react37.default.createElement("div", { ref, id, className: classes, ...others });
+    return /* @__PURE__ */ import_react38.default.createElement("div", { ref, id, className: classes, ...others });
   }
 );
 FlexItem.displayName = "FlexItem" /* FlexItem */;
 var FlexItem_default = FlexItem;
 
 // components/hero/Hero.tsx
-var import_clsx52 = __toESM(require("clsx"));
-var import_react38 = __toESM(require("react"));
-var Hero = import_react38.default.forwardRef(
+var import_clsx56 = __toESM(require("clsx"));
+var import_react39 = __toESM(require("react"));
+var Hero = import_react39.default.forwardRef(
   ({ children, backgroundColor, backgroundSrc, inverted, className, id, onClick, overlap, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     const classes = hashClass(
       styled,
-      (0, import_clsx52.default)(
+      (0, import_clsx56.default)(
         "hero",
         backgroundColor && has(getBackgroundClassName(backgroundColor)),
         backgroundSrc && has("background"),
@@ -5194,7 +5514,7 @@ var Hero = import_react38.default.forwardRef(
         className
       )
     );
-    return /* @__PURE__ */ import_react38.default.createElement(
+    return /* @__PURE__ */ import_react39.default.createElement(
       "section",
       {
         ref,
@@ -5206,7 +5526,7 @@ var Hero = import_react38.default.forwardRef(
         },
         ...others
       },
-      /* @__PURE__ */ import_react38.default.createElement("div", { className: hashClass(styled, (0, import_clsx52.default)("hero-body")) }, children)
+      /* @__PURE__ */ import_react39.default.createElement("div", { className: hashClass(styled, (0, import_clsx56.default)("hero-body")) }, children)
     );
   }
 );
@@ -5231,9 +5551,9 @@ var RadiusValues = /* @__PURE__ */ ((RadiusValues2) => {
 })(RadiusValues || {});
 
 // components/image/Image.tsx
-var import_clsx53 = __toESM(require("clsx"));
-var React66 = __toESM(require("react"));
-var Image = React66.forwardRef(({
+var import_clsx57 = __toESM(require("clsx"));
+var React71 = __toESM(require("react"));
+var Image = React71.forwardRef(({
   src,
   alt = "",
   className,
@@ -5247,14 +5567,14 @@ var Image = React66.forwardRef(({
   ...others
 }, ref) => {
   const { styled } = useTrilogyContext();
-  const classes = hashClass(styled, (0, import_clsx53.default)("image", className, align && is(getJustifiedClassName(align))));
+  const classes = hashClass(styled, (0, import_clsx57.default)("image", className, align && is(getJustifiedClassName(align))));
   const styles = {
     image: {
       width,
       height
     }
   };
-  return /* @__PURE__ */ React66.createElement(
+  return /* @__PURE__ */ React71.createElement(
     "figure",
     {
       ref,
@@ -5266,11 +5586,11 @@ var Image = React66.forwardRef(({
       className: classes,
       ...others
     },
-    /* @__PURE__ */ React66.createElement(
+    /* @__PURE__ */ React71.createElement(
       "img",
       {
         style: styles.image,
-        className: hashClass(styled, (0, import_clsx53.default)(radius && has(`border-radius-${radius}`), circled ? is("circled") : "")),
+        className: hashClass(styled, (0, import_clsx57.default)(radius && has(`border-radius-${radius}`), circled ? is("circled") : "")),
         src: typeof src === "string" ? src : "",
         alt
       }
@@ -5281,44 +5601,44 @@ Image.displayName = "Image" /* Image */;
 var Image_default = Image;
 
 // components/list/List.tsx
-var import_clsx54 = __toESM(require("clsx"));
-var React67 = __toESM(require("react"));
-var List = React67.forwardRef(({ className, id, children, testId, divider, ordered, ...others }, ref) => {
+var import_clsx58 = __toESM(require("clsx"));
+var React72 = __toESM(require("react"));
+var List = React72.forwardRef(({ className, id, children, testId, divider, ordered, ...others }, ref) => {
   const { styled } = useTrilogyContext();
-  const classes = hashClass(styled, (0, import_clsx54.default)("list", divider && has("divider"), className));
+  const classes = hashClass(styled, (0, import_clsx58.default)("list", divider && has("divider"), className));
   const Tag2 = ordered ? "ol" : "ul";
-  return /* @__PURE__ */ React67.createElement(Tag2, { ref, id, "data-testid": testId, className: classes, ...others }, children);
+  return /* @__PURE__ */ React72.createElement(Tag2, { ref, id, "data-testid": testId, className: classes, ...others }, children);
 });
 List.displayName = "List" /* List */;
 var List_default = List;
 
 // components/list/item/ListItem.tsx
-var import_clsx55 = __toESM(require("clsx"));
-var React68 = __toESM(require("react"));
-var ListItem = React68.forwardRef(({ className, id, children, iconName, status, testId }, ref) => {
+var import_clsx59 = __toESM(require("clsx"));
+var React73 = __toESM(require("react"));
+var ListItem = React73.forwardRef(({ className, id, children, iconName, status, testId }, ref) => {
   const { styled } = useTrilogyContext();
-  const classes = (0, import_clsx55.default)("list-item", className, status && is(getColorClassName(TrilogyColor[status])));
-  return /* @__PURE__ */ React68.createElement("li", { ref, id, className: hashClass(styled, (0, import_clsx55.default)(classes)), "data-testid": testId }, iconName && /* @__PURE__ */ React68.createElement(
+  const classes = (0, import_clsx59.default)("list-item", className, status && is(getColorClassName(TrilogyColor[status])));
+  return /* @__PURE__ */ React73.createElement("li", { ref, id, className: hashClass(styled, (0, import_clsx59.default)(classes)), "data-testid": testId }, iconName && /* @__PURE__ */ React73.createElement(
     Icon_default,
     {
-      className: status && (0, import_clsx55.default)(is(getColorClassName(TrilogyColor[status]))),
+      className: status && (0, import_clsx59.default)(is(getColorClassName(TrilogyColor[status]))),
       name: iconName,
       size: "small" /* SMALL */
     }
-  ), /* @__PURE__ */ React68.createElement("div", { className: hashClass(styled, (0, import_clsx55.default)("list-item-content")) }, children));
+  ), /* @__PURE__ */ React73.createElement("div", { className: hashClass(styled, (0, import_clsx59.default)("list-item-content")) }, children));
 });
 ListItem.displayName = "ListItem" /* ListItem */;
 var ListItem_default = ListItem;
 
 // components/list/item/description/ListItemDescription.tsx
-var import_clsx56 = __toESM(require("clsx"));
-var React69 = __toESM(require("react"));
-var ListItemDescription = React69.forwardRef(({
+var import_clsx60 = __toESM(require("clsx"));
+var React74 = __toESM(require("react"));
+var ListItemDescription = React74.forwardRef(({
   children,
   className
 }, ref) => {
   const { styled } = useTrilogyContext();
-  return /* @__PURE__ */ React69.createElement("dd", { ref, className: hashClass(styled, (0, import_clsx56.default)(className)) }, children);
+  return /* @__PURE__ */ React74.createElement("dd", { ref, className: hashClass(styled, (0, import_clsx60.default)(className)) }, children);
 });
 ListItemDescription.displayName = "ListItemDescription" /* ListItemDescription */;
 var ListItemDescription_default = ListItemDescription;
@@ -5334,8 +5654,8 @@ var ListIconStatus = /* @__PURE__ */ ((ListIconStatus2) => {
 
 // components/otp/Otp.tsx
 var import_locales5 = require("@trilogy-ds/locales");
-var import_clsx57 = __toESM(require("clsx"));
-var import_react39 = __toESM(require("react"));
+var import_clsx61 = __toESM(require("clsx"));
+var import_react40 = __toESM(require("react"));
 var stringToCode = (str, codeSize) => {
   if (!str) return new Array(codeSize).fill(null);
   return str.split("").map((char) => char === "" ? null : Number(char));
@@ -5392,7 +5712,7 @@ var inputOnKeyUp = (e) => {
 var formatTranslation = (translation, x, y) => {
   return translation.replace(/:x/g, x).replace(/:y/g, y);
 };
-var Otp = import_react39.default.forwardRef(
+var Otp = import_react40.default.forwardRef(
   ({
     className,
     id,
@@ -5408,18 +5728,18 @@ var Otp = import_react39.default.forwardRef(
     autoFocus,
     ...others
   }, ref) => {
-    const [codeInput, setCodeInput] = (0, import_react39.useState)(
+    const [codeInput, setCodeInput] = (0, import_react40.useState)(
       stringToCode(value, length) || new Array(length).fill(null)
     );
-    const hasChanged = (0, import_react39.useRef)(false);
+    const hasChanged = (0, import_react40.useRef)(false);
     const { styled } = useTrilogyContext();
-    const classes = hashClass(styled, (0, import_clsx57.default)("otp-list", error && is("error"), className));
-    (0, import_react39.useEffect)(() => {
+    const classes = hashClass(styled, (0, import_clsx61.default)("otp-list", error && is("error"), className));
+    (0, import_react40.useEffect)(() => {
       if (!disabled) {
         isCompleted(codeInput) && (onCompleted == null ? void 0 : onCompleted(codeToString(codeInput)));
       }
     }, [length, codeInput, onCompleted, disabled]);
-    (0, import_react39.useEffect)(() => {
+    (0, import_react40.useEffect)(() => {
       hasChanged.current = codeInput.find((code) => code !== null) !== void 0;
       if (hasChanged.current) {
         onChange == null ? void 0 : onChange(codeToString(codeInput));
@@ -5442,14 +5762,14 @@ var Otp = import_react39.default.forwardRef(
       const { target } = e;
       target.setSelectionRange(0, target.value.length);
     };
-    return /* @__PURE__ */ import_react39.default.createElement(import_react39.default.Fragment, null, label && /* @__PURE__ */ import_react39.default.createElement(
+    return /* @__PURE__ */ import_react40.default.createElement(import_react40.default.Fragment, null, label && /* @__PURE__ */ import_react40.default.createElement(
       Text_default,
       {
         markup: "p" /* P */,
         typo: disabled && "has-text-grey" /* TEXT_NEUTRAL */ || error && "has-text-error" /* TEXT_ERROR */ || "has-text-main" /* TEXT_MAIN */
       },
       label
-    ), /* @__PURE__ */ import_react39.default.createElement(
+    ), /* @__PURE__ */ import_react40.default.createElement(
       "div",
       {
         ref,
@@ -5461,7 +5781,7 @@ var Otp = import_react39.default.forwardRef(
           }
         }
       },
-      codeInput.map((digit, idx) => /* @__PURE__ */ import_react39.default.createElement(
+      codeInput.map((digit, idx) => /* @__PURE__ */ import_react40.default.createElement(
         "input",
         {
           "aria-disabled": disabled,
@@ -5472,7 +5792,7 @@ var Otp = import_react39.default.forwardRef(
           autoFocus: idx === 0 && autoFocus,
           pattern: "\\d{1}",
           maxLength: length,
-          className: hashClass(styled, (0, import_clsx57.default)("otp")),
+          className: hashClass(styled, (0, import_clsx61.default)("otp")),
           value: `${digit != null ? digit : ""}`,
           onKeyUp: inputOnKeyUp,
           onFocus: inputOnFocus,
@@ -5482,10 +5802,10 @@ var Otp = import_react39.default.forwardRef(
           ...others
         }
       ))
-    ), help && /* @__PURE__ */ import_react39.default.createElement(
+    ), help && /* @__PURE__ */ import_react40.default.createElement(
       Text_default,
       {
-        className: hashClass(styled, (0, import_clsx57.default)("help")),
+        className: hashClass(styled, (0, import_clsx61.default)("help")),
         markup: "p" /* P */,
         typo: error && "has-text-error" /* TEXT_ERROR */ || "has-text-main" /* TEXT_MAIN */
       },
@@ -5497,109 +5817,109 @@ Otp.displayName = "Otp" /* Otp */;
 var Otp_default = Otp;
 
 // components/pagination/Pagination.tsx
-var import_clsx58 = __toESM(require("clsx"));
-var import_react40 = __toESM(require("react"));
-var Pagination = import_react40.default.forwardRef(({
-  className,
-  id,
-  length,
-  defaultPage = 1,
-  onClick,
-  href,
-  ...others
-}, ref) => {
-  const [currentPage, setCurrentPage] = (0, import_react40.useState)(defaultPage);
-  const { styled } = useTrilogyContext();
-  const classes = hashClass(styled, (0, import_clsx58.default)("pagination", className));
-  const prevCurrentPage = (0, import_react40.useRef)(currentPage);
-  const pager = import_react40.default.useMemo(() => {
-    let startPage = 1;
-    let endPage = 5;
-    if (length <= 5) {
-      startPage = 1;
-      endPage = length;
-    } else {
-      if (currentPage <= 3) {
-        startPage = 1;
-        endPage = 4;
-      } else if (currentPage + 3 >= length) {
-        startPage = length - 3;
-        endPage = length;
-      } else {
-        startPage = currentPage - 1;
-        endPage = currentPage + 1;
-      }
-    }
-    const pages = [...Array(endPage + 1 - startPage).keys()].map((i) => startPage + i);
-    return {
-      currentPage,
-      length,
-      endPage,
-      pages
-    };
-  }, [currentPage, length]);
-  (0, import_react40.useEffect)(() => {
-    if (onClick && prevCurrentPage.current !== pager.currentPage) {
-      onClick(pager);
-    }
-    setCurrentPage(pager.currentPage);
-    prevCurrentPage.current = pager.currentPage;
-  }, [pager.currentPage]);
-  (0, import_react40.useEffect)(() => {
-    setCurrentPage(defaultPage);
-  }, [defaultPage]);
-  return /* @__PURE__ */ import_react40.default.createElement("nav", { ref, id, className: classes, ...others }, /* @__PURE__ */ import_react40.default.createElement(
-    "a",
-    {
-      className: hashClass(styled, (0, import_clsx58.default)("pagination-previous")),
-      ...currentPage === 1 ? { "aria-disabled": true } : {},
-      onClick: () => {
-        if (currentPage !== 1) {
-          setCurrentPage(currentPage - 1);
+var import_clsx62 = __toESM(require("clsx"));
+var import_react41 = __toESM(require("react"));
+var Pagination = import_react41.default.forwardRef(
+  ({ className, id, length, defaultPage = 1, onClick, href, ...others }, ref) => {
+    const [currentPage, setCurrentPage] = (0, import_react41.useState)(defaultPage);
+    const { styled } = useTrilogyContext();
+    const classes = hashClass(styled, (0, import_clsx62.default)("pagination", className));
+    const getPages = import_react41.default.useCallback(
+      (page) => {
+        let startPage = 1;
+        let endPage = 5;
+        if (length <= 5) {
+          startPage = 1;
+          endPage = length;
+        } else {
+          if (page <= 3) {
+            startPage = 1;
+            endPage = 4;
+          } else if (page + 3 >= length) {
+            startPage = length - 3;
+            endPage = length;
+          } else {
+            startPage = page - 1;
+            endPage = page + 1;
+          }
         }
+        const pages2 = [...Array(endPage + 1 - startPage).keys()].map((i) => startPage + i);
+        return {
+          endPage,
+          pages: pages2
+        };
       },
-      href: href == null ? void 0 : href(currentPage - 1)
-    },
-    /* @__PURE__ */ import_react40.default.createElement(Icon_default, { name: "tri-arrow-left" /* ARROW_LEFT */ })
-  ), /* @__PURE__ */ import_react40.default.createElement("ul", { className: hashClass(styled, (0, import_clsx58.default)("pagination-list")) }, !pager.pages.includes(1) && /* @__PURE__ */ import_react40.default.createElement("li", null, /* @__PURE__ */ import_react40.default.createElement("span", { className: hashClass(styled, (0, import_clsx58.default)("pagination-ellipsis")) }, "\u2026")), pager.pages.map((pageNumber) => /* @__PURE__ */ import_react40.default.createElement("li", { key: pageNumber }, /* @__PURE__ */ import_react40.default.createElement(
-    "a",
-    {
-      className: hashClass(styled, (0, import_clsx58.default)("pagination-link")),
-      ...currentPage === pageNumber ? { "aria-current": true } : {},
-      "aria-label": `Aller \xE0 la page ${pageNumber}`,
-      onClick: () => {
-        setCurrentPage(pageNumber);
+      [length]
+    );
+    const [pages, setPages] = (0, import_react41.useState)(() => getPages(defaultPage).pages);
+    (0, import_react41.useEffect)(() => {
+      setCurrentPage(defaultPage);
+      setPages(getPages(defaultPage).pages);
+    }, [defaultPage]);
+    return /* @__PURE__ */ import_react41.default.createElement("nav", { ref, id, className: classes, ...others }, /* @__PURE__ */ import_react41.default.createElement(
+      "a",
+      {
+        className: hashClass(styled, (0, import_clsx62.default)("pagination-previous")),
+        ...currentPage === 1 ? { "aria-disabled": true } : {},
+        onClick: (e) => {
+          const nextPage = currentPage - 1;
+          const nextPages = getPages(nextPage);
+          if (onClick) onClick(Object.assign(e, nextPages, { currentPage: nextPage, length }));
+          if (currentPage !== 1) {
+            setCurrentPage(nextPage);
+            setPages(nextPages.pages);
+          }
+        },
+        href: href == null ? void 0 : href(currentPage - 1)
       },
-      href: href == null ? void 0 : href(pageNumber)
-    },
-    pageNumber
-  ))), !pager.pages.includes(length) && /* @__PURE__ */ import_react40.default.createElement("li", null, /* @__PURE__ */ import_react40.default.createElement("span", { className: hashClass(styled, (0, import_clsx58.default)("pagination-ellipsis")) }, "\u2026"))), /* @__PURE__ */ import_react40.default.createElement(
-    "a",
-    {
-      className: hashClass(styled, (0, import_clsx58.default)("pagination-next")),
-      ...currentPage === Math.max(length) ? { "aria-disabled": true } : {},
-      onClick: () => {
-        if (currentPage !== Math.max(length)) {
-          setCurrentPage(currentPage + 1);
-        }
+      /* @__PURE__ */ import_react41.default.createElement(Icon_default, { name: "tri-arrow-left" /* ARROW_LEFT */ })
+    ), /* @__PURE__ */ import_react41.default.createElement("ul", { className: hashClass(styled, (0, import_clsx62.default)("pagination-list")) }, !pages.includes(1) && /* @__PURE__ */ import_react41.default.createElement("li", null, /* @__PURE__ */ import_react41.default.createElement("span", { className: hashClass(styled, (0, import_clsx62.default)("pagination-ellipsis")) }, "\u2026")), pages.map((pageNumber) => /* @__PURE__ */ import_react41.default.createElement("li", { key: pageNumber }, /* @__PURE__ */ import_react41.default.createElement(
+      "a",
+      {
+        className: hashClass(styled, (0, import_clsx62.default)("pagination-link")),
+        ...currentPage === pageNumber ? { "aria-current": true } : {},
+        "aria-label": `Aller \xE0 la page ${pageNumber}`,
+        onClick: (e) => {
+          const nextPages = getPages(pageNumber);
+          if (onClick) onClick(Object.assign(e, nextPages, { currentPage: pageNumber, length }));
+          setCurrentPage(pageNumber);
+          setPages(nextPages.pages);
+        },
+        href: href == null ? void 0 : href(pageNumber)
       },
-      href: href == null ? void 0 : href(currentPage + 1)
-    },
-    /* @__PURE__ */ import_react40.default.createElement(Icon_default, { name: "tri-arrow-right" /* ARROW_RIGHT */ })
-  ));
-});
+      pageNumber
+    ))), !pages.includes(length) && /* @__PURE__ */ import_react41.default.createElement("li", null, /* @__PURE__ */ import_react41.default.createElement("span", { className: hashClass(styled, (0, import_clsx62.default)("pagination-ellipsis")) }, "\u2026"))), /* @__PURE__ */ import_react41.default.createElement(
+      "a",
+      {
+        className: hashClass(styled, (0, import_clsx62.default)("pagination-next")),
+        ...currentPage === Math.max(length) ? { "aria-disabled": true } : {},
+        onClick: (e) => {
+          const nextPage = currentPage + 1;
+          const nextPages = getPages(nextPage);
+          if (onClick) onClick(Object.assign(e, nextPages, { currentPage: nextPage, length }));
+          if (currentPage !== Math.max(length)) {
+            setCurrentPage(currentPage + 1);
+            setPages(nextPages.pages);
+          }
+        },
+        href: href == null ? void 0 : href(currentPage + 1)
+      },
+      /* @__PURE__ */ import_react41.default.createElement(Icon_default, { name: "tri-arrow-right" /* ARROW_RIGHT */ })
+    ));
+  }
+);
 Pagination.displayName = "Pagination" /* Pagination */;
 var Pagination_default = Pagination;
 
 // components/popover/Popover.tsx
-var import_clsx59 = __toESM(require("clsx"));
-var React72 = __toESM(require("react"));
-var Popover = React72.forwardRef(
+var import_clsx63 = __toESM(require("clsx"));
+var React77 = __toESM(require("react"));
+var Popover = React77.forwardRef(
   ({ className, id, direction, children, active, arrowPosition, trigger, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     const classes = hashClass(
       styled,
-      (0, import_clsx59.default)(
+      (0, import_clsx63.default)(
         "popover",
         direction && is(`popover-${direction}`),
         active && is("popover-active"),
@@ -5607,7 +5927,7 @@ var Popover = React72.forwardRef(
         className
       )
     );
-    return /* @__PURE__ */ React72.createElement("span", { ref, id, className: classes, ...others }, trigger && trigger, /* @__PURE__ */ React72.createElement("span", { className: hashClass(styled, "popover-content") }, children));
+    return /* @__PURE__ */ React77.createElement("span", { ref, id, className: classes, ...others }, trigger && trigger, /* @__PURE__ */ React77.createElement("span", { className: hashClass(styled, "popover-content") }, children));
   }
 );
 Popover.displayName = "Popover" /* Popover */;
@@ -5627,8 +5947,8 @@ var PopoverArrowPosition = /* @__PURE__ */ ((PopoverArrowPosition2) => {
 })(PopoverArrowPosition || {});
 
 // components/price/Price.tsx
-var import_clsx60 = __toESM(require("clsx"));
-var React73 = __toESM(require("react"));
+var import_clsx64 = __toESM(require("clsx"));
+var React78 = __toESM(require("react"));
 
 // components/price/PriceHelpers.ts
 var checkCents = (text) => {
@@ -5640,7 +5960,7 @@ var checkCents = (text) => {
 };
 
 // components/price/Price.tsx
-var Price = React73.forwardRef(
+var Price = React78.forwardRef(
   ({
     className,
     id,
@@ -5658,10 +5978,10 @@ var Price = React73.forwardRef(
   }, ref) => {
     var _a, _b;
     const { styled } = useTrilogyContext();
-    const classes = hashClass(styled, (0, import_clsx60.default)("price", inverted && is("inverted"), overline && has("suptitle"), className));
+    const classes = hashClass(styled, (0, import_clsx64.default)("price", inverted && is("inverted"), overline && has("suptitle"), className));
     const classesStrike = hashClass(
       styled,
-      (0, import_clsx60.default)("price", inverted && is("inverted"), oldAmount && "strike", overline && has("suptitle"), className)
+      (0, import_clsx64.default)("price", inverted && is("inverted"), oldAmount && "strike", overline && has("suptitle"), className)
     );
     let amountComponent = null;
     let oldAmountComponent = null;
@@ -5674,7 +5994,7 @@ var Price = React73.forwardRef(
       let cents = checkCents(((_a = absoluteAmountStrike.toString().split(/[.,]/)[1]) == null ? void 0 : _a.substring(0, 2)) || "");
       cents = cents && cents.length === 1 && `${cents}0` || cents;
       const centsDisplayed = !hideCents && `\u20AC${cents}` || "\u20AC";
-      oldAmountComponent = /* @__PURE__ */ React73.createElement("span", { "aria-hidden": "true", className: classesStrike, ...others }, /* @__PURE__ */ React73.createElement(Text_default, { markup: "span" /* SPAN */ }, `${wholeStrike}`), /* @__PURE__ */ React73.createElement("span", { className: hashClass(styled, (0, import_clsx60.default)("price-details")) }, /* @__PURE__ */ React73.createElement("span", { className: hashClass(styled, (0, import_clsx60.default)("cents")) }, centsDisplayed === "\u20AC" ? /* @__PURE__ */ React73.createElement(React73.Fragment, null, "\xA0", centsDisplayed) : centsDisplayed, mention && /* @__PURE__ */ React73.createElement("sup", null, mention)), period && /* @__PURE__ */ React73.createElement("span", { className: hashClass(styled, (0, import_clsx60.default)("period")) }, "/", period)));
+      oldAmountComponent = /* @__PURE__ */ React78.createElement("span", { "aria-hidden": "true", className: classesStrike, ...others }, /* @__PURE__ */ React78.createElement("span", null, `${wholeStrike}`), /* @__PURE__ */ React78.createElement("span", { className: hashClass(styled, (0, import_clsx64.default)("price-details")) }, /* @__PURE__ */ React78.createElement("span", { className: hashClass(styled, (0, import_clsx64.default)("cents")) }, centsDisplayed === "\u20AC" ? /* @__PURE__ */ React78.createElement(React78.Fragment, null, "\xA0", centsDisplayed) : centsDisplayed, mention && /* @__PURE__ */ React78.createElement("sup", null, mention)), period && /* @__PURE__ */ React78.createElement("span", { className: hashClass(styled, (0, import_clsx64.default)("period")) }, "/", period)));
     }
     if (amount !== void 0) {
       const isNegative = amount < 0;
@@ -5685,27 +6005,27 @@ var Price = React73.forwardRef(
       cents = cents && cents.length === 1 && `${cents}0` || cents;
       const centsDisplayed = !hideCents && `\u20AC${cents}` || "\u20AC";
       const dataPrice = `${whole}${!hideCents && cents ? `.${cents}` : ""}`;
-      amountComponent = /* @__PURE__ */ React73.createElement("span", { "aria-hidden": "true", "aria-label": accessibilityLabel, className: classes, "data-price": dataPrice, ...others }, /* @__PURE__ */ React73.createElement(Text_default, { markup: "span" /* SPAN */ }, `${whole}`), /* @__PURE__ */ React73.createElement("span", { className: hashClass(styled, (0, import_clsx60.default)("price-details")) }, /* @__PURE__ */ React73.createElement("span", { className: hashClass(styled, (0, import_clsx60.default)("cents")) }, centsDisplayed === "\u20AC" ? /* @__PURE__ */ React73.createElement(React73.Fragment, null, "\xA0", centsDisplayed) : centsDisplayed, mention && /* @__PURE__ */ React73.createElement("sup", null, mention)), period && /* @__PURE__ */ React73.createElement("span", { className: hashClass(styled, (0, import_clsx60.default)("period")) }, "/", period)));
+      amountComponent = /* @__PURE__ */ React78.createElement("span", { "aria-hidden": "true", "aria-label": accessibilityLabel, className: classes, "data-price": dataPrice, ...others }, /* @__PURE__ */ React78.createElement("span", null, `${whole}`), /* @__PURE__ */ React78.createElement("span", { className: hashClass(styled, (0, import_clsx64.default)("price-details")) }, /* @__PURE__ */ React78.createElement("span", { className: hashClass(styled, (0, import_clsx64.default)("cents")) }, centsDisplayed === "\u20AC" ? /* @__PURE__ */ React78.createElement(React78.Fragment, null, "\xA0", centsDisplayed) : centsDisplayed, mention && /* @__PURE__ */ React78.createElement("sup", null, mention)), period && /* @__PURE__ */ React78.createElement("span", { className: hashClass(styled, (0, import_clsx64.default)("period")) }, "/", period)));
     }
-    return /* @__PURE__ */ React73.createElement(
+    return /* @__PURE__ */ React78.createElement(
       "div",
       {
         ref,
         id,
         className: hashClass(
           styled,
-          (0, import_clsx60.default)(
+          (0, import_clsx64.default)(
             "price-container",
             is(`level-${level || "1"}`),
             align == "ALIGNED_START" /* ALIGNED_START */ && is("justified-start") || align == "ALIGNED_CENTER" /* ALIGNED_CENTER */ && is("justified-center") || align == "ALIGNED_END" /* ALIGNED_END */ && is("justified-end") || ""
           )
         )
       },
-      overline && /* @__PURE__ */ React73.createElement("p", { className: hashClass(styled, (0, import_clsx60.default)("overline")) }, overline),
+      overline && /* @__PURE__ */ React78.createElement("p", { className: hashClass(styled, (0, import_clsx64.default)("overline")) }, overline),
       oldAmountComponent,
       amountComponent,
       tagAmountComponent,
-      accessibilityLabel && /* @__PURE__ */ React73.createElement("p", { className: hashClass(styled, (0, import_clsx60.default)("sr-only")) }, accessibilityLabel)
+      accessibilityLabel && /* @__PURE__ */ React78.createElement("p", { className: hashClass(styled, (0, import_clsx64.default)("sr-only")) }, accessibilityLabel)
     );
   }
 );
@@ -5725,9 +6045,9 @@ var PriceLevel = /* @__PURE__ */ ((PriceLevel2) => {
 })(PriceLevel || {});
 
 // components/product-tour/ProductTour.tsx
-var import_clsx61 = __toESM(require("clsx"));
-var import_react41 = __toESM(require("react"));
-var ProductTour = import_react41.default.forwardRef(({
+var import_clsx65 = __toESM(require("clsx"));
+var import_react42 = __toESM(require("react"));
+var ProductTour = import_react42.default.forwardRef(({
   children,
   className,
   id,
@@ -5739,16 +6059,16 @@ var ProductTour = import_react41.default.forwardRef(({
   avatarDirection,
   ...others
 }, ref) => {
-  const [display, setDisplay] = (0, import_react41.useState)(active || false);
+  const [display, setDisplay] = (0, import_react42.useState)(active || false);
   const { styled } = useTrilogyContext();
-  (0, import_react41.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     setDisplay(active || false);
   }, [active]);
   const classes = hashClass(
     styled,
-    (0, import_clsx61.default)("product-tour", display && is("active"), avatarDirection && has(`icon-${avatarDirection}`), className)
+    (0, import_clsx65.default)("product-tour", display && is("active"), avatarDirection && has(`icon-${avatarDirection}`), className)
   );
-  return /* @__PURE__ */ import_react41.default.createElement("div", { ref, id, className: classes, ...others }, arrowDirection && /* @__PURE__ */ import_react41.default.createElement("div", { className: hashClass(styled, (0, import_clsx61.default)("arrow", is(arrowDirection), arrowAlign && is(arrowAlign))) }), avatarSrc && /* @__PURE__ */ import_react41.default.createElement("span", { className: hashClass(styled, (0, import_clsx61.default)("icon", is("medium"))) }, /* @__PURE__ */ import_react41.default.createElement("img", { className: hashClass(styled, (0, import_clsx61.default)(is("rounded"))), src: avatarSrc })), closeable && /* @__PURE__ */ import_react41.default.createElement("div", { style: { cursor: "pointer" }, onClick: () => setDisplay(!display) }, /* @__PURE__ */ import_react41.default.createElement(Icon_default, { size: "small" /* SMALL */, name: "tri-times" /* TIMES */, className: "close" })), /* @__PURE__ */ import_react41.default.createElement("div", { className: hashClass(styled, (0, import_clsx61.default)("product-tour-content")) }, children));
+  return /* @__PURE__ */ import_react42.default.createElement("div", { ref, id, className: classes, ...others }, arrowDirection && /* @__PURE__ */ import_react42.default.createElement("div", { className: hashClass(styled, (0, import_clsx65.default)("arrow", is(arrowDirection), arrowAlign && is(arrowAlign))) }), avatarSrc && /* @__PURE__ */ import_react42.default.createElement("span", { className: hashClass(styled, (0, import_clsx65.default)("icon", is("medium"))) }, /* @__PURE__ */ import_react42.default.createElement("img", { className: hashClass(styled, (0, import_clsx65.default)(is("rounded"))), src: avatarSrc })), closeable && /* @__PURE__ */ import_react42.default.createElement("div", { style: { cursor: "pointer" }, onClick: () => setDisplay(!display) }, /* @__PURE__ */ import_react42.default.createElement(Icon_default, { size: "small" /* SMALL */, name: "tri-times" /* TIMES */, className: "close" })), /* @__PURE__ */ import_react42.default.createElement("div", { className: hashClass(styled, (0, import_clsx65.default)("product-tour-content")) }, children));
 });
 ProductTour.displayName = "ProductTour" /* ProductTour */;
 var ProductTour_default = ProductTour;
@@ -5779,9 +6099,9 @@ var AvatarDirection = /* @__PURE__ */ ((AvatarDirection2) => {
 })(AvatarDirection || {});
 
 // components/progress/Progress.tsx
-var import_clsx62 = __toESM(require("clsx"));
-var React75 = __toESM(require("react"));
-var Progress = React75.forwardRef(({
+var import_clsx66 = __toESM(require("clsx"));
+var React80 = __toESM(require("react"));
+var Progress = React80.forwardRef(({
   children,
   className,
   id,
@@ -5798,7 +6118,7 @@ var Progress = React75.forwardRef(({
   const { styled } = useTrilogyContext();
   const classes = hashClass(
     styled,
-    (0, import_clsx62.default)(
+    (0, import_clsx66.default)(
       "progress",
       status && is(getStatusClassName(status)),
       !status && is("primary"),
@@ -5806,26 +6126,26 @@ var Progress = React75.forwardRef(({
       className
     )
   );
-  const stackedClasses = hashClass(styled, (0, import_clsx62.default)("progress", stacked && is("stacked"), className));
+  const stackedClasses = hashClass(styled, (0, import_clsx66.default)("progress", stacked && is("stacked"), className));
   if (children && stacked) {
-    return /* @__PURE__ */ React75.createElement("div", { className: stackedClasses, ...others }, children);
+    return /* @__PURE__ */ React80.createElement("div", { className: stackedClasses, ...others }, children);
   }
-  return /* @__PURE__ */ React75.createElement("div", { ref, className: "progress-container" }, /* @__PURE__ */ React75.createElement("progress", { id, className: classes, value, max, ...others }, value), (legendStart || legendCenter || legendEnd) && /* @__PURE__ */ React75.createElement("div", { className: "progress-legends" }, legendStart && /* @__PURE__ */ React75.createElement("div", { className: "progress-legend-start" }, /* @__PURE__ */ React75.createElement(Text_default, null, legendStart)), legendCenter && /* @__PURE__ */ React75.createElement("div", { className: "progress-legend-center" }, /* @__PURE__ */ React75.createElement(Text_default, null, legendCenter)), legendEnd && /* @__PURE__ */ React75.createElement("div", { className: "progress-legend-end" }, /* @__PURE__ */ React75.createElement(Text_default, null, legendEnd))));
+  return /* @__PURE__ */ React80.createElement("div", { ref, className: "progress-container" }, /* @__PURE__ */ React80.createElement("progress", { id, className: classes, value, max, ...others }, value), (legendStart || legendCenter || legendEnd) && /* @__PURE__ */ React80.createElement("div", { className: "progress-legends" }, legendStart && /* @__PURE__ */ React80.createElement("div", { className: "progress-legend-start" }, /* @__PURE__ */ React80.createElement(Text_default, null, legendStart)), legendCenter && /* @__PURE__ */ React80.createElement("div", { className: "progress-legend-center" }, /* @__PURE__ */ React80.createElement(Text_default, null, legendCenter)), legendEnd && /* @__PURE__ */ React80.createElement("div", { className: "progress-legend-end" }, /* @__PURE__ */ React80.createElement(Text_default, null, legendEnd))));
 });
 Progress.displayName = "Progress" /* Progress */;
 var Progress_default = Progress;
 
 // components/progress/item/ProgressItem.tsx
-var import_clsx63 = __toESM(require("clsx"));
-var import_react42 = __toESM(require("react"));
-var ProgressItem = import_react42.default.forwardRef(
+var import_clsx67 = __toESM(require("clsx"));
+var import_react43 = __toESM(require("react"));
+var ProgressItem = import_react43.default.forwardRef(
   ({ className, percent, maxPercent = 100, minPercent = 0, status, accessibilityLabel, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     const classes = hashClass(
       styled,
-      (0, import_clsx63.default)("progress-bar", status && is(getStatusClassName(status)), !status && is("primary"), className)
+      (0, import_clsx67.default)("progress-bar", status && is(getStatusClassName(status)), !status && is("primary"), className)
     );
-    return /* @__PURE__ */ import_react42.default.createElement(
+    return /* @__PURE__ */ import_react43.default.createElement(
       "div",
       {
         ref,
@@ -5848,9 +6168,9 @@ var ProgressItem_default = ProgressItem;
 var item_default3 = ProgressItem_default;
 
 // components/progress/radial/ProgressRadial.tsx
-var import_react43 = __toESM(require("react"));
-var import_clsx64 = __toESM(require("clsx"));
-var ProgressRadial = import_react43.default.forwardRef(({
+var import_react44 = __toESM(require("react"));
+var import_clsx68 = __toESM(require("clsx"));
+var ProgressRadial = import_react44.default.forwardRef(({
   children,
   value = 0,
   secondValue = 0,
@@ -5863,11 +6183,11 @@ var ProgressRadial = import_react43.default.forwardRef(({
   ...others
 }, ref) => {
   const { styled } = useTrilogyContext();
-  const [firstProgressCurrentValue, setFirstProgressCurrentValue] = (0, import_react43.useState)(0);
-  const [secondProgressCurrentValue, setSecondProgressCurrentValue] = (0, import_react43.useState)(0);
-  const classes = hashClass(styled, (0, import_clsx64.default)("progress-radial", skeleton && is("loading"), small && is("small"), className));
-  const classesContent = hashClass(styled, (0, import_clsx64.default)("progress-radial-content"));
-  const progressRadialRef = (0, import_react43.useRef)(null);
+  const [firstProgressCurrentValue, setFirstProgressCurrentValue] = (0, import_react44.useState)(0);
+  const [secondProgressCurrentValue, setSecondProgressCurrentValue] = (0, import_react44.useState)(0);
+  const classes = hashClass(styled, (0, import_clsx68.default)("progress-radial", skeleton && is("loading"), small && is("small"), className));
+  const classesContent = hashClass(styled, (0, import_clsx68.default)("progress-radial-content"));
+  const progressRadialRef = (0, import_react44.useRef)(null);
   const updateBackgroundStyle = (firstValue, secondValue2) => {
     const progressRadial = progressRadialRef.current;
     if (!progressRadial) {
@@ -5883,7 +6203,7 @@ var ProgressRadial = import_react43.default.forwardRef(({
     )} ${secondProgressStartDegree}deg ${secondProgressStartDegree + secondProgressDegree}deg, ${getColorStyle("MAIN_FADE")} ${secondProgressStartDegree + secondProgressDegree}deg 360deg)`;
     progressRadial.style.background = styleBackground;
   };
-  (0, import_react43.useEffect)(() => {
+  (0, import_react44.useEffect)(() => {
     let animationFrameId;
     setFirstProgressCurrentValue(0);
     setSecondProgressCurrentValue(0);
@@ -5900,10 +6220,10 @@ var ProgressRadial = import_react43.default.forwardRef(({
     animationFrameId = requestAnimationFrame(frame);
     return () => cancelAnimationFrame(animationFrameId);
   }, [value, secondValue]);
-  (0, import_react43.useEffect)(() => {
+  (0, import_react44.useEffect)(() => {
     updateBackgroundStyle(firstProgressCurrentValue, secondProgressCurrentValue);
   }, [firstProgressCurrentValue, secondProgressCurrentValue]);
-  return /* @__PURE__ */ import_react43.default.createElement("div", { id, ...others, className: classes, ref: progressRadialRef }, /* @__PURE__ */ import_react43.default.createElement("div", { ref, className: classesContent }, label && /* @__PURE__ */ import_react43.default.createElement(Title_default, { level: 2 /* TWO */, marginless: true }, label), description && /* @__PURE__ */ import_react43.default.createElement(Text_default, { level: 1 /* ONE */, marginless: true }, description), !label && !description && children));
+  return /* @__PURE__ */ import_react44.default.createElement("div", { id, ...others, className: classes, ref: progressRadialRef }, /* @__PURE__ */ import_react44.default.createElement("div", { ref, className: classesContent }, label && /* @__PURE__ */ import_react44.default.createElement(Title_default, { level: 2 /* TWO */, marginless: true }, label), description && /* @__PURE__ */ import_react44.default.createElement(Text_default, { level: 1 /* ONE */, marginless: true }, description), !label && !description && children));
 });
 ProgressRadial.displayName = "ProgressRadial" /* ProgressRadial */;
 var ProgressRadial_default = ProgressRadial;
@@ -5912,23 +6232,23 @@ var ProgressRadial_default = ProgressRadial;
 var radial_default = ProgressRadial_default;
 
 // components/progress/radial/item/ProgressRadialtem.tsx
-var import_clsx65 = __toESM(require("clsx"));
-var React78 = __toESM(require("react"));
+var import_clsx69 = __toESM(require("clsx"));
+var React83 = __toESM(require("react"));
 var ProgressRadialItem = ({ color, className, id }) => {
   const { styled } = useTrilogyContext();
-  const classes = hashClass(styled, (0, import_clsx65.default)(`progress-circle-slice progress-circle-background-${color}`, className));
-  return /* @__PURE__ */ React78.createElement("div", { id, className: classes });
+  const classes = hashClass(styled, (0, import_clsx69.default)(`progress-circle-slice progress-circle-background-${color}`, className));
+  return /* @__PURE__ */ React83.createElement("div", { id, className: classes });
 };
 var ProgressRadialtem_default = ProgressRadialItem;
 
 // components/radio/list/RadioList.tsx
-var import_clsx66 = __toESM(require("clsx"));
-var React79 = __toESM(require("react"));
-var RadioList = React79.forwardRef(
+var import_clsx70 = __toESM(require("clsx"));
+var React84 = __toESM(require("react"));
+var RadioList = React84.forwardRef(
   ({ className, id, align, horizontalMobile, verticalDesktop, accessibilityLabelledBy, children, label, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     const groupLabelClasses = hashClass(styled, "group-label");
-    return /* @__PURE__ */ React79.createElement(React79.Fragment, null, label && /* @__PURE__ */ React79.createElement("p", { className: groupLabelClasses }, label, isRequiredChild(children) && /* @__PURE__ */ React79.createElement(Text_default, { markup: "span" /* SPAN */, typo: "has-text-error" /* TEXT_ERROR */ }, " ", "*")), /* @__PURE__ */ React79.createElement(
+    return /* @__PURE__ */ React84.createElement(React84.Fragment, null, label && /* @__PURE__ */ React84.createElement("p", { className: groupLabelClasses }, label, isRequiredChild(children) && /* @__PURE__ */ React84.createElement(Text_default, { markup: "span" /* SPAN */, typo: "has-text-error" /* TEXT_ERROR */ }, " ", "*")), /* @__PURE__ */ React84.createElement(
       "div",
       {
         ref,
@@ -5938,7 +6258,7 @@ var RadioList = React79.forwardRef(
         "aria-required": isRequiredChild(children) ? "true" : void 0,
         className: hashClass(
           styled,
-          (0, import_clsx66.default)(
+          (0, import_clsx70.default)(
             "radios",
             className,
             align && is(getJustifiedClassName(align)),
@@ -5956,54 +6276,46 @@ RadioList.displayName = "RadioList" /* RadioList */;
 var RadioList_default = RadioList;
 
 // components/radio/Radio.tsx
-var import_clsx67 = __toESM(require("clsx"));
-var import_react44 = __toESM(require("react"));
-var Radio = import_react44.default.forwardRef(({
-  checked,
-  className,
-  disabled,
-  readonly,
-  id = import_react44.default.useId(),
-  label,
-  onChange,
-  name,
-  value,
-  required,
-  ...others
-}, ref) => {
-  const { styled } = useTrilogyContext();
-  return /* @__PURE__ */ import_react44.default.createElement("div", { ref, className: hashClass(styled, (0, import_clsx67.default)("radio", className)) }, /* @__PURE__ */ import_react44.default.createElement(
-    "input",
-    {
-      type: "radio",
-      readOnly: readonly,
-      id,
-      disabled,
-      name,
-      value,
-      checked,
-      required,
-      onChange: (e) => {
-        if (onChange && !disabled && !readonly) {
-          onChange({
-            radioId: e.target.id,
-            radioValue: e.target.value,
-            radioName: e.target.name,
-            radioChecked: e.target.checked
-          });
-        }
-      },
-      ...others
-    }
-  ), /* @__PURE__ */ import_react44.default.createElement("label", { htmlFor: id, className: hashClass(styled, (0, import_clsx67.default)("radio-label")) }, label));
-});
+var import_clsx71 = __toESM(require("clsx"));
+var import_react45 = __toESM(require("react"));
+var Radio = import_react45.default.forwardRef(
+  ({ checked, className, disabled, readonly, id = import_react45.default.useId(), label, onChange, name, value, required, ...others }, ref) => {
+    const { styled } = useTrilogyContext();
+    return /* @__PURE__ */ import_react45.default.createElement("div", { ref, className: hashClass(styled, (0, import_clsx71.default)("radio", className)) }, /* @__PURE__ */ import_react45.default.createElement(
+      "input",
+      {
+        type: "radio",
+        readOnly: readonly,
+        id,
+        disabled,
+        name,
+        value,
+        checked,
+        required,
+        onChange: (e) => {
+          if (onChange && !disabled && !readonly) {
+            onChange(
+              Object.assign(e, {
+                radioId: e.target.id,
+                radioValue: e.target.value,
+                radioName: e.target.name,
+                radioChecked: e.target.checked
+              })
+            );
+          }
+        },
+        ...others
+      }
+    ), /* @__PURE__ */ import_react45.default.createElement("label", { htmlFor: id, className: hashClass(styled, (0, import_clsx71.default)("radio-label")) }, label));
+  }
+);
 Radio.displayName = "Radio" /* Radio */;
 var Radio_default = Radio;
 
 // components/radio/tiles/RadioTiles.tsx
-var import_clsx68 = __toESM(require("clsx"));
-var React81 = __toESM(require("react"));
-var RadioTiles = React81.forwardRef(({ id, className, children, align, verticalAlign, accessibilityLabelledBy, ...others }, ref) => {
+var import_clsx72 = __toESM(require("clsx"));
+var React86 = __toESM(require("react"));
+var RadioTiles = React86.forwardRef(({ id, className, children, align, verticalAlign, accessibilityLabelledBy, ...others }, ref) => {
   const { styled } = useTrilogyContext();
   let alignClass = null;
   if (align) {
@@ -6013,7 +6325,7 @@ var RadioTiles = React81.forwardRef(({ id, className, children, align, verticalA
   if (verticalAlign) {
     verticalAlignClass = getAlignClassName(verticalAlign) === "aligned-start" && is("aligned-start") || getAlignClassName(verticalAlign) === "aligned-center" && is("aligned-center") || getAlignClassName(verticalAlign) === "aligned-end" && is("aligned-end") || getAlignClassName(verticalAlign) === "aligned-stretch" && is("aligned-stretch") || null;
   }
-  return /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React86.createElement(
     "div",
     {
       ref,
@@ -6023,7 +6335,7 @@ var RadioTiles = React81.forwardRef(({ id, className, children, align, verticalA
       "aria-required": isRequiredChild(children) ? "true" : void 0,
       className: hashClass(
         styled,
-        (0, import_clsx68.default)("radio-tiles", className, align && alignClass, verticalAlign && verticalAlignClass)
+        (0, import_clsx72.default)("radio-tiles", className, align && alignClass, verticalAlign && verticalAlignClass)
       ),
       ...others
     },
@@ -6034,62 +6346,66 @@ RadioTiles.displayName = "RadioTiles" /* RadioTiles */;
 var RadioTiles_default = RadioTiles;
 
 // components/radio/tiles/tile/RadioTile.tsx
-var import_clsx69 = __toESM(require("clsx"));
-var import_react45 = __toESM(require("react"));
-var RadioTile = import_react45.default.forwardRef(({
-  checked,
-  className,
-  disabled,
-  readonly,
-  id = import_react45.default.useId(),
-  label,
-  onChange,
-  name,
-  value,
-  description,
-  icon,
-  horizontal,
-  required,
-  sticker,
-  stickerVariant = "ACCENT" /* ACCENT */,
-  ...others
-}, ref) => {
-  const { styled } = useTrilogyContext();
-  return /* @__PURE__ */ import_react45.default.createElement("div", { ref, className: hashClass(styled, (0, import_clsx69.default)("radio-tile", horizontal && is("horizontal"), className)) }, /* @__PURE__ */ import_react45.default.createElement(
-    "input",
-    {
-      type: "radio",
-      readOnly: readonly,
-      id,
-      disabled,
-      name,
-      value,
-      checked,
-      required,
-      onChange: (e) => {
-        if (onChange && !disabled && !readonly) {
-          onChange({
-            radioId: e.target.id,
-            radioValue: e.target.value,
-            radioName: e.target.name,
-            radioChecked: e.target.checked
-          });
-        }
-      },
-      ...others
-    }
-  ), /* @__PURE__ */ import_react45.default.createElement("label", { htmlFor: id, className: hashClass(styled, (0, import_clsx69.default)("radio-label")) }, icon && /* @__PURE__ */ import_react45.default.createElement(Icon_default, { name: icon, size: "medium" /* MEDIUM */ }), horizontal ? /* @__PURE__ */ import_react45.default.createElement("span", null, /* @__PURE__ */ import_react45.default.createElement("span", { className: hashClass(styled, (0, import_clsx69.default)("radio-title")) }, label), description && /* @__PURE__ */ import_react45.default.createElement("span", { className: hashClass(styled, (0, import_clsx69.default)("radio-description")) }, description)) : /* @__PURE__ */ import_react45.default.createElement(import_react45.default.Fragment, null, /* @__PURE__ */ import_react45.default.createElement("span", { className: hashClass(styled, (0, import_clsx69.default)("radio-title")) }, label), description && /* @__PURE__ */ import_react45.default.createElement("span", { className: hashClass(styled, (0, import_clsx69.default)("radio-description")) }, description))), sticker && /* @__PURE__ */ import_react45.default.createElement(Sticker_default, { label: sticker, variant: stickerVariant, className: "radio-sticker", small: true }));
-});
+var import_clsx73 = __toESM(require("clsx"));
+var import_react46 = __toESM(require("react"));
+var RadioTile = import_react46.default.forwardRef(
+  ({
+    checked,
+    className,
+    disabled,
+    readonly,
+    id = import_react46.default.useId(),
+    label,
+    onChange,
+    name,
+    value,
+    description,
+    icon,
+    horizontal,
+    required,
+    sticker,
+    stickerVariant = "ACCENT" /* ACCENT */,
+    ...others
+  }, ref) => {
+    const { styled } = useTrilogyContext();
+    return /* @__PURE__ */ import_react46.default.createElement("div", { ref, className: hashClass(styled, (0, import_clsx73.default)("radio-tile", horizontal && is("horizontal"), className)) }, /* @__PURE__ */ import_react46.default.createElement(
+      "input",
+      {
+        type: "radio",
+        readOnly: readonly,
+        id,
+        disabled,
+        name,
+        value,
+        checked,
+        required,
+        onChange: (e) => {
+          if (onChange && !disabled && !readonly) {
+            onChange(
+              Object.assign(e, {
+                radioId: e.target.id,
+                radioValue: e.target.value,
+                radioName: e.target.name,
+                radioChecked: e.target.checked
+              })
+            );
+          }
+        },
+        ...others
+      }
+    ), /* @__PURE__ */ import_react46.default.createElement("label", { htmlFor: id, className: hashClass(styled, (0, import_clsx73.default)("radio-label")) }, icon && /* @__PURE__ */ import_react46.default.createElement(Icon_default, { name: icon, size: "medium" /* MEDIUM */ }), horizontal ? /* @__PURE__ */ import_react46.default.createElement("span", null, /* @__PURE__ */ import_react46.default.createElement("span", { className: hashClass(styled, (0, import_clsx73.default)("radio-title")) }, label), description && /* @__PURE__ */ import_react46.default.createElement("span", { className: hashClass(styled, (0, import_clsx73.default)("radio-description")) }, description)) : /* @__PURE__ */ import_react46.default.createElement(import_react46.default.Fragment, null, /* @__PURE__ */ import_react46.default.createElement("span", { className: hashClass(styled, (0, import_clsx73.default)("radio-title")) }, label), description && /* @__PURE__ */ import_react46.default.createElement("span", { className: hashClass(styled, (0, import_clsx73.default)("radio-description")) }, description))), sticker && /* @__PURE__ */ import_react46.default.createElement(Sticker_default, { label: sticker, variant: stickerVariant, className: "radio-sticker", small: true }));
+  }
+);
 RadioTile.displayName = "RadioTile" /* RadioTile */;
 var RadioTile_default = RadioTile;
 
 // components/range/Range.tsx
-var import_clsx70 = __toESM(require("clsx"));
-var React83 = __toESM(require("react"));
-var Range = React83.forwardRef(
+var import_clsx74 = __toESM(require("clsx"));
+var React88 = __toESM(require("react"));
+var Range = React88.forwardRef(
   ({
     className,
-    id = React83.useId(),
+    id = React88.useId(),
     min,
     max,
     label,
@@ -6105,37 +6421,37 @@ var Range = React83.forwardRef(
     value
   }, ref) => {
     const { styled } = useTrilogyContext();
-    const refTrack = React83.useRef(null);
-    const [cursorMin, setCursorMin] = React83.useState(valueMin != null ? valueMin : 0);
-    const [cursorMax, setCursorMax] = React83.useState(simple ? value || 0 : valueMax != null ? valueMax : max);
-    React83.useEffect(() => {
+    const refTrack = React88.useRef(null);
+    const [cursorMin, setCursorMin] = React88.useState(valueMin != null ? valueMin : 0);
+    const [cursorMax, setCursorMax] = React88.useState(simple ? value || 0 : valueMax != null ? valueMax : max);
+    React88.useEffect(() => {
       if (refTrack.current) {
         const track = refTrack.current;
         track.style.background = `linear-gradient(to right, ${getColorStyle("MAIN_FADE" /* MAIN_FADE */)} ${cursorMin / max * 100}% , ${getColorStyle("MAIN" /* MAIN */)} ${cursorMin / max * 100}% , ${getColorStyle("MAIN" /* MAIN */)} ${cursorMax / max * 100}%, ${getColorStyle("MAIN_FADE" /* MAIN_FADE */)} ${cursorMax / max * 100}%) `;
       }
     }, [cursorMin, cursorMax]);
-    React83.useEffect(() => {
+    React88.useEffect(() => {
       setCursorMin(valueMin || 0);
     }, [valueMin]);
-    React83.useEffect(() => {
+    React88.useEffect(() => {
       if (!simple) setCursorMax(valueMax || max);
     }, [valueMax, simple]);
-    React83.useEffect(() => {
+    React88.useEffect(() => {
       if (simple && value !== void 0) setCursorMax(value);
     }, [value, simple]);
-    const handleChangeCursorMin = React83.useCallback(
+    const handleChangeCursorMin = React88.useCallback(
       (e) => {
         if (Number(e.target.value) < cursorMax - gap) setCursorMin(Number(e.target.value));
       },
       [cursorMax, cursorMin]
     );
-    const handleChangeCursorMax = React83.useCallback(
+    const handleChangeCursorMax = React88.useCallback(
       (e) => {
         if (Number(e.target.value) >= cursorMin + gap) setCursorMax(Number(e.target.value));
       },
       [cursorMax, cursorMin]
     );
-    const handleMouseUpMin = React83.useCallback(() => {
+    const handleMouseUpMin = React88.useCallback(() => {
       if (onChangeMin) {
         onChangeMin({
           inputName: name,
@@ -6143,7 +6459,7 @@ var Range = React83.forwardRef(
         });
       }
     }, [onChangeMin, name, cursorMin]);
-    const handleMouseUpMax = React83.useCallback(() => {
+    const handleMouseUpMax = React88.useCallback(() => {
       if (onChangeMax && !simple) {
         onChangeMax({
           inputName: name,
@@ -6157,10 +6473,10 @@ var Range = React83.forwardRef(
         });
       }
     }, [onChangeMax, name, cursorMax, onChange, simple]);
-    return /* @__PURE__ */ React83.createElement("div", { ref, id, className: hashClass(styled, (0, import_clsx70.default)("range-container", className)) }, /* @__PURE__ */ React83.createElement("label", { className: hashClass(styled, (0, import_clsx70.default)("range-label")) }, label), /* @__PURE__ */ React83.createElement("div", { className: hashClass(styled, (0, import_clsx70.default)("range")) }, /* @__PURE__ */ React83.createElement("div", { ref: refTrack, className: hashClass(styled, (0, import_clsx70.default)("range-track")) }), !simple && /* @__PURE__ */ React83.createElement(
+    return /* @__PURE__ */ React88.createElement("div", { ref, id, className: hashClass(styled, (0, import_clsx74.default)("range-container", className)) }, /* @__PURE__ */ React88.createElement("label", { className: hashClass(styled, (0, import_clsx74.default)("range-label")) }, label), /* @__PURE__ */ React88.createElement("div", { className: hashClass(styled, (0, import_clsx74.default)("range")) }, /* @__PURE__ */ React88.createElement("div", { ref: refTrack, className: hashClass(styled, (0, import_clsx74.default)("range-track")) }), !simple && /* @__PURE__ */ React88.createElement(
       "input",
       {
-        className: hashClass(styled, (0, import_clsx70.default)("range-cursor range-cursor-min")),
+        className: hashClass(styled, (0, import_clsx74.default)("range-cursor range-cursor-min")),
         onTouchEnd: handleMouseUpMin,
         onMouseUp: handleMouseUpMin,
         onChange: handleChangeCursorMin,
@@ -6172,10 +6488,10 @@ var Range = React83.forwardRef(
         id: `${id}-min`,
         "aria-label": label
       }
-    ), /* @__PURE__ */ React83.createElement(
+    ), /* @__PURE__ */ React88.createElement(
       "input",
       {
-        className: hashClass(styled, (0, import_clsx70.default)("range-cursor", !simple && "range-cursor-max")),
+        className: hashClass(styled, (0, import_clsx74.default)("range-cursor", !simple && "range-cursor-max")),
         onTouchEnd: handleMouseUpMax,
         onMouseUp: handleMouseUpMax,
         onChange: handleChangeCursorMax,
@@ -6187,25 +6503,25 @@ var Range = React83.forwardRef(
         id: `${id}-max`,
         "aria-label": label
       }
-    )), /* @__PURE__ */ React83.createElement("div", { className: hashClass(styled, (0, import_clsx70.default)("range-values")) }, !simple && /* @__PURE__ */ React83.createElement("div", null, /* @__PURE__ */ React83.createElement("span", { className: hashClass(styled, (0, import_clsx70.default)("range-value-min")) }, cursorMin), unit && /* @__PURE__ */ React83.createElement("span", null, " ", unit)), /* @__PURE__ */ React83.createElement("div", null, /* @__PURE__ */ React83.createElement("span", { className: hashClass(styled, (0, import_clsx70.default)(simple ? "range-value" : "range-value-max")) }, cursorMax), unit && /* @__PURE__ */ React83.createElement("span", null, " ", unit))));
+    )), /* @__PURE__ */ React88.createElement("div", { className: hashClass(styled, (0, import_clsx74.default)("range-values")) }, !simple && /* @__PURE__ */ React88.createElement("div", null, /* @__PURE__ */ React88.createElement("span", { className: hashClass(styled, (0, import_clsx74.default)("range-value-min")) }, cursorMin), unit && /* @__PURE__ */ React88.createElement("span", null, " ", unit)), /* @__PURE__ */ React88.createElement("div", null, /* @__PURE__ */ React88.createElement("span", { className: hashClass(styled, (0, import_clsx74.default)(simple ? "range-value" : "range-value-max")) }, cursorMax), unit && /* @__PURE__ */ React88.createElement("span", null, " ", unit))));
   }
 );
 Range.displayName = "Range" /* Range */;
 var Range_default = Range;
 
 // components/rows/Rows.tsx
-var import_clsx71 = __toESM(require("clsx"));
-var React84 = __toESM(require("react"));
-var Rows = React84.forwardRef(({ className, id, gap, ...others }, ref) => {
+var import_clsx75 = __toESM(require("clsx"));
+var React89 = __toESM(require("react"));
+var Rows = React89.forwardRef(({ className, id, gap, ...others }, ref) => {
   const { styled } = useTrilogyContext();
-  return /* @__PURE__ */ React84.createElement(
+  return /* @__PURE__ */ React89.createElement(
     "div",
     {
       ref,
       id,
       className: hashClass(
         styled,
-        (0, import_clsx71.default)("rows", gap && has(`gap-${gap}`), typeof gap !== "undefined" && gap === 0 && is("gapless"), className)
+        (0, import_clsx75.default)("rows", gap && has(`gap-${gap}`), typeof gap !== "undefined" && gap === 0 && is("gapless"), className)
       ),
       ...others
     }
@@ -6215,12 +6531,12 @@ Rows.displayName = "Rows" /* Rows */;
 var Rows_default = Rows;
 
 // components/rows/row/Row.tsx
-var import_clsx72 = __toESM(require("clsx"));
-var React85 = __toESM(require("react"));
-var Row = React85.forwardRef(({ className, id, narrow, ...others }, ref) => {
+var import_clsx76 = __toESM(require("clsx"));
+var React90 = __toESM(require("react"));
+var Row = React90.forwardRef(({ className, id, narrow, ...others }, ref) => {
   const { styled } = useTrilogyContext();
-  const classes = hashClass(styled, (0, import_clsx72.default)("row", narrow && is("narrow"), className));
-  return /* @__PURE__ */ React85.createElement("div", { ref, id, className: classes, ...others });
+  const classes = hashClass(styled, (0, import_clsx76.default)("row", narrow && is("narrow"), className));
+  return /* @__PURE__ */ React90.createElement("div", { ref, id, className: classes, ...others });
 });
 Row.displayName = "Row" /* Row */;
 var Row_default = Row;
@@ -6229,9 +6545,9 @@ var Row_default = Row;
 var row_default = Row_default;
 
 // components/scroll-view/ScrollView.tsx
-var import_clsx73 = __toESM(require("clsx"));
-var React86 = __toESM(require("react"));
-var ScrollView = React86.forwardRef(
+var import_clsx77 = __toESM(require("clsx"));
+var React91 = __toESM(require("react"));
+var ScrollView = React91.forwardRef(
   ({ id, scrollDirection, children }, ref) => {
     const { styled } = useTrilogyContext();
     const scrollDirectionClassName = () => {
@@ -6247,22 +6563,22 @@ var ScrollView = React86.forwardRef(
     };
     const classes = hashClass(
       styled,
-      (0, import_clsx73.default)("scroll-view", scrollDirection && scrollDirectionClassName())
+      (0, import_clsx77.default)("scroll-view", scrollDirection && scrollDirectionClassName())
     );
-    return /* @__PURE__ */ React86.createElement("div", { ref, className: classes, id }, children);
+    return /* @__PURE__ */ React91.createElement("div", { ref, className: classes, id }, children);
   }
 );
 ScrollView.displayName = "ScrollView" /* ScrollView */;
 var ScrollView_default = ScrollView;
 
 // components/section/Section.tsx
-var import_clsx74 = __toESM(require("clsx"));
-var import_react46 = __toESM(require("react"));
-var Section = import_react46.default.forwardRef(({ className, id, skeleton, backgroundColor, backgroundSrc, inverted, ...others }, ref) => {
+var import_clsx78 = __toESM(require("clsx"));
+var import_react47 = __toESM(require("react"));
+var Section = import_react47.default.forwardRef(({ className, id, skeleton, backgroundColor, backgroundSrc, inverted, ...others }, ref) => {
   const { styled } = useTrilogyContext();
   const _className = hashClass(
     styled,
-    (0, import_clsx74.default)(
+    (0, import_clsx78.default)(
       "section",
       className,
       backgroundColor && has(getBackgroundClassName(backgroundColor)),
@@ -6271,7 +6587,7 @@ var Section = import_react46.default.forwardRef(({ className, id, skeleton, back
       skeleton && is("loading")
     )
   );
-  return /* @__PURE__ */ import_react46.default.createElement(
+  return /* @__PURE__ */ import_react47.default.createElement(
     "section",
     {
       ref,
@@ -6288,27 +6604,27 @@ Section.displayName = "Section" /* Section */;
 var Section_default = Section;
 
 // components/segment-control/SegmentControl.tsx
-var import_clsx76 = __toESM(require("clsx"));
-var import_react48 = __toESM(require("react"));
+var import_clsx80 = __toESM(require("clsx"));
+var import_react49 = __toESM(require("react"));
 
 // components/segment-control/item/SegmentControlItem.tsx
-var import_clsx75 = __toESM(require("clsx"));
-var import_react47 = __toESM(require("react"));
-var SegmentControlItem = import_react47.default.forwardRef(
+var import_clsx79 = __toESM(require("clsx"));
+var import_react48 = __toESM(require("react"));
+var SegmentControlItem = import_react48.default.forwardRef(
   ({ active, onClick, disabled, className, id, children, ...others }, ref) => {
-    const [activeItem, setActiveItem] = (0, import_react47.useState)(active || false);
+    const [activeItem, setActiveItem] = (0, import_react48.useState)(active || false);
     const { styled } = useTrilogyContext();
-    (0, import_react47.useEffect)(() => {
+    (0, import_react48.useEffect)(() => {
       setActiveItem(active || false);
     }, [active]);
-    return /* @__PURE__ */ import_react47.default.createElement(
+    return /* @__PURE__ */ import_react48.default.createElement(
       "button",
       {
         type: "button",
         ref,
         id,
         disabled,
-        className: hashClass(styled, (0, import_clsx75.default)("segmented-control-item", className, { "is-active": activeItem })),
+        className: hashClass(styled, (0, import_clsx79.default)("segmented-control-item", className, { "is-active": activeItem })),
         onClick: (e) => {
           const target = e.target;
           setActiveItem(active || false);
@@ -6330,10 +6646,10 @@ var SegmentControlItem_default = SegmentControlItem;
 var item_default4 = SegmentControlItem_default;
 
 // components/segment-control/SegmentControl.tsx
-var SegmentControl = import_react48.default.forwardRef(({ className, id, onClick, children, activeIndex, align, ...others }, ref) => {
+var SegmentControl = import_react49.default.forwardRef(({ className, id, onClick, children, activeIndex, align, ...others }, ref) => {
   const { styled } = useTrilogyContext();
-  const classes = hashClass(styled, (0, import_clsx76.default)("segmented-control", align && getJustifiedClassName(align), className));
-  const [activateIndex, setActivateIndex] = (0, import_react48.useState)(activeIndex || 0);
+  const classes = hashClass(styled, (0, import_clsx80.default)("segmented-control", align && getJustifiedClassName(align), className));
+  const [activateIndex, setActivateIndex] = (0, import_react49.useState)(activeIndex || 0);
   const isActive = (index, childPropsActive) => {
     if (typeof childPropsActive !== "undefined" && !activateIndex) {
       return childPropsActive;
@@ -6346,10 +6662,10 @@ var SegmentControl = import_react48.default.forwardRef(({ className, id, onClick
     setActivateIndex(index);
     if (onClick) onClick(e);
   };
-  import_react48.default.useEffect(() => {
+  import_react49.default.useEffect(() => {
     setActivateIndex(activateIndex);
   }, [activateIndex]);
-  return /* @__PURE__ */ import_react48.default.createElement("div", { ref, id, className: classes, ...others }, children && Array.isArray(children) && // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return /* @__PURE__ */ import_react49.default.createElement("div", { ref, id, className: classes, ...others }, children && Array.isArray(children) && // eslint-disable-next-line @typescript-eslint/no-explicit-any
   children.map((child, index) => {
     const props = {
       active: Boolean(isActive(index, child.props.active)) || false,
@@ -6364,7 +6680,7 @@ var SegmentControl = import_react48.default.forwardRef(({ className, id, onClick
         }
       }
     };
-    return child && typeof child.valueOf() === "string" ? /* @__PURE__ */ import_react48.default.createElement(
+    return child && typeof child.valueOf() === "string" ? /* @__PURE__ */ import_react49.default.createElement(
       item_default4,
       {
         disabled: props.disabled,
@@ -6373,23 +6689,23 @@ var SegmentControl = import_react48.default.forwardRef(({ className, id, onClick
         onClick: (e) => onClick == null ? void 0 : onClick(e)
       },
       child
-    ) : import_react48.default.cloneElement(child, props);
+    ) : import_react49.default.cloneElement(child, props);
   }));
 });
 SegmentControl.displayName = "SegmentControl" /* SegmentControl */;
 var SegmentControl_default = SegmentControl;
 
 // components/skeleton/Skeleton.tsx
-var import_react49 = __toESM(require("react"));
+var import_react50 = __toESM(require("react"));
 var Skeleton = () => {
-  return /* @__PURE__ */ import_react49.default.createElement("div", null);
+  return /* @__PURE__ */ import_react50.default.createElement("div", null);
 };
 var Skeleton_default = Skeleton;
 
 // components/spacer/Spacer.tsx
-var import_clsx77 = __toESM(require("clsx"));
-var React91 = __toESM(require("react"));
-var Spacer = React91.forwardRef(({ size: size2, horizontal, className, id }, ref) => {
+var import_clsx81 = __toESM(require("clsx"));
+var React96 = __toESM(require("react"));
+var Spacer = React96.forwardRef(({ size: size2, horizontal, className, id }, ref) => {
   const { styled } = useTrilogyContext();
   const styles = {
     spacer: {
@@ -6397,25 +6713,25 @@ var Spacer = React91.forwardRef(({ size: size2, horizontal, className, id }, ref
       marginTop: !horizontal ? `${size2}px` : "0px"
     }
   };
-  const classes = hashClass(styled, (0, import_clsx77.default)(className));
-  return /* @__PURE__ */ React91.createElement("div", { ref, id, style: styles.spacer, className: classes });
+  const classes = hashClass(styled, (0, import_clsx81.default)(className));
+  return /* @__PURE__ */ React96.createElement("div", { ref, id, style: styles.spacer, className: classes });
 });
 Spacer.displayName = "Spacer" /* Spacer */;
 var Spacer_default = Spacer;
 
 // components/stepper/Stepper.tsx
-var import_clsx78 = __toESM(require("clsx"));
-var React92 = __toESM(require("react"));
-var Stepper = React92.forwardRef(({ className, id, children, ...others }, ref) => {
+var import_clsx82 = __toESM(require("clsx"));
+var React97 = __toESM(require("react"));
+var Stepper = React97.forwardRef(({ className, id, children, ...others }, ref) => {
   const { styled } = useTrilogyContext();
-  const classes = hashClass(styled, (0, import_clsx78.default)("stepper-wrapper", className));
-  const [currentStep, setCurrentStep] = React92.useState(1);
-  const nbChild = React92.useMemo(() => {
+  const classes = hashClass(styled, (0, import_clsx82.default)("stepper-wrapper", className));
+  const [currentStep, setCurrentStep] = React97.useState(1);
+  const nbChild = React97.useMemo(() => {
     if (children && Array.isArray(children)) return children.length;
     if (children && !Array.isArray(children)) return 1;
     return 0;
   }, [children]);
-  React92.useEffect(() => {
+  React97.useEffect(() => {
     if (children) {
       if (Array.isArray(children)) {
         let haveCurrentStep = false;
@@ -6432,20 +6748,20 @@ var Stepper = React92.forwardRef(({ className, id, children, ...others }, ref) =
       }
     }
   }, [children]);
-  return /* @__PURE__ */ React92.createElement("div", { ref, id, className: classes, ...others }, children, /* @__PURE__ */ React92.createElement("div", { className: "step-count" }, /* @__PURE__ */ React92.createElement(Text_default, null, currentStep, "/", nbChild)));
+  return /* @__PURE__ */ React97.createElement("div", { ref, id, className: classes, ...others }, children, /* @__PURE__ */ React97.createElement("div", { className: "step-count" }, /* @__PURE__ */ React97.createElement(Text_default, null, currentStep, "/", nbChild)));
 });
 Stepper.displayName = "Stepper" /* Stepper */;
 var Stepper_default = Stepper;
 
 // components/stepper/step/Step.tsx
-var import_clsx79 = __toESM(require("clsx"));
-var import_react50 = __toESM(require("react"));
-var Step = import_react50.default.forwardRef(({ className, id, active, current, done, label, iconName, error, ...others }, ref) => {
+var import_clsx83 = __toESM(require("clsx"));
+var import_react51 = __toESM(require("react"));
+var Step = import_react51.default.forwardRef(({ className, id, active, current, done, label, iconName, error, ...others }, ref) => {
   const { styled } = useTrilogyContext();
-  const classesStepLabel = hashClass(styled, (0, import_clsx79.default)("step-label"));
+  const classesStepLabel = hashClass(styled, (0, import_clsx83.default)("step-label"));
   const classes = hashClass(
     styled,
-    (0, import_clsx79.default)(
+    (0, import_clsx83.default)(
       "stepper-item",
       active && is("active"),
       current && is("current"),
@@ -6454,7 +6770,7 @@ var Step = import_react50.default.forwardRef(({ className, id, active, current,
       className
     )
   );
-  return /* @__PURE__ */ import_react50.default.createElement("div", { ref, id, className: classes, "data-label": label, ...others }, /* @__PURE__ */ import_react50.default.createElement("div", { className: classesStepLabel }, label, !done && iconName && /* @__PURE__ */ import_react50.default.createElement(Icon_default, { name: iconName && iconName, className: "step-icon", size: "medium" /* MEDIUM */ })));
+  return /* @__PURE__ */ import_react51.default.createElement("div", { ref, id, className: classes, "data-label": label, ...others }, /* @__PURE__ */ import_react51.default.createElement("div", { className: classesStepLabel }, label, !done && iconName && /* @__PURE__ */ import_react51.default.createElement(Icon_default, { name: iconName && iconName, className: "step-icon", size: "medium" /* MEDIUM */ })));
 });
 Step.displayName = "Step" /* Step */;
 var Step_default = Step;
@@ -6472,11 +6788,11 @@ var StepMarkup = /* @__PURE__ */ ((StepMarkup2) => {
 var step_default = Step_default;
 
 // components/switch/Switch.tsx
-var import_clsx80 = __toESM(require("clsx"));
-var import_react51 = __toESM(require("react"));
-var Switch = import_react51.default.forwardRef(({
+var import_clsx84 = __toESM(require("clsx"));
+var import_react52 = __toESM(require("react"));
+var Switch = import_react52.default.forwardRef(({
   className,
-  id = import_react51.default.useId(),
+  id = import_react52.default.useId(),
   label,
   value,
   checked,
@@ -6490,23 +6806,23 @@ var Switch = import_react51.default.forwardRef(({
   fullWidth,
   ...others
 }, ref) => {
-  const [_checked, setChecked] = (0, import_react51.useState)(checked || false);
+  const [_checked, setChecked] = (0, import_react52.useState)(checked || false);
   const { styled } = useTrilogyContext();
-  import_react51.default.useEffect(() => {
+  import_react52.default.useEffect(() => {
     setChecked(checked || false);
   }, [checked]);
-  (0, import_react51.useEffect)(() => {
+  (0, import_react52.useEffect)(() => {
     if (!readonly) {
       setChecked(checked || false);
     }
   }, [checked, readonly]);
-  return /* @__PURE__ */ import_react51.default.createElement(
+  return /* @__PURE__ */ import_react52.default.createElement(
     "div",
     {
       ref,
-      className: hashClass(styled, (0, import_clsx80.default)("switch", reversed && is("reversed"), fullWidth && is("fullwidth"), className))
+      className: hashClass(styled, (0, import_clsx84.default)("switch", reversed && is("reversed"), fullWidth && is("fullwidth"), className))
     },
-    /* @__PURE__ */ import_react51.default.createElement(
+    /* @__PURE__ */ import_react52.default.createElement(
       "input",
       {
         onChange: (e) => {
@@ -6538,19 +6854,19 @@ var Switch = import_react51.default.forwardRef(({
         id: `switch-${id}`,
         type: "checkbox",
         disabled,
-        className: hashClass(styled, (0, import_clsx80.default)(status && is(getStatusClassName(status)))),
+        className: hashClass(styled, (0, import_clsx84.default)(status && is(getStatusClassName(status)))),
         ...others
       }
     ),
-    /* @__PURE__ */ import_react51.default.createElement("label", { htmlFor: `switch-${id}` }, label)
+    /* @__PURE__ */ import_react52.default.createElement("label", { htmlFor: `switch-${id}` }, label)
   );
 });
 Switch.displayName = "Switch" /* Switch */;
 var Switch_default = Switch;
 
 // components/table/Table.tsx
-var React95 = __toESM(require("react"));
-var import_clsx81 = __toESM(require("clsx"));
+var React100 = __toESM(require("react"));
+var import_clsx85 = __toESM(require("clsx"));
 
 // components/table/TableProps.ts
 var TableBorderEnum = /* @__PURE__ */ ((TableBorderEnum2) => {
@@ -6561,7 +6877,7 @@ var TableBorderEnum = /* @__PURE__ */ ((TableBorderEnum2) => {
 })(TableBorderEnum || {});
 
 // components/table/Table.tsx
-var Table = React95.forwardRef(({
+var Table = React100.forwardRef(({
   className,
   id,
   fullwidth,
@@ -6573,7 +6889,7 @@ var Table = React95.forwardRef(({
   const { styled } = useTrilogyContext();
   const classes = hashClass(
     styled,
-    (0, import_clsx81.default)(
+    (0, import_clsx85.default)(
       "table",
       fullwidth && is("fullwidth"),
       border && border !== "lines" /* LINES */ && has(`border-${border}`),
@@ -6582,25 +6898,25 @@ var Table = React95.forwardRef(({
       className
     )
   );
-  return /* @__PURE__ */ React95.createElement("table", { ref, id, className: classes, ...others });
+  return /* @__PURE__ */ React100.createElement("table", { ref, id, className: classes, ...others });
 });
 Table.displayName = "Table" /* Table */;
 var Table_default = Table;
 
 // components/table/head/TableHead.tsx
-var React96 = __toESM(require("react"));
-var import_clsx82 = __toESM(require("clsx"));
-var TableHead = React96.forwardRef(({ className, id, color, backgroundColor, ...others }, ref) => {
+var React101 = __toESM(require("react"));
+var import_clsx86 = __toESM(require("clsx"));
+var TableHead = React101.forwardRef(({ className, id, color, backgroundColor, ...others }, ref) => {
   const { styled } = useTrilogyContext();
   const classes = hashClass(
     styled,
-    (0, import_clsx82.default)(
+    (0, import_clsx86.default)(
       className,
       backgroundColor && has(getBackgroundClassName(backgroundColor)),
       color && is(getColorClassName(color))
     )
   );
-  return /* @__PURE__ */ React96.createElement("thead", { ref, id, className: classes, ...others });
+  return /* @__PURE__ */ React101.createElement("thead", { ref, id, className: classes, ...others });
 });
 TableHead.displayName = "TableHead" /* TableHead */;
 var TableHead_default = TableHead;
@@ -6609,19 +6925,19 @@ var TableHead_default = TableHead;
 var head_default = TableHead_default;
 
 // components/table/body/TableBody.tsx
-var React97 = __toESM(require("react"));
-var import_clsx83 = __toESM(require("clsx"));
-var TableBody = React97.forwardRef(({ className, id, color, backgroundColor, ...others }, ref) => {
+var React102 = __toESM(require("react"));
+var import_clsx87 = __toESM(require("clsx"));
+var TableBody = React102.forwardRef(({ className, id, color, backgroundColor, ...others }, ref) => {
   const { styled } = useTrilogyContext();
   const classes = hashClass(
     styled,
-    (0, import_clsx83.default)(
+    (0, import_clsx87.default)(
       className,
       backgroundColor && has(getBackgroundClassName(backgroundColor)),
       color && is(getColorClassName(color))
     )
   );
-  return /* @__PURE__ */ React97.createElement("tbody", { ref, id, className: classes, ...others });
+  return /* @__PURE__ */ React102.createElement("tbody", { ref, id, className: classes, ...others });
 });
 TableBody.displayName = "TableBody" /* TableBody */;
 var TableBody_default = TableBody;
@@ -6630,12 +6946,12 @@ var TableBody_default = TableBody;
 var body_default = TableBody_default;
 
 // components/table/th/TableTh.tsx
-var React98 = __toESM(require("react"));
-var import_clsx84 = __toESM(require("clsx"));
-var TableTh = React98.forwardRef(({ className, id, colSpan, rowSpan, ...others }, ref) => {
+var React103 = __toESM(require("react"));
+var import_clsx88 = __toESM(require("clsx"));
+var TableTh = React103.forwardRef(({ className, id, colSpan, rowSpan, ...others }, ref) => {
   const { styled } = useTrilogyContext();
-  const classes = hashClass(styled, (0, import_clsx84.default)(className));
-  return /* @__PURE__ */ React98.createElement("th", { ref, id, className: classes, colSpan, rowSpan, ...others });
+  const classes = hashClass(styled, (0, import_clsx88.default)(className));
+  return /* @__PURE__ */ React103.createElement("th", { ref, id, className: classes, colSpan, rowSpan, ...others });
 });
 TableTh.displayName = "TableTh" /* TableTh */;
 var TableTh_default = TableTh;
@@ -6644,9 +6960,9 @@ var TableTh_default = TableTh;
 var th_default = TableTh_default;
 
 // components/table/tr/TableTr.tsx
-var React99 = __toESM(require("react"));
-var import_clsx85 = __toESM(require("clsx"));
-var TableTr = React99.forwardRef(({
+var React104 = __toESM(require("react"));
+var import_clsx89 = __toESM(require("clsx"));
+var TableTr = React104.forwardRef(({
   className,
   id,
   expandable,
@@ -6658,7 +6974,7 @@ var TableTr = React99.forwardRef(({
   const { styled } = useTrilogyContext();
   const classes = hashClass(
     styled,
-    (0, import_clsx85.default)(
+    (0, import_clsx89.default)(
       className,
       expandable && is("expandable"),
       expanded && is("expanded"),
@@ -6666,7 +6982,7 @@ var TableTr = React99.forwardRef(({
       color && getColorClassName(color)
     )
   );
-  return /* @__PURE__ */ React99.createElement("tr", { ref, id, className: classes, ...others });
+  return /* @__PURE__ */ React104.createElement("tr", { ref, id, className: classes, ...others });
 });
 TableTr.displayName = "TableTr" /* TableTr */;
 var TableTr_default = TableTr;
@@ -6675,12 +6991,12 @@ var TableTr_default = TableTr;
 var tr_default = TableTr_default;
 
 // components/table/td/TableTd.tsx
-var React100 = __toESM(require("react"));
-var import_clsx86 = __toESM(require("clsx"));
-var TableTd = React100.forwardRef(({ className, id, rowSpan, colSpan, ...others }, ref) => {
+var React105 = __toESM(require("react"));
+var import_clsx90 = __toESM(require("clsx"));
+var TableTd = React105.forwardRef(({ className, id, rowSpan, colSpan, ...others }, ref) => {
   const { styled } = useTrilogyContext();
-  const classes = hashClass(styled, (0, import_clsx86.default)(className));
-  return /* @__PURE__ */ React100.createElement("td", { ref, id, className: classes, rowSpan, colSpan, ...others });
+  const classes = hashClass(styled, (0, import_clsx90.default)(className));
+  return /* @__PURE__ */ React105.createElement("td", { ref, id, className: classes, rowSpan, colSpan, ...others });
 });
 TableTd.displayName = "TableTd" /* TableTd */;
 var TableTd_default = TableTd;
@@ -6689,8 +7005,8 @@ var TableTd_default = TableTd;
 var td_default = TableTd_default;
 
 // components/tabs/context/index.tsx
-var import_react52 = __toESM(require("react"));
-var TabsContext = import_react52.default.createContext({
+var import_react53 = __toESM(require("react"));
+var TabsContext = import_react53.default.createContext({
   activeIndex: 0,
   inverted: false,
   setActiveIndex: () => 0,
@@ -6700,21 +7016,21 @@ var TabsContext = import_react52.default.createContext({
 });
 
 // components/tabs/Tabs.tsx
-var import_clsx87 = __toESM(require("clsx"));
-var import_react53 = __toESM(require("react"));
-var Tabs = import_react53.default.forwardRef(
+var import_clsx91 = __toESM(require("clsx"));
+var import_react54 = __toESM(require("react"));
+var Tabs = import_react54.default.forwardRef(
   ({ children, className, id, activeIndex, fullwidth, inverted, small }, ref) => {
-    const [currentIndex, setCurrentIndex] = import_react53.default.useState(activeIndex || 0);
-    const [isInverted, setIsInverted] = import_react53.default.useState(inverted || false);
+    const [currentIndex, setCurrentIndex] = import_react54.default.useState(activeIndex || 0);
+    const [isInverted, setIsInverted] = import_react54.default.useState(inverted || false);
     const { styled } = useTrilogyContext();
     const classes = hashClass(
       styled,
-      (0, import_clsx87.default)("tabs", fullwidth && is("fullwidth"), inverted && is("inverted"), small && is("small"), className)
+      (0, import_clsx91.default)("tabs", fullwidth && is("fullwidth"), inverted && is("inverted"), small && is("small"), className)
     );
-    import_react53.default.useEffect(() => {
+    import_react54.default.useEffect(() => {
       activeIndex !== void 0 && setCurrentIndex(activeIndex);
     }, [activeIndex]);
-    return /* @__PURE__ */ import_react53.default.createElement(
+    return /* @__PURE__ */ import_react54.default.createElement(
       TabsContext.Provider,
       {
         value: {
@@ -6725,7 +7041,7 @@ var Tabs = import_react53.default.forwardRef(
           setActiveIndex: setCurrentIndex
         }
       },
-      /* @__PURE__ */ import_react53.default.createElement("div", { ref, id, className: classes, "data-tabs-context": "" }, children)
+      /* @__PURE__ */ import_react54.default.createElement("div", { ref, id, className: classes, "data-tabs-context": "" }, children)
     );
   }
 );
@@ -6733,17 +7049,17 @@ Tabs.displayName = "Tabs" /* Tabs */;
 var Tabs_default = Tabs;
 
 // components/tabs/tab-list/tab/Tab.tsx
-var import_clsx88 = __toESM(require("clsx"));
-var import_react54 = __toESM(require("react"));
-var Tab = import_react54.default.forwardRef(
+var import_clsx92 = __toESM(require("clsx"));
+var import_react55 = __toESM(require("react"));
+var Tab = import_react55.default.forwardRef(
   ({ active, className, onClick, routerLink = "a", iconName, label, disabled, testId, ariaControls, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     const { index, ...props } = others;
-    const { activeIndex, setActiveIndex, small } = import_react54.default.useContext(TabsContext);
+    const { activeIndex, setActiveIndex, small } = import_react55.default.useContext(TabsContext);
     const Tag2 = others.href || others.to ? routerLink : "button";
-    const isActive = import_react54.default.useMemo(() => activeIndex === index, [activeIndex, index]);
-    const classes = hashClass(styled, (0, import_clsx88.default)("tab", className, { "is-active": isActive }));
-    const handleClick = import_react54.default.useCallback(
+    const isActive = import_react55.default.useMemo(() => activeIndex === index, [activeIndex, index]);
+    const classes = hashClass(styled, (0, import_clsx92.default)("tab", className, { "is-active": isActive }));
+    const handleClick = import_react55.default.useCallback(
       (e) => {
         if (!disabled) {
           if (!others.href && !others.to) setActiveIndex(index);
@@ -6752,10 +7068,10 @@ var Tab = import_react54.default.forwardRef(
       },
       [disabled, onClick, index, setActiveIndex]
     );
-    import_react54.default.useEffect(() => {
+    import_react55.default.useEffect(() => {
       if (active) setActiveIndex(index);
     }, [active, setActiveIndex, index]);
-    return /* @__PURE__ */ import_react54.default.createElement(
+    return /* @__PURE__ */ import_react55.default.createElement(
       Tag2,
       {
         ref,
@@ -6771,8 +7087,8 @@ var Tab = import_react54.default.forwardRef(
         onClick: handleClick,
         ...props
       },
-      /* @__PURE__ */ import_react54.default.createElement("div", { className: hashClass(styled, "tab-icon") }, iconName && /* @__PURE__ */ import_react54.default.createElement(Icon_default, { size: small ? "small" : "medium", name: iconName })),
-      label && /* @__PURE__ */ import_react54.default.createElement(Text_default, null, label)
+      /* @__PURE__ */ import_react55.default.createElement("div", { className: hashClass(styled, "tab-icon") }, iconName && /* @__PURE__ */ import_react55.default.createElement(Icon_default, { size: small ? "small" : "medium", name: iconName })),
+      label && /* @__PURE__ */ import_react55.default.createElement(Text_default, null, label)
     );
   }
 );
@@ -6780,32 +7096,32 @@ Tab.displayName = "Tab" /* Tab */;
 var Tab_default = Tab;
 
 // components/tabs/tab-list/TabList.tsx
-var import_clsx89 = __toESM(require("clsx"));
-var import_react55 = __toESM(require("react"));
-var TabList = import_react55.default.forwardRef(
+var import_clsx93 = __toESM(require("clsx"));
+var import_react56 = __toESM(require("react"));
+var TabList = import_react56.default.forwardRef(
   ({ children, className, id, testId, align, ...others }, ref) => {
     const { styled } = useTrilogyContext();
-    const TabListRef = import_react55.default.useRef(null);
-    const tabRefs = import_react55.default.useRef([]);
-    const { small } = import_react55.default.useContext(TabsContext);
-    import_react55.default.useImperativeHandle(ref, () => TabListRef.current);
-    const [tabsWidth, setTabsWidth] = import_react55.default.useState(0);
-    const [tabListWidth, setTabListWidth] = import_react55.default.useState(0);
-    const [scrollLeft, setScrollLeft] = import_react55.default.useState(0);
-    const [tabFocused, setTabFocused] = import_react55.default.useState(0);
-    const classes = hashClass(styled, (0, import_clsx89.default)("tab-list", align && is(getAlignClassName(align)), className));
-    const isVisibleArrowLeft = (0, import_react55.useMemo)(() => {
+    const TabListRef = import_react56.default.useRef(null);
+    const tabRefs = import_react56.default.useRef([]);
+    const { small } = import_react56.default.useContext(TabsContext);
+    import_react56.default.useImperativeHandle(ref, () => TabListRef.current);
+    const [tabsWidth, setTabsWidth] = import_react56.default.useState(0);
+    const [tabListWidth, setTabListWidth] = import_react56.default.useState(0);
+    const [scrollLeft, setScrollLeft] = import_react56.default.useState(0);
+    const [tabFocused, setTabFocused] = import_react56.default.useState(0);
+    const classes = hashClass(styled, (0, import_clsx93.default)("tab-list", align && is(getAlignClassName(align)), className));
+    const isVisibleArrowLeft = (0, import_react56.useMemo)(() => {
       if (!tabRefs.current.length) return false;
       return scrollLeft > tabRefs.current[0].width / 2;
     }, [tabRefs, scrollLeft]);
-    const isVisibleArrowRight = (0, import_react55.useMemo)(
+    const isVisibleArrowRight = (0, import_react56.useMemo)(
       () => tabListWidth - tabsWidth - scrollLeft > 5,
       [tabListWidth, tabsWidth, scrollLeft]
     );
-    const TabElms = import_react55.default.useMemo(() => {
-      return import_react55.default.Children.map(children, (child, index) => {
-        if (!import_react55.default.isValidElement(child)) return false;
-        return /* @__PURE__ */ import_react55.default.createElement(
+    const TabElms = import_react56.default.useMemo(() => {
+      return import_react56.default.Children.map(children, (child, index) => {
+        if (!import_react56.default.isValidElement(child)) return false;
+        return /* @__PURE__ */ import_react56.default.createElement(
           Tab_default,
           {
             ref: (el) => tabRefs.current[index] = el == null ? void 0 : el.getBoundingClientRect(),
@@ -6815,7 +7131,7 @@ var TabList = import_react55.default.forwardRef(
         );
       });
     }, [children, tabRefs]);
-    const scrollWithArrow = import_react55.default.useCallback(
+    const scrollWithArrow = import_react56.default.useCallback(
       (direction) => {
         var _a;
         if (tabRefs.current) {
@@ -6827,7 +7143,7 @@ var TabList = import_react55.default.forwardRef(
       },
       [tabRefs.current, tabFocused, TabListRef]
     );
-    const handleScrollList = import_react55.default.useCallback(
+    const handleScrollList = import_react56.default.useCallback(
       (e) => {
         const target = e.target;
         const firstGap = tabRefs.current[0].x + (small ? 16 : 24);
@@ -6839,26 +7155,26 @@ var TabList = import_react55.default.forwardRef(
       },
       [tabRefs, small]
     );
-    const onClickPrev = import_react55.default.useCallback(() => {
+    const onClickPrev = import_react56.default.useCallback(() => {
       isVisibleArrowLeft && scrollWithArrow(-1);
     }, [scrollWithArrow, isVisibleArrowLeft]);
-    const onClickNext = import_react55.default.useCallback(() => {
+    const onClickNext = import_react56.default.useCallback(() => {
       isVisibleArrowRight && scrollWithArrow(1);
     }, [scrollWithArrow, isVisibleArrowRight]);
-    const setWidths = import_react55.default.useCallback(() => {
+    const setWidths = import_react56.default.useCallback(() => {
       if (TabListRef.current) {
         setTabsWidth(TabListRef.current.clientWidth);
         setTabListWidth(TabListRef.current.scrollWidth);
       }
     }, [TabListRef]);
-    import_react55.default.useEffect(() => {
+    import_react56.default.useEffect(() => {
       setWidths();
     }, [setWidths, isVisibleArrowLeft, isVisibleArrowRight]);
-    import_react55.default.useEffect(() => {
+    import_react56.default.useEffect(() => {
       window.addEventListener("resize", setWidths);
       return () => window.removeEventListener("resize", setWidths);
     }, [TabListRef, setWidths]);
-    return /* @__PURE__ */ import_react55.default.createElement(
+    return /* @__PURE__ */ import_react56.default.createElement(
       "div",
       {
         ref: TabListRef,
@@ -6869,23 +7185,23 @@ var TabList = import_react55.default.forwardRef(
         onScroll: handleScrollList,
         ...others
       },
-      isVisibleArrowLeft && /* @__PURE__ */ import_react55.default.createElement(
+      isVisibleArrowLeft && /* @__PURE__ */ import_react56.default.createElement(
         Icon_default,
         {
           "data-arrow-prev": "",
           name: "tri-arrow-left",
-          className: (0, import_clsx89.default)("arrow-prev"),
+          className: (0, import_clsx93.default)("arrow-prev"),
           size: small ? "small" : "medium",
           onClick: onClickPrev
         }
       ),
       TabElms,
-      isVisibleArrowRight && /* @__PURE__ */ import_react55.default.createElement(
+      isVisibleArrowRight && /* @__PURE__ */ import_react56.default.createElement(
         Icon_default,
         {
           "data-arrow-next": "",
           name: "tri-arrow-right",
-          className: (0, import_clsx89.default)("arrow-next"),
+          className: (0, import_clsx93.default)("arrow-next"),
           size: small ? "small" : "medium",
           onClick: onClickNext
         }
@@ -6897,14 +7213,14 @@ TabList.displayName = "TabList" /* TabList */;
 var TabList_default = TabList;
 
 // components/tabs/tab-panels/tab-panel/TabPanel.tsx
-var import_clsx90 = __toESM(require("clsx"));
-var import_react56 = __toESM(require("react"));
-var TabPanel = import_react56.default.forwardRef(({ children, className, testId, ...others }, ref) => {
+var import_clsx94 = __toESM(require("clsx"));
+var import_react57 = __toESM(require("react"));
+var TabPanel = import_react57.default.forwardRef(({ children, className, testId, ...others }, ref) => {
   const { styled } = useTrilogyContext();
   const { index, ...props } = others;
-  const { activeIndex } = import_react56.default.useContext(TabsContext);
-  const classes = hashClass(styled, (0, import_clsx90.default)("tab-panel", index === activeIndex && is("active"), className));
-  return /* @__PURE__ */ import_react56.default.createElement("div", { ref, "data-testid": testId, className: classes, ...props }, children);
+  const { activeIndex } = import_react57.default.useContext(TabsContext);
+  const classes = hashClass(styled, (0, import_clsx94.default)("tab-panel", index === activeIndex && is("active"), className));
+  return /* @__PURE__ */ import_react57.default.createElement("div", { ref, "data-testid": testId, className: classes, ...props }, children);
 });
 TabPanel.displayName = "TabPanel" /* TabPanel */;
 var TabPanel_default = TabPanel;
@@ -6913,28 +7229,28 @@ var TabPanel_default = TabPanel;
 var tab_panel_default = TabPanel_default;
 
 // components/tabs/tab-panels/TabPanels.tsx
-var import_clsx91 = __toESM(require("clsx"));
-var import_react57 = __toESM(require("react"));
-var TabPanels = import_react57.default.forwardRef(({ children, className, id, testId, ...others }, ref) => {
+var import_clsx95 = __toESM(require("clsx"));
+var import_react58 = __toESM(require("react"));
+var TabPanels = import_react58.default.forwardRef(({ children, className, id, testId, ...others }, ref) => {
   const { styled } = useTrilogyContext();
-  const classes = hashClass(styled, (0, import_clsx91.default)("tab-panels", className));
-  return /* @__PURE__ */ import_react57.default.createElement("div", { ref, id, "data-testid": testId, className: classes, ...others }, import_react57.default.Children.map(children, (child, index) => {
-    if (!import_react57.default.isValidElement(child)) return false;
-    return /* @__PURE__ */ import_react57.default.createElement(tab_panel_default, { ...child.props, index });
+  const classes = hashClass(styled, (0, import_clsx95.default)("tab-panels", className));
+  return /* @__PURE__ */ import_react58.default.createElement("div", { ref, id, "data-testid": testId, className: classes, ...others }, import_react58.default.Children.map(children, (child, index) => {
+    if (!import_react58.default.isValidElement(child)) return false;
+    return /* @__PURE__ */ import_react58.default.createElement(tab_panel_default, { ...child.props, index });
   }));
 });
 TabPanels.displayName = "TabPanels" /* TabPanels */;
 var TabPanels_default = TabPanels;
 
 // components/tag/Tag.tsx
-var import_clsx92 = __toESM(require("clsx"));
-var import_react58 = __toESM(require("react"));
-var Tag = import_react58.default.forwardRef(
+var import_clsx96 = __toESM(require("clsx"));
+var import_react59 = __toESM(require("react"));
+var Tag = import_react59.default.forwardRef(
   ({ label, className, id, variant, inverted, small, iconName, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     const tagClassNames = hashClass(
       styled,
-      (0, import_clsx92.default)(
+      (0, import_clsx96.default)(
         "tag",
         variant && is(getColorClassName(variant)),
         inverted && is("inverted"),
@@ -6942,26 +7258,26 @@ var Tag = import_react58.default.forwardRef(
         className
       )
     );
-    const tagIconClassNames = (0, import_clsx92.default)(variant && is(getColorClassName(variant)));
-    return /* @__PURE__ */ import_react58.default.createElement("span", { ref, id, className: tagClassNames, ...others }, iconName && /* @__PURE__ */ import_react58.default.createElement(Icon_default, { className: tagIconClassNames, name: iconName }), label);
+    const tagIconClassNames = (0, import_clsx96.default)(variant && is(getColorClassName(variant)));
+    return /* @__PURE__ */ import_react59.default.createElement("span", { ref, id, className: tagClassNames, ...others }, iconName && /* @__PURE__ */ import_react59.default.createElement(Icon_default, { className: tagIconClassNames, name: iconName }), label);
   }
 );
 Tag.displayName = "Tag" /* Tag */;
 var Tag_default = Tag;
 
 // components/tag/list/TagList.tsx
-var import_clsx93 = __toESM(require("clsx"));
-var React108 = __toESM(require("react"));
-var TagList = React108.forwardRef(({ className, id, align, marginless, ...others }, ref) => {
+var import_clsx97 = __toESM(require("clsx"));
+var React113 = __toESM(require("react"));
+var TagList = React113.forwardRef(({ className, id, align, marginless, ...others }, ref) => {
   const { styled } = useTrilogyContext();
-  return /* @__PURE__ */ React108.createElement(
+  return /* @__PURE__ */ React113.createElement(
     "div",
     {
       ref,
       id,
       className: hashClass(
         styled,
-        (0, import_clsx93.default)("tags", align && is(getJustifiedClassName(align)), marginless && is("marginless"), className)
+        (0, import_clsx97.default)("tags", align && is(getJustifiedClassName(align)), marginless && is("marginless"), className)
       ),
       ...others
     }
@@ -6983,9 +7299,9 @@ var TagVariant = /* @__PURE__ */ ((TagVariant2) => {
 })(TagVariant || {});
 
 // components/textarea/Textarea.tsx
-var import_clsx94 = __toESM(require("clsx"));
-var import_react59 = __toESM(require("react"));
-var Textarea = import_react59.default.forwardRef(
+var import_clsx98 = __toESM(require("clsx"));
+var import_react60 = __toESM(require("react"));
+var Textarea = import_react60.default.forwardRef(
   ({
     className,
     id,
@@ -6997,7 +7313,6 @@ var Textarea = import_react59.default.forwardRef(
     defaultValue,
     help,
     status,
-    dynamicPlaceholder = true,
     rows,
     label,
     maxLength,
@@ -7006,20 +7321,20 @@ var Textarea = import_react59.default.forwardRef(
     iconNameRight,
     ...others
   }, ref) => {
-    const [value, setValue] = (0, import_react59.useState)(defaultValue || "");
+    const [value, setValue] = (0, import_react60.useState)(defaultValue || "");
     const { styled } = useTrilogyContext();
-    (0, import_react59.useEffect)(() => {
+    (0, import_react60.useEffect)(() => {
       setValue(defaultValue || "");
     }, [defaultValue]);
-    const wrapperClasses = hashClass(styled, (0, import_clsx94.default)("field textarea-wrapper", className, status && is(status)));
-    const classes = hashClass(styled, (0, import_clsx94.default)("textarea"));
-    const helpClasses = (0, import_clsx94.default)("help", status && is(status));
-    const counterClasses = hashClass(styled, (0, import_clsx94.default)("counter", maxLength));
+    const wrapperClasses = hashClass(styled, (0, import_clsx98.default)("field textarea-wrapper", className, status && is(status)));
+    const classes = hashClass(styled, (0, import_clsx98.default)("textarea"));
+    const helpClasses = (0, import_clsx98.default)("help", status && is(status));
+    const counterClasses = hashClass(styled, (0, import_clsx98.default)("counter", maxLength));
     const controlClasses = hashClass(
       styled,
-      (0, import_clsx94.default)("control", iconNameLeft && has("icons-left"), iconNameRight && has("icons-right"))
+      (0, import_clsx98.default)("control", iconNameLeft && has("icons-left"), iconNameRight && has("icons-right"))
     );
-    return /* @__PURE__ */ import_react59.default.createElement("div", { id, className: wrapperClasses }, label && /* @__PURE__ */ import_react59.default.createElement("label", { className: hashClass(styled, "textarea-label"), htmlFor: id }, label, " ", required && /* @__PURE__ */ import_react59.default.createElement(Text_default, { markup: "span" /* SPAN */, typo: "has-text-error" /* TEXT_ERROR */ }, "*")), sample && /* @__PURE__ */ import_react59.default.createElement(Text_default, { className: "input-sample", level: 2 /* TWO */, id }, sample), /* @__PURE__ */ import_react59.default.createElement("div", { className: controlClasses }, /* @__PURE__ */ import_react59.default.createElement(
+    return /* @__PURE__ */ import_react60.default.createElement("div", { id, className: wrapperClasses }, label && /* @__PURE__ */ import_react60.default.createElement("label", { className: hashClass(styled, "textarea-label"), htmlFor: id }, label, " ", required && /* @__PURE__ */ import_react60.default.createElement(Text_default, { markup: "span" /* SPAN */, typo: "has-text-error" /* TEXT_ERROR */ }, "*")), sample && /* @__PURE__ */ import_react60.default.createElement(Text_default, { className: "input-sample", level: 2 /* TWO */, id }, sample), /* @__PURE__ */ import_react60.default.createElement("div", { className: controlClasses }, /* @__PURE__ */ import_react60.default.createElement(
       "textarea",
       {
         ref,
@@ -7042,23 +7357,23 @@ var Textarea = import_react59.default.forwardRef(
         required,
         ...others
       }
-    ), iconNameLeft && /* @__PURE__ */ import_react59.default.createElement(Icon_default, { name: iconNameLeft, size: "small", className: "icon-left" }), iconNameRight && /* @__PURE__ */ import_react59.default.createElement(Icon_default, { name: iconNameRight, size: "small", className: "icon-right" }), maxLength && /* @__PURE__ */ import_react59.default.createElement("div", { className: counterClasses }, `${value.length}/${maxLength == null ? void 0 : maxLength.toString()}`)), help && /* @__PURE__ */ import_react59.default.createElement(Text_default, { className: helpClasses }, help));
+    ), iconNameLeft && /* @__PURE__ */ import_react60.default.createElement(Icon_default, { name: iconNameLeft, size: "small", className: "icon-left" }), iconNameRight && /* @__PURE__ */ import_react60.default.createElement(Icon_default, { name: iconNameRight, size: "small", className: "icon-right" }), maxLength && /* @__PURE__ */ import_react60.default.createElement("div", { className: counterClasses }, `${value.length}/${maxLength == null ? void 0 : maxLength.toString()}`)), help && /* @__PURE__ */ import_react60.default.createElement(Text_default, { className: helpClasses }, help));
   }
 );
 Textarea.displayName = "Textarea" /* Textarea */;
 var Textarea_default = Textarea;
 
 // components/timeline/content/TimelineContent.tsx
-var import_clsx95 = __toESM(require("clsx"));
-var React110 = __toESM(require("react"));
-var TimelineContent = React110.forwardRef(
+var import_clsx99 = __toESM(require("clsx"));
+var React115 = __toESM(require("react"));
+var TimelineContent = React115.forwardRef(
   ({ children, className, id, heading, content, linkLabel, linkTo, ...others }, ref) => {
     const { styled } = useTrilogyContext();
-    const classes = hashClass(styled, (0, import_clsx95.default)("timeline-content", className));
+    const classes = hashClass(styled, (0, import_clsx99.default)("timeline-content", className));
     if (children) {
-      return /* @__PURE__ */ React110.createElement("div", { ref, id, className: classes, ...others }, children);
+      return /* @__PURE__ */ React115.createElement("div", { ref, id, className: classes, ...others }, children);
     }
-    return /* @__PURE__ */ React110.createElement("div", { ref, id, className: classes, ...others }, heading && /* @__PURE__ */ React110.createElement(Text_default, { markup: "p" /* P */ }, heading), content && /* @__PURE__ */ React110.createElement(Text_default, { className: "main-content", markup: "p" /* P */ }, content), linkTo && linkLabel && /* @__PURE__ */ React110.createElement(Link_default, { href: linkTo }, linkLabel));
+    return /* @__PURE__ */ React115.createElement("div", { ref, id, className: classes, ...others }, heading && /* @__PURE__ */ React115.createElement(Text_default, { markup: "p" /* P */ }, heading), content && /* @__PURE__ */ React115.createElement(Text_default, { className: "main-content", markup: "p" /* P */ }, content), linkTo && linkLabel && /* @__PURE__ */ React115.createElement(Link_default, { href: linkTo }, linkLabel));
   }
 );
 TimelineContent.displayName = "TimelineContent" /* TimelineContent */;
@@ -7068,15 +7383,15 @@ var TimelineContent_default = TimelineContent;
 var content_default3 = TimelineContent_default;
 
 // components/timeline/item/TimelineItem.tsx
-var import_clsx96 = __toESM(require("clsx"));
-var React111 = __toESM(require("react"));
-var TimelineItem = React111.forwardRef(({ className, id, done, active, cancel, ...others }, ref) => {
+var import_clsx100 = __toESM(require("clsx"));
+var React116 = __toESM(require("react"));
+var TimelineItem = React116.forwardRef(({ className, id, done, active, cancel, ...others }, ref) => {
   const { styled } = useTrilogyContext();
   const classes = hashClass(
     styled,
-    (0, import_clsx96.default)("timeline-item", done && "done", active && "active", cancel && "cancel", className)
+    (0, import_clsx100.default)("timeline-item", done && "done", active && "active", cancel && "cancel", className)
   );
-  return /* @__PURE__ */ React111.createElement("div", { ref, id, className: classes, ...others });
+  return /* @__PURE__ */ React116.createElement("div", { ref, id, className: classes, ...others });
 });
 TimelineItem.displayName = "TimelineItem" /* TimelineItem */;
 var TimelineItem_default = TimelineItem;
@@ -7085,9 +7400,9 @@ var TimelineItem_default = TimelineItem;
 var item_default5 = TimelineItem_default;
 
 // components/timeline/marker/TimelineMarker.tsx
-var import_clsx97 = __toESM(require("clsx"));
-var React112 = __toESM(require("react"));
-var TimelineMarker = React112.forwardRef(({
+var import_clsx101 = __toESM(require("clsx"));
+var React117 = __toESM(require("react"));
+var TimelineMarker = React117.forwardRef(({
   className,
   id,
   iconClassname,
@@ -7095,9 +7410,9 @@ var TimelineMarker = React112.forwardRef(({
   ...others
 }, ref) => {
   const { styled } = useTrilogyContext();
-  const classes = hashClass(styled, (0, import_clsx97.default)("timeline-marker", is("icon"), className));
-  const iconClasses = (0, import_clsx97.default)(iconClassname);
-  return /* @__PURE__ */ React112.createElement("div", { ref, id, className: classes, ...others }, /* @__PURE__ */ React112.createElement("div", { className: "card-header-icon" }, /* @__PURE__ */ React112.createElement(Icon_default, { className: iconClasses, name: iconName, size: "small" /* SMALL */ })));
+  const classes = hashClass(styled, (0, import_clsx101.default)("timeline-marker", is("icon"), className));
+  const iconClasses = (0, import_clsx101.default)(iconClassname);
+  return /* @__PURE__ */ React117.createElement("div", { ref, id, className: classes, ...others }, /* @__PURE__ */ React117.createElement("div", { className: "card-header-icon" }, /* @__PURE__ */ React117.createElement(Icon_default, { className: iconClasses, name: iconName, size: "small" /* SMALL */ })));
 });
 TimelineMarker.displayName = "TimelineMarker" /* TimelineMarker */;
 var TimelineMarker_default = TimelineMarker;
@@ -7106,19 +7421,19 @@ var TimelineMarker_default = TimelineMarker;
 var marker_default = TimelineMarker_default;
 
 // components/timeline/Timeline.tsx
-var import_clsx98 = __toESM(require("clsx"));
-var React113 = __toESM(require("react"));
-var Timeline = React113.forwardRef(({ className, id, horizontal, ...others }, ref) => {
+var import_clsx102 = __toESM(require("clsx"));
+var React118 = __toESM(require("react"));
+var Timeline = React118.forwardRef(({ className, id, horizontal, ...others }, ref) => {
   const { styled } = useTrilogyContext();
-  const classes = hashClass(styled, (0, import_clsx98.default)("timeline", horizontal && is("horizontal"), className));
-  return /* @__PURE__ */ React113.createElement("div", { ref, id, className: classes, ...others });
+  const classes = hashClass(styled, (0, import_clsx102.default)("timeline", horizontal && is("horizontal"), className));
+  return /* @__PURE__ */ React118.createElement("div", { ref, id, className: classes, ...others });
 });
 Timeline.displayName = "Timeline" /* Timeline */;
 var Timeline_default = Timeline;
 
 // components/view/View.tsx
-var import_clsx99 = __toESM(require("clsx"));
-var React114 = __toESM(require("react"));
+var import_clsx103 = __toESM(require("clsx"));
+var React119 = __toESM(require("react"));
 
 // components/view/ViewProps/index.ts
 var ViewMarkup = /* @__PURE__ */ ((ViewMarkup2) => {
@@ -7143,7 +7458,7 @@ var ViewMarkup = /* @__PURE__ */ ((ViewMarkup2) => {
 })(ViewMarkup || {});
 
 // components/view/View.tsx
-var View = React114.forwardRef(({
+var View = React119.forwardRef(({
   children,
   style,
   className,
@@ -7167,7 +7482,7 @@ var View = React114.forwardRef(({
   const Tag2 = markup && isCorrectMarkup2(markup) ? markup : "div";
   const classes = hashClass(
     styled,
-    (0, import_clsx99.default)(
+    (0, import_clsx103.default)(
       typeof loading === "string" && is(getLoadingClassName(loading)),
       typeof loading === "boolean" ? is("loading") : is("loaded"),
       backgroundColor && has(getBackgroundClassName(backgroundColor)),
@@ -7180,7 +7495,7 @@ var View = React114.forwardRef(({
       className
     )
   );
-  return /* @__PURE__ */ React114.createElement(
+  return /* @__PURE__ */ React119.createElement(
     Tag2,
     {
       ref,
@@ -7278,6 +7593,10 @@ var JustifyContent = /* @__PURE__ */ ((JustifyContent2) => {
   Device,
   DirectionEnum,
   Divider,
+  Dropdown,
+  DropdownGroup,
+  DropdownItem,
+  DropdownTrigger,
   Fab,
   FlexBox,
   FlexItem,