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

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=\"se-design-accordion-src flex items-center cursor-pointer\"\n          onClick={() => !disabled && setIsOpen(!isOpen)}\n        >\n          {arrowPosition === 'left' && (\n            <div\n              className={`se-design-accordion-icon transform transition-transform duration-300 ${getArrowRotation()} ${\n                disabled ? 'opacity-30 pointer-events-none' : ''\n              }`}\n            >\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\n              className={`se-design-accordion-icon transform transition-transform duration-300 ${getArrowRotation()} ${\n                disabled ? 'opacity-30 pointer-events-none' : ''\n              }`}\n            >\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,MAAM;AACdF,IAAAA,EAAUP,KAAe,EAAK;AAAA,EAAA,GAC7B,CAACA,CAAW,CAAC;AAEhB,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,IACEX,WAAW,wEAAwES,EAAkB,CAAA,IACnGN,IAAW,mCAAmC,EAAE;AAAA,EAAA,GAGlDQ,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,IAAEO,QAAAA;AAAAA,EAAAA,CAAQ,CAAO,CAChG,GACJJ,MAAkB,WACjBS,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEX,WAAW,wEAAwES,EAAkB,CAAA,IACnGN,IAAW,mCAAmC,EAAE;AAAA,EAAA,GAGlDQ,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,IAAEQ,QAAAA;AAAAA,EAAAA,CAAQ,CAChC,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,251 +1,103 @@
-import l, { forwardRef as Z, useState as b, useRef as D, useEffect as V, useImperativeHandle as ee } from "react";
-import { Popover as te } from "./index17.js";
-import { Icon as ae } from "./index5.js";
-import { Checkbox as le } from "./index21.js";
-import { Button as F } from "./index3.js";
-/* empty css         */
-function T() {
-  return T = Object.assign ? Object.assign.bind() : function(d) {
+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 g = arguments[o];
-      for (var h in g) ({}).hasOwnProperty.call(g, h) && (d[h] = g[h]);
+      var s = arguments[o];
+      for (var n in s) ({}).hasOwnProperty.call(s, n) && (i[n] = s[n]);
     }
-    return d;
-  }, T.apply(null, arguments);
+    return i;
+  }, a.apply(null, arguments);
 }
-const ue = /* @__PURE__ */ Z(({
-  value: d = [],
-  onChange: o,
-  placeholder: g = "Type to search or add custom tags...",
-  className: h = "",
-  options: c = [],
-  renderOption: S,
-  onSearch: N,
-  label: O,
-  automationId: u = "",
-  noOptionsMessage: P = "No options found",
-  allowCustomTags: $ = !0,
+const L = ({
+  renderAccordionContents: i,
+  renderAccordionSrcElement: o,
+  renderControls: s,
+  defaultOpen: n,
+  expanded: f,
+  onChange: E,
+  className: N = "",
+  arrowPosition: l = "left",
+  contentClassName: $ = "",
   disabled: r = !1,
-  type: R = "select",
-  showInput: L = !0
-}, W) => {
-  const [s, p] = b(() => d.map((t) => {
-    const e = c.find((a) => a.value === t);
-    return e ? {
-      label: e.label,
-      value: e.value
-    } : {
-      label: t,
-      value: t
-    };
-  })), [n, E] = b(""), [v, A] = b(c), [m, i] = b(!1), _ = D(null), x = D(null), y = D(!1), k = R === "multi-select-without-cta", w = R === "multi-select" || k;
-  V(() => {
-    if (y.current) {
-      y.current = !1;
-      return;
-    }
-    p(d.map((t) => {
-      const e = c.find((a) => a.value === t);
-      return e ? {
-        label: e.label,
-        value: e.value
-      } : {
-        label: t,
-        value: t
-      };
-    }));
-  }, [d, c, m]), V(() => {
-    if (!n.trim())
-      A(c);
-    else {
-      const t = c.filter((e) => e.label.toLowerCase().includes(n.toLowerCase()) || e.value.toLowerCase().includes(n.toLowerCase()));
-      A(t);
-    }
-    N && N(n);
-  }, [n, c, N]);
-  const C = (t) => {
-    if (r) return;
-    const e = [...s];
-    e.some((a) => a.value === t.value) || (e.push({
-      label: t.label,
-      value: t.value
-    }), p(e), o?.(e.map((a) => a.value))), E(""), i(!1);
-  }, j = (t) => {
-    if (r) return;
-    const e = s.filter((a, f) => f !== t);
-    p(e), (!w || k || w && !m) && o?.(e.map((a) => a.value));
-  }, z = (t) => {
-    if (!r)
-      if (t.key === "Enter" && n.trim()) {
-        if (t.preventDefault(), v.length > 0)
-          if (w) {
-            const e = s.some((a) => a.value === v[0].value);
-            I(!e, v[0]);
-          } else
-            C(v[0]);
-        else if ($) {
-          const e = [...s];
-          e.some((a) => a.value === n.trim()) || (e.push({
-            label: n.trim(),
-            value: n.trim()
-          }), p(e), o?.(e.map((a) => a.value))), E("");
-        }
-        i(!1);
-      } else if (t.key === "Backspace" && n === "" && s.length > 0) {
-        const e = s.slice(0, -1);
-        p(e), o?.(e.map((a) => a.value));
-      } else t.key === "ArrowDown" ? (t.preventDefault(), m || i(!0)) : t.key === "Escape" && (i(!1), E(""));
-  }, B = (t) => {
-    if (r) return;
-    const e = t.target.value;
-    E(e), e.trim() && !m && i(!0);
-  }, K = () => {
-    r || (n.trim() || c.length > 0) && i(!0);
-  }, M = (t) => {
-    r || (t.stopPropagation(), x.current?.focus(), !m && (n.trim() || c.length > 0) && i(!0));
-  }, H = (t) => {
-    if (r) {
-      t.preventDefault(), t.stopPropagation();
-      return;
-    }
-    t.target.closest(".input-with-tags-container") && t.stopPropagation();
-  }, q = () => {
-    r || i(!m);
-  };
-  ee(W, () => ({
-    toggleDropdown: q
-  }), []);
-  const G = (t, e, a) => {
-    const f = s.some((Y) => Y.value === t.value);
-    return /* @__PURE__ */ l.createElement("div", {
-      key: t.id,
-      className: "dropdown-with-input-tags-option",
-      role: "option",
-      "aria-selected": f,
-      onClick: () => !a && e(t),
-      "data-automation-id": `${u}-option-${t.id}`
-    }, /* @__PURE__ */ l.createElement("span", {
-      className: "option-label"
-    }, t.label), t.value !== t.label && /* @__PURE__ */ l.createElement("span", {
-      className: "option-value"
-    }, t.value));
-  }, I = (t, e) => {
-    let a = [];
-    t ? a = [...s, {
-      label: e.label,
-      value: e.value
-    }] : a = s.filter((f) => f.value !== e.value), p(a), k && o?.(a.map((f) => f.value));
-  }, J = () => {
-    y.current = !0;
-    const t = s.map((e) => e.value);
-    o?.(t), i(!1);
-  }, Q = () => {
-    p([]);
-  }, U = (t) => {
-    const e = s.some((a) => a.value === t.value);
-    return /* @__PURE__ */ l.createElement("div", {
-      key: t.id,
-      className: "dropdown-with-input-tags-option dropdown-with-input-tags-multi-select-option",
-      role: "option",
-      "aria-checked": e,
-      "data-automation-id": `${u}-option-${t.id}`
-    }, /* @__PURE__ */ l.createElement(le, {
-      automationId: "checkbox",
-      className: "checkbox",
-      defaultChecked: e,
-      onChange: (a) => I(a, t),
-      label: t.label
-    }));
-  }, X = () => /* @__PURE__ */ l.createElement("div", {
-    className: "dropdown-with-input-tags-ctas-container"
-  }, /* @__PURE__ */ l.createElement(F, {
-    label: "Clear",
-    type: "link",
-    size: "sm",
-    onClick: Q,
-    automationId: `${u}-clear-button`
-  }), /* @__PURE__ */ l.createElement(F, {
-    label: "Apply",
-    type: "primary",
-    size: "sm",
-    onClick: J,
-    automationId: `${u}-apply-button`
-  }));
-  return /* @__PURE__ */ l.createElement("div", {
-    className: `dropdown-with-input-tags-wrapper ${h} ${r ? "disabled-wrapper" : ""}`,
-    "data-automation-id": u
-  }, O && /* @__PURE__ */ l.createElement("label", {
-    id: `${u}-label`,
-    className: "dropdown-with-input-tags-label"
-  }, O), /* @__PURE__ */ l.createElement("div", {
-    onClick: H
-  }, /* @__PURE__ */ l.createElement(te, {
-    ref: _,
-    className: "dropdown-with-input-tags-popover",
-    contentWidth: "full",
-    position: "bottom-left",
-    isPopoverOpen: !r && m,
-    onPopoverToggle: r ? () => {
-    } : i,
-    renderPopoverContents: ({
-      closePopoverCb: t
-    }) => /* @__PURE__ */ l.createElement(l.Fragment, null, /* @__PURE__ */ l.createElement("div", T({
-      className: "dropdown-with-input-tags-content",
-      role: "listbox"
-    }, w && {
-      "aria-multiselectable": "true"
-    }), v.length > 0 ? v.map((e) => w ? U(e) : S ? S(e, C) : G(e, C, r)) : /* @__PURE__ */ l.createElement("div", {
-      className: "dropdown-with-input-tags-no-options"
-    }, n.trim() ? $ ? /* @__PURE__ */ l.createElement("div", {
-      className: "dropdown-with-input-tags-option dropdown-with-input-tags-custom-option",
-      onClick: () => {
-        if (r) return;
-        const e = [...s];
-        e.some((a) => a.value === n.trim()) || (e.push({
-          label: n.trim(),
-          value: n.trim()
-        }), p(e), o?.(e.map((a) => a.value))), E(""), t();
-      }
-    }, 'Add "', n.trim(), '"') : /* @__PURE__ */ l.createElement("div", {
-      className: "dropdown-with-input-tags-no-options-text",
-      role: "status",
-      "aria-live": "polite"
-    }, P) : /* @__PURE__ */ l.createElement("div", {
-      className: "dropdown-with-input-tags-no-options-text",
-      role: "status",
-      "aria-live": "polite"
-    }, P))), w && !k && X()),
-    renderPopoverSrcElement: () => /* @__PURE__ */ l.createElement("div", {
-      className: "dropdown-with-input-tags-input-container"
-    }, /* @__PURE__ */ l.createElement("div", {
-      className: `input-with-tags-container ${r ? "disabled-input-with-tags-container" : ""}`,
-      onClick: M
-    }, s.map((t, e) => /* @__PURE__ */ l.createElement("span", {
-      key: e,
-      className: "tag-in-inputwithtags"
-    }, t.label, !r && /* @__PURE__ */ l.createElement("span", {
-      className: "close-icon-in-inputwithtags",
-      onClick: (a) => {
-        a.stopPropagation(), j(e);
-      }
-    }, /* @__PURE__ */ l.createElement(ae, {
-      name: "close"
-    })))), (L || !s.length) && /* @__PURE__ */ l.createElement("input", {
-      ref: x,
-      type: "text",
-      value: n,
-      onChange: B,
-      onKeyDown: z,
-      onFocus: K,
-      placeholder: s.length === 0 ? g : "",
-      className: "input-with-tags-input",
-      disabled: r
-    }))),
-    automationId: u,
-    popoverContentAutomationId: `${u}-content`
-  })));
-});
+  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 {
-  ue as DropdownWithInputTags
+  L as CustomAccordion
 };
 //# sourceMappingURL=index36.js.map