se-design 1.0.87-dev.1 → 1.0.87

package/dist/index267.js

@@ -1,55 +1,5 @@
-import { __require as E } from "./index265.js";
-import { __require as _ } from "./index266.js";
-var f, v;
-function P() {
-  if (v) return f;
-  v = 1;
-  var o = function() {
-  };
-  if (process.env.NODE_ENV !== "production") {
-    var y = E(), t = {}, d = _();
-    o = function(n) {
-      var a = "Warning: " + n;
-      typeof console < "u" && console.error(a);
-      try {
-        throw new Error(a);
-      } catch {
-      }
-    };
-  }
-  function u(n, a, i, s, c) {
-    if (process.env.NODE_ENV !== "production") {
-      for (var e in n)
-        if (d(n, e)) {
-          var r;
-          try {
-            if (typeof n[e] != "function") {
-              var h = Error(
-                (s || "React class") + ": " + i + " type `" + e + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof n[e] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`."
-              );
-              throw h.name = "Invariant Violation", h;
-            }
-            r = n[e](a, e, s, i, null, y);
-          } catch (l) {
-            r = l;
-          }
-          if (r && !(r instanceof Error) && o(
-            (s || "React class") + ": type specification of " + i + " `" + e + "` is invalid; the type checker function must return `null` or an `Error` but returned a " + typeof r + ". You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument)."
-          ), r instanceof Error && !(r.message in t)) {
-            t[r.message] = !0;
-            var p = c ? c() : "";
-            o(
-              "Failed " + i + " type: " + r.message + (p ?? "")
-            );
-          }
-        }
-    }
-  }
-  return u.resetWarningCache = function() {
-    process.env.NODE_ENV !== "production" && (t = {});
-  }, f = u, f;
-}
+var r = {};
 export {
-  P as __require
+  r as __exports
 };
 //# sourceMappingURL=index267.js.map

package/dist/index267.js.map

@@ -1 +1 @@
-{"version":3,"file":"index267.js","sources":["../node_modules/prop-types/checkPropTypes.js"],"sourcesContent":["/**\n * Copyright (c) 2013-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n'use strict';\n\nvar printWarning = function() {};\n\nif (process.env.NODE_ENV !== 'production') {\n  var ReactPropTypesSecret = require('./lib/ReactPropTypesSecret');\n  var loggedTypeFailures = {};\n  var has = require('./lib/has');\n\n  printWarning = function(text) {\n    var message = 'Warning: ' + text;\n    if (typeof console !== 'undefined') {\n      console.error(message);\n    }\n    try {\n      // --- Welcome to debugging React ---\n      // This error was thrown as a convenience so that you can use this stack\n      // to find the callsite that caused this warning to fire.\n      throw new Error(message);\n    } catch (x) { /**/ }\n  };\n}\n\n/**\n * Assert that the values match with the type specs.\n * Error messages are memorized and will only be shown once.\n *\n * @param {object} typeSpecs Map of name to a ReactPropType\n * @param {object} values Runtime values that need to be type-checked\n * @param {string} location e.g. \"prop\", \"context\", \"child context\"\n * @param {string} componentName Name of the component for error messages.\n * @param {?Function} getStack Returns the component stack.\n * @private\n */\nfunction checkPropTypes(typeSpecs, values, location, componentName, getStack) {\n  if (process.env.NODE_ENV !== 'production') {\n    for (var typeSpecName in typeSpecs) {\n      if (has(typeSpecs, typeSpecName)) {\n        var error;\n        // Prop type validation may throw. In case they do, we don't want to\n        // fail the render phase where it didn't fail before. So we log it.\n        // After these have been cleaned up, we'll let them throw.\n        try {\n          // This is intentionally an invariant that gets caught. It's the same\n          // behavior as without this statement except with a better message.\n          if (typeof typeSpecs[typeSpecName] !== 'function') {\n            var err = Error(\n              (componentName || 'React class') + ': ' + location + ' type `' + typeSpecName + '` is invalid; ' +\n              'it must be a function, usually from the `prop-types` package, but received `' + typeof typeSpecs[typeSpecName] + '`.' +\n              'This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.'\n            );\n            err.name = 'Invariant Violation';\n            throw err;\n          }\n          error = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, ReactPropTypesSecret);\n        } catch (ex) {\n          error = ex;\n        }\n        if (error && !(error instanceof Error)) {\n          printWarning(\n            (componentName || 'React class') + ': type specification of ' +\n            location + ' `' + typeSpecName + '` is invalid; the type checker ' +\n            'function must return `null` or an `Error` but returned a ' + typeof error + '. ' +\n            'You may have forgotten to pass an argument to the type checker ' +\n            'creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and ' +\n            'shape all require an argument).'\n          );\n        }\n        if (error instanceof Error && !(error.message in loggedTypeFailures)) {\n          // Only monitor this failure once because there tends to be a lot of the\n          // same error.\n          loggedTypeFailures[error.message] = true;\n\n          var stack = getStack ? getStack() : '';\n\n          printWarning(\n            'Failed ' + location + ' type: ' + error.message + (stack != null ? stack : '')\n          );\n        }\n      }\n    }\n  }\n}\n\n/**\n * Resets warning cache when testing.\n *\n * @private\n */\ncheckPropTypes.resetWarningCache = function() {\n  if (process.env.NODE_ENV !== 'production') {\n    loggedTypeFailures = {};\n  }\n}\n\nmodule.exports = checkPropTypes;\n"],"names":["printWarning","ReactPropTypesSecret","require$$0","loggedTypeFailures","has","require$$1","text","message","checkPropTypes","typeSpecs","values","location","componentName","getStack","typeSpecName","error","err","ex","stack","checkPropTypes_1"],"mappings":";;;;;;AASA,MAAIA,IAAe,WAAW;AAAA,EAAA;AAE9B,MAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,QAAIC,IAAuBC,EAAA,GACvBC,IAAqB,CAAA,GACrBC,IAAMC,EAAA;AAEV,IAAAL,IAAe,SAASM,GAAM;AAC5B,UAAIC,IAAU,cAAcD;AAC5B,MAAI,OAAO,UAAY,OACrB,QAAQ,MAAMC,CAAO;AAEvB,UAAI;AAIF,cAAM,IAAI,MAAMA,CAAO;AAAA,MAC7B,QAAgB;AAAA,MAAA;AAAA,IAChB;AAAA,EACA;AAaA,WAASC,EAAeC,GAAWC,GAAQC,GAAUC,GAAeC,GAAU;AAC5E,QAAI,QAAQ,IAAI,aAAa;AAC3B,eAASC,KAAgBL;AACvB,YAAIL,EAAIK,GAAWK,CAAY,GAAG;AAChC,cAAIC;AAIJ,cAAI;AAGF,gBAAI,OAAON,EAAUK,CAAY,KAAM,YAAY;AACjD,kBAAIE,IAAM;AAAA,iBACPJ,KAAiB,iBAAiB,OAAOD,IAAW,YAAYG,IAAe,+FACC,OAAOL,EAAUK,CAAY,IAAI;AAAA,cAEhI;AACY,oBAAAE,EAAI,OAAO,uBACLA;AAAA,YAClB;AACU,YAAAD,IAAQN,EAAUK,CAAY,EAAEJ,GAAQI,GAAcF,GAAeD,GAAU,MAAMV,CAAoB;AAAA,UACnH,SAAiBgB,GAAI;AACX,YAAAF,IAAQE;AAAA,UAClB;AAWQ,cAVIF,KAAS,EAAEA,aAAiB,UAC9Bf;AAAA,aACGY,KAAiB,iBAAiB,6BACnCD,IAAW,OAAOG,IAAe,6FAC6B,OAAOC,IAAQ;AAAA,UAIzF,GAEYA,aAAiB,SAAS,EAAEA,EAAM,WAAWZ,IAAqB;AAGpE,YAAAA,EAAmBY,EAAM,OAAO,IAAI;AAEpC,gBAAIG,IAAQL,IAAWA,EAAQ,IAAK;AAEpC,YAAAb;AAAA,cACE,YAAYW,IAAW,YAAYI,EAAM,WAAWG,KAAwB;AAAA,YACxF;AAAA,UACA;AAAA,QACA;AAAA;AAAA,EAGA;AAOA,SAAAV,EAAe,oBAAoB,WAAW;AAC5C,IAAI,QAAQ,IAAI,aAAa,iBAC3BL,IAAqB,CAAA;AAAA,EAEzB,GAEAgB,IAAiBX;;","x_google_ignoreList":[0]}
+{"version":3,"file":"index267.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/index268.js

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

package/dist/index29.js

@@ -2,7 +2,7 @@ import r, { useState as $, useMemo as j, useRef as L, useEffect as B } from "rea
 import { Icon as O } from "./index6.js";
 import { Popover as z } from "./index19.js";
 import { MenuList as H } from "./index18.js";
-import { useStableId as U } from "./index206.js";
+import { useStableId as U } from "./index205.js";
 import "./index72.js";
 import { useTabsA11y as V, getPanelId as q } from "./index73.js";
 /* empty css         */

package/dist/index30.js

@@ -1,7 +1,7 @@
 import e, { forwardRef as K } from "react";
 import { Icon as M } from "./index6.js";
 import { Button as d } from "./index4.js";
-import { useStableId as B } from "./index206.js";
+import { useStableId as B } from "./index205.js";
 import { getRegionAttributes as Q } from "./index66.js";
 import { useAccessiblePress as U } from "./index67.js";
 import "./index72.js";

package/dist/index33.js

@@ -1,5 +1,5 @@
 import e, { useRef as y } from "react";
-import { useStableId as N } from "./index206.js";
+import { useStableId as N } from "./index205.js";
 function I(a) {
   const {
     label: s,

package/dist/index35.js

@@ -1,6 +1,6 @@
 import e, { useState as h, useEffect as E } from "react";
 import { Icon as N } from "./index6.js";
-import { useStableId as $ } from "./index206.js";
+import { useStableId as $ } from "./index205.js";
 import { getRegionAttributes as I } from "./index66.js";
 import { useAccessiblePress as _ } from "./index67.js";
 import "./index72.js";

package/dist/index36.js

@@ -1,6 +1,6 @@
 import e, { useState as k, useEffect as w } from "react";
 import { Icon as x } from "./index6.js";
-import { useStableId as F } from "./index206.js";
+import { useStableId as F } from "./index205.js";
 import { getA11yNameAttributes as P } from "./index81.js";
 import { getRegionAttributes as V } from "./index66.js";
 import { useAccessiblePress as q } from "./index67.js";

package/dist/index37.js

@@ -1,77 +1,63 @@
-import a, { useState as v, useRef as T } from "react";
+import a, { useState as g, useRef as T } from "react";
 /* empty css         */
-import { Icon as R } from "./index6.js";
-import { getA11yNameAttributes as _ } from "./index81.js";
-import "./index72.js";
-import { useStableId as $ } from "./index206.js";
-function c() {
-  return c = Object.assign ? Object.assign.bind() : function(r) {
-    for (var n = 1; n < arguments.length; n++) {
-      var i = arguments[n];
-      for (var s in i) ({}).hasOwnProperty.call(i, s) && (r[s] = i[s]);
-    }
-    return r;
-  }, c.apply(null, arguments);
-}
-function K({
-  value: r,
-  onChange: n,
-  placeholder: i,
-  className: s,
-  error: m,
+import { Icon as I } from "./index6.js";
+function _({
+  value: f,
+  onChange: s,
+  placeholder: d,
+  className: h,
+  error: o,
   errorMessage: w,
-  label: u,
-  ariaLabel: y,
-  ariaLabelledBy: b,
-  automationId: E = ""
+  label: c,
+  automationId: v = "",
+  commitOnBlur: E = !1
 }) {
-  const [o, p] = v([...r]), [l, g] = v(""), d = T(null), f = $(void 0, "input-with-tags-label"), N = _({
-    ariaLabel: y,
-    ariaLabelledBy: b,
-    internalLabelId: u ? f : void 0
-  }), h = (t) => {
-    const e = o.filter((A, I) => I !== t);
-    p(e), n?.(e);
-  }, k = (t) => {
-    if (t.key === "Enter" && l.trim()) {
-      t.preventDefault();
-      const e = [...o, l.trim()];
-      p(e), g(""), n?.(e);
-    } else t.key === "Backspace" && l === "" && o.length > 0 && h(o.length - 1);
+  const [n, r] = g([...f]), [i, l] = g(""), u = T(null), m = (t) => {
+    const e = n.filter((R, y) => y !== t);
+    r(e), s?.(e);
+  }, p = () => {
+    const t = i.trim();
+    if (!t) return;
+    const e = [...n, t];
+    r(e), l(""), s?.(e);
+  }, N = (t) => {
+    t.key === "Enter" && i.trim() ? (t.preventDefault(), p()) : t.key === "Backspace" && i === "" && n.length > 0 && m(n.length - 1);
+  }, k = () => {
+    E && p();
   };
   return /* @__PURE__ */ a.createElement("div", {
     className: "input-with-tags-main-container",
-    "data-automation-id": E
-  }, u && /* @__PURE__ */ a.createElement("div", {
-    id: f,
+    "data-automation-id": v
+  }, c && /* @__PURE__ */ a.createElement("div", {
     className: "label-container"
-  }, u), /* @__PURE__ */ a.createElement("div", {
-    className: `input-with-tags-container ${m ? "input-with-tags-error" : ""} ${s}`,
-    onClick: () => d.current?.focus()
-  }, o.map((t, e) => /* @__PURE__ */ a.createElement("span", {
+  }, c), /* @__PURE__ */ a.createElement("div", {
+    className: `input-with-tags-container ${o ? "input-with-tags-error" : ""} ${h}`,
+    onClick: () => u.current?.focus()
+  }, n.map((t, e) => /* @__PURE__ */ a.createElement("span", {
     key: e,
     className: "tag-in-inputwithtags",
     "data-automation-id": `input-tag-${e}`
-  }, t, /* @__PURE__ */ a.createElement(R, {
+  }, t, /* @__PURE__ */ a.createElement(I, {
     name: "close",
     className: "close-icon-in-inputwithtags",
     ariaLabel: `Remove tag ${t}`,
-    onClick: () => h(e),
+    onClick: () => m(e),
     shouldStopPropagation: !0
-  }))), /* @__PURE__ */ a.createElement("input", c({
+  }))), /* @__PURE__ */ a.createElement("input", {
     className: "input-with-tags-input",
-    ref: d,
+    ref: u,
     type: "text",
-    value: l,
-    onChange: (t) => g(t.target.value),
-    onKeyDown: k,
-    placeholder: i,
+    value: i,
+    onChange: (t) => l(t.target.value),
+    onKeyDown: N,
+    onBlur: k,
+    placeholder: d,
     "data-automation-id": "input-with-tags-input-field"
-  }, N))), m && /* @__PURE__ */ a.createElement("div", {
+  })), o && /* @__PURE__ */ a.createElement("div", {
     className: "error-message"
   }, w));
 }
 export {
-  K as InputWithTags
+  _ as InputWithTags
 };
 //# sourceMappingURL=index37.js.map

package/dist/index37.js.map

@@ -1 +1 @@
-{"version":3,"file":"index37.js","sources":["../src/components/InputWithTags/index.tsx"],"sourcesContent":["import React, { useState, KeyboardEvent, useRef } from \"react\";\nimport './styles.scss';\nimport { Icon } from '../Icon';\nimport { getA11yNameAttributes } from '../../utils/a11y';\nimport { useStableId } from '../../utils/useStableId';\n\nexport interface InputWithTagsProps {\n    value: string[];\n    onChange?: (tags: string[]) => void;\n    placeholder?: string;\n    className?: string;\n    error?: boolean;\n    errorMessage?: string;\n    label?: string;\n    ariaLabel?: string;\n    ariaLabelledBy?: string;\n    automationId?: string;\n}\n\nexport function InputWithTags({\n    value,\n    onChange,\n    placeholder,\n    className,\n    error,\n    errorMessage,\n    label,\n    ariaLabel,\n    ariaLabelledBy,\n    automationId = ''\n}: InputWithTagsProps) {\n    const [tags, setTags] = useState<string[]>([...value]);\n    const [inputValue, setInputValue] = useState('');\n    const inputRef = useRef<HTMLInputElement>(null);\n    const labelId = useStableId(undefined, 'input-with-tags-label');\n    const inputA11yProps = getA11yNameAttributes({\n      ariaLabel,\n      ariaLabelledBy,\n      internalLabelId: label ? labelId : undefined\n    });\n\n    const removeTag = (indexToRemove: number) => {\n        const newTags = tags.filter((_, i) => i !== indexToRemove);\n        setTags(newTags);\n        onChange?.(newTags);\n    };\n\n    const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n        if (e.key === 'Enter' && inputValue.trim()) {\n            e.preventDefault();\n            const newTags = [...tags, inputValue.trim()];\n            setTags(newTags);\n            setInputValue(\"\");\n            onChange?.(newTags);\n        } else if (e.key === 'Backspace' && inputValue === \"\" && tags.length > 0) {\n            removeTag(tags.length - 1);\n        }\n    };\n\n    return (\n        <div className=\"input-with-tags-main-container\" data-automation-id={automationId}>\n            {label && <div id={labelId} className=\"label-container\">{label}</div>}\n            <div \n                className={`input-with-tags-container ${error ? 'input-with-tags-error' : ''} ${className}`} \n                onClick={() => inputRef.current?.focus()}\n            >\n                {tags.map((tag, index) => (\n                    <span key={index} className=\"tag-in-inputwithtags\" data-automation-id={`input-tag-${index}`}>\n                        {tag} \n                        <Icon\n                            name=\"close\"\n                            className=\"close-icon-in-inputwithtags\"\n                            ariaLabel={`Remove tag ${tag}`}\n                            onClick={() => removeTag(index)}\n                            shouldStopPropagation\n                        />\n                    </span>\n                ))}\n                <input\n                    className=\"input-with-tags-input\"\n                    ref={inputRef}\n                    type=\"text\"\n                    value={inputValue}\n                    onChange={(e) => setInputValue(e.target.value)}\n                    onKeyDown={handleKeyDown}\n                    placeholder={placeholder}\n                    data-automation-id=\"input-with-tags-input-field\"\n                    {...inputA11yProps}\n                />\n            </div>\n            {error && <div className=\"error-message\">{errorMessage}</div>}\n        </div>\n    );\n}"],"names":["InputWithTags","value","onChange","placeholder","className","error","errorMessage","label","ariaLabel","ariaLabelledBy","automationId","tags","setTags","useState","inputValue","setInputValue","inputRef","useRef","labelId","useStableId","undefined","inputA11yProps","getA11yNameAttributes","internalLabelId","removeTag","indexToRemove","newTags","filter","_","i","handleKeyDown","e","key","trim","preventDefault","length","React","createElement","id","onClick","current","focus","map","tag","index","Icon","name","shouldStopPropagation","_extends","ref","type","target","onKeyDown"],"mappings":";;;;;;;;;;;;;;;AAmBO,SAASA,EAAc;AAAA,EAC1BC,OAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,gBAAAA;AAAAA,EACAC,cAAAA,IAAe;AACC,GAAG;AACnB,QAAM,CAACC,GAAMC,CAAO,IAAIC,EAAmB,CAAC,GAAGZ,CAAK,CAAC,GAC/C,CAACa,GAAYC,CAAa,IAAIF,EAAS,EAAE,GACzCG,IAAWC,EAAyB,IAAI,GACxCC,IAAUC,EAAYC,QAAW,uBAAuB,GACxDC,IAAiBC,EAAsB;AAAA,IAC3Cd,WAAAA;AAAAA,IACAC,gBAAAA;AAAAA,IACAc,iBAAiBhB,IAAQW,IAAUE;AAAAA,EAAAA,CACpC,GAEKI,IAAYA,CAACC,MAA0B;AACzC,UAAMC,IAAUf,EAAKgB,OAAO,CAACC,GAAGC,MAAMA,MAAMJ,CAAa;AACzDb,IAAAA,EAAQc,CAAO,GACfxB,IAAWwB,CAAO;AAAA,EACtB,GAEMI,IAAgBA,CAACC,MAAuC;AAC1D,QAAIA,EAAEC,QAAQ,WAAWlB,EAAWmB,QAAQ;AACxCF,MAAAA,EAAEG,eAAAA;AACF,YAAMR,IAAU,CAAC,GAAGf,GAAMG,EAAWmB,MAAM;AAC3CrB,MAAAA,EAAQc,CAAO,GACfX,EAAc,EAAE,GAChBb,IAAWwB,CAAO;AAAA,IACtB,MAAA,CAAWK,EAAEC,QAAQ,eAAelB,MAAe,MAAMH,EAAKwB,SAAS,KACnEX,EAAUb,EAAKwB,SAAS,CAAC;AAAA,EAEjC;AAEA,SACIC,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKjC,WAAU;AAAA,IAAiC,sBAAoBM;AAAAA,EAAAA,GAC/DH,KAAS6B,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,IAAIpB;AAAAA,IAASd,WAAU;AAAA,EAAA,GAAmBG,CAAW,GACpE6B,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACIjC,WAAW,6BAA6BC,IAAQ,0BAA0B,EAAE,IAAID,CAAS;AAAA,IACzFmC,SAASA,MAAMvB,EAASwB,SAASC,MAAAA;AAAAA,EAAM,GAEtC9B,EAAK+B,IAAI,CAACC,GAAKC,MACZR,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAML,KAAKY;AAAAA,IAAOxC,WAAU;AAAA,IAAuB,sBAAoB,aAAawC,CAAK;AAAA,EAAA,GACpFD,GACDP,gBAAAA,EAAAC,cAACQ,GAAI;AAAA,IACDC,MAAK;AAAA,IACL1C,WAAU;AAAA,IACVI,WAAW,cAAcmC,CAAG;AAAA,IAC5BJ,SAASA,MAAMf,EAAUoB,CAAK;AAAA,IAC9BG,uBAAqB;AAAA,EAAA,CACxB,CACC,CACT,GACDX,gBAAAA,EAAAC,uBAAAW,EAAA;AAAA,IACI5C,WAAU;AAAA,IACV6C,KAAKjC;AAAAA,IACLkC,MAAK;AAAA,IACLjD,OAAOa;AAAAA,IACPZ,UAAW6B,CAAAA,MAAMhB,EAAcgB,EAAEoB,OAAOlD,KAAK;AAAA,IAC7CmD,WAAWtB;AAAAA,IACX3B,aAAAA;AAAAA,IACA,sBAAmB;AAAA,EAAA,GACfkB,CAAc,CACrB,CACA,GACJhB,KAAS+B,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKjC,WAAU;AAAA,EAAA,GAAiBE,CAAkB,CAC3D;AAEb;"}
+{"version":3,"file":"index37.js","sources":["../src/components/InputWithTags/index.tsx"],"sourcesContent":["import React, { useState, KeyboardEvent, useRef } from \"react\";\nimport './styles.scss';\nimport { Icon } from '../Icon';\n\nexport interface InputWithTagsProps {\n    value: string[];\n    onChange?: (tags: string[]) => void;\n    placeholder?: string;\n    className?: string;\n    error?: boolean;\n    errorMessage?: string;\n    label?: string;\n    automationId?: string;\n    commitOnBlur?: boolean;\n}\n\nexport function InputWithTags({\n    value,\n    onChange,\n    placeholder,\n    className,\n    error,\n    errorMessage,\n    label,\n    automationId = '',\n    commitOnBlur = false\n}: InputWithTagsProps) {\n    const [tags, setTags] = useState<string[]>([...value]);\n    const [inputValue, setInputValue] = useState('');\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    const removeTag = (indexToRemove: number) => {\n        const newTags = tags.filter((_, i) => i !== indexToRemove);\n        setTags(newTags);\n        onChange?.(newTags);\n    };\n\n    const commitInput = () => {\n        const trimmed = inputValue.trim();\n        if (!trimmed) return;\n        const newTags = [...tags, trimmed];\n        setTags(newTags);\n        setInputValue(\"\");\n        onChange?.(newTags);\n    };\n\n    const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n        if (e.key === 'Enter' && inputValue.trim()) {\n            e.preventDefault();\n            commitInput();\n        } else if (e.key === 'Backspace' && inputValue === \"\" && tags.length > 0) {\n            removeTag(tags.length - 1);\n        }\n    };\n\n    // When enabled, commit a half-typed tag when focus leaves the input so users\n    // don't lose the value by tabbing/clicking away without pressing Enter.\n    const handleBlur = () => {\n        if (commitOnBlur) commitInput();\n    };\n\n    return (\n        <div className=\"input-with-tags-main-container\" data-automation-id={automationId}>\n            {label && <div className=\"label-container\">{label}</div>}\n            <div \n                className={`input-with-tags-container ${error ? 'input-with-tags-error' : ''} ${className}`} \n                onClick={() => inputRef.current?.focus()}\n            >\n                {tags.map((tag, index) => (\n                    <span key={index} className=\"tag-in-inputwithtags\" data-automation-id={`input-tag-${index}`}>\n                        {tag} \n                        <Icon\n                            name=\"close\"\n                            className=\"close-icon-in-inputwithtags\"\n                            ariaLabel={`Remove tag ${tag}`}\n                            onClick={() => removeTag(index)}\n                            shouldStopPropagation\n                        />\n                    </span>\n                ))}\n                <input\n                    className=\"input-with-tags-input\"\n                    ref={inputRef}\n                    type=\"text\"\n                    value={inputValue}\n                    onChange={(e) => setInputValue(e.target.value)}\n                    onKeyDown={handleKeyDown}\n                    onBlur={handleBlur}\n                    placeholder={placeholder}\n                    data-automation-id=\"input-with-tags-input-field\"\n                />\n            </div>\n            {error && <div className=\"error-message\">{errorMessage}</div>}\n        </div>\n    );\n}"],"names":["React__default","useState","useRef","Icon","InputWithTags","value","onChange","placeholder","className","error","errorMessage","label","automationId","commitOnBlur","tags","setTags","inputValue","setInputValue","inputRef","removeTag","indexToRemove","newTags","filter","_","i","commitInput","trimmed","trim","handleKeyDown","e","key","preventDefault","length","handleBlur","React","createElement","onClick","current","focus","map","tag","index","name","ariaLabel","shouldStopPropagation","ref","type","target","onKeyDown","onBlur"],"mappings":"AAgBO,OAAAA,KAAA,YAAAC,GAAA,UAAAC,SAAA;AAAA,OAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,SAASC,EAAc;AAAA,EAC1BC,OAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,cAAAA,IAAe;AAAA,EACfC,cAAAA,IAAe;AACC,GAAG;AACnB,QAAM,CAACC,GAAMC,CAAO,IAAId,EAAmB,CAAC,GAAGI,CAAK,CAAC,GAC/C,CAACW,GAAYC,CAAa,IAAIhB,EAAS,EAAE,GACzCiB,IAAWhB,EAAyB,IAAI,GAExCiB,IAAYA,CAACC,MAA0B;AACzC,UAAMC,IAAUP,EAAKQ,OAAO,CAACC,GAAGC,MAAMA,MAAMJ,CAAa;AACzDL,IAAAA,EAAQM,CAAO,GACff,IAAWe,CAAO;AAAA,EACtB,GAEMI,IAAcA,MAAM;AACtB,UAAMC,IAAUV,EAAWW,KAAAA;AAC3B,QAAI,CAACD,EAAS;AACd,UAAML,IAAU,CAAC,GAAGP,GAAMY,CAAO;AACjCX,IAAAA,EAAQM,CAAO,GACfJ,EAAc,EAAE,GAChBX,IAAWe,CAAO;AAAA,EACtB,GAEMO,IAAgBA,CAACC,MAAuC;AAC1D,IAAIA,EAAEC,QAAQ,WAAWd,EAAWW,UAChCE,EAAEE,eAAAA,GACFN,EAAAA,KACOI,EAAEC,QAAQ,eAAed,MAAe,MAAMF,EAAKkB,SAAS,KACnEb,EAAUL,EAAKkB,SAAS,CAAC;AAAA,EAEjC,GAIMC,IAAaA,MAAM;AACrB,IAAIpB,KAAcY,EAAAA;AAAAA,EACtB;AAEA,SACIS,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAK3B,WAAU;AAAA,IAAiC,sBAAoBI;AAAAA,EAAAA,GAC/DD,KAASuB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAK3B,WAAU;AAAA,EAAA,GAAmBG,CAAW,GACvDuB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACI3B,WAAW,6BAA6BC,IAAQ,0BAA0B,EAAE,IAAID,CAAS;AAAA,IACzF4B,SAASA,MAAMlB,EAASmB,SAASC,MAAAA;AAAAA,EAAM,GAEtCxB,EAAKyB,IAAI,CAACC,GAAKC,MACZP,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAML,KAAKW;AAAAA,IAAOjC,WAAU;AAAA,IAAuB,sBAAoB,aAAaiC,CAAK;AAAA,EAAA,GACpFD,GACDN,gBAAAA,EAAAC,cAAChC,GAAI;AAAA,IACDuC,MAAK;AAAA,IACLlC,WAAU;AAAA,IACVmC,WAAW,cAAcH,CAAG;AAAA,IAC5BJ,SAASA,MAAMjB,EAAUsB,CAAK;AAAA,IAC9BG,uBAAqB;AAAA,EAAA,CACxB,CACC,CACT,GACDV,gBAAAA,EAAAC,cAAA,SAAA;AAAA,IACI3B,WAAU;AAAA,IACVqC,KAAK3B;AAAAA,IACL4B,MAAK;AAAA,IACLzC,OAAOW;AAAAA,IACPV,UAAWuB,CAAAA,MAAMZ,EAAcY,EAAEkB,OAAO1C,KAAK;AAAA,IAC7C2C,WAAWpB;AAAAA,IACXqB,QAAQhB;AAAAA,IACR1B,aAAAA;AAAAA,IACA,sBAAmB;AAAA,EAAA,CACtB,CACA,GACJE,KAASyB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAK3B,WAAU;AAAA,EAAA,GAAiBE,CAAkB,CAC3D;AAEb;"}