@trilogy-ds/react 0.0.27-esm-cjs → 0.0.29-esm-cjs

package/lib/{chunk-UQ3F7A5F.mjs → chunk-2FNMU5IX.mjs}

@@ -1,16 +1,16 @@
 "use client";
 import {
   Calendar_native_default
-} from "./chunk-46ZZN4H7.mjs";
+} from "./chunk-ZJ42PVHE.mjs";
 import {
   Text_native_default
-} from "./chunk-D7RPS4TQ.mjs";
+} from "./chunk-BKAHLA6T.mjs";
 import {
   Icon_native_default
-} from "./chunk-TRGKFKYP.mjs";
+} from "./chunk-5XWBQO3M.mjs";
 import {
   getColorStyle
-} from "./chunk-JZARKY6T.mjs";
+} from "./chunk-A2OOIRKG.mjs";
 
 // components/datepicker/DatePicker.native.tsx
 import React, { forwardRef, useCallback, useEffect, useRef, useState } from "react";
@@ -234,7 +234,7 @@ var DatePicker = forwardRef(
         alignItems: "center",
         backgroundColor: disabled ? getColorStyle("DISABLED_FADE" /* DISABLED_FADE */) : getColorStyle("WHITE" /* BACKGROUND */),
         borderWidth: isFocused ? 2 : 1,
-        borderColor: status === "success" && getColorStyle("SUCCESS" /* SUCCESS */) || status === "warning" && getColorStyle("WARNING" /* WARNING */) || status === "error" && getColorStyle("ERROR" /* ERROR */) || isFocused && getColorStyle("MAIN" /* MAIN */) || getColorStyle("NEUTRAL" /* NEUTRAL */),
+        borderColor: status === "success" && getColorStyle("SUCCESS" /* SUCCESS */) || status === "warning" && getColorStyle("WARNING" /* WARNING */) || status === "error" && getColorStyle("ERROR" /* ERROR */) || isFocused && getColorStyle("MAIN" /* MAIN */) || getColorStyle("STROKE" /* STROKE */),
         borderRadius: 3,
         height: 46,
         paddingHorizontal: 10

package/lib/{chunk-G2YCM7AZ.mjs → chunk-2HYM6QES.mjs}

@@ -1,10 +1,10 @@
 "use client";
 import {
   Sticker_default
-} from "./chunk-24IJJOMB.mjs";
+} from "./chunk-TZXX4HLS.mjs";
 import {
   Icon_default
-} from "./chunk-2Y6KFFKS.mjs";
+} from "./chunk-LBHJFKKZ.mjs";
 import {
   is
 } from "./chunk-SWVRRUW7.mjs";

package/lib/{chunk-WEVI64CN.mjs → chunk-2PZUJQQR.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   Icon_default
-} from "./chunk-2Y6KFFKS.mjs";
+} from "./chunk-LBHJFKKZ.mjs";
 import {
   TabsContext
 } from "./chunk-OAENQH2X.mjs";

package/lib/{chunk-U3CWYKFP.mjs → chunk-2QZXS5AV.mjs}

@@ -10,7 +10,7 @@ import {
 } from "./chunk-SJHSDGQP.mjs";
 import {
   getJustifiedClassName
-} from "./chunk-L4UDEKQK.mjs";
+} from "./chunk-DBSMMWLO.mjs";
 
 // components/segment-control/SegmentControl.tsx
 import clsx from "clsx";

package/lib/{chunk-AFGKMVTL.mjs → chunk-2ZXNMNZQ.mjs}

@@ -1,10 +1,10 @@
 "use client";
 import {
   useGauge
-} from "./chunk-2L4JFQLT.mjs";
+} from "./chunk-M5YDQECK.mjs";
 import {
   Icon_default
-} from "./chunk-2Y6KFFKS.mjs";
+} from "./chunk-LBHJFKKZ.mjs";
 import {
   hashClass
 } from "./chunk-PKMC2LCN.mjs";

package/lib/{chunk-VYP4HA77.mjs → chunk-3CLJZ35B.mjs}

@@ -1,13 +1,13 @@
 "use client";
 import {
   View_native_default
-} from "./chunk-SWE3LIUJ.mjs";
+} from "./chunk-NRXSGVTI.mjs";
 import {
   Text_native_default
-} from "./chunk-D7RPS4TQ.mjs";
+} from "./chunk-BKAHLA6T.mjs";
 import {
   getColorStyle
-} from "./chunk-JZARKY6T.mjs";
+} from "./chunk-A2OOIRKG.mjs";
 
 // components/table/tr/TableTr.native.tsx
 import React, { useState } from "react";

package/lib/{chunk-J6ALRNSS.mjs → chunk-3EMMIIET.mjs}

@@ -1,10 +1,10 @@
 "use client";
 import {
   InputGauge_default
-} from "./chunk-AFGKMVTL.mjs";
+} from "./chunk-2ZXNMNZQ.mjs";
 import {
   Icon_default
-} from "./chunk-2Y6KFFKS.mjs";
+} from "./chunk-LBHJFKKZ.mjs";
 import {
   Text_default
 } from "./chunk-TGYSZFVX.mjs";
@@ -243,7 +243,7 @@ var Input = React.forwardRef(
           }
         }
       }
-    ), loading && /* @__PURE__ */ React.createElement("span", { className: loader })), help && /* @__PURE__ */ React.createElement(Text_default, { className: helpClasses, id: idHelp }, help), securityGauge && type === "password" /* PASSWORD */ && /* @__PURE__ */ React.createElement(
+    ), loading && /* @__PURE__ */ React.createElement("span", { className: loader })), help && typeof help === "string" ? /* @__PURE__ */ React.createElement(Text_default, { className: helpClasses, id: idHelp }, help) : help, securityGauge && type === "password" /* PASSWORD */ && /* @__PURE__ */ React.createElement(
       InputGauge_default,
       {
         validationRules,

package/lib/{chunk-XP2DSUOZ.mjs → chunk-3IHIP67Z.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   TableTr_default
-} from "./chunk-EONCJ4MO.mjs";
+} from "./chunk-KRROU6EI.mjs";
 
 // components/table/tr/index.ts
 var tr_default = TableTr_default;

package/lib/{chunk-GZN3MH62.mjs → chunk-3IZPRJRW.mjs}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-652YVC7W.mjs";
 import {
   getColorStyle
-} from "./chunk-JZARKY6T.mjs";
+} from "./chunk-A2OOIRKG.mjs";
 import {
   Skeleton_default
 } from "./chunk-JJA6BOVR.mjs";
@@ -43,7 +43,7 @@ var Box = React.forwardRef(
         position: "relative",
         borderStyle: flat ? "solid" : void 0,
         borderWidth: flat && 1 || active && 2 || 0,
-        borderColor: active ? getColorStyle("MAIN" /* MAIN */) : getColorStyle("NEUTRAL" /* NEUTRAL */),
+        borderColor: active ? getColorStyle("MAIN" /* MAIN */) : getColorStyle("STROKE" /* STROKE */),
         marginTop: headerOffset ? 35 : 0,
         flex: fullheight ? 1 : 0
       },

package/lib/{chunk-OCBMPT42.mjs → chunk-3MRBYJGC.mjs}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-T7LVKIVR.mjs";
 import {
   Icon_default
-} from "./chunk-2Y6KFFKS.mjs";
+} from "./chunk-LBHJFKKZ.mjs";
 import {
   is
 } from "./chunk-SWVRRUW7.mjs";

package/lib/{chunk-ICYET2FE.mjs → chunk-3OQUOEEJ.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   Icon_default
-} from "./chunk-2Y6KFFKS.mjs";
+} from "./chunk-LBHJFKKZ.mjs";
 import {
   has,
   is

package/lib/{chunk-UF4SJ5S6.mjs → chunk-3TNW7H2X.mjs}

@@ -1,10 +1,10 @@
 "use client";
 import {
   getBackgroundClassName
-} from "./chunk-N7MFF5DP.mjs";
+} from "./chunk-MTRPTXD2.mjs";
 import {
   getColorClassName
-} from "./chunk-KWLXL7TO.mjs";
+} from "./chunk-GA2G3UAN.mjs";
 import {
   has,
   is

package/lib/{chunk-OTT7VCHV.mjs → chunk-3Y6JQ767.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   Text_native_default
-} from "./chunk-D7RPS4TQ.mjs";
+} from "./chunk-BKAHLA6T.mjs";
 import {
   getLabel
 } from "./chunk-2WOMFJ45.mjs";

package/lib/{chunk-WGEN3AJR.mjs → chunk-4OJAZNII.mjs}

@@ -1,16 +1,16 @@
 "use client";
 import {
   Text_native_default
-} from "./chunk-D7RPS4TQ.mjs";
+} from "./chunk-BKAHLA6T.mjs";
 import {
   getVariantStyle
-} from "./chunk-YYKMIPNP.mjs";
+} from "./chunk-IPZTVXIE.mjs";
 import {
   Icon_native_default
-} from "./chunk-TRGKFKYP.mjs";
+} from "./chunk-5XWBQO3M.mjs";
 import {
   getColorStyle
-} from "./chunk-JZARKY6T.mjs";
+} from "./chunk-A2OOIRKG.mjs";
 import {
   isIOS
 } from "./chunk-R6PFY5VS.mjs";

package/lib/{chunk-PDQNHPRY.mjs → chunk-55YD5ED2.mjs}

@@ -2,9 +2,6 @@
 import {
   checkCents
 } from "./chunk-NGOFIGNH.mjs";
-import {
-  Text_default
-} from "./chunk-TGYSZFVX.mjs";
 import {
   has,
   is
@@ -53,7 +50,7 @@ var Price = React.forwardRef(
       let cents = checkCents(((_a = absoluteAmountStrike.toString().split(/[.,]/)[1]) == null ? void 0 : _a.substring(0, 2)) || "");
       cents = cents && cents.length === 1 && `${cents}0` || cents;
       const centsDisplayed = !hideCents && `\u20AC${cents}` || "\u20AC";
-      oldAmountComponent = /* @__PURE__ */ React.createElement("span", { "aria-hidden": "true", className: classesStrike, ...others }, /* @__PURE__ */ React.createElement(Text_default, { markup: "span" /* SPAN */ }, `${wholeStrike}`), /* @__PURE__ */ React.createElement("span", { className: hashClass(styled, clsx("price-details")) }, /* @__PURE__ */ React.createElement("span", { className: hashClass(styled, clsx("cents")) }, centsDisplayed === "\u20AC" ? /* @__PURE__ */ React.createElement(React.Fragment, null, "\xA0", centsDisplayed) : centsDisplayed, mention && /* @__PURE__ */ React.createElement("sup", null, mention)), period && /* @__PURE__ */ React.createElement("span", { className: hashClass(styled, clsx("period")) }, "/", period)));
+      oldAmountComponent = /* @__PURE__ */ React.createElement("span", { "aria-hidden": "true", className: classesStrike, ...others }, /* @__PURE__ */ React.createElement("span", null, `${wholeStrike}`), /* @__PURE__ */ React.createElement("span", { className: hashClass(styled, clsx("price-details")) }, /* @__PURE__ */ React.createElement("span", { className: hashClass(styled, clsx("cents")) }, centsDisplayed === "\u20AC" ? /* @__PURE__ */ React.createElement(React.Fragment, null, "\xA0", centsDisplayed) : centsDisplayed, mention && /* @__PURE__ */ React.createElement("sup", null, mention)), period && /* @__PURE__ */ React.createElement("span", { className: hashClass(styled, clsx("period")) }, "/", period)));
     }
     if (amount !== void 0) {
       const isNegative = amount < 0;
@@ -64,7 +61,7 @@ var Price = React.forwardRef(
       cents = cents && cents.length === 1 && `${cents}0` || cents;
       const centsDisplayed = !hideCents && `\u20AC${cents}` || "\u20AC";
       const dataPrice = `${whole}${!hideCents && cents ? `.${cents}` : ""}`;
-      amountComponent = /* @__PURE__ */ React.createElement("span", { "aria-hidden": "true", "aria-label": accessibilityLabel, className: classes, "data-price": dataPrice, ...others }, /* @__PURE__ */ React.createElement(Text_default, { markup: "span" /* SPAN */ }, `${whole}`), /* @__PURE__ */ React.createElement("span", { className: hashClass(styled, clsx("price-details")) }, /* @__PURE__ */ React.createElement("span", { className: hashClass(styled, clsx("cents")) }, centsDisplayed === "\u20AC" ? /* @__PURE__ */ React.createElement(React.Fragment, null, "\xA0", centsDisplayed) : centsDisplayed, mention && /* @__PURE__ */ React.createElement("sup", null, mention)), period && /* @__PURE__ */ React.createElement("span", { className: hashClass(styled, clsx("period")) }, "/", period)));
+      amountComponent = /* @__PURE__ */ React.createElement("span", { "aria-hidden": "true", "aria-label": accessibilityLabel, className: classes, "data-price": dataPrice, ...others }, /* @__PURE__ */ React.createElement("span", null, `${whole}`), /* @__PURE__ */ React.createElement("span", { className: hashClass(styled, clsx("price-details")) }, /* @__PURE__ */ React.createElement("span", { className: hashClass(styled, clsx("cents")) }, centsDisplayed === "\u20AC" ? /* @__PURE__ */ React.createElement(React.Fragment, null, "\xA0", centsDisplayed) : centsDisplayed, mention && /* @__PURE__ */ React.createElement("sup", null, mention)), period && /* @__PURE__ */ React.createElement("span", { className: hashClass(styled, clsx("period")) }, "/", period)));
     }
     return /* @__PURE__ */ React.createElement(
       "div",

package/lib/chunk-57ZCA2JK.mjs

@@ -0,0 +1,27 @@
+"use client";
+import {
+  is
+} from "./chunk-SWVRRUW7.mjs";
+import {
+  hashClass
+} from "./chunk-PKMC2LCN.mjs";
+import {
+  useTrilogyContext
+} from "./chunk-SJHSDGQP.mjs";
+
+// components/dropdown/group/DropdownGroup.tsx
+import clsx from "clsx";
+import * as React from "react";
+var DropdownGroup = React.forwardRef(
+  ({ className, id, children, hideSeparator, testId, ...others }, ref) => {
+    const { styled } = useTrilogyContext();
+    const classes = hashClass(styled, clsx("dropdown-group", hideSeparator && is("no-separator"), className));
+    return /* @__PURE__ */ React.createElement("div", { ref, id, className: classes, role: "group", "data-testid": testId, ...others }, children);
+  }
+);
+DropdownGroup.displayName = "DropdownGroup" /* DropdownGroup */;
+var DropdownGroup_default = DropdownGroup;
+
+export {
+  DropdownGroup_default
+};

package/lib/{chunk-IH4PWIOS.mjs → chunk-5GU35YAB.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   getColorClassName
-} from "./chunk-JZARKY6T.mjs";
+} from "./chunk-A2OOIRKG.mjs";
 
 // objects/atoms/Background/index.native.ts
 var getBackgroundClassName = (backgroundType) => {

package/lib/{chunk-MCQZ43VV.mjs → chunk-5WJ7A7D5.mjs}

@@ -2,7 +2,7 @@
 import {
   autoLayoutChildrenHandler,
   parseChildren
-} from "./chunk-5LGX4H46.mjs";
+} from "./chunk-REUPPELB.mjs";
 import {
   DEFAULT_SPACING_MATRIX
 } from "./chunk-AQYNL523.mjs";

package/lib/{chunk-NKKDHZ4W.mjs → chunk-5XH2PQIG.mjs}

@@ -1,16 +1,16 @@
 "use client";
 import {
   View_native_default
-} from "./chunk-SWE3LIUJ.mjs";
+} from "./chunk-NRXSGVTI.mjs";
 import {
   Text_native_default
-} from "./chunk-D7RPS4TQ.mjs";
+} from "./chunk-BKAHLA6T.mjs";
 import {
   getStatusStyle
-} from "./chunk-3KNG5WUQ.mjs";
+} from "./chunk-WFIXFBGQ.mjs";
 import {
   getColorStyle
-} from "./chunk-JZARKY6T.mjs";
+} from "./chunk-A2OOIRKG.mjs";
 
 // components/progress/Progress.native.tsx
 import React, { useEffect, useRef } from "react";

package/lib/{chunk-TRGKFKYP.mjs → chunk-5XWBQO3M.mjs}

@@ -1,17 +1,17 @@
 "use client";
+import {
+  Skeleton_native_default
+} from "./chunk-7DJ5V2J7.mjs";
 import {
   TrilogyThemeContext,
   getColorStyle
-} from "./chunk-JZARKY6T.mjs";
+} from "./chunk-A2OOIRKG.mjs";
 import {
   isIOS
 } from "./chunk-R6PFY5VS.mjs";
-import {
-  Skeleton_default
-} from "./chunk-JJA6BOVR.mjs";
 import {
   getAlignStyle
-} from "./chunk-CD6DMMCL.mjs";
+} from "./chunk-X63WVV4X.mjs";
 import {
   StatesContext
 } from "./chunk-6IKR6FTJ.mjs";
@@ -76,7 +76,7 @@ var Icon = React.forwardRef(
       }
     });
     const IconSkeleton = () => /* @__PURE__ */ React.createElement(
-      Skeleton_default,
+      Skeleton_native_default,
       {
         style: styles.skeleton,
         width: circledWidth,

package/lib/{chunk-IUOXSLAY.mjs → chunk-6Q3377VJ.mjs}

@@ -1,30 +1,27 @@
 "use client";
 import {
   InputGauge_native_default
-} from "./chunk-P25RBQLX.mjs";
+} from "./chunk-WHJ5TUTR.mjs";
 import {
   Text_native_default
-} from "./chunk-D7RPS4TQ.mjs";
+} from "./chunk-BKAHLA6T.mjs";
 import {
   Spacer_native_default
 } from "./chunk-54DJB6AO.mjs";
 import {
   Icon_native_default
-} from "./chunk-TRGKFKYP.mjs";
+} from "./chunk-5XWBQO3M.mjs";
 import {
-  getColorStyle,
-  grayscale
-} from "./chunk-JZARKY6T.mjs";
+  getColorStyle
+} from "./chunk-A2OOIRKG.mjs";
 import {
   isIOS
 } from "./chunk-R6PFY5VS.mjs";
 
 // components/input/Input.native.tsx
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import {
-  Animated,
   Keyboard,
-  Platform,
   StyleSheet,
   TextInput,
   TouchableOpacity,
@@ -67,8 +64,6 @@ var Input = React.forwardRef(
   }, ref) => {
     const inputTestId = testId ? testId : placeholder ? placeholder : "NotSpecified";
     const inputAccessibilityLabel = accessibilityLabel ? accessibilityLabel : placeholder ? placeholder : "NotSpecified";
-    const animationDuration = 200;
-    const placeholderDefaultSize = 20;
     const inputIcon = /* @__PURE__ */ new Map();
     const inputColor = getColorStyle("MAIN" /* MAIN */);
     inputIcon.set("success" /* SUCCESS */, "tri-check-circle" /* CHECK_CIRCLE */);
@@ -78,19 +73,7 @@ var Input = React.forwardRef(
     const [email, setEmail] = useState("");
     const [isFocused, setIsFocused] = useState(false);
     const [iconPassword, setIconPassword] = useState("tri-eye" /* EYE */);
-    const [dynamicPlaceholder, setDynamicPlaceholder] = useState(false);
     const [isKeyboardVisible, setKeyboardVisible] = useState(null);
-    const animation = useRef(new Animated.Value(25)).current;
-    const sizeAnimation = useRef(new Animated.Value(placeholderDefaultSize)).current;
-    const paddingTopByPlatform = (os, dynamicPlaceholder2) => {
-      if (dynamicPlaceholder2 && type !== "search" /* SEARCH */ && os === "ios") {
-        return 10;
-      }
-      if (dynamicPlaceholder2 && type !== "search" /* SEARCH */ && os === "android") {
-        return isFocused ? 14 : 15;
-      }
-      return 0;
-    };
     const handleChange = useCallback((text) => {
       var _a;
       setValue(text);
@@ -116,38 +99,6 @@ var Input = React.forwardRef(
     useEffect(() => {
       setValue(defaultValue || "");
     }, [defaultValue, placeholder]);
-    useEffect(() => {
-      if (value && value.length > 0 && placeholder && placeholder.length > 0) {
-        setDynamicPlaceholder(true);
-      } else {
-        setDynamicPlaceholder(false);
-      }
-    }, [placeholder, value]);
-    useEffect(() => {
-      if (dynamicPlaceholder && type !== "search" /* SEARCH */) {
-        Animated.timing(animation, {
-          toValue: 3,
-          duration: animationDuration,
-          useNativeDriver: false
-        }).start();
-        Animated.timing(sizeAnimation, {
-          toValue: 12,
-          duration: animationDuration,
-          useNativeDriver: false
-        }).start();
-      } else {
-        Animated.timing(animation, {
-          toValue: 25,
-          duration: animationDuration,
-          useNativeDriver: false
-        }).start();
-        Animated.timing(sizeAnimation, {
-          toValue: placeholderDefaultSize,
-          duration: animationDuration,
-          useNativeDriver: false
-        }).start();
-      }
-    }, [dynamicPlaceholder, animation, sizeAnimation]);
     useEffect(() => {
       const keyboardDidShowListener = Keyboard.addListener("keyboardDidShow", () => setKeyboardVisible(true));
       const keyboardDidHideListener = Keyboard.addListener("keyboardDidHide", () => setKeyboardVisible(false));
@@ -164,18 +115,10 @@ var Input = React.forwardRef(
       input: {
         paddingLeft: (iconNameLeft && isFocused || type === "search" /* SEARCH */ && isFocused) && 39 || (iconNameLeft || type === "search" /* SEARCH */) && 40 || !iconNameLeft && type !== "search" /* SEARCH */ && isFocused && 9 || 10,
         paddingRight: (iconNameRight || type === "search" /* SEARCH */) && 32 || 0,
-        marginTop: paddingTopByPlatform(Platform.OS, dynamicPlaceholder),
         width: hasIcon && status ? "85%" : "95%",
         height: 46,
         color: disabled ? getColorStyle("DISABLED" /* DISABLED */) : inputColor
       },
-      dynamicPlaceholder: {
-        position: "absolute",
-        left: iconNameLeft ? 40 : 10,
-        color: grayscale(getColorStyle("FONT" /* FONT */)),
-        marginTop: isFocused ? -1 : 0,
-        marginLeft: isFocused ? -1 : 0
-      },
       help: {
         fontSize: 12,
         color: status && status === "success" && getColorStyle("SUCCESS" /* SUCCESS */) || status && status === "warning" && getColorStyle("WARNING" /* WARNING */) || status && status === "error" && getColorStyle("ERROR" /* ERROR */) || status && status === "default" && inputColor || disabled && getColorStyle("DISABLED" /* DISABLED */) || inputColor,
@@ -189,7 +132,7 @@ var Input = React.forwardRef(
         backgroundColor: disabled ? getColorStyle("DISABLED_FADE" /* DISABLED_FADE */) : getColorStyle("WHITE" /* BACKGROUND */),
         borderWidth: isFocused ? 2 : 1,
         borderRadius: 3,
-        borderColor: status && status === "success" && getColorStyle("SUCCESS" /* SUCCESS */) || status && status === "warning" && getColorStyle("WARNING" /* WARNING */) || status && status === "error" && getColorStyle("ERROR" /* ERROR */) || status && status === "default" && inputColor || isFocused && getColorStyle("MAIN" /* MAIN */) || getColorStyle("NEUTRAL" /* NEUTRAL */),
+        borderColor: status && status === "success" && getColorStyle("SUCCESS" /* SUCCESS */) || status && status === "warning" && getColorStyle("WARNING" /* WARNING */) || status && status === "error" && getColorStyle("ERROR" /* ERROR */) || status && status === "default" && inputColor || isFocused && getColorStyle("MAIN" /* MAIN */) || getColorStyle("STROKE" /* STROKE */),
         height: 46,
         width: "100%"
       },
@@ -247,9 +190,9 @@ var Input = React.forwardRef(
         accessibilityLabel: inputAccessibilityLabel,
         testID: inputTestId
       },
-      !dynamicPlaceholder && label && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Text_native_default, { typo: "has-text-main" /* TEXT_MAIN */ }, label, " ", label && required && /* @__PURE__ */ React.createElement(Text_native_default, { typo: "has-text-error" /* TEXT_ERROR */ }, "*")), /* @__PURE__ */ React.createElement(Spacer_native_default, { size: 12 /* THREE */ })),
-      !dynamicPlaceholder && label && sample && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Text_native_default, { level: 3 /* THREE */, typo: "has-text-main" /* TEXT_MAIN */ }, sample), /* @__PURE__ */ React.createElement(Spacer_native_default, { size: 12 /* THREE */ })),
-      /* @__PURE__ */ React.createElement(View, { testID: "input-wrapper-id", style: styles.inputWrapper }, dynamicPlaceholder && type !== "search" /* SEARCH */ && /* @__PURE__ */ React.createElement(Animated.Text, { style: [styles.dynamicPlaceholder, { top: animation, fontSize: sizeAnimation }] }, placeholder), /* @__PURE__ */ React.createElement(
+      label && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Text_native_default, { typo: "has-text-main" /* TEXT_MAIN */ }, label, " ", label && required && /* @__PURE__ */ React.createElement(Text_native_default, { typo: "has-text-error" /* TEXT_ERROR */ }, "*")), /* @__PURE__ */ React.createElement(Spacer_native_default, { size: 12 /* THREE */ })),
+      label && sample && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Text_native_default, { level: 3 /* THREE */, typo: "has-text-main" /* TEXT_MAIN */ }, sample), /* @__PURE__ */ React.createElement(Spacer_native_default, { size: 12 /* THREE */ })),
+      /* @__PURE__ */ React.createElement(View, { testID: "input-wrapper-id", style: styles.inputWrapper }, /* @__PURE__ */ React.createElement(
         TextInput,
         {
           ref,
@@ -294,7 +237,7 @@ var Input = React.forwardRef(
       ), type === "email" && /* @__PURE__ */ React.createElement(Text_native_default, { style: styles.text }, value, /* @__PURE__ */ React.createElement(Text_native_default, { style: styles.domain }, email)), hasIcon && type !== "password" /* PASSWORD */ && type !== "search" /* SEARCH */ && /* @__PURE__ */ React.createElement(View, { style: styles.inputIconLeft }, /* @__PURE__ */ React.createElement(
         Icon_native_default,
         {
-          align: "ALIGNED_START" /* ALIGNED_START */,
+          align: "START" /* START */,
           name: iconNameLeft,
           size: "small" /* SMALL */,
           color: status && status === "success" && "SUCCESS" /* SUCCESS */ || status && status === "warning" && "WARNING" /* WARNING */ || status && status === "error" && "ERROR" /* ERROR */ || disabled && "DISABLED" /* DISABLED */ || "MAIN" /* MAIN */
@@ -316,7 +259,7 @@ var Input = React.forwardRef(
           Icon_native_default,
           {
             testId: "icon-status-id",
-            align: "ALIGNED_CENTER" /* ALIGNED_CENTER */,
+            align: "CENTER" /* CENTER */,
             name: iconNameLeft || iconNameRight || inputIcon.get(status).replace("tri-", "").replace("ui-", ""),
             size: "small" /* SMALL */,
             color: status && status === "success" && "SUCCESS" /* SUCCESS */ || status && status === "warning" && "WARNING" /* WARNING */ || status && status === "error" && "ERROR" /* ERROR */ || status && "MAIN" /* MAIN */ || disabled && "DISABLED" /* DISABLED */ || "MAIN" /* MAIN */
@@ -339,7 +282,7 @@ var Input = React.forwardRef(
           Icon_native_default,
           {
             testId: "icon-right-id",
-            align: "ALIGNED_CENTER" /* ALIGNED_CENTER */,
+            align: "CENTER" /* CENTER */,
             name: iconNameRight,
             size: "small" /* SMALL */,
             color: disabled && "DISABLED" /* DISABLED */ || "MAIN" /* MAIN */
@@ -365,7 +308,7 @@ var Input = React.forwardRef(
           Icon_native_default,
           {
             testId: "password-id",
-            align: "ALIGNED_CENTER" /* ALIGNED_CENTER */,
+            align: "CENTER" /* CENTER */,
             name: iconPassword,
             size: "small" /* SMALL */,
             color: status && status === "success" && "SUCCESS" /* SUCCESS */ || status && status === "warning" && "WARNING" /* WARNING */ || status && status === "error" && "ERROR" /* ERROR */ || status && status === "default" && "MAIN" /* MAIN */ || disabled && "DISABLED" /* DISABLED */ || "MAIN" /* MAIN */
@@ -374,7 +317,7 @@ var Input = React.forwardRef(
       )), type === "search" /* SEARCH */ && !status && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(View, { style: styles.inputContainerLeft }, /* @__PURE__ */ React.createElement(
         Icon_native_default,
         {
-          align: "ALIGNED_CENTER" /* ALIGNED_CENTER */,
+          align: "CENTER" /* CENTER */,
           name: "tri-search" /* SEARCH */,
           size: "small" /* SMALL */,
           color: disabled ? "DISABLED" /* DISABLED */ : "NEUTRAL" /* NEUTRAL */
@@ -400,14 +343,14 @@ var Input = React.forwardRef(
         /* @__PURE__ */ React.createElement(
           Icon_native_default,
           {
-            align: "ALIGNED_CENTER" /* ALIGNED_CENTER */,
+            align: "CENTER" /* CENTER */,
             name: "tri-times" /* TIMES_CIRCLE */,
             size: "small" /* SMALL */,
             color: disabled ? "DISABLED" /* DISABLED */ : "NEUTRAL" /* NEUTRAL */
           }
         )
       ))),
-      help && /* @__PURE__ */ React.createElement(Text_native_default, { testId: "help-id", style: styles.help }, help),
+      help && typeof help === "string" ? /* @__PURE__ */ React.createElement(Text_native_default, { testId: "help-id", style: styles.help }, help) : help,
       type === "password" /* PASSWORD */ && securityGauge && /* @__PURE__ */ React.createElement(InputGauge_native_default, { securityRules, validationRules, inputValue: value })
     );
   }

package/lib/{chunk-OWEOJH6C.mjs → chunk-7HNDZCFM.mjs}

@@ -1,10 +1,10 @@
 "use client";
 import {
   AutoCompleteIem_native_default
-} from "./chunk-OTT7VCHV.mjs";
+} from "./chunk-3Y6JQ767.mjs";
 import {
   getColorStyle
-} from "./chunk-JZARKY6T.mjs";
+} from "./chunk-A2OOIRKG.mjs";
 
 // components/autocomplete/menu/AutoCompleteMenu.native.tsx
 import * as React from "react";
@@ -17,7 +17,7 @@ var AutoCompleteMenuNative = ({ suggestions, handleSelectItem }) => {
       backgroundColor: getColorStyle("WHITE" /* BACKGROUND */),
       borderWidth: 1,
       borderRadius: 3,
-      borderColor: getColorStyle("NEUTRAL" /* NEUTRAL */),
+      borderColor: getColorStyle("STROKE" /* STROKE */),
       width: "100%",
       maxHeight: 165,
       flexGrow: 1

package/lib/{chunk-6IWJPKDV.mjs → chunk-7JWRLHSR.mjs}

@@ -1,10 +1,10 @@
 "use client";
 import {
   Tab_default
-} from "./chunk-WEVI64CN.mjs";
+} from "./chunk-2PZUJQQR.mjs";
 import {
   Icon_default
-} from "./chunk-2Y6KFFKS.mjs";
+} from "./chunk-LBHJFKKZ.mjs";
 import {
   TabsContext
 } from "./chunk-OAENQH2X.mjs";
@@ -19,7 +19,7 @@ import {
 } from "./chunk-SJHSDGQP.mjs";
 import {
   getAlignClassName
-} from "./chunk-CD6DMMCL.mjs";
+} from "./chunk-X63WVV4X.mjs";
 
 // components/tabs/tab-list/TabList.tsx
 import clsx from "clsx";

package/lib/{chunk-UG5CQ7XM.mjs → chunk-7ZWD57KT.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   getBackgroundClassName
-} from "./chunk-N7MFF5DP.mjs";
+} from "./chunk-MTRPTXD2.mjs";
 import {
   has,
   is

package/lib/{chunk-2GK4CQRN.mjs → chunk-A2GENPGN.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   getColorStyle
-} from "./chunk-KWLXL7TO.mjs";
+} from "./chunk-GA2G3UAN.mjs";
 
 // objects/Typography/TypographyColor/index.ts
 var TypographyColor = /* @__PURE__ */ ((TypographyColor2) => {

package/lib/{chunk-JZARKY6T.mjs → chunk-A2OOIRKG.mjs}

@@ -41,6 +41,7 @@ var TrilogyColor = /* @__PURE__ */ ((TrilogyColor2) => {
   TrilogyColor2["NEUTRAL"] = "NEUTRAL";
   TrilogyColor2["NEUTRAL_FADE"] = "NEUTRAL_FADE";
   TrilogyColor2["STROKE"] = "STROKE";
+  TrilogyColor2["STROKE_FADE"] = "STROKE_FADE";
   return TrilogyColor2;
 })(TrilogyColor || {});
 var colors = {
@@ -63,7 +64,8 @@ var colors = {
   ["DISABLED_FADE" /* DISABLED_FADE */]: ["#D1D1D1", "disabled-fade", "white"],
   ["NEUTRAL" /* NEUTRAL */]: ["#707070", "grey", "white"],
   ["NEUTRAL_FADE" /* NEUTRAL_FADE */]: ["#F4F4F4", "grey-fade", "white"],
-  ["STROKE" /* STROKE */]: ["#BBC1CE", "stroke", "white"]
+  ["STROKE" /* STROKE */]: ["#BBC1CE", "stroke", "white"],
+  ["STROKE_FADE" /* STROKE_FADE */]: ["#BBC1CE", "stroke-fade", "white"]
 };
 var getColorClassName = (trilogyColor) => {
   const color = colors[trilogyColor];