se-design 0.0.123 → 0.0.125

package/dist/index23.js

@@ -1,99 +1,99 @@
 var F = Object.defineProperty, G = Object.defineProperties;
 var H = Object.getOwnPropertyDescriptors;
-var k = Object.getOwnPropertySymbols;
+var N = Object.getOwnPropertySymbols;
 var K = Object.prototype.hasOwnProperty, L = Object.prototype.propertyIsEnumerable;
-var N = (e, c, d) => c in e ? F(e, c, { enumerable: !0, configurable: !0, writable: !0, value: d }) : e[c] = d, w = (e, c) => {
+var s = (e, c, d) => c in e ? F(e, c, { enumerable: !0, configurable: !0, writable: !0, value: d }) : e[c] = d, w = (e, c) => {
   for (var d in c || (c = {}))
-    K.call(c, d) && N(e, d, c[d]);
-  if (k)
-    for (var d of k(c))
-      L.call(c, d) && N(e, d, c[d]);
+    K.call(c, d) && s(e, d, c[d]);
+  if (N)
+    for (var d of N(c))
+      L.call(c, d) && s(e, d, c[d]);
   return e;
-}, $ = (e, c) => G(e, H(c));
-import l, { useState as P, useRef as Q, useEffect as U } from "react";
+}, V = (e, c) => G(e, H(c));
+import l, { useState as $, useRef as Q, useEffect as U } from "react";
 import { Popover as Y } from "./index17.js";
-import { Icon as V } from "./index5.js";
+import { Icon as A } from "./index5.js";
 import { Checkbox as Z } from "./index21.js";
-import { Button as j } from "./index3.js";
+import { Button as P } from "./index3.js";
 const ce = (e) => {
-  const [c, d] = P(!1), [a, i] = P(() => e != null && e.defaultSelectedValue ? [e.defaultSelectedValue] : []), f = Q(null), {
-    selectBy: u = "",
+  const [c, d] = $(!1), [n, u] = $(() => e != null && e.defaultSelectedValue ? Array.isArray(e == null ? void 0 : e.defaultSelectedValue) ? e == null ? void 0 : e.defaultSelectedValue : [e.defaultSelectedValue] : []), f = Q(null), {
+    selectBy: o = "",
     optionsUniqueBy: m = "",
-    displaySelected: I = !1,
-    dropDownOptions: o,
-    defaultText: s = "Select",
-    iconColor: g = "var(--color-gray-700)",
-    disabled: x = !1,
-    dropdownClassName: M = "",
+    displaySelected: j = !1,
+    dropDownOptions: i,
+    defaultText: y = "Select",
+    iconColor: x = "var(--color-gray-700)",
+    disabled: v = !1,
+    dropdownClassName: I = "",
     hasError: h = !1,
-    errorMessage: A = ""
+    errorMessage: M = ""
   } = e;
   U(() => {
-    i(e != null && e.defaultSelectedValue ? [e.defaultSelectedValue] : []);
+    u(e != null && e.defaultSelectedValue ? Array.isArray(e == null ? void 0 : e.defaultSelectedValue) ? e == null ? void 0 : e.defaultSelectedValue : [e.defaultSelectedValue] : []);
   }, [e == null ? void 0 : e.defaultSelectedValue]);
-  const v = (e == null ? void 0 : e.type) === "multi-select", B = (t) => {
-    var n, r;
-    i([t]), (n = f.current) == null || n.togglePopover(), (r = e == null ? void 0 : e.onOptionClick) == null || r.call(e, t);
-  }, R = (t) => v ? s : (t == null ? void 0 : t[u]) || s, T = () => {
-    i([]);
-  }, S = (t) => e != null && e.renderOptionChip ? e == null ? void 0 : e.renderOptionChip(t) : /* @__PURE__ */ l.createElement("p", {
+  const b = (e == null ? void 0 : e.type) === "multi-select", B = (t) => {
+    var a, r;
+    u([t]), (a = f.current) == null || a.togglePopover(), (r = e == null ? void 0 : e.onOptionClick) == null || r.call(e, t);
+  }, R = (t) => b ? y : (t == null ? void 0 : t[o]) || y, T = () => {
+    u([]);
+  }, C = (t) => e != null && e.renderOptionChip ? e == null ? void 0 : e.renderOptionChip(t) : /* @__PURE__ */ l.createElement("p", {
     className: "option-chip flex flex-1 items-center justify-between"
-  }, R(t), " ", v && (a == null ? void 0 : a.length) > 0 && /* @__PURE__ */ l.createElement("span", {
+  }, R(t), " ", b && (n == null ? void 0 : n.length) > 0 && /* @__PURE__ */ l.createElement("span", {
     className: "w-5 h-5 mx-1 rounded-full bg-[var(--color-gray-700)] text-[var(--color-white)] text-sm flex items-center justify-center"
-  }, a == null ? void 0 : a.length)), J = (t) => {
-    var C, E;
-    const n = t[u], r = ((C = a[0]) == null ? void 0 : C[u]) || s, y = m != null && m.length ? t[m] == ((E = a[0]) == null ? void 0 : E[m]) : !0, b = I && n === r && y;
+  }, n == null ? void 0 : n.length)), J = (t) => {
+    var E, k;
+    const a = t[o], r = ((E = n[0]) == null ? void 0 : E[o]) || y, g = m != null && m.length ? t[m] == ((k = n[0]) == null ? void 0 : k[m]) : !0, S = j && a === r && g;
     return /* @__PURE__ */ l.createElement("div", {
-      key: `$drop-option-${n}`,
-      className: `option px-3 py-2 hover:bg-gray-100 cursor-pointer flex items-center justify-between ${b ? "selected" : ""}`,
+      key: `$drop-option-${a}`,
+      className: `option px-3 py-2 hover:bg-gray-100 cursor-pointer flex items-center justify-between ${S ? "selected" : ""}`,
       onClick: () => B(t)
-    }, S($(w({}, t), {
-      isOptionSelected: b
-    })), b && /* @__PURE__ */ l.createElement(V, {
+    }, C(V(w({}, t), {
+      isOptionSelected: S
+    })), S && /* @__PURE__ */ l.createElement(A, {
       name: "checkmark",
-      stroke: g
+      stroke: x
     }));
   }, _ = () => /* @__PURE__ */ l.createElement("div", {
     className: "dropdown-content dropdown-options"
-  }, o == null ? void 0 : o.map((t) => J(t))), W = (t, n) => {
+  }, i == null ? void 0 : i.map((t) => J(t))), W = (t, a) => {
     let r = [];
-    t ? r = [...a, n] : r = a == null ? void 0 : a.filter((y) => y[m] !== n[m]), i(r);
+    t ? r = [...n, a] : r = n == null ? void 0 : n.filter((g) => g[m] !== a[m]), u(r);
   }, X = () => {
-    var t, n;
-    (t = f.current) == null || t.togglePopover(), (n = e == null ? void 0 : e.onApply) == null || n.call(e, a);
+    var t, a;
+    (t = f.current) == null || t.togglePopover(), (a = e == null ? void 0 : e.onApply) == null || a.call(e, n);
   }, q = (t) => {
-    const n = a.some((r) => r[m] === t[m]);
+    const a = n.some((r) => r[m] === t[m]);
     return /* @__PURE__ */ l.createElement("div", {
-      key: `$drop-option-${t[u]}`,
+      key: `$drop-option-${t[o]}`,
       className: "option px-3 py-2 hover:bg-gray-100 cursor-pointer flex items-center justify-between"
     }, /* @__PURE__ */ l.createElement(Z, {
       automationId: "checkbox",
       className: "checkbox",
-      defaultChecked: n,
+      defaultChecked: a,
       onChange: (r) => W(r, t),
       label: t == null ? void 0 : t.label
     }));
   }, z = () => /* @__PURE__ */ l.createElement("div", {
     className: "dropdown-content dropdown-options"
-  }, o == null ? void 0 : o.map((t) => q(t)), /* @__PURE__ */ l.createElement("div", {
+  }, i == null ? void 0 : i.map((t) => q(t)), /* @__PURE__ */ l.createElement("div", {
     className: "flex items-center justify-end gap-4 p-3 border-t border-[var(--color-gray-200)]"
-  }, /* @__PURE__ */ l.createElement(j, {
+  }, /* @__PURE__ */ l.createElement(P, {
     label: "Clear",
     type: "link",
     onClick: T
-  }), /* @__PURE__ */ l.createElement(j, {
+  }), /* @__PURE__ */ l.createElement(P, {
     label: "Apply",
     type: "primary",
     onClick: X
   }))), D = () => {
-    const t = c ? "border-[var(--color-blue-500)]" : "border-[var(--color-gray-600)]", n = h ? "border-[var(--color-red-500)]" : "", r = `dropdown-src-element bg-[var(--color-white)] flex px-3 py-2 border rounded-md ${n || t} flex items-center ${M}`;
+    const t = c ? "border-[var(--color-blue-500)]" : v ? "border-[var(--color-gray-300)]" : "border-[var(--color-gray-600)]", a = h ? "border-[var(--color-red-500)]" : "", r = `dropdown-src-element bg-[var(--color-white)] flex px-3 py-2 border rounded-md ${a || t} flex items-center ${I}`;
     return /* @__PURE__ */ l.createElement("div", {
       className: r
-    }, S(a[0]), /* @__PURE__ */ l.createElement(V, {
+    }, C(n[0]), /* @__PURE__ */ l.createElement(A, {
       name: "chevron",
       rotation: c ? "180" : "0",
       className: "ml-auto transition-transform",
-      stroke: g
+      stroke: x
     }));
   };
   return /* @__PURE__ */ l.createElement("div", {
@@ -103,17 +103,17 @@ const ce = (e) => {
     className: "se-design-dropdown-label mb-[3px] text-[var(--color-gray-700)] text-sm"
   }, e == null ? void 0 : e.label), /* @__PURE__ */ l.createElement("div", {
     style: e == null ? void 0 : e.style,
-    className: `${x ? "bg-[var(--color-gray-200)] rounded-md cursor-not-allowed" : ""}`
+    className: `${v ? "bg-[var(--color-gray-50)] rounded-md cursor-not-allowed" : ""}`
   }, /* @__PURE__ */ l.createElement(Y, {
     ref: f,
-    renderPopoverContents: v ? z : _,
+    renderPopoverContents: b ? z : _,
     contentWidth: "full",
     renderPopoverSrcElement: D,
     onPopoverToggle: (t) => d(t),
-    disabled: x
+    disabled: v
   })), h && /* @__PURE__ */ l.createElement("div", {
     className: "text-[var(--color-red-500)] text-sm"
-  }, A));
+  }, M));
 };
 export {
   ce as Dropdown

package/dist/index23.js.map

@@ -1 +1 @@
-{"version":3,"file":"index23.js","sources":["../src/components/Dropdown/index.tsx"],"sourcesContent":["import React, { FC, useState, useRef, useEffect } from 'react';\n\nimport { Popover, PopoverHandle } from 'src/components/Popover';\nimport { Icon } from 'components/Icon';\nimport { Checkbox } from '../Checkbox';\nimport { Button } from '../Button';\n\ntype DropdownValue = {\n  [key: string]: any;\n};\n\ntype DropdownProps = {\n  label?: string;\n  type: 'select' | 'multi-select';\n  dropDownOptions?: DropdownValue[];\n  defaultText?: string;\n  selectBy?: string;\n  optionsUniqueBy?: string;\n  displaySelected?: boolean;\n  defaultSelectedValue?: DropdownValue;\n  onOptionClick?: (selectedValue: DropdownValue) => void;\n  style?: React.CSSProperties;\n  renderOptionChip?: (option: DropdownValue) => React.ReactNode;\n  className?: string;\n  iconColor?: string;\n  disabled?: boolean;\n  dropdownClassName?: string;\n  hasError?: boolean;\n  errorMessage?: string;\n  onApply?: (selectedValue: DropdownValue[]) => void;\n};\n\nexport const Dropdown: FC<DropdownProps> = (props) => {\n  const [isDropDownOpen, setIsDropDownOpen] = useState(false);\n  const [selectedDropDownValues, setSelectedDropDownValues] = useState<DropdownValue[]>(() =>\n    props?.defaultSelectedValue ? [props.defaultSelectedValue] : []\n  );\n  const popoverRef = useRef<HTMLDivElement & PopoverHandle>(null);\n\n  const {\n    selectBy = '',\n    optionsUniqueBy = '',\n    displaySelected = false,\n    dropDownOptions,\n    defaultText = 'Select',\n    iconColor = 'var(--color-gray-700)',\n    disabled = false,\n    dropdownClassName = '',\n    hasError = false,\n    errorMessage = ''\n  } = props;\n\n  useEffect(() => {\n    setSelectedDropDownValues(props?.defaultSelectedValue ? [props.defaultSelectedValue] : []);\n  }, [props?.defaultSelectedValue]);\n\n  const isMultiSelect = props?.type === 'multi-select';\n\n  const handleDropDownOptionClick = (dropDownOption: any) => {\n    setSelectedDropDownValues([dropDownOption]);\n    popoverRef.current?.togglePopover();\n    props?.onOptionClick?.(dropDownOption);\n  };\n\n  const getSelectedDropDownValue = (option: DropdownValue) => {\n    if (isMultiSelect) {\n      return defaultText;\n    }\n    return option?.[selectBy] || defaultText;\n  };\n\n  const clearSelectedDropDownValues = () => {\n    setSelectedDropDownValues([]);\n  };\n\n  const optionChip = (option: DropdownValue) => {\n    if (props?.renderOptionChip) {\n      return props?.renderOptionChip(option);\n    }\n    return (\n      <p className={`option-chip flex flex-1 items-center justify-between`}>\n        {getSelectedDropDownValue(option)}{' '}\n        {isMultiSelect && selectedDropDownValues?.length > 0 && (\n          <span className=\"w-5 h-5 mx-1 rounded-full bg-[var(--color-gray-700)] text-[var(--color-white)] text-sm flex items-center justify-center\">\n            {selectedDropDownValues?.length}\n          </span>\n        )}\n      </p>\n    );\n  };\n\n  const dropDownOptionJsx = (dropDownOption: DropdownValue) => {\n    const optionTxt = dropDownOption[selectBy];\n    const dropDownSelectedValue = selectedDropDownValues[0]?.[selectBy] || defaultText;\n    const selectByUniqueId = optionsUniqueBy?.length\n      ? dropDownOption[optionsUniqueBy] == selectedDropDownValues[0]?.[optionsUniqueBy]\n      : true;\n    const isOptionSelected = displaySelected && optionTxt === dropDownSelectedValue && selectByUniqueId;\n    return (\n      <div\n        key={`$drop-option-${optionTxt}`}\n        className={`option px-3 py-2 hover:bg-gray-100 cursor-pointer flex items-center justify-between ${isOptionSelected ? 'selected' : ''}`}\n        onClick={() => handleDropDownOptionClick(dropDownOption)}\n      >\n        {optionChip({ ...dropDownOption, isOptionSelected })}\n        {isOptionSelected && <Icon name=\"checkmark\" stroke={iconColor} />}\n      </div>\n    );\n  };\n\n  const renderDropdownContents = () => {\n    return (\n      <div className=\"dropdown-content dropdown-options\">\n        {dropDownOptions?.map((dropDownOption) => dropDownOptionJsx(dropDownOption))}\n      </div>\n    );\n  };\n\n  const handleMultiSelectDropdownOptionClick = (isSelected: boolean, dropDownOption: DropdownValue) => {\n    let newSelectedDropDownValue: DropdownValue[] = [];\n    if (isSelected) {\n      newSelectedDropDownValue = [...selectedDropDownValues, dropDownOption];\n    } else {\n      newSelectedDropDownValue = selectedDropDownValues?.filter(\n        (option) => option[optionsUniqueBy] !== dropDownOption[optionsUniqueBy]\n      );\n    }\n    setSelectedDropDownValues(newSelectedDropDownValue);\n  };\n\n  const handleApplySelectedDropDownValues = () => {\n    popoverRef.current?.togglePopover();\n    props?.onApply?.(selectedDropDownValues);\n  };\n\n  const multiSelectDropdownOptionJSX = (dropDownOption: DropdownValue) => {\n    const isOptionSelected = selectedDropDownValues.some(\n      (option) => option[optionsUniqueBy] === dropDownOption[optionsUniqueBy]\n    );\n    return (\n      <div\n        key={`$drop-option-${dropDownOption[selectBy]}`}\n        className=\"option px-3 py-2 hover:bg-gray-100 cursor-pointer flex items-center justify-between\"\n      >\n        <Checkbox\n          automationId=\"checkbox\"\n          className=\"checkbox\"\n          defaultChecked={isOptionSelected}\n          onChange={(value) => handleMultiSelectDropdownOptionClick(value, dropDownOption)}\n          label={dropDownOption?.label}\n        />\n      </div>\n    );\n  };\n\n  const renderMultiSelectDropdownContents = () => {\n    return (\n      <div className=\"dropdown-content dropdown-options\">\n        {dropDownOptions?.map((dropDownOption) => multiSelectDropdownOptionJSX(dropDownOption))}\n        <div className=\"flex items-center justify-end gap-4 p-3 border-t border-[var(--color-gray-200)]\">\n          <Button label=\"Clear\" type=\"link\" onClick={clearSelectedDropDownValues} />\n          <Button label=\"Apply\" type=\"primary\" onClick={handleApplySelectedDropDownValues} />\n        </div>\n      </div>\n    );\n  };\n\n  const renderDropdownSelect = () => {\n    const borderColor = isDropDownOpen ? 'border-[var(--color-blue-500)]' : 'border-[var(--color-gray-600)]';\n    const errorBorderColor = hasError ? 'border-[var(--color-red-500)]' : '';\n    const dropDownSelectClass = `dropdown-src-element bg-[var(--color-white)] flex px-3 py-2 border rounded-md ${errorBorderColor ? errorBorderColor : borderColor} flex items-center ${dropdownClassName}`;\n\n    return (\n      <div className={dropDownSelectClass}>\n        {optionChip(selectedDropDownValues[0])}\n        <Icon\n          name={'chevron'}\n          rotation={isDropDownOpen ? '180' : '0'}\n          className={`ml-auto transition-transform`}\n          stroke={iconColor}\n        />\n      </div>\n    );\n  };\n\n  return (\n    <div\n      className={`se-design-dropdown-container${props?.className ? ` ${props?.className}` : ''}`}\n      style={props?.style}\n    >\n      {props?.label && (\n        <div className=\"se-design-dropdown-label mb-[3px] text-[var(--color-gray-700)] text-sm\">{props?.label}</div>\n      )}\n      <div\n        style={props?.style}\n        className={`${disabled ? 'bg-[var(--color-gray-200)] rounded-md cursor-not-allowed' : ''}`}\n      >\n        <Popover\n          ref={popoverRef}\n          renderPopoverContents={isMultiSelect ? renderMultiSelectDropdownContents : renderDropdownContents}\n          contentWidth={'full'}\n          renderPopoverSrcElement={renderDropdownSelect}\n          onPopoverToggle={(value) => setIsDropDownOpen(value)}\n          disabled={disabled}\n        />\n      </div>\n      {hasError && <div className=\"text-[var(--color-red-500)] text-sm\">{errorMessage}</div>}\n    </div>\n  );\n};\n"],"names":["React__default","useState","useRef","useEffect","Popover","Icon","Checkbox","Button","Dropdown","props","isDropDownOpen","setIsDropDownOpen","selectedDropDownValues","setSelectedDropDownValues","defaultSelectedValue","popoverRef","selectBy","optionsUniqueBy","displaySelected","dropDownOptions","defaultText","iconColor","disabled","dropdownClassName","hasError","errorMessage","isMultiSelect","type","handleDropDownOptionClick","dropDownOption","_a","_b","current","togglePopover","onOptionClick","getSelectedDropDownValue","option","clearSelectedDropDownValues","optionChip","renderOptionChip","React","createElement","className","length","dropDownOptionJsx","optionTxt","dropDownSelectedValue","selectByUniqueId","isOptionSelected","key","onClick","__spreadProps","__spreadValues","name","stroke","renderDropdownContents","map","handleMultiSelectDropdownOptionClick","isSelected","newSelectedDropDownValue","filter","handleApplySelectedDropDownValues","onApply","multiSelectDropdownOptionJSX","some","automationId","defaultChecked","onChange","value","label","renderMultiSelectDropdownContents","renderDropdownSelect","borderColor","errorBorderColor","dropDownSelectClass","rotation","style","ref","renderPopoverContents","contentWidth","renderPopoverSrcElement","onPopoverToggle"],"mappings":"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"}
+{"version":3,"file":"index23.js","sources":["../src/components/Dropdown/index.tsx"],"sourcesContent":["import React, { FC, useState, useRef, useEffect } from 'react';\n\nimport { Popover, PopoverHandle } from 'src/components/Popover';\nimport { Icon } from 'components/Icon';\nimport { Checkbox } from '../Checkbox';\nimport { Button } from '../Button';\n\ntype DropdownValue = {\n  [key: string]: any;\n};\n\ntype DropdownProps = {\n  label?: string;\n  type: 'select' | 'multi-select';\n  dropDownOptions?: DropdownValue[];\n  defaultText?: string;\n  selectBy?: string;\n  optionsUniqueBy?: string;\n  displaySelected?: boolean;\n  defaultSelectedValue?: DropdownValue | DropdownValue[];\n  onOptionClick?: (selectedValue: DropdownValue) => void;\n  style?: React.CSSProperties;\n  renderOptionChip?: (option: DropdownValue) => React.ReactNode;\n  className?: string;\n  iconColor?: string;\n  disabled?: boolean;\n  dropdownClassName?: string;\n  hasError?: boolean;\n  errorMessage?: string;\n  onApply?: (selectedValue: DropdownValue[]) => void;\n};\n\nexport const Dropdown: FC<DropdownProps> = (props) => {\n  const [isDropDownOpen, setIsDropDownOpen] = useState(false);\n  const [selectedDropDownValues, setSelectedDropDownValues] = useState<DropdownValue[]>(() =>\n    props?.defaultSelectedValue\n      ? Array.isArray(props?.defaultSelectedValue)\n        ? props?.defaultSelectedValue\n        : [props.defaultSelectedValue]\n      : []\n  );\n  const popoverRef = useRef<HTMLDivElement & PopoverHandle>(null);\n\n  const {\n    selectBy = '',\n    optionsUniqueBy = '',\n    displaySelected = false,\n    dropDownOptions,\n    defaultText = 'Select',\n    iconColor = 'var(--color-gray-700)',\n    disabled = false,\n    dropdownClassName = '',\n    hasError = false,\n    errorMessage = ''\n  } = props;\n\n  useEffect(() => {\n    setSelectedDropDownValues(\n      props?.defaultSelectedValue\n        ? Array.isArray(props?.defaultSelectedValue)\n          ? props?.defaultSelectedValue\n          : [props.defaultSelectedValue]\n        : []\n    );\n  }, [props?.defaultSelectedValue]);\n\n  const isMultiSelect = props?.type === 'multi-select';\n\n  const handleDropDownOptionClick = (dropDownOption: any) => {\n    setSelectedDropDownValues([dropDownOption]);\n    popoverRef.current?.togglePopover();\n    props?.onOptionClick?.(dropDownOption);\n  };\n\n  const getSelectedDropDownValue = (option: DropdownValue) => {\n    if (isMultiSelect) {\n      return defaultText;\n    }\n    return option?.[selectBy] || defaultText;\n  };\n\n  const clearSelectedDropDownValues = () => {\n    setSelectedDropDownValues([]);\n  };\n\n  const optionChip = (option: DropdownValue) => {\n    if (props?.renderOptionChip) {\n      return props?.renderOptionChip(option);\n    }\n    return (\n      <p className={`option-chip flex flex-1 items-center justify-between`}>\n        {getSelectedDropDownValue(option)}{' '}\n        {isMultiSelect && selectedDropDownValues?.length > 0 && (\n          <span className=\"w-5 h-5 mx-1 rounded-full bg-[var(--color-gray-700)] text-[var(--color-white)] text-sm flex items-center justify-center\">\n            {selectedDropDownValues?.length}\n          </span>\n        )}\n      </p>\n    );\n  };\n\n  const dropDownOptionJsx = (dropDownOption: DropdownValue) => {\n    const optionTxt = dropDownOption[selectBy];\n    const dropDownSelectedValue = selectedDropDownValues[0]?.[selectBy] || defaultText;\n    const selectByUniqueId = optionsUniqueBy?.length\n      ? dropDownOption[optionsUniqueBy] == selectedDropDownValues[0]?.[optionsUniqueBy]\n      : true;\n    const isOptionSelected = displaySelected && optionTxt === dropDownSelectedValue && selectByUniqueId;\n    return (\n      <div\n        key={`$drop-option-${optionTxt}`}\n        className={`option px-3 py-2 hover:bg-gray-100 cursor-pointer flex items-center justify-between ${isOptionSelected ? 'selected' : ''}`}\n        onClick={() => handleDropDownOptionClick(dropDownOption)}\n      >\n        {optionChip({ ...dropDownOption, isOptionSelected })}\n        {isOptionSelected && <Icon name=\"checkmark\" stroke={iconColor} />}\n      </div>\n    );\n  };\n\n  const renderDropdownContents = () => {\n    return (\n      <div className=\"dropdown-content dropdown-options\">\n        {dropDownOptions?.map((dropDownOption) => dropDownOptionJsx(dropDownOption))}\n      </div>\n    );\n  };\n\n  const handleMultiSelectDropdownOptionClick = (isSelected: boolean, dropDownOption: DropdownValue) => {\n    let newSelectedDropDownValue: DropdownValue[] = [];\n    if (isSelected) {\n      newSelectedDropDownValue = [...selectedDropDownValues, dropDownOption];\n    } else {\n      newSelectedDropDownValue = selectedDropDownValues?.filter(\n        (option) => option[optionsUniqueBy] !== dropDownOption[optionsUniqueBy]\n      );\n    }\n    setSelectedDropDownValues(newSelectedDropDownValue);\n  };\n\n  const handleApplySelectedDropDownValues = () => {\n    popoverRef.current?.togglePopover();\n    props?.onApply?.(selectedDropDownValues);\n  };\n\n  const multiSelectDropdownOptionJSX = (dropDownOption: DropdownValue) => {\n    const isOptionSelected = selectedDropDownValues.some(\n      (option) => option[optionsUniqueBy] === dropDownOption[optionsUniqueBy]\n    );\n    return (\n      <div\n        key={`$drop-option-${dropDownOption[selectBy]}`}\n        className=\"option px-3 py-2 hover:bg-gray-100 cursor-pointer flex items-center justify-between\"\n      >\n        <Checkbox\n          automationId=\"checkbox\"\n          className=\"checkbox\"\n          defaultChecked={isOptionSelected}\n          onChange={(value) => handleMultiSelectDropdownOptionClick(value, dropDownOption)}\n          label={dropDownOption?.label}\n        />\n      </div>\n    );\n  };\n\n  const renderMultiSelectDropdownContents = () => {\n    return (\n      <div className=\"dropdown-content dropdown-options\">\n        {dropDownOptions?.map((dropDownOption) => multiSelectDropdownOptionJSX(dropDownOption))}\n        <div className=\"flex items-center justify-end gap-4 p-3 border-t border-[var(--color-gray-200)]\">\n          <Button label=\"Clear\" type=\"link\" onClick={clearSelectedDropDownValues} />\n          <Button label=\"Apply\" type=\"primary\" onClick={handleApplySelectedDropDownValues} />\n        </div>\n      </div>\n    );\n  };\n\n  const renderDropdownSelect = () => {\n    const borderColor = isDropDownOpen\n      ? 'border-[var(--color-blue-500)]'\n      : disabled\n        ? 'border-[var(--color-gray-300)]'\n        : 'border-[var(--color-gray-600)]';\n    const errorBorderColor = hasError ? 'border-[var(--color-red-500)]' : '';\n    const dropDownSelectClass = `dropdown-src-element bg-[var(--color-white)] flex px-3 py-2 border rounded-md ${errorBorderColor ? errorBorderColor : borderColor} flex items-center ${dropdownClassName}`;\n\n    return (\n      <div className={dropDownSelectClass}>\n        {optionChip(selectedDropDownValues[0])}\n        <Icon\n          name={'chevron'}\n          rotation={isDropDownOpen ? '180' : '0'}\n          className={`ml-auto transition-transform`}\n          stroke={iconColor}\n        />\n      </div>\n    );\n  };\n\n  return (\n    <div\n      className={`se-design-dropdown-container${props?.className ? ` ${props?.className}` : ''}`}\n      style={props?.style}\n    >\n      {props?.label && (\n        <div className=\"se-design-dropdown-label mb-[3px] text-[var(--color-gray-700)] text-sm\">{props?.label}</div>\n      )}\n      <div\n        style={props?.style}\n        className={`${disabled ? 'bg-[var(--color-gray-50)] rounded-md cursor-not-allowed' : ''}`}\n      >\n        <Popover\n          ref={popoverRef}\n          renderPopoverContents={isMultiSelect ? renderMultiSelectDropdownContents : renderDropdownContents}\n          contentWidth={'full'}\n          renderPopoverSrcElement={renderDropdownSelect}\n          onPopoverToggle={(value) => setIsDropDownOpen(value)}\n          disabled={disabled}\n        />\n      </div>\n      {hasError && <div className=\"text-[var(--color-red-500)] text-sm\">{errorMessage}</div>}\n    </div>\n  );\n};\n"],"names":["React__default","useState","useRef","useEffect","Popover","Icon","Checkbox","Button","Dropdown","props","isDropDownOpen","setIsDropDownOpen","selectedDropDownValues","setSelectedDropDownValues","defaultSelectedValue","Array","isArray","popoverRef","selectBy","optionsUniqueBy","displaySelected","dropDownOptions","defaultText","iconColor","disabled","dropdownClassName","hasError","errorMessage","isMultiSelect","type","handleDropDownOptionClick","dropDownOption","_a","_b","current","togglePopover","onOptionClick","getSelectedDropDownValue","option","clearSelectedDropDownValues","optionChip","renderOptionChip","React","createElement","className","length","dropDownOptionJsx","optionTxt","dropDownSelectedValue","selectByUniqueId","isOptionSelected","key","onClick","__spreadProps","__spreadValues","name","stroke","renderDropdownContents","map","handleMultiSelectDropdownOptionClick","isSelected","newSelectedDropDownValue","filter","handleApplySelectedDropDownValues","onApply","multiSelectDropdownOptionJSX","some","automationId","defaultChecked","onChange","value","label","renderMultiSelectDropdownContents","renderDropdownSelect","borderColor","errorBorderColor","dropDownSelectClass","rotation","style","ref","renderPopoverContents","contentWidth","renderPopoverSrcElement","onPopoverToggle"],"mappings":"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"}

package/dist/index36.js

@@ -1,22 +1,23 @@
-import s, { forwardRef as H, useState as d, useRef as y, useEffect as I, useImperativeHandle as S } from "react";
-import { Popover as $ } from "./index17.js";
-import { Icon as j } from "./index5.js";
+import l, { forwardRef as H, useState as w, useRef as I, useEffect as P, useImperativeHandle as S } from "react";
+import { Popover as j } from "./index17.js";
+import { Icon as q } from "./index5.js";
 /* empty css         */
-const Q = /* @__PURE__ */ H(({
-  value: f = [],
-  onChange: n,
-  placeholder: D = "Type to search or add custom tags...",
-  className: P = "",
-  options: r = [],
+const U = /* @__PURE__ */ H(({
+  value: v = [],
+  onChange: s,
+  placeholder: T = "Type to search or add custom tags...",
+  className: R = "",
+  options: i = [],
   renderOption: E,
-  onSearch: w,
-  label: g,
-  automationId: T = "",
-  noOptionsMessage: b = "No options found",
-  allowCustomTags: N = !0
-}, R) => {
-  const [o, c] = d(() => f.map((t) => {
-    const e = r.find((a) => a.value === t);
+  onSearch: d,
+  label: N,
+  automationId: O = "",
+  noOptionsMessage: k = "No options found",
+  allowCustomTags: h = !0,
+  disabled: n = !1
+}, b) => {
+  const [u, p] = w(() => v.map((t) => {
+    const e = i.find((a) => a.value === t);
     return e ? {
       label: e.label,
       value: e.value
@@ -24,10 +25,10 @@ const Q = /* @__PURE__ */ H(({
       label: t,
       value: t
     };
-  })), [l, p] = d(""), [m, k] = d(r), [u, i] = d(!1), O = y(null), h = y(null);
-  I(() => {
-    c(f.map((t) => {
-      const e = r.find((a) => a.value === t);
+  })), [r, c] = w(""), [f, y] = w(i), [m, o] = w(!1), A = I(null), D = I(null);
+  P(() => {
+    p(v.map((t) => {
+      const e = i.find((a) => a.value === t);
       return e ? {
         label: e.label,
         value: e.value
@@ -36,127 +37,138 @@ const Q = /* @__PURE__ */ H(({
         value: t
       };
     }));
-  }, [f, r]), I(() => {
-    if (!l.trim())
-      k(r);
+  }, [v, i]), P(() => {
+    if (!r.trim())
+      y(i);
     else {
-      const t = r.filter((e) => e.label.toLowerCase().includes(l.toLowerCase()) || e.value.toLowerCase().includes(l.toLowerCase()));
-      k(t);
+      const t = i.filter((e) => e.label.toLowerCase().includes(r.toLowerCase()) || e.value.toLowerCase().includes(r.toLowerCase()));
+      y(t);
     }
-    w && w(l);
-  }, [l, r, w]);
-  const v = (t) => {
-    const e = [...o];
+    d && d(r);
+  }, [r, i, d]);
+  const g = (t) => {
+    if (n) return;
+    const e = [...u];
     e.some((a) => a.value === t.value) || (e.push({
       label: t.label,
       value: t.value
-    }), c(e), n == null || n(e.map((a) => a.value))), p(""), i(!1);
-  }, A = (t) => {
-    const e = o.filter((a, B) => B !== t);
-    c(e), n == null || n(e.map((a) => a.value));
+    }), p(e), s == null || s(e.map((a) => a.value))), c(""), o(!1);
   }, L = (t) => {
-    if (t.key === "Enter" && l.trim()) {
-      if (t.preventDefault(), m.length > 0)
-        v(m[0]);
-      else if (N) {
-        const e = [...o];
-        e.some((a) => a.value === l.trim()) || (e.push({
-          label: l.trim(),
-          value: l.trim()
-        }), c(e), n == null || n(e.map((a) => a.value))), p("");
-      }
-      i(!1);
-    } else if (t.key === "Backspace" && l === "" && o.length > 0) {
-      const e = o.slice(0, -1);
-      c(e), n == null || n(e.map((a) => a.value));
-    } else t.key === "ArrowDown" ? (t.preventDefault(), u || i(!0)) : t.key === "Escape" && (i(!1), p(""));
+    if (n) return;
+    const e = u.filter((a, B) => B !== t);
+    p(e), s == null || s(e.map((a) => a.value));
   }, x = (t) => {
+    if (!n)
+      if (t.key === "Enter" && r.trim()) {
+        if (t.preventDefault(), f.length > 0)
+          g(f[0]);
+        else if (h) {
+          const e = [...u];
+          e.some((a) => a.value === r.trim()) || (e.push({
+            label: r.trim(),
+            value: r.trim()
+          }), p(e), s == null || s(e.map((a) => a.value))), c("");
+        }
+        o(!1);
+      } else if (t.key === "Backspace" && r === "" && u.length > 0) {
+        const e = u.slice(0, -1);
+        p(e), s == null || s(e.map((a) => a.value));
+      } else t.key === "ArrowDown" ? (t.preventDefault(), m || o(!0)) : t.key === "Escape" && (o(!1), c(""));
+  }, F = (t) => {
+    if (n) return;
     const e = t.target.value;
-    p(e), e.trim() && !u && i(!0);
-  }, F = () => {
-    (l.trim() || r.length > 0) && i(!0);
-  }, V = (t) => {
-    var e;
-    t.stopPropagation(), (e = h.current) == null || e.focus(), !u && (l.trim() || r.length > 0) && i(!0);
+    c(e), e.trim() && !m && o(!0);
+  }, V = () => {
+    n || (r.trim() || i.length > 0) && o(!0);
   }, W = (t) => {
+    var e;
+    n || (t.stopPropagation(), (e = D.current) == null || e.focus(), !m && (r.trim() || i.length > 0) && o(!0));
+  }, _ = (t) => {
+    if (n) {
+      t.preventDefault(), t.stopPropagation();
+      return;
+    }
     t.target.closest(".input-with-tags-container") && t.stopPropagation();
-  }, _ = () => {
-    i(!u);
+  }, $ = () => {
+    n || o(!m);
   };
-  S(R, () => ({
-    toggleDropdown: _
+  S(b, () => ({
+    toggleDropdown: $
   }), []);
-  const K = (t, e) => /* @__PURE__ */ s.createElement("div", {
+  const K = (t, e, a) => /* @__PURE__ */ l.createElement("div", {
     key: t.id,
     className: "dropdown-with-input-tags-option",
-    onClick: () => e(t)
-  }, /* @__PURE__ */ s.createElement("span", {
+    onClick: () => !a && e(t)
+  }, /* @__PURE__ */ l.createElement("span", {
     className: "option-label"
-  }, t.label), t.value !== t.label && /* @__PURE__ */ s.createElement("span", {
+  }, t.label), t.value !== t.label && /* @__PURE__ */ l.createElement("span", {
     className: "option-value"
   }, t.value));
-  return /* @__PURE__ */ s.createElement("div", {
-    className: `dropdown-with-input-tags-wrapper ${P}`,
-    "data-automation-id": T
-  }, g && /* @__PURE__ */ s.createElement("label", {
+  return /* @__PURE__ */ l.createElement("div", {
+    className: `dropdown-with-input-tags-wrapper ${R} ${n ? "disabled-wrapper" : ""}`,
+    "data-automation-id": O
+  }, N && /* @__PURE__ */ l.createElement("label", {
     className: "dropdown-with-input-tags-label"
-  }, g), /* @__PURE__ */ s.createElement("div", {
-    onClick: W
-  }, /* @__PURE__ */ s.createElement($, {
-    ref: O,
+  }, N), /* @__PURE__ */ l.createElement("div", {
+    onClick: _
+  }, /* @__PURE__ */ l.createElement(j, {
+    ref: A,
     className: "dropdown-with-input-tags-popover",
     contentWidth: "full",
     position: "bottom-left",
-    isPopoverOpen: u,
-    onPopoverToggle: i,
+    isPopoverOpen: !n && m,
+    onPopoverToggle: n ? () => {
+    } : o,
     renderPopoverContents: ({
       closePopoverCb: t
-    }) => /* @__PURE__ */ s.createElement("div", {
+    }) => /* @__PURE__ */ l.createElement("div", {
       className: "dropdown-with-input-tags-content"
-    }, m.length > 0 ? m.map((e) => E ? E(e, v) : K(e, v)) : /* @__PURE__ */ s.createElement("div", {
+    }, f.length > 0 ? f.map((e) => E ? E(e, g) : K(e, g, n)) : /* @__PURE__ */ l.createElement("div", {
       className: "dropdown-with-input-tags-no-options"
-    }, l.trim() ? N ? /* @__PURE__ */ s.createElement("div", {
+    }, r.trim() ? h ? /* @__PURE__ */ l.createElement("div", {
       className: "dropdown-with-input-tags-option dropdown-with-input-tags-custom-option",
       onClick: () => {
-        const e = [...o];
-        e.some((a) => a.value === l.trim()) || (e.push({
-          label: l.trim(),
-          value: l.trim()
-        }), c(e), n == null || n(e.map((a) => a.value))), p(""), t();
+        if (n) return;
+        const e = [...u];
+        e.some((a) => a.value === r.trim()) || (e.push({
+          label: r.trim(),
+          value: r.trim()
+        }), p(e), s == null || s(e.map((a) => a.value))), c(""), t();
       }
-    }, 'Add "', l.trim(), '"') : /* @__PURE__ */ s.createElement("div", {
+    }, 'Add "', r.trim(), '"') : /* @__PURE__ */ l.createElement("div", {
       className: "dropdown-with-input-tags-no-options-text"
-    }, b) : /* @__PURE__ */ s.createElement("div", {
+    }, k) : /* @__PURE__ */ l.createElement("div", {
       className: "dropdown-with-input-tags-no-options-text"
-    }, b))),
-    renderPopoverSrcElement: () => /* @__PURE__ */ s.createElement("div", {
+    }, k))),
+    renderPopoverSrcElement: () => /* @__PURE__ */ l.createElement("div", {
       className: "dropdown-with-input-tags-input-container"
-    }, /* @__PURE__ */ s.createElement("div", {
-      className: "input-with-tags-container",
-      onClick: V
-    }, o.map((t, e) => /* @__PURE__ */ s.createElement("span", {
+    }, /* @__PURE__ */ l.createElement("div", {
+      className: `input-with-tags-container ${n ? "disabled-input-with-tags-container" : ""}`,
+      onClick: W
+    }, u.map((t, e) => /* @__PURE__ */ l.createElement("span", {
       key: e,
       className: "tag-in-inputwithtags"
-    }, t.label, /* @__PURE__ */ s.createElement("span", {
+    }, t.label, !n && /* @__PURE__ */ l.createElement("span", {
       className: "close-icon-in-inputwithtags",
       onClick: (a) => {
-        a.stopPropagation(), A(e);
+        a.stopPropagation(), L(e);
       }
-    }, /* @__PURE__ */ s.createElement(j, {
+    }, /* @__PURE__ */ l.createElement(q, {
       name: "close"
-    })))), /* @__PURE__ */ s.createElement("input", {
-      ref: h,
+    })))), /* @__PURE__ */ l.createElement("input", {
+      ref: D,
       type: "text",
-      value: l,
-      onChange: x,
-      onKeyDown: L,
-      onFocus: F,
-      placeholder: o.length === 0 ? D : "",
-      className: "input-with-tags-input"
+      value: r,
+      onChange: F,
+      onKeyDown: x,
+      onFocus: V,
+      placeholder: u.length === 0 ? T : "",
+      className: "input-with-tags-input",
+      disabled: n
     })))
   })));
 });
 export {
-  Q as DropdownWithInputTags
+  U as DropdownWithInputTags
 };
 //# sourceMappingURL=index36.js.map

package/dist/index36.js.map

@@ -1 +1 @@
-{"version":3,"file":"index36.js","sources":["../src/components/DropdownWithInputTags/index.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef, forwardRef, ForwardedRef, useImperativeHandle, KeyboardEvent } from 'react';\nimport { Popover, PopoverHandle } from '../Popover';\nimport { Icon } from '../Icon';\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?: (option: DropdownOption, onSelect: (option: DropdownOption) => void) => React.ReactNode;\n  onSearch?: (searchTerm: string) => void;\n  label?: string;\n  automationId?: string;\n  noOptionsMessage?: string;\n  allowCustomTags?: boolean;\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      onSearch,\n      label,\n      automationId = '',\n      noOptionsMessage = \"No options found\",\n      allowCustomTags = true,\n    },\n    ref: ForwardedRef<DropdownWithInputTagsHandle>\n  ) => {\n    const [tags, setTags] = useState<{ label: string; value: string }[]>(() => {\n      return value.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    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\n    useEffect(() => {\n      setTags(\n        value.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    }, [value, options]);\n\n    useEffect(() => {\n      if (!inputValue.trim()) {\n        setFilteredOptions(options);\n      } else {\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      }\n      \n      if (onSearch) {\n        onSearch(inputValue);\n      }\n    }, [inputValue, options, onSearch]);\n\n    const handleSelectOption = (option: DropdownOption) => {\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\n    const handleRemoveTag = (indexToRemove: number) => {\n      const newTags = tags.filter((_, index) => index !== indexToRemove);\n      setTags(newTags);\n      onChange?.(newTags.map(tag => tag.value));\n    };\n\n    const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n      if (e.key === 'Enter' && inputValue.trim()) {\n        e.preventDefault();\n        \n        if (filteredOptions.length > 0) {\n          handleSelectOption(filteredOptions[0]);\n        } else if (allowCustomTags) {\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        }\n        setIsDropdownOpen(false);\n      } else if (e.key === 'Backspace' && inputValue === \"\" && tags.length > 0) {\n        const newTags = tags.slice(0, -1);\n        setTags(newTags);\n        onChange?.(newTags.map(tag => tag.value));\n      } else if (e.key === 'ArrowDown') {\n        e.preventDefault();\n        if (!isDropdownOpen) {\n          setIsDropdownOpen(true);\n        }\n      } else if (e.key === 'Escape') {\n        setIsDropdownOpen(false);\n        setInputValue('');\n      }\n    };\n\n    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      const newValue = e.target.value;\n      setInputValue(newValue);\n      \n      if (newValue.trim() && !isDropdownOpen) {\n        setIsDropdownOpen(true);\n      }\n    };\n\n    const handleInputFocus = () => {\n      if (inputValue.trim() || options.length > 0) {\n        setIsDropdownOpen(true);\n      }\n    };\n\n    const handleInputContainerClick = (e: React.MouseEvent) => {\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      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      setIsDropdownOpen(!isDropdownOpen);\n    };\n\n    useImperativeHandle(ref, () => ({ toggleDropdown }), []);\n\n    const defaultRenderOption = (option: DropdownOption, onSelect: (option: DropdownOption) => void) => (\n      <div\n        key={option.id}\n        className=\"dropdown-with-input-tags-option\"\n        onClick={() => onSelect(option)}\n      >\n        <span className=\"option-label\">{option.label}</span>\n        {option.value !== option.label && (\n          <span className=\"option-value\">{option.value}</span>\n        )}\n      </div>\n    );\n\n    return (\n      <div className={`dropdown-with-input-tags-wrapper ${className}`} data-automation-id={automationId}>\n        {label && <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={isDropdownOpen}\n            onPopoverToggle={setIsDropdownOpen}\n            renderPopoverContents={({ closePopoverCb }) => (\n              <div className=\"dropdown-with-input-tags-content\">\n                {filteredOptions.length > 0 ? (\n                  filteredOptions.map((option) =>\n                    renderOption\n                      ? renderOption(option, handleSelectOption)\n                      : defaultRenderOption(option, handleSelectOption)\n                  )\n                ) : (\n                  <div className=\"dropdown-with-input-tags-no-options\">\n                    {inputValue.trim() ? (\n                      allowCustomTags ? (\n                        <div\n                          className=\"dropdown-with-input-tags-option dropdown-with-input-tags-custom-option\"\n                          onClick={() => {\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                            closePopoverCb();\n                          }}\n                        >\n                          Add \"{inputValue.trim()}\"\n                        </div>\n                      ) : (\n                        <div className=\"dropdown-with-input-tags-no-options-text\">\n                          {noOptionsMessage}\n                        </div>\n                      )\n                    ) : (\n                      <div className=\"dropdown-with-input-tags-no-options-text\">\n                        {noOptionsMessage}\n                      </div>\n                    )}\n                  </div>\n                )}\n              </div>\n            )}\n            renderPopoverSrcElement={() => (\n              <div className=\"dropdown-with-input-tags-input-container\">\n                <div \n                  className=\"input-with-tags-container\" \n                  onClick={handleInputContainerClick}\n                >\n                  {tags.map((tag, index) => (\n                    <span key={index} className=\"tag-in-inputwithtags\">\n                      {tag.label}\n                      <span\n                        className=\"close-icon-in-inputwithtags\"\n                        onClick={(e) => {\n                          e.stopPropagation();\n                          handleRemoveTag(index);\n                        }}\n                      >\n                        <Icon name=\"close\" />\n                      </span>\n                    </span>\n                  ))}\n                  <input\n                    ref={inputRef}\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                  />\n                </div>\n              </div>\n            )}\n          />\n        </div>\n      </div>\n    );\n  }\n); "],"names":["DropdownWithInputTags","value","onChange","placeholder","className","options","renderOption","onSearch","label","automationId","noOptionsMessage","allowCustomTags","ref","tags","setTags","useState","map","val","found","find","opt","inputValue","setInputValue","filteredOptions","setFilteredOptions","isDropdownOpen","setIsDropdownOpen","popoverRef","useRef","inputRef","useEffect","trim","filtered","filter","option","toLowerCase","includes","handleSelectOption","newTags","some","tag","push","handleRemoveTag","indexToRemove","_","index","handleKeyDown","e","key","preventDefault","length","slice","handleInputChange","newValue","target","handleInputFocus","handleInputContainerClick","stopPropagation","current","focus","handlePopoverWrapperClick","closest","toggleDropdown","useImperativeHandle","defaultRenderOption","onSelect","React","createElement","id","onClick","Popover","contentWidth","position","isPopoverOpen","onPopoverToggle","renderPopoverContents","closePopoverCb","renderPopoverSrcElement","Icon","name","type","onKeyDown","onFocus"],"mappings":"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"}
+{"version":3,"file":"index36.js","sources":["../src/components/DropdownWithInputTags/index.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef, forwardRef, ForwardedRef, useImperativeHandle, KeyboardEvent } from 'react';\nimport { Popover, PopoverHandle } from '../Popover';\nimport { Icon } from '../Icon';\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?: (option: DropdownOption, onSelect: (option: DropdownOption) => void) => React.ReactNode;\n  onSearch?: (searchTerm: string) => void;\n  label?: string;\n  automationId?: string;\n  noOptionsMessage?: string;\n  allowCustomTags?: boolean;\n  disabled?: boolean;\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      onSearch,\n      label,\n      automationId = '',\n      noOptionsMessage = \"No options found\",\n      allowCustomTags = true,\n      disabled = false,\n    },\n    ref: ForwardedRef<DropdownWithInputTagsHandle>\n  ) => {\n    const [tags, setTags] = useState<{ label: string; value: string }[]>(() => {\n      return value.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    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\n    useEffect(() => {\n      setTags(\n        value.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    }, [value, options]);\n\n    useEffect(() => {\n      if (!inputValue.trim()) {\n        setFilteredOptions(options);\n      } else {\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      }\n      \n      if (onSearch) {\n        onSearch(inputValue);\n      }\n    }, [inputValue, options, onSearch]);\n\n    const handleSelectOption = (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\n    const handleRemoveTag = (indexToRemove: number) => {\n      if (disabled) return;\n      \n      const newTags = tags.filter((_, index) => index !== indexToRemove);\n      setTags(newTags);\n      onChange?.(newTags.map(tag => tag.value));\n    };\n\n    const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n      if (disabled) return;\n      \n      if (e.key === 'Enter' && inputValue.trim()) {\n        e.preventDefault();\n        if (filteredOptions.length > 0) {\n          handleSelectOption(filteredOptions[0]);\n        } else if (allowCustomTags) {\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        }\n        setIsDropdownOpen(false);\n      } else if (e.key === 'Backspace' && inputValue === \"\" && tags.length > 0) {\n        const newTags = tags.slice(0, -1);\n        setTags(newTags);\n        onChange?.(newTags.map(tag => tag.value));\n      } else if (e.key === 'ArrowDown') {\n        e.preventDefault();\n        if (!isDropdownOpen) {\n          setIsDropdownOpen(true);\n        }\n      } else if (e.key === 'Escape') {\n        setIsDropdownOpen(false);\n        setInputValue('');\n      }\n    };\n\n    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      if (disabled) return;\n      \n      const newValue = e.target.value;\n      setInputValue(newValue);\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 = (option: DropdownOption, onSelect: (option: DropdownOption) => void, disabled: boolean) => (\n      <div\n        key={option.id}\n        className=\"dropdown-with-input-tags-option\"\n        onClick={() => !disabled && onSelect(option)}\n      >\n        <span className=\"option-label\">{option.label}</span>\n        {option.value !== option.label && (\n          <span className=\"option-value\">{option.value}</span>\n        )}\n      </div>\n    );\n\n    return (\n      <div className={`dropdown-with-input-tags-wrapper ${className} ${disabled ? 'disabled-wrapper' : ''}`} data-automation-id={automationId}>\n        {label && <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            renderPopoverContents={({ closePopoverCb }) => (\n              <div className=\"dropdown-with-input-tags-content\">\n                {filteredOptions.length > 0 ? (\n                  filteredOptions.map((option) =>\n                    renderOption\n                      ? renderOption(option, handleSelectOption)\n                      : defaultRenderOption(option, handleSelectOption, disabled)\n                  )\n                ) : (\n                  <div className=\"dropdown-with-input-tags-no-options\">\n                    {inputValue.trim() ? (\n                      allowCustomTags ? (\n                        <div\n                          className=\"dropdown-with-input-tags-option dropdown-with-input-tags-custom-option\"\n                          onClick={() => {\n                            if (disabled) return;\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                            closePopoverCb();\n                          }}\n                        >\n                          Add \"{inputValue.trim()}\"\n                        </div>\n                      ) : (\n                        <div className=\"dropdown-with-input-tags-no-options-text\">\n                          {noOptionsMessage}\n                        </div>\n                      )\n                    ) : (\n                      <div className=\"dropdown-with-input-tags-no-options-text\">\n                        {noOptionsMessage}\n                      </div>\n                    )}\n                  </div>\n                )}\n              </div>\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.label}\n                      {!disabled && (\n                        <span\n                          className=\"close-icon-in-inputwithtags\"\n                          onClick={(e) => {\n                            e.stopPropagation();\n                            handleRemoveTag(index);\n                          }}\n                        >\n                          <Icon name=\"close\" />\n                        </span>\n                      )}\n                    </span>\n                  ))}\n                  <input\n                    ref={inputRef}\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                  />\n                </div>\n              </div>\n            )}\n          />\n        </div>\n      </div>\n    );\n  }\n); "],"names":["DropdownWithInputTags","value","onChange","placeholder","className","options","renderOption","onSearch","label","automationId","noOptionsMessage","allowCustomTags","disabled","ref","tags","setTags","useState","map","val","found","find","opt","inputValue","setInputValue","filteredOptions","setFilteredOptions","isDropdownOpen","setIsDropdownOpen","popoverRef","useRef","inputRef","useEffect","trim","filtered","filter","option","toLowerCase","includes","handleSelectOption","newTags","some","tag","push","handleRemoveTag","indexToRemove","_","index","handleKeyDown","e","key","preventDefault","length","slice","handleInputChange","newValue","target","handleInputFocus","handleInputContainerClick","stopPropagation","current","focus","handlePopoverWrapperClick","closest","toggleDropdown","useImperativeHandle","defaultRenderOption","onSelect","React","createElement","id","onClick","Popover","contentWidth","position","isPopoverOpen","onPopoverToggle","renderPopoverContents","closePopoverCb","renderPopoverSrcElement","Icon","name","type","onKeyDown","onFocus"],"mappings":"AA+BaA,OAAAA,KAAAA,cAAAA,GAAAA,YAAAA,GAAAA,UAAAA,GAAAA,aAAAA,GAAAA,uBAAAA,SAAAA;AAAAA,SAAAA,WAAAA,SAAAA;AAAAA,SAAAA,QAAAA,SAAAA;AAAAA,OAAAA;AAAAA,MAAAA,sBACX,CACE;AAAA,EACEC,OAAAA,IAAQ,CAAE;AAAA,EACVC,UAAAA;AAAAA,EACAC,aAAAA,IAAc;AAAA,EACdC,WAAAA,IAAY;AAAA,EACZC,SAAAA,IAAU,CAAE;AAAA,EACZC,cAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,cAAAA,IAAe;AAAA,EACfC,kBAAAA,IAAmB;AAAA,EACnBC,iBAAAA,IAAkB;AAAA,EAClBC,UAAAA,IAAW;AACb,GACAC,MACG;AACH,QAAM,CAACC,GAAMC,CAAO,IAAIC,EAA6C,MAC5Df,EAAMgB,IAAIC,CAAOA,MAAA;AACtB,UAAMC,IAAQd,EAAQe,KAAKC,CAAOA,MAAAA,EAAIpB,UAAUiB,CAAG;AACnD,WAAOC,IAAQ;AAAA,MAAEX,OAAOW,EAAMX;AAAAA,MAAOP,OAAOkB,EAAMlB;AAAAA,IAAAA,IAAU;AAAA,MAAEO,OAAOU;AAAAA,MAAKjB,OAAOiB;AAAAA,IAAI;AAAA,EAAA,CACtF,CACF,GACK,CAACI,GAAYC,CAAa,IAAIP,EAAS,EAAE,GACzC,CAACQ,GAAiBC,CAAkB,IAAIT,EAA2BX,CAAO,GAC1E,CAACqB,GAAgBC,CAAiB,IAAIX,EAAS,EAAK,GACpDY,IAAaC,EAAsB,IAAI,GACvCC,IAAWD,EAAyB,IAAI;AAE9CE,EAAAA,EAAU,MAAM;AAEZ9B,IAAAA,EAAAA,EAAMgB,IAAIC,CAAOA,MAAA;AACf,YAAMC,IAAQd,EAAQe,KAAKC,CAAOA,MAAAA,EAAIpB,UAAUiB,CAAG;AACnD,aAAOC,IAAQ;AAAA,QAAEX,OAAOW,EAAMX;AAAAA,QAAOP,OAAOkB,EAAMlB;AAAAA,MAAAA,IAAU;AAAA,QAAEO,OAAOU;AAAAA,QAAKjB,OAAOiB;AAAAA,MAAI;AAAA,IAAA,CACtF,CACH;AAAA,EAAA,GACC,CAACjB,GAAOI,CAAO,CAAC,GAEnB0B,EAAU,MAAM;AACV,QAAA,CAACT,EAAWU;AACdP,MAAAA,EAAmBpB,CAAO;AAAA,SACrB;AACC4B,YAAAA,IAAW5B,EAAQ6B,OAAOC,CAAAA,MAC9BA,EAAO3B,MAAM4B,YAAAA,EAAcC,SAASf,EAAWc,YAAa,CAAA,KAC5DD,EAAOlC,MAAMmC,cAAcC,SAASf,EAAWc,YAAY,CAAC,CAC9D;AACAX,MAAAA,EAAmBQ,CAAQ;AAAA,IAAA;AAG7B,IAAI1B,KACFA,EAASe,CAAU;AAAA,EAEpB,GAAA,CAACA,GAAYjB,GAASE,CAAQ,CAAC;AAE5B+B,QAAAA,IAAqBA,CAACH,MAA2B;AACrD,QAAIvB,EAAU;AAER2B,UAAAA,IAAU,CAAC,GAAGzB,CAAI;AACpB,IAACyB,EAAQC,KAAKC,CAAAA,MAAOA,EAAIxC,UAAUkC,EAAOlC,KAAK,MACjDsC,EAAQG,KAAK;AAAA,MAAElC,OAAO2B,EAAO3B;AAAAA,MAAOP,OAAOkC,EAAOlC;AAAAA,IAAAA,CAAO,GACzDc,EAAQwB,CAAO,GACfrC,KAAAA,QAAAA,EAAWqC,EAAQtB,IAAIwB,CAAOA,MAAAA,EAAIxC,KAAK,KAEzCsB,EAAc,EAAE,GAChBI,EAAkB,EAAK;AAAA,EACzB,GAEMgB,IAAkBA,CAACC,MAA0B;AACjD,QAAIhC,EAAU;AAEd,UAAM2B,IAAUzB,EAAKoB,OAAO,CAACW,GAAGC,MAAUA,MAAUF,CAAa;AACjE7B,IAAAA,EAAQwB,CAAO,GACfrC,KAAAA,QAAAA,EAAWqC,EAAQtB,IAAIwB,CAAOA,MAAAA,EAAIxC,KAAK;AAAA,EACzC,GAEM8C,IAAgBA,CAACC,MAAuC;AAC5D,QAAIpC,CAAAA;AAEJ,UAAIoC,EAAEC,QAAQ,WAAW3B,EAAWU,QAAQ;AAEtCR,YADJwB,EAAEE,eAAe,GACb1B,EAAgB2B,SAAS;AACR3B,UAAAA,EAAAA,EAAgB,CAAC,CAAC;AAAA,iBAC5Bb,GAAiB;AACpB4B,gBAAAA,IAAU,CAAC,GAAGzB,CAAI;AACpB,UAACyB,EAAQC,KAAKC,CAAAA,MAAOA,EAAIxC,UAAUqB,EAAWU,KAAK,CAAC,MACtDO,EAAQG,KAAK;AAAA,YAAElC,OAAOc,EAAWU,KAAK;AAAA,YAAG/B,OAAOqB,EAAWU,KAAK;AAAA,UAAA,CAAG,GACnEjB,EAAQwB,CAAO,GACfrC,KAAAA,QAAAA,EAAWqC,EAAQtB,IAAIwB,CAAOA,MAAAA,EAAIxC,KAAK,KAEzCsB,EAAc,EAAE;AAAA,QAAA;AAElBI,QAAAA,EAAkB,EAAK;AAAA,MAAA,WACdqB,EAAEC,QAAQ,eAAe3B,MAAe,MAAMR,EAAKqC,SAAS,GAAG;AACxE,cAAMZ,IAAUzB,EAAKsC,MAAM,GAAG,EAAE;AAChCrC,QAAAA,EAAQwB,CAAO,GACfrC,KAAAA,QAAAA,EAAWqC,EAAQtB,IAAIwB,CAAOA,MAAAA,EAAIxC,KAAK;AAAA,MAAC,MAC1C,CAAW+C,EAAEC,QAAQ,eACnBD,EAAEE,eAAe,GACZxB,KACHC,EAAkB,EAAI,KAEfqB,EAAEC,QAAQ,aACnBtB,EAAkB,EAAK,GACvBJ,EAAc,EAAE;AAAA,EAEpB,GAEM8B,IAAoBA,CAACL,MAA2C;AACpE,QAAIpC,EAAU;AAER0C,UAAAA,IAAWN,EAAEO,OAAOtD;AAC1BsB,IAAAA,EAAc+B,CAAQ,GAElBA,EAAStB,UAAU,CAACN,KACtBC,EAAkB,EAAI;AAAA,EAE1B,GAEM6B,IAAmBA,MAAM;AAC7B,IAAI5C,MAEAU,EAAWU,KAAAA,KAAU3B,EAAQ8C,SAAS,MACxCxB,EAAkB,EAAI;AAAA,EAE1B,GAEM8B,IAA4BA,CAACT,MAAwB;AA/HlDhD,QAAAA;AAgIP,IAAIY,MAEJoC,EAAEU,gBAAgB,IAClB5B,IAAAA,EAAS6B,YAAT7B,QAAAA,EAAkB8B,SACd,CAAClC,MAAmBJ,EAAWU,KAAU3B,KAAAA,EAAQ8C,SAAS,MAC5DxB,EAAkB,EAAI;AAAA,EAE1B,GAEMkC,IAA4BA,CAACb,MAAwB;AACzD,QAAIpC,GAAU;AACZoC,MAAAA,EAAEE,eAAe,GACjBF,EAAEU,gBAAgB;AAClB;AAAA,IAAA;AAKF,IAFeV,EAAEO,OACUO,QAAQ,4BAA4B,KAE7Dd,EAAEU,gBAAgB;AAAA,EAEtB,GAEMK,IAAiBA,MAAM;AAC3B,IAAInD,KACJe,EAAkB,CAACD,CAAc;AAAA,EACnC;AAEAsC,EAAAA,EAAoBnD,GAAK,OAAO;AAAA,IAAEkD,gBAAAA;AAAAA,EAAe,IAAI,CAAA,CAAE;AAEvD,QAAME,IAAsBA,CAAC9B,GAAwB+B,GAA4CtD,MAC/FuD,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEnB,KAAKd,EAAOkC;AAAAA,IACZjE,WAAU;AAAA,IACVkE,SAASA,MAAM,CAAC1D,KAAYsD,EAAS/B,CAAM;AAAA,EAAA,GAE3CiC,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMhE,WAAU;AAAA,EAAA,GAAgB+B,EAAO3B,KAAY,GAClD2B,EAAOlC,UAAUkC,EAAO3B,SACvB4D,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMhE,WAAU;AAAA,EAAA,GAAgB+B,EAAOlC,KAAY,CAElD;AAILkE,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKhE,WAAW,oCAAoCA,CAAS,IAAIQ,IAAW,qBAAqB,EAAE;AAAA,IAAI,sBAAoBH;AAAAA,EACxHD,GAAAA,KAAS4D,gBAAAA,EAAAA,cAAA,SAAA;AAAA,IAAOhE,WAAU;AAAA,EAAkCI,GAAAA,CAAa,GAE1E2D,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKE,SAAST;AAAAA,EAAAA,GACZO,gBAAAA,EAAAA,cAACG,GAAO;AAAA,IACN1D,KAAKe;AAAAA,IACLxB,WAAU;AAAA,IACVoE,cAAa;AAAA,IACbC,UAAS;AAAA,IACTC,eAAe,CAAC9D,KAAYc;AAAAA,IAC5BiD,iBAAiB/D,IAAW,MAAM;AAAA,IAAA,IAAKe;AAAAA,IACvCiD,uBAAuBA,CAAC;AAAA,MAAEC,gBAAAA;AAAAA,IAAAA,MACxBT,gBAAAA,EAAAA,cAAA,OAAA;AAAA,MAAKhE,WAAU;AAAA,IAAA,GACZoB,EAAgB2B,SAAS,IACxB3B,EAAgBP,IAAKkB,CAAAA,MACnB7B,IACIA,EAAa6B,GAAQG,CAAkB,IACvC2B,EAAoB9B,GAAQG,GAAoB1B,CAAQ,CAC9D,IAEAuD,gBAAAA,EAAAC,cAAA,OAAA;AAAA,MAAKhE,WAAU;AAAA,IAAA,GACZkB,EAAWU,SACVrB,IACEwD,gBAAAA,EAAAC,cAAA,OAAA;AAAA,MACEhE,WAAU;AAAA,MACVkE,SAASA,MAAM;AACb,YAAI1D,EAAU;AACR2B,cAAAA,IAAU,CAAC,GAAGzB,CAAI;AACpB,QAACyB,EAAQC,KAAKC,CAAAA,MAAOA,EAAIxC,UAAUqB,EAAWU,KAAK,CAAC,MACtDO,EAAQG,KAAK;AAAA,UAAElC,OAAOc,EAAWU,KAAK;AAAA,UAAG/B,OAAOqB,EAAWU,KAAK;AAAA,QAAA,CAAG,GACnEjB,EAAQwB,CAAO,GACfrC,KAAAA,QAAAA,EAAWqC,EAAQtB,IAAIwB,CAAOA,MAAAA,EAAIxC,KAAK,KAEzCsB,EAAc,EAAE,GACDsD,EAAA;AAAA,MAAA;AAAA,IACjB,GACD,SACOvD,EAAWU,QAAO,GACrB,IAELoC,gBAAAA,EAAAA,cAAA,OAAA;AAAA,MAAKhE,WAAU;AAAA,IACZM,GAAAA,CACE,IAGPyD,gBAAAA,EAAAC,cAAA,OAAA;AAAA,MAAKhE,WAAU;AAAA,IAAA,GACZM,CACE,CAEJ,CAEJ;AAAA,IAEPoE,yBAAyBA,MACvBV,gBAAAA,EAAAA,cAAA,OAAA;AAAA,MAAKhE,WAAU;AAAA,IAAA,GACbgE,gBAAAA,EAAAA,cAAA,OAAA;AAAA,MACEhE,WAAW,6BAA6BQ,IAAW,uCAAuC,EAAE;AAAA,MAC5F0D,SAASb;AAAAA,IAAAA,GAER3C,EAAKG,IAAI,CAACwB,GAAKK,MACdqB,gBAAAA,EAAAC,cAAA,QAAA;AAAA,MAAMnB,KAAKH;AAAAA,MAAO1C,WAAU;AAAA,IAAA,GACzBqC,EAAIjC,OACJ,CAACI,KACAuD,gBAAAA,EAAAC,cAAA,QAAA;AAAA,MACEhE,WAAU;AAAA,MACVkE,SAAUtB,CAAMA,MAAA;AACdA,QAAAA,EAAEU,gBAAgB,GAClBf,EAAgBG,CAAK;AAAA,MAAA;AAAA,IACvB,GAEAsB,gBAAAA,EAAAA,cAACW,GAAI;AAAA,MAACC,MAAK;AAAA,IAAS,CAAA,CAChB,CAEJ,CACP,GACDb,gBAAAA,EAAAC,cAAA,SAAA;AAAA,MACEvD,KAAKiB;AAAAA,MACLmD,MAAK;AAAA,MACLhF,OAAOqB;AAAAA,MACPpB,UAAUmD;AAAAA,MACV6B,WAAWnC;AAAAA,MACXoC,SAAS3B;AAAAA,MACTrD,aAAaW,EAAKqC,WAAW,IAAIhD,IAAc;AAAA,MAC/CC,WAAU;AAAA,MACVQ,UAAAA;AAAAA,IAAAA,CACD,CACE,CACF;AAAA,EAER,CAAA,CACE,CACF;AAET,CACF;"}