se-design 1.0.61 → 1.0.62-dev

package/dist/index3.js

@@ -1,6 +1,6 @@
-import r, { forwardRef as _ } from "react";
-import { getA11yNameAttributes as I } from "./index69.js";
-import { useAccessiblePress as R } from "./index66.js";
+import r, { forwardRef as I } from "react";
+import { getA11yNameAttributes as R } from "./index70.js";
+import { useAccessiblePress as z } from "./index66.js";
 import { Icon as b } from "./index5.js";
 /* empty css        */
 function c() {
@@ -12,7 +12,7 @@ function c() {
     return e;
   }, c.apply(null, arguments);
 }
-const a = "focus-outline", z = {
+const a = "focus-outline", D = {
   primary: "primary-btn disabled-btn pointer-events-none cursor-not-allowed",
   secondary: "secondary-btn disabled-btn pointer-events-none cursor-not-allowed",
   ghost: "ghost-btn disabled-btn pointer-events-none cursor-not-allowed",
@@ -36,14 +36,14 @@ const a = "focus-outline", z = {
   // padding: 8px, 12px
   lg: "py-3 px-4 large"
   // padding: 12px, 16px
-}, D = {
+}, U = {
   blue: "theme-blue",
   red: "theme-red",
   yellow: "theme-yellow",
   green: "theme-green",
   ai: "theme-ai",
   white: "theme-white"
-}, U = /* @__PURE__ */ _(({
+}, q = /* @__PURE__ */ I(({
   type: e = "primary",
   theme: n = "blue",
   size: s = "md",
@@ -60,44 +60,46 @@ const a = "focus-outline", z = {
   ariaLabel: w,
   ariaLabelledBy: N,
   ariaDescribedBy: v,
-  onClick: x,
-  onKeyboardActivate: k,
-  ...C
-}, E) => {
+  isPressed: x,
+  onClick: k,
+  onKeyboardActivate: C,
+  ...E
+}, $) => {
   const m = e === "unstyled", {
-    pressProps: $,
+    pressProps: P,
     isDisabled: d
-  } = R({
+  } = z({
     disabled: y,
     loading: o,
     isNative: !0,
     // native <button> => hook does NOT add Enter/Space onKeyDown
-    onClick: x,
-    onKeyboardActivate: k
-  }), P = !m && e !== "link" ? p[s] : "", j = m ? "" : D[n], A = d ? z[e] : p[e], l = i?.name ? {
+    pressed: x,
+    onClick: k,
+    onKeyboardActivate: C
+  }), j = !m && e !== "link" ? p[s] : "", A = m ? "" : U[n], B = d ? D[e] : p[e], l = i?.name ? {
     ...i,
     stroke: d ? "var(--color-gray-600)" : i.stroke
-  } : void 0, B = ["se-design-button", j, P, A, f, m ? "" : "rounded-[6px] flex gap-1 items-center min-w-fit"].filter(Boolean).join(" "), O = I({
+  } : void 0, O = ["se-design-button", A, j, B, f, m ? "" : "rounded-[6px] flex gap-1 items-center min-w-fit"].filter(Boolean).join(" "), _ = R({
     ariaLabel: w,
     ariaLabelledBy: N,
     ariaDescribedBy: v
   });
   return /* @__PURE__ */ r.createElement("button", c({
-    ref: E,
+    ref: $,
     type: "button",
-    className: B,
+    className: O,
     disabled: d,
     autoFocus: h,
     "data-automation-id": g
-  }, C, $, O), o && /* @__PURE__ */ r.createElement("div", {
+  }, E, P, _), o && /* @__PURE__ */ r.createElement("div", {
     "aria-hidden": "true",
     className: "animate-spin w-4 h-4 border-2 border-current border-t-transparent rounded-full"
   }), !o && l?.name && u === "left" && /* @__PURE__ */ r.createElement(b, l), t && /* @__PURE__ */ r.createElement("span", {
     className: "button-label [font-weight:inherit]"
   }, t), !o && l?.name && u === "right" && /* @__PURE__ */ r.createElement(b, l));
 });
-U.displayName = "Button";
+q.displayName = "Button";
 export {
-  U as Button
+  q as Button
 };
 //# sourceMappingURL=index3.js.map

package/dist/index3.js.map

@@ -1 +1 @@
-{"version":3,"file":"index3.js","sources":["../src/components/Button/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Map } from '../../utils/common.types';\nimport { useAccessiblePress, getA11yNameAttributes } from '../../utils/a11y';\nimport { Icon, IconProps } from '../Icon';\nimport './style.scss';\n\n/**\n * Allows native button attributes (aria-*, data-*, etc.) to be passed through,\n * but keeps our own onClick/disabled/type typing AND aria-label/aria-labelledby/aria-describedby.\n * Note: We omit 'type' because we use it for button variant, not HTML type attribute.\n * The HTML type is always set to 'button' internally.\n */\ntype NativeButtonProps = Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  'onClick' | 'disabled' | 'type' | 'aria-label' | 'aria-labelledby' | 'aria-describedby'\n>;\n\nexport interface ButtonProps extends NativeButtonProps {\n  /**\n   * Type of the button. \n   */\n  type?: 'primary' | 'secondary' | 'ghost' | 'link' | 'unstyled';\n  /**\n   * Color pallet of the button\n   */\n  theme?: 'blue' | 'red' | 'yellow' | 'green' | 'ai' | 'white';\n  /**\n   * Size of the button\n   */\n  size?: 'sm' | 'md' | 'lg';\n  /**\n   * Button contents\n   */\n  label: string | '';\n  /**\n   * Icon props\n   */\n  iconProps?: IconProps;\n  /**\n   * Icon position\n   */\n  iconPosition?: 'left' | 'right';\n  /**\n   * Disabled state\n   */\n  disabled?: boolean;\n  /**\n   * Loading state - will disable button and show spinner\n   */\n  loading?: boolean;\n  /**\n   * Optional click handler (called for pointer/mouse activations)\n   */\n  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n  /**\n   * Optional keyboard activation handler\n   * Called when button is activated via keyboard (Enter/Space) or assistive technology virtual activation.\n   * Use when you want to have different behavior for keyboard and pointer activations.\n   * If not provided, onClick will be called for all activations.\n   */\n  onKeyboardActivate?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n  /**\n   * Custom class name\n   */\n  className?: string;\n  /**\n   * Automation ID for testing\n   */\n  automationId?: string;\n  /**\n   * If true, button will be focused on mount.\n   * For programmatic focus control, use ref with .focus() instead.\n   */\n  autoFocus?: boolean;\n  /**\n   * Accessible name for the button. Use when there's no visible label (e.g., icon-only buttons).\n   * Prefer ariaLabelledBy when a visible label exists.\n   */\n  ariaLabel?: string;\n  /**\n   * ID(s) of element(s) that label this button.\n   * Preferred over ariaLabel when a visible label exists (keeps SR and visual text in sync).\n   */\n  ariaLabelledBy?: string;\n  /**\n   * ID(s) of element(s) that describe this button.\n   * Provides additional context announced after the accessible name.\n   */\n  ariaDescribedBy?: string;\n}\n\nconst focusClass = 'focus-outline';\nconst disabledClassNames: Map = {\n  primary: 'primary-btn disabled-btn pointer-events-none cursor-not-allowed',\n  secondary: 'secondary-btn disabled-btn pointer-events-none cursor-not-allowed',\n  ghost: 'ghost-btn disabled-btn pointer-events-none cursor-not-allowed',\n  link: 'link-btn w-fit disabled-btn pointer-events-none cursor-not-allowed',\n  unstyled: 'unstyled-btn disabled-btn pointer-events-none cursor-not-allowed',\n  sm: 'py-1 px-3 small', // padding: 4px, 12px\n  md: 'py-2 px-3 medium', // padding: 8px, 12px\n  lg: 'py-3 px-4 large' // padding: 12px, 16px\n};\nconst classNames: Map = {\n  primary: `primary-btn ${focusClass}`,\n  secondary: `secondary-btn ${focusClass}`,\n  ghost: `ghost-btn ${focusClass}`,\n  link: `link-btn w-fit ${focusClass}`,\n  unstyled: `unstyled-btn ${focusClass}`,\n  sm: 'py-1 px-3 small', // padding: 4px, 12px\n  md: 'py-2 px-3 medium', // padding: 8px, 12px\n  lg: 'py-3 px-4 large' // padding: 12px, 16px\n};\n\nconst colorPalletClassNames: Map = {\n  blue: 'theme-blue',\n  red: 'theme-red',\n  yellow: 'theme-yellow',\n  green: 'theme-green',\n  ai: 'theme-ai',\n  white: 'theme-white'\n};\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      type = 'primary',\n      theme = 'blue',\n      size = 'md',\n      label = '',\n      iconPosition = 'left',\n      disabled = false,\n      loading = false,\n      className = '',\n      iconProps = { name: '' },\n      automationId = '',\n      autoFocus = false,\n      ariaLabel,\n      ariaLabelledBy,\n      ariaDescribedBy,\n      onClick,\n      onKeyboardActivate,\n      ...props\n    },\n    ref\n  ) => {\n  const isUnstyled = type === 'unstyled';\n\n  // Use shared hook for activation handling (pointer vs keyboard/virtual click routing)\n  const { pressProps, isDisabled } = useAccessiblePress({\n    disabled,\n    loading,\n    isNative: true, // native <button> => hook does NOT add Enter/Space onKeyDown\n    onClick: onClick as (e: React.MouseEvent<HTMLElement>) => void,\n    onKeyboardActivate: onKeyboardActivate as (e: React.MouseEvent<HTMLElement>) => void\n  });\n\n  // Skip size/color classes for unstyled variant\n  const sizeClassName = !isUnstyled && type !== 'link' ? classNames[size] : '';\n  const colorPalletClassName = !isUnstyled ? colorPalletClassNames[theme] : '';\n  const typeClassName = isDisabled ? disabledClassNames[type] : classNames[type];\n\n  // Avoid mutating incoming iconProps\n  const computedIconProps: IconProps | undefined = iconProps?.name\n    ? {\n        ...iconProps,\n        stroke: isDisabled ? 'var(--color-gray-600)' : iconProps.stroke\n      }\n    : undefined;\n\n  const buttonClassName = [\n    'se-design-button',\n    colorPalletClassName,\n    sizeClassName,\n    typeClassName,\n    className,\n    !isUnstyled ? 'rounded-[6px] flex gap-1 items-center min-w-fit' : ''\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  // Compute accessible name/description props with correct precedence\n  const accessibleNameProps = getA11yNameAttributes({\n    ariaLabel,\n    ariaLabelledBy,\n    ariaDescribedBy\n  });\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      className={buttonClassName}\n      disabled={isDisabled}\n      autoFocus={autoFocus}\n      data-automation-id={automationId}\n      {...props}\n      {...(pressProps as React.ButtonHTMLAttributes<HTMLButtonElement>)}\n      {...accessibleNameProps}\n    >\n      {loading && (\n        <div\n          aria-hidden=\"true\"\n          className=\"animate-spin w-4 h-4 border-2 border-current border-t-transparent rounded-full\"\n        />\n      )}\n      {!loading && computedIconProps?.name && iconPosition === 'left' && (\n        <Icon {...computedIconProps} />\n      )}\n      {label && <span className=\"button-label [font-weight:inherit]\">{label}</span>}\n      {!loading && computedIconProps?.name && iconPosition === 'right' && (\n        <Icon {...computedIconProps} />\n      )}\n    </button>\n  );\n  }\n);\n\nButton.displayName = 'Button';\n"],"names":["focusClass","disabledClassNames","primary","secondary","ghost","link","unstyled","sm","md","lg","classNames","colorPalletClassNames","blue","red","yellow","green","ai","white","Button","type","theme","size","label","iconPosition","disabled","loading","className","iconProps","name","automationId","autoFocus","ariaLabel","ariaLabelledBy","ariaDescribedBy","onClick","onKeyboardActivate","props","ref","isUnstyled","pressProps","isDisabled","useAccessiblePress","isNative","sizeClassName","colorPalletClassName","typeClassName","computedIconProps","stroke","undefined","buttonClassName","filter","Boolean","join","accessibleNameProps","getA11yNameAttributes","React","createElement","_extends","Icon","displayName"],"mappings":"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"}
+{"version":3,"file":"index3.js","sources":["../src/components/Button/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Map } from '../../utils/common.types';\nimport { useAccessiblePress, getA11yNameAttributes } from '../../utils/a11y';\nimport { Icon, IconProps } from '../Icon';\nimport './style.scss';\n\n/**\n * Allows native button attributes (aria-*, data-*, etc.) to be passed through,\n * but keeps our own onClick/disabled/type typing AND aria-label/aria-labelledby/aria-describedby.\n * Note: We omit 'type' because we use it for button variant, not HTML type attribute.\n * The HTML type is always set to 'button' internally.\n */\ntype NativeButtonProps = Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  'onClick' | 'disabled' | 'type' | 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'aria-pressed'\n>;\n\nexport interface ButtonProps extends NativeButtonProps {\n  /**\n   * Type of the button. \n   */\n  type?: 'primary' | 'secondary' | 'ghost' | 'link' | 'unstyled';\n  /**\n   * Color pallet of the button\n   */\n  theme?: 'blue' | 'red' | 'yellow' | 'green' | 'ai' | 'white';\n  /**\n   * Size of the button\n   */\n  size?: 'sm' | 'md' | 'lg';\n  /**\n   * Button contents\n   */\n  label: string | '';\n  /**\n   * Icon props\n   */\n  iconProps?: IconProps;\n  /**\n   * Icon position\n   */\n  iconPosition?: 'left' | 'right';\n  /**\n   * Disabled state\n   */\n  disabled?: boolean;\n  /**\n   * Loading state - will disable button and show spinner\n   */\n  loading?: boolean;\n  /**\n   * Optional click handler (called for pointer/mouse activations)\n   */\n  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n  /**\n   * Optional keyboard activation handler\n   * Called when button is activated via keyboard (Enter/Space) or assistive technology virtual activation.\n   * Use when you want to have different behavior for keyboard and pointer activations.\n   * If not provided, onClick will be called for all activations.\n   */\n  onKeyboardActivate?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n  /**\n   * Custom class name\n   */\n  className?: string;\n  /**\n   * Automation ID for testing\n   */\n  automationId?: string;\n  /**\n   * If true, button will be focused on mount.\n   * For programmatic focus control, use ref with .focus() instead.\n   */\n  autoFocus?: boolean;\n  /**\n   * Accessible name for the button. Use when there's no visible label (e.g., icon-only buttons).\n   * Prefer ariaLabelledBy when a visible label exists.\n   */\n  ariaLabel?: string;\n  /**\n   * ID(s) of element(s) that label this button.\n   * Preferred over ariaLabel when a visible label exists (keeps SR and visual text in sync).\n   */\n  ariaLabelledBy?: string;\n  /**\n   * ID(s) of element(s) that describe this button.\n   * Provides additional context announced after the accessible name.\n   */\n  ariaDescribedBy?: string;\n  /**\n   * When true, sets aria-pressed for toggle/pressed state \n   */\n  isPressed?: boolean;\n}\n\nconst focusClass = 'focus-outline';\nconst disabledClassNames: Map = {\n  primary: 'primary-btn disabled-btn pointer-events-none cursor-not-allowed',\n  secondary: 'secondary-btn disabled-btn pointer-events-none cursor-not-allowed',\n  ghost: 'ghost-btn disabled-btn pointer-events-none cursor-not-allowed',\n  link: 'link-btn w-fit disabled-btn pointer-events-none cursor-not-allowed',\n  unstyled: 'unstyled-btn disabled-btn pointer-events-none cursor-not-allowed',\n  sm: 'py-1 px-3 small', // padding: 4px, 12px\n  md: 'py-2 px-3 medium', // padding: 8px, 12px\n  lg: 'py-3 px-4 large' // padding: 12px, 16px\n};\nconst classNames: Map = {\n  primary: `primary-btn ${focusClass}`,\n  secondary: `secondary-btn ${focusClass}`,\n  ghost: `ghost-btn ${focusClass}`,\n  link: `link-btn w-fit ${focusClass}`,\n  unstyled: `unstyled-btn ${focusClass}`,\n  sm: 'py-1 px-3 small', // padding: 4px, 12px\n  md: 'py-2 px-3 medium', // padding: 8px, 12px\n  lg: 'py-3 px-4 large' // padding: 12px, 16px\n};\n\nconst colorPalletClassNames: Map = {\n  blue: 'theme-blue',\n  red: 'theme-red',\n  yellow: 'theme-yellow',\n  green: 'theme-green',\n  ai: 'theme-ai',\n  white: 'theme-white'\n};\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      type = 'primary',\n      theme = 'blue',\n      size = 'md',\n      label = '',\n      iconPosition = 'left',\n      disabled = false,\n      loading = false,\n      className = '',\n      iconProps = { name: '' },\n      automationId = '',\n      autoFocus = false,\n      ariaLabel,\n      ariaLabelledBy,\n      ariaDescribedBy,\n      isPressed,\n      onClick,\n      onKeyboardActivate,\n      ...props\n    },\n    ref\n  ) => {\n  const isUnstyled = type === 'unstyled';\n\n  // Use shared hook for activation handling (pointer vs keyboard/virtual click routing) \n  const { pressProps, isDisabled } = useAccessiblePress({\n    disabled,\n    loading,\n    isNative: true, // native <button> => hook does NOT add Enter/Space onKeyDown\n    pressed: isPressed,\n    onClick: onClick as (e: React.MouseEvent<HTMLElement>) => void,\n    onKeyboardActivate: onKeyboardActivate as (e: React.MouseEvent<HTMLElement>) => void\n  });\n\n  // Skip size/color classes for unstyled variant\n  const sizeClassName = !isUnstyled && type !== 'link' ? classNames[size] : '';\n  const colorPalletClassName = !isUnstyled ? colorPalletClassNames[theme] : '';\n  const typeClassName = isDisabled ? disabledClassNames[type] : classNames[type];\n\n  // Avoid mutating incoming iconProps\n  const computedIconProps: IconProps | undefined = iconProps?.name\n    ? {\n        ...iconProps,\n        stroke: isDisabled ? 'var(--color-gray-600)' : iconProps.stroke\n      }\n    : undefined;\n\n  const buttonClassName = [\n    'se-design-button',\n    colorPalletClassName,\n    sizeClassName,\n    typeClassName,\n    className,\n    !isUnstyled ? 'rounded-[6px] flex gap-1 items-center min-w-fit' : ''\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  // Compute accessible name/description props with correct precedence\n  const accessibleNameProps = getA11yNameAttributes({\n    ariaLabel,\n    ariaLabelledBy,\n    ariaDescribedBy\n  });\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      className={buttonClassName}\n      disabled={isDisabled}\n      autoFocus={autoFocus}\n      data-automation-id={automationId}\n      {...props}\n      {...(pressProps as React.ButtonHTMLAttributes<HTMLButtonElement>)}\n      {...accessibleNameProps}\n    >\n      {loading && (\n        <div\n          aria-hidden=\"true\"\n          className=\"animate-spin w-4 h-4 border-2 border-current border-t-transparent rounded-full\"\n        />\n      )}\n      {!loading && computedIconProps?.name && iconPosition === 'left' && (\n        <Icon {...computedIconProps} />\n      )}\n      {label && <span className=\"button-label [font-weight:inherit]\">{label}</span>}\n      {!loading && computedIconProps?.name && iconPosition === 'right' && (\n        <Icon {...computedIconProps} />\n      )}\n    </button>\n  );\n  }\n);\n\nButton.displayName = 'Button';\n"],"names":["focusClass","disabledClassNames","primary","secondary","ghost","link","unstyled","sm","md","lg","classNames","colorPalletClassNames","blue","red","yellow","green","ai","white","Button","type","theme","size","label","iconPosition","disabled","loading","className","iconProps","name","automationId","autoFocus","ariaLabel","ariaLabelledBy","ariaDescribedBy","isPressed","onClick","onKeyboardActivate","props","ref","isUnstyled","pressProps","isDisabled","useAccessiblePress","isNative","pressed","sizeClassName","colorPalletClassName","typeClassName","computedIconProps","stroke","undefined","buttonClassName","filter","Boolean","join","accessibleNameProps","getA11yNameAttributes","React","createElement","_extends","Icon","displayName"],"mappings":"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"}

package/dist/index31.js

@@ -1,7 +1,7 @@
 import e from "react";
 import { Button as N } from "./index3.js";
 import { Badge as I } from "./index9.js";
-import { Icon as d } from "./index5.js";
+import { Icon as g } from "./index5.js";
 /* empty css         */
 const t = {
   widgetCtn: "flex flex-col gap-[2px] align-center border border-[var(--color-gray-200)] rounded-[12px] w-[385px]",
@@ -21,16 +21,16 @@ const t = {
   requestFeatureImageCtn: "w-[48px] h-[48px] border border-[var(--color-gray-200)] rounded-[50%] flex items-center flex-shrink-0 bg-[var(--color-red-50)]",
   requestFeatureDescriptionCtn: "flex flex-col"
 }, B = ({
-  widgetClassName: g = "",
+  widgetClassName: d = "",
   widgetType: a = "general",
   widgetTitle: r = "",
   widgetDescription: l = "",
   widgetImage: p,
-  hasImage: f = !1,
+  hasImage: x = !1,
   hasButtonCta: n = !1,
   hasLinkCta: i = !1,
   ctaText: o = "",
-  hasBadge: x = !1,
+  hasBadge: f = !1,
   badgeText: w = "",
   buttonBgColor: u = "secondary",
   onCtaClick: b,
@@ -38,7 +38,7 @@ const t = {
   webinarDateInfo: c,
   webinarSpeaker: s
 }) => {
-  const E = x && /* @__PURE__ */ e.createElement(I, {
+  const E = f && /* @__PURE__ */ e.createElement(I, {
     label: w,
     className: t.widgetBadge,
     bgColor: "var(--color-yellow-50)",
@@ -52,14 +52,14 @@ const t = {
     label: o,
     className: `${t.widgetButtonCta} mt-[4px]`,
     onClick: b
-  })), C = f && /* @__PURE__ */ e.createElement("div", {
+  })), C = x && /* @__PURE__ */ e.createElement("div", {
     className: `${t.widgetImageCtn} widget-image-ctn`
   }, /* @__PURE__ */ e.createElement("img", {
     src: p,
     alt: "widget-image"
   }));
   return /* @__PURE__ */ e.createElement("div", {
-    className: `${t.widgetCtn} ${g} widget-ctn`,
+    className: `${t.widgetCtn} ${d} widget-ctn`,
     onClick: v
   }, a !== "general" && C, /* @__PURE__ */ e.createElement("div", {
     className: t.descriptionCtn
@@ -71,14 +71,14 @@ const t = {
     className: t.webinarInfoCtn
   }, s && /* @__PURE__ */ e.createElement("div", {
     className: `${t.webinarDescriptionInfo} align-baseline`
-  }, /* @__PURE__ */ e.createElement(d, {
+  }, /* @__PURE__ */ e.createElement(g, {
     name: "people",
     className: "relative top-[2px]"
   }), /* @__PURE__ */ e.createElement("span", {
     className: t.webinarSpeaker
   }, s)), c && /* @__PURE__ */ e.createElement("div", {
     className: `${t.webinarTimeInfo} align-baseline mb-[4px]`
-  }, /* @__PURE__ */ e.createElement(d, {
+  }, /* @__PURE__ */ e.createElement(g, {
     name: "clock",
     className: "relative top-[2px]"
   }), /* @__PURE__ */ e.createElement("span", {
@@ -96,7 +96,6 @@ const t = {
   }, l), m)) : m));
 };
 export {
-  B as Widget,
-  B as default
+  B as Widget
 };
 //# sourceMappingURL=index31.js.map

package/dist/index34.js

@@ -1,6 +1,6 @@
 import e, { useState as h, useEffect as E } from "react";
 import { Icon as N } from "./index5.js";
-import { useStableId as $ } from "./index184.js";
+import { useStableId as $ } from "./index185.js";
 import { getRegionAttributes as I } from "./index65.js";
 import { useAccessiblePress as _ } from "./index66.js";
 function r() {

package/dist/index36.js

@@ -1,61 +1,58 @@
-import e, { useState as p, useRef as k } from "react";
+import a, { useState as p, useRef as N } from "react";
 /* empty css         */
-import { Icon as y } from "./index5.js";
-function _({
+import { Icon as k } from "./index5.js";
+function D({
   value: g,
   onChange: s,
   placeholder: f,
-  className: w,
+  className: d,
   error: o,
-  errorMessage: d,
-  label: l,
-  automationId: h = ""
+  errorMessage: h,
+  label: c,
+  automationId: w = ""
 }) {
-  const [n, c] = p([...g]), [i, r] = p(""), u = k(null), E = (a) => {
-    if (a.key === "Enter" && i.trim()) {
-      a.preventDefault();
-      const t = [...n, i.trim()];
-      c(t), r(""), s?.(t);
-    } else if (a.key === "Backspace" && i === "" && n.length > 0) {
-      const t = n.slice(0, -1);
-      c(t), s?.(t);
-    }
+  const [n, l] = p([...g]), [i, r] = p(""), u = N(null), m = (t) => {
+    const e = n.filter((y, E) => E !== t);
+    l(e), s?.(e);
+  }, v = (t) => {
+    if (t.key === "Enter" && i.trim()) {
+      t.preventDefault();
+      const e = [...n, i.trim()];
+      l(e), r(""), s?.(e);
+    } else t.key === "Backspace" && i === "" && n.length > 0 && m(n.length - 1);
   };
-  return /* @__PURE__ */ e.createElement("div", {
+  return /* @__PURE__ */ a.createElement("div", {
     className: "input-with-tags-main-container",
-    "data-automation-id": h
-  }, l && /* @__PURE__ */ e.createElement("div", {
+    "data-automation-id": w
+  }, c && /* @__PURE__ */ a.createElement("div", {
     className: "label-container"
-  }, l), /* @__PURE__ */ e.createElement("div", {
-    className: `input-with-tags-container ${o ? "input-with-tags-error" : ""} ${w}`,
+  }, c), /* @__PURE__ */ a.createElement("div", {
+    className: `input-with-tags-container ${o ? "input-with-tags-error" : ""} ${d}`,
     onClick: () => u.current?.focus()
-  }, n.map((a, t) => /* @__PURE__ */ e.createElement("span", {
-    key: t,
+  }, n.map((t, e) => /* @__PURE__ */ a.createElement("span", {
+    key: e,
     className: "tag-in-inputwithtags",
-    "data-automation-id": `input-tag-${t}`
-  }, a, /* @__PURE__ */ e.createElement("span", {
+    "data-automation-id": `input-tag-${e}`
+  }, t, /* @__PURE__ */ a.createElement(k, {
+    name: "close",
     className: "close-icon-in-inputwithtags",
-    onClick: (v) => {
-      v.stopPropagation();
-      const m = n.filter((T, N) => N !== t);
-      c(m), s?.(m);
-    }
-  }, /* @__PURE__ */ e.createElement(y, {
-    name: "close"
-  })))), /* @__PURE__ */ e.createElement("input", {
+    ariaLabel: `Remove tag ${t}`,
+    onClick: () => m(e),
+    shouldStopPropagation: !0
+  }))), /* @__PURE__ */ a.createElement("input", {
     className: "input-with-tags-input",
     ref: u,
     type: "text",
     value: i,
-    onChange: (a) => r(a.target.value),
-    onKeyDown: E,
+    onChange: (t) => r(t.target.value),
+    onKeyDown: v,
     placeholder: f,
     "data-automation-id": "input-with-tags-input-field"
-  })), o && /* @__PURE__ */ e.createElement("div", {
+  })), o && /* @__PURE__ */ a.createElement("div", {
     className: "error-message"
-  }, d));
+  }, h));
 }
 export {
-  _ as InputWithTags
+  D as InputWithTags
 };
 //# sourceMappingURL=index36.js.map

package/dist/index36.js.map

@@ -1 +1 @@
-{"version":3,"file":"index36.js","sources":["../src/components/InputWithTags/index.tsx"],"sourcesContent":["import React, { useState, KeyboardEvent, useRef } from \"react\";\nimport './styles.scss';\nimport { Icon } from '../Icon';\n\nexport interface InputWithTagsProps {\n    value: string[];\n    onChange?: (tags: string[]) => void;\n    placeholder?: string;\n    className?: string;\n    error?: boolean;\n    errorMessage?: string;\n    label?: string;\n    automationId?: string;\n}\n\nexport function InputWithTags({ \n    value, \n    onChange, \n    placeholder, \n    className, \n    error, \n    errorMessage, \n    label,\n    automationId = ''\n}: InputWithTagsProps) {\n    const [tags, setTags] = useState<string[]>([...value]);\n    const [inputValue, setInputValue] = useState('');\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n        if (e.key === 'Enter' && inputValue.trim()) {\n            e.preventDefault();\n            const newTags = [...tags, inputValue.trim()];\n            setTags(newTags);\n            setInputValue(\"\");\n            onChange?.(newTags);\n        } else if (e.key === 'Backspace' && inputValue === \"\" && tags.length > 0) {\n            // Remove the last tag when backspace is pressed on empty input\n            const newTags = tags.slice(0, -1);\n            setTags(newTags);\n            onChange?.(newTags);\n        }\n    };\n\n    return (\n        <div className=\"input-with-tags-main-container\" data-automation-id={automationId}>\n            {label && <div className=\"label-container\">{label}</div>}\n            <div \n                className={`input-with-tags-container ${error ? 'input-with-tags-error' : ''} ${className}`} \n                onClick={() => inputRef.current?.focus()}\n            >\n                {tags.map((tag, index) => (\n                    <span key={index} className=\"tag-in-inputwithtags\" data-automation-id={`input-tag-${index}`}>\n                        {tag} \n                        <span\n                        className=\"close-icon-in-inputwithtags\"\n                        onClick={(e) => {\n                            e.stopPropagation();\n                            const newTags = tags.filter((_, i) => i !== index);\n                            setTags(newTags);\n                            onChange?.(newTags);\n                        }}\n                        >\n                            <Icon name=\"close\" />\n                        </span>\n                    </span>\n                ))}\n                <input\n                    className=\"input-with-tags-input\"\n                    ref={inputRef}\n                    type=\"text\"\n                    value={inputValue}\n                    onChange={(e) => setInputValue(e.target.value)}\n                    onKeyDown={handleKeyDown}\n                    placeholder={placeholder}\n                    data-automation-id=\"input-with-tags-input-field\"\n                />\n            </div>\n            {error && <div className=\"error-message\">{errorMessage}</div>}\n        </div>\n    );\n}"],"names":["React__default","useState","useRef","Icon","InputWithTags","value","onChange","placeholder","className","error","errorMessage","label","automationId","tags","setTags","inputValue","setInputValue","inputRef","handleKeyDown","e","key","trim","preventDefault","newTags","length","slice","React","createElement","onClick","current","focus","map","tag","index","stopPropagation","filter","_","i","name","ref","type","target","onKeyDown"],"mappings":"AAeO,OAAAA,KAAA,YAAAC,GAAA,UAAAC,SAAA;AAAA,OAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,SAASC,EAAc;AAAA,EAC1BC,OAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,cAAAA,IAAe;AACC,GAAG;AACnB,QAAM,CAACC,GAAMC,CAAO,IAAIb,EAAmB,CAAC,GAAGI,CAAK,CAAC,GAC/C,CAACU,GAAYC,CAAa,IAAIf,EAAS,EAAE,GACzCgB,IAAWf,EAAyB,IAAI,GAExCgB,IAAgBA,CAACC,MAAuC;AAC1D,QAAIA,EAAEC,QAAQ,WAAWL,EAAWM,QAAQ;AACxCF,MAAAA,EAAEG,eAAAA;AACF,YAAMC,IAAU,CAAC,GAAGV,GAAME,EAAWM,MAAM;AAC3CP,MAAAA,EAAQS,CAAO,GACfP,EAAc,EAAE,GAChBV,IAAWiB,CAAO;AAAA,IACtB,WAAWJ,EAAEC,QAAQ,eAAeL,MAAe,MAAMF,EAAKW,SAAS,GAAG;AAEtE,YAAMD,IAAUV,EAAKY,MAAM,GAAG,EAAE;AAChCX,MAAAA,EAAQS,CAAO,GACfjB,IAAWiB,CAAO;AAAA,IACtB;AAAA,EACJ;AAEA,SACIG,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKnB,WAAU;AAAA,IAAiC,sBAAoBI;AAAAA,EAAAA,GAC/DD,KAASe,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKnB,WAAU;AAAA,EAAA,GAAmBG,CAAW,GACvDe,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACInB,WAAW,6BAA6BC,IAAQ,0BAA0B,EAAE,IAAID,CAAS;AAAA,IACzFoB,SAASA,MAAMX,EAASY,SAASC,MAAAA;AAAAA,EAAM,GAEtCjB,EAAKkB,IAAI,CAACC,GAAKC,MACZP,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMP,KAAKa;AAAAA,IAAOzB,WAAU;AAAA,IAAuB,sBAAoB,aAAayB,CAAK;AAAA,EAAA,GACpFD,GACDN,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IACAnB,WAAU;AAAA,IACVoB,SAAUT,CAAAA,MAAM;AACZA,MAAAA,EAAEe,gBAAAA;AACF,YAAMX,IAAUV,EAAKsB,OAAO,CAACC,GAAGC,MAAMA,MAAMJ,CAAK;AACjDnB,MAAAA,EAAQS,CAAO,GACfjB,IAAWiB,CAAO;AAAA,IACtB;AAAA,EAAA,GAEIG,gBAAAA,EAAAC,cAACxB,GAAI;AAAA,IAACmC,MAAK;AAAA,EAAA,CAAS,CAClB,CACJ,CACT,GACDZ,gBAAAA,EAAAC,cAAA,SAAA;AAAA,IACInB,WAAU;AAAA,IACV+B,KAAKtB;AAAAA,IACLuB,MAAK;AAAA,IACLnC,OAAOU;AAAAA,IACPT,UAAWa,CAAAA,MAAMH,EAAcG,EAAEsB,OAAOpC,KAAK;AAAA,IAC7CqC,WAAWxB;AAAAA,IACXX,aAAAA;AAAAA,IACA,sBAAmB;AAAA,EAAA,CACtB,CACA,GACJE,KAASiB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKnB,WAAU;AAAA,EAAA,GAAiBE,CAAkB,CAC3D;AAEb;"}
+{"version":3,"file":"index36.js","sources":["../src/components/InputWithTags/index.tsx"],"sourcesContent":["import React, { useState, KeyboardEvent, useRef } from \"react\";\nimport './styles.scss';\nimport { Icon } from '../Icon';\n\nexport interface InputWithTagsProps {\n    value: string[];\n    onChange?: (tags: string[]) => void;\n    placeholder?: string;\n    className?: string;\n    error?: boolean;\n    errorMessage?: string;\n    label?: string;\n    automationId?: string;\n}\n\nexport function InputWithTags({ \n    value, \n    onChange, \n    placeholder, \n    className, \n    error, \n    errorMessage, \n    label,\n    automationId = ''\n}: InputWithTagsProps) {\n    const [tags, setTags] = useState<string[]>([...value]);\n    const [inputValue, setInputValue] = useState('');\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    const removeTag = (indexToRemove: number) => {\n        const newTags = tags.filter((_, i) => i !== indexToRemove);\n        setTags(newTags);\n        onChange?.(newTags);\n    };\n\n    const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n        if (e.key === 'Enter' && inputValue.trim()) {\n            e.preventDefault();\n            const newTags = [...tags, inputValue.trim()];\n            setTags(newTags);\n            setInputValue(\"\");\n            onChange?.(newTags);\n        } else if (e.key === 'Backspace' && inputValue === \"\" && tags.length > 0) {\n            removeTag(tags.length - 1);\n        }\n    };\n\n    return (\n        <div className=\"input-with-tags-main-container\" data-automation-id={automationId}>\n            {label && <div className=\"label-container\">{label}</div>}\n            <div \n                className={`input-with-tags-container ${error ? 'input-with-tags-error' : ''} ${className}`} \n                onClick={() => inputRef.current?.focus()}\n            >\n                {tags.map((tag, index) => (\n                    <span key={index} className=\"tag-in-inputwithtags\" data-automation-id={`input-tag-${index}`}>\n                        {tag} \n                        <Icon\n                            name=\"close\"\n                            className=\"close-icon-in-inputwithtags\"\n                            ariaLabel={`Remove tag ${tag}`}\n                            onClick={() => removeTag(index)}\n                            shouldStopPropagation\n                        />\n                    </span>\n                ))}\n                <input\n                    className=\"input-with-tags-input\"\n                    ref={inputRef}\n                    type=\"text\"\n                    value={inputValue}\n                    onChange={(e) => setInputValue(e.target.value)}\n                    onKeyDown={handleKeyDown}\n                    placeholder={placeholder}\n                    data-automation-id=\"input-with-tags-input-field\"\n                />\n            </div>\n            {error && <div className=\"error-message\">{errorMessage}</div>}\n        </div>\n    );\n}"],"names":["React__default","useState","useRef","Icon","InputWithTags","value","onChange","placeholder","className","error","errorMessage","label","automationId","tags","setTags","inputValue","setInputValue","inputRef","removeTag","indexToRemove","newTags","filter","_","i","handleKeyDown","e","key","trim","preventDefault","length","React","createElement","onClick","current","focus","map","tag","index","name","ariaLabel","shouldStopPropagation","ref","type","target","onKeyDown"],"mappings":"AAeO,OAAAA,KAAA,YAAAC,GAAA,UAAAC,SAAA;AAAA,OAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,SAASC,EAAc;AAAA,EAC1BC,OAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,cAAAA,IAAe;AACC,GAAG;AACnB,QAAM,CAACC,GAAMC,CAAO,IAAIb,EAAmB,CAAC,GAAGI,CAAK,CAAC,GAC/C,CAACU,GAAYC,CAAa,IAAIf,EAAS,EAAE,GACzCgB,IAAWf,EAAyB,IAAI,GAExCgB,IAAYA,CAACC,MAA0B;AACzC,UAAMC,IAAUP,EAAKQ,OAAO,CAACC,GAAGC,MAAMA,MAAMJ,CAAa;AACzDL,IAAAA,EAAQM,CAAO,GACfd,IAAWc,CAAO;AAAA,EACtB,GAEMI,IAAgBA,CAACC,MAAuC;AAC1D,QAAIA,EAAEC,QAAQ,WAAWX,EAAWY,QAAQ;AACxCF,MAAAA,EAAEG,eAAAA;AACF,YAAMR,IAAU,CAAC,GAAGP,GAAME,EAAWY,MAAM;AAC3Cb,MAAAA,EAAQM,CAAO,GACfJ,EAAc,EAAE,GAChBV,IAAWc,CAAO;AAAA,IACtB,MAAA,CAAWK,EAAEC,QAAQ,eAAeX,MAAe,MAAMF,EAAKgB,SAAS,KACnEX,EAAUL,EAAKgB,SAAS,CAAC;AAAA,EAEjC;AAEA,SACIC,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKvB,WAAU;AAAA,IAAiC,sBAAoBI;AAAAA,EAAAA,GAC/DD,KAASmB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKvB,WAAU;AAAA,EAAA,GAAmBG,CAAW,GACvDmB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACIvB,WAAW,6BAA6BC,IAAQ,0BAA0B,EAAE,IAAID,CAAS;AAAA,IACzFwB,SAASA,MAAMf,EAASgB,SAASC,MAAAA;AAAAA,EAAM,GAEtCrB,EAAKsB,IAAI,CAACC,GAAKC,MACZP,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAML,KAAKW;AAAAA,IAAO7B,WAAU;AAAA,IAAuB,sBAAoB,aAAa6B,CAAK;AAAA,EAAA,GACpFD,GACDN,gBAAAA,EAAAC,cAAC5B,GAAI;AAAA,IACDmC,MAAK;AAAA,IACL9B,WAAU;AAAA,IACV+B,WAAW,cAAcH,CAAG;AAAA,IAC5BJ,SAASA,MAAMd,EAAUmB,CAAK;AAAA,IAC9BG,uBAAqB;AAAA,EAAA,CACxB,CACC,CACT,GACDV,gBAAAA,EAAAC,cAAA,SAAA;AAAA,IACIvB,WAAU;AAAA,IACViC,KAAKxB;AAAAA,IACLyB,MAAK;AAAA,IACLrC,OAAOU;AAAAA,IACPT,UAAWmB,CAAAA,MAAMT,EAAcS,EAAEkB,OAAOtC,KAAK;AAAA,IAC7CuC,WAAWpB;AAAAA,IACXjB,aAAAA;AAAAA,IACA,sBAAmB;AAAA,EAAA,CACtB,CACA,GACJE,KAASqB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKvB,WAAU;AAAA,EAAA,GAAiBE,CAAkB,CAC3D;AAEb;"}

package/dist/index37.js

@@ -4,7 +4,7 @@ import { Icon as we } from "./index5.js";
 import { Checkbox as Ee } from "./index22.js";
 import { Button as G } from "./index3.js";
 import { useCombobox as ke } from "./index191.js";
-import { useStableId as be } from "./index184.js";
+import { useStableId as be } from "./index185.js";
 /* empty css         */
 function g() {
   return g = Object.assign ? Object.assign.bind() : function(v) {
@@ -256,14 +256,13 @@ const Te = /* @__PURE__ */ de(({
     }, r.map((t, e) => /* @__PURE__ */ a.createElement("span", {
       key: e,
       className: "tag-in-inputwithtags"
-    }, t[K], !l && /* @__PURE__ */ a.createElement("span", {
-      className: "close-icon-in-inputwithtags"
-    }, /* @__PURE__ */ a.createElement(we, {
+    }, t[K], !l && /* @__PURE__ */ a.createElement(we, {
       name: "close",
+      className: "close-icon-in-inputwithtags",
       ariaLabel: `Remove tag ${t[K]}`,
       onClick: () => ne(e),
       shouldStopPropagation: !0
-    })))), (J || !r.length) && /* @__PURE__ */ a.createElement("input", g({
+    }))), (J || !r.length) && /* @__PURE__ */ a.createElement("input", g({
       ref: x
     }, U, {
       type: "text",

package/dist/index37.js.map

@@ -1 +1 @@
-{"version":3,"file":"index37.js","sources":["../src/components/DropdownWithInputTags/index.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef, forwardRef, ForwardedRef, useImperativeHandle, KeyboardEvent, useCallback } from 'react';\nimport { Popover, PopoverHandle } from '../Popover';\nimport { Icon } from '../Icon';\nimport { Checkbox } from '../Checkbox';\nimport { Button } from '../Button';\nimport { useCombobox } from '../../utils/a11y';\nimport { useStableId } from '../../utils/useStableId';\nimport './styles.scss';\n\nexport interface DropdownOption {\n  id: string | number;\n  label: string;\n  value: string;\n  [key: string]: any; // Allow additional properties\n}\n\nexport interface DropdownWithInputTagsHandle {\n  toggleDropdown: () => void;\n}\n\nexport interface DropdownWithInputTagsProps {\n  value: string[];\n  onChange?: (tags: string[]) => void;\n  placeholder?: string;\n  className?: string;\n  options?: DropdownOption[];\n  renderOption?: (\n    option: DropdownOption, \n    props: { \n      id: string; \n      role: 'option'; \n      'aria-selected': boolean; \n      onMouseEnter: () => void;\n      className: string;\n    },\n    onSelect: (option: DropdownOption) => void\n  ) => React.ReactNode;\n  label?: string;\n  automationId?: string;\n  noOptionsMessage?: string;\n  allowCustomTags?: boolean;\n  disabled?: boolean;\n  type?: 'select' | 'multi-select' |'multi-select-without-cta';\n  showInput?: boolean;\n  displayTagBy?: 'label' | 'value';\n}\n\nexport const DropdownWithInputTags = forwardRef<DropdownWithInputTagsHandle, DropdownWithInputTagsProps>(\n  (\n    {\n      value,\n      onChange,\n      placeholder = \"Type to search or add custom tags...\",\n      className = '',\n      options = [],\n      renderOption,\n      label,\n      automationId = '',\n      noOptionsMessage = \"No options found\",\n      allowCustomTags = true,\n      disabled = false,\n      type = 'select',\n      showInput = true,\n      displayTagBy = 'label'\n    },\n    ref: ForwardedRef<DropdownWithInputTagsHandle>\n  ) => {\n    // Define initValues at the top, right after props\n    const initValues = (values: string[]) => {\n      return values.map(val => {\n        const found = options.find(opt => opt.value === val);\n        return found ? { label: found.label, value: found.value } : { label: val, value: val };\n      });\n    };\n\n    // Now use it in useState\n    const [tags, setTags] = useState<{ label: string; value: string }[]>(() => {\n      return initValues(value || []);\n    });\n    const [inputValue, setInputValue] = useState('');\n    const [filteredOptions, setFilteredOptions] = useState<DropdownOption[]>(options);\n    const [isDropdownOpen, setIsDropdownOpen] = useState(false);\n    const popoverRef = useRef<PopoverHandle>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const applyClickedRef = useRef<boolean>(false);\n    \n    const isMultiSelectWithoutCTA = type === 'multi-select-without-cta';\n    const isMultiSelect = type === 'multi-select' ||isMultiSelectWithoutCTA;\n\n    // Generate stable ID for listbox\n    const listboxId = useStableId(automationId, 'dropdown-input-tags-listbox');\n\n    const handleSelectOption = useCallback(\n      (option: DropdownOption) => {\n        if (disabled) return;\n\n        const newTags = [...tags];\n        if (!newTags.some((tag) => tag.value === option.value)) {\n          newTags.push({ label: option.label, value: option.value });\n          setTags(newTags);\n          onChange?.(newTags.map((tag) => tag.value));\n        }\n        setInputValue('');\n        setIsDropdownOpen(false);\n      },\n      [disabled, tags, onChange]\n    );\n\n    const handleMultiSelectDropdownOptionClick = useCallback(\n      (isSelected: boolean, option: DropdownOption) => {\n        let newSelectedTags: { label: string; value: string }[] = [];\n        if (isSelected) {\n          newSelectedTags = [...tags, { label: option.label, value: option.value }];\n        } else {\n          newSelectedTags = tags.filter((tag) => tag.value !== option.value);\n        }\n        setTags(newSelectedTags);\n        if (isMultiSelectWithoutCTA) {\n          onChange?.(newSelectedTags.map((tag) => tag.value));\n        }\n      },\n      [tags, isMultiSelectWithoutCTA, onChange]\n    );\n\n    const ADD_CUSTOM_TAG_VALUE = '__add_custom_tag__';\n\n    const handleSelectFromDropdown = useCallback((option: DropdownOption) => {\n      if (disabled) return;\n\n      if (option.value === ADD_CUSTOM_TAG_VALUE) {\n        const trimmed = inputValue.trim();\n        if (!trimmed) return;\n        const newTags = [...tags];\n        if (!newTags.some((tag) => tag.value === trimmed)) {\n          newTags.push({ label: trimmed, value: trimmed });\n          setTags(newTags);\n          onChange?.(newTags.map((tag) => tag.value));\n        }\n        setInputValue('');\n        setIsDropdownOpen(false);\n        return;\n      }\n\n      if (isMultiSelect) {\n        const isSelected = tags.some(tag => tag.value === option.value);\n        handleMultiSelectDropdownOptionClick(!isSelected, option);\n      } else {\n        handleSelectOption(option);\n      }\n    }, [disabled, isMultiSelect, tags, inputValue, onChange, handleMultiSelectDropdownOptionClick, handleSelectOption]);\n\n    const effectiveItems: DropdownOption[] =\n      filteredOptions.length > 0\n        ? filteredOptions\n        : allowCustomTags && inputValue.trim()\n          ? [{ id: ADD_CUSTOM_TAG_VALUE, label: `Add \"${inputValue.trim()}\"`, value: ADD_CUSTOM_TAG_VALUE }]\n          : [];\n\n    // Combobox hook for keyboard navigation and ARIA\n    const {\n      containerProps,\n      inputProps: comboboxInputProps,\n      listboxProps,\n      getOptionProps,\n      highlightedIndex,\n      setHighlightedIndex\n    } = useCombobox({\n      items: effectiveItems,\n      isOpen: isDropdownOpen,\n      onOpenChange: setIsDropdownOpen,\n      onSelect: handleSelectFromDropdown,\n      listboxId,\n      hasItems: effectiveItems.length > 0\n    });\n\n\n    useEffect(() => {\n      if (applyClickedRef.current) {\n        applyClickedRef.current = false;\n        return;\n      }\n      setTags(initValues(value || []));\n    }, [value, options, isDropdownOpen]);\n\n\n    useEffect(() => {\n      // const isInputEmpty = !inputValue.trim();\n      const filtered = options.filter(option =>\n        option.label.toLowerCase().includes(inputValue.toLowerCase()) ||\n        option.value.toLowerCase().includes(inputValue.toLowerCase())\n      );\n      setFilteredOptions(filtered);\n    }, [inputValue, options]);\n\n    const handleRemoveTag = (indexToRemove: number) => {\n      if (disabled) return;\n      \n      const newTags = tags.filter((_, index) => index !== indexToRemove);\n      setTags(newTags);\n      \n      //in multiselect if tag removed while dorpdownopen, do not call onchange\n      if(!isMultiSelect || isMultiSelectWithoutCTA ||(isMultiSelect && !isDropdownOpen)) {\n        onChange?.(newTags.map(tag => tag.value));\n      }\n    };\n\n    const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n      if (disabled) return;\n      \n      // Handle Backspace to remove last tag (preserve existing behavior)\n      if (e.key === 'Backspace' && inputValue === \"\" && tags.length > 0) {\n        e.preventDefault();\n        const newTags = tags.slice(0, -1);\n        setTags(newTags);\n        onChange?.(newTags.map(tag => tag.value));\n        return;\n      }\n\n      // Handle Enter for custom tags when no options match\n      if (e.key === 'Enter' && inputValue.trim() && filteredOptions.length === 0 && allowCustomTags) {\n        e.preventDefault();\n        const newTags = [...tags];\n        if (!newTags.some(tag => tag.value === inputValue.trim())) {\n          newTags.push({ label: inputValue.trim(), value: inputValue.trim() });\n          setTags(newTags);\n          onChange?.(newTags.map(tag => tag.value));\n        }\n        setInputValue('');\n        setHighlightedIndex(-1);\n        setIsDropdownOpen(false);\n        return;\n      }\n\n      // Let combobox hook handle all other keyboard events (Arrow keys, Enter, Escape, etc.)\n      comboboxInputProps.onKeyDown(e);\n    };\n\n    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      if (disabled) return;\n      \n      const newValue = e.target.value;\n      setInputValue(newValue);\n      setHighlightedIndex(-1); // Reset highlighted index when user types\n      \n      if (newValue.trim() && !isDropdownOpen) {\n        setIsDropdownOpen(true);\n      }\n    };\n\n    const handleInputFocus = () => {\n      if (disabled) return;\n      \n      if (inputValue.trim() || options.length > 0) {\n        setIsDropdownOpen(true);\n      }\n    };\n\n    const handleInputContainerClick = (e: React.MouseEvent) => {\n      if (disabled) return;\n      \n      e.stopPropagation();\n      inputRef.current?.focus();\n      if (!isDropdownOpen && (inputValue.trim() || options.length > 0)) {\n        setIsDropdownOpen(true);\n      }\n    };\n\n    const handlePopoverWrapperClick = (e: React.MouseEvent) => {\n      if (disabled) {\n        e.preventDefault();\n        e.stopPropagation();\n        return;\n      }\n      \n      const target = e.target as HTMLElement;\n      const isInputArea = target.closest('.input-with-tags-container');\n      if (isInputArea) {\n        e.stopPropagation();\n      }\n    };\n\n    const toggleDropdown = () => {\n      if (disabled) return;\n      setIsDropdownOpen(!isDropdownOpen);\n    };\n\n    useImperativeHandle(ref, () => ({ toggleDropdown }), []);\n\n    const defaultRenderOption = (\n      option: DropdownOption,\n      index: number,\n      onSelect: (option: DropdownOption) => void,\n      disabled: boolean\n    ) => {\n      const isSelected = tags.some((tag) => tag.value === option.value);\n      const isHighlighted = highlightedIndex === index;\n      const optionProps = getOptionProps(index, isSelected);\n      \n      return (\n        <div\n          key={option.id}\n          {...optionProps}\n          className={`dropdown-with-input-tags-option ${isHighlighted ? 'highlighted' : ''}`}\n          onClick={() => !disabled && onSelect(option)}\n          onMouseEnter={() => setHighlightedIndex(index)}\n          data-automation-id={`${automationId}-option-${option.id}`}\n        >\n          <span className=\"option-label\">{option.label}</span>\n          {option.value !== option.label && <span className=\"option-value\">{option.value}</span>}\n        </div>\n      );\n    };\n    const handleApplySelectedDropDownValues = () => {\n      applyClickedRef.current = true;\n      const newTagValues = tags.map(tag => tag.value);\n      onChange?.(newTagValues);\n      setIsDropdownOpen(false);\n    };\n\n    const clearSelectedDropDownValues = () => {\n      setTags([]);\n    };\n    const multiSelectRenderOption = (option: DropdownOption, index: number) => {\n      const isOptionSelected = tags.some(tag => tag.value === option.value);\n      const isHighlighted = highlightedIndex === index;\n      const optionProps = getOptionProps(index, isOptionSelected);\n      \n      return (\n        <div\n          key={option.id}\n          {...optionProps}\n          className={`dropdown-with-input-tags-option dropdown-with-input-tags-multi-select-option ${isHighlighted ? 'highlighted' : ''}`}\n          aria-checked={isOptionSelected}\n          onClick={() => !disabled && handleMultiSelectDropdownOptionClick(!isOptionSelected, option)}\n          onMouseEnter={() => setHighlightedIndex(index)}\n          data-automation-id={`${automationId}-option-${option.id}`}\n        >\n          <span onClick={(e) => e.stopPropagation()}>\n            <Checkbox\n              automationId=\"checkbox\"\n              className=\"checkbox\"\n              defaultChecked={isOptionSelected}\n              onChange={(value) => handleMultiSelectDropdownOptionClick(value, option)}\n              label={option.label}\n            />\n          </span>\n        </div>\n      );\n    };\n\n    const multiSelectRenderCTAs = () => {\n      return (\n        <div className=\"dropdown-with-input-tags-ctas-container\">\n          <Button label=\"Clear\" type=\"link\" size=\"sm\" onClick={clearSelectedDropDownValues} automationId={`${automationId}-clear-button`} />\n          <Button label=\"Apply\" type=\"primary\" size=\"sm\" onClick={handleApplySelectedDropDownValues} automationId={`${automationId}-apply-button`} />\n        </div>\n      );\n    };\n\n    \n\n    return (\n      <div\n        className={`dropdown-with-input-tags-wrapper ${className} ${disabled ? 'disabled-wrapper' : ''}`}\n        data-automation-id={automationId}\n        {...containerProps}\n      >\n        {label && <label id={`${automationId}-label`} className=\"dropdown-with-input-tags-label\">{label}</label>}\n\n        <div onClick={handlePopoverWrapperClick}>\n          <Popover\n            ref={popoverRef}\n            className=\"dropdown-with-input-tags-popover\"\n            contentWidth=\"full\"\n            position=\"bottom-left\"\n            isPopoverOpen={!disabled && isDropdownOpen}\n            onPopoverToggle={disabled ? () => {} : setIsDropdownOpen}\n            disableClickToggle={true}\n            renderPopoverContents={({ closePopoverCb }) => (\n              <>\n                <div\n                  {...listboxProps}\n                  className=\"dropdown-with-input-tags-content\"\n                  {...(isMultiSelect && { 'aria-multiselectable': 'true' })}\n                >\n                  {effectiveItems.length > 0 ? (\n                    effectiveItems.map((option, index) => {\n                      if (option.value === ADD_CUSTOM_TAG_VALUE) {\n                        const isHighlighted = highlightedIndex === index;\n                        const optionProps = getOptionProps(index, false);\n                        return (\n                          <div\n                            key={option.id}\n                            {...optionProps}\n                            className={`dropdown-with-input-tags-option dropdown-with-input-tags-custom-option ${isHighlighted ? 'highlighted' : ''}`}\n                            onClick={() => {\n                              if (disabled) return;\n                              handleSelectFromDropdown(option);\n                              closePopoverCb();\n                            }}\n                            onMouseEnter={() => setHighlightedIndex(index)}\n                          >\n                            Add \"{inputValue.trim()}\"\n                          </div>\n                        );\n                      }\n                      if (isMultiSelect) {\n                        return multiSelectRenderOption(option, index);\n                      }\n                      \n                      const isSelected = tags.some((tag) => tag.value === option.value);\n                      const isHighlighted = highlightedIndex === index;\n                      const optionProps = getOptionProps(index, isSelected);\n                      const optionPropsWithHandlers = {\n                        ...optionProps,\n                        onMouseEnter: () => setHighlightedIndex(index),\n                        className: `dropdown-with-input-tags-option ${isHighlighted ? 'highlighted' : ''}`\n                      };\n                      \n                      return renderOption\n                        ? renderOption(option, optionPropsWithHandlers, handleSelectOption)\n                        : defaultRenderOption(option, index, handleSelectOption, disabled);\n                    })\n                  ) : (\n                    <div className=\"dropdown-with-input-tags-no-options\">\n                      <div className=\"dropdown-with-input-tags-no-options-text\" role=\"status\" aria-live=\"polite\">\n                        {noOptionsMessage}\n                      </div>\n                    </div>\n                  )}\n                </div>\n                {isMultiSelect && !isMultiSelectWithoutCTA && multiSelectRenderCTAs()}\n              </>\n            )}\n            renderPopoverSrcElement={() => (\n              <div className=\"dropdown-with-input-tags-input-container\">\n                <div\n                  className={`input-with-tags-container ${disabled ? 'disabled-input-with-tags-container' : ''}`}\n                  onClick={handleInputContainerClick}\n                >\n                  {tags.map((tag, index) => (\n                    <span key={index} className=\"tag-in-inputwithtags\">\n                      {tag[displayTagBy]}\n                      {!disabled && (\n                          <span className=\"close-icon-in-inputwithtags\">\n                            <Icon\n                              name=\"close\"\n                              ariaLabel={`Remove tag ${tag[displayTagBy]}`}\n                              onClick={() => handleRemoveTag(index)}\n                              shouldStopPropagation\n                            />\n                          </span>\n                      )}\n                    </span>\n                  ))}\n                  {(showInput ||!tags.length) && (\n                    <input\n                      ref={inputRef}\n                      {...comboboxInputProps}\n                      type=\"text\"\n                      value={inputValue}\n                      onChange={handleInputChange}\n                      onKeyDown={handleKeyDown}\n                      onFocus={handleInputFocus}\n                      placeholder={tags.length === 0 ? placeholder : ''}\n                      className=\"input-with-tags-input\"\n                      disabled={disabled}\n                      aria-label={label || 'Search and select options'}\n                    />\n                  )}\n                </div>\n              </div>\n            )}\n            automationId={automationId}\n            popoverContentAutomationId={`${automationId}-content`}\n          />\n        </div>\n      </div>\n    );\n  }\n); "],"names":["DropdownWithInputTags","value","onChange","placeholder","className","options","renderOption","label","automationId","noOptionsMessage","allowCustomTags","disabled","type","showInput","displayTagBy","ref","initValues","values","map","val","found","find","opt","tags","setTags","useState","inputValue","setInputValue","filteredOptions","setFilteredOptions","isDropdownOpen","setIsDropdownOpen","popoverRef","useRef","inputRef","applyClickedRef","isMultiSelectWithoutCTA","isMultiSelect","listboxId","useStableId","handleSelectOption","useCallback","option","newTags","some","tag","push","handleMultiSelectDropdownOptionClick","isSelected","newSelectedTags","filter","ADD_CUSTOM_TAG_VALUE","handleSelectFromDropdown","trimmed","trim","effectiveItems","length","id","containerProps","inputProps","comboboxInputProps","listboxProps","getOptionProps","highlightedIndex","setHighlightedIndex","useCombobox","items","isOpen","onOpenChange","onSelect","hasItems","useEffect","current","filtered","toLowerCase","includes","handleRemoveTag","indexToRemove","_","index","handleKeyDown","e","key","preventDefault","slice","onKeyDown","handleInputChange","newValue","target","handleInputFocus","handleInputContainerClick","stopPropagation","focus","handlePopoverWrapperClick","closest","toggleDropdown","useImperativeHandle","defaultRenderOption","isHighlighted","optionProps","React","createElement","_extends","onClick","onMouseEnter","handleApplySelectedDropDownValues","newTagValues","clearSelectedDropDownValues","multiSelectRenderOption","isOptionSelected","Checkbox","defaultChecked","multiSelectRenderCTAs","Button","size","Popover","contentWidth","position","isPopoverOpen","onPopoverToggle","disableClickToggle","renderPopoverContents","closePopoverCb","Fragment","optionPropsWithHandlers","role","renderPopoverSrcElement","Icon","name","ariaLabel","shouldStopPropagation","onFocus","popoverContentAutomationId"],"mappings":"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"}
+{"version":3,"file":"index37.js","sources":["../src/components/DropdownWithInputTags/index.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef, forwardRef, ForwardedRef, useImperativeHandle, KeyboardEvent, useCallback } from 'react';\nimport { Popover, PopoverHandle } from '../Popover';\nimport { Icon } from '../Icon';\nimport { Checkbox } from '../Checkbox';\nimport { Button } from '../Button';\nimport { useCombobox } from '../../utils/a11y';\nimport { useStableId } from '../../utils/useStableId';\nimport './styles.scss';\n\nexport interface DropdownOption {\n  id: string | number;\n  label: string;\n  value: string;\n  [key: string]: any; // Allow additional properties\n}\n\nexport interface DropdownWithInputTagsHandle {\n  toggleDropdown: () => void;\n}\n\nexport interface DropdownWithInputTagsProps {\n  value: string[];\n  onChange?: (tags: string[]) => void;\n  placeholder?: string;\n  className?: string;\n  options?: DropdownOption[];\n  renderOption?: (\n    option: DropdownOption, \n    props: { \n      id: string; \n      role: 'option'; \n      'aria-selected': boolean; \n      onMouseEnter: () => void;\n      className: string;\n    },\n    onSelect: (option: DropdownOption) => void\n  ) => React.ReactNode;\n  label?: string;\n  automationId?: string;\n  noOptionsMessage?: string;\n  allowCustomTags?: boolean;\n  disabled?: boolean;\n  type?: 'select' | 'multi-select' |'multi-select-without-cta';\n  showInput?: boolean;\n  displayTagBy?: 'label' | 'value';\n}\n\nexport const DropdownWithInputTags = forwardRef<DropdownWithInputTagsHandle, DropdownWithInputTagsProps>(\n  (\n    {\n      value,\n      onChange,\n      placeholder = \"Type to search or add custom tags...\",\n      className = '',\n      options = [],\n      renderOption,\n      label,\n      automationId = '',\n      noOptionsMessage = \"No options found\",\n      allowCustomTags = true,\n      disabled = false,\n      type = 'select',\n      showInput = true,\n      displayTagBy = 'label'\n    },\n    ref: ForwardedRef<DropdownWithInputTagsHandle>\n  ) => {\n    // Define initValues at the top, right after props\n    const initValues = (values: string[]) => {\n      return values.map(val => {\n        const found = options.find(opt => opt.value === val);\n        return found ? { label: found.label, value: found.value } : { label: val, value: val };\n      });\n    };\n\n    // Now use it in useState\n    const [tags, setTags] = useState<{ label: string; value: string }[]>(() => {\n      return initValues(value || []);\n    });\n    const [inputValue, setInputValue] = useState('');\n    const [filteredOptions, setFilteredOptions] = useState<DropdownOption[]>(options);\n    const [isDropdownOpen, setIsDropdownOpen] = useState(false);\n    const popoverRef = useRef<PopoverHandle>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const applyClickedRef = useRef<boolean>(false);\n    \n    const isMultiSelectWithoutCTA = type === 'multi-select-without-cta';\n    const isMultiSelect = type === 'multi-select' ||isMultiSelectWithoutCTA;\n\n    // Generate stable ID for listbox\n    const listboxId = useStableId(automationId, 'dropdown-input-tags-listbox');\n\n    const handleSelectOption = useCallback(\n      (option: DropdownOption) => {\n        if (disabled) return;\n\n        const newTags = [...tags];\n        if (!newTags.some((tag) => tag.value === option.value)) {\n          newTags.push({ label: option.label, value: option.value });\n          setTags(newTags);\n          onChange?.(newTags.map((tag) => tag.value));\n        }\n        setInputValue('');\n        setIsDropdownOpen(false);\n      },\n      [disabled, tags, onChange]\n    );\n\n    const handleMultiSelectDropdownOptionClick = useCallback(\n      (isSelected: boolean, option: DropdownOption) => {\n        let newSelectedTags: { label: string; value: string }[] = [];\n        if (isSelected) {\n          newSelectedTags = [...tags, { label: option.label, value: option.value }];\n        } else {\n          newSelectedTags = tags.filter((tag) => tag.value !== option.value);\n        }\n        setTags(newSelectedTags);\n        if (isMultiSelectWithoutCTA) {\n          onChange?.(newSelectedTags.map((tag) => tag.value));\n        }\n      },\n      [tags, isMultiSelectWithoutCTA, onChange]\n    );\n\n    const ADD_CUSTOM_TAG_VALUE = '__add_custom_tag__';\n\n    const handleSelectFromDropdown = useCallback((option: DropdownOption) => {\n      if (disabled) return;\n\n      if (option.value === ADD_CUSTOM_TAG_VALUE) {\n        const trimmed = inputValue.trim();\n        if (!trimmed) return;\n        const newTags = [...tags];\n        if (!newTags.some((tag) => tag.value === trimmed)) {\n          newTags.push({ label: trimmed, value: trimmed });\n          setTags(newTags);\n          onChange?.(newTags.map((tag) => tag.value));\n        }\n        setInputValue('');\n        setIsDropdownOpen(false);\n        return;\n      }\n\n      if (isMultiSelect) {\n        const isSelected = tags.some(tag => tag.value === option.value);\n        handleMultiSelectDropdownOptionClick(!isSelected, option);\n      } else {\n        handleSelectOption(option);\n      }\n    }, [disabled, isMultiSelect, tags, inputValue, onChange, handleMultiSelectDropdownOptionClick, handleSelectOption]);\n\n    const effectiveItems: DropdownOption[] =\n      filteredOptions.length > 0\n        ? filteredOptions\n        : allowCustomTags && inputValue.trim()\n          ? [{ id: ADD_CUSTOM_TAG_VALUE, label: `Add \"${inputValue.trim()}\"`, value: ADD_CUSTOM_TAG_VALUE }]\n          : [];\n\n    // Combobox hook for keyboard navigation and ARIA\n    const {\n      containerProps,\n      inputProps: comboboxInputProps,\n      listboxProps,\n      getOptionProps,\n      highlightedIndex,\n      setHighlightedIndex\n    } = useCombobox({\n      items: effectiveItems,\n      isOpen: isDropdownOpen,\n      onOpenChange: setIsDropdownOpen,\n      onSelect: handleSelectFromDropdown,\n      listboxId,\n      hasItems: effectiveItems.length > 0\n    });\n\n\n    useEffect(() => {\n      if (applyClickedRef.current) {\n        applyClickedRef.current = false;\n        return;\n      }\n      setTags(initValues(value || []));\n    }, [value, options, isDropdownOpen]);\n\n\n    useEffect(() => {\n      // const isInputEmpty = !inputValue.trim();\n      const filtered = options.filter(option =>\n        option.label.toLowerCase().includes(inputValue.toLowerCase()) ||\n        option.value.toLowerCase().includes(inputValue.toLowerCase())\n      );\n      setFilteredOptions(filtered);\n    }, [inputValue, options]);\n\n    const handleRemoveTag = (indexToRemove: number) => {\n      if (disabled) return;\n      \n      const newTags = tags.filter((_, index) => index !== indexToRemove);\n      setTags(newTags);\n      \n      //in multiselect if tag removed while dorpdownopen, do not call onchange\n      if(!isMultiSelect || isMultiSelectWithoutCTA ||(isMultiSelect && !isDropdownOpen)) {\n        onChange?.(newTags.map(tag => tag.value));\n      }\n    };\n\n    const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n      if (disabled) return;\n      \n      // Handle Backspace to remove last tag (preserve existing behavior)\n      if (e.key === 'Backspace' && inputValue === \"\" && tags.length > 0) {\n        e.preventDefault();\n        const newTags = tags.slice(0, -1);\n        setTags(newTags);\n        onChange?.(newTags.map(tag => tag.value));\n        return;\n      }\n\n      // Handle Enter for custom tags when no options match\n      if (e.key === 'Enter' && inputValue.trim() && filteredOptions.length === 0 && allowCustomTags) {\n        e.preventDefault();\n        const newTags = [...tags];\n        if (!newTags.some(tag => tag.value === inputValue.trim())) {\n          newTags.push({ label: inputValue.trim(), value: inputValue.trim() });\n          setTags(newTags);\n          onChange?.(newTags.map(tag => tag.value));\n        }\n        setInputValue('');\n        setHighlightedIndex(-1);\n        setIsDropdownOpen(false);\n        return;\n      }\n\n      // Let combobox hook handle all other keyboard events (Arrow keys, Enter, Escape, etc.)\n      comboboxInputProps.onKeyDown(e);\n    };\n\n    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      if (disabled) return;\n      \n      const newValue = e.target.value;\n      setInputValue(newValue);\n      setHighlightedIndex(-1); // Reset highlighted index when user types\n      \n      if (newValue.trim() && !isDropdownOpen) {\n        setIsDropdownOpen(true);\n      }\n    };\n\n    const handleInputFocus = () => {\n      if (disabled) return;\n      \n      if (inputValue.trim() || options.length > 0) {\n        setIsDropdownOpen(true);\n      }\n    };\n\n    const handleInputContainerClick = (e: React.MouseEvent) => {\n      if (disabled) return;\n      \n      e.stopPropagation();\n      inputRef.current?.focus();\n      if (!isDropdownOpen && (inputValue.trim() || options.length > 0)) {\n        setIsDropdownOpen(true);\n      }\n    };\n\n    const handlePopoverWrapperClick = (e: React.MouseEvent) => {\n      if (disabled) {\n        e.preventDefault();\n        e.stopPropagation();\n        return;\n      }\n      \n      const target = e.target as HTMLElement;\n      const isInputArea = target.closest('.input-with-tags-container');\n      if (isInputArea) {\n        e.stopPropagation();\n      }\n    };\n\n    const toggleDropdown = () => {\n      if (disabled) return;\n      setIsDropdownOpen(!isDropdownOpen);\n    };\n\n    useImperativeHandle(ref, () => ({ toggleDropdown }), []);\n\n    const defaultRenderOption = (\n      option: DropdownOption,\n      index: number,\n      onSelect: (option: DropdownOption) => void,\n      disabled: boolean\n    ) => {\n      const isSelected = tags.some((tag) => tag.value === option.value);\n      const isHighlighted = highlightedIndex === index;\n      const optionProps = getOptionProps(index, isSelected);\n      \n      return (\n        <div\n          key={option.id}\n          {...optionProps}\n          className={`dropdown-with-input-tags-option ${isHighlighted ? 'highlighted' : ''}`}\n          onClick={() => !disabled && onSelect(option)}\n          onMouseEnter={() => setHighlightedIndex(index)}\n          data-automation-id={`${automationId}-option-${option.id}`}\n        >\n          <span className=\"option-label\">{option.label}</span>\n          {option.value !== option.label && <span className=\"option-value\">{option.value}</span>}\n        </div>\n      );\n    };\n    const handleApplySelectedDropDownValues = () => {\n      applyClickedRef.current = true;\n      const newTagValues = tags.map(tag => tag.value);\n      onChange?.(newTagValues);\n      setIsDropdownOpen(false);\n    };\n\n    const clearSelectedDropDownValues = () => {\n      setTags([]);\n    };\n    const multiSelectRenderOption = (option: DropdownOption, index: number) => {\n      const isOptionSelected = tags.some(tag => tag.value === option.value);\n      const isHighlighted = highlightedIndex === index;\n      const optionProps = getOptionProps(index, isOptionSelected);\n      \n      return (\n        <div\n          key={option.id}\n          {...optionProps}\n          className={`dropdown-with-input-tags-option dropdown-with-input-tags-multi-select-option ${isHighlighted ? 'highlighted' : ''}`}\n          aria-checked={isOptionSelected}\n          onClick={() => !disabled && handleMultiSelectDropdownOptionClick(!isOptionSelected, option)}\n          onMouseEnter={() => setHighlightedIndex(index)}\n          data-automation-id={`${automationId}-option-${option.id}`}\n        >\n          <span onClick={(e) => e.stopPropagation()}>\n            <Checkbox\n              automationId=\"checkbox\"\n              className=\"checkbox\"\n              defaultChecked={isOptionSelected}\n              onChange={(value) => handleMultiSelectDropdownOptionClick(value, option)}\n              label={option.label}\n            />\n          </span>\n        </div>\n      );\n    };\n\n    const multiSelectRenderCTAs = () => {\n      return (\n        <div className=\"dropdown-with-input-tags-ctas-container\">\n          <Button label=\"Clear\" type=\"link\" size=\"sm\" onClick={clearSelectedDropDownValues} automationId={`${automationId}-clear-button`} />\n          <Button label=\"Apply\" type=\"primary\" size=\"sm\" onClick={handleApplySelectedDropDownValues} automationId={`${automationId}-apply-button`} />\n        </div>\n      );\n    };\n\n    \n\n    return (\n      <div\n        className={`dropdown-with-input-tags-wrapper ${className} ${disabled ? 'disabled-wrapper' : ''}`}\n        data-automation-id={automationId}\n        {...containerProps}\n      >\n        {label && <label id={`${automationId}-label`} className=\"dropdown-with-input-tags-label\">{label}</label>}\n\n        <div onClick={handlePopoverWrapperClick}>\n          <Popover\n            ref={popoverRef}\n            className=\"dropdown-with-input-tags-popover\"\n            contentWidth=\"full\"\n            position=\"bottom-left\"\n            isPopoverOpen={!disabled && isDropdownOpen}\n            onPopoverToggle={disabled ? () => {} : setIsDropdownOpen}\n            disableClickToggle={true}\n            renderPopoverContents={({ closePopoverCb }) => (\n              <>\n                <div\n                  {...listboxProps}\n                  className=\"dropdown-with-input-tags-content\"\n                  {...(isMultiSelect && { 'aria-multiselectable': 'true' })}\n                >\n                  {effectiveItems.length > 0 ? (\n                    effectiveItems.map((option, index) => {\n                      if (option.value === ADD_CUSTOM_TAG_VALUE) {\n                        const isHighlighted = highlightedIndex === index;\n                        const optionProps = getOptionProps(index, false);\n                        return (\n                          <div\n                            key={option.id}\n                            {...optionProps}\n                            className={`dropdown-with-input-tags-option dropdown-with-input-tags-custom-option ${isHighlighted ? 'highlighted' : ''}`}\n                            onClick={() => {\n                              if (disabled) return;\n                              handleSelectFromDropdown(option);\n                              closePopoverCb();\n                            }}\n                            onMouseEnter={() => setHighlightedIndex(index)}\n                          >\n                            Add \"{inputValue.trim()}\"\n                          </div>\n                        );\n                      }\n                      if (isMultiSelect) {\n                        return multiSelectRenderOption(option, index);\n                      }\n                      \n                      const isSelected = tags.some((tag) => tag.value === option.value);\n                      const isHighlighted = highlightedIndex === index;\n                      const optionProps = getOptionProps(index, isSelected);\n                      const optionPropsWithHandlers = {\n                        ...optionProps,\n                        onMouseEnter: () => setHighlightedIndex(index),\n                        className: `dropdown-with-input-tags-option ${isHighlighted ? 'highlighted' : ''}`\n                      };\n                      \n                      return renderOption\n                        ? renderOption(option, optionPropsWithHandlers, handleSelectOption)\n                        : defaultRenderOption(option, index, handleSelectOption, disabled);\n                    })\n                  ) : (\n                    <div className=\"dropdown-with-input-tags-no-options\">\n                      <div className=\"dropdown-with-input-tags-no-options-text\" role=\"status\" aria-live=\"polite\">\n                        {noOptionsMessage}\n                      </div>\n                    </div>\n                  )}\n                </div>\n                {isMultiSelect && !isMultiSelectWithoutCTA && multiSelectRenderCTAs()}\n              </>\n            )}\n            renderPopoverSrcElement={() => (\n              <div className=\"dropdown-with-input-tags-input-container\">\n                <div\n                  className={`input-with-tags-container ${disabled ? 'disabled-input-with-tags-container' : ''}`}\n                  onClick={handleInputContainerClick}\n                >\n                  {tags.map((tag, index) => (\n                    <span key={index} className=\"tag-in-inputwithtags\">\n                      {tag[displayTagBy]}\n                      {!disabled && (\n                        <Icon\n                          name=\"close\"\n                          className=\"close-icon-in-inputwithtags\"\n                          ariaLabel={`Remove tag ${tag[displayTagBy]}`}\n                          onClick={() => handleRemoveTag(index)}\n                          shouldStopPropagation\n                        />\n                      )}\n                    </span>\n                  ))}\n                  {(showInput ||!tags.length) && (\n                    <input\n                      ref={inputRef}\n                      {...comboboxInputProps}\n                      type=\"text\"\n                      value={inputValue}\n                      onChange={handleInputChange}\n                      onKeyDown={handleKeyDown}\n                      onFocus={handleInputFocus}\n                      placeholder={tags.length === 0 ? placeholder : ''}\n                      className=\"input-with-tags-input\"\n                      disabled={disabled}\n                      aria-label={label || 'Search and select options'}\n                    />\n                  )}\n                </div>\n              </div>\n            )}\n            automationId={automationId}\n            popoverContentAutomationId={`${automationId}-content`}\n          />\n        </div>\n      </div>\n    );\n  }\n); "],"names":["DropdownWithInputTags","value","onChange","placeholder","className","options","renderOption","label","automationId","noOptionsMessage","allowCustomTags","disabled","type","showInput","displayTagBy","ref","initValues","values","map","val","found","find","opt","tags","setTags","useState","inputValue","setInputValue","filteredOptions","setFilteredOptions","isDropdownOpen","setIsDropdownOpen","popoverRef","useRef","inputRef","applyClickedRef","isMultiSelectWithoutCTA","isMultiSelect","listboxId","useStableId","handleSelectOption","useCallback","option","newTags","some","tag","push","handleMultiSelectDropdownOptionClick","isSelected","newSelectedTags","filter","ADD_CUSTOM_TAG_VALUE","handleSelectFromDropdown","trimmed","trim","effectiveItems","length","id","containerProps","inputProps","comboboxInputProps","listboxProps","getOptionProps","highlightedIndex","setHighlightedIndex","useCombobox","items","isOpen","onOpenChange","onSelect","hasItems","useEffect","current","filtered","toLowerCase","includes","handleRemoveTag","indexToRemove","_","index","handleKeyDown","e","key","preventDefault","slice","onKeyDown","handleInputChange","newValue","target","handleInputFocus","handleInputContainerClick","stopPropagation","focus","handlePopoverWrapperClick","closest","toggleDropdown","useImperativeHandle","defaultRenderOption","isHighlighted","optionProps","React","createElement","_extends","onClick","onMouseEnter","handleApplySelectedDropDownValues","newTagValues","clearSelectedDropDownValues","multiSelectRenderOption","isOptionSelected","Checkbox","defaultChecked","multiSelectRenderCTAs","Button","size","Popover","contentWidth","position","isPopoverOpen","onPopoverToggle","disableClickToggle","renderPopoverContents","closePopoverCb","Fragment","optionPropsWithHandlers","role","renderPopoverSrcElement","Icon","name","ariaLabel","shouldStopPropagation","onFocus","popoverContentAutomationId"],"mappings":"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"}

package/dist/index38.js

@@ -1,7 +1,7 @@
 import e from "react";
-import { useStableId as A } from "./index184.js";
-import { mergeIds as P } from "./index185.js";
-import { getA11yNameAttributes as _ } from "./index69.js";
+import { useStableId as A } from "./index185.js";
+import { mergeIds as P } from "./index186.js";
+import { getA11yNameAttributes as _ } from "./index70.js";
 /* empty css         */
 function z({
   value: l,

package/dist/index41.js

@@ -1,6 +1,6 @@
 import e, { useState as g, useRef as p } from "react";
 import { Icon as c } from "./index5.js";
-import { ProgressBar as f } from "./index40.js";
+import { ProgressBar as x } from "./index40.js";
 /* empty css         */
 const r = {
   gettingStartedWidgetCtn: "border border-[var(--color-gray-200)] rounded-[12px] w-[385px] p-4",
@@ -14,7 +14,7 @@ const r = {
 }) => {
   const [n, l] = g(!1), o = p(null), i = () => {
     l(!n);
-  }, d = (t) => t ? "var(--color-green-500)" : "var(--color-gray-200)";
+  }, m = (t) => t ? "var(--color-green-500)" : "var(--color-gray-200)";
   return /* @__PURE__ */ e.createElement("div", {
     className: `${r.gettingStartedWidgetCtn} ${s} getting-started-widget-ctn`
   }, /* @__PURE__ */ e.createElement("div", {
@@ -27,7 +27,7 @@ const r = {
     onClick: i
   })), /* @__PURE__ */ e.createElement("div", {
     className: "mt-[12px]"
-  }, /* @__PURE__ */ e.createElement(f, {
+  }, /* @__PURE__ */ e.createElement(x, {
     totalTasks: a.length,
     completedTasks: a.filter((t) => t.isComplete).length,
     progressBarCtnClassName: "get-started-progress-bar-ctn"
@@ -37,19 +37,18 @@ const r = {
     style: {
       maxHeight: n ? `${o.current?.scrollHeight}px` : "0px"
     }
-  }, a.map((t, m) => /* @__PURE__ */ e.createElement("div", {
-    key: m,
+  }, a.map((t, d) => /* @__PURE__ */ e.createElement("div", {
+    key: d,
     className: r.actionItemCtn
   }, /* @__PURE__ */ e.createElement(c, {
     name: "checked-circle",
-    stroke: d(t.isComplete)
+    stroke: m(t.isComplete)
   }), /* @__PURE__ */ e.createElement("span", {
     className: t.isComplete ? "text-[var(--color-gray-500)]" : "text-[var(--color-gray-900)] cursor-pointer",
     onClick: t?.handleActionItemClick
   }, t.label)))));
 };
 export {
-  E as GetStartedWidget,
-  E as default
+  E as GetStartedWidget
 };
 //# sourceMappingURL=index41.js.map