se-design 1.0.90-dev.0 → 1.0.91-r-dev.1

package/dist/index37.js

@@ -1,82 +1,103 @@
-import a, { useState as w, useRef as $ } from "react";
-/* empty css         */
-import { Icon as A } from "./index6.js";
-import { getA11yNameAttributes as B } from "./index81.js";
-import "./index72.js";
-import { useStableId as D } 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]);
+import e, { useState as k, useEffect as w } from "react";
+import { Icon as x } from "./index6.js";
+import { useStableId as F } from "./index211.js";
+import { getA11yNameAttributes as P } from "./index86.js";
+import { getRegionAttributes as V } from "./index71.js";
+import { useAccessiblePress as q } from "./index72.js";
+import "./index77.js";
+function a() {
+  return a = Object.assign ? Object.assign.bind() : function(i) {
+    for (var o = 1; o < arguments.length; o++) {
+      var s = arguments[o];
+      for (var n in s) ({}).hasOwnProperty.call(s, n) && (i[n] = s[n]);
     }
-    return r;
-  }, c.apply(null, arguments);
-}
-function V({
-  value: r,
-  onChange: n,
-  placeholder: i,
-  className: s,
-  error: m,
-  errorMessage: y,
-  label: u,
-  ariaLabel: b,
-  ariaLabelledBy: E,
-  automationId: N = "",
-  commitOnBlur: I = !1
-}) {
-  const [o, p] = w([...r]), [l, g] = w(""), d = $(null), f = D(void 0, "input-with-tags-label"), k = B({
-    ariaLabel: b,
-    ariaLabelledBy: E,
-    internalLabelId: u ? f : void 0
-  }), h = (t) => {
-    const e = o.filter((O, _) => _ !== t);
-    p(e), n?.(e);
-  }, v = () => {
-    const t = l.trim();
-    if (!t) return;
-    const e = [...o, t];
-    p(e), g(""), n?.(e);
-  }, T = (t) => {
-    t.key === "Enter" && l.trim() ? (t.preventDefault(), v()) : t.key === "Backspace" && l === "" && o.length > 0 && h(o.length - 1);
-  }, R = () => {
-    I && v();
-  };
-  return /* @__PURE__ */ a.createElement("div", {
-    className: "input-with-tags-main-container",
-    "data-automation-id": N
-  }, u && /* @__PURE__ */ a.createElement("div", {
-    id: f,
-    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", {
-    key: e,
-    className: "tag-in-inputwithtags",
-    "data-automation-id": `input-tag-${e}`
-  }, t, /* @__PURE__ */ a.createElement(A, {
-    name: "close",
-    className: "close-icon-in-inputwithtags",
-    ariaLabel: `Remove tag ${t}`,
-    onClick: () => h(e),
-    shouldStopPropagation: !0
-  }))), /* @__PURE__ */ a.createElement("input", c({
-    className: "input-with-tags-input",
-    ref: d,
-    type: "text",
-    value: l,
-    onChange: (t) => g(t.target.value),
-    onKeyDown: T,
-    onBlur: R,
-    placeholder: i,
-    "data-automation-id": "input-with-tags-input-field"
-  }, k))), m && /* @__PURE__ */ a.createElement("div", {
-    className: "error-message"
-  }, y));
+    return i;
+  }, a.apply(null, arguments);
 }
+const L = ({
+  renderAccordionContents: i,
+  renderAccordionSrcElement: o,
+  renderControls: s,
+  defaultOpen: n,
+  expanded: f,
+  onChange: E,
+  className: N = "",
+  arrowPosition: l = "left",
+  contentClassName: $ = "",
+  disabled: r = !1,
+  automationId: h = "",
+  id: A,
+  ariaLabel: I,
+  titleTag: C
+}) => {
+  const [O, u] = k(!1);
+  w(() => {
+    u(n || !1);
+  }, [n]);
+  const d = f !== void 0, t = d ? f : O, g = () => {
+    d ? E?.(!t) : u(!t);
+  }, c = F(A, "custom-accordion"), m = `${c}-content`, {
+    pressProps: y,
+    role: _,
+    tabIndex: R
+  } = q({
+    onClick: g,
+    isNative: !1,
+    disabled: r
+  }), S = V({
+    titleId: c,
+    isFocusable: !1
+  }), T = "group-focus-visible:[outline:var(--focus-width)_solid_var(--focus-color)] group-focus-visible:[outline-offset:var(--focus-offset)] group-focus-visible:p-[2px]", p = () => r ? "" : l === "left" ? t ? "rotate-90" : "" : t ? "rotate-180" : "", v = C, b = /* @__PURE__ */ e.createElement("div", {
+    className: `se-design-accordion-trigger-content flex items-center rounded ${T}`
+  }, l === "left" && /* @__PURE__ */ e.createElement("div", {
+    className: `se-design-accordion-icon transform transition-transform duration-300 ${p()} ${r ? "opacity-30 pointer-events-none" : ""}`
+  }, /* @__PURE__ */ e.createElement(x, {
+    name: "rightSide"
+  })), /* @__PURE__ */ e.createElement("div", {
+    className: "se-design-accordion-elements"
+  }, /* @__PURE__ */ e.createElement("div", {
+    id: c,
+    className: "se-design-accordion-src-element title"
+  }, o({
+    isOpen: t
+  }))), l === "right" && /* @__PURE__ */ e.createElement("div", {
+    className: `se-design-accordion-icon transform transition-transform duration-300 ${p()} ${r ? "opacity-30 pointer-events-none" : ""}`
+  }, /* @__PURE__ */ e.createElement(x, {
+    name: "chevron"
+  }))), j = v ? /* @__PURE__ */ e.createElement(v, {
+    className: "flex-1"
+  }, /* @__PURE__ */ e.createElement("button", {
+    id: c + "-btn",
+    onClick: g,
+    "aria-expanded": t,
+    "aria-controls": m,
+    disabled: r,
+    className: "flex items-center flex-1 w-full cursor-pointer group focus-visible:!outline-none bg-transparent border-0 p-0 text-left"
+  }, b)) : /* @__PURE__ */ e.createElement("div", a({}, y, P({
+    ariaLabel: I
+  }), {
+    role: _,
+    tabIndex: R,
+    "aria-expanded": t,
+    "aria-controls": m,
+    className: "flex items-center flex-1 cursor-pointer group focus-visible:outline-none"
+  }), b);
+  return /* @__PURE__ */ e.createElement("div", {
+    className: `se-design-accordion ${N}`,
+    "data-automation-id": h
+  }, /* @__PURE__ */ e.createElement("div", {
+    className: "flex flex-col"
+  }, /* @__PURE__ */ e.createElement("div", {
+    className: "se-design-accordion-src flex items-center"
+  }, j, s?.()), t && /* @__PURE__ */ e.createElement("div", a({
+    id: m
+  }, S, {
+    className: `se-design-accordion-content transition-all duration-300 mt-1 ${$}`
+  }), i({
+    isOpen: t
+  }))));
+};
 export {
-  V as InputWithTags
+  L as CustomAccordion
 };
 //# 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    commitOnBlur?: boolean;\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    commitOnBlur = false\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 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 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                    onBlur={handleBlur}\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","commitOnBlur","tags","setTags","useState","inputValue","setInputValue","inputRef","useRef","labelId","useStableId","undefined","inputA11yProps","getA11yNameAttributes","internalLabelId","removeTag","indexToRemove","newTags","filter","_","i","commitInput","trimmed","trim","handleKeyDown","e","key","preventDefault","length","handleBlur","React","createElement","id","onClick","current","focus","map","tag","index","Icon","name","shouldStopPropagation","_extends","ref","type","target","onKeyDown","onBlur"],"mappings":"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"}
+{"version":3,"file":"index37.js","sources":["../src/components/CustomAccordion/index.tsx"],"sourcesContent":["import React, { FC, useEffect, useState } from 'react';\nimport { Icon } from '../Icon';\nimport { useStableId } from '../../utils/useStableId';\nimport { useAccessiblePress, getA11yNameAttributes } from '../../utils/a11y';\nimport { getRegionAttributes } from '../../utils/a11y/regionAttributes';\n\nexport interface CustomAccordionProps {\n  renderAccordionContents: (props: { isOpen: boolean }) => React.ReactNode;\n  renderAccordionSrcElement: (props: { isOpen: boolean }) => React.ReactNode;\n  renderControls?: () => React.ReactNode;\n  defaultOpen?: boolean;\n  expanded?: boolean;\n  onChange?: (isOpen: boolean) => void;\n  className?: string;\n  arrowPosition?: 'left' | 'right';\n  contentClassName?: string;\n  disabled?: boolean;\n  automationId?: string;\n  id?: string;\n  ariaLabel?: string;\n  titleTag?: string;\n}\n\nexport const CustomAccordion: FC<CustomAccordionProps> = ({\n  renderAccordionContents,\n  renderAccordionSrcElement,\n  renderControls,\n  defaultOpen,\n  expanded,\n  onChange,\n  className = '',\n  arrowPosition = 'left',\n  contentClassName = '',\n  disabled = false,\n  automationId = '',\n  id,\n  ariaLabel,\n  titleTag\n}) => {\n  const [isOpen, setIsOpen] = useState(false);\n  useEffect(() => {\n    setIsOpen(defaultOpen || false);\n  }, [defaultOpen]);\n\n  const isControlled = expanded !== undefined;\n  const open = isControlled ? expanded : isOpen;\n\n  const handleToggle = () => {\n    if (isControlled) {\n      onChange?.(!open);\n    } else {\n      setIsOpen(!open);\n    }\n  };\n\n  // Generate stable IDs for ARIA relationships\n  const triggerId = useStableId(id, 'custom-accordion');\n  const contentId = `${triggerId}-content`;\n\n  // Use accessible press hook for keyboard + mouse handling\n  const { pressProps, role, tabIndex } = useAccessiblePress({\n    onClick: handleToggle,\n    isNative: false,\n    disabled\n  });\n\n  // Get region attributes for content panel\n  const regionAttributes = getRegionAttributes({\n    titleId: triggerId,\n    isFocusable: false\n  });\n\n  const focusVisibleClasses = 'group-focus-visible:[outline:var(--focus-width)_solid_var(--focus-color)] group-focus-visible:[outline-offset:var(--focus-offset)] group-focus-visible:p-[2px]';\n\n  const getArrowRotation = () => {\n    if (disabled) {\n      return '';\n    }\n    if (arrowPosition === 'left') {\n      return open ? 'rotate-90' : '';\n    }\n    return open ? 'rotate-180' : '';\n  };\n\n  const TitleTag = titleTag as React.ElementType | undefined;\n\n  const triggerContent = (\n    <div className={`se-design-accordion-trigger-content flex items-center rounded ${focusVisibleClasses}`}>\n      {arrowPosition === 'left' && (\n        <div className={`se-design-accordion-icon transform transition-transform duration-300 ${getArrowRotation()} ${\n          disabled ? 'opacity-30 pointer-events-none' : ''\n        }`}>\n          <Icon name=\"rightSide\" />\n        </div>\n      )}\n      <div className=\"se-design-accordion-elements\">\n        <div id={triggerId} className=\"se-design-accordion-src-element title\">{renderAccordionSrcElement({ isOpen: open })}</div>\n      </div>\n      {arrowPosition === 'right' && (\n        <div className={`se-design-accordion-icon transform transition-transform duration-300 ${getArrowRotation()} ${\n          disabled ? 'opacity-30 pointer-events-none' : ''\n        }`}>\n          <Icon name=\"chevron\" />\n        </div>\n      )}\n    </div>\n  );\n\n  const trigger = TitleTag ? (\n    <TitleTag className=\"flex-1\">\n      <button\n        id={triggerId + '-btn'}\n        onClick={handleToggle}\n        aria-expanded={open}\n        aria-controls={contentId}\n        disabled={disabled}\n        className=\"flex items-center flex-1 w-full cursor-pointer group focus-visible:!outline-none bg-transparent border-0 p-0 text-left\"\n      >\n        {triggerContent}\n      </button>\n    </TitleTag>\n  ) : (\n    <div\n      {...pressProps}\n      {...getA11yNameAttributes({ ariaLabel })}\n      role={role}\n      tabIndex={tabIndex}\n      aria-expanded={open}\n      aria-controls={contentId}\n      className=\"flex items-center flex-1 cursor-pointer group focus-visible:outline-none\"\n    >\n      {triggerContent}\n    </div>\n  );\n\n  return (\n    <div className={`se-design-accordion ${className}`} data-automation-id={automationId}>\n      <div className=\"flex flex-col\">\n        <div className=\"se-design-accordion-src flex items-center\">\n          {trigger}\n          {renderControls?.()}\n        </div>\n        {open && (\n          <div id={contentId} {...regionAttributes} className={`se-design-accordion-content transition-all duration-300 mt-1 ${contentClassName}`}>\n            {renderAccordionContents({ isOpen: open })}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["CustomAccordion","renderAccordionContents","renderAccordionSrcElement","renderControls","defaultOpen","expanded","onChange","className","arrowPosition","contentClassName","disabled","automationId","id","ariaLabel","titleTag","isOpen","setIsOpen","useState","useEffect","isControlled","undefined","open","handleToggle","triggerId","useStableId","contentId","pressProps","role","tabIndex","useAccessiblePress","onClick","isNative","regionAttributes","getRegionAttributes","titleId","isFocusable","focusVisibleClasses","getArrowRotation","TitleTag","triggerContent","React","createElement","Icon","name","trigger","_extends","getA11yNameAttributes"],"mappings":"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"}

package/dist/index38.js

@@ -1,318 +1,82 @@
-import o, { forwardRef as Ce, useState as R, useRef as M, useCallback as U, useEffect as W, useImperativeHandle as De } from "react";
-import { Popover as $e } from "./index19.js";
-import { Icon as Te } from "./index6.js";
-import { Checkbox as Ie } from "./index23.js";
-import { Button as ee } from "./index4.js";
-import { getA11yNameAttributes as Oe } from "./index81.js";
-import "./index72.js";
-import { useCombobox as Ae } from "./index68.js";
-import { useStableId as te } from "./index206.js";
-import { announce as Re } from "./index75.js";
+import a, { useState as w, useRef as $ } from "react";
 /* empty css         */
-function d() {
-  return d = Object.assign ? Object.assign.bind() : function(v) {
-    for (var i = 1; i < arguments.length; i++) {
-      var E = arguments[i];
-      for (var k in E) ({}).hasOwnProperty.call(E, k) && (v[k] = E[k]);
+import { Icon as A } from "./index6.js";
+import { getA11yNameAttributes as B } from "./index86.js";
+import "./index77.js";
+import { useStableId as D } from "./index211.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 v;
-  }, d.apply(null, arguments);
+    return r;
+  }, c.apply(null, arguments);
 }
-const Ge = /* @__PURE__ */ Ce(({
-  value: v,
-  onChange: i,
-  placeholder: E = "Type to search or add custom tags...",
-  className: k = "",
-  options: g = [],
-  renderOption: x,
-  label: D,
-  ariaLabel: ne,
-  ariaLabelledBy: oe,
-  ariaDescribedBy: le,
-  automationId: c = "",
-  noOptionsMessage: L = "No options found",
-  allowCustomTags: j = !0,
-  disabled: l = !1,
-  type: H = "select",
-  showInput: z = !0,
-  displayTagBy: B = "label",
-  isWithPortal: ae = !1
-}, re) => {
-  const G = (e) => e.map((t) => {
-    const n = g.find((s) => s.value === t);
-    return n ? {
-      label: n.label,
-      value: n.value
-    } : {
-      label: t,
-      value: t
-    };
-  }), [a, f] = R(() => G(v || [])), [r, y] = R(""), [K, se] = R(g), [u, p] = R(!1), ie = M(null), $ = M(null), T = M(!1), S = H === "multi-select-without-cta", m = H === "multi-select" || S, ce = te(c, "dropdown-input-tags-listbox"), q = te(c ? `${c}-label` : void 0, "dropdown-input-tags-label"), I = U((e) => {
-    if (l) return;
-    const t = [...a];
-    t.some((n) => n.value === e.value) || (t.push({
-      label: e.label,
-      value: e.value
-    }), f(t), i?.(t.map((n) => n.value))), y(""), p(!1);
-  }, [l, a, i]), V = U((e, t) => {
-    let n = [];
-    e ? n = [...a, {
-      label: t.label,
-      value: t.value
-    }] : n = a.filter((s) => s.value !== t.value), f(n), y(""), S && (T.current = !0, i?.(n.map((s) => s.value)));
-  }, [a, S, i]), O = "__add_custom_tag__", J = "__no_results__", ue = {
-    id: J,
-    label: L,
-    value: J,
-    __noResults: !0
-  }, pe = (e) => !!e?.__noResults, Q = U((e) => {
-    if (!l) {
-      if (e.value === O) {
-        const t = r.trim();
-        if (!t) return;
-        const n = [...a];
-        n.some((s) => s.value === t) || (n.push({
-          label: t,
-          value: t
-        }), f(n), i?.(n.map((s) => s.value))), y(""), p(!1);
-        return;
-      }
-      if (m) {
-        const t = a.some((n) => n.value === e.value);
-        V(!t, e);
-      } else
-        I(e);
-    }
-  }, [l, m, a, r, i, V, I]), w = K.length > 0 ? K : j && r.trim() ? [{
-    id: O,
-    label: `Add "${r.trim()}"`,
-    value: O
-  }] : [], X = w.length === 0 && u ? [ue] : w, {
-    containerProps: me,
-    inputProps: Y,
-    listboxProps: de,
-    getOptionProps: N,
-    highlightedIndex: h,
-    setHighlightedIndex: b,
-    isKeyboardFocused: Z
-  } = Ae({
-    items: X,
-    isOpen: u,
-    onOpenChange: p,
-    onSelect: Q,
-    listboxId: ce,
-    hasItems: X.length > 0,
-    keepHighlightOnSelect: m,
-    closeOnTab: H !== "multi-select",
-    isItemDisabled: pe
-  }), _ = (e) => e ? `highlighted${Z ? " keyboard-highlight" : ""}` : "";
-  W(() => {
-    if (T.current) {
-      T.current = !1;
-      return;
-    }
-    f(G(v || []));
-  }, [v, g, u]), W(() => {
-    const e = g.filter((t) => t.label.toLowerCase().includes(r.toLowerCase()) || t.value.toLowerCase().includes(r.toLowerCase()));
-    se(e);
-  }, [r, g]), W(() => {
-    u && w.length === 0 && r.trim() && h === -1 && Re(L, {
-      assertiveness: "polite",
-      batchId: "dropdown-input-tags-empty-state",
-      delay: 300
-    });
-  }, [w.length, u, r, h]);
-  const fe = (e) => {
-    if (l) return;
-    const t = a.filter((n, s) => s !== e);
-    f(t), (!m || S || m && !u) && i?.(t.map((n) => n.value));
-  }, ge = (e) => {
-    if (!l) {
-      if (e.key === "Backspace" && r === "" && a.length > 0) {
-        e.preventDefault();
-        const t = a.slice(0, -1);
-        f(t), i?.(t.map((n) => n.value));
-        return;
-      }
-      if (e.key === "Enter" && r.trim() && K.length === 0 && j) {
-        e.preventDefault();
-        const t = [...a];
-        t.some((n) => n.value === r.trim()) || (t.push({
-          label: r.trim(),
-          value: r.trim()
-        }), f(t), i?.(t.map((n) => n.value))), y(""), b(-1), p(!1);
-        return;
-      }
-      Y.onKeyDown(e);
-    }
-  }, he = (e) => {
-    if (l) return;
-    const t = e.target.value;
-    y(t), b(-1), t.trim() && !u && p(!0);
-  }, ve = () => {
-    l || (r.trim() || g.length > 0) && p(!0);
-  }, we = (e) => {
-    l || (e.stopPropagation(), $.current?.focus(), !u && (r.trim() || g.length > 0) && p(!0));
-  }, be = (e) => {
-    if (l) {
-      e.preventDefault(), e.stopPropagation();
-      return;
-    }
-    e.target.closest(".input-with-tags-container") && e.stopPropagation();
-  }, Ee = () => {
-    l || p(!u);
+function V({
+  value: r,
+  onChange: n,
+  placeholder: i,
+  className: s,
+  error: m,
+  errorMessage: y,
+  label: u,
+  ariaLabel: b,
+  ariaLabelledBy: E,
+  automationId: N = "",
+  commitOnBlur: I = !1
+}) {
+  const [o, p] = w([...r]), [l, g] = w(""), d = $(null), f = D(void 0, "input-with-tags-label"), k = B({
+    ariaLabel: b,
+    ariaLabelledBy: E,
+    internalLabelId: u ? f : void 0
+  }), h = (t) => {
+    const e = o.filter((O, _) => _ !== t);
+    p(e), n?.(e);
+  }, v = () => {
+    const t = l.trim();
+    if (!t) return;
+    const e = [...o, t];
+    p(e), g(""), n?.(e);
+  }, T = (t) => {
+    t.key === "Enter" && l.trim() ? (t.preventDefault(), v()) : t.key === "Backspace" && l === "" && o.length > 0 && h(o.length - 1);
+  }, R = () => {
+    I && v();
   };
-  De(re, () => ({
-    toggleDropdown: Ee
-  }), []);
-  const ke = (e, t, n, s) => {
-    const P = a.some((C) => C.value === e.value), A = h === t, F = N(t, P);
-    return /* @__PURE__ */ o.createElement("div", d({
-      key: e.id
-    }, F, {
-      className: `dropdown-with-input-tags-option ${_(A)}`,
-      onClick: () => !s && n(e),
-      onMouseEnter: () => b(t),
-      "data-automation-id": `${c}-option-${e.id}`
-    }), /* @__PURE__ */ o.createElement("span", {
-      className: "option-label"
-    }, e.label), e.value !== e.label && /* @__PURE__ */ o.createElement("span", {
-      className: "option-value"
-    }, e.value));
-  }, ye = () => {
-    T.current = !0;
-    const e = a.map((t) => t.value);
-    i?.(e), p(!1);
-  }, Se = () => {
-    f([]);
-  }, Ne = (e, t) => {
-    const n = a.some((A) => A.value === e.value), s = h === t, P = N(t, n);
-    return /* @__PURE__ */ o.createElement("div", d({
-      key: e.id
-    }, P, {
-      className: `dropdown-with-input-tags-option dropdown-with-input-tags-multi-select-option ${_(s)}`,
-      "aria-checked": n,
-      onClick: () => {
-        l || (V(!n, e), $.current?.focus());
-      },
-      onMouseEnter: () => b(t),
-      "data-automation-id": `${c}-option-${e.id}`
-    }), /* @__PURE__ */ o.createElement(Ie, {
-      automationId: "checkbox",
-      className: "checkbox",
-      checked: n,
-      onChange: () => {
-      },
-      label: e.label,
-      tabIndex: -1
-    }));
-  }, _e = () => /* @__PURE__ */ o.createElement("div", {
-    className: "dropdown-with-input-tags-ctas-container",
-    onKeyDown: (e) => {
-      (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Home" || e.key === "End") && e.stopPropagation();
-    }
-  }, /* @__PURE__ */ o.createElement(ee, {
-    label: "Clear",
-    type: "link",
-    size: "sm",
-    onClick: Se,
-    automationId: `${c}-clear-button`
-  }), /* @__PURE__ */ o.createElement(ee, {
-    label: "Apply",
-    type: "primary",
-    size: "sm",
-    onClick: ye,
-    automationId: `${c}-apply-button`
-  }));
-  return /* @__PURE__ */ o.createElement("div", d({
-    className: `dropdown-with-input-tags-wrapper ${k} ${l ? "disabled-wrapper" : ""}`,
-    "data-automation-id": c
-  }, me), D && /* @__PURE__ */ o.createElement("label", {
-    id: q,
-    className: "dropdown-with-input-tags-label"
-  }, D), /* @__PURE__ */ o.createElement("div", {
-    onClick: be
-  }, /* @__PURE__ */ o.createElement($e, {
-    ref: ie,
-    className: "dropdown-with-input-tags-popover",
-    contentWidth: "full",
-    position: "bottom-left",
-    isPopoverOpen: !l && u,
-    onPopoverToggle: l ? () => {
-    } : p,
-    disableClickToggle: !0,
-    isWithPortal: ae,
-    renderPopoverContents: ({
-      closePopoverCb: e
-    }) => /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement("div", d({}, de, {
-      className: "dropdown-with-input-tags-content"
-    }, m && {
-      "aria-multiselectable": "true"
-    }), w.length > 0 ? w.map((t, n) => {
-      if (t.value === O) {
-        const C = h === n, Pe = N(n, !1);
-        return /* @__PURE__ */ o.createElement("div", d({
-          key: t.id
-        }, Pe, {
-          className: `dropdown-with-input-tags-option dropdown-with-input-tags-custom-option ${_(C)}`,
-          onClick: () => {
-            l || (Q(t), e());
-          },
-          onMouseEnter: () => b(n)
-        }), 'Add "', r.trim(), '"');
-      }
-      if (m)
-        return Ne(t, n);
-      const s = a.some((C) => C.value === t.value), P = h === n, F = {
-        ...N(n, s),
-        onMouseEnter: () => b(n),
-        className: `dropdown-with-input-tags-option ${_(P)}`
-      };
-      return x ? x(t, F, I) : ke(t, n, I, l);
-    }) : /* @__PURE__ */ o.createElement("div", d({}, N(0, !1), {
-      className: `dropdown-with-input-tags-no-options ${_(h === 0)}`
-    }), /* @__PURE__ */ o.createElement("div", {
-      className: "dropdown-with-input-tags-no-options-text"
-    }, L))), m && !S && _e()),
-    renderPopoverSrcElement: () => /* @__PURE__ */ o.createElement("div", {
-      className: "dropdown-with-input-tags-input-container"
-    }, /* @__PURE__ */ o.createElement("div", {
-      className: `input-with-tags-container ${l ? "disabled-input-with-tags-container" : ""} ${Z ? "keyboard-focused" : ""}`,
-      onClick: we,
-      onKeyDown: (e) => {
-        e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey && $.current?.focus();
-      }
-    }, a.map((e, t) => /* @__PURE__ */ o.createElement("span", {
-      key: t,
-      className: "tag-in-inputwithtags"
-    }, e[B], !l && /* @__PURE__ */ o.createElement(Te, {
-      name: "close",
-      className: "close-icon-in-inputwithtags",
-      ariaLabel: `Remove tag ${e[B]}`,
-      onClick: () => fe(t),
-      shouldStopPropagation: !0
-    }))), (z || !a.length || m) && /* @__PURE__ */ o.createElement("input", d({
-      ref: $
-    }, Y, {
-      type: "text",
-      value: r,
-      onChange: he,
-      onKeyDown: ge,
-      onFocus: ve,
-      placeholder: a.length === 0 ? E : "",
-      className: `input-with-tags-input${!z && a.length > 0 && !r ? " sr-only" : ""}`,
-      disabled: l
-    }, Oe({
-      ariaLabel: ne || (D ? void 0 : "Search and select options"),
-      ariaLabelledBy: oe,
-      internalLabelId: D ? q : void 0,
-      ariaDescribedBy: le
-    }))))),
-    automationId: c,
-    popoverContentAutomationId: `${c}-content`
-  })));
-});
+  return /* @__PURE__ */ a.createElement("div", {
+    className: "input-with-tags-main-container",
+    "data-automation-id": N
+  }, u && /* @__PURE__ */ a.createElement("div", {
+    id: f,
+    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", {
+    key: e,
+    className: "tag-in-inputwithtags",
+    "data-automation-id": `input-tag-${e}`
+  }, t, /* @__PURE__ */ a.createElement(A, {
+    name: "close",
+    className: "close-icon-in-inputwithtags",
+    ariaLabel: `Remove tag ${t}`,
+    onClick: () => h(e),
+    shouldStopPropagation: !0
+  }))), /* @__PURE__ */ a.createElement("input", c({
+    className: "input-with-tags-input",
+    ref: d,
+    type: "text",
+    value: l,
+    onChange: (t) => g(t.target.value),
+    onKeyDown: T,
+    onBlur: R,
+    placeholder: i,
+    "data-automation-id": "input-with-tags-input-field"
+  }, k))), m && /* @__PURE__ */ a.createElement("div", {
+    className: "error-message"
+  }, y));
+}
 export {
-  Ge as DropdownWithInputTags
+  V as InputWithTags
 };
 //# sourceMappingURL=index38.js.map