se-design 1.0.97 → 1.0.98-dev.0

package/dist/index45.js

@@ -1,61 +1,116 @@
-import e, { useState as d, useEffect as h } from "react";
-import { Icon as r } from "./index6.js";
+import t, { useState as $, useRef as T } from "react";
+import "./index78.js";
+import { useDismissOnEscape as j } from "./index234.js";
+import { Icon as g } from "./index6.js";
+import { Button as A } from "./index4.js";
 /* empty css         */
-const t = {
-  toastBarCtn: "min-h-[48px] fixed top-0 w-full flex items-center justify-center z-[1020] pr-[44px]",
-  success: "var(--color-green-500)",
-  error: "var(--color-red-500)",
-  info: "var(--color-gray-700)",
-  toastMessageCtn: "flex items-center gap-2",
-  toastMessage: "text-[var(--color-white)] text-center word-break",
-  closeIconCtn: "absolute right-[12px] cursor-pointer hover:bg-white/20 rounded-full p-1 focus-visible:!outline-2 focus-visible:!outline-[var(--color-white)] focus-visible:!outline-offset-2"
-}, x = ({
-  toastBarCtnClassName: a = "",
-  type: o,
-  message: c = "",
-  shouldAutoClose: l = !1,
-  delay: i = 5e3,
-  onClose: n = () => {
+function a() {
+  return a = Object.assign ? Object.assign.bind() : function(s) {
+    for (var o = 1; o < arguments.length; o++) {
+      var r = arguments[o];
+      for (var n in r) ({}).hasOwnProperty.call(r, n) && (s[n] = r[n]);
+    }
+    return s;
+  }, a.apply(null, arguments);
+}
+const f = {
+  info: {
+    stroke: "var(--color-yellow-700)",
+    rotation: "180"
+  },
+  alert: {
+    stroke: "var(--color-gray-900)",
+    rotation: "0"
+  },
+  nudge: {
+    stroke: "var(--color-white)",
+    rotation: "180"
+  }
+}, e = {
+  messageBarCtn: "min-h-[45px] fixed top-0 w-full flex items-center justify-center py-2",
+  messageCtn: "flex items-center justify-center gap-2 flex-wrap px-4 pr-12",
+  info: "bg-[var(--color-yellow-50)]",
+  alert: "bg-[var(--color-red-50)]",
+  nudge: "bg-[var(--color-blue-500)]",
+  infoMessage: "text-[var(--color-yellow-700)] text-center",
+  alertMessage: "text-[var(--color-gray-900)] text-center",
+  nudgeMessage: "text-[var(--color-white)] text-center",
+  closeIconCtn: "absolute right-[12px] cursor-pointer rounded-full p-1",
+  closeIconCtnInfo: "hover:bg-[var(--color-gray-200)]",
+  closeIconCtnAlert: "hover:bg-[var(--color-gray-200)]",
+  closeIconCtnNudge: "hover:bg-[var(--color-blue-700)]"
+}, d = {
+  info: "blue",
+  alert: "red",
+  nudge: "white"
+}, U = ({
+  messageBarCtnClassName: s = "",
+  messageBarType: o = "info",
+  message: r = "",
+  hasCloseIcon: n = !1,
+  hasButton: v = !1,
+  buttonLabel: b = "",
+  buttonOnClick: p = () => {
   },
-  containerStyle: m = {}
+  handleClose: l = () => {
+  },
+  automationId: C = "",
+  iconProps: c,
+  buttonProps: I,
+  closeButtonAriaLabel: w = "Close message"
 }) => {
-  const [u, f] = d(!0);
-  h(() => {
-    if (l) {
-      const v = setTimeout(() => {
-        s();
-      }, i);
-      return () => clearTimeout(v);
-    }
-  }, []);
-  const s = () => {
-    setTimeout(() => {
-      f(!1), setTimeout(() => {
-        n?.();
-      }, 300);
+  const [i, h] = $(!0), x = T(null), m = t.useCallback(() => {
+    h(!1);
+    const O = setTimeout(() => {
+      l?.();
     }, 300);
+    return () => clearTimeout(O);
+  }, [l]), {
+    onKeyDown: E
+  } = j({
+    onDismiss: m,
+    enabled: n && i
+  }), k = {
+    info: e.infoMessage,
+    alert: e.alertMessage,
+    nudge: e.nudgeMessage
+  }[o] ?? e.infoMessage, y = {
+    info: e.closeIconCtnInfo,
+    alert: e.closeIconCtnAlert,
+    nudge: e.closeIconCtnNudge
+  }[o] ?? e.closeIconCtnInfo, N = o === "nudge" ? "var(--color-white)" : "var(--color-gray-700)", _ = d[o] ?? d.info, u = f[o] ?? f.info, M = c !== null, D = {
+    name: "info",
+    stroke: u.stroke,
+    rotation: u.rotation,
+    className: "shrink-0",
+    ...c
   };
-  return /* @__PURE__ */ e.createElement("div", {
-    className: `se-design-toast-bar ${a} ${t.toastBarCtn} ${u ? "show" : "hide"}`,
-    style: {
-      background: t[o],
-      ...m
-    }
-  }, /* @__PURE__ */ e.createElement("div", {
-    className: t.toastMessageCtn
-  }, /* @__PURE__ */ e.createElement(r, {
-    name: o === "info" ? "info" : o === "error" ? "stop" : "checked-circle",
-    stroke: "var(--color-white)"
-  }), /* @__PURE__ */ e.createElement("span", {
-    className: t.toastMessage
-  }, c)), /* @__PURE__ */ e.createElement(r, {
+  return /* @__PURE__ */ t.createElement("div", {
+    ref: x,
+    className: `se-design-message-bar ${s} ${e.messageBarCtn} ${e[o]} ${i ? "show" : "hide"}`,
+    "data-automation-id": C,
+    onKeyDown: E
+  }, /* @__PURE__ */ t.createElement("div", {
+    className: e.messageCtn
+  }, M && /* @__PURE__ */ t.createElement(g, D), /* @__PURE__ */ t.createElement("span", {
+    className: `${k} break-words min-w-0`
+  }, r), v && /* @__PURE__ */ t.createElement(A, a({
+    label: b,
+    type: "primary",
+    size: "sm",
+    theme: _,
+    onClick: p,
+    className: "alert-btn"
+  }, I))), n && /* @__PURE__ */ t.createElement(g, {
     name: "close",
-    stroke: "var(--color-white)",
-    className: t.closeIconCtn,
-    onClick: s
+    className: `${e.closeIconCtn} ${y}`,
+    stroke: N,
+    onClick: m,
+    ariaLabel: w
   }));
 };
 export {
-  x as ToastBar
+  U as MessageBar,
+  U as default
 };
 //# sourceMappingURL=index45.js.map

package/dist/index45.js.map

@@ -1 +1 @@
-{"version":3,"file":"index45.js","sources":["../src/components/ToastBar/index.tsx"],"sourcesContent":["import React, { FC, useEffect, useState } from \"react\";\nimport { Map } from \"../../utils/common.types\";\nimport { Icon } from \"../Icon\";\nimport \"./style.scss\";\n\nexport interface ToastBarProps {\n  toastBarCtnClassName?: string;\n  type: \"success\" | \"error\" | \"info\";\n  message: string;\n  shouldAutoClose?: boolean;\n  delay?: number;\n  onClose?: () => void;\n  containerStyle?: React.CSSProperties;\n}\n\nconst classNames: Map = {\n  toastBarCtn: \"min-h-[48px] fixed top-0 w-full flex items-center justify-center z-[1020] pr-[44px]\",\n  success: \"var(--color-green-500)\",\n  error: \"var(--color-red-500)\",\n  info: \"var(--color-gray-700)\",\n  toastMessageCtn: \"flex items-center gap-2\",\n  toastMessage: \"text-[var(--color-white)] text-center word-break\",\n  closeIconCtn: \"absolute right-[12px] cursor-pointer hover:bg-white/20 rounded-full p-1 focus-visible:!outline-2 focus-visible:!outline-[var(--color-white)] focus-visible:!outline-offset-2\",\n};\n\nexport const ToastBar: FC<ToastBarProps> = ({\n  toastBarCtnClassName = \"\",\n  type,\n  message = \"\",\n  shouldAutoClose = false,\n  delay = 5000,\n  onClose = () => {},\n  containerStyle = {}\n}) => {\n  const [visible, setVisible] = useState(true);\n\n  useEffect(() => {\n    if (shouldAutoClose) {\n      const timer = setTimeout(() => {\n        handleClose();\n      }, delay);\n      return () => clearTimeout(timer);\n    }\n  }, []);\n\n  const handleClose = () => {\n    setTimeout(() => {\n      setVisible(false);\n      setTimeout(() => {\n        onClose?.();\n      }, 300);\n    }, 300);\n  };\n\n  return (\n    <div\n      className={`se-design-toast-bar ${toastBarCtnClassName} ${classNames.toastBarCtn} ${visible ? \"show\" : \"hide\"}`}\n      style={{ background: classNames[type], ...containerStyle }}\n    >\n      <div className={classNames.toastMessageCtn} >\n        <Icon name={type === \"info\" ? \"info\" : type === \"error\" ? \"stop\" : \"checked-circle\"} stroke={'var(--color-white)'} />\n        <span className={classNames.toastMessage}>{message}</span>\n      </div>\n      <Icon name=\"close\" stroke={'var(--color-white)'} className={classNames.closeIconCtn} onClick={handleClose} />\n    </div>\n  );\n};"],"names":["React__default","useState","useEffect","Icon","classNames","toastBarCtn","success","error","info","toastMessageCtn","toastMessage","closeIconCtn","ToastBar","toastBarCtnClassName","type","message","shouldAutoClose","delay","onClose","containerStyle","visible","setVisible","timer","setTimeout","handleClose","clearTimeout","React","createElement","className","style","background","name","stroke","onClick"],"mappings":"AAeA,OAAAA,KAAA,YAAAC,GAAA,aAAAC,SAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,OAAA;AAAA,MAAMC,IAAkB;AAAA,EACtBC,aAAa;AAAA,EACbC,SAAS;AAAA,EACTC,OAAO;AAAA,EACPC,MAAM;AAAA,EACNC,iBAAiB;AAAA,EACjBC,cAAc;AAAA,EACdC,cAAc;AAChB,GAEaC,IAA8BA,CAAC;AAAA,EAC1CC,sBAAAA,IAAuB;AAAA,EACvBC,MAAAA;AAAAA,EACAC,SAAAA,IAAU;AAAA,EACVC,iBAAAA,IAAkB;AAAA,EAClBC,OAAAA,IAAQ;AAAA,EACRC,SAAAA,IAAUA,MAAM;AAAA,EAAC;AAAA,EACjBC,gBAAAA,IAAiB,CAAA;AACnB,MAAM;AACJ,QAAM,CAACC,GAASC,CAAU,IAAIpB,EAAS,EAAI;AAE3CC,EAAAA,EAAU,MAAM;AACd,QAAIc,GAAiB;AACnB,YAAMM,IAAQC,WAAW,MAAM;AAC7BC,QAAAA,EAAAA;AAAAA,MACF,GAAGP,CAAK;AACR,aAAO,MAAMQ,aAAaH,CAAK;AAAA,IACjC;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,QAAME,IAAcA,MAAM;AACxBD,eAAW,MAAM;AACfF,MAAAA,EAAW,EAAK,GAChBE,WAAW,MAAM;AACfL,QAAAA,IAAAA;AAAAA,MACF,GAAG,GAAG;AAAA,IACR,GAAG,GAAG;AAAA,EACR;AAEA,SACEQ,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEC,WAAW,uBAAuBf,CAAoB,IAAIT,EAAWC,WAAW,IAAIe,IAAU,SAAS,MAAM;AAAA,IAC7GS,OAAO;AAAA,MAAEC,YAAY1B,EAAWU,CAAI;AAAA,MAAG,GAAGK;AAAAA,IAAAA;AAAAA,EAAe,GAEzDO,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAWxB,EAAWK;AAAAA,EAAAA,GACzBiB,gBAAAA,EAAAC,cAACxB,GAAI;AAAA,IAAC4B,MAAMjB,MAAS,SAAS,SAASA,MAAS,UAAU,SAAS;AAAA,IAAkBkB,QAAQ;AAAA,EAAA,CAAuB,GACpHN,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMC,WAAWxB,EAAWM;AAAAA,EAAAA,GAAeK,CAAc,CACtD,GACLW,gBAAAA,EAAAC,cAACxB,GAAI;AAAA,IAAC4B,MAAK;AAAA,IAAQC,QAAQ;AAAA,IAAsBJ,WAAWxB,EAAWO;AAAAA,IAAcsB,SAAST;AAAAA,EAAAA,CAAc,CACzG;AAET;"}
+{"version":3,"file":"index45.js","sources":["../src/components/MessageBar/index.tsx"],"sourcesContent":["import React, { FC, useRef, useState } from 'react';\nimport { Map } from 'src/utils/common.types';\nimport { useDismissOnEscape } from '../../utils/a11y';\nimport { Icon, IconProps } from '../Icon';\nimport { Button, ButtonProps } from '../Button';\nimport './style.scss';\n\nexport type MessageBarType = 'info' | 'alert' | 'nudge';\n\nexport interface MessageBarProps {\n  messageBarCtnClassName?: string;\n  messageBarType: MessageBarType;\n  message: string;\n  hasCloseIcon?: boolean;\n  hasButton?: boolean;\n  buttonLabel: string | '';\n  buttonOnClick?: () => void;\n  handleClose?: () => void;\n  automationId?: string;\n  /**\n   * Override the leading icon. Merged on top of the variant default\n   * (name + fill color derived from `messageBarType`).\n   * Pass `null` to suppress the leading icon entirely.\n   */\n  iconProps?: Partial<IconProps> | null;\n  /**\n   * Override props for the CTA button. Spread after the variant defaults\n   * (label/onClick/className/type/size), so any field can be replaced —\n   * including `iconProps` to add an icon to the button.\n   */\n  buttonProps?: Partial<ButtonProps>;\n  /**\n   * Accessible name for the close icon. Defaults to \"Close message\".\n   */\n  closeButtonAriaLabel?: string;\n}\n\n/**\n * Per-variant defaults for the leading icon. Single `info` glyph everywhere;\n * stroke matches the variant's text color. `info` and `nudge` render rotated\n * 180° to read as inverted; `alert` keeps the default orientation.\n */\nconst DEFAULT_ICON_BY_TYPE: Record<MessageBarType, { stroke: string; rotation: '0' | '180' }> = {\n  info: { stroke: 'var(--color-yellow-700)', rotation: '180' },\n  alert: { stroke: 'var(--color-gray-900)', rotation: '0' },\n  nudge: { stroke: 'var(--color-white)', rotation: '180' }\n};\n\nconst classNames: Map = {\n  messageBarCtn: \"min-h-[45px] fixed top-0 w-full flex items-center justify-center py-2\",\n  messageCtn: \"flex items-center justify-center gap-2 flex-wrap px-4 pr-12\",\n  info: \"bg-[var(--color-yellow-50)]\",\n  alert: \"bg-[var(--color-red-50)]\",\n  nudge: \"bg-[var(--color-blue-500)]\",\n  infoMessage: \"text-[var(--color-yellow-700)] text-center\",\n  alertMessage: \"text-[var(--color-gray-900)] text-center\",\n  nudgeMessage: \"text-[var(--color-white)] text-center\",\n  closeIconCtn: \"absolute right-[12px] cursor-pointer rounded-full p-1\",\n  closeIconCtnInfo: \"hover:bg-[var(--color-gray-200)]\",\n  closeIconCtnAlert: \"hover:bg-[var(--color-gray-200)]\",\n  closeIconCtnNudge: \"hover:bg-[var(--color-blue-700)]\",\n};\n\n/**\n * Per-variant default Button theme. Picked so the CTA surface has a\n * non-text contrast of >= 3:1 against the bar background (WCAG 1.4.11).\n * Consumers can override via `buttonProps`.\n */\nconst DEFAULT_BUTTON_THEME_BY_TYPE: Record<MessageBarType, ButtonProps['theme']> = {\n  info: 'blue',\n  alert: 'red',\n  nudge: 'white'\n};\n\nexport const MessageBar: FC<MessageBarProps> = ({\n  messageBarCtnClassName = \"\",\n  messageBarType = 'info',\n  message = '',\n  hasCloseIcon = false,\n  hasButton = false,\n  buttonLabel = '',\n  buttonOnClick = () => {},\n  handleClose = () => {},\n  automationId = '',\n  iconProps,\n  buttonProps,\n  closeButtonAriaLabel = 'Close message'\n}) => {\n  const [visible, setVisible] = useState(true);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const handleClickOnCloseIcon = React.useCallback(() => {\n    setVisible(false);\n    const timer = setTimeout(() => {\n      handleClose?.();\n    }, 300);\n    return () => clearTimeout(timer);\n  }, [handleClose]);\n\n  // SR announcements: pending shared live-announcer component.\n  const { onKeyDown: onEscapeKeyDown } = useDismissOnEscape({\n    onDismiss: handleClickOnCloseIcon,\n    enabled: hasCloseIcon && visible\n  });\n\n  const messageClass = {\n    info: classNames.infoMessage,\n    alert: classNames.alertMessage,\n    nudge: classNames.nudgeMessage\n  }[messageBarType] ?? classNames.infoMessage;\n\n  const closeIconHoverClass = {\n    info: classNames.closeIconCtnInfo,\n    alert: classNames.closeIconCtnAlert,\n    nudge: classNames.closeIconCtnNudge\n  }[messageBarType] ?? classNames.closeIconCtnInfo;\n\n  const closeIconStroke = messageBarType === 'nudge' ? 'var(--color-white)' : 'var(--color-gray-700)';\n\n  const defaultButtonTheme = DEFAULT_BUTTON_THEME_BY_TYPE[messageBarType] ?? DEFAULT_BUTTON_THEME_BY_TYPE.info;\n\n  const variantIcon = DEFAULT_ICON_BY_TYPE[messageBarType] ?? DEFAULT_ICON_BY_TYPE.info;\n  const showLeadingIcon = iconProps !== null;\n  const mergedIconProps: IconProps = {\n    name: 'info',\n    stroke: variantIcon.stroke,\n    rotation: variantIcon.rotation,\n    className: 'shrink-0',\n    ...iconProps\n  };\n\n  return (\n    <div\n      ref={containerRef}\n      className={`se-design-message-bar ${messageBarCtnClassName} ${classNames.messageBarCtn} ${classNames[messageBarType]} ${visible ? \"show\" : \"hide\"}`}\n      data-automation-id={automationId}\n      onKeyDown={onEscapeKeyDown}\n    >\n      <div className={classNames.messageCtn}>\n        {showLeadingIcon && <Icon {...mergedIconProps} />}\n        <span className={`${messageClass} break-words min-w-0`}>{message}</span>\n        {hasButton && (\n          <Button\n            label={buttonLabel}\n            type='primary'\n            size=\"sm\"\n            theme={defaultButtonTheme}\n            onClick={buttonOnClick}\n            className=\"alert-btn\"\n            {...buttonProps}\n          />\n        )}\n      </div>\n      {hasCloseIcon && (\n        <Icon\n          name={\"close\"}\n          className={`${classNames.closeIconCtn} ${closeIconHoverClass}`}\n          stroke={closeIconStroke}\n          onClick={handleClickOnCloseIcon}\n          ariaLabel={closeButtonAriaLabel}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default MessageBar;"],"names":["DEFAULT_ICON_BY_TYPE","info","stroke","rotation","alert","nudge","classNames","messageBarCtn","messageCtn","infoMessage","alertMessage","nudgeMessage","closeIconCtn","closeIconCtnInfo","closeIconCtnAlert","closeIconCtnNudge","DEFAULT_BUTTON_THEME_BY_TYPE","MessageBar","messageBarCtnClassName","messageBarType","message","hasCloseIcon","hasButton","buttonLabel","buttonOnClick","handleClose","automationId","iconProps","buttonProps","closeButtonAriaLabel","visible","setVisible","useState","containerRef","useRef","handleClickOnCloseIcon","React","useCallback","timer","setTimeout","clearTimeout","onKeyDown","onEscapeKeyDown","useDismissOnEscape","onDismiss","enabled","messageClass","closeIconHoverClass","closeIconStroke","defaultButtonTheme","variantIcon","showLeadingIcon","mergedIconProps","name","className","createElement","ref","Icon","Button","_extends","label","type","size","theme","onClick","ariaLabel"],"mappings":"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"}

package/dist/index46.js

@@ -1,150 +1,61 @@
-import e, { useState as k, useRef as S, useCallback as P, useEffect as Y } from "react";
+import e, { useState as d, useEffect as h } from "react";
+import { Icon as r } from "./index6.js";
 /* empty css         */
-import { Icon as x } from "./index6.js";
-import { useStableId as Z } from "./index214.js";
-import { getA11yNameAttributes as ee } from "./index86.js";
-import "./index77.js";
-import { useCombobox as te } from "./index73.js";
-function u() {
-  return u = Object.assign ? Object.assign.bind() : function(o) {
-    for (var i = 1; i < arguments.length; i++) {
-      var t = arguments[i];
-      for (var a in t) ({}).hasOwnProperty.call(t, a) && (o[a] = t[a]);
-    }
-    return o;
-  }, u.apply(null, arguments);
-}
-const ce = /* @__PURE__ */ e.memo(({
-  value: o,
-  onChange: i,
-  disabled: t = !1,
-  maxLength: a,
-  tag: F = "input",
-  error: l = !1,
-  errorMessage: R,
-  label: p,
-  placeholder: j,
-  suggestions: c = [],
-  onSelect: E,
-  renderOption: d,
-  optionClassName: A,
-  automationId: B = "",
-  ariaLabel: $,
-  ariaLabelledBy: O,
-  ariaDescribedBy: V,
-  ..._
+const t = {
+  toastBarCtn: "min-h-[48px] fixed top-0 w-full flex items-center justify-center z-[1020] pr-[44px]",
+  success: "var(--color-green-500)",
+  error: "var(--color-red-500)",
+  info: "var(--color-gray-700)",
+  toastMessageCtn: "flex items-center gap-2",
+  toastMessage: "text-[var(--color-white)] text-center word-break",
+  closeIconCtn: "absolute right-[12px] cursor-pointer hover:bg-white/20 rounded-full p-1 focus-visible:!outline-2 focus-visible:!outline-[var(--color-white)] focus-visible:!outline-offset-2"
+}, x = ({
+  toastBarCtnClassName: a = "",
+  type: o,
+  message: c = "",
+  shouldAutoClose: l = !1,
+  delay: i = 5e3,
+  onClose: n = () => {
+  },
+  containerStyle: m = {}
 }) => {
-  const [s, b] = k([...c]), [v, g] = k(!1), H = S(null), N = S(null), f = Z(void 0, "autocomplete"), z = `${f}-input`, D = `${f}-listbox`, y = `${f}-label`, C = `${f}-error`, w = P((r) => {
-    g(!1), E?.(r);
-  }, [E]), {
-    containerProps: K,
-    inputProps: M,
-    listboxProps: q,
-    getOptionProps: G,
-    highlightedIndex: J,
-    setHighlightedIndex: h,
-    isKeyboardFocused: L
-  } = te({
-    items: s,
-    isOpen: v,
-    onOpenChange: g,
-    onSelect: w,
-    listboxId: D
-  }), Q = P((r) => {
-    const n = r.target.value;
-    if (h(-1), i(n), !d)
-      if (n === "")
-        b([...c]);
-      else {
-        const I = c?.filter((m) => typeof m == "object" && m?.label?.toLowerCase().includes(n?.toLowerCase() ?? ""));
-        b([...I]);
-      }
-  }, [i, c, d, h]);
-  Y(() => {
-    b([...c]);
-  }, [c]);
-  const T = () => {
-    g(!0);
-  }, U = () => {
-    s.length > 0 && g(!0);
-  }, W = () => {
-    i(""), h(-1), N.current?.focus();
-  }, X = ee({
-    ariaLabelledBy: O,
-    internalLabelId: p ? y : void 0,
-    ariaLabel: $,
-    ariaDescribedBy: l ? C : V
-  });
-  return /* @__PURE__ */ e.createElement("div", u({
-    className: "main-container-autocomplete-se-design",
-    ref: H,
-    "data-automation-id": B
-  }, K), p && /* @__PURE__ */ e.createElement("span", {
-    id: y,
-    className: `label-container ${t ? "label-container-disabled" : ""}`
-  }, p), /* @__PURE__ */ e.createElement("div", {
-    className: "input-container-wrapper"
-  }, /* @__PURE__ */ e.createElement("div", {
-    className: "input-wrapper",
+  const [u, f] = d(!0);
+  h(() => {
+    if (l) {
+      const v = setTimeout(() => {
+        s();
+      }, i);
+      return () => clearTimeout(v);
+    }
+  }, []);
+  const s = () => {
+    setTimeout(() => {
+      f(!1), setTimeout(() => {
+        n?.();
+      }, 300);
+    }, 300);
+  };
+  return /* @__PURE__ */ e.createElement("div", {
+    className: `se-design-toast-bar ${a} ${t.toastBarCtn} ${u ? "show" : "hide"}`,
     style: {
-      pointerEvents: t ? "none" : "auto"
+      background: t[o],
+      ...m
     }
-  }, /* @__PURE__ */ e.createElement(F, {
-    ref: N,
-    id: z,
-    value: o,
-    onChange: Q,
-    onClick: T,
-    onFocus: U,
-    ...M,
-    disabled: t,
-    className: `${l ? "input-container-error" : "input-container-default"} ${t ? "input-container-disabled" : ""} ${s.length > 0 || o ? "with-icon" : ""} ${s.length > 0 && o ? "with-icons" : ""}`,
-    maxLength: a,
-    placeholder: j,
-    "aria-invalid": l || void 0,
-    ...X,
-    ..._
-  }), o && /* @__PURE__ */ e.createElement(x, {
+  }, /* @__PURE__ */ e.createElement("div", {
+    className: t.toastMessageCtn
+  }, /* @__PURE__ */ e.createElement(r, {
+    name: o === "info" ? "info" : o === "error" ? "stop" : "checked-circle",
+    stroke: "var(--color-white)"
+  }), /* @__PURE__ */ e.createElement("span", {
+    className: t.toastMessage
+  }, c)), /* @__PURE__ */ e.createElement(r, {
     name: "close",
-    className: "input-icon-close",
-    size: 15,
-    onClick: W,
-    stroke: t ? "var(--color-gray-600)" : "",
-    ariaLabel: "Clear input"
-  }), s.length > 0 && /* @__PURE__ */ e.createElement(x, {
-    name: "chevron",
-    rotation: v ? "180" : "0",
-    className: "input-icon-chevron",
-    stroke: t ? "var(--color-gray-600)" : "",
-    "aria-hidden": "true"
-  })), v && s.length > 0 && /* @__PURE__ */ e.createElement("div", u({}, q, {
-    "aria-label": p || $ || "Suggestions",
-    className: "suggestions-list",
-    "data-automation-id": "autocomplete-suggestions-list"
-  }), s.map((r, n) => {
-    const I = G(n, !1), m = J === n;
-    return /* @__PURE__ */ e.createElement("div", u({
-      key: n
-    }, I, {
-      className: `${A || "suggestion-item"} ${m ? `suggestion-item-highlighted${L ? " suggestion-item-keyboard-highlight" : ""}` : ""}`,
-      onClick: () => w(r),
-      onMouseEnter: () => h(n),
-      "data-automation-id": `autocomplete-suggestion-item-${n}`
-    }), d ? d(r, {
-      isHighlighted: m,
-      index: n
-    }) : r.label);
-  }))), (l || a) && /* @__PURE__ */ e.createElement("div", {
-    className: `${l ? "error-and-max-word" : "max-word-container"} ${t ? "disabled" : ""}`
-  }, l && /* @__PURE__ */ e.createElement("div", {
-    id: C,
-    className: "error-message",
-    role: "alert"
-  }, R), a && /* @__PURE__ */ e.createElement("div", {
-    className: "max-word"
-  }, o.length, "/", a)));
-});
+    stroke: "var(--color-white)",
+    className: t.closeIconCtn,
+    onClick: s
+  }));
+};
 export {
-  ce as AutoCompleteInput
+  x as ToastBar
 };
 //# sourceMappingURL=index46.js.map

package/dist/index46.js.map

@@ -1 +1 @@
-{"version":3,"file":"index46.js","sources":["../src/components/AutoCompleteInput/index.tsx"],"sourcesContent":["import React, { useEffect, useRef, useCallback, useState } from 'react';\nimport './style.scss';\nimport { Icon } from '../Icon';\nimport { useStableId } from '../../utils/useStableId';\nimport { getA11yNameAttributes, useCombobox } from '../../utils/a11y';\n\nexport interface AutoCompleteInputProps {\n  value: string;\n  disabled?: boolean;\n  maxLength?: number;\n  /** Called when the user types in the input. Not called on suggestion selection. */\n  onChange: (value: string) => void;\n  tag?: string;\n  error?: boolean;\n  errorMessage?: string;\n  label?: string;\n  placeholder?: string;\n  /**\n   * Suggestion items. Default rendering expects { label, value } shape.\n   * When renderOption is provided, any shape is accepted.\n   */\n  suggestions?: any[];\n  /**\n   * Called when a suggestion is selected (click or Enter key).\n   * Receives the full item object from the suggestions array.\n   */\n  onSelect?: (item: any) => void;\n  /**\n   * Render custom content for each suggestion option. The component handles the option wrapper\n   * (ARIA props, highlight, click, keyboard navigation). You only provide the inner content.\n   */\n  renderOption?: (suggestion: any, context: { isHighlighted: boolean; index: number }) => React.ReactNode;\n  /**\n   * Custom CSS class for option elements. Replaces the default 'suggestion-item' class.\n   * Useful with renderOption to apply custom styling to option wrappers.\n   */\n  optionClassName?: string;\n  automationId?: string;\n  /**\n   * Accessible label for the input. Used when no visible label is provided.\n   */\n  ariaLabel?: string;\n  /**\n   * ID(s) of element(s) that label this input. Takes precedence over ariaLabel.\n   */\n  ariaLabelledBy?: string;\n  /**\n   * ID(s) of element(s) providing additional description.\n   */\n  ariaDescribedBy?: string;\n}\n\nexport const AutoCompleteInput: React.FC<AutoCompleteInputProps> = React.memo(\n  ({\n    value,\n    onChange,\n    disabled = false,\n    maxLength,\n    tag = 'input',\n    error = false,\n    errorMessage,\n    label,\n    placeholder,\n    suggestions = [],\n    onSelect,\n    renderOption,\n    optionClassName,\n    automationId = '',\n    ariaLabel,\n    ariaLabelledBy,\n    ariaDescribedBy,\n    ...props\n  }) => {\n    const [filteredSuggestions, setFilteredSuggestions] = useState<any[]>([...suggestions]);\n    const [isSuggestionBoxVisible, setSuggestionBoxVisible] = useState<boolean>(false);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    // Generate stable unique IDs per instance so label, input, listbox, and error never share IDs (HTML/ARIA require unique ids).\n    const instanceId = useStableId(undefined, 'autocomplete');\n    const inputId = `${instanceId}-input`;\n    const listboxId = `${instanceId}-listbox`;\n    const labelId = `${instanceId}-label`;\n    const errorId = `${instanceId}-error`;\n\n    const handleSelectSuggestion = useCallback(\n      (item: any) => {\n        setSuggestionBoxVisible(false);\n        onSelect?.(item);\n      },\n      [onSelect]\n    );\n\n    // Use the comprehensive useCombobox hook\n    const {\n      containerProps,\n      inputProps: comboboxInputProps,\n      listboxProps,\n      getOptionProps,\n      highlightedIndex,\n      setHighlightedIndex,\n      isKeyboardFocused\n    } = useCombobox<any>({\n      items: filteredSuggestions,\n      isOpen: isSuggestionBoxVisible,\n      onOpenChange: setSuggestionBoxVisible,\n      onSelect: handleSelectSuggestion,\n      listboxId\n    });\n\n    const handleInputChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        const inputValue = e.target.value;\n        setHighlightedIndex(-1); // Reset highlight on input change\n        onChange(inputValue);\n\n        // Internal filtering for default rendering (when no renderOption, component manages filtering)\n        if (!renderOption) {\n          if (inputValue === '') {\n            setFilteredSuggestions([...suggestions]);\n          } else {\n            const filtered = suggestions?.filter(\n              (suggestion) =>\n                typeof suggestion === 'object' &&\n                suggestion?.label?.toLowerCase().includes(inputValue?.toLowerCase() ?? '')\n            );\n            setFilteredSuggestions([...filtered]);\n          }\n        }\n      },\n      [onChange, suggestions, renderOption, setHighlightedIndex]\n    );\n\n    useEffect(() => {\n      setFilteredSuggestions([...suggestions]);\n    }, [suggestions]);\n\n    const handleInputClick = () => {\n      setSuggestionBoxVisible(true);\n    };\n\n    const handleInputFocus = () => {\n      if (filteredSuggestions.length > 0) {\n        setSuggestionBoxVisible(true);\n      }\n    };\n\n    const handleClearInput = () => {\n      onChange('');\n      setHighlightedIndex(-1);\n      inputRef.current?.focus();\n    };\n\n    // Build ARIA name attributes: when ariaLabel is provided use it (e.g. \"Signer 1 name\"); otherwise use visible label or ariaLabelledBy\n    const a11yNameProps = getA11yNameAttributes({\n      ariaLabelledBy,\n      internalLabelId: label ? labelId : undefined,\n      ariaLabel,\n      ariaDescribedBy: error ? errorId : ariaDescribedBy\n    });\n\n    return (\n      <div \n        className=\"main-container-autocomplete-se-design\" \n        ref={containerRef} \n        data-automation-id={automationId}\n        {...containerProps}\n      >\n        {label && (\n          <span\n            id={labelId}\n            className={`label-container ${disabled ? 'label-container-disabled' : ''}`}\n          >\n            {label}\n          </span>\n        )}\n        <div className=\"input-container-wrapper\">\n          <div className=\"input-wrapper\" style={{ pointerEvents: disabled ? 'none' : 'auto' }}>\n            {React.createElement(tag, {\n              ref: inputRef,\n              id: inputId,\n              value: value,\n              onChange: handleInputChange,\n              onClick: handleInputClick,\n              onFocus: handleInputFocus,\n              ...comboboxInputProps,\n              disabled,\n              className: `${error ? 'input-container-error' : 'input-container-default'} ${disabled ? 'input-container-disabled' : ''} ${filteredSuggestions.length > 0 || value ? 'with-icon' : ''} ${filteredSuggestions.length > 0 && value ? 'with-icons' : ''}`,\n              maxLength,\n              placeholder,\n              'aria-invalid': error || undefined,\n              ...a11yNameProps,\n              ...props\n            })}\n            {value && (\n              <Icon\n                name=\"close\"\n                className=\"input-icon-close\"\n                size={15}\n                onClick={handleClearInput}\n                stroke={disabled ? 'var(--color-gray-600)' : ''}\n                ariaLabel=\"Clear input\"\n              />\n            )}\n            {filteredSuggestions.length > 0 && (\n              <Icon\n                name=\"chevron\"\n                rotation={isSuggestionBoxVisible ? '180' : '0'}\n                className=\"input-icon-chevron\"\n                stroke={disabled ? 'var(--color-gray-600)' : ''}\n                aria-hidden=\"true\"\n              />\n            )}\n          </div>\n          {isSuggestionBoxVisible && filteredSuggestions.length > 0 && (\n            <div\n              {...listboxProps}\n              aria-label={label || ariaLabel || 'Suggestions'}\n              className=\"suggestions-list\"\n              data-automation-id=\"autocomplete-suggestions-list\"\n            >\n              {filteredSuggestions.map((suggestion, index) => {\n                const optionProps = getOptionProps(index, false);\n                const isHighlighted = highlightedIndex === index;\n                return (\n                  <div\n                    key={index}\n                    {...optionProps}\n                    className={`${optionClassName || 'suggestion-item'} ${isHighlighted ? `suggestion-item-highlighted${isKeyboardFocused ? ' suggestion-item-keyboard-highlight' : ''}` : ''}`}\n                    onClick={() => handleSelectSuggestion(suggestion)}\n                    onMouseEnter={() => setHighlightedIndex(index)}\n                    data-automation-id={`autocomplete-suggestion-item-${index}`}\n                  >\n                    {renderOption\n                      ? renderOption(suggestion, { isHighlighted, index })\n                      : suggestion.label}\n                  </div>\n                );\n              })}\n            </div>\n          )}\n        </div>\n        {(error || maxLength) && (\n          <div className={`${error ? 'error-and-max-word' : 'max-word-container'} ${disabled ? 'disabled' : ''}`}>\n            {error && (\n              <div id={errorId} className=\"error-message\" role=\"alert\">\n                {errorMessage}\n              </div>\n            )}\n            {maxLength && (\n              <div className=\"max-word\">\n                {value.length}/{maxLength}\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  }\n);\n"],"names":["AutoCompleteInput","React","memo","value","onChange","disabled","maxLength","tag","error","errorMessage","label","placeholder","suggestions","onSelect","renderOption","optionClassName","automationId","ariaLabel","ariaLabelledBy","ariaDescribedBy","props","filteredSuggestions","setFilteredSuggestions","useState","isSuggestionBoxVisible","setSuggestionBoxVisible","containerRef","useRef","inputRef","instanceId","useStableId","undefined","inputId","listboxId","labelId","errorId","handleSelectSuggestion","useCallback","item","containerProps","inputProps","comboboxInputProps","listboxProps","getOptionProps","highlightedIndex","setHighlightedIndex","isKeyboardFocused","useCombobox","items","isOpen","onOpenChange","handleInputChange","e","inputValue","target","filtered","filter","suggestion","toLowerCase","includes","useEffect","handleInputClick","handleInputFocus","length","handleClearInput","current","focus","a11yNameProps","getA11yNameAttributes","internalLabelId","createElement","_extends","className","ref","id","style","pointerEvents","onClick","onFocus","Icon","name","size","stroke","rotation","map","index","optionProps","isHighlighted","key","onMouseEnter","role"],"mappings":"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"}
+{"version":3,"file":"index46.js","sources":["../src/components/ToastBar/index.tsx"],"sourcesContent":["import React, { FC, useEffect, useState } from \"react\";\nimport { Map } from \"../../utils/common.types\";\nimport { Icon } from \"../Icon\";\nimport \"./style.scss\";\n\nexport interface ToastBarProps {\n  toastBarCtnClassName?: string;\n  type: \"success\" | \"error\" | \"info\";\n  message: string;\n  shouldAutoClose?: boolean;\n  delay?: number;\n  onClose?: () => void;\n  containerStyle?: React.CSSProperties;\n}\n\nconst classNames: Map = {\n  toastBarCtn: \"min-h-[48px] fixed top-0 w-full flex items-center justify-center z-[1020] pr-[44px]\",\n  success: \"var(--color-green-500)\",\n  error: \"var(--color-red-500)\",\n  info: \"var(--color-gray-700)\",\n  toastMessageCtn: \"flex items-center gap-2\",\n  toastMessage: \"text-[var(--color-white)] text-center word-break\",\n  closeIconCtn: \"absolute right-[12px] cursor-pointer hover:bg-white/20 rounded-full p-1 focus-visible:!outline-2 focus-visible:!outline-[var(--color-white)] focus-visible:!outline-offset-2\",\n};\n\nexport const ToastBar: FC<ToastBarProps> = ({\n  toastBarCtnClassName = \"\",\n  type,\n  message = \"\",\n  shouldAutoClose = false,\n  delay = 5000,\n  onClose = () => {},\n  containerStyle = {}\n}) => {\n  const [visible, setVisible] = useState(true);\n\n  useEffect(() => {\n    if (shouldAutoClose) {\n      const timer = setTimeout(() => {\n        handleClose();\n      }, delay);\n      return () => clearTimeout(timer);\n    }\n  }, []);\n\n  const handleClose = () => {\n    setTimeout(() => {\n      setVisible(false);\n      setTimeout(() => {\n        onClose?.();\n      }, 300);\n    }, 300);\n  };\n\n  return (\n    <div\n      className={`se-design-toast-bar ${toastBarCtnClassName} ${classNames.toastBarCtn} ${visible ? \"show\" : \"hide\"}`}\n      style={{ background: classNames[type], ...containerStyle }}\n    >\n      <div className={classNames.toastMessageCtn} >\n        <Icon name={type === \"info\" ? \"info\" : type === \"error\" ? \"stop\" : \"checked-circle\"} stroke={'var(--color-white)'} />\n        <span className={classNames.toastMessage}>{message}</span>\n      </div>\n      <Icon name=\"close\" stroke={'var(--color-white)'} className={classNames.closeIconCtn} onClick={handleClose} />\n    </div>\n  );\n};"],"names":["React__default","useState","useEffect","Icon","classNames","toastBarCtn","success","error","info","toastMessageCtn","toastMessage","closeIconCtn","ToastBar","toastBarCtnClassName","type","message","shouldAutoClose","delay","onClose","containerStyle","visible","setVisible","timer","setTimeout","handleClose","clearTimeout","React","createElement","className","style","background","name","stroke","onClick"],"mappings":"AAeA,OAAAA,KAAA,YAAAC,GAAA,aAAAC,SAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,OAAA;AAAA,MAAMC,IAAkB;AAAA,EACtBC,aAAa;AAAA,EACbC,SAAS;AAAA,EACTC,OAAO;AAAA,EACPC,MAAM;AAAA,EACNC,iBAAiB;AAAA,EACjBC,cAAc;AAAA,EACdC,cAAc;AAChB,GAEaC,IAA8BA,CAAC;AAAA,EAC1CC,sBAAAA,IAAuB;AAAA,EACvBC,MAAAA;AAAAA,EACAC,SAAAA,IAAU;AAAA,EACVC,iBAAAA,IAAkB;AAAA,EAClBC,OAAAA,IAAQ;AAAA,EACRC,SAAAA,IAAUA,MAAM;AAAA,EAAC;AAAA,EACjBC,gBAAAA,IAAiB,CAAA;AACnB,MAAM;AACJ,QAAM,CAACC,GAASC,CAAU,IAAIpB,EAAS,EAAI;AAE3CC,EAAAA,EAAU,MAAM;AACd,QAAIc,GAAiB;AACnB,YAAMM,IAAQC,WAAW,MAAM;AAC7BC,QAAAA,EAAAA;AAAAA,MACF,GAAGP,CAAK;AACR,aAAO,MAAMQ,aAAaH,CAAK;AAAA,IACjC;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,QAAME,IAAcA,MAAM;AACxBD,eAAW,MAAM;AACfF,MAAAA,EAAW,EAAK,GAChBE,WAAW,MAAM;AACfL,QAAAA,IAAAA;AAAAA,MACF,GAAG,GAAG;AAAA,IACR,GAAG,GAAG;AAAA,EACR;AAEA,SACEQ,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEC,WAAW,uBAAuBf,CAAoB,IAAIT,EAAWC,WAAW,IAAIe,IAAU,SAAS,MAAM;AAAA,IAC7GS,OAAO;AAAA,MAAEC,YAAY1B,EAAWU,CAAI;AAAA,MAAG,GAAGK;AAAAA,IAAAA;AAAAA,EAAe,GAEzDO,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAWxB,EAAWK;AAAAA,EAAAA,GACzBiB,gBAAAA,EAAAC,cAACxB,GAAI;AAAA,IAAC4B,MAAMjB,MAAS,SAAS,SAASA,MAAS,UAAU,SAAS;AAAA,IAAkBkB,QAAQ;AAAA,EAAA,CAAuB,GACpHN,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMC,WAAWxB,EAAWM;AAAAA,EAAAA,GAAeK,CAAc,CACtD,GACLW,gBAAAA,EAAAC,cAACxB,GAAI;AAAA,IAAC4B,MAAK;AAAA,IAAQC,QAAQ;AAAA,IAAsBJ,WAAWxB,EAAWO;AAAAA,IAAcsB,SAAST;AAAAA,EAAAA,CAAc,CACzG;AAET;"}