@trilogy-ds/react 0.0.4-esm-cjs → 0.0.5-esm-cjs

package/lib/index.js

@@ -1,39 +1,10 @@
 "use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -55,26 +26,6 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
 
 // index.ts
 var index_exports = {};
@@ -321,11 +272,10 @@ var hashClass = (addHash = false, classes) => {
 
 // components/accordion/Accordion.tsx
 var import_clsx = __toESM(require("clsx"));
-var Accordion = React2.forwardRef((_a, ref) => {
-  var _b = _a, { id, className, children } = _b, others = __objRest(_b, ["id", "className", "children"]);
+var Accordion = React2.forwardRef(({ id, className, children, ...others }, ref) => {
   const { styled } = useTrilogyContext();
   const classes = hashClass(styled, (0, import_clsx.default)("accordion", className));
-  return /* @__PURE__ */ React2.createElement("div", __spreadValues({ ref, id, className: classes }, others), children);
+  return /* @__PURE__ */ React2.createElement("div", { ref, id, className: classes, ...others }, children);
 });
 Accordion.displayName = "Accordion" /* Accordion */;
 var Accordion_default = Accordion;
@@ -334,8 +284,7 @@ var Accordion_default = Accordion;
 var import_clsx2 = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
 var AccordionItem = import_react.default.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { open, className, children, id = import_react.default.useId(), onClick, disabled } = _b, others = __objRest(_b, ["open", "className", "children", "id", "onClick", "disabled"]);
+  ({ open, className, children, id = import_react.default.useId(), onClick, disabled, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     const classes = hashClass(styled, (0, import_clsx2.default)("accordion-item", className));
     const ariaProps = {};
@@ -345,14 +294,14 @@ var AccordionItem = import_react.default.forwardRef(
     }
     return /* @__PURE__ */ import_react.default.createElement(
       "details",
-      __spreadProps(__spreadValues(__spreadProps(__spreadValues({
-        open
-      }, ariaProps), {
+      {
+        open,
+        ...ariaProps,
         "data-testid": id,
         className: classes,
         ref,
-        id
-      }), others), {
+        id,
+        ...others,
         onClick: (e) => {
           if (disabled) {
             e.preventDefault();
@@ -368,7 +317,7 @@ var AccordionItem = import_react.default.forwardRef(
             e.stopPropagation();
           }
         }
-      }),
+      },
       children
     );
   }
@@ -380,17 +329,17 @@ var AccordionItem_default = AccordionItem;
 var import_clsx3 = __toESM(require("clsx"));
 var React4 = __toESM(require("react"));
 var AccordionHeader = React4.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { children, className, id } = _b, others = __objRest(_b, ["children", "className", "id"]);
+  ({ children, className, id, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     return /* @__PURE__ */ React4.createElement(
       "summary",
-      __spreadValues({
+      {
         ref,
         id,
         className: hashClass(styled, (0, import_clsx3.default)("accordion-header", className)),
-        role: "button"
-      }, others),
+        role: "button",
+        ...others
+      },
       children
     );
   }
@@ -402,19 +351,19 @@ var AccordionHeader_default = AccordionHeader;
 var import_clsx4 = __toESM(require("clsx"));
 var React5 = __toESM(require("react"));
 var AccordionBody = React5.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { children, className, id } = _b, others = __objRest(_b, ["children", "className", "id"]);
+  ({ children, className, id, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     return /* @__PURE__ */ React5.createElement(
       "div",
-      __spreadValues({
+      {
         ref,
         id,
         className: hashClass(styled, (0, import_clsx4.default)("accordion-body", className)),
         onClick: (e) => {
           e.stopPropagation();
-        }
-      }, others),
+        },
+        ...others
+      },
       children
     );
   }
@@ -715,8 +664,7 @@ var has = classify("has");
 var import_clsx5 = __toESM(require("clsx"));
 var React7 = __toESM(require("react"));
 var Icon = React7.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { className, id, size: size2, name, circled, stretched, color, backgroundColor, onClick, skeleton, align } = _b, others = __objRest(_b, ["className", "id", "size", "name", "circled", "stretched", "color", "backgroundColor", "onClick", "skeleton", "align"]);
+  ({ 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 */)) || "";
     const classes = hashClass(
@@ -734,7 +682,7 @@ var Icon = React7.forwardRef(
         className
       )
     );
-    return /* @__PURE__ */ React7.createElement("span", __spreadProps(__spreadValues({ 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__ */ 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" }));
   }
 );
 Icon.displayName = "Icon" /* Icon */;
@@ -838,32 +786,20 @@ var TextMarkup = /* @__PURE__ */ ((TextMarkup2) => {
 })(TextMarkup || {});
 
 // components/text/Text.tsx
-var Text = React8.forwardRef((_a, ref) => {
-  var _b = _a, {
-    level,
-    markup,
-    children,
-    className,
-    id,
-    typo,
-    inverted,
-    skeleton,
-    accessibilityLabel,
-    marginless,
-    numberOfLines
-  } = _b, others = __objRest(_b, [
-    "level",
-    "markup",
-    "children",
-    "className",
-    "id",
-    "typo",
-    "inverted",
-    "skeleton",
-    "accessibilityLabel",
-    "marginless",
-    "numberOfLines"
-  ]);
+var Text = React8.forwardRef(({
+  level,
+  markup,
+  children,
+  className,
+  id,
+  typo,
+  inverted,
+  skeleton,
+  accessibilityLabel,
+  marginless,
+  numberOfLines,
+  ...others
+}, ref) => {
   const { styled } = useTrilogyContext();
   const levelText = () => {
     if (level) {
@@ -900,13 +836,14 @@ var Text = React8.forwardRef((_a, ref) => {
   const Tag2 = markup && isCorrectMarkup2(markup) ? markup : "p";
   return /* @__PURE__ */ React8.createElement(
     Tag2,
-    __spreadValues({
+    {
       ref,
       id,
       style: numberOfLines ? { WebkitLineClamp: numberOfLines } : {},
       "aria-label": accessibilityLabel,
-      className: classes
-    }, others),
+      className: classes,
+      ...others
+    },
     children
   );
 });
@@ -965,36 +902,22 @@ var isCorrectMarkup = (stringMarkup) => {
   return stringMarkup in TitleMarkup || Object.values(TitleMarkup).includes(stringMarkup);
 };
 var Title = import_react4.default.forwardRef(
-  (_a, ref) => {
-    var _b = _a, {
-      level = 1 /* ONE */,
-      markup,
-      children,
-      className,
-      id,
-      typo,
-      skeleton,
-      inverted,
-      onClick,
-      accessibilityLabel,
-      subtitle,
-      overline,
-      marginless
-    } = _b, others = __objRest(_b, [
-      "level",
-      "markup",
-      "children",
-      "className",
-      "id",
-      "typo",
-      "skeleton",
-      "inverted",
-      "onClick",
-      "accessibilityLabel",
-      "subtitle",
-      "overline",
-      "marginless"
-    ]);
+  ({
+    level = 1 /* ONE */,
+    markup,
+    children,
+    className,
+    id,
+    typo,
+    skeleton,
+    inverted,
+    onClick,
+    accessibilityLabel,
+    subtitle,
+    overline,
+    marginless,
+    ...others
+  }, ref) => {
     const { styled } = useTrilogyContext();
     const classes = hashClass(
       styled,
@@ -1016,7 +939,7 @@ var Title = import_react4.default.forwardRef(
       if (overline) return overlineClasses;
       return classes;
     };
-    return /* @__PURE__ */ import_react4.default.createElement(Tag2, __spreadValues({ ref, id, "aria-label": accessibilityLabel, onClick, className: getClassname() }, others), children);
+    return /* @__PURE__ */ import_react4.default.createElement(Tag2, { ref, id, "aria-label": accessibilityLabel, onClick, className: getClassname(), ...others }, children);
   }
 );
 Title.displayName = "Title" /* Title */;
@@ -1100,53 +1023,38 @@ var ToasterContext_default = ToasterContext;
 var context_default = ToasterContext_default;
 
 // components/alert/Alert.tsx
-var ToasterAlert = (_a) => {
-  var _b = _a, {
-    title,
-    position,
-    float,
-    description,
-    iconName,
-    status,
-    closable,
-    onClick,
-    className,
-    id,
-    testId,
-    offset,
-    display,
-    children,
-    toasterChildren,
-    markup
-  } = _b, others = __objRest(_b, [
-    "title",
-    "position",
-    "float",
-    "description",
-    "iconName",
-    "status",
-    "closable",
-    "onClick",
-    "className",
-    "id",
-    "testId",
-    "offset",
-    "display",
-    "children",
-    "toasterChildren",
-    "markup"
-  ]);
+var ToasterAlert = ({
+  title,
+  position,
+  float,
+  description,
+  iconName,
+  status,
+  closable,
+  onClick,
+  className,
+  id,
+  testId,
+  offset,
+  display,
+  children,
+  toasterChildren,
+  markup,
+  ...others
+}) => {
   const { styled } = useTrilogyContext();
-  const positionStyles = __spreadValues(__spreadValues({
-    position: "fixed"
-  }, position === "bottom" /* BOTTOM */ ? { bottom: offset || 0 } : { top: offset || 0 }), float === "right" /* RIGHT */ ? { right: offset || 0 } : { left: offset || 0 });
+  const positionStyles = {
+    position: "fixed",
+    ...position === "bottom" /* BOTTOM */ ? { bottom: offset || 0 } : { top: offset || 0 },
+    ...float === "right" /* RIGHT */ ? { right: offset || 0 } : { left: offset || 0 }
+  };
   const classes = hashClass(
     styled,
     (0, import_clsx8.default)("toaster", status && is(getStatusClassName(status)), !status && is("info"), className)
   );
   return title && display !== false ? /* @__PURE__ */ React11.createElement(
     "div",
-    __spreadValues({
+    {
       id,
       style: positionStyles,
       onClick: (e) => {
@@ -1154,37 +1062,38 @@ var ToasterAlert = (_a) => {
         e.stopPropagation();
       },
       className: classes,
-      "data-testid": testId
-    }, others),
+      "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 */ }))
   ) : null;
 };
 var Alert = React11.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { banner, status, className, id, iconName, title, description, onClick, display = true, markup } = _b, others = __objRest(_b, ["banner", "status", "className", "id", "iconName", "title", "description", "onClick", "display", "markup"]);
+  ({ 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(() => {
-      var _a2;
+      var _a;
       if (iconName != null) return iconName;
-      else if (status) return (_a2 = getStatusIconName(status)) != null ? _a2 : "tri-infos-circle" /* INFOS_CIRCLE */;
+      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(
         "div",
-        __spreadValues({
+        {
           ref,
           id,
           onClick: (e) => {
             onClick == null ? void 0 : onClick(e);
             e.stopPropagation();
           },
-          className: classes
-        }, others),
+          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)
       );
@@ -1788,92 +1697,53 @@ var DataVerify = ({
   styled
 }) => {
   if (!display) return null;
-  return /* @__PURE__ */ import_react9.default.createElement("div", __spreadProps(__spreadValues({}, 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_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));
 };
 var InputGauge_default = InputGauge;
 
 // components/input/Input.tsx
 var Input = import_react10.default.forwardRef(
-  (_a, ref) => {
-    var _b = _a, {
-      forceControl,
-      label,
-      sample,
-      className,
-      id = import_react10.default.useId(),
-      disabled,
-      onChange,
-      onKeyPress,
-      onKeyUp,
-      onIconClick,
-      onClick,
-      onFocus,
-      onBlur,
-      patternValidator,
-      onMouseEnter,
-      onMouseLeave,
-      name,
-      placeholder,
-      type = "text" /* TEXT */,
-      defaultValue,
-      value,
-      loading,
-      focused,
-      status,
-      help,
-      onStatusChange,
-      customValidator,
-      onSubmit,
-      minLength,
-      maxLength,
-      accessibilityLabel,
-      autoCompleteType,
-      iconNameLeft,
-      iconNameRight,
-      securityGauge,
-      validationRules,
-      required,
-      readOnly
-    } = _b, others = __objRest(_b, [
-      "forceControl",
-      "label",
-      "sample",
-      "className",
-      "id",
-      "disabled",
-      "onChange",
-      "onKeyPress",
-      "onKeyUp",
-      "onIconClick",
-      "onClick",
-      "onFocus",
-      "onBlur",
-      "patternValidator",
-      "onMouseEnter",
-      "onMouseLeave",
-      "name",
-      "placeholder",
-      "type",
-      "defaultValue",
-      "value",
-      "loading",
-      "focused",
-      "status",
-      "help",
-      "onStatusChange",
-      "customValidator",
-      "onSubmit",
-      "minLength",
-      "maxLength",
-      "accessibilityLabel",
-      "autoCompleteType",
-      "iconNameLeft",
-      "iconNameRight",
-      "securityGauge",
-      "validationRules",
-      "required",
-      "readOnly"
-    ]);
+  ({
+    forceControl,
+    label,
+    sample,
+    className,
+    id = import_react10.default.useId(),
+    disabled,
+    onChange,
+    onKeyPress,
+    onKeyUp,
+    onIconClick,
+    onClick,
+    onFocus,
+    onBlur,
+    patternValidator,
+    onMouseEnter,
+    onMouseLeave,
+    name,
+    placeholder,
+    type = "text" /* TEXT */,
+    defaultValue,
+    value,
+    loading,
+    focused,
+    status,
+    help,
+    onStatusChange,
+    customValidator,
+    onSubmit,
+    minLength,
+    maxLength,
+    accessibilityLabel,
+    autoCompleteType,
+    iconNameLeft,
+    iconNameRight,
+    securityGauge,
+    validationRules,
+    required,
+    readOnly,
+    ...others
+  }, ref) => {
     const { styled } = useTrilogyContext();
     const idHelp = (0, import_react10.useId)();
     const idSample = (0, import_react10.useId)();
@@ -1922,14 +1792,15 @@ var Input = import_react10.default.forwardRef(
         const Markup = showPassword ? "button" : "div";
         return /* @__PURE__ */ import_react10.default.createElement(
           Markup,
-          __spreadProps(__spreadValues({}, showPassword && { "data-show-pwd": true, type: "button" }), {
+          {
+            ...showPassword && { "data-show-pwd": true, type: "button" },
             onClick: (e) => {
               onPress && onPress();
               if (onIconClick) {
                 onIconClick({ inputName: name2 != null ? name2 : "", inputValue: _value, target: e.target });
               }
             }
-          }),
+          },
           /* @__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(
             Icon_default,
@@ -1947,8 +1818,8 @@ var Input = import_react10.default.forwardRef(
     );
     const validator = !customValidator && patternValidator ? (value2) => patternValidator.test(value2) ? "success" /* SUCCESS */ : "error" /* ERROR */ : customValidator;
     (0, import_react10.useEffect)(() => {
-      var _a2;
-      setValue((_a2 = value != null ? value : defaultValue) != null ? _a2 : "");
+      var _a;
+      setValue((_a = value != null ? value : defaultValue) != null ? _a : "");
     }, [value, defaultValue]);
     (0, import_react10.useEffect)(() => {
       setIsFocused(focused != null ? focused : false);
@@ -1969,12 +1840,12 @@ var Input = import_react10.default.forwardRef(
     }, [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(
       "input",
-      __spreadProps(__spreadValues({
+      {
         "aria-describedby": `${idHelp} ${idSample}`,
         id,
         required,
-        readOnly
-      }, others), {
+        readOnly,
+        ...others,
         "aria-label": !label ? accessibilityLabel : void 0,
         type: inputType,
         className: classes,
@@ -2030,7 +1901,7 @@ var Input = import_react10.default.forwardRef(
           onBlur == null ? void 0 : onBlur(e);
           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(
       IconWrapper,
       {
@@ -2134,7 +2005,7 @@ var menu_default = AutoCompleteMenu_default;
 // components/autocomplete/utils/debounce.ts
 var debounce = (func, wait) => {
   let timeout;
-  return (...rest) => __async(void 0, null, function* () {
+  return async (...rest) => {
     const context = void 0;
     const later = function() {
       timeout = null;
@@ -2144,64 +2015,38 @@ var debounce = (func, wait) => {
       clearTimeout(timeout);
     }
     timeout = setTimeout(later, wait);
-  });
+  };
 };
 
 // components/autocomplete/AutoComplete.tsx
-var AutoCompleteRef = (_a, ref) => {
-  var _b = _a, {
-    defaultValue,
-    value,
-    classNameMenu,
-    absoluteMenu,
-    fullwidthMenu,
-    placeholder,
-    data,
-    status,
-    onBlur,
-    onChange,
-    name,
-    matching = defaultMatching,
-    displayMenu,
-    onItemSelected,
-    iconNameLeft,
-    iconNameRight,
-    disabled,
-    children,
-    accessibilityLabel,
-    onIconClick,
-    getSuggestions,
-    debounceSuggestionsTimeout,
-    onFocus,
-    id,
-    loading
-  } = _b, others = __objRest(_b, [
-    "defaultValue",
-    "value",
-    "classNameMenu",
-    "absoluteMenu",
-    "fullwidthMenu",
-    "placeholder",
-    "data",
-    "status",
-    "onBlur",
-    "onChange",
-    "name",
-    "matching",
-    "displayMenu",
-    "onItemSelected",
-    "iconNameLeft",
-    "iconNameRight",
-    "disabled",
-    "children",
-    "accessibilityLabel",
-    "onIconClick",
-    "getSuggestions",
-    "debounceSuggestionsTimeout",
-    "onFocus",
-    "id",
-    "loading"
-  ]);
+var AutoCompleteRef = ({
+  defaultValue,
+  value,
+  classNameMenu,
+  absoluteMenu,
+  fullwidthMenu,
+  placeholder,
+  data,
+  status,
+  onBlur,
+  onChange,
+  name,
+  matching = defaultMatching,
+  displayMenu,
+  onItemSelected,
+  iconNameLeft,
+  iconNameRight,
+  disabled,
+  children,
+  accessibilityLabel,
+  onIconClick,
+  getSuggestions,
+  debounceSuggestionsTimeout,
+  onFocus,
+  id,
+  loading,
+  ...others
+}, ref) => {
   const { styled } = useTrilogyContext();
   const [itemSelected, setItemSelected] = (0, import_react11.useState)(null);
   const [_inputValue, setInputValue] = (0, import_react11.useState)(value != null ? value : "");
@@ -2227,7 +2072,7 @@ var AutoCompleteRef = (_a, ref) => {
   (0, import_react11.useEffect)(() => {
     setSearch(matching(data, _inputValue));
   }, [data]);
-  const onTextChanged = (e) => __async(null, null, function* () {
+  const onTextChanged = async (e) => {
     setIsAutocompleteMenuVisible(true);
     if (onChange) {
       onChange({
@@ -2249,12 +2094,12 @@ var AutoCompleteRef = (_a, ref) => {
       setInputValue(e.inputValue);
     }
     if (getSuggestions) {
-      const data2 = yield getSuggestions(e.inputValue);
+      const data2 = await getSuggestions(e.inputValue);
       setSearch(data2);
     } else if (matching && data) {
       setSearch(matching(data, e.inputValue));
     }
-  });
+  };
   const onInputChange = debounceSuggestionsTimeout ? debounce(onTextChanged, debounceSuggestionsTimeout) : onTextChanged;
   const suggestionSelected = (value2, data2, search2) => {
     setIsAutocompleteMenuVisible(false);
@@ -2293,15 +2138,15 @@ var AutoCompleteRef = (_a, ref) => {
   };
   return /* @__PURE__ */ import_react11.default.createElement("div", { className: autocompleteContainerClasses }, /* @__PURE__ */ import_react11.default.createElement(
     Input_default,
-    __spreadValues(__spreadProps(__spreadValues({
+    {
       id,
       ref,
       defaultValue,
       accessibilityLabel,
       iconNameLeft,
       iconNameRight,
-      placeholder
-    }, name ? { name } : {}), {
+      placeholder,
+      ...name ? { name } : {},
       type: "text",
       status,
       autoCompleteType: "off" /* OFF */,
@@ -2317,8 +2162,9 @@ var AutoCompleteRef = (_a, ref) => {
         onInputChange(event);
       },
       onIconClick,
-      loading
-    }), __spreadValues({ onKeyDown: (e) => e.key === "Enter" && e.preventDefault() }, others))
+      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(
     item_default,
     {
@@ -2361,23 +2207,6 @@ var SpacingMatrixMode = /* @__PURE__ */ ((SpacingMatrixMode2) => {
   return SpacingMatrixMode2;
 })(SpacingMatrixMode || {});
 
-// components/spacer/Spacer.tsx
-var import_clsx14 = __toESM(require("clsx"));
-var React20 = __toESM(require("react"));
-var Spacer = React20.forwardRef(({ size: size2, horizontal, className, id }, ref) => {
-  const { styled } = useTrilogyContext();
-  const styles = {
-    spacer: {
-      marginLeft: horizontal ? `${size2}px` : "0px",
-      marginTop: !horizontal ? `${size2}px` : "0px"
-    }
-  };
-  const classes = hashClass(styled, (0, import_clsx14.default)(className));
-  return /* @__PURE__ */ React20.createElement("div", { ref, id, style: styles.spacer, className: classes });
-});
-Spacer.displayName = "Spacer" /* Spacer */;
-var Spacer_default = Spacer;
-
 // components/spacer/SpacerEnum.ts
 var SpacerSize = /* @__PURE__ */ ((SpacerSize2) => {
   SpacerSize2[SpacerSize2["ZERO"] = 0] = "ZERO";
@@ -2433,15 +2262,14 @@ var DEFAULT_SPACING_MATRIX = [
 ];
 
 // components/badge/Badge.tsx
-var import_clsx15 = __toESM(require("clsx"));
-var React21 = __toESM(require("react"));
-var Badge = React21.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { className, children, id, label, inverted, onClick, variant, position, status } = _b, others = __objRest(_b, ["className", "children", "id", "label", "inverted", "onClick", "variant", "position", "status"]);
+var import_clsx14 = __toESM(require("clsx"));
+var React20 = __toESM(require("react"));
+var Badge = React20.forwardRef(
+  ({ className, children, id, label, inverted, onClick, variant, position, status, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     const classes = hashClass(
       styled,
-      (0, import_clsx15.default)(
+      (0, import_clsx14.default)(
         "badge",
         inverted && is("inverted"),
         variant && has(`background-${getVariantClassName(variant) || getStatusClassName(variant)}`),
@@ -2471,32 +2299,34 @@ var Badge = React21.forwardRef(
       default:
         break;
     }
-    const simpleBadge = status && iconName && iconColor ? /* @__PURE__ */ React21.createElement(
+    const simpleBadge = status && iconName && iconColor ? /* @__PURE__ */ React20.createElement(
       Icon_default,
-      __spreadValues({
+      {
         ref,
         name: iconName,
-        className: (0, import_clsx15.default)(position && is(position), "badge-icon"),
+        className: (0, import_clsx14.default)(position && is(position), "badge-icon"),
         circled: true,
         backgroundColor: "WHITE" /* BACKGROUND */,
         color: iconColor,
-        id
-      }, others)
-    ) : /* @__PURE__ */ React21.createElement(
+        id,
+        ...others
+      }
+    ) : /* @__PURE__ */ React20.createElement(
       "span",
-      __spreadValues({
+      {
         ref,
         id,
         className: classes,
         onClick: (e) => {
           onClick == null ? void 0 : onClick(e);
           e.stopPropagation();
-        }
-      }, others),
+        },
+        ...others
+      },
       label
     );
     if (children) {
-      return /* @__PURE__ */ React21.createElement("span", { className: "badge-container" }, children, simpleBadge);
+      return /* @__PURE__ */ React20.createElement("span", { className: "badge-container" }, children, simpleBadge);
     }
     return simpleBadge;
   }
@@ -2516,49 +2346,32 @@ var BadgeVariant = /* @__PURE__ */ ((BadgeVariant2) => {
 })(BadgeVariant || {});
 
 // components/box/Box.tsx
-var import_clsx16 = __toESM(require("clsx"));
+var import_clsx15 = __toESM(require("clsx"));
 var import_react12 = __toESM(require("react"));
 var Box = import_react12.default.forwardRef(
-  (_a, ref) => {
-    var _b = _a, {
-      inverted,
-      children,
-      className,
-      id,
-      onClick,
-      skeleton,
-      href,
-      blank,
-      backgroundColor,
-      highlighted,
-      shadowless,
-      backgroundSrc,
-      flat,
-      headerOffset,
-      fullheight,
-      active
-    } = _b, others = __objRest(_b, [
-      "inverted",
-      "children",
-      "className",
-      "id",
-      "onClick",
-      "skeleton",
-      "href",
-      "blank",
-      "backgroundColor",
-      "highlighted",
-      "shadowless",
-      "backgroundSrc",
-      "flat",
-      "headerOffset",
-      "fullheight",
-      "active"
-    ]);
+  ({
+    inverted,
+    children,
+    className,
+    id,
+    onClick,
+    skeleton,
+    href,
+    blank,
+    backgroundColor,
+    highlighted,
+    shadowless,
+    backgroundSrc,
+    flat,
+    headerOffset,
+    fullheight,
+    active,
+    ...others
+  }, ref) => {
     const { styled } = useTrilogyContext();
     const classes = hashClass(
       styled,
-      (0, import_clsx16.default)(
+      (0, import_clsx15.default)(
         "box",
         shadowless && is("shadowless"),
         className,
@@ -2579,23 +2392,25 @@ var Box = import_react12.default.forwardRef(
     };
     return /* @__PURE__ */ import_react12.default.createElement(
       Tag2,
-      __spreadValues(__spreadValues(__spreadProps(__spreadValues({
+      {
         ref,
         id,
-        style: onClick && __spreadValues({}, hoverStyle),
-        href
-      }, href && blank && {
-        target: "_blank"
-      }), {
+        style: onClick && { ...hoverStyle },
+        href,
+        ...href && blank && {
+          target: "_blank"
+        },
         onClick: (e) => {
           onClick == null ? void 0 : onClick(e);
         },
-        className: classes
-      }), others), backgroundSrc && {
-        style: {
-          backgroundImage: `url(${backgroundSrc})`
+        className: classes,
+        ...others,
+        ...backgroundSrc && {
+          style: {
+            backgroundImage: `url(${backgroundSrc})`
+          }
         }
-      }),
+      },
       children
     );
   }
@@ -2604,32 +2419,33 @@ Box.displayName = "Box" /* Box */;
 var Box_default = Box;
 
 // components/box/content/BoxContent.tsx
-var import_clsx17 = __toESM(require("clsx"));
-var React23 = __toESM(require("react"));
-var BoxContent = React23.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { children, className, id, backgroundColor, backgroundSrc } = _b, others = __objRest(_b, ["children", "className", "id", "backgroundColor", "backgroundSrc"]);
+var import_clsx16 = __toESM(require("clsx"));
+var React22 = __toESM(require("react"));
+var BoxContent = React22.forwardRef(
+  ({ children, className, id, backgroundColor, backgroundSrc, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     const classes = hashClass(
       styled,
-      (0, import_clsx17.default)(
+      (0, import_clsx16.default)(
         "box-content",
         backgroundColor && has(getBackgroundClassName(backgroundColor)),
         backgroundSrc && has("background"),
         className
       )
     );
-    return /* @__PURE__ */ React23.createElement(
+    return /* @__PURE__ */ React22.createElement(
       "div",
-      __spreadValues(__spreadValues({
+      {
         ref,
         id,
-        className: classes
-      }, backgroundSrc && {
-        style: {
-          backgroundImage: `url(${backgroundSrc})`
-        }
-      }), others),
+        className: classes,
+        ...backgroundSrc && {
+          style: {
+            backgroundImage: `url(${backgroundSrc})`
+          }
+        },
+        ...others
+      },
       children
     );
   }
@@ -2641,22 +2457,22 @@ var BoxContent_default = BoxContent;
 var content_default = BoxContent_default;
 
 // components/box/footer/BoxFooter.tsx
-var import_clsx18 = __toESM(require("clsx"));
-var React24 = __toESM(require("react"));
-var BoxFooter = React24.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { className, children, backgroundColor, id } = _b, others = __objRest(_b, ["className", "children", "backgroundColor", "id"]);
+var import_clsx17 = __toESM(require("clsx"));
+var React23 = __toESM(require("react"));
+var BoxFooter = React23.forwardRef(
+  ({ className, children, backgroundColor, id, ...others }, ref) => {
     const { styled } = useTrilogyContext();
-    return /* @__PURE__ */ React24.createElement(
+    return /* @__PURE__ */ React23.createElement(
       "div",
-      __spreadValues({
+      {
         ref,
         id,
         className: hashClass(
           styled,
-          (0, import_clsx18.default)("box-footer", backgroundColor && has(getBackgroundClassName(backgroundColor)), className)
-        )
-      }, others),
+          (0, import_clsx17.default)("box-footer", backgroundColor && has(getBackgroundClassName(backgroundColor)), className)
+        ),
+        ...others
+      },
       children
     );
   }
@@ -2668,11 +2484,10 @@ var BoxFooter_default = BoxFooter;
 var footer_default = BoxFooter_default;
 
 // components/box/header/BoxHeader.tsx
-var import_clsx19 = __toESM(require("clsx"));
-var React25 = __toESM(require("react"));
-var BoxHeader = React25.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { children, className, id, align, variant } = _b, others = __objRest(_b, ["children", "className", "id", "align", "variant"]);
+var import_clsx18 = __toESM(require("clsx"));
+var React24 = __toESM(require("react"));
+var BoxHeader = React24.forwardRef(
+  ({ children, className, id, align, variant, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     let alignClass = null;
     if (align) {
@@ -2680,9 +2495,9 @@ var BoxHeader = React25.forwardRef(
     }
     const classes = hashClass(
       styled,
-      (0, import_clsx19.default)("box-header", className, variant && has(getBackgroundClassName(variant)), align && alignClass)
+      (0, import_clsx18.default)("box-header", className, variant && has(getBackgroundClassName(variant)), align && alignClass)
     );
-    return /* @__PURE__ */ React25.createElement("div", __spreadValues({ ref, id, className: classes }, others), children && typeof children.valueOf() === "string" ? /* @__PURE__ */ React25.createElement("p", null, children) : children);
+    return /* @__PURE__ */ React24.createElement("div", { ref, id, className: classes, ...others }, children && typeof children.valueOf() === "string" ? /* @__PURE__ */ React24.createElement("p", null, children) : children);
   }
 );
 BoxHeader.displayName = "BoxHeader" /* BoxHeader */;
@@ -2692,19 +2507,19 @@ var BoxHeader_default = BoxHeader;
 var header_default = BoxHeader_default;
 
 // components/box/table-container/BoxTableContainer.tsx
-var import_clsx20 = __toESM(require("clsx"));
-var React26 = __toESM(require("react"));
-var BoxTableContainer = React26.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { className, testId } = _b, others = __objRest(_b, ["className", "testId"]);
+var import_clsx19 = __toESM(require("clsx"));
+var React25 = __toESM(require("react"));
+var BoxTableContainer = React25.forwardRef(
+  ({ className, testId, ...others }, ref) => {
     const { styled } = useTrilogyContext();
-    return /* @__PURE__ */ React26.createElement(
+    return /* @__PURE__ */ React25.createElement(
       "div",
-      __spreadValues({
+      {
         ref,
         "data-testid": testId,
-        className: hashClass(styled, (0, import_clsx20.default)("box table-container", className))
-      }, others)
+        className: hashClass(styled, (0, import_clsx19.default)("box table-container", className)),
+        ...others
+      }
     );
   }
 );
@@ -2715,13 +2530,12 @@ var BoxTableContainer_default = BoxTableContainer;
 var table_container_default = BoxTableContainer_default;
 
 // components/box/item/BoxItem.tsx
-var import_clsx21 = __toESM(require("clsx"));
-var React27 = __toESM(require("react"));
-var BoxItem = React27.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { className, id, children } = _b, others = __objRest(_b, ["className", "id", "children"]);
+var import_clsx20 = __toESM(require("clsx"));
+var React26 = __toESM(require("react"));
+var BoxItem = React26.forwardRef(
+  ({ className, id, children, ...others }, ref) => {
     const { styled } = useTrilogyContext();
-    return /* @__PURE__ */ React27.createElement("div", __spreadValues({ ref, id, className: hashClass(styled, (0, import_clsx21.default)("box-item", className)) }, others), children);
+    return /* @__PURE__ */ React26.createElement("div", { ref, id, className: hashClass(styled, (0, import_clsx20.default)("box-item", className)), ...others }, children);
   }
 );
 BoxItem.displayName = "BoxItem" /* BoxItem */;
@@ -2743,22 +2557,22 @@ var item_default2 = BoxItem_default;
 
 // components/breadcrumb/Breadcrumb.tsx
 var import_breadcrumb = __toESM(require("@trilogy-ds/locales/lib/breadcrumb"));
-var import_clsx22 = __toESM(require("clsx"));
-var React28 = __toESM(require("react"));
-var Breadcrumb = React28.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { children, className, id } = _b, others = __objRest(_b, ["children", "className", "id"]);
+var import_clsx21 = __toESM(require("clsx"));
+var React27 = __toESM(require("react"));
+var Breadcrumb = React27.forwardRef(
+  ({ children, className, id, ...others }, ref) => {
     const { styled } = useTrilogyContext();
-    return /* @__PURE__ */ React28.createElement(
+    return /* @__PURE__ */ React27.createElement(
       "nav",
-      __spreadValues({
+      {
         ref,
         id,
         role: "navigation",
-        className: hashClass(styled, (0, import_clsx22.default)("breadcrumb", className)),
-        "aria-label": import_breadcrumb.default.accessibilityLabel
-      }, others),
-      /* @__PURE__ */ React28.createElement("ul", null, children)
+        className: hashClass(styled, (0, import_clsx21.default)("breadcrumb", className)),
+        "aria-label": import_breadcrumb.default.accessibilityLabel,
+        ...others
+      },
+      /* @__PURE__ */ React27.createElement("ul", null, children)
     );
   }
 );
@@ -2766,94 +2580,84 @@ Breadcrumb.displayName = "Breadcrumb" /* Breadcrumb */;
 var Breadcrumb_default = Breadcrumb;
 
 // components/link/Link.tsx
-var import_clsx23 = __toESM(require("clsx"));
-var React29 = __toESM(require("react"));
-var Link = React29.forwardRef(
-  (_a, ref) => {
-    var _b = _a, {
-      children,
-      className,
-      id,
-      to,
-      href,
-      onClick,
-      accessibilityLabel,
-      routerLink,
-      iconName,
-      inverted,
-      blank,
-      title
-    } = _b, others = __objRest(_b, [
-      "children",
-      "className",
-      "id",
-      "to",
-      "href",
-      "onClick",
-      "accessibilityLabel",
-      "routerLink",
-      "iconName",
-      "inverted",
-      "blank",
-      "title"
-    ]);
+var import_clsx22 = __toESM(require("clsx"));
+var React28 = __toESM(require("react"));
+var Link = React28.forwardRef(
+  ({
+    children,
+    className,
+    id,
+    to,
+    href,
+    onClick,
+    accessibilityLabel,
+    routerLink,
+    iconName,
+    inverted,
+    blank,
+    title,
+    ...others
+  }, ref) => {
     const { styled } = useTrilogyContext();
-    const classes = hashClass(styled, (0, import_clsx23.default)("link", iconName && has("icon"), inverted && is("inverted"), className));
+    const classes = hashClass(styled, (0, import_clsx22.default)("link", iconName && has("icon"), inverted && is("inverted"), className));
     if (routerLink && to) {
       const RouterLink = routerLink ? routerLink : "a";
       const RouterLinkTrilogy = () => {
-        return /* @__PURE__ */ React29.createElement(
+        return /* @__PURE__ */ React28.createElement(
           RouterLink,
-          __spreadValues(__spreadValues({
+          {
             ref,
             id,
             "aria-label": accessibilityLabel,
             onClick: onClick && onClick,
-            className: hashClass(styled, (0, import_clsx23.default)(classes)),
-            to: to || ""
-          }, blank && {
-            target: "_blank"
-          }), others),
+            className: hashClass(styled, (0, import_clsx22.default)(classes)),
+            to: to || "",
+            ...blank && {
+              target: "_blank"
+            },
+            ...others
+          },
           children
         );
       };
-      return /* @__PURE__ */ React29.createElement(RouterLinkTrilogy, null);
+      return /* @__PURE__ */ React28.createElement(RouterLinkTrilogy, null);
     }
     const LinkTrilogy = () => {
-      return /* @__PURE__ */ React29.createElement(
+      return /* @__PURE__ */ React28.createElement(
         "a",
-        __spreadValues(__spreadValues({
+        {
           ref,
           id,
           "aria-label": accessibilityLabel,
           onClick: onClick && onClick,
           className: classes,
           title,
-          href
-        }, blank && {
-          target: "_blank"
-        }), others),
-        iconName ? /* @__PURE__ */ React29.createElement(React29.Fragment, null, /* @__PURE__ */ React29.createElement("span", null, children), /* @__PURE__ */ React29.createElement(Icon_default, { name: iconName, size: "small" /* SMALL */ })) : children
+          href,
+          ...blank && {
+            target: "_blank"
+          },
+          ...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
       );
     };
-    return /* @__PURE__ */ React29.createElement(LinkTrilogy, null);
+    return /* @__PURE__ */ React28.createElement(LinkTrilogy, null);
   }
 );
 Link.displayName = "Link" /* Link */;
 var Link_default = Link;
 
 // components/breadcrumb/item/BreadcrumbItem.tsx
-var import_clsx24 = __toESM(require("clsx"));
-var React30 = __toESM(require("react"));
-var BreadcrumbItem = React30.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { children, active, id, href, to, routerLink, testId, onClick } = _b, others = __objRest(_b, ["children", "active", "id", "href", "to", "routerLink", "testId", "onClick"]);
+var import_clsx23 = __toESM(require("clsx"));
+var React29 = __toESM(require("react"));
+var BreadcrumbItem = React29.forwardRef(
+  ({ children, active, id, href, to, routerLink, testId, onClick, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     if (routerLink && to) {
       const RouterLink = routerLink ? routerLink : "a";
-      return /* @__PURE__ */ React30.createElement("li", { ref, id, "data-testid": testId, onClick, "aria-current": active ? "page" : void 0 }, /* @__PURE__ */ React30.createElement(RouterLink, __spreadValues({ className: hashClass(styled, (0, import_clsx24.default)("link")), to }, others), children));
+      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__ */ React30.createElement("li", { ref, id, onClick, "aria-current": active ? "page" : void 0 }, active ? children : /* @__PURE__ */ React30.createElement(Link_default, __spreadValues({ href }, 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));
   }
 );
 BreadcrumbItem.displayName = "BreadcrumbItem" /* BreadcrumbItem */;
@@ -2863,7 +2667,7 @@ var BreadcrumbItem_default = BreadcrumbItem;
 var item_default3 = BreadcrumbItem_default;
 
 // components/button/Button.tsx
-var import_clsx25 = __toESM(require("clsx"));
+var import_clsx24 = __toESM(require("clsx"));
 var import_react13 = __toESM(require("react"));
 
 // components/button/ButtonEnum.ts
@@ -2889,42 +2693,25 @@ var ButtonVariant = /* @__PURE__ */ ((ButtonVariant3) => {
 
 // components/button/Button.tsx
 var Button = import_react13.default.forwardRef(
-  (_a, ref) => {
-    var _b = _a, {
-      markup,
-      loading,
-      variant,
-      href,
-      id,
-      fullwidth,
-      children,
-      className,
-      to,
-      accessibilityLabel,
-      onClick,
-      name,
-      routerLink,
-      type,
-      iconName,
-      disabled
-    } = _b, others = __objRest(_b, [
-      "markup",
-      "loading",
-      "variant",
-      "href",
-      "id",
-      "fullwidth",
-      "children",
-      "className",
-      "to",
-      "accessibilityLabel",
-      "onClick",
-      "name",
-      "routerLink",
-      "type",
-      "iconName",
-      "disabled"
-    ]);
+  ({
+    markup,
+    loading,
+    variant,
+    href,
+    id,
+    fullwidth,
+    children,
+    className,
+    to,
+    accessibilityLabel,
+    onClick,
+    name,
+    routerLink,
+    type,
+    iconName,
+    disabled,
+    ...others
+  }, ref) => {
     const isDisabled = disabled || false;
     const { styled } = useTrilogyContext();
     const isCorrectMarkup2 = (stringMarkup) => {
@@ -2932,7 +2719,7 @@ var Button = import_react13.default.forwardRef(
         return true;
     };
     const getClassNames = (loading2, variant2, fullwidth2, className2) => {
-      return (0, import_clsx25.default)(
+      return (0, import_clsx24.default)(
         "button",
         loading2 && is("loading"),
         variant2 && is(getButtonVariantClassName(variant2)),
@@ -2945,7 +2732,7 @@ var Button = import_react13.default.forwardRef(
     if (Tag2 === "button" && !href && !to) {
       return /* @__PURE__ */ import_react13.default.createElement(
         "button",
-        __spreadValues({
+        {
           ref,
           id,
           "aria-label": accessibilityLabel,
@@ -2956,8 +2743,9 @@ var Button = import_react13.default.forwardRef(
             !isDisabled && (onClick == null ? void 0 : onClick(e));
             e.stopPropagation();
           },
-          type: type != null ? type : "button"
-        }, others),
+          type: type != null ? type : "button",
+          ...others
+        },
         iconName && /* @__PURE__ */ import_react13.default.createElement(Icon_default, { className: !children ? "is-marginless" : "", name: iconName }),
         children
       );
@@ -2965,7 +2753,7 @@ var Button = import_react13.default.forwardRef(
     if (Tag2 === "input") {
       return /* @__PURE__ */ import_react13.default.createElement(
         "input",
-        __spreadValues({
+        {
           ref,
           id,
           className: classes,
@@ -2977,17 +2765,18 @@ var Button = import_react13.default.forwardRef(
           },
           disabled: isDisabled,
           type: type != null ? type : "submit",
-          value: `${children}`
-        }, others)
+          value: `${children}`,
+          ...others
+        }
       );
     }
     if (routerLink && to && !isDisabled) {
       const RouterLink = routerLink ? routerLink : "a";
-      return /* @__PURE__ */ import_react13.default.createElement(RouterLink, __spreadValues({ 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_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_react13.default.createElement(
       "a",
-      __spreadValues(__spreadValues({
+      {
         ref,
         id,
         "aria-label": accessibilityLabel,
@@ -2996,8 +2785,10 @@ var Button = import_react13.default.forwardRef(
         onClick: (e) => {
           !isDisabled && (onClick == null ? void 0 : onClick(e));
           e.stopPropagation();
-        }
-      }, others), disabled && { "aria-disabled": true }),
+        },
+        ...others,
+        ...disabled && { "aria-disabled": true }
+      },
       iconName && /* @__PURE__ */ import_react13.default.createElement(Icon_default, { className: !children ? "is-marginless" : "", name: iconName }),
       children
     );
@@ -3007,27 +2798,27 @@ Button.displayName = "Button" /* Button */;
 var Button_default = Button;
 
 // components/button/list/ButtonList.tsx
-var import_clsx26 = __toESM(require("clsx"));
-var React32 = __toESM(require("react"));
-var ButtonList = React32.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { className, id, align, direction } = _b, others = __objRest(_b, ["className", "id", "align", "direction"]);
+var import_clsx25 = __toESM(require("clsx"));
+var React31 = __toESM(require("react"));
+var ButtonList = React31.forwardRef(
+  ({ className, id, align, direction, ...others }, ref) => {
     const { styled } = useTrilogyContext();
-    return /* @__PURE__ */ React32.createElement(
+    return /* @__PURE__ */ React31.createElement(
       "div",
-      __spreadValues({
+      {
         ref,
         id,
         className: hashClass(
           styled,
-          (0, import_clsx26.default)(
+          (0, import_clsx25.default)(
             "buttons",
             className,
             align && is(getJustifiedClassName(align)),
             direction === "column" /* COLUMN */ && is("vertical")
           )
-        )
-      }, others)
+        ),
+        ...others
+      }
     );
   }
 );
@@ -3035,19 +2826,18 @@ ButtonList.displayName = "ButtonList" /* ButtonList */;
 var ButtonList_default = ButtonList;
 
 // components/card/Card.tsx
-var import_clsx27 = __toESM(require("clsx"));
+var import_clsx26 = __toESM(require("clsx"));
 var import_react14 = __toESM(require("react"));
 var CardContext = (0, import_react14.createContext)({ horizontal: false });
 var Card = import_react14.default.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { className, id, flat, horizontal, floating, skeleton, onClick, reversed, href, fullheight, active } = _b, others = __objRest(_b, ["className", "id", "flat", "horizontal", "floating", "skeleton", "onClick", "reversed", "href", "fullheight", "active"]);
+  ({ className, id, flat, horizontal, floating, skeleton, onClick, reversed, href, fullheight, active, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     const hoverStyle = {
       cursor: "pointer"
     };
     const classes = hashClass(
       styled,
-      (0, import_clsx27.default)(
+      (0, import_clsx26.default)(
         "card",
         flat && !floating && is("flat"),
         horizontal && [is("horizontal"), is("vcentered")],
@@ -3062,28 +2852,29 @@ var Card = import_react14.default.forwardRef(
     if (href) {
       return /* @__PURE__ */ import_react14.default.createElement(
         "a",
-        __spreadProps(__spreadValues({
+        {
           ref,
           id,
           href,
           onClick: (e) => {
             onClick == null ? void 0 : onClick(e);
             e.stopPropagation();
-          }
-        }, others), {
+          },
+          ...others,
           className: classes
-        })
+        }
       );
     }
     return /* @__PURE__ */ import_react14.default.createElement(
       "div",
-      __spreadValues({
+      {
         ref,
         id,
         onClick: onClick && onClick,
         className: classes,
-        style: onClick && __spreadValues({}, hoverStyle)
-      }, others)
+        style: onClick && { ...hoverStyle },
+        ...others
+      }
     );
   }
 );
@@ -3091,14 +2882,13 @@ Card.displayName = "Card" /* Card */;
 var Card_default = Card;
 
 // components/card/image/CardImage.tsx
-var import_clsx28 = __toESM(require("clsx"));
-var React34 = __toESM(require("react"));
-var CardImage = React34.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { src, alt = "", className, id, size: size2, onClick } = _b, others = __objRest(_b, ["src", "alt", "className", "id", "size", "onClick"]);
+var import_clsx27 = __toESM(require("clsx"));
+var React33 = __toESM(require("react"));
+var CardImage = React33.forwardRef(
+  ({ src, alt = "", className, id, size: size2, onClick, ...others }, ref) => {
     const { styled } = useTrilogyContext();
-    const classes = hashClass(styled, (0, import_clsx28.default)("card-image", size2 && is(`${size2}`), className));
-    return /* @__PURE__ */ React34.createElement(
+    const classes = hashClass(styled, (0, import_clsx27.default)("card-image", size2 && is(`${size2}`), className));
+    return /* @__PURE__ */ React33.createElement(
       "div",
       {
         ref,
@@ -3109,7 +2899,7 @@ var CardImage = React34.forwardRef(
         },
         className: classes
       },
-      /* @__PURE__ */ React34.createElement("figure", __spreadValues({ className: hashClass(styled, (0, import_clsx28.default)("image")) }, others), /* @__PURE__ */ React34.createElement("img", __spreadProps(__spreadValues({}, { src: typeof src === "string" ? src : "" }), { alt })))
+      /* @__PURE__ */ React33.createElement("figure", { className: hashClass(styled, (0, import_clsx27.default)("image")), ...others }, /* @__PURE__ */ React33.createElement("img", { ...{ src: typeof src === "string" ? src : "" }, alt }))
     );
   }
 );
@@ -3120,13 +2910,12 @@ var CardImage_default = CardImage;
 var image_default = CardImage_default;
 
 // components/card/content/CardContent.tsx
-var import_clsx29 = __toESM(require("clsx"));
-var React35 = __toESM(require("react"));
-var CardContent = React35.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { children, className, id } = _b, others = __objRest(_b, ["children", "className", "id"]);
+var import_clsx28 = __toESM(require("clsx"));
+var React34 = __toESM(require("react"));
+var CardContent = React34.forwardRef(
+  ({ children, className, id, ...others }, ref) => {
     const { styled } = useTrilogyContext();
-    return /* @__PURE__ */ React35.createElement("div", __spreadValues({ ref, id, className: hashClass(styled, (0, import_clsx29.default)("card-content", className)) }, others), children);
+    return /* @__PURE__ */ React34.createElement("div", { ref, id, className: hashClass(styled, (0, import_clsx28.default)("card-content", className)), ...others }, children);
   }
 );
 CardContent.displayName = "CardContent" /* CardContent */;
@@ -3145,11 +2934,10 @@ var CardImageSize = /* @__PURE__ */ ((CardImageSize2) => {
 })(CardImageSize || {});
 
 // components/checkbox/Checkbox.tsx
-var import_clsx30 = __toESM(require("clsx"));
+var import_clsx29 = __toESM(require("clsx"));
 var import_react15 = __toESM(require("react"));
 var Checkbox = import_react15.default.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { checked, className, disabled, readonly, id = import_react15.default.useId(), label, onChange, name, value, children, required } = _b, others = __objRest(_b, ["checked", "className", "disabled", "readonly", "id", "label", "onChange", "name", "value", "children", "required"]);
+  ({ checked, className, disabled, readonly, id = import_react15.default.useId(), label, onChange, name, value, children, required, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     const [_checked, setChecked] = (0, import_react15.useState)(checked || false);
     (0, import_react15.useEffect)(() => {
@@ -3166,9 +2954,9 @@ var Checkbox = import_react15.default.forwardRef(
         checkboxChecked: target.checked
       }) : setChecked(target.checked);
     };
-    return /* @__PURE__ */ import_react15.default.createElement("div", { ref, className: hashClass(styled, (0, import_clsx30.default)("checkbox", className)) }, /* @__PURE__ */ import_react15.default.createElement(
+    return /* @__PURE__ */ import_react15.default.createElement("div", { ref, className: hashClass(styled, (0, import_clsx29.default)("checkbox", className)) }, /* @__PURE__ */ import_react15.default.createElement(
       "input",
-      __spreadValues({
+      {
         type: "checkbox",
         readOnly: readonly,
         id,
@@ -3177,9 +2965,10 @@ var Checkbox = import_react15.default.forwardRef(
         name,
         value,
         checked: readonly ? checked : _checked,
-        onChange: handleOnChange
-      }, others)
-    ), /* @__PURE__ */ import_react15.default.createElement("label", { htmlFor: id, className: hashClass(styled, (0, import_clsx30.default)("checkbox-label")) }, label != null ? label : children));
+        onChange: handleOnChange,
+        ...others
+      }
+    ), /* @__PURE__ */ import_react15.default.createElement("label", { htmlFor: id, className: hashClass(styled, (0, import_clsx29.default)("checkbox-label")) }, label != null ? label : children));
   }
 );
 Checkbox.displayName = "Checkbox" /* Checkbox */;
@@ -3192,15 +2981,14 @@ var isRequiredChild = (children) => import_react16.default.Children.toArray(chil
 );
 
 // components/checkbox/list/CheckboxList.tsx
-var import_clsx31 = __toESM(require("clsx"));
-var React38 = __toESM(require("react"));
-var CheckboxList = React38.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { className, id, align, horizontalMobile, verticalDesktop, accessibilityLabelledBy, children } = _b, others = __objRest(_b, ["className", "id", "align", "horizontalMobile", "verticalDesktop", "accessibilityLabelledBy", "children"]);
+var import_clsx30 = __toESM(require("clsx"));
+var React37 = __toESM(require("react"));
+var CheckboxList = React37.forwardRef(
+  ({ className, id, align, horizontalMobile, verticalDesktop, accessibilityLabelledBy, children, ...others }, ref) => {
     const { styled } = useTrilogyContext();
-    return /* @__PURE__ */ React38.createElement(
+    return /* @__PURE__ */ React37.createElement(
       "div",
-      __spreadValues({
+      {
         ref,
         id,
         role: "group",
@@ -3208,15 +2996,16 @@ var CheckboxList = React38.forwardRef(
         "aria-required": isRequiredChild(children) ? "true" : void 0,
         className: hashClass(
           styled,
-          (0, import_clsx31.default)(
+          (0, import_clsx30.default)(
             "checkboxes",
             className,
             align && is(getJustifiedClassName(align)),
             horizontalMobile && is("horizontal-mobile"),
             verticalDesktop && is("vertical-desktop")
           )
-        )
-      }, others),
+        ),
+        ...others
+      },
       children
     );
   }
@@ -3225,11 +3014,10 @@ CheckboxList.displayName = "CheckboxList" /* CheckboxList */;
 var CheckboxList_default = CheckboxList;
 
 // components/checkbox/tiles/CheckboxTiles.tsx
-var import_clsx32 = __toESM(require("clsx"));
-var React39 = __toESM(require("react"));
-var CheckboxTiles = React39.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { id, className, children, align, verticalAlign, accessibilityLabelledBy } = _b, others = __objRest(_b, ["id", "className", "children", "align", "verticalAlign", "accessibilityLabelledBy"]);
+var import_clsx31 = __toESM(require("clsx"));
+var React38 = __toESM(require("react"));
+var CheckboxTiles = React38.forwardRef(
+  ({ id, className, children, align, verticalAlign, accessibilityLabelledBy, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     let alignClass = null;
     if (align) {
@@ -3239,9 +3027,9 @@ var CheckboxTiles = React39.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") || null;
     }
-    return /* @__PURE__ */ React39.createElement(
+    return /* @__PURE__ */ React38.createElement(
       "div",
-      __spreadValues({
+      {
         ref,
         id,
         role: "group",
@@ -3249,9 +3037,10 @@ var CheckboxTiles = React39.forwardRef(
         "aria-required": isRequiredChild(children) ? "true" : void 0,
         className: hashClass(
           styled,
-          (0, import_clsx32.default)("checkbox-tiles", className, align && alignClass, verticalAlign && verticalAlignClass)
-        )
-      }, others),
+          (0, import_clsx31.default)("checkbox-tiles", className, align && alignClass, verticalAlign && verticalAlignClass)
+        ),
+        ...others
+      },
       children
     );
   }
@@ -3260,15 +3049,14 @@ CheckboxTiles.displayName = "CheckboxTiles" /* CheckboxTiles */;
 var CheckboxTiles_default = CheckboxTiles;
 
 // components/sticker/Sticker.tsx
-var import_clsx33 = __toESM(require("clsx"));
+var import_clsx32 = __toESM(require("clsx"));
 var import_react17 = __toESM(require("react"));
 var Sticker = import_react17.default.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { className, id, variant, small, label, outlined, iconName, accessibilityLabel } = _b, others = __objRest(_b, ["className", "id", "variant", "small", "label", "outlined", "iconName", "accessibilityLabel"]);
+  ({ className, id, variant, small, label, outlined, iconName, accessibilityLabel, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     const classes = hashClass(
       styled,
-      (0, import_clsx33.default)(
+      (0, import_clsx32.default)(
         "sticker",
         variant && is(getVariantClassName(variant)),
         small && is("small"),
@@ -3277,51 +3065,35 @@ var Sticker = import_react17.default.forwardRef(
         is("vcentered")
       )
     );
-    return /* @__PURE__ */ import_react17.default.createElement("p", __spreadValues({ ref, id, className: classes, "aria-label": accessibilityLabel }, others), iconName && /* @__PURE__ */ import_react17.default.createElement(Icon_default, { size: small ? "smaller" /* SMALLER */ : "small" /* SMALL */, name: iconName }), label);
+    return /* @__PURE__ */ import_react17.default.createElement("p", { ref, id, className: classes, "aria-label": accessibilityLabel, ...others }, iconName && /* @__PURE__ */ import_react17.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_clsx34 = __toESM(require("clsx"));
-var React41 = __toESM(require("react"));
+var import_clsx33 = __toESM(require("clsx"));
+var React40 = __toESM(require("react"));
 var import_react18 = require("react");
-var CheckboxTile = React41.forwardRef(
-  (_a, ref) => {
-    var _b = _a, {
-      checked,
-      className,
-      disabled,
-      readonly,
-      id = React41.useId(),
-      label,
-      onChange,
-      name,
-      value,
-      description,
-      icon,
-      horizontal,
-      required,
-      sticker,
-      stickerVariant = "ACCENT" /* ACCENT */
-    } = _b, others = __objRest(_b, [
-      "checked",
-      "className",
-      "disabled",
-      "readonly",
-      "id",
-      "label",
-      "onChange",
-      "name",
-      "value",
-      "description",
-      "icon",
-      "horizontal",
-      "required",
-      "sticker",
-      "stickerVariant"
-    ]);
+var CheckboxTile = React40.forwardRef(
+  ({
+    checked,
+    className,
+    disabled,
+    readonly,
+    id = React40.useId(),
+    label,
+    onChange,
+    name,
+    value,
+    description,
+    icon,
+    horizontal,
+    required,
+    sticker,
+    stickerVariant = "ACCENT" /* ACCENT */,
+    ...others
+  }, ref) => {
     const { styled } = useTrilogyContext();
     const [_checked, setChecked] = (0, import_react18.useState)(checked || false);
     (0, import_react18.useEffect)(() => {
@@ -3329,9 +3101,9 @@ var CheckboxTile = React41.forwardRef(
         setChecked(checked || false);
       }
     }, [checked, readonly]);
-    return /* @__PURE__ */ React41.createElement("div", { ref, className: hashClass(styled, (0, import_clsx34.default)("checkbox-tile", horizontal && is("horizontal"), className)) }, /* @__PURE__ */ React41.createElement(
+    return /* @__PURE__ */ React40.createElement("div", { ref, className: hashClass(styled, (0, import_clsx33.default)("checkbox-tile", horizontal && is("horizontal"), className)) }, /* @__PURE__ */ React40.createElement(
       "input",
-      __spreadValues({
+      {
         type: "checkbox",
         readOnly: readonly,
         required,
@@ -3340,35 +3112,36 @@ var CheckboxTile = React41.forwardRef(
         name,
         value,
         checked: readonly ? checked : _checked,
-        onChange: (e) => onChange ? onChange : setChecked(e.target.checked)
-      }, others)
-    ), /* @__PURE__ */ React41.createElement("label", { htmlFor: id, className: hashClass(styled, (0, import_clsx34.default)("checkbox-label")) }, icon && /* @__PURE__ */ React41.createElement(Icon_default, { name: icon, size: "medium" /* MEDIUM */ }), horizontal ? /* @__PURE__ */ React41.createElement("span", null, /* @__PURE__ */ React41.createElement("span", { className: hashClass(styled, (0, import_clsx34.default)("checkbox-title")) }, label), description && /* @__PURE__ */ React41.createElement("span", { className: hashClass(styled, (0, import_clsx34.default)("checkbox-description")) }, description)) : /* @__PURE__ */ React41.createElement(React41.Fragment, null, /* @__PURE__ */ React41.createElement("span", { className: hashClass(styled, (0, import_clsx34.default)("checkbox-title")) }, label), description && /* @__PURE__ */ React41.createElement("span", { className: hashClass(styled, (0, import_clsx34.default)("checkbox-description")) }, description))), sticker && /* @__PURE__ */ React41.createElement(Sticker_default, { label: sticker, variant: stickerVariant, className: "checkbox-sticker", small: true }));
+        onChange: (e) => onChange ? onChange : setChecked(e.target.checked),
+        ...others
+      }
+    ), /* @__PURE__ */ React40.createElement("label", { htmlFor: id, className: hashClass(styled, (0, import_clsx33.default)("checkbox-label")) }, icon && /* @__PURE__ */ React40.createElement(Icon_default, { name: icon, size: "medium" /* MEDIUM */ }), horizontal ? /* @__PURE__ */ React40.createElement("span", null, /* @__PURE__ */ React40.createElement("span", { className: hashClass(styled, (0, import_clsx33.default)("checkbox-title")) }, label), description && /* @__PURE__ */ React40.createElement("span", { className: hashClass(styled, (0, import_clsx33.default)("checkbox-description")) }, description)) : /* @__PURE__ */ React40.createElement(React40.Fragment, null, /* @__PURE__ */ React40.createElement("span", { className: hashClass(styled, (0, import_clsx33.default)("checkbox-title")) }, label), description && /* @__PURE__ */ React40.createElement("span", { className: hashClass(styled, (0, import_clsx33.default)("checkbox-description")) }, description))), sticker && /* @__PURE__ */ React40.createElement(Sticker_default, { label: sticker, variant: stickerVariant, className: "checkbox-sticker", small: true }));
   }
 );
 CheckboxTile.displayName = "CheckboxTiles" /* CheckboxTiles */;
 var CheckboxTile_default = CheckboxTile;
 
 // components/chips/Chips.tsx
-var import_clsx35 = __toESM(require("clsx"));
+var import_clsx34 = __toESM(require("clsx"));
 var import_react19 = __toESM(require("react"));
 var Chips = import_react19.default.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { className, onClick, children, active, disabled, id } = _b, others = __objRest(_b, ["className", "onClick", "children", "active", "disabled", "id"]);
+  ({ className, onClick, children, active, disabled, id, ...others }, ref) => {
     const { styled } = useTrilogyContext();
-    const classes = hashClass(styled, (0, import_clsx35.default)("chips", active && is("active"), className));
+    const classes = hashClass(styled, (0, import_clsx34.default)("chips", active && is("active"), className));
     return /* @__PURE__ */ import_react19.default.createElement(
       "button",
-      __spreadValues(__spreadProps(__spreadValues({
-        ref
-      }, { disabled }), {
+      {
+        ref,
+        ...{ disabled },
         "aria-disabled": disabled,
         id,
         "aria-pressed": !!active,
         className: classes,
         onClick: (e) => {
           onClick == null ? void 0 : onClick(e);
-        }
-      }), others),
+        },
+        ...others
+      },
       children
     );
   }
@@ -3377,56 +3150,43 @@ Chips.displayName = "Chips" /* Chips */;
 var Chips_default = Chips;
 
 // components/chips/list/ChipsList.tsx
-var import_clsx36 = __toESM(require("clsx"));
-var React43 = __toESM(require("react"));
-var ChipsList = React43.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { className, id, children, multiple, scrollable, accessibilityLabelledBy } = _b, others = __objRest(_b, ["className", "id", "children", "multiple", "scrollable", "accessibilityLabelledBy"]);
+var import_clsx35 = __toESM(require("clsx"));
+var React42 = __toESM(require("react"));
+var ChipsList = React42.forwardRef(
+  ({ className, id, children, multiple, scrollable, accessibilityLabelledBy, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     const classes = hashClass(
       styled,
-      (0, import_clsx36.default)("chips-list", multiple && is("multiple"), scrollable && is("scrollable"), className)
+      (0, import_clsx35.default)("chips-list", multiple && is("multiple"), scrollable && is("scrollable"), className)
     );
-    return /* @__PURE__ */ React43.createElement("div", __spreadValues({ ref, id, role: "group", "aria-labelledby": accessibilityLabelledBy, className: classes }, others), children);
+    return /* @__PURE__ */ React42.createElement("div", { ref, id, role: "group", "aria-labelledby": accessibilityLabelledBy, className: classes, ...others }, children);
   }
 );
 ChipsList.displayName = "ChipsList" /* ChipsList */;
 var ChipsList_default = ChipsList;
 
 // components/columns/Columns.tsx
-var import_clsx37 = __toESM(require("clsx"));
+var import_clsx36 = __toESM(require("clsx"));
 var import_react20 = __toESM(require("react"));
 var Columns = import_react20.default.forwardRef(
-  (_a, ref) => {
-    var _b = _a, {
-      className,
-      id,
-      multiline,
-      scrollable,
-      mobile,
-      gap,
-      fullBleed,
-      marginless,
-      align,
-      verticalAlign,
-      fullheight
-    } = _b, others = __objRest(_b, [
-      "className",
-      "id",
-      "multiline",
-      "scrollable",
-      "mobile",
-      "gap",
-      "fullBleed",
-      "marginless",
-      "align",
-      "verticalAlign",
-      "fullheight"
-    ]);
+  ({
+    className,
+    id,
+    multiline,
+    scrollable,
+    mobile,
+    gap,
+    fullBleed,
+    marginless,
+    align,
+    verticalAlign,
+    fullheight,
+    ...others
+  }, ref) => {
     const { styled } = useTrilogyContext();
     const classes = hashClass(
       styled,
-      (0, import_clsx37.default)(
+      (0, import_clsx36.default)(
         "columns",
         multiline && is("multiline"),
         fullBleed && is("fullbleed"),
@@ -3441,60 +3201,41 @@ var Columns = import_react20.default.forwardRef(
         className
       )
     );
-    return /* @__PURE__ */ import_react20.default.createElement("div", __spreadValues({ ref, id, className: classes }, others));
+    return /* @__PURE__ */ import_react20.default.createElement("div", { ref, id, className: classes, ...others });
   }
 );
 Columns.displayName = "Columns" /* Columns */;
 var Columns_default = Columns;
 
 // components/columns/column/Column.tsx
-var import_clsx38 = __toESM(require("clsx"));
+var import_clsx37 = __toESM(require("clsx"));
 var import_react21 = __toESM(require("react"));
 var Column = import_react21.default.forwardRef(
-  (_a, ref) => {
-    var _b = _a, {
-      className,
-      id,
-      size: size2,
-      mobileSize,
-      tabletSize,
-      touchSize,
-      desktopSize,
-      widescreenSize,
-      fullhdSize,
-      offset,
-      mobileOffset,
-      tabletOffset,
-      touchOffset,
-      desktopOffset,
-      widescreenOffset,
-      fullhdOffset,
-      narrow,
-      verticalAlign
-    } = _b, others = __objRest(_b, [
-      "className",
-      "id",
-      "size",
-      "mobileSize",
-      "tabletSize",
-      "touchSize",
-      "desktopSize",
-      "widescreenSize",
-      "fullhdSize",
-      "offset",
-      "mobileOffset",
-      "tabletOffset",
-      "touchOffset",
-      "desktopOffset",
-      "widescreenOffset",
-      "fullhdOffset",
-      "narrow",
-      "verticalAlign"
-    ]);
+  ({
+    className,
+    id,
+    size: size2,
+    mobileSize,
+    tabletSize,
+    touchSize,
+    desktopSize,
+    widescreenSize,
+    fullhdSize,
+    offset,
+    mobileOffset,
+    tabletOffset,
+    touchOffset,
+    desktopOffset,
+    widescreenOffset,
+    fullhdOffset,
+    narrow,
+    verticalAlign,
+    ...others
+  }, ref) => {
     const { styled } = useTrilogyContext();
     const classes = hashClass(
       styled,
-      (0, import_clsx38.default)(
+      (0, import_clsx37.default)(
         "column",
         size2 && is(`${size2}`),
         mobileSize && is(`${mobileSize}-mobile`),
@@ -3515,7 +3256,7 @@ var Column = import_react21.default.forwardRef(
         className
       )
     );
-    return /* @__PURE__ */ import_react21.default.createElement("div", __spreadValues({ ref, id, className: classes }, others));
+    return /* @__PURE__ */ import_react21.default.createElement("div", { ref, id, className: classes, ...others });
   }
 );
 Column.displayName = "Column" /* Column */;
@@ -3542,21 +3283,20 @@ var GapSize = /* @__PURE__ */ ((GapSize2) => {
 var ColumnsGapValue = [0, 4, 8, 12, 16, 24, 32, 40, 48, 54, 62];
 
 // components/container/Container.tsx
-var import_clsx39 = __toESM(require("clsx"));
+var import_clsx38 = __toESM(require("clsx"));
 var import_react22 = __toESM(require("react"));
 var Container = import_react22.default.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { className, id, medium } = _b, others = __objRest(_b, ["className", "id", "medium"]);
+  ({ className, id, medium, ...others }, ref) => {
     const { styled } = useTrilogyContext();
-    const classes = hashClass(styled, (0, import_clsx39.default)("container", medium && is("medium"), className));
-    return /* @__PURE__ */ import_react22.default.createElement("div", __spreadValues({ ref, id, className: classes }, others));
+    const classes = hashClass(styled, (0, import_clsx38.default)("container", medium && is("medium"), className));
+    return /* @__PURE__ */ import_react22.default.createElement("div", { ref, id, className: classes, ...others });
   }
 );
 Container.displayName = "Container" /* Container */;
 var Container_default = Container;
 
 // components/countdown/Countdown.tsx
-var import_clsx40 = __toESM(require("clsx"));
+var import_clsx39 = __toESM(require("clsx"));
 var import_react23 = __toESM(require("react"));
 
 // components/countdown/CountdownEnum.ts
@@ -3587,8 +3327,7 @@ var calculateTimer = (timeDifference) => {
   return { days, hours, minutes, seconds };
 };
 var Countdown = import_react23.default.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { deadline, className, id, format, event, small, inverted } = _b, others = __objRest(_b, ["deadline", "className", "id", "format", "event", "small", "inverted"]);
+  ({ deadline, className, id, format, event, small, inverted, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     const [timeLeft] = (0, import_react23.useState)(deadline);
     const initialTimeDifference = deadline.getTime() - (/* @__PURE__ */ new Date()).getTime();
@@ -3597,7 +3336,7 @@ var Countdown = import_react23.default.forwardRef(
     const [init, setInit] = (0, import_react23.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_clsx40.default)("countdown", inverted && is("inverted"), small && is("small"), className));
+    const classes = hashClass(styled, (0, import_clsx39.default)("countdown", inverted && is("inverted"), small && is("small"), className));
     if (parsedFormat) {
       parsedFormat.forEach((item) => {
         switch (item) {
@@ -3671,22 +3410,21 @@ var Countdown = import_react23.default.forwardRef(
         setInit(false);
       }
     }, [timer, event, init]);
-    return /* @__PURE__ */ import_react23.default.createElement("ul", __spreadValues({ ref, id, className: classes }, others), (show[0 /* DAY */] || timer.days != 0) && /* @__PURE__ */ import_react23.default.createElement("li", { className: hashClass(styled, (0, import_clsx40.default)("count")) }, /* @__PURE__ */ import_react23.default.createElement("span", { className: hashClass(styled, (0, import_clsx40.default)("value")) }, timer.days ? timer.days : 0), "j"), (show[1 /* HOUR */] || timer.hours != 0) && /* @__PURE__ */ import_react23.default.createElement("li", { className: hashClass(styled, (0, import_clsx40.default)("count")) }, /* @__PURE__ */ import_react23.default.createElement("span", { className: hashClass(styled, (0, import_clsx40.default)("value")) }, timer.hours ? timer.hours : 0), "h"), (show[2 /* MIN */] || timer.minutes != 0) && /* @__PURE__ */ import_react23.default.createElement("li", { className: hashClass(styled, (0, import_clsx40.default)("count")) }, /* @__PURE__ */ import_react23.default.createElement("span", { className: hashClass(styled, (0, import_clsx40.default)("value")) }, timer.minutes ? timer.minutes : 0), "m"), (show[3 /* SEC */] || timer.seconds != 0) && /* @__PURE__ */ import_react23.default.createElement("li", { className: hashClass(styled, (0, import_clsx40.default)("count")) }, /* @__PURE__ */ import_react23.default.createElement("span", { className: hashClass(styled, (0, import_clsx40.default)("value")) }, timer.seconds ? timer.seconds : 0), "s"));
+    return /* @__PURE__ */ import_react23.default.createElement("ul", { ref, id, className: classes, ...others }, (show[0 /* DAY */] || timer.days != 0) && /* @__PURE__ */ import_react23.default.createElement("li", { className: hashClass(styled, (0, import_clsx39.default)("count")) }, /* @__PURE__ */ import_react23.default.createElement("span", { className: hashClass(styled, (0, import_clsx39.default)("value")) }, timer.days ? timer.days : 0), "j"), (show[1 /* HOUR */] || timer.hours != 0) && /* @__PURE__ */ import_react23.default.createElement("li", { className: hashClass(styled, (0, import_clsx39.default)("count")) }, /* @__PURE__ */ import_react23.default.createElement("span", { className: hashClass(styled, (0, import_clsx39.default)("value")) }, timer.hours ? timer.hours : 0), "h"), (show[2 /* MIN */] || timer.minutes != 0) && /* @__PURE__ */ import_react23.default.createElement("li", { className: hashClass(styled, (0, import_clsx39.default)("count")) }, /* @__PURE__ */ import_react23.default.createElement("span", { className: hashClass(styled, (0, import_clsx39.default)("value")) }, timer.minutes ? timer.minutes : 0), "m"), (show[3 /* SEC */] || timer.seconds != 0) && /* @__PURE__ */ import_react23.default.createElement("li", { className: hashClass(styled, (0, import_clsx39.default)("count")) }, /* @__PURE__ */ import_react23.default.createElement("span", { className: hashClass(styled, (0, import_clsx39.default)("value")) }, timer.seconds ? timer.seconds : 0), "s"));
   }
 );
 Countdown.displayName = "Countdown" /* Countdown */;
 var Countdown_default = Countdown;
 
 // components/divider/Divider.tsx
-var import_clsx41 = __toESM(require("clsx"));
+var import_clsx40 = __toESM(require("clsx"));
 var import_react24 = __toESM(require("react"));
 var Divider = import_react24.default.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { className, id, unboxed, content, marginless, iconName, inverted } = _b, others = __objRest(_b, ["className", "id", "unboxed", "content", "marginless", "iconName", "inverted"]);
+  ({ className, id, unboxed, content, marginless, iconName, inverted, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     const classes = hashClass(
       styled,
-      (0, import_clsx41.default)(
+      (0, import_clsx40.default)(
         "divider",
         unboxed && is("unboxed"),
         marginless && is("marginless"),
@@ -3695,47 +3433,33 @@ var Divider = import_react24.default.forwardRef(
         iconName && has("icon")
       )
     );
-    const contentClasses = hashClass(styled, (0, import_clsx41.default)("divider-content"));
-    return /* @__PURE__ */ import_react24.default.createElement("div", __spreadValues({ ref, id, "data-testid": "separator", className: classes }, others), /* @__PURE__ */ import_react24.default.createElement("p", { className: contentClasses }, iconName && !content && /* @__PURE__ */ import_react24.default.createElement(Icon_default, { name: iconName, size: "medium" /* MEDIUM */ }), content && content));
+    const contentClasses = hashClass(styled, (0, import_clsx40.default)("divider-content"));
+    return /* @__PURE__ */ import_react24.default.createElement("div", { ref, id, "data-testid": "separator", className: classes, ...others }, /* @__PURE__ */ import_react24.default.createElement("p", { className: contentClasses }, iconName && !content && /* @__PURE__ */ import_react24.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_clsx42 = __toESM(require("clsx"));
+var import_clsx41 = __toESM(require("clsx"));
 var import_react25 = __toESM(require("react"));
 var Fab = import_react25.default.forwardRef(
-  (_a, ref) => {
-    var _b = _a, {
-      children,
-      extended,
-      iconName,
-      accessibilityLabel,
-      onClick,
-      className,
-      id,
-      fixed = true,
-      top,
-      bottom,
-      left,
-      right,
-      disabled
-    } = _b, others = __objRest(_b, [
-      "children",
-      "extended",
-      "iconName",
-      "accessibilityLabel",
-      "onClick",
-      "className",
-      "id",
-      "fixed",
-      "top",
-      "bottom",
-      "left",
-      "right",
-      "disabled"
-    ]);
+  ({
+    children,
+    extended,
+    iconName,
+    accessibilityLabel,
+    onClick,
+    className,
+    id,
+    fixed = true,
+    top,
+    bottom,
+    left,
+    right,
+    disabled,
+    ...others
+  }, ref) => {
     const { styled } = useTrilogyContext();
     const [isExtended, setIsExtended] = (0, import_react25.useState)(extended || false);
     (0, import_react25.useEffect)(() => {
@@ -3750,10 +3474,10 @@ var Fab = import_react25.default.forwardRef(
     } : {
       position: "relative"
     };
-    const _className = hashClass(styled, (0, import_clsx42.default)("fab", extended && is("extended"), className));
+    const _className = hashClass(styled, (0, import_clsx41.default)("fab", extended && is("extended"), className));
     return /* @__PURE__ */ import_react25.default.createElement(
       "button",
-      __spreadProps(__spreadValues({
+      {
         ref,
         id,
         disabled,
@@ -3762,10 +3486,10 @@ var Fab = import_react25.default.forwardRef(
           onClick == null ? void 0 : onClick(e);
           e.stopPropagation();
         },
-        style: __spreadValues({}, positionStyle)
-      }, others), {
+        style: { ...positionStyle },
+        ...others,
         className: _className
-      }),
+      },
       /* @__PURE__ */ import_react25.default.createElement(Icon_default, { name: iconName }),
       children
     );
@@ -3775,17 +3499,16 @@ Fab.displayName = "Fab" /* Fab */;
 var Fab_default = Fab;
 
 // components/flex-box/FlexBox.tsx
-var import_clsx43 = __toESM(require("clsx"));
+var import_clsx42 = __toESM(require("clsx"));
 var import_react26 = __toESM(require("react"));
 var FlexBox = import_react26.default.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { className, id, gap, direction, align, justify, scrollable, fullheight } = _b, others = __objRest(_b, ["className", "id", "gap", "direction", "align", "justify", "scrollable", "fullheight"]);
+  ({ className, id, gap, direction, align, justify, scrollable, fullheight, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     const isNumber = typeof gap === "number";
     const isValueDirection = typeof direction === "string";
     const classes = hashClass(
       styled,
-      (0, import_clsx43.default)(
+      (0, import_clsx42.default)(
         "flex-box",
         isValueDirection && direction && is(`direction-${direction}`),
         !isValueDirection && (direction == null ? void 0 : direction.desktop) && is(`direction-${direction.desktop}-desktop`),
@@ -3802,23 +3525,22 @@ var FlexBox = import_react26.default.forwardRef(
         className
       )
     );
-    return /* @__PURE__ */ import_react26.default.createElement("div", __spreadValues({ ref, id, className: classes }, others));
+    return /* @__PURE__ */ import_react26.default.createElement("div", { ref, id, className: classes, ...others });
   }
 );
 FlexBox.displayName = "FlexBox" /* FlexBox */;
 var FlexBox_default = FlexBox;
 
 // components/flex-box/flex-item/FlexItem.tsx
-var import_clsx44 = __toESM(require("clsx"));
+var import_clsx43 = __toESM(require("clsx"));
 var import_react27 = __toESM(require("react"));
 var FlexItem = import_react27.default.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { className, id, size: size2, narrow, verticalAlign } = _b, others = __objRest(_b, ["className", "id", "size", "narrow", "verticalAlign"]);
+  ({ className, id, size: size2, narrow, verticalAlign, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     const isNumber = typeof size2 === "number";
     const classes = hashClass(
       styled,
-      (0, import_clsx44.default)(
+      (0, import_clsx43.default)(
         "flex-item",
         size2 && isNumber && is(`${size2}`),
         size2 && !isNumber && (size2 == null ? void 0 : size2.desktop) && is(`${size2.desktop}-desktop`),
@@ -3832,22 +3554,21 @@ var FlexItem = import_react27.default.forwardRef(
         className
       )
     );
-    return /* @__PURE__ */ import_react27.default.createElement("div", __spreadValues({ ref, id, className: classes }, others));
+    return /* @__PURE__ */ import_react27.default.createElement("div", { ref, id, className: classes, ...others });
   }
 );
 FlexItem.displayName = "FlexItem" /* FlexItem */;
 var FlexItem_default = FlexItem;
 
 // components/hero/Hero.tsx
-var import_clsx45 = __toESM(require("clsx"));
+var import_clsx44 = __toESM(require("clsx"));
 var import_react28 = __toESM(require("react"));
 var Hero = import_react28.default.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { children, backgroundColor, backgroundSrc, inverted, className, id, onClick, overlap } = _b, others = __objRest(_b, ["children", "backgroundColor", "backgroundSrc", "inverted", "className", "id", "onClick", "overlap"]);
+  ({ children, backgroundColor, backgroundSrc, inverted, className, id, onClick, overlap, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     const classes = hashClass(
       styled,
-      (0, import_clsx45.default)(
+      (0, import_clsx44.default)(
         "hero",
         backgroundColor && has(getBackgroundClassName(backgroundColor)),
         backgroundSrc && has("background"),
@@ -3858,15 +3579,17 @@ var Hero = import_react28.default.forwardRef(
     );
     return /* @__PURE__ */ import_react28.default.createElement(
       "section",
-      __spreadValues(__spreadValues({
+      {
         ref,
         id,
         onClick: onClick && onClick,
-        className: classes
-      }, backgroundSrc && {
-        style: { backgroundImage: `url(${backgroundSrc})` }
-      }), others),
-      /* @__PURE__ */ import_react28.default.createElement("div", { className: hashClass(styled, (0, import_clsx45.default)("hero-body")) }, children)
+        className: classes,
+        ...backgroundSrc && {
+          style: { backgroundImage: `url(${backgroundSrc})` }
+        },
+        ...others
+      },
+      /* @__PURE__ */ import_react28.default.createElement("div", { className: hashClass(styled, (0, import_clsx44.default)("hero-body")) }, children)
     );
   }
 );
@@ -3891,35 +3614,35 @@ var RadiusValues = /* @__PURE__ */ ((RadiusValues2) => {
 })(RadiusValues || {});
 
 // components/image/Image.tsx
-var import_clsx46 = __toESM(require("clsx"));
-var React53 = __toESM(require("react"));
-var Image = React53.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { src, alt = "", className, id, circled, width, height, onClick, radius, align } = _b, others = __objRest(_b, ["src", "alt", "className", "id", "circled", "width", "height", "onClick", "radius", "align"]);
+var import_clsx45 = __toESM(require("clsx"));
+var React52 = __toESM(require("react"));
+var Image = React52.forwardRef(
+  ({ src, alt = "", className, id, circled, width, height, onClick, radius, align, ...others }, ref) => {
     const { styled } = useTrilogyContext();
-    const classes = hashClass(styled, (0, import_clsx46.default)("image", className, align && is(getJustifiedClassName(align))));
+    const classes = hashClass(styled, (0, import_clsx45.default)("image", className, align && is(getJustifiedClassName(align))));
     const styles = {
       image: {
         width,
         height
       }
     };
-    return /* @__PURE__ */ React53.createElement(
+    return /* @__PURE__ */ React52.createElement(
       "figure",
-      __spreadValues({
+      {
         ref,
         id,
         onClick: (e) => {
           onClick == null ? void 0 : onClick(e);
           e.stopPropagation();
         },
-        className: classes
-      }, others),
-      /* @__PURE__ */ React53.createElement(
+        className: classes,
+        ...others
+      },
+      /* @__PURE__ */ React52.createElement(
         "img",
         {
           style: styles.image,
-          className: hashClass(styled, (0, import_clsx46.default)(radius && has(`border-radius-${radius}`), circled ? is("circled") : "")),
+          className: hashClass(styled, (0, import_clsx45.default)(radius && has(`border-radius-${radius}`), circled ? is("circled") : "")),
           src: typeof src === "string" ? src : "",
           alt
         }
@@ -3931,47 +3654,46 @@ Image.displayName = "Image" /* Image */;
 var Image_default = Image;
 
 // components/list/List.tsx
-var import_clsx47 = __toESM(require("clsx"));
-var React54 = __toESM(require("react"));
-var List = React54.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { className, id, children, testId, divider, ordered } = _b, others = __objRest(_b, ["className", "id", "children", "testId", "divider", "ordered"]);
+var import_clsx46 = __toESM(require("clsx"));
+var React53 = __toESM(require("react"));
+var List = React53.forwardRef(
+  ({ className, id, children, testId, divider, ordered, ...others }, ref) => {
     const { styled } = useTrilogyContext();
-    const classes = hashClass(styled, (0, import_clsx47.default)("list", divider && has("divider"), className));
+    const classes = hashClass(styled, (0, import_clsx46.default)("list", divider && has("divider"), className));
     const Tag2 = ordered ? "ol" : "ul";
-    return /* @__PURE__ */ React54.createElement(Tag2, __spreadValues({ ref, id, "data-testid": testId, className: classes }, others), children);
+    return /* @__PURE__ */ React53.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_clsx48 = __toESM(require("clsx"));
-var React55 = __toESM(require("react"));
-var ListItem = React55.forwardRef(
+var import_clsx47 = __toESM(require("clsx"));
+var React54 = __toESM(require("react"));
+var ListItem = React54.forwardRef(
   ({ className, id, children, iconName, status, testId }, ref) => {
     const { styled } = useTrilogyContext();
-    const classes = (0, import_clsx48.default)("list-item", className, status && is(getColorClassName(TrilogyColor[status])));
-    return /* @__PURE__ */ React55.createElement("li", { ref, id, className: hashClass(styled, (0, import_clsx48.default)(classes)), "data-testid": testId }, iconName && /* @__PURE__ */ React55.createElement(
+    const classes = (0, import_clsx47.default)("list-item", className, status && is(getColorClassName(TrilogyColor[status])));
+    return /* @__PURE__ */ React54.createElement("li", { ref, id, className: hashClass(styled, (0, import_clsx47.default)(classes)), "data-testid": testId }, iconName && /* @__PURE__ */ React54.createElement(
       Icon_default,
       {
-        className: status && (0, import_clsx48.default)(is(getColorClassName(TrilogyColor[status]))),
+        className: status && (0, import_clsx47.default)(is(getColorClassName(TrilogyColor[status]))),
         name: iconName,
         size: "small" /* SMALL */
       }
-    ), /* @__PURE__ */ React55.createElement("div", { className: hashClass(styled, (0, import_clsx48.default)("list-item-content")) }, children));
+    ), /* @__PURE__ */ React54.createElement("div", { className: hashClass(styled, (0, import_clsx47.default)("list-item-content")) }, children));
   }
 );
 ListItem.displayName = "ListItem" /* ListItem */;
 var ListItem_default = ListItem;
 
 // components/list/item/description/ListItemDescription.tsx
-var import_clsx49 = __toESM(require("clsx"));
-var React56 = __toESM(require("react"));
-var ListItemDescription = React56.forwardRef(
+var import_clsx48 = __toESM(require("clsx"));
+var React55 = __toESM(require("react"));
+var ListItemDescription = React55.forwardRef(
   ({ children, className }, ref) => {
     const { styled } = useTrilogyContext();
-    return /* @__PURE__ */ React56.createElement("dd", { ref, className: hashClass(styled, (0, import_clsx49.default)(className)) }, children);
+    return /* @__PURE__ */ React55.createElement("dd", { ref, className: hashClass(styled, (0, import_clsx48.default)(className)) }, children);
   }
 );
 ListItemDescription.displayName = "ListItemDescription" /* ListItemDescription */;
@@ -3988,37 +3710,24 @@ var ListIconStatus = /* @__PURE__ */ ((ListIconStatus2) => {
 
 // components/modal/Modal.tsx
 var import_modal = __toESM(require("@trilogy-ds/locales/lib/modal"));
-var import_clsx50 = __toESM(require("clsx"));
+var import_clsx49 = __toESM(require("clsx"));
 var import_react29 = __toESM(require("react"));
 var Modal = import_react29.default.forwardRef(
-  (_a, ref) => {
-    var _b = _a, {
-      children,
-      className,
-      id,
-      accessibilityLabel = "Close",
-      active,
-      onClose,
-      unClosable,
-      panel,
-      size: size2,
-      hideCloseButton = false,
-      trigger,
-      title
-    } = _b, others = __objRest(_b, [
-      "children",
-      "className",
-      "id",
-      "accessibilityLabel",
-      "active",
-      "onClose",
-      "unClosable",
-      "panel",
-      "size",
-      "hideCloseButton",
-      "trigger",
-      "title"
-    ]);
+  ({
+    children,
+    className,
+    id,
+    accessibilityLabel = "Close",
+    active,
+    onClose,
+    unClosable,
+    panel,
+    size: size2,
+    hideCloseButton = false,
+    trigger,
+    title,
+    ...others
+  }, ref) => {
     const modalContentRef = (0, import_react29.useRef)(null);
     const [display, setDisplay] = (0, import_react29.useState)(active || false);
     const { styled } = useTrilogyContext();
@@ -4039,7 +3748,7 @@ var Modal = import_react29.default.forwardRef(
     );
     const classes = hashClass(
       styled,
-      (0, import_clsx50.default)("modal", display && is("active"), size2 && is(size2), panel && is("panel"), className)
+      (0, import_clsx49.default)("modal", display && is("active"), size2 && is(size2), panel && is("panel"), className)
     );
     const onKeyDown = (0, import_react29.useCallback)(
       (e) => {
@@ -4084,7 +3793,7 @@ var Modal = import_react29.default.forwardRef(
     }, [modalContentRef, focusableElementsRef]);
     return /* @__PURE__ */ import_react29.default.createElement("div", { onKeyDown, ref: refModal }, trigger && import_react29.default.cloneElement(trigger, { ref: refBtnModal, "aria-haspopup": "dialog" }), /* @__PURE__ */ import_react29.default.createElement(
       "div",
-      __spreadValues({
+      {
         ref,
         id,
         className: classes,
@@ -4092,22 +3801,23 @@ var Modal = import_react29.default.forwardRef(
         "aria-labelledby": modalGeneratedId,
         "aria-modal": true,
         onClick: (e) => {
-          var _a2;
-          if (!((_a2 = modalContentRef == null ? void 0 : modalContentRef.current) == null ? void 0 : _a2.contains(e.target))) {
+          var _a;
+          if (!((_a = modalContentRef == null ? void 0 : modalContentRef.current) == null ? void 0 : _a.contains(e.target))) {
             handleClose(onClose, e);
           }
-        }
-      }, others),
-      /* @__PURE__ */ import_react29.default.createElement("div", { ref: modalContentRef, className: hashClass(styled, (0, import_clsx50.default)("modal-content")) }, /* @__PURE__ */ import_react29.default.createElement("div", { className: hashClass(styled, (0, import_clsx50.default)("modal-header")) }, !hideCloseButton && /* @__PURE__ */ import_react29.default.createElement(
+        },
+        ...others
+      },
+      /* @__PURE__ */ import_react29.default.createElement("div", { ref: modalContentRef, className: hashClass(styled, (0, import_clsx49.default)("modal-content")) }, /* @__PURE__ */ import_react29.default.createElement("div", { className: hashClass(styled, (0, import_clsx49.default)("modal-header")) }, !hideCloseButton && /* @__PURE__ */ import_react29.default.createElement(
         "button",
         {
           onClick: (e) => {
             handleClose(onClose, e);
           },
-          className: hashClass(styled, (0, import_clsx50.default)("modal-close", is("large"))),
+          className: hashClass(styled, (0, import_clsx49.default)("modal-close", is("large"))),
           type: "button" /* BUTTON */
         },
-        /* @__PURE__ */ import_react29.default.createElement("span", { className: hashClass(styled, (0, import_clsx50.default)("sr-only")) }, import_modal.default.accessibilityLabelButtonClose)
+        /* @__PURE__ */ import_react29.default.createElement("span", { className: hashClass(styled, (0, import_clsx49.default)("sr-only")) }, import_modal.default.accessibilityLabelButtonClose)
       ), /* @__PURE__ */ import_react29.default.createElement(Title_default, { id: modalGeneratedId, level: 3 /* THREE */, markup: "h1" /* H1 */ }, title)), children && children)
     ));
   }
@@ -4116,23 +3826,23 @@ Modal.displayName = "Modal" /* Modal */;
 var Modal_default = Modal;
 
 // components/modal/footer/ModalFooter.tsx
-var import_clsx51 = __toESM(require("clsx"));
-var React58 = __toESM(require("react"));
-var ModalFooter = React58.forwardRef(
+var import_clsx50 = __toESM(require("clsx"));
+var React57 = __toESM(require("react"));
+var ModalFooter = React57.forwardRef(
   ({ children, className, id }, ref) => {
     const { styled } = useTrilogyContext();
-    return /* @__PURE__ */ React58.createElement("div", { ref, "data-modal-footer": "", id, className: hashClass(styled, (0, import_clsx51.default)("modal-footer", className)) }, children);
+    return /* @__PURE__ */ React57.createElement("div", { ref, "data-modal-footer": "", id, className: hashClass(styled, (0, import_clsx50.default)("modal-footer", className)) }, children);
   }
 );
 ModalFooter.displayName = "ModalFooter" /* ModalFooter */;
 var ModalFooter_default = ModalFooter;
 
 // components/modal/body/ModalBody.tsx
-var import_clsx52 = __toESM(require("clsx"));
-var React59 = __toESM(require("react"));
-var ModalBody = React59.forwardRef(({ children, className, id }, ref) => {
+var import_clsx51 = __toESM(require("clsx"));
+var React58 = __toESM(require("react"));
+var ModalBody = React58.forwardRef(({ children, className, id }, ref) => {
   const { styled } = useTrilogyContext();
-  return /* @__PURE__ */ React59.createElement("div", { ref, id, className: hashClass(styled, (0, import_clsx52.default)("modal-body", className)) }, children);
+  return /* @__PURE__ */ React58.createElement("div", { ref, id, className: hashClass(styled, (0, import_clsx51.default)("modal-body", className)) }, children);
 });
 ModalBody.displayName = "ModalBody" /* ModalBody */;
 var ModalBody_default = ModalBody;
@@ -4167,7 +3877,7 @@ var ModalSize = /* @__PURE__ */ ((ModalSize2) => {
 
 // components/otp/Otp.tsx
 var import_otp = __toESM(require("@trilogy-ds/locales/lib/otp"));
-var import_clsx53 = __toESM(require("clsx"));
+var import_clsx52 = __toESM(require("clsx"));
 var import_react30 = __toESM(require("react"));
 var stringToCode = (str, codeSize) => {
   if (!str) return new Array(codeSize).fill(null);
@@ -4226,40 +3936,27 @@ var formatTranslation = (translation5, x, y) => {
   return translation5.replace(/:x/g, x).replace(/:y/g, y);
 };
 var Otp = import_react30.default.forwardRef(
-  (_a, ref) => {
-    var _b = _a, {
-      className,
-      id,
-      value,
-      length = 6,
-      disabled,
-      error,
-      onCompleted,
-      onChange,
-      onFocus,
-      label,
-      help,
-      autoFocus
-    } = _b, others = __objRest(_b, [
-      "className",
-      "id",
-      "value",
-      "length",
-      "disabled",
-      "error",
-      "onCompleted",
-      "onChange",
-      "onFocus",
-      "label",
-      "help",
-      "autoFocus"
-    ]);
+  ({
+    className,
+    id,
+    value,
+    length = 6,
+    disabled,
+    error,
+    onCompleted,
+    onChange,
+    onFocus,
+    label,
+    help,
+    autoFocus,
+    ...others
+  }, ref) => {
     const [codeInput, setCodeInput] = (0, import_react30.useState)(
       stringToCode(value, length) || new Array(length).fill(null)
     );
     const hasChanged = (0, import_react30.useRef)(false);
     const { styled } = useTrilogyContext();
-    const classes = hashClass(styled, (0, import_clsx53.default)("otp-list", error && is("error"), className));
+    const classes = hashClass(styled, (0, import_clsx52.default)("otp-list", error && is("error"), className));
     (0, import_react30.useEffect)(() => {
       if (!disabled) {
         isCompleted(codeInput) && (onCompleted == null ? void 0 : onCompleted(codeToString(codeInput)));
@@ -4309,7 +4006,7 @@ var Otp = import_react30.default.forwardRef(
       },
       codeInput.map((digit, idx) => /* @__PURE__ */ import_react30.default.createElement(
         "input",
-        __spreadValues({
+        {
           "aria-disabled": disabled,
           key: idx,
           type: "tel",
@@ -4318,19 +4015,20 @@ var Otp = import_react30.default.forwardRef(
           autoFocus: idx === 0 && autoFocus,
           pattern: "\\d{1}",
           maxLength: length,
-          className: hashClass(styled, (0, import_clsx53.default)("otp")),
+          className: hashClass(styled, (0, import_clsx52.default)("otp")),
           value: `${digit != null ? digit : ""}`,
           onKeyUp: inputOnKeyUp,
           onFocus: inputOnFocus,
           onChange: (e) => inputOnChange(e, idx),
           disabled,
-          title: formatTranslation(import_otp.default.inputTitle, String(idx + 1), String(length))
-        }, others)
+          title: formatTranslation(import_otp.default.inputTitle, String(idx + 1), String(length)),
+          ...others
+        }
       ))
     ), help && /* @__PURE__ */ import_react30.default.createElement(
       Text_default,
       {
-        className: hashClass(styled, (0, import_clsx53.default)("help")),
+        className: hashClass(styled, (0, import_clsx52.default)("help")),
         markup: "p" /* P */,
         typo: error && "has-text-error" /* TEXT_ERROR */ || "has-text-main" /* TEXT_MAIN */
       },
@@ -4342,14 +4040,13 @@ Otp.displayName = "Otp" /* Otp */;
 var Otp_default = Otp;
 
 // components/pagination/Pagination.tsx
-var import_clsx54 = __toESM(require("clsx"));
+var import_clsx53 = __toESM(require("clsx"));
 var import_react31 = __toESM(require("react"));
 var Pagination = import_react31.default.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { className, id, length, defaultPage = 1, onClick, href } = _b, others = __objRest(_b, ["className", "id", "length", "defaultPage", "onClick", "href"]);
+  ({ className, id, length, defaultPage = 1, onClick, href, ...others }, ref) => {
     const [currentPage, setCurrentPage] = (0, import_react31.useState)(defaultPage);
     const { styled } = useTrilogyContext();
-    const classes = hashClass(styled, (0, import_clsx54.default)("pagination", className));
+    const classes = hashClass(styled, (0, import_clsx53.default)("pagination", className));
     const prevCurrentPage = (0, import_react31.useRef)(currentPage);
     const pager = import_react31.default.useMemo(() => {
       let startPage = 1;
@@ -4387,43 +4084,43 @@ var Pagination = import_react31.default.forwardRef(
     (0, import_react31.useEffect)(() => {
       setCurrentPage(defaultPage);
     }, [defaultPage]);
-    return /* @__PURE__ */ import_react31.default.createElement("nav", __spreadValues({ ref, id, className: classes }, others), /* @__PURE__ */ import_react31.default.createElement(
+    return /* @__PURE__ */ import_react31.default.createElement("nav", { ref, id, className: classes, ...others }, /* @__PURE__ */ import_react31.default.createElement(
       "a",
-      __spreadProps(__spreadValues({
-        className: hashClass(styled, (0, import_clsx54.default)("pagination-previous"))
-      }, currentPage === 1 ? { "aria-disabled": true } : {}), {
+      {
+        className: hashClass(styled, (0, import_clsx53.default)("pagination-previous")),
+        ...currentPage === 1 ? { "aria-disabled": true } : {},
         onClick: () => {
           if (currentPage !== 1) {
             setCurrentPage(currentPage - 1);
           }
         },
         href: href == null ? void 0 : href(currentPage - 1)
-      }),
+      },
       /* @__PURE__ */ import_react31.default.createElement(Icon_default, { name: "tri-arrow-left" /* ARROW_LEFT */ })
-    ), /* @__PURE__ */ import_react31.default.createElement("ul", { className: hashClass(styled, (0, import_clsx54.default)("pagination-list")) }, !pager.pages.includes(1) && /* @__PURE__ */ import_react31.default.createElement("li", null, /* @__PURE__ */ import_react31.default.createElement("span", { className: hashClass(styled, (0, import_clsx54.default)("pagination-ellipsis")) }, "\u2026")), pager.pages.map((pageNumber) => /* @__PURE__ */ import_react31.default.createElement("li", { key: pageNumber }, /* @__PURE__ */ import_react31.default.createElement(
+    ), /* @__PURE__ */ import_react31.default.createElement("ul", { className: hashClass(styled, (0, import_clsx53.default)("pagination-list")) }, !pager.pages.includes(1) && /* @__PURE__ */ import_react31.default.createElement("li", null, /* @__PURE__ */ import_react31.default.createElement("span", { className: hashClass(styled, (0, import_clsx53.default)("pagination-ellipsis")) }, "\u2026")), pager.pages.map((pageNumber) => /* @__PURE__ */ import_react31.default.createElement("li", { key: pageNumber }, /* @__PURE__ */ import_react31.default.createElement(
       "a",
-      __spreadProps(__spreadValues({
-        className: hashClass(styled, (0, import_clsx54.default)("pagination-link"))
-      }, currentPage === pageNumber ? { "aria-current": true } : {}), {
+      {
+        className: hashClass(styled, (0, import_clsx53.default)("pagination-link")),
+        ...currentPage === pageNumber ? { "aria-current": true } : {},
         "aria-label": `Aller \xE0 la page ${pageNumber}`,
         onClick: () => {
           setCurrentPage(pageNumber);
         },
         href: href == null ? void 0 : href(pageNumber)
-      }),
+      },
       pageNumber
-    ))), !pager.pages.includes(length) && /* @__PURE__ */ import_react31.default.createElement("li", null, /* @__PURE__ */ import_react31.default.createElement("span", { className: hashClass(styled, (0, import_clsx54.default)("pagination-ellipsis")) }, "\u2026"))), /* @__PURE__ */ import_react31.default.createElement(
+    ))), !pager.pages.includes(length) && /* @__PURE__ */ import_react31.default.createElement("li", null, /* @__PURE__ */ import_react31.default.createElement("span", { className: hashClass(styled, (0, import_clsx53.default)("pagination-ellipsis")) }, "\u2026"))), /* @__PURE__ */ import_react31.default.createElement(
       "a",
-      __spreadProps(__spreadValues({
-        className: hashClass(styled, (0, import_clsx54.default)("pagination-next"))
-      }, currentPage === Math.max(length) ? { "aria-disabled": true } : {}), {
+      {
+        className: hashClass(styled, (0, import_clsx53.default)("pagination-next")),
+        ...currentPage === Math.max(length) ? { "aria-disabled": true } : {},
         onClick: () => {
           if (currentPage !== Math.max(length)) {
             setCurrentPage(currentPage + 1);
           }
         },
         href: href == null ? void 0 : href(currentPage + 1)
-      }),
+      },
       /* @__PURE__ */ import_react31.default.createElement(Icon_default, { name: "tri-arrow-right" /* ARROW_RIGHT */ })
     ));
   }
@@ -4432,15 +4129,14 @@ Pagination.displayName = "Pagination" /* Pagination */;
 var Pagination_default = Pagination;
 
 // components/popover/Popover.tsx
-var import_clsx55 = __toESM(require("clsx"));
-var React62 = __toESM(require("react"));
-var Popover = React62.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { className, id, direction, children, active, arrowPosition, trigger } = _b, others = __objRest(_b, ["className", "id", "direction", "children", "active", "arrowPosition", "trigger"]);
+var import_clsx54 = __toESM(require("clsx"));
+var React61 = __toESM(require("react"));
+var Popover = React61.forwardRef(
+  ({ className, id, direction, children, active, arrowPosition, trigger, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     const classes = hashClass(
       styled,
-      (0, import_clsx55.default)(
+      (0, import_clsx54.default)(
         "popover",
         direction && is(`popover-${direction}`),
         active && is("popover-active"),
@@ -4448,7 +4144,7 @@ var Popover = React62.forwardRef(
         className
       )
     );
-    return /* @__PURE__ */ React62.createElement("span", __spreadValues({ ref, id, className: classes }, others), trigger && trigger, /* @__PURE__ */ React62.createElement("span", { className: hashClass(styled, "popover-content") }, children));
+    return /* @__PURE__ */ React61.createElement("span", { ref, id, className: classes, ...others }, trigger && trigger, /* @__PURE__ */ React61.createElement("span", { className: hashClass(styled, "popover-content") }, children));
   }
 );
 Popover.displayName = "Popover" /* Popover */;
@@ -4468,8 +4164,8 @@ var PopoverArrowPosition = /* @__PURE__ */ ((PopoverArrowPosition2) => {
 })(PopoverArrowPosition || {});
 
 // components/price/Price.tsx
-var import_clsx56 = __toESM(require("clsx"));
-var React63 = __toESM(require("react"));
+var import_clsx55 = __toESM(require("clsx"));
+var React62 = __toESM(require("react"));
 
 // components/price/PriceHelpers.ts
 var checkCents = (text) => {
@@ -4481,41 +4177,28 @@ var checkCents = (text) => {
 };
 
 // components/price/Price.tsx
-var Price = React63.forwardRef(
-  (_a, ref) => {
-    var _b = _a, {
-      className,
-      id,
-      amount,
-      mention,
-      period,
-      hideCents = false,
-      level,
-      inverted,
-      align,
-      accessibilityLabel,
-      oldAmount,
-      overline
-    } = _b, others = __objRest(_b, [
-      "className",
-      "id",
-      "amount",
-      "mention",
-      "period",
-      "hideCents",
-      "level",
-      "inverted",
-      "align",
-      "accessibilityLabel",
-      "oldAmount",
-      "overline"
-    ]);
-    var _a2, _b2;
+var Price = React62.forwardRef(
+  ({
+    className,
+    id,
+    amount,
+    mention,
+    period,
+    hideCents = false,
+    level,
+    inverted,
+    align,
+    accessibilityLabel,
+    oldAmount,
+    overline,
+    ...others
+  }, ref) => {
+    var _a, _b;
     const { styled } = useTrilogyContext();
-    const classes = hashClass(styled, (0, import_clsx56.default)("price", inverted && is("inverted"), overline && has("suptitle"), className));
+    const classes = hashClass(styled, (0, import_clsx55.default)("price", inverted && is("inverted"), overline && has("suptitle"), className));
     const classesStrike = hashClass(
       styled,
-      (0, import_clsx56.default)("price", inverted && is("inverted"), oldAmount && "strike", overline && has("suptitle"), className)
+      (0, import_clsx55.default)("price", inverted && is("inverted"), oldAmount && "strike", overline && has("suptitle"), className)
     );
     let amountComponent = null;
     let oldAmountComponent = null;
@@ -4525,41 +4208,41 @@ var Price = React63.forwardRef(
       const absoluteAmountStrike = oldAmount && Math.abs(oldAmount);
       const absoluteWholeStrike = absoluteAmountStrike && Math.floor(absoluteAmountStrike);
       const wholeStrike = isNegativeStrike && absoluteWholeStrike ? -absoluteWholeStrike : absoluteWholeStrike;
-      let cents = checkCents(((_a2 = absoluteAmountStrike.toString().split(/[.,]/)[1]) == null ? void 0 : _a2.substring(0, 2)) || "");
+      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__ */ React63.createElement("span", __spreadValues({ "aria-hidden": "true", className: classesStrike }, others), /* @__PURE__ */ React63.createElement(Text_default, { markup: "span" /* SPAN */ }, `${wholeStrike}`), /* @__PURE__ */ React63.createElement("span", { className: hashClass(styled, (0, import_clsx56.default)("price-details")) }, /* @__PURE__ */ React63.createElement("span", { className: hashClass(styled, (0, import_clsx56.default)("cents")) }, centsDisplayed === "\u20AC" ? /* @__PURE__ */ React63.createElement(React63.Fragment, null, "\xA0", centsDisplayed) : centsDisplayed, mention && /* @__PURE__ */ React63.createElement("sup", null, mention)), period && /* @__PURE__ */ React63.createElement("span", { className: hashClass(styled, (0, import_clsx56.default)("period")) }, "/", period)));
+      oldAmountComponent = /* @__PURE__ */ React62.createElement("span", { "aria-hidden": "true", className: classesStrike, ...others }, /* @__PURE__ */ React62.createElement(Text_default, { markup: "span" /* SPAN */ }, `${wholeStrike}`), /* @__PURE__ */ React62.createElement("span", { className: hashClass(styled, (0, import_clsx55.default)("price-details")) }, /* @__PURE__ */ React62.createElement("span", { className: hashClass(styled, (0, import_clsx55.default)("cents")) }, centsDisplayed === "\u20AC" ? /* @__PURE__ */ React62.createElement(React62.Fragment, null, "\xA0", centsDisplayed) : centsDisplayed, mention && /* @__PURE__ */ React62.createElement("sup", null, mention)), period && /* @__PURE__ */ React62.createElement("span", { className: hashClass(styled, (0, import_clsx55.default)("period")) }, "/", period)));
     }
     if (amount !== void 0) {
       const isNegative = amount < 0;
       const absoluteAmount = Math.abs(amount);
       const absoluteWhole = Math.floor(absoluteAmount);
       const whole = isNegative ? -absoluteWhole : absoluteWhole;
-      let cents = checkCents(((_b2 = absoluteAmount.toString().split(/[.,]/)[1]) == null ? void 0 : _b2.substring(0, 2)) || "");
+      let cents = checkCents(((_b = absoluteAmount.toString().split(/[.,]/)[1]) == null ? void 0 : _b.substring(0, 2)) || "");
       cents = cents && cents.length === 1 && `${cents}0` || cents;
       const centsDisplayed = !hideCents && `\u20AC${cents}` || "\u20AC";
       const dataPrice = `${whole}${!hideCents && cents ? `.${cents}` : ""}`;
-      amountComponent = /* @__PURE__ */ React63.createElement("span", __spreadValues({ "aria-hidden": "true", "aria-label": accessibilityLabel, className: classes, "data-price": dataPrice }, others), /* @__PURE__ */ React63.createElement(Text_default, { markup: "span" /* SPAN */ }, `${whole}`), /* @__PURE__ */ React63.createElement("span", { className: hashClass(styled, (0, import_clsx56.default)("price-details")) }, /* @__PURE__ */ React63.createElement("span", { className: hashClass(styled, (0, import_clsx56.default)("cents")) }, centsDisplayed === "\u20AC" ? /* @__PURE__ */ React63.createElement(React63.Fragment, null, "\xA0", centsDisplayed) : centsDisplayed, mention && /* @__PURE__ */ React63.createElement("sup", null, mention)), period && /* @__PURE__ */ React63.createElement("span", { className: hashClass(styled, (0, import_clsx56.default)("period")) }, "/", period)));
+      amountComponent = /* @__PURE__ */ React62.createElement("span", { "aria-hidden": "true", "aria-label": accessibilityLabel, className: classes, "data-price": dataPrice, ...others }, /* @__PURE__ */ React62.createElement(Text_default, { markup: "span" /* SPAN */ }, `${whole}`), /* @__PURE__ */ React62.createElement("span", { className: hashClass(styled, (0, import_clsx55.default)("price-details")) }, /* @__PURE__ */ React62.createElement("span", { className: hashClass(styled, (0, import_clsx55.default)("cents")) }, centsDisplayed === "\u20AC" ? /* @__PURE__ */ React62.createElement(React62.Fragment, null, "\xA0", centsDisplayed) : centsDisplayed, mention && /* @__PURE__ */ React62.createElement("sup", null, mention)), period && /* @__PURE__ */ React62.createElement("span", { className: hashClass(styled, (0, import_clsx55.default)("period")) }, "/", period)));
     }
-    return /* @__PURE__ */ React63.createElement(
+    return /* @__PURE__ */ React62.createElement(
       "div",
       {
         ref,
         id,
         className: hashClass(
           styled,
-          (0, import_clsx56.default)(
+          (0, import_clsx55.default)(
             "price-container",
             is(`level-${level || "1"}`),
             align == "ALIGNED_START" /* ALIGNED_START */ && is("justified-start") || align == "ALIGNED_CENTER" /* ALIGNED_CENTER */ && is("justified-center") || align == "ALIGNED_END" /* ALIGNED_END */ && is("justified-end") || ""
           )
         )
       },
-      overline && /* @__PURE__ */ React63.createElement("p", { className: hashClass(styled, (0, import_clsx56.default)("overline")) }, overline),
+      overline && /* @__PURE__ */ React62.createElement("p", { className: hashClass(styled, (0, import_clsx55.default)("overline")) }, overline),
       oldAmountComponent,
       amountComponent,
       tagAmountComponent,
-      accessibilityLabel && /* @__PURE__ */ React63.createElement("p", { className: hashClass(styled, (0, import_clsx56.default)("sr-only")) }, accessibilityLabel)
+      accessibilityLabel && /* @__PURE__ */ React62.createElement("p", { className: hashClass(styled, (0, import_clsx55.default)("sr-only")) }, accessibilityLabel)
     );
   }
 );
@@ -4579,11 +4262,10 @@ var PriceLevel = /* @__PURE__ */ ((PriceLevel2) => {
 })(PriceLevel || {});
 
 // components/product-tour/ProductTour.tsx
-var import_clsx57 = __toESM(require("clsx"));
+var import_clsx56 = __toESM(require("clsx"));
 var import_react32 = __toESM(require("react"));
 var ProductTour = import_react32.default.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { children, className, id, active, arrowDirection, arrowAlign, closeable, avatarSrc, avatarDirection } = _b, others = __objRest(_b, ["children", "className", "id", "active", "arrowDirection", "arrowAlign", "closeable", "avatarSrc", "avatarDirection"]);
+  ({ children, className, id, active, arrowDirection, arrowAlign, closeable, avatarSrc, avatarDirection, ...others }, ref) => {
     const [display, setDisplay] = (0, import_react32.useState)(active || false);
     const { styled } = useTrilogyContext();
     (0, import_react32.useEffect)(() => {
@@ -4591,9 +4273,9 @@ var ProductTour = import_react32.default.forwardRef(
     }, [active]);
     const classes = hashClass(
       styled,
-      (0, import_clsx57.default)("product-tour", display && is("active"), avatarDirection && has(`icon-${avatarDirection}`), className)
+      (0, import_clsx56.default)("product-tour", display && is("active"), avatarDirection && has(`icon-${avatarDirection}`), className)
     );
-    return /* @__PURE__ */ import_react32.default.createElement("div", __spreadValues({ ref, id, className: classes }, others), arrowDirection && /* @__PURE__ */ import_react32.default.createElement("div", { className: hashClass(styled, (0, import_clsx57.default)("arrow", is(arrowDirection), arrowAlign && is(arrowAlign))) }), avatarSrc && /* @__PURE__ */ import_react32.default.createElement("span", { className: hashClass(styled, (0, import_clsx57.default)("icon", is("medium"))) }, /* @__PURE__ */ import_react32.default.createElement("img", { className: hashClass(styled, (0, import_clsx57.default)(is("rounded"))), src: avatarSrc })), closeable && /* @__PURE__ */ import_react32.default.createElement("div", { style: { cursor: "pointer" }, onClick: () => setDisplay(!display) }, /* @__PURE__ */ import_react32.default.createElement(Icon_default, { size: "small" /* SMALL */, name: "tri-times" /* TIMES */, className: "close" })), /* @__PURE__ */ import_react32.default.createElement("div", { className: hashClass(styled, (0, import_clsx57.default)("product-tour-content")) }, children));
+    return /* @__PURE__ */ import_react32.default.createElement("div", { ref, id, className: classes, ...others }, arrowDirection && /* @__PURE__ */ import_react32.default.createElement("div", { className: hashClass(styled, (0, import_clsx56.default)("arrow", is(arrowDirection), arrowAlign && is(arrowAlign))) }), avatarSrc && /* @__PURE__ */ import_react32.default.createElement("span", { className: hashClass(styled, (0, import_clsx56.default)("icon", is("medium"))) }, /* @__PURE__ */ import_react32.default.createElement("img", { className: hashClass(styled, (0, import_clsx56.default)(is("rounded"))), src: avatarSrc })), closeable && /* @__PURE__ */ import_react32.default.createElement("div", { style: { cursor: "pointer" }, onClick: () => setDisplay(!display) }, /* @__PURE__ */ import_react32.default.createElement(Icon_default, { size: "small" /* SMALL */, name: "tri-times" /* TIMES */, className: "close" })), /* @__PURE__ */ import_react32.default.createElement("div", { className: hashClass(styled, (0, import_clsx56.default)("product-tour-content")) }, children));
   }
 );
 ProductTour.displayName = "ProductTour" /* ProductTour */;
@@ -4625,39 +4307,27 @@ var AvatarDirection = /* @__PURE__ */ ((AvatarDirection2) => {
 })(AvatarDirection || {});
 
 // components/progress/Progress.tsx
-var import_clsx58 = __toESM(require("clsx"));
-var React65 = __toESM(require("react"));
-var Progress = React65.forwardRef(
-  (_a, ref) => {
-    var _b = _a, {
-      children,
-      className,
-      id,
-      value,
-      max = 100,
-      status,
-      small,
-      legendStart,
-      legendCenter,
-      legendEnd,
-      stacked
-    } = _b, others = __objRest(_b, [
-      "children",
-      "className",
-      "id",
-      "value",
-      "max",
-      "status",
-      "small",
-      "legendStart",
-      "legendCenter",
-      "legendEnd",
-      "stacked"
-    ]);
+var import_clsx57 = __toESM(require("clsx"));
+var React64 = __toESM(require("react"));
+var Progress = React64.forwardRef(
+  ({
+    children,
+    className,
+    id,
+    value,
+    max = 100,
+    status,
+    small,
+    legendStart,
+    legendCenter,
+    legendEnd,
+    stacked,
+    ...others
+  }, ref) => {
     const { styled } = useTrilogyContext();
     const classes = hashClass(
       styled,
-      (0, import_clsx58.default)(
+      (0, import_clsx57.default)(
         "progress",
         status && is(getStatusClassName(status)),
         !status && is("primary"),
@@ -4665,39 +4335,39 @@ var Progress = React65.forwardRef(
         className
       )
     );
-    const stackedClasses = hashClass(styled, (0, import_clsx58.default)("progress", stacked && is("stacked"), className));
+    const stackedClasses = hashClass(styled, (0, import_clsx57.default)("progress", stacked && is("stacked"), className));
     if (children && stacked) {
-      return /* @__PURE__ */ React65.createElement("div", __spreadValues({ className: stackedClasses }, others), children);
+      return /* @__PURE__ */ React64.createElement("div", { className: stackedClasses, ...others }, children);
     }
-    return /* @__PURE__ */ React65.createElement("div", { ref, className: "progress-container" }, /* @__PURE__ */ React65.createElement("progress", __spreadValues({ id, className: classes, value, max }, others), value), (legendStart || legendCenter || legendEnd) && /* @__PURE__ */ React65.createElement("div", { className: "progress-legends" }, legendStart && /* @__PURE__ */ React65.createElement("div", { className: "progress-legend-start" }, /* @__PURE__ */ React65.createElement(Text_default, null, legendStart)), legendCenter && /* @__PURE__ */ React65.createElement("div", { className: "progress-legend-center" }, /* @__PURE__ */ React65.createElement(Text_default, null, legendCenter)), legendEnd && /* @__PURE__ */ React65.createElement("div", { className: "progress-legend-end" }, /* @__PURE__ */ React65.createElement(Text_default, null, legendEnd))));
+    return /* @__PURE__ */ React64.createElement("div", { ref, className: "progress-container" }, /* @__PURE__ */ React64.createElement("progress", { id, className: classes, value, max, ...others }, value), (legendStart || legendCenter || legendEnd) && /* @__PURE__ */ React64.createElement("div", { className: "progress-legends" }, legendStart && /* @__PURE__ */ React64.createElement("div", { className: "progress-legend-start" }, /* @__PURE__ */ React64.createElement(Text_default, null, legendStart)), legendCenter && /* @__PURE__ */ React64.createElement("div", { className: "progress-legend-center" }, /* @__PURE__ */ React64.createElement(Text_default, null, legendCenter)), legendEnd && /* @__PURE__ */ React64.createElement("div", { className: "progress-legend-end" }, /* @__PURE__ */ React64.createElement(Text_default, null, legendEnd))));
   }
 );
 Progress.displayName = "Progress" /* Progress */;
 var Progress_default = Progress;
 
 // components/progress/item/ProgressItem.tsx
-var import_clsx59 = __toESM(require("clsx"));
+var import_clsx58 = __toESM(require("clsx"));
 var import_react33 = __toESM(require("react"));
 var ProgressItem = import_react33.default.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { className, percent, maxPercent = 100, minPercent = 0, status, accessibilityLabel } = _b, others = __objRest(_b, ["className", "percent", "maxPercent", "minPercent", "status", "accessibilityLabel"]);
+  ({ className, percent, maxPercent = 100, minPercent = 0, status, accessibilityLabel, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     const classes = hashClass(
       styled,
-      (0, import_clsx59.default)("progress-bar", status && is(getStatusClassName(status)), !status && is("primary"), className)
+      (0, import_clsx58.default)("progress-bar", status && is(getStatusClassName(status)), !status && is("primary"), className)
     );
     return /* @__PURE__ */ import_react33.default.createElement(
       "div",
-      __spreadValues(__spreadProps(__spreadValues({
-        ref
-      }, percent && { style: { width: `${percent}%` } }), {
+      {
+        ref,
+        ...percent && { style: { width: `${percent}%` } },
         className: classes,
         role: "progressbar",
         "aria-valuenow": percent,
         "aria-valuemin": minPercent,
         "aria-valuemax": maxPercent,
-        "aria-label": accessibilityLabel
-      }), others)
+        "aria-label": accessibilityLabel,
+        ...others
+      }
     );
   }
 );
@@ -4709,34 +4379,24 @@ var item_default4 = ProgressItem_default;
 
 // components/progress/radial/ProgressRadial.tsx
 var import_react34 = __toESM(require("react"));
-var import_clsx60 = __toESM(require("clsx"));
-var ProgressRadial = import_react34.default.forwardRef((_a, ref) => {
-  var _b = _a, {
-    children,
-    value = 0,
-    secondValue = 0,
-    label,
-    description,
-    skeleton,
-    className,
-    id,
-    small
-  } = _b, others = __objRest(_b, [
-    "children",
-    "value",
-    "secondValue",
-    "label",
-    "description",
-    "skeleton",
-    "className",
-    "id",
-    "small"
-  ]);
+var import_clsx59 = __toESM(require("clsx"));
+var ProgressRadial = import_react34.default.forwardRef(({
+  children,
+  value = 0,
+  secondValue = 0,
+  label,
+  description,
+  skeleton,
+  className,
+  id,
+  small,
+  ...others
+}, ref) => {
   const { styled } = useTrilogyContext();
   const [firstProgressCurrentValue, setFirstProgressCurrentValue] = (0, import_react34.useState)(0);
   const [secondProgressCurrentValue, setSecondProgressCurrentValue] = (0, import_react34.useState)(0);
-  const classes = hashClass(styled, (0, import_clsx60.default)("progress-radial", skeleton && is("loading"), small && is("small"), className));
-  const classesContent = hashClass(styled, (0, import_clsx60.default)("progress-radial-content"));
+  const classes = hashClass(styled, (0, import_clsx59.default)("progress-radial", skeleton && is("loading"), small && is("small"), className));
+  const classesContent = hashClass(styled, (0, import_clsx59.default)("progress-radial-content"));
   const progressRadialRef = (0, import_react34.useRef)(null);
   const updateBackgroundStyle = (firstValue, secondValue2) => {
     const progressRadial = progressRadialRef.current;
@@ -4773,7 +4433,7 @@ var ProgressRadial = import_react34.default.forwardRef((_a, ref) => {
   (0, import_react34.useEffect)(() => {
     updateBackgroundStyle(firstProgressCurrentValue, secondProgressCurrentValue);
   }, [firstProgressCurrentValue, secondProgressCurrentValue]);
-  return /* @__PURE__ */ import_react34.default.createElement("div", __spreadProps(__spreadValues({ id }, others), { className: classes, ref: progressRadialRef }), /* @__PURE__ */ import_react34.default.createElement("div", { ref, className: classesContent }, label && /* @__PURE__ */ import_react34.default.createElement(Title_default, { level: 2 /* TWO */, marginless: true }, label), description && /* @__PURE__ */ import_react34.default.createElement(Text_default, { level: 1 /* ONE */, marginless: true }, description), !label && !description && children));
+  return /* @__PURE__ */ import_react34.default.createElement("div", { id, ...others, className: classes, ref: progressRadialRef }, /* @__PURE__ */ import_react34.default.createElement("div", { ref, className: classesContent }, label && /* @__PURE__ */ import_react34.default.createElement(Title_default, { level: 2 /* TWO */, marginless: true }, label), description && /* @__PURE__ */ import_react34.default.createElement(Text_default, { level: 1 /* ONE */, marginless: true }, description), !label && !description && children));
 });
 ProgressRadial.displayName = "ProgressRadial" /* ProgressRadial */;
 var ProgressRadial_default = ProgressRadial;
@@ -4782,25 +4442,24 @@ var ProgressRadial_default = ProgressRadial;
 var radial_default = ProgressRadial_default;
 
 // components/progress/radial/item/ProgressRadialtem.tsx
-var import_clsx61 = __toESM(require("clsx"));
-var React68 = __toESM(require("react"));
+var import_clsx60 = __toESM(require("clsx"));
+var React67 = __toESM(require("react"));
 var ProgressRadialItem = ({ color, className, id }) => {
   const { styled } = useTrilogyContext();
-  const classes = hashClass(styled, (0, import_clsx61.default)(`progress-circle-slice progress-circle-background-${color}`, className));
-  return /* @__PURE__ */ React68.createElement("div", { id, className: classes });
+  const classes = hashClass(styled, (0, import_clsx60.default)(`progress-circle-slice progress-circle-background-${color}`, className));
+  return /* @__PURE__ */ React67.createElement("div", { id, className: classes });
 };
 var ProgressRadialtem_default = ProgressRadialItem;
 
 // components/radio/list/RadioList.tsx
-var import_clsx62 = __toESM(require("clsx"));
-var React69 = __toESM(require("react"));
-var RadioList = React69.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { className, id, align, horizontalMobile, verticalDesktop, accessibilityLabelledBy, children } = _b, others = __objRest(_b, ["className", "id", "align", "horizontalMobile", "verticalDesktop", "accessibilityLabelledBy", "children"]);
+var import_clsx61 = __toESM(require("clsx"));
+var React68 = __toESM(require("react"));
+var RadioList = React68.forwardRef(
+  ({ className, id, align, horizontalMobile, verticalDesktop, accessibilityLabelledBy, children, ...others }, ref) => {
     const { styled } = useTrilogyContext();
-    return /* @__PURE__ */ React69.createElement(
+    return /* @__PURE__ */ React68.createElement(
       "div",
-      __spreadValues({
+      {
         ref,
         id,
         role: "radiogroup",
@@ -4808,15 +4467,16 @@ var RadioList = React69.forwardRef(
         "aria-required": isRequiredChild(children) ? "true" : void 0,
         className: hashClass(
           styled,
-          (0, import_clsx62.default)(
+          (0, import_clsx61.default)(
             "radios",
             className,
             align && is(getJustifiedClassName(align)),
             horizontalMobile && is("horizontal-mobile"),
             verticalDesktop && is("vertical-desktop")
           )
-        )
-      }, others),
+        ),
+        ...others
+      },
       children
     );
   }
@@ -4825,15 +4485,14 @@ RadioList.displayName = "RadioList" /* RadioList */;
 var RadioList_default = RadioList;
 
 // components/radio/Radio.tsx
-var import_clsx63 = __toESM(require("clsx"));
+var import_clsx62 = __toESM(require("clsx"));
 var import_react35 = __toESM(require("react"));
 var Radio = import_react35.default.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { checked, className, disabled, readonly, id = import_react35.default.useId(), label, onChange, name, value, required } = _b, others = __objRest(_b, ["checked", "className", "disabled", "readonly", "id", "label", "onChange", "name", "value", "required"]);
+  ({ checked, className, disabled, readonly, id = import_react35.default.useId(), label, onChange, name, value, required, ...others }, ref) => {
     const { styled } = useTrilogyContext();
-    return /* @__PURE__ */ import_react35.default.createElement("div", { ref, className: hashClass(styled, (0, import_clsx63.default)("radio", className)) }, /* @__PURE__ */ import_react35.default.createElement(
+    return /* @__PURE__ */ import_react35.default.createElement("div", { ref, className: hashClass(styled, (0, import_clsx62.default)("radio", className)) }, /* @__PURE__ */ import_react35.default.createElement(
       "input",
-      __spreadValues({
+      {
         type: "radio",
         readOnly: readonly,
         id,
@@ -4851,20 +4510,20 @@ var Radio = import_react35.default.forwardRef(
               radioChecked: e.target.checked
             });
           }
-        }
-      }, others)
-    ), /* @__PURE__ */ import_react35.default.createElement("label", { htmlFor: id, className: hashClass(styled, (0, import_clsx63.default)("radio-label")) }, label));
+        },
+        ...others
+      }
+    ), /* @__PURE__ */ import_react35.default.createElement("label", { htmlFor: id, className: hashClass(styled, (0, import_clsx62.default)("radio-label")) }, label));
   }
 );
 Radio.displayName = "Radio" /* Radio */;
 var Radio_default = Radio;
 
 // components/radio/tiles/RadioTiles.tsx
-var import_clsx64 = __toESM(require("clsx"));
-var React71 = __toESM(require("react"));
-var RadioTiles = React71.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { id, className, children, align, verticalAlign, accessibilityLabelledBy } = _b, others = __objRest(_b, ["id", "className", "children", "align", "verticalAlign", "accessibilityLabelledBy"]);
+var import_clsx63 = __toESM(require("clsx"));
+var React70 = __toESM(require("react"));
+var RadioTiles = React70.forwardRef(
+  ({ id, className, children, align, verticalAlign, accessibilityLabelledBy, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     let alignClass = null;
     if (align) {
@@ -4874,9 +4533,9 @@ var RadioTiles = React71.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__ */ React71.createElement(
+    return /* @__PURE__ */ React70.createElement(
       "div",
-      __spreadValues({
+      {
         ref,
         id,
         role: "radiogroup",
@@ -4884,9 +4543,10 @@ var RadioTiles = React71.forwardRef(
         "aria-required": isRequiredChild(children) ? "true" : void 0,
         className: hashClass(
           styled,
-          (0, import_clsx64.default)("radio-tiles", className, align && alignClass, verticalAlign && verticalAlignClass)
-        )
-      }, others),
+          (0, import_clsx63.default)("radio-tiles", className, align && alignClass, verticalAlign && verticalAlignClass)
+        ),
+        ...others
+      },
       children
     );
   }
@@ -4895,47 +4555,31 @@ RadioTiles.displayName = "RadioTiles" /* RadioTiles */;
 var RadioTiles_default = RadioTiles;
 
 // components/radio/tiles/tile/RadioTile.tsx
-var import_clsx65 = __toESM(require("clsx"));
+var import_clsx64 = __toESM(require("clsx"));
 var import_react36 = __toESM(require("react"));
 var RadioTile = import_react36.default.forwardRef(
-  (_a, ref) => {
-    var _b = _a, {
-      checked,
-      className,
-      disabled,
-      readonly,
-      id = import_react36.default.useId(),
-      label,
-      onChange,
-      name,
-      value,
-      description,
-      icon,
-      horizontal,
-      required,
-      sticker,
-      stickerVariant = "ACCENT" /* ACCENT */
-    } = _b, others = __objRest(_b, [
-      "checked",
-      "className",
-      "disabled",
-      "readonly",
-      "id",
-      "label",
-      "onChange",
-      "name",
-      "value",
-      "description",
-      "icon",
-      "horizontal",
-      "required",
-      "sticker",
-      "stickerVariant"
-    ]);
+  ({
+    checked,
+    className,
+    disabled,
+    readonly,
+    id = import_react36.default.useId(),
+    label,
+    onChange,
+    name,
+    value,
+    description,
+    icon,
+    horizontal,
+    required,
+    sticker,
+    stickerVariant = "ACCENT" /* ACCENT */,
+    ...others
+  }, ref) => {
     const { styled } = useTrilogyContext();
-    return /* @__PURE__ */ import_react36.default.createElement("div", { ref, className: hashClass(styled, (0, import_clsx65.default)("radio-tile", horizontal && is("horizontal"), className)) }, /* @__PURE__ */ import_react36.default.createElement(
+    return /* @__PURE__ */ import_react36.default.createElement("div", { ref, className: hashClass(styled, (0, import_clsx64.default)("radio-tile", horizontal && is("horizontal"), className)) }, /* @__PURE__ */ import_react36.default.createElement(
       "input",
-      __spreadValues({
+      {
         type: "radio",
         readOnly: readonly,
         id,
@@ -4953,21 +4597,22 @@ var RadioTile = import_react36.default.forwardRef(
               radioChecked: e.target.checked
             });
           }
-        }
-      }, others)
-    ), /* @__PURE__ */ import_react36.default.createElement("label", { htmlFor: id, className: hashClass(styled, (0, import_clsx65.default)("radio-label")) }, icon && /* @__PURE__ */ import_react36.default.createElement(Icon_default, { name: icon, size: "medium" /* MEDIUM */ }), horizontal ? /* @__PURE__ */ import_react36.default.createElement("span", null, /* @__PURE__ */ import_react36.default.createElement("span", { className: hashClass(styled, (0, import_clsx65.default)("radio-title")) }, label), description && /* @__PURE__ */ import_react36.default.createElement("span", { className: hashClass(styled, (0, import_clsx65.default)("radio-description")) }, description)) : /* @__PURE__ */ import_react36.default.createElement(import_react36.default.Fragment, null, /* @__PURE__ */ import_react36.default.createElement("span", { className: hashClass(styled, (0, import_clsx65.default)("radio-title")) }, label), description && /* @__PURE__ */ import_react36.default.createElement("span", { className: hashClass(styled, (0, import_clsx65.default)("radio-description")) }, description))), sticker && /* @__PURE__ */ import_react36.default.createElement(Sticker_default, { label: sticker, variant: stickerVariant, className: "radio-sticker", small: true }));
+        },
+        ...others
+      }
+    ), /* @__PURE__ */ import_react36.default.createElement("label", { htmlFor: id, className: hashClass(styled, (0, import_clsx64.default)("radio-label")) }, icon && /* @__PURE__ */ import_react36.default.createElement(Icon_default, { name: icon, size: "medium" /* MEDIUM */ }), horizontal ? /* @__PURE__ */ import_react36.default.createElement("span", null, /* @__PURE__ */ import_react36.default.createElement("span", { className: hashClass(styled, (0, import_clsx64.default)("radio-title")) }, label), description && /* @__PURE__ */ import_react36.default.createElement("span", { className: hashClass(styled, (0, import_clsx64.default)("radio-description")) }, description)) : /* @__PURE__ */ import_react36.default.createElement(import_react36.default.Fragment, null, /* @__PURE__ */ import_react36.default.createElement("span", { className: hashClass(styled, (0, import_clsx64.default)("radio-title")) }, label), description && /* @__PURE__ */ import_react36.default.createElement("span", { className: hashClass(styled, (0, import_clsx64.default)("radio-description")) }, description))), sticker && /* @__PURE__ */ import_react36.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_clsx66 = __toESM(require("clsx"));
-var React73 = __toESM(require("react"));
-var Range = React73.forwardRef(
+var import_clsx65 = __toESM(require("clsx"));
+var React72 = __toESM(require("react"));
+var Range = React72.forwardRef(
   ({
     className,
-    id = React73.useId(),
+    id = React72.useId(),
     min,
     max,
     label,
@@ -4983,37 +4628,37 @@ var Range = React73.forwardRef(
     value
   }, ref) => {
     const { styled } = useTrilogyContext();
-    const refTrack = React73.useRef(null);
-    const [cursorMin, setCursorMin] = React73.useState(valueMin != null ? valueMin : 0);
-    const [cursorMax, setCursorMax] = React73.useState(simple ? value || 0 : valueMax != null ? valueMax : max);
-    React73.useEffect(() => {
+    const refTrack = React72.useRef(null);
+    const [cursorMin, setCursorMin] = React72.useState(valueMin != null ? valueMin : 0);
+    const [cursorMax, setCursorMax] = React72.useState(simple ? value || 0 : valueMax != null ? valueMax : max);
+    React72.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]);
-    React73.useEffect(() => {
+    React72.useEffect(() => {
       setCursorMin(valueMin || 0);
     }, [valueMin]);
-    React73.useEffect(() => {
+    React72.useEffect(() => {
       if (!simple) setCursorMax(valueMax || max);
     }, [valueMax, simple]);
-    React73.useEffect(() => {
+    React72.useEffect(() => {
       if (simple && value !== void 0) setCursorMax(value);
     }, [value, simple]);
-    const handleChangeCursorMin = React73.useCallback(
+    const handleChangeCursorMin = React72.useCallback(
       (e) => {
         if (Number(e.target.value) < cursorMax - gap) setCursorMin(Number(e.target.value));
       },
       [cursorMax, cursorMin]
     );
-    const handleChangeCursorMax = React73.useCallback(
+    const handleChangeCursorMax = React72.useCallback(
       (e) => {
         if (Number(e.target.value) >= cursorMin + gap) setCursorMax(Number(e.target.value));
       },
       [cursorMax, cursorMin]
     );
-    const handleMouseUpMin = React73.useCallback(() => {
+    const handleMouseUpMin = React72.useCallback(() => {
       if (onChangeMin) {
         onChangeMin({
           inputName: name,
@@ -5021,7 +4666,7 @@ var Range = React73.forwardRef(
         });
       }
     }, [onChangeMin, name, cursorMin]);
-    const handleMouseUpMax = React73.useCallback(() => {
+    const handleMouseUpMax = React72.useCallback(() => {
       if (onChangeMax && !simple) {
         onChangeMax({
           inputName: name,
@@ -5035,10 +4680,10 @@ var Range = React73.forwardRef(
         });
       }
     }, [onChangeMax, name, cursorMax, onChange, simple]);
-    return /* @__PURE__ */ React73.createElement("div", { ref, id, className: hashClass(styled, (0, import_clsx66.default)("range-container", className)) }, /* @__PURE__ */ React73.createElement("label", { className: hashClass(styled, (0, import_clsx66.default)("range-label")) }, label), /* @__PURE__ */ React73.createElement("div", { className: hashClass(styled, (0, import_clsx66.default)("range")) }, /* @__PURE__ */ React73.createElement("div", { ref: refTrack, className: hashClass(styled, (0, import_clsx66.default)("range-track")) }), !simple && /* @__PURE__ */ React73.createElement(
+    return /* @__PURE__ */ React72.createElement("div", { ref, id, className: hashClass(styled, (0, import_clsx65.default)("range-container", className)) }, /* @__PURE__ */ React72.createElement("label", { className: hashClass(styled, (0, import_clsx65.default)("range-label")) }, label), /* @__PURE__ */ React72.createElement("div", { className: hashClass(styled, (0, import_clsx65.default)("range")) }, /* @__PURE__ */ React72.createElement("div", { ref: refTrack, className: hashClass(styled, (0, import_clsx65.default)("range-track")) }), !simple && /* @__PURE__ */ React72.createElement(
       "input",
       {
-        className: hashClass(styled, (0, import_clsx66.default)("range-cursor range-cursor-min")),
+        className: hashClass(styled, (0, import_clsx65.default)("range-cursor range-cursor-min")),
         onTouchEnd: handleMouseUpMin,
         onMouseUp: handleMouseUpMin,
         onChange: handleChangeCursorMin,
@@ -5050,10 +4695,10 @@ var Range = React73.forwardRef(
         id: `${id}-min`,
         "aria-label": label
       }
-    ), /* @__PURE__ */ React73.createElement(
+    ), /* @__PURE__ */ React72.createElement(
       "input",
       {
-        className: hashClass(styled, (0, import_clsx66.default)("range-cursor", !simple && "range-cursor-max")),
+        className: hashClass(styled, (0, import_clsx65.default)("range-cursor", !simple && "range-cursor-max")),
         onTouchEnd: handleMouseUpMax,
         onMouseUp: handleMouseUpMax,
         onChange: handleChangeCursorMax,
@@ -5065,41 +4710,40 @@ var Range = React73.forwardRef(
         id: `${id}-max`,
         "aria-label": label
       }
-    )), /* @__PURE__ */ React73.createElement("div", { className: hashClass(styled, (0, import_clsx66.default)("range-values")) }, !simple && /* @__PURE__ */ React73.createElement("div", null, /* @__PURE__ */ React73.createElement("span", { className: hashClass(styled, (0, import_clsx66.default)("range-value-min")) }, cursorMin), unit && /* @__PURE__ */ React73.createElement("span", null, " ", unit)), /* @__PURE__ */ React73.createElement("div", null, /* @__PURE__ */ React73.createElement("span", { className: hashClass(styled, (0, import_clsx66.default)(simple ? "range-value" : "range-value-max")) }, cursorMax), unit && /* @__PURE__ */ React73.createElement("span", null, " ", unit))));
+    )), /* @__PURE__ */ React72.createElement("div", { className: hashClass(styled, (0, import_clsx65.default)("range-values")) }, !simple && /* @__PURE__ */ React72.createElement("div", null, /* @__PURE__ */ React72.createElement("span", { className: hashClass(styled, (0, import_clsx65.default)("range-value-min")) }, cursorMin), unit && /* @__PURE__ */ React72.createElement("span", null, " ", unit)), /* @__PURE__ */ React72.createElement("div", null, /* @__PURE__ */ React72.createElement("span", { className: hashClass(styled, (0, import_clsx65.default)(simple ? "range-value" : "range-value-max")) }, cursorMax), unit && /* @__PURE__ */ React72.createElement("span", null, " ", unit))));
   }
 );
 Range.displayName = "Range" /* Range */;
 var Range_default = Range;
 
 // components/rows/Rows.tsx
-var import_clsx67 = __toESM(require("clsx"));
-var React74 = __toESM(require("react"));
-var Rows = React74.forwardRef((_a, ref) => {
-  var _b = _a, { className, id, gap } = _b, others = __objRest(_b, ["className", "id", "gap"]);
+var import_clsx66 = __toESM(require("clsx"));
+var React73 = __toESM(require("react"));
+var Rows = React73.forwardRef(({ className, id, gap, ...others }, ref) => {
   const { styled } = useTrilogyContext();
-  return /* @__PURE__ */ React74.createElement(
+  return /* @__PURE__ */ React73.createElement(
     "div",
-    __spreadValues({
+    {
       ref,
       id,
       className: hashClass(
         styled,
-        (0, import_clsx67.default)("rows", gap && has(`gap-${gap}`), typeof gap !== "undefined" && gap === 0 && is("gapless"), className)
-      )
-    }, others)
+        (0, import_clsx66.default)("rows", gap && has(`gap-${gap}`), typeof gap !== "undefined" && gap === 0 && is("gapless"), className)
+      ),
+      ...others
+    }
   );
 });
 Rows.displayName = "Rows" /* Rows */;
 var Rows_default = Rows;
 
 // components/rows/row/Row.tsx
-var import_clsx68 = __toESM(require("clsx"));
-var React75 = __toESM(require("react"));
-var Row = React75.forwardRef((_a, ref) => {
-  var _b = _a, { className, id, narrow } = _b, others = __objRest(_b, ["className", "id", "narrow"]);
+var import_clsx67 = __toESM(require("clsx"));
+var React74 = __toESM(require("react"));
+var Row = React74.forwardRef(({ className, id, narrow, ...others }, ref) => {
   const { styled } = useTrilogyContext();
-  const classes = hashClass(styled, (0, import_clsx68.default)("row", narrow && is("narrow"), className));
-  return /* @__PURE__ */ React75.createElement("div", __spreadValues({ ref, id, className: classes }, others));
+  const classes = hashClass(styled, (0, import_clsx67.default)("row", narrow && is("narrow"), className));
+  return /* @__PURE__ */ React74.createElement("div", { ref, id, className: classes, ...others });
 });
 Row.displayName = "Row" /* Row */;
 var Row_default = Row;
@@ -5108,9 +4752,9 @@ var Row_default = Row;
 var row_default = Row_default;
 
 // components/scroll-view/ScrollView.tsx
-var import_clsx69 = __toESM(require("clsx"));
-var React76 = __toESM(require("react"));
-var ScrollView = React76.forwardRef(
+var import_clsx68 = __toESM(require("clsx"));
+var React75 = __toESM(require("react"));
+var ScrollView = React75.forwardRef(
   ({ id, scrollDirection, children }, ref) => {
     const { styled } = useTrilogyContext();
     const scrollDirectionClassName = () => {
@@ -5124,23 +4768,22 @@ var ScrollView = React76.forwardRef(
           return "";
       }
     };
-    const classes = hashClass(styled, (0, import_clsx69.default)("scroll-view", scrollDirection && scrollDirectionClassName()));
-    return /* @__PURE__ */ React76.createElement("div", { ref, className: classes, id }, children);
+    const classes = hashClass(styled, (0, import_clsx68.default)("scroll-view", scrollDirection && scrollDirectionClassName()));
+    return /* @__PURE__ */ React75.createElement("div", { ref, className: classes, id }, children);
   }
 );
 ScrollView.displayName = "ScrollView" /* ScrollView */;
 var ScrollView_default = ScrollView;
 
 // components/section/Section.tsx
-var import_clsx70 = __toESM(require("clsx"));
+var import_clsx69 = __toESM(require("clsx"));
 var import_react37 = __toESM(require("react"));
 var Section = import_react37.default.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { className, id, skeleton, backgroundColor, backgroundSrc, inverted } = _b, others = __objRest(_b, ["className", "id", "skeleton", "backgroundColor", "backgroundSrc", "inverted"]);
+  ({ className, id, skeleton, backgroundColor, backgroundSrc, inverted, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     const _className = hashClass(
       styled,
-      (0, import_clsx70.default)(
+      (0, import_clsx69.default)(
         "section",
         className,
         backgroundColor && has(getBackgroundClassName(backgroundColor)),
@@ -5151,14 +4794,15 @@ var Section = import_react37.default.forwardRef(
     );
     return /* @__PURE__ */ import_react37.default.createElement(
       "section",
-      __spreadValues(__spreadProps(__spreadValues({
+      {
         ref,
-        id
-      }, backgroundSrc && {
-        style: { backgroundImage: `url(${backgroundSrc})` }
-      }), {
-        className: _className
-      }), others)
+        id,
+        ...backgroundSrc && {
+          style: { backgroundImage: `url(${backgroundSrc})` }
+        },
+        className: _className,
+        ...others
+      }
     );
   }
 );
@@ -5166,15 +4810,14 @@ Section.displayName = "Section" /* Section */;
 var Section_default = Section;
 
 // components/segment-control/SegmentControl.tsx
-var import_clsx72 = __toESM(require("clsx"));
+var import_clsx71 = __toESM(require("clsx"));
 var import_react39 = __toESM(require("react"));
 
 // components/segment-control/item/SegmentControlItem.tsx
-var import_clsx71 = __toESM(require("clsx"));
+var import_clsx70 = __toESM(require("clsx"));
 var import_react38 = __toESM(require("react"));
 var SegmentControlItem = import_react38.default.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { active, onClick, disabled, className, id, children } = _b, others = __objRest(_b, ["active", "onClick", "disabled", "className", "id", "children"]);
+  ({ active, onClick, disabled, className, id, children, ...others }, ref) => {
     const [activeItem, setActiveItem] = (0, import_react38.useState)(active || false);
     const { styled } = useTrilogyContext();
     (0, import_react38.useEffect)(() => {
@@ -5182,12 +4825,12 @@ var SegmentControlItem = import_react38.default.forwardRef(
     }, [active]);
     return /* @__PURE__ */ import_react38.default.createElement(
       "button",
-      __spreadValues({
+      {
         type: "button",
         ref,
         id,
         disabled,
-        className: hashClass(styled, (0, import_clsx71.default)("segmented-control-item", className, { "is-active": activeItem })),
+        className: hashClass(styled, (0, import_clsx70.default)("segmented-control-item", className, { "is-active": activeItem })),
         onClick: (e) => {
           const target = e.target;
           setActiveItem(active || false);
@@ -5195,8 +4838,9 @@ var SegmentControlItem = import_react38.default.forwardRef(
           if (onClick) {
             onClick(e);
           }
-        }
-      }, others),
+        },
+        ...others
+      },
       children
     );
   }
@@ -5209,10 +4853,9 @@ var item_default5 = SegmentControlItem_default;
 
 // components/segment-control/SegmentControl.tsx
 var SegmentControl = import_react39.default.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { className, id, onClick, children, activeIndex, align } = _b, others = __objRest(_b, ["className", "id", "onClick", "children", "activeIndex", "align"]);
+  ({ className, id, onClick, children, activeIndex, align, ...others }, ref) => {
     const { styled } = useTrilogyContext();
-    const classes = hashClass(styled, (0, import_clsx72.default)("segmented-control", align && getJustifiedClassName(align), className));
+    const classes = hashClass(styled, (0, import_clsx71.default)("segmented-control", align && getJustifiedClassName(align), className));
     const [activateIndex, setActivateIndex] = (0, import_react39.useState)(activeIndex || 0);
     const isActive = (index, childPropsActive) => {
       if (typeof childPropsActive !== "undefined" && !activateIndex) {
@@ -5229,7 +4872,7 @@ var SegmentControl = import_react39.default.forwardRef(
     import_react39.default.useEffect(() => {
       setActivateIndex(activateIndex);
     }, [activateIndex]);
-    return /* @__PURE__ */ import_react39.default.createElement("div", __spreadValues({ ref, id, className: classes }, others), children && Array.isArray(children) && // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return /* @__PURE__ */ import_react39.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,
@@ -5261,7 +4904,7 @@ SegmentControl.displayName = "SegmentControl" /* SegmentControl */;
 var SegmentControl_default = SegmentControl;
 
 // components/select/Select.tsx
-var React83 = __toESM(require("react"));
+var React82 = __toESM(require("react"));
 
 // components/select/context/index.tsx
 var import_react40 = __toESM(require("react"));
@@ -5275,59 +4918,40 @@ var SelectContext = import_react40.default.createContext({
 });
 
 // components/select/web/SelectDynamic.tsx
-var import_clsx73 = __toESM(require("clsx"));
+var import_clsx72 = __toESM(require("clsx"));
 var import_react41 = __toESM(require("react"));
 var import_react_dom = __toESM(require("react-dom"));
 var OPTION_SIZE = 48;
 var SelectDynamic = import_react41.default.forwardRef(
-  (_a, ref) => {
-    var _b = _a, {
-      onChange,
-      disabled,
-      onFocus,
-      onBlur,
-      children,
-      selected,
-      name,
-      id,
-      label,
-      iconName,
-      multiple,
-      className,
-      status,
-      placeholder,
-      required,
-      custom,
-      help,
-      sample
-    } = _b, others = __objRest(_b, [
-      "onChange",
-      "disabled",
-      "onFocus",
-      "onBlur",
-      "children",
-      "selected",
-      "name",
-      "id",
-      "label",
-      "iconName",
-      "multiple",
-      "className",
-      "status",
-      "placeholder",
-      "required",
-      "custom",
-      "help",
-      "sample"
-    ]);
+  ({
+    onChange,
+    disabled,
+    onFocus,
+    onBlur,
+    children,
+    selected,
+    name,
+    id,
+    label,
+    iconName,
+    multiple,
+    className,
+    status,
+    placeholder,
+    required,
+    custom,
+    help,
+    sample,
+    ...others
+  }, ref) => {
     const { styled } = useTrilogyContext();
     const { setIsVisibleOptions, isVisibleOptions, selectedOptionValues } = (0, import_react41.useContext)(SelectContext);
     const containerRef = (0, import_react41.useRef)(null);
     const [openUpward, setOpenUpward] = (0, import_react41.useState)(false);
     const optionsListSize = (0, import_react41.useRef)(0);
     const [dropdownStyles, setDropdownStyles] = (0, import_react41.useState)({});
-    const selectClasses = hashClass(styled, (0, import_clsx73.default)("select", className));
-    const optionsClasses = hashClass(styled, (0, import_clsx73.default)("select-options", openUpward && "select-options-top"));
+    const selectClasses = hashClass(styled, (0, import_clsx72.default)("select", className));
+    const optionsClasses = hashClass(styled, (0, import_clsx72.default)("select-options", openUpward && "select-options-top"));
     const portalClasses = hashClass(styled, "select-trilogy_modal_open");
     const onClickInput = () => {
       if (containerRef.current && optionsListSize.current) {
@@ -5355,14 +4979,14 @@ var SelectDynamic = import_react41.default.forwardRef(
       });
     };
     const options = (0, import_react41.useMemo)(() => {
-      var _a2;
-      return (_a2 = import_react41.default.Children.map(children, (child) => {
+      var _a;
+      return (_a = import_react41.default.Children.map(children, (child) => {
         if (!import_react41.default.isValidElement(child)) return false;
         return {
           label: child.props.children || child.props.label,
           value: child.props.value
         };
-      })) == null ? void 0 : _a2.filter((option) => option);
+      })) == null ? void 0 : _a.filter((option) => option);
     }, []);
     const labelsSelected = (0, import_react41.useMemo)(() => {
       return selectedOptionValues.map((selectedOption) => {
@@ -5376,9 +5000,9 @@ var SelectDynamic = import_react41.default.forwardRef(
         optionsListSize.current = childrenCount * OPTION_SIZE;
       }
     }, [children]);
-    return /* @__PURE__ */ import_react41.default.createElement("div", __spreadValues({ className: selectClasses, ref: containerRef }, others), /* @__PURE__ */ import_react41.default.createElement(
+    return /* @__PURE__ */ import_react41.default.createElement("div", { className: selectClasses, ref: containerRef, ...others }, /* @__PURE__ */ import_react41.default.createElement(
       Input_default,
-      __spreadValues({
+      {
         sample,
         help,
         required,
@@ -5400,16 +5024,18 @@ var SelectDynamic = import_react41.default.forwardRef(
         onKeyUp: (e) => {
           e.preventDefault();
           onKeyPressInput(e.inputKeyCode);
-        }
-      }, { readOnly: true, id, role: "combobox" })
+        },
+        ...{ readOnly: true, id, role: "combobox" }
+      }
     ), /* @__PURE__ */ import_react41.default.createElement(
       "ul",
       {
         role: "listbox",
         className: optionsClasses,
-        style: __spreadValues({
-          display: isVisibleOptions ? "block" : "none"
-        }, dropdownStyles)
+        style: {
+          display: isVisibleOptions ? "block" : "none",
+          ...dropdownStyles
+        }
       },
       children
     ), isVisibleOptions && import_react_dom.default.createPortal(
@@ -5422,71 +5048,53 @@ SelectDynamic.displayName = "Select" /* Select */;
 var SelectDynamic_default = SelectDynamic;
 
 // components/select/web/SelectNative.tsx
-var import_clsx74 = __toESM(require("clsx"));
-var React82 = __toESM(require("react"));
-var SelectNative = React82.forwardRef(
-  (_a, ref) => {
-    var _b = _a, {
-      onChange,
-      disabled,
-      onFocus,
-      onBlur,
-      children,
-      selected,
-      name,
-      id,
-      testId,
-      label,
-      iconName,
-      className,
-      accessibilityLabel,
-      status,
-      required,
-      sample,
-      help
-    } = _b, others = __objRest(_b, [
-      "onChange",
-      "disabled",
-      "onFocus",
-      "onBlur",
-      "children",
-      "selected",
-      "name",
-      "id",
-      "testId",
-      "label",
-      "iconName",
-      "className",
-      "accessibilityLabel",
-      "status",
-      "required",
-      "sample",
-      "help"
-    ]);
+var import_clsx73 = __toESM(require("clsx"));
+var React81 = __toESM(require("react"));
+var SelectNative = React81.forwardRef(
+  ({
+    onChange,
+    disabled,
+    onFocus,
+    onBlur,
+    children,
+    selected,
+    name,
+    id,
+    testId,
+    label,
+    iconName,
+    className,
+    accessibilityLabel,
+    status,
+    required,
+    sample,
+    help,
+    ...others
+  }, ref) => {
     const { styled } = useTrilogyContext();
-    const idHelp = React82.useId();
-    const idSample = React82.useId();
-    const [focused, setIsFocused] = React82.useState(false);
-    const [selectedValues, setSelectedValues] = React82.useState(selected);
-    const selectClasses = hashClass(styled, (0, import_clsx74.default)("select", className));
-    const controlClass = hashClass(styled, (0, import_clsx74.default)("control", iconName && "has-icons-left"));
-    const helpClasses = (0, import_clsx74.default)("help", status && is(status));
-    const handleFocus = React82.useCallback((e) => {
+    const idHelp = React81.useId();
+    const idSample = React81.useId();
+    const [focused, setIsFocused] = React81.useState(false);
+    const [selectedValues, setSelectedValues] = React81.useState(selected);
+    const selectClasses = hashClass(styled, (0, import_clsx73.default)("select", className));
+    const controlClass = hashClass(styled, (0, import_clsx73.default)("control", iconName && "has-icons-left"));
+    const helpClasses = (0, import_clsx73.default)("help", status && is(status));
+    const handleFocus = React81.useCallback((e) => {
       setIsFocused(true);
       onFocus && onFocus(e);
     }, []);
-    const handleBlur = React82.useCallback((e) => {
+    const handleBlur = React81.useCallback((e) => {
       setIsFocused(false);
       onBlur && onBlur(e);
     }, []);
-    React82.useEffect(() => {
+    React81.useEffect(() => {
       setSelectedValues(selected);
     }, [selected]);
-    return /* @__PURE__ */ React82.createElement("div", { className: selectClasses }, /* @__PURE__ */ React82.createElement("div", { className: hashClass(styled, (0, import_clsx74.default)("field", focused && "focus")) }, label && /* @__PURE__ */ React82.createElement("label", { className: hashClass(styled, "input-label"), htmlFor: id }, label, " ", required && /* @__PURE__ */ React82.createElement(Text_default, { markup: "span" /* SPAN */, typo: "has-text-error" /* TEXT_ERROR */ }, "*")), sample && /* @__PURE__ */ React82.createElement(Text_default, { className: "input-sample", level: 2 /* TWO */, id: idSample }, sample), /* @__PURE__ */ React82.createElement("div", { className: controlClass }, /* @__PURE__ */ React82.createElement(
+    return /* @__PURE__ */ React81.createElement("div", { className: selectClasses }, /* @__PURE__ */ React81.createElement("div", { className: hashClass(styled, (0, import_clsx73.default)("field", focused && "focus")) }, label && /* @__PURE__ */ React81.createElement("label", { className: hashClass(styled, "input-label"), htmlFor: id }, label, " ", required && /* @__PURE__ */ React81.createElement(Text_default, { markup: "span" /* SPAN */, typo: "has-text-error" /* TEXT_ERROR */ }, "*")), sample && /* @__PURE__ */ React81.createElement(Text_default, { className: "input-sample", level: 2 /* TWO */, id: idSample }, sample), /* @__PURE__ */ React81.createElement("div", { className: controlClass }, /* @__PURE__ */ React81.createElement(
       "select",
-      __spreadValues({
+      {
         ref,
-        className: hashClass(styled, (0, import_clsx74.default)(!label && "no-label", status && is(status))),
+        className: hashClass(styled, (0, import_clsx73.default)(!label && "no-label", status && is(status))),
         value: selectedValues,
         "aria-label": accessibilityLabel,
         "data-testid": testId,
@@ -5509,32 +5117,33 @@ var SelectNative = React82.forwardRef(
         id: id ? String(id) : void 0,
         name,
         disabled,
-        role: "listbox"
-      }, others),
-      React82.Children.map(children, (child) => {
-        if (!React82.isValidElement(child)) return null;
-        const props = __spreadProps(__spreadValues({}, child.props), {
+        role: "listbox",
+        ...others
+      },
+      React81.Children.map(children, (child) => {
+        if (!React81.isValidElement(child)) return null;
+        const props = {
+          ...child.props,
           native: "true"
-        });
-        return /* @__PURE__ */ React82.createElement(option_default, __spreadValues({}, props));
+        };
+        return /* @__PURE__ */ React81.createElement(option_default, { ...props });
       })
-    ), iconName && /* @__PURE__ */ React82.createElement(Icon_default, { name: iconName, size: "small" })), help && /* @__PURE__ */ React82.createElement(Text_default, { className: helpClasses, id: idHelp }, help)));
+    ), iconName && /* @__PURE__ */ React81.createElement(Icon_default, { name: iconName, size: "small" })), help && /* @__PURE__ */ React81.createElement(Text_default, { className: helpClasses, id: idHelp }, help)));
   }
 );
 SelectNative.displayName = "Select" /* Select */;
 var SelectNative_default = SelectNative;
 
 // components/select/Select.tsx
-var Select = React83.forwardRef((_a, ref) => {
-  var _b = _a, { selected } = _b, props = __objRest(_b, ["selected"]);
-  const [isVisibleOptions, setIsVisibleOptions] = React83.useState(false);
-  const [selectedOptionValues, setSelectedOptionValues] = React83.useState([]);
-  React83.useEffect(() => {
+var Select = React82.forwardRef(({ selected, ...props }, ref) => {
+  const [isVisibleOptions, setIsVisibleOptions] = React82.useState(false);
+  const [selectedOptionValues, setSelectedOptionValues] = React82.useState([]);
+  React82.useEffect(() => {
     const value = typeof selected === "string" || typeof selected === "number" ? [selected] : !selected || selected === null ? [] : selected;
     setSelectedOptionValues(value);
   }, [selected]);
   if (props.custom || props.multiple)
-    return /* @__PURE__ */ React83.createElement(
+    return /* @__PURE__ */ React82.createElement(
       SelectContext.Provider,
       {
         value: {
@@ -5547,23 +5156,22 @@ var Select = React83.forwardRef((_a, ref) => {
           onChange: props.onChange
         }
       },
-      /* @__PURE__ */ React83.createElement(SelectDynamic_default, __spreadValues({ ref, selected }, props))
+      /* @__PURE__ */ React82.createElement(SelectDynamic_default, { ref, selected, ...props })
     );
-  return /* @__PURE__ */ React83.createElement(SelectNative_default, __spreadValues({ ref, selected }, props));
+  return /* @__PURE__ */ React82.createElement(SelectNative_default, { ref, selected, ...props });
 });
 Select.displayName = "Select" /* Select */;
 var Select_default = Select;
 
 // components/select/option/SelectOption.tsx
-var import_clsx75 = __toESM(require("clsx"));
-var React84 = __toESM(require("react"));
-var SelectOption = React84.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { id, className, value = "", disabled, children, onClick, label, iconName, testId } = _b, others = __objRest(_b, ["id", "className", "value", "disabled", "children", "onClick", "label", "iconName", "testId"]);
+var import_clsx74 = __toESM(require("clsx"));
+var React83 = __toESM(require("react"));
+var SelectOption = React83.forwardRef(
+  ({ id, className, value = "", disabled, children, onClick, label, iconName, testId, ...others }, ref) => {
     const { styled } = useTrilogyContext();
-    const { custom, selectedOptionValues, setSelectedOptionValues, multiple, setIsVisibleOptions, onChange } = React84.useContext(SelectContext);
+    const { custom, selectedOptionValues, setSelectedOptionValues, multiple, setIsVisibleOptions, onChange } = React83.useContext(SelectContext);
     const isChecked = selectedOptionValues.includes(value);
-    const selectClasses = hashClass(styled, (0, import_clsx75.default)("option", isChecked && "focus", disabled && is("disabled"), className));
+    const selectClasses = hashClass(styled, (0, import_clsx74.default)("option", isChecked && "focus", disabled && is("disabled"), className));
     const handleClickOption = () => {
       setSelectedOptionValues((prev) => {
         const isInclude = prev.includes(value);
@@ -5583,9 +5191,9 @@ var SelectOption = React84.forwardRef(
       if (!multiple) setIsVisibleOptions(false);
     };
     if (custom || multiple) {
-      return /* @__PURE__ */ React84.createElement(
+      return /* @__PURE__ */ React83.createElement(
         "li",
-        __spreadValues({
+        {
           ref,
           id,
           className: selectClasses,
@@ -5593,15 +5201,16 @@ var SelectOption = React84.forwardRef(
           role: "option",
           "aria-selected": isChecked,
           "data-value": value,
-          onClick: !disabled ? handleClickOption : void 0
-        }, others),
-        iconName && /* @__PURE__ */ React84.createElement(Icon_default, { name: iconName }),
+          onClick: !disabled ? handleClickOption : void 0,
+          ...others
+        },
+        iconName && /* @__PURE__ */ React83.createElement(Icon_default, { name: iconName }),
         label || children
       );
     }
-    return /* @__PURE__ */ React84.createElement(
+    return /* @__PURE__ */ React83.createElement(
       "option",
-      __spreadValues({
+      {
         ref,
         role: "option",
         id,
@@ -5609,8 +5218,9 @@ var SelectOption = React84.forwardRef(
         disabled,
         "aria-label": label,
         "data-testid": testId,
-        onClick
-      }, others),
+        onClick,
+        ...others
+      },
       children || label
     );
   }
@@ -5628,11 +5238,27 @@ var SelectStatus = /* @__PURE__ */ ((SelectStatus2) => {
   return SelectStatus2;
 })(SelectStatus || {});
 
+// components/spacer/Spacer.tsx
+var import_clsx75 = __toESM(require("clsx"));
+var React84 = __toESM(require("react"));
+var Spacer = React84.forwardRef(({ size: size2, horizontal, className, id }, ref) => {
+  const { styled } = useTrilogyContext();
+  const styles = {
+    spacer: {
+      marginLeft: horizontal ? `${size2}px` : "0px",
+      marginTop: !horizontal ? `${size2}px` : "0px"
+    }
+  };
+  const classes = hashClass(styled, (0, import_clsx75.default)(className));
+  return /* @__PURE__ */ React84.createElement("div", { ref, id, style: styles.spacer, className: classes });
+});
+Spacer.displayName = "Spacer" /* Spacer */;
+var Spacer_default = Spacer;
+
 // components/stepper/Stepper.tsx
 var import_clsx76 = __toESM(require("clsx"));
 var React85 = __toESM(require("react"));
-var Stepper = React85.forwardRef((_a, ref) => {
-  var _b = _a, { className, id, children } = _b, others = __objRest(_b, ["className", "id", "children"]);
+var Stepper = React85.forwardRef(({ className, id, children, ...others }, ref) => {
   const { styled } = useTrilogyContext();
   const classes = hashClass(styled, (0, import_clsx76.default)("stepper-wrapper", className));
   const [currentStep, setCurrentStep] = React85.useState(1);
@@ -5646,8 +5272,8 @@ var Stepper = React85.forwardRef((_a, ref) => {
       if (Array.isArray(children)) {
         let haveCurrentStep = false;
         children.map((child, index) => {
-          var _a2;
-          if ((_a2 = child == null ? void 0 : child.props) == null ? void 0 : _a2.current) {
+          var _a;
+          if ((_a = child == null ? void 0 : child.props) == null ? void 0 : _a.current) {
             haveCurrentStep = true;
             setCurrentStep(index + 1);
           }
@@ -5658,7 +5284,7 @@ var Stepper = React85.forwardRef((_a, ref) => {
       }
     }
   }, [children]);
-  return /* @__PURE__ */ React85.createElement("div", __spreadValues({ ref, id, className: classes }, others), children, /* @__PURE__ */ React85.createElement("div", { className: "step-count" }, /* @__PURE__ */ React85.createElement(Text_default, null, currentStep, "/", nbChild)));
+  return /* @__PURE__ */ React85.createElement("div", { ref, id, className: classes, ...others }, children, /* @__PURE__ */ React85.createElement("div", { className: "step-count" }, /* @__PURE__ */ React85.createElement(Text_default, null, currentStep, "/", nbChild)));
 });
 Stepper.displayName = "Stepper" /* Stepper */;
 var Stepper_default = Stepper;
@@ -5667,8 +5293,7 @@ var Stepper_default = Stepper;
 var import_clsx77 = __toESM(require("clsx"));
 var import_react42 = __toESM(require("react"));
 var Step = import_react42.default.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { className, id, active, current, done, label, iconName, error } = _b, others = __objRest(_b, ["className", "id", "active", "current", "done", "label", "iconName", "error"]);
+  ({ className, id, active, current, done, label, iconName, error, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     const classesStepLabel = hashClass(styled, (0, import_clsx77.default)("step-label"));
     const classes = hashClass(
@@ -5682,7 +5307,7 @@ var Step = import_react42.default.forwardRef(
         className
       )
     );
-    return /* @__PURE__ */ import_react42.default.createElement("div", __spreadValues({ ref, id, className: classes, "data-label": label }, others), /* @__PURE__ */ import_react42.default.createElement("div", { className: classesStepLabel }, label, !done && iconName && /* @__PURE__ */ import_react42.default.createElement(Icon_default, { name: iconName && iconName, className: "step-icon", size: "medium" /* MEDIUM */ })));
+    return /* @__PURE__ */ import_react42.default.createElement("div", { ref, id, className: classes, "data-label": label, ...others }, /* @__PURE__ */ import_react42.default.createElement("div", { className: classesStepLabel }, label, !done && iconName && /* @__PURE__ */ import_react42.default.createElement(Icon_default, { name: iconName && iconName, className: "step-icon", size: "medium" /* MEDIUM */ })));
   }
 );
 Step.displayName = "Step" /* Step */;
@@ -5704,36 +5329,22 @@ var StepMarkup = /* @__PURE__ */ ((StepMarkup2) => {
 var import_clsx78 = __toESM(require("clsx"));
 var import_react43 = __toESM(require("react"));
 var Switch = import_react43.default.forwardRef(
-  (_a, ref) => {
-    var _b = _a, {
-      className,
-      id = import_react43.default.useId(),
-      label,
-      value,
-      checked,
-      onChange,
-      onClick,
-      status,
-      disabled,
-      readonly,
-      name,
-      reversed,
-      fullWidth
-    } = _b, others = __objRest(_b, [
-      "className",
-      "id",
-      "label",
-      "value",
-      "checked",
-      "onChange",
-      "onClick",
-      "status",
-      "disabled",
-      "readonly",
-      "name",
-      "reversed",
-      "fullWidth"
-    ]);
+  ({
+    className,
+    id = import_react43.default.useId(),
+    label,
+    value,
+    checked,
+    onChange,
+    onClick,
+    status,
+    disabled,
+    readonly,
+    name,
+    reversed,
+    fullWidth,
+    ...others
+  }, ref) => {
     const [_checked, setChecked] = (0, import_react43.useState)(checked || false);
     const { styled } = useTrilogyContext();
     import_react43.default.useEffect(() => {
@@ -5755,7 +5366,7 @@ var Switch = import_react43.default.forwardRef(
       },
       /* @__PURE__ */ import_react43.default.createElement(
         "input",
-        __spreadValues({
+        {
           onChange: (e) => {
             if (!readonly) {
               setChecked(!_checked);
@@ -5785,8 +5396,9 @@ var Switch = import_react43.default.forwardRef(
           id: `switch-${id}`,
           type: "checkbox",
           disabled,
-          className: hashClass(styled, (0, import_clsx78.default)(status && is(getStatusClassName(status))))
-        }, others)
+          className: hashClass(styled, (0, import_clsx78.default)(status && is(getStatusClassName(status)))),
+          ...others
+        }
       ),
       /* @__PURE__ */ import_react43.default.createElement("label", { htmlFor: `switch-${id}` }, label)
     );
@@ -5808,22 +5420,15 @@ var TableBorderEnum = /* @__PURE__ */ ((TableBorderEnum2) => {
 })(TableBorderEnum || {});
 
 // components/table/Table.tsx
-var Table = React88.forwardRef((_a, ref) => {
-  var _b = _a, {
-    className,
-    id,
-    fullwidth,
-    border = "lines" /* LINES */,
-    striped,
-    compact
-  } = _b, others = __objRest(_b, [
-    "className",
-    "id",
-    "fullwidth",
-    "border",
-    "striped",
-    "compact"
-  ]);
+var Table = React88.forwardRef(({
+  className,
+  id,
+  fullwidth,
+  border = "lines" /* LINES */,
+  striped,
+  compact,
+  ...others
+}, ref) => {
   const { styled } = useTrilogyContext();
   const classes = hashClass(
     styled,
@@ -5836,7 +5441,7 @@ var Table = React88.forwardRef((_a, ref) => {
       className
     )
   );
-  return /* @__PURE__ */ React88.createElement("table", __spreadValues({ ref, id, className: classes }, others));
+  return /* @__PURE__ */ React88.createElement("table", { ref, id, className: classes, ...others });
 });
 Table.displayName = "Table" /* Table */;
 var Table_default = Table;
@@ -5844,8 +5449,7 @@ var Table_default = Table;
 // components/table/head/TableHead.tsx
 var React89 = __toESM(require("react"));
 var import_clsx80 = __toESM(require("clsx"));
-var TableHead = React89.forwardRef((_a, ref) => {
-  var _b = _a, { className, id, color, backgroundColor } = _b, others = __objRest(_b, ["className", "id", "color", "backgroundColor"]);
+var TableHead = React89.forwardRef(({ className, id, color, backgroundColor, ...others }, ref) => {
   const { styled } = useTrilogyContext();
   const classes = hashClass(
     styled,
@@ -5855,7 +5459,7 @@ var TableHead = React89.forwardRef((_a, ref) => {
       color && is(getColorClassName(color))
     )
   );
-  return /* @__PURE__ */ React89.createElement("thead", __spreadValues({ ref, id, className: classes }, others));
+  return /* @__PURE__ */ React89.createElement("thead", { ref, id, className: classes, ...others });
 });
 TableHead.displayName = "TableHead" /* TableHead */;
 var TableHead_default = TableHead;
@@ -5866,8 +5470,7 @@ var head_default = TableHead_default;
 // components/table/body/TableBody.tsx
 var React90 = __toESM(require("react"));
 var import_clsx81 = __toESM(require("clsx"));
-var TableBody = React90.forwardRef((_a, ref) => {
-  var _b = _a, { className, id, color, backgroundColor } = _b, others = __objRest(_b, ["className", "id", "color", "backgroundColor"]);
+var TableBody = React90.forwardRef(({ className, id, color, backgroundColor, ...others }, ref) => {
   const { styled } = useTrilogyContext();
   const classes = hashClass(
     styled,
@@ -5877,7 +5480,7 @@ var TableBody = React90.forwardRef((_a, ref) => {
       color && is(getColorClassName(color))
     )
   );
-  return /* @__PURE__ */ React90.createElement("tbody", __spreadValues({ ref, id, className: classes }, others));
+  return /* @__PURE__ */ React90.createElement("tbody", { ref, id, className: classes, ...others });
 });
 TableBody.displayName = "TableBody" /* TableBody */;
 var TableBody_default = TableBody;
@@ -5888,11 +5491,10 @@ var body_default = TableBody_default;
 // components/table/th/TableTh.tsx
 var React91 = __toESM(require("react"));
 var import_clsx82 = __toESM(require("clsx"));
-var TableTh = React91.forwardRef((_a, ref) => {
-  var _b = _a, { className, id, colSpan, rowSpan } = _b, others = __objRest(_b, ["className", "id", "colSpan", "rowSpan"]);
+var TableTh = React91.forwardRef(({ className, id, colSpan, rowSpan, ...others }, ref) => {
   const { styled } = useTrilogyContext();
   const classes = hashClass(styled, (0, import_clsx82.default)(className));
-  return /* @__PURE__ */ React91.createElement("th", __spreadValues({ ref, id, className: classes, colSpan, rowSpan }, others));
+  return /* @__PURE__ */ React91.createElement("th", { ref, id, className: classes, colSpan, rowSpan, ...others });
 });
 TableTh.displayName = "TableTh" /* TableTh */;
 var TableTh_default = TableTh;
@@ -5903,22 +5505,15 @@ var th_default = TableTh_default;
 // components/table/tr/TableTr.tsx
 var React92 = __toESM(require("react"));
 var import_clsx83 = __toESM(require("clsx"));
-var TableTr = React92.forwardRef((_a, ref) => {
-  var _b = _a, {
-    className,
-    id,
-    expandable,
-    expanded,
-    expansion,
-    color
-  } = _b, others = __objRest(_b, [
-    "className",
-    "id",
-    "expandable",
-    "expanded",
-    "expansion",
-    "color"
-  ]);
+var TableTr = React92.forwardRef(({
+  className,
+  id,
+  expandable,
+  expanded,
+  expansion,
+  color,
+  ...others
+}, ref) => {
   const { styled } = useTrilogyContext();
   const classes = hashClass(
     styled,
@@ -5930,7 +5525,7 @@ var TableTr = React92.forwardRef((_a, ref) => {
       color && getColorClassName(color)
     )
   );
-  return /* @__PURE__ */ React92.createElement("tr", __spreadValues({ ref, id, className: classes }, others));
+  return /* @__PURE__ */ React92.createElement("tr", { ref, id, className: classes, ...others });
 });
 TableTr.displayName = "TableTr" /* TableTr */;
 var TableTr_default = TableTr;
@@ -5941,11 +5536,10 @@ var tr_default = TableTr_default;
 // components/table/td/TableTd.tsx
 var React93 = __toESM(require("react"));
 var import_clsx84 = __toESM(require("clsx"));
-var TableTd = React93.forwardRef((_a, ref) => {
-  var _b = _a, { className, id, rowSpan, colSpan } = _b, others = __objRest(_b, ["className", "id", "rowSpan", "colSpan"]);
+var TableTd = React93.forwardRef(({ className, id, rowSpan, colSpan, ...others }, ref) => {
   const { styled } = useTrilogyContext();
   const classes = hashClass(styled, (0, import_clsx84.default)(className));
-  return /* @__PURE__ */ React93.createElement("td", __spreadValues({ ref, id, className: classes, rowSpan, colSpan }, others));
+  return /* @__PURE__ */ React93.createElement("td", { ref, id, className: classes, rowSpan, colSpan, ...others });
 });
 TableTd.displayName = "TableTd" /* TableTd */;
 var TableTd_default = TableTd;
@@ -5999,13 +5593,12 @@ var Tabs_default = Tabs;
 // components/tabs/tab-panels/tab-panel/TabPanel.tsx
 var import_clsx86 = __toESM(require("clsx"));
 var import_react46 = __toESM(require("react"));
-var TabPanel = import_react46.default.forwardRef((_a, ref) => {
-  var _b = _a, { children, className, testId } = _b, others = __objRest(_b, ["children", "className", "testId"]);
+var TabPanel = import_react46.default.forwardRef(({ children, className, testId, ...others }, ref) => {
   const { styled } = useTrilogyContext();
-  const _a2 = others, { index } = _a2, props = __objRest(_a2, ["index"]);
+  const { index, ...props } = others;
   const { activeIndex } = import_react46.default.useContext(TabsContext);
   const classes = hashClass(styled, (0, import_clsx86.default)("tab-panel", index === activeIndex && is("active"), className));
-  return /* @__PURE__ */ import_react46.default.createElement("div", __spreadValues({ ref, "data-testid": testId, className: classes }, props), children);
+  return /* @__PURE__ */ import_react46.default.createElement("div", { ref, "data-testid": testId, className: classes, ...props }, children);
 });
 TabPanel.displayName = "TabPanel" /* TabPanel */;
 var TabPanel_default = TabPanel;
@@ -6017,13 +5610,12 @@ var tab_panel_default = TabPanel_default;
 var import_clsx87 = __toESM(require("clsx"));
 var import_react47 = __toESM(require("react"));
 var TabPanels = import_react47.default.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { children, className, id, testId } = _b, others = __objRest(_b, ["children", "className", "id", "testId"]);
+  ({ children, className, id, testId, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     const classes = hashClass(styled, (0, import_clsx87.default)("tab-panels", className));
-    return /* @__PURE__ */ import_react47.default.createElement("div", __spreadValues({ ref, id, "data-testid": testId, className: classes }, others), import_react47.default.Children.map(children, (child, index) => {
+    return /* @__PURE__ */ import_react47.default.createElement("div", { ref, id, "data-testid": testId, className: classes, ...others }, import_react47.default.Children.map(children, (child, index) => {
       if (!import_react47.default.isValidElement(child)) return false;
-      return /* @__PURE__ */ import_react47.default.createElement(tab_panel_default, __spreadProps(__spreadValues({}, child.props), { index }));
+      return /* @__PURE__ */ import_react47.default.createElement(tab_panel_default, { ...child.props, index });
     }));
   }
 );
@@ -6034,10 +5626,9 @@ var TabPanels_default = TabPanels;
 var import_clsx88 = __toESM(require("clsx"));
 var import_react48 = __toESM(require("react"));
 var Tab = import_react48.default.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { active, className, onClick, routerLink = "a", iconName, label, disabled, testId, ariaControls } = _b, others = __objRest(_b, ["active", "className", "onClick", "routerLink", "iconName", "label", "disabled", "testId", "ariaControls"]);
+  ({ active, className, onClick, routerLink = "a", iconName, label, disabled, testId, ariaControls, ...others }, ref) => {
     const { styled } = useTrilogyContext();
-    const _a2 = others, { index } = _a2, props = __objRest(_a2, ["index"]);
+    const { index, ...props } = others;
     const { activeIndex, setActiveIndex, small } = import_react48.default.useContext(TabsContext);
     const Tag2 = others.href || others.to ? routerLink : "button";
     const isActive = import_react48.default.useMemo(() => activeIndex === index, [activeIndex, index]);
@@ -6056,7 +5647,7 @@ var Tab = import_react48.default.forwardRef(
     }, [active, setActiveIndex, index]);
     return /* @__PURE__ */ import_react48.default.createElement(
       Tag2,
-      __spreadValues({
+      {
         ref,
         "aria-controls": ariaControls,
         "aria-disabled": disabled,
@@ -6067,8 +5658,9 @@ var Tab = import_react48.default.forwardRef(
         role: "tab",
         "data-testid": testId,
         "data-index": index,
-        onClick: handleClick
-      }, props),
+        onClick: handleClick,
+        ...props
+      },
       /* @__PURE__ */ import_react48.default.createElement("div", { className: hashClass(styled, "tab-icon") }, iconName && /* @__PURE__ */ import_react48.default.createElement(Icon_default, { size: small ? "small" : "medium", name: iconName })),
       label && /* @__PURE__ */ import_react48.default.createElement(Text_default, null, label)
     );
@@ -6081,8 +5673,7 @@ var Tab_default = Tab;
 var import_clsx89 = __toESM(require("clsx"));
 var import_react49 = __toESM(require("react"));
 var TabList = import_react49.default.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { children, className, id, testId, align } = _b, others = __objRest(_b, ["children", "className", "id", "testId", "align"]);
+  ({ children, className, id, testId, align, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     const TabListRef = import_react49.default.useRef(null);
     const tabRefs = import_react49.default.useRef([]);
@@ -6106,21 +5697,22 @@ var TabList = import_react49.default.forwardRef(
         if (!import_react49.default.isValidElement(child)) return false;
         return /* @__PURE__ */ import_react49.default.createElement(
           Tab_default,
-          __spreadValues({
+          {
             ref: (el) => tabRefs.current[index] = el == null ? void 0 : el.getBoundingClientRect(),
-            index
-          }, child.props)
+            index,
+            ...child.props
+          }
         );
       });
     }, [children, tabRefs]);
     const scrollWithArrow = import_react49.default.useCallback(
       (direction) => {
-        var _a2;
+        var _a;
         if (tabRefs.current) {
           const firstGap = tabRefs.current[0].x;
           const nextTab = tabFocused + direction;
           const nextPosition = tabRefs.current[nextTab === -1 ? 0 : nextTab];
-          nextPosition && ((_a2 = TabListRef.current) == null ? void 0 : _a2.scrollTo({ left: nextPosition.x - firstGap, behavior: "smooth" }));
+          nextPosition && ((_a = TabListRef.current) == null ? void 0 : _a.scrollTo({ left: nextPosition.x - firstGap, behavior: "smooth" }));
         }
       },
       [tabRefs.current, tabFocused, TabListRef]
@@ -6158,14 +5750,15 @@ var TabList = import_react49.default.forwardRef(
     }, [TabListRef, setWidths]);
     return /* @__PURE__ */ import_react49.default.createElement(
       "div",
-      __spreadValues({
+      {
         ref: TabListRef,
         id,
         "data-testid": testId,
         "data-tablist": "",
         className: classes,
-        onScroll: handleScrollList
-      }, others),
+        onScroll: handleScrollList,
+        ...others
+      },
       isVisibleArrowLeft && /* @__PURE__ */ import_react49.default.createElement(
         Icon_default,
         {
@@ -6197,8 +5790,7 @@ var TabList_default = TabList;
 var import_clsx90 = __toESM(require("clsx"));
 var import_react50 = __toESM(require("react"));
 var Tag = import_react50.default.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { label, className, id, variant, inverted, small, iconName } = _b, others = __objRest(_b, ["label", "className", "id", "variant", "inverted", "small", "iconName"]);
+  ({ label, className, id, variant, inverted, small, iconName, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     const tagClassNames = hashClass(
       styled,
@@ -6214,7 +5806,7 @@ var Tag = import_react50.default.forwardRef(
       styled,
       (0, import_clsx90.default)(variant && is(getColorClassName(variant)))
     );
-    return /* @__PURE__ */ import_react50.default.createElement("span", __spreadValues({ ref, id, className: tagClassNames }, others), iconName && /* @__PURE__ */ import_react50.default.createElement(Icon_default, { className: tagIconClassNames, name: iconName }), label);
+    return /* @__PURE__ */ import_react50.default.createElement("span", { ref, id, className: tagClassNames, ...others }, iconName && /* @__PURE__ */ import_react50.default.createElement(Icon_default, { className: tagIconClassNames, name: iconName }), label);
   }
 );
 Tag.displayName = "Tag" /* Tag */;
@@ -6223,19 +5815,19 @@ var Tag_default = Tag;
 // components/tag/list/TagList.tsx
 var import_clsx91 = __toESM(require("clsx"));
 var React101 = __toESM(require("react"));
-var TagList = React101.forwardRef((_a, ref) => {
-  var _b = _a, { className, id, align, marginless } = _b, others = __objRest(_b, ["className", "id", "align", "marginless"]);
+var TagList = React101.forwardRef(({ className, id, align, marginless, ...others }, ref) => {
   const { styled } = useTrilogyContext();
   return /* @__PURE__ */ React101.createElement(
     "div",
-    __spreadValues({
+    {
       ref,
       id,
       className: hashClass(
         styled,
         (0, import_clsx91.default)("tags", align && is(getJustifiedClassName(align)), marginless && is("marginless"), className)
-      )
-    }, others)
+      ),
+      ...others
+    }
   );
 });
 TagList.displayName = "TagList" /* TagList */;
@@ -6257,44 +5849,26 @@ var TagVariant = /* @__PURE__ */ ((TagVariant2) => {
 var import_clsx92 = __toESM(require("clsx"));
 var import_react51 = __toESM(require("react"));
 var Textarea = import_react51.default.forwardRef(
-  (_a, ref) => {
-    var _b = _a, {
-      className,
-      id,
-      sample,
-      required,
-      disabled,
-      onChange,
-      placeholder,
-      defaultValue,
-      help,
-      status,
-      dynamicPlaceholder = true,
-      rows,
-      label,
-      maxLength,
-      minLength,
-      iconNameLeft,
-      iconNameRight
-    } = _b, others = __objRest(_b, [
-      "className",
-      "id",
-      "sample",
-      "required",
-      "disabled",
-      "onChange",
-      "placeholder",
-      "defaultValue",
-      "help",
-      "status",
-      "dynamicPlaceholder",
-      "rows",
-      "label",
-      "maxLength",
-      "minLength",
-      "iconNameLeft",
-      "iconNameRight"
-    ]);
+  ({
+    className,
+    id,
+    sample,
+    required,
+    disabled,
+    onChange,
+    placeholder,
+    defaultValue,
+    help,
+    status,
+    dynamicPlaceholder = true,
+    rows,
+    label,
+    maxLength,
+    minLength,
+    iconNameLeft,
+    iconNameRight,
+    ...others
+  }, ref) => {
     const [value, setValue] = (0, import_react51.useState)(defaultValue || "");
     const { styled } = useTrilogyContext();
     (0, import_react51.useEffect)(() => {
@@ -6310,7 +5884,7 @@ var Textarea = import_react51.default.forwardRef(
     );
     return /* @__PURE__ */ import_react51.default.createElement("div", { id, className: wrapperClasses }, label && /* @__PURE__ */ import_react51.default.createElement("label", { className: hashClass(styled, "textarea-label"), htmlFor: id }, label, " ", required && /* @__PURE__ */ import_react51.default.createElement(Text_default, { markup: "span" /* SPAN */, typo: "has-text-error" /* TEXT_ERROR */ }, "*")), sample && /* @__PURE__ */ import_react51.default.createElement(Text_default, { className: "input-sample", level: 2 /* TWO */, id }, sample), /* @__PURE__ */ import_react51.default.createElement("div", { className: controlClasses }, /* @__PURE__ */ import_react51.default.createElement(
       "textarea",
-      __spreadValues({
+      {
         ref,
         minLength,
         disabled,
@@ -6328,8 +5902,9 @@ var Textarea = import_react51.default.forwardRef(
         placeholder,
         rows,
         maxLength,
-        required
-      }, others)
+        required,
+        ...others
+      }
     ), iconNameLeft && /* @__PURE__ */ import_react51.default.createElement(Icon_default, { name: iconNameLeft, size: "small", className: "icon-left" }), iconNameRight && /* @__PURE__ */ import_react51.default.createElement(Icon_default, { name: iconNameRight, size: "small", className: "icon-right" }), maxLength && /* @__PURE__ */ import_react51.default.createElement("div", { className: counterClasses }, `${value.length}/${maxLength == null ? void 0 : maxLength.toString()}`)), help && /* @__PURE__ */ import_react51.default.createElement(Text_default, { className: helpClasses }, help));
   }
 );
@@ -6340,14 +5915,13 @@ var Textarea_default = Textarea;
 var import_clsx93 = __toESM(require("clsx"));
 var React103 = __toESM(require("react"));
 var TimelineContent = React103.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { children, className, id, heading, content, linkLabel, linkTo } = _b, others = __objRest(_b, ["children", "className", "id", "heading", "content", "linkLabel", "linkTo"]);
+  ({ children, className, id, heading, content, linkLabel, linkTo, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     const classes = hashClass(styled, (0, import_clsx93.default)("timeline-content", className));
     if (children) {
-      return /* @__PURE__ */ React103.createElement("div", __spreadValues({ ref, id, className: classes }, others), children);
+      return /* @__PURE__ */ React103.createElement("div", { ref, id, className: classes, ...others }, children);
     }
-    return /* @__PURE__ */ React103.createElement("div", __spreadValues({ ref, id, className: classes }, others), heading && /* @__PURE__ */ React103.createElement(Text_default, { markup: "p" /* P */ }, heading), content && /* @__PURE__ */ React103.createElement(Text_default, { className: "main-content", markup: "p" /* P */ }, content), linkTo && linkLabel && /* @__PURE__ */ React103.createElement(Link_default, { href: linkTo }, linkLabel));
+    return /* @__PURE__ */ React103.createElement("div", { ref, id, className: classes, ...others }, heading && /* @__PURE__ */ React103.createElement(Text_default, { markup: "p" /* P */ }, heading), content && /* @__PURE__ */ React103.createElement(Text_default, { className: "main-content", markup: "p" /* P */ }, content), linkTo && linkLabel && /* @__PURE__ */ React103.createElement(Link_default, { href: linkTo }, linkLabel));
   }
 );
 TimelineContent.displayName = "TimelineContent" /* TimelineContent */;
@@ -6360,14 +5934,13 @@ var content_default3 = TimelineContent_default;
 var import_clsx94 = __toESM(require("clsx"));
 var React104 = __toESM(require("react"));
 var TimelineItem = React104.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { className, id, done, active, cancel } = _b, others = __objRest(_b, ["className", "id", "done", "active", "cancel"]);
+  ({ className, id, done, active, cancel, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     const classes = hashClass(
       styled,
       (0, import_clsx94.default)("timeline-item", done && "done", active && "active", cancel && "cancel", className)
     );
-    return /* @__PURE__ */ React104.createElement("div", __spreadValues({ ref, id, className: classes }, others));
+    return /* @__PURE__ */ React104.createElement("div", { ref, id, className: classes, ...others });
   }
 );
 TimelineItem.displayName = "TimelineItem" /* TimelineItem */;
@@ -6380,12 +5953,11 @@ var item_default6 = TimelineItem_default;
 var import_clsx95 = __toESM(require("clsx"));
 var React105 = __toESM(require("react"));
 var TimelineMarker = React105.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { className, id, iconClassname, iconName } = _b, others = __objRest(_b, ["className", "id", "iconClassname", "iconName"]);
+  ({ className, id, iconClassname, iconName, ...others }, ref) => {
     const { styled } = useTrilogyContext();
     const classes = hashClass(styled, (0, import_clsx95.default)("timeline-marker", is("icon"), className));
     const iconClasses = (0, import_clsx95.default)(iconClassname);
-    return /* @__PURE__ */ React105.createElement("div", __spreadValues({ ref, id, className: classes }, others), /* @__PURE__ */ React105.createElement("div", { className: "card-header-icon" }, /* @__PURE__ */ React105.createElement(Icon_default, { className: iconClasses, name: iconName, size: "small" /* SMALL */ })));
+    return /* @__PURE__ */ React105.createElement("div", { ref, id, className: classes, ...others }, /* @__PURE__ */ React105.createElement("div", { className: "card-header-icon" }, /* @__PURE__ */ React105.createElement(Icon_default, { className: iconClasses, name: iconName, size: "small" /* SMALL */ })));
   }
 );
 TimelineMarker.displayName = "TimelineMarker" /* TimelineMarker */;
@@ -6397,11 +5969,10 @@ var marker_default = TimelineMarker_default;
 // components/timeline/Timeline.tsx
 var import_clsx96 = __toESM(require("clsx"));
 var React106 = __toESM(require("react"));
-var Timeline = React106.forwardRef((_a, ref) => {
-  var _b = _a, { className, id, horizontal } = _b, others = __objRest(_b, ["className", "id", "horizontal"]);
+var Timeline = React106.forwardRef(({ className, id, horizontal, ...others }, ref) => {
   const { styled } = useTrilogyContext();
   const classes = hashClass(styled, (0, import_clsx96.default)("timeline", horizontal && is("horizontal"), className));
-  return /* @__PURE__ */ React106.createElement("div", __spreadValues({ ref, id, className: classes }, others));
+  return /* @__PURE__ */ React106.createElement("div", { ref, id, className: classes, ...others });
 });
 Timeline.displayName = "Timeline" /* Timeline */;
 var Timeline_default = Timeline;
@@ -6434,36 +6005,22 @@ var ViewMarkup = /* @__PURE__ */ ((ViewMarkup2) => {
 
 // components/view/View.tsx
 var View = React107.forwardRef(
-  (_a, ref) => {
-    var _b = _a, {
-      children,
-      style,
-      className,
-      loading,
-      onClick,
-      backgroundColor,
-      backgroundSrc,
-      inverted,
-      fullwidth = true,
-      markup,
-      flexable,
-      justify,
-      align
-    } = _b, others = __objRest(_b, [
-      "children",
-      "style",
-      "className",
-      "loading",
-      "onClick",
-      "backgroundColor",
-      "backgroundSrc",
-      "inverted",
-      "fullwidth",
-      "markup",
-      "flexable",
-      "justify",
-      "align"
-    ]);
+  ({
+    children,
+    style,
+    className,
+    loading,
+    onClick,
+    backgroundColor,
+    backgroundSrc,
+    inverted,
+    fullwidth = true,
+    markup,
+    flexable,
+    justify,
+    align,
+    ...others
+  }, ref) => {
     const { styled } = useTrilogyContext();
     const isCorrectMarkup2 = (stringMarkup) => {
       if (stringMarkup in ViewMarkup || Object.values(ViewMarkup).includes(stringMarkup)) return true;
@@ -6486,18 +6043,20 @@ var View = React107.forwardRef(
     );
     return /* @__PURE__ */ React107.createElement(
       Tag2,
-      __spreadValues(__spreadValues({
+      {
         ref,
         onClick,
         style,
-        className: classes
-      }, backgroundSrc && {
-        style: {
-          backgroundImage: `url(${backgroundSrc})`,
-          backgroundSize: "cover",
-          backgroundPosition: "50%"
-        }
-      }), others),
+        className: classes,
+        ...backgroundSrc && {
+          style: {
+            backgroundImage: `url(${backgroundSrc})`,
+            backgroundSize: "cover",
+            backgroundPosition: "50%"
+          }
+        },
+        ...others
+      },
       children
     );
   }
@@ -6527,7 +6086,7 @@ var JustifyContent = /* @__PURE__ */ ((JustifyContent2) => {
 var import_react52 = __toESM(require("react"));
 
 // version.ts
-var version = "0.0.4-esm-cjs";
+var version = "0.0.5-esm-cjs";
 
 // version.json
 var version_default = {