se-design 1.0.62-dev → 1.0.63

package/dist/index39.js.map

@@ -1 +1 @@
-{"version":3,"file":"index39.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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"}
+{"version":3,"file":"index39.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/index4.js.map

@@ -1 +1 @@
-{"version":3,"file":"index4.js","sources":["../src/components/FilePicker/index.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { Button } from '../Button';\n\nexport interface FilePickerProps {\n  /**\n   * Callback function when files are selected\n   */\n  onFileSelect: (files: FileList) => void;\n  /**\n   * Accepted file types (e.g., \".pdf,.doc,.docx\")\n   */\n  accept?: string;\n  /**\n   * Allow multiple file selection\n   */\n  multiple?: boolean;\n  /**\n   * Label for the button\n   */\n  buttonLabel: string;\n  /**\n   * Type of the button\n   */\n  buttonType?: 'primary' | 'secondary' | 'ghost' | 'link';\n  /**\n   * Size of the button\n   */\n  buttonSize?: 'sm' | 'md' | 'lg';\n  /**\n   * Disabled state\n   */\n  disabled?: boolean;\n  /**\n   * Custom class name\n   */\n  className?: string;\n  /**\n   * Custom trigger element (button, menu item, icon, etc.)\n   * If provided, buttonLabel, buttonType, and buttonSize will be ignored\n   */\n  triggerElement?: React.ReactNode;\n  /**\n   * Automation ID for testing\n   */\n  automationId?: string;\n}\n\nexport const FilePicker: React.FC<FilePickerProps> = ({\n  onFileSelect,\n  accept,\n  multiple = false,\n  buttonLabel,\n  buttonType = 'primary',\n  buttonSize = 'md',\n  disabled = false,\n  className = '',\n  triggerElement,\n  automationId = '',\n}) => {\n  const fileInputRef = useRef<HTMLInputElement>(null);\n\n  const handleButtonClick = () => {\n    fileInputRef.current?.click();\n  };\n\n  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const files = event.target.files;\n    if (files) {\n      onFileSelect(files);\n      // Reset the input value to allow selecting the same file again\n      event.target.value = '';\n    }\n  };\n\n  return (\n    <div className={className}>\n      <input\n        type=\"file\"\n        ref={fileInputRef}\n        onChange={handleFileChange}\n        accept={accept}\n        multiple={multiple}\n        style={{ display: 'none' }}\n      />\n      {triggerElement ? (\n        <div onClick={disabled ? undefined : handleButtonClick}>\n          {triggerElement}\n        </div>\n      ) : (\n        <Button\n          type={buttonType}\n          size={buttonSize}\n          label={buttonLabel}\n          onClick={handleButtonClick}\n          disabled={disabled}\n          data-automation-id={automationId}\n        />\n      )}\n    </div>\n  );\n}; "],"names":["FilePicker","onFileSelect","accept","multiple","buttonLabel","buttonType","buttonSize","disabled","className","triggerElement","automationId","fileInputRef","useRef","handleButtonClick","current","click","handleFileChange","event","files","target","value","React","createElement","type","ref","onChange","style","display","onClick","undefined","Button","size","label"],"mappings":";;AA+CO,MAAMA,IAAwCA,CAAC;AAAA,EACpDC,cAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,UAAAA,IAAW;AAAA,EACXC,aAAAA;AAAAA,EACAC,YAAAA,IAAa;AAAA,EACbC,YAAAA,IAAa;AAAA,EACbC,UAAAA,IAAW;AAAA,EACXC,WAAAA,IAAY;AAAA,EACZC,gBAAAA;AAAAA,EACAC,cAAAA,IAAe;AACjB,MAAM;AACJ,QAAMC,IAAeC,EAAyB,IAAI,GAE5CC,IAAoBA,MAAM;AAC9BF,IAAAA,EAAaG,SAASC,MAAAA;AAAAA,EACxB,GAEMC,IAAmBA,CAACC,MAA+C;AACvE,UAAMC,IAAQD,EAAME,OAAOD;AAC3B,IAAIA,MACFjB,EAAaiB,CAAK,GAElBD,EAAME,OAAOC,QAAQ;AAAA,EAEzB;AAEA,SACEC,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKd,WAAAA;AAAAA,EAAAA,GACHa,gBAAAA,EAAAC,cAAA,SAAA;AAAA,IACEC,MAAK;AAAA,IACLC,KAAKb;AAAAA,IACLc,UAAUT;AAAAA,IACVd,QAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAuB,OAAO;AAAA,MAAEC,SAAS;AAAA,IAAA;AAAA,EAAO,CAC1B,GACAlB,IACCY,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKM,SAASrB,IAAWsB,SAAYhB;AAAAA,EAAAA,GAClCJ,CACE,IAELY,gBAAAA,EAAAC,cAACQ,GAAM;AAAA,IACLP,MAAMlB;AAAAA,IACN0B,MAAMzB;AAAAA,IACN0B,OAAO5B;AAAAA,IACPwB,SAASf;AAAAA,IACTN,UAAAA;AAAAA,IACA,sBAAoBG;AAAAA,EAAAA,CACrB,CAEA;AAET;"}
+{"version":3,"file":"index4.js","sources":["../src/components/FilePicker/index.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { Button } from '../Button';\n\nexport interface FilePickerProps {\n  /**\n   * Callback function when files are selected\n   */\n  onFileSelect: (files: FileList) => void;\n  /**\n   * Accepted file types (e.g., \".pdf,.doc,.docx\")\n   */\n  accept?: string;\n  /**\n   * Allow multiple file selection\n   */\n  multiple?: boolean;\n  /**\n   * Label for the button\n   */\n  buttonLabel: string;\n  /**\n   * Type of the button\n   */\n  buttonType?: 'primary' | 'secondary' | 'ghost' | 'link';\n  /**\n   * Size of the button\n   */\n  buttonSize?: 'sm' | 'md' | 'lg';\n  /**\n   * Disabled state\n   */\n  disabled?: boolean;\n  /**\n   * Custom class name\n   */\n  className?: string;\n  /**\n   * Custom trigger element (button, menu item, icon, etc.)\n   * If provided, buttonLabel, buttonType, and buttonSize will be ignored\n   */\n  triggerElement?: React.ReactNode;\n  /**\n   * Automation ID for testing\n   */\n  automationId?: string;\n}\n\nexport const FilePicker: React.FC<FilePickerProps> = ({\n  onFileSelect,\n  accept,\n  multiple = false,\n  buttonLabel,\n  buttonType = 'primary',\n  buttonSize = 'md',\n  disabled = false,\n  className = '',\n  triggerElement,\n  automationId = '',\n}) => {\n  const fileInputRef = useRef<HTMLInputElement>(null);\n\n  const handleButtonClick = () => {\n    fileInputRef.current?.click();\n  };\n\n  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const files = event.target.files;\n    if (files) {\n      onFileSelect(files);\n      // Reset the input value to allow selecting the same file again\n      event.target.value = '';\n    }\n  };\n\n  return (\n    <div className={className}>\n      <input\n        type=\"file\"\n        ref={fileInputRef}\n        onChange={handleFileChange}\n        accept={accept}\n        multiple={multiple}\n        style={{ display: 'none' }}\n      />\n      {triggerElement ? (\n        <div onClick={disabled ? undefined : handleButtonClick}>\n          {triggerElement}\n        </div>\n      ) : (\n        <Button\n          type={buttonType}\n          size={buttonSize}\n          label={buttonLabel}\n          onClick={handleButtonClick}\n          disabled={disabled}\n          data-automation-id={automationId}\n        />\n      )}\n    </div>\n  );\n}; "],"names":["FilePicker","onFileSelect","accept","multiple","buttonLabel","buttonType","buttonSize","disabled","className","triggerElement","automationId","fileInputRef","useRef","handleButtonClick","current","click","handleFileChange","event","files","target","value","React","createElement","type","ref","onChange","style","display","onClick","undefined","Button","size","label"],"mappings":";;AA+CO,MAAMA,IAAwCA,CAAC;AAAA,EACpDC,cAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,UAAAA,IAAW;AAAA,EACXC,aAAAA;AAAAA,EACAC,YAAAA,IAAa;AAAA,EACbC,YAAAA,IAAa;AAAA,EACbC,UAAAA,IAAW;AAAA,EACXC,WAAAA,IAAY;AAAA,EACZC,gBAAAA;AAAAA,EACAC,cAAAA,IAAe;AACjB,MAAM;AACEC,QAAAA,IAAeC,EAAyB,IAAI,GAE5CC,IAAoBA,MAAM;AAC9BF,IAAAA,EAAaG,SAASC;EAAM,GAGxBC,IAAmBA,CAACC,MAA+C;AACjEC,UAAAA,IAAQD,EAAME,OAAOD;AAC3B,IAAIA,MACFjB,EAAaiB,CAAK,GAElBD,EAAME,OAAOC,QAAQ;AAAA,EACvB;AAIAC,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKd,WAAAA;AAAAA,EAAAA,GACHc,gBAAAA,EAAAA,cAAA,SAAA;AAAA,IACEC,MAAK;AAAA,IACLC,KAAKb;AAAAA,IACLc,UAAUT;AAAAA,IACVd,QAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAuB,OAAO;AAAA,MAAEC,SAAS;AAAA,IAAO;AAAA,EAC1B,CAAA,GACAlB,IACCY,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKM,SAASrB,IAAWsB,SAAYhB;AAAAA,EAClCJ,GAAAA,CACE,IAELY,gBAAAA,EAAAC,cAACQ,GAAM;AAAA,IACLP,MAAMlB;AAAAA,IACN0B,MAAMzB;AAAAA,IACN0B,OAAO5B;AAAAA,IACPwB,SAASf;AAAAA,IACTN,UAAAA;AAAAA,IACA,sBAAoBG;AAAAA,EACrB,CAAA,CAEA;AAET;"}

package/dist/index40.js.map

@@ -1 +1 @@
-{"version":3,"file":"index40.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%] bg-[var(--color-gray-200)] 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;"}
+{"version":3,"file":"index40.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%] bg-[var(--color-gray-200)] 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;"}

package/dist/index41.js

@@ -1,6 +1,6 @@
 import e, { useState as g, useRef as p } from "react";
 import { Icon as c } from "./index5.js";
-import { ProgressBar as x } from "./index40.js";
+import { ProgressBar as f } from "./index40.js";
 /* empty css         */
 const r = {
   gettingStartedWidgetCtn: "border border-[var(--color-gray-200)] rounded-[12px] w-[385px] p-4",
@@ -14,7 +14,7 @@ const r = {
 }) => {
   const [n, l] = g(!1), o = p(null), i = () => {
     l(!n);
-  }, m = (t) => t ? "var(--color-green-500)" : "var(--color-gray-200)";
+  }, d = (t) => t ? "var(--color-green-500)" : "var(--color-gray-200)";
   return /* @__PURE__ */ e.createElement("div", {
     className: `${r.gettingStartedWidgetCtn} ${s} getting-started-widget-ctn`
   }, /* @__PURE__ */ e.createElement("div", {
@@ -27,7 +27,7 @@ const r = {
     onClick: i
   })), /* @__PURE__ */ e.createElement("div", {
     className: "mt-[12px]"
-  }, /* @__PURE__ */ e.createElement(x, {
+  }, /* @__PURE__ */ e.createElement(f, {
     totalTasks: a.length,
     completedTasks: a.filter((t) => t.isComplete).length,
     progressBarCtnClassName: "get-started-progress-bar-ctn"
@@ -37,18 +37,19 @@ const r = {
     style: {
       maxHeight: n ? `${o.current?.scrollHeight}px` : "0px"
     }
-  }, a.map((t, d) => /* @__PURE__ */ e.createElement("div", {
-    key: d,
+  }, a.map((t, m) => /* @__PURE__ */ e.createElement("div", {
+    key: m,
     className: r.actionItemCtn
   }, /* @__PURE__ */ e.createElement(c, {
     name: "checked-circle",
-    stroke: m(t.isComplete)
+    stroke: d(t.isComplete)
   }), /* @__PURE__ */ e.createElement("span", {
     className: t.isComplete ? "text-[var(--color-gray-500)]" : "text-[var(--color-gray-900)] cursor-pointer",
     onClick: t?.handleActionItemClick
   }, t.label)))));
 };
 export {
-  E as GetStartedWidget
+  E as GetStartedWidget,
+  E as default
 };
 //# sourceMappingURL=index41.js.map

package/dist/index41.js.map

@@ -1 +1 @@
-{"version":3,"file":"index41.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;"}
+{"version":3,"file":"index41.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;"}

package/dist/index42.js

@@ -1,5 +1,5 @@
 import e, { useState as p } from "react";
-import { Icon as l } from "./index5.js";
+import { Icon as a } from "./index5.js";
 import { Button as w } from "./index3.js";
 /* empty css         */
 const r = {
@@ -15,7 +15,7 @@ const r = {
   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)]"
 }, B = ({
-  messageBarCtnClassName: a = "",
+  messageBarCtnClassName: l = "",
   messageBarType: o = "info",
   message: s = "",
   hasCloseIcon: c = !1,
@@ -46,7 +46,7 @@ const r = {
     }
   }, [o]);
   return /* @__PURE__ */ e.createElement("div", {
-    className: `se-design-message-bar ${a} ${r.messageBarCtn} ${r[o]} ${v ? "show" : "hide"}`,
+    className: `se-design-message-bar ${l} ${r.messageBarCtn} ${r[o]} ${v ? "show" : "hide"}`,
     "data-automation-id": u
   }, /* @__PURE__ */ e.createElement("div", {
     className: r.messageCtn
@@ -54,7 +54,7 @@ const r = {
     className: "inline-flex items-center"
   }, /* @__PURE__ */ e.createElement("span", {
     className: f
-  }, /* @__PURE__ */ e.createElement(l, {
+  }, /* @__PURE__ */ e.createElement(a, {
     name: "info",
     className: "inline-block h-fit relative top-[3px] mr-1"
   }), s, n && /* @__PURE__ */ e.createElement(w, {
@@ -64,13 +64,14 @@ const r = {
     onClick: m,
     className: `${g} ml-2 alert-btn`,
     automationId: "message-bar-cta"
-  })))), c && /* @__PURE__ */ e.createElement(l, {
+  })))), c && /* @__PURE__ */ e.createElement(a, {
     name: "close",
     className: r.closeIconCtn,
     onClick: d
   }));
 };
 export {
-  B as MessageBar
+  B as MessageBar,
+  B as default
 };
 //# sourceMappingURL=index42.js.map

package/dist/index42.js.map

@@ -1 +1 @@
-{"version":3,"file":"index42.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;"}
+{"version":3,"file":"index42.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;"}

package/dist/index43.js.map

@@ -1 +1 @@
-{"version":3,"file":"index43.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-[48px] fixed top-0 w-full flex items-center justify-center flex-wrap z-[1020]\",\n  success: \"var(--color-green-500)\",\n  error: \"var(--color-red-500)\",\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 focus-visible:!outline-[var(--color-blue-300)]\",\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\" : type === \"error\" ? \"stop\" : \"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","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;AACnB,YAAMM,IAAQC,WAAW,MAAM;AAC7BC,QAAAA,EAAAA;AAAAA,MACF,GAAGP,CAAK;AACR,aAAO,MAAMQ,aAAaH,CAAK;AAAA,IACjC;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,QAAME,IAAcA,MAAM;AACxBD,eAAW,MAAM;AACfF,MAAAA,EAAW,EAAK,GAChBE,WAAW,MAAM;AACfL,QAAAA,IAAAA;AAAAA,MACF,GAAG,GAAG;AAAA,IACR,GAAG,GAAG;AAAA,EACR;AAEA,SACEQ,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEC,WAAW,uBAAuBf,CAAoB,IAAIT,EAAWC,WAAW,IAAIe,IAAU,SAAS,MAAM;AAAA,IAC7GS,OAAO;AAAA,MAAEC,YAAY1B,EAAWU,CAAI;AAAA,MAAG,GAAGK;AAAAA,IAAAA;AAAAA,EAAe,GAEzDO,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAWxB,EAAWK;AAAAA,EAAAA,GACzBiB,gBAAAA,EAAAC,cAACxB,GAAI;AAAA,IAAC4B,MAAMjB,MAAS,SAAS,SAASA,MAAS,UAAU,SAAS;AAAA,IAAkBkB,QAAQ;AAAA,EAAA,CAAuB,GACpHN,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAMC,WAAWxB,EAAWM;AAAAA,EAAAA,GAAeK,CAAc,CACtD,GACLW,gBAAAA,EAAAC,cAACxB,GAAI;AAAA,IAAC4B,MAAK;AAAA,IAAQC,QAAQ;AAAA,IAAsBJ,WAAWxB,EAAWO;AAAAA,IAAcsB,SAAST;AAAAA,EAAAA,CAAc,CACzG;AAET;"}
+{"version":3,"file":"index43.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-[48px] fixed top-0 w-full flex items-center justify-center flex-wrap z-[1020]\",\n  success: \"var(--color-green-500)\",\n  error: \"var(--color-red-500)\",\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 focus-visible:!outline-[var(--color-blue-300)]\",\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\" : type === \"error\" ? \"stop\" : \"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","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,CAAC;AACpB,MAAM;AACJ,QAAM,CAACC,GAASC,CAAU,IAAIpB,EAAS,EAAI;AAE3CC,EAAAA,EAAU,MAAM;AACd,QAAIc,GAAiB;AACbM,YAAAA,IAAQC,WAAW,MAAM;AACjB,QAAAC;SACXP,CAAK;AACD,aAAA,MAAMQ,aAAaH,CAAK;AAAA,IACjC;AAAA,EACF,GAAG,CAAE,CAAA;AAEL,QAAME,IAAcA,MAAM;AACxBD,eAAW,MAAM;AACfF,MAAAA,EAAW,EAAK,GAChBE,WAAW,MAAM;AACL,QAAAL;SACT,GAAG;AAAA,OACL,GAAG;AAAA,EAAA;AAINQ,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEC,WAAW,uBAAuBf,CAAoB,IAAIT,EAAWC,WAAW,IAAIe,IAAU,SAAS,MAAM;AAAA,IAC7GS,OAAO;AAAA,MAAEC,YAAY1B,EAAWU,CAAI;AAAA,MAAG,GAAGK;AAAAA,IAAe;AAAA,EAAA,GAEzDQ,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAWxB,EAAWK;AAAAA,EAAAA,GACzBkB,gBAAAA,EAAAA,cAACxB,GAAI;AAAA,IAAC4B,MAAMjB,MAAS,SAAS,SAASA,MAAS,UAAU,SAAS;AAAA,IAAkBkB,QAAQ;AAAA,EAAA,CAAuB,GACpHL,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IAAMC,WAAWxB,EAAWM;AAAAA,KAAeK,CAAc,CACtD,GACLW,gBAAAA,EAAAC,cAACxB,GAAI;AAAA,IAAC4B,MAAK;AAAA,IAAQC,QAAQ;AAAA,IAAsBJ,WAAWxB,EAAWO;AAAAA,IAAcsB,SAAST;AAAAA,EAAc,CAAA,CACzG;AAET;"}

package/dist/index44.js

@@ -1,9 +1,9 @@
 import e, { useState as S, useRef as k, useCallback as P, useEffect as Y } from "react";
 /* empty css         */
 import { Icon as x } from "./index5.js";
-import { useStableId as Z } from "./index185.js";
+import { useStableId as Z } from "./index188.js";
 import { getA11yNameAttributes as L } from "./index70.js";
-import { useCombobox as ee } from "./index191.js";
+import { useCombobox as ee } from "./index194.js";
 function u() {
   return u = Object.assign ? Object.assign.bind() : function(o) {
     for (var s = 1; s < arguments.length; s++) {

package/dist/index44.js.map

@@ -1 +1 @@
-{"version":3,"file":"index44.js","sources":["../src/components/AutoCompleteInput/index.tsx"],"sourcesContent":["import React, { useEffect, useRef, useCallback, useState } from 'react';\nimport './style.scss';\nimport { Icon } from '../Icon';\nimport { useStableId } from '../../utils/useStableId';\nimport { getA11yNameAttributes, useCombobox } from '../../utils/a11y';\n\nexport interface AutoCompleteInputProps {\n  value: string;\n  disabled?: boolean;\n  maxLength?: number;\n  /** Called when the user types in the input. Not called on suggestion selection. */\n  onChange: (value: string) => void;\n  tag?: string;\n  error?: boolean;\n  errorMessage?: string;\n  label?: string;\n  placeholder?: string;\n  /**\n   * Suggestion items. Default rendering expects { label, value } shape.\n   * When renderOption is provided, any shape is accepted.\n   */\n  suggestions?: any[];\n  /**\n   * Called when a suggestion is selected (click or Enter key).\n   * Receives the full item object from the suggestions array.\n   */\n  onSelect?: (item: any) => void;\n  /**\n   * Render custom content for each suggestion option. The component handles the option wrapper\n   * (ARIA props, highlight, click, keyboard navigation). You only provide the inner content.\n   */\n  renderOption?: (suggestion: any, context: { isHighlighted: boolean; index: number }) => React.ReactNode;\n  /**\n   * Custom CSS class for option elements. Replaces the default 'suggestion-item' class.\n   * Useful with renderOption to apply custom styling to option wrappers.\n   */\n  optionClassName?: string;\n  automationId?: string;\n  /**\n   * Accessible label for the input. Used when no visible label is provided.\n   */\n  ariaLabel?: string;\n  /**\n   * ID(s) of element(s) that label this input. Takes precedence over ariaLabel.\n   */\n  ariaLabelledBy?: string;\n  /**\n   * ID(s) of element(s) providing additional description.\n   */\n  ariaDescribedBy?: string;\n}\n\nexport const AutoCompleteInput: React.FC<AutoCompleteInputProps> = React.memo(\n  ({\n    value,\n    onChange,\n    disabled = false,\n    maxLength,\n    tag = 'input',\n    error = false,\n    errorMessage,\n    label,\n    placeholder,\n    suggestions = [],\n    onSelect,\n    renderOption,\n    optionClassName,\n    automationId = '',\n    ariaLabel,\n    ariaLabelledBy,\n    ariaDescribedBy,\n    ...props\n  }) => {\n    const [filteredSuggestions, setFilteredSuggestions] = useState<any[]>([...suggestions]);\n    const [isSuggestionBoxVisible, setSuggestionBoxVisible] = useState<boolean>(false);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    // Generate stable unique IDs per instance so label, input, listbox, and error never share IDs (HTML/ARIA require unique ids).\n    const instanceId = useStableId(undefined, 'autocomplete');\n    const inputId = `${instanceId}-input`;\n    const listboxId = `${instanceId}-listbox`;\n    const labelId = `${instanceId}-label`;\n    const errorId = `${instanceId}-error`;\n\n    const handleSelectSuggestion = useCallback(\n      (item: any) => {\n        setSuggestionBoxVisible(false);\n        onSelect?.(item);\n      },\n      [onSelect]\n    );\n\n    // Use the comprehensive useCombobox hook\n    const {\n      containerProps,\n      inputProps: comboboxInputProps,\n      listboxProps,\n      getOptionProps,\n      highlightedIndex,\n      setHighlightedIndex\n    } = useCombobox<any>({\n      items: filteredSuggestions,\n      isOpen: isSuggestionBoxVisible,\n      onOpenChange: setSuggestionBoxVisible,\n      onSelect: handleSelectSuggestion,\n      listboxId\n    });\n\n    const handleInputChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        const inputValue = e.target.value;\n        setHighlightedIndex(-1); // Reset highlight on input change\n        onChange(inputValue);\n\n        // Internal filtering for default rendering (when no renderOption, component manages filtering)\n        if (!renderOption) {\n          if (inputValue === '') {\n            setFilteredSuggestions([...suggestions]);\n          } else {\n            const filtered = suggestions?.filter(\n              (suggestion) =>\n                typeof suggestion === 'object' &&\n                suggestion?.label?.toLowerCase().includes(inputValue?.toLowerCase() ?? '')\n            );\n            setFilteredSuggestions([...filtered]);\n          }\n        }\n      },\n      [onChange, suggestions, renderOption, setHighlightedIndex]\n    );\n\n    useEffect(() => {\n      setFilteredSuggestions([...suggestions]);\n    }, [suggestions]);\n\n    const handleInputClick = () => {\n      setSuggestionBoxVisible(true);\n    };\n\n    const handleInputFocus = () => {\n      if (filteredSuggestions.length > 0) {\n        setSuggestionBoxVisible(true);\n      }\n    };\n\n    const handleClearInput = () => {\n      onChange('');\n      setHighlightedIndex(-1);\n      inputRef.current?.focus();\n    };\n\n    // Build ARIA name attributes: when ariaLabel is provided use it (e.g. \"Signer 1 name\"); otherwise use visible label or ariaLabelledBy\n    const a11yNameProps = getA11yNameAttributes({\n      ariaLabelledBy: label && !ariaLabel ? labelId : ariaLabelledBy,\n      ariaLabel,\n      ariaDescribedBy: error ? errorId : ariaDescribedBy\n    });\n\n    return (\n      <div \n        className=\"main-container-autocomplete-se-design\" \n        ref={containerRef} \n        data-automation-id={automationId}\n        {...containerProps}\n      >\n        {label && (\n          <span\n            id={labelId}\n            className={`label-container ${disabled ? 'label-container-disabled' : ''}`}\n          >\n            {label}\n          </span>\n        )}\n        <div className=\"input-container-wrapper\">\n          <div className=\"input-wrapper\" style={{ pointerEvents: disabled ? 'none' : 'auto' }}>\n            {React.createElement(tag, {\n              ref: inputRef,\n              id: inputId,\n              value: value,\n              onChange: handleInputChange,\n              onClick: handleInputClick,\n              onFocus: handleInputFocus,\n              ...comboboxInputProps,\n              disabled,\n              className: `${error ? 'input-container-error' : 'input-container-default'} ${disabled ? 'input-container-disabled' : ''} ${filteredSuggestions.length > 0 || value ? 'with-icon' : ''} ${filteredSuggestions.length > 0 && value ? 'with-icons' : ''}`,\n              maxLength,\n              placeholder,\n              'aria-invalid': error || undefined,\n              ...a11yNameProps,\n              ...props\n            })}\n            {value && (\n              <Icon\n                name=\"close\"\n                className=\"input-icon-close\"\n                size={15}\n                onClick={handleClearInput}\n                stroke={disabled ? 'var(--color-gray-600)' : ''}\n                ariaLabel=\"Clear input\"\n              />\n            )}\n            {filteredSuggestions.length > 0 && (\n              <Icon\n                name=\"chevron\"\n                rotation={isSuggestionBoxVisible ? '180' : '0'}\n                className=\"input-icon-chevron\"\n                stroke={disabled ? 'var(--color-gray-600)' : ''}\n                aria-hidden=\"true\"\n              />\n            )}\n          </div>\n          {isSuggestionBoxVisible && filteredSuggestions.length > 0 && (\n            <div\n              {...listboxProps}\n              aria-label={label || ariaLabel || 'Suggestions'}\n              className=\"suggestions-list\"\n              data-automation-id=\"autocomplete-suggestions-list\"\n            >\n              {filteredSuggestions.map((suggestion, index) => {\n                const optionProps = getOptionProps(index, false);\n                const isHighlighted = highlightedIndex === index;\n                return (\n                  <div\n                    key={index}\n                    {...optionProps}\n                    className={`${optionClassName || 'suggestion-item'} ${isHighlighted ? 'suggestion-item-highlighted' : ''}`}\n                    onClick={() => handleSelectSuggestion(suggestion)}\n                    onMouseEnter={() => setHighlightedIndex(index)}\n                    data-automation-id={`autocomplete-suggestion-item-${index}`}\n                  >\n                    {renderOption\n                      ? renderOption(suggestion, { isHighlighted, index })\n                      : suggestion.label}\n                  </div>\n                );\n              })}\n            </div>\n          )}\n        </div>\n        {(error || maxLength) && (\n          <div className={`${error ? 'error-and-max-word' : 'max-word-container'} ${disabled ? 'disabled' : ''}`}>\n            {error && (\n              <div id={errorId} className=\"error-message\" role=\"alert\">\n                {errorMessage}\n              </div>\n            )}\n            {maxLength && (\n              <div className=\"max-word\">\n                {value.length}/{maxLength}\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  }\n);\n"],"names":["AutoCompleteInput","React","memo","value","onChange","disabled","maxLength","tag","error","errorMessage","label","placeholder","suggestions","onSelect","renderOption","optionClassName","automationId","ariaLabel","ariaLabelledBy","ariaDescribedBy","props","filteredSuggestions","setFilteredSuggestions","useState","isSuggestionBoxVisible","setSuggestionBoxVisible","containerRef","useRef","inputRef","instanceId","useStableId","undefined","inputId","listboxId","labelId","errorId","handleSelectSuggestion","useCallback","item","containerProps","inputProps","comboboxInputProps","listboxProps","getOptionProps","highlightedIndex","setHighlightedIndex","useCombobox","items","isOpen","onOpenChange","handleInputChange","e","inputValue","target","filtered","filter","suggestion","toLowerCase","includes","useEffect","handleInputClick","handleInputFocus","length","handleClearInput","current","focus","a11yNameProps","getA11yNameAttributes","createElement","_extends","className","ref","id","style","pointerEvents","onClick","onFocus","Icon","name","size","stroke","rotation","map","index","optionProps","isHighlighted","key","onMouseEnter","role"],"mappings":"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"}
+{"version":3,"file":"index44.js","sources":["../src/components/AutoCompleteInput/index.tsx"],"sourcesContent":["import React, { useEffect, useRef, useCallback, useState } from 'react';\nimport './style.scss';\nimport { Icon } from '../Icon';\nimport { useStableId } from '../../utils/useStableId';\nimport { getA11yNameAttributes, useCombobox } from '../../utils/a11y';\n\nexport interface AutoCompleteInputProps {\n  value: string;\n  disabled?: boolean;\n  maxLength?: number;\n  /** Called when the user types in the input. Not called on suggestion selection. */\n  onChange: (value: string) => void;\n  tag?: string;\n  error?: boolean;\n  errorMessage?: string;\n  label?: string;\n  placeholder?: string;\n  /**\n   * Suggestion items. Default rendering expects { label, value } shape.\n   * When renderOption is provided, any shape is accepted.\n   */\n  suggestions?: any[];\n  /**\n   * Called when a suggestion is selected (click or Enter key).\n   * Receives the full item object from the suggestions array.\n   */\n  onSelect?: (item: any) => void;\n  /**\n   * Render custom content for each suggestion option. The component handles the option wrapper\n   * (ARIA props, highlight, click, keyboard navigation). You only provide the inner content.\n   */\n  renderOption?: (suggestion: any, context: { isHighlighted: boolean; index: number }) => React.ReactNode;\n  /**\n   * Custom CSS class for option elements. Replaces the default 'suggestion-item' class.\n   * Useful with renderOption to apply custom styling to option wrappers.\n   */\n  optionClassName?: string;\n  automationId?: string;\n  /**\n   * Accessible label for the input. Used when no visible label is provided.\n   */\n  ariaLabel?: string;\n  /**\n   * ID(s) of element(s) that label this input. Takes precedence over ariaLabel.\n   */\n  ariaLabelledBy?: string;\n  /**\n   * ID(s) of element(s) providing additional description.\n   */\n  ariaDescribedBy?: string;\n}\n\nexport const AutoCompleteInput: React.FC<AutoCompleteInputProps> = React.memo(\n  ({\n    value,\n    onChange,\n    disabled = false,\n    maxLength,\n    tag = 'input',\n    error = false,\n    errorMessage,\n    label,\n    placeholder,\n    suggestions = [],\n    onSelect,\n    renderOption,\n    optionClassName,\n    automationId = '',\n    ariaLabel,\n    ariaLabelledBy,\n    ariaDescribedBy,\n    ...props\n  }) => {\n    const [filteredSuggestions, setFilteredSuggestions] = useState<any[]>([...suggestions]);\n    const [isSuggestionBoxVisible, setSuggestionBoxVisible] = useState<boolean>(false);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    // Generate stable unique IDs per instance so label, input, listbox, and error never share IDs (HTML/ARIA require unique ids).\n    const instanceId = useStableId(undefined, 'autocomplete');\n    const inputId = `${instanceId}-input`;\n    const listboxId = `${instanceId}-listbox`;\n    const labelId = `${instanceId}-label`;\n    const errorId = `${instanceId}-error`;\n\n    const handleSelectSuggestion = useCallback(\n      (item: any) => {\n        setSuggestionBoxVisible(false);\n        onSelect?.(item);\n      },\n      [onSelect]\n    );\n\n    // Use the comprehensive useCombobox hook\n    const {\n      containerProps,\n      inputProps: comboboxInputProps,\n      listboxProps,\n      getOptionProps,\n      highlightedIndex,\n      setHighlightedIndex\n    } = useCombobox<any>({\n      items: filteredSuggestions,\n      isOpen: isSuggestionBoxVisible,\n      onOpenChange: setSuggestionBoxVisible,\n      onSelect: handleSelectSuggestion,\n      listboxId\n    });\n\n    const handleInputChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        const inputValue = e.target.value;\n        setHighlightedIndex(-1); // Reset highlight on input change\n        onChange(inputValue);\n\n        // Internal filtering for default rendering (when no renderOption, component manages filtering)\n        if (!renderOption) {\n          if (inputValue === '') {\n            setFilteredSuggestions([...suggestions]);\n          } else {\n            const filtered = suggestions?.filter(\n              (suggestion) =>\n                typeof suggestion === 'object' &&\n                suggestion?.label?.toLowerCase().includes(inputValue?.toLowerCase() ?? '')\n            );\n            setFilteredSuggestions([...filtered]);\n          }\n        }\n      },\n      [onChange, suggestions, renderOption, setHighlightedIndex]\n    );\n\n    useEffect(() => {\n      setFilteredSuggestions([...suggestions]);\n    }, [suggestions]);\n\n    const handleInputClick = () => {\n      setSuggestionBoxVisible(true);\n    };\n\n    const handleInputFocus = () => {\n      if (filteredSuggestions.length > 0) {\n        setSuggestionBoxVisible(true);\n      }\n    };\n\n    const handleClearInput = () => {\n      onChange('');\n      setHighlightedIndex(-1);\n      inputRef.current?.focus();\n    };\n\n    // Build ARIA name attributes: when ariaLabel is provided use it (e.g. \"Signer 1 name\"); otherwise use visible label or ariaLabelledBy\n    const a11yNameProps = getA11yNameAttributes({\n      ariaLabelledBy: label && !ariaLabel ? labelId : ariaLabelledBy,\n      ariaLabel,\n      ariaDescribedBy: error ? errorId : ariaDescribedBy\n    });\n\n    return (\n      <div \n        className=\"main-container-autocomplete-se-design\" \n        ref={containerRef} \n        data-automation-id={automationId}\n        {...containerProps}\n      >\n        {label && (\n          <span\n            id={labelId}\n            className={`label-container ${disabled ? 'label-container-disabled' : ''}`}\n          >\n            {label}\n          </span>\n        )}\n        <div className=\"input-container-wrapper\">\n          <div className=\"input-wrapper\" style={{ pointerEvents: disabled ? 'none' : 'auto' }}>\n            {React.createElement(tag, {\n              ref: inputRef,\n              id: inputId,\n              value: value,\n              onChange: handleInputChange,\n              onClick: handleInputClick,\n              onFocus: handleInputFocus,\n              ...comboboxInputProps,\n              disabled,\n              className: `${error ? 'input-container-error' : 'input-container-default'} ${disabled ? 'input-container-disabled' : ''} ${filteredSuggestions.length > 0 || value ? 'with-icon' : ''} ${filteredSuggestions.length > 0 && value ? 'with-icons' : ''}`,\n              maxLength,\n              placeholder,\n              'aria-invalid': error || undefined,\n              ...a11yNameProps,\n              ...props\n            })}\n            {value && (\n              <Icon\n                name=\"close\"\n                className=\"input-icon-close\"\n                size={15}\n                onClick={handleClearInput}\n                stroke={disabled ? 'var(--color-gray-600)' : ''}\n                ariaLabel=\"Clear input\"\n              />\n            )}\n            {filteredSuggestions.length > 0 && (\n              <Icon\n                name=\"chevron\"\n                rotation={isSuggestionBoxVisible ? '180' : '0'}\n                className=\"input-icon-chevron\"\n                stroke={disabled ? 'var(--color-gray-600)' : ''}\n                aria-hidden=\"true\"\n              />\n            )}\n          </div>\n          {isSuggestionBoxVisible && filteredSuggestions.length > 0 && (\n            <div\n              {...listboxProps}\n              aria-label={label || ariaLabel || 'Suggestions'}\n              className=\"suggestions-list\"\n              data-automation-id=\"autocomplete-suggestions-list\"\n            >\n              {filteredSuggestions.map((suggestion, index) => {\n                const optionProps = getOptionProps(index, false);\n                const isHighlighted = highlightedIndex === index;\n                return (\n                  <div\n                    key={index}\n                    {...optionProps}\n                    className={`${optionClassName || 'suggestion-item'} ${isHighlighted ? 'suggestion-item-highlighted' : ''}`}\n                    onClick={() => handleSelectSuggestion(suggestion)}\n                    onMouseEnter={() => setHighlightedIndex(index)}\n                    data-automation-id={`autocomplete-suggestion-item-${index}`}\n                  >\n                    {renderOption\n                      ? renderOption(suggestion, { isHighlighted, index })\n                      : suggestion.label}\n                  </div>\n                );\n              })}\n            </div>\n          )}\n        </div>\n        {(error || maxLength) && (\n          <div className={`${error ? 'error-and-max-word' : 'max-word-container'} ${disabled ? 'disabled' : ''}`}>\n            {error && (\n              <div id={errorId} className=\"error-message\" role=\"alert\">\n                {errorMessage}\n              </div>\n            )}\n            {maxLength && (\n              <div className=\"max-word\">\n                {value.length}/{maxLength}\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  }\n);\n"],"names":["AutoCompleteInput","memo","value","onChange","disabled","maxLength","tag","error","errorMessage","label","placeholder","suggestions","onSelect","renderOption","optionClassName","automationId","ariaLabel","ariaLabelledBy","ariaDescribedBy","props","filteredSuggestions","setFilteredSuggestions","useState","isSuggestionBoxVisible","setSuggestionBoxVisible","containerRef","useRef","inputRef","instanceId","useStableId","undefined","inputId","listboxId","labelId","errorId","handleSelectSuggestion","useCallback","item","containerProps","inputProps","comboboxInputProps","listboxProps","getOptionProps","highlightedIndex","setHighlightedIndex","useCombobox","items","isOpen","onOpenChange","handleInputChange","e","inputValue","target","filtered","filter","suggestion","toLowerCase","includes","useEffect","handleInputClick","handleInputFocus","length","handleClearInput","current","focus","a11yNameProps","getA11yNameAttributes","React","createElement","_extends","className","ref","id","style","pointerEvents","onClick","onFocus","Icon","name","size","stroke","rotation","map","index","optionProps","isHighlighted","key","onMouseEnter","role"],"mappings":"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"}

package/dist/index45.js

@@ -1,10 +1,10 @@
 import t, { useState as m, useRef as h, useCallback as f, useEffect as x } from "react";
 /* empty css         */
-import g from "./index209.js";
+import g from "./index212.js";
 import { Icon as T } from "./index5.js";
-import { useStableId as E } from "./index185.js";
+import { useStableId as E } from "./index188.js";
 import { getA11yNameAttributes as ce } from "./index70.js";
-import { useCombobox as se } from "./index191.js";
+import { useCombobox as se } from "./index194.js";
 function c() {
   return c = Object.assign ? Object.assign.bind() : function(s) {
     for (var i = 1; i < arguments.length; i++) {

package/dist/index45.js.map

@@ -1 +1 @@
-{"version":3,"file":"index45.js","sources":["../src/components/PhoneInput/index.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState, useCallback } from 'react';\nimport './style.scss';\nimport countriesInfoJson from './countriesInfo.json';\nimport { Icon } from '../Icon';\nimport { useStableId } from '../../utils/useStableId';\nimport { getA11yNameAttributes, useCombobox } from '../../utils/a11y';\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  label?: string;\n  automationId?: string;\n  /**\n   * Accessible label for the entire phone input group.\n   * Provides context for screen readers (e.g., \"Two-step verification phone number for signer 1\").\n   * Takes precedence over label prop for screen readers (visual label remains unchanged).\n   */\n  ariaLabel?: string;\n  /**\n   * ID(s) of element(s) that label this input (for external labels).\n   * Highest precedence - use when label is rendered outside the component.\n   */\n  ariaLabelledBy?: string;\n  /**\n   * ID(s) of element(s) providing additional description.\n   */\n  ariaDescribedBy?: string;\n  /**\n   * Whether the input is disabled\n   */\n  disabled?: boolean;\n}\n\nexport const PhoneInput: React.FC<PhoneInputProps> = ({\n  onCountrycodeChange,\n  onNumberChange,\n  error,\n  errorMessage,\n  value,\n  label,\n  automationId = '',\n  ariaLabel,\n  ariaLabelledBy,\n  ariaDescribedBy,\n  disabled = false\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  const countryButtonRef = useRef<HTMLButtonElement>(null);\n  const searchInputRef = useRef<HTMLInputElement>(null);\n  const restoreFocusToButtonRef = useRef(false);\n\n  // Generate stable IDs for ARIA relationships\n  const labelId = useStableId(automationId, 'phone-label');\n  const listboxId = useStableId(automationId, 'phone-listbox');\n  const phoneInputId = useStableId(automationId, 'phone-input');\n  const errorId = useStableId(automationId, 'phone-error');\n\n  const countryInfo = countriesInfoJson.find((country) => country.dial_code === countryCode);\n\n  // Close dropdown and reset state\n  const closeDropdown = useCallback(() => {\n    setDisplaySelectCountryCode(false);\n    setSearchValue('');\n    setCountriesInfo(countriesInfoJson);\n  }, []);\n\n  const handleCountryCodeSelect = useCallback(\n    (country: string) => {\n      if (country) {\n        setCountryCode(country);\n        onCountrycodeChange(country);\n      }\n      closeDropdown();\n      // Focus return is handled by useEffect that watches displaySelectCountryCode\n    },\n    [onCountrycodeChange, closeDropdown]\n  );\n\n  const handleSelectFromDropdown = useCallback(\n    (country: typeof countriesInfoJson[0]) => {\n      restoreFocusToButtonRef.current = true;\n      handleCountryCodeSelect(country.dial_code);\n    },\n    [handleCountryCodeSelect]\n  );\n\n  // Use comprehensive useCombobox hook for country search\n  const {\n    containerProps,\n    inputProps: comboboxInputProps,\n    listboxProps,\n    getOptionProps,\n    highlightedIndex,\n    setHighlightedIndex\n  } = useCombobox({\n    items: countriesInfo,\n    isOpen: displaySelectCountryCode,\n    onOpenChange: setDisplaySelectCountryCode,\n    onSelect: handleSelectFromDropdown,\n    listboxId\n  });\n\n  const handleCountryCodeSearch = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const searchVal = event.target.value;\n    setSearchValue(searchVal);\n    setHighlightedIndex(-1);\n    const filteredCountries = countriesInfoJson.filter(\n      (country) =>\n        country.name.toLowerCase().includes(searchVal.toLowerCase()) ||\n        country.dial_code.toLowerCase().includes(searchVal.toLowerCase()) ||\n        country.code.toLowerCase().includes(searchVal.toLowerCase())\n    );\n    setCountriesInfo(filteredCountries);\n  };\n\n  // Return focus to button when dropdown closes\n  const prevDisplaySelectCountryCodeRef = useRef(displaySelectCountryCode);\n  useEffect(() => {\n    let rafId: number | null = null;\n    // If dropdown was open and is now closed, return focus to button\n    // ONLY when the close was triggered from within the component (Escape/selection),\n    // not when the user moved focus outside (focus-out dismissal).\n    if (prevDisplaySelectCountryCodeRef.current && !displaySelectCountryCode && restoreFocusToButtonRef.current) {\n      rafId = requestAnimationFrame(() => {\n        countryButtonRef.current?.focus();\n      });\n    }\n    if (prevDisplaySelectCountryCodeRef.current && !displaySelectCountryCode) {\n      restoreFocusToButtonRef.current = false;\n    }\n    prevDisplaySelectCountryCodeRef.current = displaySelectCountryCode;\n    return () => {\n      if (rafId !== null) {\n        cancelAnimationFrame(rafId);\n      }\n    };\n  }, [displaySelectCountryCode]);\n\n  useEffect(() => {\n    if (value) {\n      setCountryCode(value.countryCode);\n      setEnteredNumber(value.number);\n    }\n  }, [value]);\n\n  // Focus search input when dropdown opens\n  useEffect(() => {\n    let rafId: number | null = null;\n    if (displaySelectCountryCode) {\n      rafId = requestAnimationFrame(() => {\n        searchInputRef.current?.focus();\n      });\n    }\n    return () => {\n      if (rafId !== null) {\n        cancelAnimationFrame(rafId);\n      }\n    };\n  }, [displaySelectCountryCode]);\n\n  const handleEnteredNumberChange = (val: string) => {\n    const numericValue = val.replace(/\\D/g, ''); // Remove non-numeric characters\n    setEnteredNumber(numericValue);\n    onNumberChange(numericValue);\n  };\n\n  const toggleDropdown = useCallback(() => {\n    if (disabled) return;\n    setDisplaySelectCountryCode((prev) => !prev);\n  }, [disabled]);\n\n  const handleCountryButtonKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (disabled) return;\n\n      switch (e.key) {\n        case 'Enter':\n        case ' ':\n          e.preventDefault();\n          toggleDropdown();\n          break;\n        case 'ArrowDown':\n          e.preventDefault();\n          if (!displaySelectCountryCode) {\n            setDisplaySelectCountryCode(true);\n          }\n          break;\n        // Escape is handled by useDismissOnEscape hook\n      }\n    },\n    [disabled, displaySelectCountryCode, toggleDropdown]\n  );\n\n  // Group and phone input label logic (precedence: ariaLabelledBy > ariaLabel > label > fallback):\n  // 1. ariaLabelledBy: external label reference (highest priority)\n  // 2. ariaLabel: programmatic label\n  // 3. label: internal visible label (uses aria-labelledby={labelId})\n  // 4. fallback: \"Phone number\"\n  const groupAriaLabelledBy = ariaLabelledBy || (!ariaLabel && label ? labelId : undefined);\n  const groupAriaLabel = !ariaLabelledBy ? (ariaLabel || (!label ? 'Phone number' : undefined)) : undefined;\n  \n  // Build ARIA name attributes for phone input\n  // Phone input directly references its label source (not through group) for reliability\n  const phoneInputA11yProps = getA11yNameAttributes({\n    ariaLabelledBy: groupAriaLabelledBy,\n    ariaLabel: groupAriaLabel,\n    ariaDescribedBy: error ? errorId : ariaDescribedBy\n  });\n\n  return (\n    <div \n      className=\"phone-input-container-se-design-main-container\" \n      data-automation-id={automationId}\n      {...containerProps}\n      onKeyDownCapture={(e) => {\n        if (e.key === 'Escape' && displaySelectCountryCode) {\n          restoreFocusToButtonRef.current = true;\n        }\n        containerProps.onKeyDownCapture(e);\n      }}\n    >\n      {label && (\n        <div id={labelId} className=\"label-container\">\n          {label}\n        </div>\n      )}\n      <div \n        role=\"group\"\n        aria-label={groupAriaLabel}\n        aria-labelledby={groupAriaLabelledBy}\n        className={`phone-input-container-se-design-main ${error ? 'error' : ''}`} \n        ref={containerRef}\n      >\n        <div className=\"phone-input-container-se-design\">\n          <button\n            ref={countryButtonRef}\n            type=\"button\"\n            className={`phone-input-container-se-design-country-code focus-outline rounded ${disabled ? 'cursor-not-allowed opacity-60' : ''}`}\n            onClick={toggleDropdown}\n            onKeyDown={handleCountryButtonKeyDown}\n            aria-haspopup=\"listbox\"\n            aria-expanded={displaySelectCountryCode}\n            aria-controls={displaySelectCountryCode ? listboxId : undefined}\n            aria-label={`Select country code. Current: ${countryInfo?.name} ${countryInfo?.dial_code}`}\n            disabled={disabled}\n            data-automation-id=\"country-code-selector\"\n          >\n            <img\n              src={`https://flagcdn.com/${countryInfo?.code.toLowerCase()}.svg`}\n              alt=\"\"\n              aria-hidden=\"true\"\n              width=\"16\"\n            />\n            <span>{countryInfo?.dial_code}</span>\n            <Icon\n              name=\"chevron\"\n              className={!displaySelectCountryCode ? '' : 'rotate-180'}\n              aria-hidden=\"true\"\n            />\n          </button>\n          <span className=\"divider\" aria-hidden=\"true\" />\n          <input\n            id={phoneInputId}\n            type=\"tel\"\n            placeholder=\"Enter phone number\"\n            className={`phone-input-container-se-design-phone-number-input ${disabled ? 'disabled' : ''}`}\n            onChange={(event) => handleEnteredNumberChange(event.target.value)}\n            value={enteredNumber}\n            pattern=\"[0-9]*\"\n            disabled={disabled}\n            aria-invalid={error || undefined}\n            {...phoneInputA11yProps}\n            data-automation-id=\"phone-number-input-field\"\n          />\n        </div>\n\n        {displaySelectCountryCode && (\n          <div\n            {...listboxProps}\n            className=\"phone-input-container-se-design-country-code-list\"\n            aria-label=\"Select country\"\n            data-automation-id=\"country-code-list\"\n          >\n            <div className=\"search-input-wrapper\">\n              <Icon name=\"search\" className=\"search-icon\" aria-hidden=\"true\" />\n              <input\n                ref={searchInputRef}\n                {...comboboxInputProps}\n                type=\"text\"\n                placeholder=\"Search countries\"\n                className=\"phone-input-container-se-design-country-code-list-item-input\"\n                onChange={handleCountryCodeSearch}\n                value={searchValue}\n                aria-label=\"Search countries\"\n                data-automation-id=\"country-code-search-input\"\n              />\n            </div>\n            {countriesInfo.length > 0 ? (\n              countriesInfo.map((country, index) => {\n                const optionProps = getOptionProps(index, country.dial_code === countryCode);\n                return (\n                  <div\n                    key={country.code}\n                    {...optionProps}\n                    className={`phone-input-container-se-design-country-code-list-item ${\n                      highlightedIndex === index ? 'highlighted' : ''\n                    } ${country.dial_code === countryCode ? 'selected' : ''}`}\n                    onClick={() => {\n                      restoreFocusToButtonRef.current = true;\n                      handleCountryCodeSelect(country.dial_code);\n                    }}\n                    onMouseEnter={() => setHighlightedIndex(index)}\n                  >\n                    <img\n                      src={`https://flagcdn.com/${country.code.toLowerCase()}.svg`}\n                      alt=\"\"\n                      aria-hidden=\"true\"\n                      width=\"16\"\n                    />\n                    <span>{country.name}</span>\n                    <span>({country.dial_code})</span>\n                  </div>\n                );\n              })\n            ) : (\n              <div className=\"phone-input-container-se-design-country-code-list-item-no-results\" role=\"status\">\n                No results found\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n      {error && (\n        <div id={errorId} className=\"error-message\" role=\"alert\">\n          {errorMessage}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["PhoneInput","onCountrycodeChange","onNumberChange","error","errorMessage","value","label","automationId","ariaLabel","ariaLabelledBy","ariaDescribedBy","disabled","countryCode","setCountryCode","useState","countriesInfoJson","dial_code","displaySelectCountryCode","setDisplaySelectCountryCode","countriesInfo","setCountriesInfo","searchValue","setSearchValue","enteredNumber","setEnteredNumber","containerRef","useRef","countryButtonRef","searchInputRef","restoreFocusToButtonRef","labelId","useStableId","listboxId","phoneInputId","errorId","countryInfo","find","country","closeDropdown","useCallback","handleCountryCodeSelect","handleSelectFromDropdown","current","containerProps","inputProps","comboboxInputProps","listboxProps","getOptionProps","highlightedIndex","setHighlightedIndex","useCombobox","items","isOpen","onOpenChange","onSelect","handleCountryCodeSearch","event","searchVal","target","filteredCountries","filter","name","toLowerCase","includes","code","prevDisplaySelectCountryCodeRef","useEffect","rafId","requestAnimationFrame","focus","cancelAnimationFrame","number","handleEnteredNumberChange","val","numericValue","replace","toggleDropdown","prev","handleCountryButtonKeyDown","e","key","preventDefault","groupAriaLabelledBy","undefined","groupAriaLabel","phoneInputA11yProps","getA11yNameAttributes","React","createElement","_extends","className","onKeyDownCapture","id","role","ref","type","onClick","onKeyDown","src","alt","width","Icon","placeholder","onChange","pattern","length","map","index","optionProps","onMouseEnter"],"mappings":"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"}
+{"version":3,"file":"index45.js","sources":["../src/components/PhoneInput/index.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState, useCallback } from 'react';\nimport './style.scss';\nimport countriesInfoJson from './countriesInfo.json';\nimport { Icon } from '../Icon';\nimport { useStableId } from '../../utils/useStableId';\nimport { getA11yNameAttributes, useCombobox } from '../../utils/a11y';\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  label?: string;\n  automationId?: string;\n  /**\n   * Accessible label for the entire phone input group.\n   * Provides context for screen readers (e.g., \"Two-step verification phone number for signer 1\").\n   * Takes precedence over label prop for screen readers (visual label remains unchanged).\n   */\n  ariaLabel?: string;\n  /**\n   * ID(s) of element(s) that label this input (for external labels).\n   * Highest precedence - use when label is rendered outside the component.\n   */\n  ariaLabelledBy?: string;\n  /**\n   * ID(s) of element(s) providing additional description.\n   */\n  ariaDescribedBy?: string;\n  /**\n   * Whether the input is disabled\n   */\n  disabled?: boolean;\n}\n\nexport const PhoneInput: React.FC<PhoneInputProps> = ({\n  onCountrycodeChange,\n  onNumberChange,\n  error,\n  errorMessage,\n  value,\n  label,\n  automationId = '',\n  ariaLabel,\n  ariaLabelledBy,\n  ariaDescribedBy,\n  disabled = false\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  const countryButtonRef = useRef<HTMLButtonElement>(null);\n  const searchInputRef = useRef<HTMLInputElement>(null);\n  const restoreFocusToButtonRef = useRef(false);\n\n  // Generate stable IDs for ARIA relationships\n  const labelId = useStableId(automationId, 'phone-label');\n  const listboxId = useStableId(automationId, 'phone-listbox');\n  const phoneInputId = useStableId(automationId, 'phone-input');\n  const errorId = useStableId(automationId, 'phone-error');\n\n  const countryInfo = countriesInfoJson.find((country) => country.dial_code === countryCode);\n\n  // Close dropdown and reset state\n  const closeDropdown = useCallback(() => {\n    setDisplaySelectCountryCode(false);\n    setSearchValue('');\n    setCountriesInfo(countriesInfoJson);\n  }, []);\n\n  const handleCountryCodeSelect = useCallback(\n    (country: string) => {\n      if (country) {\n        setCountryCode(country);\n        onCountrycodeChange(country);\n      }\n      closeDropdown();\n      // Focus return is handled by useEffect that watches displaySelectCountryCode\n    },\n    [onCountrycodeChange, closeDropdown]\n  );\n\n  const handleSelectFromDropdown = useCallback(\n    (country: typeof countriesInfoJson[0]) => {\n      restoreFocusToButtonRef.current = true;\n      handleCountryCodeSelect(country.dial_code);\n    },\n    [handleCountryCodeSelect]\n  );\n\n  // Use comprehensive useCombobox hook for country search\n  const {\n    containerProps,\n    inputProps: comboboxInputProps,\n    listboxProps,\n    getOptionProps,\n    highlightedIndex,\n    setHighlightedIndex\n  } = useCombobox({\n    items: countriesInfo,\n    isOpen: displaySelectCountryCode,\n    onOpenChange: setDisplaySelectCountryCode,\n    onSelect: handleSelectFromDropdown,\n    listboxId\n  });\n\n  const handleCountryCodeSearch = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const searchVal = event.target.value;\n    setSearchValue(searchVal);\n    setHighlightedIndex(-1);\n    const filteredCountries = countriesInfoJson.filter(\n      (country) =>\n        country.name.toLowerCase().includes(searchVal.toLowerCase()) ||\n        country.dial_code.toLowerCase().includes(searchVal.toLowerCase()) ||\n        country.code.toLowerCase().includes(searchVal.toLowerCase())\n    );\n    setCountriesInfo(filteredCountries);\n  };\n\n  // Return focus to button when dropdown closes\n  const prevDisplaySelectCountryCodeRef = useRef(displaySelectCountryCode);\n  useEffect(() => {\n    let rafId: number | null = null;\n    // If dropdown was open and is now closed, return focus to button\n    // ONLY when the close was triggered from within the component (Escape/selection),\n    // not when the user moved focus outside (focus-out dismissal).\n    if (prevDisplaySelectCountryCodeRef.current && !displaySelectCountryCode && restoreFocusToButtonRef.current) {\n      rafId = requestAnimationFrame(() => {\n        countryButtonRef.current?.focus();\n      });\n    }\n    if (prevDisplaySelectCountryCodeRef.current && !displaySelectCountryCode) {\n      restoreFocusToButtonRef.current = false;\n    }\n    prevDisplaySelectCountryCodeRef.current = displaySelectCountryCode;\n    return () => {\n      if (rafId !== null) {\n        cancelAnimationFrame(rafId);\n      }\n    };\n  }, [displaySelectCountryCode]);\n\n  useEffect(() => {\n    if (value) {\n      setCountryCode(value.countryCode);\n      setEnteredNumber(value.number);\n    }\n  }, [value]);\n\n  // Focus search input when dropdown opens\n  useEffect(() => {\n    let rafId: number | null = null;\n    if (displaySelectCountryCode) {\n      rafId = requestAnimationFrame(() => {\n        searchInputRef.current?.focus();\n      });\n    }\n    return () => {\n      if (rafId !== null) {\n        cancelAnimationFrame(rafId);\n      }\n    };\n  }, [displaySelectCountryCode]);\n\n  const handleEnteredNumberChange = (val: string) => {\n    const numericValue = val.replace(/\\D/g, ''); // Remove non-numeric characters\n    setEnteredNumber(numericValue);\n    onNumberChange(numericValue);\n  };\n\n  const toggleDropdown = useCallback(() => {\n    if (disabled) return;\n    setDisplaySelectCountryCode((prev) => !prev);\n  }, [disabled]);\n\n  const handleCountryButtonKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (disabled) return;\n\n      switch (e.key) {\n        case 'Enter':\n        case ' ':\n          e.preventDefault();\n          toggleDropdown();\n          break;\n        case 'ArrowDown':\n          e.preventDefault();\n          if (!displaySelectCountryCode) {\n            setDisplaySelectCountryCode(true);\n          }\n          break;\n        // Escape is handled by useDismissOnEscape hook\n      }\n    },\n    [disabled, displaySelectCountryCode, toggleDropdown]\n  );\n\n  // Group and phone input label logic (precedence: ariaLabelledBy > ariaLabel > label > fallback):\n  // 1. ariaLabelledBy: external label reference (highest priority)\n  // 2. ariaLabel: programmatic label\n  // 3. label: internal visible label (uses aria-labelledby={labelId})\n  // 4. fallback: \"Phone number\"\n  const groupAriaLabelledBy = ariaLabelledBy || (!ariaLabel && label ? labelId : undefined);\n  const groupAriaLabel = !ariaLabelledBy ? (ariaLabel || (!label ? 'Phone number' : undefined)) : undefined;\n  \n  // Build ARIA name attributes for phone input\n  // Phone input directly references its label source (not through group) for reliability\n  const phoneInputA11yProps = getA11yNameAttributes({\n    ariaLabelledBy: groupAriaLabelledBy,\n    ariaLabel: groupAriaLabel,\n    ariaDescribedBy: error ? errorId : ariaDescribedBy\n  });\n\n  return (\n    <div \n      className=\"phone-input-container-se-design-main-container\" \n      data-automation-id={automationId}\n      {...containerProps}\n      onKeyDownCapture={(e) => {\n        if (e.key === 'Escape' && displaySelectCountryCode) {\n          restoreFocusToButtonRef.current = true;\n        }\n        containerProps.onKeyDownCapture(e);\n      }}\n    >\n      {label && (\n        <div id={labelId} className=\"label-container\">\n          {label}\n        </div>\n      )}\n      <div \n        role=\"group\"\n        aria-label={groupAriaLabel}\n        aria-labelledby={groupAriaLabelledBy}\n        className={`phone-input-container-se-design-main ${error ? 'error' : ''}`} \n        ref={containerRef}\n      >\n        <div className=\"phone-input-container-se-design\">\n          <button\n            ref={countryButtonRef}\n            type=\"button\"\n            className={`phone-input-container-se-design-country-code focus-outline rounded ${disabled ? 'cursor-not-allowed opacity-60' : ''}`}\n            onClick={toggleDropdown}\n            onKeyDown={handleCountryButtonKeyDown}\n            aria-haspopup=\"listbox\"\n            aria-expanded={displaySelectCountryCode}\n            aria-controls={displaySelectCountryCode ? listboxId : undefined}\n            aria-label={`Select country code. Current: ${countryInfo?.name} ${countryInfo?.dial_code}`}\n            disabled={disabled}\n            data-automation-id=\"country-code-selector\"\n          >\n            <img\n              src={`https://flagcdn.com/${countryInfo?.code.toLowerCase()}.svg`}\n              alt=\"\"\n              aria-hidden=\"true\"\n              width=\"16\"\n            />\n            <span>{countryInfo?.dial_code}</span>\n            <Icon\n              name=\"chevron\"\n              className={!displaySelectCountryCode ? '' : 'rotate-180'}\n              aria-hidden=\"true\"\n            />\n          </button>\n          <span className=\"divider\" aria-hidden=\"true\" />\n          <input\n            id={phoneInputId}\n            type=\"tel\"\n            placeholder=\"Enter phone number\"\n            className={`phone-input-container-se-design-phone-number-input ${disabled ? 'disabled' : ''}`}\n            onChange={(event) => handleEnteredNumberChange(event.target.value)}\n            value={enteredNumber}\n            pattern=\"[0-9]*\"\n            disabled={disabled}\n            aria-invalid={error || undefined}\n            {...phoneInputA11yProps}\n            data-automation-id=\"phone-number-input-field\"\n          />\n        </div>\n\n        {displaySelectCountryCode && (\n          <div\n            {...listboxProps}\n            className=\"phone-input-container-se-design-country-code-list\"\n            aria-label=\"Select country\"\n            data-automation-id=\"country-code-list\"\n          >\n            <div className=\"search-input-wrapper\">\n              <Icon name=\"search\" className=\"search-icon\" aria-hidden=\"true\" />\n              <input\n                ref={searchInputRef}\n                {...comboboxInputProps}\n                type=\"text\"\n                placeholder=\"Search countries\"\n                className=\"phone-input-container-se-design-country-code-list-item-input\"\n                onChange={handleCountryCodeSearch}\n                value={searchValue}\n                aria-label=\"Search countries\"\n                data-automation-id=\"country-code-search-input\"\n              />\n            </div>\n            {countriesInfo.length > 0 ? (\n              countriesInfo.map((country, index) => {\n                const optionProps = getOptionProps(index, country.dial_code === countryCode);\n                return (\n                  <div\n                    key={country.code}\n                    {...optionProps}\n                    className={`phone-input-container-se-design-country-code-list-item ${\n                      highlightedIndex === index ? 'highlighted' : ''\n                    } ${country.dial_code === countryCode ? 'selected' : ''}`}\n                    onClick={() => {\n                      restoreFocusToButtonRef.current = true;\n                      handleCountryCodeSelect(country.dial_code);\n                    }}\n                    onMouseEnter={() => setHighlightedIndex(index)}\n                  >\n                    <img\n                      src={`https://flagcdn.com/${country.code.toLowerCase()}.svg`}\n                      alt=\"\"\n                      aria-hidden=\"true\"\n                      width=\"16\"\n                    />\n                    <span>{country.name}</span>\n                    <span>({country.dial_code})</span>\n                  </div>\n                );\n              })\n            ) : (\n              <div className=\"phone-input-container-se-design-country-code-list-item-no-results\" role=\"status\">\n                No results found\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n      {error && (\n        <div id={errorId} className=\"error-message\" role=\"alert\">\n          {errorMessage}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["PhoneInput","onCountrycodeChange","onNumberChange","error","errorMessage","value","label","automationId","ariaLabel","ariaLabelledBy","ariaDescribedBy","disabled","countryCode","setCountryCode","useState","countriesInfoJson","dial_code","displaySelectCountryCode","setDisplaySelectCountryCode","countriesInfo","setCountriesInfo","searchValue","setSearchValue","enteredNumber","setEnteredNumber","containerRef","useRef","countryButtonRef","searchInputRef","restoreFocusToButtonRef","labelId","useStableId","listboxId","phoneInputId","errorId","countryInfo","find","country","closeDropdown","useCallback","handleCountryCodeSelect","handleSelectFromDropdown","current","containerProps","inputProps","comboboxInputProps","listboxProps","getOptionProps","highlightedIndex","setHighlightedIndex","useCombobox","items","isOpen","onOpenChange","onSelect","handleCountryCodeSearch","event","searchVal","target","filteredCountries","filter","name","toLowerCase","includes","code","prevDisplaySelectCountryCodeRef","useEffect","rafId","requestAnimationFrame","focus","cancelAnimationFrame","number","handleEnteredNumberChange","val","numericValue","replace","toggleDropdown","prev","handleCountryButtonKeyDown","e","key","preventDefault","groupAriaLabelledBy","undefined","groupAriaLabel","phoneInputA11yProps","getA11yNameAttributes","React","createElement","_extends","className","onKeyDownCapture","id","role","ref","type","onClick","onKeyDown","src","alt","width","Icon","placeholder","onChange","pattern","length","map","index","optionProps","onMouseEnter"],"mappings":"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"}

package/dist/index46.js.map

@@ -1 +1 @@
-{"version":3,"file":"index46.js","sources":["../src/components/CircularProgressBar/index.tsx"],"sourcesContent":["import React from 'react';\n\ninterface CircularProgressBarProps {\n  progress: number;\n  backgroundColor?: string;\n  progressColor?: string;\n  size?: number;\n  strokeWidth?: number;\n}\n\nexport const CircularProgressBar = ({\n  progress,\n  backgroundColor = '#E8E8E8',\n  progressColor = '#0066FF',\n  size = 40,\n  strokeWidth = 4\n}: CircularProgressBarProps) => {\n  const radius = (size - strokeWidth) / 2;\n  const circumference = radius * 2 * Math.PI;\n  const strokeDashoffset = circumference - (progress / 100) * circumference;\n\n  return (\n    <svg width={size} height={size} style={{ transform: 'rotate(-90deg)' }}>\n      {/* Background circle */}\n      <circle cx={size / 2} cy={size / 2} r={radius} stroke={backgroundColor} strokeWidth={strokeWidth} fill=\"none\" />\n      {/* Progress circle */}\n      <circle\n        cx={size / 2}\n        cy={size / 2}\n        r={radius}\n        stroke={progressColor}\n        strokeWidth={strokeWidth}\n        strokeDasharray={circumference}\n        strokeDashoffset={strokeDashoffset}\n        fill=\"none\"\n        strokeLinecap=\"round\"\n        style={{ transition: 'stroke-dashoffset 0.3s ease' }}\n      />\n    </svg>\n  );\n};\n"],"names":["CircularProgressBar","progress","backgroundColor","progressColor","size","strokeWidth","radius","circumference","Math","PI","strokeDashoffset","React","createElement","width","height","style","transform","cx","cy","r","stroke","fill","strokeDasharray","strokeLinecap","transition"],"mappings":";AAUO,MAAMA,IAAsBA,CAAC;AAAA,EAClCC,UAAAA;AAAAA,EACAC,iBAAAA,IAAkB;AAAA,EAClBC,eAAAA,IAAgB;AAAA,EAChBC,MAAAA,IAAO;AAAA,EACPC,aAAAA,IAAc;AACU,MAAM;AAC9B,QAAMC,KAAUF,IAAOC,KAAe,GAChCE,IAAgBD,IAAS,IAAIE,KAAKC,IAClCC,IAAmBH,IAAiBN,IAAW,MAAOM;AAE5D,SACEI,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,OAAOT;AAAAA,IAAMU,QAAQV;AAAAA,IAAMW,OAAO;AAAA,MAAEC,WAAW;AAAA,IAAA;AAAA,EAAiB,GAEnEL,gBAAAA,EAAAC,cAAA,UAAA;AAAA,IAAQK,IAAIb,IAAO;AAAA,IAAGc,IAAId,IAAO;AAAA,IAAGe,GAAGb;AAAAA,IAAQc,QAAQlB;AAAAA,IAAiBG,aAAAA;AAAAA,IAA0BgB,MAAK;AAAA,EAAA,CAAQ,GAE/GV,gBAAAA,EAAAC,cAAA,UAAA;AAAA,IACEK,IAAIb,IAAO;AAAA,IACXc,IAAId,IAAO;AAAA,IACXe,GAAGb;AAAAA,IACHc,QAAQjB;AAAAA,IACRE,aAAAA;AAAAA,IACAiB,iBAAiBf;AAAAA,IACjBG,kBAAAA;AAAAA,IACAW,MAAK;AAAA,IACLE,eAAc;AAAA,IACdR,OAAO;AAAA,MAAES,YAAY;AAAA,IAAA;AAAA,EAA8B,CACpD,CACE;AAET;"}
+{"version":3,"file":"index46.js","sources":["../src/components/CircularProgressBar/index.tsx"],"sourcesContent":["import React from 'react';\n\ninterface CircularProgressBarProps {\n  progress: number;\n  backgroundColor?: string;\n  progressColor?: string;\n  size?: number;\n  strokeWidth?: number;\n}\n\nexport const CircularProgressBar = ({\n  progress,\n  backgroundColor = '#E8E8E8',\n  progressColor = '#0066FF',\n  size = 40,\n  strokeWidth = 4\n}: CircularProgressBarProps) => {\n  const radius = (size - strokeWidth) / 2;\n  const circumference = radius * 2 * Math.PI;\n  const strokeDashoffset = circumference - (progress / 100) * circumference;\n\n  return (\n    <svg width={size} height={size} style={{ transform: 'rotate(-90deg)' }}>\n      {/* Background circle */}\n      <circle cx={size / 2} cy={size / 2} r={radius} stroke={backgroundColor} strokeWidth={strokeWidth} fill=\"none\" />\n      {/* Progress circle */}\n      <circle\n        cx={size / 2}\n        cy={size / 2}\n        r={radius}\n        stroke={progressColor}\n        strokeWidth={strokeWidth}\n        strokeDasharray={circumference}\n        strokeDashoffset={strokeDashoffset}\n        fill=\"none\"\n        strokeLinecap=\"round\"\n        style={{ transition: 'stroke-dashoffset 0.3s ease' }}\n      />\n    </svg>\n  );\n};\n"],"names":["CircularProgressBar","progress","backgroundColor","progressColor","size","strokeWidth","radius","circumference","Math","PI","strokeDashoffset","React","createElement","width","height","style","transform","cx","cy","r","stroke","fill","strokeDasharray","strokeLinecap","transition"],"mappings":";AAUO,MAAMA,IAAsBA,CAAC;AAAA,EAClCC,UAAAA;AAAAA,EACAC,iBAAAA,IAAkB;AAAA,EAClBC,eAAAA,IAAgB;AAAA,EAChBC,MAAAA,IAAO;AAAA,EACPC,aAAAA,IAAc;AACU,MAAM;AACxBC,QAAAA,KAAUF,IAAOC,KAAe,GAChCE,IAAgBD,IAAS,IAAIE,KAAKC,IAClCC,IAAmBH,IAAiBN,IAAW,MAAOM;AAG1DI,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,OAAOT;AAAAA,IAAMU,QAAQV;AAAAA,IAAMW,OAAO;AAAA,MAAEC,WAAW;AAAA,IAAiB;AAAA,EAAA,GAEnEJ,gBAAAA,EAAAA,cAAA,UAAA;AAAA,IAAQK,IAAIb,IAAO;AAAA,IAAGc,IAAId,IAAO;AAAA,IAAGe,GAAGb;AAAAA,IAAQc,QAAQlB;AAAAA,IAAiBG,aAAAA;AAAAA,IAA0BgB,MAAK;AAAA,EAAA,CAAQ,GAE/GT,gBAAAA,EAAAA,cAAA,UAAA;AAAA,IACEK,IAAIb,IAAO;AAAA,IACXc,IAAId,IAAO;AAAA,IACXe,GAAGb;AAAAA,IACHc,QAAQjB;AAAAA,IACRE,aAAAA;AAAAA,IACAiB,iBAAiBf;AAAAA,IACjBG,kBAAAA;AAAAA,IACAW,MAAK;AAAA,IACLE,eAAc;AAAA,IACdR,OAAO;AAAA,MAAES,YAAY;AAAA,IAA8B;AAAA,EACpD,CAAA,CACE;AAET;"}

package/dist/index47.js.map

@@ -1 +1 @@
-{"version":3,"file":"index47.js","sources":["../src/components/Avatar/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\n\nexport type AvatarProps = {\n  size?: number;\n  text: string;\n  textColor?: string;\n  backgroundColor?: string;\n  className?: string;\n  onClick?: () => void;\n  automationId?: string;\n};\n\nconst AVATAR_COLORS = [\n  'var(--color-green-500)',\n  'var(--color-blue-500)',\n  'var(--color-purple-600)',\n  'var(--color-red-400)',\n  'var(--color-yellow-600)'\n];\n\nexport const Avatar: FC<AvatarProps> = ({\n  size = 40,\n  text,\n  textColor = 'var(--color-white)',\n  backgroundColor = '',\n  className = '',\n  onClick,\n  automationId = ''\n}) => {\n  const initials = text\n    ?.split(' ')\n    ?.map((word) => word[0])\n    ?.join('')\n    ?.toUpperCase()\n    ?.slice(0, 2);\n\n  const getBackgroundColor = () => {\n    if (backgroundColor) {\n      return backgroundColor;\n    }\n    return AVATAR_COLORS[Math.floor(Math.random() * AVATAR_COLORS.length)];\n  };\n\n  return (\n    <div\n      className={`\n        se-design-avatar \n        flex items-center justify-center \n        rounded-full font-medium\n        ${onClick ? 'cursor-pointer' : 'cursor-default'}\n        ${className}\n      `}\n      onClick={onClick}\n      data-automation-id={automationId}\n      style={{\n        width: size,\n        height: size,\n        minWidth: 20,\n        minHeight: 20,\n        backgroundColor: getBackgroundColor(),\n        color: textColor,\n        fontSize: `${size * 0.4}px`\n      }}\n    >\n      {initials}\n    </div>\n  );\n};\n"],"names":["React__default","AVATAR_COLORS","Avatar","size","text","textColor","backgroundColor","className","onClick","automationId","initials","split","map","word","join","toUpperCase","slice","getBackgroundColor","Math","floor","random","length","React","createElement","style","width","height","minWidth","minHeight","color","fontSize"],"mappings":"AAYA,OAAAA,OAAA;AAAA,MAAMC,IAAgB,CACpB,0BACA,yBACA,2BACA,wBACA,yBAAyB,GAGdC,IAA0BA,CAAC;AAAA,EACtCC,MAAAA,IAAO;AAAA,EACPC,MAAAA;AAAAA,EACAC,WAAAA,IAAY;AAAA,EACZC,iBAAAA,IAAkB;AAAA,EAClBC,WAAAA,IAAY;AAAA,EACZC,SAAAA;AAAAA,EACAC,cAAAA,IAAe;AACjB,MAAM;AACJ,QAAMC,IAAWN,GACbO,MAAM,GAAG,GACTC,IAAKC,OAASA,EAAK,CAAC,CAAC,GACrBC,KAAK,EAAE,GACPC,eACAC,MAAM,GAAG,CAAC,GAERC,IAAqBA,MACrBX,KAGGL,EAAciB,KAAKC,MAAMD,KAAKE,WAAWnB,EAAcoB,MAAM,CAAC;AAGvE,SACEC,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEhB,WAAW;AAAA;AAAA;AAAA;AAAA,UAIPC,IAAU,mBAAmB,gBAAgB;AAAA,UAC7CD,CAAS;AAAA;AAAA,IAEbC,SAAAA;AAAAA,IACA,sBAAoBC;AAAAA,IACpBe,OAAO;AAAA,MACLC,OAAOtB;AAAAA,MACPuB,QAAQvB;AAAAA,MACRwB,UAAU;AAAA,MACVC,WAAW;AAAA,MACXtB,iBAAiBW,EAAAA;AAAAA,MACjBY,OAAOxB;AAAAA,MACPyB,UAAU,GAAG3B,IAAO,GAAG;AAAA,IAAA;AAAA,EACzB,GAECO,CACE;AAET;"}
+{"version":3,"file":"index47.js","sources":["../src/components/Avatar/index.tsx"],"sourcesContent":["import React, { FC } from 'react';\n\nexport type AvatarProps = {\n  size?: number;\n  text: string;\n  textColor?: string;\n  backgroundColor?: string;\n  className?: string;\n  onClick?: () => void;\n  automationId?: string;\n};\n\nconst AVATAR_COLORS = [\n  'var(--color-green-500)',\n  'var(--color-blue-500)',\n  'var(--color-purple-600)',\n  'var(--color-red-400)',\n  'var(--color-yellow-600)'\n];\n\nexport const Avatar: FC<AvatarProps> = ({\n  size = 40,\n  text,\n  textColor = 'var(--color-white)',\n  backgroundColor = '',\n  className = '',\n  onClick,\n  automationId = ''\n}) => {\n  const initials = text\n    ?.split(' ')\n    ?.map((word) => word[0])\n    ?.join('')\n    ?.toUpperCase()\n    ?.slice(0, 2);\n\n  const getBackgroundColor = () => {\n    if (backgroundColor) {\n      return backgroundColor;\n    }\n    return AVATAR_COLORS[Math.floor(Math.random() * AVATAR_COLORS.length)];\n  };\n\n  return (\n    <div\n      className={`\n        se-design-avatar \n        flex items-center justify-center \n        rounded-full font-medium\n        ${onClick ? 'cursor-pointer' : 'cursor-default'}\n        ${className}\n      `}\n      onClick={onClick}\n      data-automation-id={automationId}\n      style={{\n        width: size,\n        height: size,\n        minWidth: 20,\n        minHeight: 20,\n        backgroundColor: getBackgroundColor(),\n        color: textColor,\n        fontSize: `${size * 0.4}px`\n      }}\n    >\n      {initials}\n    </div>\n  );\n};\n"],"names":["React__default","AVATAR_COLORS","Avatar","size","text","textColor","backgroundColor","className","onClick","automationId","initials","split","map","word","join","toUpperCase","slice","getBackgroundColor","Math","floor","random","length","React","createElement","style","width","height","minWidth","minHeight","color","fontSize"],"mappings":"AAYA,OAAAA,OAAA;AAAA,MAAMC,IAAgB,CACpB,0BACA,yBACA,2BACA,wBACA,yBAAyB,GAGdC,IAA0BA,CAAC;AAAA,EACtCC,MAAAA,IAAO;AAAA,EACPC,MAAAA;AAAAA,EACAC,WAAAA,IAAY;AAAA,EACZC,iBAAAA,IAAkB;AAAA,EAClBC,WAAAA,IAAY;AAAA,EACZC,SAAAA;AAAAA,EACAC,cAAAA,IAAe;AACjB,MAAM;AACJ,QAAMC,IAAWN,GACbO,MAAM,GAAG,GACTC,IAAKC,OAASA,EAAK,CAAC,CAAC,GACrBC,KAAK,EAAE,GACPC,YACAC,GAAAA,MAAM,GAAG,CAAC,GAERC,IAAqBA,MACrBX,KAGGL,EAAciB,KAAKC,MAAMD,KAAKE,WAAWnB,EAAcoB,MAAM,CAAC;AAIrEC,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEhB,WAAW;AAAA;AAAA;AAAA;AAAA,UAIPC,IAAU,mBAAmB,gBAAgB;AAAA,UAC7CD,CAAS;AAAA;AAAA,IAEbC,SAAAA;AAAAA,IACA,sBAAoBC;AAAAA,IACpBe,OAAO;AAAA,MACLC,OAAOtB;AAAAA,MACPuB,QAAQvB;AAAAA,MACRwB,UAAU;AAAA,MACVC,WAAW;AAAA,MACXtB,iBAAiBW,EAAmB;AAAA,MACpCY,OAAOxB;AAAAA,MACPyB,UAAU,GAAG3B,IAAO,GAAG;AAAA,IACzB;AAAA,KAECO,CACE;AAET;"}

package/dist/index48.js

@@ -25,8 +25,8 @@ import { Popover as $ } from "./index18.js";
 /* empty css         */
 /* empty css         */
 /* empty css         */
-import { TabButton as j } from "./index211.js";
-import { useTabsA11y as K } from "./index212.js";
+import { TabButton as j } from "./index214.js";
+import { useTabsA11y as K } from "./index215.js";
 /* empty css         */
 /* empty css         */
 /* empty css         */