@trilogy-ds/react 0.0.21-esm-cjs → 0.0.25-esm-cjs

package/lib/components/index.js

@@ -145,7 +145,7 @@ __export(components_exports, {
   Select: () => Select_default,
   SelectOption: () => option_default,
   SelectStatus: () => SelectStatus,
-  Skeleton: () => Skeleton_native_default,
+  Skeleton: () => Skeleton_default,
   Spacer: () => Spacer_default,
   SpacerSize: () => SpacerSize,
   SpacerSizeValues: () => SpacerSizeValues,
@@ -193,9 +193,9 @@ __export(components_exports, {
 module.exports = __toCommonJS(components_exports);
 
 // components/accordion/Accordion.tsx
-var React2 = __toESM(require("react"));
+var React5 = __toESM(require("react"));
 
-// context/index.tsx
+// context/context/index.tsx
 var React = __toESM(require("react"));
 var TrilogyContext = React.createContext({
   styled: false,
@@ -209,6 +209,33 @@ var useTrilogyContext = () => {
   return context;
 };
 
+// context/provider/index.tsx
+var import_react = __toESM(require("react"));
+
+// 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 React3 = __toESM(require("react"));
+
+// context/providerTheme/index.tsx
+var import_react3 = __toESM(require("react"));
+var defaultTheme = {
+  icons: {},
+  colors: {},
+  fontFamily: {}
+};
+var defaultContextValue = {
+  theme: defaultTheme,
+  setTheme: () => void 0
+};
+var TrilogyThemeContext = import_react3.default.createContext(defaultContextValue);
+
 // helpers/hashClassesHelpers/index.tsx
 var hashClass = (addHash = false, classes) => {
   const { hash, styled } = useTrilogyContext();
@@ -221,19 +248,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 = React5.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__ */ React5.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_react4 = __toESM(require("react"));
+var AccordionItem = import_react4.default.forwardRef(
+  ({ open, className, children, id = import_react4.default.useId(), onClick, disabled, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     const classes = hashClass(styled, (0, import_clsx2.default)("accordion-item", className));
     const ariaProps = {};
@@ -241,7 +268,7 @@ var AccordionItem = import_react.default.forwardRef(
       ariaProps["tabIndex"] = -1;
       ariaProps["aria-disabled"] = true;
     }
-    return /* @__PURE__ */ import_react.default.createElement(
+    return /* @__PURE__ */ import_react4.default.createElement(
       "details",
       {
         open,
@@ -276,11 +303,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 React7 = __toESM(require("react"));
+var AccordionBody = React7.forwardRef(
   ({ children, className, id, ...others }, ref) => {
     const { styled } = useTrilogyContext();
-    return /* @__PURE__ */ React4.createElement(
+    return /* @__PURE__ */ React7.createElement(
       "div",
       {
         ref,
@@ -300,11 +327,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 React8 = __toESM(require("react"));
+var AccordionHeader = React8.forwardRef(
   ({ children, className, id, ...others }, ref) => {
     const { styled } = useTrilogyContext();
-    return /* @__PURE__ */ React5.createElement(
+    return /* @__PURE__ */ React8.createElement(
       "summary",
       {
         ref,
@@ -345,21 +372,8 @@ var values = (obj) => Object.values(obj);
 var toArrayObject = () => assign((values(SSRObjectDefined), SSRObjectDefined));
 var SSRObject = toArrayObject();
 
-// 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_react5 = require("react");
 var TrilogyColor = /* @__PURE__ */ ((TrilogyColor4) => {
   TrilogyColor4["BACKGROUND"] = "WHITE";
   TrilogyColor4["MAIN"] = "MAIN";
@@ -435,7 +449,7 @@ var getButtonVariantClassName = (trilogyColor) => {
 };
 var getColorStyle = (trilogyColor) => {
   if (typeof navigator !== "undefined" && navigator.userAgent === void 0) {
-    const { theme } = (0, import_react3.useContext)(TrilogyThemeContext);
+    const { theme } = (0, import_react5.useContext)(TrilogyThemeContext);
     const colorsStyle = (theme == null ? void 0 : theme.colors) || colors;
     const colorArray = colorsStyle[trilogyColor] || colorsStyle.default;
     if (trilogyColor === "transparent") return "transparent";
@@ -513,8 +527,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 React9 = __toESM(require("react"));
+var Icon = React9.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 */)) || "";
@@ -533,7 +547,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__ */ React9.createElement("span", { id, onClick: onClick && onClick, className: classes, ...others, ref }, /* @__PURE__ */ React9.createElement("i", { className: hashClass(styled, (0, import_clsx5.default)(name)), "aria-hidden": "true" }));
   }
 );
 Icon.displayName = "Icon" /* Icon */;
@@ -620,7 +634,7 @@ var IconName = /* @__PURE__ */ ((IconName4) => {
 })(IconName || {});
 
 // components/text/Text.tsx
-var React8 = __toESM(require("react"));
+var React10 = __toESM(require("react"));
 var import_clsx6 = __toESM(require("clsx"));
 
 // components/text/TextEnum.ts
@@ -638,7 +652,7 @@ var TextMarkup = /* @__PURE__ */ ((TextMarkup2) => {
 })(TextMarkup || {});
 
 // components/text/Text.tsx
-var Text = React8.forwardRef(({
+var Text = React10.forwardRef(({
   level,
   markup,
   children,
@@ -686,7 +700,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__ */ React10.createElement(
     Tag2,
     {
       ref,
@@ -704,7 +718,7 @@ var Text_default = Text;
 
 // components/title/Title.tsx
 var import_clsx7 = __toESM(require("clsx"));
-var import_react4 = __toESM(require("react"));
+var import_react6 = __toESM(require("react"));
 
 // components/title/TitleEnum.ts
 var TitleLevels = /* @__PURE__ */ ((TitleLevels2) => {
@@ -753,7 +767,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_react6.default.forwardRef(({
   level = 1 /* ONE */,
   markup,
   children,
@@ -790,7 +804,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_react6.default.createElement(Tag2, { ref, id, "aria-label": accessibilityLabel, onClick, className: getClassname(), ...others }, children);
 });
 Title.displayName = "Title" /* Title */;
 var Title_default = Title;
@@ -834,8 +848,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 React13 = __toESM(require("react"));
+var import_react8 = require("react");
 
 // components/alert/AlertProps.ts
 var ToasterAlertPosition = /* @__PURE__ */ ((ToasterAlertPosition2) => {
@@ -850,9 +864,9 @@ var ToasterAlertFloat = /* @__PURE__ */ ((ToasterAlertFloat2) => {
 })(ToasterAlertFloat || {});
 
 // components/alert/context/ToasterContext.tsx
-var import_react5 = __toESM(require("react"));
+var import_react7 = __toESM(require("react"));
 var emptyFn = () => 0;
-var ToasterContext = import_react5.default.createContext({ show: emptyFn, hide: emptyFn });
+var ToasterContext = import_react7.default.createContext({ show: emptyFn, hide: emptyFn });
 var ToasterContext_default = ToasterContext;
 
 // components/alert/context/index.ts
@@ -888,7 +902,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__ */ React13.createElement(
     "div",
     {
       id,
@@ -901,24 +915,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__ */ React13.createElement(React13.Fragment, null, iconName && /* @__PURE__ */ React13.createElement(Icon_default, { name: iconName, size: "small" /* SMALL */ }), /* @__PURE__ */ React13.createElement("div", { className: hashClass(styled, (0, import_clsx8.default)("body")) }, title && /* @__PURE__ */ React13.createElement(Title_default, { markup, level: 6 /* SIX */ }, title), description && /* @__PURE__ */ React13.createElement(Text_default, null, description), toasterChildren && toasterChildren), closable && /* @__PURE__ */ React13.createElement(Icon_default, { onClick: closable, className: "toaster-close", name: "tri-times" /* TIMES */, size: "small" /* SMALL */ }))
   ) : null;
 };
-var Alert = React11.forwardRef(
+var Alert = React13.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 = React13.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__ */ React13.createElement(
         "div",
         {
           ref,
@@ -930,18 +944,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__ */ React13.createElement(Icon_default, { name: iconAlert }),
+        /* @__PURE__ */ React13.createElement("div", { className: hashClass(styled, (0, import_clsx8.default)("body")) }, title && typeof title.valueOf() === "string" ? /* @__PURE__ */ React13.createElement(Title_default, { markup, level: 6 /* SIX */ }, title) : title, description && typeof description.valueOf() === "string" ? /* @__PURE__ */ React13.createElement(Text_default, { level: 2 /* TWO */ }, description) : description)
       );
     }
-    return /* @__PURE__ */ React11.createElement("div", null);
+    return /* @__PURE__ */ React13.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_react8.useState)(null);
+  const [duration, setDuration] = (0, import_react8.useState)(5e3);
+  const timeRef = (0, import_react8.useRef)(null);
+  const showToast = React13.useCallback(
     (params) => {
       var _a;
       setToasterState(params);
@@ -951,7 +965,7 @@ var ToasterAlertProvider = ({ children }) => {
     },
     [timeRef]
   );
-  (0, import_react6.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     timeRef.current = setTimeout(() => {
       var _a;
       (_a = toasterState == null ? void 0 : toasterState.onHide) == null ? void 0 : _a.call(toasterState);
@@ -961,7 +975,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__ */ React13.createElement(context_default.Provider, { value: { show: showToast, hide: () => null } }, children, toasterState && /* @__PURE__ */ React13.createElement(
     ToasterAlert,
     {
       title: toasterState.title,
@@ -999,7 +1013,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_react12 = __toESM(require("react"));
 
 // objects/facets/Alignable/index.ts
 var getAlignClassName = (alignType) => {
@@ -1066,7 +1080,7 @@ var getVariantClassName = (variantType) => {
 };
 
 // objects/Typography/TypographyBold/index.tsx
-var import_react7 = require("react");
+var import_react9 = require("react");
 
 // components/input/InputEnum.ts
 var InputType = /* @__PURE__ */ ((InputType2) => {
@@ -1206,24 +1220,24 @@ var InputKeyboardType = /* @__PURE__ */ ((InputKeyboardType2) => {
 
 // components/input/gauge/InputGauge.tsx
 var import_clsx9 = __toESM(require("clsx"));
-var import_react9 = __toESM(require("react"));
+var import_react11 = __toESM(require("react"));
 
 // components/input/gauge/hook/useGauge.tsx
-var import_react8 = __toESM(require("react"));
+var import_react10 = __toESM(require("react"));
 var useGauge = ({ validationRules, inputValue, securityRules }) => {
   var _a, _b;
-  const [points, setPoints] = import_react8.default.useState(0);
+  const [points, setPoints] = import_react10.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_react10.default.useState(initStateVerifies);
+  const [isSpecialCharsVerify, setIsSpecialCharsVerify] = import_react10.default.useState(initStateVerifies);
+  const [isNumberVerify, setIsNumberVerify] = import_react10.default.useState(initStateVerifies);
+  const [isUppercaseVerify, setIsUppercaseVerify] = import_react10.default.useState(initStateVerifies);
+  const [isLowerercaseVerify, setisLowerercaseVerify] = import_react10.default.useState(initStateVerifies);
+  const nbAllVerifies = import_react10.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_react10.default.useMemo(
     () => securityRules && securityRules.map(({ label, patternValidator, dataAttribute }) => ({
       label,
       validate: !!(patternValidator == null ? void 0 : patternValidator.test(inputValue)),
@@ -1231,7 +1245,7 @@ var useGauge = ({ validationRules, inputValue, securityRules }) => {
     })),
     [inputValue, securityRules]
   );
-  const calcPoints = import_react8.default.useMemo(() => {
+  const calcPoints = import_react10.default.useMemo(() => {
     if (validationRules) {
       return Number((points / nbAllVerifies * 100).toFixed(0));
     }
@@ -1241,7 +1255,7 @@ var useGauge = ({ validationRules, inputValue, securityRules }) => {
     }
     return 0;
   }, [points, nbAllVerifies, rules, validationRules, securityRules]);
-  const widthGauge = import_react8.default.useMemo(() => {
+  const widthGauge = import_react10.default.useMemo(() => {
     if (calcPoints <= 50 && calcPoints > 0) return "50%";
     if (calcPoints <= 99 && calcPoints > 50) return "75%";
     if (calcPoints === 100) return "100%";
@@ -1253,7 +1267,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_react10.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):
@@ -1266,7 +1280,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_react10.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) || "";
@@ -1298,7 +1312,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_react11.useId)();
   const {
     widthGauge,
     colorGauge,
@@ -1310,14 +1324,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_react11.default.createElement("div", { "data-testid": "security-gauge", className: hashClass(styled, (0, import_clsx9.default)("security-gauge-container")) }, /* @__PURE__ */ import_react11.default.createElement("div", { className: hashClass(styled, (0, import_clsx9.default)("security-gauge")) }, /* @__PURE__ */ import_react11.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_react11.default.createElement("div", { className: hashClass(styled, (0, import_clsx9.default)("security-gauge-verifies")) }, validationRules && /* @__PURE__ */ import_react11.default.createElement(import_react11.default.Fragment, null, /* @__PURE__ */ import_react11.default.createElement(
     DataVerify,
     {
       display: !!(validationRules == null ? void 0 : validationRules.length),
@@ -1328,7 +1342,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_react11.default.createElement(
     DataVerify,
     {
       display: !!(validationRules == null ? void 0 : validationRules.uppercase),
@@ -1339,7 +1353,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_react11.default.createElement(
     DataVerify,
     {
       display: !!(validationRules == null ? void 0 : validationRules.specialChars),
@@ -1350,7 +1364,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_react11.default.createElement(
     DataVerify,
     {
       display: !!(validationRules == null ? void 0 : validationRules.lowercase),
@@ -1361,7 +1375,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_react11.default.createElement(
     DataVerify,
     {
       display: !!(validationRules == null ? void 0 : validationRules.number),
@@ -1372,7 +1386,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_react11.default.createElement(
     DataVerify,
     {
       key: `${id}_${rule.label}`,
@@ -1395,18 +1409,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_react11.default.createElement("div", { ...dataAttribute, className: hashClass(styled, (0, import_clsx9.default)("security", classes)) }, /* @__PURE__ */ import_react11.default.createElement(Icon_default, { color, name: iconName, size: "smaller" /* SMALLER */ }), /* @__PURE__ */ import_react11.default.createElement("span", null, type));
 };
 var InputGauge_default = InputGauge;
 
 // components/input/Input.tsx
-var Input = import_react10.default.forwardRef(
+var Input = import_react12.default.forwardRef(
   ({
     forceControl,
     label,
     sample,
     className,
-    id = import_react10.default.useId(),
+    id = import_react12.default.useId(),
     disabled,
     onChange,
     onKeyPress,
@@ -1445,19 +1459,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_react12.useId)();
+    const idSample = (0, import_react12.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_react12.useState)(defaultValue != null ? defaultValue : "");
+    const [isFocused, setIsFocused] = (0, import_react12.useState)(focused != null ? focused : false);
+    const [isDirty, setIsDirty] = (0, import_react12.useState)(false);
+    const [isTouched, setIsTouched] = (0, import_react12.useState)(false);
+    const [localStatus, setLocalStatus] = (0, import_react12.useState)(status || "default" /* DEFAULT */);
+    const [inputType, setInputType] = (0, import_react12.useState)(type);
+    const [isShowPwd, setIsShowPwd] = (0, import_react12.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");
@@ -1476,7 +1490,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_react12.useCallback)((e) => {
       const target = e.target;
       return {
         inputName: target.name,
@@ -1487,10 +1501,10 @@ var Input = import_react10.default.forwardRef(
         preventDefault: () => e.preventDefault()
       };
     }, []);
-    const IconWrapper = (0, import_react10.useCallback)(
+    const IconWrapper = (0, import_react12.useCallback)(
       ({ className: className2, name: name2, color, closeIconSearch, onPress, srOnly, showPassword }) => {
         const Markup = showPassword ? "button" : "div";
-        return /* @__PURE__ */ import_react10.default.createElement(
+        return /* @__PURE__ */ import_react12.default.createElement(
           Markup,
           {
             ...showPassword && { "data-show-pwd": true, type: "button" },
@@ -1501,8 +1515,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_react12.default.createElement(Icon_default, { className: className2, name: name2, size: "small" /* SMALL */, color }),
+          _value && _value.length > 0 && closeIconSearch && /* @__PURE__ */ import_react12.default.createElement(
             Icon_default,
             {
               onClick: () => setValue(""),
@@ -1511,34 +1525,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_react12.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_react12.useEffect)(() => {
       var _a;
       setValue((_a = value != null ? value : defaultValue) != null ? _a : "");
     }, [value, defaultValue]);
-    (0, import_react10.useEffect)(() => {
+    (0, import_react12.useEffect)(() => {
       setIsFocused(focused != null ? focused : false);
     }, [focused]);
-    (0, import_react10.useEffect)(() => {
+    (0, import_react12.useEffect)(() => {
       if (isFocused) setIsDirty(true);
       else if (isDirty) setIsTouched(true);
     }, [isFocused, isDirty]);
-    (0, import_react10.useEffect)(() => {
+    (0, import_react12.useEffect)(() => {
       if (!validator || !isTouched) return;
       setLocalStatus(validator(_value));
     }, [isFocused, isTouched]);
-    (0, import_react10.useEffect)(() => {
+    (0, import_react12.useEffect)(() => {
       setLocalStatus(status || "default" /* DEFAULT */);
     }, [status]);
-    (0, import_react10.useEffect)(() => {
+    (0, import_react12.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_react12.default.createElement("div", { className: wrapperClasses, "data-has-gauge": securityGauge ? true : void 0 }, label && /* @__PURE__ */ import_react12.default.createElement("label", { className: inputLabelClasses, htmlFor: id }, label, " ", required && /* @__PURE__ */ import_react12.default.createElement(Text_default, { markup: "span" /* SPAN */, typo: "has-text-error" /* TEXT_ERROR */ }, "*")), sample && /* @__PURE__ */ import_react12.default.createElement(Text_default, { className: "input-sample", level: 2 /* TWO */, id: idSample }, sample), /* @__PURE__ */ import_react12.default.createElement("div", { className: controlClasses }, /* @__PURE__ */ import_react12.default.createElement(
       "input",
       {
         "aria-describedby": `${idHelp} ${idSample}`,
@@ -1603,7 +1617,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_react12.default.createElement(IconWrapper, { name: iconNameLeft }), (iconNameLeft || type === "search" /* SEARCH */) && /* @__PURE__ */ import_react12.default.createElement(IconWrapper, { className: "icon-left", name: iconNameLeft || "tri-search" /* SEARCH */ }), iconNameRight && !loading && type !== "password" /* PASSWORD */ && /* @__PURE__ */ import_react12.default.createElement(IconWrapper, { className: "icon-right", name: iconNameRight }), !loading && type === "password" /* PASSWORD */ && /* @__PURE__ */ import_react12.default.createElement(
       IconWrapper,
       {
         showPassword: true,
@@ -1620,7 +1634,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_react12.default.createElement("span", { className: loader })), help && /* @__PURE__ */ import_react12.default.createElement(Text_default, { className: helpClasses, id: idHelp }, help), securityGauge && type === "password" /* PASSWORD */ && /* @__PURE__ */ import_react12.default.createElement(
       InputGauge_default,
       {
         validationRules,
@@ -1636,7 +1650,7 @@ var Input_default = Input;
 
 // components/autocomplete/AutoComplete.tsx
 var import_clsx13 = __toESM(require("clsx"));
-var import_react11 = __toESM(require("react"));
+var import_react13 = __toESM(require("react"));
 
 // components/autocomplete/Autocomplete.helpers.ts
 var getLabel = (data) => typeof data === "string" ? data : data["label"];
@@ -1654,7 +1668,7 @@ var defaultMatching = (data, value) => {
 
 // components/autocomplete/item/AutoCompleteItem.tsx
 var import_clsx11 = __toESM(require("clsx"));
-var React15 = __toESM(require("react"));
+var React17 = __toESM(require("react"));
 var AutoCompleteItem = ({
   children,
   suggestionSelected,
@@ -1664,8 +1678,8 @@ var AutoCompleteItem = ({
   id
 }) => {
   const { styled } = useTrilogyContext();
-  const [isActive, setIsActive] = React15.useState(false);
-  return /* @__PURE__ */ React15.createElement(
+  const [isActive, setIsActive] = React17.useState(false);
+  return /* @__PURE__ */ React17.createElement(
     "div",
     {
       id,
@@ -1686,10 +1700,10 @@ var item_default = AutoCompleteItem_default;
 
 // components/autocomplete/menu/AutoCompleteMenu.tsx
 var import_clsx12 = __toESM(require("clsx"));
-var React16 = __toESM(require("react"));
+var React18 = __toESM(require("react"));
 var AutoCompleteMenu = ({ children, className, id, absolute, fullwidth, testId }) => {
   const { styled } = useTrilogyContext();
-  return /* @__PURE__ */ React16.createElement(
+  return /* @__PURE__ */ React18.createElement(
     "div",
     {
       id,
@@ -1754,17 +1768,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_react13.useState)(null);
+  const [_inputValue, setInputValue] = (0, import_react13.useState)(value != null ? value : "");
+  const [activeItem, setActiveItem] = (0, import_react13.useState)(0);
+  const [isAutocompleteMenuVisible, setIsAutocompleteMenuVisible] = (0, import_react13.useState)(displayMenu || false);
+  const [search, setSearch] = (0, import_react13.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_react13.useEffect)(() => {
     setInputValue(value || "");
   }, [value]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     setActiveItem(0);
     if (data == null ? void 0 : data.length) {
       if (matching) {
@@ -1775,7 +1789,7 @@ var AutoCompleteRef = ({
       setItemSelected(null);
     }
   }, [_inputValue]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     setSearch(matching(data, _inputValue));
   }, [data]);
   const onTextChanged = async (e) => {
@@ -1842,7 +1856,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_react13.default.createElement("div", { className: autocompleteContainerClasses }, /* @__PURE__ */ import_react13.default.createElement(
     Input_default,
     {
       id,
@@ -1871,7 +1885,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_react13.default.createElement("div", { className: autocompleteClasses }, search.length > 0 && /* @__PURE__ */ import_react13.default.createElement(menu_default, { absolute: absoluteMenu, fullwidth: fullwidthMenu, className: classNameMenu }, search.map((item, i) => /* @__PURE__ */ import_react13.default.createElement(
     item_default,
     {
       active: activeItem === i,
@@ -1883,25 +1897,25 @@ var AutoCompleteRef = ({
   )))));
 };
 AutoCompleteRef.displayName = "AutoComplete" /* AutoComplete */;
-var AutoComplete = import_react11.default.forwardRef(AutoCompleteRef);
+var AutoComplete = import_react13.default.forwardRef(AutoCompleteRef);
 var AutoComplete_default = AutoComplete;
 
 // components/autolayout/AutoLayout/AutoLayout.tsx
-var React18 = __toESM(require("react"));
+var React20 = __toESM(require("react"));
 var AutoLayout = ({ children }) => {
-  return /* @__PURE__ */ React18.createElement("div", { className: "autolayout" }, children);
+  return /* @__PURE__ */ React20.createElement("div", { className: "autolayout" }, children);
 };
 var AutoLayout_default = AutoLayout;
 
 // components/autolayout/AutoLayoutWrapper/index.tsx
-var React19 = __toESM(require("react"));
+var React21 = __toESM(require("react"));
 var AutoLayoutWrapper = ({ autolayout = true, children }) => {
   if (autolayout === true) {
-    return /* @__PURE__ */ React19.createElement(AutoLayout_default, null, children);
+    return /* @__PURE__ */ React21.createElement(AutoLayout_default, null, children);
   } else if (autolayout) {
-    return /* @__PURE__ */ React19.createElement(AutoLayout_default, { matrix: autolayout }, children);
+    return /* @__PURE__ */ React21.createElement(AutoLayout_default, { matrix: autolayout }, children);
   } else {
-    return /* @__PURE__ */ React19.createElement(React19.Fragment, null, children);
+    return /* @__PURE__ */ React21.createElement(React21.Fragment, null, children);
   }
 };
 var AutoLayoutWrapper_default = AutoLayoutWrapper;
@@ -1969,8 +1983,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 React22 = __toESM(require("react"));
+var Badge = React22.forwardRef(
   ({ className, children, id, label, inverted, onClick, variant, position, status, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     const classes = hashClass(
@@ -2005,7 +2019,7 @@ var Badge = React20.forwardRef(
       default:
         break;
     }
-    const simpleBadge = status && iconName && iconColor ? /* @__PURE__ */ React20.createElement(
+    const simpleBadge = status && iconName && iconColor ? /* @__PURE__ */ React22.createElement(
       Icon_default,
       {
         ref,
@@ -2017,7 +2031,7 @@ var Badge = React20.forwardRef(
         id,
         ...others
       }
-    ) : /* @__PURE__ */ React20.createElement(
+    ) : /* @__PURE__ */ React22.createElement(
       "span",
       {
         ref,
@@ -2032,7 +2046,7 @@ var Badge = React20.forwardRef(
       label
     );
     if (children) {
-      return /* @__PURE__ */ React20.createElement("span", { className: "badge-container" }, children, simpleBadge);
+      return /* @__PURE__ */ React22.createElement("span", { className: "badge-container" }, children, simpleBadge);
     }
     return simpleBadge;
   }
@@ -2062,8 +2076,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_react14 = __toESM(require("react"));
+var Box = import_react14.default.forwardRef(
   ({
     inverted,
     children,
@@ -2105,7 +2119,7 @@ var Box = import_react12.default.forwardRef(
     const hoverStyle = {
       cursor: "pointer"
     };
-    return /* @__PURE__ */ import_react12.default.createElement(
+    return /* @__PURE__ */ import_react14.default.createElement(
       Tag2,
       {
         ref,
@@ -2135,8 +2149,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 React24 = __toESM(require("react"));
+var BoxContent = React24.forwardRef(
   ({ children, className, id, backgroundColor, backgroundSrc, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     const classes = hashClass(
@@ -2148,7 +2162,7 @@ var BoxContent = React22.forwardRef(
         className
       )
     );
-    return /* @__PURE__ */ React22.createElement(
+    return /* @__PURE__ */ React24.createElement(
       "div",
       {
         ref,
@@ -2173,11 +2187,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 React25 = __toESM(require("react"));
+var BoxFooter = React25.forwardRef(
   ({ className, children, backgroundColor, id, ...others }, ref) => {
     const { styled } = useTrilogyContext();
-    return /* @__PURE__ */ React23.createElement(
+    return /* @__PURE__ */ React25.createElement(
       "div",
       {
         ref,
@@ -2200,8 +2214,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 React26 = __toESM(require("react"));
+var BoxHeader = React26.forwardRef(
   ({ children, className, id, align, variant, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     let alignClass = null;
@@ -2212,7 +2226,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__ */ React26.createElement("div", { ref, id, className: classes, ...others }, children && typeof children.valueOf() === "string" ? /* @__PURE__ */ React26.createElement("p", null, children) : children);
   }
 );
 BoxHeader.displayName = "BoxHeader" /* BoxHeader */;
@@ -2223,11 +2237,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 React27 = __toESM(require("react"));
+var BoxTableContainer = React27.forwardRef(
   ({ className, testId, ...others }, ref) => {
     const { styled } = useTrilogyContext();
-    return /* @__PURE__ */ React25.createElement(
+    return /* @__PURE__ */ React27.createElement(
       "div",
       {
         ref,
@@ -2246,11 +2260,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 React28 = __toESM(require("react"));
+var BoxItem = React28.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__ */ React28.createElement("div", { ref, id, className: hashClass(styled, (0, import_clsx20.default)("box-item", className)), ...others }, children);
   }
 );
 BoxItem.displayName = "BoxItem" /* BoxItem */;
@@ -2273,11 +2287,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 React29 = __toESM(require("react"));
+var Breadcrumb = React29.forwardRef(
   ({ children, className, id, ...others }, ref) => {
     const { styled } = useTrilogyContext();
-    return /* @__PURE__ */ React27.createElement(
+    return /* @__PURE__ */ React29.createElement(
       "nav",
       {
         ref,
@@ -2287,7 +2301,7 @@ var Breadcrumb = React27.forwardRef(
         "aria-label": import_locales2.breadcrumbLocale.accessibilityLabel,
         ...others
       },
-      /* @__PURE__ */ React27.createElement("ul", null, children)
+      /* @__PURE__ */ React29.createElement("ul", null, children)
     );
   }
 );
@@ -2296,8 +2310,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 React30 = __toESM(require("react"));
+var Link = React30.forwardRef(
   ({
     children,
     className,
@@ -2318,7 +2332,7 @@ var Link = React28.forwardRef(
     if (routerLink && to) {
       const RouterLink = routerLink ? routerLink : "a";
       const RouterLinkTrilogy = () => {
-        return /* @__PURE__ */ React28.createElement(
+        return /* @__PURE__ */ React30.createElement(
           RouterLink,
           {
             ref,
@@ -2335,10 +2349,10 @@ var Link = React28.forwardRef(
           children
         );
       };
-      return /* @__PURE__ */ React28.createElement(RouterLinkTrilogy, null);
+      return /* @__PURE__ */ React30.createElement(RouterLinkTrilogy, null);
     }
     const LinkTrilogy = () => {
-      return /* @__PURE__ */ React28.createElement(
+      return /* @__PURE__ */ React30.createElement(
         "a",
         {
           ref,
@@ -2353,10 +2367,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__ */ React30.createElement(React30.Fragment, null, /* @__PURE__ */ React30.createElement("span", null, children), /* @__PURE__ */ React30.createElement(Icon_default, { name: iconName, size: "small" /* SMALL */ })) : children
       );
     };
-    return /* @__PURE__ */ React28.createElement(LinkTrilogy, null);
+    return /* @__PURE__ */ React30.createElement(LinkTrilogy, null);
   }
 );
 Link.displayName = "Link" /* Link */;
@@ -2364,15 +2378,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 React31 = __toESM(require("react"));
+var BreadcrumbItem = React31.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__ */ React31.createElement("li", { ref, id, "data-testid": testId, onClick, "aria-current": active ? "page" : void 0 }, /* @__PURE__ */ React31.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__ */ React31.createElement("li", { ref, id, onClick, "aria-current": active ? "page" : void 0 }, active ? children : /* @__PURE__ */ React31.createElement(Link_default, { href, ...others }, children));
   }
 );
 BreadcrumbItem.displayName = "BreadcrumbItem" /* BreadcrumbItem */;
@@ -2380,7 +2394,7 @@ var BreadcrumbItem_default = BreadcrumbItem;
 
 // components/button/Button.tsx
 var import_clsx24 = __toESM(require("clsx"));
-var import_react13 = __toESM(require("react"));
+var import_react15 = __toESM(require("react"));
 
 // components/button/ButtonEnum.ts
 var ButtonMarkup = /* @__PURE__ */ ((ButtonMarkup2) => {
@@ -2404,7 +2418,7 @@ var ButtonVariant = /* @__PURE__ */ ((ButtonVariant3) => {
 })(ButtonVariant || {});
 
 // components/button/Button.tsx
-var Button = import_react13.default.forwardRef(
+var Button = import_react15.default.forwardRef(
   ({
     markup,
     loading,
@@ -2442,7 +2456,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_react15.default.createElement(
         "button",
         {
           ref,
@@ -2458,12 +2472,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_react15.default.createElement(Icon_default, { className: !children ? "is-marginless" : "", name: iconName }),
         children
       );
     }
     if (Tag2 === "input") {
-      return /* @__PURE__ */ import_react13.default.createElement(
+      return /* @__PURE__ */ import_react15.default.createElement(
         "input",
         {
           ref,
@@ -2484,9 +2498,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_react15.default.createElement(RouterLink, { ref, "aria-label": accessibilityLabel, to, className: classes, ...others }, iconName && /* @__PURE__ */ import_react15.default.createElement(Icon_default, { className: !children ? "is-marginless" : "", name: iconName }), children);
     }
-    return /* @__PURE__ */ import_react13.default.createElement(
+    return /* @__PURE__ */ import_react15.default.createElement(
       "a",
       {
         ref,
@@ -2501,7 +2515,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_react15.default.createElement(Icon_default, { className: !children ? "is-marginless" : "", name: iconName }),
       children
     );
   }
@@ -2511,11 +2525,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 React33 = __toESM(require("react"));
+var ButtonList = React33.forwardRef(
   ({ className, id, align, direction, ...others }, ref) => {
     const { styled } = useTrilogyContext();
-    return /* @__PURE__ */ React31.createElement(
+    return /* @__PURE__ */ React33.createElement(
       "div",
       {
         ref,
@@ -2540,14 +2554,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_react18 = __toESM(require("react"));
 
 // components/select/Select.tsx
-var React35 = __toESM(require("react"));
+var React37 = __toESM(require("react"));
 
 // components/select/context/index.tsx
-var import_react14 = __toESM(require("react"));
-var SelectContext = import_react14.default.createContext({
+var import_react16 = __toESM(require("react"));
+var SelectContext = import_react16.default.createContext({
   selectedOptionValues: [],
   multiple: false,
   custom: false,
@@ -2558,10 +2572,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_react17 = __toESM(require("react"));
 var import_react_dom = __toESM(require("react-dom"));
 var OPTION_SIZE = 48;
-var SelectDynamic = import_react15.default.forwardRef(
+var SelectDynamic = import_react17.default.forwardRef(
   ({
     onChange,
     disabled,
@@ -2584,11 +2598,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_react17.useContext)(SelectContext);
+    const containerRef = (0, import_react17.useRef)(null);
+    const [openUpward, setOpenUpward] = (0, import_react17.useState)(false);
+    const optionsListSize = (0, import_react17.useRef)(0);
+    const [dropdownStyles, setDropdownStyles] = (0, import_react17.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");
@@ -2617,29 +2631,29 @@ var SelectDynamic = import_react15.default.forwardRef(
         return prev;
       });
     };
-    const options = (0, import_react15.useMemo)(() => {
+    const options = (0, import_react17.useMemo)(() => {
       var _a;
-      return (_a = import_react15.default.Children.map(children, (child) => {
-        if (!import_react15.default.isValidElement(child)) return false;
+      return (_a = import_react17.default.Children.map(children, (child) => {
+        if (!import_react17.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_react17.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_react17.useEffect)(() => {
+      const childrenCount = import_react17.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_react17.default.createElement("div", { className: selectClasses, ref: containerRef, ...others }, /* @__PURE__ */ import_react17.default.createElement(
       Input_default,
       {
         sample,
@@ -2666,7 +2680,7 @@ var SelectDynamic = import_react15.default.forwardRef(
         },
         ...{ readOnly: true, id, role: "combobox" }
       }
-    ), /* @__PURE__ */ import_react15.default.createElement(
+    ), /* @__PURE__ */ import_react17.default.createElement(
       "ul",
       {
         role: "listbox",
@@ -2678,7 +2692,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_react17.default.createElement("div", { role: "presentation", className: portalClasses, onClick: onCloseOptions }),
       document.body
     ));
   }
@@ -2688,8 +2702,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 React36 = __toESM(require("react"));
+var SelectNative = React36.forwardRef(
   ({
     onChange,
     disabled,
@@ -2711,25 +2725,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 = React36.useId();
+    const idSample = React36.useId();
+    const [focused, setIsFocused] = React36.useState(false);
+    const [selectedValues, setSelectedValues] = React36.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 = React36.useCallback((e) => {
       setIsFocused(true);
       onFocus && onFocus(e);
     }, []);
-    const handleBlur = React34.useCallback((e) => {
+    const handleBlur = React36.useCallback((e) => {
       setIsFocused(false);
       onBlur && onBlur(e);
     }, []);
-    React34.useEffect(() => {
+    React36.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__ */ React36.createElement("div", { className: selectClasses }, /* @__PURE__ */ React36.createElement("div", { className: hashClass(styled, (0, import_clsx27.default)("field", focused && "focus")) }, label && /* @__PURE__ */ React36.createElement("label", { className: hashClass(styled, "input-label"), htmlFor: id }, label, " ", required && /* @__PURE__ */ React36.createElement(Text_default, { markup: "span" /* SPAN */, typo: "has-text-error" /* TEXT_ERROR */ }, "*")), sample && /* @__PURE__ */ React36.createElement(Text_default, { className: "input-sample", level: 2 /* TWO */, id: idSample }, sample), /* @__PURE__ */ React36.createElement("div", { className: controlClass }, /* @__PURE__ */ React36.createElement(
       "select",
       {
         ref,
@@ -2759,30 +2773,30 @@ var SelectNative = React34.forwardRef(
         role: "listbox",
         ...others
       },
-      React34.Children.map(children, (child) => {
-        if (!React34.isValidElement(child)) return null;
+      React36.Children.map(children, (child) => {
+        if (!React36.isValidElement(child)) return null;
         const props = {
           ...child.props,
           native: "true"
         };
-        return /* @__PURE__ */ React34.createElement(option_default, { ...props });
+        return /* @__PURE__ */ React36.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__ */ React36.createElement(Icon_default, { name: iconName, size: "small" })), help && /* @__PURE__ */ React36.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 = React37.forwardRef(({ selected, ...props }, ref) => {
+  const [isVisibleOptions, setIsVisibleOptions] = React37.useState(false);
+  const [selectedOptionValues, setSelectedOptionValues] = React37.useState([]);
+  React37.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__ */ React37.createElement(
       SelectContext.Provider,
       {
         value: {
@@ -2795,20 +2809,20 @@ var Select = React35.forwardRef(({ selected, ...props }, ref) => {
           onChange: props.onChange
         }
       },
-      /* @__PURE__ */ React35.createElement(SelectDynamic_default, { ref, selected, ...props })
+      /* @__PURE__ */ React37.createElement(SelectDynamic_default, { ref, selected, ...props })
     );
-  return /* @__PURE__ */ React35.createElement(SelectNative_default, { ref, selected, ...props });
+  return /* @__PURE__ */ React37.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 React38 = __toESM(require("react"));
+var SelectOption = React38.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 } = React38.useContext(SelectContext);
     const isChecked = selectedOptionValues.includes(value);
     const selectClasses = hashClass(styled, (0, import_clsx28.default)("option", isChecked && "focus", disabled && is("disabled"), className));
     const handleClickOption = () => {
@@ -2830,7 +2844,7 @@ var SelectOption = React36.forwardRef(
       if (!multiple) setIsVisibleOptions(false);
     };
     if (custom || multiple) {
-      return /* @__PURE__ */ React36.createElement(
+      return /* @__PURE__ */ React38.createElement(
         "li",
         {
           ref,
@@ -2843,11 +2857,11 @@ var SelectOption = React36.forwardRef(
           onClick: !disabled ? handleClickOption : void 0,
           ...others
         },
-        iconName && /* @__PURE__ */ React36.createElement(Icon_default, { name: iconName }),
+        iconName && /* @__PURE__ */ React38.createElement(Icon_default, { name: iconName }),
         label || children
       );
     }
-    return /* @__PURE__ */ React36.createElement(
+    return /* @__PURE__ */ React38.createElement(
       "option",
       {
         ref,
@@ -2892,7 +2906,7 @@ var currentDate = /* @__PURE__ */ new Date();
 function checkIsRange(date) {
   return !(date instanceof Date);
 }
-var Calendar = import_react16.default.forwardRef(
+var Calendar = import_react18.default.forwardRef(
   ({
     value = currentDate,
     minDate = new Date(currentDate.getFullYear() - 10, 0, 1),
@@ -2904,16 +2918,16 @@ var Calendar = import_react16.default.forwardRef(
     onMonthChange
   }, ref) => {
     const { styled } = useTrilogyContext();
-    const [visibleMonth, setVisibleMonth] = import_react16.default.useState(
+    const [visibleMonth, setVisibleMonth] = import_react18.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_react18.default.useState(value);
+    const [dateEndHovered, setDateEndHovered] = import_react18.default.useState();
+    const refsDays = import_react18.default.useRef([]);
+    const refDayFocused = import_react18.default.useRef();
+    const refs = import_react18.default.useRef([]);
+    const weeksId = import_react18.default.useId();
+    const daysId = import_react18.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"));
@@ -2935,15 +2949,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_react18.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_react18.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_react18.default.useCallback((year, month) => {
       const date = new Date(year, month, 1);
       const days2 = [];
       const firstDayOfMonth = (date.getDay() + 6) % 7;
@@ -2954,7 +2968,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_react18.default.useMemo(() => {
       const minYear = minDate.getFullYear();
       const maxYear = maxDate.getFullYear();
       const currentYear = value instanceof Date && (value == null ? void 0 : value.getFullYear());
@@ -2971,7 +2985,7 @@ var Calendar = import_react16.default.forwardRef(
       }
       return years;
     }, [minDate, maxDate, value]);
-    const availableMonths = import_react16.default.useMemo(() => {
+    const availableMonths = import_react18.default.useMemo(() => {
       const currentYear = visibleMonth.getFullYear();
       const minYear = minDate.getFullYear();
       const maxYear = maxDate.getFullYear();
@@ -2984,18 +2998,18 @@ var Calendar = import_react16.default.forwardRef(
         return true;
       });
     }, [minDate, maxDate, visibleMonth]);
-    const availableYear = import_react16.default.useMemo(() => {
+    const availableYear = import_react18.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_react18.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_react18.default.useCallback(
       (month) => {
         const nextMonth = new Date(visibleMonth.getFullYear(), visibleMonth.getMonth() + month, visibleMonth.getDate());
         setVisibleMonth(nextMonth);
@@ -3003,7 +3017,7 @@ var Calendar = import_react16.default.forwardRef(
       },
       [visibleMonth, onMonthChange]
     );
-    const handleMonthSelect = import_react16.default.useCallback(
+    const handleMonthSelect = import_react18.default.useCallback(
       (selectedMonth) => {
         const newDate = new Date(visibleMonth.getFullYear(), selectedMonth, visibleMonth.getDate());
         setVisibleMonth(newDate);
@@ -3011,7 +3025,7 @@ var Calendar = import_react16.default.forwardRef(
       },
       [visibleMonth, onMonthChange, minDate, maxDate]
     );
-    const handleYearSelect = import_react16.default.useCallback(
+    const handleYearSelect = import_react18.default.useCallback(
       (selectedYear) => {
         const newDate = new Date(selectedYear, visibleMonth.getMonth(), visibleMonth.getDate());
         if (newDate.getTime() < minDate.getTime() || newDate.getTime() > maxDate.getTime()) {
@@ -3029,7 +3043,7 @@ var Calendar = import_react16.default.forwardRef(
       },
       [visibleMonth, onMonthChange, minDate, maxDate]
     );
-    const navigateInDaysWithKeyboard = import_react16.default.useCallback(
+    const navigateInDaysWithKeyboard = import_react18.default.useCallback(
       (currentIndex, nextIndex) => {
         var _a;
         const nextRef = refsDays.current[currentIndex + nextIndex];
@@ -3060,7 +3074,7 @@ var Calendar = import_react16.default.forwardRef(
       },
       [refsDays.current, refDayFocused.current, isNextDisabled, isPrevDisabled]
     );
-    const handlePressEnterInDays = import_react16.default.useCallback(
+    const handlePressEnterInDays = import_react18.default.useCallback(
       (e) => {
         if (readOnly) return;
         const elm = e.target;
@@ -3079,7 +3093,7 @@ var Calendar = import_react16.default.forwardRef(
       },
       [refsDays.current, onChange, readOnly, activeDate, isRange]
     );
-    const onKeyDownDay = import_react16.default.useCallback(
+    const onKeyDownDay = import_react18.default.useCallback(
       (e, index, isDisabled) => {
         switch (e.key) {
           case "ArrowRight":
@@ -3098,7 +3112,7 @@ var Calendar = import_react16.default.forwardRef(
       },
       [handlePressEnterInDays, navigateInDaysWithKeyboard]
     );
-    import_react16.default.useEffect(() => {
+    import_react18.default.useEffect(() => {
       var _a, _b;
       if (refsDays.current) {
         const activeDateIndex = refsDays.current.findIndex((day) => day.tabIndex === 0);
@@ -3114,7 +3128,7 @@ var Calendar = import_react16.default.forwardRef(
         }
       }
     }, [refsDays.current, refDayFocused.current]);
-    import_react16.default.useEffect(() => {
+    import_react18.default.useEffect(() => {
       const prevActiveDate = activeDate;
       setActiveDate(value);
       if (value instanceof Date) return setVisibleMonth(value);
@@ -3123,7 +3137,7 @@ var Calendar = import_react16.default.forwardRef(
         if (isNewRangeSelection) return setVisibleMonth(value[0]);
       }
     }, [value]);
-    return /* @__PURE__ */ import_react16.default.createElement(
+    return /* @__PURE__ */ import_react18.default.createElement(
       "table",
       {
         "data-calendar-trilogy": "",
@@ -3134,7 +3148,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_react18.default.createElement("thead", { className: calendarheaderClasses }, /* @__PURE__ */ import_react18.default.createElement("tr", null, /* @__PURE__ */ import_react18.default.createElement("th", { colSpan: 1, className: calendarPrevMonthClasses }, /* @__PURE__ */ import_react18.default.createElement(
         "button",
         {
           "data-focusable": !isPrevDisabled,
@@ -3146,8 +3160,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_react18.default.createElement(Icon_default, { name: "tri-arrow-left" })
+      )), /* @__PURE__ */ import_react18.default.createElement("th", { colSpan: 5, className: calendarActiveMonthClasses }, /* @__PURE__ */ import_react18.default.createElement("div", { className: headerDropdownClasses }, /* @__PURE__ */ import_react18.default.createElement(
         Select_default,
         {
           "data-focusable": "true",
@@ -3157,8 +3171,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_react18.default.createElement(option_default, { key: monthIndex, value: String(monthIndex), disabled: !availableMonths[monthIndex] }, monthName))
+      ), /* @__PURE__ */ import_react18.default.createElement(
         Select_default,
         {
           "data-focusable": "true",
@@ -3168,7 +3182,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_react18.default.createElement(
           option_default,
           {
             key: year.value,
@@ -3177,7 +3191,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_react18.default.createElement("th", { colSpan: 1, className: calendarNextMonthClasses }, /* @__PURE__ */ import_react18.default.createElement(
         "button",
         {
           "data-focusable": !isNextDisabled,
@@ -3189,12 +3203,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_react18.default.createElement(Icon_default, { name: "tri-arrow-right" })
+      ))), /* @__PURE__ */ import_react18.default.createElement("tr", null, days.map((day, index) => {
+        return /* @__PURE__ */ import_react18.default.createElement("td", { className: calendarDayLabelClasses, key: index }, /* @__PURE__ */ import_react18.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_react18.default.createElement("tbody", null, allDaysInMonth.map((week, weekIndex) => {
+        return /* @__PURE__ */ import_react18.default.createElement(
           "tr",
           {
             key: `${weeksId}_${weekIndex}`,
@@ -3214,7 +3228,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_react18.default.createElement(
               "td",
               {
                 key: `${daysId}_${dayIndex}_${day == null ? void 0 : day.getTime()}`,
@@ -3229,7 +3243,7 @@ var Calendar = import_react16.default.forwardRef(
                   dayIndex === 6 && rondedRightClasses
                 )
               },
-              day && ind !== false && /* @__PURE__ */ import_react16.default.createElement(
+              day && ind !== false && /* @__PURE__ */ import_react18.default.createElement(
                 "button",
                 {
                   disabled: isDisabled,
@@ -3267,9 +3281,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_react19 = __toESM(require("react"));
+var CardContext = (0, import_react19.createContext)({ horizontal: false });
+var Card = import_react19.default.forwardRef(
   ({ className, id, flat, horizontal, floating, skeleton, onClick, reversed, href, fullheight, active, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     const hoverStyle = {
@@ -3290,7 +3304,7 @@ var Card = import_react17.default.forwardRef(
       )
     );
     if (href) {
-      return /* @__PURE__ */ import_react17.default.createElement(
+      return /* @__PURE__ */ import_react19.default.createElement(
         "a",
         {
           ref,
@@ -3305,7 +3319,7 @@ var Card = import_react17.default.forwardRef(
         }
       );
     }
-    return /* @__PURE__ */ import_react17.default.createElement(
+    return /* @__PURE__ */ import_react19.default.createElement(
       "div",
       {
         ref,
@@ -3323,12 +3337,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 React41 = __toESM(require("react"));
+var CardImage = React41.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__ */ React41.createElement(
       "div",
       {
         ref,
@@ -3339,7 +3353,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__ */ React41.createElement("figure", { className: hashClass(styled, (0, import_clsx31.default)("image")), ...others }, /* @__PURE__ */ React41.createElement("img", { ...{ src: typeof src === "string" ? src : "" }, alt }))
     );
   }
 );
@@ -3351,11 +3365,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 React42 = __toESM(require("react"));
+var CardContent = React42.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__ */ React42.createElement("div", { ref, id, className: hashClass(styled, (0, import_clsx32.default)("card-content", className)), ...others }, children);
   }
 );
 CardContent.displayName = "CardContent" /* CardContent */;
@@ -3375,12 +3389,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_react20 = __toESM(require("react"));
+var Checkbox = import_react20.default.forwardRef(
+  ({ checked, className, disabled, readonly, id = import_react20.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_react20.useState)(checked || false);
+    (0, import_react20.useEffect)(() => {
       if (!readonly) {
         setChecked(checked || false);
       }
@@ -3394,7 +3408,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_react20.default.createElement("div", { ref, className: hashClass(styled, (0, import_clsx33.default)("checkbox", className)) }, /* @__PURE__ */ import_react20.default.createElement(
       "input",
       {
         type: "checkbox",
@@ -3408,26 +3422,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_react20.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_react21 = __toESM(require("react"));
+var isRequiredChild = (children) => import_react21.default.Children.toArray(children).some(
+  (child) => import_react21.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 React45 = __toESM(require("react"));
+var CheckboxList = React45.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__ */ React45.createElement(React45.Fragment, null, label && /* @__PURE__ */ React45.createElement("p", { className: groupLabelClasses }, label, isRequiredChild(children) && /* @__PURE__ */ React45.createElement(Text_default, { markup: "span" /* SPAN */, typo: "has-text-error" /* TEXT_ERROR */ }, " ", "*")), /* @__PURE__ */ React45.createElement(
       "div",
       {
         ref,
@@ -3456,8 +3470,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 React46 = __toESM(require("react"));
+var CheckboxTiles = React46.forwardRef(
   ({ id, className, children, align, verticalAlign, accessibilityLabelledBy, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     let alignClass = null;
@@ -3468,7 +3482,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__ */ React46.createElement(
       "div",
       {
         ref,
@@ -3491,8 +3505,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_react22 = __toESM(require("react"));
+var Sticker = import_react22.default.forwardRef(({
   className,
   id,
   variant,
@@ -3515,22 +3529,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_react22.default.createElement("p", { ref, id, className: classes, "aria-label": accessibilityLabel, ...others }, iconName && /* @__PURE__ */ import_react22.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 React48 = __toESM(require("react"));
+var import_react23 = require("react");
+var CheckboxTile = React48.forwardRef(
   ({
     checked,
     className,
     disabled,
     readonly,
-    id = React46.useId(),
+    id = React48.useId(),
     label,
     onChange,
     name,
@@ -3544,13 +3558,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_react23.useState)(checked || false);
+    (0, import_react23.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__ */ React48.createElement("div", { ref, className: hashClass(styled, (0, import_clsx37.default)("checkbox-tile", horizontal && is("horizontal"), className)) }, /* @__PURE__ */ React48.createElement(
       "input",
       {
         type: "checkbox",
@@ -3564,7 +3578,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__ */ React48.createElement("label", { htmlFor: id, className: hashClass(styled, (0, import_clsx37.default)("checkbox-label")) }, icon && /* @__PURE__ */ React48.createElement(Icon_default, { name: icon, size: "medium" /* MEDIUM */ }), horizontal ? /* @__PURE__ */ React48.createElement("span", null, /* @__PURE__ */ React48.createElement("span", { className: hashClass(styled, (0, import_clsx37.default)("checkbox-title")) }, label), description && /* @__PURE__ */ React48.createElement("span", { className: hashClass(styled, (0, import_clsx37.default)("checkbox-description")) }, description)) : /* @__PURE__ */ React48.createElement(React48.Fragment, null, /* @__PURE__ */ React48.createElement("span", { className: hashClass(styled, (0, import_clsx37.default)("checkbox-title")) }, label), description && /* @__PURE__ */ React48.createElement("span", { className: hashClass(styled, (0, import_clsx37.default)("checkbox-description")) }, description))), sticker && /* @__PURE__ */ React48.createElement(Sticker_default, { label: sticker, variant: stickerVariant, className: "checkbox-sticker", small: true }));
   }
 );
 CheckboxTile.displayName = "CheckboxTiles" /* CheckboxTiles */;
@@ -3572,12 +3586,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_react24 = __toESM(require("react"));
+var Chips = import_react24.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_react24.default.createElement(
       "button",
       {
         ref,
@@ -3600,15 +3614,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 React50 = __toESM(require("react"));
+var ChipsList = React50.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__ */ React50.createElement("div", { ref, id, role: "group", "aria-labelledby": accessibilityLabelledBy, className: classes, ...others }, children);
   }
 );
 ChipsList.displayName = "ChipsList" /* ChipsList */;
@@ -3616,8 +3630,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_react25 = __toESM(require("react"));
+var Columns = import_react25.default.forwardRef(
   ({
     className,
     id,
@@ -3650,7 +3664,7 @@ var Columns = import_react23.default.forwardRef(
         className
       )
     );
-    return /* @__PURE__ */ import_react23.default.createElement("div", { ref, id, className: classes, ...others });
+    return /* @__PURE__ */ import_react25.default.createElement("div", { ref, id, className: classes, ...others });
   }
 );
 Columns.displayName = "Columns" /* Columns */;
@@ -3658,8 +3672,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_react26 = __toESM(require("react"));
+var Column = import_react26.default.forwardRef(
   ({
     className,
     id,
@@ -3705,7 +3719,7 @@ var Column = import_react24.default.forwardRef(
         className
       )
     );
-    return /* @__PURE__ */ import_react24.default.createElement("div", { ref, id, className: classes, ...others });
+    return /* @__PURE__ */ import_react26.default.createElement("div", { ref, id, className: classes, ...others });
   }
 );
 Column.displayName = "Column" /* Column */;
@@ -3733,12 +3747,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_react27 = __toESM(require("react"));
+var Container = import_react27.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_react27.default.createElement("div", { ref, id, className: classes, ...others });
   }
 );
 Container.displayName = "Container" /* Container */;
@@ -3746,7 +3760,7 @@ var Container_default = Container;
 
 // components/countdown/Countdown.tsx
 var import_clsx43 = __toESM(require("clsx"));
-var import_react26 = __toESM(require("react"));
+var import_react28 = __toESM(require("react"));
 
 // components/countdown/CountdownEnum.ts
 var CountdownFormat = /* @__PURE__ */ ((CountdownFormat2) => {
@@ -3775,14 +3789,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_react28.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_react28.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_react28.useState)(initialTimer);
+    const [init, setInit] = (0, import_react28.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));
@@ -3811,7 +3825,7 @@ var Countdown = import_react26.default.forwardRef(
       show[2 /* MIN */] = true;
       show[3 /* SEC */] = true;
     }
-    (0, import_react26.useEffect)(() => {
+    (0, import_react28.useEffect)(() => {
       setInterval(() => {
         const difference = timeLeft.getTime() - (/* @__PURE__ */ new Date()).getTime();
         if (difference > 0) {
@@ -3853,23 +3867,23 @@ var Countdown = import_react26.default.forwardRef(
         setInit(true);
       }, 1e3);
     }, [timeLeft, format]);
-    (0, import_react26.useEffect)(() => {
+    (0, import_react28.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_react28.default.createElement("ul", { ref, id, className: classes, ...others }, (show[0 /* DAY */] || timer.days != 0) && /* @__PURE__ */ import_react28.default.createElement("li", { className: hashClass(styled, (0, import_clsx43.default)("count")) }, /* @__PURE__ */ import_react28.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_react28.default.createElement("li", { className: hashClass(styled, (0, import_clsx43.default)("count")) }, /* @__PURE__ */ import_react28.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_react28.default.createElement("li", { className: hashClass(styled, (0, import_clsx43.default)("count")) }, /* @__PURE__ */ import_react28.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_react28.default.createElement("li", { className: hashClass(styled, (0, import_clsx43.default)("count")) }, /* @__PURE__ */ import_react28.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_react29 = require("react");
 var useClickOutside = (ref, callback) => {
-  const stableCallback = (0, import_react27.useCallback)(callback, [callback]);
-  (0, import_react27.useEffect)(() => {
+  const stableCallback = (0, import_react29.useCallback)(callback, [callback]);
+  (0, import_react29.useEffect)(() => {
     const handleClickOutside = (event) => {
       if (ref.current && !ref.current.contains(event.target)) {
         stableCallback();
@@ -3884,14 +3898,14 @@ var useClickOutside = (ref, callback) => {
 
 // components/datepicker/DatePicker.tsx
 var import_clsx47 = __toESM(require("clsx"));
-var import_react29 = __toESM(require("react"));
+var import_react31 = __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_react30 = __toESM(require("react"));
+var Modal = import_react30.default.forwardRef(
   ({
     children,
     className,
@@ -3907,15 +3921,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_react30.useRef)(null);
+    const [display, setDisplay] = (0, import_react30.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_react30.useRef)(null);
+    const refModal = (0, import_react30.useRef)(null);
+    const modalGeneratedId = (0, import_react30.useId)();
+    const focusableElementsRef = (0, import_react30.useRef)(null);
+    const currentFocusIndexRef = (0, import_react30.useRef)(0);
+    const handleClose = import_react30.default.useCallback(
       (onCloseFunc, e) => {
         if (!unClosable) {
           setDisplay(false);
@@ -3929,7 +3943,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_react30.useCallback)(
       (e) => {
         if (display && e.key === "Tab") {
           e.preventDefault();
@@ -3951,7 +3965,7 @@ var Modal = import_react28.default.forwardRef(
       },
       [display, focusableElementsRef, currentFocusIndexRef, refBtnModal, onClose]
     );
-    (0, import_react28.useEffect)(() => {
+    (0, import_react30.useEffect)(() => {
       setDisplay((prev) => {
         if (prev) {
           refBtnModal.current && refBtnModal.current.focus();
@@ -3960,17 +3974,17 @@ var Modal = import_react28.default.forwardRef(
         return active || false;
       });
     }, [active, currentFocusIndexRef, refBtnModal]);
-    (0, import_react28.useEffect)(() => {
+    (0, import_react30.useEffect)(() => {
       !hideCloseButton && display && focusableElementsRef.current && focusableElementsRef.current[0].focus();
     }, [hideCloseButton, display, focusableElementsRef]);
-    (0, import_react28.useEffect)(() => {
+    (0, import_react30.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_react30.default.createElement("div", { onKeyDown, ref: refModal }, trigger && import_react30.default.cloneElement(trigger, { ref: refBtnModal, "aria-haspopup": "dialog" }), /* @__PURE__ */ import_react30.default.createElement(
       "div",
       {
         ref,
@@ -3987,7 +4001,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_react30.default.createElement("div", { ref: modalContentRef, className: hashClass(styled, (0, import_clsx44.default)("modal-content")) }, /* @__PURE__ */ import_react30.default.createElement("div", { className: hashClass(styled, (0, import_clsx44.default)("modal-header")) }, !hideCloseButton && !unClosable && /* @__PURE__ */ import_react30.default.createElement(
         "button",
         {
           onClick: (e) => {
@@ -3996,8 +4010,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_react30.default.createElement("span", { className: hashClass(styled, (0, import_clsx44.default)("sr-only")) }, import_locales4.modalLocale.accessibilityLabelButtonClose)
+      ), /* @__PURE__ */ import_react30.default.createElement(Title_default, { id: modalGeneratedId, level: 3 /* THREE */, markup: "h1" /* H1 */ }, title)), children && children)
     ));
   }
 );
@@ -4006,20 +4020,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 React56 = __toESM(require("react"));
+var ModalFooter = React56.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__ */ React56.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 React57 = __toESM(require("react"));
+var ModalBody = React57.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__ */ React57.createElement("div", { ref, id, className: hashClass(styled, (0, import_clsx46.default)("modal-body", className)) }, children);
 });
 ModalBody.displayName = "ModalBody" /* ModalBody */;
 var ModalBody_default = ModalBody;
@@ -4063,7 +4077,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_react31.forwardRef)(
   ({
     onChange,
     value,
@@ -4077,29 +4091,29 @@ var DatePicker = (0, import_react29.forwardRef)(
     status,
     disabled,
     disabledDates,
-    id = import_react29.default.useId(),
+    id = import_react31.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 [isMobile, 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_react31.useState)("jj");
+    const [month, setMonth] = (0, import_react31.useState)("mm");
+    const [year, setYear] = (0, import_react31.useState)("aaaa");
+    const [isOpenCalendar, setIsOpenCalendar] = (0, import_react31.useState)(false);
+    const [canContinueTyping, setCanContinueTyping] = (0, import_react31.useState)(false);
+    const [focused, setIsFocused] = (0, import_react31.useState)(false);
+    const [isMobile, setIsMobile] = (0, import_react31.useState)(false);
+    const [portalPosition, setPortalPosition] = (0, import_react31.useState)({ top: 0, left: 0, width: 0 });
+    const refsSegment = (0, import_react31.useRef)([]);
+    const refsFocusable = (0, import_react31.useRef)([]);
+    const refContainer = (0, import_react31.useRef)(null);
+    const refCalendar = (0, import_react31.useRef)(null);
+    const currentFocusIndexRef = (0, import_react31.useRef)(0);
+    const segmentFocused = (0, import_react31.useRef)(null);
+    const refIcon = (0, import_react31.useRef)(null);
+    const refInput = (0, import_react31.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")));
@@ -4108,7 +4122,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_react31.useImperativeHandle)(ref, () => refContainer.current);
     useClickOutside(refCalendar, () => {
       setTimeout(() => {
         setIsOpenCalendar(false);
@@ -4119,7 +4133,7 @@ var DatePicker = (0, import_react29.forwardRef)(
         setIsFocused(false);
       }, 0);
     });
-    const segments = (0, import_react29.useMemo)(
+    const segments = (0, import_react31.useMemo)(
       () => ({
         day: {
           sensitiveValue: 3,
@@ -4151,14 +4165,14 @@ var DatePicker = (0, import_react29.forwardRef)(
       }),
       [day, month, year]
     );
-    const calendarValue = (0, import_react29.useMemo)(() => {
+    const calendarValue = (0, import_react31.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_react31.useCallback)(() => {
       if (!refInput.current) return;
       const rect = refInput.current.getBoundingClientRect();
       const { top, bottom, left, width } = rect;
@@ -4176,7 +4190,7 @@ var DatePicker = (0, import_react29.forwardRef)(
         width
       });
     }, []);
-    const handleKeyPress = (0, import_react29.useCallback)(
+    const handleKeyPress = (0, import_react31.useCallback)(
       ({ event, type }) => {
         if (disabled) return;
         const key = event.data;
@@ -4221,7 +4235,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_react31.useCallback)(
       (e, type) => {
         if (disabled) return;
         const { segmentSetter, label: label2, maxValue, initValue, segmentPosition, segment } = segments[type];
@@ -4283,7 +4297,7 @@ var DatePicker = (0, import_react29.forwardRef)(
       calculatePortalPosition();
       setIsOpenCalendar(true);
     };
-    const handleChangeCalendar = import_react29.default.useCallback(
+    const handleChangeCalendar = import_react31.default.useCallback(
       (e) => {
         const dateCalendar = e;
         const dateDay = dateCalendar.getDate();
@@ -4300,7 +4314,7 @@ var DatePicker = (0, import_react29.forwardRef)(
       },
       [onChange]
     );
-    const onKeyDown = (0, import_react29.useCallback)(
+    const onKeyDown = (0, import_react31.useCallback)(
       (e) => {
         var _a;
         if (disabled) return;
@@ -4322,8 +4336,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_react31.useMemo)(() => {
+      return /* @__PURE__ */ import_react31.default.createElement(
         Calendar_default,
         {
           disabledDates,
@@ -4359,7 +4373,7 @@ var DatePicker = (0, import_react29.forwardRef)(
       isOpenCalendar,
       refsFocusable
     ]);
-    (0, import_react29.useEffect)(() => {
+    (0, import_react31.useEffect)(() => {
       if (!value) {
         setDay("jj");
         setMonth("mm");
@@ -4371,7 +4385,7 @@ var DatePicker = (0, import_react29.forwardRef)(
         setYear(year2);
       }
     }, [value]);
-    (0, import_react29.useEffect)(() => {
+    (0, import_react31.useEffect)(() => {
       if (isOpenCalendar && refCalendar.current) {
         const elms = refCalendar.current.querySelectorAll(`[data-focusable=true]`);
         const firstDayFocusable = getFirstDayFocusable();
@@ -4384,13 +4398,13 @@ var DatePicker = (0, import_react29.forwardRef)(
       }
       if (!isOpenCalendar && currentFocusIndexRef.current) currentFocusIndexRef.current = 0;
     }, [isOpenCalendar, refCalendar, currentFocusIndexRef]);
-    (0, import_react29.useEffect)(() => {
+    (0, import_react31.useEffect)(() => {
       const handleResize = () => setIsMobile(window.innerWidth <= 768);
       handleResize();
       window.addEventListener("resize", handleResize);
       return () => window.removeEventListener("resize", handleResize);
     }, []);
-    (0, import_react29.useEffect)(() => {
+    (0, import_react31.useEffect)(() => {
       if (!isOpenCalendar) return;
       const handleUpdate = () => calculatePortalPosition();
       window.addEventListener("scroll", handleUpdate, true);
@@ -4400,7 +4414,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_react31.default.createElement("div", { ref: refContainer, className: datePickerClasses, onKeyDown }, label && /* @__PURE__ */ import_react31.default.createElement("label", { className: inputLabelClasses, htmlFor: id }, label, " ", required && /* @__PURE__ */ import_react31.default.createElement(Text_default, { markup: "span" /* SPAN */, typo: "has-text-error" /* TEXT_ERROR */ }, "*")), sample && /* @__PURE__ */ import_react31.default.createElement(Text_default, { className: "input-sample", level: 2 /* TWO */ }, sample), /* @__PURE__ */ import_react31.default.createElement("div", { className: controlClasses }, /* @__PURE__ */ import_react31.default.createElement(
       "div",
       {
         role: "group",
@@ -4418,7 +4432,7 @@ var DatePicker = (0, import_react29.forwardRef)(
         },
         ...otherProps
       },
-      /* @__PURE__ */ import_react29.default.createElement(
+      /* @__PURE__ */ import_react31.default.createElement(
         "span",
         {
           "aria-valuemin": 1,
@@ -4445,8 +4459,8 @@ var DatePicker = (0, import_react29.forwardRef)(
         },
         day
       ),
-      /* @__PURE__ */ import_react29.default.createElement("span", null, "/"),
-      /* @__PURE__ */ import_react29.default.createElement(
+      /* @__PURE__ */ import_react31.default.createElement("span", null, "/"),
+      /* @__PURE__ */ import_react31.default.createElement(
         "span",
         {
           "aria-valuemin": 1,
@@ -4473,8 +4487,8 @@ var DatePicker = (0, import_react29.forwardRef)(
         },
         month
       ),
-      /* @__PURE__ */ import_react29.default.createElement("span", null, "/"),
-      /* @__PURE__ */ import_react29.default.createElement(
+      /* @__PURE__ */ import_react31.default.createElement("span", null, "/"),
+      /* @__PURE__ */ import_react31.default.createElement(
         "span",
         {
           "aria-valuemin": 0,
@@ -4501,7 +4515,7 @@ var DatePicker = (0, import_react29.forwardRef)(
         },
         year
       ),
-      /* @__PURE__ */ import_react29.default.createElement(
+      /* @__PURE__ */ import_react31.default.createElement(
         "input",
         {
           disabled,
@@ -4521,7 +4535,7 @@ var DatePicker = (0, import_react29.forwardRef)(
           }
         }
       )
-    ), /* @__PURE__ */ import_react29.default.createElement(
+    ), /* @__PURE__ */ import_react31.default.createElement(
       "button",
       {
         type: "button",
@@ -4533,9 +4547,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 && !isMobile && import_react_dom2.default.createPortal(
-      /* @__PURE__ */ import_react29.default.createElement(
+      /* @__PURE__ */ import_react31.default.createElement(Icon_default, { name: "tri-calendar", className: iconRightClasses })
+    )), help && /* @__PURE__ */ import_react31.default.createElement(Text_default, { className: helpClasses }, help), isOpenCalendar && !isMobile && import_react_dom2.default.createPortal(
+      /* @__PURE__ */ import_react31.default.createElement(
         "div",
         {
           className: calendarContainerClasses,
@@ -4550,7 +4564,7 @@ var DatePicker = (0, import_react29.forwardRef)(
         calendar
       ),
       document.body
-    ), isOpenCalendar && isMobile && /* @__PURE__ */ import_react29.default.createElement(Modal_default, { active: isOpenCalendar, hideCloseButton: true }, /* @__PURE__ */ import_react29.default.createElement(ModalBody_default, null, calendar)));
+    ), isOpenCalendar && isMobile && /* @__PURE__ */ import_react31.default.createElement(Modal_default, { active: isOpenCalendar, hideCloseButton: true }, /* @__PURE__ */ import_react31.default.createElement(ModalBody_default, null, calendar)));
   }
 );
 DatePicker.displayName = "DatePicker" /* DatePicker */;
@@ -4558,8 +4572,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_react32 = __toESM(require("react"));
+var Divider = import_react32.default.forwardRef(({
   className,
   id,
   unboxed,
@@ -4582,15 +4596,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_react32.default.createElement("div", { ref, id, "data-testid": "separator", className: classes, ...others }, /* @__PURE__ */ import_react32.default.createElement("p", { className: contentClasses }, iconName && !content && /* @__PURE__ */ import_react32.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_react33 = __toESM(require("react"));
+var Fab = import_react33.default.forwardRef(({
   children,
   extended,
   iconName,
@@ -4607,8 +4621,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_react33.useState)(extended || false);
+  (0, import_react33.useEffect)(() => {
     setIsExtended(extended || false);
   }, [isExtended]);
   const positionStyle = top || bottom || left || right ? {
@@ -4621,7 +4635,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_react33.default.createElement(
     "button",
     {
       ref,
@@ -4636,7 +4650,7 @@ var Fab = import_react31.default.forwardRef(({
       ...others,
       className: _className
     },
-    /* @__PURE__ */ import_react31.default.createElement(Icon_default, { name: iconName }),
+    /* @__PURE__ */ import_react33.default.createElement(Icon_default, { name: iconName }),
     children
   );
 });
@@ -4645,7 +4659,7 @@ var Fab_default = Fab;
 
 // components/flex-box/FlexBox.tsx
 var import_clsx50 = __toESM(require("clsx"));
-var import_react32 = __toESM(require("react"));
+var import_react34 = __toESM(require("react"));
 var generateClassNames = ({ value, getClassName }) => {
   if (!value) return [];
   if (typeof value === "string" || typeof value === "number") {
@@ -4668,7 +4682,7 @@ var generateWrapClassNames = ({ value, getClassName }) => {
   }
   return [];
 };
-var FlexBox = import_react32.default.forwardRef(
+var FlexBox = import_react34.default.forwardRef(
   ({ className, id, gap, direction, align, justify, wrap, scrollable, fullheight, mobile, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     const classes = hashClass(
@@ -4686,7 +4700,7 @@ var FlexBox = import_react32.default.forwardRef(
         className
       ])
     );
-    return /* @__PURE__ */ import_react32.default.createElement("div", { ref, id, className: classes, ...others });
+    return /* @__PURE__ */ import_react34.default.createElement("div", { ref, id, className: classes, ...others });
   }
 );
 FlexBox.displayName = "FlexBox" /* FlexBox */;
@@ -4694,8 +4708,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_react35 = __toESM(require("react"));
+var FlexItem = import_react35.default.forwardRef(
   ({ className, id, size: size2, narrow, verticalAlign, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     const isNumber = typeof size2 === "number";
@@ -4715,7 +4729,7 @@ var FlexItem = import_react33.default.forwardRef(
         className
       )
     );
-    return /* @__PURE__ */ import_react33.default.createElement("div", { ref, id, className: classes, ...others });
+    return /* @__PURE__ */ import_react35.default.createElement("div", { ref, id, className: classes, ...others });
   }
 );
 FlexItem.displayName = "FlexItem" /* FlexItem */;
@@ -4723,8 +4737,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_react36 = __toESM(require("react"));
+var Hero = import_react36.default.forwardRef(
   ({ children, backgroundColor, backgroundSrc, inverted, className, id, onClick, overlap, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     const classes = hashClass(
@@ -4738,7 +4752,7 @@ var Hero = import_react34.default.forwardRef(
         className
       )
     );
-    return /* @__PURE__ */ import_react34.default.createElement(
+    return /* @__PURE__ */ import_react36.default.createElement(
       "section",
       {
         ref,
@@ -4750,7 +4764,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_react36.default.createElement("div", { className: hashClass(styled, (0, import_clsx52.default)("hero-body")) }, children)
     );
   }
 );
@@ -4776,8 +4790,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 React64 = __toESM(require("react"));
+var Image = React64.forwardRef(({
   src,
   alt = "",
   className,
@@ -4798,7 +4812,7 @@ var Image = React62.forwardRef(({
       height
     }
   };
-  return /* @__PURE__ */ React62.createElement(
+  return /* @__PURE__ */ React64.createElement(
     "figure",
     {
       ref,
@@ -4810,7 +4824,7 @@ var Image = React62.forwardRef(({
       className: classes,
       ...others
     },
-    /* @__PURE__ */ React62.createElement(
+    /* @__PURE__ */ React64.createElement(
       "img",
       {
         style: styles.image,
@@ -4826,43 +4840,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 React65 = __toESM(require("react"));
+var List = React65.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__ */ React65.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 React66 = __toESM(require("react"));
+var ListItem = React66.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__ */ React66.createElement("li", { ref, id, className: hashClass(styled, (0, import_clsx55.default)(classes)), "data-testid": testId }, iconName && /* @__PURE__ */ React66.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__ */ React66.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 React67 = __toESM(require("react"));
+var ListItemDescription = React67.forwardRef(({
   children,
   className
 }, ref) => {
   const { styled } = useTrilogyContext();
-  return /* @__PURE__ */ React65.createElement("dd", { ref, className: hashClass(styled, (0, import_clsx56.default)(className)) }, children);
+  return /* @__PURE__ */ React67.createElement("dd", { ref, className: hashClass(styled, (0, import_clsx56.default)(className)) }, children);
 });
 ListItemDescription.displayName = "ListItemDescription" /* ListItemDescription */;
 var ListItemDescription_default = ListItemDescription;
@@ -4879,7 +4893,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_react37 = __toESM(require("react"));
 var stringToCode = (str, codeSize) => {
   if (!str) return new Array(codeSize).fill(null);
   return str.split("").map((char) => char === "" ? null : Number(char));
@@ -4936,7 +4950,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_react37.default.forwardRef(
   ({
     className,
     id,
@@ -4952,18 +4966,18 @@ var Otp = import_react35.default.forwardRef(
     autoFocus,
     ...others
   }, ref) => {
-    const [codeInput, setCodeInput] = (0, import_react35.useState)(
+    const [codeInput, setCodeInput] = (0, import_react37.useState)(
       stringToCode(value, length) || new Array(length).fill(null)
     );
-    const hasChanged = (0, import_react35.useRef)(false);
+    const hasChanged = (0, import_react37.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_react37.useEffect)(() => {
       if (!disabled) {
         isCompleted(codeInput) && (onCompleted == null ? void 0 : onCompleted(codeToString(codeInput)));
       }
     }, [length, codeInput, onCompleted, disabled]);
-    (0, import_react35.useEffect)(() => {
+    (0, import_react37.useEffect)(() => {
       hasChanged.current = codeInput.find((code) => code !== null) !== void 0;
       if (hasChanged.current) {
         onChange == null ? void 0 : onChange(codeToString(codeInput));
@@ -4986,14 +5000,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_react37.default.createElement(import_react37.default.Fragment, null, label && /* @__PURE__ */ import_react37.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_react37.default.createElement(
       "div",
       {
         ref,
@@ -5005,7 +5019,7 @@ var Otp = import_react35.default.forwardRef(
           }
         }
       },
-      codeInput.map((digit, idx) => /* @__PURE__ */ import_react35.default.createElement(
+      codeInput.map((digit, idx) => /* @__PURE__ */ import_react37.default.createElement(
         "input",
         {
           "aria-disabled": disabled,
@@ -5026,7 +5040,7 @@ var Otp = import_react35.default.forwardRef(
           ...others
         }
       ))
-    ), help && /* @__PURE__ */ import_react35.default.createElement(
+    ), help && /* @__PURE__ */ import_react37.default.createElement(
       Text_default,
       {
         className: hashClass(styled, (0, import_clsx57.default)("help")),
@@ -5042,8 +5056,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_react38 = __toESM(require("react"));
+var Pagination = import_react38.default.forwardRef(({
   className,
   id,
   length,
@@ -5052,11 +5066,11 @@ var Pagination = import_react36.default.forwardRef(({
   href,
   ...others
 }, ref) => {
-  const [currentPage, setCurrentPage] = (0, import_react36.useState)(defaultPage);
+  const [currentPage, setCurrentPage] = (0, import_react38.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_react38.useRef)(currentPage);
+  const pager = import_react38.default.useMemo(() => {
     let startPage = 1;
     let endPage = 5;
     if (length <= 5) {
@@ -5082,17 +5096,17 @@ var Pagination = import_react36.default.forwardRef(({
       pages
     };
   }, [currentPage, length]);
-  (0, import_react36.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     if (onClick && prevCurrentPage.current !== pager.currentPage) {
       onClick(pager);
     }
     setCurrentPage(pager.currentPage);
     prevCurrentPage.current = pager.currentPage;
   }, [pager.currentPage]);
-  (0, import_react36.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     setCurrentPage(defaultPage);
   }, [defaultPage]);
-  return /* @__PURE__ */ import_react36.default.createElement("nav", { ref, id, className: classes, ...others }, /* @__PURE__ */ import_react36.default.createElement(
+  return /* @__PURE__ */ import_react38.default.createElement("nav", { ref, id, className: classes, ...others }, /* @__PURE__ */ import_react38.default.createElement(
     "a",
     {
       className: hashClass(styled, (0, import_clsx58.default)("pagination-previous")),
@@ -5104,8 +5118,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_react38.default.createElement(Icon_default, { name: "tri-arrow-left" /* ARROW_LEFT */ })
+  ), /* @__PURE__ */ import_react38.default.createElement("ul", { className: hashClass(styled, (0, import_clsx58.default)("pagination-list")) }, !pager.pages.includes(1) && /* @__PURE__ */ import_react38.default.createElement("li", null, /* @__PURE__ */ import_react38.default.createElement("span", { className: hashClass(styled, (0, import_clsx58.default)("pagination-ellipsis")) }, "\u2026")), pager.pages.map((pageNumber) => /* @__PURE__ */ import_react38.default.createElement("li", { key: pageNumber }, /* @__PURE__ */ import_react38.default.createElement(
     "a",
     {
       className: hashClass(styled, (0, import_clsx58.default)("pagination-link")),
@@ -5117,7 +5131,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_react38.default.createElement("li", null, /* @__PURE__ */ import_react38.default.createElement("span", { className: hashClass(styled, (0, import_clsx58.default)("pagination-ellipsis")) }, "\u2026"))), /* @__PURE__ */ import_react38.default.createElement(
     "a",
     {
       className: hashClass(styled, (0, import_clsx58.default)("pagination-next")),
@@ -5129,7 +5143,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_react38.default.createElement(Icon_default, { name: "tri-arrow-right" /* ARROW_RIGHT */ })
   ));
 });
 Pagination.displayName = "Pagination" /* Pagination */;
@@ -5137,8 +5151,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 React70 = __toESM(require("react"));
+var Popover = React70.forwardRef(
   ({ className, id, direction, children, active, arrowPosition, trigger, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     const classes = hashClass(
@@ -5151,7 +5165,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__ */ React70.createElement("span", { ref, id, className: classes, ...others }, trigger && trigger, /* @__PURE__ */ React70.createElement("span", { className: hashClass(styled, "popover-content") }, children));
   }
 );
 Popover.displayName = "Popover" /* Popover */;
@@ -5172,7 +5186,7 @@ var PopoverArrowPosition = /* @__PURE__ */ ((PopoverArrowPosition2) => {
 
 // components/price/Price.tsx
 var import_clsx60 = __toESM(require("clsx"));
-var React69 = __toESM(require("react"));
+var React71 = __toESM(require("react"));
 
 // components/price/PriceHelpers.ts
 var checkCents = (text) => {
@@ -5184,7 +5198,7 @@ var checkCents = (text) => {
 };
 
 // components/price/Price.tsx
-var Price = React69.forwardRef(
+var Price = React71.forwardRef(
   ({
     className,
     id,
@@ -5218,7 +5232,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__ */ React71.createElement("span", { "aria-hidden": "true", className: classesStrike, ...others }, /* @__PURE__ */ React71.createElement(Text_default, { markup: "span" /* SPAN */ }, `${wholeStrike}`), /* @__PURE__ */ React71.createElement("span", { className: hashClass(styled, (0, import_clsx60.default)("price-details")) }, /* @__PURE__ */ React71.createElement("span", { className: hashClass(styled, (0, import_clsx60.default)("cents")) }, centsDisplayed === "\u20AC" ? /* @__PURE__ */ React71.createElement(React71.Fragment, null, "\xA0", centsDisplayed) : centsDisplayed, mention && /* @__PURE__ */ React71.createElement("sup", null, mention)), period && /* @__PURE__ */ React71.createElement("span", { className: hashClass(styled, (0, import_clsx60.default)("period")) }, "/", period)));
     }
     if (amount !== void 0) {
       const isNegative = amount < 0;
@@ -5229,9 +5243,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__ */ React71.createElement("span", { "aria-hidden": "true", "aria-label": accessibilityLabel, className: classes, "data-price": dataPrice, ...others }, /* @__PURE__ */ React71.createElement(Text_default, { markup: "span" /* SPAN */ }, `${whole}`), /* @__PURE__ */ React71.createElement("span", { className: hashClass(styled, (0, import_clsx60.default)("price-details")) }, /* @__PURE__ */ React71.createElement("span", { className: hashClass(styled, (0, import_clsx60.default)("cents")) }, centsDisplayed === "\u20AC" ? /* @__PURE__ */ React71.createElement(React71.Fragment, null, "\xA0", centsDisplayed) : centsDisplayed, mention && /* @__PURE__ */ React71.createElement("sup", null, mention)), period && /* @__PURE__ */ React71.createElement("span", { className: hashClass(styled, (0, import_clsx60.default)("period")) }, "/", period)));
     }
-    return /* @__PURE__ */ React69.createElement(
+    return /* @__PURE__ */ React71.createElement(
       "div",
       {
         ref,
@@ -5245,11 +5259,11 @@ var Price = React69.forwardRef(
           )
         )
       },
-      overline && /* @__PURE__ */ React69.createElement("p", { className: hashClass(styled, (0, import_clsx60.default)("overline")) }, overline),
+      overline && /* @__PURE__ */ React71.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__ */ React71.createElement("p", { className: hashClass(styled, (0, import_clsx60.default)("sr-only")) }, accessibilityLabel)
     );
   }
 );
@@ -5270,8 +5284,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_react39 = __toESM(require("react"));
+var ProductTour = import_react39.default.forwardRef(({
   children,
   className,
   id,
@@ -5283,16 +5297,16 @@ var ProductTour = import_react37.default.forwardRef(({
   avatarDirection,
   ...others
 }, ref) => {
-  const [display, setDisplay] = (0, import_react37.useState)(active || false);
+  const [display, setDisplay] = (0, import_react39.useState)(active || false);
   const { styled } = useTrilogyContext();
-  (0, import_react37.useEffect)(() => {
+  (0, import_react39.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_react39.default.createElement("div", { ref, id, className: classes, ...others }, arrowDirection && /* @__PURE__ */ import_react39.default.createElement("div", { className: hashClass(styled, (0, import_clsx61.default)("arrow", is(arrowDirection), arrowAlign && is(arrowAlign))) }), avatarSrc && /* @__PURE__ */ import_react39.default.createElement("span", { className: hashClass(styled, (0, import_clsx61.default)("icon", is("medium"))) }, /* @__PURE__ */ import_react39.default.createElement("img", { className: hashClass(styled, (0, import_clsx61.default)(is("rounded"))), src: avatarSrc })), closeable && /* @__PURE__ */ import_react39.default.createElement("div", { style: { cursor: "pointer" }, onClick: () => setDisplay(!display) }, /* @__PURE__ */ import_react39.default.createElement(Icon_default, { size: "small" /* SMALL */, name: "tri-times" /* TIMES */, className: "close" })), /* @__PURE__ */ import_react39.default.createElement("div", { className: hashClass(styled, (0, import_clsx61.default)("product-tour-content")) }, children));
 });
 ProductTour.displayName = "ProductTour" /* ProductTour */;
 var ProductTour_default = ProductTour;
@@ -5324,8 +5338,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 React73 = __toESM(require("react"));
+var Progress = React73.forwardRef(({
   children,
   className,
   id,
@@ -5352,24 +5366,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__ */ React73.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__ */ React73.createElement("div", { ref, className: "progress-container" }, /* @__PURE__ */ React73.createElement("progress", { id, className: classes, value, max, ...others }, value), (legendStart || legendCenter || legendEnd) && /* @__PURE__ */ React73.createElement("div", { className: "progress-legends" }, legendStart && /* @__PURE__ */ React73.createElement("div", { className: "progress-legend-start" }, /* @__PURE__ */ React73.createElement(Text_default, null, legendStart)), legendCenter && /* @__PURE__ */ React73.createElement("div", { className: "progress-legend-center" }, /* @__PURE__ */ React73.createElement(Text_default, null, legendCenter)), legendEnd && /* @__PURE__ */ React73.createElement("div", { className: "progress-legend-end" }, /* @__PURE__ */ React73.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_react40 = __toESM(require("react"));
+var ProgressItem = import_react40.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_react40.default.createElement(
       "div",
       {
         ref,
@@ -5392,9 +5406,9 @@ var ProgressItem_default = ProgressItem;
 var item_default3 = ProgressItem_default;
 
 // components/progress/radial/ProgressRadial.tsx
-var import_react39 = __toESM(require("react"));
+var import_react41 = __toESM(require("react"));
 var import_clsx64 = __toESM(require("clsx"));
-var ProgressRadial = import_react39.default.forwardRef(({
+var ProgressRadial = import_react41.default.forwardRef(({
   children,
   value = 0,
   secondValue = 0,
@@ -5407,11 +5421,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_react41.useState)(0);
+  const [secondProgressCurrentValue, setSecondProgressCurrentValue] = (0, import_react41.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_react41.useRef)(null);
   const updateBackgroundStyle = (firstValue, secondValue2) => {
     const progressRadial = progressRadialRef.current;
     if (!progressRadial) {
@@ -5427,7 +5441,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_react41.useEffect)(() => {
     let animationFrameId;
     setFirstProgressCurrentValue(0);
     setSecondProgressCurrentValue(0);
@@ -5444,10 +5458,10 @@ var ProgressRadial = import_react39.default.forwardRef(({
     animationFrameId = requestAnimationFrame(frame);
     return () => cancelAnimationFrame(animationFrameId);
   }, [value, secondValue]);
-  (0, import_react39.useEffect)(() => {
+  (0, import_react41.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_react41.default.createElement("div", { id, ...others, className: classes, ref: progressRadialRef }, /* @__PURE__ */ import_react41.default.createElement("div", { ref, className: classesContent }, label && /* @__PURE__ */ import_react41.default.createElement(Title_default, { level: 2 /* TWO */, marginless: true }, label), description && /* @__PURE__ */ import_react41.default.createElement(Text_default, { level: 1 /* ONE */, marginless: true }, description), !label && !description && children));
 });
 ProgressRadial.displayName = "ProgressRadial" /* ProgressRadial */;
 var ProgressRadial_default = ProgressRadial;
@@ -5457,22 +5471,22 @@ var radial_default = ProgressRadial_default;
 
 // components/progress/radial/item/ProgressRadialtem.tsx
 var import_clsx65 = __toESM(require("clsx"));
-var React74 = __toESM(require("react"));
+var React76 = __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__ */ React76.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 React77 = __toESM(require("react"));
+var RadioList = React77.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__ */ React77.createElement(React77.Fragment, null, label && /* @__PURE__ */ React77.createElement("p", { className: groupLabelClasses }, label, isRequiredChild(children) && /* @__PURE__ */ React77.createElement(Text_default, { markup: "span" /* SPAN */, typo: "has-text-error" /* TEXT_ERROR */ }, " ", "*")), /* @__PURE__ */ React77.createElement(
       "div",
       {
         ref,
@@ -5501,13 +5515,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_react42 = __toESM(require("react"));
+var Radio = import_react42.default.forwardRef(({
   checked,
   className,
   disabled,
   readonly,
-  id = import_react40.default.useId(),
+  id = import_react42.default.useId(),
   label,
   onChange,
   name,
@@ -5516,7 +5530,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_react42.default.createElement("div", { ref, className: hashClass(styled, (0, import_clsx67.default)("radio", className)) }, /* @__PURE__ */ import_react42.default.createElement(
     "input",
     {
       type: "radio",
@@ -5539,15 +5553,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_react42.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 React79 = __toESM(require("react"));
+var RadioTiles = React79.forwardRef(({ id, className, children, align, verticalAlign, accessibilityLabelledBy, ...others }, ref) => {
   const { styled } = useTrilogyContext();
   let alignClass = null;
   if (align) {
@@ -5557,7 +5571,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__ */ React79.createElement(
     "div",
     {
       ref,
@@ -5579,13 +5593,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_react43 = __toESM(require("react"));
+var RadioTile = import_react43.default.forwardRef(({
   checked,
   className,
   disabled,
   readonly,
-  id = import_react41.default.useId(),
+  id = import_react43.default.useId(),
   label,
   onChange,
   name,
@@ -5599,7 +5613,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_react43.default.createElement("div", { ref, className: hashClass(styled, (0, import_clsx69.default)("radio-tile", horizontal && is("horizontal"), className)) }, /* @__PURE__ */ import_react43.default.createElement(
     "input",
     {
       type: "radio",
@@ -5622,18 +5636,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_react43.default.createElement("label", { htmlFor: id, className: hashClass(styled, (0, import_clsx69.default)("radio-label")) }, icon && /* @__PURE__ */ import_react43.default.createElement(Icon_default, { name: icon, size: "medium" /* MEDIUM */ }), horizontal ? /* @__PURE__ */ import_react43.default.createElement("span", null, /* @__PURE__ */ import_react43.default.createElement("span", { className: hashClass(styled, (0, import_clsx69.default)("radio-title")) }, label), description && /* @__PURE__ */ import_react43.default.createElement("span", { className: hashClass(styled, (0, import_clsx69.default)("radio-description")) }, description)) : /* @__PURE__ */ import_react43.default.createElement(import_react43.default.Fragment, null, /* @__PURE__ */ import_react43.default.createElement("span", { className: hashClass(styled, (0, import_clsx69.default)("radio-title")) }, label), description && /* @__PURE__ */ import_react43.default.createElement("span", { className: hashClass(styled, (0, import_clsx69.default)("radio-description")) }, description))), sticker && /* @__PURE__ */ import_react43.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 React81 = __toESM(require("react"));
+var Range = React81.forwardRef(
   ({
     className,
-    id = React79.useId(),
+    id = React81.useId(),
     min,
     max,
     label,
@@ -5649,37 +5663,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 = React81.useRef(null);
+    const [cursorMin, setCursorMin] = React81.useState(valueMin != null ? valueMin : 0);
+    const [cursorMax, setCursorMax] = React81.useState(simple ? value || 0 : valueMax != null ? valueMax : max);
+    React81.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(() => {
+    React81.useEffect(() => {
       setCursorMin(valueMin || 0);
     }, [valueMin]);
-    React79.useEffect(() => {
+    React81.useEffect(() => {
       if (!simple) setCursorMax(valueMax || max);
     }, [valueMax, simple]);
-    React79.useEffect(() => {
+    React81.useEffect(() => {
       if (simple && value !== void 0) setCursorMax(value);
     }, [value, simple]);
-    const handleChangeCursorMin = React79.useCallback(
+    const handleChangeCursorMin = React81.useCallback(
       (e) => {
         if (Number(e.target.value) < cursorMax - gap) setCursorMin(Number(e.target.value));
       },
       [cursorMax, cursorMin]
     );
-    const handleChangeCursorMax = React79.useCallback(
+    const handleChangeCursorMax = React81.useCallback(
       (e) => {
         if (Number(e.target.value) >= cursorMin + gap) setCursorMax(Number(e.target.value));
       },
       [cursorMax, cursorMin]
     );
-    const handleMouseUpMin = React79.useCallback(() => {
+    const handleMouseUpMin = React81.useCallback(() => {
       if (onChangeMin) {
         onChangeMin({
           inputName: name,
@@ -5687,7 +5701,7 @@ var Range = React79.forwardRef(
         });
       }
     }, [onChangeMin, name, cursorMin]);
-    const handleMouseUpMax = React79.useCallback(() => {
+    const handleMouseUpMax = React81.useCallback(() => {
       if (onChangeMax && !simple) {
         onChangeMax({
           inputName: name,
@@ -5701,7 +5715,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__ */ React81.createElement("div", { ref, id, className: hashClass(styled, (0, import_clsx70.default)("range-container", className)) }, /* @__PURE__ */ React81.createElement("label", { className: hashClass(styled, (0, import_clsx70.default)("range-label")) }, label), /* @__PURE__ */ React81.createElement("div", { className: hashClass(styled, (0, import_clsx70.default)("range")) }, /* @__PURE__ */ React81.createElement("div", { ref: refTrack, className: hashClass(styled, (0, import_clsx70.default)("range-track")) }), !simple && /* @__PURE__ */ React81.createElement(
       "input",
       {
         className: hashClass(styled, (0, import_clsx70.default)("range-cursor range-cursor-min")),
@@ -5716,7 +5730,7 @@ var Range = React79.forwardRef(
         id: `${id}-min`,
         "aria-label": label
       }
-    ), /* @__PURE__ */ React79.createElement(
+    ), /* @__PURE__ */ React81.createElement(
       "input",
       {
         className: hashClass(styled, (0, import_clsx70.default)("range-cursor", !simple && "range-cursor-max")),
@@ -5731,7 +5745,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__ */ React81.createElement("div", { className: hashClass(styled, (0, import_clsx70.default)("range-values")) }, !simple && /* @__PURE__ */ React81.createElement("div", null, /* @__PURE__ */ React81.createElement("span", { className: hashClass(styled, (0, import_clsx70.default)("range-value-min")) }, cursorMin), unit && /* @__PURE__ */ React81.createElement("span", null, " ", unit)), /* @__PURE__ */ React81.createElement("div", null, /* @__PURE__ */ React81.createElement("span", { className: hashClass(styled, (0, import_clsx70.default)(simple ? "range-value" : "range-value-max")) }, cursorMax), unit && /* @__PURE__ */ React81.createElement("span", null, " ", unit))));
   }
 );
 Range.displayName = "Range" /* Range */;
@@ -5739,10 +5753,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 React82 = __toESM(require("react"));
+var Rows = React82.forwardRef(({ className, id, gap, ...others }, ref) => {
   const { styled } = useTrilogyContext();
-  return /* @__PURE__ */ React80.createElement(
+  return /* @__PURE__ */ React82.createElement(
     "div",
     {
       ref,
@@ -5760,11 +5774,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 React83 = __toESM(require("react"));
+var Row = React83.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__ */ React83.createElement("div", { ref, id, className: classes, ...others });
 });
 Row.displayName = "Row" /* Row */;
 var Row_default = Row;
@@ -5774,8 +5788,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 React84 = __toESM(require("react"));
+var ScrollView = React84.forwardRef(
   ({ id, scrollDirection, children }, ref) => {
     const { styled } = useTrilogyContext();
     const scrollDirectionClassName = () => {
@@ -5793,7 +5807,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__ */ React84.createElement("div", { ref, className: classes, id }, children);
   }
 );
 ScrollView.displayName = "ScrollView" /* ScrollView */;
@@ -5801,8 +5815,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_react44 = __toESM(require("react"));
+var Section = import_react44.default.forwardRef(({ className, id, skeleton, backgroundColor, backgroundSrc, inverted, ...others }, ref) => {
   const { styled } = useTrilogyContext();
   const _className = hashClass(
     styled,
@@ -5815,7 +5829,7 @@ var Section = import_react42.default.forwardRef(({ className, id, skeleton, back
       skeleton && is("loading")
     )
   );
-  return /* @__PURE__ */ import_react42.default.createElement(
+  return /* @__PURE__ */ import_react44.default.createElement(
     "section",
     {
       ref,
@@ -5833,19 +5847,19 @@ var Section_default = Section;
 
 // components/segment-control/SegmentControl.tsx
 var import_clsx76 = __toESM(require("clsx"));
-var import_react44 = __toESM(require("react"));
+var import_react46 = __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_react45 = __toESM(require("react"));
+var SegmentControlItem = import_react45.default.forwardRef(
   ({ active, onClick, disabled, className, id, children, ...others }, ref) => {
-    const [activeItem, setActiveItem] = (0, import_react43.useState)(active || false);
+    const [activeItem, setActiveItem] = (0, import_react45.useState)(active || false);
     const { styled } = useTrilogyContext();
-    (0, import_react43.useEffect)(() => {
+    (0, import_react45.useEffect)(() => {
       setActiveItem(active || false);
     }, [active]);
-    return /* @__PURE__ */ import_react43.default.createElement(
+    return /* @__PURE__ */ import_react45.default.createElement(
       "button",
       {
         type: "button",
@@ -5874,10 +5888,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_react46.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_react46.useState)(activeIndex || 0);
   const isActive = (index, childPropsActive) => {
     if (typeof childPropsActive !== "undefined" && !activateIndex) {
       return childPropsActive;
@@ -5890,10 +5904,10 @@ var SegmentControl = import_react44.default.forwardRef(({ className, id, onClick
     setActivateIndex(index);
     if (onClick) onClick(e);
   };
-  import_react44.default.useEffect(() => {
+  import_react46.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_react46.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,
@@ -5908,7 +5922,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_react46.default.createElement(
       item_default4,
       {
         disabled: props.disabled,
@@ -5917,101 +5931,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_react46.default.cloneElement(child, props);
   }));
 });
 SegmentControl.displayName = "SegmentControl" /* SegmentControl */;
 var SegmentControl_default = SegmentControl;
 
-// components/skeleton/Skeleton.native.tsx
-var import_react45 = __toESM(require("react"));
-var import_react_native = require("react-native");
-var Skeleton = ({
-  style,
-  width = "100%",
-  height = 20,
-  backgroundColor = "#E1E9EE",
-  shimmerColor = "#F7F8F8",
-  duration = 1200,
-  borderRadius = 4,
-  children,
-  testID
-}) => {
-  const shimmerValue = (0, import_react45.useRef)(new import_react_native.Animated.Value(0)).current;
-  const [containerWidth, setContainerWidth] = import_react45.default.useState(200);
-  (0, import_react45.useEffect)(() => {
-    const shimmerAnimation = import_react_native.Animated.loop(
-      import_react_native.Animated.timing(shimmerValue, {
-        toValue: 1,
-        duration,
-        useNativeDriver: true
-      }),
-      { iterations: -1 }
-    );
-    shimmerAnimation.start();
-    return () => shimmerAnimation.stop();
-  }, [shimmerValue, duration]);
-  const translateX = shimmerValue.interpolate({
-    inputRange: [0, 1],
-    outputRange: [-containerWidth, containerWidth]
-  });
-  const opacity = shimmerValue.interpolate({
-    inputRange: [0, 0.5, 1],
-    outputRange: [0.3, 0.8, 0.3]
-  });
-  const containerStyle = {
-    width: children ? void 0 : width,
-    height: children ? void 0 : height,
-    backgroundColor,
-    borderRadius,
-    overflow: "hidden",
-    alignSelf: children ? "flex-start" : void 0,
-    ...style
-  };
-  const handleLayout = (event) => {
-    const { width: layoutWidth } = event.nativeEvent.layout;
-    setContainerWidth(layoutWidth);
-  };
-  if (children) {
-    return /* @__PURE__ */ import_react45.default.createElement(import_react_native.View, { style: containerStyle, testID, onLayout: handleLayout }, /* @__PURE__ */ import_react45.default.createElement(import_react_native.View, { style: { opacity: 0 } }, children), /* @__PURE__ */ import_react45.default.createElement(
-      import_react_native.Animated.View,
-      {
-        style: [
-          {
-            position: "absolute",
-            top: 0,
-            left: 0,
-            width: containerWidth * 0.7,
-            height: "100%",
-            backgroundColor: shimmerColor,
-            opacity,
-            transform: [{ translateX }]
-          }
-        ]
-      }
-    ));
-  }
-  return /* @__PURE__ */ import_react45.default.createElement(import_react_native.View, { style: containerStyle, testID, onLayout: handleLayout }, /* @__PURE__ */ import_react45.default.createElement(
-    import_react_native.Animated.View,
-    {
-      style: [
-        {
-          width: containerWidth * 0.7,
-          height: "100%",
-          backgroundColor: shimmerColor,
-          opacity,
-          transform: [{ translateX }]
-        }
-      ]
-    }
-  ));
+// components/skeleton/Skeleton.tsx
+var import_react47 = __toESM(require("react"));
+var Skeleton = () => {
+  return /* @__PURE__ */ import_react47.default.createElement("div", null);
 };
-var Skeleton_native_default = Skeleton;
+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 React89 = __toESM(require("react"));
+var Spacer = React89.forwardRef(({ size: size2, horizontal, className, id }, ref) => {
   const { styled } = useTrilogyContext();
   const styles = {
     spacer: {
@@ -6020,24 +5956,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__ */ React89.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 React90 = __toESM(require("react"));
+var Stepper = React90.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] = React90.useState(1);
+  const nbChild = React90.useMemo(() => {
     if (children && Array.isArray(children)) return children.length;
     if (children && !Array.isArray(children)) return 1;
     return 0;
   }, [children]);
-  React88.useEffect(() => {
+  React90.useEffect(() => {
     if (children) {
       if (Array.isArray(children)) {
         let haveCurrentStep = false;
@@ -6054,15 +5990,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__ */ React90.createElement("div", { ref, id, className: classes, ...others }, children, /* @__PURE__ */ React90.createElement("div", { className: "step-count" }, /* @__PURE__ */ React90.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_react48 = __toESM(require("react"));
+var Step = import_react48.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(
@@ -6076,7 +6012,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_react48.default.createElement("div", { ref, id, className: classes, "data-label": label, ...others }, /* @__PURE__ */ import_react48.default.createElement("div", { className: classesStepLabel }, label, !done && iconName && /* @__PURE__ */ import_react48.default.createElement(Icon_default, { name: iconName && iconName, className: "step-icon", size: "medium" /* MEDIUM */ })));
 });
 Step.displayName = "Step" /* Step */;
 var Step_default = Step;
@@ -6095,10 +6031,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_react49 = __toESM(require("react"));
+var Switch = import_react49.default.forwardRef(({
   className,
-  id = import_react47.default.useId(),
+  id = import_react49.default.useId(),
   label,
   value,
   checked,
@@ -6112,23 +6048,23 @@ var Switch = import_react47.default.forwardRef(({
   fullWidth,
   ...others
 }, ref) => {
-  const [_checked, setChecked] = (0, import_react47.useState)(checked || false);
+  const [_checked, setChecked] = (0, import_react49.useState)(checked || false);
   const { styled } = useTrilogyContext();
-  import_react47.default.useEffect(() => {
+  import_react49.default.useEffect(() => {
     setChecked(checked || false);
   }, [checked]);
-  (0, import_react47.useEffect)(() => {
+  (0, import_react49.useEffect)(() => {
     if (!readonly) {
       setChecked(checked || false);
     }
   }, [checked, readonly]);
-  return /* @__PURE__ */ import_react47.default.createElement(
+  return /* @__PURE__ */ import_react49.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_react49.default.createElement(
       "input",
       {
         onChange: (e) => {
@@ -6164,14 +6100,14 @@ var Switch = import_react47.default.forwardRef(({
         ...others
       }
     ),
-    /* @__PURE__ */ import_react47.default.createElement("label", { htmlFor: `switch-${id}` }, label)
+    /* @__PURE__ */ import_react49.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 React93 = __toESM(require("react"));
 var import_clsx81 = __toESM(require("clsx"));
 
 // components/table/TableProps.ts
@@ -6183,7 +6119,7 @@ var TableBorderEnum = /* @__PURE__ */ ((TableBorderEnum2) => {
 })(TableBorderEnum || {});
 
 // components/table/Table.tsx
-var Table = React91.forwardRef(({
+var Table = React93.forwardRef(({
   className,
   id,
   fullwidth,
@@ -6204,15 +6140,15 @@ var Table = React91.forwardRef(({
       className
     )
   );
-  return /* @__PURE__ */ React91.createElement("table", { ref, id, className: classes, ...others });
+  return /* @__PURE__ */ React93.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 React94 = __toESM(require("react"));
 var import_clsx82 = __toESM(require("clsx"));
-var TableHead = React92.forwardRef(({ className, id, color, backgroundColor, ...others }, ref) => {
+var TableHead = React94.forwardRef(({ className, id, color, backgroundColor, ...others }, ref) => {
   const { styled } = useTrilogyContext();
   const classes = hashClass(
     styled,
@@ -6222,7 +6158,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__ */ React94.createElement("thead", { ref, id, className: classes, ...others });
 });
 TableHead.displayName = "TableHead" /* TableHead */;
 var TableHead_default = TableHead;
@@ -6231,9 +6167,9 @@ var TableHead_default = TableHead;
 var head_default = TableHead_default;
 
 // components/table/body/TableBody.tsx
-var React93 = __toESM(require("react"));
+var React95 = __toESM(require("react"));
 var import_clsx83 = __toESM(require("clsx"));
-var TableBody = React93.forwardRef(({ className, id, color, backgroundColor, ...others }, ref) => {
+var TableBody = React95.forwardRef(({ className, id, color, backgroundColor, ...others }, ref) => {
   const { styled } = useTrilogyContext();
   const classes = hashClass(
     styled,
@@ -6243,7 +6179,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__ */ React95.createElement("tbody", { ref, id, className: classes, ...others });
 });
 TableBody.displayName = "TableBody" /* TableBody */;
 var TableBody_default = TableBody;
@@ -6252,12 +6188,12 @@ var TableBody_default = TableBody;
 var body_default = TableBody_default;
 
 // components/table/th/TableTh.tsx
-var React94 = __toESM(require("react"));
+var React96 = __toESM(require("react"));
 var import_clsx84 = __toESM(require("clsx"));
-var TableTh = React94.forwardRef(({ className, id, colSpan, rowSpan, ...others }, ref) => {
+var TableTh = React96.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__ */ React96.createElement("th", { ref, id, className: classes, colSpan, rowSpan, ...others });
 });
 TableTh.displayName = "TableTh" /* TableTh */;
 var TableTh_default = TableTh;
@@ -6266,9 +6202,9 @@ var TableTh_default = TableTh;
 var th_default = TableTh_default;
 
 // components/table/tr/TableTr.tsx
-var React95 = __toESM(require("react"));
+var React97 = __toESM(require("react"));
 var import_clsx85 = __toESM(require("clsx"));
-var TableTr = React95.forwardRef(({
+var TableTr = React97.forwardRef(({
   className,
   id,
   expandable,
@@ -6288,7 +6224,7 @@ var TableTr = React95.forwardRef(({
       color && getColorClassName(color)
     )
   );
-  return /* @__PURE__ */ React95.createElement("tr", { ref, id, className: classes, ...others });
+  return /* @__PURE__ */ React97.createElement("tr", { ref, id, className: classes, ...others });
 });
 TableTr.displayName = "TableTr" /* TableTr */;
 var TableTr_default = TableTr;
@@ -6297,12 +6233,12 @@ var TableTr_default = TableTr;
 var tr_default = TableTr_default;
 
 // components/table/td/TableTd.tsx
-var React96 = __toESM(require("react"));
+var React98 = __toESM(require("react"));
 var import_clsx86 = __toESM(require("clsx"));
-var TableTd = React96.forwardRef(({ className, id, rowSpan, colSpan, ...others }, ref) => {
+var TableTd = React98.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__ */ React98.createElement("td", { ref, id, className: classes, rowSpan, colSpan, ...others });
 });
 TableTd.displayName = "TableTd" /* TableTd */;
 var TableTd_default = TableTd;
@@ -6311,8 +6247,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_react50 = __toESM(require("react"));
+var TabsContext = import_react50.default.createContext({
   activeIndex: 0,
   inverted: false,
   setActiveIndex: () => 0,
@@ -6323,20 +6259,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_react51 = __toESM(require("react"));
+var Tabs = import_react51.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_react51.default.useState(activeIndex || 0);
+    const [isInverted, setIsInverted] = import_react51.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_react51.default.useEffect(() => {
       activeIndex !== void 0 && setCurrentIndex(activeIndex);
     }, [activeIndex]);
-    return /* @__PURE__ */ import_react49.default.createElement(
+    return /* @__PURE__ */ import_react51.default.createElement(
       TabsContext.Provider,
       {
         value: {
@@ -6347,7 +6283,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_react51.default.createElement("div", { ref, id, className: classes, "data-tabs-context": "" }, children)
     );
   }
 );
@@ -6356,16 +6292,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_react52 = __toESM(require("react"));
+var Tab = import_react52.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_react52.default.useContext(TabsContext);
     const Tag2 = others.href || others.to ? routerLink : "button";
-    const isActive = import_react50.default.useMemo(() => activeIndex === index, [activeIndex, index]);
+    const isActive = import_react52.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_react52.default.useCallback(
       (e) => {
         if (!disabled) {
           if (!others.href && !others.to) setActiveIndex(index);
@@ -6374,10 +6310,10 @@ var Tab = import_react50.default.forwardRef(
       },
       [disabled, onClick, index, setActiveIndex]
     );
-    import_react50.default.useEffect(() => {
+    import_react52.default.useEffect(() => {
       if (active) setActiveIndex(index);
     }, [active, setActiveIndex, index]);
-    return /* @__PURE__ */ import_react50.default.createElement(
+    return /* @__PURE__ */ import_react52.default.createElement(
       Tag2,
       {
         ref,
@@ -6393,8 +6329,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_react52.default.createElement("div", { className: hashClass(styled, "tab-icon") }, iconName && /* @__PURE__ */ import_react52.default.createElement(Icon_default, { size: small ? "small" : "medium", name: iconName })),
+      label && /* @__PURE__ */ import_react52.default.createElement(Text_default, null, label)
     );
   }
 );
@@ -6403,31 +6339,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_react53 = __toESM(require("react"));
+var TabList = import_react53.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_react53.default.useRef(null);
+    const tabRefs = import_react53.default.useRef([]);
+    const { small } = import_react53.default.useContext(TabsContext);
+    import_react53.default.useImperativeHandle(ref, () => TabListRef.current);
+    const [tabsWidth, setTabsWidth] = import_react53.default.useState(0);
+    const [tabListWidth, setTabListWidth] = import_react53.default.useState(0);
+    const [scrollLeft, setScrollLeft] = import_react53.default.useState(0);
+    const [tabFocused, setTabFocused] = import_react53.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_react53.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_react53.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_react53.default.useMemo(() => {
+      return import_react53.default.Children.map(children, (child, index) => {
+        if (!import_react53.default.isValidElement(child)) return false;
+        return /* @__PURE__ */ import_react53.default.createElement(
           Tab_default,
           {
             ref: (el) => tabRefs.current[index] = el == null ? void 0 : el.getBoundingClientRect(),
@@ -6437,7 +6373,7 @@ var TabList = import_react51.default.forwardRef(
         );
       });
     }, [children, tabRefs]);
-    const scrollWithArrow = import_react51.default.useCallback(
+    const scrollWithArrow = import_react53.default.useCallback(
       (direction) => {
         var _a;
         if (tabRefs.current) {
@@ -6449,7 +6385,7 @@ var TabList = import_react51.default.forwardRef(
       },
       [tabRefs.current, tabFocused, TabListRef]
     );
-    const handleScrollList = import_react51.default.useCallback(
+    const handleScrollList = import_react53.default.useCallback(
       (e) => {
         const target = e.target;
         const firstGap = tabRefs.current[0].x + (small ? 16 : 24);
@@ -6461,26 +6397,26 @@ var TabList = import_react51.default.forwardRef(
       },
       [tabRefs, small]
     );
-    const onClickPrev = import_react51.default.useCallback(() => {
+    const onClickPrev = import_react53.default.useCallback(() => {
       isVisibleArrowLeft && scrollWithArrow(-1);
     }, [scrollWithArrow, isVisibleArrowLeft]);
-    const onClickNext = import_react51.default.useCallback(() => {
+    const onClickNext = import_react53.default.useCallback(() => {
       isVisibleArrowRight && scrollWithArrow(1);
     }, [scrollWithArrow, isVisibleArrowRight]);
-    const setWidths = import_react51.default.useCallback(() => {
+    const setWidths = import_react53.default.useCallback(() => {
       if (TabListRef.current) {
         setTabsWidth(TabListRef.current.clientWidth);
         setTabListWidth(TabListRef.current.scrollWidth);
       }
     }, [TabListRef]);
-    import_react51.default.useEffect(() => {
+    import_react53.default.useEffect(() => {
       setWidths();
     }, [setWidths, isVisibleArrowLeft, isVisibleArrowRight]);
-    import_react51.default.useEffect(() => {
+    import_react53.default.useEffect(() => {
       window.addEventListener("resize", setWidths);
       return () => window.removeEventListener("resize", setWidths);
     }, [TabListRef, setWidths]);
-    return /* @__PURE__ */ import_react51.default.createElement(
+    return /* @__PURE__ */ import_react53.default.createElement(
       "div",
       {
         ref: TabListRef,
@@ -6491,7 +6427,7 @@ var TabList = import_react51.default.forwardRef(
         onScroll: handleScrollList,
         ...others
       },
-      isVisibleArrowLeft && /* @__PURE__ */ import_react51.default.createElement(
+      isVisibleArrowLeft && /* @__PURE__ */ import_react53.default.createElement(
         Icon_default,
         {
           "data-arrow-prev": "",
@@ -6502,7 +6438,7 @@ var TabList = import_react51.default.forwardRef(
         }
       ),
       TabElms,
-      isVisibleArrowRight && /* @__PURE__ */ import_react51.default.createElement(
+      isVisibleArrowRight && /* @__PURE__ */ import_react53.default.createElement(
         Icon_default,
         {
           "data-arrow-next": "",
@@ -6520,13 +6456,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_react54 = __toESM(require("react"));
+var TabPanel = import_react54.default.forwardRef(({ children, className, testId, ...others }, ref) => {
   const { styled } = useTrilogyContext();
   const { index, ...props } = others;
-  const { activeIndex } = import_react52.default.useContext(TabsContext);
+  const { activeIndex } = import_react54.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_react54.default.createElement("div", { ref, "data-testid": testId, className: classes, ...props }, children);
 });
 TabPanel.displayName = "TabPanel" /* TabPanel */;
 var TabPanel_default = TabPanel;
@@ -6536,13 +6472,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_react55 = __toESM(require("react"));
+var TabPanels = import_react55.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_react55.default.createElement("div", { ref, id, "data-testid": testId, className: classes, ...others }, import_react55.default.Children.map(children, (child, index) => {
+    if (!import_react55.default.isValidElement(child)) return false;
+    return /* @__PURE__ */ import_react55.default.createElement(tab_panel_default, { ...child.props, index });
   }));
 });
 TabPanels.displayName = "TabPanels" /* TabPanels */;
@@ -6550,8 +6486,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_react56 = __toESM(require("react"));
+var Tag = import_react56.default.forwardRef(
   ({ label, className, id, variant, inverted, small, iconName, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     const tagClassNames = hashClass(
@@ -6565,7 +6501,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_react56.default.createElement("span", { ref, id, className: tagClassNames, ...others }, iconName && /* @__PURE__ */ import_react56.default.createElement(Icon_default, { className: tagIconClassNames, name: iconName }), label);
   }
 );
 Tag.displayName = "Tag" /* Tag */;
@@ -6573,10 +6509,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 React106 = __toESM(require("react"));
+var TagList = React106.forwardRef(({ className, id, align, marginless, ...others }, ref) => {
   const { styled } = useTrilogyContext();
-  return /* @__PURE__ */ React104.createElement(
+  return /* @__PURE__ */ React106.createElement(
     "div",
     {
       ref,
@@ -6606,8 +6542,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_react57 = __toESM(require("react"));
+var Textarea = import_react57.default.forwardRef(
   ({
     className,
     id,
@@ -6628,9 +6564,9 @@ var Textarea = import_react55.default.forwardRef(
     iconNameRight,
     ...others
   }, ref) => {
-    const [value, setValue] = (0, import_react55.useState)(defaultValue || "");
+    const [value, setValue] = (0, import_react57.useState)(defaultValue || "");
     const { styled } = useTrilogyContext();
-    (0, import_react55.useEffect)(() => {
+    (0, import_react57.useEffect)(() => {
       setValue(defaultValue || "");
     }, [defaultValue]);
     const wrapperClasses = hashClass(styled, (0, import_clsx94.default)("field textarea-wrapper", className, status && is(status)));
@@ -6641,7 +6577,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_react57.default.createElement("div", { id, className: wrapperClasses }, label && /* @__PURE__ */ import_react57.default.createElement("label", { className: hashClass(styled, "textarea-label"), htmlFor: id }, label, " ", required && /* @__PURE__ */ import_react57.default.createElement(Text_default, { markup: "span" /* SPAN */, typo: "has-text-error" /* TEXT_ERROR */ }, "*")), sample && /* @__PURE__ */ import_react57.default.createElement(Text_default, { className: "input-sample", level: 2 /* TWO */, id }, sample), /* @__PURE__ */ import_react57.default.createElement("div", { className: controlClasses }, /* @__PURE__ */ import_react57.default.createElement(
       "textarea",
       {
         ref,
@@ -6664,7 +6600,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_react57.default.createElement(Icon_default, { name: iconNameLeft, size: "small", className: "icon-left" }), iconNameRight && /* @__PURE__ */ import_react57.default.createElement(Icon_default, { name: iconNameRight, size: "small", className: "icon-right" }), maxLength && /* @__PURE__ */ import_react57.default.createElement("div", { className: counterClasses }, `${value.length}/${maxLength == null ? void 0 : maxLength.toString()}`)), help && /* @__PURE__ */ import_react57.default.createElement(Text_default, { className: helpClasses }, help));
   }
 );
 Textarea.displayName = "Textarea" /* Textarea */;
@@ -6672,15 +6608,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 React108 = __toESM(require("react"));
+var TimelineContent = React108.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__ */ React108.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__ */ React108.createElement("div", { ref, id, className: classes, ...others }, heading && /* @__PURE__ */ React108.createElement(Text_default, { markup: "p" /* P */ }, heading), content && /* @__PURE__ */ React108.createElement(Text_default, { className: "main-content", markup: "p" /* P */ }, content), linkTo && linkLabel && /* @__PURE__ */ React108.createElement(Link_default, { href: linkTo }, linkLabel));
   }
 );
 TimelineContent.displayName = "TimelineContent" /* TimelineContent */;
@@ -6691,14 +6627,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 React109 = __toESM(require("react"));
+var TimelineItem = React109.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__ */ React109.createElement("div", { ref, id, className: classes, ...others });
 });
 TimelineItem.displayName = "TimelineItem" /* TimelineItem */;
 var TimelineItem_default = TimelineItem;
@@ -6708,8 +6644,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 React110 = __toESM(require("react"));
+var TimelineMarker = React110.forwardRef(({
   className,
   id,
   iconClassname,
@@ -6719,7 +6655,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__ */ React110.createElement("div", { ref, id, className: classes, ...others }, /* @__PURE__ */ React110.createElement("div", { className: "card-header-icon" }, /* @__PURE__ */ React110.createElement(Icon_default, { className: iconClasses, name: iconName, size: "small" /* SMALL */ })));
 });
 TimelineMarker.displayName = "TimelineMarker" /* TimelineMarker */;
 var TimelineMarker_default = TimelineMarker;
@@ -6729,18 +6665,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 React111 = __toESM(require("react"));
+var Timeline = React111.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__ */ React111.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 React112 = __toESM(require("react"));
 
 // components/view/ViewProps/index.ts
 var ViewMarkup = /* @__PURE__ */ ((ViewMarkup2) => {
@@ -6765,7 +6701,7 @@ var ViewMarkup = /* @__PURE__ */ ((ViewMarkup2) => {
 })(ViewMarkup || {});
 
 // components/view/View.tsx
-var View2 = React110.forwardRef(({
+var View = React112.forwardRef(({
   children,
   style,
   className,
@@ -6802,7 +6738,7 @@ var View2 = React110.forwardRef(({
       className
     )
   );
-  return /* @__PURE__ */ React110.createElement(
+  return /* @__PURE__ */ React112.createElement(
     Tag2,
     {
       ref,
@@ -6821,7 +6757,7 @@ var View2 = React110.forwardRef(({
     children
   );
 });
-var View_default = View2;
+var View_default = View;
 
 // components/view/ViewEnum.ts
 var ViewColor = /* @__PURE__ */ ((ViewColor2) => {