@fluidattacks/design 9.3.3 → 9.5.0

package/dist/components/drawer/index.d.ts

@@ -1,5 +1,5 @@
 import { PropsWithChildren } from 'react';
 import { IDrawerProps } from './types';
-declare const Drawer: ({ _containerId, _portal, actions, children, dismissable, footer, footerMessage, header, id, modalRef, side, size, tabs, title, titleIcon, titleTag, onClose, }: Readonly<PropsWithChildren<IDrawerProps>>) => JSX.Element | null;
+declare const Drawer: ({ _containerId, _portal, actions, children, dismissable, footer, footerMessage, header, id, modalRef, side, size, subtitle, tabs, title, titleIcon, titleTag, onClose, }: Readonly<PropsWithChildren<IDrawerProps>>) => JSX.Element | null;
 export { Drawer };
 export type { IDrawerProps } from './types';

package/dist/components/drawer/index.js

@@ -1,85 +1,86 @@
-import { jsx as e, jsxs as a } from "react/jsx-runtime";
-import { useCallback as w, useEffect as I } from "react";
-import { createPortal as W } from "react-dom";
-import { useTheme as O } from "styled-components";
-import { DrawerWrapper as L, DrawerPanel as P, DrawerBody as K } from "./styles.js";
-import { Button as q } from "../button/index.js";
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { useCallback as u, useEffect as O } from "react";
+import { createPortal as L } from "react-dom";
+import { useTheme as P } from "styled-components";
+import { DrawerWrapper as K, DrawerPanel as q, DrawerBody as A } from "./styles.js";
+import { Button as F } from "../button/index.js";
 import { Container as i } from "../container/index.js";
-import { Icon as A } from "../icon/index.js";
-import { IconButton as x } from "../icon-button/index.js";
-import { Tabs as F } from "../tabs/index.js";
+import { Icon as G } from "../icon/index.js";
+import { IconButton as $ } from "../icon-button/index.js";
+import { Tabs as H } from "../tabs/index.js";
 import "../typography/heading/index.js";
 import "../typography/span/index.js";
-import { Text as G } from "../typography/text/index.js";
+import { Text as k } from "../typography/text/index.js";
 const re = ({
-  _containerId: $ = "portals",
-  _portal: k = !0,
-  actions: C = void 0,
-  children: T = void 0,
-  dismissable: l = !0,
+  _containerId: C = "portals",
+  _portal: T = !0,
+  actions: D = void 0,
+  children: S = void 0,
+  dismissable: a = !0,
   footer: m = void 0,
   footerMessage: h = void 0,
-  header: b = void 0,
-  id: p = "drawer-container",
-  modalRef: n,
-  side: y = "right",
-  size: B = "md",
-  tabs: f = void 0,
-  title: D,
-  titleIcon: g = void 0,
-  titleTag: S = void 0,
-  onClose: u = void 0
+  header: W = void 0,
+  id: d = "drawer-container",
+  modalRef: l,
+  side: f = "right",
+  size: z = "md",
+  subtitle: y = void 0,
+  tabs: g = void 0,
+  title: B,
+  titleIcon: v = void 0,
+  titleTag: I = void 0,
+  onClose: w = void 0
 }) => {
-  const t = O(), d = w(() => {
-    n.close(), u?.();
-  }, [n, u]), j = w(
+  const o = P(), p = u(() => {
+    l.close(), w?.();
+  }, [l, w]), b = u(
     (r) => {
-      l && r.target === r.currentTarget && d();
+      a && r.target === r.currentTarget && p();
     },
-    [l, d]
+    [a, p]
   );
-  I(() => {
-    if (!l || !n.isOpen)
+  O(() => {
+    if (!a || !l.isOpen)
       return () => {
       };
-    const r = (o) => {
-      o.key === "Escape" && d();
+    const r = (n) => {
+      n.key === "Escape" && p();
     };
     return window.addEventListener("keydown", r), () => {
       window.removeEventListener("keydown", r);
     };
-  }, [l, d, n.isOpen]);
-  const v = /* @__PURE__ */ e(
-    L,
+  }, [a, p, l.isOpen]);
+  const x = /* @__PURE__ */ e(
+    K,
     {
-      $side: y,
-      id: `${p}-wrapper`,
-      onClick: j,
+      $side: f,
+      id: `${d}-wrapper`,
+      onClick: b,
       role: "presentation",
-      children: /* @__PURE__ */ a(
-        P,
+      children: /* @__PURE__ */ t(
+        q,
         {
-          $side: y,
-          $size: B,
-          "aria-label": n.name,
+          $side: f,
+          $size: z,
+          "aria-label": l.name,
           "aria-modal": "true",
-          "data-testid": p,
-          id: p,
+          "data-testid": d,
+          id: d,
           role: "dialog",
           children: [
-            /* @__PURE__ */ a(
+            /* @__PURE__ */ t(
               i,
               {
                 alignItems: "flex-start",
                 alignSelf: "stretch",
-                borderBottom: `1px solid ${t.palette.gray[300]}`,
+                borderBottom: `1px solid ${o.palette.gray[300]}`,
                 display: "flex",
                 gap: 0.25,
                 justify: "space-between",
                 px: 1.25,
                 py: 1,
                 children: [
-                  /* @__PURE__ */ a(
+                  /* @__PURE__ */ t(
                     i,
                     {
                       display: "flex",
@@ -87,7 +88,7 @@ const re = ({
                       gap: 0.25,
                       minWidth: "0",
                       children: [
-                        /* @__PURE__ */ a(
+                        /* @__PURE__ */ t(
                           i,
                           {
                             alignItems: "center",
@@ -95,11 +96,11 @@ const re = ({
                             gap: 0.5,
                             minWidth: "0",
                             children: [
-                              g === void 0 ? void 0 : /* @__PURE__ */ e(
+                              v === void 0 ? void 0 : /* @__PURE__ */ e(
                                 i,
                                 {
                                   alignItems: "center",
-                                  bgColor: t.palette.gray[100],
+                                  bgColor: o.palette.gray[100],
                                   borderRadius: "4px",
                                   display: "flex",
                                   height: "2rem",
@@ -107,71 +108,103 @@ const re = ({
                                   minWidth: "2rem",
                                   width: "2rem",
                                   children: /* @__PURE__ */ e(
-                                    A,
+                                    G,
                                     {
-                                      icon: g,
-                                      iconColor: t.palette.gray[700],
+                                      icon: v,
+                                      iconColor: o.palette.gray[700],
                                       iconSize: "md",
                                       iconType: "fa-solid"
                                     }
                                   )
                                 }
                               ),
-                              /* @__PURE__ */ e(
-                                G,
+                              /* @__PURE__ */ t(
+                                i,
                                 {
-                                  color: t.palette.gray[800],
-                                  display: "inline-block",
-                                  fontWeight: "bold",
-                                  overflow: "hidden",
-                                  size: "lg",
-                                  textOverflow: "ellipsis",
-                                  whiteSpace: "nowrap",
-                                  children: D
+                                  display: "flex",
+                                  flexDirection: "column",
+                                  minWidth: "0",
+                                  children: [
+                                    /* @__PURE__ */ t(
+                                      i,
+                                      {
+                                        alignItems: "center",
+                                        display: "flex",
+                                        gap: 0.5,
+                                        minWidth: "0",
+                                        children: [
+                                          /* @__PURE__ */ e(
+                                            k,
+                                            {
+                                              color: o.palette.gray[800],
+                                              display: "inline-block",
+                                              fontWeight: "bold",
+                                              overflow: "hidden",
+                                              size: "lg",
+                                              textOverflow: "ellipsis",
+                                              whiteSpace: "nowrap",
+                                              children: B
+                                            }
+                                          ),
+                                          I
+                                        ]
+                                      }
+                                    ),
+                                    y === void 0 ? void 0 : /* @__PURE__ */ e(
+                                      k,
+                                      {
+                                        color: o.palette.gray[400],
+                                        overflow: "hidden",
+                                        size: "md",
+                                        textOverflow: "ellipsis",
+                                        whiteSpace: "nowrap",
+                                        children: y
+                                      }
+                                    )
+                                  ]
                                 }
-                              ),
-                              S
+                              )
                             ]
                           }
                         ),
-                        b
+                        W
                       ]
                     }
                   ),
-                  /* @__PURE__ */ a(i, { display: "flex", gap: 0.25, children: [
-                    C?.map(
+                  /* @__PURE__ */ t(i, { display: "flex", gap: 0.25, children: [
+                    D?.map(
                       ({
                         disabled: r,
-                        icon: o,
+                        icon: n,
                         iconColor: s,
                         shadow: c,
-                        tooltip: z,
+                        tooltip: j,
                         onClick: E
                       }) => /* @__PURE__ */ e(
-                        x,
+                        $,
                         {
                           disabled: r,
-                          icon: o ?? "paper-plane",
-                          iconColor: s ?? t.palette.gray[400],
+                          icon: n ?? "paper-plane",
+                          iconColor: s ?? o.palette.gray[400],
                           iconSize: "sm",
                           iconType: "fa-light",
                           onClick: E,
                           shadow: c,
-                          tooltip: z,
+                          tooltip: j,
                           variant: "ghost"
                         },
-                        `${p}-${o}`
+                        `${d}-${n}`
                       )
                     ),
-                    l ? /* @__PURE__ */ e(
-                      x,
+                    a ? /* @__PURE__ */ e(
+                      $,
                       {
                         icon: "xmark",
-                        iconColor: t.palette.gray[400],
+                        iconColor: o.palette.gray[400],
                         iconSize: "sm",
                         iconType: "fa-light",
-                        id: `${p}-close`,
-                        onClick: d,
+                        id: `${d}-close`,
+                        onClick: p,
                         variant: "ghost"
                       }
                     ) : void 0
@@ -179,13 +212,13 @@ const re = ({
                 ]
               }
             ),
-            f ? /* @__PURE__ */ e(i, { display: "flex", pt: 0.25, width: "100%", children: /* @__PURE__ */ e(F, { items: f }) }) : void 0,
-            /* @__PURE__ */ e(K, { children: T }),
-            m || h ? /* @__PURE__ */ a(
+            g ? /* @__PURE__ */ e(i, { display: "flex", pt: 0.25, width: "100%", children: /* @__PURE__ */ e(H, { items: g }) }) : void 0,
+            /* @__PURE__ */ e(A, { children: S }),
+            m || h ? /* @__PURE__ */ t(
               i,
               {
                 alignSelf: "stretch",
-                borderTop: `1px solid ${t.palette.gray[300]}`,
+                borderTop: `1px solid ${o.palette.gray[300]}`,
                 display: "flex",
                 flexDirection: "column",
                 gap: 0.75,
@@ -200,16 +233,16 @@ const re = ({
                       gap: 0.5,
                       justify: "end",
                       width: "100%",
-                      children: m.map(({ icon: r, text: o, onClick: s }, c) => /* @__PURE__ */ e(
-                        q,
+                      children: m.map(({ icon: r, text: n, onClick: s }, c) => /* @__PURE__ */ e(
+                        F,
                         {
                           icon: r,
                           onClick: s,
                           variant: c === 0 ? "primary" : "tertiary",
                           width: "100%",
-                          children: o
+                          children: n
                         },
-                        `${c}-${o}`
+                        `${c}-${n}`
                       ))
                     }
                   ) : void 0
@@ -221,10 +254,10 @@ const re = ({
       )
     }
   );
-  return n.isOpen ? k ? W(
-    v,
-    document.getElementById($) ?? document.body
-  ) : v : null;
+  return l.isOpen ? T ? L(
+    x,
+    document.getElementById(C) ?? document.body
+  ) : x : null;
 };
 export {
   re as Drawer

package/dist/components/drawer/types.d.ts

@@ -46,6 +46,7 @@ interface IDrawerButtonProps extends Partial<IIconModifiable> {
  * @property { IUseModal } modalRef - The drawer reference.
  * @property { TDrawerSide } [side] - Viewport edge the drawer docks to.
  * @property { TDrawerSize } [size] - The size of the drawer.
+ * @property { string } [subtitle] - Text shown under the title, beside the title icon.
  * @property { ITabProps[] } [tabs] - The tab items.
  * @property { string } title - The title of the drawer.
  * @property { IIconModifiable["icon"] } [titleIcon] - Icon shown beside the title.
@@ -64,6 +65,7 @@ interface IDrawerProps {
     modalRef: IUseModal;
     side?: TDrawerSide;
     size?: TDrawerSize;
+    subtitle?: string;
     tabs?: ITabProps[];
     title: string;
     titleIcon?: IIconModifiable["icon"];

package/dist/components/inputs/fields/combobox/option/index.js

@@ -1,5 +1,5 @@
 import { jsx as l, jsxs as G } from "react/jsx-runtime";
-import { useRef as H, useMemo as f, useCallback as k } from "react";
+import { useRef as H, useMemo as k, useCallback as f } from "react";
 import { useOption as J } from "../../../../../node_modules/react-aria/dist/private/listbox/useOption.js";
 import { useTheme as Q } from "styled-components";
 import { StyledOption as W } from "../styles.js";
@@ -13,7 +13,7 @@ import "../../../../typography/span/index.js";
 import { Text as I } from "../../../../typography/text/index.js";
 import { useClickOutside as V } from "../../../../../hooks/use-click-outside.js";
 import { openUrl as oo } from "../../../../../utils/open-url.js";
-const Co = ({
+const $o = ({
   allItemKeys: a,
   containerRef: D,
   item: o,
@@ -23,52 +23,52 @@ const Co = ({
   setInputValue: i,
   setValue: n,
   state: c,
-  tag: C,
+  tag: $,
   watch: h
 }) => {
-  const z = Q(), y = H(null), d = o.props.hrefLang, g = c.disabledKeys, A = a.filter(
+  const z = Q(), y = H(null), d = o.props.hrefLang, g = c.disabledKeys, C = a.filter(
     (r) => !Array.from(g).includes(r) && r !== "All"
-  ), { optionProps: F, isSelected: $, isFocused: q, isDisabled: O } = J(
+  ), { optionProps: F, isSelected: A, isFocused: q, isDisabled: O } = J(
     { key: o.key },
     c,
     y
-  ), m = f(() => c.collection.getItem("All")?.rendered?.toString(), [c.collection]), B = [
-    $ ? "selected" : "",
+  ), b = k(() => c.collection.getItem("All")?.rendered?.toString(), [c.collection]), B = [
+    A ? "selected" : "",
     q ? "focused" : "",
     O ? "disabled" : ""
-  ].join(" "), b = k(
+  ].join(" "), S = f(
     (r) => {
       const { allSelected: t, text: p } = X(
         r,
         a,
         g,
-        m
+        b
       );
       n?.(`${e}CheckAll`, t ? p : ""), i(p);
     },
-    [a, m, g, e, i, n]
-  ), K = k(
+    [a, b, g, e, i, n]
+  ), K = f(
     (r) => {
       if (r.target.checked) {
-        const t = [...A].sort();
+        const t = [...C].sort();
         n?.(`${e}Options`, t), n?.(`${e}CheckAll`, r.target.value), i(r.target.value);
       } else
         n?.(`${e}Options`, []), n?.(`${e}CheckAll`, ""), i("");
     },
-    [A, e, i, n]
-  ), M = k(
+    [C, e, i, n]
+  ), M = f(
     (r) => {
       const t = r.target.value, p = j(h?.(`${e}Options`)), T = r.target.checked ? [...p, t] : p.filter((E) => E !== t);
-      n?.(`${e}Options`, T), b(T);
+      n?.(`${e}Options`, T), S(T);
     },
-    [e, n, h, b]
-  ), S = h?.(`${e}Options`), v = f(
-    () => j(S),
-    [S]
-  ), N = f(
+    [e, n, h, S]
+  ), m = h?.(`${e}Options`), v = k(
+    () => j(m),
+    [m]
+  ), N = k(
     () => v.includes(o.key.toString()),
     [v, o.key]
-  ), x = h?.(`${e}CheckAll`), P = f(() => !!x, [x]), R = o.key === "All" ? /* @__PURE__ */ l(
+  ), x = h?.(`${e}CheckAll`), P = k(() => !!x, [x]), R = o.key === "All" ? /* @__PURE__ */ l(
     u,
     {
       checked: P,
@@ -95,7 +95,7 @@ const Co = ({
       whiteSpace: "nowrap",
       children: o.rendered
     }
-  ), U = k(
+  ), U = f(
     (r) => {
       r.preventDefault(), i(o.rendered?.toString() ?? ""), c.setSelectedKey(o.key), requestAnimationFrame(() => {
         c.setOpen(!1);
@@ -111,15 +111,16 @@ const Co = ({
       ...!s && !d ? F : {},
       $multiSelection: s,
       className: B,
+      "data-testid": `${e}-option-${o.key}`,
       ref: y,
       children: [
         d ? /* @__PURE__ */ l(Z, { href: d, onClick: U, children: L }) : L,
-        $ && !O && !s ? /* @__PURE__ */ l(Y, { icon: "check", iconSize: "sm", iconType: "fa-light" }) : void 0,
-        C === void 0 ? void 0 : /* @__PURE__ */ l(_, { tagLabel: C, variant: "inactive" })
+        A && !O && !s ? /* @__PURE__ */ l(Y, { icon: "check", iconSize: "sm", iconType: "fa-light" }) : void 0,
+        $ === void 0 ? void 0 : /* @__PURE__ */ l(_, { tagLabel: $, variant: "inactive" })
       ]
     }
   );
 };
 export {
-  Co as Option
+  $o as Option
 };

package/dist/components/inputs/fields/text-input/index.d.ts

@@ -1,3 +1,3 @@
 import { IInputProps } from '../../types';
-declare const TextInput: ({ disabled, hasIcon, helpLink, helpLinkText, helpText, error, id, indexArray, isValid, isTouched, label, name, maskValue, maxLength, onPaste, placeholder, removeItemArray, register, suggestions, tooltip, type, weight, ...rest }: Readonly<IInputProps>) => JSX.Element;
+declare const TextInput: ({ disabled, hasIcon, helpLink, helpLinkText, helpText, error, id, indexArray, isValid, isTouched, label, name, maskValue, maxLength, onPaste, placeholder, removeItemArray, register, suggestions, tooltip, type, warning, weight, ...rest }: Readonly<IInputProps>) => JSX.Element;
 export { TextInput };

package/dist/components/inputs/fields/text-input/index.js

@@ -1,125 +1,136 @@
-import { jsxs as C, jsx as e } from "react/jsx-runtime";
-import { useState as g, useCallback as y } from "react";
-import { useTheme as J } from "styled-components";
-import { OutlineContainer as L } from "../../outline-container/index.js";
-import { StyledTextInputContainer as P } from "../../styles.js";
-import { Icon as s } from "../../../icon/index.js";
+import { jsxs as m, jsx as i } from "react/jsx-runtime";
+import { useState as y, useCallback as w } from "react";
+import { useTheme as P } from "styled-components";
+import { OutlineContainer as Q } from "../../outline-container/index.js";
+import { StyledTextInputContainer as U } from "../../styles.js";
+import { Icon as c } from "../../../icon/index.js";
 import { IconButton as x } from "../../../icon-button/index.js";
-const oo = ({
+const eo = ({
   disabled: t = !1,
-  hasIcon: T = !1,
-  helpLink: S,
+  hasIcon: S = !1,
+  helpLink: T,
   helpLinkText: $,
-  helpText: w,
-  error: z,
-  id: I,
-  indexArray: p = 0,
-  isValid: k,
-  isTouched: R,
-  label: j,
-  name: i,
-  maskValue: d = !1,
-  maxLength: q,
-  onPaste: B,
-  placeholder: D,
-  removeItemArray: u,
-  register: h,
-  suggestions: n,
+  helpText: z,
+  error: I,
+  id: k,
+  indexArray: d = 0,
+  isValid: R,
+  isTouched: j,
+  label: q,
+  name: e,
+  maskValue: u = !1,
+  maxLength: B,
+  onPaste: D,
+  placeholder: M,
+  removeItemArray: h,
+  register: g,
+  suggestions: l,
   tooltip: N,
   type: _ = "text",
-  weight: b,
+  warning: E,
+  weight: F,
   ...f
 }) => {
-  const { required: l, onBlur: E, onChange: F } = f, r = J(), a = t ? void 0 : z, [K, M] = g(""), [c, O] = g(!1), V = d ? c ? "text" : "password" : _, G = y(() => {
-    O((o) => !o);
+  const { required: s, onBlur: K, onChange: O } = f, n = P(), a = t ? void 0 : I, r = t || a ? void 0 : E, [V, b] = y(""), [p, G] = y(!1), H = u ? p ? "text" : "password" : _, J = w(() => {
+    G((o) => !o);
   }, []), v = (o) => {
-    M(o.target.value), F?.(o);
-  }, m = k && R && !t && K.trim() !== "", H = y(
+    b(o.target.value), O?.(o);
+  }, C = R && j && !t && r === void 0 && V.trim() !== "", L = w(
     (o) => {
       o.key === "Enter" && o.preventDefault();
     },
     []
   );
-  return /* @__PURE__ */ C(
-    L,
+  return /* @__PURE__ */ m(
+    Q,
     {
       error: a,
-      helpLink: S,
+      helpLink: T,
       helpLinkText: $,
-      helpText: w,
-      htmlFor: i,
-      label: j,
-      required: l,
+      helpText: z,
+      htmlFor: e,
+      label: q,
+      required: s,
       tooltip: N,
-      weight: b,
+      warning: r,
+      weight: F,
       children: [
-        /* @__PURE__ */ C(
-          P,
+        /* @__PURE__ */ m(
+          U,
           {
             className: `
-          ${t ? "disabled" : ""} ${a ? "error" : ""} ${m ? "success" : ""}
+          ${t ? "disabled" : ""} ${a ? "error" : ""} ${r ? "warning" : ""} ${C ? "success" : ""}
         `,
             children: [
-              T ? /* @__PURE__ */ e(s, { icon: "user", iconSize: "xl", iconType: "fa-light" }) : void 0,
-              /* @__PURE__ */ e(
+              S ? /* @__PURE__ */ i(c, { icon: "user", iconSize: "xl", iconType: "fa-light" }) : void 0,
+              /* @__PURE__ */ i(
                 "input",
                 {
                   "aria-hidden": !1,
                   "aria-invalid": a ? "true" : "false",
-                  "aria-label": i,
-                  "aria-required": l,
+                  "aria-label": e,
+                  "aria-required": s,
                   autoComplete: "off",
-                  "data-testid": `${i}-input`,
+                  "data-testid": `${e}-input`,
                   disabled: t,
-                  id: i,
-                  list: n ? `list_${i}` : void 0,
-                  maxLength: q,
-                  onKeyDown: H,
-                  onPaste: B,
-                  placeholder: D,
-                  type: V,
-                  ...h ? h(i, { required: l, onBlur: E, onChange: v }) : { ...f, onChange: v }
+                  id: e,
+                  list: l ? `list_${e}` : void 0,
+                  maxLength: B,
+                  onKeyDown: L,
+                  onPaste: D,
+                  placeholder: M,
+                  type: H,
+                  ...g ? g(e, { required: s, onBlur: K, onChange: v }) : { ...f, onChange: v }
                 }
               ),
-              a ? /* @__PURE__ */ e(
-                s,
+              a ? /* @__PURE__ */ i(
+                c,
                 {
                   icon: "exclamation-circle",
                   iconClass: "error-icon",
-                  iconColor: r.palette.error[500],
+                  iconColor: n.palette.error[500],
                   iconSize: "lg"
                 }
               ) : void 0,
-              m ? /* @__PURE__ */ e(
-                s,
+              r ? /* @__PURE__ */ i(
+                c,
+                {
+                  icon: "triangle-exclamation",
+                  iconClass: "warning-icon",
+                  iconColor: n.palette.warning[500],
+                  iconSize: "lg"
+                }
+              ) : void 0,
+              C ? /* @__PURE__ */ i(
+                c,
                 {
                   icon: "check-circle",
                   iconClass: "success-icon",
-                  iconColor: r.palette.success[500],
+                  iconColor: n.palette.success[500],
                   iconSize: "lg"
                 }
               ) : void 0,
-              I === "array" && p > 0 ? /* @__PURE__ */ e(
+              k === "array" && d > 0 ? /* @__PURE__ */ i(
                 x,
                 {
-                  color: r.palette.gray[400],
+                  color: n.palette.gray[400],
                   icon: "trash",
                   iconSize: "sm",
                   iconType: "fa-light",
-                  onClick: u ? u(p) : void 0,
+                  onClick: h ? h(d) : void 0,
                   variant: "ghost"
                 }
               ) : void 0,
-              d ? /* @__PURE__ */ e(
+              u ? /* @__PURE__ */ i(
                 x,
                 {
-                  "aria-label": c ? "hide password" : "show password",
+                  "aria-label": p ? "hide password" : "show password",
                   className: "toggle-divider",
-                  icon: c ? "eye-slash" : "eye",
-                  iconColor: r.palette.gray[800],
+                  icon: p ? "eye-slash" : "eye",
+                  iconColor: n.palette.gray[800],
                   iconSize: "lg",
                   iconType: "fa-light",
-                  onClick: G,
+                  onClick: J,
                   py: 0,
                   variant: "ghost"
                 }
@@ -127,11 +138,11 @@ const oo = ({
             ]
           }
         ),
-        n ? /* @__PURE__ */ e("datalist", { id: `list_${i}`, children: n.map((o) => /* @__PURE__ */ e("option", { value: o }, o)) }) : void 0
+        l ? /* @__PURE__ */ i("datalist", { id: `list_${e}`, children: l.map((o) => /* @__PURE__ */ i("option", { value: o }, o)) }) : void 0
       ]
     }
   );
 };
 export {
-  oo as TextInput
+  eo as TextInput
 };

package/dist/components/inputs/outline-container/index.d.ts

@@ -1,6 +1,6 @@
 import { MutableRefObject, PropsWithChildren } from 'react';
 import { IOutlineContainerProps } from '../types';
-declare const OutlineContainer: ({ children, containerRef, disabled, id, error, helpLink, helpLinkText, helpText, htmlFor, label, linkPosition, maxLength, required, tooltip, value, weight, }: Readonly<PropsWithChildren<IOutlineContainerProps & {
+declare const OutlineContainer: ({ children, containerRef, disabled, id, error, helpLink, helpLinkText, helpText, htmlFor, label, linkPosition, maxLength, required, tooltip, value, warning, weight, }: Readonly<PropsWithChildren<IOutlineContainerProps & {
     containerRef?: MutableRefObject<HTMLDivElement | null>;
 }>>) => JSX.Element;
 export { OutlineContainer };

package/dist/components/inputs/outline-container/index.js

@@ -1,109 +1,121 @@
-import { jsxs as e, jsx as i, Fragment as j } from "react/jsx-runtime";
-import { useTheme as z } from "styled-components";
-import { Label as $ } from "../label/index.js";
-import { StyledOutlineContainer as x } from "../styles.js";
-import { Container as s } from "../../container/index.js";
-import { Icon as I } from "../../icon/index.js";
+import { jsxs as n, jsx as i, Fragment as j } from "react/jsx-runtime";
+import { useTheme as k } from "styled-components";
+import { Label as x } from "../label/index.js";
+import { StyledOutlineContainer as I } from "../styles.js";
+import { Container as f } from "../../container/index.js";
+import { Icon as N } from "../../icon/index.js";
 import { Link as O } from "../../link/index.js";
 import { Tag as S } from "../../tag/index.js";
 import "../../typography/heading/index.js";
 import "../../typography/span/index.js";
-import { Text as p } from "../../typography/text/index.js";
-const J = ({
-  children: f,
-  containerRef: y,
-  disabled: g,
-  id: v,
+import { Text as l } from "../../typography/text/index.js";
+const L = ({
+  children: g,
+  containerRef: v,
+  disabled: y,
+  id: w,
   error: o,
-  helpLink: r,
+  helpLink: e,
   helpLinkText: h = "Link here",
-  helpText: t,
-  htmlFor: m,
-  label: a,
-  linkPosition: c = "down",
-  maxLength: n,
+  helpText: a,
+  htmlFor: d,
+  label: m,
+  linkPosition: s = "down",
+  maxLength: c,
   required: u,
-  tooltip: w,
-  value: l,
-  weight: b
+  tooltip: b,
+  value: p,
+  warning: z,
+  weight: C
 }) => {
-  const d = z(), C = l ? l.length : 0;
-  return /* @__PURE__ */ e(x, { id: v, ref: y, children: [
-    a === void 0 ? void 0 : /* @__PURE__ */ i(
-      $,
+  const r = k(), $ = p ? p.length : 0, t = o ? void 0 : z;
+  return /* @__PURE__ */ n(I, { id: w, ref: v, children: [
+    m === void 0 ? void 0 : /* @__PURE__ */ i(
+      x,
       {
-        htmlFor: m,
-        label: a,
-        link: c === "up" ? r : void 0,
+        htmlFor: d,
+        label: m,
+        link: s === "up" ? e : void 0,
         required: u,
-        tooltip: w,
-        weight: b
+        tooltip: b,
+        weight: C
       }
     ),
-    f,
-    o || n ? /* @__PURE__ */ e(
-      s,
+    g,
+    o || t || c ? /* @__PURE__ */ n(
+      f,
       {
         display: "flex",
-        justify: o === void 0 ? "end" : "space-between",
+        justify: o === void 0 && t === void 0 ? "end" : "space-between",
         width: "100%",
         children: [
           o && /* @__PURE__ */ i(
-            p,
+            l,
             {
               className: "error-msg",
-              color: d.palette.error[500],
-              "data-testid": `${m}-error`,
+              color: r.palette.error[500],
+              "data-testid": `${d}-error`,
               display: "block",
               size: "md",
               children: o
             }
           ),
-          n && /* @__PURE__ */ i(
+          t && /* @__PURE__ */ i(
+            l,
+            {
+              className: "warning-msg",
+              color: r.palette.warning[700],
+              "data-testid": `${d}-warning`,
+              display: "block",
+              size: "md",
+              children: t
+            }
+          ),
+          c && /* @__PURE__ */ i(
             S,
             {
               priority: "low",
-              tagLabel: `${C}/${n}`,
-              variant: g ? "inactive" : "error"
+              tagLabel: `${$}/${c}`,
+              variant: y ? "inactive" : "error"
             }
           )
         ]
       }
     ) : void 0,
-    t || r ? /* @__PURE__ */ e(
-      s,
+    a || e ? /* @__PURE__ */ n(
+      f,
       {
         alignItems: "center",
         display: "flex",
         gap: 0.25,
         width: "100%",
         children: [
-          t && /* @__PURE__ */ e(j, { children: [
+          a && /* @__PURE__ */ n(j, { children: [
             /* @__PURE__ */ i(
-              I,
+              N,
               {
                 icon: "circle-info",
-                iconColor: d.palette.gray[400],
+                iconColor: r.palette.gray[400],
                 iconSize: "sm",
                 iconType: "fa-light"
               }
             ),
             /* @__PURE__ */ i(
-              p,
+              l,
               {
-                color: d.palette.gray[400],
+                color: r.palette.gray[400],
                 display: "inline-block",
                 size: "md",
-                children: t
+                children: a
               }
             )
           ] }),
-          r && c === "down" ? /* @__PURE__ */ i(O, { href: r, children: h }) : void 0
+          e && s === "down" ? /* @__PURE__ */ i(O, { href: e, children: h }) : void 0
         ]
       }
     ) : void 0
   ] });
 };
 export {
-  J as OutlineContainer
+  L as OutlineContainer
 };

package/dist/components/inputs/styles.js

@@ -1,5 +1,5 @@
 import { styled as o } from "styled-components";
-const n = o.div`
+const a = o.div`
   ${({ theme: t }) => `
     align-items: flex-start;
     display: inline-flex;
@@ -192,6 +192,14 @@ const n = o.div`
       }
     }
 
+    &.warning:not(.disabled) {
+      border: 1px solid ${t.palette.warning[500]};
+
+      .toggle-divider {
+        border-left-color: ${t.palette.warning[500]};
+      }
+    }
+
     &.success:not(.disabled) {
       border: 1px solid ${t.palette.success[500]};
 
@@ -200,7 +208,7 @@ const n = o.div`
       }
     }
 
-    &:focus-within:not(:has(.toggle-divider:focus)):not(.disabled, .error) {
+    &:focus-within:not(:has(.toggle-divider:focus)):not(.disabled, .error, .warning) {
       background: ${t.palette.white};
       border: 1px solid ${t.palette.black};
       box-shadow: 0 0 0 1px ${t.palette.black};
@@ -219,7 +227,7 @@ const n = o.div`
       }
     }
 
-    &:hover:not(:has(.toggle-divider:hover)):not(:focus-within, .disabled, .error, .success) {
+    &:hover:not(:has(.toggle-divider:hover)):not(:focus-within, .disabled, .error, .warning, .success) {
       background: ${t.palette.white};
       border: 1px solid ${t.palette.gray[600]};
 
@@ -228,18 +236,18 @@ const n = o.div`
       }
     }
   `}
-`, s = o.div`
+`, l = o.div`
   height: 1px;
   background-color: ${({ theme: t }) => t.palette.gray[300]};
   flex-shrink: 0;
   transition: background-color 0.2s ease;
 
-  ${e}:hover:not(:has(.toggle-divider:hover)):not(:focus-within, .disabled, .error, .success) & {
+  ${e}:hover:not(:has(.toggle-divider:hover)):not(:focus-within, .disabled, .error, .warning, .success) & {
     background-color: ${({ theme: t }) => t.palette.gray[600]};
     transition: none;
   }
 
-  ${e}:focus-within:not(:has(.toggle-divider:focus)):not(.disabled, .error) & {
+  ${e}:focus-within:not(:has(.toggle-divider:focus)):not(.disabled, .error, .warning) & {
     border: 1px solid ${({ theme: t }) => t.palette.black};
   }
 `, p = o.div`
@@ -258,7 +266,7 @@ const n = o.div`
 `;
 export {
   p as ErrorMessage,
-  s as StyledNumberFieldSeparator,
-  n as StyledOutlineContainer,
+  l as StyledNumberFieldSeparator,
+  a as StyledOutlineContainer,
   e as StyledTextInputContainer
 };

package/dist/components/inputs/types.d.ts

@@ -41,6 +41,7 @@ interface ILabelProps {
  * @property {string} [helpLinkText] - The help link text of the input.
  * @property {string} [helpText] - The help text of the input.
  * @property {number} [maxLength] - The max length of the input.
+ * @property {string} [warning] - A non-blocking message shown when there is no error.
  */
 interface IOutlineContainerProps extends ILabelProps {
     disabled?: boolean;
@@ -52,6 +53,7 @@ interface IOutlineContainerProps extends ILabelProps {
     helpText?: string;
     maxLength?: number;
     value?: string;
+    warning?: string;
 }
 /**
  * Input text component props.

package/package.json

@@ -57,7 +57,7 @@
     "eslint-plugin-react-hooks": "7.1.1",
     "eslint-plugin-storybook": "10.4.0",
     "jsdom": "27.4.0",
-    "next": "16.3.7",
+    "next": "16.3.8",
     "playwright": "1.60.0",
     "postcss-styled-syntax": "0.7.1",
     "prettier": "3.9.6",
@@ -135,5 +135,5 @@
     "./dist/index.js"
   ],
   "typings": "./dist/index.d.ts",
-  "version": "9.3.3"
+  "version": "9.5.0"
 }