se-design 1.0.2 → 1.0.8-5.dev.0

package/dist/index34.js

@@ -1,49 +1,45 @@
-import e, { useState as u, useEffect as v } from "react";
-import { Icon as s } from "./index5.js";
-const p = ({
-  renderAccordionContents: i,
-  renderAccordionSrcElement: m,
-  defaultOpen: r,
-  className: l = "",
-  arrowPosition: a = "left",
-  contentClassName: d = "",
-  disabled: n = !1,
-  automationId: f = ""
-}) => {
-  const [t, c] = u(!1);
-  v(() => {
-    c(r || !1);
-  }, [r]);
-  const o = () => n ? "" : a === "left" ? t ? "rotate-90" : "" : t ? "rotate-180" : "";
-  return /* @__PURE__ */ e.createElement("div", {
-    className: `se-design-accordion ${l}`,
-    "data-automation-id": f
-  }, /* @__PURE__ */ e.createElement("div", {
-    className: "flex flex-col"
-  }, /* @__PURE__ */ e.createElement("div", {
-    className: "flex items-center cursor-pointer",
-    onClick: () => !n && c(!t)
-  }, a === "left" && /* @__PURE__ */ e.createElement("div", {
-    className: `se-design-accordion-icon transform transition-transform duration-300 ${o()} ${n ? "opacity-30 pointer-events-none" : ""}`
-  }, /* @__PURE__ */ e.createElement(s, {
-    name: "rightSide"
-  })), /* @__PURE__ */ e.createElement("div", {
-    className: "se-design-accordion-elements flex-1"
-  }, /* @__PURE__ */ e.createElement("div", {
-    className: "se-design-accordion-src-element title"
-  }, m({
-    isOpen: t
-  }))), a === "right" && /* @__PURE__ */ e.createElement("div", {
-    className: `se-design-accordion-icon transform transition-transform duration-300 ${o()} ${n ? "opacity-30 pointer-events-none" : ""}`
-  }, /* @__PURE__ */ e.createElement(s, {
-    name: "chevron"
-  }))), t && /* @__PURE__ */ e.createElement("div", {
-    className: `se-design-accordion-content transition-all duration-300 mt-1 ${d}`
-  }, i({
-    isOpen: t
-  }))));
-};
+import o from "react";
+import { Radio as m } from "./index33.js";
+function l() {
+  return l = Object.assign ? Object.assign.bind() : function(e) {
+    for (var t = 1; t < arguments.length; t++) {
+      var n = arguments[t];
+      for (var a in n) ({}).hasOwnProperty.call(n, a) && (e[a] = n[a]);
+    }
+    return e;
+  }, l.apply(null, arguments);
+}
+function g(e) {
+  const {
+    automationId: t = "",
+    withBorder: n = !0,
+    ariaLabel: a,
+    ariaLabelledBy: i,
+    name: c
+  } = e, u = (r) => {
+    e.onRadioGroupChange({
+      ...r,
+      checked: !0
+    });
+  }, d = i ? {
+    "aria-labelledby": i
+  } : a ? {
+    "aria-label": a
+  } : {};
+  return /* @__PURE__ */ o.createElement("div", {
+    "data-automation-id": t
+  }, /* @__PURE__ */ o.createElement("fieldset", l({
+    className: `flex flex-wrap gap-2 ${e.direction === "column" ? "flex-col" : "flex-row"}`
+  }, d), e.options.map((r) => /* @__PURE__ */ o.createElement(m, l({
+    key: r.value
+  }, r, {
+    name: c,
+    onChange: u,
+    checked: r.value === e.value,
+    withBorder: n
+  })))));
+}
 export {
-  p as CustomAccordion
+  g as RadioGroup
 };
 //# sourceMappingURL=index34.js.map

package/dist/index34.js.map

@@ -1 +1 @@
-{"version":3,"file":"index34.js","sources":["../src/components/CustomAccordion/index.tsx"],"sourcesContent":["import React, { FC, useEffect, useState } from 'react';\nimport { Icon } from '../Icon';\n\nexport interface CustomAccordionProps {\n  renderAccordionContents: (props: { isOpen: boolean }) => React.ReactNode;\n  renderAccordionSrcElement: (props: { isOpen: boolean }) => React.ReactNode;\n  defaultOpen?: boolean;\n  className?: string;\n  arrowPosition?: 'left' | 'right';\n  contentClassName?: string;\n  disabled?: boolean;\n  automationId?: string;\n}\n\nexport const CustomAccordion: FC<CustomAccordionProps> = ({ \n  renderAccordionContents, \n  renderAccordionSrcElement, \n  defaultOpen, \n  className = '',\n  arrowPosition = 'left',\n  contentClassName = '',\n  disabled = false,\n  automationId = ''\n}) => {\n  const [isOpen, setIsOpen] = useState(false);\n  useEffect(()=>{\n    setIsOpen(defaultOpen || false)\n  },[defaultOpen])\n\n  const getArrowRotation = () => {\n    if (disabled) {\n      return '';\n    }\n    if (arrowPosition === 'left') {\n      return isOpen ? 'rotate-90' : '';\n    }\n    return isOpen ? 'rotate-180' : '';\n  };\n\n  return (\n    <div className={`se-design-accordion ${className}`} data-automation-id={automationId}>\n      <div className=\"flex flex-col\">\n        <div \n          className=\"flex items-center cursor-pointer\" \n          onClick={() => !disabled && setIsOpen(!isOpen)}\n        >\n          {arrowPosition === 'left' && (\n            <div className={`se-design-accordion-icon transform transition-transform duration-300 ${getArrowRotation()} ${disabled ? 'opacity-30 pointer-events-none' : ''}`}>\n              <Icon name=\"rightSide\" />\n            </div>\n          )}\n          <div className=\"se-design-accordion-elements flex-1\">\n            <div className=\"se-design-accordion-src-element title\">{renderAccordionSrcElement({isOpen})}</div>\n          </div>\n          {arrowPosition === 'right' && (\n            <div className={`se-design-accordion-icon transform transition-transform duration-300 ${getArrowRotation()} ${disabled ? 'opacity-30 pointer-events-none' : ''}`}>\n              <Icon name=\"chevron\" />\n            </div>\n          )}\n        </div>\n        {isOpen && (\n          <div className={`se-design-accordion-content transition-all duration-300 mt-1 ${contentClassName}`}>\n            {renderAccordionContents({isOpen})}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["CustomAccordion","renderAccordionContents","renderAccordionSrcElement","defaultOpen","className","arrowPosition","contentClassName","disabled","automationId","isOpen","setIsOpen","useState","useEffect","getArrowRotation","React","createElement","onClick","Icon","name"],"mappings":";;AAcO,MAAMA,IAA4CA,CAAC;AAAA,EACxDC,yBAAAA;AAAAA,EACAC,2BAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,WAAAA,IAAY;AAAA,EACZC,eAAAA,IAAgB;AAAA,EAChBC,kBAAAA,IAAmB;AAAA,EACnBC,UAAAA,IAAW;AAAA,EACXC,cAAAA,IAAe;AACjB,MAAM;AACJ,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK;AAC1CC,EAAAA,EAAU,MAAI;AACZF,IAAAA,EAAUP,KAAe,EAAK;AAAA,EAAA,GAC9B,CAACA,CAAW,CAAC;AAEf,QAAMU,IAAmBA,MACnBN,IACK,KAELF,MAAkB,SACbI,IAAS,cAAc,KAEzBA,IAAS,eAAe;AAI/BK,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKX,WAAW,uBAAuBA,CAAS;AAAA,IAAI,sBAAoBI;AAAAA,EAAAA,GACtEO,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKX,WAAU;AAAA,EAAA,GACbW,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IACEX,WAAU;AAAA,IACVY,SAASA,MAAM,CAACT,KAAYG,EAAU,CAACD,CAAM;AAAA,EAE5CJ,GAAAA,MAAkB,UACjBS,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKX,WAAW,wEAAwES,EAAkB,CAAA,IAAIN,IAAW,mCAAmC,EAAE;AAAA,EAAA,GAC5JQ,gBAAAA,EAAAA,cAACE,GAAI;AAAA,IAACC,MAAK;AAAA,EAAa,CAAA,CACrB,GAEPJ,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKX,WAAU;AAAA,EAAA,GACbW,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKX,WAAU;AAAA,KAAyCF,EAA0B;AAAA,IAACO,QAAAA;AAAAA,EAAAA,CAAO,CAAO,CAC9F,GACJJ,MAAkB,WACjBS,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKX,WAAW,wEAAwES,EAAkB,CAAA,IAAIN,IAAW,mCAAmC,EAAE;AAAA,EAAA,GAC5JQ,gBAAAA,EAAAA,cAACE,GAAI;AAAA,IAACC,MAAK;AAAA,EAAW,CAAA,CACnB,CAEJ,GACJT,KACCK,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKX,WAAW,gEAAgEE,CAAgB;AAAA,KAC7FL,EAAwB;AAAA,IAACQ,QAAAA;AAAAA,EAAAA,CAAO,CAC9B,CAEJ,CACF;AAET;"}
+{"version":3,"file":"index34.js","sources":["../src/components/RadioGroup/index.tsx"],"sourcesContent":["import React from 'react';\nimport { Radio, RadioProps } from '../Radio';\n\nexport interface RadioGroupProps {\n  options: RadioProps[];\n  onRadioGroupChange: (obj: RadioProps) => void;\n  value?: string;\n  direction?: 'row' | 'column';\n  automationId?: string;\n  withBorder?: boolean;\n  /**\n   * Accessible name for the radio group.\n   * Applied to the fieldset element.\n   * Prefer ariaLabelledBy when a visible label exists.\n   */\n  ariaLabel?: string;\n  /**\n   * ID(s) of element(s) that label this radio group.\n   * Preferred over ariaLabel when a visible label exists (keeps SR and visual text in sync).\n   */\n  ariaLabelledBy?: string;\n  /**\n   * Shared name attribute for all radio inputs in the group.\n   * Enables arrow-key navigation between options.\n   * Must be unique per RadioGroup instance on the page.\n   */\n  name: string;\n}\n\nexport function RadioGroup(props: RadioGroupProps) {\n  const { automationId = '', withBorder = true, ariaLabel, ariaLabelledBy, name } = props;\n  const handleRadioChange = (obj: RadioProps) => {\n    props.onRadioGroupChange({ ...obj, checked: true });\n  };\n  \n  // Prefer aria-labelledby when provided, fallback to aria-label\n  const fieldsetProps = ariaLabelledBy\n    ? { 'aria-labelledby': ariaLabelledBy }\n    : ariaLabel\n    ? { 'aria-label': ariaLabel }\n    : {};\n  \n  return (\n    <div data-automation-id={automationId}>\n      <fieldset className={`flex flex-wrap gap-2 ${props.direction === 'column' ? 'flex-col' : 'flex-row'}`} {...fieldsetProps}>\n        {props.options.map((option) => (\n          <Radio key={option.value} {...option} name={name} onChange={handleRadioChange} checked={option.value === props.value} withBorder={withBorder} />\n        ))}\n      </fieldset>\n    </div>\n  );\n}\n"],"names":["RadioGroup","props","automationId","withBorder","ariaLabel","ariaLabelledBy","name","handleRadioChange","obj","onRadioGroupChange","checked","fieldsetProps","React","createElement","_extends","className","direction","options","map","option","Radio","key","value","onChange"],"mappings":";;;;;;;;;;;AA6BO,SAASA,EAAWC,GAAwB;AACjD,QAAM;AAAA,IAAEC,cAAAA,IAAe;AAAA,IAAIC,YAAAA,IAAa;AAAA,IAAMC,WAAAA;AAAAA,IAAWC,gBAAAA;AAAAA,IAAgBC,MAAAA;AAAAA,EAAAA,IAASL,GAC5EM,IAAoBA,CAACC,MAAoB;AAC7CP,IAAAA,EAAMQ,mBAAmB;AAAA,MAAE,GAAGD;AAAAA,MAAKE,SAAS;AAAA,IAAA,CAAM;AAAA,EACpD,GAGMC,IAAgBN,IAClB;AAAA,IAAE,mBAAmBA;AAAAA,EAAAA,IACrBD,IACA;AAAA,IAAE,cAAcA;AAAAA,EAAAA,IAChB,CAAA;AAEJ,SACEQ,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAK,sBAAoBX;AAAAA,EAAAA,GACvBU,gBAAAA,EAAAC,cAAA,YAAAC,EAAA;AAAA,IAAUC,WAAW,wBAAwBd,EAAMe,cAAc,WAAW,aAAa,UAAU;AAAA,EAAA,GAAQL,CAAa,GACrHV,EAAMgB,QAAQC,IAAKC,CAAAA,MAClBP,gBAAAA,EAAAC,cAACO,GAAKN,EAAA;AAAA,IAACO,KAAKF,EAAOG;AAAAA,EAAAA,GAAWH,GAAM;AAAA,IAAEb,MAAAA;AAAAA,IAAYiB,UAAUhB;AAAAA,IAAmBG,SAASS,EAAOG,UAAUrB,EAAMqB;AAAAA,IAAOnB,YAAAA;AAAAA,EAAAA,CAAuB,CAAE,CAChJ,CACO,CACP;AAET;"}

package/dist/index35.js

@@ -1,61 +1,77 @@
-import e, { useState as p, useRef as k } from "react";
-/* empty css         */
-import { Icon as y } from "./index5.js";
-function _({
-  value: g,
-  onChange: s,
-  placeholder: f,
-  className: w,
-  error: o,
-  errorMessage: d,
-  label: l,
-  automationId: h = ""
-}) {
-  const [n, c] = p([...g]), [i, r] = p(""), u = k(null), E = (a) => {
-    if (a.key === "Enter" && i.trim()) {
-      a.preventDefault();
-      const t = [...n, i.trim()];
-      c(t), r(""), s?.(t);
-    } else if (a.key === "Backspace" && i === "" && n.length > 0) {
-      const t = n.slice(0, -1);
-      c(t), s?.(t);
+import e, { useState as h, useEffect as E } from "react";
+import { Icon as N } from "./index6.js";
+import { useStableId as $ } from "./index205.js";
+import { getRegionAttributes as I } from "./index66.js";
+import { useAccessiblePress as _ } from "./index67.js";
+import "./index72.js";
+function r() {
+  return r = Object.assign ? Object.assign.bind() : function(n) {
+    for (var s = 1; s < arguments.length; s++) {
+      var o = arguments[s];
+      for (var t in o) ({}).hasOwnProperty.call(o, t) && (n[t] = o[t]);
     }
-  };
-  return /* @__PURE__ */ e.createElement("div", {
-    className: "input-with-tags-main-container",
-    "data-automation-id": h
-  }, l && /* @__PURE__ */ e.createElement("div", {
-    className: "label-container"
-  }, l), /* @__PURE__ */ e.createElement("div", {
-    className: `input-with-tags-container ${o ? "input-with-tags-error" : ""} ${w}`,
-    onClick: () => u.current?.focus()
-  }, n.map((a, t) => /* @__PURE__ */ e.createElement("span", {
-    key: t,
-    className: "tag-in-inputwithtags",
-    "data-automation-id": `input-tag-${t}`
-  }, a, /* @__PURE__ */ e.createElement("span", {
-    className: "close-icon-in-inputwithtags",
-    onClick: (v) => {
-      v.stopPropagation();
-      const m = n.filter((T, N) => N !== t);
-      c(m), s?.(m);
-    }
-  }, /* @__PURE__ */ e.createElement(y, {
-    name: "close"
-  })))), /* @__PURE__ */ e.createElement("input", {
-    className: "input-with-tags-input",
-    ref: u,
-    type: "text",
-    value: i,
-    onChange: (a) => r(a.target.value),
-    onKeyDown: E,
-    placeholder: f,
-    "data-automation-id": "input-with-tags-input-field"
-  })), o && /* @__PURE__ */ e.createElement("div", {
-    className: "error-message"
-  }, d));
+    return n;
+  }, r.apply(null, arguments);
 }
+const j = ({
+  title: n,
+  titleTag: s = "h4",
+  content: o,
+  defaultOpen: t,
+  overflow: d,
+  titleClassName: u = "",
+  showSeparator: m = !0,
+  automationId: f = "",
+  id: p
+}) => {
+  const [i, c] = h(!1);
+  E(() => {
+    c(t || !1);
+  }, [t]);
+  const a = $(p, "accordion"), l = `${a}-content`, {
+    pressProps: g,
+    role: v,
+    tabIndex: b
+  } = _({
+    onClick: () => c(!i),
+    isNative: !1
+    // Not a native button, so hook adds Enter/Space handling
+  }), x = I({
+    titleId: a,
+    isFocusable: !1
+  });
+  return /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement("div", r({}, g, {
+    role: v,
+    tabIndex: b,
+    "aria-expanded": i,
+    "aria-controls": l,
+    className: "se-design-accordion-header flex items-center cursor-pointer group focus-visible:outline-none",
+    "data-automation-id": f
+  }), /* @__PURE__ */ e.createElement("div", {
+    className: "flex items-center gap-2 rounded group-focus-visible:[outline:var(--focus-width)_solid_var(--focus-color)] group-focus-visible:[outline-offset:var(--focus-offset)] group-focus-visible:p-[2px]"
+  }, /* @__PURE__ */ e.createElement("div", {
+    className: `transform transition-transform duration-300 ${i ? "rotate-90" : ""}`
+  }, /* @__PURE__ */ e.createElement(N, {
+    name: "rightSide"
+  })), /* @__PURE__ */ e.createElement(s, {
+    id: a,
+    className: `se-design-accordion-title text-[var(--color-gray-900)]] font-inter text-[18px] font-semibold leading-[24px] ${u}`
+  }, n))), /* @__PURE__ */ e.createElement("div", r({
+    id: l
+  }, x, {
+    className: `
+        se-design-accordion-content
+        overflow-${d || "hidden"}
+        transition-all
+        duration-300
+        ml-1
+        mt-[1vw]
+        ${i ? "max-h-[1000vh] opacity-100 visible h-auto" : "hidden"}`
+  }), o), m && /* @__PURE__ */ e.createElement("div", {
+    className: `h-[1px] bg-[#E5E7EB] mt-[12px] ${i ? "hidden" : "block"}`
+  }));
+};
 export {
-  _ as InputWithTags
+  j as Accordion
 };
 //# 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';\n\nexport interface InputWithTagsProps {\n    value: string[];\n    onChange?: (tags: string[]) => void;\n    placeholder?: string;\n    className?: string;\n    error?: boolean;\n    errorMessage?: string;\n    label?: string;\n    automationId?: string;\n}\n\nexport function InputWithTags({ \n    value, \n    onChange, \n    placeholder, \n    className, \n    error, \n    errorMessage, \n    label,\n    automationId = ''\n}: InputWithTagsProps) {\n    const [tags, setTags] = useState<string[]>([...value]);\n    const [inputValue, setInputValue] = useState('');\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n        if (e.key === 'Enter' && inputValue.trim()) {\n            e.preventDefault();\n            const newTags = [...tags, inputValue.trim()];\n            setTags(newTags);\n            setInputValue(\"\");\n            onChange?.(newTags);\n        } else if (e.key === 'Backspace' && inputValue === \"\" && tags.length > 0) {\n            // Remove the last tag when backspace is pressed on empty input\n            const newTags = tags.slice(0, -1);\n            setTags(newTags);\n            onChange?.(newTags);\n        }\n    };\n\n    return (\n        <div className=\"input-with-tags-main-container\" data-automation-id={automationId}>\n            {label && <div className=\"label-container\">{label}</div>}\n            <div \n                className={`input-with-tags-container ${error ? 'input-with-tags-error' : ''} ${className}`} \n                onClick={() => inputRef.current?.focus()}\n            >\n                {tags.map((tag, index) => (\n                    <span key={index} className=\"tag-in-inputwithtags\" data-automation-id={`input-tag-${index}`}>\n                        {tag} \n                        <span\n                        className=\"close-icon-in-inputwithtags\"\n                        onClick={(e) => {\n                            e.stopPropagation();\n                            const newTags = tags.filter((_, i) => i !== index);\n                            setTags(newTags);\n                            onChange?.(newTags);\n                        }}\n                        >\n                            <Icon name=\"close\" />\n                        </span>\n                    </span>\n                ))}\n                <input\n                    className=\"input-with-tags-input\"\n                    ref={inputRef}\n                    type=\"text\"\n                    value={inputValue}\n                    onChange={(e) => setInputValue(e.target.value)}\n                    onKeyDown={handleKeyDown}\n                    placeholder={placeholder}\n                    data-automation-id=\"input-with-tags-input-field\"\n                />\n            </div>\n            {error && <div className=\"error-message\">{errorMessage}</div>}\n        </div>\n    );\n}"],"names":["React__default","useState","useRef","Icon","InputWithTags","value","onChange","placeholder","className","error","errorMessage","label","automationId","tags","setTags","inputValue","setInputValue","inputRef","handleKeyDown","e","key","trim","preventDefault","newTags","length","slice","React","createElement","onClick","current","focus","map","tag","index","stopPropagation","filter","_","i","name","ref","type","target","onKeyDown"],"mappings":"AAeO,OAAAA,KAAA,YAAAC,GAAA,UAAAC,SAAA;AAAA,OAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,SAASC,EAAc;AAAA,EAC1BC,OAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,cAAAA,IAAe;AACC,GAAG;AACb,QAAA,CAACC,GAAMC,CAAO,IAAIb,EAAmB,CAAC,GAAGI,CAAK,CAAC,GAC/C,CAACU,GAAYC,CAAa,IAAIf,EAAS,EAAE,GACzCgB,IAAWf,EAAyB,IAAI,GAExCgB,IAAgBA,CAACC,MAAuC;AAC1D,QAAIA,EAAEC,QAAQ,WAAWL,EAAWM,QAAQ;AACxCF,MAAAA,EAAEG,eAAe;AACjB,YAAMC,IAAU,CAAC,GAAGV,GAAME,EAAWM,KAAM,CAAA;AAC3CP,MAAAA,EAAQS,CAAO,GACfP,EAAc,EAAE,GAChBV,IAAWiB,CAAO;AAAA,IAAA,WACXJ,EAAEC,QAAQ,eAAeL,MAAe,MAAMF,EAAKW,SAAS,GAAG;AAEtE,YAAMD,IAAUV,EAAKY,MAAM,GAAG,EAAE;AAChCX,MAAAA,EAAQS,CAAO,GACfjB,IAAWiB,CAAO;AAAA,IACtB;AAAA,EAAA;AAIAG,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKnB,WAAU;AAAA,IAAiC,sBAAoBI;AAAAA,EAC/DD,GAAAA,KAASgB,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKnB,WAAU;AAAA,EAAmBG,GAAAA,CAAW,GACvDe,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACInB,WAAW,6BAA6BC,IAAQ,0BAA0B,EAAE,IAAID,CAAS;AAAA,IACzFoB,SAASA,MAAMX,EAASY,SAASC,MAAM;AAAA,EAAA,GAEtCjB,EAAKkB,IAAI,CAACC,GAAKC,MACZP,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMP,KAAKa;AAAAA,IAAOzB,WAAU;AAAA,IAAuB,sBAAoB,aAAayB,CAAK;AAAA,EACpFD,GAAAA,GACDL,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IACAnB,WAAU;AAAA,IACVoB,SAAUT,CAAMA,MAAA;AACZA,MAAAA,EAAEe,gBAAgB;AAClB,YAAMX,IAAUV,EAAKsB,OAAO,CAACC,GAAGC,MAAMA,MAAMJ,CAAK;AACjDnB,MAAAA,EAAQS,CAAO,GACfjB,IAAWiB,CAAO;AAAA,IACtB;AAAA,EAAA,GAEII,gBAAAA,EAAAA,cAACxB,GAAI;AAAA,IAACmC,MAAK;AAAA,EAAS,CAAA,CAClB,CACJ,CACT,GACDZ,gBAAAA,EAAAC,cAAA,SAAA;AAAA,IACInB,WAAU;AAAA,IACV+B,KAAKtB;AAAAA,IACLuB,MAAK;AAAA,IACLnC,OAAOU;AAAAA,IACPT,UAAWa,CAAAA,MAAMH,EAAcG,EAAEsB,OAAOpC,KAAK;AAAA,IAC7CqC,WAAWxB;AAAAA,IACXX,aAAAA;AAAAA,IACA,sBAAmB;AAAA,EACtB,CAAA,CACA,GACJE,KAASiB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKnB,WAAU;AAAA,EAAA,GAAiBE,CAAkB,CAC3D;AAEb;"}
+{"version":3,"file":"index35.js","sources":["../src/components/Accordion/index.tsx"],"sourcesContent":["import React, { FC, useEffect, useState } from 'react';\nimport { Icon } from '../Icon';\nimport { useStableId } from '../../utils/useStableId';\nimport { useAccessiblePress } from '../../utils/a11y';\nimport { getRegionAttributes } from '../../utils/a11y/regionAttributes';\n\nexport interface AccordionProps {\n  title: string;\n  titleTag?: 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  titleClassName?: string;\n  content: React.ReactNode;\n  defaultOpen?: boolean;\n  showSeparator?: boolean;\n  overflow?: 'hidden' | 'visible' | 'scroll' | 'auto' | undefined | string;\n  automationId?: string;\n  id?: string;\n}\n\nexport const Accordion: FC<AccordionProps> = ({\n  title,\n  titleTag: TitleTag = 'h4',\n  content,\n  defaultOpen,\n  overflow,\n  titleClassName = '',\n  showSeparator = true,\n  automationId = '',\n  id\n}) => {\n  const [isOpen, setIsOpen] = useState(false);\n  \n  useEffect(() => {\n    setIsOpen(defaultOpen || false);\n  }, [defaultOpen]);\n\n  // Generate stable IDs for ARIA relationships\n  const titleId = useStableId(id, 'accordion');\n  const contentId = `${titleId}-content`; \n\n  // Use accessible press hook for keyboard + mouse handling\n  const { pressProps, role, tabIndex } = useAccessiblePress({\n    onClick: () => setIsOpen(!isOpen),\n    isNative: false // Not a native button, so hook adds Enter/Space handling\n  });\n\n  // Get region attributes for content panel\n  const regionAttributes = getRegionAttributes({\n    titleId,\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  return (\n    <div>\n      <div\n        {...pressProps}\n        role={role}\n        tabIndex={tabIndex}\n        aria-expanded={isOpen}\n        aria-controls={contentId}\n        className=\"se-design-accordion-header flex items-center cursor-pointer group focus-visible:outline-none\"\n        data-automation-id={automationId}\n      >\n        <div className={`flex items-center gap-2 rounded ${focusVisibleClasses}`}>\n          <div \n            className={`transform transition-transform duration-300 ${isOpen ? 'rotate-90' : ''}`}\n          >\n            <Icon name=\"rightSide\" />\n          </div>\n          <TitleTag\n            id={titleId}\n            className={`se-design-accordion-title text-[var(--color-gray-900)]] font-inter text-[18px] font-semibold leading-[24px] ${titleClassName}`}\n          >\n            {title}\n          </TitleTag>\n        </div>\n      </div>\n      <div\n        id={contentId}\n        {...regionAttributes}\n        className={`\n        se-design-accordion-content\n        overflow-${overflow || 'hidden'}\n        transition-all\n        duration-300\n        ml-1\n        mt-[1vw]\n        ${isOpen ? 'max-h-[1000vh] opacity-100 visible h-auto' : 'hidden'}`}\n      >\n        {content}\n      </div>\n      {showSeparator && <div className={`h-[1px] bg-[#E5E7EB] mt-[12px] ${!isOpen ? 'block' : 'hidden'}`}></div>}\n    </div>\n  );\n};\n"],"names":["Accordion","title","titleTag","TitleTag","content","defaultOpen","overflow","titleClassName","showSeparator","automationId","id","isOpen","setIsOpen","useState","useEffect","titleId","useStableId","contentId","pressProps","role","tabIndex","useAccessiblePress","onClick","isNative","regionAttributes","getRegionAttributes","isFocusable","React","createElement","_extends","className","Icon","name"],"mappings":";;;;;;;;;;;;;;;AAkBO,MAAMA,IAAgCA,CAAC;AAAA,EAC5CC,OAAAA;AAAAA,EACAC,UAAUC,IAAW;AAAA,EACrBC,SAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,gBAAAA,IAAiB;AAAA,EACjBC,eAAAA,IAAgB;AAAA,EAChBC,cAAAA,IAAe;AAAA,EACfC,IAAAA;AACF,MAAM;AACJ,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK;AAE1CC,EAAAA,EAAU,MAAM;AACdF,IAAAA,EAAUP,KAAe,EAAK;AAAA,EAChC,GAAG,CAACA,CAAW,CAAC;AAGhB,QAAMU,IAAUC,EAAYN,GAAI,WAAW,GACrCO,IAAY,GAAGF,CAAO,YAGtB;AAAA,IAAEG,YAAAA;AAAAA,IAAYC,MAAAA;AAAAA,IAAMC,UAAAA;AAAAA,EAAAA,IAAaC,EAAmB;AAAA,IACxDC,SAASA,MAAMV,EAAU,CAACD,CAAM;AAAA,IAChCY,UAAU;AAAA;AAAA,EAAA,CACX,GAGKC,IAAmBC,EAAoB;AAAA,IAC3CV,SAAAA;AAAAA,IACAW,aAAa;AAAA,EAAA,CACd;AAID,SACEC,gBAAAA,EAAAC,cAAA,OAAA,MACED,gBAAAA,EAAAC,cAAA,OAAAC,EAAA,CAAA,GACMX,GAAU;AAAA,IACdC,MAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACA,iBAAeT;AAAAA,IACf,iBAAeM;AAAAA,IACfa,WAAU;AAAA,IACV,sBAAoBrB;AAAAA,EAAAA,CAAa,GAEjCkB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKE,WAAW;AAAA,EAAsD,GACpEH,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEE,WAAW,+CAA+CnB,IAAS,cAAc,EAAE;AAAA,EAAA,GAEnFgB,gBAAAA,EAAAC,cAACG,GAAI;AAAA,IAACC,MAAK;AAAA,EAAA,CAAa,CACrB,GACLL,gBAAAA,EAAAC,cAACzB,GAAQ;AAAA,IACPO,IAAIK;AAAAA,IACJe,WAAW,+GAA+GvB,CAAc;AAAA,EAAA,GAEvIN,CACO,CACP,CACF,GACL0B,gBAAAA,EAAAC,cAAA,OAAAC,EAAA;AAAA,IACEnB,IAAIO;AAAAA,EAAAA,GACAO,GAAgB;AAAA,IACpBM,WAAW;AAAA;AAAA,mBAEAxB,KAAY,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,UAK7BK,IAAS,8CAA8C,QAAQ;AAAA,EAAA,CAAG,GAEnEP,CACE,GACJI,KAAiBmB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKE,WAAW,kCAAmCnB,IAAmB,WAAV,OAAkB;AAAA,EAAA,CAAS,CACtG;AAET;"}

package/dist/index36.js

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