se-design 1.0.80 → 1.0.81-dev1

package/dist/index34.js.map

@@ -1 +1 @@
-{"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;AAC3C,QAAA;AAAA,IAAEC,cAAAA,IAAe;AAAA,IAAIC,YAAAA,IAAa;AAAA,IAAMC,WAAAA;AAAAA,IAAWC,gBAAAA;AAAAA,IAAgBC,MAAAA;AAAAA,EAASL,IAAAA,GAC5EM,IAAoBA,CAACC,MAAoB;AAC7CP,IAAAA,EAAMQ,mBAAmB;AAAA,MAAE,GAAGD;AAAAA,MAAKE,SAAS;AAAA,IAAA,CAAM;AAAA,EAAA,GAI9CC,IAAgBN,IAClB;AAAA,IAAE,mBAAmBA;AAAAA,MACrBD,IACA;AAAA,IAAE,cAAcA;AAAAA,MAChB;AAGFQ,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAK,sBAAoBX;AAAAA,EACvBU,GAAAA,gBAAAA,EAAAC,cAAA,YAAAC,EAAA;AAAA,IAAUC,WAAW,wBAAwBd,EAAMe,cAAc,WAAW,aAAa,UAAU;AAAA,EAAG,GAAKL,CAAa,GACrHV,EAAMgB,QAAQC,IAAKC,CAClBP,MAAAA,gBAAAA,EAAAC,cAACO,GAAKN,EAAA;AAAA,IAACO,KAAKF,EAAOG;AAAAA,KAAWH,GAAM;AAAA,IAAEb,MAAAA;AAAAA,IAAYiB,UAAUhB;AAAAA,IAAmBG,SAASS,EAAOG,UAAUrB,EAAMqB;AAAAA,IAAOnB,YAAAA;AAAAA,EAAAA,CAAyB,CAAA,CAChJ,CACO,CACP;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,6 +1,6 @@
 import e, { useState as h, useEffect as E } from "react";
 import { Icon as N } from "./index6.js";
-import { useStableId as $ } from "./index199.js";
+import { useStableId as $ } from "./index83.js";
 import { getRegionAttributes as I } from "./index66.js";
 import { useAccessiblePress as _ } from "./index67.js";
 import "./index72.js";

package/dist/index35.js.map

@@ -1 +1 @@
-{"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,EAAA,GAC7B,CAACA,CAAW,CAAC;AAGVU,QAAAA,IAAUC,EAAYN,GAAI,WAAW,GACrCO,IAAY,GAAGF,CAAO,YAGtB;AAAA,IAAEG,YAAAA;AAAAA,IAAYC,MAAAA;AAAAA,IAAMC,UAAAA;AAAAA,MAAaC,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;AAKCC,SAAAA,gBAAAA,EAAAC,cACED,OAAAA,MAAAA,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,CAEpBkB,GAAAC,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKE,WAAW;AAAA,EAAsD,GACpEF,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IACEE,WAAW,+CAA+CnB,IAAS,cAAc,EAAE;AAAA,EAAA,GAEnFiB,gBAAAA,EAAAA,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,GACL2B,gBAAAA,EAAAA,cAAA,OAAAC,EAAA;AAAA,IACEnB,IAAIO;AAAAA,KACAO,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,EAAS,CAAA,CACtG;AAET;"}
+{"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,6 +1,6 @@
 import e, { useState as k, useEffect as w } from "react";
 import { Icon as x } from "./index6.js";
-import { useStableId as F } from "./index199.js";
+import { useStableId as F } from "./index83.js";
 import { getA11yNameAttributes as P } from "./index78.js";
 import { getRegionAttributes as V } from "./index66.js";
 import { useAccessiblePress as q } from "./index67.js";

package/dist/index36.js.map

@@ -1 +1 @@
-{"version":3,"file":"index36.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","createElement","React","Icon","name","trigger","_extends","getA11yNameAttributes"],"mappings":"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"}
+{"version":3,"file":"index36.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/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';\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 removeTag = (indexToRemove: number) => {\n        const newTags = tags.filter((_, i) => i !== indexToRemove);\n        setTags(newTags);\n        onChange?.(newTags);\n    };\n\n    const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n        if (e.key === 'Enter' && inputValue.trim()) {\n            e.preventDefault();\n            const newTags = [...tags, inputValue.trim()];\n            setTags(newTags);\n            setInputValue(\"\");\n            onChange?.(newTags);\n        } else if (e.key === 'Backspace' && inputValue === \"\" && tags.length > 0) {\n            removeTag(tags.length - 1);\n        }\n    };\n\n    return (\n        <div className=\"input-with-tags-main-container\" data-automation-id={automationId}>\n            {label && <div className=\"label-container\">{label}</div>}\n            <div \n                className={`input-with-tags-container ${error ? 'input-with-tags-error' : ''} ${className}`} \n                onClick={() => inputRef.current?.focus()}\n            >\n                {tags.map((tag, index) => (\n                    <span key={index} className=\"tag-in-inputwithtags\" data-automation-id={`input-tag-${index}`}>\n                        {tag} \n                        <Icon\n                            name=\"close\"\n                            className=\"close-icon-in-inputwithtags\"\n                            ariaLabel={`Remove tag ${tag}`}\n                            onClick={() => removeTag(index)}\n                            shouldStopPropagation\n                        />\n                    </span>\n                ))}\n                <input\n                    className=\"input-with-tags-input\"\n                    ref={inputRef}\n                    type=\"text\"\n                    value={inputValue}\n                    onChange={(e) => setInputValue(e.target.value)}\n                    onKeyDown={handleKeyDown}\n                    placeholder={placeholder}\n                    data-automation-id=\"input-with-tags-input-field\"\n                />\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","removeTag","indexToRemove","newTags","filter","_","i","handleKeyDown","e","key","trim","preventDefault","length","React","createElement","onClick","current","focus","map","tag","index","name","ariaLabel","shouldStopPropagation","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,IAAYA,CAACC,MAA0B;AACzC,UAAMC,IAAUP,EAAKQ,OAAO,CAACC,GAAGC,MAAMA,MAAMJ,CAAa;AACzDL,IAAAA,EAAQM,CAAO,GACfd,IAAWc,CAAO;AAAA,EAAA,GAGhBI,IAAgBA,CAACC,MAAuC;AAC1D,QAAIA,EAAEC,QAAQ,WAAWX,EAAWY,QAAQ;AACxCF,MAAAA,EAAEG,eAAe;AACjB,YAAMR,IAAU,CAAC,GAAGP,GAAME,EAAWY,KAAM,CAAA;AAC3Cb,MAAAA,EAAQM,CAAO,GACfJ,EAAc,EAAE,GAChBV,IAAWc,CAAO;AAAA,IAAA,MACtB,CAAWK,EAAEC,QAAQ,eAAeX,MAAe,MAAMF,EAAKgB,SAAS,KACzDhB,EAAAA,EAAKgB,SAAS,CAAC;AAAA,EAC7B;AAIAC,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKvB,WAAU;AAAA,IAAiC,sBAAoBI;AAAAA,EAC/DD,GAAAA,KAASoB,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKvB,WAAU;AAAA,EAAmBG,GAAAA,CAAW,GACvDmB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACIvB,WAAW,6BAA6BC,IAAQ,0BAA0B,EAAE,IAAID,CAAS;AAAA,IACzFwB,SAASA,MAAMf,EAASgB,SAASC,MAAM;AAAA,EAAA,GAEtCrB,EAAKsB,IAAI,CAACC,GAAKC,MACZP,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAML,KAAKW;AAAAA,IAAO7B,WAAU;AAAA,IAAuB,sBAAoB,aAAa6B,CAAK;AAAA,EACpFD,GAAAA,GACDL,gBAAAA,EAAAA,cAAC5B,GAAI;AAAA,IACDmC,MAAK;AAAA,IACL9B,WAAU;AAAA,IACV+B,WAAW,cAAcH,CAAG;AAAA,IAC5BJ,SAASA,MAAMd,EAAUmB,CAAK;AAAA,IAC9BG,uBAAqB;AAAA,EACxB,CAAA,CACC,CACT,GACDV,gBAAAA,EAAAC,cAAA,SAAA;AAAA,IACIvB,WAAU;AAAA,IACViC,KAAKxB;AAAAA,IACLyB,MAAK;AAAA,IACLrC,OAAOU;AAAAA,IACPT,UAAWmB,CAAAA,MAAMT,EAAcS,EAAEkB,OAAOtC,KAAK;AAAA,IAC7CuC,WAAWpB;AAAAA,IACXjB,aAAAA;AAAAA,IACA,sBAAmB;AAAA,EACtB,CAAA,CACA,GACJE,KAASqB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKvB,WAAU;AAAA,EAAA,GAAiBE,CAAkB,CAC3D;AAEb;"}
+{"version":3,"file":"index37.js","sources":["../src/components/InputWithTags/index.tsx"],"sourcesContent":["import React, { useState, KeyboardEvent, useRef } from \"react\";\nimport './styles.scss';\nimport { Icon } from '../Icon';\n\nexport interface InputWithTagsProps {\n    value: string[];\n    onChange?: (tags: string[]) => void;\n    placeholder?: string;\n    className?: string;\n    error?: boolean;\n    errorMessage?: string;\n    label?: string;\n    automationId?: string;\n}\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 removeTag = (indexToRemove: number) => {\n        const newTags = tags.filter((_, i) => i !== indexToRemove);\n        setTags(newTags);\n        onChange?.(newTags);\n    };\n\n    const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n        if (e.key === 'Enter' && inputValue.trim()) {\n            e.preventDefault();\n            const newTags = [...tags, inputValue.trim()];\n            setTags(newTags);\n            setInputValue(\"\");\n            onChange?.(newTags);\n        } else if (e.key === 'Backspace' && inputValue === \"\" && tags.length > 0) {\n            removeTag(tags.length - 1);\n        }\n    };\n\n    return (\n        <div className=\"input-with-tags-main-container\" data-automation-id={automationId}>\n            {label && <div className=\"label-container\">{label}</div>}\n            <div \n                className={`input-with-tags-container ${error ? 'input-with-tags-error' : ''} ${className}`} \n                onClick={() => inputRef.current?.focus()}\n            >\n                {tags.map((tag, index) => (\n                    <span key={index} className=\"tag-in-inputwithtags\" data-automation-id={`input-tag-${index}`}>\n                        {tag} \n                        <Icon\n                            name=\"close\"\n                            className=\"close-icon-in-inputwithtags\"\n                            ariaLabel={`Remove tag ${tag}`}\n                            onClick={() => removeTag(index)}\n                            shouldStopPropagation\n                        />\n                    </span>\n                ))}\n                <input\n                    className=\"input-with-tags-input\"\n                    ref={inputRef}\n                    type=\"text\"\n                    value={inputValue}\n                    onChange={(e) => setInputValue(e.target.value)}\n                    onKeyDown={handleKeyDown}\n                    placeholder={placeholder}\n                    data-automation-id=\"input-with-tags-input-field\"\n                />\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","removeTag","indexToRemove","newTags","filter","_","i","handleKeyDown","e","key","trim","preventDefault","length","React","createElement","onClick","current","focus","map","tag","index","name","ariaLabel","shouldStopPropagation","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;AACnB,QAAM,CAACC,GAAMC,CAAO,IAAIb,EAAmB,CAAC,GAAGI,CAAK,CAAC,GAC/C,CAACU,GAAYC,CAAa,IAAIf,EAAS,EAAE,GACzCgB,IAAWf,EAAyB,IAAI,GAExCgB,IAAYA,CAACC,MAA0B;AACzC,UAAMC,IAAUP,EAAKQ,OAAO,CAACC,GAAGC,MAAMA,MAAMJ,CAAa;AACzDL,IAAAA,EAAQM,CAAO,GACfd,IAAWc,CAAO;AAAA,EACtB,GAEMI,IAAgBA,CAACC,MAAuC;AAC1D,QAAIA,EAAEC,QAAQ,WAAWX,EAAWY,QAAQ;AACxCF,MAAAA,EAAEG,eAAAA;AACF,YAAMR,IAAU,CAAC,GAAGP,GAAME,EAAWY,MAAM;AAC3Cb,MAAAA,EAAQM,CAAO,GACfJ,EAAc,EAAE,GAChBV,IAAWc,CAAO;AAAA,IACtB,MAAA,CAAWK,EAAEC,QAAQ,eAAeX,MAAe,MAAMF,EAAKgB,SAAS,KACnEX,EAAUL,EAAKgB,SAAS,CAAC;AAAA,EAEjC;AAEA,SACIC,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKvB,WAAU;AAAA,IAAiC,sBAAoBI;AAAAA,EAAAA,GAC/DD,KAASmB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKvB,WAAU;AAAA,EAAA,GAAmBG,CAAW,GACvDmB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACIvB,WAAW,6BAA6BC,IAAQ,0BAA0B,EAAE,IAAID,CAAS;AAAA,IACzFwB,SAASA,MAAMf,EAASgB,SAASC,MAAAA;AAAAA,EAAM,GAEtCrB,EAAKsB,IAAI,CAACC,GAAKC,MACZP,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAML,KAAKW;AAAAA,IAAO7B,WAAU;AAAA,IAAuB,sBAAoB,aAAa6B,CAAK;AAAA,EAAA,GACpFD,GACDN,gBAAAA,EAAAC,cAAC5B,GAAI;AAAA,IACDmC,MAAK;AAAA,IACL9B,WAAU;AAAA,IACV+B,WAAW,cAAcH,CAAG;AAAA,IAC5BJ,SAASA,MAAMd,EAAUmB,CAAK;AAAA,IAC9BG,uBAAqB;AAAA,EAAA,CACxB,CACC,CACT,GACDV,gBAAAA,EAAAC,cAAA,SAAA;AAAA,IACIvB,WAAU;AAAA,IACViC,KAAKxB;AAAAA,IACLyB,MAAK;AAAA,IACLrC,OAAOU;AAAAA,IACPT,UAAWmB,CAAAA,MAAMT,EAAcS,EAAEkB,OAAOtC,KAAK;AAAA,IAC7CuC,WAAWpB;AAAAA,IACXjB,aAAAA;AAAAA,IACA,sBAAmB;AAAA,EAAA,CACtB,CACA,GACJE,KAASqB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKvB,WAAU;AAAA,EAAA,GAAiBE,CAAkB,CAC3D;AAEb;"}

package/dist/index38.js

@@ -5,7 +5,7 @@ import { Checkbox as ke } from "./index23.js";
 import { Button as G } from "./index4.js";
 import "./index72.js";
 import { useCombobox as be } from "./index68.js";
-import { useStableId as Ce } from "./index199.js";
+import { useStableId as Ce } from "./index83.js";
 /* empty css         */
 function g() {
   return g = Object.assign ? Object.assign.bind() : function(v) {

package/dist/index38.js.map

@@ -1 +1 @@
-{"version":3,"file":"index38.js","sources":["../src/components/DropdownWithInputTags/index.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef, forwardRef, ForwardedRef, useImperativeHandle, KeyboardEvent, useCallback } from 'react';\nimport { Popover, PopoverHandle } from '../Popover';\nimport { Icon } from '../Icon';\nimport { Checkbox } from '../Checkbox';\nimport { Button } from '../Button';\nimport { useCombobox } from '../../utils/a11y';\nimport { useStableId } from '../../utils/useStableId';\nimport './styles.scss';\n\nexport interface DropdownOption {\n  id: string | number;\n  label: string;\n  value: string;\n  [key: string]: any; // Allow additional properties\n}\n\nexport interface DropdownWithInputTagsHandle {\n  toggleDropdown: () => void;\n}\n\nexport interface DropdownWithInputTagsProps {\n  value: string[];\n  onChange?: (tags: string[]) => void;\n  placeholder?: string;\n  className?: string;\n  options?: DropdownOption[];\n  renderOption?: (\n    option: DropdownOption, \n    props: { \n      id: string; \n      role: 'option'; \n      'aria-selected': boolean; \n      onMouseEnter: () => void;\n      className: string;\n    },\n    onSelect: (option: DropdownOption) => void\n  ) => React.ReactNode;\n  label?: string;\n  automationId?: string;\n  noOptionsMessage?: string;\n  allowCustomTags?: boolean;\n  disabled?: boolean;\n  type?: 'select' | 'multi-select' |'multi-select-without-cta';\n  showInput?: boolean;\n  displayTagBy?: 'label' | 'value';\n  isWithPortal?: boolean;\n}\n\nexport const DropdownWithInputTags = forwardRef<DropdownWithInputTagsHandle, DropdownWithInputTagsProps>(\n  (\n    {\n      value,\n      onChange,\n      placeholder = \"Type to search or add custom tags...\",\n      className = '',\n      options = [],\n      renderOption,\n      label,\n      automationId = '',\n      noOptionsMessage = \"No options found\",\n      allowCustomTags = true,\n      disabled = false,\n      type = 'select',\n      showInput = true,\n      displayTagBy = 'label',\n      isWithPortal = false\n    },\n    ref: ForwardedRef<DropdownWithInputTagsHandle>\n  ) => {\n    // Define initValues at the top, right after props\n    const initValues = (values: string[]) => {\n      return values.map(val => {\n        const found = options.find(opt => opt.value === val);\n        return found ? { label: found.label, value: found.value } : { label: val, value: val };\n      });\n    };\n\n    // Now use it in useState\n    const [tags, setTags] = useState<{ label: string; value: string }[]>(() => {\n      return initValues(value || []);\n    });\n    const [inputValue, setInputValue] = useState('');\n    const [filteredOptions, setFilteredOptions] = useState<DropdownOption[]>(options);\n    const [isDropdownOpen, setIsDropdownOpen] = useState(false);\n    const popoverRef = useRef<PopoverHandle>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const applyClickedRef = useRef<boolean>(false);\n    \n    const isMultiSelectWithoutCTA = type === 'multi-select-without-cta';\n    const isMultiSelect = type === 'multi-select' ||isMultiSelectWithoutCTA;\n\n    // Generate stable ID for listbox\n    const listboxId = useStableId(automationId, 'dropdown-input-tags-listbox');\n\n    const handleSelectOption = useCallback(\n      (option: DropdownOption) => {\n        if (disabled) return;\n\n        const newTags = [...tags];\n        if (!newTags.some((tag) => tag.value === option.value)) {\n          newTags.push({ label: option.label, value: option.value });\n          setTags(newTags);\n          onChange?.(newTags.map((tag) => tag.value));\n        }\n        setInputValue('');\n        setIsDropdownOpen(false);\n      },\n      [disabled, tags, onChange]\n    );\n\n    const handleMultiSelectDropdownOptionClick = useCallback(\n      (isSelected: boolean, option: DropdownOption) => {\n        let newSelectedTags: { label: string; value: string }[] = [];\n        if (isSelected) {\n          newSelectedTags = [...tags, { label: option.label, value: option.value }];\n        } else {\n          newSelectedTags = tags.filter((tag) => tag.value !== option.value);\n        }\n        setTags(newSelectedTags);\n        if (isMultiSelectWithoutCTA) {\n          onChange?.(newSelectedTags.map((tag) => tag.value));\n        }\n      },\n      [tags, isMultiSelectWithoutCTA, onChange]\n    );\n\n    const ADD_CUSTOM_TAG_VALUE = '__add_custom_tag__';\n\n    const handleSelectFromDropdown = useCallback((option: DropdownOption) => {\n      if (disabled) return;\n\n      if (option.value === ADD_CUSTOM_TAG_VALUE) {\n        const trimmed = inputValue.trim();\n        if (!trimmed) return;\n        const newTags = [...tags];\n        if (!newTags.some((tag) => tag.value === trimmed)) {\n          newTags.push({ label: trimmed, value: trimmed });\n          setTags(newTags);\n          onChange?.(newTags.map((tag) => tag.value));\n        }\n        setInputValue('');\n        setIsDropdownOpen(false);\n        return;\n      }\n\n      if (isMultiSelect) {\n        const isSelected = tags.some(tag => tag.value === option.value);\n        handleMultiSelectDropdownOptionClick(!isSelected, option);\n      } else {\n        handleSelectOption(option);\n      }\n    }, [disabled, isMultiSelect, tags, inputValue, onChange, handleMultiSelectDropdownOptionClick, handleSelectOption]);\n\n    const effectiveItems: DropdownOption[] =\n      filteredOptions.length > 0\n        ? filteredOptions\n        : allowCustomTags && inputValue.trim()\n          ? [{ id: ADD_CUSTOM_TAG_VALUE, label: `Add \"${inputValue.trim()}\"`, value: ADD_CUSTOM_TAG_VALUE }]\n          : [];\n\n    // Combobox hook for keyboard navigation and ARIA\n    const {\n      containerProps,\n      inputProps: comboboxInputProps,\n      listboxProps,\n      getOptionProps,\n      highlightedIndex,\n      setHighlightedIndex\n    } = useCombobox({\n      items: effectiveItems,\n      isOpen: isDropdownOpen,\n      onOpenChange: setIsDropdownOpen,\n      onSelect: handleSelectFromDropdown,\n      listboxId,\n      hasItems: effectiveItems.length > 0\n    });\n\n\n    useEffect(() => {\n      if (applyClickedRef.current) {\n        applyClickedRef.current = false;\n        return;\n      }\n      setTags(initValues(value || []));\n    }, [value, options, isDropdownOpen]);\n\n\n    useEffect(() => {\n      // const isInputEmpty = !inputValue.trim();\n      const filtered = options.filter(option =>\n        option.label.toLowerCase().includes(inputValue.toLowerCase()) ||\n        option.value.toLowerCase().includes(inputValue.toLowerCase())\n      );\n      setFilteredOptions(filtered);\n    }, [inputValue, options]);\n\n    const handleRemoveTag = (indexToRemove: number) => {\n      if (disabled) return;\n      \n      const newTags = tags.filter((_, index) => index !== indexToRemove);\n      setTags(newTags);\n      \n      //in multiselect if tag removed while dorpdownopen, do not call onchange\n      if(!isMultiSelect || isMultiSelectWithoutCTA ||(isMultiSelect && !isDropdownOpen)) {\n        onChange?.(newTags.map(tag => tag.value));\n      }\n    };\n\n    const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n      if (disabled) return;\n      \n      // Handle Backspace to remove last tag (preserve existing behavior)\n      if (e.key === 'Backspace' && inputValue === \"\" && tags.length > 0) {\n        e.preventDefault();\n        const newTags = tags.slice(0, -1);\n        setTags(newTags);\n        onChange?.(newTags.map(tag => tag.value));\n        return;\n      }\n\n      // Handle Enter for custom tags when no options match\n      if (e.key === 'Enter' && inputValue.trim() && filteredOptions.length === 0 && allowCustomTags) {\n        e.preventDefault();\n        const newTags = [...tags];\n        if (!newTags.some(tag => tag.value === inputValue.trim())) {\n          newTags.push({ label: inputValue.trim(), value: inputValue.trim() });\n          setTags(newTags);\n          onChange?.(newTags.map(tag => tag.value));\n        }\n        setInputValue('');\n        setHighlightedIndex(-1);\n        setIsDropdownOpen(false);\n        return;\n      }\n\n      // Let combobox hook handle all other keyboard events (Arrow keys, Enter, Escape, etc.)\n      comboboxInputProps.onKeyDown(e);\n    };\n\n    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      if (disabled) return;\n      \n      const newValue = e.target.value;\n      setInputValue(newValue);\n      setHighlightedIndex(-1); // Reset highlighted index when user types\n      \n      if (newValue.trim() && !isDropdownOpen) {\n        setIsDropdownOpen(true);\n      }\n    };\n\n    const handleInputFocus = () => {\n      if (disabled) return;\n      \n      if (inputValue.trim() || options.length > 0) {\n        setIsDropdownOpen(true);\n      }\n    };\n\n    const handleInputContainerClick = (e: React.MouseEvent) => {\n      if (disabled) return;\n      \n      e.stopPropagation();\n      inputRef.current?.focus();\n      if (!isDropdownOpen && (inputValue.trim() || options.length > 0)) {\n        setIsDropdownOpen(true);\n      }\n    };\n\n    const handlePopoverWrapperClick = (e: React.MouseEvent) => {\n      if (disabled) {\n        e.preventDefault();\n        e.stopPropagation();\n        return;\n      }\n      \n      const target = e.target as HTMLElement;\n      const isInputArea = target.closest('.input-with-tags-container');\n      if (isInputArea) {\n        e.stopPropagation();\n      }\n    };\n\n    const toggleDropdown = () => {\n      if (disabled) return;\n      setIsDropdownOpen(!isDropdownOpen);\n    };\n\n    useImperativeHandle(ref, () => ({ toggleDropdown }), []);\n\n    const defaultRenderOption = (\n      option: DropdownOption,\n      index: number,\n      onSelect: (option: DropdownOption) => void,\n      disabled: boolean\n    ) => {\n      const isSelected = tags.some((tag) => tag.value === option.value);\n      const isHighlighted = highlightedIndex === index;\n      const optionProps = getOptionProps(index, isSelected);\n      \n      return (\n        <div\n          key={option.id}\n          {...optionProps}\n          className={`dropdown-with-input-tags-option ${isHighlighted ? 'highlighted' : ''}`}\n          onClick={() => !disabled && onSelect(option)}\n          onMouseEnter={() => setHighlightedIndex(index)}\n          data-automation-id={`${automationId}-option-${option.id}`}\n        >\n          <span className=\"option-label\">{option.label}</span>\n          {option.value !== option.label && <span className=\"option-value\">{option.value}</span>}\n        </div>\n      );\n    };\n    const handleApplySelectedDropDownValues = () => {\n      applyClickedRef.current = true;\n      const newTagValues = tags.map(tag => tag.value);\n      onChange?.(newTagValues);\n      setIsDropdownOpen(false);\n    };\n\n    const clearSelectedDropDownValues = () => {\n      setTags([]);\n    };\n    const multiSelectRenderOption = (option: DropdownOption, index: number) => {\n      const isOptionSelected = tags.some(tag => tag.value === option.value);\n      const isHighlighted = highlightedIndex === index;\n      const optionProps = getOptionProps(index, isOptionSelected);\n      \n      return (\n        <div\n          key={option.id}\n          {...optionProps}\n          className={`dropdown-with-input-tags-option dropdown-with-input-tags-multi-select-option ${isHighlighted ? 'highlighted' : ''}`}\n          aria-checked={isOptionSelected}\n          onClick={() => !disabled && handleMultiSelectDropdownOptionClick(!isOptionSelected, option)}\n          onMouseEnter={() => setHighlightedIndex(index)}\n          data-automation-id={`${automationId}-option-${option.id}`}\n        >\n          <span onClick={(e) => e.stopPropagation()}>\n            <Checkbox\n              automationId=\"checkbox\"\n              className=\"checkbox\"\n              defaultChecked={isOptionSelected}\n              onChange={(value) => handleMultiSelectDropdownOptionClick(value, option)}\n              label={option.label}\n            />\n          </span>\n        </div>\n      );\n    };\n\n    const multiSelectRenderCTAs = () => {\n      return (\n        <div className=\"dropdown-with-input-tags-ctas-container\">\n          <Button label=\"Clear\" type=\"link\" size=\"sm\" onClick={clearSelectedDropDownValues} automationId={`${automationId}-clear-button`} />\n          <Button label=\"Apply\" type=\"primary\" size=\"sm\" onClick={handleApplySelectedDropDownValues} automationId={`${automationId}-apply-button`} />\n        </div>\n      );\n    };\n\n    \n\n    return (\n      <div\n        className={`dropdown-with-input-tags-wrapper ${className} ${disabled ? 'disabled-wrapper' : ''}`}\n        data-automation-id={automationId}\n        {...containerProps}\n      >\n        {label && <label id={`${automationId}-label`} className=\"dropdown-with-input-tags-label\">{label}</label>}\n\n        <div onClick={handlePopoverWrapperClick}>\n          <Popover\n            ref={popoverRef}\n            className=\"dropdown-with-input-tags-popover\"\n            contentWidth=\"full\"\n            position=\"bottom-left\"\n            isPopoverOpen={!disabled && isDropdownOpen}\n            onPopoverToggle={disabled ? () => {} : setIsDropdownOpen}\n            disableClickToggle={true}\n            isWithPortal={isWithPortal}\n            renderPopoverContents={({ closePopoverCb }) => (\n              <>\n                <div\n                  {...listboxProps}\n                  className=\"dropdown-with-input-tags-content\"\n                  {...(isMultiSelect && { 'aria-multiselectable': 'true' })}\n                >\n                  {effectiveItems.length > 0 ? (\n                    effectiveItems.map((option, index) => {\n                      if (option.value === ADD_CUSTOM_TAG_VALUE) {\n                        const isHighlighted = highlightedIndex === index;\n                        const optionProps = getOptionProps(index, false);\n                        return (\n                          <div\n                            key={option.id}\n                            {...optionProps}\n                            className={`dropdown-with-input-tags-option dropdown-with-input-tags-custom-option ${isHighlighted ? 'highlighted' : ''}`}\n                            onClick={() => {\n                              if (disabled) return;\n                              handleSelectFromDropdown(option);\n                              closePopoverCb();\n                            }}\n                            onMouseEnter={() => setHighlightedIndex(index)}\n                          >\n                            Add \"{inputValue.trim()}\"\n                          </div>\n                        );\n                      }\n                      if (isMultiSelect) {\n                        return multiSelectRenderOption(option, index);\n                      }\n                      \n                      const isSelected = tags.some((tag) => tag.value === option.value);\n                      const isHighlighted = highlightedIndex === index;\n                      const optionProps = getOptionProps(index, isSelected);\n                      const optionPropsWithHandlers = {\n                        ...optionProps,\n                        onMouseEnter: () => setHighlightedIndex(index),\n                        className: `dropdown-with-input-tags-option ${isHighlighted ? 'highlighted' : ''}`\n                      };\n                      \n                      return renderOption\n                        ? renderOption(option, optionPropsWithHandlers, handleSelectOption)\n                        : defaultRenderOption(option, index, handleSelectOption, disabled);\n                    })\n                  ) : (\n                    <div className=\"dropdown-with-input-tags-no-options\">\n                      <div className=\"dropdown-with-input-tags-no-options-text\" role=\"status\" aria-live=\"polite\">\n                        {noOptionsMessage}\n                      </div>\n                    </div>\n                  )}\n                </div>\n                {isMultiSelect && !isMultiSelectWithoutCTA && multiSelectRenderCTAs()}\n              </>\n            )}\n            renderPopoverSrcElement={() => (\n              <div className=\"dropdown-with-input-tags-input-container\">\n                <div\n                  className={`input-with-tags-container ${disabled ? 'disabled-input-with-tags-container' : ''}`}\n                  onClick={handleInputContainerClick}\n                >\n                  {tags.map((tag, index) => (\n                    <span key={index} className=\"tag-in-inputwithtags\">\n                      {tag[displayTagBy]}\n                      {!disabled && (\n                        <Icon\n                          name=\"close\"\n                          className=\"close-icon-in-inputwithtags\"\n                          ariaLabel={`Remove tag ${tag[displayTagBy]}`}\n                          onClick={() => handleRemoveTag(index)}\n                          shouldStopPropagation\n                        />\n                      )}\n                    </span>\n                  ))}\n                  {(showInput ||!tags.length) && (\n                    <input\n                      ref={inputRef}\n                      {...comboboxInputProps}\n                      type=\"text\"\n                      value={inputValue}\n                      onChange={handleInputChange}\n                      onKeyDown={handleKeyDown}\n                      onFocus={handleInputFocus}\n                      placeholder={tags.length === 0 ? placeholder : ''}\n                      className=\"input-with-tags-input\"\n                      disabled={disabled}\n                      aria-label={label || 'Search and select options'}\n                    />\n                  )}\n                </div>\n              </div>\n            )}\n            automationId={automationId}\n            popoverContentAutomationId={`${automationId}-content`}\n          />\n        </div>\n      </div>\n    );\n  }\n); "],"names":["DropdownWithInputTags","value","onChange","placeholder","className","options","renderOption","label","automationId","noOptionsMessage","allowCustomTags","disabled","type","showInput","displayTagBy","isWithPortal","ref","initValues","values","map","val","found","find","opt","tags","setTags","useState","inputValue","setInputValue","filteredOptions","setFilteredOptions","isDropdownOpen","setIsDropdownOpen","popoverRef","useRef","inputRef","applyClickedRef","isMultiSelectWithoutCTA","isMultiSelect","listboxId","useStableId","handleSelectOption","useCallback","option","newTags","some","tag","push","handleMultiSelectDropdownOptionClick","isSelected","newSelectedTags","filter","ADD_CUSTOM_TAG_VALUE","handleSelectFromDropdown","trimmed","trim","effectiveItems","length","id","containerProps","inputProps","comboboxInputProps","listboxProps","getOptionProps","highlightedIndex","setHighlightedIndex","useCombobox","items","isOpen","onOpenChange","onSelect","hasItems","useEffect","current","filtered","toLowerCase","includes","handleRemoveTag","indexToRemove","_","index","handleKeyDown","e","key","preventDefault","slice","onKeyDown","handleInputChange","newValue","target","handleInputFocus","handleInputContainerClick","stopPropagation","focus","handlePopoverWrapperClick","closest","toggleDropdown","useImperativeHandle","defaultRenderOption","isHighlighted","optionProps","React","createElement","_extends","onClick","onMouseEnter","handleApplySelectedDropDownValues","newTagValues","clearSelectedDropDownValues","multiSelectRenderOption","isOptionSelected","Checkbox","defaultChecked","multiSelectRenderCTAs","Button","size","Popover","contentWidth","position","isPopoverOpen","onPopoverToggle","disableClickToggle","renderPopoverContents","closePopoverCb","Fragment","optionPropsWithHandlers","role","renderPopoverSrcElement","Icon","name","ariaLabel","shouldStopPropagation","onFocus","popoverContentAutomationId"],"mappings":"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"}
+{"version":3,"file":"index38.js","sources":["../src/components/DropdownWithInputTags/index.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef, forwardRef, ForwardedRef, useImperativeHandle, KeyboardEvent, useCallback } from 'react';\nimport { Popover, PopoverHandle } from '../Popover';\nimport { Icon } from '../Icon';\nimport { Checkbox } from '../Checkbox';\nimport { Button } from '../Button';\nimport { useCombobox } from '../../utils/a11y';\nimport { useStableId } from '../../utils/useStableId';\nimport './styles.scss';\n\nexport interface DropdownOption {\n  id: string | number;\n  label: string;\n  value: string;\n  [key: string]: any; // Allow additional properties\n}\n\nexport interface DropdownWithInputTagsHandle {\n  toggleDropdown: () => void;\n}\n\nexport interface DropdownWithInputTagsProps {\n  value: string[];\n  onChange?: (tags: string[]) => void;\n  placeholder?: string;\n  className?: string;\n  options?: DropdownOption[];\n  renderOption?: (\n    option: DropdownOption, \n    props: { \n      id: string; \n      role: 'option'; \n      'aria-selected': boolean; \n      onMouseEnter: () => void;\n      className: string;\n    },\n    onSelect: (option: DropdownOption) => void\n  ) => React.ReactNode;\n  label?: string;\n  automationId?: string;\n  noOptionsMessage?: string;\n  allowCustomTags?: boolean;\n  disabled?: boolean;\n  type?: 'select' | 'multi-select' |'multi-select-without-cta';\n  showInput?: boolean;\n  displayTagBy?: 'label' | 'value';\n  isWithPortal?: boolean;\n}\n\nexport const DropdownWithInputTags = forwardRef<DropdownWithInputTagsHandle, DropdownWithInputTagsProps>(\n  (\n    {\n      value,\n      onChange,\n      placeholder = \"Type to search or add custom tags...\",\n      className = '',\n      options = [],\n      renderOption,\n      label,\n      automationId = '',\n      noOptionsMessage = \"No options found\",\n      allowCustomTags = true,\n      disabled = false,\n      type = 'select',\n      showInput = true,\n      displayTagBy = 'label',\n      isWithPortal = false\n    },\n    ref: ForwardedRef<DropdownWithInputTagsHandle>\n  ) => {\n    // Define initValues at the top, right after props\n    const initValues = (values: string[]) => {\n      return values.map(val => {\n        const found = options.find(opt => opt.value === val);\n        return found ? { label: found.label, value: found.value } : { label: val, value: val };\n      });\n    };\n\n    // Now use it in useState\n    const [tags, setTags] = useState<{ label: string; value: string }[]>(() => {\n      return initValues(value || []);\n    });\n    const [inputValue, setInputValue] = useState('');\n    const [filteredOptions, setFilteredOptions] = useState<DropdownOption[]>(options);\n    const [isDropdownOpen, setIsDropdownOpen] = useState(false);\n    const popoverRef = useRef<PopoverHandle>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const applyClickedRef = useRef<boolean>(false);\n    \n    const isMultiSelectWithoutCTA = type === 'multi-select-without-cta';\n    const isMultiSelect = type === 'multi-select' ||isMultiSelectWithoutCTA;\n\n    // Generate stable ID for listbox\n    const listboxId = useStableId(automationId, 'dropdown-input-tags-listbox');\n\n    const handleSelectOption = useCallback(\n      (option: DropdownOption) => {\n        if (disabled) return;\n\n        const newTags = [...tags];\n        if (!newTags.some((tag) => tag.value === option.value)) {\n          newTags.push({ label: option.label, value: option.value });\n          setTags(newTags);\n          onChange?.(newTags.map((tag) => tag.value));\n        }\n        setInputValue('');\n        setIsDropdownOpen(false);\n      },\n      [disabled, tags, onChange]\n    );\n\n    const handleMultiSelectDropdownOptionClick = useCallback(\n      (isSelected: boolean, option: DropdownOption) => {\n        let newSelectedTags: { label: string; value: string }[] = [];\n        if (isSelected) {\n          newSelectedTags = [...tags, { label: option.label, value: option.value }];\n        } else {\n          newSelectedTags = tags.filter((tag) => tag.value !== option.value);\n        }\n        setTags(newSelectedTags);\n        if (isMultiSelectWithoutCTA) {\n          onChange?.(newSelectedTags.map((tag) => tag.value));\n        }\n      },\n      [tags, isMultiSelectWithoutCTA, onChange]\n    );\n\n    const ADD_CUSTOM_TAG_VALUE = '__add_custom_tag__';\n\n    const handleSelectFromDropdown = useCallback((option: DropdownOption) => {\n      if (disabled) return;\n\n      if (option.value === ADD_CUSTOM_TAG_VALUE) {\n        const trimmed = inputValue.trim();\n        if (!trimmed) return;\n        const newTags = [...tags];\n        if (!newTags.some((tag) => tag.value === trimmed)) {\n          newTags.push({ label: trimmed, value: trimmed });\n          setTags(newTags);\n          onChange?.(newTags.map((tag) => tag.value));\n        }\n        setInputValue('');\n        setIsDropdownOpen(false);\n        return;\n      }\n\n      if (isMultiSelect) {\n        const isSelected = tags.some(tag => tag.value === option.value);\n        handleMultiSelectDropdownOptionClick(!isSelected, option);\n      } else {\n        handleSelectOption(option);\n      }\n    }, [disabled, isMultiSelect, tags, inputValue, onChange, handleMultiSelectDropdownOptionClick, handleSelectOption]);\n\n    const effectiveItems: DropdownOption[] =\n      filteredOptions.length > 0\n        ? filteredOptions\n        : allowCustomTags && inputValue.trim()\n          ? [{ id: ADD_CUSTOM_TAG_VALUE, label: `Add \"${inputValue.trim()}\"`, value: ADD_CUSTOM_TAG_VALUE }]\n          : [];\n\n    // Combobox hook for keyboard navigation and ARIA\n    const {\n      containerProps,\n      inputProps: comboboxInputProps,\n      listboxProps,\n      getOptionProps,\n      highlightedIndex,\n      setHighlightedIndex\n    } = useCombobox({\n      items: effectiveItems,\n      isOpen: isDropdownOpen,\n      onOpenChange: setIsDropdownOpen,\n      onSelect: handleSelectFromDropdown,\n      listboxId,\n      hasItems: effectiveItems.length > 0\n    });\n\n\n    useEffect(() => {\n      if (applyClickedRef.current) {\n        applyClickedRef.current = false;\n        return;\n      }\n      setTags(initValues(value || []));\n    }, [value, options, isDropdownOpen]);\n\n\n    useEffect(() => {\n      // const isInputEmpty = !inputValue.trim();\n      const filtered = options.filter(option =>\n        option.label.toLowerCase().includes(inputValue.toLowerCase()) ||\n        option.value.toLowerCase().includes(inputValue.toLowerCase())\n      );\n      setFilteredOptions(filtered);\n    }, [inputValue, options]);\n\n    const handleRemoveTag = (indexToRemove: number) => {\n      if (disabled) return;\n      \n      const newTags = tags.filter((_, index) => index !== indexToRemove);\n      setTags(newTags);\n      \n      //in multiselect if tag removed while dorpdownopen, do not call onchange\n      if(!isMultiSelect || isMultiSelectWithoutCTA ||(isMultiSelect && !isDropdownOpen)) {\n        onChange?.(newTags.map(tag => tag.value));\n      }\n    };\n\n    const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n      if (disabled) return;\n      \n      // Handle Backspace to remove last tag (preserve existing behavior)\n      if (e.key === 'Backspace' && inputValue === \"\" && tags.length > 0) {\n        e.preventDefault();\n        const newTags = tags.slice(0, -1);\n        setTags(newTags);\n        onChange?.(newTags.map(tag => tag.value));\n        return;\n      }\n\n      // Handle Enter for custom tags when no options match\n      if (e.key === 'Enter' && inputValue.trim() && filteredOptions.length === 0 && allowCustomTags) {\n        e.preventDefault();\n        const newTags = [...tags];\n        if (!newTags.some(tag => tag.value === inputValue.trim())) {\n          newTags.push({ label: inputValue.trim(), value: inputValue.trim() });\n          setTags(newTags);\n          onChange?.(newTags.map(tag => tag.value));\n        }\n        setInputValue('');\n        setHighlightedIndex(-1);\n        setIsDropdownOpen(false);\n        return;\n      }\n\n      // Let combobox hook handle all other keyboard events (Arrow keys, Enter, Escape, etc.)\n      comboboxInputProps.onKeyDown(e);\n    };\n\n    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      if (disabled) return;\n      \n      const newValue = e.target.value;\n      setInputValue(newValue);\n      setHighlightedIndex(-1); // Reset highlighted index when user types\n      \n      if (newValue.trim() && !isDropdownOpen) {\n        setIsDropdownOpen(true);\n      }\n    };\n\n    const handleInputFocus = () => {\n      if (disabled) return;\n      \n      if (inputValue.trim() || options.length > 0) {\n        setIsDropdownOpen(true);\n      }\n    };\n\n    const handleInputContainerClick = (e: React.MouseEvent) => {\n      if (disabled) return;\n      \n      e.stopPropagation();\n      inputRef.current?.focus();\n      if (!isDropdownOpen && (inputValue.trim() || options.length > 0)) {\n        setIsDropdownOpen(true);\n      }\n    };\n\n    const handlePopoverWrapperClick = (e: React.MouseEvent) => {\n      if (disabled) {\n        e.preventDefault();\n        e.stopPropagation();\n        return;\n      }\n      \n      const target = e.target as HTMLElement;\n      const isInputArea = target.closest('.input-with-tags-container');\n      if (isInputArea) {\n        e.stopPropagation();\n      }\n    };\n\n    const toggleDropdown = () => {\n      if (disabled) return;\n      setIsDropdownOpen(!isDropdownOpen);\n    };\n\n    useImperativeHandle(ref, () => ({ toggleDropdown }), []);\n\n    const defaultRenderOption = (\n      option: DropdownOption,\n      index: number,\n      onSelect: (option: DropdownOption) => void,\n      disabled: boolean\n    ) => {\n      const isSelected = tags.some((tag) => tag.value === option.value);\n      const isHighlighted = highlightedIndex === index;\n      const optionProps = getOptionProps(index, isSelected);\n      \n      return (\n        <div\n          key={option.id}\n          {...optionProps}\n          className={`dropdown-with-input-tags-option ${isHighlighted ? 'highlighted' : ''}`}\n          onClick={() => !disabled && onSelect(option)}\n          onMouseEnter={() => setHighlightedIndex(index)}\n          data-automation-id={`${automationId}-option-${option.id}`}\n        >\n          <span className=\"option-label\">{option.label}</span>\n          {option.value !== option.label && <span className=\"option-value\">{option.value}</span>}\n        </div>\n      );\n    };\n    const handleApplySelectedDropDownValues = () => {\n      applyClickedRef.current = true;\n      const newTagValues = tags.map(tag => tag.value);\n      onChange?.(newTagValues);\n      setIsDropdownOpen(false);\n    };\n\n    const clearSelectedDropDownValues = () => {\n      setTags([]);\n    };\n    const multiSelectRenderOption = (option: DropdownOption, index: number) => {\n      const isOptionSelected = tags.some(tag => tag.value === option.value);\n      const isHighlighted = highlightedIndex === index;\n      const optionProps = getOptionProps(index, isOptionSelected);\n      \n      return (\n        <div\n          key={option.id}\n          {...optionProps}\n          className={`dropdown-with-input-tags-option dropdown-with-input-tags-multi-select-option ${isHighlighted ? 'highlighted' : ''}`}\n          aria-checked={isOptionSelected}\n          onClick={() => !disabled && handleMultiSelectDropdownOptionClick(!isOptionSelected, option)}\n          onMouseEnter={() => setHighlightedIndex(index)}\n          data-automation-id={`${automationId}-option-${option.id}`}\n        >\n          <span onClick={(e) => e.stopPropagation()}>\n            <Checkbox\n              automationId=\"checkbox\"\n              className=\"checkbox\"\n              defaultChecked={isOptionSelected}\n              onChange={(value) => handleMultiSelectDropdownOptionClick(value, option)}\n              label={option.label}\n            />\n          </span>\n        </div>\n      );\n    };\n\n    const multiSelectRenderCTAs = () => {\n      return (\n        <div className=\"dropdown-with-input-tags-ctas-container\">\n          <Button label=\"Clear\" type=\"link\" size=\"sm\" onClick={clearSelectedDropDownValues} automationId={`${automationId}-clear-button`} />\n          <Button label=\"Apply\" type=\"primary\" size=\"sm\" onClick={handleApplySelectedDropDownValues} automationId={`${automationId}-apply-button`} />\n        </div>\n      );\n    };\n\n    \n\n    return (\n      <div\n        className={`dropdown-with-input-tags-wrapper ${className} ${disabled ? 'disabled-wrapper' : ''}`}\n        data-automation-id={automationId}\n        {...containerProps}\n      >\n        {label && <label id={`${automationId}-label`} className=\"dropdown-with-input-tags-label\">{label}</label>}\n\n        <div onClick={handlePopoverWrapperClick}>\n          <Popover\n            ref={popoverRef}\n            className=\"dropdown-with-input-tags-popover\"\n            contentWidth=\"full\"\n            position=\"bottom-left\"\n            isPopoverOpen={!disabled && isDropdownOpen}\n            onPopoverToggle={disabled ? () => {} : setIsDropdownOpen}\n            disableClickToggle={true}\n            isWithPortal={isWithPortal}\n            renderPopoverContents={({ closePopoverCb }) => (\n              <>\n                <div\n                  {...listboxProps}\n                  className=\"dropdown-with-input-tags-content\"\n                  {...(isMultiSelect && { 'aria-multiselectable': 'true' })}\n                >\n                  {effectiveItems.length > 0 ? (\n                    effectiveItems.map((option, index) => {\n                      if (option.value === ADD_CUSTOM_TAG_VALUE) {\n                        const isHighlighted = highlightedIndex === index;\n                        const optionProps = getOptionProps(index, false);\n                        return (\n                          <div\n                            key={option.id}\n                            {...optionProps}\n                            className={`dropdown-with-input-tags-option dropdown-with-input-tags-custom-option ${isHighlighted ? 'highlighted' : ''}`}\n                            onClick={() => {\n                              if (disabled) return;\n                              handleSelectFromDropdown(option);\n                              closePopoverCb();\n                            }}\n                            onMouseEnter={() => setHighlightedIndex(index)}\n                          >\n                            Add \"{inputValue.trim()}\"\n                          </div>\n                        );\n                      }\n                      if (isMultiSelect) {\n                        return multiSelectRenderOption(option, index);\n                      }\n                      \n                      const isSelected = tags.some((tag) => tag.value === option.value);\n                      const isHighlighted = highlightedIndex === index;\n                      const optionProps = getOptionProps(index, isSelected);\n                      const optionPropsWithHandlers = {\n                        ...optionProps,\n                        onMouseEnter: () => setHighlightedIndex(index),\n                        className: `dropdown-with-input-tags-option ${isHighlighted ? 'highlighted' : ''}`\n                      };\n                      \n                      return renderOption\n                        ? renderOption(option, optionPropsWithHandlers, handleSelectOption)\n                        : defaultRenderOption(option, index, handleSelectOption, disabled);\n                    })\n                  ) : (\n                    <div className=\"dropdown-with-input-tags-no-options\">\n                      <div className=\"dropdown-with-input-tags-no-options-text\" role=\"status\" aria-live=\"polite\">\n                        {noOptionsMessage}\n                      </div>\n                    </div>\n                  )}\n                </div>\n                {isMultiSelect && !isMultiSelectWithoutCTA && multiSelectRenderCTAs()}\n              </>\n            )}\n            renderPopoverSrcElement={() => (\n              <div className=\"dropdown-with-input-tags-input-container\">\n                <div\n                  className={`input-with-tags-container ${disabled ? 'disabled-input-with-tags-container' : ''}`}\n                  onClick={handleInputContainerClick}\n                >\n                  {tags.map((tag, index) => (\n                    <span key={index} className=\"tag-in-inputwithtags\">\n                      {tag[displayTagBy]}\n                      {!disabled && (\n                        <Icon\n                          name=\"close\"\n                          className=\"close-icon-in-inputwithtags\"\n                          ariaLabel={`Remove tag ${tag[displayTagBy]}`}\n                          onClick={() => handleRemoveTag(index)}\n                          shouldStopPropagation\n                        />\n                      )}\n                    </span>\n                  ))}\n                  {(showInput ||!tags.length) && (\n                    <input\n                      ref={inputRef}\n                      {...comboboxInputProps}\n                      type=\"text\"\n                      value={inputValue}\n                      onChange={handleInputChange}\n                      onKeyDown={handleKeyDown}\n                      onFocus={handleInputFocus}\n                      placeholder={tags.length === 0 ? placeholder : ''}\n                      className=\"input-with-tags-input\"\n                      disabled={disabled}\n                      aria-label={label || 'Search and select options'}\n                    />\n                  )}\n                </div>\n              </div>\n            )}\n            automationId={automationId}\n            popoverContentAutomationId={`${automationId}-content`}\n          />\n        </div>\n      </div>\n    );\n  }\n); "],"names":["DropdownWithInputTags","value","onChange","placeholder","className","options","renderOption","label","automationId","noOptionsMessage","allowCustomTags","disabled","type","showInput","displayTagBy","isWithPortal","ref","initValues","values","map","val","found","find","opt","tags","setTags","useState","inputValue","setInputValue","filteredOptions","setFilteredOptions","isDropdownOpen","setIsDropdownOpen","popoverRef","useRef","inputRef","applyClickedRef","isMultiSelectWithoutCTA","isMultiSelect","listboxId","useStableId","handleSelectOption","useCallback","option","newTags","some","tag","push","handleMultiSelectDropdownOptionClick","isSelected","newSelectedTags","filter","ADD_CUSTOM_TAG_VALUE","handleSelectFromDropdown","trimmed","trim","effectiveItems","length","id","containerProps","inputProps","comboboxInputProps","listboxProps","getOptionProps","highlightedIndex","setHighlightedIndex","useCombobox","items","isOpen","onOpenChange","onSelect","hasItems","useEffect","current","filtered","toLowerCase","includes","handleRemoveTag","indexToRemove","_","index","handleKeyDown","e","key","preventDefault","slice","onKeyDown","handleInputChange","newValue","target","handleInputFocus","handleInputContainerClick","stopPropagation","focus","handlePopoverWrapperClick","closest","toggleDropdown","useImperativeHandle","defaultRenderOption","isHighlighted","optionProps","React","createElement","_extends","onClick","onMouseEnter","handleApplySelectedDropDownValues","newTagValues","clearSelectedDropDownValues","multiSelectRenderOption","isOptionSelected","Checkbox","defaultChecked","multiSelectRenderCTAs","Button","size","Popover","contentWidth","position","isPopoverOpen","onPopoverToggle","disableClickToggle","renderPopoverContents","closePopoverCb","Fragment","optionPropsWithHandlers","role","renderPopoverSrcElement","Icon","name","ariaLabel","shouldStopPropagation","onFocus","popoverContentAutomationId"],"mappings":"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"}

package/dist/index39.js

@@ -1,6 +1,6 @@
 import e from "react";
-import { useStableId as A } from "./index199.js";
-import { mergeIds as P } from "./index200.js";
+import { useStableId as A } from "./index83.js";
+import { mergeIds as P } from "./index207.js";
 import { getA11yNameAttributes as _ } from "./index78.js";
 import "./index72.js";
 /* empty css         */

package/dist/index39.js.map

@@ -1 +1 @@
-{"version":3,"file":"index39.js","sources":["../src/components/Input/index.tsx"],"sourcesContent":["import React from 'react';\nimport { useStableId } from '../../utils/useStableId';\nimport { mergeIds } from '../../utils/mergeIds';\nimport { getA11yNameAttributes } from '../../utils/a11y';\nimport './style.scss';\n\ntype InputTag = 'input' | 'textarea';\n\ntype NativeInputProps = Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  | 'value'\n  | 'onChange'\n  | 'disabled'\n  | 'maxLength'\n  | 'id'\n  | 'aria-label'\n  | 'aria-labelledby'\n  | 'aria-describedby'\n  | 'children'\n>;\ntype NativeTextareaProps = Omit<\n  React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n  | 'value'\n  | 'onChange'\n  | 'disabled'\n  | 'maxLength'\n  | 'id'\n  | 'aria-label'\n  | 'aria-labelledby'\n  | 'aria-describedby'\n  | 'children'\n>;\n\ntype CommonInputProps = {\n  value: string;\n  disabled?: boolean;\n  maxLength?: number;\n  onChange: (value: string) => void;\n  onBlur?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;\n  onFocus?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;\n  tag?: InputTag;\n  error?: boolean;\n  errorMessage?: string;\n  label?: string;\n  placeholder?: string;\n  style?: React.CSSProperties;\n  inputStyle?: React.CSSProperties;\n  automationId?: string;\n  id?: string;\n  /**\n   * Accessible name when no visible label exists (icon-only / placeholder-only inputs).\n   * Prefer ariaLabelledBy when a visible label exists.\n   */\n  ariaLabel?: string;\n  /**\n   * ID(s) of visible element(s) that label this input.\n   * Useful for external labels outside the Input component.\n   */\n  ariaLabelledBy?: string;\n  /**\n   * ID(s) of element(s) that describe this input (hints, helper text, etc.).\n   * Will be merged with internal error/counter IDs.\n   */\n  ariaDescribedBy?: string;\n};\n\n/**\n * Input component with built-in label, error, and counter support.\n * \n * Native HTML input/textarea attributes are passed through, including:\n * - `required`, `readOnly`, `autoFocus`, `name`, `type`\n * - `autoComplete`, `inputMode`, `enterKeyHint`, `pattern`\n * - Note: accessible name/description is provided via ariaLabel/ariaLabelledBy/ariaDescribedBy props.\n * - `min`, `max`, `step` (for number inputs)\n * - `onKeyDown`, `onPaste`, and other event handlers\n */\nexport type InputProps = CommonInputProps & (NativeInputProps | NativeTextareaProps);\n\nexport function Input({\n  value,\n  onChange,\n  onBlur,\n  onFocus,\n  disabled,\n  maxLength,\n  tag,\n  error,\n  errorMessage,\n  label,\n  placeholder,\n  style,\n  inputStyle,\n  automationId = '',\n  id,\n  ariaLabel,\n  ariaLabelledBy,\n  ariaDescribedBy,\n  ...nativeProps\n}: InputProps) {\n  const Element: InputTag = tag || 'input';\n\n  const inputId = useStableId(id, 'se-input');\n  const errorId = `${inputId}-error`;\n  const countId = `${inputId}-count`;\n\n  const describedBy = mergeIds(\n    error && errorMessage ? errorId : undefined,\n    maxLength ? countId : undefined,\n    ariaDescribedBy\n  );\n\n  const accessibleNameProps = getA11yNameAttributes({\n    ariaLabel,\n    ariaLabelledBy,\n    ariaDescribedBy: describedBy\n  });\n\n  const handleFocus = (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n    onFocus?.(e);\n  };\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n    const nextValue = e.target.value;\n    onChange(nextValue);\n  };\n\n  const inputPropsBase = {\n    ...(nativeProps as Record<string, unknown>),\n    id: inputId,\n    value,\n    onChange: handleChange,\n    onBlur,\n    onFocus: handleFocus,\n    disabled,\n    className: `${error ? 'input-container-error' : 'input-container-default'} ${\n      disabled ? 'input-container-disabled' : ''\n    }`,\n    maxLength: maxLength ?? undefined,\n    placeholder: placeholder,\n    style: inputStyle,\n    'aria-invalid': error ? 'true' : undefined,\n    ...accessibleNameProps\n  };\n\n  return (\n    <div className=\"input-main-container\" style={style} data-automation-id={automationId}>\n      {label && (\n        <label\n          className={`label-container ${disabled ? 'label-container-disabled' : ''}`}\n          htmlFor={inputId}\n        >\n          {label}\n        </label>\n      )}\n      {React.createElement(Element, inputPropsBase)}\n      {(error || maxLength) &&\n        <div className={`${error ? 'error-and-max-word' : 'max-word-container'} ${disabled ? 'disabled' : ''}`}>\n          {error && errorMessage && (\n            <div key={errorMessage} id={errorId} className=\"error-message\" role=\"alert\">\n              {errorMessage}\n            </div>\n          )}\n          {maxLength && (\n            <div id={countId} className=\"max-word\" aria-live=\"polite\" aria-atomic=\"true\">\n              <span>{value?.length + '/' + maxLength}</span>\n            </div>\n          )}\n        </div>\n      }\n    </div>\n  );\n}\n"],"names":["React__default","useStableId","mergeIds","getA11yNameAttributes","Input","value","onChange","onBlur","onFocus","disabled","maxLength","tag","error","errorMessage","label","placeholder","style","inputStyle","automationId","id","ariaLabel","ariaLabelledBy","ariaDescribedBy","nativeProps","Element","inputId","errorId","countId","describedBy","undefined","accessibleNameProps","inputPropsBase","handleChange","e","nextValue","target","handleFocus","className","React","createElement","htmlFor","key","role","length"],"mappings":"AA8EO,OAAAA,OAAA;AAAA,SAAA,eAAAC,SAAA;AAAA,SAAA,YAAAC,SAAA;AAAA,SAAA,yBAAAC,SAAA;AAAA,OAAA;AAAA,OAAA;AAAA,SAASC,EAAM;AAAA,EACpBC,OAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,YAAAA;AAAAA,EACAC,cAAAA,IAAe;AAAA,EACfC,IAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,gBAAAA;AAAAA,EACAC,iBAAAA;AAAAA,EACA,GAAGC;AACO,GAAG;AACb,QAAMC,IAAoBb,KAAO,SAE3Bc,IAAUxB,EAAYkB,GAAI,UAAU,GACpCO,IAAU,GAAGD,CAAO,UACpBE,IAAU,GAAGF,CAAO,UAEpBG,IAAc1B,EAClBU,KAASC,IAAea,IAAUG,QAClCnB,IAAYiB,IAAUE,QACtBP,CACF,GAEMQ,IAAsB3B,EAAsB;AAAA,IAChDiB,WAAAA;AAAAA,IACAC,gBAAAA;AAAAA,IACAC,iBAAiBM;AAAAA,EAAAA,CAClB,GAWKG,IAAiB;AAAA,IACrB,GAAIR;AAAAA,IACJJ,IAAIM;AAAAA,IACJpB,OAAAA;AAAAA,IACAC,UATmB0B,CAACC,MAAiE;AAC/EC,YAAAA,IAAYD,EAAEE,OAAO9B;AAC3BC,MAAAA,EAAS4B,CAAS;AAAA,IAAA;AAAA,IAQlB3B,QAAAA;AAAAA,IACAC,SAfkB4B,CAACH,MAAgE;AACnFzB,MAAAA,IAAUyB,CAAC;AAAA,IAAA;AAAA,IAeXxB,UAAAA;AAAAA,IACA4B,WAAW,GAAGzB,IAAQ,0BAA0B,yBAAyB,IACvEH,IAAW,6BAA6B,EAAE;AAAA,IAE5CC,WAAWA,KAAamB;AAAAA,IACxBd,aAAAA;AAAAA,IACAC,OAAOC;AAAAA,IACP,gBAAgBL,IAAQ,SAASiB;AAAAA,IACjC,GAAGC;AAAAA,EAAAA;AAIHQ,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKF,WAAU;AAAA,IAAuBrB,OAAAA;AAAAA,IAAc,sBAAoBE;AAAAA,EACrEJ,GAAAA,KACCyB,gBAAAA,EAAAA,cAAA,SAAA;AAAA,IACEF,WAAW,mBAAmB5B,IAAW,6BAA6B,EAAE;AAAA,IACxE+B,SAASf;AAAAA,EAERX,GAAAA,CACI,GAERwB,gBAAAA,EAAMC,cAAcf,GAASO,CAAc,IAC1CnB,KAASF,MACT6B,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKF,WAAW,GAAGzB,IAAQ,uBAAuB,oBAAoB,IAAIH,IAAW,aAAa,EAAE;AAAA,EACjGG,GAAAA,KAASC,KACRyB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKE,KAAK5B;AAAAA,IAAcM,IAAIO;AAAAA,IAASW,WAAU;AAAA,IAAgBK,MAAK;AAAA,KACjE7B,CACE,GAENH,KACC4B,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKpB,IAAIQ;AAAAA,IAASU,WAAU;AAAA,IAAW,aAAU;AAAA,IAAS,eAAY;AAAA,EAAM,GAC1EE,gBAAAA,EAAAA,cAAA,QAAA,MAAOlC,GAAOsC,SAAS,MAAMjC,CAAgB,CAC1C,CAEJ,CAEJ;AAET;"}
+{"version":3,"file":"index39.js","sources":["../src/components/Input/index.tsx"],"sourcesContent":["import React from 'react';\nimport { useStableId } from '../../utils/useStableId';\nimport { mergeIds } from '../../utils/mergeIds';\nimport { getA11yNameAttributes } from '../../utils/a11y';\nimport './style.scss';\n\ntype InputTag = 'input' | 'textarea';\n\ntype NativeInputProps = Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  | 'value'\n  | 'onChange'\n  | 'disabled'\n  | 'maxLength'\n  | 'id'\n  | 'aria-label'\n  | 'aria-labelledby'\n  | 'aria-describedby'\n  | 'children'\n>;\ntype NativeTextareaProps = Omit<\n  React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n  | 'value'\n  | 'onChange'\n  | 'disabled'\n  | 'maxLength'\n  | 'id'\n  | 'aria-label'\n  | 'aria-labelledby'\n  | 'aria-describedby'\n  | 'children'\n>;\n\ntype CommonInputProps = {\n  value: string;\n  disabled?: boolean;\n  maxLength?: number;\n  onChange: (value: string) => void;\n  onBlur?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;\n  onFocus?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;\n  tag?: InputTag;\n  error?: boolean;\n  errorMessage?: string;\n  label?: string;\n  placeholder?: string;\n  style?: React.CSSProperties;\n  inputStyle?: React.CSSProperties;\n  automationId?: string;\n  id?: string;\n  /**\n   * Accessible name when no visible label exists (icon-only / placeholder-only inputs).\n   * Prefer ariaLabelledBy when a visible label exists.\n   */\n  ariaLabel?: string;\n  /**\n   * ID(s) of visible element(s) that label this input.\n   * Useful for external labels outside the Input component.\n   */\n  ariaLabelledBy?: string;\n  /**\n   * ID(s) of element(s) that describe this input (hints, helper text, etc.).\n   * Will be merged with internal error/counter IDs.\n   */\n  ariaDescribedBy?: string;\n};\n\n/**\n * Input component with built-in label, error, and counter support.\n * \n * Native HTML input/textarea attributes are passed through, including:\n * - `required`, `readOnly`, `autoFocus`, `name`, `type`\n * - `autoComplete`, `inputMode`, `enterKeyHint`, `pattern`\n * - Note: accessible name/description is provided via ariaLabel/ariaLabelledBy/ariaDescribedBy props.\n * - `min`, `max`, `step` (for number inputs)\n * - `onKeyDown`, `onPaste`, and other event handlers\n */\nexport type InputProps = CommonInputProps & (NativeInputProps | NativeTextareaProps);\n\nexport function Input({\n  value,\n  onChange,\n  onBlur,\n  onFocus,\n  disabled,\n  maxLength,\n  tag,\n  error,\n  errorMessage,\n  label,\n  placeholder,\n  style,\n  inputStyle,\n  automationId = '',\n  id,\n  ariaLabel,\n  ariaLabelledBy,\n  ariaDescribedBy,\n  ...nativeProps\n}: InputProps) {\n  const Element: InputTag = tag || 'input';\n\n  const inputId = useStableId(id, 'se-input');\n  const errorId = `${inputId}-error`;\n  const countId = `${inputId}-count`;\n\n  const describedBy = mergeIds(\n    error && errorMessage ? errorId : undefined,\n    maxLength ? countId : undefined,\n    ariaDescribedBy\n  );\n\n  const accessibleNameProps = getA11yNameAttributes({\n    ariaLabel,\n    ariaLabelledBy,\n    ariaDescribedBy: describedBy\n  });\n\n  const handleFocus = (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n    onFocus?.(e);\n  };\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n    const nextValue = e.target.value;\n    onChange(nextValue);\n  };\n\n  const inputPropsBase = {\n    ...(nativeProps as Record<string, unknown>),\n    id: inputId,\n    value,\n    onChange: handleChange,\n    onBlur,\n    onFocus: handleFocus,\n    disabled,\n    className: `${error ? 'input-container-error' : 'input-container-default'} ${\n      disabled ? 'input-container-disabled' : ''\n    }`,\n    maxLength: maxLength ?? undefined,\n    placeholder: placeholder,\n    style: inputStyle,\n    'aria-invalid': error ? 'true' : undefined,\n    ...accessibleNameProps\n  };\n\n  return (\n    <div className=\"input-main-container\" style={style} data-automation-id={automationId}>\n      {label && (\n        <label\n          className={`label-container ${disabled ? 'label-container-disabled' : ''}`}\n          htmlFor={inputId}\n        >\n          {label}\n        </label>\n      )}\n      {React.createElement(Element, inputPropsBase)}\n      {(error || maxLength) &&\n        <div className={`${error ? 'error-and-max-word' : 'max-word-container'} ${disabled ? 'disabled' : ''}`}>\n          {error && errorMessage && (\n            <div key={errorMessage} id={errorId} className=\"error-message\" role=\"alert\">\n              {errorMessage}\n            </div>\n          )}\n          {maxLength && (\n            <div id={countId} className=\"max-word\" aria-live=\"polite\" aria-atomic=\"true\">\n              <span>{value?.length + '/' + maxLength}</span>\n            </div>\n          )}\n        </div>\n      }\n    </div>\n  );\n}\n"],"names":["React__default","useStableId","mergeIds","getA11yNameAttributes","Input","value","onChange","onBlur","onFocus","disabled","maxLength","tag","error","errorMessage","label","placeholder","style","inputStyle","automationId","id","ariaLabel","ariaLabelledBy","ariaDescribedBy","nativeProps","Element","inputId","errorId","countId","describedBy","undefined","accessibleNameProps","inputPropsBase","handleChange","e","nextValue","target","handleFocus","className","React","createElement","htmlFor","key","role","length"],"mappings":"AA8EO,OAAAA,OAAA;AAAA,SAAA,eAAAC,SAAA;AAAA,SAAA,YAAAC,SAAA;AAAA,SAAA,yBAAAC,SAAA;AAAA,OAAA;AAAA,OAAA;AAAA,SAASC,EAAM;AAAA,EACpBC,OAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,YAAAA;AAAAA,EACAC,cAAAA,IAAe;AAAA,EACfC,IAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,gBAAAA;AAAAA,EACAC,iBAAAA;AAAAA,EACA,GAAGC;AACO,GAAG;AACb,QAAMC,IAAoBb,KAAO,SAE3Bc,IAAUxB,EAAYkB,GAAI,UAAU,GACpCO,IAAU,GAAGD,CAAO,UACpBE,IAAU,GAAGF,CAAO,UAEpBG,IAAc1B,EAClBU,KAASC,IAAea,IAAUG,QAClCnB,IAAYiB,IAAUE,QACtBP,CACF,GAEMQ,IAAsB3B,EAAsB;AAAA,IAChDiB,WAAAA;AAAAA,IACAC,gBAAAA;AAAAA,IACAC,iBAAiBM;AAAAA,EAAAA,CAClB,GAWKG,IAAiB;AAAA,IACrB,GAAIR;AAAAA,IACJJ,IAAIM;AAAAA,IACJpB,OAAAA;AAAAA,IACAC,UATmB0B,CAACC,MAAiE;AACrF,YAAMC,IAAYD,EAAEE,OAAO9B;AAC3BC,MAAAA,EAAS4B,CAAS;AAAA,IACpB;AAAA,IAOE3B,QAAAA;AAAAA,IACAC,SAfkB4B,CAACH,MAAgE;AACnFzB,MAAAA,IAAUyB,CAAC;AAAA,IACb;AAAA,IAcExB,UAAAA;AAAAA,IACA4B,WAAW,GAAGzB,IAAQ,0BAA0B,yBAAyB,IACvEH,IAAW,6BAA6B,EAAE;AAAA,IAE5CC,WAAWA,KAAamB;AAAAA,IACxBd,aAAAA;AAAAA,IACAC,OAAOC;AAAAA,IACP,gBAAgBL,IAAQ,SAASiB;AAAAA,IACjC,GAAGC;AAAAA,EAAAA;AAGL,SACEQ,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKF,WAAU;AAAA,IAAuBrB,OAAAA;AAAAA,IAAc,sBAAoBE;AAAAA,EAAAA,GACrEJ,KACCwB,gBAAAA,EAAAC,cAAA,SAAA;AAAA,IACEF,WAAW,mBAAmB5B,IAAW,6BAA6B,EAAE;AAAA,IACxE+B,SAASf;AAAAA,EAAAA,GAERX,CACI,GAERwB,gBAAAA,EAAMC,cAAcf,GAASO,CAAc,IAC1CnB,KAASF,MACT4B,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKF,WAAW,GAAGzB,IAAQ,uBAAuB,oBAAoB,IAAIH,IAAW,aAAa,EAAE;AAAA,EAAA,GACjGG,KAASC,KACRyB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKE,KAAK5B;AAAAA,IAAcM,IAAIO;AAAAA,IAASW,WAAU;AAAA,IAAgBK,MAAK;AAAA,EAAA,GACjE7B,CACE,GAENH,KACC4B,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKpB,IAAIQ;AAAAA,IAASU,WAAU;AAAA,IAAW,aAAU;AAAA,IAAS,eAAY;AAAA,EAAA,GACpEC,gBAAAA,EAAAC,cAAA,QAAA,MAAOlC,GAAOsC,SAAS,MAAMjC,CAAgB,CAC1C,CAEJ,CAEJ;AAET;"}

package/dist/index4.js.map

@@ -1 +1 @@
-{"version":3,"file":"index4.js","sources":["../src/components/Button/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Map } from '../../utils/common.types';\nimport { useAccessiblePress, getA11yNameAttributes } from '../../utils/a11y';\nimport { Icon, IconProps } from '../Icon';\nimport './style.scss';\n\n/**\n * Allows native button attributes (aria-*, data-*, etc.) to be passed through,\n * but keeps our own onClick/disabled/type typing AND aria-label/aria-labelledby/aria-describedby.\n * Note: We omit 'type' because we use it for button variant, not HTML type attribute.\n * The HTML type is always set to 'button' internally.\n */\ntype NativeButtonProps = Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  'onClick' | 'disabled' | 'type' | 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'aria-pressed'\n>;\n\nexport interface ButtonProps extends NativeButtonProps {\n  /**\n   * Type of the button. \n   */\n  type?: 'primary' | 'secondary' | 'ghost' | 'link' | 'unstyled';\n  /**\n   * Color pallet of the button\n   */\n  theme?: 'blue' | 'red' | 'yellow' | 'green' | 'ai' | 'white';\n  /**\n   * Size of the button\n   */\n  size?: 'sm' | 'md' | 'lg';\n  /**\n   * Button contents\n   */\n  label: string | '';\n  /**\n   * Icon props\n   */\n  iconProps?: IconProps;\n  /**\n   * Icon position\n   */\n  iconPosition?: 'left' | 'right';\n  /**\n   * Disabled state\n   */\n  disabled?: boolean;\n  /**\n   * Loading state - will disable button and show spinner\n   */\n  loading?: boolean;\n  /**\n   * Optional click handler (called for pointer/mouse activations)\n   */\n  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n  /**\n   * Optional keyboard activation handler\n   * Called when button is activated via keyboard (Enter/Space) or assistive technology virtual activation.\n   * Use when you want to have different behavior for keyboard and pointer activations.\n   * If not provided, onClick will be called for all activations.\n   */\n  onKeyboardActivate?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n  /**\n   * Custom class name\n   */\n  className?: string;\n  /**\n   * Automation ID for testing\n   */\n  automationId?: string;\n  /**\n   * If true, button will be focused on mount.\n   * For programmatic focus control, use ref with .focus() instead.\n   */\n  autoFocus?: boolean;\n  /**\n   * Accessible name for the button. Use when there's no visible label (e.g., icon-only buttons).\n   * Prefer ariaLabelledBy when a visible label exists.\n   */\n  ariaLabel?: string;\n  /**\n   * ID(s) of element(s) that label this button.\n   * Preferred over ariaLabel when a visible label exists (keeps SR and visual text in sync).\n   */\n  ariaLabelledBy?: string;\n  /**\n   * ID(s) of element(s) that describe this button.\n   * Provides additional context announced after the accessible name.\n   */\n  ariaDescribedBy?: string;\n  /**\n   * When true, sets aria-pressed for toggle/pressed state \n   */\n  isPressed?: boolean;\n}\n\nconst focusClass = 'focus-outline';\nconst disabledClassNames: Map = {\n  primary: 'primary-btn disabled-btn pointer-events-none cursor-not-allowed',\n  secondary: 'secondary-btn disabled-btn pointer-events-none cursor-not-allowed',\n  ghost: 'ghost-btn disabled-btn pointer-events-none cursor-not-allowed',\n  link: 'link-btn w-fit disabled-btn pointer-events-none cursor-not-allowed',\n  unstyled: 'unstyled-btn disabled-btn pointer-events-none cursor-not-allowed',\n  sm: 'py-1 px-3 small', // padding: 4px, 12px\n  md: 'py-2 px-3 medium', // padding: 8px, 12px\n  lg: 'py-3 px-4 large' // padding: 12px, 16px\n};\nconst classNames: Map = {\n  primary: `primary-btn ${focusClass}`,\n  secondary: `secondary-btn ${focusClass}`,\n  ghost: `ghost-btn ${focusClass}`,\n  link: `link-btn w-fit ${focusClass}`,\n  unstyled: `unstyled-btn ${focusClass}`,\n  sm: 'py-1 px-3 small', // padding: 4px, 12px\n  md: 'py-2 px-3 medium', // padding: 8px, 12px\n  lg: 'py-3 px-4 large' // padding: 12px, 16px\n};\n\nconst colorPalletClassNames: Map = {\n  blue: 'theme-blue',\n  red: 'theme-red',\n  yellow: 'theme-yellow',\n  green: 'theme-green',\n  ai: 'theme-ai',\n  white: 'theme-white'\n};\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      type = 'primary',\n      theme = 'blue',\n      size = 'md',\n      label = '',\n      iconPosition = 'left',\n      disabled = false,\n      loading = false,\n      className = '',\n      iconProps = { name: '' },\n      automationId = '',\n      autoFocus = false,\n      ariaLabel,\n      ariaLabelledBy,\n      ariaDescribedBy,\n      isPressed,\n      onClick,\n      onKeyboardActivate,\n      ...props\n    },\n    ref\n  ) => {\n  const isUnstyled = type === 'unstyled';\n\n  // Use shared hook for activation handling (pointer vs keyboard/virtual click routing) \n  const { pressProps, isDisabled } = useAccessiblePress({\n    disabled,\n    loading,\n    isNative: true, // native <button> => hook does NOT add Enter/Space onKeyDown\n    pressed: isPressed,\n    onClick: onClick as (e: React.MouseEvent<HTMLElement>) => void,\n    onKeyboardActivate: onKeyboardActivate as (e: React.MouseEvent<HTMLElement>) => void\n  });\n\n  // Skip size/color classes for unstyled variant\n  const sizeClassName = !isUnstyled && type !== 'link' ? classNames[size] : '';\n  const colorPalletClassName = !isUnstyled ? colorPalletClassNames[theme] : '';\n  const typeClassName = isDisabled ? disabledClassNames[type] : classNames[type];\n\n  // Avoid mutating incoming iconProps\n  const computedIconProps: IconProps | undefined = iconProps?.name\n    ? {\n        ...iconProps,\n        stroke: isDisabled ? 'var(--color-gray-600)' : iconProps.stroke\n      }\n    : undefined;\n\n  const buttonClassName = [\n    'se-design-button',\n    colorPalletClassName,\n    sizeClassName,\n    typeClassName,\n    className,\n    !isUnstyled ? 'rounded-[6px] inline-flex gap-1 items-center min-w-fit' : ''\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  // Compute accessible name/description props with correct precedence\n  const accessibleNameProps = getA11yNameAttributes({\n    ariaLabel,\n    ariaLabelledBy,\n    ariaDescribedBy\n  });\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      className={buttonClassName}\n      disabled={isDisabled}\n      autoFocus={autoFocus}\n      data-automation-id={automationId}\n      {...props}\n      {...(pressProps as React.ButtonHTMLAttributes<HTMLButtonElement>)}\n      {...accessibleNameProps}\n    >\n      {loading && (\n        <div\n          aria-hidden=\"true\"\n          className=\"animate-spin w-4 h-4 border-2 border-current border-t-transparent rounded-full\"\n        />\n      )}\n      {!loading && computedIconProps?.name && iconPosition === 'left' && (\n        <Icon {...computedIconProps} />\n      )}\n      {label && <span className=\"button-label [font-weight:inherit]\">{label}</span>}\n      {!loading && computedIconProps?.name && iconPosition === 'right' && (\n        <Icon {...computedIconProps} />\n      )}\n    </button>\n  );\n  }\n);\n\nButton.displayName = 'Button';\n"],"names":["focusClass","disabledClassNames","primary","secondary","ghost","link","unstyled","sm","md","lg","classNames","colorPalletClassNames","blue","red","yellow","green","ai","white","Button","type","theme","size","label","iconPosition","disabled","loading","className","iconProps","name","automationId","autoFocus","ariaLabel","ariaLabelledBy","ariaDescribedBy","isPressed","onClick","onKeyboardActivate","props","ref","isUnstyled","pressProps","isDisabled","useAccessiblePress","isNative","pressed","sizeClassName","colorPalletClassName","typeClassName","computedIconProps","stroke","undefined","buttonClassName","filter","Boolean","join","accessibleNameProps","getA11yNameAttributes","React","createElement","_extends","Icon","displayName"],"mappings":"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"}
+{"version":3,"file":"index4.js","sources":["../src/components/Button/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Map } from '../../utils/common.types';\nimport { useAccessiblePress, getA11yNameAttributes } from '../../utils/a11y';\nimport { Icon, IconProps } from '../Icon';\nimport './style.scss';\n\n/**\n * Allows native button attributes (aria-*, data-*, etc.) to be passed through,\n * but keeps our own onClick/disabled/type typing AND aria-label/aria-labelledby/aria-describedby.\n * Note: We omit 'type' because we use it for button variant, not HTML type attribute.\n * The HTML type is always set to 'button' internally.\n */\ntype NativeButtonProps = Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  'onClick' | 'disabled' | 'type' | 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'aria-pressed'\n>;\n\nexport interface ButtonProps extends NativeButtonProps {\n  /**\n   * Type of the button. \n   */\n  type?: 'primary' | 'secondary' | 'ghost' | 'link' | 'unstyled';\n  /**\n   * Color pallet of the button\n   */\n  theme?: 'blue' | 'red' | 'yellow' | 'green' | 'ai' | 'white';\n  /**\n   * Size of the button\n   */\n  size?: 'sm' | 'md' | 'lg';\n  /**\n   * Button contents\n   */\n  label: string | '';\n  /**\n   * Icon props\n   */\n  iconProps?: IconProps;\n  /**\n   * Icon position\n   */\n  iconPosition?: 'left' | 'right';\n  /**\n   * Disabled state\n   */\n  disabled?: boolean;\n  /**\n   * Loading state - will disable button and show spinner\n   */\n  loading?: boolean;\n  /**\n   * Optional click handler (called for pointer/mouse activations)\n   */\n  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n  /**\n   * Optional keyboard activation handler\n   * Called when button is activated via keyboard (Enter/Space) or assistive technology virtual activation.\n   * Use when you want to have different behavior for keyboard and pointer activations.\n   * If not provided, onClick will be called for all activations.\n   */\n  onKeyboardActivate?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n  /**\n   * Custom class name\n   */\n  className?: string;\n  /**\n   * Automation ID for testing\n   */\n  automationId?: string;\n  /**\n   * If true, button will be focused on mount.\n   * For programmatic focus control, use ref with .focus() instead.\n   */\n  autoFocus?: boolean;\n  /**\n   * Accessible name for the button. Use when there's no visible label (e.g., icon-only buttons).\n   * Prefer ariaLabelledBy when a visible label exists.\n   */\n  ariaLabel?: string;\n  /**\n   * ID(s) of element(s) that label this button.\n   * Preferred over ariaLabel when a visible label exists (keeps SR and visual text in sync).\n   */\n  ariaLabelledBy?: string;\n  /**\n   * ID(s) of element(s) that describe this button.\n   * Provides additional context announced after the accessible name.\n   */\n  ariaDescribedBy?: string;\n  /**\n   * When true, sets aria-pressed for toggle/pressed state \n   */\n  isPressed?: boolean;\n}\n\nconst focusClass = 'focus-outline';\nconst disabledClassNames: Map = {\n  primary: 'primary-btn disabled-btn pointer-events-none cursor-not-allowed',\n  secondary: 'secondary-btn disabled-btn pointer-events-none cursor-not-allowed',\n  ghost: 'ghost-btn disabled-btn pointer-events-none cursor-not-allowed',\n  link: 'link-btn w-fit disabled-btn pointer-events-none cursor-not-allowed',\n  unstyled: 'unstyled-btn disabled-btn pointer-events-none cursor-not-allowed',\n  sm: 'py-1 px-3 small', // padding: 4px, 12px\n  md: 'py-2 px-3 medium', // padding: 8px, 12px\n  lg: 'py-3 px-4 large' // padding: 12px, 16px\n};\nconst classNames: Map = {\n  primary: `primary-btn ${focusClass}`,\n  secondary: `secondary-btn ${focusClass}`,\n  ghost: `ghost-btn ${focusClass}`,\n  link: `link-btn w-fit ${focusClass}`,\n  unstyled: `unstyled-btn ${focusClass}`,\n  sm: 'py-1 px-3 small', // padding: 4px, 12px\n  md: 'py-2 px-3 medium', // padding: 8px, 12px\n  lg: 'py-3 px-4 large' // padding: 12px, 16px\n};\n\nconst colorPalletClassNames: Map = {\n  blue: 'theme-blue',\n  red: 'theme-red',\n  yellow: 'theme-yellow',\n  green: 'theme-green',\n  ai: 'theme-ai',\n  white: 'theme-white'\n};\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      type = 'primary',\n      theme = 'blue',\n      size = 'md',\n      label = '',\n      iconPosition = 'left',\n      disabled = false,\n      loading = false,\n      className = '',\n      iconProps = { name: '' },\n      automationId = '',\n      autoFocus = false,\n      ariaLabel,\n      ariaLabelledBy,\n      ariaDescribedBy,\n      isPressed,\n      onClick,\n      onKeyboardActivate,\n      ...props\n    },\n    ref\n  ) => {\n  const isUnstyled = type === 'unstyled';\n\n  // Use shared hook for activation handling (pointer vs keyboard/virtual click routing) \n  const { pressProps, isDisabled } = useAccessiblePress({\n    disabled,\n    loading,\n    isNative: true, // native <button> => hook does NOT add Enter/Space onKeyDown\n    pressed: isPressed,\n    onClick: onClick as (e: React.MouseEvent<HTMLElement>) => void,\n    onKeyboardActivate: onKeyboardActivate as (e: React.MouseEvent<HTMLElement>) => void\n  });\n\n  // Skip size/color classes for unstyled variant\n  const sizeClassName = !isUnstyled && type !== 'link' ? classNames[size] : '';\n  const colorPalletClassName = !isUnstyled ? colorPalletClassNames[theme] : '';\n  const typeClassName = isDisabled ? disabledClassNames[type] : classNames[type];\n\n  // Avoid mutating incoming iconProps\n  const computedIconProps: IconProps | undefined = iconProps?.name\n    ? {\n        ...iconProps,\n        stroke: isDisabled ? 'var(--color-gray-600)' : iconProps.stroke\n      }\n    : undefined;\n\n  const buttonClassName = [\n    'se-design-button',\n    colorPalletClassName,\n    sizeClassName,\n    typeClassName,\n    className,\n    !isUnstyled ? 'rounded-[6px] inline-flex gap-1 items-center min-w-fit' : ''\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  // Compute accessible name/description props with correct precedence\n  const accessibleNameProps = getA11yNameAttributes({\n    ariaLabel,\n    ariaLabelledBy,\n    ariaDescribedBy\n  });\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      className={buttonClassName}\n      disabled={isDisabled}\n      autoFocus={autoFocus}\n      data-automation-id={automationId}\n      {...props}\n      {...(pressProps as React.ButtonHTMLAttributes<HTMLButtonElement>)}\n      {...accessibleNameProps}\n    >\n      {loading && (\n        <div\n          aria-hidden=\"true\"\n          className=\"animate-spin w-4 h-4 border-2 border-current border-t-transparent rounded-full\"\n        />\n      )}\n      {!loading && computedIconProps?.name && iconPosition === 'left' && (\n        <Icon {...computedIconProps} />\n      )}\n      {label && <span className=\"button-label [font-weight:inherit]\">{label}</span>}\n      {!loading && computedIconProps?.name && iconPosition === 'right' && (\n        <Icon {...computedIconProps} />\n      )}\n    </button>\n  );\n  }\n);\n\nButton.displayName = 'Button';\n"],"names":["focusClass","disabledClassNames","primary","secondary","ghost","link","unstyled","sm","md","lg","classNames","colorPalletClassNames","blue","red","yellow","green","ai","white","Button","type","theme","size","label","iconPosition","disabled","loading","className","iconProps","name","automationId","autoFocus","ariaLabel","ariaLabelledBy","ariaDescribedBy","isPressed","onClick","onKeyboardActivate","props","ref","isUnstyled","pressProps","isDisabled","useAccessiblePress","isNative","pressed","sizeClassName","colorPalletClassName","typeClassName","computedIconProps","stroke","undefined","buttonClassName","filter","Boolean","join","accessibleNameProps","getA11yNameAttributes","React","createElement","_extends","Icon","displayName"],"mappings":"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"}

package/dist/index40.js

@@ -1,7 +1,7 @@
 import a, { useState as d, useRef as $, useEffect as r, useMemo as D } from "react";
 import { Icon as g } from "./index6.js";
 import { LabelChip as F } from "./index11.js";
-import { debounce as L } from "./index217.js";
+import { debounce as L } from "./index221.js";
 /* empty css         */
 function z(p) {
   const {

package/dist/index40.js.map

@@ -1 +1 @@
-{"version":3,"file":"index40.js","sources":["../src/components/SearchBox/index.tsx"],"sourcesContent":["import React, { useState, useMemo, useEffect, useRef } from 'react';\n\nimport { Icon } from 'components/Icon';\nimport { LabelChip } from 'components/LabelChip';\nimport { debounce } from 'utils/debounce';\n\nimport './style.scss';\ninterface ChipType {\n  label: string;\n  value: string;\n  id: string | number;\n  [key: string]: any;\n}\n\nexport interface SearchBoxProps {\n  disabled?: boolean;\n  placeholder?: string;\n  debounceDuration?: number;\n  onInputChange?: (value: string) => void;\n  onSearchClear?: () => void;\n  onChipRemove?: (chip: ChipType) => void;\n  updateSearchString?: string;\n  collapsible?: boolean;\n  width?: string;\n  chips?: ChipType[];\n  showSearchIcon?: boolean;\n  renderFilterComponent?: () => React.ReactNode;\n  automationId?: string;\n}\n\nexport function SearchBox(props: SearchBoxProps) {\n  const {\n    disabled = false,\n    placeholder = 'Search',\n    debounceDuration = 500,\n    onInputChange = () => {},\n    onSearchClear = () => {},\n    onChipRemove = () => {},\n    updateSearchString = '',\n    collapsible = false,\n    width = '200px',\n    chips = [],\n    showSearchIcon = true,\n    renderFilterComponent = null,\n    automationId = ''\n  } = props;\n  const [inputValue, setInputValue] = useState('');\n  const [isExpanded, setIsExpanded] = useState(!props?.collapsible);\n  const [searchChips, setSearchChips] = useState<ChipType[]>(chips || []);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (isExpanded && inputRef.current) {\n      setTimeout(() => inputRef?.current?.focus(), 0);\n    }\n  }, [isExpanded]);\n\n  // Manually update the searchbox text\n  useEffect(() => {\n    if (updateSearchString !== inputValue) {\n      setInputValue(updateSearchString);\n    }\n  }, [updateSearchString]);\n\n  useEffect(() => {\n    setSearchChips(chips);\n  }, [chips]);\n\n  const debouncedOnInputChange = useMemo(\n    () => debounce(onInputChange, debounceDuration),\n    [onInputChange, debounceDuration]\n  );\n\n  useEffect(() => {\n    return () => {\n      debouncedOnInputChange.cancel();\n    };\n  }, [debouncedOnInputChange]);\n\n  const onChangeHandler = (value: string) => {\n    setInputValue(value);\n    debouncedOnInputChange(value);\n  };\n\n  const iconClickHandler = () => {\n    setInputValue('');\n    onInputChange('');\n    onSearchClear();\n  };\n\n  const onBlurHandler = () => {\n    if (collapsible && inputValue?.trimEnd() === '') {\n      setIsExpanded(false);\n    }\n  };\n\n  const removeChip = (chip: ChipType) => {\n    setSearchChips(searchChips.filter((c) => c?.id !== chip?.id));\n    onChipRemove(chip);\n  };\n\n  const hasChips = searchChips?.length > 0;\n\n  return (\n    <div className={`se-search-box ${isExpanded ? 'expand-box' : 'shrink-box'}`} style={{ width: width }} data-automation-id={automationId}>\n      {/* <Icon name=\"search\" className=\"search-icon img-wrap\" onClick={() => collapsible && setIsExpanded((prev) => !prev)} /> */}\n      {isExpanded && (\n        <div className=\"search-box-container\">\n          <div className={`chips-and-search-box-container${hasChips ? ' has-chips' : ''}`}>\n            {hasChips &&\n              searchChips?.map((chip) => (\n                <LabelChip\n                  key={chip?.value}\n                  label={chip?.label}\n                  icon=\"close\"\n                  onIconClick={() => removeChip(chip)}\n                />\n              ))}\n            <div className=\"search-input-container\">\n              {showSearchIcon && (\n                <Icon\n                  name=\"search\"\n                  className=\"search-icon img-wrap\"\n                  onClick={() => collapsible && setIsExpanded((prev) => !prev)}\n                />\n              )}\n              <input\n                ref={inputRef}\n                className={`search-input border-transparent focus:border-transparent active:border-transparent focus:ring-0`}\n                id=\"search_bar\"\n                type=\"text\"\n                placeholder={placeholder}\n                onChange={(e) => onChangeHandler(e.target.value)}\n                value={inputValue}\n                disabled={disabled}\n                onBlur={onBlurHandler}\n              />\n              {!!inputValue && <Icon name=\"close\" className=\"cross-icon img-wrap\" onClick={iconClickHandler} />}\n            </div>\n          </div>\n          {renderFilterComponent && <div className=\"filter-component-container\">{renderFilterComponent()}</div>}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["SearchBox","props","disabled","placeholder","debounceDuration","onInputChange","onSearchClear","onChipRemove","updateSearchString","collapsible","width","chips","showSearchIcon","renderFilterComponent","automationId","inputValue","setInputValue","useState","isExpanded","setIsExpanded","searchChips","setSearchChips","inputRef","useRef","useEffect","current","setTimeout","focus","debouncedOnInputChange","useMemo","debounce","cancel","onChangeHandler","value","iconClickHandler","onBlurHandler","trimEnd","removeChip","chip","filter","c","id","hasChips","length","React","createElement","className","style","map","LabelChip","key","label","icon","onIconClick","Icon","name","onClick","prev","ref","type","onChange","e","target","onBlur"],"mappings":";;;;;AA8BO,SAASA,EAAUC,GAAuB;AACzC,QAAA;AAAA,IACJC,UAAAA,IAAW;AAAA,IACXC,aAAAA,IAAc;AAAA,IACdC,kBAAAA,IAAmB;AAAA,IACnBC,eAAAA,IAAgBA,MAAM;AAAA,IAAC;AAAA,IACvBC,eAAAA,IAAgBA,MAAM;AAAA,IAAC;AAAA,IACvBC,cAAAA,IAAeA,MAAM;AAAA,IAAC;AAAA,IACtBC,oBAAAA,IAAqB;AAAA,IACrBC,aAAAA,IAAc;AAAA,IACdC,OAAAA,IAAQ;AAAA,IACRC,OAAAA,IAAQ,CAAE;AAAA,IACVC,gBAAAA,IAAiB;AAAA,IACjBC,uBAAAA,IAAwB;AAAA,IACxBC,cAAAA,IAAe;AAAA,EACbb,IAAAA,GACE,CAACc,GAAYC,CAAa,IAAIC,EAAS,EAAE,GACzC,CAACC,GAAYC,CAAa,IAAIF,EAAS,CAAChB,GAAOQ,WAAW,GAC1D,CAACW,GAAaC,CAAc,IAAIJ,EAAqBN,KAAS,CAAA,CAAE,GAChEW,IAAWC,EAAyB,IAAI;AAE9CC,EAAAA,EAAU,MAAM;AACVN,IAAAA,KAAcI,EAASG,WACzBC,WAAW,MAAMJ,GAAUG,SAASE,SAAS,CAAC;AAAA,EAChD,GACC,CAACT,CAAU,CAAC,GAGfM,EAAU,MAAM;AACd,IAAIhB,MAAuBO,KACzBC,EAAcR,CAAkB;AAAA,EAClC,GACC,CAACA,CAAkB,CAAC,GAEvBgB,EAAU,MAAM;AACdH,IAAAA,EAAeV,CAAK;AAAA,EAAA,GACnB,CAACA,CAAK,CAAC;AAEJiB,QAAAA,IAAyBC,EAC7B,MAAMC,EAASzB,GAAeD,CAAgB,GAC9C,CAACC,GAAeD,CAAgB,CAClC;AAEAoB,EAAAA,EAAU,MACD,MAAM;AACXI,IAAAA,EAAuBG,OAAO;AAAA,EAAA,GAE/B,CAACH,CAAsB,CAAC;AAErBI,QAAAA,IAAkBA,CAACC,MAAkB;AACzCjB,IAAAA,EAAciB,CAAK,GACnBL,EAAuBK,CAAK;AAAA,EAAA,GAGxBC,IAAmBA,MAAM;AAC7BlB,IAAAA,EAAc,EAAE,GAChBX,EAAc,EAAE,GACFC;EAAA,GAGV6B,IAAgBA,MAAM;AAC1B,IAAI1B,KAAeM,GAAYqB,QAAQ,MAAM,MAC3CjB,EAAc,EAAK;AAAA,EACrB,GAGIkB,IAAaA,CAACC,MAAmB;AACrCjB,IAAAA,EAAeD,EAAYmB,OAAQC,CAAAA,MAAMA,GAAGC,OAAOH,GAAMG,EAAE,CAAC,GAC5DlC,EAAa+B,CAAI;AAAA,EAAA,GAGbI,IAAWtB,GAAauB,SAAS;AAGrCC,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAW,iBAAiB5B,IAAa,eAAe,YAAY;AAAA,IAAI6B,OAAO;AAAA,MAAErC,OAAAA;AAAAA,IAAa;AAAA,IAAG,sBAAoBI;AAAAA,EAEvHI,GAAAA,KACC2B,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAA,GACbD,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAW,iCAAiCJ,IAAW,eAAe,EAAE;AAAA,EAAA,GAC1EA,KACCtB,GAAa4B,IAAKV,CAChBM,MAAAA,gBAAAA,EAAAC,cAACI,GAAS;AAAA,IACRC,KAAKZ,GAAML;AAAAA,IACXkB,OAAOb,GAAMa;AAAAA,IACbC,MAAK;AAAA,IACLC,aAAaA,MAAMhB,EAAWC,CAAI;AAAA,EACnC,CAAA,CACF,GACHM,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EACZlC,GAAAA,KACCiC,gBAAAA,EAAAA,cAACS,GAAI;AAAA,IACHC,MAAK;AAAA,IACLT,WAAU;AAAA,IACVU,SAASA,MAAM/C,KAAeU,EAAesC,CAAAA,MAAS,CAACA,CAAI;AAAA,EAAA,CAC5D,GAEHZ,gBAAAA,EAAAA,cAAA,SAAA;AAAA,IACEa,KAAKpC;AAAAA,IACLwB,WAAW;AAAA,IACXL,IAAG;AAAA,IACHkB,MAAK;AAAA,IACLxD,aAAAA;AAAAA,IACAyD,UAAWC,CAAAA,MAAM7B,EAAgB6B,EAAEC,OAAO7B,KAAK;AAAA,IAC/CA,OAAOlB;AAAAA,IACPb,UAAAA;AAAAA,IACA6D,QAAQ5B;AAAAA,EACT,CAAA,GACA,CAAC,CAACpB,KAAc6B,gBAAAA,EAAAC,cAACS,GAAI;AAAA,IAACC,MAAK;AAAA,IAAQT,WAAU;AAAA,IAAsBU,SAAStB;AAAAA,EAAmB,CAAA,CAC7F,CACF,GACJrB,KAAyB+B,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAA,GAA8BjC,EAAAA,CAA6B,CACjG,CAEJ;AAET;"}
+{"version":3,"file":"index40.js","sources":["../src/components/SearchBox/index.tsx"],"sourcesContent":["import React, { useState, useMemo, useEffect, useRef } from 'react';\n\nimport { Icon } from 'components/Icon';\nimport { LabelChip } from 'components/LabelChip';\nimport { debounce } from 'utils/debounce';\n\nimport './style.scss';\ninterface ChipType {\n  label: string;\n  value: string;\n  id: string | number;\n  [key: string]: any;\n}\n\nexport interface SearchBoxProps {\n  disabled?: boolean;\n  placeholder?: string;\n  debounceDuration?: number;\n  onInputChange?: (value: string) => void;\n  onSearchClear?: () => void;\n  onChipRemove?: (chip: ChipType) => void;\n  updateSearchString?: string;\n  collapsible?: boolean;\n  width?: string;\n  chips?: ChipType[];\n  showSearchIcon?: boolean;\n  renderFilterComponent?: () => React.ReactNode;\n  automationId?: string;\n}\n\nexport function SearchBox(props: SearchBoxProps) {\n  const {\n    disabled = false,\n    placeholder = 'Search',\n    debounceDuration = 500,\n    onInputChange = () => {},\n    onSearchClear = () => {},\n    onChipRemove = () => {},\n    updateSearchString = '',\n    collapsible = false,\n    width = '200px',\n    chips = [],\n    showSearchIcon = true,\n    renderFilterComponent = null,\n    automationId = ''\n  } = props;\n  const [inputValue, setInputValue] = useState('');\n  const [isExpanded, setIsExpanded] = useState(!props?.collapsible);\n  const [searchChips, setSearchChips] = useState<ChipType[]>(chips || []);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (isExpanded && inputRef.current) {\n      setTimeout(() => inputRef?.current?.focus(), 0);\n    }\n  }, [isExpanded]);\n\n  // Manually update the searchbox text\n  useEffect(() => {\n    if (updateSearchString !== inputValue) {\n      setInputValue(updateSearchString);\n    }\n  }, [updateSearchString]);\n\n  useEffect(() => {\n    setSearchChips(chips);\n  }, [chips]);\n\n  const debouncedOnInputChange = useMemo(\n    () => debounce(onInputChange, debounceDuration),\n    [onInputChange, debounceDuration]\n  );\n\n  useEffect(() => {\n    return () => {\n      debouncedOnInputChange.cancel();\n    };\n  }, [debouncedOnInputChange]);\n\n  const onChangeHandler = (value: string) => {\n    setInputValue(value);\n    debouncedOnInputChange(value);\n  };\n\n  const iconClickHandler = () => {\n    setInputValue('');\n    onInputChange('');\n    onSearchClear();\n  };\n\n  const onBlurHandler = () => {\n    if (collapsible && inputValue?.trimEnd() === '') {\n      setIsExpanded(false);\n    }\n  };\n\n  const removeChip = (chip: ChipType) => {\n    setSearchChips(searchChips.filter((c) => c?.id !== chip?.id));\n    onChipRemove(chip);\n  };\n\n  const hasChips = searchChips?.length > 0;\n\n  return (\n    <div className={`se-search-box ${isExpanded ? 'expand-box' : 'shrink-box'}`} style={{ width: width }} data-automation-id={automationId}>\n      {/* <Icon name=\"search\" className=\"search-icon img-wrap\" onClick={() => collapsible && setIsExpanded((prev) => !prev)} /> */}\n      {isExpanded && (\n        <div className=\"search-box-container\">\n          <div className={`chips-and-search-box-container${hasChips ? ' has-chips' : ''}`}>\n            {hasChips &&\n              searchChips?.map((chip) => (\n                <LabelChip\n                  key={chip?.value}\n                  label={chip?.label}\n                  icon=\"close\"\n                  onIconClick={() => removeChip(chip)}\n                />\n              ))}\n            <div className=\"search-input-container\">\n              {showSearchIcon && (\n                <Icon\n                  name=\"search\"\n                  className=\"search-icon img-wrap\"\n                  onClick={() => collapsible && setIsExpanded((prev) => !prev)}\n                />\n              )}\n              <input\n                ref={inputRef}\n                className={`search-input border-transparent focus:border-transparent active:border-transparent focus:ring-0`}\n                id=\"search_bar\"\n                type=\"text\"\n                placeholder={placeholder}\n                onChange={(e) => onChangeHandler(e.target.value)}\n                value={inputValue}\n                disabled={disabled}\n                onBlur={onBlurHandler}\n              />\n              {!!inputValue && <Icon name=\"close\" className=\"cross-icon img-wrap\" onClick={iconClickHandler} />}\n            </div>\n          </div>\n          {renderFilterComponent && <div className=\"filter-component-container\">{renderFilterComponent()}</div>}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["SearchBox","props","disabled","placeholder","debounceDuration","onInputChange","onSearchClear","onChipRemove","updateSearchString","collapsible","width","chips","showSearchIcon","renderFilterComponent","automationId","inputValue","setInputValue","useState","isExpanded","setIsExpanded","searchChips","setSearchChips","inputRef","useRef","useEffect","current","setTimeout","focus","debouncedOnInputChange","useMemo","debounce","cancel","onChangeHandler","value","iconClickHandler","onBlurHandler","trimEnd","removeChip","chip","filter","c","id","hasChips","length","React","createElement","className","style","map","LabelChip","key","label","icon","onIconClick","Icon","name","onClick","prev","ref","type","onChange","e","target","onBlur"],"mappings":"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"}

package/dist/index41.js.map

@@ -1 +1 @@
-{"version":3,"file":"index41.js","sources":["../src/components/ProgressBar/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { Map } from '../../utils/common.types';\nimport './style.scss';\n\nexport interface ProgressBarProps {\n  totalTasks: number;\n  completedTasks: number;\n  progressBarCtnClassName?: string;\n  needPercentageCompleted?: boolean;\n  progressBarColor?: string;\n}\n\nconst className: Map = {\n  progressBarCtn: 'flex items-center gap-2',\n  progressBar: 'flex-1 w-[70%] h-[6px] rounded-[12px] overflow-hidden',\n  progressBarProgress: 'h-full rounded-[12px]',\n  stepsCount: 'steps-count'\n};\n\nexport const ProgressBar: FC<ProgressBarProps> = ({\n  totalTasks = 0,\n  completedTasks = 0,\n  progressBarCtnClassName = '',\n  needPercentageCompleted = true,\n  progressBarColor\n}) => {\n  const percentageComplete = totalTasks > 0 ? (completedTasks / totalTasks) * 100 : 0;\n  return (\n    <div\n      className={`${className.progressBarCtn} ${progressBarCtnClassName} progress-bar-ctn`}\n      style={{ width: '100%' }}\n    >\n      <div className={className.progressBar}>\n        <div\n          className={className.progressBarProgress}\n          style={{\n            width: `${percentageComplete}%`,\n            background: `${progressBarColor ? progressBarColor : 'linear-gradient(90deg, var(--color-green-200) 0%, var(--color-green-300) 100%)'}`,\n            transition: 'width 0.4s ease-in-out'\n          }}\n        ></div>\n      </div>\n      {needPercentageCompleted && (\n        <div className={className.stepsCount}>{`${Math.round(percentageComplete)}% completed`}</div>\n      )}\n    </div>\n  );\n};\n"],"names":["React__default","className","progressBarCtn","progressBar","progressBarProgress","stepsCount","ProgressBar","totalTasks","completedTasks","progressBarCtnClassName","needPercentageCompleted","progressBarColor","percentageComplete","React","createElement","style","width","background","transition","Math","round"],"mappings":"AAYA,OAAAA,OAAA;AAAA,OAAA;AAAA,MAAMC,IAAiB;AAAA,EACrBC,gBAAgB;AAAA,EAChBC,aAAa;AAAA,EACbC,qBAAqB;AAAA,EACrBC,YAAY;AACd,GAEaC,IAAoCA,CAAC;AAAA,EAChDC,YAAAA,IAAa;AAAA,EACbC,gBAAAA,IAAiB;AAAA,EACjBC,yBAAAA,IAA0B;AAAA,EAC1BC,yBAAAA,IAA0B;AAAA,EAC1BC,kBAAAA;AACF,MAAM;AACJ,QAAMC,IAAqBL,IAAa,IAAKC,IAAiBD,IAAc,MAAM;AAEhFM,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEb,WAAW,GAAGA,EAAUC,cAAc,IAAIO,CAAuB;AAAA,IACjEM,OAAO;AAAA,MAAEC,OAAO;AAAA,IAAO;AAAA,EAAA,GAEvBF,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKb,WAAWA,EAAUE;AAAAA,EAAAA,GACxBW,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IACEb,WAAWA,EAAUG;AAAAA,IACrBW,OAAO;AAAA,MACLC,OAAO,GAAGJ,CAAkB;AAAA,MAC5BK,YAAY,GAAGN,KAAsC,gFAAgF;AAAA,MACrIO,YAAY;AAAA,IACd;AAAA,EACI,CAAA,CACH,GACJR,KACCG,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKb,WAAWA,EAAUI;AAAAA,EAAAA,GAAa,GAAGc,KAAKC,MAAMR,CAAkB,CAAC,aAAmB,CAE1F;AAET;"}
+{"version":3,"file":"index41.js","sources":["../src/components/ProgressBar/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { Map } from '../../utils/common.types';\nimport './style.scss';\n\nexport interface ProgressBarProps {\n  totalTasks: number;\n  completedTasks: number;\n  progressBarCtnClassName?: string;\n  needPercentageCompleted?: boolean;\n  progressBarColor?: string;\n}\n\nconst className: Map = {\n  progressBarCtn: 'flex items-center gap-2',\n  progressBar: 'flex-1 w-[70%] h-[6px] rounded-[12px] overflow-hidden',\n  progressBarProgress: 'h-full rounded-[12px]',\n  stepsCount: 'steps-count'\n};\n\nexport const ProgressBar: FC<ProgressBarProps> = ({\n  totalTasks = 0,\n  completedTasks = 0,\n  progressBarCtnClassName = '',\n  needPercentageCompleted = true,\n  progressBarColor\n}) => {\n  const percentageComplete = totalTasks > 0 ? (completedTasks / totalTasks) * 100 : 0;\n  return (\n    <div\n      className={`${className.progressBarCtn} ${progressBarCtnClassName} progress-bar-ctn`}\n      style={{ width: '100%' }}\n    >\n      <div className={className.progressBar}>\n        <div\n          className={className.progressBarProgress}\n          style={{\n            width: `${percentageComplete}%`,\n            background: `${progressBarColor ? progressBarColor : 'linear-gradient(90deg, var(--color-green-200) 0%, var(--color-green-300) 100%)'}`,\n            transition: 'width 0.4s ease-in-out'\n          }}\n        ></div>\n      </div>\n      {needPercentageCompleted && (\n        <div className={className.stepsCount}>{`${Math.round(percentageComplete)}% completed`}</div>\n      )}\n    </div>\n  );\n};\n"],"names":["React__default","className","progressBarCtn","progressBar","progressBarProgress","stepsCount","ProgressBar","totalTasks","completedTasks","progressBarCtnClassName","needPercentageCompleted","progressBarColor","percentageComplete","React","createElement","style","width","background","transition","Math","round"],"mappings":"AAYA,OAAAA,OAAA;AAAA,OAAA;AAAA,MAAMC,IAAiB;AAAA,EACrBC,gBAAgB;AAAA,EAChBC,aAAa;AAAA,EACbC,qBAAqB;AAAA,EACrBC,YAAY;AACd,GAEaC,IAAoCA,CAAC;AAAA,EAChDC,YAAAA,IAAa;AAAA,EACbC,gBAAAA,IAAiB;AAAA,EACjBC,yBAAAA,IAA0B;AAAA,EAC1BC,yBAAAA,IAA0B;AAAA,EAC1BC,kBAAAA;AACF,MAAM;AACJ,QAAMC,IAAqBL,IAAa,IAAKC,IAAiBD,IAAc,MAAM;AAClF,SACEM,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEb,WAAW,GAAGA,EAAUC,cAAc,IAAIO,CAAuB;AAAA,IACjEM,OAAO;AAAA,MAAEC,OAAO;AAAA,IAAA;AAAA,EAAO,GAEvBH,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKb,WAAWA,EAAUE;AAAAA,EAAAA,GACxBU,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEb,WAAWA,EAAUG;AAAAA,IACrBW,OAAO;AAAA,MACLC,OAAO,GAAGJ,CAAkB;AAAA,MAC5BK,YAAY,GAAGN,KAAsC,gFAAgF;AAAA,MACrIO,YAAY;AAAA,IAAA;AAAA,EACd,CACI,CACH,GACJR,KACCG,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKb,WAAWA,EAAUI;AAAAA,EAAAA,GAAa,GAAGc,KAAKC,MAAMR,CAAkB,CAAC,aAAmB,CAE1F;AAET;"}

package/dist/index42.js.map

@@ -1 +1 @@
-{"version":3,"file":"index42.js","sources":["../src/components/GetStartedWidget/index.tsx"],"sourcesContent":["import React, { FC, useState, useRef } from \"react\";\nimport { Icon } from \"../Icon\";\nimport { Map } from \"../../utils/common.types\";\nimport { ProgressBar } from \"../ProgressBar\";\nimport \"./style.scss\";\n\nexport interface GetStartedWidgetProps {\n  widgetClassName?: string;\n  actionItems: {\n    label: string;\n    isComplete?: boolean;\n    handleActionItemClick: () => void;\n  }[];\n}\n\nconst className: Map = {\n  gettingStartedWidgetCtn: \"border border-[var(--color-gray-200)] rounded-[12px] w-[385px] p-4\",\n  accordionCtn: \"flex items-center justify-between\",\n  gettingStartedWidgetContent: \"overflow-hidden transition-all duration-300\",\n  icon: \"transition-transform duration-300 cursor-pointer\",\n  actionItemCtn: \"flex items-center gap-2 mt-[4px] mb-[10px]\"\n};\n\nexport const GetStartedWidget: FC<GetStartedWidgetProps> = ({\n  widgetClassName = \"\",\n  actionItems = []\n}) => {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const contentRef = useRef<HTMLDivElement>(null);\n\n  const toggleAccordion = () => {\n    setIsExpanded(!isExpanded);\n  };\n\n  const getIconStroke = (isComplete?: boolean) => {\n    if(isComplete) {\n      return \"var(--color-green-500)\"\n    }\n    return \"var(--color-gray-200)\"\n  }\n\n  return (\n    <div className={`${className.gettingStartedWidgetCtn} ${widgetClassName} getting-started-widget-ctn`}>\n      <div className={className.accordionCtn}>\n        <span className=\"title text-[var(--color-gray-900)]\">Get Started</span>\n        <Icon name=\"chevron\" className={`${className.icon} ${isExpanded ? \"rotate-180\" : \"\"}`} onClick={toggleAccordion} />\n      </div>\n      <div className=\"mt-[12px]\">\n        <ProgressBar totalTasks={actionItems.length} \n        completedTasks={actionItems.filter(item => item.isComplete).length} \n        progressBarCtnClassName=\"get-started-progress-bar-ctn\"/>\n      </div>\n      <div\n        ref={contentRef}\n        className={className.gettingStartedWidgetContent}\n        style={{\n          maxHeight: isExpanded ? `${contentRef.current?.scrollHeight}px` : \"0px\",\n        }}\n      >\n        {actionItems.map((item, index) => (\n          <div key={index} className={className.actionItemCtn}>\n            <Icon name={\"checked-circle\"}  stroke={getIconStroke(item.isComplete)} />\n            <span className={item.isComplete ? \"text-[var(--color-gray-500)]\" : \"text-[var(--color-gray-900)] cursor-pointer\"} onClick={item?.handleActionItemClick}>\n              {item.label}\n            </span>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n\nexport default GetStartedWidget;"],"names":["React__default","useState","useRef","Icon","ProgressBar","className","gettingStartedWidgetCtn","accordionCtn","gettingStartedWidgetContent","icon","actionItemCtn","GetStartedWidget","widgetClassName","actionItems","isExpanded","setIsExpanded","contentRef","toggleAccordion","getIconStroke","isComplete","React","createElement","name","onClick","totalTasks","length","completedTasks","filter","item","progressBarCtnClassName","ref","style","maxHeight","current","scrollHeight","map","index","key","stroke","handleActionItemClick","label"],"mappings":"AAeA,OAAAA,KAAA,YAAAC,GAAA,UAAAC,SAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,SAAA,eAAAC,SAAA;AAAA,OAAA;AAAA,MAAMC,IAAiB;AAAA,EACrBC,yBAAyB;AAAA,EACzBC,cAAc;AAAA,EACdC,6BAA6B;AAAA,EAC7BC,MAAM;AAAA,EACNC,eAAe;AACjB,GAEaC,IAA8CA,CAAC;AAAA,EAC1DC,iBAAAA,IAAkB;AAAA,EAClBC,aAAAA,IAAc,CAAA;AAChB,MAAM;AACJ,QAAM,CAACC,GAAYC,CAAa,IAAId,EAAS,EAAK,GAC5Ce,IAAad,EAAuB,IAAI,GAExCe,IAAkBA,MAAM;AAC5BF,IAAAA,EAAc,CAACD,CAAU;AAAA,EAAA,GAGrBI,IAAgBA,CAACC,MAClBA,IACM,2BAEF;AAIPC,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKhB,WAAW,GAAGA,EAAUC,uBAAuB,IAAIM,CAAe;AAAA,EAAA,GACrES,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKhB,WAAWA,EAAUE;AAAAA,EAAAA,GACxBc,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMhB,WAAU;AAAA,EAAqC,GAAA,aAAiB,GACtEe,gBAAAA,EAAAC,cAAClB,GAAI;AAAA,IAACmB,MAAK;AAAA,IAAUjB,WAAW,GAAGA,EAAUI,IAAI,IAAIK,IAAa,eAAe,EAAE;AAAA,IAAIS,SAASN;AAAAA,EAAkB,CAAA,CAC/G,GACLG,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKhB,WAAU;AAAA,EAAA,GACbgB,gBAAAA,EAAAA,cAACjB,GAAW;AAAA,IAACoB,YAAYX,EAAYY;AAAAA,IACrCC,gBAAgBb,EAAYc,OAAOC,CAAQA,MAAAA,EAAKT,UAAU,EAAEM;AAAAA,IAC5DI,yBAAwB;AAAA,EAA+B,CAAA,CACpD,GACLT,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACES,KAAKd;AAAAA,IACLX,WAAWA,EAAUG;AAAAA,IACrBuB,OAAO;AAAA,MACLC,WAAWlB,IAAa,GAAGE,EAAWiB,SAASC,YAAY,OAAO;AAAA,IACpE;AAAA,EAAA,GAECrB,EAAYsB,IAAI,CAACP,GAAMQ,MACtBhB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKgB,KAAKD;AAAAA,IAAO/B,WAAWA,EAAUK;AAAAA,EAAAA,GACpCW,gBAAAA,EAAAA,cAAClB,GAAI;AAAA,IAACmB,MAAM;AAAA,IAAmBgB,QAAQpB,EAAcU,EAAKT,UAAU;AAAA,EAAA,CAAI,GACxEE,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMhB,WAAWuB,EAAKT,aAAa,iCAAiC;AAAA,IAA+CI,SAASK,GAAMW;AAAAA,KAC/HX,EAAKY,KACF,CACH,CACN,CACE,CACF;AAET;"}
+{"version":3,"file":"index42.js","sources":["../src/components/GetStartedWidget/index.tsx"],"sourcesContent":["import React, { FC, useState, useRef } from \"react\";\nimport { Icon } from \"../Icon\";\nimport { Map } from \"../../utils/common.types\";\nimport { ProgressBar } from \"../ProgressBar\";\nimport \"./style.scss\";\n\nexport interface GetStartedWidgetProps {\n  widgetClassName?: string;\n  actionItems: {\n    label: string;\n    isComplete?: boolean;\n    handleActionItemClick: () => void;\n  }[];\n}\n\nconst className: Map = {\n  gettingStartedWidgetCtn: \"border border-[var(--color-gray-200)] rounded-[12px] w-[385px] p-4\",\n  accordionCtn: \"flex items-center justify-between\",\n  gettingStartedWidgetContent: \"overflow-hidden transition-all duration-300\",\n  icon: \"transition-transform duration-300 cursor-pointer\",\n  actionItemCtn: \"flex items-center gap-2 mt-[4px] mb-[10px]\"\n};\n\nexport const GetStartedWidget: FC<GetStartedWidgetProps> = ({\n  widgetClassName = \"\",\n  actionItems = []\n}) => {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const contentRef = useRef<HTMLDivElement>(null);\n\n  const toggleAccordion = () => {\n    setIsExpanded(!isExpanded);\n  };\n\n  const getIconStroke = (isComplete?: boolean) => {\n    if(isComplete) {\n      return \"var(--color-green-500)\"\n    }\n    return \"var(--color-gray-200)\"\n  }\n\n  return (\n    <div className={`${className.gettingStartedWidgetCtn} ${widgetClassName} getting-started-widget-ctn`}>\n      <div className={className.accordionCtn}>\n        <span className=\"title text-[var(--color-gray-900)]\">Get Started</span>\n        <Icon name=\"chevron\" className={`${className.icon} ${isExpanded ? \"rotate-180\" : \"\"}`} onClick={toggleAccordion} />\n      </div>\n      <div className=\"mt-[12px]\">\n        <ProgressBar totalTasks={actionItems.length} \n        completedTasks={actionItems.filter(item => item.isComplete).length} \n        progressBarCtnClassName=\"get-started-progress-bar-ctn\"/>\n      </div>\n      <div\n        ref={contentRef}\n        className={className.gettingStartedWidgetContent}\n        style={{\n          maxHeight: isExpanded ? `${contentRef.current?.scrollHeight}px` : \"0px\",\n        }}\n      >\n        {actionItems.map((item, index) => (\n          <div key={index} className={className.actionItemCtn}>\n            <Icon name={\"checked-circle\"}  stroke={getIconStroke(item.isComplete)} />\n            <span className={item.isComplete ? \"text-[var(--color-gray-500)]\" : \"text-[var(--color-gray-900)] cursor-pointer\"} onClick={item?.handleActionItemClick}>\n              {item.label}\n            </span>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n\nexport default GetStartedWidget;"],"names":["React__default","useState","useRef","Icon","ProgressBar","className","gettingStartedWidgetCtn","accordionCtn","gettingStartedWidgetContent","icon","actionItemCtn","GetStartedWidget","widgetClassName","actionItems","isExpanded","setIsExpanded","contentRef","toggleAccordion","getIconStroke","isComplete","React","createElement","name","onClick","totalTasks","length","completedTasks","filter","item","progressBarCtnClassName","ref","style","maxHeight","current","scrollHeight","map","index","key","stroke","handleActionItemClick","label"],"mappings":"AAeA,OAAAA,KAAA,YAAAC,GAAA,UAAAC,SAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,SAAA,eAAAC,SAAA;AAAA,OAAA;AAAA,MAAMC,IAAiB;AAAA,EACrBC,yBAAyB;AAAA,EACzBC,cAAc;AAAA,EACdC,6BAA6B;AAAA,EAC7BC,MAAM;AAAA,EACNC,eAAe;AACjB,GAEaC,IAA8CA,CAAC;AAAA,EAC1DC,iBAAAA,IAAkB;AAAA,EAClBC,aAAAA,IAAc,CAAA;AAChB,MAAM;AACJ,QAAM,CAACC,GAAYC,CAAa,IAAId,EAAS,EAAK,GAC5Ce,IAAad,EAAuB,IAAI,GAExCe,IAAkBA,MAAM;AAC5BF,IAAAA,EAAc,CAACD,CAAU;AAAA,EAC3B,GAEMI,IAAgBA,CAACC,MAClBA,IACM,2BAEF;AAGT,SACEC,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKhB,WAAW,GAAGA,EAAUC,uBAAuB,IAAIM,CAAe;AAAA,EAAA,GACrEQ,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKhB,WAAWA,EAAUE;AAAAA,EAAAA,GACxBa,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMhB,WAAU;AAAA,EAAA,GAAqC,aAAiB,GACtEe,gBAAAA,EAAAC,cAAClB,GAAI;AAAA,IAACmB,MAAK;AAAA,IAAUjB,WAAW,GAAGA,EAAUI,IAAI,IAAIK,IAAa,eAAe,EAAE;AAAA,IAAIS,SAASN;AAAAA,EAAAA,CAAkB,CAC/G,GACLG,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKhB,WAAU;AAAA,EAAA,GACbe,gBAAAA,EAAAC,cAACjB,GAAW;AAAA,IAACoB,YAAYX,EAAYY;AAAAA,IACrCC,gBAAgBb,EAAYc,OAAOC,CAAAA,MAAQA,EAAKT,UAAU,EAAEM;AAAAA,IAC5DI,yBAAwB;AAAA,EAAA,CAA+B,CACpD,GACLT,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACES,KAAKd;AAAAA,IACLX,WAAWA,EAAUG;AAAAA,IACrBuB,OAAO;AAAA,MACLC,WAAWlB,IAAa,GAAGE,EAAWiB,SAASC,YAAY,OAAO;AAAA,IAAA;AAAA,EACpE,GAECrB,EAAYsB,IAAI,CAACP,GAAMQ,MACtBhB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKgB,KAAKD;AAAAA,IAAO/B,WAAWA,EAAUK;AAAAA,EAAAA,GACpCU,gBAAAA,EAAAC,cAAClB,GAAI;AAAA,IAACmB,MAAM;AAAA,IAAmBgB,QAAQpB,EAAcU,EAAKT,UAAU;AAAA,EAAA,CAAI,GACxEC,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMhB,WAAWuB,EAAKT,aAAa,iCAAiC;AAAA,IAA+CI,SAASK,GAAMW;AAAAA,EAAAA,GAC/HX,EAAKY,KACF,CACH,CACN,CACE,CACF;AAET;"}

package/dist/index43.js.map

@@ -1 +1 @@
-{"version":3,"file":"index43.js","sources":["../src/components/MessageBar/index.tsx"],"sourcesContent":["import React, { FC, useState } from 'react';\nimport { Map } from 'src/utils/common.types';\nimport { Icon } from '../Icon';\nimport { Button } from '../Button';\nimport './style.scss';\n\nexport interface MessageBarProps {\n  messageBarCtnClassName?: string;\n  messageBarType: 'info' | 'alert' | 'nudge';\n  message: string;\n  hasCloseIcon?: boolean;\n  hasButton?: boolean,\n  buttonLabel: string | '',\n  buttonOnClick?: () => void,\n  handleClose?: () => void,\n  automationId?: string;\n}\n\nconst classNames: Map = {\n  messageBarCtn: \"min-h-[45px] fixed top-0 w-full flex items-center justify-center py-2\",\n  messageCtn: \"flex items-center justify-center gap-2 flex-wrap px-4 pr-12\",\n  info: \"bg-[var(--color-yellow-50)]\",\n  alert: \"bg-[var(--color-red-500)]\",\n  nudge: \"bg-[var(--color-blue-500)]\",\n  infoMessage: \"text-[var(--color-yellow-700)] text-center\",  \n  alertMessage: \"text-[var(--color-white)] text-center\",\n  closeIconCtn: \"absolute right-[12px] cursor-pointer cursor-pointer hover:bg-[var(--color-gray-500)] rounded-full p-1\",\n  customInfoClassBtn: \"bg-[var(--color-yellow-50)] text-[var(--color-yellow-700)] hover:bg-[var(--color-yellow-50)] border border-[var(--color-yellow-700)] hover:border-[var(--color-yellow-900)]\",\n  customAlertClassBtn: \"bg-[var(--color-red-500)] text-[var(--color-white)] hover:bg-[var(--color-red-500)] border border-[var(--color-white)] hover:border-[var(--color-white)]\",\n  customNudgeClassBtn: \"bg-[var(--color-blue-500)] text-[var(--color-white)] hover:bg-[var(--color-blue-500)] border border-[var(--color-white)] hover:border-[var(--color-white)]\",\n};\n\nexport const MessageBar: FC<MessageBarProps> = ({\n  messageBarCtnClassName = \"\",\n  messageBarType = 'info',\n  message = '',\n  hasCloseIcon = false,\n  hasButton = false,\n  buttonLabel = '',\n  buttonOnClick = () => {},\n  handleClose = () => {},\n  automationId = ''\n}) => {\n  const [visible, setVisible] = useState(true);\n\n  const handleClickOnCloseIcon = React.useCallback(() => {\n    setVisible(false);\n    const timer = setTimeout(() => {\n      handleClose?.();\n    }, 300);\n    return () => clearTimeout(timer);\n  }, [handleClose]);\n\n  const messageClass = messageBarType === 'info' ? classNames.infoMessage : classNames.alertMessage;\n  \n  const buttonClassName = React.useMemo(() => {\n    switch(messageBarType) {\n      case 'info': return classNames.customInfoClassBtn;\n      case 'alert': return classNames.customAlertClassBtn;\n      case 'nudge': return classNames.customNudgeClassBtn;\n      default: return '';\n    }\n  }, [messageBarType]);\n\n  // const iconName = messageBarType === 'info' ? \"info\" : \"info-white\";\n  // const closeIconName = messageBarType === 'info' ? \"close\" : \"white-close\";\n\n  return (\n    <div className={`se-design-message-bar ${messageBarCtnClassName} ${classNames.messageBarCtn} ${classNames[messageBarType]} ${visible ? \"show\" : \"hide\"}`} data-automation-id={automationId}>\n      <div className={classNames.messageCtn}>\n        <div className=\"inline-flex items-center\">\n          <span className={messageClass}>\n            <Icon name={\"info\"} className=\"inline-block h-fit relative top-[3px] mr-1\"/>\n            {message}\n            {hasButton && (\n              <Button \n                label={buttonLabel} \n                type='primary' \n                size=\"sm\" \n                onClick={buttonOnClick}\n                className={`${buttonClassName} ml-2 alert-btn`}\n                automationId=\"message-bar-cta\"\n              />\n            )}\n          </span>\n        </div>\n      </div>\n      {hasCloseIcon && (\n        <Icon \n          name={\"close\"} \n          className={classNames.closeIconCtn} \n          onClick={handleClickOnCloseIcon} \n        />\n      )}\n    </div>\n  );\n};\n\nexport default MessageBar;"],"names":["React__default","useState","Icon","Button","classNames","messageBarCtn","messageCtn","info","alert","nudge","infoMessage","alertMessage","closeIconCtn","customInfoClassBtn","customAlertClassBtn","customNudgeClassBtn","MessageBar","messageBarCtnClassName","messageBarType","message","hasCloseIcon","hasButton","buttonLabel","buttonOnClick","handleClose","automationId","visible","setVisible","handleClickOnCloseIcon","React","useCallback","timer","setTimeout","clearTimeout","messageClass","buttonClassName","useMemo","createElement","className","name","label","type","size","onClick"],"mappings":"AAkBA,OAAAA,KAAA,YAAAC,SAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,SAAA,UAAAC,SAAA;AAAA,OAAA;AAAA,MAAMC,IAAkB;AAAA,EACtBC,eAAe;AAAA,EACfC,YAAY;AAAA,EACZC,MAAM;AAAA,EACNC,OAAO;AAAA,EACPC,OAAO;AAAA,EACPC,aAAa;AAAA,EACbC,cAAc;AAAA,EACdC,cAAc;AAAA,EACdC,oBAAoB;AAAA,EACpBC,qBAAqB;AAAA,EACrBC,qBAAqB;AACvB,GAEaC,IAAkCA,CAAC;AAAA,EAC9CC,wBAAAA,IAAyB;AAAA,EACzBC,gBAAAA,IAAiB;AAAA,EACjBC,SAAAA,IAAU;AAAA,EACVC,cAAAA,IAAe;AAAA,EACfC,WAAAA,IAAY;AAAA,EACZC,aAAAA,IAAc;AAAA,EACdC,eAAAA,IAAgBA,MAAM;AAAA,EAAC;AAAA,EACvBC,aAAAA,IAAcA,MAAM;AAAA,EAAC;AAAA,EACrBC,cAAAA,IAAe;AACjB,MAAM;AACJ,QAAM,CAACC,GAASC,CAAU,IAAI1B,EAAS,EAAI,GAErC2B,IAAyBC,EAAMC,YAAY,MAAM;AACrDH,IAAAA,EAAW,EAAK;AACVI,UAAAA,IAAQC,WAAW,MAAM;AACf,MAAAR;OACb,GAAG;AACC,WAAA,MAAMS,aAAaF,CAAK;AAAA,EAAA,GAC9B,CAACP,CAAW,CAAC,GAEVU,IAAehB,MAAmB,SAASd,EAAWM,cAAcN,EAAWO,cAE/EwB,IAAkBN,EAAMO,QAAQ,MAAM;AAC1C,YAAOlB,GAAc;AAAA,MACnB,KAAK;AAAQ,eAAOd,EAAWS;AAAAA,MAC/B,KAAK;AAAS,eAAOT,EAAWU;AAAAA,MAChC,KAAK;AAAS,eAAOV,EAAWW;AAAAA,MAChC;AAAgB,eAAA;AAAA,IAClB;AAAA,EAAA,GACC,CAACG,CAAc,CAAC;AAMjBW,SAAAA,gBAAAA,EAAAQ,cAAA,OAAA;AAAA,IAAKC,WAAW,yBAAyBrB,CAAsB,IAAIb,EAAWC,aAAa,IAAID,EAAWc,CAAc,CAAC,IAAIQ,IAAU,SAAS,MAAM;AAAA,IAAI,sBAAoBD;AAAAA,EAAAA,GAC5KY,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAWlC,EAAWE;AAAAA,EAAAA,GACzB+B,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAA,GACbD,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMC,WAAWJ;AAAAA,EAAAA,GACfG,gBAAAA,EAAAA,cAACnC,GAAI;AAAA,IAACqC,MAAM;AAAA,IAAQD,WAAU;AAAA,EAA6C,CAAA,GAC1EnB,GACAE,KACCQ,gBAAAA,EAAAQ,cAAClC,GAAM;AAAA,IACLqC,OAAOlB;AAAAA,IACPmB,MAAK;AAAA,IACLC,MAAK;AAAA,IACLC,SAASpB;AAAAA,IACTe,WAAW,GAAGH,CAAe;AAAA,IAC7BV,cAAa;AAAA,EAAA,CACd,CAEC,CACH,CACF,GACJL,KACCS,gBAAAA,EAAAQ,cAACnC,GAAI;AAAA,IACHqC,MAAM;AAAA,IACND,WAAWlC,EAAWQ;AAAAA,IACtB+B,SAASf;AAAAA,EACV,CAAA,CAEA;AAET;"}
+{"version":3,"file":"index43.js","sources":["../src/components/MessageBar/index.tsx"],"sourcesContent":["import React, { FC, useState } from 'react';\nimport { Map } from 'src/utils/common.types';\nimport { Icon } from '../Icon';\nimport { Button } from '../Button';\nimport './style.scss';\n\nexport interface MessageBarProps {\n  messageBarCtnClassName?: string;\n  messageBarType: 'info' | 'alert' | 'nudge';\n  message: string;\n  hasCloseIcon?: boolean;\n  hasButton?: boolean,\n  buttonLabel: string | '',\n  buttonOnClick?: () => void,\n  handleClose?: () => void,\n  automationId?: string;\n}\n\nconst classNames: Map = {\n  messageBarCtn: \"min-h-[45px] fixed top-0 w-full flex items-center justify-center py-2\",\n  messageCtn: \"flex items-center justify-center gap-2 flex-wrap px-4 pr-12\",\n  info: \"bg-[var(--color-yellow-50)]\",\n  alert: \"bg-[var(--color-red-500)]\",\n  nudge: \"bg-[var(--color-blue-500)]\",\n  infoMessage: \"text-[var(--color-yellow-700)] text-center\",  \n  alertMessage: \"text-[var(--color-white)] text-center\",\n  closeIconCtn: \"absolute right-[12px] cursor-pointer cursor-pointer hover:bg-[var(--color-gray-500)] rounded-full p-1\",\n  customInfoClassBtn: \"bg-[var(--color-yellow-50)] text-[var(--color-yellow-700)] hover:bg-[var(--color-yellow-50)] border border-[var(--color-yellow-700)] hover:border-[var(--color-yellow-900)]\",\n  customAlertClassBtn: \"bg-[var(--color-red-500)] text-[var(--color-white)] hover:bg-[var(--color-red-500)] border border-[var(--color-white)] hover:border-[var(--color-white)]\",\n  customNudgeClassBtn: \"bg-[var(--color-blue-500)] text-[var(--color-white)] hover:bg-[var(--color-blue-500)] border border-[var(--color-white)] hover:border-[var(--color-white)]\",\n};\n\nexport const MessageBar: FC<MessageBarProps> = ({\n  messageBarCtnClassName = \"\",\n  messageBarType = 'info',\n  message = '',\n  hasCloseIcon = false,\n  hasButton = false,\n  buttonLabel = '',\n  buttonOnClick = () => {},\n  handleClose = () => {},\n  automationId = ''\n}) => {\n  const [visible, setVisible] = useState(true);\n\n  const handleClickOnCloseIcon = React.useCallback(() => {\n    setVisible(false);\n    const timer = setTimeout(() => {\n      handleClose?.();\n    }, 300);\n    return () => clearTimeout(timer);\n  }, [handleClose]);\n\n  const messageClass = messageBarType === 'info' ? classNames.infoMessage : classNames.alertMessage;\n  \n  const buttonClassName = React.useMemo(() => {\n    switch(messageBarType) {\n      case 'info': return classNames.customInfoClassBtn;\n      case 'alert': return classNames.customAlertClassBtn;\n      case 'nudge': return classNames.customNudgeClassBtn;\n      default: return '';\n    }\n  }, [messageBarType]);\n\n  // const iconName = messageBarType === 'info' ? \"info\" : \"info-white\";\n  // const closeIconName = messageBarType === 'info' ? \"close\" : \"white-close\";\n\n  return (\n    <div className={`se-design-message-bar ${messageBarCtnClassName} ${classNames.messageBarCtn} ${classNames[messageBarType]} ${visible ? \"show\" : \"hide\"}`} data-automation-id={automationId}>\n      <div className={classNames.messageCtn}>\n        <div className=\"inline-flex items-center\">\n          <span className={messageClass}>\n            <Icon name={\"info\"} className=\"inline-block h-fit relative top-[3px] mr-1\"/>\n            {message}\n            {hasButton && (\n              <Button \n                label={buttonLabel} \n                type='primary' \n                size=\"sm\" \n                onClick={buttonOnClick}\n                className={`${buttonClassName} ml-2 alert-btn`}\n                automationId=\"message-bar-cta\"\n              />\n            )}\n          </span>\n        </div>\n      </div>\n      {hasCloseIcon && (\n        <Icon \n          name={\"close\"} \n          className={classNames.closeIconCtn} \n          onClick={handleClickOnCloseIcon} \n        />\n      )}\n    </div>\n  );\n};\n\nexport default MessageBar;"],"names":["React__default","useState","Icon","Button","classNames","messageBarCtn","messageCtn","info","alert","nudge","infoMessage","alertMessage","closeIconCtn","customInfoClassBtn","customAlertClassBtn","customNudgeClassBtn","MessageBar","messageBarCtnClassName","messageBarType","message","hasCloseIcon","hasButton","buttonLabel","buttonOnClick","handleClose","automationId","visible","setVisible","handleClickOnCloseIcon","React","useCallback","timer","setTimeout","clearTimeout","messageClass","buttonClassName","useMemo","createElement","className","name","label","type","size","onClick"],"mappings":"AAkBA,OAAAA,KAAA,YAAAC,SAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,SAAA,UAAAC,SAAA;AAAA,OAAA;AAAA,MAAMC,IAAkB;AAAA,EACtBC,eAAe;AAAA,EACfC,YAAY;AAAA,EACZC,MAAM;AAAA,EACNC,OAAO;AAAA,EACPC,OAAO;AAAA,EACPC,aAAa;AAAA,EACbC,cAAc;AAAA,EACdC,cAAc;AAAA,EACdC,oBAAoB;AAAA,EACpBC,qBAAqB;AAAA,EACrBC,qBAAqB;AACvB,GAEaC,IAAkCA,CAAC;AAAA,EAC9CC,wBAAAA,IAAyB;AAAA,EACzBC,gBAAAA,IAAiB;AAAA,EACjBC,SAAAA,IAAU;AAAA,EACVC,cAAAA,IAAe;AAAA,EACfC,WAAAA,IAAY;AAAA,EACZC,aAAAA,IAAc;AAAA,EACdC,eAAAA,IAAgBA,MAAM;AAAA,EAAC;AAAA,EACvBC,aAAAA,IAAcA,MAAM;AAAA,EAAC;AAAA,EACrBC,cAAAA,IAAe;AACjB,MAAM;AACJ,QAAM,CAACC,GAASC,CAAU,IAAI1B,EAAS,EAAI,GAErC2B,IAAyBC,EAAMC,YAAY,MAAM;AACrDH,IAAAA,EAAW,EAAK;AAChB,UAAMI,IAAQC,WAAW,MAAM;AAC7BR,MAAAA,IAAAA;AAAAA,IACF,GAAG,GAAG;AACN,WAAO,MAAMS,aAAaF,CAAK;AAAA,EACjC,GAAG,CAACP,CAAW,CAAC,GAEVU,IAAehB,MAAmB,SAASd,EAAWM,cAAcN,EAAWO,cAE/EwB,IAAkBN,EAAMO,QAAQ,MAAM;AAC1C,YAAOlB,GAAAA;AAAAA,MACL,KAAK;AAAQ,eAAOd,EAAWS;AAAAA,MAC/B,KAAK;AAAS,eAAOT,EAAWU;AAAAA,MAChC,KAAK;AAAS,eAAOV,EAAWW;AAAAA,MAChC;AAAS,eAAO;AAAA,IAAA;AAAA,EAEpB,GAAG,CAACG,CAAc,CAAC;AAKnB,SACEW,gBAAAA,EAAAQ,cAAA,OAAA;AAAA,IAAKC,WAAW,yBAAyBrB,CAAsB,IAAIb,EAAWC,aAAa,IAAID,EAAWc,CAAc,CAAC,IAAIQ,IAAU,SAAS,MAAM;AAAA,IAAI,sBAAoBD;AAAAA,EAAAA,GAC5KI,gBAAAA,EAAAQ,cAAA,OAAA;AAAA,IAAKC,WAAWlC,EAAWE;AAAAA,EAAAA,GACzBuB,gBAAAA,EAAAQ,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAA,GACbT,gBAAAA,EAAAQ,cAAA,QAAA;AAAA,IAAMC,WAAWJ;AAAAA,EAAAA,GACfL,gBAAAA,EAAAQ,cAACnC,GAAI;AAAA,IAACqC,MAAM;AAAA,IAAQD,WAAU;AAAA,EAAA,CAA6C,GAC1EnB,GACAE,KACCQ,gBAAAA,EAAAQ,cAAClC,GAAM;AAAA,IACLqC,OAAOlB;AAAAA,IACPmB,MAAK;AAAA,IACLC,MAAK;AAAA,IACLC,SAASpB;AAAAA,IACTe,WAAW,GAAGH,CAAe;AAAA,IAC7BV,cAAa;AAAA,EAAA,CACd,CAEC,CACH,CACF,GACJL,KACCS,gBAAAA,EAAAQ,cAACnC,GAAI;AAAA,IACHqC,MAAM;AAAA,IACND,WAAWlC,EAAWQ;AAAAA,IACtB+B,SAASf;AAAAA,EAAAA,CACV,CAEA;AAET;"}