se-design 0.0.114 → 0.0.116

package/dist/index3.js.map

@@ -1 +1 @@
-{"version":3,"file":"index3.js","sources":["../src/components/Button/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { Map } from '../../utils/common.types';\nimport { Icon } from '../Icon';\n\nexport interface ButtonProps {\n  /**\n   * Type of the button\n   */\n  type?: 'primary' | 'secondary' | 'secondary-blue' | 'negative' | 'negative-secondary' | 'purchase' | 'purchase-secondary' | 'link';\n  /**\n   * Size of the button\n   */\n  size?: 'sm' | 'md' | 'smRow';\n  /**\n   * Button contents\n   */\n  label: string | '';\n  /**\n   * Icon name\n   */\n  icon?: string;\n  /**\n   * Icon position\n   */\n  iconPosition?: 'left' | 'right';\n  /**\n   * Disabled state\n   */\n  disabled?: boolean;\n  /**\n   * Optional click handler\n   */\n  onClick?: () => void;\n  /**\n   * Custom class name\n   */\n  className?: string;\n}\n\nconst focusClass = 'focus-visible:outline outline-2 outline-[var(--color-blue-400)] outline-offset-2';\nconst disabledClassNames: Map = {\n  primary: 'bg-[var(--color-gray-200)] text-[var(--color-gray-600)] pointer-events-none cursor-not-allowed',\n  secondary:\n    'text-[var(--color-gray-600)] border border-[var(--color-gray-300)] pointer-events-none cursor-not-allowed',\n  link: 'text-[var(--color-gray-600)] pointer-events-none cursor-not-allowed'\n};\nconst classNames: Map = {\n  primary: `bg-[var(--color-blue-500)] text-[var(--color-white)] hover:bg-[var(--color-blue-600)] ${focusClass}`,\n  secondary: `bg-[var(--color-white)] text-[var(--color-gray-800)] hover:bg-[var(--color-gray-50)] border border-[var(--color-gray-400)] hover:border-[var(--color-gray-500)] ${focusClass}`,\n  'secondary-blue': `bg-[var(--color-white)] border border-[var(--color-blue-500)] text-[var(--color-blue-500)] hover:bg-[var(--color-blue-100)] ${focusClass}`,\n  purchase: `bg-[var(--color-green-500)] text-[var(--color-white)] hover:bg-[var(--color-green-700)] border border-[var(--color-green-300)] ${focusClass}`,\n  'purchase-secondary': `bg-[var(--color-green-50)] text-[var(--color-green-500)] hover:bg-[var(--color-green-400)] border border-[var(--color-green-500)] hover:border-[var(--color-green-700)] ${focusClass}`,\n  negative: `bg-[var(--color-red-500)] text-[var(--color-white)] hover:bg-[var(--color-red-500)] border border-[var(--color-red-500)] hover:border-[var(--color-red-500)] ${focusClass}`,\n  'negative-secondary': `bg-[var(--color-red-50)] text-[var(--color-red-500)] hover:bg-[var(--color-red-50)] border border-[var(--color-red-500)] hover:border-[var(--color-red-500)] ${focusClass}`,\n  link: `text-[var(--color-blue-500)] px-0 py-0  hover:text-[var(--color-blue-600)] ${focusClass}`,\n  sm: 'px-3 py-1',\n  md: 'px-4 py-2',\n  smRow: 'px-3 py-0.5'\n};\n\nexport const Button: FC<ButtonProps> = ({\n  type = 'primary',\n  size = 'md',\n  label = '',\n  icon = '',\n  iconPosition = 'left',\n  disabled = false,\n  className = '',\n  ...props\n}) => {\n  const sizeClassName = type !== 'link' ? classNames[size] : '';\n\n  return (\n    <button\n      type=\"button\"\n      className={`rounded-[6px] text-base font-normal flex gap-1 items-center min-w-fit ${sizeClassName} ${disabled ? disabledClassNames[type] : classNames[type]} ${className}`}\n      {...props}\n    >\n      {icon && iconPosition === 'left' && <Icon name={icon} className=\"\" />}\n      {label}\n      {icon && iconPosition === 'right' && <Icon name={icon} className=\"\" />}\n    </button>\n  );\n};\n"],"names":["focusClass","disabledClassNames","primary","secondary","link","classNames","purchase","negative","sm","md","smRow","Button","_a","_b","type","size","label","icon","iconPosition","disabled","className","props","sizeClassName","React","createElement","_extends","Icon","name"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAuCA,MAAMA,IAAa,oFACbC,IAA0B;AAAA,EAC9BC,SAAS;AAAA,EACTC,WACE;AAAA,EACFC,MAAM;AACR,GACMC,IAAkB;AAAA,EACtBH,SAAS,yFAAyFF,CAAU;AAAA,EAC5GG,WAAW,mKAAmKH,CAAU;AAAA,EACxL,kBAAkB,+HAA+HA,CAAU;AAAA,EAC3JM,UAAU,kIAAkIN,CAAU;AAAA,EACtJ,sBAAsB,2KAA2KA,CAAU;AAAA,EAC3MO,UAAU,gKAAgKP,CAAU;AAAA,EACpL,sBAAsB,gKAAgKA,CAAU;AAAA,EAChMI,MAAM,8EAA8EJ,CAAU;AAAA,EAC9FQ,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,OAAO;AACT,GAEaC,IAA0BA,CAACC,MASlC;AATkC,MAAAC,IAAAD,GACtCE;AAAAA,UAAAA,IAAO;AAAA,IACPC,MAAAA,IAAO;AAAA,IACPC,OAAAA,IAAQ;AAAA,IACRC,MAAAA,IAAO;AAAA,IACPC,cAAAA,IAAe;AAAA,IACfC,UAAAA,IAAW;AAAA,IACXC,WAAAA,IAAY;AAAA,MAP0BP,GAQnCQ,IAAAA,EARmCR,GAQnCQ;AAAAA,IAPHP;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA;AAGA,QAAME,IAAgBR,MAAS,SAAST,EAAWU,CAAI,IAAI;AAGzDQ,SAAAA,gBAAAA,EAAAC,cAAA,UAAAC,EAAA;AAAA,IACEX,MAAK;AAAA,IACLM,WAAW,yEAAyEE,CAAa,IAAIH,IAAWlB,EAAmBa,CAAI,IAAIT,EAAWS,CAAI,CAAC,IAAIM,CAAS;AAAA,EAAA,GACpKC,CAAK,GAERJ,KAAQC,MAAiB,UAAUK,gBAAAA,EAAAC,cAACE,GAAI;AAAA,IAACC,MAAMV;AAAAA,IAAMG,WAAU;AAAA,EAAA,CAAI,GACnEJ,GACAC,KAAQC,MAAiB,WAAWK,gBAAAA,EAAAC,cAACE,GAAI;AAAA,IAACC,MAAMV;AAAAA,IAAMG,WAAU;AAAA,EAAA,CAAI,CAC/D;AAEZ;"}
+{"version":3,"file":"index3.js","sources":["../src/components/Button/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { Map } from '../../utils/common.types';\nimport { Icon, IconProps } from '../Icon';\n\nexport interface ButtonProps {\n  /**\n   * Type of the button\n   */\n  type?: 'primary' | 'secondary' | 'secondary-blue' | 'negative' | 'negative-secondary' | 'purchase' | 'purchase-secondary' | 'link';\n  /**\n   * Size of the button\n   */\n  size?: 'sm' | 'md' | 'smRow';\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   * Optional click handler\n   */\n  onClick?: () => void;\n  /**\n   * Custom class name\n   */\n  className?: string;\n}\n\nconst focusClass = 'focus-visible:outline outline-2 outline-[var(--color-blue-400)] outline-offset-2';\nconst disabledClassNames: Map = {\n  primary: 'bg-[var(--color-gray-200)] text-[var(--color-gray-600)] pointer-events-none cursor-not-allowed',\n  secondary:\n    'text-[var(--color-gray-600)] border border-[var(--color-gray-300)] pointer-events-none cursor-not-allowed',\n  link: 'text-[var(--color-gray-600)] pointer-events-none cursor-not-allowed'\n};\nconst classNames: Map = {\n  primary: `bg-[var(--color-blue-500)] text-[var(--color-white)] hover:bg-[var(--color-blue-600)] ${focusClass}`,\n  secondary: `bg-[var(--color-white)] text-[var(--color-gray-800)] hover:bg-[var(--color-gray-50)] border border-[var(--color-gray-400)] hover:border-[var(--color-gray-500)] ${focusClass}`,\n  'secondary-blue': `bg-[var(--color-white)] border border-[var(--color-blue-500)] text-[var(--color-blue-500)] hover:bg-[var(--color-blue-100)] ${focusClass}`,\n  purchase: `bg-[var(--color-green-500)] text-[var(--color-white)] hover:bg-[var(--color-green-700)] border border-[var(--color-green-300)] ${focusClass}`,\n  'purchase-secondary': `bg-[var(--color-green-50)] text-[var(--color-green-500)] hover:bg-[var(--color-green-400)] border border-[var(--color-green-500)] hover:border-[var(--color-green-700)] ${focusClass}`,\n  negative: `bg-[var(--color-red-500)] text-[var(--color-white)] hover:bg-[var(--color-red-500)] border border-[var(--color-red-500)] hover:border-[var(--color-red-500)] ${focusClass}`,\n  'negative-secondary': `bg-[var(--color-red-50)] text-[var(--color-red-500)] hover:bg-[var(--color-red-50)] border border-[var(--color-red-500)] hover:border-[var(--color-red-500)] ${focusClass}`,\n  link: `text-[var(--color-blue-500)] px-0 py-0  hover:text-[var(--color-blue-600)] ${focusClass}`,\n  sm: 'px-3 py-1',\n  md: 'px-4 py-2',\n  smRow: 'px-3 py-0.5'\n};\n\nexport const Button: FC<ButtonProps> = ({\n  type = 'primary',\n  size = 'md',\n  label = '',\n  iconPosition = 'left',\n  disabled = false,\n  className = '',\n  iconProps = { name: '' },\n  ...props\n}) => {\n  const sizeClassName = type !== 'link' ? classNames[size] : '';\n\n  return (\n    <button\n      type=\"button\"\n      className={`rounded-[6px] text-base font-normal flex gap-1 items-center min-w-fit ${sizeClassName} ${disabled ? disabledClassNames[type] : classNames[type]} ${className}`}\n      {...props}\n    >\n      {iconProps?.name && iconPosition === 'left' && <Icon {...iconProps} />}\n      {label}\n      {iconProps?.name && iconPosition === 'right' && <Icon {...iconProps} />}\n    </button>\n  );\n};\n"],"names":["focusClass","disabledClassNames","primary","secondary","link","classNames","purchase","negative","sm","md","smRow","Button","_a","_b","type","size","label","iconPosition","disabled","className","iconProps","name","props","sizeClassName","React","createElement","_extends","Icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAuCA,MAAMA,IAAa,oFACbC,IAA0B;AAAA,EAC9BC,SAAS;AAAA,EACTC,WACE;AAAA,EACFC,MAAM;AACR,GACMC,IAAkB;AAAA,EACtBH,SAAS,yFAAyFF,CAAU;AAAA,EAC5GG,WAAW,mKAAmKH,CAAU;AAAA,EACxL,kBAAkB,+HAA+HA,CAAU;AAAA,EAC3JM,UAAU,kIAAkIN,CAAU;AAAA,EACtJ,sBAAsB,2KAA2KA,CAAU;AAAA,EAC3MO,UAAU,gKAAgKP,CAAU;AAAA,EACpL,sBAAsB,gKAAgKA,CAAU;AAAA,EAChMI,MAAM,8EAA8EJ,CAAU;AAAA,EAC9FQ,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,OAAO;AACT,GAEaC,IAA0BA,CAACC,MASlC;AATkC,MAAAC,IAAAD,GACtCE;AAAAA,UAAAA,IAAO;AAAA,IACPC,MAAAA,IAAO;AAAA,IACPC,OAAAA,IAAQ;AAAA,IACRC,cAAAA,IAAe;AAAA,IACfC,UAAAA,IAAW;AAAA,IACXC,WAAAA,IAAY;AAAA,IACZC,WAAAA,IAAY;AAAA,MAAEC,MAAM;AAAA,IAAG;AAAA,MAPeR,GAQnCS,IAAAA,EARmCT,GAQnCS;AAAAA,IAPHR;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA;AAGA,QAAMG,IAAgBT,MAAS,SAAST,EAAWU,CAAI,IAAI;AAGzDS,SAAAA,gBAAAA,EAAAC,cAAA,UAAAC,EAAA;AAAA,IACEZ,MAAK;AAAA,IACLK,WAAW,yEAAyEI,CAAa,IAAIL,IAAWjB,EAAmBa,CAAI,IAAIT,EAAWS,CAAI,CAAC,IAAIK,CAAS;AAAA,EAAA,GACpKG,CAAK,IAERF,KAAAA,gBAAAA,EAAWC,SAAQJ,MAAiB,4BAAUQ,cAACE,GAASP,CAAY,GACpEJ,IACAI,KAAAA,gBAAAA,EAAWC,SAAQJ,MAAiB,WAAWQ,gBAAAA,EAAAA,cAACE,GAASP,CAAY,CAChE;AAEZ;"}

package/dist/index34.js

@@ -33,7 +33,7 @@ const g = ({
   }))), n === "right" && /* @__PURE__ */ e.createElement("div", {
     className: `se-design-accordion-icon transform transition-transform duration-300 ${s()}`
   }, /* @__PURE__ */ e.createElement(c, {
-    name: "chevron-down"
+    name: "chevron"
   }))), t && /* @__PURE__ */ e.createElement("div", {
     className: `se-design-accordion-content transition-all duration-300 mt-1 ${m}`
   }, o({

package/dist/index34.js.map

@@ -1 +1 @@
-{"version":3,"file":"index34.js","sources":["../src/components/CustomAccordion/index.tsx"],"sourcesContent":["import React, { FC, useEffect, useState } from 'react';\nimport { Icon } from '../Icon';\n\nexport interface CustomAccordionProps {\n  renderAccordionContents: (props: { isOpen: boolean }) => React.ReactNode;\n  renderAccordionSrcElement: (props: { isOpen: boolean }) => React.ReactNode;\n  defaultOpen?: boolean;\n  className?: string;\n  arrowPosition?: 'left' | 'right';\n  contentClassName?: string;\n}\n\nexport const CustomAccordion: FC<CustomAccordionProps> = ({ \n  renderAccordionContents, \n  renderAccordionSrcElement, \n  defaultOpen, \n  className = '',\n  arrowPosition = 'left',\n  contentClassName = ''\n}) => {\n  const [isOpen, setIsOpen] = useState(false);\n  useEffect(()=>{\n    setIsOpen(defaultOpen || false)\n  },[defaultOpen])\n\n  const getArrowRotation = () => {\n    if (arrowPosition === 'left') {\n      return isOpen ? 'rotate-90' : '';\n    }\n    return isOpen ? 'rotate-180' : '';\n  };\n\n  return (\n    <div className={`se-design-accordion ${className}`}>\n      <div className=\"flex flex-col\">\n        <div className=\"flex items-center cursor-pointer\" onClick={() => setIsOpen(!isOpen)}>\n          {arrowPosition === 'left' && (\n            <div className={`se-design-accordion-icon transform transition-transform duration-300 ${getArrowRotation()}`}>\n              <Icon name=\"rightSide\" />\n            </div>\n          )}\n          <div className=\"se-design-accordion-elements flex-1\">\n            <div className=\"se-design-accordion-src-element title\">{renderAccordionSrcElement({isOpen})}</div>\n          </div>\n          {arrowPosition === 'right' && (\n            <div className={`se-design-accordion-icon transform transition-transform duration-300 ${getArrowRotation()}`}>\n              <Icon name=\"chevron-down\" />\n            </div>\n          )}\n        </div>\n        {isOpen && (\n          <div className={`se-design-accordion-content transition-all duration-300 mt-1 ${contentClassName}`}>\n            {renderAccordionContents({isOpen})}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["CustomAccordion","renderAccordionContents","renderAccordionSrcElement","defaultOpen","className","arrowPosition","contentClassName","isOpen","setIsOpen","useState","useEffect","getArrowRotation","React","createElement","onClick","Icon","name"],"mappings":";;AAYO,MAAMA,IAA4CA,CAAC;AAAA,EACxDC,yBAAAA;AAAAA,EACAC,2BAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,WAAAA,IAAY;AAAA,EACZC,eAAAA,IAAgB;AAAA,EAChBC,kBAAAA,IAAmB;AACrB,MAAM;AACJ,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK;AAC1CC,EAAAA,EAAU,MAAI;AACZF,IAAAA,EAAUL,KAAe,EAAK;AAAA,EAAA,GAC9B,CAACA,CAAW,CAAC;AAEf,QAAMQ,IAAmBA,MACnBN,MAAkB,SACbE,IAAS,cAAc,KAEzBA,IAAS,eAAe;AAI/BK,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKT,WAAW,uBAAuBA,CAAS;AAAA,EAAA,GAC9CS,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKT,WAAU;AAAA,EAAA,GACbS,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKT,WAAU;AAAA,IAAmCU,SAASA,MAAMN,EAAU,CAACD,CAAM;AAAA,EAC/EF,GAAAA,MAAkB,UACjBO,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKT,WAAW,wEAAwEO,GAAkB;AAAA,EAAA,GACxGE,gBAAAA,EAAAA,cAACE,GAAI;AAAA,IAACC,MAAK;AAAA,EAAa,CAAA,CACrB,GAEPJ,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKT,WAAU;AAAA,EAAA,GACbS,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKT,WAAU;AAAA,KAAyCF,EAA0B;AAAA,IAACK,QAAAA;AAAAA,EAAAA,CAAO,CAAO,CAC9F,GACJF,MAAkB,WACjBO,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKT,WAAW,wEAAwEO,GAAkB;AAAA,EAAA,GACxGE,gBAAAA,EAAAA,cAACE,GAAI;AAAA,IAACC,MAAK;AAAA,EAAgB,CAAA,CACxB,CAEJ,GACJT,KACCK,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKT,WAAW,gEAAgEE,CAAgB;AAAA,KAC7FL,EAAwB;AAAA,IAACM,QAAAA;AAAAA,EAAO,CAAA,CAC9B,CAEJ,CACF;AAET;"}
+{"version":3,"file":"index34.js","sources":["../src/components/CustomAccordion/index.tsx"],"sourcesContent":["import React, { FC, useEffect, useState } from 'react';\nimport { Icon } from '../Icon';\n\nexport interface CustomAccordionProps {\n  renderAccordionContents: (props: { isOpen: boolean }) => React.ReactNode;\n  renderAccordionSrcElement: (props: { isOpen: boolean }) => React.ReactNode;\n  defaultOpen?: boolean;\n  className?: string;\n  arrowPosition?: 'left' | 'right';\n  contentClassName?: string;\n}\n\nexport const CustomAccordion: FC<CustomAccordionProps> = ({ \n  renderAccordionContents, \n  renderAccordionSrcElement, \n  defaultOpen, \n  className = '',\n  arrowPosition = 'left',\n  contentClassName = ''\n}) => {\n  const [isOpen, setIsOpen] = useState(false);\n  useEffect(()=>{\n    setIsOpen(defaultOpen || false)\n  },[defaultOpen])\n\n  const getArrowRotation = () => {\n    if (arrowPosition === 'left') {\n      return isOpen ? 'rotate-90' : '';\n    }\n    return isOpen ? 'rotate-180' : '';\n  };\n\n  return (\n    <div className={`se-design-accordion ${className}`}>\n      <div className=\"flex flex-col\">\n        <div className=\"flex items-center cursor-pointer\" onClick={() => setIsOpen(!isOpen)}>\n          {arrowPosition === 'left' && (\n            <div className={`se-design-accordion-icon transform transition-transform duration-300 ${getArrowRotation()}`}>\n              <Icon name=\"rightSide\" />\n            </div>\n          )}\n          <div className=\"se-design-accordion-elements flex-1\">\n            <div className=\"se-design-accordion-src-element title\">{renderAccordionSrcElement({isOpen})}</div>\n          </div>\n          {arrowPosition === 'right' && (\n            <div className={`se-design-accordion-icon transform transition-transform duration-300 ${getArrowRotation()}`}>\n              <Icon name=\"chevron\" />\n            </div>\n          )}\n        </div>\n        {isOpen && (\n          <div className={`se-design-accordion-content transition-all duration-300 mt-1 ${contentClassName}`}>\n            {renderAccordionContents({isOpen})}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["CustomAccordion","renderAccordionContents","renderAccordionSrcElement","defaultOpen","className","arrowPosition","contentClassName","isOpen","setIsOpen","useState","useEffect","getArrowRotation","React","createElement","onClick","Icon","name"],"mappings":";;AAYO,MAAMA,IAA4CA,CAAC;AAAA,EACxDC,yBAAAA;AAAAA,EACAC,2BAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,WAAAA,IAAY;AAAA,EACZC,eAAAA,IAAgB;AAAA,EAChBC,kBAAAA,IAAmB;AACrB,MAAM;AACJ,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK;AAC1CC,EAAAA,EAAU,MAAI;AACZF,IAAAA,EAAUL,KAAe,EAAK;AAAA,EAAA,GAC9B,CAACA,CAAW,CAAC;AAEf,QAAMQ,IAAmBA,MACnBN,MAAkB,SACbE,IAAS,cAAc,KAEzBA,IAAS,eAAe;AAI/BK,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKT,WAAW,uBAAuBA,CAAS;AAAA,EAAA,GAC9CS,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKT,WAAU;AAAA,EAAA,GACbS,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKT,WAAU;AAAA,IAAmCU,SAASA,MAAMN,EAAU,CAACD,CAAM;AAAA,EAC/EF,GAAAA,MAAkB,UACjBO,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKT,WAAW,wEAAwEO,GAAkB;AAAA,EAAA,GACxGE,gBAAAA,EAAAA,cAACE,GAAI;AAAA,IAACC,MAAK;AAAA,EAAa,CAAA,CACrB,GAEPJ,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKT,WAAU;AAAA,EAAA,GACbS,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKT,WAAU;AAAA,KAAyCF,EAA0B;AAAA,IAACK,QAAAA;AAAAA,EAAAA,CAAO,CAAO,CAC9F,GACJF,MAAkB,WACjBO,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKT,WAAW,wEAAwEO,GAAkB;AAAA,EAAA,GACxGE,gBAAAA,EAAAA,cAACE,GAAI;AAAA,IAACC,MAAK;AAAA,EAAW,CAAA,CACnB,CAEJ,GACJT,KACCK,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKT,WAAW,gEAAgEE,CAAgB;AAAA,KAC7FL,EAAwB;AAAA,IAACM,QAAAA;AAAAA,EAAO,CAAA,CAC9B,CAEJ,CACF;AAET;"}

package/dist/index37.js

@@ -1,7 +1,7 @@
 import a, { useState as h, useRef as H, useEffect as s, useMemo as _ } from "react";
 import { Icon as g } from "./index5.js";
 import { LabelChip as $ } from "./index9.js";
-import { debounce as z } from "./index129.js";
+import { debounce as z } from "./index128.js";
 /* empty css         */
 function T(r) {
   const {

package/dist/index39.js

@@ -1,4 +1,4 @@
-import e, { useState as g, useRef as p } from "react";
+import t, { useState as p, useRef as f } from "react";
 import { Icon as s } from "./index5.js";
 import { ProgressBar as x } from "./index38.js";
 /* empty css         */
@@ -8,48 +8,49 @@ const r = {
   gettingStartedWidgetContent: "overflow-hidden transition-all duration-300",
   icon: "transition-transform duration-300 cursor-pointer",
   actionItemCtn: "flex items-center gap-2 mt-[4px] mb-[10px]"
-}, v = ({
+}, N = ({
   widgetClassName: l = "",
   actionItems: a = []
 }) => {
   var c;
-  const [n, i] = g(!1), o = p(null), d = () => {
+  const [n, i] = p(!1), o = f(null), d = () => {
     i(!n);
-  };
-  return /* @__PURE__ */ e.createElement("div", {
+  }, m = (e) => e ? "var(--color-green-500)" : "var(--color-gray-200)";
+  return /* @__PURE__ */ t.createElement("div", {
     className: `${r.gettingStartedWidgetCtn} ${l} getting-started-widget-ctn`
-  }, /* @__PURE__ */ e.createElement("div", {
+  }, /* @__PURE__ */ t.createElement("div", {
     className: r.accordionCtn
-  }, /* @__PURE__ */ e.createElement("span", {
+  }, /* @__PURE__ */ t.createElement("span", {
     className: "title text-[var(--color-gray-900)]"
-  }, "Get Started"), /* @__PURE__ */ e.createElement(s, {
-    name: "chevron-down",
+  }, "Get Started"), /* @__PURE__ */ t.createElement(s, {
+    name: "chevron",
     className: `${r.icon} ${n ? "rotate-180" : ""}`,
     onClick: d
-  })), /* @__PURE__ */ e.createElement("div", {
+  })), /* @__PURE__ */ t.createElement("div", {
     className: "mt-[12px]"
-  }, /* @__PURE__ */ e.createElement(x, {
+  }, /* @__PURE__ */ t.createElement(x, {
     totalTasks: a.length,
-    completedTasks: a.filter((t) => t.isComplete).length,
+    completedTasks: a.filter((e) => e.isComplete).length,
     progressBarCtnClassName: "get-started-progress-bar-ctn"
-  })), /* @__PURE__ */ e.createElement("div", {
+  })), /* @__PURE__ */ t.createElement("div", {
     ref: o,
     className: r.gettingStartedWidgetContent,
     style: {
       maxHeight: n ? `${(c = o.current) == null ? void 0 : c.scrollHeight}px` : "0px"
     }
-  }, a.map((t, m) => /* @__PURE__ */ e.createElement("div", {
-    key: m,
+  }, a.map((e, g) => /* @__PURE__ */ t.createElement("div", {
+    key: g,
     className: r.actionItemCtn
-  }, /* @__PURE__ */ e.createElement(s, {
-    name: t.isComplete ? "checked-circle-green" : "checked-circle-disabled"
-  }), /* @__PURE__ */ e.createElement("span", {
-    className: t.isComplete ? "text-[var(--color-gray-500)]" : "text-[var(--color-gray-900)] cursor-pointer",
-    onClick: t == null ? void 0 : t.handleActionItemClick
-  }, t.label)))));
+  }, /* @__PURE__ */ t.createElement(s, {
+    name: "checked-circle",
+    stroke: m(e.isComplete)
+  }), /* @__PURE__ */ t.createElement("span", {
+    className: e.isComplete ? "text-[var(--color-gray-500)]" : "text-[var(--color-gray-900)] cursor-pointer",
+    onClick: e == null ? void 0 : e.handleActionItemClick
+  }, e.label)))));
 };
 export {
-  v as GetStartedWidget,
-  v as default
+  N as GetStartedWidget,
+  N as default
 };
 //# sourceMappingURL=index39.js.map

package/dist/index39.js.map

@@ -1 +1 @@
-{"version":3,"file":"index39.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  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-down\" 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={item.isComplete ? \"checked-circle-green\" : \"checked-circle-disabled\"} />\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","_a","isExpanded","setIsExpanded","contentRef","toggleAccordion","React","createElement","name","onClick","totalTasks","length","completedTasks","filter","item","isComplete","progressBarCtnClassName","ref","style","maxHeight","current","scrollHeight","map","index","key","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;AAXN,MAAAC;AAYE,QAAM,CAACC,GAAYC,CAAa,IAAIf,EAAS,EAAK,GAC5CgB,IAAaf,EAAuB,IAAI,GAExCgB,IAAkBA,MAAM;AAC5BF,IAAAA,EAAc,CAACD,CAAU;AAAA,EAC3B;AAGEI,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKf,WAAW,GAAGA,EAAUC,uBAAuB,IAAIM,CAAe;AAAA,EAAA,GACrEQ,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKf,WAAWA,EAAUE;AAAAA,EAAAA,GACxBa,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMf,WAAU;AAAA,EAAqC,GAAA,aAAiB,GACtEc,gBAAAA,EAAAC,cAACjB,GAAI;AAAA,IAACkB,MAAK;AAAA,IAAehB,WAAW,GAAGA,EAAUI,IAAI,IAAIM,IAAa,eAAe,EAAE;AAAA,IAAIO,SAASJ;AAAAA,EAAkB,CAAA,CACpH,GACLC,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKf,WAAU;AAAA,EAAA,GACbe,gBAAAA,EAAAA,cAAChB,GAAW;AAAA,IAACmB,YAAYV,EAAYW;AAAAA,IACrCC,gBAAgBZ,EAAYa,OAAOC,CAAQA,MAAAA,EAAKC,UAAU,EAAEJ;AAAAA,IAC5DK,yBAAwB;AAAA,EAA+B,CAAA,CACpD,GACLV,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEU,KAAKb;AAAAA,IACLZ,WAAWA,EAAUG;AAAAA,IACrBuB,OAAO;AAAA,MACLC,WAAWjB,IAAa,IAAGE,IAAAA,EAAWgB,YAAXhB,gBAAAA,EAAoBiB,YAAY,OAAO;AAAA,IAAA;AAAA,EACpE,GAECrB,EAAYsB,IAAI,CAACR,GAAMS,MACtBjB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKiB,KAAKD;AAAAA,IAAO/B,WAAWA,EAAUK;AAAAA,EAAAA,GACpCU,gBAAAA,EAAAA,cAACjB,GAAI;AAAA,IAACkB,MAAMM,EAAKC,aAAa,yBAAyB;AAAA,EAAA,CAA4B,GACnFR,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMf,WAAWsB,EAAKC,aAAa,iCAAiC;AAAA,IAA+CN,SAASK,KAAAA,gBAAAA,EAAMW;AAAAA,KAC/HX,EAAKY,KACF,CACH,CACN,CACE,CACF;AAET;"}
+{"version":3,"file":"index39.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","_a","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;AAXN,MAAAC;AAYE,QAAM,CAACC,GAAYC,CAAa,IAAIf,EAAS,EAAK,GAC5CgB,IAAaf,EAAuB,IAAI,GAExCgB,IAAkBA,MAAM;AAC5BF,IAAAA,EAAc,CAACD,CAAU;AAAA,EAC3B,GAEMI,IAAgBA,CAACC,MAClBA,IACM,2BAEF;AAIPC,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKjB,WAAW,GAAGA,EAAUC,uBAAuB,IAAIM,CAAe;AAAA,EAAA,GACrEU,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKjB,WAAWA,EAAUE;AAAAA,EAAAA,GACxBe,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMjB,WAAU;AAAA,EAAqC,GAAA,aAAiB,GACtEgB,gBAAAA,EAAAC,cAACnB,GAAI;AAAA,IAACoB,MAAK;AAAA,IAAUlB,WAAW,GAAGA,EAAUI,IAAI,IAAIM,IAAa,eAAe,EAAE;AAAA,IAAIS,SAASN;AAAAA,EAAkB,CAAA,CAC/G,GACLG,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKjB,WAAU;AAAA,EAAA,GACbiB,gBAAAA,EAAAA,cAAClB,GAAW;AAAA,IAACqB,YAAYZ,EAAYa;AAAAA,IACrCC,gBAAgBd,EAAYe,OAAOC,CAAQA,MAAAA,EAAKT,UAAU,EAAEM;AAAAA,IAC5DI,yBAAwB;AAAA,EAA+B,CAAA,CACpD,GACLT,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACES,KAAKd;AAAAA,IACLZ,WAAWA,EAAUG;AAAAA,IACrBwB,OAAO;AAAA,MACLC,WAAWlB,IAAa,IAAGE,IAAAA,EAAWiB,YAAXjB,gBAAAA,EAAoBkB,YAAY,OAAO;AAAA,IAAA;AAAA,EACpE,GAECtB,EAAYuB,IAAI,CAACP,GAAMQ,MACtBhB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKgB,KAAKD;AAAAA,IAAOhC,WAAWA,EAAUK;AAAAA,EAAAA,GACpCY,gBAAAA,EAAAA,cAACnB,GAAI;AAAA,IAACoB,MAAM;AAAA,IAAmBgB,QAAQpB,EAAcU,EAAKT,UAAU;AAAA,EAAA,CAAI,GACxEE,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMjB,WAAWwB,EAAKT,aAAa,iCAAiC;AAAA,IAA+CI,SAASK,KAAAA,gBAAAA,EAAMW;AAAAA,KAC/HX,EAAKY,KACF,CACH,CACN,CACE,CACF;AAET;"}

package/dist/index40.js

@@ -1,6 +1,6 @@
-import e, { useState as x } from "react";
+import e, { useState as p } from "react";
 import { Icon as l } from "./index5.js";
-import { Button as p } from "./index3.js";
+import { Button as w } from "./index3.js";
 /* empty css         */
 const r = {
   messageBarCtn: "min-h-[45px] fixed top-0 w-full flex items-center justify-center py-2",
@@ -14,26 +14,26 @@ const r = {
   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)]",
   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)]",
   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)]"
-}, I = ({
+}, y = ({
   messageBarCtnClassName: s = "",
-  messageBarType: o = "info",
+  messageBarType: t = "info",
   message: a = "",
   hasCloseIcon: c = !1,
   hasButton: n = !1,
   buttonLabel: i = "",
   buttonOnClick: m = () => {
   },
-  handleClose: t = () => {
+  handleClose: o = () => {
   }
 }) => {
-  const [u, v] = x(!0), b = e.useCallback(() => {
+  const [u, v] = p(!0), b = e.useCallback(() => {
     v(!1);
-    const h = setTimeout(() => {
-      t == null || t();
+    const d = setTimeout(() => {
+      o == null || o();
     }, 300);
-    return () => clearTimeout(h);
-  }, [t]), f = o === "info" ? r.infoMessage : r.alertMessage, g = e.useMemo(() => {
-    switch (o) {
+    return () => clearTimeout(d);
+  }, [o]), f = t === "info" ? r.infoMessage : r.alertMessage, g = e.useMemo(() => {
+    switch (t) {
       case "info":
         return r.customInfoClassBtn;
       case "alert":
@@ -43,9 +43,9 @@ const r = {
       default:
         return "";
     }
-  }, [o]), d = o === "info" ? "info-brown" : "info-white", w = o === "info" ? "close" : "white-close";
+  }, [t]);
   return /* @__PURE__ */ e.createElement("div", {
-    className: `se-design-message-bar ${s} ${r.messageBarCtn} ${r[o]} ${u ? "show" : "hide"}`
+    className: `se-design-message-bar ${s} ${r.messageBarCtn} ${r[t]} ${u ? "show" : "hide"}`
   }, /* @__PURE__ */ e.createElement("div", {
     className: r.messageCtn
   }, /* @__PURE__ */ e.createElement("div", {
@@ -53,22 +53,22 @@ const r = {
   }, /* @__PURE__ */ e.createElement("span", {
     className: f
   }, /* @__PURE__ */ e.createElement(l, {
-    name: d,
+    name: "info",
     className: "inline-block h-fit relative top-[3px] mr-1"
-  }), a, n && /* @__PURE__ */ e.createElement(p, {
+  }), a, n && /* @__PURE__ */ e.createElement(w, {
     label: i,
     type: "primary",
     size: "sm",
     onClick: m,
     className: `${g} ml-2 alert-btn`
   })))), c && /* @__PURE__ */ e.createElement(l, {
-    name: w,
+    name: "close",
     className: r.closeIconCtn,
     onClick: b
   }));
 };
 export {
-  I as MessageBar,
-  I as default
+  y as MessageBar,
+  y as default
 };
 //# sourceMappingURL=index40.js.map

package/dist/index40.js.map

@@ -1 +1 @@
-{"version":3,"file":"index40.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}\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}) => {\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-brown\" : \"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\"}`}>\n      <div className={classNames.messageCtn}>\n        <div className=\"inline-flex items-center\">\n          <span className={messageClass}>\n            <Icon name={iconName} 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              />\n            )}\n          </span>\n        </div>\n      </div>\n      {hasCloseIcon && (\n        <Icon \n          name={closeIconName} \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","visible","setVisible","handleClickOnCloseIcon","React","useCallback","timer","setTimeout","clearTimeout","messageClass","buttonClassName","useMemo","iconName","closeIconName","createElement","className","name","label","type","size","onClick"],"mappings":"AAiBA,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,EAAA;AACtB,MAAM;AACJ,QAAM,CAACC,GAASC,CAAU,IAAIzB,EAAS,EAAI,GAErC0B,IAAyBC,EAAMC,YAAY,MAAM;AACrDH,IAAAA,EAAW,EAAK;AACVI,UAAAA,IAAQC,WAAW,MAAM;AACf,MAAAP,KAAA,QAAAA;AAAA,OACb,GAAG;AACC,WAAA,MAAMQ,aAAaF,CAAK;AAAA,EAAA,GAC9B,CAACN,CAAW,CAAC,GAEVS,IAAef,MAAmB,SAASd,EAAWM,cAAcN,EAAWO,cAE/EuB,IAAkBN,EAAMO,QAAQ,MAAM;AAC1C,YAAOjB,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,IAAA;AAAA,EAClB,GACC,CAACG,CAAc,CAAC,GAEbkB,IAAWlB,MAAmB,SAAS,eAAe,cACtDmB,IAAgBnB,MAAmB,SAAS,UAAU;AAG1DU,SAAAA,gBAAAA,EAAAU,cAAA,OAAA;AAAA,IAAKC,WAAW,yBAAyBtB,CAAsB,IAAIb,EAAWC,aAAa,IAAID,EAAWc,CAAc,CAAC,IAAIO,IAAU,SAAS,MAAM;AAAA,EAAA,GACpJa,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAWnC,EAAWE;AAAAA,EAAAA,GACzBgC,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAA,GACbD,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMC,WAAWN;AAAAA,EAAAA,GACfK,gBAAAA,EAAAA,cAACpC,GAAI;AAAA,IAACsC,MAAMJ;AAAAA,IAAUG,WAAU;AAAA,EAA6C,CAAA,GAC5EpB,GACAE,KACCO,gBAAAA,EAAAU,cAACnC,GAAM;AAAA,IACLsC,OAAOnB;AAAAA,IACPoB,MAAK;AAAA,IACLC,MAAK;AAAA,IACLC,SAASrB;AAAAA,IACTgB,WAAW,GAAGL,CAAe;AAAA,EAAA,CAC9B,CAEC,CACH,CACF,GACJd,KACCQ,gBAAAA,EAAAU,cAACpC,GAAI;AAAA,IACHsC,MAAMH;AAAAA,IACNE,WAAWnC,EAAWQ;AAAAA,IACtBgC,SAASjB;AAAAA,EAAAA,CACV,CAEA;AAET;"}
+{"version":3,"file":"index40.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}\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}) => {\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\"}`}>\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              />\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","visible","setVisible","handleClickOnCloseIcon","React","useCallback","timer","setTimeout","clearTimeout","messageClass","buttonClassName","useMemo","createElement","className","name","label","type","size","onClick"],"mappings":"AAiBA,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,EAAA;AACtB,MAAM;AACJ,QAAM,CAACC,GAASC,CAAU,IAAIzB,EAAS,EAAI,GAErC0B,IAAyBC,EAAMC,YAAY,MAAM;AACrDH,IAAAA,EAAW,EAAK;AACVI,UAAAA,IAAQC,WAAW,MAAM;AACf,MAAAP,KAAA,QAAAA;AAAA,OACb,GAAG;AACC,WAAA,MAAMQ,aAAaF,CAAK;AAAA,EAAA,GAC9B,CAACN,CAAW,CAAC,GAEVS,IAAef,MAAmB,SAASd,EAAWM,cAAcN,EAAWO,cAE/EuB,IAAkBN,EAAMO,QAAQ,MAAM;AAC1C,YAAOjB,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,IAAA;AAAA,EAClB,GACC,CAACG,CAAc,CAAC;AAMjBU,SAAAA,gBAAAA,EAAAQ,cAAA,OAAA;AAAA,IAAKC,WAAW,yBAAyBpB,CAAsB,IAAIb,EAAWC,aAAa,IAAID,EAAWc,CAAc,CAAC,IAAIO,IAAU,SAAS,MAAM;AAAA,EAAA,GACpJW,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAWjC,EAAWE;AAAAA,EAAAA,GACzB8B,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAA,GACbD,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMC,WAAWJ;AAAAA,EAAAA,GACfG,gBAAAA,EAAAA,cAAClC,GAAI;AAAA,IAACoC,MAAM;AAAA,IAAQD,WAAU;AAAA,EAA6C,CAAA,GAC1ElB,GACAE,KACCO,gBAAAA,EAAAQ,cAACjC,GAAM;AAAA,IACLoC,OAAOjB;AAAAA,IACPkB,MAAK;AAAA,IACLC,MAAK;AAAA,IACLC,SAASnB;AAAAA,IACTc,WAAW,GAAGH,CAAe;AAAA,EAAA,CAC9B,CAEC,CACH,CACF,GACJd,KACCQ,gBAAAA,EAAAQ,cAAClC,GAAI;AAAA,IACHoC,MAAM;AAAA,IACND,WAAWjC,EAAWQ;AAAAA,IACtB8B,SAASf;AAAAA,EAAAA,CACV,CAEA;AAET;"}

package/dist/index41.js

@@ -1,18 +1,18 @@
-var v = Object.defineProperty;
+var h = Object.defineProperty;
 var n = Object.getOwnPropertySymbols;
-var x = Object.prototype.hasOwnProperty, w = Object.prototype.propertyIsEnumerable;
-var i = (r, e, t) => e in r ? v(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, l = (r, e) => {
+var x = Object.prototype.hasOwnProperty, b = Object.prototype.propertyIsEnumerable;
+var l = (r, e, t) => e in r ? h(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, i = (r, e) => {
   for (var t in e || (e = {}))
-    x.call(e, t) && i(r, t, e[t]);
+    x.call(e, t) && l(r, t, e[t]);
   if (n)
     for (var t of n(e))
-      w.call(e, t) && i(r, t, e[t]);
+      b.call(e, t) && l(r, t, e[t]);
   return r;
 };
-import a, { useState as b, useEffect as E } from "react";
+import a, { useState as w, useEffect as k } from "react";
 import { Icon as m } from "./index5.js";
 /* empty css         */
-const s = {
+const o = {
   toastBarCtn: "min-h-[45px] fixed top-0 w-full flex items-center justify-center flex-wrap z-[1200]",
   success: "linear-gradient(90deg, var(--color-green-700) 0%, var(--color-green-400) 100%)",
   error: "linear-gradient(90deg, var(--color-red-700) 0%, var(--color-red-500) 100%)",
@@ -26,40 +26,42 @@ const s = {
   message: t = "",
   shouldAutoClose: u = !1,
   delay: d = 5e3,
-  onClose: o = () => {
+  onClose: s = () => {
   },
   containerStyle: f = {}
 }) => {
-  const [g, p] = b(!0);
-  E(() => {
+  const [g, v] = w(!0);
+  k(() => {
     if (u) {
-      const h = setTimeout(() => {
+      const p = setTimeout(() => {
         c();
       }, d);
-      return () => clearTimeout(h);
+      return () => clearTimeout(p);
     }
   }, []);
   const c = () => {
     setTimeout(() => {
-      p(!1), setTimeout(() => {
-        o == null || o();
+      v(!1), setTimeout(() => {
+        s == null || s();
       }, 300);
     }, 300);
   };
   return /* @__PURE__ */ a.createElement("div", {
-    className: `se-design-toast-bar ${r} ${s.toastBarCtn} ${g ? "show" : "hide"}`,
-    style: l({
-      background: s[e]
+    className: `se-design-toast-bar ${r} ${o.toastBarCtn} ${g ? "show" : "hide"}`,
+    style: i({
+      background: o[e]
     }, f)
   }, /* @__PURE__ */ a.createElement("div", {
-    className: s.toastMessageCtn
+    className: o.toastMessageCtn
   }, /* @__PURE__ */ a.createElement(m, {
-    name: e === "info" ? "info-white" : "checked-circle-white"
+    name: e === "info" ? "info" : "checked-circle",
+    stroke: "var(--color-white)"
   }), /* @__PURE__ */ a.createElement("span", {
-    className: s.toastMessage
+    className: o.toastMessage
   }, t)), /* @__PURE__ */ a.createElement(m, {
-    name: "white-close",
-    className: s.closeIconCtn,
+    name: "close",
+    stroke: "var(--color-white)",
+    className: o.closeIconCtn,
     onClick: c
   }));
 };

package/dist/index41.js.map

@@ -1 +1 @@
-{"version":3,"file":"index41.js","sources":["../src/components/ToastBar/index.tsx"],"sourcesContent":["import React, { FC, useEffect, useState } from \"react\";\nimport { Map } from \"../../utils/common.types\";\nimport { Icon } from \"../Icon\";\nimport \"./style.scss\";\n\nexport interface ToastBarProps {\n  toastBarCtnClassName?: string;\n  type: \"success\" | \"error\" | \"info\";\n  message: string;\n  shouldAutoClose?: boolean;\n  delay?: number;\n  onClose?: () => void;\n  containerStyle?: React.CSSProperties;\n}\n\nconst classNames: Map = {\n  toastBarCtn: \"min-h-[45px] fixed top-0 w-full flex items-center justify-center flex-wrap z-[1200]\",\n  success: \"linear-gradient(90deg, var(--color-green-700) 0%, var(--color-green-400) 100%)\",\n  error: \"linear-gradient(90deg, var(--color-red-700) 0%, var(--color-red-500) 100%)\",\n  info: \"var(--color-gray-700)\", \n  toastMessageCtn: \"flex items-center gap-2\",\n  toastMessage: \"text-[var(--color-white)] text-center word-break\",\n  closeIconCtn: \"absolute right-[12px] cursor-pointer cursor-pointer hover:bg-[var(--color-gray-500)] rounded-full p-1\",\n};\n\nexport const ToastBar: FC<ToastBarProps> = ({\n  toastBarCtnClassName = \"\",\n  type,\n  message = \"\",\n  shouldAutoClose = false,\n  delay = 5000,\n  onClose = () => {},\n  containerStyle = {}\n}) => {\n  const [visible, setVisible] = useState(true);\n\n  useEffect(() => {\n    if (shouldAutoClose) {\n      const timer = setTimeout(() => {\n        handleClose();\n      }, delay);\n      return () => clearTimeout(timer);\n    }\n  }, []);\n\n  const handleClose = () => {\n    setTimeout(() => {\n      setVisible(false);\n      setTimeout(() => {\n        onClose?.();\n      }, 300);\n    }, 300);\n  };\n\n  return (\n    <div\n      className={`se-design-toast-bar ${toastBarCtnClassName} ${classNames.toastBarCtn} ${visible ? \"show\" : \"hide\"}`}\n      style={{ background: classNames[type], ...containerStyle }}\n    >\n      <div className={classNames.toastMessageCtn} >\n        <Icon name={type === \"info\" ? \"info-white\" : \"checked-circle-white\"} />\n        <span className={classNames.toastMessage}>{message}</span>\n      </div>\n      <Icon name=\"white-close\" className={classNames.closeIconCtn} onClick={handleClose} />\n    </div>\n  );\n};"],"names":["React__default","useState","useEffect","Icon","classNames","toastBarCtn","success","error","info","toastMessageCtn","toastMessage","closeIconCtn","ToastBar","toastBarCtnClassName","type","message","shouldAutoClose","delay","onClose","containerStyle","visible","setVisible","timer","setTimeout","handleClose","clearTimeout","React","createElement","className","style","__spreadValues","background","name","onClick"],"mappings":";;;;;;;;;;;AAeA,OAAAA,KAAA,YAAAC,GAAA,aAAAC,SAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,OAAA;AAAA,MAAMC,IAAkB;AAAA,EACtBC,aAAa;AAAA,EACbC,SAAS;AAAA,EACTC,OAAO;AAAA,EACPC,MAAM;AAAA,EACNC,iBAAiB;AAAA,EACjBC,cAAc;AAAA,EACdC,cAAc;AAChB,GAEaC,IAA8BA,CAAC;AAAA,EAC1CC,sBAAAA,IAAuB;AAAA,EACvBC,MAAAA;AAAAA,EACAC,SAAAA,IAAU;AAAA,EACVC,iBAAAA,IAAkB;AAAA,EAClBC,OAAAA,IAAQ;AAAA,EACRC,SAAAA,IAAUA,MAAM;AAAA,EAAC;AAAA,EACjBC,gBAAAA,IAAiB,CAAA;AACnB,MAAM;AACJ,QAAM,CAACC,GAASC,CAAU,IAAIpB,EAAS,EAAI;AAE3CC,EAAAA,EAAU,MAAM;AACd,QAAIc,GAAiB;AACbM,YAAAA,IAAQC,WAAW,MAAM;AACjB,QAAAC,EAAA;AAAA,SACXP,CAAK;AACD,aAAA,MAAMQ,aAAaH,CAAK;AAAA,IAAA;AAAA,EAEnC,GAAG,EAAE;AAEL,QAAME,IAAcA,MAAM;AACxBD,eAAW,MAAM;AACfF,MAAAA,EAAW,EAAK,GAChBE,WAAW,MAAM;AACL,QAAAL,KAAA,QAAAA;AAAA,SACT,GAAG;AAAA,OACL,GAAG;AAAA,EACR;AAGEQ,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEC,WAAW,uBAAuBf,CAAoB,IAAIT,EAAWC,WAAW,IAAIe,IAAU,SAAS,MAAM;AAAA,IAC7GS,OAAOC,EAAA;AAAA,MAAEC,YAAY3B,EAAWU,CAAI;AAAA,OAAMK;AAAAA,EAAe,GAEzDQ,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAWxB,EAAWK;AAAAA,EAAAA,GACzBkB,gBAAAA,EAAAA,cAACxB,GAAI;AAAA,IAAC6B,MAAMlB,MAAS,SAAS,eAAe;AAAA,EAAA,CAAyB,GACtEa,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMC,WAAWxB,EAAWM;AAAAA,KAAeK,CAAc,CACtD,GACLW,gBAAAA,EAAAC,cAACxB,GAAI;AAAA,IAAC6B,MAAK;AAAA,IAAcJ,WAAWxB,EAAWO;AAAAA,IAAcsB,SAAST;AAAAA,EAAAA,CAAc,CACjF;AAET;"}
+{"version":3,"file":"index41.js","sources":["../src/components/ToastBar/index.tsx"],"sourcesContent":["import React, { FC, useEffect, useState } from \"react\";\nimport { Map } from \"../../utils/common.types\";\nimport { Icon } from \"../Icon\";\nimport \"./style.scss\";\n\nexport interface ToastBarProps {\n  toastBarCtnClassName?: string;\n  type: \"success\" | \"error\" | \"info\";\n  message: string;\n  shouldAutoClose?: boolean;\n  delay?: number;\n  onClose?: () => void;\n  containerStyle?: React.CSSProperties;\n}\n\nconst classNames: Map = {\n  toastBarCtn: \"min-h-[45px] fixed top-0 w-full flex items-center justify-center flex-wrap z-[1200]\",\n  success: \"linear-gradient(90deg, var(--color-green-700) 0%, var(--color-green-400) 100%)\",\n  error: \"linear-gradient(90deg, var(--color-red-700) 0%, var(--color-red-500) 100%)\",\n  info: \"var(--color-gray-700)\", \n  toastMessageCtn: \"flex items-center gap-2\",\n  toastMessage: \"text-[var(--color-white)] text-center word-break\",\n  closeIconCtn: \"absolute right-[12px] cursor-pointer cursor-pointer hover:bg-[var(--color-gray-500)] rounded-full p-1\",\n};\n\nexport const ToastBar: FC<ToastBarProps> = ({\n  toastBarCtnClassName = \"\",\n  type,\n  message = \"\",\n  shouldAutoClose = false,\n  delay = 5000,\n  onClose = () => {},\n  containerStyle = {}\n}) => {\n  const [visible, setVisible] = useState(true);\n\n  useEffect(() => {\n    if (shouldAutoClose) {\n      const timer = setTimeout(() => {\n        handleClose();\n      }, delay);\n      return () => clearTimeout(timer);\n    }\n  }, []);\n\n  const handleClose = () => {\n    setTimeout(() => {\n      setVisible(false);\n      setTimeout(() => {\n        onClose?.();\n      }, 300);\n    }, 300);\n  };\n\n  return (\n    <div\n      className={`se-design-toast-bar ${toastBarCtnClassName} ${classNames.toastBarCtn} ${visible ? \"show\" : \"hide\"}`}\n      style={{ background: classNames[type], ...containerStyle }}\n    >\n      <div className={classNames.toastMessageCtn} >\n        <Icon name={type === \"info\" ? \"info\" : \"checked-circle\"} stroke={'var(--color-white)'} />\n        <span className={classNames.toastMessage}>{message}</span>\n      </div>\n      <Icon name=\"close\" stroke={'var(--color-white)'} className={classNames.closeIconCtn} onClick={handleClose} />\n    </div>\n  );\n};"],"names":["React__default","useState","useEffect","Icon","classNames","toastBarCtn","success","error","info","toastMessageCtn","toastMessage","closeIconCtn","ToastBar","toastBarCtnClassName","type","message","shouldAutoClose","delay","onClose","containerStyle","visible","setVisible","timer","setTimeout","handleClose","clearTimeout","React","createElement","className","style","__spreadValues","background","name","stroke","onClick"],"mappings":";;;;;;;;;;;AAeA,OAAAA,KAAA,YAAAC,GAAA,aAAAC,SAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,OAAA;AAAA,MAAMC,IAAkB;AAAA,EACtBC,aAAa;AAAA,EACbC,SAAS;AAAA,EACTC,OAAO;AAAA,EACPC,MAAM;AAAA,EACNC,iBAAiB;AAAA,EACjBC,cAAc;AAAA,EACdC,cAAc;AAChB,GAEaC,IAA8BA,CAAC;AAAA,EAC1CC,sBAAAA,IAAuB;AAAA,EACvBC,MAAAA;AAAAA,EACAC,SAAAA,IAAU;AAAA,EACVC,iBAAAA,IAAkB;AAAA,EAClBC,OAAAA,IAAQ;AAAA,EACRC,SAAAA,IAAUA,MAAM;AAAA,EAAC;AAAA,EACjBC,gBAAAA,IAAiB,CAAA;AACnB,MAAM;AACJ,QAAM,CAACC,GAASC,CAAU,IAAIpB,EAAS,EAAI;AAE3CC,EAAAA,EAAU,MAAM;AACd,QAAIc,GAAiB;AACbM,YAAAA,IAAQC,WAAW,MAAM;AACjB,QAAAC,EAAA;AAAA,SACXP,CAAK;AACD,aAAA,MAAMQ,aAAaH,CAAK;AAAA,IAAA;AAAA,EAEnC,GAAG,EAAE;AAEL,QAAME,IAAcA,MAAM;AACxBD,eAAW,MAAM;AACfF,MAAAA,EAAW,EAAK,GAChBE,WAAW,MAAM;AACL,QAAAL,KAAA,QAAAA;AAAA,SACT,GAAG;AAAA,OACL,GAAG;AAAA,EACR;AAGEQ,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEC,WAAW,uBAAuBf,CAAoB,IAAIT,EAAWC,WAAW,IAAIe,IAAU,SAAS,MAAM;AAAA,IAC7GS,OAAOC,EAAA;AAAA,MAAEC,YAAY3B,EAAWU,CAAI;AAAA,OAAMK;AAAAA,EAAe,GAEzDQ,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAWxB,EAAWK;AAAAA,EAAAA,GACzBkB,gBAAAA,EAAAA,cAACxB,GAAI;AAAA,IAAC6B,MAAMlB,MAAS,SAAS,SAAS;AAAA,IAAkBmB,QAAQ;AAAA,EAAA,CAAuB,GACxFN,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMC,WAAWxB,EAAWM;AAAAA,KAAeK,CAAc,CACtD,GACLW,gBAAAA,EAAAC,cAACxB,GAAI;AAAA,IAAC6B,MAAK;AAAA,IAAQC,QAAQ;AAAA,IAAsBL,WAAWxB,EAAWO;AAAAA,IAAcuB,SAASV;AAAAA,EAAAA,CAAc,CACzG;AAET;"}

package/dist/index43.js

@@ -1,6 +1,6 @@
 import t, { useState as o, useRef as R, useEffect as C } from "react";
 /* empty css         */
-import c from "./index137.js";
+import c from "./index136.js";
 import { Icon as g } from "./index5.js";
 const O = ({
   onCountrycodeChange: E,
@@ -46,7 +46,7 @@ const O = ({
     alt: a == null ? void 0 : a.name,
     width: "16"
   }), a == null ? void 0 : a.dial_code, /* @__PURE__ */ t.createElement(g, {
-    name: "chevron-down",
+    name: "chevron",
     className: r ? "rotate-180" : ""
   })), /* @__PURE__ */ t.createElement("span", {
     className: "divider"

package/dist/index43.js.map

@@ -1 +1 @@
-{"version":3,"file":"index43.js","sources":["../src/components/PhoneInput/index.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport './style.scss';\nimport countriesInfoJson from './countriesInfo.json';\nimport { Icon } from '../Icon';\n\nexport interface PhoneInputProps {\n  onCountrycodeChange: (countryCode: string) => void;\n  onNumberChange: (number: string) => void;\n  error?: boolean;\n  errorMessage?: string;\n  value?: {\n    countryCode: string;\n    number: string;\n  };\n}\n\nexport const PhoneInput: React.FC<PhoneInputProps> = ({\n  onCountrycodeChange,\n  onNumberChange,\n  error,\n  errorMessage,\n  value\n}) => {\n  const [countryCode, setCountryCode] = useState(value?.countryCode || countriesInfoJson[0].dial_code);\n  const [displaySelectCountryCode, setDisplaySelectCountryCode] = useState(false);\n  const [countriesInfo, setCountriesInfo] = useState(countriesInfoJson);\n  const [searchValue, setSearchValue] = useState('');\n  const [enteredNumber, setEnteredNumber] = useState('');\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const countryInfo = countriesInfoJson.find((country) => country.dial_code === countryCode);\n\n  const handleCountryCodeSelect = (country: string) => {\n    if (country) {\n      setCountryCode(country);\n      onCountrycodeChange(country);\n    }\n    setDisplaySelectCountryCode(false);\n  };\n\n  const handleCountryCodeSearch = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const searchValue = event.target.value;\n    setSearchValue(searchValue);\n    const filteredCountries = countriesInfoJson.filter(\n      (country) =>\n        country.name.toLowerCase().includes(searchValue.toLowerCase()) ||\n        country.dial_code.toLowerCase().includes(searchValue.toLowerCase()) ||\n        country.code.toLowerCase().includes(searchValue.toLowerCase())\n    );\n    setCountriesInfo(filteredCountries);\n  };\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {\n        setDisplaySelectCountryCode(false);\n      }\n    };\n    document.addEventListener('mousedown', handleClickOutside);\n    return () => document.removeEventListener('mousedown', handleClickOutside);\n  }, []);\n\n  useEffect(() => {\n    if (value) {\n      setCountryCode(value.countryCode);\n      setEnteredNumber(value.number);\n    }\n  }, [value]);\n\n  const handleEnteredNumberChange = (value: string) => {\n    const numericValue = value.replace(/\\D/g, ''); // Remove non-numeric characters\n    console.log('numericValue', numericValue);\n    setEnteredNumber(numericValue);\n    onNumberChange(numericValue);\n  };\n\n  return (\n    <div className=\"phone-input-container-se-design-main-container\">\n      <div className={`phone-input-container-se-design-main ${error ? 'error' : ''}`} ref={containerRef}>\n        <div className=\"phone-input-container-se-design\">\n          <div\n            className=\"phone-input-container-se-design-country-code\"\n            onClick={() => {\n              setDisplaySelectCountryCode(!displaySelectCountryCode);\n            }}\n          >\n            <img\n              src={`https://flagcdn.com/${countryInfo?.code.toLowerCase()}.svg`}\n              alt={countryInfo?.name}\n              width=\"16\"\n            />\n            {countryInfo?.dial_code}\n            <Icon name=\"chevron-down\" className={!displaySelectCountryCode ? '' : 'rotate-180'} />\n          </div>\n          <span className=\"divider\" />\n          <input\n            type=\"tel\"\n            placeholder=\"Enter phone number\"\n            className=\"phone-input-container-se-design-phone-number-input\"\n            onChange={(event) => handleEnteredNumberChange(event.target.value)}\n            value={enteredNumber}\n            pattern=\"[0-9]*\"\n          />\n        </div>\n\n        {displaySelectCountryCode && (\n          <div className=\"phone-input-container-se-design-country-code-list\">\n            <div className=\"search-input-wrapper\">\n              <Icon name=\"search\" className=\"search-icon\" />\n              <input\n                type=\"text\"\n                placeholder=\"Search\"\n                className=\"phone-input-container-se-design-country-code-list-item-input\"\n                onChange={handleCountryCodeSearch}\n                value={searchValue}\n              />\n            </div>\n            {countriesInfo.length > 0 ? (\n              countriesInfo.map((country) => (\n                <div\n                  key={country.code}\n                  className=\"phone-input-container-se-design-country-code-list-item\"\n                  onClick={() => handleCountryCodeSelect(country.dial_code)}\n                >\n                  <img src={`https://flagcdn.com/${country.code.toLowerCase()}.svg`} alt={country.name} width=\"16\" />\n                  <span>{country.name}</span>\n                  <span>({country.dial_code})</span>\n                </div>\n              ))\n            ) : (\n              <div className=\"phone-input-container-se-design-country-code-list-item-no-resuts\">No results found</div>\n            )}\n          </div>\n        )}\n      </div>\n      {error && <div className=\"error-message\">{errorMessage}</div>}\n    </div>\n  );\n};\n"],"names":["PhoneInput","onCountrycodeChange","onNumberChange","error","errorMessage","value","countryCode","setCountryCode","useState","countriesInfoJson","dial_code","displaySelectCountryCode","setDisplaySelectCountryCode","countriesInfo","setCountriesInfo","searchValue","setSearchValue","enteredNumber","setEnteredNumber","containerRef","useRef","countryInfo","find","country","handleCountryCodeSelect","handleCountryCodeSearch","event","target","filteredCountries","filter","name","toLowerCase","includes","code","useEffect","handleClickOutside","current","contains","addEventListener","document","removeEventListener","number","handleEnteredNumberChange","numericValue","replace","log","React","createElement","className","ref","onClick","src","alt","width","Icon","type","placeholder","onChange","pattern","length","map","key"],"mappings":"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"}
+{"version":3,"file":"index43.js","sources":["../src/components/PhoneInput/index.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport './style.scss';\nimport countriesInfoJson from './countriesInfo.json';\nimport { Icon } from '../Icon';\n\nexport interface PhoneInputProps {\n  onCountrycodeChange: (countryCode: string) => void;\n  onNumberChange: (number: string) => void;\n  error?: boolean;\n  errorMessage?: string;\n  value?: {\n    countryCode: string;\n    number: string;\n  };\n}\n\nexport const PhoneInput: React.FC<PhoneInputProps> = ({\n  onCountrycodeChange,\n  onNumberChange,\n  error,\n  errorMessage,\n  value\n}) => {\n  const [countryCode, setCountryCode] = useState(value?.countryCode || countriesInfoJson[0].dial_code);\n  const [displaySelectCountryCode, setDisplaySelectCountryCode] = useState(false);\n  const [countriesInfo, setCountriesInfo] = useState(countriesInfoJson);\n  const [searchValue, setSearchValue] = useState('');\n  const [enteredNumber, setEnteredNumber] = useState('');\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const countryInfo = countriesInfoJson.find((country) => country.dial_code === countryCode);\n\n  const handleCountryCodeSelect = (country: string) => {\n    if (country) {\n      setCountryCode(country);\n      onCountrycodeChange(country);\n    }\n    setDisplaySelectCountryCode(false);\n  };\n\n  const handleCountryCodeSearch = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const searchValue = event.target.value;\n    setSearchValue(searchValue);\n    const filteredCountries = countriesInfoJson.filter(\n      (country) =>\n        country.name.toLowerCase().includes(searchValue.toLowerCase()) ||\n        country.dial_code.toLowerCase().includes(searchValue.toLowerCase()) ||\n        country.code.toLowerCase().includes(searchValue.toLowerCase())\n    );\n    setCountriesInfo(filteredCountries);\n  };\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {\n        setDisplaySelectCountryCode(false);\n      }\n    };\n    document.addEventListener('mousedown', handleClickOutside);\n    return () => document.removeEventListener('mousedown', handleClickOutside);\n  }, []);\n\n  useEffect(() => {\n    if (value) {\n      setCountryCode(value.countryCode);\n      setEnteredNumber(value.number);\n    }\n  }, [value]);\n\n  const handleEnteredNumberChange = (value: string) => {\n    const numericValue = value.replace(/\\D/g, ''); // Remove non-numeric characters\n    console.log('numericValue', numericValue);\n    setEnteredNumber(numericValue);\n    onNumberChange(numericValue);\n  };\n\n  return (\n    <div className=\"phone-input-container-se-design-main-container\">\n      <div className={`phone-input-container-se-design-main ${error ? 'error' : ''}`} ref={containerRef}>\n        <div className=\"phone-input-container-se-design\">\n          <div\n            className=\"phone-input-container-se-design-country-code\"\n            onClick={() => {\n              setDisplaySelectCountryCode(!displaySelectCountryCode);\n            }}\n          >\n            <img\n              src={`https://flagcdn.com/${countryInfo?.code.toLowerCase()}.svg`}\n              alt={countryInfo?.name}\n              width=\"16\"\n            />\n            {countryInfo?.dial_code}\n            <Icon name=\"chevron\" className={!displaySelectCountryCode ? '' : 'rotate-180'} />\n          </div>\n          <span className=\"divider\" />\n          <input\n            type=\"tel\"\n            placeholder=\"Enter phone number\"\n            className=\"phone-input-container-se-design-phone-number-input\"\n            onChange={(event) => handleEnteredNumberChange(event.target.value)}\n            value={enteredNumber}\n            pattern=\"[0-9]*\"\n          />\n        </div>\n\n        {displaySelectCountryCode && (\n          <div className=\"phone-input-container-se-design-country-code-list\">\n            <div className=\"search-input-wrapper\">\n              <Icon name=\"search\" className=\"search-icon\" />\n              <input\n                type=\"text\"\n                placeholder=\"Search\"\n                className=\"phone-input-container-se-design-country-code-list-item-input\"\n                onChange={handleCountryCodeSearch}\n                value={searchValue}\n              />\n            </div>\n            {countriesInfo.length > 0 ? (\n              countriesInfo.map((country) => (\n                <div\n                  key={country.code}\n                  className=\"phone-input-container-se-design-country-code-list-item\"\n                  onClick={() => handleCountryCodeSelect(country.dial_code)}\n                >\n                  <img src={`https://flagcdn.com/${country.code.toLowerCase()}.svg`} alt={country.name} width=\"16\" />\n                  <span>{country.name}</span>\n                  <span>({country.dial_code})</span>\n                </div>\n              ))\n            ) : (\n              <div className=\"phone-input-container-se-design-country-code-list-item-no-resuts\">No results found</div>\n            )}\n          </div>\n        )}\n      </div>\n      {error && <div className=\"error-message\">{errorMessage}</div>}\n    </div>\n  );\n};\n"],"names":["PhoneInput","onCountrycodeChange","onNumberChange","error","errorMessage","value","countryCode","setCountryCode","useState","countriesInfoJson","dial_code","displaySelectCountryCode","setDisplaySelectCountryCode","countriesInfo","setCountriesInfo","searchValue","setSearchValue","enteredNumber","setEnteredNumber","containerRef","useRef","countryInfo","find","country","handleCountryCodeSelect","handleCountryCodeSearch","event","target","filteredCountries","filter","name","toLowerCase","includes","code","useEffect","handleClickOutside","current","contains","addEventListener","document","removeEventListener","number","handleEnteredNumberChange","numericValue","replace","log","React","createElement","className","ref","onClick","src","alt","width","Icon","type","placeholder","onChange","pattern","length","map","key"],"mappings":"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"}

package/dist/index47.js

@@ -1,5 +1,46 @@
-const e = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='8'%20height='11'%20viewBox='0%200%208%2011'%20fill='none'%3e%3cpath%20d='M5.2%207.9359L5.2%203.32051C5.2%202.75407%204.66274%202.29487%204%202.29487C3.33726%202.29487%202.8%202.75407%202.8%203.32051L2.8%208.70513C2.8%209.69641%203.7402%2010.5%204.9%2010.5C6.0598%2010.5%207%209.69641%207%208.70513L7%203.0641C7%201.64799%205.65685%200.5%204%200.5C2.34315%200.5%201%201.64799%201%203.0641L1%207.9359'%20stroke='%23415575'%20stroke-width='0.8'%20stroke-linecap='round'/%3e%3c/svg%3e";
+import a, { useState as x } from "react";
+import { Icon as f } from "./index5.js";
+const w = ({
+  crumbs: t,
+  onCrumbClick: l,
+  className: g
+}) => {
+  const [o, i] = x(!1), s = (t == null ? void 0 : t.length) > 3, n = s ? t == null ? void 0 : t.slice(-2) : t, d = s ? t == null ? void 0 : t.slice(0, -2) : [];
+  return /* @__PURE__ */ a.createElement("div", {
+    className: `se-design-breadcrumbs flex items-center ${g}`,
+    "aria-label": "Breadcrumb"
+  }, s && /* @__PURE__ */ a.createElement("div", {
+    className: "relative"
+  }, /* @__PURE__ */ a.createElement("div", {
+    onClick: () => i(!o),
+    className: "p-1 hover:bg-gray-100 rounded-full"
+  }, /* @__PURE__ */ a.createElement(f, {
+    name: "kebab-menu"
+  })), o && /* @__PURE__ */ a.createElement("div", {
+    className: "se-design-breadcrumbs-dropdown absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-md py-1 z-10"
+  }, d == null ? void 0 : d.map((e) => /* @__PURE__ */ a.createElement("p", {
+    key: e == null ? void 0 : e.id,
+    onClick: () => {
+      l == null || l(e), i(!1);
+    },
+    className: "w-full text-left px-4 py-2 text-xl text-gray-500 cursor-pointer  hover:bg-gray-100"
+  }, e == null ? void 0 : e.label)))), /* @__PURE__ */ a.createElement("div", {
+    className: "se-design-breadcrumbs-list inline-flex items-center"
+  }, n == null ? void 0 : n.map((e, p) => /* @__PURE__ */ a.createElement("div", {
+    key: e == null ? void 0 : e.id,
+    className: "se-design-breadcrumbs-item inline-flex items-center w-fit"
+  }, (p > 0 || s) && /* @__PURE__ */ a.createElement(f, {
+    name: "chevron",
+    rotation: "270"
+  }), /* @__PURE__ */ a.createElement("p", {
+    onClick: () => l == null ? void 0 : l(e),
+    className: `
+                inline-flex items-center w-fit text-xl
+                ${p === (n == null ? void 0 : n.length) - 1 ? "text-black font-medium cursor-default" : "text-gray-500 hover:text-gray-700 cursor-pointer"}
+              `
+  }, e == null ? void 0 : e.label)))));
+};
 export {
-  e as default
+  w as BreadCrumbs
 };
 //# sourceMappingURL=index47.js.map

package/dist/index47.js.map

@@ -1 +1 @@
-{"version":3,"file":"index47.js","sources":["../src/assets/icons/attachment.svg?url"],"sourcesContent":["export default \"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='8'%20height='11'%20viewBox='0%200%208%2011'%20fill='none'%3e%3cpath%20d='M5.2%207.9359L5.2%203.32051C5.2%202.75407%204.66274%202.29487%204%202.29487C3.33726%202.29487%202.8%202.75407%202.8%203.32051L2.8%208.70513C2.8%209.69641%203.7402%2010.5%204.9%2010.5C6.0598%2010.5%207%209.69641%207%208.70513L7%203.0641C7%201.64799%205.65685%200.5%204%200.5C2.34315%200.5%201%201.64799%201%203.0641L1%207.9359'%20stroke='%23415575'%20stroke-width='0.8'%20stroke-linecap='round'/%3e%3c/svg%3e\""],"names":["__vite_glob_0_0"],"mappings":"AAAA,MAAeA,IAAA;"}
+{"version":3,"file":"index47.js","sources":["../src/components/BreadCrumbs/index.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { Icon } from '../Icon';\n\ninterface Crumb {\n  id: string | number;\n  label: string;\n}\n\ninterface BreadCrumbsProps {\n  crumbs: Crumb[];\n  onCrumbClick?: (crumb: Crumb) => void;\n  className?: any;\n}\n\nexport const BreadCrumbs: React.FC<BreadCrumbsProps> = ({ crumbs, onCrumbClick, className }) => {\n  const [isDropdownOpen, setIsDropdownOpen] = useState(false);\n\n  const shouldShowDropdown = crumbs?.length > 3;\n  const visibleCrumbs = shouldShowDropdown ? crumbs?.slice(-2) : crumbs;\n  const dropdownCrumbs = shouldShowDropdown ? crumbs?.slice(0, -2) : [];\n\n  return (\n    <div className={`se-design-breadcrumbs flex items-center ${className}`} aria-label=\"Breadcrumb\">\n      {shouldShowDropdown && (\n        <div className=\"relative\">\n          <div onClick={() => setIsDropdownOpen(!isDropdownOpen)} className=\"p-1 hover:bg-gray-100 rounded-full\">\n            <Icon name=\"kebab-menu\" />\n          </div>\n\n          {isDropdownOpen && (\n            <div className=\"se-design-breadcrumbs-dropdown absolute top-full left-0 mt-1 w-48 bg-white shadow-lg rounded-md py-1 z-10\">\n              {dropdownCrumbs?.map((crumb) => (\n                <p\n                  key={crumb?.id}\n                  onClick={() => {\n                    onCrumbClick?.(crumb);\n                    setIsDropdownOpen(false);\n                  }}\n                  className=\"w-full text-left px-4 py-2 text-xl text-gray-500 cursor-pointer  hover:bg-gray-100\"\n                >\n                  {crumb?.label}\n                </p>\n              ))}\n            </div>\n          )}\n        </div>\n      )}\n\n      <div className=\"se-design-breadcrumbs-list inline-flex items-center\">\n        {visibleCrumbs?.map((crumb, index) => (\n          <div key={crumb?.id} className=\"se-design-breadcrumbs-item inline-flex items-center w-fit\">\n            {(index > 0 || shouldShowDropdown) && <Icon name=\"chevron\" rotation={\"270\"} />}\n            <p\n              onClick={() => onCrumbClick?.(crumb)}\n              className={`\n                inline-flex items-center w-fit text-xl\n                ${\n                  index === visibleCrumbs?.length - 1\n                    ? 'text-black font-medium cursor-default'\n                    : 'text-gray-500 hover:text-gray-700 cursor-pointer'\n                }\n              `}\n            >\n              {crumb?.label}\n            </p>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n"],"names":["BreadCrumbs","crumbs","onCrumbClick","className","isDropdownOpen","setIsDropdownOpen","useState","shouldShowDropdown","length","visibleCrumbs","slice","dropdownCrumbs","React","createElement","onClick","Icon","name","map","crumb","key","id","label","index","rotation"],"mappings":";;AAcO,MAAMA,IAA0CA,CAAC;AAAA,EAAEC,QAAAA;AAAAA,EAAQC,cAAAA;AAAAA,EAAcC,WAAAA;AAAU,MAAM;AAC9F,QAAM,CAACC,GAAgBC,CAAiB,IAAIC,EAAS,EAAK,GAEpDC,KAAqBN,KAAAA,gBAAAA,EAAQO,UAAS,GACtCC,IAAgBF,IAAqBN,KAAAA,gBAAAA,EAAQS,MAAM,MAAMT,GACzDU,IAAiBJ,IAAqBN,KAAAA,gBAAAA,EAAQS,MAAM,GAAG,MAAM,CAAE;AAGnEE,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKV,WAAW,2CAA2CA,CAAS;AAAA,IAAI,cAAW;AAAA,EAChFI,GAAAA,KACCM,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKV,WAAU;AAAA,EAAA,GACbU,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,SAASA,MAAMT,EAAkB,CAACD,CAAc;AAAA,IAAGD,WAAU;AAAA,EAAA,GAChEU,gBAAAA,EAAAA,cAACE,GAAI;AAAA,IAACC,MAAK;AAAA,EAAc,CAAA,CACtB,GAEJZ,KACCQ,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKV,WAAU;AAAA,EAAA,GACZQ,KAAAA,gBAAAA,EAAgBM,IAAKC,CACpBN,MAAAA,gBAAAA,EAAAC,cAAA,KAAA;AAAA,IACEM,KAAKD,KAAAA,gBAAAA,EAAOE;AAAAA,IACZN,SAASA,MAAM;AACbZ,MAAAA,KAAAA,QAAAA,EAAegB,IACfb,EAAkB,EAAK;AAAA,IACzB;AAAA,IACAF,WAAU;AAAA,EAAA,GAETe,KAAAA,gBAAAA,EAAOG,KACP,EAEF,CAEJ,GAGPR,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKV,WAAU;AAAA,EAAA,GACZM,KAAAA,gBAAAA,EAAeQ,IAAI,CAACC,GAAOI,MAC1BV,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKM,KAAKD,KAAAA,gBAAAA,EAAOE;AAAAA,IAAIjB,WAAU;AAAA,EAAA,IAC3BmB,IAAQ,KAAKf,MAAuBK,gBAAAA,EAAAC,cAACE,GAAI;AAAA,IAACC,MAAK;AAAA,IAAUO,UAAU;AAAA,EAAA,CAAQ,GAC7EV,gBAAAA,EAAAA,cAAA,KAAA;AAAA,IACEC,SAASA,MAAMZ,KAAAA,gBAAAA,EAAegB;AAAAA,IAC9Bf,WAAW;AAAA;AAAA,kBAGPmB,OAAUb,KAAAA,gBAAAA,EAAeD,UAAS,IAC9B,0CACA,kDAAkD;AAAA;AAAA,KAIzDU,KAAAA,gBAAAA,EAAOG,KACP,CACA,EAEJ,CACF;AAET;"}

package/dist/index48.js

@@ -1,4 +1,4 @@
-const e = "data:image/svg+xml,%3csvg%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M17.2727%2010.0535H2'%20stroke='currentColor'%20stroke-width='1.2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M6.49198%2014.5454L2%2010.0535L6.49198%205.56149'%20stroke='currentColor'%20stroke-width='1.2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e";
+const e = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='8'%20height='11'%20viewBox='0%200%208%2011'%20fill='none'%3e%3cpath%20d='M5.2%207.9359L5.2%203.32051C5.2%202.75407%204.66274%202.29487%204%202.29487C3.33726%202.29487%202.8%202.75407%202.8%203.32051L2.8%208.70513C2.8%209.69641%203.7402%2010.5%204.9%2010.5C6.0598%2010.5%207%209.69641%207%208.70513L7%203.0641C7%201.64799%205.65685%200.5%204%200.5C2.34315%200.5%201%201.64799%201%203.0641L1%207.9359'%20stroke='%23415575'%20stroke-width='0.8'%20stroke-linecap='round'/%3e%3c/svg%3e";
 export {
   e as default
 };

package/dist/index48.js.map

@@ -1 +1 @@
-{"version":3,"file":"index48.js","sources":["../src/assets/icons/back.svg?url"],"sourcesContent":["export default \"data:image/svg+xml,%3csvg%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M17.2727%2010.0535H2'%20stroke='currentColor'%20stroke-width='1.2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M6.49198%2014.5454L2%2010.0535L6.49198%205.56149'%20stroke='currentColor'%20stroke-width='1.2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e\""],"names":["__vite_glob_0_1"],"mappings":"AAAA,MAAeA,IAAA;"}
+{"version":3,"file":"index48.js","sources":["../src/assets/icons/attachment.svg?url"],"sourcesContent":["export default \"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='8'%20height='11'%20viewBox='0%200%208%2011'%20fill='none'%3e%3cpath%20d='M5.2%207.9359L5.2%203.32051C5.2%202.75407%204.66274%202.29487%204%202.29487C3.33726%202.29487%202.8%202.75407%202.8%203.32051L2.8%208.70513C2.8%209.69641%203.7402%2010.5%204.9%2010.5C6.0598%2010.5%207%209.69641%207%208.70513L7%203.0641C7%201.64799%205.65685%200.5%204%200.5C2.34315%200.5%201%201.64799%201%203.0641L1%207.9359'%20stroke='%23415575'%20stroke-width='0.8'%20stroke-linecap='round'/%3e%3c/svg%3e\""],"names":["__vite_glob_0_0"],"mappings":"AAAA,MAAeA,IAAA;"}