@fluidattacks/design 9.4.0 → 9.5.1

package/dist/components/card/card-with-image/index.stories.d.ts

@@ -44,7 +44,7 @@ declare const Default: {
     render?: import('storybook/internal/csf').ArgsStoryFn<import('@storybook/react').ReactRenderer, {
         itemsProps: ICardWithImageProps[];
     }> | undefined;
-    tags?: import('storybook/internal/csf').Tag[];
+    tags?: string[] | undefined;
     mount?: ((context: import('storybook/internal/csf').StoryContext<import('@storybook/react').ReactRenderer, {
         itemsProps: ICardWithImageProps[];
     }>) => (ui?: import("react").JSX.Element) => Promise<import('storybook/internal/csf').Canvas>) | undefined;
@@ -53,7 +53,7 @@ declare const Default: {
     play?: import('storybook/internal/csf').PlayFunction<import('@storybook/react').ReactRenderer, {
         itemsProps: ICardWithImageProps[];
     }> | undefined;
-    globals?: import('storybook/internal/csf').Globals | undefined;
+    globals?: Partial<import('storybook/internal/csf').Globals> | undefined;
     story?: Omit<import('storybook/internal/csf').StoryAnnotations<import('@storybook/react').ReactRenderer, {
         itemsProps: ICardWithImageProps[];
     }, Partial<{

package/dist/components/card/card-with-input/index.stories.d.ts

@@ -35,7 +35,7 @@ declare const Default: {
     render?: import('storybook/internal/csf').ArgsStoryFn<import('@storybook/react').ReactRenderer, {
         props: ICardWithInputProps;
     }> | undefined;
-    tags?: import('storybook/internal/csf').Tag[];
+    tags?: string[] | undefined;
     mount?: ((context: import('storybook/internal/csf').StoryContext<import('@storybook/react').ReactRenderer, {
         props: ICardWithInputProps;
     }>) => (ui?: import("react").JSX.Element) => Promise<import('storybook/internal/csf').Canvas>) | undefined;
@@ -44,7 +44,7 @@ declare const Default: {
     play?: import('storybook/internal/csf').PlayFunction<import('@storybook/react').ReactRenderer, {
         props: ICardWithInputProps;
     }> | undefined;
-    globals?: import('storybook/internal/csf').Globals | undefined;
+    globals?: Partial<import('storybook/internal/csf').Globals> | undefined;
     story?: Omit<import('storybook/internal/csf').StoryAnnotations<import('@storybook/react').ReactRenderer, {
         props: ICardWithInputProps;
     }, Partial<{
@@ -86,7 +86,7 @@ declare const WithTitle: {
     render?: import('storybook/internal/csf').ArgsStoryFn<import('@storybook/react').ReactRenderer, {
         props: ICardWithInputProps;
     }> | undefined;
-    tags?: import('storybook/internal/csf').Tag[];
+    tags?: string[] | undefined;
     mount?: ((context: import('storybook/internal/csf').StoryContext<import('@storybook/react').ReactRenderer, {
         props: ICardWithInputProps;
     }>) => (ui?: import("react").JSX.Element) => Promise<import('storybook/internal/csf').Canvas>) | undefined;
@@ -95,7 +95,7 @@ declare const WithTitle: {
     play?: import('storybook/internal/csf').PlayFunction<import('@storybook/react').ReactRenderer, {
         props: ICardWithInputProps;
     }> | undefined;
-    globals?: import('storybook/internal/csf').Globals | undefined;
+    globals?: Partial<import('storybook/internal/csf').Globals> | undefined;
     story?: Omit<import('storybook/internal/csf').StoryAnnotations<import('@storybook/react').ReactRenderer, {
         props: ICardWithInputProps;
     }, Partial<{
@@ -137,7 +137,7 @@ declare const WithIcon: {
     render?: import('storybook/internal/csf').ArgsStoryFn<import('@storybook/react').ReactRenderer, {
         props: ICardWithInputProps;
     }> | undefined;
-    tags?: import('storybook/internal/csf').Tag[];
+    tags?: string[] | undefined;
     mount?: ((context: import('storybook/internal/csf').StoryContext<import('@storybook/react').ReactRenderer, {
         props: ICardWithInputProps;
     }>) => (ui?: import("react").JSX.Element) => Promise<import('storybook/internal/csf').Canvas>) | undefined;
@@ -146,7 +146,7 @@ declare const WithIcon: {
     play?: import('storybook/internal/csf').PlayFunction<import('@storybook/react').ReactRenderer, {
         props: ICardWithInputProps;
     }> | undefined;
-    globals?: import('storybook/internal/csf').Globals | undefined;
+    globals?: Partial<import('storybook/internal/csf').Globals> | undefined;
     story?: Omit<import('storybook/internal/csf').StoryAnnotations<import('@storybook/react').ReactRenderer, {
         props: ICardWithInputProps;
     }, Partial<{
@@ -189,7 +189,7 @@ declare const InputAlignStart: {
     render?: import('storybook/internal/csf').ArgsStoryFn<import('@storybook/react').ReactRenderer, {
         props: ICardWithInputProps;
     }> | undefined;
-    tags?: import('storybook/internal/csf').Tag[];
+    tags?: string[] | undefined;
     mount?: ((context: import('storybook/internal/csf').StoryContext<import('@storybook/react').ReactRenderer, {
         props: ICardWithInputProps;
     }>) => (ui?: import("react").JSX.Element) => Promise<import('storybook/internal/csf').Canvas>) | undefined;
@@ -198,7 +198,7 @@ declare const InputAlignStart: {
     play?: import('storybook/internal/csf').PlayFunction<import('@storybook/react').ReactRenderer, {
         props: ICardWithInputProps;
     }> | undefined;
-    globals?: import('storybook/internal/csf').Globals | undefined;
+    globals?: Partial<import('storybook/internal/csf').Globals> | undefined;
     story?: Omit<import('storybook/internal/csf').StoryAnnotations<import('@storybook/react').ReactRenderer, {
         props: ICardWithInputProps;
     }, Partial<{
@@ -241,7 +241,7 @@ declare const NumberInput: {
     render?: import('storybook/internal/csf').ArgsStoryFn<import('@storybook/react').ReactRenderer, {
         props: ICardWithInputProps;
     }> | undefined;
-    tags?: import('storybook/internal/csf').Tag[];
+    tags?: string[] | undefined;
     mount?: ((context: import('storybook/internal/csf').StoryContext<import('@storybook/react').ReactRenderer, {
         props: ICardWithInputProps;
     }>) => (ui?: import("react").JSX.Element) => Promise<import('storybook/internal/csf').Canvas>) | undefined;
@@ -250,7 +250,7 @@ declare const NumberInput: {
     play?: import('storybook/internal/csf').PlayFunction<import('@storybook/react').ReactRenderer, {
         props: ICardWithInputProps;
     }> | undefined;
-    globals?: import('storybook/internal/csf').Globals | undefined;
+    globals?: Partial<import('storybook/internal/csf').Globals> | undefined;
     story?: Omit<import('storybook/internal/csf').StoryAnnotations<import('@storybook/react').ReactRenderer, {
         props: ICardWithInputProps;
     }, Partial<{
@@ -292,7 +292,7 @@ declare const DateInput: {
     render?: import('storybook/internal/csf').ArgsStoryFn<import('@storybook/react').ReactRenderer, {
         props: ICardWithInputProps;
     }> | undefined;
-    tags?: import('storybook/internal/csf').Tag[];
+    tags?: string[] | undefined;
     mount?: ((context: import('storybook/internal/csf').StoryContext<import('@storybook/react').ReactRenderer, {
         props: ICardWithInputProps;
     }>) => (ui?: import("react").JSX.Element) => Promise<import('storybook/internal/csf').Canvas>) | undefined;
@@ -301,7 +301,7 @@ declare const DateInput: {
     play?: import('storybook/internal/csf').PlayFunction<import('@storybook/react').ReactRenderer, {
         props: ICardWithInputProps;
     }> | undefined;
-    globals?: import('storybook/internal/csf').Globals | undefined;
+    globals?: Partial<import('storybook/internal/csf').Globals> | undefined;
     story?: Omit<import('storybook/internal/csf').StoryAnnotations<import('@storybook/react').ReactRenderer, {
         props: ICardWithInputProps;
     }, Partial<{
@@ -348,7 +348,7 @@ declare const ComboBox: {
     render?: import('storybook/internal/csf').ArgsStoryFn<import('@storybook/react').ReactRenderer, {
         props: ICardWithInputProps;
     }> | undefined;
-    tags?: import('storybook/internal/csf').Tag[];
+    tags?: string[] | undefined;
     mount?: ((context: import('storybook/internal/csf').StoryContext<import('@storybook/react').ReactRenderer, {
         props: ICardWithInputProps;
     }>) => (ui?: import("react").JSX.Element) => Promise<import('storybook/internal/csf').Canvas>) | undefined;
@@ -357,7 +357,7 @@ declare const ComboBox: {
     play?: import('storybook/internal/csf').PlayFunction<import('@storybook/react').ReactRenderer, {
         props: ICardWithInputProps;
     }> | undefined;
-    globals?: import('storybook/internal/csf').Globals | undefined;
+    globals?: Partial<import('storybook/internal/csf').Globals> | undefined;
     story?: Omit<import('storybook/internal/csf').StoryAnnotations<import('@storybook/react').ReactRenderer, {
         props: ICardWithInputProps;
     }, Partial<{

package/dist/components/card/indicator-card/index.stories.d.ts

@@ -39,12 +39,12 @@ declare const Default: {
     beforeEach?: import('storybook/internal/csf').BeforeEach<import('@storybook/react').ReactRenderer, Readonly<IIndicatorCardProps>> | import('storybook/internal/csf').BeforeEach<import('@storybook/react').ReactRenderer, Readonly<IIndicatorCardProps>>[] | undefined;
     afterEach?: import('storybook/internal/csf').AfterEach<import('@storybook/react').ReactRenderer, Readonly<IIndicatorCardProps>> | import('storybook/internal/csf').AfterEach<import('@storybook/react').ReactRenderer, Readonly<IIndicatorCardProps>>[] | undefined;
     render?: import('storybook/internal/csf').ArgsStoryFn<import('@storybook/react').ReactRenderer, Readonly<IIndicatorCardProps>> | undefined;
-    tags?: import('storybook/internal/csf').Tag[];
+    tags?: string[] | undefined;
     mount?: ((context: import('storybook/internal/csf').StoryContext<import('@storybook/react').ReactRenderer, Readonly<IIndicatorCardProps>>) => (ui?: import("react").JSX.Element) => Promise<import('storybook/internal/csf').Canvas>) | undefined;
     name?: import('storybook/internal/csf').StoryName;
     storyName?: import('storybook/internal/csf').StoryName;
     play?: import('storybook/internal/csf').PlayFunction<import('@storybook/react').ReactRenderer, Readonly<IIndicatorCardProps>> | undefined;
-    globals?: import('storybook/internal/csf').Globals | undefined;
+    globals?: Partial<import('storybook/internal/csf').Globals> | undefined;
     story?: Omit<import('storybook/internal/csf').StoryAnnotations<import('@storybook/react').ReactRenderer, Readonly<IIndicatorCardProps>, Partial<Readonly<IIndicatorCardProps>>>, "story"> | undefined;
 };
 declare const LeftAligned: {
@@ -85,12 +85,12 @@ declare const LeftAligned: {
     beforeEach?: import('storybook/internal/csf').BeforeEach<import('@storybook/react').ReactRenderer, Readonly<IIndicatorCardProps>> | import('storybook/internal/csf').BeforeEach<import('@storybook/react').ReactRenderer, Readonly<IIndicatorCardProps>>[] | undefined;
     afterEach?: import('storybook/internal/csf').AfterEach<import('@storybook/react').ReactRenderer, Readonly<IIndicatorCardProps>> | import('storybook/internal/csf').AfterEach<import('@storybook/react').ReactRenderer, Readonly<IIndicatorCardProps>>[] | undefined;
     render?: import('storybook/internal/csf').ArgsStoryFn<import('@storybook/react').ReactRenderer, Readonly<IIndicatorCardProps>> | undefined;
-    tags?: import('storybook/internal/csf').Tag[];
+    tags?: string[] | undefined;
     mount?: ((context: import('storybook/internal/csf').StoryContext<import('@storybook/react').ReactRenderer, Readonly<IIndicatorCardProps>>) => (ui?: import("react").JSX.Element) => Promise<import('storybook/internal/csf').Canvas>) | undefined;
     name?: import('storybook/internal/csf').StoryName;
     storyName?: import('storybook/internal/csf').StoryName;
     play?: import('storybook/internal/csf').PlayFunction<import('@storybook/react').ReactRenderer, Readonly<IIndicatorCardProps>> | undefined;
-    globals?: import('storybook/internal/csf').Globals | undefined;
+    globals?: Partial<import('storybook/internal/csf').Globals> | undefined;
     story?: Omit<import('storybook/internal/csf').StoryAnnotations<import('@storybook/react').ReactRenderer, Readonly<IIndicatorCardProps>, Partial<Readonly<IIndicatorCardProps>>>, "story"> | undefined;
 };
 export default config;

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/dist/components/progress-bar/index.stories.d.ts

@@ -42,7 +42,7 @@ declare const Default: {
     render?: import('storybook/internal/csf').ArgsStoryFn<import('@storybook/react').ReactRenderer, {
         itemsProps: IProgressBarProps[];
     }> | undefined;
-    tags?: import('storybook/internal/csf').Tag[];
+    tags?: string[] | undefined;
     mount?: ((context: import('storybook/internal/csf').StoryContext<import('@storybook/react').ReactRenderer, {
         itemsProps: IProgressBarProps[];
     }>) => (ui?: import("react").JSX.Element) => Promise<import('storybook/internal/csf').Canvas>) | undefined;
@@ -51,7 +51,7 @@ declare const Default: {
     play?: import('storybook/internal/csf').PlayFunction<import('@storybook/react').ReactRenderer, {
         itemsProps: IProgressBarProps[];
     }> | undefined;
-    globals?: import('storybook/internal/csf').Globals | undefined;
+    globals?: Partial<import('storybook/internal/csf').Globals> | undefined;
     story?: Omit<import('storybook/internal/csf').StoryAnnotations<import('@storybook/react').ReactRenderer, {
         itemsProps: IProgressBarProps[];
     }, Partial<{
@@ -94,7 +94,7 @@ declare const Compliance: {
     render?: import('storybook/internal/csf').ArgsStoryFn<import('@storybook/react').ReactRenderer, {
         itemsProps: IProgressBarProps[];
     }> | undefined;
-    tags?: import('storybook/internal/csf').Tag[];
+    tags?: string[] | undefined;
     mount?: ((context: import('storybook/internal/csf').StoryContext<import('@storybook/react').ReactRenderer, {
         itemsProps: IProgressBarProps[];
     }>) => (ui?: import("react").JSX.Element) => Promise<import('storybook/internal/csf').Canvas>) | undefined;
@@ -103,7 +103,7 @@ declare const Compliance: {
     play?: import('storybook/internal/csf').PlayFunction<import('@storybook/react').ReactRenderer, {
         itemsProps: IProgressBarProps[];
     }> | undefined;
-    globals?: import('storybook/internal/csf').Globals | undefined;
+    globals?: Partial<import('storybook/internal/csf').Globals> | undefined;
     story?: Omit<import('storybook/internal/csf').StoryAnnotations<import('@storybook/react').ReactRenderer, {
         itemsProps: IProgressBarProps[];
     }, Partial<{
@@ -165,7 +165,7 @@ declare const Variants: {
     render?: import('storybook/internal/csf').ArgsStoryFn<import('@storybook/react').ReactRenderer, {
         itemsProps: IProgressBarProps[];
     }> | undefined;
-    tags?: import('storybook/internal/csf').Tag[];
+    tags?: string[] | undefined;
     mount?: ((context: import('storybook/internal/csf').StoryContext<import('@storybook/react').ReactRenderer, {
         itemsProps: IProgressBarProps[];
     }>) => (ui?: import("react").JSX.Element) => Promise<import('storybook/internal/csf').Canvas>) | undefined;
@@ -174,7 +174,7 @@ declare const Variants: {
     play?: import('storybook/internal/csf').PlayFunction<import('@storybook/react').ReactRenderer, {
         itemsProps: IProgressBarProps[];
     }> | undefined;
-    globals?: import('storybook/internal/csf').Globals | undefined;
+    globals?: Partial<import('storybook/internal/csf').Globals> | undefined;
     story?: Omit<import('storybook/internal/csf').StoryAnnotations<import('@storybook/react').ReactRenderer, {
         itemsProps: IProgressBarProps[];
     }, Partial<{

package/dist/components/radio-button/index.stories.d.ts

@@ -42,7 +42,7 @@ declare const Default: {
     render?: import('storybook/internal/csf').ArgsStoryFn<import('@storybook/react').ReactRenderer, {
         itemsProps: IRadioButtonProps[];
     }> | undefined;
-    tags?: import('storybook/internal/csf').Tag[];
+    tags?: string[] | undefined;
     mount?: ((context: import('storybook/internal/csf').StoryContext<import('@storybook/react').ReactRenderer, {
         itemsProps: IRadioButtonProps[];
     }>) => (ui?: import("react").JSX.Element) => Promise<import('storybook/internal/csf').Canvas>) | undefined;
@@ -51,7 +51,7 @@ declare const Default: {
     play?: import('storybook/internal/csf').PlayFunction<import('@storybook/react').ReactRenderer, {
         itemsProps: IRadioButtonProps[];
     }> | undefined;
-    globals?: import('storybook/internal/csf').Globals | undefined;
+    globals?: Partial<import('storybook/internal/csf').Globals> | undefined;
     story?: Omit<import('storybook/internal/csf').StoryAnnotations<import('@storybook/react').ReactRenderer, {
         itemsProps: IRadioButtonProps[];
     }, Partial<{
@@ -101,7 +101,7 @@ declare const Disabled: {
     render?: import('storybook/internal/csf').ArgsStoryFn<import('@storybook/react').ReactRenderer, {
         itemsProps: IRadioButtonProps[];
     }> | undefined;
-    tags?: import('storybook/internal/csf').Tag[];
+    tags?: string[] | undefined;
     mount?: ((context: import('storybook/internal/csf').StoryContext<import('@storybook/react').ReactRenderer, {
         itemsProps: IRadioButtonProps[];
     }>) => (ui?: import("react").JSX.Element) => Promise<import('storybook/internal/csf').Canvas>) | undefined;
@@ -110,7 +110,7 @@ declare const Disabled: {
     play?: import('storybook/internal/csf').PlayFunction<import('@storybook/react').ReactRenderer, {
         itemsProps: IRadioButtonProps[];
     }> | undefined;
-    globals?: import('storybook/internal/csf').Globals | undefined;
+    globals?: Partial<import('storybook/internal/csf').Globals> | undefined;
     story?: Omit<import('storybook/internal/csf').StoryAnnotations<import('@storybook/react').ReactRenderer, {
         itemsProps: IRadioButtonProps[];
     }, Partial<{

package/dist/components/segmented-control/index.stories.d.ts

@@ -30,12 +30,12 @@ declare const Default: {
     beforeEach?: import('storybook/internal/csf').BeforeEach<import('@storybook/react').ReactRenderer, ISegmentedControlProps> | import('storybook/internal/csf').BeforeEach<import('@storybook/react').ReactRenderer, ISegmentedControlProps>[] | undefined;
     afterEach?: import('storybook/internal/csf').AfterEach<import('@storybook/react').ReactRenderer, ISegmentedControlProps> | import('storybook/internal/csf').AfterEach<import('@storybook/react').ReactRenderer, ISegmentedControlProps>[] | undefined;
     render?: import('storybook/internal/csf').ArgsStoryFn<import('@storybook/react').ReactRenderer, ISegmentedControlProps> | undefined;
-    tags?: import('storybook/internal/csf').Tag[];
+    tags?: string[] | undefined;
     mount?: ((context: import('storybook/internal/csf').StoryContext<import('@storybook/react').ReactRenderer, ISegmentedControlProps>) => (ui?: import("react").JSX.Element) => Promise<import('storybook/internal/csf').Canvas>) | undefined;
     name?: import('storybook/internal/csf').StoryName;
     storyName?: import('storybook/internal/csf').StoryName;
     play?: import('storybook/internal/csf').PlayFunction<import('@storybook/react').ReactRenderer, ISegmentedControlProps> | undefined;
-    globals?: import('storybook/internal/csf').Globals | undefined;
+    globals?: Partial<import('storybook/internal/csf').Globals> | undefined;
     story?: Omit<import('storybook/internal/csf').StoryAnnotations<import('@storybook/react').ReactRenderer, ISegmentedControlProps, Partial<ISegmentedControlProps>>, "story"> | undefined;
 };
 declare const WithDisabledOption: {
@@ -72,12 +72,12 @@ declare const WithDisabledOption: {
     beforeEach?: import('storybook/internal/csf').BeforeEach<import('@storybook/react').ReactRenderer, ISegmentedControlProps> | import('storybook/internal/csf').BeforeEach<import('@storybook/react').ReactRenderer, ISegmentedControlProps>[] | undefined;
     afterEach?: import('storybook/internal/csf').AfterEach<import('@storybook/react').ReactRenderer, ISegmentedControlProps> | import('storybook/internal/csf').AfterEach<import('@storybook/react').ReactRenderer, ISegmentedControlProps>[] | undefined;
     render?: import('storybook/internal/csf').ArgsStoryFn<import('@storybook/react').ReactRenderer, ISegmentedControlProps> | undefined;
-    tags?: import('storybook/internal/csf').Tag[];
+    tags?: string[] | undefined;
     mount?: ((context: import('storybook/internal/csf').StoryContext<import('@storybook/react').ReactRenderer, ISegmentedControlProps>) => (ui?: import("react").JSX.Element) => Promise<import('storybook/internal/csf').Canvas>) | undefined;
     name?: import('storybook/internal/csf').StoryName;
     storyName?: import('storybook/internal/csf').StoryName;
     play?: import('storybook/internal/csf').PlayFunction<import('@storybook/react').ReactRenderer, ISegmentedControlProps> | undefined;
-    globals?: import('storybook/internal/csf').Globals | undefined;
+    globals?: Partial<import('storybook/internal/csf').Globals> | undefined;
     story?: Omit<import('storybook/internal/csf').StoryAnnotations<import('@storybook/react').ReactRenderer, ISegmentedControlProps, Partial<ISegmentedControlProps>>, "story"> | undefined;
 };
 declare const Disabled: {
@@ -109,12 +109,12 @@ declare const Disabled: {
     beforeEach?: import('storybook/internal/csf').BeforeEach<import('@storybook/react').ReactRenderer, ISegmentedControlProps> | import('storybook/internal/csf').BeforeEach<import('@storybook/react').ReactRenderer, ISegmentedControlProps>[] | undefined;
     afterEach?: import('storybook/internal/csf').AfterEach<import('@storybook/react').ReactRenderer, ISegmentedControlProps> | import('storybook/internal/csf').AfterEach<import('@storybook/react').ReactRenderer, ISegmentedControlProps>[] | undefined;
     render?: import('storybook/internal/csf').ArgsStoryFn<import('@storybook/react').ReactRenderer, ISegmentedControlProps> | undefined;
-    tags?: import('storybook/internal/csf').Tag[];
+    tags?: string[] | undefined;
     mount?: ((context: import('storybook/internal/csf').StoryContext<import('@storybook/react').ReactRenderer, ISegmentedControlProps>) => (ui?: import("react").JSX.Element) => Promise<import('storybook/internal/csf').Canvas>) | undefined;
     name?: import('storybook/internal/csf').StoryName;
     storyName?: import('storybook/internal/csf').StoryName;
     play?: import('storybook/internal/csf').PlayFunction<import('@storybook/react').ReactRenderer, ISegmentedControlProps> | undefined;
-    globals?: import('storybook/internal/csf').Globals | undefined;
+    globals?: Partial<import('storybook/internal/csf').Globals> | undefined;
     story?: Omit<import('storybook/internal/csf').StoryAnnotations<import('@storybook/react').ReactRenderer, ISegmentedControlProps, Partial<ISegmentedControlProps>>, "story"> | undefined;
 };
 export { Default, Disabled, WithDisabledOption };

package/dist/components/segmented-progress-bar/index.js

@@ -1,50 +1,53 @@
-import { jsx as l } from "react/jsx-runtime";
-import { useTheme as f } from "styled-components";
-import { StyledBarContainer as w, StyledSegment as S } from "./styles.js";
-const B = ({
-  segments: t,
-  backgroundColor: m,
-  height: n = "14px",
-  width: $ = "100%",
-  margin: p,
-  mx: g,
-  my: h,
-  ml: i,
-  mr: s,
-  mt: c,
+import { jsx as a } from "react/jsx-runtime";
+import { useTheme as S } from "styled-components";
+import { StyledBarContainer as v, StyledSegment as w } from "./styles.js";
+const x = ({
+  segments: m,
+  backgroundColor: n,
+  height: i = "14px",
+  width: p = "100%",
+  margin: s,
+  mx: $,
+  my: c,
+  ml: g,
+  mr: h,
+  mt: u,
   mb: d
 }) => {
-  const r = f(), o = [
-    r.palette.primary[700],
-    r.palette.error[500],
-    r.palette.warning[500]
-  ], u = r.palette.warning[200];
-  return /* @__PURE__ */ l(
-    w,
+  const e = S(), t = [
+    e.palette.primary[700],
+    e.palette.error[500],
+    e.palette.warning[500]
+  ], f = e.palette.warning[200], l = m.map((r, o) => ({
+    color: r.color ?? t[o % t.length],
+    value: r.value
+  })).filter((r) => r.value > 0);
+  return /* @__PURE__ */ a(
+    v,
     {
-      $backgroundColor: m ?? u,
-      $height: n,
-      $margin: p,
+      $backgroundColor: n ?? f,
+      $height: i,
+      $margin: s,
       $mb: d,
-      $ml: i,
-      $mr: s,
-      $mt: c,
-      $mx: g,
-      $my: h,
-      $width: $,
+      $ml: g,
+      $mr: h,
+      $mt: u,
+      $mx: $,
+      $my: c,
+      $width: p,
       role: "progressbar",
-      children: t.map((a, e) => /* @__PURE__ */ l(
-        S,
+      children: l.map((r, o) => /* @__PURE__ */ a(
+        w,
         {
-          $color: a.color ?? o[e % o.length],
-          $showSeparator: e < t.length - 1,
-          $width: a.value
+          $color: r.color,
+          $showSeparator: o < l.length - 1,
+          $width: r.value
         },
-        `segment-${e}`
+        `segment-${o}`
       ))
     }
   );
 };
 export {
-  B as SegmentedProgressBar
+  x as SegmentedProgressBar
 };

package/dist/components/segmented-progress-bar/index.stories.d.ts

@@ -4,5 +4,6 @@ declare const config: Meta<ISegmentedProgressBarProps>;
 type Story = StoryFn<ISegmentedProgressBarProps>;
 declare const Default: Story;
 declare const SingleSegment: Story;
-export { Default, SingleSegment };
+declare const EmptySegments: Story;
+export { Default, EmptySegments, SingleSegment };
 export default config;

package/dist/components/segmented-progress-bar/types.d.ts

@@ -2,7 +2,7 @@ import { IDisplayModifiable, IMarginModifiable } from '../@core';
 /**
  * Segment configuration for the progress bar.
  * @interface ISegment
- * @property { number } value - Percentage width of the segment (0-100).
+ * @property { number } value - Percentage width of the segment (0-100). A segment with 0 or less is not drawn.
  * @property { string } [color] - Background color of the segment. Defaults to primary[700], error[500], warning[500] in order.
  */
 interface ISegment {

package/dist/components/table-button/index.stories.d.ts

@@ -38,7 +38,7 @@ declare const SpecialButtons: {
     render?: import('storybook/internal/csf').ArgsStoryFn<import('@storybook/react').ReactRenderer, {
         items: PropsWithChildren<ITableButtonProps>[];
     }> | undefined;
-    tags?: import('storybook/internal/csf').Tag[];
+    tags?: string[] | undefined;
     mount?: ((context: import('storybook/internal/csf').StoryContext<import('@storybook/react').ReactRenderer, {
         items: PropsWithChildren<ITableButtonProps>[];
     }>) => (ui?: import("react").JSX.Element) => Promise<import('storybook/internal/csf').Canvas>) | undefined;
@@ -47,7 +47,7 @@ declare const SpecialButtons: {
     play?: import('storybook/internal/csf').PlayFunction<import('@storybook/react').ReactRenderer, {
         items: PropsWithChildren<ITableButtonProps>[];
     }> | undefined;
-    globals?: import('storybook/internal/csf').Globals | undefined;
+    globals?: Partial<import('storybook/internal/csf').Globals> | undefined;
     story?: Omit<import('storybook/internal/csf').StoryAnnotations<import('@storybook/react').ReactRenderer, {
         items: PropsWithChildren<ITableButtonProps>[];
     }, Partial<{

package/dist/components/toggle/index.stories.d.ts

@@ -620,12 +620,12 @@ declare const Default: {
     beforeEach?: import('storybook/internal/csf').BeforeEach<import('@storybook/react').ReactRenderer, IToggleProps> | import('storybook/internal/csf').BeforeEach<import('@storybook/react').ReactRenderer, IToggleProps>[] | undefined;
     afterEach?: import('storybook/internal/csf').AfterEach<import('@storybook/react').ReactRenderer, IToggleProps> | import('storybook/internal/csf').AfterEach<import('@storybook/react').ReactRenderer, IToggleProps>[] | undefined;
     render?: import('storybook/internal/csf').ArgsStoryFn<import('@storybook/react').ReactRenderer, IToggleProps> | undefined;
-    tags?: import('storybook/internal/csf').Tag[];
+    tags?: string[] | undefined;
     mount?: ((context: import('storybook/internal/csf').StoryContext<import('@storybook/react').ReactRenderer, IToggleProps>) => (ui?: import("react").JSX.Element) => Promise<import('storybook/internal/csf').Canvas>) | undefined;
     name?: import('storybook/internal/csf').StoryName;
     storyName?: import('storybook/internal/csf').StoryName;
     play?: import('storybook/internal/csf').PlayFunction<import('@storybook/react').ReactRenderer, IToggleProps> | undefined;
-    globals?: import('storybook/internal/csf').Globals | undefined;
+    globals?: Partial<import('storybook/internal/csf').Globals> | undefined;
     story?: Omit<import('storybook/internal/csf').StoryAnnotations<import('@storybook/react').ReactRenderer, IToggleProps, Partial<IToggleProps>>, "story"> | undefined;
 };
 declare const WithInnerIcon: {
@@ -665,7 +665,7 @@ declare const WithInnerIcon: {
     render?: import('storybook/internal/csf').ArgsStoryFn<import('@storybook/react').ReactRenderer, {
         itemsProps: IToggleProps[];
     }> | undefined;
-    tags?: import('storybook/internal/csf').Tag[];
+    tags?: string[] | undefined;
     mount?: ((context: import('storybook/internal/csf').StoryContext<import('@storybook/react').ReactRenderer, {
         itemsProps: IToggleProps[];
     }>) => (ui?: import("react").JSX.Element) => Promise<import('storybook/internal/csf').Canvas>) | undefined;
@@ -674,7 +674,7 @@ declare const WithInnerIcon: {
     play?: import('storybook/internal/csf').PlayFunction<import('@storybook/react').ReactRenderer, {
         itemsProps: IToggleProps[];
     }> | undefined;
-    globals?: import('storybook/internal/csf').Globals | undefined;
+    globals?: Partial<import('storybook/internal/csf').Globals> | undefined;
     story?: Omit<import('storybook/internal/csf').StoryAnnotations<import('@storybook/react').ReactRenderer, {
         itemsProps: IToggleProps[];
     }, Partial<{
@@ -722,7 +722,7 @@ declare const WithInnerText: {
     render?: import('storybook/internal/csf').ArgsStoryFn<import('@storybook/react').ReactRenderer, {
         itemsProps: IToggleProps[];
     }> | undefined;
-    tags?: import('storybook/internal/csf').Tag[];
+    tags?: string[] | undefined;
     mount?: ((context: import('storybook/internal/csf').StoryContext<import('@storybook/react').ReactRenderer, {
         itemsProps: IToggleProps[];
     }>) => (ui?: import("react").JSX.Element) => Promise<import('storybook/internal/csf').Canvas>) | undefined;
@@ -731,7 +731,7 @@ declare const WithInnerText: {
     play?: import('storybook/internal/csf').PlayFunction<import('@storybook/react').ReactRenderer, {
         itemsProps: IToggleProps[];
     }> | undefined;
-    globals?: import('storybook/internal/csf').Globals | undefined;
+    globals?: Partial<import('storybook/internal/csf').Globals> | undefined;
     story?: Omit<import('storybook/internal/csf').StoryAnnotations<import('@storybook/react').ReactRenderer, {
         itemsProps: IToggleProps[];
     }, Partial<{
@@ -790,7 +790,7 @@ declare const WithExternalLabel: {
     render?: import('storybook/internal/csf').ArgsStoryFn<import('@storybook/react').ReactRenderer, {
         itemsProps: IToggleProps[];
     }> | undefined;
-    tags?: import('storybook/internal/csf').Tag[];
+    tags?: string[] | undefined;
     mount?: ((context: import('storybook/internal/csf').StoryContext<import('@storybook/react').ReactRenderer, {
         itemsProps: IToggleProps[];
     }>) => (ui?: import("react").JSX.Element) => Promise<import('storybook/internal/csf').Canvas>) | undefined;
@@ -799,7 +799,7 @@ declare const WithExternalLabel: {
     play?: import('storybook/internal/csf').PlayFunction<import('@storybook/react').ReactRenderer, {
         itemsProps: IToggleProps[];
     }> | undefined;
-    globals?: import('storybook/internal/csf').Globals | undefined;
+    globals?: Partial<import('storybook/internal/csf').Globals> | undefined;
     story?: Omit<import('storybook/internal/csf').StoryAnnotations<import('@storybook/react').ReactRenderer, {
         itemsProps: IToggleProps[];
     }, Partial<{

package/package.json

@@ -29,11 +29,11 @@
   },
   "description": "Fluid Attacks core components library",
   "devDependencies": {
-    "@storybook/addon-a11y": "10.4.1",
-    "@storybook/addon-docs": "10.4.1",
-    "@storybook/addon-links": "10.4.1",
-    "@storybook/addon-vitest": "10.4.1",
-    "@storybook/react-vite": "10.4.1",
+    "@storybook/addon-a11y": "10.6.2",
+    "@storybook/addon-docs": "10.6.2",
+    "@storybook/addon-links": "10.6.2",
+    "@storybook/addon-vitest": "10.6.2",
+    "@storybook/react-vite": "10.6.2",
     "@tailwindcss/vite": "4.3.0",
     "@testing-library/react": "16.3.1",
     "@types/node": "25.9.1",
@@ -55,7 +55,7 @@
     "eslint-plugin-project-structure": "3.0.1",
     "eslint-plugin-react": "7.37.4",
     "eslint-plugin-react-hooks": "7.1.1",
-    "eslint-plugin-storybook": "10.4.0",
+    "eslint-plugin-storybook": "10.6.2",
     "jsdom": "27.4.0",
     "next": "16.3.8",
     "playwright": "1.60.0",
@@ -64,13 +64,13 @@
     "react-router": "7.18.2",
     "remark-gfm": "4.0.0",
     "rollup-plugin-visualizer": "5.14.0",
-    "storybook": "10.4.1",
+    "storybook": "10.6.2",
     "stylelint": "16.14.1",
     "stylelint-config-standard": "37.0.0",
     "tailwindcss": "4.3.0",
     "typescript": "6.0.3",
     "typescript-eslint": "8.59.4",
-    "vite": "6.4.3",
+    "vite": "6.4.4",
     "vite-plugin-dts": "5.0.3",
     "vite-plugin-lib-inject-css": "2.2.2",
     "vitest": "4.1.11"
@@ -135,5 +135,5 @@
     "./dist/index.js"
   ],
   "typings": "./dist/index.d.ts",
-  "version": "9.4.0"
+  "version": "9.5.1"
 }