se-design 0.0.119 → 0.0.121

package/dist/index170.js

@@ -0,0 +1,5 @@
+var e = {};
+export {
+  e as __exports
+};
+//# sourceMappingURL=index170.js.map

package/dist/index170.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index170.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index23.js

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

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';\n\ntype DropdownValue = {\n  [key: string]: any;\n};\n\ntype DropdownProps = {\n  label?: string;\n  type: '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};\n\nexport const Dropdown: FC<DropdownProps> = (props) => {\n  const [isDropDownOpen, setIsDropDownOpen] = useState(false);\n  const [selectedDropDownValue, setSelectedDropDownValue] = useState<DropdownValue>(\n    () => 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  } = props;\n\n  useEffect(() => {\n    setSelectedDropDownValue(props?.defaultSelectedValue || {});\n  }, [props?.defaultSelectedValue]);\n\n  const handleDropDownOptionClick = (dropDownOption: any) => {\n    setSelectedDropDownValue(dropDownOption);\n    popoverRef.current?.togglePopover();\n    props?.onOptionClick?.(dropDownOption);\n  };\n\n  const optionChip = (option: DropdownValue) => {\n    if (props?.renderOptionChip) {\n      return props?.renderOptionChip(option);\n    }\n    return <span className={`option-chip`}>{option[selectBy] || defaultText}</span>;\n  };\n\n  const dropDownOptionJsx = (dropDownOption: DropdownValue) => {\n    const optionTxt = dropDownOption[selectBy];\n    const dropDownSelectedValue = selectedDropDownValue[selectBy] || defaultText;\n    const selectByUniqueId = optionsUniqueBy?.length\n      ? dropDownOption[optionsUniqueBy] == selectedDropDownValue[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 renderDropdownSelect = () => {\n    const borderColor = isDropDownOpen ? 'border-[var(--color-gray-900)]' : 'border-[var(--color-gray-200)]';\n    const dropDownSelectClass = `dropdown-src-element flex px-3 py-2 border rounded-md ${borderColor} flex items-center`;\n\n    return (\n      <div className={dropDownSelectClass}>\n        {optionChip(selectedDropDownValue)}\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 className={`se-design-dropdown-container${props?.className ? ` ${props?.className}` : ''}`} style={props?.style}>\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={renderDropdownContents}\n          contentWidth={'full'}\n          renderPopoverSrcElement={renderDropdownSelect}\n          onPopoverToggle={(value) => setIsDropDownOpen(value)}\n          disabled={disabled}\n        />\n      </div>\n    </div>\n  );\n};\n"],"names":["React__default","useState","useRef","useEffect","Popover","Icon","Dropdown","props","isDropDownOpen","setIsDropDownOpen","selectedDropDownValue","setSelectedDropDownValue","defaultSelectedValue","popoverRef","selectBy","optionsUniqueBy","displaySelected","dropDownOptions","defaultText","iconColor","disabled","handleDropDownOptionClick","dropDownOption","_a","_b","current","togglePopover","onOptionClick","optionChip","option","renderOptionChip","React","createElement","className","dropDownOptionJsx","optionTxt","dropDownSelectedValue","selectByUniqueId","length","isOptionSelected","key","onClick","__spreadProps","__spreadValues","name","stroke","renderDropdownContents","map","renderDropdownSelect","dropDownSelectClass","rotation","style","label","ref","renderPopoverContents","contentWidth","renderPopoverSrcElement","onPopoverToggle","value"],"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;\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}` : ''} min-h-[85px]`}\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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"}

package/dist/index28.js

@@ -1,22 +1,22 @@
 import e from "react";
-import { Icon as I } from "./index5.js";
-import { Button as i } from "./index3.js";
+import { Icon as N } from "./index5.js";
+import { Button as a } from "./index3.js";
 /* empty css         */
 const n = {
   bannerCtn: "relative rounded-[12px] flex pr-3.5 cursor-pointer",
   bannerContentCtn: "pt-5 pl-6 pb-5 pr-2 flex flex-col gap-2",
-  bannerLinkCta: "text-[#1088e7] cursor-pointer text-base leading-6 underline hover: text-[#0078d4]",
-  bannerImageCtn: "w-[30%] flex mr-5 justify-end cursor-pointer",
+  bannerLinkCta: "text-[#1088e7] cursor-pointer text-base leading-6 hover: text-[#0078d4]",
+  bannerImageCtn: "flex cursor-pointer",
   bannerCloseIconCtn: "absolute top-[12px] right-[12px] cursor-pointer hover:bg-[var(--color-gray-100)] rounded-full p-1",
   bannerButton: "self-start"
-}, T = (t) => {
+}, w = (r) => {
   const {
-    bannerClassName: m,
-    bannerBgColor: C,
-    title: p,
+    bannerClassName: i,
+    bannerBgColor: m,
+    title: C,
     description: b,
-    hasImage: a,
-    imagePosition: r = "right",
+    hasImage: p,
+    imagePosition: t = "right",
     hasCloseIcon: d,
     closeIconName: u,
     onClose: g,
@@ -24,56 +24,62 @@ const n = {
     ctaText: l,
     hasLinkCta: x,
     onCtaClick: c,
-    onSecondaryCtaClick: f,
-    hasButtonCta: y,
+    onSecondaryCtaClick: y,
+    hasButtonCta: f,
     buttonType: h = "secondary",
     hasSecondaryButtonCta: k = !1,
     secondaryButtonType: E = "secondary",
-    secondaryCtaText: B
-  } = t, s = () => a && /* @__PURE__ */ e.createElement("div", {
-    className: `${n.bannerImageCtn} banner-image-ctn min-h-full`,
+    secondaryCtaText: B,
+    imageWidth: I = "30%"
+  } = r, s = () => p && /* @__PURE__ */ e.createElement("div", {
+    className: `${n.bannerImageCtn} banner-image-ctn ${t === "right" ? "mr-5 ml-0 justify-end" : "ml-5 mr-0 justify-start"} min-h-full`,
+    style: {
+      width: I
+    },
     onClick: o
   }, /* @__PURE__ */ e.createElement("img", {
-    src: t.bannerImage,
+    src: r.bannerImage,
     className: "max-w-[initial] h-[initial] max-h-[150px] object-contain"
   }));
   return /* @__PURE__ */ e.createElement("div", {
-    className: `${n.bannerCtn} ${m} banner-ctn`,
+    className: `${n.bannerCtn} ${i} banner-ctn`,
     style: {
-      backgroundColor: C
+      backgroundColor: m
     }
-  }, r === "left" && s(), /* @__PURE__ */ e.createElement("div", {
-    className: `${n.bannerContentCtn} ${a ? "w-[70%]" : "w-[100%]"} banner-content-ctn`,
+  }, t === "left" && s(), /* @__PURE__ */ e.createElement("div", {
+    className: `${n.bannerContentCtn} w-[100%] banner-content-ctn`,
     onClick: o
   }, /* @__PURE__ */ e.createElement("span", {
     className: "banner-title"
-  }, p), /* @__PURE__ */ e.createElement("span", {
+  }, C), /* @__PURE__ */ e.createElement("span", {
     className: "banner-description"
   }, b), /* @__PURE__ */ e.createElement("div", {
     className: "flex gap-3"
-  }, x && /* @__PURE__ */ e.createElement("span", {
+  }, x && /* @__PURE__ */ e.createElement(a, {
+    type: "link",
     className: n.bannerLinkCta,
-    onClick: c
-  }, l), y && /* @__PURE__ */ e.createElement(i, {
+    onClick: c,
+    label: l
+  }), f && /* @__PURE__ */ e.createElement(a, {
     type: h,
     size: "sm",
     label: l,
     onClick: c,
     className: n == null ? void 0 : n.bannerButton
-  }), k && /* @__PURE__ */ e.createElement(i, {
+  }), k && /* @__PURE__ */ e.createElement(a, {
     type: E,
     size: "sm",
     label: B,
-    onClick: f,
+    onClick: y,
     className: n == null ? void 0 : n.secondaryBannerButton
-  }))), r === "right" && s(), /* @__PURE__ */ e.createElement("span", {
+  }))), t === "right" && s(), /* @__PURE__ */ e.createElement("span", {
     className: n.bannerCloseIconCtn,
     onClick: g
-  }, d && /* @__PURE__ */ e.createElement(I, {
+  }, d && /* @__PURE__ */ e.createElement(N, {
     name: u
   })));
 };
 export {
-  T as Banner
+  w as Banner
 };
 //# sourceMappingURL=index28.js.map

package/dist/index28.js.map

@@ -1 +1 @@
-{"version":3,"file":"index28.js","sources":["../src/components/Banner/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { Map } from '../../utils/common.types';\nimport { Icon } from 'components/Icon';\nimport { Button } from 'components/Button';\nimport './style.scss';\n\nexport interface BannerProps {\n  bannerClassName?: string | '';\n  bannerBgColor?: string | '';\n  title: string | '';\n  description: string | '';\n  hasImage?: boolean | false;\n  imagePosition?: 'left' | 'right' | '';\n  bannerImage: string | '';\n  hasCloseIcon?: boolean | false;\n  closeIconName: string | '';\n  onClose: () => void | (() => {});\n  onBannerClick?: () => void | (() => {});\n  hasButtonCta?: boolean | false;\n  hasSecondaryButtonCta?: boolean | false;\n  buttonType?: 'primary' | 'secondary' | 'link';\n  secondaryButtonType?: 'primary' | 'secondary' | 'link';\n  hasLinkCta?: boolean | false;\n  ctaText: string | '';\n  secondaryCtaText: string | '';\n  onCtaClick: () => void | (() => {});\n  onSecondaryCtaClick: () => void | (() => {});\n}\n\nconst classNames: Map = {\n  bannerCtn: `relative rounded-[12px] flex pr-3.5 cursor-pointer`,\n  bannerContentCtn: 'pt-5 pl-6 pb-5 pr-2 flex flex-col gap-2',\n  bannerLinkCta: 'text-[#1088e7] cursor-pointer text-base leading-6 underline hover: text-[#0078d4]',\n  bannerImageCtn: 'w-[30%] flex mr-5 justify-end cursor-pointer',\n  bannerCloseIconCtn:\n    'absolute top-[12px] right-[12px] cursor-pointer hover:bg-[var(--color-gray-100)] rounded-full p-1',\n  bannerButton: 'self-start'\n};\n\nexport const Banner: FC<BannerProps> = (props) => {\n  const {\n    bannerClassName,\n    bannerBgColor,\n    title,\n    description,\n    hasImage,\n    imagePosition = 'right',\n    hasCloseIcon,\n    closeIconName,\n    onClose,\n    onBannerClick,\n    ctaText,\n    hasLinkCta,\n    onCtaClick,\n    onSecondaryCtaClick,\n    hasButtonCta,\n    buttonType = 'secondary',\n    hasSecondaryButtonCta = false,\n    secondaryButtonType = 'secondary',\n    secondaryCtaText\n  } = props;\n\n  const renderImage = () =>\n    hasImage && (\n      <div className={`${classNames.bannerImageCtn} banner-image-ctn min-h-full`} onClick={onBannerClick}>\n        <img src={props.bannerImage} className=\"max-w-[initial] h-[initial] max-h-[150px] object-contain\" />\n      </div>\n    );\n\n  return (\n    <div className={`${classNames.bannerCtn} ${bannerClassName} banner-ctn`} style={{ backgroundColor: bannerBgColor }}>\n      {imagePosition === 'left' && renderImage()}\n      <div\n        className={`${classNames.bannerContentCtn} ${hasImage ? 'w-[70%]' : 'w-[100%]'} banner-content-ctn`}\n        onClick={onBannerClick}\n      >\n        <span className=\"banner-title\">{title}</span>\n        <span className=\"banner-description\">{description}</span>\n        <div className=\"flex gap-3\">\n          {hasLinkCta && (\n            <span className={classNames.bannerLinkCta} onClick={onCtaClick}>\n              {ctaText}\n            </span>\n          )}\n          {hasButtonCta && (\n            <Button\n              type={buttonType}\n              size=\"sm\"\n              label={ctaText}\n              onClick={onCtaClick}\n              className={classNames?.bannerButton}\n            />\n          )}\n          {hasSecondaryButtonCta && (\n            <Button\n              type={secondaryButtonType}\n              size=\"sm\"\n              label={secondaryCtaText}\n              onClick={onSecondaryCtaClick}\n              className={classNames?.secondaryBannerButton}\n            />\n          )}\n        </div>\n      </div>\n      {imagePosition === 'right' && renderImage()}\n      <span className={classNames.bannerCloseIconCtn} onClick={onClose}>\n        {hasCloseIcon && <Icon name={closeIconName} />}\n      </span>\n    </div>\n  );\n};\n"],"names":["React__default","Icon","Button","classNames","bannerCtn","bannerContentCtn","bannerLinkCta","bannerImageCtn","bannerCloseIconCtn","bannerButton","Banner","props","bannerClassName","bannerBgColor","title","description","hasImage","imagePosition","hasCloseIcon","closeIconName","onClose","onBannerClick","ctaText","hasLinkCta","onCtaClick","onSecondaryCtaClick","hasButtonCta","buttonType","hasSecondaryButtonCta","secondaryButtonType","secondaryCtaText","renderImage","React","createElement","className","onClick","src","bannerImage","style","backgroundColor","type","size","label","secondaryBannerButton","name"],"mappings":"AA6BA,OAAAA,OAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,SAAA,UAAAC,SAAA;AAAA,OAAA;AAAA,MAAMC,IAAkB;AAAA,EACtBC,WAAW;AAAA,EACXC,kBAAkB;AAAA,EAClBC,eAAe;AAAA,EACfC,gBAAgB;AAAA,EAChBC,oBACE;AAAA,EACFC,cAAc;AAChB,GAEaC,IAA2BC,CAAUA,MAAA;AAC1C,QAAA;AAAA,IACJC,iBAAAA;AAAAA,IACAC,eAAAA;AAAAA,IACAC,OAAAA;AAAAA,IACAC,aAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAC,eAAAA,IAAgB;AAAA,IAChBC,cAAAA;AAAAA,IACAC,eAAAA;AAAAA,IACAC,SAAAA;AAAAA,IACAC,eAAAA;AAAAA,IACAC,SAAAA;AAAAA,IACAC,YAAAA;AAAAA,IACAC,YAAAA;AAAAA,IACAC,qBAAAA;AAAAA,IACAC,cAAAA;AAAAA,IACAC,YAAAA,IAAa;AAAA,IACbC,uBAAAA,IAAwB;AAAA,IACxBC,qBAAAA,IAAsB;AAAA,IACtBC,kBAAAA;AAAAA,EAAAA,IACEnB,GAEEoB,IAAcA,MAClBf,KACEgB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAW,GAAG/B,EAAWI,cAAc;AAAA,IAAgC4B,SAASd;AAAAA,EAAAA,GACnFY,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKG,KAAKzB,EAAM0B;AAAAA,IAAaH,WAAU;AAAA,EAAA,CAA4D,CAChG;AAIPF,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAW,GAAG/B,EAAWC,SAAS,IAAIQ,CAAe;AAAA,IAAe0B,OAAO;AAAA,MAAEC,iBAAiB1B;AAAAA,IAAAA;AAAAA,EAAc,GAC9GI,MAAkB,UAAUc,EAC7BC,GAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEC,WAAW,GAAG/B,EAAWE,gBAAgB,IAAIW,IAAW,YAAY,UAAU;AAAA,IAC9EmB,SAASd;AAAAA,EAAAA,GAETY,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMC,WAAU;AAAA,EAAgBpB,GAAAA,CAAY,GAC5CkB,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMC,WAAU;AAAA,EAAsBnB,GAAAA,CAAkB,GACxDiB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EACZX,GAAAA,KACCU,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMC,WAAW/B,EAAWG;AAAAA,IAAe6B,SAASX;AAAAA,KACjDF,CACG,GAEPI,KACCM,gBAAAA,EAAAC,cAAC/B,GAAM;AAAA,IACLsC,MAAMb;AAAAA,IACNc,MAAK;AAAA,IACLC,OAAOpB;AAAAA,IACPa,SAASX;AAAAA,IACTU,WAAW/B,KAAAA,gBAAAA,EAAYM;AAAAA,EACxB,CAAA,GAEFmB,KACCI,gBAAAA,EAAAC,cAAC/B,GAAM;AAAA,IACLsC,MAAMX;AAAAA,IACNY,MAAK;AAAA,IACLC,OAAOZ;AAAAA,IACPK,SAASV;AAAAA,IACTS,WAAW/B,KAAAA,gBAAAA,EAAYwC;AAAAA,EAAAA,CACxB,CAEA,CACF,GACJ1B,MAAkB,WAAWc,EAAY,GAC1CE,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMC,WAAW/B,EAAWK;AAAAA,IAAoB2B,SAASf;AAAAA,EACtDF,GAAAA,KAAgBe,gBAAAA,EAAAA,cAAChC,GAAI;AAAA,IAAC2C,MAAMzB;AAAAA,EAAgB,CAAA,CACzC,CACH;AAET;"}
+{"version":3,"file":"index28.js","sources":["../src/components/Banner/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { Map } from '../../utils/common.types';\nimport { Icon } from 'components/Icon';\nimport { Button } from 'components/Button';\nimport './style.scss';\n\nexport interface BannerProps {\n  bannerClassName?: string | '';\n  bannerBgColor?: string | '';\n  title: string | '';\n  description: string | '';\n  hasImage?: boolean | false;\n  imagePosition?: 'left' | 'right' | '';\n  bannerImage: string | '';\n  hasCloseIcon?: boolean | false;\n  closeIconName: string | '';\n  onClose: () => void | (() => {});\n  onBannerClick?: () => void | (() => {});\n  hasButtonCta?: boolean | false;\n  hasSecondaryButtonCta?: boolean | false;\n  buttonType?: 'primary' | 'secondary' | 'link';\n  secondaryButtonType?: 'primary' | 'secondary' | 'link';\n  hasLinkCta?: boolean | false;\n  ctaText: string | '';\n  secondaryCtaText: string | '';\n  onCtaClick: () => void | (() => {});\n  onSecondaryCtaClick: () => void | (() => {});\n  imageWidth?: string | '30%';\n}\n\nconst classNames: Map = {\n  bannerCtn: `relative rounded-[12px] flex pr-3.5 cursor-pointer`,\n  bannerContentCtn: 'pt-5 pl-6 pb-5 pr-2 flex flex-col gap-2',\n  bannerLinkCta: 'text-[#1088e7] cursor-pointer text-base leading-6 hover: text-[#0078d4]',\n  bannerImageCtn: 'flex cursor-pointer',\n  bannerCloseIconCtn:\n    'absolute top-[12px] right-[12px] cursor-pointer hover:bg-[var(--color-gray-100)] rounded-full p-1',\n  bannerButton: 'self-start'\n};\n\nexport const Banner: FC<BannerProps> = (props) => {\n  const {\n    bannerClassName,\n    bannerBgColor,\n    title,\n    description,\n    hasImage,\n    imagePosition = 'right',\n    hasCloseIcon,\n    closeIconName,\n    onClose,\n    onBannerClick,\n    ctaText,\n    hasLinkCta,\n    onCtaClick,\n    onSecondaryCtaClick,\n    hasButtonCta,\n    buttonType = 'secondary',\n    hasSecondaryButtonCta = false,\n    secondaryButtonType = 'secondary',\n    secondaryCtaText,\n    imageWidth = '30%'\n  } = props;\n\n  const renderImage = () =>\n    hasImage && (\n      <div\n        className={`${classNames.bannerImageCtn} banner-image-ctn ${imagePosition === 'right' ? 'mr-5 ml-0 justify-end' : 'ml-5 mr-0 justify-start'} min-h-full`}\n        style={{ width: imageWidth }}\n        onClick={onBannerClick}\n      >\n        <img src={props.bannerImage} className=\"max-w-[initial] h-[initial] max-h-[150px] object-contain\" />\n      </div>\n    );\n\n  return (\n    <div className={`${classNames.bannerCtn} ${bannerClassName} banner-ctn`} style={{ backgroundColor: bannerBgColor }}>\n      {imagePosition === 'left' && renderImage()}\n      <div className={`${classNames.bannerContentCtn} w-[100%] banner-content-ctn`} onClick={onBannerClick}>\n        <span className=\"banner-title\">{title}</span>\n        <span className=\"banner-description\">{description}</span>\n        <div className=\"flex gap-3\">\n          {hasLinkCta && (\n            <Button type=\"link\" className={classNames.bannerLinkCta} onClick={onCtaClick} label={ctaText} />\n          )}\n          {hasButtonCta && (\n            <Button\n              type={buttonType}\n              size=\"sm\"\n              label={ctaText}\n              onClick={onCtaClick}\n              className={classNames?.bannerButton}\n            />\n          )}\n          {hasSecondaryButtonCta && (\n            <Button\n              type={secondaryButtonType}\n              size=\"sm\"\n              label={secondaryCtaText}\n              onClick={onSecondaryCtaClick}\n              className={classNames?.secondaryBannerButton}\n            />\n          )}\n        </div>\n      </div>\n      {imagePosition === 'right' && renderImage()}\n      <span className={classNames.bannerCloseIconCtn} onClick={onClose}>\n        {hasCloseIcon && <Icon name={closeIconName} />}\n      </span>\n    </div>\n  );\n};\n"],"names":["React__default","Icon","Button","classNames","bannerCtn","bannerContentCtn","bannerLinkCta","bannerImageCtn","bannerCloseIconCtn","bannerButton","Banner","props","bannerClassName","bannerBgColor","title","description","hasImage","imagePosition","hasCloseIcon","closeIconName","onClose","onBannerClick","ctaText","hasLinkCta","onCtaClick","onSecondaryCtaClick","hasButtonCta","buttonType","hasSecondaryButtonCta","secondaryButtonType","secondaryCtaText","imageWidth","renderImage","React","createElement","className","style","width","onClick","src","bannerImage","backgroundColor","type","label","size","secondaryBannerButton","name"],"mappings":"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"}

package/dist/index35.js

@@ -1,12 +1,13 @@
-import c, { useState as p, useRef as y } from "react";
+import c, { useState as p, useRef as E } from "react";
 /* empty css         */
-import { Icon as E } from "./index5.js";
-function I({
+import { Icon as T } from "./index5.js";
+function R({
   value: m,
   onChange: e,
-  placeholder: o
+  placeholder: o,
+  className: f
 }) {
-  const [a, l] = p([...m]), [i, r] = p(""), u = y(null), f = (t) => {
+  const [a, l] = p([...m]), [i, r] = p(""), u = E(null), w = (t) => {
     if (t.key === "Enter" && i.trim()) {
       t.preventDefault();
       const s = [...a, i.trim()];
@@ -17,7 +18,7 @@ function I({
     }
   };
   return /* @__PURE__ */ c.createElement("div", {
-    className: "input-with-tags-container",
+    className: `input-with-tags-container ${f}`,
     onClick: () => {
       var t;
       return (t = u.current) == null ? void 0 : t.focus();
@@ -27,12 +28,12 @@ function I({
     className: "tag-in-inputwithtags"
   }, t, /* @__PURE__ */ c.createElement("span", {
     className: "close-icon-in-inputwithtags",
-    onClick: (w) => {
-      w.stopPropagation();
-      const n = a.filter((T, k) => k !== s);
+    onClick: (k) => {
+      k.stopPropagation();
+      const n = a.filter((v, y) => y !== s);
       l(n), e == null || e(n);
     }
-  }, /* @__PURE__ */ c.createElement(E, {
+  }, /* @__PURE__ */ c.createElement(T, {
     name: "close"
   })))), /* @__PURE__ */ c.createElement("input", {
     className: "input-with-tags-input",
@@ -40,11 +41,11 @@ function I({
     type: "text",
     value: i,
     onChange: (t) => r(t.target.value),
-    onKeyDown: f,
+    onKeyDown: w,
     placeholder: o
   }));
 }
 export {
-  I as InputWithTags
+  R as InputWithTags
 };
 //# sourceMappingURL=index35.js.map

package/dist/index35.js.map

@@ -1 +1 @@
-{"version":3,"file":"index35.js","sources":["../src/components/InputWithTags/index.tsx"],"sourcesContent":["import React, { useState, KeyboardEvent, useRef } from \"react\";\nimport './styles.scss';\nimport { Icon } from '../Icon';\nexport interface InputWithTagsProps {\n    value: string[];\n    onChange?: (tags: string[]) => void;\n    placeholder?: string;\n}\n\nexport function InputWithTags({ value, onChange, placeholder }: 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-container\" onClick={() => inputRef.current?.focus()} >\n            {tags.map((tag, index) => (\n                <span key={index} className=\"tag-in-inputwithtags\">\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            />\n        </div>\n    );\n}"],"names":["React__default","useState","useRef","Icon","InputWithTags","value","onChange","placeholder","tags","setTags","inputValue","setInputValue","inputRef","handleKeyDown","e","key","trim","preventDefault","newTags","length","slice","React","createElement","className","onClick","_a","current","focus","map","tag","index","stopPropagation","filter","_","i","name","ref","type","target","onKeyDown"],"mappings":"AASO,OAAAA,KAAA,YAAAC,GAAA,UAAAC,SAAA;AAAA,OAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,SAASC,EAAc;AAAA,EAAEC,OAAAA;AAAAA,EAAOC,UAAAA;AAAAA,EAAUC,aAAAA;AAAgC,GAAG;AAC1E,QAAA,CAACC,GAAMC,CAAO,IAAIR,EAAmB,CAAC,GAAGI,CAAK,CAAC,GAC/C,CAACK,GAAYC,CAAa,IAAIV,EAAS,EAAE,GACzCW,IAAWV,EAAyB,IAAI,GAExCW,IAAgBA,CAACC,MAAuC;AAC1D,QAAIA,EAAEC,QAAQ,WAAWL,EAAWM,QAAQ;AACxCF,MAAAA,EAAEG,eAAe;AACjB,YAAMC,IAAU,CAAC,GAAGV,GAAME,EAAWM,MAAM;AAC3CP,MAAAA,EAAQS,CAAO,GACfP,EAAc,EAAE,GAChBL,KAAAA,QAAAA,EAAWY;AAAAA,IAAO,WACXJ,EAAEC,QAAQ,eAAeL,MAAe,MAAMF,EAAKW,SAAS,GAAG;AAEtE,YAAMD,IAAUV,EAAKY,MAAM,GAAG,EAAE;AAChCX,MAAAA,EAAQS,CAAO,GACfZ,KAAAA,QAAAA,EAAWY;AAAAA,IAAO;AAAA,EAE1B;AAGIG,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,IAA4BC,SAASA,MAAAA;AArBrD,UAAAC;AAqB2Db,cAAAA,IAAAA,EAASc,YAATd,gBAAAA,EAAkBe;AAAAA;AAAAA,EAAM,GAC7EnB,EAAKoB,IAAI,CAACC,GAAKC,MACZT,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMP,KAAKe;AAAAA,IAAOP,WAAU;AAAA,EACvBM,GAAAA,GACDP,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IACAC,WAAU;AAAA,IACVC,SAAUV,CAAMA,MAAA;AACZA,MAAAA,EAAEiB,gBAAgB;AAClB,YAAMb,IAAUV,EAAKwB,OAAO,CAACC,GAAGC,MAAMA,MAAMJ,CAAK;AACjDrB,MAAAA,EAAQS,CAAO,GACfZ,KAAAA,QAAAA,EAAWY;AAAAA,IAAO;AAAA,EACtB,GAEII,gBAAAA,EAAAA,cAACnB,GAAI;AAAA,IAACgC,MAAK;AAAA,EAAS,CAAA,CAClB,CACJ,CACT,GACDd,gBAAAA,EAAAC,cAAA,SAAA;AAAA,IACIC,WAAU;AAAA,IACVa,KAAKxB;AAAAA,IACLyB,MAAK;AAAA,IACLhC,OAAOK;AAAAA,IACPJ,UAAWQ,CAAAA,MAAMH,EAAcG,EAAEwB,OAAOjC,KAAK;AAAA,IAC7CkC,WAAW1B;AAAAA,IACXN,aAAAA;AAAAA,EAAAA,CACH,CACA;AAEb;"}
+{"version":3,"file":"index35.js","sources":["../src/components/InputWithTags/index.tsx"],"sourcesContent":["import React, { useState, KeyboardEvent, useRef } from \"react\";\nimport './styles.scss';\nimport { Icon } from '../Icon';\nexport interface InputWithTagsProps {\n    value: string[];\n    onChange?: (tags: string[]) => void;\n    placeholder?: string;\n    className?: string;\n}\n\nexport function InputWithTags({ value, onChange, placeholder, className }: 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-container ${className}`} onClick={() => inputRef.current?.focus()} >\n            {tags.map((tag, index) => (\n                <span key={index} className=\"tag-in-inputwithtags\">\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            />\n        </div>\n    );\n}"],"names":["React__default","useState","useRef","Icon","InputWithTags","value","onChange","placeholder","className","tags","setTags","inputValue","setInputValue","inputRef","handleKeyDown","e","key","trim","preventDefault","newTags","length","slice","React","createElement","onClick","_a","current","focus","map","tag","index","stopPropagation","filter","_","i","name","ref","type","target","onKeyDown"],"mappings":"AAUO,OAAAA,KAAA,YAAAC,GAAA,UAAAC,SAAA;AAAA,OAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,SAASC,EAAc;AAAA,EAAEC,OAAAA;AAAAA,EAAOC,UAAAA;AAAAA,EAAUC,aAAAA;AAAAA,EAAaC,WAAAA;AAA8B,GAAG;AACrF,QAAA,CAACC,GAAMC,CAAO,IAAIT,EAAmB,CAAC,GAAGI,CAAK,CAAC,GAC/C,CAACM,GAAYC,CAAa,IAAIX,EAAS,EAAE,GACzCY,IAAWX,EAAyB,IAAI,GAExCY,IAAgBA,CAACC,MAAuC;AAC1D,QAAIA,EAAEC,QAAQ,WAAWL,EAAWM,QAAQ;AACxCF,MAAAA,EAAEG,eAAe;AACjB,YAAMC,IAAU,CAAC,GAAGV,GAAME,EAAWM,MAAM;AAC3CP,MAAAA,EAAQS,CAAO,GACfP,EAAc,EAAE,GAChBN,KAAAA,QAAAA,EAAWa;AAAAA,IAAO,WACXJ,EAAEC,QAAQ,eAAeL,MAAe,MAAMF,EAAKW,SAAS,GAAG;AAEtE,YAAMD,IAAUV,EAAKY,MAAM,GAAG,EAAE;AAChCX,MAAAA,EAAQS,CAAO,GACfb,KAAAA,QAAAA,EAAWa;AAAAA,IAAO;AAAA,EAE1B;AAGIG,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKf,WAAW,6BAA6BA,CAAS;AAAA,IAAIgB,SAASA,MAAAA;AArBpE,UAAAC;AAqB0EZ,cAAAA,IAAAA,EAASa,YAATb,gBAAAA,EAAkBc;AAAAA;AAAAA,EAAM,GAC5FlB,EAAKmB,IAAI,CAACC,GAAKC,MACZR,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMP,KAAKc;AAAAA,IAAOtB,WAAU;AAAA,EACvBqB,GAAAA,GACDN,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IACAf,WAAU;AAAA,IACVgB,SAAUT,CAAMA,MAAA;AACZA,MAAAA,EAAEgB,gBAAgB;AAClB,YAAMZ,IAAUV,EAAKuB,OAAO,CAACC,GAAGC,MAAMA,MAAMJ,CAAK;AACjDpB,MAAAA,EAAQS,CAAO,GACfb,KAAAA,QAAAA,EAAWa;AAAAA,IAAO;AAAA,EACtB,GAEII,gBAAAA,EAAAA,cAACpB,GAAI;AAAA,IAACgC,MAAK;AAAA,EAAS,CAAA,CAClB,CACJ,CACT,GACDb,gBAAAA,EAAAC,cAAA,SAAA;AAAA,IACIf,WAAU;AAAA,IACV4B,KAAKvB;AAAAA,IACLwB,MAAK;AAAA,IACLhC,OAAOM;AAAAA,IACPL,UAAWS,CAAAA,MAAMH,EAAcG,EAAEuB,OAAOjC,KAAK;AAAA,IAC7CkC,WAAWzB;AAAAA,IACXP,aAAAA;AAAAA,EAAAA,CACH,CACA;AAEb;"}