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

package/lib/index.js

@@ -6,6 +6,9 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -28,6 +31,42 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
+// components/styleComponent/mangled/styleComponentMangled.tsx
+var styleComponentMangled_exports = {};
+__export(styleComponentMangled_exports, {
+  default: () => styleComponentMangled_default
+});
+var import_trilogy_mangled, import_react3, StyleComponentMangled, styleComponentMangled_default;
+var init_styleComponentMangled = __esm({
+  "components/styleComponent/mangled/styleComponentMangled.tsx"() {
+    "use strict";
+    import_trilogy_mangled = require("@trilogy-ds/styles/dist/default/trilogy-mangled.css");
+    import_react3 = __toESM(require("react"));
+    StyleComponentMangled = ({ children }) => {
+      return /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, children);
+    };
+    styleComponentMangled_default = StyleComponentMangled;
+  }
+});
+
+// components/styleComponent/default/styleComponent.tsx
+var styleComponent_exports = {};
+__export(styleComponent_exports, {
+  default: () => styleComponent_default
+});
+var import_trilogy, import_react4, StyleComponent, styleComponent_default;
+var init_styleComponent = __esm({
+  "components/styleComponent/default/styleComponent.tsx"() {
+    "use strict";
+    import_trilogy = require("@trilogy-ds/styles/dist/default/trilogy.css");
+    import_react4 = __toESM(require("react"));
+    StyleComponent = ({ children }) => {
+      return /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, children);
+    };
+    styleComponent_default = StyleComponent;
+  }
+});
+
 // index.ts
 var index_exports = {};
 __export(index_exports, {
@@ -158,6 +197,7 @@ __export(index_exports, {
   SpacerSize: () => SpacerSize,
   SpacerSizeValues: () => SpacerSizeValues,
   SpacingMatrixMode: () => SpacingMatrixMode,
+  StatesContext: () => StatesContext,
   StatusState: () => StatusState,
   Step: () => step_default,
   StepMarkup: () => StepMarkup,
@@ -199,6 +239,9 @@ __export(index_exports, {
   TrilogyColor: () => TrilogyColor,
   TrilogyContext: () => TrilogyContext,
   TrilogyProvider: () => TrilogyProvider,
+  TrilogyProviderStyled: () => TrilogyProviderStyled,
+  TrilogyThemeContext: () => TrilogyThemeContext,
+  TrilogyThemeProvider: () => TrilogyThemeProvider,
   TypographyAlign: () => TypographyAlign,
   TypographyBold: () => TypographyBold,
   TypographyColor: () => TypographyColor,
@@ -209,6 +252,7 @@ __export(index_exports, {
   ViewMarkup: () => ViewMarkup,
   classify: () => classify,
   colors: () => colors,
+  defaultTheme: () => defaultTheme,
   getAlignClassName: () => getAlignClassName,
   getAlignStyle: () => getAlignStyle,
   getBackgroundClassName: () => getBackgroundClassName,
@@ -249,9 +293,9 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // components/accordion/Accordion.tsx
-var React2 = __toESM(require("react"));
+var React7 = __toESM(require("react"));
 
-// context/index.tsx
+// context/context/index.tsx
 var React = __toESM(require("react"));
 var TrilogyContext = React.createContext({
   styled: false,
@@ -265,6 +309,96 @@ var useTrilogyContext = () => {
   return context;
 };
 
+// context/provider/index.tsx
+var import_react = __toESM(require("react"));
+
+// version.ts
+var version = "0.0.26-esm-cjs";
+
+// version.json
+var version_default = {
+  VERSION: "410"
+};
+
+// context/provider/index.tsx
+var getHrefFromAssetUri = (assetUrl, theme, mangled) => {
+  return assetUrl.replace("%VERSION%", version).replace("%THEME%", theme).replace("%MANGLED%", mangled ? "-mangled" : "");
+};
+var injectTrilogy = (mangled, id, theme, assetUrl) => {
+  const link = document.createElement("link");
+  link.type = "text/css";
+  link.rel = "stylesheet";
+  link.href = getHrefFromAssetUri(assetUrl, theme, mangled);
+  link.id = id;
+  document == null ? void 0 : document.head.appendChild(link);
+};
+var TrilogyProvider = ({
+  children,
+  mangled = false,
+  injectTrilogyAssets = false,
+  id = "trilogy",
+  theme = "",
+  hash: HASH = version_default.VERSION,
+  assetUrl = ""
+}) => {
+  const [styled, setStyled] = import_react.default.useState(mangled);
+  const [hash, setHash] = import_react.default.useState(HASH);
+  (0, import_react.useLayoutEffect)(() => {
+    injectTrilogyAssets && injectTrilogy(mangled, id, theme, assetUrl);
+  }, []);
+  return /* @__PURE__ */ import_react.default.createElement(TrilogyContext.Provider, { value: { styled, setStyled, hash, setHash } }, children);
+};
+
+// context/providerStates/index.ts
+var import_react2 = require("react");
+var StatesContext = (0, import_react2.createContext)({
+  inverted: false,
+  active: false,
+  flat: false
+});
+
+// context/providerStyled/index.tsx
+var React5 = __toESM(require("react"));
+var TrilogyProviderStyled = ({
+  children,
+  theme = "default",
+  hash: HASH = version_default.VERSION
+}) => {
+  const [styled, setStyled] = React5.useState(false);
+  const [hash, setHash] = React5.useState(HASH);
+  const StyleComponent2 = React5.useMemo(() => {
+    switch (true) {
+      case (theme === "mangled" && hash === version_default.VERSION):
+        setStyled(true);
+        return React5.lazy(() => Promise.resolve().then(() => (init_styleComponentMangled(), styleComponentMangled_exports)));
+      case (theme === "mangled" && hash !== version_default.VERSION):
+        setStyled(true);
+        return void 0;
+      case theme === "default":
+        return React5.lazy(() => Promise.resolve().then(() => (init_styleComponent(), styleComponent_exports)));
+      default:
+        return void 0;
+    }
+  }, [theme, hash]);
+  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
+var import_react5 = __toESM(require("react"));
+var defaultTheme = {
+  icons: {},
+  colors: {},
+  fontFamily: {}
+};
+var defaultContextValue = {
+  theme: defaultTheme,
+  setTheme: () => void 0
+};
+var TrilogyThemeContext = import_react5.default.createContext(defaultContextValue);
+var TrilogyThemeProvider = ({ children, theme }) => {
+  return children;
+};
+
 // helpers/hashClassesHelpers/index.tsx
 var hashClass = (addHash = false, classes) => {
   const { hash, styled } = useTrilogyContext();
@@ -277,19 +411,19 @@ var hashClass = (addHash = false, classes) => {
 
 // components/accordion/Accordion.tsx
 var import_clsx = __toESM(require("clsx"));
-var Accordion = React2.forwardRef(({ id, className, children, ...others }, ref) => {
+var Accordion = React7.forwardRef(({ id, className, children, ...others }, ref) => {
   const { styled } = useTrilogyContext();
   const classes = hashClass(styled, (0, import_clsx.default)("accordion", className));
-  return /* @__PURE__ */ React2.createElement("div", { ref, id, className: classes, ...others }, children);
+  return /* @__PURE__ */ React7.createElement("div", { ref, id, className: classes, ...others }, children);
 });
 Accordion.displayName = "Accordion" /* Accordion */;
 var Accordion_default = Accordion;
 
 // components/accordion/item/AccordionItem.tsx
 var import_clsx2 = __toESM(require("clsx"));
-var import_react = __toESM(require("react"));
-var AccordionItem = import_react.default.forwardRef(
-  ({ open, className, children, id = import_react.default.useId(), onClick, disabled, ...others }, ref) => {
+var import_react6 = __toESM(require("react"));
+var AccordionItem = import_react6.default.forwardRef(
+  ({ open, className, children, id = import_react6.default.useId(), onClick, disabled, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     const classes = hashClass(styled, (0, import_clsx2.default)("accordion-item", className));
     const ariaProps = {};
@@ -297,7 +431,7 @@ var AccordionItem = import_react.default.forwardRef(
       ariaProps["tabIndex"] = -1;
       ariaProps["aria-disabled"] = true;
     }
-    return /* @__PURE__ */ import_react.default.createElement(
+    return /* @__PURE__ */ import_react6.default.createElement(
       "details",
       {
         open,
@@ -332,11 +466,11 @@ var AccordionItem_default = AccordionItem;
 
 // components/accordion/item/body/AccordionBody.tsx
 var import_clsx3 = __toESM(require("clsx"));
-var React4 = __toESM(require("react"));
-var AccordionBody = React4.forwardRef(
+var React9 = __toESM(require("react"));
+var AccordionBody = React9.forwardRef(
   ({ children, className, id, ...others }, ref) => {
     const { styled } = useTrilogyContext();
-    return /* @__PURE__ */ React4.createElement(
+    return /* @__PURE__ */ React9.createElement(
       "div",
       {
         ref,
@@ -356,11 +490,11 @@ var AccordionBody_default = AccordionBody;
 
 // components/accordion/item/header/AccordionHeader.tsx
 var import_clsx4 = __toESM(require("clsx"));
-var React5 = __toESM(require("react"));
-var AccordionHeader = React5.forwardRef(
+var React10 = __toESM(require("react"));
+var AccordionHeader = React10.forwardRef(
   ({ children, className, id, ...others }, ref) => {
     const { styled } = useTrilogyContext();
-    return /* @__PURE__ */ React5.createElement(
+    return /* @__PURE__ */ React10.createElement(
       "summary",
       {
         ref,
@@ -424,21 +558,8 @@ var isIOS = false;
 var isMobile = false;
 var ssrDevice = () => SSRObject;
 
-// context/providerTheme/index.tsx
-var import_react2 = __toESM(require("react"));
-var defaultTheme = {
-  icons: {},
-  colors: {},
-  fontFamily: {}
-};
-var defaultContextValue = {
-  theme: defaultTheme,
-  setTheme: () => void 0
-};
-var TrilogyThemeContext = import_react2.default.createContext(defaultContextValue);
-
 // objects/facets/Color/index.tsx
-var import_react3 = require("react");
+var import_react7 = require("react");
 var TrilogyColor = /* @__PURE__ */ ((TrilogyColor4) => {
   TrilogyColor4["BACKGROUND"] = "WHITE";
   TrilogyColor4["MAIN"] = "MAIN";
@@ -528,7 +649,7 @@ var getButtonColorStyle = (buttonVariant) => {
 };
 var getColorStyle = (trilogyColor) => {
   if (typeof navigator !== "undefined" && navigator.userAgent === void 0) {
-    const { theme } = (0, import_react3.useContext)(TrilogyThemeContext);
+    const { theme } = (0, import_react7.useContext)(TrilogyThemeContext);
     const colorsStyle = (theme == null ? void 0 : theme.colors) || colors;
     const colorArray = colorsStyle[trilogyColor] || colorsStyle.default;
     if (trilogyColor === "transparent") return "transparent";
@@ -669,8 +790,8 @@ var has = classify("has");
 
 // components/icon/Icon.tsx
 var import_clsx5 = __toESM(require("clsx"));
-var React7 = __toESM(require("react"));
-var Icon = React7.forwardRef(
+var React11 = __toESM(require("react"));
+var Icon = React11.forwardRef(
   ({ className, id, size: size2, name, circled, stretched, color, backgroundColor, onClick, skeleton, align, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     const background = backgroundColor && has(getBackgroundClassName(backgroundColor)) || circled && has(getBackgroundClassName("MAIN" /* MAIN */)) || "";
@@ -689,7 +810,7 @@ var Icon = React7.forwardRef(
         className
       )
     );
-    return /* @__PURE__ */ React7.createElement("span", { id, onClick: onClick && onClick, className: classes, ...others, ref }, /* @__PURE__ */ React7.createElement("i", { className: hashClass(styled, (0, import_clsx5.default)(name)), "aria-hidden": "true" }));
+    return /* @__PURE__ */ React11.createElement("span", { id, onClick: onClick && onClick, className: classes, ...others, ref }, /* @__PURE__ */ React11.createElement("i", { className: hashClass(styled, (0, import_clsx5.default)(name)), "aria-hidden": "true" }));
   }
 );
 Icon.displayName = "Icon" /* Icon */;
@@ -776,7 +897,7 @@ var IconName = /* @__PURE__ */ ((IconName4) => {
 })(IconName || {});
 
 // components/text/Text.tsx
-var React8 = __toESM(require("react"));
+var React12 = __toESM(require("react"));
 var import_clsx6 = __toESM(require("clsx"));
 
 // components/text/TextEnum.ts
@@ -794,7 +915,7 @@ var TextMarkup = /* @__PURE__ */ ((TextMarkup2) => {
 })(TextMarkup || {});
 
 // components/text/Text.tsx
-var Text = React8.forwardRef(({
+var Text = React12.forwardRef(({
   level,
   markup,
   children,
@@ -842,7 +963,7 @@ var Text = React8.forwardRef(({
     if (stringMarkup in TextMarkup || Object.values(TextMarkup).includes(stringMarkup)) return true;
   };
   const Tag2 = markup && isCorrectMarkup2(markup) ? markup : "p";
-  return /* @__PURE__ */ React8.createElement(
+  return /* @__PURE__ */ React12.createElement(
     Tag2,
     {
       ref,
@@ -860,7 +981,7 @@ var Text_default = Text;
 
 // components/title/Title.tsx
 var import_clsx7 = __toESM(require("clsx"));
-var import_react4 = __toESM(require("react"));
+var import_react8 = __toESM(require("react"));
 
 // components/title/TitleEnum.ts
 var TitleLevels = /* @__PURE__ */ ((TitleLevels2) => {
@@ -909,7 +1030,7 @@ var getTitleLevel = (level) => {
 var isCorrectMarkup = (stringMarkup) => {
   return stringMarkup in TitleMarkup || Object.values(TitleMarkup).includes(stringMarkup);
 };
-var Title = import_react4.default.forwardRef(({
+var Title = import_react8.default.forwardRef(({
   level = 1 /* ONE */,
   markup,
   children,
@@ -946,7 +1067,7 @@ var Title = import_react4.default.forwardRef(({
     if (overline) return overlineClasses;
     return classes;
   };
-  return /* @__PURE__ */ import_react4.default.createElement(Tag2, { ref, id, "aria-label": accessibilityLabel, onClick, className: getClassname(), ...others }, children);
+  return /* @__PURE__ */ import_react8.default.createElement(Tag2, { ref, id, "aria-label": accessibilityLabel, onClick, className: getClassname(), ...others }, children);
 });
 Title.displayName = "Title" /* Title */;
 var Title_default = Title;
@@ -1004,8 +1125,8 @@ var getStatusIconName = (statusType) => {
 
 // components/alert/Alert.tsx
 var import_clsx8 = __toESM(require("clsx"));
-var React11 = __toESM(require("react"));
-var import_react6 = require("react");
+var React15 = __toESM(require("react"));
+var import_react10 = require("react");
 
 // components/alert/AlertProps.ts
 var ToasterAlertPosition = /* @__PURE__ */ ((ToasterAlertPosition2) => {
@@ -1020,9 +1141,9 @@ var ToasterAlertFloat = /* @__PURE__ */ ((ToasterAlertFloat2) => {
 })(ToasterAlertFloat || {});
 
 // components/alert/context/ToasterContext.tsx
-var import_react5 = __toESM(require("react"));
+var import_react9 = __toESM(require("react"));
 var emptyFn = () => 0;
-var ToasterContext = import_react5.default.createContext({ show: emptyFn, hide: emptyFn });
+var ToasterContext = import_react9.default.createContext({ show: emptyFn, hide: emptyFn });
 var ToasterContext_default = ToasterContext;
 
 // components/alert/context/index.ts
@@ -1058,7 +1179,7 @@ var ToasterAlert = ({
     styled,
     (0, import_clsx8.default)("toaster", status && is(getStatusClassName(status)), !status && is("info"), className)
   );
-  return title && display !== false ? /* @__PURE__ */ React11.createElement(
+  return title && display !== false ? /* @__PURE__ */ React15.createElement(
     "div",
     {
       id,
@@ -1071,24 +1192,24 @@ var ToasterAlert = ({
       "data-testid": testId,
       ...others
     },
-    children ? children : /* @__PURE__ */ React11.createElement(React11.Fragment, null, iconName && /* @__PURE__ */ React11.createElement(Icon_default, { name: iconName, size: "small" /* SMALL */ }), /* @__PURE__ */ React11.createElement("div", { className: hashClass(styled, (0, import_clsx8.default)("body")) }, title && /* @__PURE__ */ React11.createElement(Title_default, { markup, level: 6 /* SIX */ }, title), description && /* @__PURE__ */ React11.createElement(Text_default, null, description), toasterChildren && toasterChildren), closable && /* @__PURE__ */ React11.createElement(Icon_default, { onClick: closable, className: "toaster-close", name: "tri-times" /* TIMES */, size: "small" /* SMALL */ }))
+    children ? children : /* @__PURE__ */ React15.createElement(React15.Fragment, null, iconName && /* @__PURE__ */ React15.createElement(Icon_default, { name: iconName, size: "small" /* SMALL */ }), /* @__PURE__ */ React15.createElement("div", { className: hashClass(styled, (0, import_clsx8.default)("body")) }, title && /* @__PURE__ */ React15.createElement(Title_default, { markup, level: 6 /* SIX */ }, title), description && /* @__PURE__ */ React15.createElement(Text_default, null, description), toasterChildren && toasterChildren), closable && /* @__PURE__ */ React15.createElement(Icon_default, { onClick: closable, className: "toaster-close", name: "tri-times" /* TIMES */, size: "small" /* SMALL */ }))
   ) : null;
 };
-var Alert = React11.forwardRef(
+var Alert = React15.forwardRef(
   ({ banner, status, className, id, iconName, title, description, onClick, display = true, markup, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     const classes = hashClass(
       styled,
       (0, import_clsx8.default)("alert", has("body"), status && is(getStatusClassName(status)), banner && is("banner"), className)
     );
-    const iconAlert = React11.useMemo(() => {
+    const iconAlert = React15.useMemo(() => {
       var _a;
       if (iconName != null) return iconName;
       else if (status) return (_a = getStatusIconName(status)) != null ? _a : "tri-infos-circle" /* INFOS_CIRCLE */;
       else return "tri-infos-circle" /* INFOS_CIRCLE */;
     }, [iconName, status]);
     if (display) {
-      return /* @__PURE__ */ React11.createElement(
+      return /* @__PURE__ */ React15.createElement(
         "div",
         {
           ref,
@@ -1100,18 +1221,18 @@ var Alert = React11.forwardRef(
           className: classes,
           ...others
         },
-        /* @__PURE__ */ React11.createElement(Icon_default, { name: iconAlert }),
-        /* @__PURE__ */ React11.createElement("div", { className: hashClass(styled, (0, import_clsx8.default)("body")) }, title && typeof title.valueOf() === "string" ? /* @__PURE__ */ React11.createElement(Title_default, { markup, level: 6 /* SIX */ }, title) : title, description && typeof description.valueOf() === "string" ? /* @__PURE__ */ React11.createElement(Text_default, { level: 2 /* TWO */ }, description) : description)
+        /* @__PURE__ */ React15.createElement(Icon_default, { name: iconAlert }),
+        /* @__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)
       );
     }
-    return /* @__PURE__ */ React11.createElement("div", null);
+    return /* @__PURE__ */ React15.createElement("div", null);
   }
 );
 var ToasterAlertProvider = ({ children }) => {
-  const [toasterState, setToasterState] = (0, import_react6.useState)(null);
-  const [duration, setDuration] = (0, import_react6.useState)(5e3);
-  const timeRef = (0, import_react6.useRef)(null);
-  const showToast = React11.useCallback(
+  const [toasterState, setToasterState] = (0, import_react10.useState)(null);
+  const [duration, setDuration] = (0, import_react10.useState)(5e3);
+  const timeRef = (0, import_react10.useRef)(null);
+  const showToast = React15.useCallback(
     (params) => {
       var _a;
       setToasterState(params);
@@ -1121,7 +1242,7 @@ var ToasterAlertProvider = ({ children }) => {
     },
     [timeRef]
   );
-  (0, import_react6.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     timeRef.current = setTimeout(() => {
       var _a;
       (_a = toasterState == null ? void 0 : toasterState.onHide) == null ? void 0 : _a.call(toasterState);
@@ -1131,7 +1252,7 @@ var ToasterAlertProvider = ({ children }) => {
       timeRef.current && clearTimeout(timeRef.current);
     };
   }, [toasterState, toasterState == null ? void 0 : toasterState.title]);
-  return /* @__PURE__ */ React11.createElement(context_default.Provider, { value: { show: showToast, hide: () => null } }, children, toasterState && /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React15.createElement(context_default.Provider, { value: { show: showToast, hide: () => null } }, children, toasterState && /* @__PURE__ */ React15.createElement(
     ToasterAlert,
     {
       title: toasterState.title,
@@ -1169,7 +1290,7 @@ var AlertMarkup = /* @__PURE__ */ ((AlertMarkup2) => {
 // components/input/Input.tsx
 var import_locales = require("@trilogy-ds/locales");
 var import_clsx10 = __toESM(require("clsx"));
-var import_react10 = __toESM(require("react"));
+var import_react14 = __toESM(require("react"));
 
 // objects/atoms/Text/index.ts
 var getTextClassName = (textType) => {
@@ -1341,7 +1462,7 @@ var setTypographyAlign = (typo = "left") => {
 };
 
 // objects/Typography/TypographyBold/index.tsx
-var import_react7 = require("react");
+var import_react11 = require("react");
 var TypographyBold = /* @__PURE__ */ ((TypographyBold2) => {
   TypographyBold2["TEXT_WEIGHT_NORMAL"] = "has-text-weight-normal";
   TypographyBold2["TEXT_WEIGHT_MEDIUM"] = "has-text-weight-medium";
@@ -1363,7 +1484,7 @@ var getTypographyBoldClassName = (typographyBoldType) => {
 };
 var getTypographyBoldStyle = (typo) => {
   var _a, _b, _c, _d;
-  const { theme } = (0, import_react7.useContext)(TrilogyThemeContext);
+  const { theme } = (0, import_react11.useContext)(TrilogyThemeContext);
   const currentTypo = Array.isArray(typo) ? typo : [typo];
   switch (true) {
     case (typo && currentTypo.includes("has-text-weight-medium" /* TEXT_WEIGHT_MEDIUM */)):
@@ -1541,24 +1662,24 @@ var InputKeyboardType = /* @__PURE__ */ ((InputKeyboardType2) => {
 
 // components/input/gauge/InputGauge.tsx
 var import_clsx9 = __toESM(require("clsx"));
-var import_react9 = __toESM(require("react"));
+var import_react13 = __toESM(require("react"));
 
 // components/input/gauge/hook/useGauge.tsx
-var import_react8 = __toESM(require("react"));
+var import_react12 = __toESM(require("react"));
 var useGauge = ({ validationRules, inputValue, securityRules }) => {
   var _a, _b;
-  const [points, setPoints] = import_react8.default.useState(0);
+  const [points, setPoints] = import_react12.default.useState(0);
   const initStateVerifies = { isVerify: false, color: "NEUTRAL" /* NEUTRAL */ };
-  const [isLengthVerify, setIsLengthVerify] = import_react8.default.useState(initStateVerifies);
-  const [isSpecialCharsVerify, setIsSpecialCharsVerify] = import_react8.default.useState(initStateVerifies);
-  const [isNumberVerify, setIsNumberVerify] = import_react8.default.useState(initStateVerifies);
-  const [isUppercaseVerify, setIsUppercaseVerify] = import_react8.default.useState(initStateVerifies);
-  const [isLowerercaseVerify, setisLowerercaseVerify] = import_react8.default.useState(initStateVerifies);
-  const nbAllVerifies = import_react8.default.useMemo(
+  const [isLengthVerify, setIsLengthVerify] = import_react12.default.useState(initStateVerifies);
+  const [isSpecialCharsVerify, setIsSpecialCharsVerify] = import_react12.default.useState(initStateVerifies);
+  const [isNumberVerify, setIsNumberVerify] = import_react12.default.useState(initStateVerifies);
+  const [isUppercaseVerify, setIsUppercaseVerify] = import_react12.default.useState(initStateVerifies);
+  const [isLowerercaseVerify, setisLowerercaseVerify] = import_react12.default.useState(initStateVerifies);
+  const nbAllVerifies = import_react12.default.useMemo(
     () => validationRules && Object.values(validationRules).filter((rule) => rule).length || securityRules && securityRules.length || 0,
     [validationRules, securityRules]
   );
-  const rules = import_react8.default.useMemo(
+  const rules = import_react12.default.useMemo(
     () => securityRules && securityRules.map(({ label, patternValidator, dataAttribute }) => ({
       label,
       validate: !!(patternValidator == null ? void 0 : patternValidator.test(inputValue)),
@@ -1566,7 +1687,7 @@ var useGauge = ({ validationRules, inputValue, securityRules }) => {
     })),
     [inputValue, securityRules]
   );
-  const calcPoints = import_react8.default.useMemo(() => {
+  const calcPoints = import_react12.default.useMemo(() => {
     if (validationRules) {
       return Number((points / nbAllVerifies * 100).toFixed(0));
     }
@@ -1576,7 +1697,7 @@ var useGauge = ({ validationRules, inputValue, securityRules }) => {
     }
     return 0;
   }, [points, nbAllVerifies, rules, validationRules, securityRules]);
-  const widthGauge = import_react8.default.useMemo(() => {
+  const widthGauge = import_react12.default.useMemo(() => {
     if (calcPoints <= 50 && calcPoints > 0) return "50%";
     if (calcPoints <= 99 && calcPoints > 50) return "75%";
     if (calcPoints === 100) return "100%";
@@ -1588,7 +1709,7 @@ var useGauge = ({ validationRules, inputValue, securityRules }) => {
     if (calcPoints === 100) return getColorStyle("SUCCESS" /* SUCCESS */);
     return getColorStyle("NEUTRAL_FADE" /* NEUTRAL_FADE */);
   };
-  const LengthvalidationRulesText = (0, import_react8.useMemo)(() => {
+  const LengthvalidationRulesText = (0, import_react12.useMemo)(() => {
     var _a2, _b2, _c, _d, _e, _f, _g, _h, _i, _j;
     switch (true) {
       case (((_a2 = validationRules == null ? void 0 : validationRules.length) == null ? void 0 : _a2.min) !== void 0 && ((_b2 = validationRules == null ? void 0 : validationRules.length) == null ? void 0 : _b2.max) !== void 0):
@@ -1601,7 +1722,7 @@ var useGauge = ({ validationRules, inputValue, securityRules }) => {
         return "";
     }
   }, [(_a = validationRules == null ? void 0 : validationRules.length) == null ? void 0 : _a.min, (_b = validationRules == null ? void 0 : validationRules.length) == null ? void 0 : _b.max]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     var _a2, _b2;
     const min = ((_a2 = validationRules == null ? void 0 : validationRules.length) == null ? void 0 : _a2.min) || 0;
     const max = ((_b2 = validationRules == null ? void 0 : validationRules.length) == null ? void 0 : _b2.max) || "";
@@ -1633,7 +1754,7 @@ var useGauge = ({ validationRules, inputValue, securityRules }) => {
 
 // components/input/gauge/InputGauge.tsx
 var InputGauge = ({ validationRules, styled, inputValue, securityRules }) => {
-  const id = (0, import_react9.useId)();
+  const id = (0, import_react13.useId)();
   const {
     widthGauge,
     colorGauge,
@@ -1645,14 +1766,14 @@ var InputGauge = ({ validationRules, styled, inputValue, securityRules }) => {
     isUppercaseVerify,
     rules
   } = useGauge({ validationRules, inputValue, securityRules });
-  return /* @__PURE__ */ import_react9.default.createElement("div", { "data-testid": "security-gauge", className: hashClass(styled, (0, import_clsx9.default)("security-gauge-container")) }, /* @__PURE__ */ import_react9.default.createElement("div", { className: hashClass(styled, (0, import_clsx9.default)("security-gauge")) }, /* @__PURE__ */ import_react9.default.createElement(
+  return /* @__PURE__ */ import_react13.default.createElement("div", { "data-testid": "security-gauge", className: hashClass(styled, (0, import_clsx9.default)("security-gauge-container")) }, /* @__PURE__ */ import_react13.default.createElement("div", { className: hashClass(styled, (0, import_clsx9.default)("security-gauge")) }, /* @__PURE__ */ import_react13.default.createElement(
     "div",
     {
       "data-gauge": true,
       style: { width: widthGauge, backgroundColor: colorGauge() },
       className: hashClass(styled, (0, import_clsx9.default)("gauge"))
     }
-  )), /* @__PURE__ */ import_react9.default.createElement("div", { className: hashClass(styled, (0, import_clsx9.default)("security-gauge-verifies")) }, validationRules && /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, null, /* @__PURE__ */ import_react9.default.createElement(
+  )), /* @__PURE__ */ import_react13.default.createElement("div", { className: hashClass(styled, (0, import_clsx9.default)("security-gauge-verifies")) }, validationRules && /* @__PURE__ */ import_react13.default.createElement(import_react13.default.Fragment, null, /* @__PURE__ */ import_react13.default.createElement(
     DataVerify,
     {
       display: !!(validationRules == null ? void 0 : validationRules.length),
@@ -1663,7 +1784,7 @@ var InputGauge = ({ validationRules, styled, inputValue, securityRules }) => {
       iconName: isLengthVerify.isVerify ? "tri-check-circle" /* CHECK_CIRCLE */ : "tri-times" /* TIMES */,
       styled
     }
-  ), /* @__PURE__ */ import_react9.default.createElement(
+  ), /* @__PURE__ */ import_react13.default.createElement(
     DataVerify,
     {
       display: !!(validationRules == null ? void 0 : validationRules.uppercase),
@@ -1674,7 +1795,7 @@ var InputGauge = ({ validationRules, styled, inputValue, securityRules }) => {
       iconName: isUppercaseVerify.isVerify ? "tri-check-circle" /* CHECK_CIRCLE */ : "tri-times" /* TIMES */,
       styled
     }
-  ), /* @__PURE__ */ import_react9.default.createElement(
+  ), /* @__PURE__ */ import_react13.default.createElement(
     DataVerify,
     {
       display: !!(validationRules == null ? void 0 : validationRules.specialChars),
@@ -1685,7 +1806,7 @@ var InputGauge = ({ validationRules, styled, inputValue, securityRules }) => {
       iconName: isSpecialCharsVerify.isVerify ? "tri-check-circle" /* CHECK_CIRCLE */ : "tri-times" /* TIMES */,
       styled
     }
-  ), /* @__PURE__ */ import_react9.default.createElement(
+  ), /* @__PURE__ */ import_react13.default.createElement(
     DataVerify,
     {
       display: !!(validationRules == null ? void 0 : validationRules.lowercase),
@@ -1696,7 +1817,7 @@ var InputGauge = ({ validationRules, styled, inputValue, securityRules }) => {
       iconName: isLowerercaseVerify.isVerify ? "tri-check-circle" /* CHECK_CIRCLE */ : "tri-times" /* TIMES */,
       styled
     }
-  ), /* @__PURE__ */ import_react9.default.createElement(
+  ), /* @__PURE__ */ import_react13.default.createElement(
     DataVerify,
     {
       display: !!(validationRules == null ? void 0 : validationRules.number),
@@ -1707,7 +1828,7 @@ var InputGauge = ({ validationRules, styled, inputValue, securityRules }) => {
       iconName: isNumberVerify.isVerify ? "tri-check-circle" /* CHECK_CIRCLE */ : "tri-times" /* TIMES */,
       styled
     }
-  )), securityRules && rules && rules.map((rule) => /* @__PURE__ */ import_react9.default.createElement(
+  )), securityRules && rules && rules.map((rule) => /* @__PURE__ */ import_react13.default.createElement(
     DataVerify,
     {
       key: `${id}_${rule.label}`,
@@ -1730,18 +1851,18 @@ var DataVerify = ({
   styled
 }) => {
   if (!display) return null;
-  return /* @__PURE__ */ import_react9.default.createElement("div", { ...dataAttribute, className: hashClass(styled, (0, import_clsx9.default)("security", classes)) }, /* @__PURE__ */ import_react9.default.createElement(Icon_default, { color, name: iconName, size: "smaller" /* SMALLER */ }), /* @__PURE__ */ import_react9.default.createElement("span", null, type));
+  return /* @__PURE__ */ import_react13.default.createElement("div", { ...dataAttribute, className: hashClass(styled, (0, import_clsx9.default)("security", classes)) }, /* @__PURE__ */ import_react13.default.createElement(Icon_default, { color, name: iconName, size: "smaller" /* SMALLER */ }), /* @__PURE__ */ import_react13.default.createElement("span", null, type));
 };
 var InputGauge_default = InputGauge;
 
 // components/input/Input.tsx
-var Input = import_react10.default.forwardRef(
+var Input = import_react14.default.forwardRef(
   ({
     forceControl,
     label,
     sample,
     className,
-    id = import_react10.default.useId(),
+    id = import_react14.default.useId(),
     disabled,
     onChange,
     onKeyPress,
@@ -1780,19 +1901,19 @@ var Input = import_react10.default.forwardRef(
     ...others
   }, ref) => {
     const { styled } = useTrilogyContext();
-    const idHelp = (0, import_react10.useId)();
-    const idSample = (0, import_react10.useId)();
+    const idHelp = (0, import_react14.useId)();
+    const idSample = (0, import_react14.useId)();
     const inputIcon = /* @__PURE__ */ new Map();
     inputIcon.set("success" /* SUCCESS */, "tri-check-circle" /* CHECK_CIRCLE */);
     inputIcon.set("warning" /* WARNING */, "tri-exclamation-circle" /* EXCLAMATION_CIRCLE */);
     inputIcon.set("error" /* ERROR */, "tri-exclamation-circle" /* EXCLAMATION_CIRCLE */);
-    const [_value, setValue] = (0, import_react10.useState)(defaultValue != null ? defaultValue : "");
-    const [isFocused, setIsFocused] = (0, import_react10.useState)(focused != null ? focused : false);
-    const [isDirty, setIsDirty] = (0, import_react10.useState)(false);
-    const [isTouched, setIsTouched] = (0, import_react10.useState)(false);
-    const [localStatus, setLocalStatus] = (0, import_react10.useState)(status || "default" /* DEFAULT */);
-    const [inputType, setInputType] = (0, import_react10.useState)(type);
-    const [isShowPwd, setIsShowPwd] = (0, import_react10.useState)(false);
+    const [_value, setValue] = (0, import_react14.useState)(defaultValue != null ? defaultValue : "");
+    const [isFocused, setIsFocused] = (0, import_react14.useState)(focused != null ? focused : false);
+    const [isDirty, setIsDirty] = (0, import_react14.useState)(false);
+    const [isTouched, setIsTouched] = (0, import_react14.useState)(false);
+    const [localStatus, setLocalStatus] = (0, import_react14.useState)(status || "default" /* DEFAULT */);
+    const [inputType, setInputType] = (0, import_react14.useState)(type);
+    const [isShowPwd, setIsShowPwd] = (0, import_react14.useState)(false);
     const helpClasses = (0, import_clsx10.default)("help", localStatus && is(localStatus));
     const loader = hashClass(styled, (0, import_clsx10.default)(is("searching")));
     const inputLabelClasses = hashClass(styled, "input-label");
@@ -1811,7 +1932,7 @@ var Input = import_react10.default.forwardRef(
         [has("icons-left")]: iconNameLeft || type === "search" /* SEARCH */
       })
     );
-    const onPressKey = (0, import_react10.useCallback)((e) => {
+    const onPressKey = (0, import_react14.useCallback)((e) => {
       const target = e.target;
       return {
         inputName: target.name,
@@ -1822,10 +1943,10 @@ var Input = import_react10.default.forwardRef(
         preventDefault: () => e.preventDefault()
       };
     }, []);
-    const IconWrapper = (0, import_react10.useCallback)(
+    const IconWrapper = (0, import_react14.useCallback)(
       ({ className: className2, name: name2, color, closeIconSearch, onPress, srOnly, showPassword }) => {
         const Markup = showPassword ? "button" : "div";
-        return /* @__PURE__ */ import_react10.default.createElement(
+        return /* @__PURE__ */ import_react14.default.createElement(
           Markup,
           {
             ...showPassword && { "data-show-pwd": true, type: "button" },
@@ -1836,8 +1957,8 @@ var Input = import_react10.default.forwardRef(
               }
             }
           },
-          /* @__PURE__ */ import_react10.default.createElement(Icon_default, { className: className2, name: name2, size: "small" /* SMALL */, color }),
-          _value && _value.length > 0 && closeIconSearch && /* @__PURE__ */ import_react10.default.createElement(
+          /* @__PURE__ */ import_react14.default.createElement(Icon_default, { className: className2, name: name2, size: "small" /* SMALL */, color }),
+          _value && _value.length > 0 && closeIconSearch && /* @__PURE__ */ import_react14.default.createElement(
             Icon_default,
             {
               onClick: () => setValue(""),
@@ -1846,34 +1967,34 @@ var Input = import_react10.default.forwardRef(
               size: "small" /* SMALL */
             }
           ),
-          showPassword && srOnly && /* @__PURE__ */ import_react10.default.createElement("span", { className: srOnlyClasses }, srOnly)
+          showPassword && srOnly && /* @__PURE__ */ import_react14.default.createElement("span", { className: srOnlyClasses }, srOnly)
         );
       },
       [_value, styled]
     );
     const validator = !customValidator && patternValidator ? (value2) => patternValidator.test(value2) ? "success" /* SUCCESS */ : "error" /* ERROR */ : customValidator;
-    (0, import_react10.useEffect)(() => {
+    (0, import_react14.useEffect)(() => {
       var _a;
       setValue((_a = value != null ? value : defaultValue) != null ? _a : "");
     }, [value, defaultValue]);
-    (0, import_react10.useEffect)(() => {
+    (0, import_react14.useEffect)(() => {
       setIsFocused(focused != null ? focused : false);
     }, [focused]);
-    (0, import_react10.useEffect)(() => {
+    (0, import_react14.useEffect)(() => {
       if (isFocused) setIsDirty(true);
       else if (isDirty) setIsTouched(true);
     }, [isFocused, isDirty]);
-    (0, import_react10.useEffect)(() => {
+    (0, import_react14.useEffect)(() => {
       if (!validator || !isTouched) return;
       setLocalStatus(validator(_value));
     }, [isFocused, isTouched]);
-    (0, import_react10.useEffect)(() => {
+    (0, import_react14.useEffect)(() => {
       setLocalStatus(status || "default" /* DEFAULT */);
     }, [status]);
-    (0, import_react10.useEffect)(() => {
+    (0, import_react14.useEffect)(() => {
       if (onStatusChange) onStatusChange(localStatus);
     }, [localStatus]);
-    return /* @__PURE__ */ import_react10.default.createElement("div", { className: wrapperClasses, "data-has-gauge": securityGauge ? true : void 0 }, label && /* @__PURE__ */ import_react10.default.createElement("label", { className: inputLabelClasses, htmlFor: id }, label, " ", required && /* @__PURE__ */ import_react10.default.createElement(Text_default, { markup: "span" /* SPAN */, typo: "has-text-error" /* TEXT_ERROR */ }, "*")), sample && /* @__PURE__ */ import_react10.default.createElement(Text_default, { className: "input-sample", level: 2 /* TWO */, id: idSample }, sample), /* @__PURE__ */ import_react10.default.createElement("div", { className: controlClasses }, /* @__PURE__ */ import_react10.default.createElement(
+    return /* @__PURE__ */ import_react14.default.createElement("div", { className: wrapperClasses, "data-has-gauge": securityGauge ? true : void 0 }, label && /* @__PURE__ */ import_react14.default.createElement("label", { className: inputLabelClasses, htmlFor: id }, label, " ", required && /* @__PURE__ */ import_react14.default.createElement(Text_default, { markup: "span" /* SPAN */, typo: "has-text-error" /* TEXT_ERROR */ }, "*")), sample && /* @__PURE__ */ import_react14.default.createElement(Text_default, { className: "input-sample", level: 2 /* TWO */, id: idSample }, sample), /* @__PURE__ */ import_react14.default.createElement("div", { className: controlClasses }, /* @__PURE__ */ import_react14.default.createElement(
       "input",
       {
         "aria-describedby": `${idHelp} ${idSample}`,
@@ -1938,7 +2059,7 @@ var Input = import_react10.default.forwardRef(
           setIsFocused(false);
         }
       }
-    ), hasIcon && !localStatus && !loading && iconNameLeft && /* @__PURE__ */ import_react10.default.createElement(IconWrapper, { name: iconNameLeft }), (iconNameLeft || type === "search" /* SEARCH */) && /* @__PURE__ */ import_react10.default.createElement(IconWrapper, { className: "icon-left", name: iconNameLeft || "tri-search" /* SEARCH */ }), iconNameRight && !loading && type !== "password" /* PASSWORD */ && /* @__PURE__ */ import_react10.default.createElement(IconWrapper, { className: "icon-right", name: iconNameRight }), !loading && type === "password" /* PASSWORD */ && /* @__PURE__ */ import_react10.default.createElement(
+    ), hasIcon && !localStatus && !loading && iconNameLeft && /* @__PURE__ */ import_react14.default.createElement(IconWrapper, { name: iconNameLeft }), (iconNameLeft || type === "search" /* SEARCH */) && /* @__PURE__ */ import_react14.default.createElement(IconWrapper, { className: "icon-left", name: iconNameLeft || "tri-search" /* SEARCH */ }), iconNameRight && !loading && type !== "password" /* PASSWORD */ && /* @__PURE__ */ import_react14.default.createElement(IconWrapper, { className: "icon-right", name: iconNameRight }), !loading && type === "password" /* PASSWORD */ && /* @__PURE__ */ import_react14.default.createElement(
       IconWrapper,
       {
         showPassword: true,
@@ -1955,7 +2076,7 @@ var Input = import_react10.default.forwardRef(
           }
         }
       }
-    ), loading && /* @__PURE__ */ import_react10.default.createElement("span", { className: loader })), help && /* @__PURE__ */ import_react10.default.createElement(Text_default, { className: helpClasses, id: idHelp }, help), securityGauge && type === "password" /* PASSWORD */ && /* @__PURE__ */ import_react10.default.createElement(
+    ), 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(
       InputGauge_default,
       {
         validationRules,
@@ -1971,7 +2092,7 @@ var Input_default = Input;
 
 // components/autocomplete/AutoComplete.tsx
 var import_clsx13 = __toESM(require("clsx"));
-var import_react11 = __toESM(require("react"));
+var import_react15 = __toESM(require("react"));
 
 // components/autocomplete/Autocomplete.helpers.ts
 var getLabel = (data) => typeof data === "string" ? data : data["label"];
@@ -1989,7 +2110,7 @@ var defaultMatching = (data, value) => {
 
 // components/autocomplete/item/AutoCompleteItem.tsx
 var import_clsx11 = __toESM(require("clsx"));
-var React15 = __toESM(require("react"));
+var React19 = __toESM(require("react"));
 var AutoCompleteItem = ({
   children,
   suggestionSelected,
@@ -1999,8 +2120,8 @@ var AutoCompleteItem = ({
   id
 }) => {
   const { styled } = useTrilogyContext();
-  const [isActive, setIsActive] = React15.useState(false);
-  return /* @__PURE__ */ React15.createElement(
+  const [isActive, setIsActive] = React19.useState(false);
+  return /* @__PURE__ */ React19.createElement(
     "div",
     {
       id,
@@ -2021,10 +2142,10 @@ var item_default = AutoCompleteItem_default;
 
 // components/autocomplete/menu/AutoCompleteMenu.tsx
 var import_clsx12 = __toESM(require("clsx"));
-var React16 = __toESM(require("react"));
+var React20 = __toESM(require("react"));
 var AutoCompleteMenu = ({ children, className, id, absolute, fullwidth, testId }) => {
   const { styled } = useTrilogyContext();
-  return /* @__PURE__ */ React16.createElement(
+  return /* @__PURE__ */ React20.createElement(
     "div",
     {
       id,
@@ -2089,17 +2210,17 @@ var AutoCompleteRef = ({
   ...others
 }, ref) => {
   const { styled } = useTrilogyContext();
-  const [itemSelected, setItemSelected] = (0, import_react11.useState)(null);
-  const [_inputValue, setInputValue] = (0, import_react11.useState)(value != null ? value : "");
-  const [activeItem, setActiveItem] = (0, import_react11.useState)(0);
-  const [isAutocompleteMenuVisible, setIsAutocompleteMenuVisible] = (0, import_react11.useState)(displayMenu || false);
-  const [search, setSearch] = (0, import_react11.useState)([]);
+  const [itemSelected, setItemSelected] = (0, import_react15.useState)(null);
+  const [_inputValue, setInputValue] = (0, import_react15.useState)(value != null ? value : "");
+  const [activeItem, setActiveItem] = (0, import_react15.useState)(0);
+  const [isAutocompleteMenuVisible, setIsAutocompleteMenuVisible] = (0, import_react15.useState)(displayMenu || false);
+  const [search, setSearch] = (0, import_react15.useState)([]);
   const autocompleteClasses = hashClass(styled, (0, import_clsx13.default)(is("autocomplete"), is("active")));
   const autocompleteContainerClasses = hashClass(styled, (0, import_clsx13.default)(is("autocomplete-container")));
-  (0, import_react11.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     setInputValue(value || "");
   }, [value]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     setActiveItem(0);
     if (data == null ? void 0 : data.length) {
       if (matching) {
@@ -2110,7 +2231,7 @@ var AutoCompleteRef = ({
       setItemSelected(null);
     }
   }, [_inputValue]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     setSearch(matching(data, _inputValue));
   }, [data]);
   const onTextChanged = async (e) => {
@@ -2177,7 +2298,7 @@ var AutoCompleteRef = ({
     setIsAutocompleteMenuVisible(true);
     if (onFocus) onFocus(event);
   };
-  return /* @__PURE__ */ import_react11.default.createElement("div", { className: autocompleteContainerClasses }, /* @__PURE__ */ import_react11.default.createElement(
+  return /* @__PURE__ */ import_react15.default.createElement("div", { className: autocompleteContainerClasses }, /* @__PURE__ */ import_react15.default.createElement(
     Input_default,
     {
       id,
@@ -2206,7 +2327,7 @@ var AutoCompleteRef = ({
       loading,
       ...{ onKeyDown: (e) => e.key === "Enter" && e.preventDefault(), ...others }
     }
-  ), isAutocompleteMenuVisible && /* @__PURE__ */ import_react11.default.createElement("div", { className: autocompleteClasses }, search.length > 0 && /* @__PURE__ */ import_react11.default.createElement(menu_default, { absolute: absoluteMenu, fullwidth: fullwidthMenu, className: classNameMenu }, search.map((item, i) => /* @__PURE__ */ import_react11.default.createElement(
+  ), isAutocompleteMenuVisible && /* @__PURE__ */ import_react15.default.createElement("div", { className: autocompleteClasses }, search.length > 0 && /* @__PURE__ */ import_react15.default.createElement(menu_default, { absolute: absoluteMenu, fullwidth: fullwidthMenu, className: classNameMenu }, search.map((item, i) => /* @__PURE__ */ import_react15.default.createElement(
     item_default,
     {
       active: activeItem === i,
@@ -2218,25 +2339,25 @@ var AutoCompleteRef = ({
   )))));
 };
 AutoCompleteRef.displayName = "AutoComplete" /* AutoComplete */;
-var AutoComplete = import_react11.default.forwardRef(AutoCompleteRef);
+var AutoComplete = import_react15.default.forwardRef(AutoCompleteRef);
 var AutoComplete_default = AutoComplete;
 
 // components/autolayout/AutoLayout/AutoLayout.tsx
-var React18 = __toESM(require("react"));
+var React22 = __toESM(require("react"));
 var AutoLayout = ({ children }) => {
-  return /* @__PURE__ */ React18.createElement("div", { className: "autolayout" }, children);
+  return /* @__PURE__ */ React22.createElement("div", { className: "autolayout" }, children);
 };
 var AutoLayout_default = AutoLayout;
 
 // components/autolayout/AutoLayoutWrapper/index.tsx
-var React19 = __toESM(require("react"));
+var React23 = __toESM(require("react"));
 var AutoLayoutWrapper = ({ autolayout = true, children }) => {
   if (autolayout === true) {
-    return /* @__PURE__ */ React19.createElement(AutoLayout_default, null, children);
+    return /* @__PURE__ */ React23.createElement(AutoLayout_default, null, children);
   } else if (autolayout) {
-    return /* @__PURE__ */ React19.createElement(AutoLayout_default, { matrix: autolayout }, children);
+    return /* @__PURE__ */ React23.createElement(AutoLayout_default, { matrix: autolayout }, children);
   } else {
-    return /* @__PURE__ */ React19.createElement(React19.Fragment, null, children);
+    return /* @__PURE__ */ React23.createElement(React23.Fragment, null, children);
   }
 };
 var AutoLayoutWrapper_default = AutoLayoutWrapper;
@@ -2304,8 +2425,8 @@ var DEFAULT_SPACING_MATRIX = [
 
 // components/badge/Badge.tsx
 var import_clsx14 = __toESM(require("clsx"));
-var React20 = __toESM(require("react"));
-var Badge = React20.forwardRef(
+var React24 = __toESM(require("react"));
+var Badge = React24.forwardRef(
   ({ className, children, id, label, inverted, onClick, variant, position, status, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     const classes = hashClass(
@@ -2340,7 +2461,7 @@ var Badge = React20.forwardRef(
       default:
         break;
     }
-    const simpleBadge = status && iconName && iconColor ? /* @__PURE__ */ React20.createElement(
+    const simpleBadge = status && iconName && iconColor ? /* @__PURE__ */ React24.createElement(
       Icon_default,
       {
         ref,
@@ -2352,7 +2473,7 @@ var Badge = React20.forwardRef(
         id,
         ...others
       }
-    ) : /* @__PURE__ */ React20.createElement(
+    ) : /* @__PURE__ */ React24.createElement(
       "span",
       {
         ref,
@@ -2367,7 +2488,7 @@ var Badge = React20.forwardRef(
       label
     );
     if (children) {
-      return /* @__PURE__ */ React20.createElement("span", { className: "badge-container" }, children, simpleBadge);
+      return /* @__PURE__ */ React24.createElement("span", { className: "badge-container" }, children, simpleBadge);
     }
     return simpleBadge;
   }
@@ -2397,8 +2518,8 @@ var BadgeVariant = /* @__PURE__ */ ((BadgeVariant2) => {
 
 // components/box/Box.tsx
 var import_clsx15 = __toESM(require("clsx"));
-var import_react12 = __toESM(require("react"));
-var Box = import_react12.default.forwardRef(
+var import_react16 = __toESM(require("react"));
+var Box = import_react16.default.forwardRef(
   ({
     inverted,
     children,
@@ -2440,7 +2561,7 @@ var Box = import_react12.default.forwardRef(
     const hoverStyle = {
       cursor: "pointer"
     };
-    return /* @__PURE__ */ import_react12.default.createElement(
+    return /* @__PURE__ */ import_react16.default.createElement(
       Tag2,
       {
         ref,
@@ -2470,8 +2591,8 @@ var Box_default = Box;
 
 // components/box/content/BoxContent.tsx
 var import_clsx16 = __toESM(require("clsx"));
-var React22 = __toESM(require("react"));
-var BoxContent = React22.forwardRef(
+var React26 = __toESM(require("react"));
+var BoxContent = React26.forwardRef(
   ({ children, className, id, backgroundColor, backgroundSrc, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     const classes = hashClass(
@@ -2483,7 +2604,7 @@ var BoxContent = React22.forwardRef(
         className
       )
     );
-    return /* @__PURE__ */ React22.createElement(
+    return /* @__PURE__ */ React26.createElement(
       "div",
       {
         ref,
@@ -2508,11 +2629,11 @@ var content_default = BoxContent_default;
 
 // components/box/footer/BoxFooter.tsx
 var import_clsx17 = __toESM(require("clsx"));
-var React23 = __toESM(require("react"));
-var BoxFooter = React23.forwardRef(
+var React27 = __toESM(require("react"));
+var BoxFooter = React27.forwardRef(
   ({ className, children, backgroundColor, id, ...others }, ref) => {
     const { styled } = useTrilogyContext();
-    return /* @__PURE__ */ React23.createElement(
+    return /* @__PURE__ */ React27.createElement(
       "div",
       {
         ref,
@@ -2535,8 +2656,8 @@ var footer_default = BoxFooter_default;
 
 // components/box/header/BoxHeader.tsx
 var import_clsx18 = __toESM(require("clsx"));
-var React24 = __toESM(require("react"));
-var BoxHeader = React24.forwardRef(
+var React28 = __toESM(require("react"));
+var BoxHeader = React28.forwardRef(
   ({ children, className, id, align, variant, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     let alignClass = null;
@@ -2547,7 +2668,7 @@ var BoxHeader = React24.forwardRef(
       styled,
       (0, import_clsx18.default)("box-header", className, variant && has(getBackgroundClassName(variant)), align && alignClass)
     );
-    return /* @__PURE__ */ React24.createElement("div", { ref, id, className: classes, ...others }, children && typeof children.valueOf() === "string" ? /* @__PURE__ */ React24.createElement("p", null, children) : children);
+    return /* @__PURE__ */ React28.createElement("div", { ref, id, className: classes, ...others }, children && typeof children.valueOf() === "string" ? /* @__PURE__ */ React28.createElement("p", null, children) : children);
   }
 );
 BoxHeader.displayName = "BoxHeader" /* BoxHeader */;
@@ -2558,11 +2679,11 @@ var header_default = BoxHeader_default;
 
 // components/box/table-container/BoxTableContainer.tsx
 var import_clsx19 = __toESM(require("clsx"));
-var React25 = __toESM(require("react"));
-var BoxTableContainer = React25.forwardRef(
+var React29 = __toESM(require("react"));
+var BoxTableContainer = React29.forwardRef(
   ({ className, testId, ...others }, ref) => {
     const { styled } = useTrilogyContext();
-    return /* @__PURE__ */ React25.createElement(
+    return /* @__PURE__ */ React29.createElement(
       "div",
       {
         ref,
@@ -2581,11 +2702,11 @@ var table_container_default = BoxTableContainer_default;
 
 // components/box/item/BoxItem.tsx
 var import_clsx20 = __toESM(require("clsx"));
-var React26 = __toESM(require("react"));
-var BoxItem = React26.forwardRef(
+var React30 = __toESM(require("react"));
+var BoxItem = React30.forwardRef(
   ({ className, id, children, ...others }, ref) => {
     const { styled } = useTrilogyContext();
-    return /* @__PURE__ */ React26.createElement("div", { ref, id, className: hashClass(styled, (0, import_clsx20.default)("box-item", className)), ...others }, children);
+    return /* @__PURE__ */ React30.createElement("div", { ref, id, className: hashClass(styled, (0, import_clsx20.default)("box-item", className)), ...others }, children);
   }
 );
 BoxItem.displayName = "BoxItem" /* BoxItem */;
@@ -2608,11 +2729,11 @@ var item_default2 = BoxItem_default;
 // components/breadcrumb/Breadcrumb.tsx
 var import_locales2 = require("@trilogy-ds/locales");
 var import_clsx21 = __toESM(require("clsx"));
-var React27 = __toESM(require("react"));
-var Breadcrumb = React27.forwardRef(
+var React31 = __toESM(require("react"));
+var Breadcrumb = React31.forwardRef(
   ({ children, className, id, ...others }, ref) => {
     const { styled } = useTrilogyContext();
-    return /* @__PURE__ */ React27.createElement(
+    return /* @__PURE__ */ React31.createElement(
       "nav",
       {
         ref,
@@ -2622,7 +2743,7 @@ var Breadcrumb = React27.forwardRef(
         "aria-label": import_locales2.breadcrumbLocale.accessibilityLabel,
         ...others
       },
-      /* @__PURE__ */ React27.createElement("ul", null, children)
+      /* @__PURE__ */ React31.createElement("ul", null, children)
     );
   }
 );
@@ -2631,8 +2752,8 @@ var Breadcrumb_default = Breadcrumb;
 
 // components/link/Link.tsx
 var import_clsx22 = __toESM(require("clsx"));
-var React28 = __toESM(require("react"));
-var Link = React28.forwardRef(
+var React32 = __toESM(require("react"));
+var Link = React32.forwardRef(
   ({
     children,
     className,
@@ -2653,7 +2774,7 @@ var Link = React28.forwardRef(
     if (routerLink && to) {
       const RouterLink = routerLink ? routerLink : "a";
       const RouterLinkTrilogy = () => {
-        return /* @__PURE__ */ React28.createElement(
+        return /* @__PURE__ */ React32.createElement(
           RouterLink,
           {
             ref,
@@ -2670,10 +2791,10 @@ var Link = React28.forwardRef(
           children
         );
       };
-      return /* @__PURE__ */ React28.createElement(RouterLinkTrilogy, null);
+      return /* @__PURE__ */ React32.createElement(RouterLinkTrilogy, null);
     }
     const LinkTrilogy = () => {
-      return /* @__PURE__ */ React28.createElement(
+      return /* @__PURE__ */ React32.createElement(
         "a",
         {
           ref,
@@ -2688,10 +2809,10 @@ var Link = React28.forwardRef(
           },
           ...others
         },
-        iconName ? /* @__PURE__ */ React28.createElement(React28.Fragment, null, /* @__PURE__ */ React28.createElement("span", null, children), /* @__PURE__ */ React28.createElement(Icon_default, { name: iconName, size: "small" /* SMALL */ })) : children
+        iconName ? /* @__PURE__ */ React32.createElement(React32.Fragment, null, /* @__PURE__ */ React32.createElement("span", null, children), /* @__PURE__ */ React32.createElement(Icon_default, { name: iconName, size: "small" /* SMALL */ })) : children
       );
     };
-    return /* @__PURE__ */ React28.createElement(LinkTrilogy, null);
+    return /* @__PURE__ */ React32.createElement(LinkTrilogy, null);
   }
 );
 Link.displayName = "Link" /* Link */;
@@ -2699,15 +2820,15 @@ var Link_default = Link;
 
 // components/breadcrumb/item/BreadcrumbItem.tsx
 var import_clsx23 = __toESM(require("clsx"));
-var React29 = __toESM(require("react"));
-var BreadcrumbItem = React29.forwardRef(
+var React33 = __toESM(require("react"));
+var BreadcrumbItem = React33.forwardRef(
   ({ children, active, id, href, to, routerLink, testId, onClick, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     if (routerLink && to) {
       const RouterLink = routerLink ? routerLink : "a";
-      return /* @__PURE__ */ React29.createElement("li", { ref, id, "data-testid": testId, onClick, "aria-current": active ? "page" : void 0 }, /* @__PURE__ */ React29.createElement(RouterLink, { className: hashClass(styled, (0, import_clsx23.default)("link")), to, ...others }, children));
+      return /* @__PURE__ */ React33.createElement("li", { ref, id, "data-testid": testId, onClick, "aria-current": active ? "page" : void 0 }, /* @__PURE__ */ React33.createElement(RouterLink, { className: hashClass(styled, (0, import_clsx23.default)("link")), to, ...others }, children));
     }
-    return /* @__PURE__ */ React29.createElement("li", { ref, id, onClick, "aria-current": active ? "page" : void 0 }, active ? children : /* @__PURE__ */ React29.createElement(Link_default, { href, ...others }, children));
+    return /* @__PURE__ */ React33.createElement("li", { ref, id, onClick, "aria-current": active ? "page" : void 0 }, active ? children : /* @__PURE__ */ React33.createElement(Link_default, { href, ...others }, children));
   }
 );
 BreadcrumbItem.displayName = "BreadcrumbItem" /* BreadcrumbItem */;
@@ -2715,7 +2836,7 @@ var BreadcrumbItem_default = BreadcrumbItem;
 
 // components/button/Button.tsx
 var import_clsx24 = __toESM(require("clsx"));
-var import_react13 = __toESM(require("react"));
+var import_react17 = __toESM(require("react"));
 
 // components/button/ButtonEnum.ts
 var ButtonMarkup = /* @__PURE__ */ ((ButtonMarkup2) => {
@@ -2739,7 +2860,7 @@ var ButtonVariant = /* @__PURE__ */ ((ButtonVariant3) => {
 })(ButtonVariant || {});
 
 // components/button/Button.tsx
-var Button = import_react13.default.forwardRef(
+var Button = import_react17.default.forwardRef(
   ({
     markup,
     loading,
@@ -2777,7 +2898,7 @@ var Button = import_react13.default.forwardRef(
     const classes = hashClass(styled, getClassNames(loading, variant, fullwidth, className));
     const Tag2 = markup && isCorrectMarkup2(markup) ? markup : "button";
     if (Tag2 === "button" && !href && !to) {
-      return /* @__PURE__ */ import_react13.default.createElement(
+      return /* @__PURE__ */ import_react17.default.createElement(
         "button",
         {
           ref,
@@ -2793,12 +2914,12 @@ var Button = import_react13.default.forwardRef(
           type: type != null ? type : "button",
           ...others
         },
-        iconName && /* @__PURE__ */ import_react13.default.createElement(Icon_default, { className: !children ? "is-marginless" : "", name: iconName }),
+        iconName && /* @__PURE__ */ import_react17.default.createElement(Icon_default, { className: !children ? "is-marginless" : "", name: iconName }),
         children
       );
     }
     if (Tag2 === "input") {
-      return /* @__PURE__ */ import_react13.default.createElement(
+      return /* @__PURE__ */ import_react17.default.createElement(
         "input",
         {
           ref,
@@ -2819,9 +2940,9 @@ var Button = import_react13.default.forwardRef(
     }
     if (routerLink && to && !isDisabled) {
       const RouterLink = routerLink ? routerLink : "a";
-      return /* @__PURE__ */ import_react13.default.createElement(RouterLink, { ref, "aria-label": accessibilityLabel, to, className: classes, ...others }, iconName && /* @__PURE__ */ import_react13.default.createElement(Icon_default, { className: !children ? "is-marginless" : "", name: iconName }), children);
+      return /* @__PURE__ */ import_react17.default.createElement(RouterLink, { ref, "aria-label": accessibilityLabel, to, className: classes, ...others }, iconName && /* @__PURE__ */ import_react17.default.createElement(Icon_default, { className: !children ? "is-marginless" : "", name: iconName }), children);
     }
-    return /* @__PURE__ */ import_react13.default.createElement(
+    return /* @__PURE__ */ import_react17.default.createElement(
       "a",
       {
         ref,
@@ -2836,7 +2957,7 @@ var Button = import_react13.default.forwardRef(
         ...others,
         ...disabled && { "aria-disabled": true }
       },
-      iconName && /* @__PURE__ */ import_react13.default.createElement(Icon_default, { className: !children ? "is-marginless" : "", name: iconName }),
+      iconName && /* @__PURE__ */ import_react17.default.createElement(Icon_default, { className: !children ? "is-marginless" : "", name: iconName }),
       children
     );
   }
@@ -2846,11 +2967,11 @@ var Button_default = Button;
 
 // components/button/list/ButtonList.tsx
 var import_clsx25 = __toESM(require("clsx"));
-var React31 = __toESM(require("react"));
-var ButtonList = React31.forwardRef(
+var React35 = __toESM(require("react"));
+var ButtonList = React35.forwardRef(
   ({ className, id, align, direction, ...others }, ref) => {
     const { styled } = useTrilogyContext();
-    return /* @__PURE__ */ React31.createElement(
+    return /* @__PURE__ */ React35.createElement(
       "div",
       {
         ref,
@@ -2875,14 +2996,14 @@ var ButtonList_default = ButtonList;
 // components/calendar/Calendar.tsx
 var import_locales3 = require("@trilogy-ds/locales");
 var import_clsx29 = __toESM(require("clsx"));
-var import_react16 = __toESM(require("react"));
+var import_react20 = __toESM(require("react"));
 
 // components/select/Select.tsx
-var React35 = __toESM(require("react"));
+var React39 = __toESM(require("react"));
 
 // components/select/context/index.tsx
-var import_react14 = __toESM(require("react"));
-var SelectContext = import_react14.default.createContext({
+var import_react18 = __toESM(require("react"));
+var SelectContext = import_react18.default.createContext({
   selectedOptionValues: [],
   multiple: false,
   custom: false,
@@ -2893,10 +3014,10 @@ var SelectContext = import_react14.default.createContext({
 
 // components/select/web/SelectDynamic.tsx
 var import_clsx26 = __toESM(require("clsx"));
-var import_react15 = __toESM(require("react"));
+var import_react19 = __toESM(require("react"));
 var import_react_dom = __toESM(require("react-dom"));
 var OPTION_SIZE = 48;
-var SelectDynamic = import_react15.default.forwardRef(
+var SelectDynamic = import_react19.default.forwardRef(
   ({
     onChange,
     disabled,
@@ -2919,11 +3040,11 @@ var SelectDynamic = import_react15.default.forwardRef(
     ...others
   }, ref) => {
     const { styled } = useTrilogyContext();
-    const { setIsVisibleOptions, isVisibleOptions, selectedOptionValues } = (0, import_react15.useContext)(SelectContext);
-    const containerRef = (0, import_react15.useRef)(null);
-    const [openUpward, setOpenUpward] = (0, import_react15.useState)(false);
-    const optionsListSize = (0, import_react15.useRef)(0);
-    const [dropdownStyles, setDropdownStyles] = (0, import_react15.useState)({});
+    const { setIsVisibleOptions, isVisibleOptions, selectedOptionValues } = (0, import_react19.useContext)(SelectContext);
+    const containerRef = (0, import_react19.useRef)(null);
+    const [openUpward, setOpenUpward] = (0, import_react19.useState)(false);
+    const optionsListSize = (0, import_react19.useRef)(0);
+    const [dropdownStyles, setDropdownStyles] = (0, import_react19.useState)({});
     const selectClasses = hashClass(styled, (0, import_clsx26.default)("select", className));
     const optionsClasses = hashClass(styled, (0, import_clsx26.default)("select-options", openUpward && "select-options-top"));
     const portalClasses = hashClass(styled, "select-trilogy_modal_open");
@@ -2952,29 +3073,29 @@ var SelectDynamic = import_react15.default.forwardRef(
         return prev;
       });
     };
-    const options = (0, import_react15.useMemo)(() => {
+    const options = (0, import_react19.useMemo)(() => {
       var _a;
-      return (_a = import_react15.default.Children.map(children, (child) => {
-        if (!import_react15.default.isValidElement(child)) return false;
+      return (_a = import_react19.default.Children.map(children, (child) => {
+        if (!import_react19.default.isValidElement(child)) return false;
         return {
           label: child.props.children || child.props.label,
           value: child.props.value
         };
       })) == null ? void 0 : _a.filter((option) => option);
     }, []);
-    const labelsSelected = (0, import_react15.useMemo)(() => {
+    const labelsSelected = (0, import_react19.useMemo)(() => {
       return selectedOptionValues.map((selectedOption) => {
         const elm = options == null ? void 0 : options.find((opt) => opt.value === selectedOption);
         return elm == null ? void 0 : elm.label;
       });
     }, [selectedOptionValues, options]);
-    (0, import_react15.useEffect)(() => {
-      const childrenCount = import_react15.default.Children.count(children);
+    (0, import_react19.useEffect)(() => {
+      const childrenCount = import_react19.default.Children.count(children);
       if (childrenCount > 0) {
         optionsListSize.current = childrenCount * OPTION_SIZE;
       }
     }, [children]);
-    return /* @__PURE__ */ import_react15.default.createElement("div", { className: selectClasses, ref: containerRef, ...others }, /* @__PURE__ */ import_react15.default.createElement(
+    return /* @__PURE__ */ import_react19.default.createElement("div", { className: selectClasses, ref: containerRef, ...others }, /* @__PURE__ */ import_react19.default.createElement(
       Input_default,
       {
         sample,
@@ -3001,7 +3122,7 @@ var SelectDynamic = import_react15.default.forwardRef(
         },
         ...{ readOnly: true, id, role: "combobox" }
       }
-    ), /* @__PURE__ */ import_react15.default.createElement(
+    ), /* @__PURE__ */ import_react19.default.createElement(
       "ul",
       {
         role: "listbox",
@@ -3013,7 +3134,7 @@ var SelectDynamic = import_react15.default.forwardRef(
       },
       children
     ), isVisibleOptions && import_react_dom.default.createPortal(
-      /* @__PURE__ */ import_react15.default.createElement("div", { role: "presentation", className: portalClasses, onClick: onCloseOptions }),
+      /* @__PURE__ */ import_react19.default.createElement("div", { role: "presentation", className: portalClasses, onClick: onCloseOptions }),
       document.body
     ));
   }
@@ -3023,8 +3144,8 @@ var SelectDynamic_default = SelectDynamic;
 
 // components/select/web/SelectNative.tsx
 var import_clsx27 = __toESM(require("clsx"));
-var React34 = __toESM(require("react"));
-var SelectNative = React34.forwardRef(
+var React38 = __toESM(require("react"));
+var SelectNative = React38.forwardRef(
   ({
     onChange,
     disabled,
@@ -3046,25 +3167,25 @@ var SelectNative = React34.forwardRef(
     ...others
   }, ref) => {
     const { styled } = useTrilogyContext();
-    const idHelp = React34.useId();
-    const idSample = React34.useId();
-    const [focused, setIsFocused] = React34.useState(false);
-    const [selectedValues, setSelectedValues] = React34.useState(selected);
+    const idHelp = React38.useId();
+    const idSample = React38.useId();
+    const [focused, setIsFocused] = React38.useState(false);
+    const [selectedValues, setSelectedValues] = React38.useState(selected);
     const selectClasses = hashClass(styled, (0, import_clsx27.default)("select", className));
     const controlClass = hashClass(styled, (0, import_clsx27.default)("control", iconName && "has-icons-left"));
     const helpClasses = (0, import_clsx27.default)("help", status && is(status));
-    const handleFocus = React34.useCallback((e) => {
+    const handleFocus = React38.useCallback((e) => {
       setIsFocused(true);
       onFocus && onFocus(e);
     }, []);
-    const handleBlur = React34.useCallback((e) => {
+    const handleBlur = React38.useCallback((e) => {
       setIsFocused(false);
       onBlur && onBlur(e);
     }, []);
-    React34.useEffect(() => {
+    React38.useEffect(() => {
       setSelectedValues(selected);
     }, [selected]);
-    return /* @__PURE__ */ React34.createElement("div", { className: selectClasses }, /* @__PURE__ */ React34.createElement("div", { className: hashClass(styled, (0, import_clsx27.default)("field", focused && "focus")) }, label && /* @__PURE__ */ React34.createElement("label", { className: hashClass(styled, "input-label"), htmlFor: id }, label, " ", required && /* @__PURE__ */ React34.createElement(Text_default, { markup: "span" /* SPAN */, typo: "has-text-error" /* TEXT_ERROR */ }, "*")), sample && /* @__PURE__ */ React34.createElement(Text_default, { className: "input-sample", level: 2 /* TWO */, id: idSample }, sample), /* @__PURE__ */ React34.createElement("div", { className: controlClass }, /* @__PURE__ */ React34.createElement(
+    return /* @__PURE__ */ React38.createElement("div", { className: selectClasses }, /* @__PURE__ */ React38.createElement("div", { className: hashClass(styled, (0, import_clsx27.default)("field", focused && "focus")) }, label && /* @__PURE__ */ React38.createElement("label", { className: hashClass(styled, "input-label"), htmlFor: id }, label, " ", required && /* @__PURE__ */ React38.createElement(Text_default, { markup: "span" /* SPAN */, typo: "has-text-error" /* TEXT_ERROR */ }, "*")), sample && /* @__PURE__ */ React38.createElement(Text_default, { className: "input-sample", level: 2 /* TWO */, id: idSample }, sample), /* @__PURE__ */ React38.createElement("div", { className: controlClass }, /* @__PURE__ */ React38.createElement(
       "select",
       {
         ref,
@@ -3094,30 +3215,30 @@ var SelectNative = React34.forwardRef(
         role: "listbox",
         ...others
       },
-      React34.Children.map(children, (child) => {
-        if (!React34.isValidElement(child)) return null;
+      React38.Children.map(children, (child) => {
+        if (!React38.isValidElement(child)) return null;
         const props = {
           ...child.props,
           native: "true"
         };
-        return /* @__PURE__ */ React34.createElement(option_default, { ...props });
+        return /* @__PURE__ */ React38.createElement(option_default, { ...props });
       })
-    ), iconName && /* @__PURE__ */ React34.createElement(Icon_default, { name: iconName, size: "small" })), help && /* @__PURE__ */ React34.createElement(Text_default, { className: helpClasses, id: idHelp }, help)));
+    ), iconName && /* @__PURE__ */ React38.createElement(Icon_default, { name: iconName, size: "small" })), help && /* @__PURE__ */ React38.createElement(Text_default, { className: helpClasses, id: idHelp }, help)));
   }
 );
 SelectNative.displayName = "Select" /* Select */;
 var SelectNative_default = SelectNative;
 
 // components/select/Select.tsx
-var Select = React35.forwardRef(({ selected, ...props }, ref) => {
-  const [isVisibleOptions, setIsVisibleOptions] = React35.useState(false);
-  const [selectedOptionValues, setSelectedOptionValues] = React35.useState([]);
-  React35.useEffect(() => {
+var Select = React39.forwardRef(({ selected, ...props }, ref) => {
+  const [isVisibleOptions, setIsVisibleOptions] = React39.useState(false);
+  const [selectedOptionValues, setSelectedOptionValues] = React39.useState([]);
+  React39.useEffect(() => {
     const value = typeof selected === "string" || typeof selected === "number" ? [selected] : !selected || selected === null ? [] : selected;
     setSelectedOptionValues(value);
   }, [selected]);
   if (props.custom || props.multiple)
-    return /* @__PURE__ */ React35.createElement(
+    return /* @__PURE__ */ React39.createElement(
       SelectContext.Provider,
       {
         value: {
@@ -3130,20 +3251,20 @@ var Select = React35.forwardRef(({ selected, ...props }, ref) => {
           onChange: props.onChange
         }
       },
-      /* @__PURE__ */ React35.createElement(SelectDynamic_default, { ref, selected, ...props })
+      /* @__PURE__ */ React39.createElement(SelectDynamic_default, { ref, selected, ...props })
     );
-  return /* @__PURE__ */ React35.createElement(SelectNative_default, { ref, selected, ...props });
+  return /* @__PURE__ */ React39.createElement(SelectNative_default, { ref, selected, ...props });
 });
 Select.displayName = "Select" /* Select */;
 var Select_default = Select;
 
 // components/select/option/SelectOption.tsx
 var import_clsx28 = __toESM(require("clsx"));
-var React36 = __toESM(require("react"));
-var SelectOption = React36.forwardRef(
+var React40 = __toESM(require("react"));
+var SelectOption = React40.forwardRef(
   ({ id, className, value = "", disabled, children, onClick, label, iconName, testId, ...others }, ref) => {
     const { styled } = useTrilogyContext();
-    const { custom, selectedOptionValues, setSelectedOptionValues, multiple, setIsVisibleOptions, onChange } = React36.useContext(SelectContext);
+    const { custom, selectedOptionValues, setSelectedOptionValues, multiple, setIsVisibleOptions, onChange } = React40.useContext(SelectContext);
     const isChecked = selectedOptionValues.includes(value);
     const selectClasses = hashClass(styled, (0, import_clsx28.default)("option", isChecked && "focus", disabled && is("disabled"), className));
     const handleClickOption = () => {
@@ -3165,7 +3286,7 @@ var SelectOption = React36.forwardRef(
       if (!multiple) setIsVisibleOptions(false);
     };
     if (custom || multiple) {
-      return /* @__PURE__ */ React36.createElement(
+      return /* @__PURE__ */ React40.createElement(
         "li",
         {
           ref,
@@ -3178,11 +3299,11 @@ var SelectOption = React36.forwardRef(
           onClick: !disabled ? handleClickOption : void 0,
           ...others
         },
-        iconName && /* @__PURE__ */ React36.createElement(Icon_default, { name: iconName }),
+        iconName && /* @__PURE__ */ React40.createElement(Icon_default, { name: iconName }),
         label || children
       );
     }
-    return /* @__PURE__ */ React36.createElement(
+    return /* @__PURE__ */ React40.createElement(
       "option",
       {
         ref,
@@ -3227,7 +3348,7 @@ var currentDate = /* @__PURE__ */ new Date();
 function checkIsRange(date) {
   return !(date instanceof Date);
 }
-var Calendar = import_react16.default.forwardRef(
+var Calendar = import_react20.default.forwardRef(
   ({
     value = currentDate,
     minDate = new Date(currentDate.getFullYear() - 10, 0, 1),
@@ -3239,16 +3360,16 @@ var Calendar = import_react16.default.forwardRef(
     onMonthChange
   }, ref) => {
     const { styled } = useTrilogyContext();
-    const [visibleMonth, setVisibleMonth] = import_react16.default.useState(
+    const [visibleMonth, setVisibleMonth] = import_react20.default.useState(
       value instanceof Date ? value : value[0] || currentDate
     );
-    const [activeDate, setActiveDate] = import_react16.default.useState(value);
-    const [dateEndHovered, setDateEndHovered] = import_react16.default.useState();
-    const refsDays = import_react16.default.useRef([]);
-    const refDayFocused = import_react16.default.useRef();
-    const refs = import_react16.default.useRef([]);
-    const weeksId = import_react16.default.useId();
-    const daysId = import_react16.default.useId();
+    const [activeDate, setActiveDate] = import_react20.default.useState(value);
+    const [dateEndHovered, setDateEndHovered] = import_react20.default.useState();
+    const refsDays = import_react20.default.useRef([]);
+    const refDayFocused = import_react20.default.useRef();
+    const refs = import_react20.default.useRef([]);
+    const weeksId = import_react20.default.useId();
+    const daysId = import_react20.default.useId();
     const calendarClasses = hashClass(styled, (0, import_clsx29.default)("calendar"));
     const calendarheaderClasses = hashClass(styled, (0, import_clsx29.default)("calendar-header"));
     const headerDropdownClasses = hashClass(styled, (0, import_clsx29.default)("calendar-header-dropdown"));
@@ -3270,15 +3391,15 @@ var Calendar = import_react16.default.forwardRef(
     const rondedLeftClasses = hashClass(styled, (0, import_clsx29.default)("calendar-date-rounded-left"));
     const rondedRightClasses = hashClass(styled, (0, import_clsx29.default)("calendar-date-rounded-right"));
     const isRange = checkIsRange(activeDate);
-    const isNextDisabled = import_react16.default.useMemo(
+    const isNextDisabled = import_react20.default.useMemo(
       () => disabled || (maxDate == null ? void 0 : maxDate.getMonth()) === (visibleMonth == null ? void 0 : visibleMonth.getMonth()) && (maxDate == null ? void 0 : maxDate.getFullYear()) === (visibleMonth == null ? void 0 : visibleMonth.getFullYear()),
       [maxDate, visibleMonth, disabled]
     );
-    const isPrevDisabled = import_react16.default.useMemo(
+    const isPrevDisabled = import_react20.default.useMemo(
       () => disabled || (minDate == null ? void 0 : minDate.getMonth()) === (visibleMonth == null ? void 0 : visibleMonth.getMonth()) && (minDate == null ? void 0 : minDate.getFullYear()) === (visibleMonth == null ? void 0 : visibleMonth.getFullYear()),
       [minDate, visibleMonth, disabled]
     );
-    const getAllDaysInMonth = import_react16.default.useCallback((year, month) => {
+    const getAllDaysInMonth = import_react20.default.useCallback((year, month) => {
       const date = new Date(year, month, 1);
       const days2 = [];
       const firstDayOfMonth = (date.getDay() + 6) % 7;
@@ -3289,7 +3410,7 @@ var Calendar = import_react16.default.forwardRef(
       for (let i = 0; i < days2.length; i += 7) allDays.push(days2.slice(i, i + 7));
       return allDays;
     }, []);
-    const yearsBetween = import_react16.default.useMemo(() => {
+    const yearsBetween = import_react20.default.useMemo(() => {
       const minYear = minDate.getFullYear();
       const maxYear = maxDate.getFullYear();
       const currentYear = value instanceof Date && (value == null ? void 0 : value.getFullYear());
@@ -3306,7 +3427,7 @@ var Calendar = import_react16.default.forwardRef(
       }
       return years;
     }, [minDate, maxDate, value]);
-    const availableMonths = import_react16.default.useMemo(() => {
+    const availableMonths = import_react20.default.useMemo(() => {
       const currentYear = visibleMonth.getFullYear();
       const minYear = minDate.getFullYear();
       const maxYear = maxDate.getFullYear();
@@ -3319,18 +3440,18 @@ var Calendar = import_react16.default.forwardRef(
         return true;
       });
     }, [minDate, maxDate, visibleMonth]);
-    const availableYear = import_react16.default.useMemo(() => {
+    const availableYear = import_react20.default.useMemo(() => {
       const minYear = minDate.getFullYear();
       const maxYear = maxDate.getFullYear();
       return Array.from({ length: maxYear - minYear + 1 }, (_, i) => minYear + i);
     }, [minDate, maxDate, visibleMonth]);
-    const allDaysInMonth = import_react16.default.useMemo(() => {
+    const allDaysInMonth = import_react20.default.useMemo(() => {
       refsDays.current = [];
       const activeYear = visibleMonth.getFullYear();
       const activeMonth = visibleMonth.getMonth();
       return getAllDaysInMonth(activeYear, activeMonth);
     }, [visibleMonth]);
-    const handleClickNextPrevMonth = import_react16.default.useCallback(
+    const handleClickNextPrevMonth = import_react20.default.useCallback(
       (month) => {
         const nextMonth = new Date(visibleMonth.getFullYear(), visibleMonth.getMonth() + month, visibleMonth.getDate());
         setVisibleMonth(nextMonth);
@@ -3338,7 +3459,7 @@ var Calendar = import_react16.default.forwardRef(
       },
       [visibleMonth, onMonthChange]
     );
-    const handleMonthSelect = import_react16.default.useCallback(
+    const handleMonthSelect = import_react20.default.useCallback(
       (selectedMonth) => {
         const newDate = new Date(visibleMonth.getFullYear(), selectedMonth, visibleMonth.getDate());
         setVisibleMonth(newDate);
@@ -3346,7 +3467,7 @@ var Calendar = import_react16.default.forwardRef(
       },
       [visibleMonth, onMonthChange, minDate, maxDate]
     );
-    const handleYearSelect = import_react16.default.useCallback(
+    const handleYearSelect = import_react20.default.useCallback(
       (selectedYear) => {
         const newDate = new Date(selectedYear, visibleMonth.getMonth(), visibleMonth.getDate());
         if (newDate.getTime() < minDate.getTime() || newDate.getTime() > maxDate.getTime()) {
@@ -3364,7 +3485,7 @@ var Calendar = import_react16.default.forwardRef(
       },
       [visibleMonth, onMonthChange, minDate, maxDate]
     );
-    const navigateInDaysWithKeyboard = import_react16.default.useCallback(
+    const navigateInDaysWithKeyboard = import_react20.default.useCallback(
       (currentIndex, nextIndex) => {
         var _a;
         const nextRef = refsDays.current[currentIndex + nextIndex];
@@ -3395,7 +3516,7 @@ var Calendar = import_react16.default.forwardRef(
       },
       [refsDays.current, refDayFocused.current, isNextDisabled, isPrevDisabled]
     );
-    const handlePressEnterInDays = import_react16.default.useCallback(
+    const handlePressEnterInDays = import_react20.default.useCallback(
       (e) => {
         if (readOnly) return;
         const elm = e.target;
@@ -3414,7 +3535,7 @@ var Calendar = import_react16.default.forwardRef(
       },
       [refsDays.current, onChange, readOnly, activeDate, isRange]
     );
-    const onKeyDownDay = import_react16.default.useCallback(
+    const onKeyDownDay = import_react20.default.useCallback(
       (e, index, isDisabled) => {
         switch (e.key) {
           case "ArrowRight":
@@ -3433,7 +3554,7 @@ var Calendar = import_react16.default.forwardRef(
       },
       [handlePressEnterInDays, navigateInDaysWithKeyboard]
     );
-    import_react16.default.useEffect(() => {
+    import_react20.default.useEffect(() => {
       var _a, _b;
       if (refsDays.current) {
         const activeDateIndex = refsDays.current.findIndex((day) => day.tabIndex === 0);
@@ -3449,7 +3570,7 @@ var Calendar = import_react16.default.forwardRef(
         }
       }
     }, [refsDays.current, refDayFocused.current]);
-    import_react16.default.useEffect(() => {
+    import_react20.default.useEffect(() => {
       const prevActiveDate = activeDate;
       setActiveDate(value);
       if (value instanceof Date) return setVisibleMonth(value);
@@ -3458,7 +3579,7 @@ var Calendar = import_react16.default.forwardRef(
         if (isNewRangeSelection) return setVisibleMonth(value[0]);
       }
     }, [value]);
-    return /* @__PURE__ */ import_react16.default.createElement(
+    return /* @__PURE__ */ import_react20.default.createElement(
       "table",
       {
         "data-calendar-trilogy": "",
@@ -3469,7 +3590,7 @@ var Calendar = import_react16.default.forwardRef(
           isRange && activeDate.length === 1 && rangeInitClasses
         )
       },
-      /* @__PURE__ */ import_react16.default.createElement("thead", { className: calendarheaderClasses }, /* @__PURE__ */ import_react16.default.createElement("tr", null, /* @__PURE__ */ import_react16.default.createElement("th", { colSpan: 1, className: calendarPrevMonthClasses }, /* @__PURE__ */ import_react16.default.createElement(
+      /* @__PURE__ */ import_react20.default.createElement("thead", { className: calendarheaderClasses }, /* @__PURE__ */ import_react20.default.createElement("tr", null, /* @__PURE__ */ import_react20.default.createElement("th", { colSpan: 1, className: calendarPrevMonthClasses }, /* @__PURE__ */ import_react20.default.createElement(
         "button",
         {
           "data-focusable": !isPrevDisabled,
@@ -3481,8 +3602,8 @@ var Calendar = import_react16.default.forwardRef(
             if (el && refs) refs.current[1] = el;
           }
         },
-        /* @__PURE__ */ import_react16.default.createElement(Icon_default, { name: "tri-arrow-left" })
-      )), /* @__PURE__ */ import_react16.default.createElement("th", { colSpan: 5, className: calendarActiveMonthClasses }, /* @__PURE__ */ import_react16.default.createElement("div", { className: headerDropdownClasses }, /* @__PURE__ */ import_react16.default.createElement(
+        /* @__PURE__ */ import_react20.default.createElement(Icon_default, { name: "tri-arrow-left" })
+      )), /* @__PURE__ */ import_react20.default.createElement("th", { colSpan: 5, className: calendarActiveMonthClasses }, /* @__PURE__ */ import_react20.default.createElement("div", { className: headerDropdownClasses }, /* @__PURE__ */ import_react20.default.createElement(
         Select_default,
         {
           "data-focusable": "true",
@@ -3492,8 +3613,8 @@ var Calendar = import_react16.default.forwardRef(
             if (el && refs) refs.current[2] = el;
           }
         },
-        months.map((monthName, monthIndex) => /* @__PURE__ */ import_react16.default.createElement(option_default, { key: monthIndex, value: String(monthIndex), disabled: !availableMonths[monthIndex] }, monthName))
-      ), /* @__PURE__ */ import_react16.default.createElement(
+        months.map((monthName, monthIndex) => /* @__PURE__ */ import_react20.default.createElement(option_default, { key: monthIndex, value: String(monthIndex), disabled: !availableMonths[monthIndex] }, monthName))
+      ), /* @__PURE__ */ import_react20.default.createElement(
         Select_default,
         {
           "data-focusable": "true",
@@ -3503,7 +3624,7 @@ var Calendar = import_react16.default.forwardRef(
             if (el && refs) refs.current[3] = el;
           }
         },
-        yearsBetween.map((year) => /* @__PURE__ */ import_react16.default.createElement(
+        yearsBetween.map((year) => /* @__PURE__ */ import_react20.default.createElement(
           option_default,
           {
             key: year.value,
@@ -3512,7 +3633,7 @@ var Calendar = import_react16.default.forwardRef(
           },
           String(year.value)
         ))
-      ))), /* @__PURE__ */ import_react16.default.createElement("th", { colSpan: 1, className: calendarNextMonthClasses }, /* @__PURE__ */ import_react16.default.createElement(
+      ))), /* @__PURE__ */ import_react20.default.createElement("th", { colSpan: 1, className: calendarNextMonthClasses }, /* @__PURE__ */ import_react20.default.createElement(
         "button",
         {
           "data-focusable": !isNextDisabled,
@@ -3524,12 +3645,12 @@ var Calendar = import_react16.default.forwardRef(
             if (el && refs) refs.current[4] = el;
           }
         },
-        /* @__PURE__ */ import_react16.default.createElement(Icon_default, { name: "tri-arrow-right" })
-      ))), /* @__PURE__ */ import_react16.default.createElement("tr", null, days.map((day, index) => {
-        return /* @__PURE__ */ import_react16.default.createElement("td", { className: calendarDayLabelClasses, key: index }, /* @__PURE__ */ import_react16.default.createElement(Text_default, null, day.slice(0, 1)));
+        /* @__PURE__ */ import_react20.default.createElement(Icon_default, { name: "tri-arrow-right" })
+      ))), /* @__PURE__ */ import_react20.default.createElement("tr", null, days.map((day, index) => {
+        return /* @__PURE__ */ import_react20.default.createElement("td", { className: calendarDayLabelClasses, key: index }, /* @__PURE__ */ import_react20.default.createElement(Text_default, null, day.slice(0, 1)));
       }))),
-      /* @__PURE__ */ import_react16.default.createElement("tbody", null, allDaysInMonth.map((week, weekIndex) => {
-        return /* @__PURE__ */ import_react16.default.createElement(
+      /* @__PURE__ */ import_react20.default.createElement("tbody", null, allDaysInMonth.map((week, weekIndex) => {
+        return /* @__PURE__ */ import_react20.default.createElement(
           "tr",
           {
             key: `${weeksId}_${weekIndex}`,
@@ -3549,7 +3670,7 @@ var Calendar = import_react16.default.forwardRef(
               (date) => (date == null ? void 0 : date.getFullYear()) === (day == null ? void 0 : day.getFullYear()) && (date == null ? void 0 : date.getMonth()) === (day == null ? void 0 : day.getMonth()) && (date == null ? void 0 : date.getDate()) === (day == null ? void 0 : day.getDate())
             )) || false;
             const isInRange = isRange && activeDate[0] && dateEndHovered && day && day.getTime() >= activeDate[0].getTime() && day.getTime() < dateEndHovered.getTime() || isRange && activeDate[0] && activeDate[1] && day && day.getTime() >= activeDate[0].getTime() && day.getTime() < activeDate[1].getTime();
-            return /* @__PURE__ */ import_react16.default.createElement(
+            return /* @__PURE__ */ import_react20.default.createElement(
               "td",
               {
                 key: `${daysId}_${dayIndex}_${day == null ? void 0 : day.getTime()}`,
@@ -3564,7 +3685,7 @@ var Calendar = import_react16.default.forwardRef(
                   dayIndex === 6 && rondedRightClasses
                 )
               },
-              day && ind !== false && /* @__PURE__ */ import_react16.default.createElement(
+              day && ind !== false && /* @__PURE__ */ import_react20.default.createElement(
                 "button",
                 {
                   disabled: isDisabled,
@@ -3602,9 +3723,9 @@ var Calendar_default = Calendar;
 
 // components/card/Card.tsx
 var import_clsx30 = __toESM(require("clsx"));
-var import_react17 = __toESM(require("react"));
-var CardContext = (0, import_react17.createContext)({ horizontal: false });
-var Card = import_react17.default.forwardRef(
+var import_react21 = __toESM(require("react"));
+var CardContext = (0, import_react21.createContext)({ horizontal: false });
+var Card = import_react21.default.forwardRef(
   ({ className, id, flat, horizontal, floating, skeleton, onClick, reversed, href, fullheight, active, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     const hoverStyle = {
@@ -3625,7 +3746,7 @@ var Card = import_react17.default.forwardRef(
       )
     );
     if (href) {
-      return /* @__PURE__ */ import_react17.default.createElement(
+      return /* @__PURE__ */ import_react21.default.createElement(
         "a",
         {
           ref,
@@ -3640,7 +3761,7 @@ var Card = import_react17.default.forwardRef(
         }
       );
     }
-    return /* @__PURE__ */ import_react17.default.createElement(
+    return /* @__PURE__ */ import_react21.default.createElement(
       "div",
       {
         ref,
@@ -3658,12 +3779,12 @@ var Card_default = Card;
 
 // components/card/image/CardImage.tsx
 var import_clsx31 = __toESM(require("clsx"));
-var React39 = __toESM(require("react"));
-var CardImage = React39.forwardRef(
+var React43 = __toESM(require("react"));
+var CardImage = React43.forwardRef(
   ({ src, alt = "", className, id, size: size2, onClick, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     const classes = hashClass(styled, (0, import_clsx31.default)("card-image", size2 && is(`${size2}`), className));
-    return /* @__PURE__ */ React39.createElement(
+    return /* @__PURE__ */ React43.createElement(
       "div",
       {
         ref,
@@ -3674,7 +3795,7 @@ var CardImage = React39.forwardRef(
         },
         className: classes
       },
-      /* @__PURE__ */ React39.createElement("figure", { className: hashClass(styled, (0, import_clsx31.default)("image")), ...others }, /* @__PURE__ */ React39.createElement("img", { ...{ src: typeof src === "string" ? src : "" }, alt }))
+      /* @__PURE__ */ React43.createElement("figure", { className: hashClass(styled, (0, import_clsx31.default)("image")), ...others }, /* @__PURE__ */ React43.createElement("img", { ...{ src: typeof src === "string" ? src : "" }, alt }))
     );
   }
 );
@@ -3686,11 +3807,11 @@ var image_default = CardImage_default;
 
 // components/card/content/CardContent.tsx
 var import_clsx32 = __toESM(require("clsx"));
-var React40 = __toESM(require("react"));
-var CardContent = React40.forwardRef(
+var React44 = __toESM(require("react"));
+var CardContent = React44.forwardRef(
   ({ children, className, id, ...others }, ref) => {
     const { styled } = useTrilogyContext();
-    return /* @__PURE__ */ React40.createElement("div", { ref, id, className: hashClass(styled, (0, import_clsx32.default)("card-content", className)), ...others }, children);
+    return /* @__PURE__ */ React44.createElement("div", { ref, id, className: hashClass(styled, (0, import_clsx32.default)("card-content", className)), ...others }, children);
   }
 );
 CardContent.displayName = "CardContent" /* CardContent */;
@@ -3710,12 +3831,12 @@ var CardImageSize = /* @__PURE__ */ ((CardImageSize2) => {
 
 // components/checkbox/Checkbox.tsx
 var import_clsx33 = __toESM(require("clsx"));
-var import_react18 = __toESM(require("react"));
-var Checkbox = import_react18.default.forwardRef(
-  ({ checked, className, disabled, readonly, id = import_react18.default.useId(), label, onChange, name, value, children, required, ...others }, ref) => {
+var import_react22 = __toESM(require("react"));
+var Checkbox = import_react22.default.forwardRef(
+  ({ checked, className, disabled, readonly, id = import_react22.default.useId(), label, onChange, name, value, children, required, ...others }, ref) => {
     const { styled } = useTrilogyContext();
-    const [_checked, setChecked] = (0, import_react18.useState)(checked || false);
-    (0, import_react18.useEffect)(() => {
+    const [_checked, setChecked] = (0, import_react22.useState)(checked || false);
+    (0, import_react22.useEffect)(() => {
       if (!readonly) {
         setChecked(checked || false);
       }
@@ -3729,7 +3850,7 @@ var Checkbox = import_react18.default.forwardRef(
         checkboxChecked: target.checked
       }) : setChecked(target.checked);
     };
-    return /* @__PURE__ */ import_react18.default.createElement("div", { ref, className: hashClass(styled, (0, import_clsx33.default)("checkbox", className)) }, /* @__PURE__ */ import_react18.default.createElement(
+    return /* @__PURE__ */ import_react22.default.createElement("div", { ref, className: hashClass(styled, (0, import_clsx33.default)("checkbox", className)) }, /* @__PURE__ */ import_react22.default.createElement(
       "input",
       {
         type: "checkbox",
@@ -3743,26 +3864,26 @@ var Checkbox = import_react18.default.forwardRef(
         onChange: handleOnChange,
         ...others
       }
-    ), /* @__PURE__ */ import_react18.default.createElement("label", { htmlFor: id, className: hashClass(styled, (0, import_clsx33.default)("checkbox-label")) }, label != null ? label : children));
+    ), /* @__PURE__ */ import_react22.default.createElement("label", { htmlFor: id, className: hashClass(styled, (0, import_clsx33.default)("checkbox-label")) }, label != null ? label : children));
   }
 );
 Checkbox.displayName = "Checkbox" /* Checkbox */;
 var Checkbox_default = Checkbox;
 
 // helpers/require/index.ts
-var import_react19 = __toESM(require("react"));
-var isRequiredChild = (children) => import_react19.default.Children.toArray(children).some(
-  (child) => import_react19.default.isValidElement(child) && child.props.required
+var import_react23 = __toESM(require("react"));
+var isRequiredChild = (children) => import_react23.default.Children.toArray(children).some(
+  (child) => import_react23.default.isValidElement(child) && child.props.required
 );
 
 // components/checkbox/list/CheckboxList.tsx
 var import_clsx34 = __toESM(require("clsx"));
-var React43 = __toESM(require("react"));
-var CheckboxList = React43.forwardRef(
+var React47 = __toESM(require("react"));
+var CheckboxList = React47.forwardRef(
   ({ className, id, align, horizontalMobile, verticalDesktop, accessibilityLabelledBy, children, label, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     const groupLabelClasses = hashClass(styled, "group-label");
-    return /* @__PURE__ */ React43.createElement(React43.Fragment, null, label && /* @__PURE__ */ React43.createElement("p", { className: groupLabelClasses }, label, isRequiredChild(children) && /* @__PURE__ */ React43.createElement(Text_default, { markup: "span" /* SPAN */, typo: "has-text-error" /* TEXT_ERROR */ }, " ", "*")), /* @__PURE__ */ React43.createElement(
+    return /* @__PURE__ */ React47.createElement(React47.Fragment, null, label && /* @__PURE__ */ React47.createElement("p", { className: groupLabelClasses }, label, isRequiredChild(children) && /* @__PURE__ */ React47.createElement(Text_default, { markup: "span" /* SPAN */, typo: "has-text-error" /* TEXT_ERROR */ }, " ", "*")), /* @__PURE__ */ React47.createElement(
       "div",
       {
         ref,
@@ -3791,8 +3912,8 @@ var CheckboxList_default = CheckboxList;
 
 // components/checkbox/tiles/CheckboxTiles.tsx
 var import_clsx35 = __toESM(require("clsx"));
-var React44 = __toESM(require("react"));
-var CheckboxTiles = React44.forwardRef(
+var React48 = __toESM(require("react"));
+var CheckboxTiles = React48.forwardRef(
   ({ id, className, children, align, verticalAlign, accessibilityLabelledBy, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     let alignClass = null;
@@ -3803,7 +3924,7 @@ var CheckboxTiles = React44.forwardRef(
     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__ */ React44.createElement(
+    return /* @__PURE__ */ React48.createElement(
       "div",
       {
         ref,
@@ -3826,8 +3947,8 @@ var CheckboxTiles_default = CheckboxTiles;
 
 // components/sticker/Sticker.tsx
 var import_clsx36 = __toESM(require("clsx"));
-var import_react20 = __toESM(require("react"));
-var Sticker = import_react20.default.forwardRef(({
+var import_react24 = __toESM(require("react"));
+var Sticker = import_react24.default.forwardRef(({
   className,
   id,
   variant,
@@ -3850,22 +3971,22 @@ var Sticker = import_react20.default.forwardRef(({
       is("vcentered")
     )
   );
-  return /* @__PURE__ */ import_react20.default.createElement("p", { ref, id, className: classes, "aria-label": accessibilityLabel, ...others }, iconName && /* @__PURE__ */ import_react20.default.createElement(Icon_default, { size: small ? "smaller" /* SMALLER */ : "small" /* SMALL */, name: iconName }), label);
+  return /* @__PURE__ */ import_react24.default.createElement("p", { ref, id, className: classes, "aria-label": accessibilityLabel, ...others }, iconName && /* @__PURE__ */ import_react24.default.createElement(Icon_default, { size: small ? "smaller" /* SMALLER */ : "small" /* SMALL */, name: iconName }), label);
 });
 Sticker.displayName = "Sticker" /* Sticker */;
 var Sticker_default = Sticker;
 
 // components/checkbox/tiles/tile/CheckboxTile.tsx
 var import_clsx37 = __toESM(require("clsx"));
-var React46 = __toESM(require("react"));
-var import_react21 = require("react");
-var CheckboxTile = React46.forwardRef(
+var React50 = __toESM(require("react"));
+var import_react25 = require("react");
+var CheckboxTile = React50.forwardRef(
   ({
     checked,
     className,
     disabled,
     readonly,
-    id = React46.useId(),
+    id = React50.useId(),
     label,
     onChange,
     name,
@@ -3879,13 +4000,13 @@ var CheckboxTile = React46.forwardRef(
     ...others
   }, ref) => {
     const { styled } = useTrilogyContext();
-    const [_checked, setChecked] = (0, import_react21.useState)(checked || false);
-    (0, import_react21.useEffect)(() => {
+    const [_checked, setChecked] = (0, import_react25.useState)(checked || false);
+    (0, import_react25.useEffect)(() => {
       if (!readonly) {
         setChecked(checked || false);
       }
     }, [checked, readonly]);
-    return /* @__PURE__ */ React46.createElement("div", { ref, className: hashClass(styled, (0, import_clsx37.default)("checkbox-tile", horizontal && is("horizontal"), className)) }, /* @__PURE__ */ React46.createElement(
+    return /* @__PURE__ */ React50.createElement("div", { ref, className: hashClass(styled, (0, import_clsx37.default)("checkbox-tile", horizontal && is("horizontal"), className)) }, /* @__PURE__ */ React50.createElement(
       "input",
       {
         type: "checkbox",
@@ -3899,7 +4020,7 @@ var CheckboxTile = React46.forwardRef(
         onChange: (e) => onChange ? onChange : setChecked(e.target.checked),
         ...others
       }
-    ), /* @__PURE__ */ React46.createElement("label", { htmlFor: id, className: hashClass(styled, (0, import_clsx37.default)("checkbox-label")) }, icon && /* @__PURE__ */ React46.createElement(Icon_default, { name: icon, size: "medium" /* MEDIUM */ }), horizontal ? /* @__PURE__ */ React46.createElement("span", null, /* @__PURE__ */ React46.createElement("span", { className: hashClass(styled, (0, import_clsx37.default)("checkbox-title")) }, label), description && /* @__PURE__ */ React46.createElement("span", { className: hashClass(styled, (0, import_clsx37.default)("checkbox-description")) }, description)) : /* @__PURE__ */ React46.createElement(React46.Fragment, null, /* @__PURE__ */ React46.createElement("span", { className: hashClass(styled, (0, import_clsx37.default)("checkbox-title")) }, label), description && /* @__PURE__ */ React46.createElement("span", { className: hashClass(styled, (0, import_clsx37.default)("checkbox-description")) }, description))), sticker && /* @__PURE__ */ React46.createElement(Sticker_default, { label: sticker, variant: stickerVariant, className: "checkbox-sticker", small: true }));
+    ), /* @__PURE__ */ React50.createElement("label", { htmlFor: id, className: hashClass(styled, (0, import_clsx37.default)("checkbox-label")) }, icon && /* @__PURE__ */ React50.createElement(Icon_default, { name: icon, size: "medium" /* MEDIUM */ }), horizontal ? /* @__PURE__ */ React50.createElement("span", null, /* @__PURE__ */ React50.createElement("span", { className: hashClass(styled, (0, import_clsx37.default)("checkbox-title")) }, label), description && /* @__PURE__ */ React50.createElement("span", { className: hashClass(styled, (0, import_clsx37.default)("checkbox-description")) }, description)) : /* @__PURE__ */ React50.createElement(React50.Fragment, null, /* @__PURE__ */ React50.createElement("span", { className: hashClass(styled, (0, import_clsx37.default)("checkbox-title")) }, label), description && /* @__PURE__ */ React50.createElement("span", { className: hashClass(styled, (0, import_clsx37.default)("checkbox-description")) }, description))), sticker && /* @__PURE__ */ React50.createElement(Sticker_default, { label: sticker, variant: stickerVariant, className: "checkbox-sticker", small: true }));
   }
 );
 CheckboxTile.displayName = "CheckboxTiles" /* CheckboxTiles */;
@@ -3907,12 +4028,12 @@ var CheckboxTile_default = CheckboxTile;
 
 // components/chips/Chips.tsx
 var import_clsx38 = __toESM(require("clsx"));
-var import_react22 = __toESM(require("react"));
-var Chips = import_react22.default.forwardRef(
+var import_react26 = __toESM(require("react"));
+var Chips = import_react26.default.forwardRef(
   ({ className, onClick, children, active, disabled, id, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     const classes = hashClass(styled, (0, import_clsx38.default)("chips", active && is("active"), className));
-    return /* @__PURE__ */ import_react22.default.createElement(
+    return /* @__PURE__ */ import_react26.default.createElement(
       "button",
       {
         ref,
@@ -3935,15 +4056,15 @@ var Chips_default = Chips;
 
 // components/chips/list/ChipsList.tsx
 var import_clsx39 = __toESM(require("clsx"));
-var React48 = __toESM(require("react"));
-var ChipsList = React48.forwardRef(
+var React52 = __toESM(require("react"));
+var ChipsList = React52.forwardRef(
   ({ className, id, children, multiple, scrollable, accessibilityLabelledBy, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     const classes = hashClass(
       styled,
       (0, import_clsx39.default)("chips-list", multiple && is("multiple"), scrollable && is("scrollable"), className)
     );
-    return /* @__PURE__ */ React48.createElement("div", { ref, id, role: "group", "aria-labelledby": accessibilityLabelledBy, className: classes, ...others }, children);
+    return /* @__PURE__ */ React52.createElement("div", { ref, id, role: "group", "aria-labelledby": accessibilityLabelledBy, className: classes, ...others }, children);
   }
 );
 ChipsList.displayName = "ChipsList" /* ChipsList */;
@@ -3951,8 +4072,8 @@ var ChipsList_default = ChipsList;
 
 // components/columns/Columns.tsx
 var import_clsx40 = __toESM(require("clsx"));
-var import_react23 = __toESM(require("react"));
-var Columns = import_react23.default.forwardRef(
+var import_react27 = __toESM(require("react"));
+var Columns = import_react27.default.forwardRef(
   ({
     className,
     id,
@@ -3985,7 +4106,7 @@ var Columns = import_react23.default.forwardRef(
         className
       )
     );
-    return /* @__PURE__ */ import_react23.default.createElement("div", { ref, id, className: classes, ...others });
+    return /* @__PURE__ */ import_react27.default.createElement("div", { ref, id, className: classes, ...others });
   }
 );
 Columns.displayName = "Columns" /* Columns */;
@@ -3993,8 +4114,8 @@ var Columns_default = Columns;
 
 // components/columns/column/Column.tsx
 var import_clsx41 = __toESM(require("clsx"));
-var import_react24 = __toESM(require("react"));
-var Column = import_react24.default.forwardRef(
+var import_react28 = __toESM(require("react"));
+var Column = import_react28.default.forwardRef(
   ({
     className,
     id,
@@ -4040,7 +4161,7 @@ var Column = import_react24.default.forwardRef(
         className
       )
     );
-    return /* @__PURE__ */ import_react24.default.createElement("div", { ref, id, className: classes, ...others });
+    return /* @__PURE__ */ import_react28.default.createElement("div", { ref, id, className: classes, ...others });
   }
 );
 Column.displayName = "Column" /* Column */;
@@ -4068,12 +4189,12 @@ var ColumnsGapValue = [0, 4, 8, 12, 16, 24, 32, 40, 48, 54, 62];
 
 // components/container/Container.tsx
 var import_clsx42 = __toESM(require("clsx"));
-var import_react25 = __toESM(require("react"));
-var Container = import_react25.default.forwardRef(
+var import_react29 = __toESM(require("react"));
+var Container = import_react29.default.forwardRef(
   ({ className, id, medium, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     const classes = hashClass(styled, (0, import_clsx42.default)("container", medium && is("medium"), className));
-    return /* @__PURE__ */ import_react25.default.createElement("div", { ref, id, className: classes, ...others });
+    return /* @__PURE__ */ import_react29.default.createElement("div", { ref, id, className: classes, ...others });
   }
 );
 Container.displayName = "Container" /* Container */;
@@ -4081,7 +4202,7 @@ var Container_default = Container;
 
 // components/countdown/Countdown.tsx
 var import_clsx43 = __toESM(require("clsx"));
-var import_react26 = __toESM(require("react"));
+var import_react30 = __toESM(require("react"));
 
 // components/countdown/CountdownEnum.ts
 var CountdownFormat = /* @__PURE__ */ ((CountdownFormat2) => {
@@ -4110,14 +4231,14 @@ var calculateTimer = (timeDifference) => {
   const days2 = Math.floor(timeDifference / (1e3 * 60 * 60 * 24));
   return { days: days2, hours, minutes, seconds };
 };
-var Countdown = import_react26.default.forwardRef(
+var Countdown = import_react30.default.forwardRef(
   ({ deadline, className, id, format, event, small, inverted, ...others }, ref) => {
     const { styled } = useTrilogyContext();
-    const [timeLeft] = (0, import_react26.useState)(deadline);
+    const [timeLeft] = (0, import_react30.useState)(deadline);
     const initialTimeDifference = deadline.getTime() - (/* @__PURE__ */ new Date()).getTime();
     const initialTimer = calculateTimer(initialTimeDifference);
-    const [timer, setTimer] = (0, import_react26.useState)(initialTimer);
-    const [init, setInit] = (0, import_react26.useState)(false);
+    const [timer, setTimer] = (0, import_react30.useState)(initialTimer);
+    const [init, setInit] = (0, import_react30.useState)(false);
     const show = [timer.days != 0, timer.hours != 0, timer.minutes != 0, timer.seconds != 0];
     const parsedFormat = format == null ? void 0 : format.split("-");
     const classes = hashClass(styled, (0, import_clsx43.default)("countdown", inverted && is("inverted"), small && is("small"), className));
@@ -4146,7 +4267,7 @@ var Countdown = import_react26.default.forwardRef(
       show[2 /* MIN */] = true;
       show[3 /* SEC */] = true;
     }
-    (0, import_react26.useEffect)(() => {
+    (0, import_react30.useEffect)(() => {
       setInterval(() => {
         const difference = timeLeft.getTime() - (/* @__PURE__ */ new Date()).getTime();
         if (difference > 0) {
@@ -4188,23 +4309,23 @@ var Countdown = import_react26.default.forwardRef(
         setInit(true);
       }, 1e3);
     }, [timeLeft, format]);
-    (0, import_react26.useEffect)(() => {
+    (0, import_react30.useEffect)(() => {
       if (timer.days + timer.hours + timer.minutes + timer.seconds === 0 && event && init) {
         event(null);
         setInit(false);
       }
     }, [timer, event, init]);
-    return /* @__PURE__ */ import_react26.default.createElement("ul", { ref, id, className: classes, ...others }, (show[0 /* DAY */] || timer.days != 0) && /* @__PURE__ */ import_react26.default.createElement("li", { className: hashClass(styled, (0, import_clsx43.default)("count")) }, /* @__PURE__ */ import_react26.default.createElement("span", { className: hashClass(styled, (0, import_clsx43.default)("value")) }, timer.days ? timer.days : 0), "j"), (show[1 /* HOUR */] || timer.hours != 0) && /* @__PURE__ */ import_react26.default.createElement("li", { className: hashClass(styled, (0, import_clsx43.default)("count")) }, /* @__PURE__ */ import_react26.default.createElement("span", { className: hashClass(styled, (0, import_clsx43.default)("value")) }, timer.hours ? timer.hours : 0), "h"), (show[2 /* MIN */] || timer.minutes != 0) && /* @__PURE__ */ import_react26.default.createElement("li", { className: hashClass(styled, (0, import_clsx43.default)("count")) }, /* @__PURE__ */ import_react26.default.createElement("span", { className: hashClass(styled, (0, import_clsx43.default)("value")) }, timer.minutes ? timer.minutes : 0), "m"), (show[3 /* SEC */] || timer.seconds != 0) && /* @__PURE__ */ import_react26.default.createElement("li", { className: hashClass(styled, (0, import_clsx43.default)("count")) }, /* @__PURE__ */ import_react26.default.createElement("span", { className: hashClass(styled, (0, import_clsx43.default)("value")) }, timer.seconds ? timer.seconds : 0), "s"));
+    return /* @__PURE__ */ import_react30.default.createElement("ul", { ref, id, className: classes, ...others }, (show[0 /* DAY */] || timer.days != 0) && /* @__PURE__ */ import_react30.default.createElement("li", { className: hashClass(styled, (0, import_clsx43.default)("count")) }, /* @__PURE__ */ import_react30.default.createElement("span", { className: hashClass(styled, (0, import_clsx43.default)("value")) }, timer.days ? timer.days : 0), "j"), (show[1 /* HOUR */] || timer.hours != 0) && /* @__PURE__ */ import_react30.default.createElement("li", { className: hashClass(styled, (0, import_clsx43.default)("count")) }, /* @__PURE__ */ import_react30.default.createElement("span", { className: hashClass(styled, (0, import_clsx43.default)("value")) }, timer.hours ? timer.hours : 0), "h"), (show[2 /* MIN */] || timer.minutes != 0) && /* @__PURE__ */ import_react30.default.createElement("li", { className: hashClass(styled, (0, import_clsx43.default)("count")) }, /* @__PURE__ */ import_react30.default.createElement("span", { className: hashClass(styled, (0, import_clsx43.default)("value")) }, timer.minutes ? timer.minutes : 0), "m"), (show[3 /* SEC */] || timer.seconds != 0) && /* @__PURE__ */ import_react30.default.createElement("li", { className: hashClass(styled, (0, import_clsx43.default)("count")) }, /* @__PURE__ */ import_react30.default.createElement("span", { className: hashClass(styled, (0, import_clsx43.default)("value")) }, timer.seconds ? timer.seconds : 0), "s"));
   }
 );
 Countdown.displayName = "Countdown" /* Countdown */;
 var Countdown_default = Countdown;
 
 // helpers/clickOutside/index.ts
-var import_react27 = require("react");
+var import_react31 = require("react");
 var useClickOutside = (ref, callback) => {
-  const stableCallback = (0, import_react27.useCallback)(callback, [callback]);
-  (0, import_react27.useEffect)(() => {
+  const stableCallback = (0, import_react31.useCallback)(callback, [callback]);
+  (0, import_react31.useEffect)(() => {
     const handleClickOutside = (event) => {
       if (ref.current && !ref.current.contains(event.target)) {
         stableCallback();
@@ -4219,14 +4340,14 @@ var useClickOutside = (ref, callback) => {
 
 // components/datepicker/DatePicker.tsx
 var import_clsx47 = __toESM(require("clsx"));
-var import_react29 = __toESM(require("react"));
+var import_react33 = __toESM(require("react"));
 var import_react_dom2 = __toESM(require("react-dom"));
 
 // components/modal/Modal.tsx
 var import_locales4 = require("@trilogy-ds/locales");
 var import_clsx44 = __toESM(require("clsx"));
-var import_react28 = __toESM(require("react"));
-var Modal = import_react28.default.forwardRef(
+var import_react32 = __toESM(require("react"));
+var Modal = import_react32.default.forwardRef(
   ({
     children,
     className,
@@ -4242,15 +4363,15 @@ var Modal = import_react28.default.forwardRef(
     title,
     ...others
   }, ref) => {
-    const modalContentRef = (0, import_react28.useRef)(null);
-    const [display, setDisplay] = (0, import_react28.useState)(active || false);
+    const modalContentRef = (0, import_react32.useRef)(null);
+    const [display, setDisplay] = (0, import_react32.useState)(active || false);
     const { styled } = useTrilogyContext();
-    const refBtnModal = (0, import_react28.useRef)(null);
-    const refModal = (0, import_react28.useRef)(null);
-    const modalGeneratedId = (0, import_react28.useId)();
-    const focusableElementsRef = (0, import_react28.useRef)(null);
-    const currentFocusIndexRef = (0, import_react28.useRef)(0);
-    const handleClose = import_react28.default.useCallback(
+    const refBtnModal = (0, import_react32.useRef)(null);
+    const refModal = (0, import_react32.useRef)(null);
+    const modalGeneratedId = (0, import_react32.useId)();
+    const focusableElementsRef = (0, import_react32.useRef)(null);
+    const currentFocusIndexRef = (0, import_react32.useRef)(0);
+    const handleClose = import_react32.default.useCallback(
       (onCloseFunc, e) => {
         if (!unClosable) {
           setDisplay(false);
@@ -4264,7 +4385,7 @@ var Modal = import_react28.default.forwardRef(
       styled,
       (0, import_clsx44.default)("modal", display && is("active"), size2 && is(size2), panel && is("panel"), className)
     );
-    const onKeyDown = (0, import_react28.useCallback)(
+    const onKeyDown = (0, import_react32.useCallback)(
       (e) => {
         if (display && e.key === "Tab") {
           e.preventDefault();
@@ -4286,7 +4407,7 @@ var Modal = import_react28.default.forwardRef(
       },
       [display, focusableElementsRef, currentFocusIndexRef, refBtnModal, onClose]
     );
-    (0, import_react28.useEffect)(() => {
+    (0, import_react32.useEffect)(() => {
       setDisplay((prev) => {
         if (prev) {
           refBtnModal.current && refBtnModal.current.focus();
@@ -4295,17 +4416,17 @@ var Modal = import_react28.default.forwardRef(
         return active || false;
       });
     }, [active, currentFocusIndexRef, refBtnModal]);
-    (0, import_react28.useEffect)(() => {
+    (0, import_react32.useEffect)(() => {
       !hideCloseButton && display && focusableElementsRef.current && focusableElementsRef.current[0].focus();
     }, [hideCloseButton, display, focusableElementsRef]);
-    (0, import_react28.useEffect)(() => {
+    (0, import_react32.useEffect)(() => {
       if (modalContentRef.current) {
         focusableElementsRef.current = modalContentRef.current.querySelectorAll(
           'button:not(:disabled), input:not(:disabled), a, select:not(:disabled), textarea:not(:disabled), details:not([aria-disabled="true"]) > summary'
         );
       }
     }, [modalContentRef, focusableElementsRef]);
-    return /* @__PURE__ */ import_react28.default.createElement("div", { onKeyDown, ref: refModal }, trigger && import_react28.default.cloneElement(trigger, { ref: refBtnModal, "aria-haspopup": "dialog" }), /* @__PURE__ */ import_react28.default.createElement(
+    return /* @__PURE__ */ import_react32.default.createElement("div", { onKeyDown, ref: refModal }, trigger && import_react32.default.cloneElement(trigger, { ref: refBtnModal, "aria-haspopup": "dialog" }), /* @__PURE__ */ import_react32.default.createElement(
       "div",
       {
         ref,
@@ -4322,7 +4443,7 @@ var Modal = import_react28.default.forwardRef(
         },
         ...others
       },
-      /* @__PURE__ */ import_react28.default.createElement("div", { ref: modalContentRef, className: hashClass(styled, (0, import_clsx44.default)("modal-content")) }, /* @__PURE__ */ import_react28.default.createElement("div", { className: hashClass(styled, (0, import_clsx44.default)("modal-header")) }, !hideCloseButton && !unClosable && /* @__PURE__ */ import_react28.default.createElement(
+      /* @__PURE__ */ import_react32.default.createElement("div", { ref: modalContentRef, className: hashClass(styled, (0, import_clsx44.default)("modal-content")) }, /* @__PURE__ */ import_react32.default.createElement("div", { className: hashClass(styled, (0, import_clsx44.default)("modal-header")) }, !hideCloseButton && !unClosable && /* @__PURE__ */ import_react32.default.createElement(
         "button",
         {
           onClick: (e) => {
@@ -4331,8 +4452,8 @@ var Modal = import_react28.default.forwardRef(
           className: hashClass(styled, (0, import_clsx44.default)("modal-close", is("large"))),
           type: "button" /* BUTTON */
         },
-        /* @__PURE__ */ import_react28.default.createElement("span", { className: hashClass(styled, (0, import_clsx44.default)("sr-only")) }, import_locales4.modalLocale.accessibilityLabelButtonClose)
-      ), /* @__PURE__ */ import_react28.default.createElement(Title_default, { id: modalGeneratedId, level: 3 /* THREE */, markup: "h1" /* H1 */ }, title)), children && children)
+        /* @__PURE__ */ import_react32.default.createElement("span", { className: hashClass(styled, (0, import_clsx44.default)("sr-only")) }, import_locales4.modalLocale.accessibilityLabelButtonClose)
+      ), /* @__PURE__ */ import_react32.default.createElement(Title_default, { id: modalGeneratedId, level: 3 /* THREE */, markup: "h1" /* H1 */ }, title)), children && children)
     ));
   }
 );
@@ -4341,20 +4462,20 @@ var Modal_default = Modal;
 
 // components/modal/footer/ModalFooter.tsx
 var import_clsx45 = __toESM(require("clsx"));
-var React54 = __toESM(require("react"));
-var ModalFooter = React54.forwardRef(({ children, className, id }, ref) => {
+var React58 = __toESM(require("react"));
+var ModalFooter = React58.forwardRef(({ children, className, id }, ref) => {
   const { styled } = useTrilogyContext();
-  return /* @__PURE__ */ React54.createElement("div", { ref, "data-modal-footer": "", id, className: hashClass(styled, (0, import_clsx45.default)("modal-footer", className)) }, children);
+  return /* @__PURE__ */ React58.createElement("div", { ref, "data-modal-footer": "", id, className: hashClass(styled, (0, import_clsx45.default)("modal-footer", className)) }, children);
 });
 ModalFooter.displayName = "ModalFooter" /* ModalFooter */;
 var ModalFooter_default = ModalFooter;
 
 // components/modal/body/ModalBody.tsx
 var import_clsx46 = __toESM(require("clsx"));
-var React55 = __toESM(require("react"));
-var ModalBody = React55.forwardRef(({ children, className, id }, ref) => {
+var React59 = __toESM(require("react"));
+var ModalBody = React59.forwardRef(({ children, className, id }, ref) => {
   const { styled } = useTrilogyContext();
-  return /* @__PURE__ */ React55.createElement("div", { ref, id, className: hashClass(styled, (0, import_clsx46.default)("modal-body", className)) }, children);
+  return /* @__PURE__ */ React59.createElement("div", { ref, id, className: hashClass(styled, (0, import_clsx46.default)("modal-body", className)) }, children);
 });
 ModalBody.displayName = "ModalBody" /* ModalBody */;
 var ModalBody_default = ModalBody;
@@ -4398,7 +4519,7 @@ var getFirstDayFocusable = () => {
   const firstOfMonth = calendar.querySelector(`[data-calendar-trilogy] tbody button:not(:disabled)`);
   return (_a = activeDate != null ? activeDate : today) != null ? _a : firstOfMonth;
 };
-var DatePicker = (0, import_react29.forwardRef)(
+var DatePicker = (0, import_react33.forwardRef)(
   ({
     onChange,
     value,
@@ -4412,29 +4533,29 @@ var DatePicker = (0, import_react29.forwardRef)(
     status,
     disabled,
     disabledDates,
-    id = import_react29.default.useId(),
+    id = import_react33.default.useId(),
     testId,
     name,
     ...others
   }, ref) => {
     const { styled } = useTrilogyContext();
     const { "data-cy": dataCy, ...otherProps } = others;
-    const [day, setDay] = (0, import_react29.useState)("jj");
-    const [month, setMonth] = (0, import_react29.useState)("mm");
-    const [year, setYear] = (0, import_react29.useState)("aaaa");
-    const [isOpenCalendar, setIsOpenCalendar] = (0, import_react29.useState)(false);
-    const [canContinueTyping, setCanContinueTyping] = (0, import_react29.useState)(false);
-    const [focused, setIsFocused] = (0, import_react29.useState)(false);
-    const [isMobile2, setIsMobile] = (0, import_react29.useState)(false);
-    const [portalPosition, setPortalPosition] = (0, import_react29.useState)({ top: 0, left: 0, width: 0 });
-    const refsSegment = (0, import_react29.useRef)([]);
-    const refsFocusable = (0, import_react29.useRef)([]);
-    const refContainer = (0, import_react29.useRef)(null);
-    const refCalendar = (0, import_react29.useRef)(null);
-    const currentFocusIndexRef = (0, import_react29.useRef)(0);
-    const segmentFocused = (0, import_react29.useRef)(null);
-    const refIcon = (0, import_react29.useRef)(null);
-    const refInput = (0, import_react29.useRef)(null);
+    const [day, setDay] = (0, import_react33.useState)("jj");
+    const [month, setMonth] = (0, import_react33.useState)("mm");
+    const [year, setYear] = (0, import_react33.useState)("aaaa");
+    const [isOpenCalendar, setIsOpenCalendar] = (0, import_react33.useState)(false);
+    const [canContinueTyping, setCanContinueTyping] = (0, import_react33.useState)(false);
+    const [focused, setIsFocused] = (0, import_react33.useState)(false);
+    const [isMobile2, setIsMobile] = (0, import_react33.useState)(false);
+    const [portalPosition, setPortalPosition] = (0, import_react33.useState)({ top: 0, left: 0, width: 0 });
+    const refsSegment = (0, import_react33.useRef)([]);
+    const refsFocusable = (0, import_react33.useRef)([]);
+    const refContainer = (0, import_react33.useRef)(null);
+    const refCalendar = (0, import_react33.useRef)(null);
+    const currentFocusIndexRef = (0, import_react33.useRef)(0);
+    const segmentFocused = (0, import_react33.useRef)(null);
+    const refIcon = (0, import_react33.useRef)(null);
+    const refInput = (0, import_react33.useRef)(null);
     const calendarContainerClasses = hashClass(styled, (0, import_clsx47.default)("date-picker-calendar"));
     const datePickerClasses = hashClass(styled, (0, import_clsx47.default)("field date-picker", className));
     const controlClasses = hashClass(styled, (0, import_clsx47.default)("control", has("icons-right")));
@@ -4443,7 +4564,7 @@ var DatePicker = (0, import_react29.forwardRef)(
     const helpClasses = (0, import_clsx47.default)("help", status && is(status));
     const inputLabelClasses = hashClass(styled, "input-label");
     const inputHidden = hashClass(styled, "input-hidden");
-    (0, import_react29.useImperativeHandle)(ref, () => refContainer.current);
+    (0, import_react33.useImperativeHandle)(ref, () => refContainer.current);
     useClickOutside(refCalendar, () => {
       setTimeout(() => {
         setIsOpenCalendar(false);
@@ -4454,7 +4575,7 @@ var DatePicker = (0, import_react29.forwardRef)(
         setIsFocused(false);
       }, 0);
     });
-    const segments = (0, import_react29.useMemo)(
+    const segments = (0, import_react33.useMemo)(
       () => ({
         day: {
           sensitiveValue: 3,
@@ -4486,14 +4607,14 @@ var DatePicker = (0, import_react29.forwardRef)(
       }),
       [day, month, year]
     );
-    const calendarValue = (0, import_react29.useMemo)(() => {
+    const calendarValue = (0, import_react33.useMemo)(() => {
       if (parseInt(day) && parseInt(month) && parseInt(year)) {
         const newDate = /* @__PURE__ */ new Date(`${year}-${month}-${day}`);
         const isValidDate = checkIsValidDate(newDate, year, month, day);
         if (isValidDate) return newDate;
       }
     }, [day, month, year]);
-    const calculatePortalPosition = (0, import_react29.useCallback)(() => {
+    const calculatePortalPosition = (0, import_react33.useCallback)(() => {
       if (!refInput.current) return;
       const rect = refInput.current.getBoundingClientRect();
       const { top, bottom, left, width } = rect;
@@ -4511,7 +4632,7 @@ var DatePicker = (0, import_react29.forwardRef)(
         width
       });
     }, []);
-    const handleKeyPress = (0, import_react29.useCallback)(
+    const handleKeyPress = (0, import_react33.useCallback)(
       ({ event, type }) => {
         if (disabled) return;
         const key = event.data;
@@ -4556,7 +4677,7 @@ var DatePicker = (0, import_react29.forwardRef)(
       const isValidDate = parseInt(day) && parseInt(month) && parseInt(year);
       return !isValidDate ? "" : `${year}-${month}-${day}`;
     };
-    const handleKeyDownDay = (0, import_react29.useCallback)(
+    const handleKeyDownDay = (0, import_react33.useCallback)(
       (e, type) => {
         if (disabled) return;
         const { segmentSetter, label: label2, maxValue, initValue, segmentPosition, segment } = segments[type];
@@ -4618,7 +4739,7 @@ var DatePicker = (0, import_react29.forwardRef)(
       calculatePortalPosition();
       setIsOpenCalendar(true);
     };
-    const handleChangeCalendar = import_react29.default.useCallback(
+    const handleChangeCalendar = import_react33.default.useCallback(
       (e) => {
         const dateCalendar = e;
         const dateDay = dateCalendar.getDate();
@@ -4635,7 +4756,7 @@ var DatePicker = (0, import_react29.forwardRef)(
       },
       [onChange]
     );
-    const onKeyDown = (0, import_react29.useCallback)(
+    const onKeyDown = (0, import_react33.useCallback)(
       (e) => {
         var _a;
         if (disabled) return;
@@ -4657,8 +4778,8 @@ var DatePicker = (0, import_react29.forwardRef)(
       },
       [disabled, isOpenCalendar]
     );
-    const calendar = (0, import_react29.useMemo)(() => {
-      return /* @__PURE__ */ import_react29.default.createElement(
+    const calendar = (0, import_react33.useMemo)(() => {
+      return /* @__PURE__ */ import_react33.default.createElement(
         Calendar_default,
         {
           disabledDates,
@@ -4694,7 +4815,7 @@ var DatePicker = (0, import_react29.forwardRef)(
       isOpenCalendar,
       refsFocusable
     ]);
-    (0, import_react29.useEffect)(() => {
+    (0, import_react33.useEffect)(() => {
       if (!value) {
         setDay("jj");
         setMonth("mm");
@@ -4706,7 +4827,7 @@ var DatePicker = (0, import_react29.forwardRef)(
         setYear(year2);
       }
     }, [value]);
-    (0, import_react29.useEffect)(() => {
+    (0, import_react33.useEffect)(() => {
       if (isOpenCalendar && refCalendar.current) {
         const elms = refCalendar.current.querySelectorAll(`[data-focusable=true]`);
         const firstDayFocusable = getFirstDayFocusable();
@@ -4719,13 +4840,13 @@ var DatePicker = (0, import_react29.forwardRef)(
       }
       if (!isOpenCalendar && currentFocusIndexRef.current) currentFocusIndexRef.current = 0;
     }, [isOpenCalendar, refCalendar, currentFocusIndexRef]);
-    (0, import_react29.useEffect)(() => {
+    (0, import_react33.useEffect)(() => {
       const handleResize = () => setIsMobile(window.innerWidth <= 768);
       handleResize();
       window.addEventListener("resize", handleResize);
       return () => window.removeEventListener("resize", handleResize);
     }, []);
-    (0, import_react29.useEffect)(() => {
+    (0, import_react33.useEffect)(() => {
       if (!isOpenCalendar) return;
       const handleUpdate = () => calculatePortalPosition();
       window.addEventListener("scroll", handleUpdate, true);
@@ -4735,7 +4856,7 @@ var DatePicker = (0, import_react29.forwardRef)(
         window.removeEventListener("resize", handleUpdate);
       };
     }, [isOpenCalendar, calculatePortalPosition]);
-    return /* @__PURE__ */ import_react29.default.createElement("div", { ref: refContainer, className: datePickerClasses, onKeyDown }, label && /* @__PURE__ */ import_react29.default.createElement("label", { className: inputLabelClasses, htmlFor: id }, label, " ", required && /* @__PURE__ */ import_react29.default.createElement(Text_default, { markup: "span" /* SPAN */, typo: "has-text-error" /* TEXT_ERROR */ }, "*")), sample && /* @__PURE__ */ import_react29.default.createElement(Text_default, { className: "input-sample", level: 2 /* TWO */ }, sample), /* @__PURE__ */ import_react29.default.createElement("div", { className: controlClasses }, /* @__PURE__ */ import_react29.default.createElement(
+    return /* @__PURE__ */ import_react33.default.createElement("div", { ref: refContainer, className: datePickerClasses, onKeyDown }, label && /* @__PURE__ */ import_react33.default.createElement("label", { className: inputLabelClasses, htmlFor: id }, label, " ", required && /* @__PURE__ */ import_react33.default.createElement(Text_default, { markup: "span" /* SPAN */, typo: "has-text-error" /* TEXT_ERROR */ }, "*")), sample && /* @__PURE__ */ import_react33.default.createElement(Text_default, { className: "input-sample", level: 2 /* TWO */ }, sample), /* @__PURE__ */ import_react33.default.createElement("div", { className: controlClasses }, /* @__PURE__ */ import_react33.default.createElement(
       "div",
       {
         role: "group",
@@ -4753,7 +4874,7 @@ var DatePicker = (0, import_react29.forwardRef)(
         },
         ...otherProps
       },
-      /* @__PURE__ */ import_react29.default.createElement(
+      /* @__PURE__ */ import_react33.default.createElement(
         "span",
         {
           "aria-valuemin": 1,
@@ -4780,8 +4901,8 @@ var DatePicker = (0, import_react29.forwardRef)(
         },
         day
       ),
-      /* @__PURE__ */ import_react29.default.createElement("span", null, "/"),
-      /* @__PURE__ */ import_react29.default.createElement(
+      /* @__PURE__ */ import_react33.default.createElement("span", null, "/"),
+      /* @__PURE__ */ import_react33.default.createElement(
         "span",
         {
           "aria-valuemin": 1,
@@ -4808,8 +4929,8 @@ var DatePicker = (0, import_react29.forwardRef)(
         },
         month
       ),
-      /* @__PURE__ */ import_react29.default.createElement("span", null, "/"),
-      /* @__PURE__ */ import_react29.default.createElement(
+      /* @__PURE__ */ import_react33.default.createElement("span", null, "/"),
+      /* @__PURE__ */ import_react33.default.createElement(
         "span",
         {
           "aria-valuemin": 0,
@@ -4836,7 +4957,7 @@ var DatePicker = (0, import_react29.forwardRef)(
         },
         year
       ),
-      /* @__PURE__ */ import_react29.default.createElement(
+      /* @__PURE__ */ import_react33.default.createElement(
         "input",
         {
           disabled,
@@ -4856,7 +4977,7 @@ var DatePicker = (0, import_react29.forwardRef)(
           }
         }
       )
-    ), /* @__PURE__ */ import_react29.default.createElement(
+    ), /* @__PURE__ */ import_react33.default.createElement(
       "button",
       {
         type: "button",
@@ -4868,9 +4989,9 @@ var DatePicker = (0, import_react29.forwardRef)(
           setIsFocused(false);
         }
       },
-      /* @__PURE__ */ import_react29.default.createElement(Icon_default, { name: "tri-calendar", className: iconRightClasses })
-    )), help && /* @__PURE__ */ import_react29.default.createElement(Text_default, { className: helpClasses }, help), isOpenCalendar && !isMobile2 && import_react_dom2.default.createPortal(
-      /* @__PURE__ */ import_react29.default.createElement(
+      /* @__PURE__ */ import_react33.default.createElement(Icon_default, { name: "tri-calendar", className: iconRightClasses })
+    )), help && /* @__PURE__ */ import_react33.default.createElement(Text_default, { className: helpClasses }, help), isOpenCalendar && !isMobile2 && import_react_dom2.default.createPortal(
+      /* @__PURE__ */ import_react33.default.createElement(
         "div",
         {
           className: calendarContainerClasses,
@@ -4885,7 +5006,7 @@ var DatePicker = (0, import_react29.forwardRef)(
         calendar
       ),
       document.body
-    ), isOpenCalendar && isMobile2 && /* @__PURE__ */ import_react29.default.createElement(Modal_default, { active: isOpenCalendar, hideCloseButton: true }, /* @__PURE__ */ import_react29.default.createElement(ModalBody_default, null, calendar)));
+    ), isOpenCalendar && isMobile2 && /* @__PURE__ */ import_react33.default.createElement(Modal_default, { active: isOpenCalendar, hideCloseButton: true }, /* @__PURE__ */ import_react33.default.createElement(ModalBody_default, null, calendar)));
   }
 );
 DatePicker.displayName = "DatePicker" /* DatePicker */;
@@ -4893,8 +5014,8 @@ var DatePicker_default = DatePicker;
 
 // components/divider/Divider.tsx
 var import_clsx48 = __toESM(require("clsx"));
-var import_react30 = __toESM(require("react"));
-var Divider = import_react30.default.forwardRef(({
+var import_react34 = __toESM(require("react"));
+var Divider = import_react34.default.forwardRef(({
   className,
   id,
   unboxed,
@@ -4917,15 +5038,15 @@ var Divider = import_react30.default.forwardRef(({
     )
   );
   const contentClasses = hashClass(styled, (0, import_clsx48.default)("divider-content"));
-  return /* @__PURE__ */ import_react30.default.createElement("div", { ref, id, "data-testid": "separator", className: classes, ...others }, /* @__PURE__ */ import_react30.default.createElement("p", { className: contentClasses }, iconName && !content && /* @__PURE__ */ import_react30.default.createElement(Icon_default, { name: iconName, size: "medium" /* MEDIUM */ }), content && content));
+  return /* @__PURE__ */ import_react34.default.createElement("div", { ref, id, "data-testid": "separator", className: classes, ...others }, /* @__PURE__ */ import_react34.default.createElement("p", { className: contentClasses }, iconName && !content && /* @__PURE__ */ import_react34.default.createElement(Icon_default, { name: iconName, size: "medium" /* MEDIUM */ }), content && content));
 });
 Divider.displayName = "Divider" /* Divider */;
 var Divider_default = Divider;
 
 // components/fab/Fab.tsx
 var import_clsx49 = __toESM(require("clsx"));
-var import_react31 = __toESM(require("react"));
-var Fab = import_react31.default.forwardRef(({
+var import_react35 = __toESM(require("react"));
+var Fab = import_react35.default.forwardRef(({
   children,
   extended,
   iconName,
@@ -4942,8 +5063,8 @@ var Fab = import_react31.default.forwardRef(({
   ...others
 }, ref) => {
   const { styled } = useTrilogyContext();
-  const [isExtended, setIsExtended] = (0, import_react31.useState)(extended || false);
-  (0, import_react31.useEffect)(() => {
+  const [isExtended, setIsExtended] = (0, import_react35.useState)(extended || false);
+  (0, import_react35.useEffect)(() => {
     setIsExtended(extended || false);
   }, [isExtended]);
   const positionStyle = top || bottom || left || right ? {
@@ -4956,7 +5077,7 @@ var Fab = import_react31.default.forwardRef(({
     position: "relative"
   };
   const _className = hashClass(styled, (0, import_clsx49.default)("fab", extended && is("extended"), className));
-  return /* @__PURE__ */ import_react31.default.createElement(
+  return /* @__PURE__ */ import_react35.default.createElement(
     "button",
     {
       ref,
@@ -4971,7 +5092,7 @@ var Fab = import_react31.default.forwardRef(({
       ...others,
       className: _className
     },
-    /* @__PURE__ */ import_react31.default.createElement(Icon_default, { name: iconName }),
+    /* @__PURE__ */ import_react35.default.createElement(Icon_default, { name: iconName }),
     children
   );
 });
@@ -4980,7 +5101,7 @@ var Fab_default = Fab;
 
 // components/flex-box/FlexBox.tsx
 var import_clsx50 = __toESM(require("clsx"));
-var import_react32 = __toESM(require("react"));
+var import_react36 = __toESM(require("react"));
 var generateClassNames = ({ value, getClassName }) => {
   if (!value) return [];
   if (typeof value === "string" || typeof value === "number") {
@@ -5003,7 +5124,7 @@ var generateWrapClassNames = ({ value, getClassName }) => {
   }
   return [];
 };
-var FlexBox = import_react32.default.forwardRef(
+var FlexBox = import_react36.default.forwardRef(
   ({ className, id, gap, direction, align, justify, wrap, scrollable, fullheight, mobile, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     const classes = hashClass(
@@ -5021,7 +5142,7 @@ var FlexBox = import_react32.default.forwardRef(
         className
       ])
     );
-    return /* @__PURE__ */ import_react32.default.createElement("div", { ref, id, className: classes, ...others });
+    return /* @__PURE__ */ import_react36.default.createElement("div", { ref, id, className: classes, ...others });
   }
 );
 FlexBox.displayName = "FlexBox" /* FlexBox */;
@@ -5029,8 +5150,8 @@ var FlexBox_default = FlexBox;
 
 // components/flex-box/flex-item/FlexItem.tsx
 var import_clsx51 = __toESM(require("clsx"));
-var import_react33 = __toESM(require("react"));
-var FlexItem = import_react33.default.forwardRef(
+var import_react37 = __toESM(require("react"));
+var FlexItem = import_react37.default.forwardRef(
   ({ className, id, size: size2, narrow, verticalAlign, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     const isNumber = typeof size2 === "number";
@@ -5050,7 +5171,7 @@ var FlexItem = import_react33.default.forwardRef(
         className
       )
     );
-    return /* @__PURE__ */ import_react33.default.createElement("div", { ref, id, className: classes, ...others });
+    return /* @__PURE__ */ import_react37.default.createElement("div", { ref, id, className: classes, ...others });
   }
 );
 FlexItem.displayName = "FlexItem" /* FlexItem */;
@@ -5058,8 +5179,8 @@ var FlexItem_default = FlexItem;
 
 // components/hero/Hero.tsx
 var import_clsx52 = __toESM(require("clsx"));
-var import_react34 = __toESM(require("react"));
-var Hero = import_react34.default.forwardRef(
+var import_react38 = __toESM(require("react"));
+var Hero = import_react38.default.forwardRef(
   ({ children, backgroundColor, backgroundSrc, inverted, className, id, onClick, overlap, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     const classes = hashClass(
@@ -5073,7 +5194,7 @@ var Hero = import_react34.default.forwardRef(
         className
       )
     );
-    return /* @__PURE__ */ import_react34.default.createElement(
+    return /* @__PURE__ */ import_react38.default.createElement(
       "section",
       {
         ref,
@@ -5085,7 +5206,7 @@ var Hero = import_react34.default.forwardRef(
         },
         ...others
       },
-      /* @__PURE__ */ import_react34.default.createElement("div", { className: hashClass(styled, (0, import_clsx52.default)("hero-body")) }, children)
+      /* @__PURE__ */ import_react38.default.createElement("div", { className: hashClass(styled, (0, import_clsx52.default)("hero-body")) }, children)
     );
   }
 );
@@ -5111,8 +5232,8 @@ var RadiusValues = /* @__PURE__ */ ((RadiusValues2) => {
 
 // components/image/Image.tsx
 var import_clsx53 = __toESM(require("clsx"));
-var React62 = __toESM(require("react"));
-var Image = React62.forwardRef(({
+var React66 = __toESM(require("react"));
+var Image = React66.forwardRef(({
   src,
   alt = "",
   className,
@@ -5133,7 +5254,7 @@ var Image = React62.forwardRef(({
       height
     }
   };
-  return /* @__PURE__ */ React62.createElement(
+  return /* @__PURE__ */ React66.createElement(
     "figure",
     {
       ref,
@@ -5145,7 +5266,7 @@ var Image = React62.forwardRef(({
       className: classes,
       ...others
     },
-    /* @__PURE__ */ React62.createElement(
+    /* @__PURE__ */ React66.createElement(
       "img",
       {
         style: styles.image,
@@ -5161,43 +5282,43 @@ var Image_default = Image;
 
 // components/list/List.tsx
 var import_clsx54 = __toESM(require("clsx"));
-var React63 = __toESM(require("react"));
-var List = React63.forwardRef(({ className, id, children, testId, divider, ordered, ...others }, ref) => {
+var React67 = __toESM(require("react"));
+var List = React67.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 Tag2 = ordered ? "ol" : "ul";
-  return /* @__PURE__ */ React63.createElement(Tag2, { ref, id, "data-testid": testId, className: classes, ...others }, children);
+  return /* @__PURE__ */ React67.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 React64 = __toESM(require("react"));
-var ListItem = React64.forwardRef(({ className, id, children, iconName, status, testId }, ref) => {
+var React68 = __toESM(require("react"));
+var ListItem = React68.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__ */ React64.createElement("li", { ref, id, className: hashClass(styled, (0, import_clsx55.default)(classes)), "data-testid": testId }, iconName && /* @__PURE__ */ React64.createElement(
+  return /* @__PURE__ */ React68.createElement("li", { ref, id, className: hashClass(styled, (0, import_clsx55.default)(classes)), "data-testid": testId }, iconName && /* @__PURE__ */ React68.createElement(
     Icon_default,
     {
       className: status && (0, import_clsx55.default)(is(getColorClassName(TrilogyColor[status]))),
       name: iconName,
       size: "small" /* SMALL */
     }
-  ), /* @__PURE__ */ React64.createElement("div", { className: hashClass(styled, (0, import_clsx55.default)("list-item-content")) }, children));
+  ), /* @__PURE__ */ React68.createElement("div", { className: hashClass(styled, (0, import_clsx55.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 React65 = __toESM(require("react"));
-var ListItemDescription = React65.forwardRef(({
+var React69 = __toESM(require("react"));
+var ListItemDescription = React69.forwardRef(({
   children,
   className
 }, ref) => {
   const { styled } = useTrilogyContext();
-  return /* @__PURE__ */ React65.createElement("dd", { ref, className: hashClass(styled, (0, import_clsx56.default)(className)) }, children);
+  return /* @__PURE__ */ React69.createElement("dd", { ref, className: hashClass(styled, (0, import_clsx56.default)(className)) }, children);
 });
 ListItemDescription.displayName = "ListItemDescription" /* ListItemDescription */;
 var ListItemDescription_default = ListItemDescription;
@@ -5214,7 +5335,7 @@ var ListIconStatus = /* @__PURE__ */ ((ListIconStatus2) => {
 // components/otp/Otp.tsx
 var import_locales5 = require("@trilogy-ds/locales");
 var import_clsx57 = __toESM(require("clsx"));
-var import_react35 = __toESM(require("react"));
+var import_react39 = __toESM(require("react"));
 var stringToCode = (str, codeSize) => {
   if (!str) return new Array(codeSize).fill(null);
   return str.split("").map((char) => char === "" ? null : Number(char));
@@ -5271,7 +5392,7 @@ var inputOnKeyUp = (e) => {
 var formatTranslation = (translation, x, y) => {
   return translation.replace(/:x/g, x).replace(/:y/g, y);
 };
-var Otp = import_react35.default.forwardRef(
+var Otp = import_react39.default.forwardRef(
   ({
     className,
     id,
@@ -5287,18 +5408,18 @@ var Otp = import_react35.default.forwardRef(
     autoFocus,
     ...others
   }, ref) => {
-    const [codeInput, setCodeInput] = (0, import_react35.useState)(
+    const [codeInput, setCodeInput] = (0, import_react39.useState)(
       stringToCode(value, length) || new Array(length).fill(null)
     );
-    const hasChanged = (0, import_react35.useRef)(false);
+    const hasChanged = (0, import_react39.useRef)(false);
     const { styled } = useTrilogyContext();
     const classes = hashClass(styled, (0, import_clsx57.default)("otp-list", error && is("error"), className));
-    (0, import_react35.useEffect)(() => {
+    (0, import_react39.useEffect)(() => {
       if (!disabled) {
         isCompleted(codeInput) && (onCompleted == null ? void 0 : onCompleted(codeToString(codeInput)));
       }
     }, [length, codeInput, onCompleted, disabled]);
-    (0, import_react35.useEffect)(() => {
+    (0, import_react39.useEffect)(() => {
       hasChanged.current = codeInput.find((code) => code !== null) !== void 0;
       if (hasChanged.current) {
         onChange == null ? void 0 : onChange(codeToString(codeInput));
@@ -5321,14 +5442,14 @@ var Otp = import_react35.default.forwardRef(
       const { target } = e;
       target.setSelectionRange(0, target.value.length);
     };
-    return /* @__PURE__ */ import_react35.default.createElement(import_react35.default.Fragment, null, label && /* @__PURE__ */ import_react35.default.createElement(
+    return /* @__PURE__ */ import_react39.default.createElement(import_react39.default.Fragment, null, label && /* @__PURE__ */ import_react39.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_react35.default.createElement(
+    ), /* @__PURE__ */ import_react39.default.createElement(
       "div",
       {
         ref,
@@ -5340,7 +5461,7 @@ var Otp = import_react35.default.forwardRef(
           }
         }
       },
-      codeInput.map((digit, idx) => /* @__PURE__ */ import_react35.default.createElement(
+      codeInput.map((digit, idx) => /* @__PURE__ */ import_react39.default.createElement(
         "input",
         {
           "aria-disabled": disabled,
@@ -5361,7 +5482,7 @@ var Otp = import_react35.default.forwardRef(
           ...others
         }
       ))
-    ), help && /* @__PURE__ */ import_react35.default.createElement(
+    ), help && /* @__PURE__ */ import_react39.default.createElement(
       Text_default,
       {
         className: hashClass(styled, (0, import_clsx57.default)("help")),
@@ -5377,8 +5498,8 @@ var Otp_default = Otp;
 
 // components/pagination/Pagination.tsx
 var import_clsx58 = __toESM(require("clsx"));
-var import_react36 = __toESM(require("react"));
-var Pagination = import_react36.default.forwardRef(({
+var import_react40 = __toESM(require("react"));
+var Pagination = import_react40.default.forwardRef(({
   className,
   id,
   length,
@@ -5387,11 +5508,11 @@ var Pagination = import_react36.default.forwardRef(({
   href,
   ...others
 }, ref) => {
-  const [currentPage, setCurrentPage] = (0, import_react36.useState)(defaultPage);
+  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_react36.useRef)(currentPage);
-  const pager = import_react36.default.useMemo(() => {
+  const prevCurrentPage = (0, import_react40.useRef)(currentPage);
+  const pager = import_react40.default.useMemo(() => {
     let startPage = 1;
     let endPage = 5;
     if (length <= 5) {
@@ -5417,17 +5538,17 @@ var Pagination = import_react36.default.forwardRef(({
       pages
     };
   }, [currentPage, length]);
-  (0, import_react36.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     if (onClick && prevCurrentPage.current !== pager.currentPage) {
       onClick(pager);
     }
     setCurrentPage(pager.currentPage);
     prevCurrentPage.current = pager.currentPage;
   }, [pager.currentPage]);
-  (0, import_react36.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     setCurrentPage(defaultPage);
   }, [defaultPage]);
-  return /* @__PURE__ */ import_react36.default.createElement("nav", { ref, id, className: classes, ...others }, /* @__PURE__ */ import_react36.default.createElement(
+  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")),
@@ -5439,8 +5560,8 @@ var Pagination = import_react36.default.forwardRef(({
       },
       href: href == null ? void 0 : href(currentPage - 1)
     },
-    /* @__PURE__ */ import_react36.default.createElement(Icon_default, { name: "tri-arrow-left" /* ARROW_LEFT */ })
-  ), /* @__PURE__ */ import_react36.default.createElement("ul", { className: hashClass(styled, (0, import_clsx58.default)("pagination-list")) }, !pager.pages.includes(1) && /* @__PURE__ */ import_react36.default.createElement("li", null, /* @__PURE__ */ import_react36.default.createElement("span", { className: hashClass(styled, (0, import_clsx58.default)("pagination-ellipsis")) }, "\u2026")), pager.pages.map((pageNumber) => /* @__PURE__ */ import_react36.default.createElement("li", { key: pageNumber }, /* @__PURE__ */ import_react36.default.createElement(
+    /* @__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")),
@@ -5452,7 +5573,7 @@ var Pagination = import_react36.default.forwardRef(({
       href: href == null ? void 0 : href(pageNumber)
     },
     pageNumber
-  ))), !pager.pages.includes(length) && /* @__PURE__ */ import_react36.default.createElement("li", null, /* @__PURE__ */ import_react36.default.createElement("span", { className: hashClass(styled, (0, import_clsx58.default)("pagination-ellipsis")) }, "\u2026"))), /* @__PURE__ */ import_react36.default.createElement(
+  ))), !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")),
@@ -5464,7 +5585,7 @@ var Pagination = import_react36.default.forwardRef(({
       },
       href: href == null ? void 0 : href(currentPage + 1)
     },
-    /* @__PURE__ */ import_react36.default.createElement(Icon_default, { name: "tri-arrow-right" /* ARROW_RIGHT */ })
+    /* @__PURE__ */ import_react40.default.createElement(Icon_default, { name: "tri-arrow-right" /* ARROW_RIGHT */ })
   ));
 });
 Pagination.displayName = "Pagination" /* Pagination */;
@@ -5472,8 +5593,8 @@ var Pagination_default = Pagination;
 
 // components/popover/Popover.tsx
 var import_clsx59 = __toESM(require("clsx"));
-var React68 = __toESM(require("react"));
-var Popover = React68.forwardRef(
+var React72 = __toESM(require("react"));
+var Popover = React72.forwardRef(
   ({ className, id, direction, children, active, arrowPosition, trigger, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     const classes = hashClass(
@@ -5486,7 +5607,7 @@ var Popover = React68.forwardRef(
         className
       )
     );
-    return /* @__PURE__ */ React68.createElement("span", { ref, id, className: classes, ...others }, trigger && trigger, /* @__PURE__ */ React68.createElement("span", { className: hashClass(styled, "popover-content") }, children));
+    return /* @__PURE__ */ React72.createElement("span", { ref, id, className: classes, ...others }, trigger && trigger, /* @__PURE__ */ React72.createElement("span", { className: hashClass(styled, "popover-content") }, children));
   }
 );
 Popover.displayName = "Popover" /* Popover */;
@@ -5507,7 +5628,7 @@ var PopoverArrowPosition = /* @__PURE__ */ ((PopoverArrowPosition2) => {
 
 // components/price/Price.tsx
 var import_clsx60 = __toESM(require("clsx"));
-var React69 = __toESM(require("react"));
+var React73 = __toESM(require("react"));
 
 // components/price/PriceHelpers.ts
 var checkCents = (text) => {
@@ -5519,7 +5640,7 @@ var checkCents = (text) => {
 };
 
 // components/price/Price.tsx
-var Price = React69.forwardRef(
+var Price = React73.forwardRef(
   ({
     className,
     id,
@@ -5553,7 +5674,7 @@ var Price = React69.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__ */ React69.createElement("span", { "aria-hidden": "true", className: classesStrike, ...others }, /* @__PURE__ */ React69.createElement(Text_default, { markup: "span" /* SPAN */ }, `${wholeStrike}`), /* @__PURE__ */ React69.createElement("span", { className: hashClass(styled, (0, import_clsx60.default)("price-details")) }, /* @__PURE__ */ React69.createElement("span", { className: hashClass(styled, (0, import_clsx60.default)("cents")) }, centsDisplayed === "\u20AC" ? /* @__PURE__ */ React69.createElement(React69.Fragment, null, "\xA0", centsDisplayed) : centsDisplayed, mention && /* @__PURE__ */ React69.createElement("sup", null, mention)), period && /* @__PURE__ */ React69.createElement("span", { className: hashClass(styled, (0, import_clsx60.default)("period")) }, "/", period)));
+      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)));
     }
     if (amount !== void 0) {
       const isNegative = amount < 0;
@@ -5564,9 +5685,9 @@ var Price = React69.forwardRef(
       cents = cents && cents.length === 1 && `${cents}0` || cents;
       const centsDisplayed = !hideCents && `\u20AC${cents}` || "\u20AC";
       const dataPrice = `${whole}${!hideCents && cents ? `.${cents}` : ""}`;
-      amountComponent = /* @__PURE__ */ React69.createElement("span", { "aria-hidden": "true", "aria-label": accessibilityLabel, className: classes, "data-price": dataPrice, ...others }, /* @__PURE__ */ React69.createElement(Text_default, { markup: "span" /* SPAN */ }, `${whole}`), /* @__PURE__ */ React69.createElement("span", { className: hashClass(styled, (0, import_clsx60.default)("price-details")) }, /* @__PURE__ */ React69.createElement("span", { className: hashClass(styled, (0, import_clsx60.default)("cents")) }, centsDisplayed === "\u20AC" ? /* @__PURE__ */ React69.createElement(React69.Fragment, null, "\xA0", centsDisplayed) : centsDisplayed, mention && /* @__PURE__ */ React69.createElement("sup", null, mention)), period && /* @__PURE__ */ React69.createElement("span", { className: hashClass(styled, (0, import_clsx60.default)("period")) }, "/", period)));
+      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)));
     }
-    return /* @__PURE__ */ React69.createElement(
+    return /* @__PURE__ */ React73.createElement(
       "div",
       {
         ref,
@@ -5580,11 +5701,11 @@ var Price = React69.forwardRef(
           )
         )
       },
-      overline && /* @__PURE__ */ React69.createElement("p", { className: hashClass(styled, (0, import_clsx60.default)("overline")) }, overline),
+      overline && /* @__PURE__ */ React73.createElement("p", { className: hashClass(styled, (0, import_clsx60.default)("overline")) }, overline),
       oldAmountComponent,
       amountComponent,
       tagAmountComponent,
-      accessibilityLabel && /* @__PURE__ */ React69.createElement("p", { className: hashClass(styled, (0, import_clsx60.default)("sr-only")) }, accessibilityLabel)
+      accessibilityLabel && /* @__PURE__ */ React73.createElement("p", { className: hashClass(styled, (0, import_clsx60.default)("sr-only")) }, accessibilityLabel)
     );
   }
 );
@@ -5605,8 +5726,8 @@ var PriceLevel = /* @__PURE__ */ ((PriceLevel2) => {
 
 // components/product-tour/ProductTour.tsx
 var import_clsx61 = __toESM(require("clsx"));
-var import_react37 = __toESM(require("react"));
-var ProductTour = import_react37.default.forwardRef(({
+var import_react41 = __toESM(require("react"));
+var ProductTour = import_react41.default.forwardRef(({
   children,
   className,
   id,
@@ -5618,16 +5739,16 @@ var ProductTour = import_react37.default.forwardRef(({
   avatarDirection,
   ...others
 }, ref) => {
-  const [display, setDisplay] = (0, import_react37.useState)(active || false);
+  const [display, setDisplay] = (0, import_react41.useState)(active || false);
   const { styled } = useTrilogyContext();
-  (0, import_react37.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     setDisplay(active || false);
   }, [active]);
   const classes = hashClass(
     styled,
     (0, import_clsx61.default)("product-tour", display && is("active"), avatarDirection && has(`icon-${avatarDirection}`), className)
   );
-  return /* @__PURE__ */ import_react37.default.createElement("div", { ref, id, className: classes, ...others }, arrowDirection && /* @__PURE__ */ import_react37.default.createElement("div", { className: hashClass(styled, (0, import_clsx61.default)("arrow", is(arrowDirection), arrowAlign && is(arrowAlign))) }), avatarSrc && /* @__PURE__ */ import_react37.default.createElement("span", { className: hashClass(styled, (0, import_clsx61.default)("icon", is("medium"))) }, /* @__PURE__ */ import_react37.default.createElement("img", { className: hashClass(styled, (0, import_clsx61.default)(is("rounded"))), src: avatarSrc })), closeable && /* @__PURE__ */ import_react37.default.createElement("div", { style: { cursor: "pointer" }, onClick: () => setDisplay(!display) }, /* @__PURE__ */ import_react37.default.createElement(Icon_default, { size: "small" /* SMALL */, name: "tri-times" /* TIMES */, className: "close" })), /* @__PURE__ */ import_react37.default.createElement("div", { className: hashClass(styled, (0, import_clsx61.default)("product-tour-content")) }, children));
+  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));
 });
 ProductTour.displayName = "ProductTour" /* ProductTour */;
 var ProductTour_default = ProductTour;
@@ -5659,8 +5780,8 @@ var AvatarDirection = /* @__PURE__ */ ((AvatarDirection2) => {
 
 // components/progress/Progress.tsx
 var import_clsx62 = __toESM(require("clsx"));
-var React71 = __toESM(require("react"));
-var Progress = React71.forwardRef(({
+var React75 = __toESM(require("react"));
+var Progress = React75.forwardRef(({
   children,
   className,
   id,
@@ -5687,24 +5808,24 @@ var Progress = React71.forwardRef(({
   );
   const stackedClasses = hashClass(styled, (0, import_clsx62.default)("progress", stacked && is("stacked"), className));
   if (children && stacked) {
-    return /* @__PURE__ */ React71.createElement("div", { className: stackedClasses, ...others }, children);
+    return /* @__PURE__ */ React75.createElement("div", { className: stackedClasses, ...others }, children);
   }
-  return /* @__PURE__ */ React71.createElement("div", { ref, className: "progress-container" }, /* @__PURE__ */ React71.createElement("progress", { id, className: classes, value, max, ...others }, value), (legendStart || legendCenter || legendEnd) && /* @__PURE__ */ React71.createElement("div", { className: "progress-legends" }, legendStart && /* @__PURE__ */ React71.createElement("div", { className: "progress-legend-start" }, /* @__PURE__ */ React71.createElement(Text_default, null, legendStart)), legendCenter && /* @__PURE__ */ React71.createElement("div", { className: "progress-legend-center" }, /* @__PURE__ */ React71.createElement(Text_default, null, legendCenter)), legendEnd && /* @__PURE__ */ React71.createElement("div", { className: "progress-legend-end" }, /* @__PURE__ */ React71.createElement(Text_default, null, legendEnd))));
+  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))));
 });
 Progress.displayName = "Progress" /* Progress */;
 var Progress_default = Progress;
 
 // components/progress/item/ProgressItem.tsx
 var import_clsx63 = __toESM(require("clsx"));
-var import_react38 = __toESM(require("react"));
-var ProgressItem = import_react38.default.forwardRef(
+var import_react42 = __toESM(require("react"));
+var ProgressItem = import_react42.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)
     );
-    return /* @__PURE__ */ import_react38.default.createElement(
+    return /* @__PURE__ */ import_react42.default.createElement(
       "div",
       {
         ref,
@@ -5727,9 +5848,9 @@ var ProgressItem_default = ProgressItem;
 var item_default3 = ProgressItem_default;
 
 // components/progress/radial/ProgressRadial.tsx
-var import_react39 = __toESM(require("react"));
+var import_react43 = __toESM(require("react"));
 var import_clsx64 = __toESM(require("clsx"));
-var ProgressRadial = import_react39.default.forwardRef(({
+var ProgressRadial = import_react43.default.forwardRef(({
   children,
   value = 0,
   secondValue = 0,
@@ -5742,11 +5863,11 @@ var ProgressRadial = import_react39.default.forwardRef(({
   ...others
 }, ref) => {
   const { styled } = useTrilogyContext();
-  const [firstProgressCurrentValue, setFirstProgressCurrentValue] = (0, import_react39.useState)(0);
-  const [secondProgressCurrentValue, setSecondProgressCurrentValue] = (0, import_react39.useState)(0);
+  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_react39.useRef)(null);
+  const progressRadialRef = (0, import_react43.useRef)(null);
   const updateBackgroundStyle = (firstValue, secondValue2) => {
     const progressRadial = progressRadialRef.current;
     if (!progressRadial) {
@@ -5762,7 +5883,7 @@ var ProgressRadial = import_react39.default.forwardRef(({
     )} ${secondProgressStartDegree}deg ${secondProgressStartDegree + secondProgressDegree}deg, ${getColorStyle("MAIN_FADE")} ${secondProgressStartDegree + secondProgressDegree}deg 360deg)`;
     progressRadial.style.background = styleBackground;
   };
-  (0, import_react39.useEffect)(() => {
+  (0, import_react43.useEffect)(() => {
     let animationFrameId;
     setFirstProgressCurrentValue(0);
     setSecondProgressCurrentValue(0);
@@ -5779,10 +5900,10 @@ var ProgressRadial = import_react39.default.forwardRef(({
     animationFrameId = requestAnimationFrame(frame);
     return () => cancelAnimationFrame(animationFrameId);
   }, [value, secondValue]);
-  (0, import_react39.useEffect)(() => {
+  (0, import_react43.useEffect)(() => {
     updateBackgroundStyle(firstProgressCurrentValue, secondProgressCurrentValue);
   }, [firstProgressCurrentValue, secondProgressCurrentValue]);
-  return /* @__PURE__ */ import_react39.default.createElement("div", { id, ...others, className: classes, ref: progressRadialRef }, /* @__PURE__ */ import_react39.default.createElement("div", { ref, className: classesContent }, label && /* @__PURE__ */ import_react39.default.createElement(Title_default, { level: 2 /* TWO */, marginless: true }, label), description && /* @__PURE__ */ import_react39.default.createElement(Text_default, { level: 1 /* ONE */, marginless: true }, description), !label && !description && children));
+  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));
 });
 ProgressRadial.displayName = "ProgressRadial" /* ProgressRadial */;
 var ProgressRadial_default = ProgressRadial;
@@ -5792,22 +5913,22 @@ var radial_default = ProgressRadial_default;
 
 // components/progress/radial/item/ProgressRadialtem.tsx
 var import_clsx65 = __toESM(require("clsx"));
-var React74 = __toESM(require("react"));
+var React78 = __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__ */ React74.createElement("div", { id, className: classes });
+  return /* @__PURE__ */ React78.createElement("div", { id, className: classes });
 };
 var ProgressRadialtem_default = ProgressRadialItem;
 
 // components/radio/list/RadioList.tsx
 var import_clsx66 = __toESM(require("clsx"));
-var React75 = __toESM(require("react"));
-var RadioList = React75.forwardRef(
+var React79 = __toESM(require("react"));
+var RadioList = React79.forwardRef(
   ({ className, id, align, horizontalMobile, verticalDesktop, accessibilityLabelledBy, children, label, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     const groupLabelClasses = hashClass(styled, "group-label");
-    return /* @__PURE__ */ React75.createElement(React75.Fragment, null, label && /* @__PURE__ */ React75.createElement("p", { className: groupLabelClasses }, label, isRequiredChild(children) && /* @__PURE__ */ React75.createElement(Text_default, { markup: "span" /* SPAN */, typo: "has-text-error" /* TEXT_ERROR */ }, " ", "*")), /* @__PURE__ */ React75.createElement(
+    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(
       "div",
       {
         ref,
@@ -5836,13 +5957,13 @@ var RadioList_default = RadioList;
 
 // components/radio/Radio.tsx
 var import_clsx67 = __toESM(require("clsx"));
-var import_react40 = __toESM(require("react"));
-var Radio = import_react40.default.forwardRef(({
+var import_react44 = __toESM(require("react"));
+var Radio = import_react44.default.forwardRef(({
   checked,
   className,
   disabled,
   readonly,
-  id = import_react40.default.useId(),
+  id = import_react44.default.useId(),
   label,
   onChange,
   name,
@@ -5851,7 +5972,7 @@ var Radio = import_react40.default.forwardRef(({
   ...others
 }, ref) => {
   const { styled } = useTrilogyContext();
-  return /* @__PURE__ */ import_react40.default.createElement("div", { ref, className: hashClass(styled, (0, import_clsx67.default)("radio", className)) }, /* @__PURE__ */ import_react40.default.createElement(
+  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",
@@ -5874,15 +5995,15 @@ var Radio = import_react40.default.forwardRef(({
       },
       ...others
     }
-  ), /* @__PURE__ */ import_react40.default.createElement("label", { htmlFor: id, className: hashClass(styled, (0, import_clsx67.default)("radio-label")) }, label));
+  ), /* @__PURE__ */ import_react44.default.createElement("label", { htmlFor: id, className: hashClass(styled, (0, import_clsx67.default)("radio-label")) }, label));
 });
 Radio.displayName = "Radio" /* Radio */;
 var Radio_default = Radio;
 
 // components/radio/tiles/RadioTiles.tsx
 var import_clsx68 = __toESM(require("clsx"));
-var React77 = __toESM(require("react"));
-var RadioTiles = React77.forwardRef(({ id, className, children, align, verticalAlign, accessibilityLabelledBy, ...others }, ref) => {
+var React81 = __toESM(require("react"));
+var RadioTiles = React81.forwardRef(({ id, className, children, align, verticalAlign, accessibilityLabelledBy, ...others }, ref) => {
   const { styled } = useTrilogyContext();
   let alignClass = null;
   if (align) {
@@ -5892,7 +6013,7 @@ var RadioTiles = React77.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__ */ React77.createElement(
+  return /* @__PURE__ */ React81.createElement(
     "div",
     {
       ref,
@@ -5914,13 +6035,13 @@ var RadioTiles_default = RadioTiles;
 
 // components/radio/tiles/tile/RadioTile.tsx
 var import_clsx69 = __toESM(require("clsx"));
-var import_react41 = __toESM(require("react"));
-var RadioTile = import_react41.default.forwardRef(({
+var import_react45 = __toESM(require("react"));
+var RadioTile = import_react45.default.forwardRef(({
   checked,
   className,
   disabled,
   readonly,
-  id = import_react41.default.useId(),
+  id = import_react45.default.useId(),
   label,
   onChange,
   name,
@@ -5934,7 +6055,7 @@ var RadioTile = import_react41.default.forwardRef(({
   ...others
 }, ref) => {
   const { styled } = useTrilogyContext();
-  return /* @__PURE__ */ import_react41.default.createElement("div", { ref, className: hashClass(styled, (0, import_clsx69.default)("radio-tile", horizontal && is("horizontal"), className)) }, /* @__PURE__ */ import_react41.default.createElement(
+  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",
@@ -5957,18 +6078,18 @@ var RadioTile = import_react41.default.forwardRef(({
       },
       ...others
     }
-  ), /* @__PURE__ */ import_react41.default.createElement("label", { htmlFor: id, className: hashClass(styled, (0, import_clsx69.default)("radio-label")) }, icon && /* @__PURE__ */ import_react41.default.createElement(Icon_default, { name: icon, size: "medium" /* MEDIUM */ }), horizontal ? /* @__PURE__ */ import_react41.default.createElement("span", null, /* @__PURE__ */ import_react41.default.createElement("span", { className: hashClass(styled, (0, import_clsx69.default)("radio-title")) }, label), description && /* @__PURE__ */ import_react41.default.createElement("span", { className: hashClass(styled, (0, import_clsx69.default)("radio-description")) }, description)) : /* @__PURE__ */ import_react41.default.createElement(import_react41.default.Fragment, null, /* @__PURE__ */ import_react41.default.createElement("span", { className: hashClass(styled, (0, import_clsx69.default)("radio-title")) }, label), description && /* @__PURE__ */ import_react41.default.createElement("span", { className: hashClass(styled, (0, import_clsx69.default)("radio-description")) }, description))), sticker && /* @__PURE__ */ import_react41.default.createElement(Sticker_default, { label: sticker, variant: stickerVariant, className: "radio-sticker", small: true }));
+  ), /* @__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 }));
 });
 RadioTile.displayName = "RadioTile" /* RadioTile */;
 var RadioTile_default = RadioTile;
 
 // components/range/Range.tsx
 var import_clsx70 = __toESM(require("clsx"));
-var React79 = __toESM(require("react"));
-var Range = React79.forwardRef(
+var React83 = __toESM(require("react"));
+var Range = React83.forwardRef(
   ({
     className,
-    id = React79.useId(),
+    id = React83.useId(),
     min,
     max,
     label,
@@ -5984,37 +6105,37 @@ var Range = React79.forwardRef(
     value
   }, ref) => {
     const { styled } = useTrilogyContext();
-    const refTrack = React79.useRef(null);
-    const [cursorMin, setCursorMin] = React79.useState(valueMin != null ? valueMin : 0);
-    const [cursorMax, setCursorMax] = React79.useState(simple ? value || 0 : valueMax != null ? valueMax : max);
-    React79.useEffect(() => {
+    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(() => {
       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]);
-    React79.useEffect(() => {
+    React83.useEffect(() => {
       setCursorMin(valueMin || 0);
     }, [valueMin]);
-    React79.useEffect(() => {
+    React83.useEffect(() => {
       if (!simple) setCursorMax(valueMax || max);
     }, [valueMax, simple]);
-    React79.useEffect(() => {
+    React83.useEffect(() => {
       if (simple && value !== void 0) setCursorMax(value);
     }, [value, simple]);
-    const handleChangeCursorMin = React79.useCallback(
+    const handleChangeCursorMin = React83.useCallback(
       (e) => {
         if (Number(e.target.value) < cursorMax - gap) setCursorMin(Number(e.target.value));
       },
       [cursorMax, cursorMin]
     );
-    const handleChangeCursorMax = React79.useCallback(
+    const handleChangeCursorMax = React83.useCallback(
       (e) => {
         if (Number(e.target.value) >= cursorMin + gap) setCursorMax(Number(e.target.value));
       },
       [cursorMax, cursorMin]
     );
-    const handleMouseUpMin = React79.useCallback(() => {
+    const handleMouseUpMin = React83.useCallback(() => {
       if (onChangeMin) {
         onChangeMin({
           inputName: name,
@@ -6022,7 +6143,7 @@ var Range = React79.forwardRef(
         });
       }
     }, [onChangeMin, name, cursorMin]);
-    const handleMouseUpMax = React79.useCallback(() => {
+    const handleMouseUpMax = React83.useCallback(() => {
       if (onChangeMax && !simple) {
         onChangeMax({
           inputName: name,
@@ -6036,7 +6157,7 @@ var Range = React79.forwardRef(
         });
       }
     }, [onChangeMax, name, cursorMax, onChange, simple]);
-    return /* @__PURE__ */ React79.createElement("div", { ref, id, className: hashClass(styled, (0, import_clsx70.default)("range-container", className)) }, /* @__PURE__ */ React79.createElement("label", { className: hashClass(styled, (0, import_clsx70.default)("range-label")) }, label), /* @__PURE__ */ React79.createElement("div", { className: hashClass(styled, (0, import_clsx70.default)("range")) }, /* @__PURE__ */ React79.createElement("div", { ref: refTrack, className: hashClass(styled, (0, import_clsx70.default)("range-track")) }), !simple && /* @__PURE__ */ React79.createElement(
+    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(
       "input",
       {
         className: hashClass(styled, (0, import_clsx70.default)("range-cursor range-cursor-min")),
@@ -6051,7 +6172,7 @@ var Range = React79.forwardRef(
         id: `${id}-min`,
         "aria-label": label
       }
-    ), /* @__PURE__ */ React79.createElement(
+    ), /* @__PURE__ */ React83.createElement(
       "input",
       {
         className: hashClass(styled, (0, import_clsx70.default)("range-cursor", !simple && "range-cursor-max")),
@@ -6066,7 +6187,7 @@ var Range = React79.forwardRef(
         id: `${id}-max`,
         "aria-label": label
       }
-    )), /* @__PURE__ */ React79.createElement("div", { className: hashClass(styled, (0, import_clsx70.default)("range-values")) }, !simple && /* @__PURE__ */ React79.createElement("div", null, /* @__PURE__ */ React79.createElement("span", { className: hashClass(styled, (0, import_clsx70.default)("range-value-min")) }, cursorMin), unit && /* @__PURE__ */ React79.createElement("span", null, " ", unit)), /* @__PURE__ */ React79.createElement("div", null, /* @__PURE__ */ React79.createElement("span", { className: hashClass(styled, (0, import_clsx70.default)(simple ? "range-value" : "range-value-max")) }, cursorMax), unit && /* @__PURE__ */ React79.createElement("span", null, " ", unit))));
+    )), /* @__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))));
   }
 );
 Range.displayName = "Range" /* Range */;
@@ -6074,10 +6195,10 @@ var Range_default = Range;
 
 // components/rows/Rows.tsx
 var import_clsx71 = __toESM(require("clsx"));
-var React80 = __toESM(require("react"));
-var Rows = React80.forwardRef(({ className, id, gap, ...others }, ref) => {
+var React84 = __toESM(require("react"));
+var Rows = React84.forwardRef(({ className, id, gap, ...others }, ref) => {
   const { styled } = useTrilogyContext();
-  return /* @__PURE__ */ React80.createElement(
+  return /* @__PURE__ */ React84.createElement(
     "div",
     {
       ref,
@@ -6095,11 +6216,11 @@ var Rows_default = Rows;
 
 // components/rows/row/Row.tsx
 var import_clsx72 = __toESM(require("clsx"));
-var React81 = __toESM(require("react"));
-var Row = React81.forwardRef(({ className, id, narrow, ...others }, ref) => {
+var React85 = __toESM(require("react"));
+var Row = React85.forwardRef(({ className, id, narrow, ...others }, ref) => {
   const { styled } = useTrilogyContext();
   const classes = hashClass(styled, (0, import_clsx72.default)("row", narrow && is("narrow"), className));
-  return /* @__PURE__ */ React81.createElement("div", { ref, id, className: classes, ...others });
+  return /* @__PURE__ */ React85.createElement("div", { ref, id, className: classes, ...others });
 });
 Row.displayName = "Row" /* Row */;
 var Row_default = Row;
@@ -6109,8 +6230,8 @@ var row_default = Row_default;
 
 // components/scroll-view/ScrollView.tsx
 var import_clsx73 = __toESM(require("clsx"));
-var React82 = __toESM(require("react"));
-var ScrollView = React82.forwardRef(
+var React86 = __toESM(require("react"));
+var ScrollView = React86.forwardRef(
   ({ id, scrollDirection, children }, ref) => {
     const { styled } = useTrilogyContext();
     const scrollDirectionClassName = () => {
@@ -6128,7 +6249,7 @@ var ScrollView = React82.forwardRef(
       styled,
       (0, import_clsx73.default)("scroll-view", scrollDirection && scrollDirectionClassName())
     );
-    return /* @__PURE__ */ React82.createElement("div", { ref, className: classes, id }, children);
+    return /* @__PURE__ */ React86.createElement("div", { ref, className: classes, id }, children);
   }
 );
 ScrollView.displayName = "ScrollView" /* ScrollView */;
@@ -6136,8 +6257,8 @@ var ScrollView_default = ScrollView;
 
 // components/section/Section.tsx
 var import_clsx74 = __toESM(require("clsx"));
-var import_react42 = __toESM(require("react"));
-var Section = import_react42.default.forwardRef(({ className, id, skeleton, backgroundColor, backgroundSrc, inverted, ...others }, ref) => {
+var import_react46 = __toESM(require("react"));
+var Section = import_react46.default.forwardRef(({ className, id, skeleton, backgroundColor, backgroundSrc, inverted, ...others }, ref) => {
   const { styled } = useTrilogyContext();
   const _className = hashClass(
     styled,
@@ -6150,7 +6271,7 @@ var Section = import_react42.default.forwardRef(({ className, id, skeleton, back
       skeleton && is("loading")
     )
   );
-  return /* @__PURE__ */ import_react42.default.createElement(
+  return /* @__PURE__ */ import_react46.default.createElement(
     "section",
     {
       ref,
@@ -6168,19 +6289,19 @@ var Section_default = Section;
 
 // components/segment-control/SegmentControl.tsx
 var import_clsx76 = __toESM(require("clsx"));
-var import_react44 = __toESM(require("react"));
+var import_react48 = __toESM(require("react"));
 
 // components/segment-control/item/SegmentControlItem.tsx
 var import_clsx75 = __toESM(require("clsx"));
-var import_react43 = __toESM(require("react"));
-var SegmentControlItem = import_react43.default.forwardRef(
+var import_react47 = __toESM(require("react"));
+var SegmentControlItem = import_react47.default.forwardRef(
   ({ active, onClick, disabled, className, id, children, ...others }, ref) => {
-    const [activeItem, setActiveItem] = (0, import_react43.useState)(active || false);
+    const [activeItem, setActiveItem] = (0, import_react47.useState)(active || false);
     const { styled } = useTrilogyContext();
-    (0, import_react43.useEffect)(() => {
+    (0, import_react47.useEffect)(() => {
       setActiveItem(active || false);
     }, [active]);
-    return /* @__PURE__ */ import_react43.default.createElement(
+    return /* @__PURE__ */ import_react47.default.createElement(
       "button",
       {
         type: "button",
@@ -6209,10 +6330,10 @@ var SegmentControlItem_default = SegmentControlItem;
 var item_default4 = SegmentControlItem_default;
 
 // components/segment-control/SegmentControl.tsx
-var SegmentControl = import_react44.default.forwardRef(({ className, id, onClick, children, activeIndex, align, ...others }, ref) => {
+var SegmentControl = import_react48.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_react44.useState)(activeIndex || 0);
+  const [activateIndex, setActivateIndex] = (0, import_react48.useState)(activeIndex || 0);
   const isActive = (index, childPropsActive) => {
     if (typeof childPropsActive !== "undefined" && !activateIndex) {
       return childPropsActive;
@@ -6225,10 +6346,10 @@ var SegmentControl = import_react44.default.forwardRef(({ className, id, onClick
     setActivateIndex(index);
     if (onClick) onClick(e);
   };
-  import_react44.default.useEffect(() => {
+  import_react48.default.useEffect(() => {
     setActivateIndex(activateIndex);
   }, [activateIndex]);
-  return /* @__PURE__ */ import_react44.default.createElement("div", { ref, id, className: classes, ...others }, children && Array.isArray(children) && // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  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
   children.map((child, index) => {
     const props = {
       active: Boolean(isActive(index, child.props.active)) || false,
@@ -6243,7 +6364,7 @@ var SegmentControl = import_react44.default.forwardRef(({ className, id, onClick
         }
       }
     };
-    return child && typeof child.valueOf() === "string" ? /* @__PURE__ */ import_react44.default.createElement(
+    return child && typeof child.valueOf() === "string" ? /* @__PURE__ */ import_react48.default.createElement(
       item_default4,
       {
         disabled: props.disabled,
@@ -6252,23 +6373,23 @@ var SegmentControl = import_react44.default.forwardRef(({ className, id, onClick
         onClick: (e) => onClick == null ? void 0 : onClick(e)
       },
       child
-    ) : import_react44.default.cloneElement(child, props);
+    ) : import_react48.default.cloneElement(child, props);
   }));
 });
 SegmentControl.displayName = "SegmentControl" /* SegmentControl */;
 var SegmentControl_default = SegmentControl;
 
 // components/skeleton/Skeleton.tsx
-var import_react45 = __toESM(require("react"));
+var import_react49 = __toESM(require("react"));
 var Skeleton = () => {
-  return /* @__PURE__ */ import_react45.default.createElement("div", null);
+  return /* @__PURE__ */ import_react49.default.createElement("div", null);
 };
 var Skeleton_default = Skeleton;
 
 // components/spacer/Spacer.tsx
 var import_clsx77 = __toESM(require("clsx"));
-var React87 = __toESM(require("react"));
-var Spacer = React87.forwardRef(({ size: size2, horizontal, className, id }, ref) => {
+var React91 = __toESM(require("react"));
+var Spacer = React91.forwardRef(({ size: size2, horizontal, className, id }, ref) => {
   const { styled } = useTrilogyContext();
   const styles = {
     spacer: {
@@ -6277,24 +6398,24 @@ var Spacer = React87.forwardRef(({ size: size2, horizontal, className, id }, ref
     }
   };
   const classes = hashClass(styled, (0, import_clsx77.default)(className));
-  return /* @__PURE__ */ React87.createElement("div", { ref, id, style: styles.spacer, className: classes });
+  return /* @__PURE__ */ React91.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 React88 = __toESM(require("react"));
-var Stepper = React88.forwardRef(({ className, id, children, ...others }, ref) => {
+var React92 = __toESM(require("react"));
+var Stepper = React92.forwardRef(({ className, id, children, ...others }, ref) => {
   const { styled } = useTrilogyContext();
   const classes = hashClass(styled, (0, import_clsx78.default)("stepper-wrapper", className));
-  const [currentStep, setCurrentStep] = React88.useState(1);
-  const nbChild = React88.useMemo(() => {
+  const [currentStep, setCurrentStep] = React92.useState(1);
+  const nbChild = React92.useMemo(() => {
     if (children && Array.isArray(children)) return children.length;
     if (children && !Array.isArray(children)) return 1;
     return 0;
   }, [children]);
-  React88.useEffect(() => {
+  React92.useEffect(() => {
     if (children) {
       if (Array.isArray(children)) {
         let haveCurrentStep = false;
@@ -6311,15 +6432,15 @@ var Stepper = React88.forwardRef(({ className, id, children, ...others }, ref) =
       }
     }
   }, [children]);
-  return /* @__PURE__ */ React88.createElement("div", { ref, id, className: classes, ...others }, children, /* @__PURE__ */ React88.createElement("div", { className: "step-count" }, /* @__PURE__ */ React88.createElement(Text_default, null, currentStep, "/", nbChild)));
+  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)));
 });
 Stepper.displayName = "Stepper" /* Stepper */;
 var Stepper_default = Stepper;
 
 // components/stepper/step/Step.tsx
 var import_clsx79 = __toESM(require("clsx"));
-var import_react46 = __toESM(require("react"));
-var Step = import_react46.default.forwardRef(({ className, id, active, current, done, label, iconName, error, ...others }, ref) => {
+var import_react50 = __toESM(require("react"));
+var Step = import_react50.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 classes = hashClass(
@@ -6333,7 +6454,7 @@ var Step = import_react46.default.forwardRef(({ className, id, active, current,
       className
     )
   );
-  return /* @__PURE__ */ import_react46.default.createElement("div", { ref, id, className: classes, "data-label": label, ...others }, /* @__PURE__ */ import_react46.default.createElement("div", { className: classesStepLabel }, label, !done && iconName && /* @__PURE__ */ import_react46.default.createElement(Icon_default, { name: iconName && iconName, className: "step-icon", size: "medium" /* MEDIUM */ })));
+  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 */ })));
 });
 Step.displayName = "Step" /* Step */;
 var Step_default = Step;
@@ -6352,10 +6473,10 @@ var step_default = Step_default;
 
 // components/switch/Switch.tsx
 var import_clsx80 = __toESM(require("clsx"));
-var import_react47 = __toESM(require("react"));
-var Switch = import_react47.default.forwardRef(({
+var import_react51 = __toESM(require("react"));
+var Switch = import_react51.default.forwardRef(({
   className,
-  id = import_react47.default.useId(),
+  id = import_react51.default.useId(),
   label,
   value,
   checked,
@@ -6369,23 +6490,23 @@ var Switch = import_react47.default.forwardRef(({
   fullWidth,
   ...others
 }, ref) => {
-  const [_checked, setChecked] = (0, import_react47.useState)(checked || false);
+  const [_checked, setChecked] = (0, import_react51.useState)(checked || false);
   const { styled } = useTrilogyContext();
-  import_react47.default.useEffect(() => {
+  import_react51.default.useEffect(() => {
     setChecked(checked || false);
   }, [checked]);
-  (0, import_react47.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     if (!readonly) {
       setChecked(checked || false);
     }
   }, [checked, readonly]);
-  return /* @__PURE__ */ import_react47.default.createElement(
+  return /* @__PURE__ */ import_react51.default.createElement(
     "div",
     {
       ref,
       className: hashClass(styled, (0, import_clsx80.default)("switch", reversed && is("reversed"), fullWidth && is("fullwidth"), className))
     },
-    /* @__PURE__ */ import_react47.default.createElement(
+    /* @__PURE__ */ import_react51.default.createElement(
       "input",
       {
         onChange: (e) => {
@@ -6421,14 +6542,14 @@ var Switch = import_react47.default.forwardRef(({
         ...others
       }
     ),
-    /* @__PURE__ */ import_react47.default.createElement("label", { htmlFor: `switch-${id}` }, label)
+    /* @__PURE__ */ import_react51.default.createElement("label", { htmlFor: `switch-${id}` }, label)
   );
 });
 Switch.displayName = "Switch" /* Switch */;
 var Switch_default = Switch;
 
 // components/table/Table.tsx
-var React91 = __toESM(require("react"));
+var React95 = __toESM(require("react"));
 var import_clsx81 = __toESM(require("clsx"));
 
 // components/table/TableProps.ts
@@ -6440,7 +6561,7 @@ var TableBorderEnum = /* @__PURE__ */ ((TableBorderEnum2) => {
 })(TableBorderEnum || {});
 
 // components/table/Table.tsx
-var Table = React91.forwardRef(({
+var Table = React95.forwardRef(({
   className,
   id,
   fullwidth,
@@ -6461,15 +6582,15 @@ var Table = React91.forwardRef(({
       className
     )
   );
-  return /* @__PURE__ */ React91.createElement("table", { ref, id, className: classes, ...others });
+  return /* @__PURE__ */ React95.createElement("table", { ref, id, className: classes, ...others });
 });
 Table.displayName = "Table" /* Table */;
 var Table_default = Table;
 
 // components/table/head/TableHead.tsx
-var React92 = __toESM(require("react"));
+var React96 = __toESM(require("react"));
 var import_clsx82 = __toESM(require("clsx"));
-var TableHead = React92.forwardRef(({ className, id, color, backgroundColor, ...others }, ref) => {
+var TableHead = React96.forwardRef(({ className, id, color, backgroundColor, ...others }, ref) => {
   const { styled } = useTrilogyContext();
   const classes = hashClass(
     styled,
@@ -6479,7 +6600,7 @@ var TableHead = React92.forwardRef(({ className, id, color, backgroundColor, ...
       color && is(getColorClassName(color))
     )
   );
-  return /* @__PURE__ */ React92.createElement("thead", { ref, id, className: classes, ...others });
+  return /* @__PURE__ */ React96.createElement("thead", { ref, id, className: classes, ...others });
 });
 TableHead.displayName = "TableHead" /* TableHead */;
 var TableHead_default = TableHead;
@@ -6488,9 +6609,9 @@ var TableHead_default = TableHead;
 var head_default = TableHead_default;
 
 // components/table/body/TableBody.tsx
-var React93 = __toESM(require("react"));
+var React97 = __toESM(require("react"));
 var import_clsx83 = __toESM(require("clsx"));
-var TableBody = React93.forwardRef(({ className, id, color, backgroundColor, ...others }, ref) => {
+var TableBody = React97.forwardRef(({ className, id, color, backgroundColor, ...others }, ref) => {
   const { styled } = useTrilogyContext();
   const classes = hashClass(
     styled,
@@ -6500,7 +6621,7 @@ var TableBody = React93.forwardRef(({ className, id, color, backgroundColor, ...
       color && is(getColorClassName(color))
     )
   );
-  return /* @__PURE__ */ React93.createElement("tbody", { ref, id, className: classes, ...others });
+  return /* @__PURE__ */ React97.createElement("tbody", { ref, id, className: classes, ...others });
 });
 TableBody.displayName = "TableBody" /* TableBody */;
 var TableBody_default = TableBody;
@@ -6509,12 +6630,12 @@ var TableBody_default = TableBody;
 var body_default = TableBody_default;
 
 // components/table/th/TableTh.tsx
-var React94 = __toESM(require("react"));
+var React98 = __toESM(require("react"));
 var import_clsx84 = __toESM(require("clsx"));
-var TableTh = React94.forwardRef(({ className, id, colSpan, rowSpan, ...others }, ref) => {
+var TableTh = React98.forwardRef(({ className, id, colSpan, rowSpan, ...others }, ref) => {
   const { styled } = useTrilogyContext();
   const classes = hashClass(styled, (0, import_clsx84.default)(className));
-  return /* @__PURE__ */ React94.createElement("th", { ref, id, className: classes, colSpan, rowSpan, ...others });
+  return /* @__PURE__ */ React98.createElement("th", { ref, id, className: classes, colSpan, rowSpan, ...others });
 });
 TableTh.displayName = "TableTh" /* TableTh */;
 var TableTh_default = TableTh;
@@ -6523,9 +6644,9 @@ var TableTh_default = TableTh;
 var th_default = TableTh_default;
 
 // components/table/tr/TableTr.tsx
-var React95 = __toESM(require("react"));
+var React99 = __toESM(require("react"));
 var import_clsx85 = __toESM(require("clsx"));
-var TableTr = React95.forwardRef(({
+var TableTr = React99.forwardRef(({
   className,
   id,
   expandable,
@@ -6545,7 +6666,7 @@ var TableTr = React95.forwardRef(({
       color && getColorClassName(color)
     )
   );
-  return /* @__PURE__ */ React95.createElement("tr", { ref, id, className: classes, ...others });
+  return /* @__PURE__ */ React99.createElement("tr", { ref, id, className: classes, ...others });
 });
 TableTr.displayName = "TableTr" /* TableTr */;
 var TableTr_default = TableTr;
@@ -6554,12 +6675,12 @@ var TableTr_default = TableTr;
 var tr_default = TableTr_default;
 
 // components/table/td/TableTd.tsx
-var React96 = __toESM(require("react"));
+var React100 = __toESM(require("react"));
 var import_clsx86 = __toESM(require("clsx"));
-var TableTd = React96.forwardRef(({ className, id, rowSpan, colSpan, ...others }, ref) => {
+var TableTd = React100.forwardRef(({ className, id, rowSpan, colSpan, ...others }, ref) => {
   const { styled } = useTrilogyContext();
   const classes = hashClass(styled, (0, import_clsx86.default)(className));
-  return /* @__PURE__ */ React96.createElement("td", { ref, id, className: classes, rowSpan, colSpan, ...others });
+  return /* @__PURE__ */ React100.createElement("td", { ref, id, className: classes, rowSpan, colSpan, ...others });
 });
 TableTd.displayName = "TableTd" /* TableTd */;
 var TableTd_default = TableTd;
@@ -6568,8 +6689,8 @@ var TableTd_default = TableTd;
 var td_default = TableTd_default;
 
 // components/tabs/context/index.tsx
-var import_react48 = __toESM(require("react"));
-var TabsContext = import_react48.default.createContext({
+var import_react52 = __toESM(require("react"));
+var TabsContext = import_react52.default.createContext({
   activeIndex: 0,
   inverted: false,
   setActiveIndex: () => 0,
@@ -6580,20 +6701,20 @@ var TabsContext = import_react48.default.createContext({
 
 // components/tabs/Tabs.tsx
 var import_clsx87 = __toESM(require("clsx"));
-var import_react49 = __toESM(require("react"));
-var Tabs = import_react49.default.forwardRef(
+var import_react53 = __toESM(require("react"));
+var Tabs = import_react53.default.forwardRef(
   ({ children, className, id, activeIndex, fullwidth, inverted, small }, ref) => {
-    const [currentIndex, setCurrentIndex] = import_react49.default.useState(activeIndex || 0);
-    const [isInverted, setIsInverted] = import_react49.default.useState(inverted || false);
+    const [currentIndex, setCurrentIndex] = import_react53.default.useState(activeIndex || 0);
+    const [isInverted, setIsInverted] = import_react53.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)
     );
-    import_react49.default.useEffect(() => {
+    import_react53.default.useEffect(() => {
       activeIndex !== void 0 && setCurrentIndex(activeIndex);
     }, [activeIndex]);
-    return /* @__PURE__ */ import_react49.default.createElement(
+    return /* @__PURE__ */ import_react53.default.createElement(
       TabsContext.Provider,
       {
         value: {
@@ -6604,7 +6725,7 @@ var Tabs = import_react49.default.forwardRef(
           setActiveIndex: setCurrentIndex
         }
       },
-      /* @__PURE__ */ import_react49.default.createElement("div", { ref, id, className: classes, "data-tabs-context": "" }, children)
+      /* @__PURE__ */ import_react53.default.createElement("div", { ref, id, className: classes, "data-tabs-context": "" }, children)
     );
   }
 );
@@ -6613,16 +6734,16 @@ var Tabs_default = Tabs;
 
 // components/tabs/tab-list/tab/Tab.tsx
 var import_clsx88 = __toESM(require("clsx"));
-var import_react50 = __toESM(require("react"));
-var Tab = import_react50.default.forwardRef(
+var import_react54 = __toESM(require("react"));
+var Tab = import_react54.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_react50.default.useContext(TabsContext);
+    const { activeIndex, setActiveIndex, small } = import_react54.default.useContext(TabsContext);
     const Tag2 = others.href || others.to ? routerLink : "button";
-    const isActive = import_react50.default.useMemo(() => activeIndex === index, [activeIndex, index]);
+    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_react50.default.useCallback(
+    const handleClick = import_react54.default.useCallback(
       (e) => {
         if (!disabled) {
           if (!others.href && !others.to) setActiveIndex(index);
@@ -6631,10 +6752,10 @@ var Tab = import_react50.default.forwardRef(
       },
       [disabled, onClick, index, setActiveIndex]
     );
-    import_react50.default.useEffect(() => {
+    import_react54.default.useEffect(() => {
       if (active) setActiveIndex(index);
     }, [active, setActiveIndex, index]);
-    return /* @__PURE__ */ import_react50.default.createElement(
+    return /* @__PURE__ */ import_react54.default.createElement(
       Tag2,
       {
         ref,
@@ -6650,8 +6771,8 @@ var Tab = import_react50.default.forwardRef(
         onClick: handleClick,
         ...props
       },
-      /* @__PURE__ */ import_react50.default.createElement("div", { className: hashClass(styled, "tab-icon") }, iconName && /* @__PURE__ */ import_react50.default.createElement(Icon_default, { size: small ? "small" : "medium", name: iconName })),
-      label && /* @__PURE__ */ import_react50.default.createElement(Text_default, null, label)
+      /* @__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)
     );
   }
 );
@@ -6660,31 +6781,31 @@ var Tab_default = Tab;
 
 // components/tabs/tab-list/TabList.tsx
 var import_clsx89 = __toESM(require("clsx"));
-var import_react51 = __toESM(require("react"));
-var TabList = import_react51.default.forwardRef(
+var import_react55 = __toESM(require("react"));
+var TabList = import_react55.default.forwardRef(
   ({ children, className, id, testId, align, ...others }, ref) => {
     const { styled } = useTrilogyContext();
-    const TabListRef = import_react51.default.useRef(null);
-    const tabRefs = import_react51.default.useRef([]);
-    const { small } = import_react51.default.useContext(TabsContext);
-    import_react51.default.useImperativeHandle(ref, () => TabListRef.current);
-    const [tabsWidth, setTabsWidth] = import_react51.default.useState(0);
-    const [tabListWidth, setTabListWidth] = import_react51.default.useState(0);
-    const [scrollLeft, setScrollLeft] = import_react51.default.useState(0);
-    const [tabFocused, setTabFocused] = import_react51.default.useState(0);
+    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_react51.useMemo)(() => {
+    const isVisibleArrowLeft = (0, import_react55.useMemo)(() => {
       if (!tabRefs.current.length) return false;
       return scrollLeft > tabRefs.current[0].width / 2;
     }, [tabRefs, scrollLeft]);
-    const isVisibleArrowRight = (0, import_react51.useMemo)(
+    const isVisibleArrowRight = (0, import_react55.useMemo)(
       () => tabListWidth - tabsWidth - scrollLeft > 5,
       [tabListWidth, tabsWidth, scrollLeft]
     );
-    const TabElms = import_react51.default.useMemo(() => {
-      return import_react51.default.Children.map(children, (child, index) => {
-        if (!import_react51.default.isValidElement(child)) return false;
-        return /* @__PURE__ */ import_react51.default.createElement(
+    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(
           Tab_default,
           {
             ref: (el) => tabRefs.current[index] = el == null ? void 0 : el.getBoundingClientRect(),
@@ -6694,7 +6815,7 @@ var TabList = import_react51.default.forwardRef(
         );
       });
     }, [children, tabRefs]);
-    const scrollWithArrow = import_react51.default.useCallback(
+    const scrollWithArrow = import_react55.default.useCallback(
       (direction) => {
         var _a;
         if (tabRefs.current) {
@@ -6706,7 +6827,7 @@ var TabList = import_react51.default.forwardRef(
       },
       [tabRefs.current, tabFocused, TabListRef]
     );
-    const handleScrollList = import_react51.default.useCallback(
+    const handleScrollList = import_react55.default.useCallback(
       (e) => {
         const target = e.target;
         const firstGap = tabRefs.current[0].x + (small ? 16 : 24);
@@ -6718,26 +6839,26 @@ var TabList = import_react51.default.forwardRef(
       },
       [tabRefs, small]
     );
-    const onClickPrev = import_react51.default.useCallback(() => {
+    const onClickPrev = import_react55.default.useCallback(() => {
       isVisibleArrowLeft && scrollWithArrow(-1);
     }, [scrollWithArrow, isVisibleArrowLeft]);
-    const onClickNext = import_react51.default.useCallback(() => {
+    const onClickNext = import_react55.default.useCallback(() => {
       isVisibleArrowRight && scrollWithArrow(1);
     }, [scrollWithArrow, isVisibleArrowRight]);
-    const setWidths = import_react51.default.useCallback(() => {
+    const setWidths = import_react55.default.useCallback(() => {
       if (TabListRef.current) {
         setTabsWidth(TabListRef.current.clientWidth);
         setTabListWidth(TabListRef.current.scrollWidth);
       }
     }, [TabListRef]);
-    import_react51.default.useEffect(() => {
+    import_react55.default.useEffect(() => {
       setWidths();
     }, [setWidths, isVisibleArrowLeft, isVisibleArrowRight]);
-    import_react51.default.useEffect(() => {
+    import_react55.default.useEffect(() => {
       window.addEventListener("resize", setWidths);
       return () => window.removeEventListener("resize", setWidths);
     }, [TabListRef, setWidths]);
-    return /* @__PURE__ */ import_react51.default.createElement(
+    return /* @__PURE__ */ import_react55.default.createElement(
       "div",
       {
         ref: TabListRef,
@@ -6748,7 +6869,7 @@ var TabList = import_react51.default.forwardRef(
         onScroll: handleScrollList,
         ...others
       },
-      isVisibleArrowLeft && /* @__PURE__ */ import_react51.default.createElement(
+      isVisibleArrowLeft && /* @__PURE__ */ import_react55.default.createElement(
         Icon_default,
         {
           "data-arrow-prev": "",
@@ -6759,7 +6880,7 @@ var TabList = import_react51.default.forwardRef(
         }
       ),
       TabElms,
-      isVisibleArrowRight && /* @__PURE__ */ import_react51.default.createElement(
+      isVisibleArrowRight && /* @__PURE__ */ import_react55.default.createElement(
         Icon_default,
         {
           "data-arrow-next": "",
@@ -6777,13 +6898,13 @@ var TabList_default = TabList;
 
 // components/tabs/tab-panels/tab-panel/TabPanel.tsx
 var import_clsx90 = __toESM(require("clsx"));
-var import_react52 = __toESM(require("react"));
-var TabPanel = import_react52.default.forwardRef(({ children, className, testId, ...others }, ref) => {
+var import_react56 = __toESM(require("react"));
+var TabPanel = import_react56.default.forwardRef(({ children, className, testId, ...others }, ref) => {
   const { styled } = useTrilogyContext();
   const { index, ...props } = others;
-  const { activeIndex } = import_react52.default.useContext(TabsContext);
+  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_react52.default.createElement("div", { ref, "data-testid": testId, className: classes, ...props }, children);
+  return /* @__PURE__ */ import_react56.default.createElement("div", { ref, "data-testid": testId, className: classes, ...props }, children);
 });
 TabPanel.displayName = "TabPanel" /* TabPanel */;
 var TabPanel_default = TabPanel;
@@ -6793,13 +6914,13 @@ var tab_panel_default = TabPanel_default;
 
 // components/tabs/tab-panels/TabPanels.tsx
 var import_clsx91 = __toESM(require("clsx"));
-var import_react53 = __toESM(require("react"));
-var TabPanels = import_react53.default.forwardRef(({ children, className, id, testId, ...others }, ref) => {
+var import_react57 = __toESM(require("react"));
+var TabPanels = import_react57.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_react53.default.createElement("div", { ref, id, "data-testid": testId, className: classes, ...others }, import_react53.default.Children.map(children, (child, index) => {
-    if (!import_react53.default.isValidElement(child)) return false;
-    return /* @__PURE__ */ import_react53.default.createElement(tab_panel_default, { ...child.props, index });
+  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 });
   }));
 });
 TabPanels.displayName = "TabPanels" /* TabPanels */;
@@ -6807,8 +6928,8 @@ var TabPanels_default = TabPanels;
 
 // components/tag/Tag.tsx
 var import_clsx92 = __toESM(require("clsx"));
-var import_react54 = __toESM(require("react"));
-var Tag = import_react54.default.forwardRef(
+var import_react58 = __toESM(require("react"));
+var Tag = import_react58.default.forwardRef(
   ({ label, className, id, variant, inverted, small, iconName, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     const tagClassNames = hashClass(
@@ -6822,7 +6943,7 @@ var Tag = import_react54.default.forwardRef(
       )
     );
     const tagIconClassNames = (0, import_clsx92.default)(variant && is(getColorClassName(variant)));
-    return /* @__PURE__ */ import_react54.default.createElement("span", { ref, id, className: tagClassNames, ...others }, iconName && /* @__PURE__ */ import_react54.default.createElement(Icon_default, { className: tagIconClassNames, name: iconName }), label);
+    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);
   }
 );
 Tag.displayName = "Tag" /* Tag */;
@@ -6830,10 +6951,10 @@ var Tag_default = Tag;
 
 // components/tag/list/TagList.tsx
 var import_clsx93 = __toESM(require("clsx"));
-var React104 = __toESM(require("react"));
-var TagList = React104.forwardRef(({ className, id, align, marginless, ...others }, ref) => {
+var React108 = __toESM(require("react"));
+var TagList = React108.forwardRef(({ className, id, align, marginless, ...others }, ref) => {
   const { styled } = useTrilogyContext();
-  return /* @__PURE__ */ React104.createElement(
+  return /* @__PURE__ */ React108.createElement(
     "div",
     {
       ref,
@@ -6863,8 +6984,8 @@ var TagVariant = /* @__PURE__ */ ((TagVariant2) => {
 
 // components/textarea/Textarea.tsx
 var import_clsx94 = __toESM(require("clsx"));
-var import_react55 = __toESM(require("react"));
-var Textarea = import_react55.default.forwardRef(
+var import_react59 = __toESM(require("react"));
+var Textarea = import_react59.default.forwardRef(
   ({
     className,
     id,
@@ -6885,9 +7006,9 @@ var Textarea = import_react55.default.forwardRef(
     iconNameRight,
     ...others
   }, ref) => {
-    const [value, setValue] = (0, import_react55.useState)(defaultValue || "");
+    const [value, setValue] = (0, import_react59.useState)(defaultValue || "");
     const { styled } = useTrilogyContext();
-    (0, import_react55.useEffect)(() => {
+    (0, import_react59.useEffect)(() => {
       setValue(defaultValue || "");
     }, [defaultValue]);
     const wrapperClasses = hashClass(styled, (0, import_clsx94.default)("field textarea-wrapper", className, status && is(status)));
@@ -6898,7 +7019,7 @@ var Textarea = import_react55.default.forwardRef(
       styled,
       (0, import_clsx94.default)("control", iconNameLeft && has("icons-left"), iconNameRight && has("icons-right"))
     );
-    return /* @__PURE__ */ import_react55.default.createElement("div", { id, className: wrapperClasses }, label && /* @__PURE__ */ import_react55.default.createElement("label", { className: hashClass(styled, "textarea-label"), htmlFor: id }, label, " ", required && /* @__PURE__ */ import_react55.default.createElement(Text_default, { markup: "span" /* SPAN */, typo: "has-text-error" /* TEXT_ERROR */ }, "*")), sample && /* @__PURE__ */ import_react55.default.createElement(Text_default, { className: "input-sample", level: 2 /* TWO */, id }, sample), /* @__PURE__ */ import_react55.default.createElement("div", { className: controlClasses }, /* @__PURE__ */ import_react55.default.createElement(
+    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(
       "textarea",
       {
         ref,
@@ -6921,7 +7042,7 @@ var Textarea = import_react55.default.forwardRef(
         required,
         ...others
       }
-    ), iconNameLeft && /* @__PURE__ */ import_react55.default.createElement(Icon_default, { name: iconNameLeft, size: "small", className: "icon-left" }), iconNameRight && /* @__PURE__ */ import_react55.default.createElement(Icon_default, { name: iconNameRight, size: "small", className: "icon-right" }), maxLength && /* @__PURE__ */ import_react55.default.createElement("div", { className: counterClasses }, `${value.length}/${maxLength == null ? void 0 : maxLength.toString()}`)), help && /* @__PURE__ */ import_react55.default.createElement(Text_default, { className: helpClasses }, help));
+    ), 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));
   }
 );
 Textarea.displayName = "Textarea" /* Textarea */;
@@ -6929,15 +7050,15 @@ var Textarea_default = Textarea;
 
 // components/timeline/content/TimelineContent.tsx
 var import_clsx95 = __toESM(require("clsx"));
-var React106 = __toESM(require("react"));
-var TimelineContent = React106.forwardRef(
+var React110 = __toESM(require("react"));
+var TimelineContent = React110.forwardRef(
   ({ children, className, id, heading, content, linkLabel, linkTo, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     const classes = hashClass(styled, (0, import_clsx95.default)("timeline-content", className));
     if (children) {
-      return /* @__PURE__ */ React106.createElement("div", { ref, id, className: classes, ...others }, children);
+      return /* @__PURE__ */ React110.createElement("div", { ref, id, className: classes, ...others }, children);
     }
-    return /* @__PURE__ */ React106.createElement("div", { ref, id, className: classes, ...others }, heading && /* @__PURE__ */ React106.createElement(Text_default, { markup: "p" /* P */ }, heading), content && /* @__PURE__ */ React106.createElement(Text_default, { className: "main-content", markup: "p" /* P */ }, content), linkTo && linkLabel && /* @__PURE__ */ React106.createElement(Link_default, { href: linkTo }, linkLabel));
+    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));
   }
 );
 TimelineContent.displayName = "TimelineContent" /* TimelineContent */;
@@ -6948,14 +7069,14 @@ var content_default3 = TimelineContent_default;
 
 // components/timeline/item/TimelineItem.tsx
 var import_clsx96 = __toESM(require("clsx"));
-var React107 = __toESM(require("react"));
-var TimelineItem = React107.forwardRef(({ className, id, done, active, cancel, ...others }, ref) => {
+var React111 = __toESM(require("react"));
+var TimelineItem = React111.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)
   );
-  return /* @__PURE__ */ React107.createElement("div", { ref, id, className: classes, ...others });
+  return /* @__PURE__ */ React111.createElement("div", { ref, id, className: classes, ...others });
 });
 TimelineItem.displayName = "TimelineItem" /* TimelineItem */;
 var TimelineItem_default = TimelineItem;
@@ -6965,8 +7086,8 @@ var item_default5 = TimelineItem_default;
 
 // components/timeline/marker/TimelineMarker.tsx
 var import_clsx97 = __toESM(require("clsx"));
-var React108 = __toESM(require("react"));
-var TimelineMarker = React108.forwardRef(({
+var React112 = __toESM(require("react"));
+var TimelineMarker = React112.forwardRef(({
   className,
   id,
   iconClassname,
@@ -6976,7 +7097,7 @@ var TimelineMarker = React108.forwardRef(({
   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__ */ React108.createElement("div", { ref, id, className: classes, ...others }, /* @__PURE__ */ React108.createElement("div", { className: "card-header-icon" }, /* @__PURE__ */ React108.createElement(Icon_default, { className: iconClasses, name: iconName, size: "small" /* SMALL */ })));
+  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 */ })));
 });
 TimelineMarker.displayName = "TimelineMarker" /* TimelineMarker */;
 var TimelineMarker_default = TimelineMarker;
@@ -6986,18 +7107,18 @@ var marker_default = TimelineMarker_default;
 
 // components/timeline/Timeline.tsx
 var import_clsx98 = __toESM(require("clsx"));
-var React109 = __toESM(require("react"));
-var Timeline = React109.forwardRef(({ className, id, horizontal, ...others }, ref) => {
+var React113 = __toESM(require("react"));
+var Timeline = React113.forwardRef(({ className, id, horizontal, ...others }, ref) => {
   const { styled } = useTrilogyContext();
   const classes = hashClass(styled, (0, import_clsx98.default)("timeline", horizontal && is("horizontal"), className));
-  return /* @__PURE__ */ React109.createElement("div", { ref, id, className: classes, ...others });
+  return /* @__PURE__ */ React113.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 React110 = __toESM(require("react"));
+var React114 = __toESM(require("react"));
 
 // components/view/ViewProps/index.ts
 var ViewMarkup = /* @__PURE__ */ ((ViewMarkup2) => {
@@ -7022,7 +7143,7 @@ var ViewMarkup = /* @__PURE__ */ ((ViewMarkup2) => {
 })(ViewMarkup || {});
 
 // components/view/View.tsx
-var View = React110.forwardRef(({
+var View = React114.forwardRef(({
   children,
   style,
   className,
@@ -7059,7 +7180,7 @@ var View = React110.forwardRef(({
       className
     )
   );
-  return /* @__PURE__ */ React110.createElement(
+  return /* @__PURE__ */ React114.createElement(
     Tag2,
     {
       ref,
@@ -7098,46 +7219,6 @@ var JustifyContent = /* @__PURE__ */ ((JustifyContent2) => {
   JustifyContent2["CENTER"] = "center";
   return JustifyContent2;
 })(JustifyContent || {});
-
-// context/provider/index.tsx
-var import_react56 = __toESM(require("react"));
-
-// version.ts
-var version = "0.0.23-esm-cjs";
-
-// version.json
-var version_default = {
-  VERSION: "410"
-};
-
-// context/provider/index.tsx
-var getHrefFromAssetUri = (assetUrl, theme, mangled) => {
-  return assetUrl.replace("%VERSION%", version).replace("%THEME%", theme).replace("%MANGLED%", mangled ? "-mangled" : "");
-};
-var injectTrilogy = (mangled, id, theme, assetUrl) => {
-  const link = document.createElement("link");
-  link.type = "text/css";
-  link.rel = "stylesheet";
-  link.href = getHrefFromAssetUri(assetUrl, theme, mangled);
-  link.id = id;
-  document == null ? void 0 : document.head.appendChild(link);
-};
-var TrilogyProvider = ({
-  children,
-  mangled = false,
-  injectTrilogyAssets = false,
-  id = "trilogy",
-  theme = "",
-  hash: HASH = version_default.VERSION,
-  assetUrl = ""
-}) => {
-  const [styled, setStyled] = import_react56.default.useState(mangled);
-  const [hash, setHash] = import_react56.default.useState(HASH);
-  (0, import_react56.useLayoutEffect)(() => {
-    injectTrilogyAssets && injectTrilogy(mangled, id, theme, assetUrl);
-  }, []);
-  return /* @__PURE__ */ import_react56.default.createElement(TrilogyContext.Provider, { value: { styled, setStyled, hash, setHash } }, children);
-};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
@@ -7267,6 +7348,7 @@ var TrilogyProvider = ({
   SpacerSize,
   SpacerSizeValues,
   SpacingMatrixMode,
+  StatesContext,
   StatusState,
   Step,
   StepMarkup,
@@ -7308,6 +7390,9 @@ var TrilogyProvider = ({
   TrilogyColor,
   TrilogyContext,
   TrilogyProvider,
+  TrilogyProviderStyled,
+  TrilogyThemeContext,
+  TrilogyThemeProvider,
   TypographyAlign,
   TypographyBold,
   TypographyColor,
@@ -7318,6 +7403,7 @@ var TrilogyProvider = ({
   ViewMarkup,
   classify,
   colors,
+  defaultTheme,
   getAlignClassName,
   getAlignStyle,
   getBackgroundClassName,