@vibe/core 3.86.0 → 3.87.0

package/dist/src/components/Table/TableHeaderCell/TableHeaderCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeaderCell.js","sources":["../../../../../src/components/Table/TableHeaderCell/TableHeaderCell.tsx"],"sourcesContent":["import React, { forwardRef, useState } from \"react\";\nimport cx from \"classnames\";\nimport { type VibeComponentProps } from \"../../../types\";\nimport styles from \"./TableHeaderCell.module.scss\";\nimport { Icon, type SubIcon } from \"@vibe/icon\";\nimport { IconButton } from \"@vibe/icon-button\";\nimport { Info } from \"@vibe/icons\";\nimport { Text } from \"@vibe/typography\";\nimport { Flex } from \"@vibe/layout\";\nimport { getAriaSort, getNextSortState, getSortIcon } from \"../Table/tableHelpers\";\nimport { Tooltip } from \"@vibe/tooltip\";\nimport { getTestId } from \"../../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../../tests/constants\";\nimport { getStyle } from \"../../../helpers/typesciptCssModulesHelper\";\n\nexport interface TableHeaderCellProps extends VibeComponentProps {\n  /**\n   * The title of the column, displayed inside the header cell.\n   */\n  title: string | React.ReactNode;\n  /**\n   * Icon displayed next to the column title.\n   */\n  icon?: SubIcon;\n  /**\n   * Tooltip content for additional information about the column.\n   */\n  infoContent?: string;\n  /**\n   * Current sorting state of the column.\n   */\n  sortState?: \"asc\" | \"desc\" | \"none\";\n  /**\n   * Callback fired when the column header is clicked to change sorting.\n   */\n  onSortClicked?: (direction: \"asc\" | \"desc\" | \"none\") => void;\n  /**\n   * ARIA label for the sort button.\n   */\n  sortButtonAriaLabel?: string;\n  /**\n   * If true, the header cell remains visible while scrolling horizontally.\n   */\n  sticky?: boolean;\n}\n\nconst TableHeaderCell = forwardRef(\n  (\n    {\n      id,\n      className,\n      \"data-testid\": dataTestId,\n      title,\n      onSortClicked,\n      infoContent,\n      icon,\n      sortState = \"none\",\n      sortButtonAriaLabel = \"Sort\",\n      sticky\n    }: TableHeaderCellProps,\n    ref: React.ForwardedRef<HTMLDivElement>\n  ) => {\n    const [isHovered, setIsHovered] = useState<boolean>(false);\n    const ariaSort = getAriaSort(sortState);\n    const isSortActive = onSortClicked && ariaSort !== \"none\";\n    const shouldShowSortIcon = ariaSort !== \"none\" || isHovered;\n\n    return (\n      <div\n        ref={ref}\n        id={id}\n        className={cx(\n          styles.tableHeaderCell,\n          { [styles.sortActive]: isSortActive, [styles.sticky]: sticky },\n          className\n        )}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.TABLE_HEADER_CELL, id)}\n        role=\"columnheader\"\n        onMouseOver={() => setIsHovered(true)}\n        onMouseLeave={() => setIsHovered(false)}\n        onFocus={() => setIsHovered(true)}\n        onBlur={() => setIsHovered(false)}\n        aria-sort={onSortClicked ? ariaSort : undefined}\n        tabIndex={onSortClicked ? 0 : undefined}\n      >\n        <Flex direction=\"row\" align=\"center\" className={styles.tableHeaderCellContent} gap=\"xs\">\n          {icon && <Icon icon={icon} className={styles.icon} />}\n          {typeof title === \"string\" ? (\n            <Text type=\"text2\" weight=\"medium\" color=\"secondary\">\n              {title}\n            </Text>\n          ) : (\n            title\n          )}\n          {infoContent && (\n            <Tooltip content={infoContent} referenceWrapperClassName={styles.infoTooltip}>\n              <Icon icon={Info} label={infoContent} />\n            </Tooltip>\n          )}\n        </Flex>\n        {onSortClicked && (\n          <Flex direction=\"row\" align=\"center\" className={styles.tableHeaderCellSort}>\n            <IconButton\n              icon={getSortIcon(sortState)}\n              kind=\"tertiary\"\n              size=\"xs\"\n              ariaLabel={sortButtonAriaLabel}\n              aria-hidden={!shouldShowSortIcon}\n              className={cx(styles.sort, getStyle(styles, sortState), {\n                [styles.show]: shouldShowSortIcon\n              })}\n              onClick={() => onSortClicked(getNextSortState(sortState))}\n            />\n          </Flex>\n        )}\n      </div>\n    );\n  }\n);\n\nexport default TableHeaderCell;\n"],"names":["TableHeaderCell","forwardRef","_ref","ref","id","className","dataTestId","title","onSortClicked","infoContent","icon","_ref$sortState","sortState","_ref$sortButtonAriaLa","sortButtonAriaLabel","sticky","_useState","useState","_useState2","_slicedToArray","isHovered","setIsHovered","ariaSort","getAriaSort","shouldShowSortIcon","React","createElement","cx","styles","tableHeaderCell","_defineProperty","sortActive","getTestId","ComponentDefaultTestId","TABLE_HEADER_CELL","role","onMouseOver","onMouseLeave","onFocus","onBlur","undefined","tabIndex","Flex","direction","align","tableHeaderCellContent","gap","Icon","Text","type","weight","color","Tooltip","content","referenceWrapperClassName","infoTooltip","Info","label","tableHeaderCellSort","IconButton","getSortIcon","kind","size","ariaLabel","sort","getStyle","show","onClick","getNextSortState"],"mappings":"+4BA8CMA,IAAAA,EAAkBC,GACtB,SAAAC,EAaEC,GACE,IAZAC,EAAEF,EAAFE,GACAC,EAASH,EAATG,UACeC,EAAUJ,EAAzB,eACAK,EAAKL,EAALK,MACAC,EAAaN,EAAbM,cACAC,EAAWP,EAAXO,YACAC,EAAIR,EAAJQ,KAAIC,EAAAT,EACJU,UAAAA,OAAY,IAAHD,EAAG,OAAMA,EAAAE,EAAAX,EAClBY,oBAAAA,OAAsB,IAAHD,EAAG,OAAMA,EAC5BE,EAAMb,EAANa,OAIFC,EAAkCC,GAAkB,GAAMC,EAAAC,EAAAH,EAAA,GAAnDI,EAASF,EAAA,GAAEG,EAAYH,EAAA,GACxBI,EAAWC,EAAYX,GAEvBY,EAAkC,SAAbF,GAAuBF,EAElD,OACEK,EACEC,cAAA,MAAA,CAAAvB,IAAKA,EACLC,GAAIA,EACJC,UAAWsB,EACTC,EAAOC,gBAAeC,EAAAA,EACnBF,CAAAA,EAAAA,EAAOG,WATKvB,GAA8B,SAAbc,GASMM,EAAOb,OAASA,GACtDV,GAEW,cAAAC,GAAc0B,EAAUC,EAAuBC,kBAAmB9B,GAC/E+B,KAAK,eACLC,YAAa,WAAA,OAAMf,GAAa,EAAK,EACrCgB,aAAc,WAAA,OAAMhB,GAAa,EAAM,EACvCiB,QAAS,WAAA,OAAMjB,GAAa,EAAK,EACjCkB,OAAQ,WAAA,OAAMlB,GAAa,EAAM,EACtB,YAAAb,EAAgBc,OAAWkB,EACtCC,SAAUjC,EAAgB,OAAIgC,GAE9Bf,EAAAC,cAACgB,EAAK,CAAAC,UAAU,MAAMC,MAAM,SAASvC,UAAWuB,EAAOiB,uBAAwBC,IAAI,MAChFpC,GAAQe,EAAAC,cAACqB,EAAI,CAACrC,KAAMA,EAAML,UAAWuB,EAAOlB,OAC3B,iBAAVH,EACNkB,EAAAC,cAACsB,EAAI,CAACC,KAAK,QAAQC,OAAO,SAASC,MAAM,aACtC5C,GAGHA,EAEDE,GACCgB,EAACC,cAAA0B,EAAQ,CAAAC,QAAS5C,EAAa6C,0BAA2B1B,EAAO2B,aAC/D9B,EAAAC,cAACqB,EAAI,CAACrC,KAAM8C,EAAMC,MAAOhD,MAI9BD,GACCiB,EAAAC,cAACgB,EAAI,CAACC,UAAU,MAAMC,MAAM,SAASvC,UAAWuB,EAAO8B,qBACrDjC,EAAAC,cAACiC,EACC,CAAAjD,KAAMkD,EAAYhD,GAClBiD,KAAK,WACLC,KAAK,KACLC,UAAWjD,EAAmB,eAChBU,EACdnB,UAAWsB,EAAGC,EAAOoC,KAAMC,EAASrC,EAAQhB,GAAUkB,EACnDF,CAAAA,EAAAA,EAAOsC,KAAO1C,IAEjB2C,QAAS,WAAA,OAAM3D,EAAc4D,EAAiBxD,GAAW,KAMrE"}
+{"version":3,"file":"TableHeaderCell.js","sources":["../../../../../src/components/Table/TableHeaderCell/TableHeaderCell.tsx"],"sourcesContent":["import React, { forwardRef, useState } from \"react\";\nimport cx from \"classnames\";\nimport { type VibeComponentProps } from \"../../../types\";\nimport styles from \"./TableHeaderCell.module.scss\";\nimport { Icon, type SubIcon } from \"@vibe/icon\";\nimport { IconButton } from \"@vibe/icon-button\";\nimport { Info } from \"@vibe/icons\";\nimport { Text } from \"@vibe/typography\";\nimport { Flex } from \"@vibe/layout\";\nimport { getAriaSort, getNextSortState, getSortIcon } from \"../Table/tableHelpers\";\nimport { Tooltip } from \"@vibe/tooltip\";\nimport { getTestId } from \"../../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../../tests/constants\";\nimport { getStyle } from \"../../../helpers/typesciptCssModulesHelper\";\n\nexport interface TableHeaderCellProps extends VibeComponentProps {\n  /**\n   * The title of the column, displayed inside the header cell.\n   */\n  title: string | React.ReactNode;\n  /**\n   * Icon displayed next to the column title.\n   */\n  icon?: SubIcon;\n  /**\n   * Tooltip content for additional information about the column.\n   */\n  infoContent?: string;\n  /**\n   * Current sorting state of the column.\n   */\n  sortState?: \"asc\" | \"desc\" | \"none\";\n  /**\n   * Callback fired when the column header is clicked to change sorting.\n   */\n  onSortClicked?: (direction: \"asc\" | \"desc\" | \"none\") => void;\n  /**\n   * ARIA label for the sort button.\n   */\n  sortButtonAriaLabel?: string;\n  /**\n   * If true, the header cell remains visible while scrolling horizontally.\n   */\n  sticky?: boolean;\n}\n\nconst TableHeaderCell = forwardRef(\n  (\n    {\n      id,\n      className,\n      \"data-testid\": dataTestId,\n      title,\n      onSortClicked,\n      infoContent,\n      icon,\n      sortState = \"none\",\n      sortButtonAriaLabel = \"Sort\",\n      sticky\n    }: TableHeaderCellProps,\n    ref: React.ForwardedRef<HTMLDivElement>\n  ) => {\n    const [isHovered, setIsHovered] = useState<boolean>(false);\n    const ariaSort = getAriaSort(sortState);\n    const isSortActive = onSortClicked && ariaSort !== \"none\";\n    const shouldShowSortIcon = ariaSort !== \"none\" || isHovered;\n\n    return (\n      <div\n        ref={ref}\n        id={id}\n        className={cx(\n          styles.tableHeaderCell,\n          { [styles.sortActive]: isSortActive, [styles.sticky]: sticky },\n          className\n        )}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.TABLE_HEADER_CELL, id)}\n        role=\"columnheader\"\n        onMouseOver={() => setIsHovered(true)}\n        onMouseLeave={() => setIsHovered(false)}\n        onFocus={() => setIsHovered(true)}\n        onBlur={() => setIsHovered(false)}\n        aria-sort={onSortClicked ? ariaSort : undefined}\n        tabIndex={onSortClicked ? 0 : undefined}\n      >\n        <Flex direction=\"row\" align=\"center\" className={styles.tableHeaderCellContent} gap=\"xs\">\n          {icon && <Icon icon={icon} className={styles.icon} />}\n          {typeof title === \"string\" ? (\n            <Text type=\"text2\" weight=\"medium\" color=\"secondary\">\n              {title}\n            </Text>\n          ) : (\n            title\n          )}\n          {infoContent && (\n            <Tooltip content={infoContent} referenceWrapperClassName={styles.infoTooltip}>\n              <Icon icon={Info} iconLabel={infoContent} />\n            </Tooltip>\n          )}\n        </Flex>\n        {onSortClicked && (\n          <Flex direction=\"row\" align=\"center\" className={styles.tableHeaderCellSort}>\n            <IconButton\n              icon={getSortIcon(sortState)}\n              kind=\"tertiary\"\n              size=\"xs\"\n              ariaLabel={sortButtonAriaLabel}\n              aria-hidden={!shouldShowSortIcon}\n              className={cx(styles.sort, getStyle(styles, sortState), {\n                [styles.show]: shouldShowSortIcon\n              })}\n              onClick={() => onSortClicked(getNextSortState(sortState))}\n            />\n          </Flex>\n        )}\n      </div>\n    );\n  }\n);\n\nexport default TableHeaderCell;\n"],"names":["TableHeaderCell","forwardRef","_ref","ref","id","className","dataTestId","title","onSortClicked","infoContent","icon","_ref$sortState","sortState","_ref$sortButtonAriaLa","sortButtonAriaLabel","sticky","_useState","useState","_useState2","_slicedToArray","isHovered","setIsHovered","ariaSort","getAriaSort","shouldShowSortIcon","React","createElement","cx","styles","tableHeaderCell","_defineProperty","sortActive","getTestId","ComponentDefaultTestId","TABLE_HEADER_CELL","role","onMouseOver","onMouseLeave","onFocus","onBlur","undefined","tabIndex","Flex","direction","align","tableHeaderCellContent","gap","Icon","Text","type","weight","color","Tooltip","content","referenceWrapperClassName","infoTooltip","Info","iconLabel","tableHeaderCellSort","IconButton","getSortIcon","kind","size","ariaLabel","sort","getStyle","show","onClick","getNextSortState"],"mappings":"+4BA8CMA,IAAAA,EAAkBC,GACtB,SAAAC,EAaEC,GACE,IAZAC,EAAEF,EAAFE,GACAC,EAASH,EAATG,UACeC,EAAUJ,EAAzB,eACAK,EAAKL,EAALK,MACAC,EAAaN,EAAbM,cACAC,EAAWP,EAAXO,YACAC,EAAIR,EAAJQ,KAAIC,EAAAT,EACJU,UAAAA,OAAY,IAAHD,EAAG,OAAMA,EAAAE,EAAAX,EAClBY,oBAAAA,OAAsB,IAAHD,EAAG,OAAMA,EAC5BE,EAAMb,EAANa,OAIFC,EAAkCC,GAAkB,GAAMC,EAAAC,EAAAH,EAAA,GAAnDI,EAASF,EAAA,GAAEG,EAAYH,EAAA,GACxBI,EAAWC,EAAYX,GAEvBY,EAAkC,SAAbF,GAAuBF,EAElD,OACEK,EACEC,cAAA,MAAA,CAAAvB,IAAKA,EACLC,GAAIA,EACJC,UAAWsB,EACTC,EAAOC,gBAAeC,EAAAA,EACnBF,CAAAA,EAAAA,EAAOG,WATKvB,GAA8B,SAAbc,GASMM,EAAOb,OAASA,GACtDV,GAEW,cAAAC,GAAc0B,EAAUC,EAAuBC,kBAAmB9B,GAC/E+B,KAAK,eACLC,YAAa,WAAA,OAAMf,GAAa,EAAK,EACrCgB,aAAc,WAAA,OAAMhB,GAAa,EAAM,EACvCiB,QAAS,WAAA,OAAMjB,GAAa,EAAK,EACjCkB,OAAQ,WAAA,OAAMlB,GAAa,EAAM,EACtB,YAAAb,EAAgBc,OAAWkB,EACtCC,SAAUjC,EAAgB,OAAIgC,GAE9Bf,EAAAC,cAACgB,EAAK,CAAAC,UAAU,MAAMC,MAAM,SAASvC,UAAWuB,EAAOiB,uBAAwBC,IAAI,MAChFpC,GAAQe,EAAAC,cAACqB,EAAI,CAACrC,KAAMA,EAAML,UAAWuB,EAAOlB,OAC3B,iBAAVH,EACNkB,EAAAC,cAACsB,EAAI,CAACC,KAAK,QAAQC,OAAO,SAASC,MAAM,aACtC5C,GAGHA,EAEDE,GACCgB,EAACC,cAAA0B,EAAQ,CAAAC,QAAS5C,EAAa6C,0BAA2B1B,EAAO2B,aAC/D9B,EAAAC,cAACqB,EAAI,CAACrC,KAAM8C,EAAMC,UAAWhD,MAIlCD,GACCiB,EAAAC,cAACgB,EAAI,CAACC,UAAU,MAAMC,MAAM,SAASvC,UAAWuB,EAAO8B,qBACrDjC,EAAAC,cAACiC,EACC,CAAAjD,KAAMkD,EAAYhD,GAClBiD,KAAK,WACLC,KAAK,KACLC,UAAWjD,EAAmB,eAChBU,EACdnB,UAAWsB,EAAGC,EAAOoC,KAAMC,EAASrC,EAAQhB,GAAUkB,EACnDF,CAAAA,EAAAA,EAAOsC,KAAO1C,IAEjB2C,QAAS,WAAA,OAAM3D,EAAc4D,EAAiBxD,GAAW,KAMrE"}

package/dist/src/components/Table/TableHeaderCell/TableHeaderCell.module.scss.js

@@ -1,2 +1,2 @@
-var e={tableHeaderCell:"tableHeaderCell_34c40f6024","focus-visible":"focus-visible_17d22ae837",sticky:"sticky_d9c46329db",sortActive:"sortActive_5703c82fc7",tableHeaderCellContent:"tableHeaderCellContent_f953057936",icon:"icon_e9a6b1572d",infoTooltip:"infoTooltip_e4cf0cc403",tableHeaderCellSort:"tableHeaderCellSort_09bfc816c9",sort:"sort_688481914f",asc:"asc_71dcf1b266",desc:"desc_886538370c",show:"show_9bca1b974e"};!function(e){const l="s_id-5b3eed132e11_3_85_1";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+l))return;const t=document.createElement("style");t.id=l,n.firstChild?n.insertBefore(t,n.firstChild):n.appendChild(t),t.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[l]=e)}("/* stylelint-disable */\n/* stylelint-enable */\n.tableHeaderCell_34c40f6024 {\n  height: var(--table-row-size);\n  padding: var(--spacing-small);\n  padding-inline-start: var(--spacing-medium);\n  color: var(--secondary-text-color);\n  box-sizing: border-box;\n  text-align: initial;\n  border-bottom: 1px solid var(--layout-border-color);\n  display: flex;\n  justify-content: space-between;\n  background-color: inherit;\n}\n.tableHeaderCell_34c40f6024:focus-visible, .tableHeaderCell_34c40f6024.focus-visible_17d22ae837 {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0 0 0 1px var(--primary-hover-color) inset;\n}\n.tableHeaderCell_34c40f6024:focus:not(.focus-visible_17d22ae837) {\n  outline: none;\n}\n.tableHeaderCell_34c40f6024.sticky_d9c46329db {\n  z-index: 1;\n  position: sticky;\n  left: 0;\n  box-shadow: var(--sticky-cell-box-shadow);\n}\n.tableHeaderCell_34c40f6024.sticky_d9c46329db:hover {\n  background: var(--sticky-cell-hover-background);\n}\n.tableHeaderCell_34c40f6024:hover, .tableHeaderCell_34c40f6024.sortActive_5703c82fc7 {\n  background-color: var(--primary-background-hover-color);\n}\n.tableHeaderCell_34c40f6024 .tableHeaderCellContent_f953057936 {\n  min-width: 0;\n}\n.tableHeaderCell_34c40f6024 .tableHeaderCellContent_f953057936 .icon_e9a6b1572d {\n  min-width: var(--spacing-medium);\n}\n.tableHeaderCell_34c40f6024 .tableHeaderCellContent_f953057936 .infoTooltip_e4cf0cc403 {\n  display: inline-flex;\n}\n.tableHeaderCell_34c40f6024 .tableHeaderCellSort_09bfc816c9 {\n  padding-inline-start: var(--spacing-small);\n}\n.tableHeaderCell_34c40f6024 .tableHeaderCellSort_09bfc816c9 .sort_688481914f {\n  color: var(--icon-color);\n  transition: opacity 0.1s;\n}\n.tableHeaderCell_34c40f6024 .tableHeaderCellSort_09bfc816c9 .sort_688481914f.asc_71dcf1b266, .tableHeaderCell_34c40f6024 .tableHeaderCellSort_09bfc816c9 .sort_688481914f.desc_886538370c {\n  color: var(--primary-text-color);\n}\n.tableHeaderCell_34c40f6024 .tableHeaderCellSort_09bfc816c9 .sort_688481914f:not(.show_9bca1b974e) {\n  opacity: 0;\n  pointer-events: none;\n}");export{e as default};
+var e={tableHeaderCell:"tableHeaderCell_e2fba3dc74","focus-visible":"focus-visible_5db8d7a1e4",sticky:"sticky_395045b330",sortActive:"sortActive_7efc78eeb1",tableHeaderCellContent:"tableHeaderCellContent_cb0f3d333d",icon:"icon_7511800177",infoTooltip:"infoTooltip_ef33c44e24",tableHeaderCellSort:"tableHeaderCellSort_29932de9d0",sort:"sort_1b2b42e1b4",asc:"asc_56e211a2e9",desc:"desc_4ea8881b20",show:"show_c4bcf7fe3f"};!function(e){const l="s_id-5b3eed132e11_3_86_0";if("undefined"!=typeof document){const a=document.head||document.getElementsByTagName("head")[0];if(a.querySelector("#"+l))return;const n=document.createElement("style");n.id=l,a.firstChild?a.insertBefore(n,a.firstChild):a.appendChild(n),n.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[l]=e)}("/* stylelint-disable */\n/* stylelint-enable */\n.tableHeaderCell_e2fba3dc74 {\n  height: var(--table-row-size);\n  padding: var(--spacing-small);\n  padding-inline-start: var(--spacing-medium);\n  color: var(--secondary-text-color);\n  box-sizing: border-box;\n  text-align: initial;\n  border-bottom: 1px solid var(--layout-border-color);\n  display: flex;\n  justify-content: space-between;\n  background-color: inherit;\n}\n.tableHeaderCell_e2fba3dc74:focus-visible, .tableHeaderCell_e2fba3dc74.focus-visible_5db8d7a1e4 {\n  outline: none;\n  z-index: 11;\n  border-radius: 4px;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0 0 0 1px var(--primary-hover-color) inset;\n}\n.tableHeaderCell_e2fba3dc74:focus:not(.focus-visible_5db8d7a1e4) {\n  outline: none;\n}\n.tableHeaderCell_e2fba3dc74.sticky_395045b330 {\n  z-index: 1;\n  position: sticky;\n  left: 0;\n  box-shadow: var(--sticky-cell-box-shadow);\n}\n.tableHeaderCell_e2fba3dc74.sticky_395045b330:hover {\n  background: var(--sticky-cell-hover-background);\n}\n.tableHeaderCell_e2fba3dc74:hover, .tableHeaderCell_e2fba3dc74.sortActive_7efc78eeb1 {\n  background-color: var(--primary-background-hover-color);\n}\n.tableHeaderCell_e2fba3dc74 .tableHeaderCellContent_cb0f3d333d {\n  min-width: 0;\n}\n.tableHeaderCell_e2fba3dc74 .tableHeaderCellContent_cb0f3d333d .icon_7511800177 {\n  min-width: var(--spacing-medium);\n}\n.tableHeaderCell_e2fba3dc74 .tableHeaderCellContent_cb0f3d333d .infoTooltip_ef33c44e24 {\n  display: inline-flex;\n}\n.tableHeaderCell_e2fba3dc74 .tableHeaderCellSort_29932de9d0 {\n  padding-inline-start: var(--spacing-small);\n}\n.tableHeaderCell_e2fba3dc74 .tableHeaderCellSort_29932de9d0 .sort_1b2b42e1b4 {\n  color: var(--icon-color);\n  transition: opacity 0.1s;\n}\n.tableHeaderCell_e2fba3dc74 .tableHeaderCellSort_29932de9d0 .sort_1b2b42e1b4.asc_56e211a2e9, .tableHeaderCell_e2fba3dc74 .tableHeaderCellSort_29932de9d0 .sort_1b2b42e1b4.desc_4ea8881b20 {\n  color: var(--primary-text-color);\n}\n.tableHeaderCell_e2fba3dc74 .tableHeaderCellSort_29932de9d0 .sort_1b2b42e1b4:not(.show_c4bcf7fe3f) {\n  opacity: 0;\n  pointer-events: none;\n}");export{e as default};
 //# sourceMappingURL=TableHeaderCell.module.scss.js.map

package/dist/src/components/Table/TableRow/TableRow.module.scss.js

@@ -1,2 +1,2 @@
-var e={tableRow:"tableRow_1db98901b6"};!function(e){const t="s_id-72a799b963ca_3_85_1";if("undefined"!=typeof document){const l=document.head||document.getElementsByTagName("head")[0];if(l.querySelector("#"+t))return;const r=document.createElement("style");r.id=t,l.firstChild?l.insertBefore(r,l.firstChild):l.appendChild(r),r.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}("/* stylelint-disable selector-class-pattern */\n.tableRow_1db98901b6 {\n  height: var(--table-row-size);\n  display: grid;\n  grid-template-columns: var(--table-grid-template-columns);\n  min-width: 100%;\n  width: fit-content;\n}\n.tableRow_1db98901b6[aria-selected=true] > [role=cell] {\n  background-color: var(--primary-selected-color);\n}\n.tableRow_1db98901b6 > [role=cell] {\n  background-color: var(--primary-background-color);\n}\n.tableRow_1db98901b6:hover > [role=cell] {\n  background: var(--sticky-cell-hover-background);\n}\n.tableRow_1db98901b6:hover[aria-selected=true] > [role=cell] {\n  background: var(--primary-selected-hover-color);\n}");export{e as default};
+var e={tableRow:"tableRow_42b1f38b8b"};!function(e){const t="s_id-72a799b963ca_3_86_0";if("undefined"!=typeof document){const l=document.head||document.getElementsByTagName("head")[0];if(l.querySelector("#"+t))return;const r=document.createElement("style");r.id=t,l.firstChild?l.insertBefore(r,l.firstChild):l.appendChild(r),r.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}("/* stylelint-disable selector-class-pattern */\n.tableRow_42b1f38b8b {\n  height: var(--table-row-size);\n  display: grid;\n  grid-template-columns: var(--table-grid-template-columns);\n  min-width: 100%;\n  width: fit-content;\n}\n.tableRow_42b1f38b8b[aria-selected=true] > [role=cell] {\n  background-color: var(--primary-selected-color);\n}\n.tableRow_42b1f38b8b > [role=cell] {\n  background-color: var(--primary-background-color);\n}\n.tableRow_42b1f38b8b:hover > [role=cell] {\n  background: var(--sticky-cell-hover-background);\n}\n.tableRow_42b1f38b8b:hover[aria-selected=true] > [role=cell] {\n  background: var(--primary-selected-hover-color);\n}");export{e as default};
 //# sourceMappingURL=TableRow.module.scss.js.map

package/dist/src/components/Table/TableRowMenu/TableRowMenu.module.scss.js

@@ -1,2 +1,2 @@
-var e={rowMenuContainer:"rowMenuContainer_7dd47552bd",small:"small_e5ae3e38e7",medium:"medium_9d6da029fa",large:"large_83dba9992e"};!function(e){const n="s_id-3e6ad01a6799_3_85_1";if("undefined"!=typeof document){const d=document.head||document.getElementsByTagName("head")[0];if(d.querySelector("#"+n))return;const a=document.createElement("style");a.id=n,d.firstChild?d.insertBefore(a,d.firstChild):d.appendChild(a),a.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".rowMenuContainer_7dd47552bd {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-inline: var(--spacing-small);\n}\n.rowMenuContainer_7dd47552bd.small_e5ae3e38e7 {\n  padding-block: var(--spacing-xs);\n}\n.rowMenuContainer_7dd47552bd.medium_9d6da029fa {\n  padding-block: var(--spacing-small);\n}\n.rowMenuContainer_7dd47552bd.large_83dba9992e {\n  padding-block: 12px;\n}");export{e as default};
+var e={rowMenuContainer:"rowMenuContainer_5093f19c56",small:"small_7e2bfcaf9e",medium:"medium_9bc78e9068",large:"large_3cce271039"};!function(e){const n="s_id-3e6ad01a6799_3_86_0";if("undefined"!=typeof document){const a=document.head||document.getElementsByTagName("head")[0];if(a.querySelector("#"+n))return;const t=document.createElement("style");t.id=n,a.firstChild?a.insertBefore(t,a.firstChild):a.appendChild(t),t.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".rowMenuContainer_5093f19c56 {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-inline: var(--spacing-small);\n}\n.rowMenuContainer_5093f19c56.small_7e2bfcaf9e {\n  padding-block: var(--spacing-xs);\n}\n.rowMenuContainer_5093f19c56.medium_9bc78e9068 {\n  padding-block: var(--spacing-small);\n}\n.rowMenuContainer_5093f19c56.large_3cce271039 {\n  padding-block: 12px;\n}");export{e as default};
 //# sourceMappingURL=TableRowMenu.module.scss.js.map

package/dist/src/components/Table/TableVirtualizedBody/TableVirtualizedBody.module.scss.js

@@ -1,2 +1,2 @@
-var e={tableBody:"tableBody_da6d4b0a97",tableBodyItems:"tableBodyItems_d5f1eca374",withHeader:"withHeader_81bca7217d"};!function(e){const d="s_id-f3eca674d9e8_3_85_1";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+d))return;const a=document.createElement("style");a.id=d,t.firstChild?t.insertBefore(a,t.firstChild):t.appendChild(a),a.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[d]=e)}("/* stylelint-disable */\n/* stylelint-enable */\n.tableBody_da6d4b0a97 {\n  height: calc(100% - var(--table-row-size));\n}\n.tableBody_da6d4b0a97 .tableBodyItems_d5f1eca374::-webkit-scrollbar {\n  width: 6px;\n  height: 6px;\n}\n.tableBody_da6d4b0a97 .tableBodyItems_d5f1eca374::-webkit-scrollbar-thumb {\n  background-color: var(--ui-border-color);\n  border-radius: 4px;\n}\n.tableBody_da6d4b0a97.withHeader_81bca7217d {\n  height: 100%;\n  overflow: hidden;\n}");export{e as default};
+var e={tableBody:"tableBody_0757cfb596",tableBodyItems:"tableBodyItems_06f8c1479d",withHeader:"withHeader_e934efe8c9"};!function(e){const t="s_id-f3eca674d9e8_3_86_0";if("undefined"!=typeof document){const d=document.head||document.getElementsByTagName("head")[0];if(d.querySelector("#"+t))return;const l=document.createElement("style");l.id=t,d.firstChild?d.insertBefore(l,d.firstChild):d.appendChild(l),l.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}("/* stylelint-disable */\n/* stylelint-enable */\n.tableBody_0757cfb596 {\n  height: calc(100% - var(--table-row-size));\n}\n.tableBody_0757cfb596 .tableBodyItems_06f8c1479d::-webkit-scrollbar {\n  width: 6px;\n  height: 6px;\n}\n.tableBody_0757cfb596 .tableBodyItems_06f8c1479d::-webkit-scrollbar-thumb {\n  background-color: var(--ui-border-color);\n  border-radius: 4px;\n}\n.tableBody_0757cfb596.withHeader_e934efe8c9 {\n  height: 100%;\n  overflow: hidden;\n}");export{e as default};
 //# sourceMappingURL=TableVirtualizedBody.module.scss.js.map

package/dist/src/components/Table/context/TableContext/TableContext.js

@@ -1,2 +1,2 @@
-import r,{useRef as e,useCallback as t,useMemo as n,useContext as o,createContext as l}from"react";var u=l(void 0),c=function(o){var l=o.value,c=o.children,i=l.setIsScrolled,a=e(null),f=e(null),d=e(0),s=t((function(r,e){if(r!==d.current){"body"===e&&a.current&&(a.current.scrollLeft=r),"head"===e&&f.current&&(f.current.scrollLeft=r);var t=r>0;i((function(r){return r!==t?t:r})),d.current=r}}),[i]),v=t((function(r){s(r.target.scrollLeft,"head")}),[s]),b=t((function(r){s(r.target.scrollLeft,"body")}),[s]),h=n((function(){return Object.assign(Object.assign({},l),{headRef:a,onHeadScroll:v,virtualizedListRef:f,onVirtualizedListScroll:b})}),[l,v,b]);return r.createElement(u.Provider,{value:h},c)},i=function(){var r=o(u);if(void 0===r)throw Error("useTable must be used within a TableProvider");return r};export{c as TableProvider,i as useTable};
+import r,{useContext as e,createContext as t,useRef as n,useCallback as o,useMemo as l}from"react";var u=t(void 0),c=function(e){var t=e.value,c=e.children,i=t.setIsScrolled,a=n(null),f=n(null),d=n(0),s=o((function(r,e){if(r!==d.current){"body"===e&&a.current&&(a.current.scrollLeft=r),"head"===e&&f.current&&(f.current.scrollLeft=r);var t=r>0;i((function(r){return r!==t?t:r})),d.current=r}}),[i]),v=o((function(r){s(r.target.scrollLeft,"head")}),[s]),b=o((function(r){s(r.target.scrollLeft,"body")}),[s]),h=l((function(){return Object.assign(Object.assign({},t),{headRef:a,onHeadScroll:v,virtualizedListRef:f,onVirtualizedListScroll:b})}),[t,v,b]);return r.createElement(u.Provider,{value:h},c)},i=function(){var r=e(u);if(void 0===r)throw Error("useTable must be used within a TableProvider");return r};export{c as TableProvider,i as useTable};
 //# sourceMappingURL=TableContext.js.map

package/dist/src/components/Table/context/TableRowMenuContext/TableRowMenuContext.js

@@ -1,2 +1,2 @@
-import{slicedToArray as e}from"../../../../../_virtual/_rollupPluginBabelHelpers.js";import n,{useState as o,useRef as r,useCallback as t,useMemo as u,useContext as i,createContext as l}from"react";var v=l(void 0),c=function(i){var l=i.value,c=i.children,a=l.tableRootRef,d=l.hoveredRowRef,s=l.isMenuOpen,R=l.resetHoveredRow,f=l.setHoveredRowRef,w=l.setIsMenuOpen,M=o(0),p=e(M,2),b=p[0],m=p[1],h=r(!1),g=t((function(e){if(!s){f(e);var n=a.current.getBoundingClientRect().top,o=e.current.getBoundingClientRect().top;m(o-n)}}),[s,f,a]),H=t((function(){s||h.current||f(null)}),[s,f]),T=t((function(){h.current=!0}),[]),B=t((function(){h.current=!1,s||(null==d?void 0:d.current)||f(null)}),[s,d,f]),O=t((function(){w(!0)}),[w]),P=t((function(){w(!1)}),[w]),C=u((function(){var e;return{hoveredRowId:null===(e=null==d?void 0:d.current)||void 0===e?void 0:e.id,resetHoveredRow:R,menuButtonPosition:b,onMouseOverRow:g,onMouseLeaveRow:H,onMouseOverRowMenu:T,onMouseLeaveRowMenu:B,setTableMenuShown:O,setTableMenuHidden:P}}),[d,R,b,H,B,g,T,O,P]);return n.createElement(v.Provider,{value:C},c)},a=function(){var e=i(v);if(!e)throw Error("useTableRowMenuContext must be used within a TableRowMenuProvider");return e};export{c as TableRowMenuProvider,a as useTableRowMenu};
+import{slicedToArray as e}from"../../../../../_virtual/_rollupPluginBabelHelpers.js";import n,{useContext as o,createContext as r,useState as t,useRef as u,useCallback as i,useMemo as l}from"react";var v=r(void 0),c=function(o){var r=o.value,c=o.children,a=r.tableRootRef,d=r.hoveredRowRef,s=r.isMenuOpen,R=r.resetHoveredRow,f=r.setHoveredRowRef,w=r.setIsMenuOpen,M=t(0),p=e(M,2),b=p[0],m=p[1],h=u(!1),g=i((function(e){if(!s){f(e);var n=a.current.getBoundingClientRect().top,o=e.current.getBoundingClientRect().top;m(o-n)}}),[s,f,a]),H=i((function(){s||h.current||f(null)}),[s,f]),T=i((function(){h.current=!0}),[]),B=i((function(){h.current=!1,s||(null==d?void 0:d.current)||f(null)}),[s,d,f]),O=i((function(){w(!0)}),[w]),P=i((function(){w(!1)}),[w]),C=l((function(){var e;return{hoveredRowId:null===(e=null==d?void 0:d.current)||void 0===e?void 0:e.id,resetHoveredRow:R,menuButtonPosition:b,onMouseOverRow:g,onMouseLeaveRow:H,onMouseOverRowMenu:T,onMouseLeaveRowMenu:B,setTableMenuShown:O,setTableMenuHidden:P}}),[d,R,b,H,B,g,T,O,P]);return n.createElement(v.Provider,{value:C},c)},a=function(){var e=o(v);if(!e)throw Error("useTableRowMenuContext must be used within a TableRowMenuProvider");return e};export{c as TableRowMenuProvider,a as useTableRowMenu};
 //# sourceMappingURL=TableRowMenuContext.js.map

package/dist/src/components/Tabs/Tab/Tab.js

@@ -1,2 +1,2 @@
-import{defineProperty as e,toConsumableArray as t}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import o from"classnames";import s,{forwardRef as r,useRef as i}from"react";import{noop as a}from"es-toolkit";import n from"../../../hooks/useMergeRef.js";import{getStyle as l}from"../../../helpers/typesciptCssModulesHelper.js";import{getTestId as c,ComponentDefaultTestId as d}from"../../../tests/testIds.js";import m from"./Tab.module.scss.js";import{ComponentVibeId as p}from"../../../tests/constants.js";import{keyCodes as f}from"../../../constants/keyCodes.js";import"../../../constants/sizes.js";import u from"../../../../components/tooltip/dist/Tooltip/Tooltip.js";import v from"../../../../components/icon/dist/Icon/Icon.js";var b=r((function(r,b){var y=r.className,j=r.tabInnerClassName,C=r.id,I=r.value,k=void 0===I?0:I,E=r.disabled,T=void 0!==E&&E,h=r.active,N=void 0!==h&&h,A=r.focus,g=void 0!==A&&A,P=r.stretchedUnderline,x=void 0!==P&&P,B=r.onClick,H=void 0===B?a:B,S=r.tooltipProps,z=void 0===S?{}:S,D=r.icon,F=r.iconType,M=r.iconSide,R=void 0===M?"left":M,U=r.children,_=r["data-testid"],w=r.tabIndex,K=r.ariaControls,O=i(null),V=n(b,O);return s.createElement(u,Object.assign({},z,{content:z.content}),s.createElement("li",{ref:V,key:C,className:o(m.tabWrapper,y,e(e(e(e({},m.active,N),m.disabled,T),m.tabFocusVisibleInset,g),m.stretchedUnderline,x)),id:C,role:"tab","aria-selected":N,"aria-disabled":T,"aria-controls":K||void 0,tabIndex:w,"data-testid":_||c(d.TAB,C),"data-vibe":p.TAB,onClick:function(){return!T&&H(k)},onKeyDown:function(e){e.key!==f.ENTER&&e.key!==f.SPACE||(e.preventDefault(),!T&&H(k))}},s.createElement("div",{className:o(m.tabInner,j)},function(){if(!D)return U;var e=s.createElement(v,{ariaHidden:!0,type:F,icon:D,className:o(m.tabIcon,l(m,R)),size:18,ignoreFocusStyle:!0}),r=s.Children.toArray(U);return"left"===R?[e].concat(t(r)):[].concat(t(r),[e])}())))}));export{b as default};
+import{defineProperty as e,toConsumableArray as t}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import o from"classnames";import i,{forwardRef as r,useRef as s}from"react";import{noop as n}from"es-toolkit";import a from"../../../hooks/useMergeRef.js";import{getStyle as c}from"../../../helpers/typesciptCssModulesHelper.js";import{getTestId as l,ComponentDefaultTestId as d}from"../../../tests/testIds.js";import m from"./Tab.module.scss.js";import{ComponentVibeId as p}from"../../../tests/constants.js";import{keyCodes as f}from"../../../constants/keyCodes.js";import"../../../constants/sizes.js";import u from"../../../../components/tooltip/dist/Tooltip/Tooltip.js";import v from"../../../../components/icon/dist/Icon/Icon.js";var b=r((function(r,b){var y=r.className,j=r.tabInnerClassName,C=r.id,I=r.value,k=void 0===I?0:I,T=r.disabled,E=void 0!==T&&T,h=r.active,N=void 0!==h&&h,A=r.focus,g=void 0!==A&&A,P=r.stretchedUnderline,S=void 0!==P&&P,x=r.onClick,B=void 0===x?n:x,H=r.tooltipProps,z=void 0===H?{}:H,D=r.icon,F=r.iconType,M=r.iconSide,R=void 0===M?"left":M,U=r.children,_=r["data-testid"],w=r.tabIndex,K=r.ariaControls,O=s(null),V=a(b,O);return i.createElement(u,Object.assign({},z,{content:z.content}),i.createElement("li",{ref:V,key:C,className:o(m.tabWrapper,y,e(e(e(e({},m.active,N),m.disabled,E),m.tabFocusVisibleInset,g),m.stretchedUnderline,S)),id:C,role:"tab","aria-selected":N,"aria-disabled":E,"aria-controls":K||void 0,tabIndex:w,"data-testid":_||l(d.TAB,C),"data-vibe":p.TAB,onClick:function(){return!E&&B(k)},onKeyDown:function(e){e.key!==f.ENTER&&e.key!==f.SPACE||(e.preventDefault(),!E&&B(k))}},i.createElement("div",{className:o(m.tabInner,j)},function(){if(!D)return U;var e=i.createElement(v,{ariaHidden:!0,iconType:F,icon:D,className:o(m.tabIcon,c(m,R)),iconSize:18,ignoreFocusStyle:!0}),r=i.Children.toArray(U);return"left"===R?[e].concat(t(r)):[].concat(t(r),[e])}())))}));export{b as default};
 //# sourceMappingURL=Tab.js.map

package/dist/src/components/Tabs/Tab/Tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","sources":["../../../../../src/components/Tabs/Tab/Tab.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { type FC, forwardRef, type ReactElement, useRef } from \"react\";\nimport { noop as NOOP } from \"es-toolkit\";\nimport useMergeRef from \"../../../hooks/useMergeRef\";\nimport { getStyle } from \"../../../helpers/typesciptCssModulesHelper\";\nimport { Icon, type IconType, type SubIcon } from \"@vibe/icon\";\nimport type VibeComponentProps from \"../../../types/VibeComponentProps\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../tests/test-ids-utils\";\nimport styles from \"./Tab.module.scss\";\nimport { Tooltip, type TooltipProps } from \"@vibe/tooltip\";\nimport { ComponentVibeId } from \"../../../tests/constants\";\nimport { keyCodes } from \"../../../constants\";\n\nexport interface TabProps extends VibeComponentProps {\n  /**\n   * Class name applied to the inner tab content.\n   */\n  tabInnerClassName?: string;\n  /**\n   * The index value of the tab.\n   */\n  value?: number;\n  /**\n   * If true, disables the tab.\n   */\n  disabled?: boolean;\n  /**\n   * If true, marks the tab as active.\n   */\n  active?: boolean;\n  /**\n   * If true, applies focus styles to the tab.\n   */\n  focus?: boolean;\n  /**\n   * If true, hides the individual tab border when using stretched underline.\n   */\n  stretchedUnderline?: boolean;\n  /**\n   * The icon displayed in the tab.\n   */\n  icon?: SubIcon;\n  /**\n   * The type of icon.\n   */\n  iconType?: IconType;\n  /**\n   * The position of the icon relative to the text.\n   */\n  iconSide?: string;\n  /**\n   * Callback fired when the tab is clicked.\n   */\n  onClick?: (value: number) => void;\n  /**\n   * Props passed to the tab's tooltip.\n   */\n  tooltipProps?: Partial<TooltipProps>;\n  /**\n   * The content displayed inside the tab.\n   */\n  children?: string | ReactElement | ReactElement[];\n  /**\n   * Tab index for focus management.\n   */\n  tabIndex?: number;\n  /**\n   * The id of the associated TabPanel for aria-controls attribute.\n   */\n  ariaControls?: string;\n}\n\nconst Tab: FC<TabProps> = forwardRef(\n  (\n    {\n      className,\n      tabInnerClassName,\n      id,\n      value = 0,\n      disabled = false,\n      active = false,\n      focus = false,\n      stretchedUnderline = false,\n      onClick = NOOP,\n      tooltipProps = {} as TooltipProps,\n      icon,\n      iconType,\n      iconSide = \"left\",\n      children,\n      \"data-testid\": dataTestId,\n      tabIndex,\n      ariaControls\n    }: TabProps,\n    ref\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    function renderIconAndChildren() {\n      if (!icon) return children;\n\n      const iconElement = (\n        <Icon\n          ariaHidden={true}\n          type={iconType}\n          icon={icon}\n          className={cx(styles.tabIcon, getStyle(styles, iconSide))}\n          size={18}\n          ignoreFocusStyle\n        />\n      );\n\n      const childrenArray = React.Children.toArray(children);\n\n      if (iconSide === \"left\") {\n        return [iconElement, ...childrenArray];\n      }\n\n      return [...childrenArray, iconElement];\n    }\n\n    function handleKeyDown(event: React.KeyboardEvent) {\n      if (event.key === keyCodes.ENTER || event.key === keyCodes.SPACE) {\n        event.preventDefault();\n        !disabled && onClick(value);\n      }\n    }\n\n    return (\n      <Tooltip {...tooltipProps} content={tooltipProps.content}>\n        <li\n          ref={mergedRef}\n          key={id}\n          className={cx(styles.tabWrapper, className, {\n            [styles.active]: active,\n            [styles.disabled]: disabled,\n            [styles.tabFocusVisibleInset]: focus,\n            [styles.stretchedUnderline]: stretchedUnderline\n          })}\n          id={id}\n          role=\"tab\"\n          aria-selected={active}\n          aria-disabled={disabled}\n          aria-controls={ariaControls || undefined}\n          tabIndex={tabIndex}\n          data-testid={dataTestId || getTestId(ComponentDefaultTestId.TAB, id)}\n          data-vibe={ComponentVibeId.TAB}\n          onClick={() => !disabled && onClick(value)}\n          onKeyDown={handleKeyDown}\n        >\n          <div className={cx(styles.tabInner, tabInnerClassName)}>{renderIconAndChildren()}</div>\n        </li>\n      </Tooltip>\n    );\n  }\n);\n\nexport default Tab;\n"],"names":["Tab","forwardRef","_ref","ref","className","tabInnerClassName","id","_ref$value","value","_ref$disabled","disabled","_ref$active","active","_ref$focus","focus","_ref$stretchedUnderli","stretchedUnderline","_ref$onClick","onClick","NOOP","_ref$tooltipProps","tooltipProps","icon","iconType","_ref$iconSide","iconSide","children","dataTestId","tabIndex","ariaControls","componentRef","useRef","mergedRef","useMergeRef","React","createElement","Tooltip","Object","assign","content","key","cx","styles","tabWrapper","_defineProperty","tabFocusVisibleInset","role","undefined","getTestId","ComponentDefaultTestId","TAB","ComponentVibeId","onKeyDown","event","keyCodes","ENTER","SPACE","preventDefault","tabInner","iconElement","Icon","ariaHidden","type","tabIcon","getStyle","size","ignoreFocusStyle","childrenArray","Children","toArray","concat","_toConsumableArray","renderIconAndChildren"],"mappings":"muBAwEMA,IAAAA,EAAoBC,GACxB,SAAAC,EAoBEC,GACE,IAnBAC,EAASF,EAATE,UACAC,EAAiBH,EAAjBG,kBACAC,EAAEJ,EAAFI,GAAEC,EAAAL,EACFM,MAAAA,OAAQ,IAAHD,EAAG,EAACA,EAAAE,EAAAP,EACTQ,SAAAA,OAAW,IAAHD,GAAQA,EAAAE,EAAAT,EAChBU,OAAAA,OAAS,IAAHD,GAAQA,EAAAE,EAAAX,EACdY,MAAAA,OAAQ,IAAHD,GAAQA,EAAAE,EAAAb,EACbc,mBAAAA,OAAqB,IAAHD,GAAQA,EAAAE,EAAAf,EAC1BgB,QAAAA,OAAUC,IAAHF,EAAGE,EAAIF,EAAAG,EAAAlB,EACdmB,aAAAA,OAAY,IAAAD,EAAG,CAAkB,EAAAA,EACjCE,EAAIpB,EAAJoB,KACAC,EAAQrB,EAARqB,SAAQC,EAAAtB,EACRuB,SAAAA,OAAW,IAAHD,EAAG,OAAMA,EACjBE,EAAQxB,EAARwB,SACeC,EAAUzB,EAAzB,eACA0B,EAAQ1B,EAAR0B,SACAC,EAAY3B,EAAZ2B,aAIIC,EAAeC,EAAO,MACtBC,EAAYC,EAAY9B,EAAK2B,GAgCnC,OACEI,EAACC,cAAAC,EAAYC,OAAAC,OAAA,CAAA,EAAAjB,GAAckB,QAASlB,EAAakB,UAC/CL,EAAAC,cAAA,KAAA,CACEhC,IAAK6B,EACLQ,IAAKlC,EACLF,UAAWqC,EAAGC,EAAOC,WAAYvC,EAASwC,EAAAA,EAAAA,EAAAA,EAAA,CAAA,EACvCF,EAAO9B,OAASA,GAChB8B,EAAOhC,SAAWA,GAClBgC,EAAOG,qBAAuB/B,GAC9B4B,EAAO1B,mBAAqBA,IAE/BV,GAAIA,EACJwC,KAAK,MAAK,gBACKlC,EAAM,gBACNF,EACA,gBAAAmB,QAAgBkB,EAC/BnB,SAAUA,EAAQ,cACLD,GAAcqB,EAAUC,EAAuBC,IAAK5C,GAAG,YACzD6C,EAAgBD,IAC3BhC,QAAS,WAAA,OAAOR,GAAYQ,EAAQV,EAAM,EAC1C4C,UA3BN,SAAuBC,GACjBA,EAAMb,MAAQc,EAASC,OAASF,EAAMb,MAAQc,EAASE,QACzDH,EAAMI,kBACL/C,GAAYQ,EAAQV,GAEzB,GAwBM0B,EAAAC,cAAA,MAAA,CAAK/B,UAAWqC,EAAGC,EAAOgB,SAAUrD,IApD1C,WACE,IAAKiB,EAAM,OAAOI,EAElB,IAAMiC,EACJzB,gBAAC0B,EAAI,CACHC,YAAY,EACZC,KAAMvC,EACND,KAAMA,EACNlB,UAAWqC,EAAGC,EAAOqB,QAASC,EAAStB,EAAQjB,IAC/CwC,KAAM,GACNC,kBAAgB,IAIdC,EAAgBjC,EAAMkC,SAASC,QAAQ3C,GAE7C,MAAiB,SAAbD,EACF,CAAQkC,GAAWW,OAAAC,EAAKJ,IAG1B,GAAAG,OAAAC,EAAWJ,IAAeR,GAC5B,CA+B+Da,KAIjE"}
+{"version":3,"file":"Tab.js","sources":["../../../../../src/components/Tabs/Tab/Tab.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { type FC, forwardRef, type ReactElement, useRef } from \"react\";\nimport { noop as NOOP } from \"es-toolkit\";\nimport useMergeRef from \"../../../hooks/useMergeRef\";\nimport { getStyle } from \"../../../helpers/typesciptCssModulesHelper\";\nimport { Icon, type IconType, type SubIcon } from \"@vibe/icon\";\nimport type VibeComponentProps from \"../../../types/VibeComponentProps\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../tests/test-ids-utils\";\nimport styles from \"./Tab.module.scss\";\nimport { Tooltip, type TooltipProps } from \"@vibe/tooltip\";\nimport { ComponentVibeId } from \"../../../tests/constants\";\nimport { keyCodes } from \"../../../constants\";\n\nexport interface TabProps extends VibeComponentProps {\n  /**\n   * Class name applied to the inner tab content.\n   */\n  tabInnerClassName?: string;\n  /**\n   * The index value of the tab.\n   */\n  value?: number;\n  /**\n   * If true, disables the tab.\n   */\n  disabled?: boolean;\n  /**\n   * If true, marks the tab as active.\n   */\n  active?: boolean;\n  /**\n   * If true, applies focus styles to the tab.\n   */\n  focus?: boolean;\n  /**\n   * If true, hides the individual tab border when using stretched underline.\n   */\n  stretchedUnderline?: boolean;\n  /**\n   * The icon displayed in the tab.\n   */\n  icon?: SubIcon;\n  /**\n   * The type of icon.\n   */\n  iconType?: IconType;\n  /**\n   * The position of the icon relative to the text.\n   */\n  iconSide?: string;\n  /**\n   * Callback fired when the tab is clicked.\n   */\n  onClick?: (value: number) => void;\n  /**\n   * Props passed to the tab's tooltip.\n   */\n  tooltipProps?: Partial<TooltipProps>;\n  /**\n   * The content displayed inside the tab.\n   */\n  children?: string | ReactElement | ReactElement[];\n  /**\n   * Tab index for focus management.\n   */\n  tabIndex?: number;\n  /**\n   * The id of the associated TabPanel for aria-controls attribute.\n   */\n  ariaControls?: string;\n}\n\nconst Tab: FC<TabProps> = forwardRef(\n  (\n    {\n      className,\n      tabInnerClassName,\n      id,\n      value = 0,\n      disabled = false,\n      active = false,\n      focus = false,\n      stretchedUnderline = false,\n      onClick = NOOP,\n      tooltipProps = {} as TooltipProps,\n      icon,\n      iconType,\n      iconSide = \"left\",\n      children,\n      \"data-testid\": dataTestId,\n      tabIndex,\n      ariaControls\n    }: TabProps,\n    ref\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n\n    function renderIconAndChildren() {\n      if (!icon) return children;\n\n      const iconElement = (\n        <Icon\n          ariaHidden={true}\n          iconType={iconType}\n          icon={icon}\n          className={cx(styles.tabIcon, getStyle(styles, iconSide))}\n          iconSize={18}\n          ignoreFocusStyle\n        />\n      );\n\n      const childrenArray = React.Children.toArray(children);\n\n      if (iconSide === \"left\") {\n        return [iconElement, ...childrenArray];\n      }\n\n      return [...childrenArray, iconElement];\n    }\n\n    function handleKeyDown(event: React.KeyboardEvent) {\n      if (event.key === keyCodes.ENTER || event.key === keyCodes.SPACE) {\n        event.preventDefault();\n        !disabled && onClick(value);\n      }\n    }\n\n    return (\n      <Tooltip {...tooltipProps} content={tooltipProps.content}>\n        <li\n          ref={mergedRef}\n          key={id}\n          className={cx(styles.tabWrapper, className, {\n            [styles.active]: active,\n            [styles.disabled]: disabled,\n            [styles.tabFocusVisibleInset]: focus,\n            [styles.stretchedUnderline]: stretchedUnderline\n          })}\n          id={id}\n          role=\"tab\"\n          aria-selected={active}\n          aria-disabled={disabled}\n          aria-controls={ariaControls || undefined}\n          tabIndex={tabIndex}\n          data-testid={dataTestId || getTestId(ComponentDefaultTestId.TAB, id)}\n          data-vibe={ComponentVibeId.TAB}\n          onClick={() => !disabled && onClick(value)}\n          onKeyDown={handleKeyDown}\n        >\n          <div className={cx(styles.tabInner, tabInnerClassName)}>{renderIconAndChildren()}</div>\n        </li>\n      </Tooltip>\n    );\n  }\n);\n\nexport default Tab;\n"],"names":["Tab","forwardRef","_ref","ref","className","tabInnerClassName","id","_ref$value","value","_ref$disabled","disabled","_ref$active","active","_ref$focus","focus","_ref$stretchedUnderli","stretchedUnderline","_ref$onClick","onClick","NOOP","_ref$tooltipProps","tooltipProps","icon","iconType","_ref$iconSide","iconSide","children","dataTestId","tabIndex","ariaControls","componentRef","useRef","mergedRef","useMergeRef","React","createElement","Tooltip","Object","assign","content","key","cx","styles","tabWrapper","_defineProperty","tabFocusVisibleInset","role","undefined","getTestId","ComponentDefaultTestId","TAB","ComponentVibeId","onKeyDown","event","keyCodes","ENTER","SPACE","preventDefault","tabInner","iconElement","Icon","ariaHidden","tabIcon","getStyle","iconSize","ignoreFocusStyle","childrenArray","Children","toArray","concat","_toConsumableArray","renderIconAndChildren"],"mappings":"muBAwEMA,IAAAA,EAAoBC,GACxB,SAAAC,EAoBEC,GACE,IAnBAC,EAASF,EAATE,UACAC,EAAiBH,EAAjBG,kBACAC,EAAEJ,EAAFI,GAAEC,EAAAL,EACFM,MAAAA,OAAQ,IAAHD,EAAG,EAACA,EAAAE,EAAAP,EACTQ,SAAAA,OAAW,IAAHD,GAAQA,EAAAE,EAAAT,EAChBU,OAAAA,OAAS,IAAHD,GAAQA,EAAAE,EAAAX,EACdY,MAAAA,OAAQ,IAAHD,GAAQA,EAAAE,EAAAb,EACbc,mBAAAA,OAAqB,IAAHD,GAAQA,EAAAE,EAAAf,EAC1BgB,QAAAA,OAAUC,IAAHF,EAAGE,EAAIF,EAAAG,EAAAlB,EACdmB,aAAAA,OAAY,IAAAD,EAAG,CAAkB,EAAAA,EACjCE,EAAIpB,EAAJoB,KACAC,EAAQrB,EAARqB,SAAQC,EAAAtB,EACRuB,SAAAA,OAAW,IAAHD,EAAG,OAAMA,EACjBE,EAAQxB,EAARwB,SACeC,EAAUzB,EAAzB,eACA0B,EAAQ1B,EAAR0B,SACAC,EAAY3B,EAAZ2B,aAIIC,EAAeC,EAAO,MACtBC,EAAYC,EAAY9B,EAAK2B,GAgCnC,OACEI,EAACC,cAAAC,EAAYC,OAAAC,OAAA,CAAA,EAAAjB,GAAckB,QAASlB,EAAakB,UAC/CL,EAAAC,cAAA,KAAA,CACEhC,IAAK6B,EACLQ,IAAKlC,EACLF,UAAWqC,EAAGC,EAAOC,WAAYvC,EAASwC,EAAAA,EAAAA,EAAAA,EAAA,CAAA,EACvCF,EAAO9B,OAASA,GAChB8B,EAAOhC,SAAWA,GAClBgC,EAAOG,qBAAuB/B,GAC9B4B,EAAO1B,mBAAqBA,IAE/BV,GAAIA,EACJwC,KAAK,MAAK,gBACKlC,EAAM,gBACNF,EACA,gBAAAmB,QAAgBkB,EAC/BnB,SAAUA,EAAQ,cACLD,GAAcqB,EAAUC,EAAuBC,IAAK5C,GAAG,YACzD6C,EAAgBD,IAC3BhC,QAAS,WAAA,OAAOR,GAAYQ,EAAQV,EAAM,EAC1C4C,UA3BN,SAAuBC,GACjBA,EAAMb,MAAQc,EAASC,OAASF,EAAMb,MAAQc,EAASE,QACzDH,EAAMI,kBACL/C,GAAYQ,EAAQV,GAEzB,GAwBM0B,EAAAC,cAAA,MAAA,CAAK/B,UAAWqC,EAAGC,EAAOgB,SAAUrD,IApD1C,WACE,IAAKiB,EAAM,OAAOI,EAElB,IAAMiC,EACJzB,gBAAC0B,EAAI,CACHC,YAAY,EACZtC,SAAUA,EACVD,KAAMA,EACNlB,UAAWqC,EAAGC,EAAOoB,QAASC,EAASrB,EAAQjB,IAC/CuC,SAAU,GACVC,kBAAgB,IAIdC,EAAgBhC,EAAMiC,SAASC,QAAQ1C,GAE7C,MAAiB,SAAbD,EACF,CAAQkC,GAAWU,OAAAC,EAAKJ,IAG1B,GAAAG,OAAAC,EAAWJ,IAAeP,GAC5B,CA+B+DY,KAIjE"}

package/dist/src/components/Tabs/Tab/Tab.module.scss.js

@@ -1,2 +1,2 @@
-var e={tabWrapper:"tabWrapper_be6fc9e17c",stretchedUnderline:"stretchedUnderline_2a33c4b737",tabInner:"tabInner_3122364892",tabIcon:"tabIcon_c2f1224513",right:"right_06e0f18194",tabFocusVisibleInset:"tabFocusVisibleInset_a922b1dea3",active:"active_1d4d0d6a17",disabled:"disabled_da77e8a46c"};!function(e){const n="s_id-304dfa4df00e_3_85_1";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const r=document.createElement("style");r.id=n,t.firstChild?t.insertBefore(r,t.firstChild):t.appendChild(r),r.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}('/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable selector-class-pattern */\n/* stylelint-disable */\n/* stylelint-enable */\n.tabWrapper_be6fc9e17c {\n  position: relative;\n  display: inline-block;\n  padding-left: 1px;\n  padding-right: 1px;\n  border-top: 1px solid transparent;\n  border-bottom: 2px solid;\n  border-bottom-color: var(--ui-background-color);\n  color: var(--primary-text-color);\n  text-align: center;\n  height: 100%;\n  margin: 0;\n}\n.tabWrapper_be6fc9e17c.stretchedUnderline_2a33c4b737 {\n  border-bottom: 0;\n}\n.tabWrapper_be6fc9e17c:after {\n  display: block;\n  position: absolute;\n  left: 0;\n  right: 0;\n  content: "";\n  border-bottom: solid 2px;\n  border-bottom-color: var(--primary-color);\n  transform: scaleX(0);\n  z-index: 0;\n}\n.tabWrapper_be6fc9e17c .tabInner_3122364892 {\n  height: calc(100% - 1px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-decoration: none;\n  padding: 4px 16px;\n  font: var(--font-text1-normal);\n  user-select: none;\n  margin-bottom: 1px;\n  cursor: pointer;\n  color: var(--primary-text-color);\n}\n.tabWrapper_be6fc9e17c .tabInner_3122364892:focus {\n  outline: none;\n}\n.tabWrapper_be6fc9e17c .tabInner_3122364892 .tabIcon_c2f1224513 {\n  color: var(--icon-color);\n  margin-right: var(--spacing-small);\n}\n.tabWrapper_be6fc9e17c .tabInner_3122364892 .tabIcon_c2f1224513.right_06e0f18194 {\n  margin-right: 0;\n  margin-left: var(--spacing-small);\n}\n.tabWrapper_be6fc9e17c.tabFocusVisibleInset_a922b1dea3 {\n  outline: none;\n  z-index: 11;\n  border-radius: 3px;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5) inset, 0 0 0 1px var(--primary-hover-color) inset;\n  position: relative;\n}\n.tabWrapper_be6fc9e17c.active_1d4d0d6a17:after {\n  transform: scaleX(1);\n  transition: transform var(--motion-productive-medium) var(--motion-timing-enter);\n}\n.tabWrapper_be6fc9e17c.disabled_da77e8a46c .tabInner_3122364892 {\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n}\n.tabWrapper_be6fc9e17c:not(.disabled_da77e8a46c) .tabInner_3122364892:hover {\n  border-radius: 4px;\n  background-color: var(--primary-background-hover-color);\n}');export{e as default};
+var e={tabWrapper:"tabWrapper_40414e7b1a",stretchedUnderline:"stretchedUnderline_7638600d85",tabInner:"tabInner_1e5b2eb2d2",tabIcon:"tabIcon_a586541fc2",right:"right_09a42cfe65",tabFocusVisibleInset:"tabFocusVisibleInset_e671d95c91",active:"active_089b357544",disabled:"disabled_b3f20fee4a"};!function(e){const n="s_id-304dfa4df00e_3_86_0";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const r=document.createElement("style");r.id=n,t.firstChild?t.insertBefore(r,t.firstChild):t.appendChild(r),r.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}('/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable selector-class-pattern */\n/* stylelint-disable */\n/* stylelint-enable */\n.tabWrapper_40414e7b1a {\n  position: relative;\n  display: inline-block;\n  padding-left: 1px;\n  padding-right: 1px;\n  border-top: 1px solid transparent;\n  border-bottom: 2px solid;\n  border-bottom-color: var(--ui-background-color);\n  color: var(--primary-text-color);\n  text-align: center;\n  height: 100%;\n  margin: 0;\n}\n.tabWrapper_40414e7b1a.stretchedUnderline_7638600d85 {\n  border-bottom: 0;\n}\n.tabWrapper_40414e7b1a:after {\n  display: block;\n  position: absolute;\n  left: 0;\n  right: 0;\n  content: "";\n  border-bottom: solid 2px;\n  border-bottom-color: var(--primary-color);\n  transform: scaleX(0);\n  z-index: 0;\n}\n.tabWrapper_40414e7b1a .tabInner_1e5b2eb2d2 {\n  height: calc(100% - 1px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-decoration: none;\n  padding: 4px 16px;\n  font: var(--font-text1-normal);\n  user-select: none;\n  margin-bottom: 1px;\n  cursor: pointer;\n  color: var(--primary-text-color);\n}\n.tabWrapper_40414e7b1a .tabInner_1e5b2eb2d2:focus {\n  outline: none;\n}\n.tabWrapper_40414e7b1a .tabInner_1e5b2eb2d2 .tabIcon_a586541fc2 {\n  color: var(--icon-color);\n  margin-right: var(--spacing-small);\n}\n.tabWrapper_40414e7b1a .tabInner_1e5b2eb2d2 .tabIcon_a586541fc2.right_09a42cfe65 {\n  margin-right: 0;\n  margin-left: var(--spacing-small);\n}\n.tabWrapper_40414e7b1a.tabFocusVisibleInset_e671d95c91 {\n  outline: none;\n  z-index: 11;\n  border-radius: 3px;\n  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5) inset, 0 0 0 1px var(--primary-hover-color) inset;\n  position: relative;\n}\n.tabWrapper_40414e7b1a.active_089b357544:after {\n  transform: scaleX(1);\n  transition: transform var(--motion-productive-medium) var(--motion-timing-enter);\n}\n.tabWrapper_40414e7b1a.disabled_b3f20fee4a .tabInner_1e5b2eb2d2 {\n  color: var(--disabled-text-color);\n  cursor: not-allowed;\n}\n.tabWrapper_40414e7b1a:not(.disabled_b3f20fee4a) .tabInner_1e5b2eb2d2:hover {\n  border-radius: 4px;\n  background-color: var(--primary-background-hover-color);\n}');export{e as default};
 //# sourceMappingURL=Tab.module.scss.js.map

package/dist/src/components/Tabs/TabList/TabList.module.scss.js

@@ -1,2 +1,2 @@
-var e={tabsWrapper:"tabsWrapper_7358f7a4c5",tabsList:"tabsList_9ae482fd6d",sm:"sm_816ba795fb",lg:"lg_4f2c1cf313",stretched:"stretched_b53f15ab5f",tabListTabWrapper:"tabListTabWrapper_6ebfe43bcb",tabListTabInner:"tabListTabInner_6ebfe43bcb",disabled:"disabled_bf6cf592ee",stretchedUnderline:"stretchedUnderline_555389128a"};!function(e){const t="s_id-1dd2e005bc2f_3_85_1";if("undefined"!=typeof document){const a=document.head||document.getElementsByTagName("head")[0];if(a.querySelector("#"+t))return;const n=document.createElement("style");n.id=t,a.firstChild?a.insertBefore(n,a.firstChild):a.appendChild(n),n.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}("/* stylelint-disable */\n/* stylelint-enable */\n.tabsWrapper_7358f7a4c5 .tabsList_9ae482fd6d {\n  display: flex;\n  flex-direction: row;\n  list-style-type: none;\n  font-size: 0;\n  position: relative;\n  height: 40px;\n  outline: none;\n  padding: 0;\n}\n.tabsWrapper_7358f7a4c5 .tabsList_9ae482fd6d.sm_816ba795fb {\n  height: 32px;\n}\n.tabsWrapper_7358f7a4c5 .tabsList_9ae482fd6d.lg_4f2c1cf313 {\n  height: 48px;\n}\n.tabsWrapper_7358f7a4c5.stretched_b53f15ab5f .tabsList_9ae482fd6d {\n  width: 100%;\n}\n.tabsWrapper_7358f7a4c5.stretched_b53f15ab5f .tabsList_9ae482fd6d .tabListTabWrapper_6ebfe43bcb {\n  width: 100%;\n}\n.tabsWrapper_7358f7a4c5.stretched_b53f15ab5f .tabsList_9ae482fd6d .tabListTabWrapper_6ebfe43bcb .tabListTabInner_6ebfe43bcb {\n  width: 100%;\n}\n.tabsWrapper_7358f7a4c5.disabled_bf6cf592ee {\n  opacity: 0;\n  height: 0;\n  padding-bottom: 5px;\n  pointer-events: none;\n}\n.tabsWrapper_7358f7a4c5.stretchedUnderline_555389128a {\n  border-bottom: 2px solid var(--ui-background-color);\n}");export{e as default};
+var e={tabsWrapper:"tabsWrapper_9713d0d619",tabsList:"tabsList_3180699d39",sm:"sm_a6d70071e2",lg:"lg_ebce8c69cb",stretched:"stretched_9c72d79c93",tabListTabWrapper:"tabListTabWrapper_52e696d131",tabListTabInner:"tabListTabInner_52e696d131",disabled:"disabled_375dc7bd86",stretchedUnderline:"stretchedUnderline_fa7f6f9424"};!function(e){const t="s_id-1dd2e005bc2f_3_86_0";if("undefined"!=typeof document){const d=document.head||document.getElementsByTagName("head")[0];if(d.querySelector("#"+t))return;const n=document.createElement("style");n.id=t,d.firstChild?d.insertBefore(n,d.firstChild):d.appendChild(n),n.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}("/* stylelint-disable */\n/* stylelint-enable */\n.tabsWrapper_9713d0d619 .tabsList_3180699d39 {\n  display: flex;\n  flex-direction: row;\n  list-style-type: none;\n  font-size: 0;\n  position: relative;\n  height: 40px;\n  outline: none;\n  padding: 0;\n}\n.tabsWrapper_9713d0d619 .tabsList_3180699d39.sm_a6d70071e2 {\n  height: 32px;\n}\n.tabsWrapper_9713d0d619 .tabsList_3180699d39.lg_ebce8c69cb {\n  height: 48px;\n}\n.tabsWrapper_9713d0d619.stretched_9c72d79c93 .tabsList_3180699d39 {\n  width: 100%;\n}\n.tabsWrapper_9713d0d619.stretched_9c72d79c93 .tabsList_3180699d39 .tabListTabWrapper_52e696d131 {\n  width: 100%;\n}\n.tabsWrapper_9713d0d619.stretched_9c72d79c93 .tabsList_3180699d39 .tabListTabWrapper_52e696d131 .tabListTabInner_52e696d131 {\n  width: 100%;\n}\n.tabsWrapper_9713d0d619.disabled_375dc7bd86 {\n  opacity: 0;\n  height: 0;\n  padding-bottom: 5px;\n  pointer-events: none;\n}\n.tabsWrapper_9713d0d619.stretchedUnderline_fa7f6f9424 {\n  border-bottom: 2px solid var(--ui-background-color);\n}");export{e as default};
 //# sourceMappingURL=TabList.module.scss.js.map

package/dist/src/components/Tabs/TabPanel/TabPanel.module.scss.js

@@ -1,2 +1,2 @@
-var e={tabPanelWrapper:"tabPanelWrapper_886538370c"};!function(e){const t="s_id-82244d4a2f7b_3_85_1";if("undefined"!=typeof document){const a=document.head||document.getElementsByTagName("head")[0];if(a.querySelector("#"+t))return;const n=document.createElement("style");n.id=t,a.firstChild?a.insertBefore(n,a.firstChild):a.appendChild(n),n.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}(".tabPanelWrapper_886538370c {\n  color: var(--primary-text-color);\n}");export{e as default};
+var e={tabPanelWrapper:"tabPanelWrapper_4ea8881b20"};!function(e){const t="s_id-82244d4a2f7b_3_86_0";if("undefined"!=typeof document){const a=document.head||document.getElementsByTagName("head")[0];if(a.querySelector("#"+t))return;const n=document.createElement("style");n.id=t,a.firstChild?a.insertBefore(n,a.firstChild):a.appendChild(n),n.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=e)}(".tabPanelWrapper_4ea8881b20 {\n  color: var(--primary-text-color);\n}");export{e as default};
 //# sourceMappingURL=TabPanel.module.scss.js.map

package/dist/src/components/Tabs/TabPanels/TabPanels.js

@@ -1,2 +1,2 @@
-import e from"classnames";import{camelCase as t}from"es-toolkit";import a,{forwardRef as s,useRef as r,useMemo as i}from"react";import o from"../../../hooks/useMergeRef.js";import{getTestId as n,ComponentDefaultTestId as l}from"../../../tests/testIds.js";import{getStyle as m}from"../../../helpers/typesciptCssModulesHelper.js";import c from"./TabPanels.module.scss.js";var p=s((function(s,p){var d=s.className,f=s.id,u=s.activeTabId,v=void 0===u?0:u,b=s.animationDirection,j=void 0===b?"rtl":b,N=s.children,P=s["data-testid"],g=r(null),h=o(p,g),T=i((function(){return a.Children.map(N,(function(s,r){var i=v===r;if(!i)return null;var o=i?"active":"non-active",n=i?"animation-direction-".concat(j):"";return a.cloneElement(s,Object.assign(Object.assign({index:r},s.props),{className:e(c.tabPanel,[m(c,o)],[m(c,t(n))],s.props.className)}))})).filter(Boolean)}),[N,v,j]);return a.createElement("div",{ref:h,className:e(c.tabPanelsWrapper,d),id:f,"data-testid":P||n(l.TAB_PANELS,f)},T)}));Object.assign(p,{isTabPanels:!0});export{p as default};
+import t from"classnames";import{camelCase as e}from"es-toolkit";import s,{forwardRef as a,useRef as r,useMemo as i}from"react";import o from"../../../hooks/useMergeRef.js";import{TabPanelsAnimationDirection as n}from"./TabPanelsConstants.js";import{getTestId as m,ComponentDefaultTestId as l}from"../../../tests/testIds.js";import{getStyle as c}from"../../../helpers/typesciptCssModulesHelper.js";import{withStaticProps as p}from"../../../types/withStaticProps.js";import"../../../utils/colors-vars-map.js";import d from"./TabPanels.module.scss.js";var f=a((function(a,n){var p=a.className,f=a.id,u=a.activeTabId,v=void 0===u?0:u,j=a.animationDirection,b=void 0===j?"rtl":j,P=a.children,h=a["data-testid"],N=r(null),T=o(n,N),g=i((function(){return s.Children.map(P,(function(a,r){var i=v===r;if(!i)return null;var o=i?"active":"non-active",n=i?"animation-direction-".concat(b):"";return s.cloneElement(a,Object.assign(Object.assign({index:r},a.props),{className:t(d.tabPanel,[c(d,o)],[c(d,e(n))],a.props.className)}))})).filter(Boolean)}),[P,v,b]);return s.createElement("div",{ref:T,className:t(d.tabPanelsWrapper,p),id:f,"data-testid":h||m(l.TAB_PANELS,f)},g)}));Object.assign(f,{isTabPanels:!0});var u=p(f,{animationDirections:n});export{u as default};
 //# sourceMappingURL=TabPanels.js.map

package/dist/src/components/Tabs/TabPanels/TabPanels.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanels.js","sources":["../../../../../src/components/Tabs/TabPanels/TabPanels.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport { camelCase } from \"es-toolkit\";\nimport React, { forwardRef, type ReactElement, useMemo, useRef } from \"react\";\nimport useMergeRef from \"../../../hooks/useMergeRef\";\nimport { type TabPanelsAnimationDirection } from \"./TabPanels.types\";\nimport { type TabPanelProps } from \"../TabPanel/TabPanel\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../tests/test-ids-utils\";\nimport { getStyle } from \"../../../helpers/typesciptCssModulesHelper\";\nimport { type VibeComponentProps } from \"../../../types\";\nimport styles from \"./TabPanels.module.scss\";\n\nexport interface TabPanelsProps extends VibeComponentProps {\n  /**\n   * The index of the currently active tab panel.\n   */\n  activeTabId?: number;\n  /**\n   * The animation direction when switching between tab panels.\n   */\n  animationDirection?: TabPanelsAnimationDirection;\n  /**\n   * The child elements representing tab panels.\n   */\n  children?: ReactElement<TabPanelProps> | ReactElement<TabPanelProps>[];\n}\n\nconst TabPanels = forwardRef(\n  (\n    { className, id, activeTabId = 0, animationDirection = \"rtl\", children, \"data-testid\": dataTestId }: TabPanelsProps,\n    ref: React.ForwardedRef<HTMLElement>\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n    const renderedTabs = useMemo(() => {\n      return React.Children.map(children, (child, index) => {\n        const isActiveTab = activeTabId === index;\n        if (!isActiveTab) return null;\n        const activeClass = isActiveTab ? \"active\" : \"non-active\";\n        const animationClass = isActiveTab ? `animation-direction-${animationDirection}` : \"\";\n        return React.cloneElement(child, {\n          index,\n          ...child.props,\n          className: cx(\n            styles.tabPanel,\n            [getStyle(styles, activeClass)],\n            [getStyle(styles, camelCase(animationClass))],\n            child.props.className\n          )\n        });\n      }).filter(Boolean);\n    }, [children, activeTabId, animationDirection]);\n\n    return (\n      <div\n        ref={mergedRef}\n        className={cx(styles.tabPanelsWrapper, className)}\n        id={id}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.TAB_PANELS, id)}\n      >\n        {renderedTabs}\n      </div>\n    );\n  }\n);\n\nObject.assign(TabPanels, {\n  isTabPanels: true\n});\n\nexport default TabPanels;\n"],"names":["TabPanels","forwardRef","_ref","ref","className","id","_ref$activeTabId","activeTabId","_ref$animationDirecti","animationDirection","children","dataTestId","componentRef","useRef","mergedRef","useMergeRef","renderedTabs","useMemo","React","Children","map","child","index","isActiveTab","activeClass","animationClass","concat","cloneElement","Object","assign","props","cx","styles","tabPanel","getStyle","camelCase","filter","Boolean","createElement","tabPanelsWrapper","getTestId","ComponentDefaultTestId","TAB_PANELS","isTabPanels"],"mappings":"kXA0BMA,IAAAA,EAAYC,GAChB,SAAAC,EAEEC,GACE,IAFAC,EAASF,EAATE,UAAWC,EAAEH,EAAFG,GAAEC,EAAAJ,EAAEK,YAAAA,OAAc,IAAHD,EAAG,EAACA,EAAAE,EAAAN,EAAEO,mBAAAA,OAAqB,IAAHD,EAAG,MAAKA,EAAEE,EAAQR,EAARQ,SAAyBC,EAAUT,EAAzB,eAGlEU,EAAeC,EAAO,MACtBC,EAAYC,EAAYZ,EAAKS,GAC7BI,EAAeC,GAAQ,WAC3B,OAAOC,EAAMC,SAASC,IAAIV,GAAU,SAACW,EAAOC,GAC1C,IAAMC,EAAchB,IAAgBe,EACpC,IAAKC,EAAa,OAAO,KACzB,IAAMC,EAAcD,EAAc,SAAW,aACvCE,EAAiBF,EAAW,uBAAAG,OAA0BjB,GAAuB,GACnF,OAAOS,EAAMS,aAAaN,EACxBO,OAAAC,OAAAD,OAAAC,OAAA,CAAAP,MAAAA,GACGD,EAAMS,QACT1B,UAAW2B,EACTC,EAAOC,SACP,CAACC,EAASF,EAAQR,IAClB,CAACU,EAASF,EAAQG,EAAUV,KAC5BJ,EAAMS,MAAM1B,aAGlB,IAAGgC,OAAOC,QACX,GAAE,CAAC3B,EAAUH,EAAaE,IAE3B,OACES,EAAAoB,cAAA,MAAA,CACEnC,IAAKW,EACLV,UAAW2B,EAAGC,EAAOO,iBAAkBnC,GACvCC,GAAIA,EACS,cAAAM,GAAc6B,EAAUC,EAAuBC,WAAYrC,IAEvEW,EAGP,IAGFY,OAAOC,OAAO7B,EAAW,CACvB2C,aAAa"}
+{"version":3,"file":"TabPanels.js","sources":["../../../../../src/components/Tabs/TabPanels/TabPanels.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport { camelCase } from \"es-toolkit\";\nimport React, { forwardRef, type ReactElement, useMemo, useRef } from \"react\";\nimport useMergeRef from \"../../../hooks/useMergeRef\";\nimport { TabPanelsAnimationDirection as TabPanelsAnimationDirectionEnum } from \"./TabPanelsConstants\";\nimport { type TabPanelsAnimationDirection } from \"./TabPanels.types\";\nimport { type TabPanelProps } from \"../TabPanel/TabPanel\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../tests/test-ids-utils\";\nimport { getStyle } from \"../../../helpers/typesciptCssModulesHelper\";\nimport { type VibeComponentProps, withStaticProps } from \"../../../types\";\nimport styles from \"./TabPanels.module.scss\";\n\nexport interface TabPanelsProps extends VibeComponentProps {\n  /**\n   * The index of the currently active tab panel.\n   */\n  activeTabId?: number;\n  /**\n   * The animation direction when switching between tab panels.\n   */\n  animationDirection?: TabPanelsAnimationDirection;\n  /**\n   * The child elements representing tab panels.\n   */\n  children?: ReactElement<TabPanelProps> | ReactElement<TabPanelProps>[];\n}\n\nconst TabPanels = forwardRef(\n  (\n    { className, id, activeTabId = 0, animationDirection = \"rtl\", children, \"data-testid\": dataTestId }: TabPanelsProps,\n    ref: React.ForwardedRef<HTMLElement>\n  ) => {\n    const componentRef = useRef(null);\n    const mergedRef = useMergeRef(ref, componentRef);\n    const renderedTabs = useMemo(() => {\n      return React.Children.map(children, (child, index) => {\n        const isActiveTab = activeTabId === index;\n        if (!isActiveTab) return null;\n        const activeClass = isActiveTab ? \"active\" : \"non-active\";\n        const animationClass = isActiveTab ? `animation-direction-${animationDirection}` : \"\";\n        return React.cloneElement(child, {\n          index,\n          ...child.props,\n          className: cx(\n            styles.tabPanel,\n            [getStyle(styles, activeClass)],\n            [getStyle(styles, camelCase(animationClass))],\n            child.props.className\n          )\n        });\n      }).filter(Boolean);\n    }, [children, activeTabId, animationDirection]);\n\n    return (\n      <div\n        ref={mergedRef}\n        className={cx(styles.tabPanelsWrapper, className)}\n        id={id}\n        data-testid={dataTestId || getTestId(ComponentDefaultTestId.TAB_PANELS, id)}\n      >\n        {renderedTabs}\n      </div>\n    );\n  }\n);\n\nObject.assign(TabPanels, {\n  isTabPanels: true\n});\n\ninterface TabPanelsStaticProps {\n  animationDirections: typeof TabPanelsAnimationDirectionEnum;\n}\n\nexport default withStaticProps<TabPanelsProps, TabPanelsStaticProps>(TabPanels, {\n  animationDirections: TabPanelsAnimationDirectionEnum\n});\n"],"names":["TabPanels","forwardRef","_ref","ref","className","id","_ref$activeTabId","activeTabId","_ref$animationDirecti","animationDirection","children","dataTestId","componentRef","useRef","mergedRef","useMergeRef","renderedTabs","useMemo","React","Children","map","child","index","isActiveTab","activeClass","animationClass","concat","cloneElement","Object","assign","props","cx","styles","tabPanel","getStyle","camelCase","filter","Boolean","createElement","tabPanelsWrapper","getTestId","ComponentDefaultTestId","TAB_PANELS","isTabPanels","withStaticProps","animationDirections","TabPanelsAnimationDirectionEnum"],"mappings":"siBA2BA,IAAMA,EAAYC,GAChB,SAAAC,EAEEC,GACE,IAFAC,EAASF,EAATE,UAAWC,EAAEH,EAAFG,GAAEC,EAAAJ,EAAEK,YAAAA,OAAc,IAAHD,EAAG,EAACA,EAAAE,EAAAN,EAAEO,mBAAAA,OAAqB,IAAHD,EAAG,MAAKA,EAAEE,EAAQR,EAARQ,SAAyBC,EAAUT,EAAzB,eAGlEU,EAAeC,EAAO,MACtBC,EAAYC,EAAYZ,EAAKS,GAC7BI,EAAeC,GAAQ,WAC3B,OAAOC,EAAMC,SAASC,IAAIV,GAAU,SAACW,EAAOC,GAC1C,IAAMC,EAAchB,IAAgBe,EACpC,IAAKC,EAAa,OAAO,KACzB,IAAMC,EAAcD,EAAc,SAAW,aACvCE,EAAiBF,EAAW,uBAAAG,OAA0BjB,GAAuB,GACnF,OAAOS,EAAMS,aAAaN,EACxBO,OAAAC,OAAAD,OAAAC,OAAA,CAAAP,MAAAA,GACGD,EAAMS,QACT1B,UAAW2B,EACTC,EAAOC,SACP,CAACC,EAASF,EAAQR,IAClB,CAACU,EAASF,EAAQG,EAAUV,KAC5BJ,EAAMS,MAAM1B,aAGlB,IAAGgC,OAAOC,QACX,GAAE,CAAC3B,EAAUH,EAAaE,IAE3B,OACES,EAAAoB,cAAA,MAAA,CACEnC,IAAKW,EACLV,UAAW2B,EAAGC,EAAOO,iBAAkBnC,GACvCC,GAAIA,EACS,cAAAM,GAAc6B,EAAUC,EAAuBC,WAAYrC,IAEvEW,EAGP,IAGFY,OAAOC,OAAO7B,EAAW,CACvB2C,aAAa,IAOf,IAAeC,EAAAA,EAAsD5C,EAAW,CAC9E6C,oBAAqBC"}

package/dist/src/components/Tabs/TabPanels/TabPanels.module.scss.js

@@ -1,2 +1,2 @@
-var e={tabPanelsWrapper:"tabPanelsWrapper_a3e0e69591",tabPanel:"tabPanel_09e25e6d23",animationDirectionRtl:"animationDirectionRtl_8ed71c037a",animationDirectionLtr:"animationDirectionLtr_5df3336dd8",active:"active_5cd352c7e6",panelSlideIn:"panelSlideIn_ab8aaeee46"};!function(e){const a="s_id-078bacbdb1e4_3_85_1";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+a))return;const t=document.createElement("style");t.id=a,n.firstChild?n.insertBefore(t,n.firstChild):n.appendChild(t),t.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[a]=e)}("/* stylelint-disable */\n/* stylelint-enable */\n.tabPanelsWrapper_a3e0e69591 .tabPanel_09e25e6d23 {\n  display: none;\n}\n.tabPanelsWrapper_a3e0e69591 .tabPanel_09e25e6d23.animationDirectionRtl_8ed71c037a {\n  transform: translateX(8px);\n}\n.tabPanelsWrapper_a3e0e69591 .tabPanel_09e25e6d23.animationDirectionLtr_5df3336dd8 {\n  transform: translateX(-8px);\n}\n.tabPanelsWrapper_a3e0e69591 .tabPanel_09e25e6d23.active_5cd352c7e6 {\n  display: block;\n  animation: panelSlideIn_ab8aaeee46 var(--motion-productive-long) forwards var(--motion-timing-enter);\n}\n@keyframes panelSlideIn_ab8aaeee46 {\n  100% {\n    transform: translateX(0%);\n  }\n}");export{e as default};
+var a={tabPanelsWrapper:"tabPanelsWrapper_a4dbdb3499",tabPanel:"tabPanel_42ae0ca2fd",animationDirectionRtl:"animationDirectionRtl_d63adedef6",animationDirectionLtr:"animationDirectionLtr_1ca69cd2cd",active:"active_e2628153a1",panelSlideIn:"panelSlideIn_1212ad0995"};!function(a){const e="s_id-078bacbdb1e4_3_86_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+e))return;const t=document.createElement("style");t.id=e,n.firstChild?n.insertBefore(t,n.firstChild):n.appendChild(t),t.appendChild(document.createTextNode(a))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=a)}("/* stylelint-disable */\n/* stylelint-enable */\n.tabPanelsWrapper_a4dbdb3499 .tabPanel_42ae0ca2fd {\n  display: none;\n}\n.tabPanelsWrapper_a4dbdb3499 .tabPanel_42ae0ca2fd.animationDirectionRtl_d63adedef6 {\n  transform: translateX(8px);\n}\n.tabPanelsWrapper_a4dbdb3499 .tabPanel_42ae0ca2fd.animationDirectionLtr_1ca69cd2cd {\n  transform: translateX(-8px);\n}\n.tabPanelsWrapper_a4dbdb3499 .tabPanel_42ae0ca2fd.active_e2628153a1 {\n  display: block;\n  animation: panelSlideIn_1212ad0995 var(--motion-productive-long) forwards var(--motion-timing-enter);\n}\n@keyframes panelSlideIn_1212ad0995 {\n  100% {\n    transform: translateX(0%);\n  }\n}");export{a as default};
 //# sourceMappingURL=TabPanels.module.scss.js.map

package/dist/src/components/Tabs/TabPanels/TabPanelsConstants.js

@@ -0,0 +1,2 @@
+var r;!function(r){r.RTL="rtl",r.LTR="ltr"}(r||(r={}));export{r as TabPanelsAnimationDirection};
+//# sourceMappingURL=TabPanelsConstants.js.map

package/dist/src/components/Tabs/TabPanels/TabPanelsConstants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabPanelsConstants.js","sources":["../../../../../src/components/Tabs/TabPanels/TabPanelsConstants.ts"],"sourcesContent":["/**\n * @deprecated\n */\n\nexport enum TabPanelsAnimationDirection {\n  RTL = \"rtl\",\n  LTR = \"ltr\"\n}\n"],"names":["TabPanelsAnimationDirection"],"mappings":"IAIYA,GAAZ,SAAYA,GACVA,EAAA,IAAA,MACAA,EAAA,IAAA,KACD,CAHD,CAAYA,IAAAA,EAGX,CAAA"}

package/dist/src/components/TextArea/TextArea.module.scss.js

@@ -1,2 +1,2 @@
-var e={textAreaWrapper:"textAreaWrapper_941bf1c489",label:"label_d544fd7a44",required:"required_56e1a039d9",subTextContainer:"subTextContainer_e0aacd0d5a",helpText:"helpText_12475324f9",limitText:"limitText_0cc44b01a7",textArea:"textArea_42dd57539f",small:"small_f583656601",large:"large_afcc2b171c",resize:"resize_4c9fc2ae48",success:"success_a4b084cfe6",error:"error_2976a2bfb5",disabled:"disabled_56e1a039d9",readOnly:"readOnly_56e1a039d9"};!function(e){const r="s_id-c3fc7910bb37_3_85_1";if("undefined"!=typeof document){const a=document.head||document.getElementsByTagName("head")[0];if(a.querySelector("#"+r))return;const t=document.createElement("style");t.id=r,a.firstChild?a.insertBefore(t,a.firstChild):a.appendChild(t),t.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[r]=e)}('/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/* stylelint-enable */\n.textAreaWrapper_941bf1c489 {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  gap: var(--spacing-xs);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  font: var(--font-text2-normal);\n}\n.textAreaWrapper_941bf1c489 .label_d544fd7a44 {\n  display: inline-flex;\n  gap: var(--spacing-xs);\n  color: var(--primary-text-color);\n}\n.textAreaWrapper_941bf1c489 .label_d544fd7a44.required_56e1a039d9::after {\n  content: "*";\n  color: var(--color-error);\n}\n.textAreaWrapper_941bf1c489 .subTextContainer_e0aacd0d5a {\n  color: var(--secondary-text-color);\n}\n.textAreaWrapper_941bf1c489 .subTextContainer_e0aacd0d5a .helpText_12475324f9 {\n  display: flex;\n}\n.textAreaWrapper_941bf1c489 .subTextContainer_e0aacd0d5a .limitText_0cc44b01a7 {\n  margin-left: auto;\n}\n.textAreaWrapper_941bf1c489 .textArea_42dd57539f {\n  resize: vertical;\n  border: 1px solid var(--ui-border-color);\n  border-radius: var(--border-radius-small);\n  padding: var(--spacing-small) var(--spacing-medium);\n  outline: none;\n  background-color: var(--secondary-background-color);\n  color: var(--primary-text-color);\n}\n.textAreaWrapper_941bf1c489 .textArea_42dd57539f:hover {\n  border-color: var(--primary-text-color);\n}\n.textAreaWrapper_941bf1c489 .textArea_42dd57539f:active, .textAreaWrapper_941bf1c489 .textArea_42dd57539f:focus, .textAreaWrapper_941bf1c489 .textArea_42dd57539f:focus-within {\n  border-color: var(--primary-color);\n}\n.textAreaWrapper_941bf1c489 .textArea_42dd57539f.small_f583656601 {\n  font: var(--font-text2-normal);\n}\n.textAreaWrapper_941bf1c489 .textArea_42dd57539f.large_afcc2b171c {\n  font: var(--font-text1-normal);\n}\n.textAreaWrapper_941bf1c489 .textArea_42dd57539f:not(.resize_4c9fc2ae48) {\n  resize: none;\n}\n.textAreaWrapper_941bf1c489.success_a4b084cfe6 .textArea_42dd57539f {\n  border-color: var(--color-success);\n}\n.textAreaWrapper_941bf1c489.success_a4b084cfe6 .helpText_12475324f9 {\n  color: var(--color-success);\n}\n.textAreaWrapper_941bf1c489.error_2976a2bfb5 .textArea_42dd57539f {\n  border-color: var(--color-error);\n}\n.textAreaWrapper_941bf1c489.error_2976a2bfb5 .helpText_12475324f9,\n.textAreaWrapper_941bf1c489.error_2976a2bfb5 .limitText_0cc44b01a7 {\n  color: var(--color-error);\n}\n.textAreaWrapper_941bf1c489.disabled_56e1a039d9 .textArea_42dd57539f,\n.textAreaWrapper_941bf1c489.disabled_56e1a039d9 .textArea_42dd57539f:hover {\n  color: var(--disabled-text-color);\n  background-color: var(--disabled-background-color);\n  border-color: transparent;\n  resize: none;\n}\n.textAreaWrapper_941bf1c489.disabled_56e1a039d9 .helpText_12475324f9 {\n  color: var(--disabled-text-color);\n}\n.textAreaWrapper_941bf1c489.readOnly_56e1a039d9 .textArea_42dd57539f,\n.textAreaWrapper_941bf1c489.readOnly_56e1a039d9 .textArea_42dd57539f:hover {\n  background-color: var(--allgrey-background-color);\n  border-color: transparent;\n  resize: none;\n}');export{e as default};
+var e={textAreaWrapper:"textAreaWrapper_4e1e8bcfda",label:"label_fca03fe98c",required:"required_0ca4595246",subTextContainer:"subTextContainer_bb4deaeb00",helpText:"helpText_56c388f2ea",limitText:"limitText_220c2f776d",textArea:"textArea_918941293c",small:"small_fdd61d9bc2",large:"large_d08dccd8c6",resize:"resize_93e9240c4e",success:"success_3d9f1916fc",error:"error_b2c0137bf8",disabled:"disabled_0ca4595246",readOnly:"readOnly_0ca4595246"};!function(e){const r="s_id-c3fc7910bb37_3_86_0";if("undefined"!=typeof document){const a=document.head||document.getElementsByTagName("head")[0];if(a.querySelector("#"+r))return;const t=document.createElement("style");t.id=r,a.firstChild?a.insertBefore(t,a.firstChild):a.appendChild(t),t.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[r]=e)}('/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/* stylelint-enable */\n.textAreaWrapper_4e1e8bcfda {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  gap: var(--spacing-xs);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  font: var(--font-text2-normal);\n}\n.textAreaWrapper_4e1e8bcfda .label_fca03fe98c {\n  display: inline-flex;\n  gap: var(--spacing-xs);\n  color: var(--primary-text-color);\n}\n.textAreaWrapper_4e1e8bcfda .label_fca03fe98c.required_0ca4595246::after {\n  content: "*";\n  color: var(--color-error);\n}\n.textAreaWrapper_4e1e8bcfda .subTextContainer_bb4deaeb00 {\n  color: var(--secondary-text-color);\n}\n.textAreaWrapper_4e1e8bcfda .subTextContainer_bb4deaeb00 .helpText_56c388f2ea {\n  display: flex;\n}\n.textAreaWrapper_4e1e8bcfda .subTextContainer_bb4deaeb00 .limitText_220c2f776d {\n  margin-left: auto;\n}\n.textAreaWrapper_4e1e8bcfda .textArea_918941293c {\n  resize: vertical;\n  border: 1px solid var(--ui-border-color);\n  border-radius: var(--border-radius-small);\n  padding: var(--spacing-small) var(--spacing-medium);\n  outline: none;\n  background-color: var(--secondary-background-color);\n  color: var(--primary-text-color);\n}\n.textAreaWrapper_4e1e8bcfda .textArea_918941293c:hover {\n  border-color: var(--primary-text-color);\n}\n.textAreaWrapper_4e1e8bcfda .textArea_918941293c:active, .textAreaWrapper_4e1e8bcfda .textArea_918941293c:focus, .textAreaWrapper_4e1e8bcfda .textArea_918941293c:focus-within {\n  border-color: var(--primary-color);\n}\n.textAreaWrapper_4e1e8bcfda .textArea_918941293c.small_fdd61d9bc2 {\n  font: var(--font-text2-normal);\n}\n.textAreaWrapper_4e1e8bcfda .textArea_918941293c.large_d08dccd8c6 {\n  font: var(--font-text1-normal);\n}\n.textAreaWrapper_4e1e8bcfda .textArea_918941293c:not(.resize_93e9240c4e) {\n  resize: none;\n}\n.textAreaWrapper_4e1e8bcfda.success_3d9f1916fc .textArea_918941293c {\n  border-color: var(--color-success);\n}\n.textAreaWrapper_4e1e8bcfda.success_3d9f1916fc .helpText_56c388f2ea {\n  color: var(--color-success);\n}\n.textAreaWrapper_4e1e8bcfda.error_b2c0137bf8 .textArea_918941293c {\n  border-color: var(--color-error);\n}\n.textAreaWrapper_4e1e8bcfda.error_b2c0137bf8 .helpText_56c388f2ea,\n.textAreaWrapper_4e1e8bcfda.error_b2c0137bf8 .limitText_220c2f776d {\n  color: var(--color-error);\n}\n.textAreaWrapper_4e1e8bcfda.disabled_0ca4595246 .textArea_918941293c,\n.textAreaWrapper_4e1e8bcfda.disabled_0ca4595246 .textArea_918941293c:hover {\n  color: var(--disabled-text-color);\n  background-color: var(--disabled-background-color);\n  border-color: transparent;\n  resize: none;\n}\n.textAreaWrapper_4e1e8bcfda.disabled_0ca4595246 .helpText_56c388f2ea {\n  color: var(--disabled-text-color);\n}\n.textAreaWrapper_4e1e8bcfda.readOnly_0ca4595246 .textArea_918941293c,\n.textAreaWrapper_4e1e8bcfda.readOnly_0ca4595246 .textArea_918941293c:hover {\n  background-color: var(--allgrey-background-color);\n  border-color: transparent;\n  resize: none;\n}');export{e as default};
 //# sourceMappingURL=TextArea.module.scss.js.map

package/dist/src/components/TextField/TextField.js

@@ -1,2 +1,2 @@
-import{slicedToArray as e,defineProperty as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import o from"classnames";import a,{forwardRef as n,useState as r,useRef as i,useCallback as l,useMemo as c,useEffect as s}from"react";import d from"../../hooks/useDebounceEvent/index.js";import m from"../FieldLabel/FieldLabel.js";import{FEEDBACK_CLASSES as u,SIZE_MAPPER as p,TextFieldAriaLabel as v}from"./TextFieldConstants.js";import f from"../../hooks/useMergeRef.js";import{getTestId as C}from"../../tests/testIds.js";import{NOOP as b}from"../../utils/function-utils.js";import{ComponentDefaultTestId as x,ComponentVibeId as y}from"../../tests/constants.js";import E from"./TextField.module.scss.js";import T from"../HiddenText/HiddenText.js";import N from"../../../components/loader/dist/Loader/Loader.js";import g from"../../../components/tooltip/dist/Tooltip/Tooltip.js";import h from"../../../components/clickable/dist/Clickable/Clickable.js";import I from"../../../components/icon/dist/Icon/Icon.js";import j from"../../../components/typography/dist/Text/Text.js";var F={primary:"",secondary:""},L=n((function(n,L){var k=n.className,D=void 0===k?"":k,H=n.placeholder,w=void 0===H?"":H,A=n.autoComplete,_=void 0===A?"off":A,q=n.value,R=n.onChange,W=void 0===R?b:R,B=n.onBlur,O=void 0===B?b:B,S=n.onFocus,z=void 0===S?b:S,K=n.onKeyDown,M=void 0===K?b:K,V=n.onWheel,X=void 0===V?b:V,P=n.debounceRate,U=void 0===P?0:P,Y=n.autoFocus,G=void 0!==Y&&Y,J=n.disabled,Q=void 0!==J&&J,Z=n.readonly,$=void 0!==Z&&Z,ee=n.setRef,te=void 0===ee?b:ee,oe=n.iconName,ae=n.secondaryIconName,ne=n.id,re=void 0===ne?"input":ne,ie=n.title,le=void 0===ie?"":ie,ce=n.size,se=void 0===ce?"small":ce,de=n.validation,me=void 0===de?null:de,ue=n.wrapperClassName,pe=void 0===ue?"":ue,ve=n.onIconClick,fe=void 0===ve?b:ve,Ce=n.clearOnIconClick,be=void 0!==Ce&&Ce,xe=n.labelIconName,ye=n.showCharCount,Ee=void 0!==ye&&ye,Te=n.inputAriaLabel,Ne=n.searchResultsContainerId,ge=void 0===Ne?"":Ne,he=n.activeDescendant,Ie=void 0===he?"":he,je=n.iconsNames,Fe=void 0===je?F:je,Le=n.type,ke=void 0===Le?"text":Le,De=n.maxLength,He=void 0===De?null:De,we=n.allowExceedingMaxLength,Ae=void 0!==we&&we,_e=n.trim,qe=void 0!==_e&&_e,Re=n.role,We=void 0===Re?"":Re,Be=n.required,Oe=void 0!==Be&&Be,Se=n.requiredErrorText,ze=void 0===Se?"":Se,Ke=n.loading,Me=void 0!==Ke&&Ke,Ve=n["data-testid"],Xe=n.secondaryDataTestId,Pe=n.tabIndex,Ue=n.underline,Ye=void 0!==Ue&&Ue,Ge=n.name,Je=n.controlled,Qe=void 0!==Je&&Je,Ze=n.iconTooltipContent,$e=n.secondaryTooltipContent,et=n.dir,tt=r(!1),ot=e(tt,2),at=ot[0],nt=ot[1],rt=i(null),it=f(L,rt,te),lt=l((function(e){Oe&&!e.target.value&&nt(!0),O(e)}),[O,Oe]),ct=l((function(e,t){at&&e&&nt(!1),W(e,t||{target:rt.current})}),[W,at]),st=d({delay:U,onChange:ct,initialStateValue:q,trim:qe}),dt=st.inputValue,mt=st.onEventChanged,ut=st.clearValue,pt=c((function(){return Qe?q:dt}),[Qe,q,dt]),vt=l((function(e){Qe?ct(e.target.value,e):mt(e)}),[Qe,ct,mt]),ft=c((function(){return ae&&pt?ae:oe}),[oe,ae,pt]),Ct=l((function(){Q||(be&&(rt.current&&rt.current.focus(),rt.current.value="",Qe?ct(""):ut()),fe(ft))}),[Q,be,fe,ft,Qe,ct,ut]),bt=c((function(){return"number"==typeof He&&pt&&pt.length>He?u.error:me&&me.status||at?u[at?"error":me.status]:""}),[He,me,at,pt]),xt=oe||ae,yt=Ee||me&&me.text||at&&ze,Et=ae===ft,Tt=oe===ft,Nt=(fe!==b||Fe.primary||Ze)&&pt&&oe.length&&Tt,gt=(ae||$e)&&Et&&!!pt,ht=Ae?"".concat(re,"-allow-exceeding-max-length-text"):void 0;s((function(){if((null==rt?void 0:rt.current)&&G){var e=requestAnimationFrame((function(){return rt.current.focus()}));return function(){return cancelAnimationFrame(e)}}}),[rt,G]);var It=fe!==b||be,jt=Fe.primary||Ze,Ft=Fe.secondary||$e;return a.createElement("div",{className:o(E.textField,pe,t(t({},E.disabled,Q),E.onlyUnderline,Ye)),role:We,"aria-busy":Me},a.createElement("div",{className:o(E.labelWrapper)},a.createElement(m,{labelText:le,icon:xe,labelFor:re,required:Oe}),a.createElement("div",{className:o(E.inputWrapper,p[se],bt)},a.createElement("input",{className:o(D,E.input,t(t({},E.inputHasIcon,!!xt),E.readOnly,$)),placeholder:w,autoComplete:_,value:pt,onChange:vt,disabled:Q,readOnly:$,ref:it,type:ke,id:re,"data-testid":Ve||C(x.TEXT_FIELD,re),"data-vibe":y.TEXT_FIELD,name:Ge,onBlur:lt,onFocus:z,onKeyDown:M,onWheel:X,maxLength:"number"!=typeof He||Ae?void 0:He,role:ge&&"combobox","aria-label":Te||w,"aria-invalid":me&&"error"===me.status||at,"aria-owns":ge,"aria-activedescendant":Ie,"aria-required":Oe,"aria-describedby":ht,required:Oe,tabIndex:Pe,dir:et}),Me&&a.createElement("div",{className:o(E.loaderContainer,t({},E.loaderContainerHasIcon,xt))},a.createElement("div",{className:o(E.loader)},a.createElement(N,{className:o(E.loaderSvg)}))),oe&&a.createElement(g,{content:Tt?Ze:void 0,referenceWrapperClassName:E.tooltipContainer},a.createElement(h,{className:o(E.iconContainer,t(t(t({},E.iconContainerHasIcon,xt),E.iconContainerActive,Tt),E.iconContainerClickable,It)),onClick:Ct,tabIndex:Nt?"0":"-1",ariaLabel:jt},a.createElement(I,{icon:oe,className:o(E.icon),type:"font",size:"small"===se?"16px":"18px"}))),ae&&a.createElement(g,{content:Et?$e:void 0,addKeyboardHideShowTriggersByDefault:!0,referenceWrapperClassName:E.tooltipContainer},a.createElement(h,{className:o(E.iconContainer,t(t(t({},E.iconContainerHasIcon,xt),E.iconContainerActive,Et),E.iconContainerClickable,It)),onClick:Ct,tabIndex:gt?"0":"-1","data-testid":Xe||C(x.TEXT_FIELD_SECONDARY_BUTTON,re),ariaLabel:Ft},a.createElement(I,{icon:ae,className:o(E.icon),type:"font",size:"small"===se?"16px":"18px"})))),yt&&a.createElement(j,{type:"text2",color:"secondary",className:o(E.subTextContainer)},(me&&me.text||at&&ze)&&a.createElement("span",{className:o(E.subTextContainerStatus)},at?ze:me.text),Ee&&a.createElement("span",{className:o(E.counter),"aria-label":v.CHAR},pt&&pt.length||0,"number"==typeof He&&"/".concat(He),a.createElement(T,{id:ht,text:"Maximum of ".concat(He," characters")})))))}));export{L as default};
+import{slicedToArray as e,defineProperty as o}from"../../../_virtual/_rollupPluginBabelHelpers.js";import t from"classnames";import a,{forwardRef as n,useState as r,useRef as i,useCallback as l,useMemo as s,useEffect as c}from"react";import d from"../../hooks/useDebounceEvent/index.js";import m from"../FieldLabel/FieldLabel.js";import{TextFieldFeedbackState as u,TextFieldTextType as p,FEEDBACK_CLASSES as v,SIZE_MAPPER as f,TextFieldAriaLabel as b}from"./TextFieldConstants.js";import{BASE_SIZES as C}from"../../constants/sizes.js";import x from"../../hooks/useMergeRef.js";import{getTestId as y}from"../../tests/testIds.js";import{NOOP as E}from"../../utils/function-utils.js";import{ComponentDefaultTestId as T,ComponentVibeId as h}from"../../tests/constants.js";import{withStaticProps as N}from"../../types/withStaticProps.js";import"../../utils/colors-vars-map.js";import g from"./TextField.module.scss.js";import I from"../HiddenText/HiddenText.js";import j from"../../../components/loader/dist/Loader/Loader.js";import F from"../../../components/tooltip/dist/Tooltip/Tooltip.js";import L from"../../../components/clickable/dist/Clickable/Clickable.js";import k from"../../../components/icon/dist/Icon/Icon.js";import D from"../../../components/typography/dist/Text/Text.js";var w={primary:"",secondary:""},H=N(n((function(n,u){var p=n.className,C=void 0===p?"":p,N=n.placeholder,H=void 0===N?"":N,A=n.autoComplete,S=void 0===A?"off":A,_=n.value,q=n.onChange,R=void 0===q?E:q,W=n.onBlur,z=void 0===W?E:W,B=n.onFocus,O=void 0===B?E:B,K=n.onKeyDown,M=void 0===K?E:K,P=n.onWheel,V=void 0===P?E:P,X=n.debounceRate,U=void 0===X?0:X,Y=n.autoFocus,G=void 0!==Y&&Y,J=n.disabled,Q=void 0!==J&&J,Z=n.readonly,$=void 0!==Z&&Z,ee=n.setRef,oe=void 0===ee?E:ee,te=n.iconName,ae=n.secondaryIconName,ne=n.id,re=void 0===ne?"input":ne,ie=n.title,le=void 0===ie?"":ie,se=n.size,ce=void 0===se?"small":se,de=n.validation,me=void 0===de?null:de,ue=n.wrapperClassName,pe=void 0===ue?"":ue,ve=n.onIconClick,fe=void 0===ve?E:ve,be=n.clearOnIconClick,Ce=void 0!==be&&be,xe=n.labelIconName,ye=n.showCharCount,Ee=void 0!==ye&&ye,Te=n.inputAriaLabel,he=n.searchResultsContainerId,Ne=void 0===he?"":he,ge=n.activeDescendant,Ie=void 0===ge?"":ge,je=n.iconsNames,Fe=void 0===je?w:je,Le=n.type,ke=void 0===Le?"text":Le,De=n.maxLength,we=void 0===De?null:De,He=n.allowExceedingMaxLength,Ae=void 0!==He&&He,Se=n.trim,_e=void 0!==Se&&Se,qe=n.role,Re=void 0===qe?"":qe,We=n.required,ze=void 0!==We&&We,Be=n.requiredErrorText,Oe=void 0===Be?"":Be,Ke=n.loading,Me=void 0!==Ke&&Ke,Pe=n["data-testid"],Ve=n.secondaryDataTestId,Xe=n.tabIndex,Ue=n.underline,Ye=void 0!==Ue&&Ue,Ge=n.name,Je=n.controlled,Qe=void 0!==Je&&Je,Ze=n.iconTooltipContent,$e=n.secondaryTooltipContent,eo=n.dir,oo=r(!1),to=e(oo,2),ao=to[0],no=to[1],ro=i(null),io=x(u,ro,oe),lo=l((function(e){ze&&!e.target.value&&no(!0),z(e)}),[z,ze]),so=l((function(e,o){ao&&e&&no(!1),R(e,o||{target:ro.current})}),[R,ao]),co=d({delay:U,onChange:so,initialStateValue:_,trim:_e}),mo=co.inputValue,uo=co.onEventChanged,po=co.clearValue,vo=s((function(){return Qe?_:mo}),[Qe,_,mo]),fo=l((function(e){Qe?so(e.target.value,e):uo(e)}),[Qe,so,uo]),bo=s((function(){return ae&&vo?ae:te}),[te,ae,vo]),Co=l((function(){Q||(Ce&&(ro.current&&ro.current.focus(),ro.current.value="",Qe?so(""):po()),fe(bo))}),[Q,Ce,fe,bo,Qe,so,po]),xo=s((function(){return"number"==typeof we&&vo&&vo.length>we?v.error:me&&me.status||ao?v[ao?"error":me.status]:""}),[we,me,ao,vo]),yo=te||ae,Eo=Ee||me&&me.text||ao&&Oe,To=ae===bo,ho=te===bo,No=(fe!==E||Fe.primary||Ze)&&vo&&te.length&&ho,go=(ae||$e)&&To&&!!vo,Io=Ae?"".concat(re,"-allow-exceeding-max-length-text"):void 0;c((function(){if((null==ro?void 0:ro.current)&&G){var e=requestAnimationFrame((function(){return ro.current.focus()}));return function(){return cancelAnimationFrame(e)}}}),[ro,G]);var jo=fe!==E||Ce,Fo=Fe.primary||Ze,Lo=Fe.secondary||$e;return a.createElement("div",{className:t(g.textField,pe,o(o({},g.disabled,Q),g.onlyUnderline,Ye)),role:Re,"aria-busy":Me},a.createElement("div",{className:t(g.labelWrapper)},a.createElement(m,{labelText:le,icon:xe,labelFor:re,required:ze}),a.createElement("div",{className:t(g.inputWrapper,f[ce],xo)},a.createElement("input",{className:t(C,g.input,o(o({},g.inputHasIcon,!!yo),g.readOnly,$)),placeholder:H,autoComplete:S,value:vo,onChange:fo,disabled:Q,readOnly:$,ref:io,type:ke,id:re,"data-testid":Pe||y(T.TEXT_FIELD,re),"data-vibe":h.TEXT_FIELD,name:Ge,onBlur:lo,onFocus:O,onKeyDown:M,onWheel:V,maxLength:"number"!=typeof we||Ae?void 0:we,role:Ne&&"combobox","aria-label":Te||H,"aria-invalid":me&&"error"===me.status||ao,"aria-owns":Ne,"aria-activedescendant":Ie,"aria-required":ze,"aria-describedby":Io,required:ze,tabIndex:Xe,dir:eo}),Me&&a.createElement("div",{className:t(g.loaderContainer,o({},g.loaderContainerHasIcon,yo))},a.createElement("div",{className:t(g.loader)},a.createElement(j,{className:t(g.loaderSvg)}))),te&&a.createElement(F,{content:ho?Ze:void 0,referenceWrapperClassName:g.tooltipContainer},a.createElement(L,{className:t(g.iconContainer,o(o(o({},g.iconContainerHasIcon,yo),g.iconContainerActive,ho),g.iconContainerClickable,jo)),onClick:Co,tabIndex:No?"0":"-1",ariaLabel:Fo},a.createElement(k,{icon:te,className:t(g.icon),iconType:"font",iconSize:"small"===ce?"16px":"18px"}))),ae&&a.createElement(F,{content:To?$e:void 0,addKeyboardHideShowTriggersByDefault:!0,referenceWrapperClassName:g.tooltipContainer},a.createElement(L,{className:t(g.iconContainer,o(o(o({},g.iconContainerHasIcon,yo),g.iconContainerActive,To),g.iconContainerClickable,jo)),onClick:Co,tabIndex:go?"0":"-1","data-testid":Ve||y(T.TEXT_FIELD_SECONDARY_BUTTON,re),ariaLabel:Lo},a.createElement(k,{icon:ae,className:t(g.icon),iconType:"font",iconSize:"small"===ce?"16px":"18px"})))),Eo&&a.createElement(D,{type:"text2",color:"secondary",className:t(g.subTextContainer)},(me&&me.text||ao&&Oe)&&a.createElement("span",{className:t(g.subTextContainerStatus)},ao?Oe:me.text),Ee&&a.createElement("span",{className:t(g.counter),"aria-label":b.CHAR},vo&&vo.length||0,"number"==typeof we&&"/".concat(we),a.createElement(I,{id:Io,text:"Maximum of ".concat(we," characters")})))))})),{sizes:C,feedbacks:u,types:p});export{H as default};
 //# sourceMappingURL=TextField.js.map

package/dist/src/components/TextField/TextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.js","sources":["../../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { type ChangeEventHandler, forwardRef, useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport useDebounceEvent from \"../../hooks/useDebounceEvent\";\nimport { Icon } from \"@vibe/icon\";\nimport { Loader } from \"@vibe/loader\";\nimport { Text } from \"@vibe/typography\";\nimport FieldLabel from \"../FieldLabel/FieldLabel\";\nimport { FEEDBACK_CLASSES, SIZE_MAPPER, TextFieldAriaLabel } from \"./TextFieldConstants\";\nimport { type TextFieldType, type TextFieldSize } from \"./TextField.types\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { Clickable } from \"@vibe/clickable\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { NOOP } from \"../../utils/function-utils\";\nimport { ComponentDefaultTestId, ComponentVibeId } from \"../../tests/constants\";\nimport { type VibeComponentProps } from \"../../types\";\nimport styles from \"./TextField.module.scss\";\nimport { Tooltip } from \"@vibe/tooltip\";\nimport { HiddenText } from \"../HiddenText\";\n\nconst EMPTY_OBJECT = { primary: \"\", secondary: \"\" };\n\nexport interface TextFieldProps extends VibeComponentProps {\n  /**\n   * The placeholder text displayed when the input is empty.\n   */\n  placeholder?: string;\n  /**\n   * Configures the browser's autocomplete behavior.\n   */\n  autoComplete?: string;\n  /**\n   * The current value of the text field.\n   */\n  value?: string;\n  /**\n   * Callback fired when the text field value changes.\n   */\n  onChange?: (\n    value: string,\n    event: React.ChangeEvent<HTMLInputElement> | Pick<React.ChangeEvent<HTMLInputElement>, \"target\">\n  ) => void;\n  /**\n   * Callback fired when the text field loses focus.\n   */\n  onBlur?: (event: React.FocusEvent) => void;\n  /**\n   * Callback fired when the text field gains focus.\n   */\n  onFocus?: (event: React.FocusEvent) => void;\n  /**\n   * Callback fired when a key is pressed inside the text field.\n   */\n  onKeyDown?: (event: React.KeyboardEvent) => void;\n  /**\n   * Callback fired when the mouse wheel is used inside the text field.\n   */\n  onWheel?: (event: React.WheelEvent) => void;\n  /**\n   * The debounce rate for input value changes.\n   */\n  debounceRate?: number;\n  /**\n   * If true, the input is automatically focused on mount.\n   */\n  autoFocus?: boolean;\n  /**\n   * If true, disables the text field.\n   */\n  disabled?: boolean;\n  /**\n   * If true, makes the text field read-only.\n   */\n  readonly?: boolean;\n  /**\n   * A function to set a reference to the input element.\n   */\n  setRef?: (node: HTMLElement) => void;\n  /**\n   * The primary icon displayed inside the text field.\n   */\n  iconName?: string | React.FunctionComponent | null;\n  /**\n   * The secondary icon displayed inside the text field.\n   */\n  secondaryIconName?: string | React.FunctionComponent | null;\n  /**\n   * The label displayed above the text field.\n   */\n  title?: string;\n  /**\n   * The size of the text field.\n   */\n  size?: TextFieldSize;\n  /**\n   * Validation state for the text field.\n   */\n  validation?: { status?: \"error\" | \"success\"; text?: string | React.ReactNode };\n  /**\n   * Class name applied to the text field wrapper.\n   */\n  wrapperClassName?: string;\n  /**\n   * Callback fired when the icon inside the text field is clicked.\n   */\n  onIconClick?: (icon: string | React.FunctionComponent | null) => void;\n  /**\n   * If true, clears the input when the icon is clicked.\n   */\n  clearOnIconClick?: boolean;\n  /**\n   * The icon displayed inside the label.\n   */\n  labelIconName?: string | React.FunctionComponent | null;\n  /**\n   * If true, displays the character count.\n   */\n  showCharCount?: boolean;\n  /**\n   * The ARIA label for the input field.\n   */\n  inputAriaLabel?: string;\n  /**\n   * The ID of the container where search results are displayed.\n   */\n  searchResultsContainerId?: string;\n  /**\n   * The ID of the currently active search result.\n   */\n  activeDescendant?: string;\n  /**\n   * Icon labels for accessibility.\n   */\n  iconsNames?: {\n    primary: string;\n    secondary: string;\n  };\n  /**\n   * The type of the text field.\n   */\n  type?: TextFieldType;\n  /**\n   * The maximum number of characters allowed.\n   */\n  maxLength?: number;\n  /**\n   * If true, allows the user to exceed the character limit set by `maxLength`.\n   */\n  allowExceedingMaxLength?: boolean;\n  /**\n   * If true, trims whitespace from the input value.\n   */\n  trim?: boolean;\n  /**\n   * The ARIA role of the text field.\n   */\n  role?: string;\n  /**\n   * If true, marks the input as required.\n   */\n  required?: boolean;\n  /**\n   * The error message displayed when a required field is left empty.\n   */\n  requiredErrorText?: string;\n  /**\n   * If true, displays a loading indicator inside the text field.\n   */\n  loading?: boolean;\n  /**\n   * Test ID for the secondary icon.\n   */\n  secondaryDataTestId?: string;\n  /**\n   * The tab order of the input field.\n   */\n  tabIndex?: number;\n  /**\n   * The name attribute for the input field.\n   */\n  name?: string;\n  /**\n   * If true, renders only an underline style for the text field.\n   */\n  underline?: boolean;\n  /**\n   * If true, the component is controlled by an external state.\n   */\n  controlled?: boolean;\n  /**\n   * Tooltip content for the primary icon.\n   */\n  iconTooltipContent?: string;\n  /**\n   * Tooltip content for the secondary icon.\n   */\n  secondaryTooltipContent?: string;\n  /**\n   * The text direction of the input.\n   */\n  dir?: \"ltr\" | \"rtl\" | \"auto\";\n}\n\nconst TextField = forwardRef(\n  (\n    {\n      className = \"\",\n      placeholder = \"\",\n      autoComplete = \"off\",\n      value,\n      onChange = NOOP,\n      onBlur = NOOP,\n      onFocus = NOOP,\n      onKeyDown = NOOP,\n      onWheel = NOOP,\n      debounceRate = 0,\n      autoFocus = false,\n      disabled = false,\n      readonly = false,\n      setRef = NOOP,\n      iconName,\n      secondaryIconName,\n      id = \"input\",\n      title = \"\",\n      size = \"small\",\n      validation = null,\n      wrapperClassName = \"\",\n      onIconClick = NOOP,\n      clearOnIconClick = false,\n      labelIconName,\n      showCharCount = false,\n      inputAriaLabel,\n      searchResultsContainerId = \"\",\n      activeDescendant = \"\",\n      iconsNames = EMPTY_OBJECT,\n      type = \"text\",\n      maxLength = null,\n      allowExceedingMaxLength = false,\n      trim = false,\n      role = \"\",\n      required = false,\n      requiredErrorText = \"\",\n      loading = false,\n      \"data-testid\": dataTestId,\n      secondaryDataTestId,\n      tabIndex,\n      underline = false,\n      name,\n      controlled = false,\n      iconTooltipContent,\n      secondaryTooltipContent,\n      dir\n    }: TextFieldProps,\n    ref: React.ForwardedRef<unknown>\n  ) => {\n    const [isRequiredAndEmpty, setIsRequiredAndEmpty] = useState(false);\n\n    const inputRef = useRef(null);\n    const mergedRef = useMergeRef(ref, inputRef, setRef);\n\n    const onBlurCallback = useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        if (required && !e.target.value) {\n          setIsRequiredAndEmpty(true);\n        }\n        onBlur(e);\n      },\n      [onBlur, required]\n    );\n\n    const onChangeCallback = useCallback(\n      (value: string, e?: React.ChangeEvent<HTMLInputElement>) => {\n        if (isRequiredAndEmpty && value) {\n          setIsRequiredAndEmpty(false);\n        }\n        const event = e || { target: inputRef.current };\n        onChange(value, event);\n      },\n      [onChange, isRequiredAndEmpty]\n    );\n\n    const {\n      inputValue: uncontrolledInput,\n      onEventChanged,\n      clearValue\n    } = useDebounceEvent({\n      delay: debounceRate,\n      onChange: onChangeCallback,\n      initialStateValue: value,\n      trim\n    });\n\n    const inputValue = useMemo(() => {\n      return controlled ? value : uncontrolledInput;\n    }, [controlled, value, uncontrolledInput]);\n\n    const handleChange = useCallback<ChangeEventHandler<HTMLInputElement>>(\n      event => {\n        controlled ? onChangeCallback(event.target.value, event) : onEventChanged(event);\n      },\n      [controlled, onChangeCallback, onEventChanged]\n    );\n\n    const currentStateIconName = useMemo(() => {\n      if (secondaryIconName) {\n        return inputValue ? secondaryIconName : iconName;\n      }\n      return iconName;\n    }, [iconName, secondaryIconName, inputValue]);\n\n    const onIconClickCallback = useCallback(() => {\n      if (disabled) {\n        return;\n      }\n\n      if (clearOnIconClick) {\n        if (inputRef.current) {\n          inputRef.current.focus();\n        }\n        // Do it cause otherwise the value is not cleared in target object\n        inputRef.current.value = \"\";\n        controlled ? onChangeCallback(\"\") : clearValue();\n      }\n      onIconClick(currentStateIconName);\n    }, [disabled, clearOnIconClick, onIconClick, currentStateIconName, controlled, onChangeCallback, clearValue]);\n\n    const validationClass = useMemo(() => {\n      if (typeof maxLength === \"number\" && inputValue && inputValue.length > maxLength) {\n        return FEEDBACK_CLASSES.error;\n      }\n\n      if ((!validation || !validation.status) && !isRequiredAndEmpty) {\n        return \"\";\n      }\n      const status = isRequiredAndEmpty ? \"error\" : validation.status;\n      return FEEDBACK_CLASSES[status];\n    }, [maxLength, validation, isRequiredAndEmpty, inputValue]);\n\n    const hasIcon = iconName || secondaryIconName;\n    const shouldShowExtraText =\n      showCharCount || (validation && validation.text) || (isRequiredAndEmpty && requiredErrorText);\n    const isSecondary = secondaryIconName === currentStateIconName;\n    const isPrimary = iconName === currentStateIconName;\n    const shouldFocusOnPrimaryIcon =\n      (onIconClick !== NOOP || iconsNames.primary || iconTooltipContent) && inputValue && iconName.length && isPrimary;\n    const shouldFocusOnSecondaryIcon = (secondaryIconName || secondaryTooltipContent) && isSecondary && !!inputValue;\n    const allowExceedingMaxLengthTextId = allowExceedingMaxLength ? `${id}-allow-exceeding-max-length-text` : undefined;\n\n    useEffect(() => {\n      if (!inputRef?.current || !autoFocus) {\n        return;\n      }\n\n      const animationFrame = requestAnimationFrame(() => inputRef.current.focus());\n      return () => cancelAnimationFrame(animationFrame);\n    }, [inputRef, autoFocus]);\n\n    const isIconContainerClickable = onIconClick !== NOOP || clearOnIconClick;\n\n    const primaryIconLabel = iconsNames.primary || iconTooltipContent;\n    const secondaryIconLabel = iconsNames.secondary || secondaryTooltipContent;\n\n    return (\n      <div\n        className={cx(styles.textField, wrapperClassName, {\n          [styles.disabled]: disabled,\n          [styles.onlyUnderline]: underline\n        })}\n        role={role}\n        aria-busy={loading}\n      >\n        <div className={cx(styles.labelWrapper)}>\n          <FieldLabel labelText={title} icon={labelIconName} labelFor={id} required={required} />\n          <div className={cx(styles.inputWrapper, SIZE_MAPPER[size], validationClass)}>\n            {/*Programatical input (tabIndex={-1}) is working fine with aria-activedescendant attribute despite the rule*/}\n            {/*eslint-disable-next-line jsx-a11y/aria-activedescendant-has-tabindex*/}\n            <input\n              className={cx(className, styles.input, {\n                [styles.inputHasIcon]: !!hasIcon,\n                [styles.readOnly]: readonly\n              })}\n              placeholder={placeholder}\n              autoComplete={autoComplete}\n              value={inputValue}\n              onChange={handleChange}\n              disabled={disabled}\n              readOnly={readonly}\n              ref={mergedRef}\n              type={type}\n              id={id}\n              data-testid={dataTestId || getTestId(ComponentDefaultTestId.TEXT_FIELD, id)}\n              data-vibe={ComponentVibeId.TEXT_FIELD}\n              name={name}\n              onBlur={onBlurCallback}\n              onFocus={onFocus}\n              onKeyDown={onKeyDown}\n              onWheel={onWheel}\n              maxLength={typeof maxLength === \"number\" && !allowExceedingMaxLength ? maxLength : undefined}\n              role={searchResultsContainerId && \"combobox\"} // For voice reader\n              aria-label={inputAriaLabel || placeholder}\n              aria-invalid={(validation && validation.status === \"error\") || isRequiredAndEmpty}\n              aria-owns={searchResultsContainerId}\n              aria-activedescendant={activeDescendant}\n              aria-required={required}\n              aria-describedby={allowExceedingMaxLengthTextId}\n              required={required}\n              tabIndex={tabIndex}\n              dir={dir}\n            />\n            {loading && (\n              <div\n                className={cx(styles.loaderContainer, {\n                  [styles.loaderContainerHasIcon]: hasIcon\n                })}\n              >\n                <div className={cx(styles.loader)}>\n                  <Loader className={cx(styles.loaderSvg)} />\n                </div>\n              </div>\n            )}\n            {iconName && (\n              <Tooltip\n                content={isPrimary ? iconTooltipContent : undefined}\n                referenceWrapperClassName={styles.tooltipContainer}\n              >\n                <Clickable\n                  className={cx(styles.iconContainer, {\n                    [styles.iconContainerHasIcon]: hasIcon,\n                    [styles.iconContainerActive]: isPrimary,\n                    [styles.iconContainerClickable]: isIconContainerClickable\n                  })}\n                  onClick={onIconClickCallback}\n                  tabIndex={shouldFocusOnPrimaryIcon ? \"0\" : \"-1\"}\n                  ariaLabel={primaryIconLabel}\n                >\n                  <Icon\n                    icon={iconName}\n                    className={cx(styles.icon)}\n                    type=\"font\"\n                    size={size === \"small\" ? \"16px\" : \"18px\"}\n                  />\n                </Clickable>\n              </Tooltip>\n            )}\n            {secondaryIconName && (\n              <Tooltip\n                content={isSecondary ? secondaryTooltipContent : undefined}\n                addKeyboardHideShowTriggersByDefault\n                referenceWrapperClassName={styles.tooltipContainer}\n              >\n                <Clickable\n                  className={cx(styles.iconContainer, {\n                    [styles.iconContainerHasIcon]: hasIcon,\n                    [styles.iconContainerActive]: isSecondary,\n                    [styles.iconContainerClickable]: isIconContainerClickable\n                  })}\n                  onClick={onIconClickCallback}\n                  tabIndex={shouldFocusOnSecondaryIcon ? \"0\" : \"-1\"}\n                  data-testid={secondaryDataTestId || getTestId(ComponentDefaultTestId.TEXT_FIELD_SECONDARY_BUTTON, id)}\n                  ariaLabel={secondaryIconLabel}\n                >\n                  <Icon\n                    icon={secondaryIconName}\n                    className={cx(styles.icon)}\n                    type=\"font\"\n                    size={size === \"small\" ? \"16px\" : \"18px\"}\n                  />\n                </Clickable>\n              </Tooltip>\n            )}\n          </div>\n          {shouldShowExtraText && (\n            <Text type=\"text2\" color=\"secondary\" className={cx(styles.subTextContainer)}>\n              {((validation && validation.text) || (isRequiredAndEmpty && requiredErrorText)) && (\n                <span className={cx(styles.subTextContainerStatus)}>\n                  {isRequiredAndEmpty ? requiredErrorText : validation.text}\n                </span>\n              )}\n              {showCharCount && (\n                <span className={cx(styles.counter)} aria-label={TextFieldAriaLabel.CHAR}>\n                  {(inputValue && inputValue.length) || 0}\n                  {typeof maxLength === \"number\" && `/${maxLength}`}\n                  <HiddenText id={allowExceedingMaxLengthTextId} text={`Maximum of ${maxLength} characters`} />\n                </span>\n              )}\n            </Text>\n          )}\n        </div>\n      </div>\n    );\n  }\n);\n\nexport default TextField;\n"],"names":["EMPTY_OBJECT","primary","secondary","TextField","forwardRef","_ref","ref","_ref$className","className","_ref$placeholder","placeholder","_ref$autoComplete","autoComplete","value","_ref$onChange","onChange","NOOP","_ref$onBlur","onBlur","_ref$onFocus","onFocus","_ref$onKeyDown","onKeyDown","_ref$onWheel","onWheel","_ref$debounceRate","debounceRate","_ref$autoFocus","autoFocus","_ref$disabled","disabled","_ref$readonly","readonly","_ref$setRef","setRef","iconName","secondaryIconName","_ref$id","id","_ref$title","title","_ref$size","size","_ref$validation","validation","_ref$wrapperClassName","wrapperClassName","_ref$onIconClick","onIconClick","_ref$clearOnIconClick","clearOnIconClick","labelIconName","_ref$showCharCount","showCharCount","inputAriaLabel","_ref$searchResultsCon","searchResultsContainerId","_ref$activeDescendant","activeDescendant","_ref$iconsNames","iconsNames","_ref$type","type","_ref$maxLength","maxLength","_ref$allowExceedingMa","allowExceedingMaxLength","_ref$trim","trim","_ref$role","role","_ref$required","required","_ref$requiredErrorTex","requiredErrorText","_ref$loading","loading","dataTestId","secondaryDataTestId","tabIndex","_ref$underline","underline","name","_ref$controlled","controlled","iconTooltipContent","secondaryTooltipContent","dir","_useState","useState","_useState2","_slicedToArray","isRequiredAndEmpty","setIsRequiredAndEmpty","inputRef","useRef","mergedRef","useMergeRef","onBlurCallback","useCallback","e","target","onChangeCallback","current","_useDebounceEvent","useDebounceEvent","delay","initialStateValue","uncontrolledInput","inputValue","onEventChanged","clearValue","useMemo","handleChange","event","currentStateIconName","onIconClickCallback","focus","validationClass","length","FEEDBACK_CLASSES","error","status","hasIcon","shouldShowExtraText","text","isSecondary","isPrimary","shouldFocusOnPrimaryIcon","shouldFocusOnSecondaryIcon","allowExceedingMaxLengthTextId","concat","undefined","useEffect","animationFrame","requestAnimationFrame","cancelAnimationFrame","isIconContainerClickable","primaryIconLabel","secondaryIconLabel","React","createElement","cx","styles","textField","_defineProperty","onlyUnderline","labelWrapper","FieldLabel","labelText","icon","labelFor","inputWrapper","SIZE_MAPPER","input","inputHasIcon","readOnly","getTestId","ComponentDefaultTestId","TEXT_FIELD","ComponentVibeId","loaderContainer","loaderContainerHasIcon","loader","Loader","loaderSvg","Tooltip","content","referenceWrapperClassName","tooltipContainer","Clickable","iconContainer","iconContainerHasIcon","iconContainerActive","iconContainerClickable","onClick","ariaLabel","Icon","addKeyboardHideShowTriggersByDefault","TEXT_FIELD_SECONDARY_BUTTON","Text","color","subTextContainer","subTextContainerStatus","counter","TextFieldAriaLabel","CHAR","HiddenText"],"mappings":"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"}
+{"version":3,"file":"TextField.js","sources":["../../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, {\n  ChangeEvent,\n  type ChangeEventHandler,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState\n} from \"react\";\nimport useDebounceEvent from \"../../hooks/useDebounceEvent\";\nimport { Icon } from \"@vibe/icon\";\nimport { Loader } from \"@vibe/loader\";\nimport { Text } from \"@vibe/typography\";\nimport FieldLabel from \"../FieldLabel/FieldLabel\";\nimport {\n  FEEDBACK_CLASSES,\n  SIZE_MAPPER,\n  TextFieldAriaLabel,\n  TextFieldFeedbackState as TextFieldFeedbackStateEnum,\n  TextFieldTextType as TextFieldTextTypeEnum\n} from \"./TextFieldConstants\";\nimport { type TextFieldType, type TextFieldSize } from \"./TextField.types\";\nimport { BASE_SIZES } from \"../../constants/sizes\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { Clickable } from \"@vibe/clickable\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { NOOP } from \"../../utils/function-utils\";\nimport { ComponentDefaultTestId, ComponentVibeId } from \"../../tests/constants\";\nimport { type VibeComponentProps, withStaticProps } from \"../../types\";\nimport styles from \"./TextField.module.scss\";\nimport { Tooltip } from \"@vibe/tooltip\";\nimport { HiddenText } from \"../HiddenText\";\n\nconst EMPTY_OBJECT = { primary: \"\", secondary: \"\" };\n\nexport interface TextFieldProps extends VibeComponentProps {\n  /**\n   * The placeholder text displayed when the input is empty.\n   */\n  placeholder?: string;\n  /**\n   * Configures the browser's autocomplete behavior.\n   */\n  autoComplete?: string;\n  /**\n   * The current value of the text field.\n   */\n  value?: string;\n  /**\n   * Callback fired when the text field value changes.\n   */\n  onChange?: (\n    value: string,\n    event: React.ChangeEvent<HTMLInputElement> | Pick<React.ChangeEvent<HTMLInputElement>, \"target\">\n  ) => void;\n  /**\n   * Callback fired when the text field loses focus.\n   */\n  onBlur?: (event: React.FocusEvent) => void;\n  /**\n   * Callback fired when the text field gains focus.\n   */\n  onFocus?: (event: React.FocusEvent) => void;\n  /**\n   * Callback fired when a key is pressed inside the text field.\n   */\n  onKeyDown?: (event: React.KeyboardEvent) => void;\n  /**\n   * Callback fired when the mouse wheel is used inside the text field.\n   */\n  onWheel?: (event: React.WheelEvent) => void;\n  /**\n   * The debounce rate for input value changes.\n   */\n  debounceRate?: number;\n  /**\n   * If true, the input is automatically focused on mount.\n   */\n  autoFocus?: boolean;\n  /**\n   * If true, disables the text field.\n   */\n  disabled?: boolean;\n  /**\n   * If true, makes the text field read-only.\n   */\n  readonly?: boolean;\n  /**\n   * A function to set a reference to the input element.\n   */\n  setRef?: (node: HTMLElement) => void;\n  /**\n   * The primary icon displayed inside the text field.\n   */\n  iconName?: string | React.FunctionComponent | null;\n  /**\n   * The secondary icon displayed inside the text field.\n   */\n  secondaryIconName?: string | React.FunctionComponent | null;\n  /**\n   * The label displayed above the text field.\n   */\n  title?: string;\n  /**\n   * The size of the text field.\n   */\n  size?: TextFieldSize;\n  /**\n   * Validation state for the text field.\n   */\n  validation?: { status?: \"error\" | \"success\"; text?: string | React.ReactNode };\n  /**\n   * Class name applied to the text field wrapper.\n   */\n  wrapperClassName?: string;\n  /**\n   * Callback fired when the icon inside the text field is clicked.\n   */\n  onIconClick?: (icon: string | React.FunctionComponent | null) => void;\n  /**\n   * If true, clears the input when the icon is clicked.\n   */\n  clearOnIconClick?: boolean;\n  /**\n   * The icon displayed inside the label.\n   */\n  labelIconName?: string | React.FunctionComponent | null;\n  /**\n   * If true, displays the character count.\n   */\n  showCharCount?: boolean;\n  /**\n   * The ARIA label for the input field.\n   */\n  inputAriaLabel?: string;\n  /**\n   * The ID of the container where search results are displayed.\n   */\n  searchResultsContainerId?: string;\n  /**\n   * The ID of the currently active search result.\n   */\n  activeDescendant?: string;\n  /**\n   * Icon labels for accessibility.\n   */\n  iconsNames?: {\n    primary: string;\n    secondary: string;\n  };\n  /**\n   * The type of the text field.\n   */\n  type?: TextFieldType;\n  /**\n   * The maximum number of characters allowed.\n   */\n  maxLength?: number;\n  /**\n   * If true, allows the user to exceed the character limit set by `maxLength`.\n   */\n  allowExceedingMaxLength?: boolean;\n  /**\n   * If true, trims whitespace from the input value.\n   */\n  trim?: boolean;\n  /**\n   * The ARIA role of the text field.\n   */\n  role?: string;\n  /**\n   * If true, marks the input as required.\n   */\n  required?: boolean;\n  /**\n   * The error message displayed when a required field is left empty.\n   */\n  requiredErrorText?: string;\n  /**\n   * If true, displays a loading indicator inside the text field.\n   */\n  loading?: boolean;\n  /**\n   * Test ID for the secondary icon.\n   */\n  secondaryDataTestId?: string;\n  /**\n   * The tab order of the input field.\n   */\n  tabIndex?: number;\n  /**\n   * The name attribute for the input field.\n   */\n  name?: string;\n  /**\n   * If true, renders only an underline style for the text field.\n   */\n  underline?: boolean;\n  /**\n   * If true, the component is controlled by an external state.\n   */\n  controlled?: boolean;\n  /**\n   * Tooltip content for the primary icon.\n   */\n  iconTooltipContent?: string;\n  /**\n   * Tooltip content for the secondary icon.\n   */\n  secondaryTooltipContent?: string;\n  /**\n   * The text direction of the input.\n   */\n  dir?: \"ltr\" | \"rtl\" | \"auto\";\n}\n\nconst TextField = forwardRef(\n  (\n    {\n      className = \"\",\n      placeholder = \"\",\n      autoComplete = \"off\",\n      value,\n      onChange = NOOP,\n      onBlur = NOOP,\n      onFocus = NOOP,\n      onKeyDown = NOOP,\n      onWheel = NOOP,\n      debounceRate = 0,\n      autoFocus = false,\n      disabled = false,\n      readonly = false,\n      setRef = NOOP,\n      iconName,\n      secondaryIconName,\n      id = \"input\",\n      title = \"\",\n      size = \"small\",\n      validation = null,\n      wrapperClassName = \"\",\n      onIconClick = NOOP,\n      clearOnIconClick = false,\n      labelIconName,\n      showCharCount = false,\n      inputAriaLabel,\n      searchResultsContainerId = \"\",\n      activeDescendant = \"\",\n      iconsNames = EMPTY_OBJECT,\n      type = \"text\",\n      maxLength = null,\n      allowExceedingMaxLength = false,\n      trim = false,\n      role = \"\",\n      required = false,\n      requiredErrorText = \"\",\n      loading = false,\n      \"data-testid\": dataTestId,\n      secondaryDataTestId,\n      tabIndex,\n      underline = false,\n      name,\n      controlled = false,\n      iconTooltipContent,\n      secondaryTooltipContent,\n      dir\n    }: TextFieldProps,\n    ref: React.ForwardedRef<unknown>\n  ) => {\n    const [isRequiredAndEmpty, setIsRequiredAndEmpty] = useState(false);\n\n    const inputRef = useRef(null);\n    const mergedRef = useMergeRef(ref, inputRef, setRef);\n\n    const onBlurCallback = useCallback(\n      (e: React.FocusEvent<HTMLInputElement>) => {\n        if (required && !e.target.value) {\n          setIsRequiredAndEmpty(true);\n        }\n        onBlur(e);\n      },\n      [onBlur, required]\n    );\n\n    const onChangeCallback = useCallback(\n      (value: string, e?: React.ChangeEvent<HTMLInputElement>) => {\n        if (isRequiredAndEmpty && value) {\n          setIsRequiredAndEmpty(false);\n        }\n        const event = e || { target: inputRef.current };\n        onChange(value, event);\n      },\n      [onChange, isRequiredAndEmpty]\n    );\n\n    const {\n      inputValue: uncontrolledInput,\n      onEventChanged,\n      clearValue\n    } = useDebounceEvent({\n      delay: debounceRate,\n      onChange: onChangeCallback,\n      initialStateValue: value,\n      trim\n    });\n\n    const inputValue = useMemo(() => {\n      return controlled ? value : uncontrolledInput;\n    }, [controlled, value, uncontrolledInput]);\n\n    const handleChange = useCallback<ChangeEventHandler<HTMLInputElement>>(\n      event => {\n        controlled ? onChangeCallback(event.target.value, event) : onEventChanged(event);\n      },\n      [controlled, onChangeCallback, onEventChanged]\n    );\n\n    const currentStateIconName = useMemo(() => {\n      if (secondaryIconName) {\n        return inputValue ? secondaryIconName : iconName;\n      }\n      return iconName;\n    }, [iconName, secondaryIconName, inputValue]);\n\n    const onIconClickCallback = useCallback(() => {\n      if (disabled) {\n        return;\n      }\n\n      if (clearOnIconClick) {\n        if (inputRef.current) {\n          inputRef.current.focus();\n        }\n        // Do it cause otherwise the value is not cleared in target object\n        inputRef.current.value = \"\";\n        controlled ? onChangeCallback(\"\") : clearValue();\n      }\n      onIconClick(currentStateIconName);\n    }, [disabled, clearOnIconClick, onIconClick, currentStateIconName, controlled, onChangeCallback, clearValue]);\n\n    const validationClass = useMemo(() => {\n      if (typeof maxLength === \"number\" && inputValue && inputValue.length > maxLength) {\n        return FEEDBACK_CLASSES.error;\n      }\n\n      if ((!validation || !validation.status) && !isRequiredAndEmpty) {\n        return \"\";\n      }\n      const status = isRequiredAndEmpty ? \"error\" : validation.status;\n      return FEEDBACK_CLASSES[status];\n    }, [maxLength, validation, isRequiredAndEmpty, inputValue]);\n\n    const hasIcon = iconName || secondaryIconName;\n    const shouldShowExtraText =\n      showCharCount || (validation && validation.text) || (isRequiredAndEmpty && requiredErrorText);\n    const isSecondary = secondaryIconName === currentStateIconName;\n    const isPrimary = iconName === currentStateIconName;\n    const shouldFocusOnPrimaryIcon =\n      (onIconClick !== NOOP || iconsNames.primary || iconTooltipContent) && inputValue && iconName.length && isPrimary;\n    const shouldFocusOnSecondaryIcon = (secondaryIconName || secondaryTooltipContent) && isSecondary && !!inputValue;\n    const allowExceedingMaxLengthTextId = allowExceedingMaxLength ? `${id}-allow-exceeding-max-length-text` : undefined;\n\n    useEffect(() => {\n      if (!inputRef?.current || !autoFocus) {\n        return;\n      }\n\n      const animationFrame = requestAnimationFrame(() => inputRef.current.focus());\n      return () => cancelAnimationFrame(animationFrame);\n    }, [inputRef, autoFocus]);\n\n    const isIconContainerClickable = onIconClick !== NOOP || clearOnIconClick;\n\n    const primaryIconLabel = iconsNames.primary || iconTooltipContent;\n    const secondaryIconLabel = iconsNames.secondary || secondaryTooltipContent;\n\n    return (\n      <div\n        className={cx(styles.textField, wrapperClassName, {\n          [styles.disabled]: disabled,\n          [styles.onlyUnderline]: underline\n        })}\n        role={role}\n        aria-busy={loading}\n      >\n        <div className={cx(styles.labelWrapper)}>\n          <FieldLabel labelText={title} icon={labelIconName} labelFor={id} required={required} />\n          <div className={cx(styles.inputWrapper, SIZE_MAPPER[size], validationClass)}>\n            {/*Programatical input (tabIndex={-1}) is working fine with aria-activedescendant attribute despite the rule*/}\n            {/*eslint-disable-next-line jsx-a11y/aria-activedescendant-has-tabindex*/}\n            <input\n              className={cx(className, styles.input, {\n                [styles.inputHasIcon]: !!hasIcon,\n                [styles.readOnly]: readonly\n              })}\n              placeholder={placeholder}\n              autoComplete={autoComplete}\n              value={inputValue}\n              onChange={handleChange}\n              disabled={disabled}\n              readOnly={readonly}\n              ref={mergedRef}\n              type={type}\n              id={id}\n              data-testid={dataTestId || getTestId(ComponentDefaultTestId.TEXT_FIELD, id)}\n              data-vibe={ComponentVibeId.TEXT_FIELD}\n              name={name}\n              onBlur={onBlurCallback}\n              onFocus={onFocus}\n              onKeyDown={onKeyDown}\n              onWheel={onWheel}\n              maxLength={typeof maxLength === \"number\" && !allowExceedingMaxLength ? maxLength : undefined}\n              role={searchResultsContainerId && \"combobox\"} // For voice reader\n              aria-label={inputAriaLabel || placeholder}\n              aria-invalid={(validation && validation.status === \"error\") || isRequiredAndEmpty}\n              aria-owns={searchResultsContainerId}\n              aria-activedescendant={activeDescendant}\n              aria-required={required}\n              aria-describedby={allowExceedingMaxLengthTextId}\n              required={required}\n              tabIndex={tabIndex}\n              dir={dir}\n            />\n            {loading && (\n              <div\n                className={cx(styles.loaderContainer, {\n                  [styles.loaderContainerHasIcon]: hasIcon\n                })}\n              >\n                <div className={cx(styles.loader)}>\n                  <Loader className={cx(styles.loaderSvg)} />\n                </div>\n              </div>\n            )}\n            {iconName && (\n              <Tooltip\n                content={isPrimary ? iconTooltipContent : undefined}\n                referenceWrapperClassName={styles.tooltipContainer}\n              >\n                <Clickable\n                  className={cx(styles.iconContainer, {\n                    [styles.iconContainerHasIcon]: hasIcon,\n                    [styles.iconContainerActive]: isPrimary,\n                    [styles.iconContainerClickable]: isIconContainerClickable\n                  })}\n                  onClick={onIconClickCallback}\n                  tabIndex={shouldFocusOnPrimaryIcon ? \"0\" : \"-1\"}\n                  ariaLabel={primaryIconLabel}\n                >\n                  <Icon\n                    icon={iconName}\n                    className={cx(styles.icon)}\n                    iconType=\"font\"\n                    iconSize={size === \"small\" ? \"16px\" : \"18px\"}\n                  />\n                </Clickable>\n              </Tooltip>\n            )}\n            {secondaryIconName && (\n              <Tooltip\n                content={isSecondary ? secondaryTooltipContent : undefined}\n                addKeyboardHideShowTriggersByDefault\n                referenceWrapperClassName={styles.tooltipContainer}\n              >\n                <Clickable\n                  className={cx(styles.iconContainer, {\n                    [styles.iconContainerHasIcon]: hasIcon,\n                    [styles.iconContainerActive]: isSecondary,\n                    [styles.iconContainerClickable]: isIconContainerClickable\n                  })}\n                  onClick={onIconClickCallback}\n                  tabIndex={shouldFocusOnSecondaryIcon ? \"0\" : \"-1\"}\n                  data-testid={secondaryDataTestId || getTestId(ComponentDefaultTestId.TEXT_FIELD_SECONDARY_BUTTON, id)}\n                  ariaLabel={secondaryIconLabel}\n                >\n                  <Icon\n                    icon={secondaryIconName}\n                    className={cx(styles.icon)}\n                    iconType=\"font\"\n                    iconSize={size === \"small\" ? \"16px\" : \"18px\"}\n                  />\n                </Clickable>\n              </Tooltip>\n            )}\n          </div>\n          {shouldShowExtraText && (\n            <Text type=\"text2\" color=\"secondary\" className={cx(styles.subTextContainer)}>\n              {((validation && validation.text) || (isRequiredAndEmpty && requiredErrorText)) && (\n                <span className={cx(styles.subTextContainerStatus)}>\n                  {isRequiredAndEmpty ? requiredErrorText : validation.text}\n                </span>\n              )}\n              {showCharCount && (\n                <span className={cx(styles.counter)} aria-label={TextFieldAriaLabel.CHAR}>\n                  {(inputValue && inputValue.length) || 0}\n                  {typeof maxLength === \"number\" && `/${maxLength}`}\n                  <HiddenText id={allowExceedingMaxLengthTextId} text={`Maximum of ${maxLength} characters`} />\n                </span>\n              )}\n            </Text>\n          )}\n        </div>\n      </div>\n    );\n  }\n);\n\ninterface TextFieldStaticProps {\n  sizes: typeof BASE_SIZES;\n  types: typeof TextFieldTextTypeEnum;\n  feedbacks: typeof TextFieldFeedbackStateEnum;\n}\n\nexport default withStaticProps<TextFieldProps, TextFieldStaticProps, unknown>(TextField, {\n  sizes: BASE_SIZES,\n  feedbacks: TextFieldFeedbackStateEnum,\n  types: TextFieldTextTypeEnum\n});\n"],"names":["EMPTY_OBJECT","primary","secondary","withStaticProps","forwardRef","_ref","ref","_ref$className","className","_ref$placeholder","placeholder","_ref$autoComplete","autoComplete","value","_ref$onChange","onChange","NOOP","_ref$onBlur","onBlur","_ref$onFocus","onFocus","_ref$onKeyDown","onKeyDown","_ref$onWheel","onWheel","_ref$debounceRate","debounceRate","_ref$autoFocus","autoFocus","_ref$disabled","disabled","_ref$readonly","readonly","_ref$setRef","setRef","iconName","secondaryIconName","_ref$id","id","_ref$title","title","_ref$size","size","_ref$validation","validation","_ref$wrapperClassName","wrapperClassName","_ref$onIconClick","onIconClick","_ref$clearOnIconClick","clearOnIconClick","labelIconName","_ref$showCharCount","showCharCount","inputAriaLabel","_ref$searchResultsCon","searchResultsContainerId","_ref$activeDescendant","activeDescendant","_ref$iconsNames","iconsNames","_ref$type","type","_ref$maxLength","maxLength","_ref$allowExceedingMa","allowExceedingMaxLength","_ref$trim","trim","_ref$role","role","_ref$required","required","_ref$requiredErrorTex","requiredErrorText","_ref$loading","loading","dataTestId","secondaryDataTestId","tabIndex","_ref$underline","underline","name","_ref$controlled","controlled","iconTooltipContent","secondaryTooltipContent","dir","_useState","useState","_useState2","_slicedToArray","isRequiredAndEmpty","setIsRequiredAndEmpty","inputRef","useRef","mergedRef","useMergeRef","onBlurCallback","useCallback","e","target","onChangeCallback","current","_useDebounceEvent","useDebounceEvent","delay","initialStateValue","uncontrolledInput","inputValue","onEventChanged","clearValue","useMemo","handleChange","event","currentStateIconName","onIconClickCallback","focus","validationClass","length","FEEDBACK_CLASSES","error","status","hasIcon","shouldShowExtraText","text","isSecondary","isPrimary","shouldFocusOnPrimaryIcon","shouldFocusOnSecondaryIcon","allowExceedingMaxLengthTextId","concat","undefined","useEffect","animationFrame","requestAnimationFrame","cancelAnimationFrame","isIconContainerClickable","primaryIconLabel","secondaryIconLabel","React","createElement","cx","styles","textField","_defineProperty","onlyUnderline","labelWrapper","FieldLabel","labelText","icon","labelFor","inputWrapper","SIZE_MAPPER","input","inputHasIcon","readOnly","getTestId","ComponentDefaultTestId","TEXT_FIELD","ComponentVibeId","loaderContainer","loaderContainerHasIcon","loader","Loader","loaderSvg","Tooltip","content","referenceWrapperClassName","tooltipContainer","Clickable","iconContainer","iconContainerHasIcon","iconContainerActive","iconContainerClickable","onClick","ariaLabel","Icon","iconType","iconSize","addKeyboardHideShowTriggersByDefault","TEXT_FIELD_SECONDARY_BUTTON","Text","color","subTextContainer","subTextContainerStatus","counter","TextFieldAriaLabel","CHAR","HiddenText","sizes","BASE_SIZES","feedbacks","TextFieldFeedbackStateEnum","types","TextFieldTextTypeEnum"],"mappings":"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"}

package/dist/src/components/TextField/TextField.module.scss.js

@@ -1,2 +1,2 @@
-var e={textField:"textField_4e5f00ef75",labelWrapper:"labelWrapper_6ebfe43bcb",subTextContainer:"subTextContainer_8effc9c250",counter:"counter_0cc44b01a7",disabled:"disabled_5bea78403b",icon:"icon_bb6d015f4f",inputWrapper:"inputWrapper_bb6d015f4f",input:"input_0e9336a579",iconContainer:"iconContainer_dca06dbd03",iconContainerHasIcon:"iconContainerHasIcon_526a07888e",readOnly:"readOnly_0535fdf41b",inputHover:"inputHover_482fac67c0",inputActive:"inputActive_b277b1d760",inputHasIcon:"inputHasIcon_c6711c4a84",round:"round_08239fc1c5",square:"square_18e7027ec7",onlyUnderline:"onlyUnderline_37e4cc9f3e",tooltipContainer:"tooltipContainer_114caba454",wrapperSizeMedium:"wrapperSizeMedium_d272b92ea6",wrapperSizeLarge:"wrapperSizeLarge_4f2c1cf313",iconContainerActive:"iconContainerActive_a7f31623e1",iconContainerClickable:"iconContainerClickable_8c4c6d0c5d",inputErrorValidation:"inputErrorValidation_526a07888e",subTextContainerStatus:"subTextContainerStatus_90eebcb139",inputSuccessValidation:"inputSuccessValidation_7348cbb369",wrapperSizeSmall:"wrapperSizeSmall_816ba795fb",inputWrapperSizeSmall:"inputWrapperSizeSmall_884f8e732a",loaderContainer:"loaderContainer_6d49cb3c41",loaderContainerHasIcon:"loaderContainerHasIcon_b44c3506f4",loader:"loader_ea93d9316f",loaderSvg:"loaderSvg_e0aacd0d5a"};!function(e){const n="s_id-695413f4db8e_3_85_1";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+n))return;const i=document.createElement("style");i.id=n,t.firstChild?t.insertBefore(i,t.firstChild):t.appendChild(i),i.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}("/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/* stylelint-enable */\n.textField_4e5f00ef75 {\n  position: relative;\n  box-sizing: border-box;\n  font: var(--font-text2-normal);\n  width: 100%;\n}\n.textField_4e5f00ef75 * {\n  box-sizing: border-box;\n}\n.textField_4e5f00ef75 .labelWrapper_6ebfe43bcb {\n  width: 100%;\n}\n.textField_4e5f00ef75 .subTextContainer_8effc9c250 {\n  display: flex;\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  padding-block: 1px;\n}\n.textField_4e5f00ef75 .subTextContainer_8effc9c250 .counter_0cc44b01a7 {\n  margin-left: auto;\n}\n.textField_4e5f00ef75.disabled_5bea78403b .icon_bb6d015f4f {\n  cursor: not-allowed;\n}\n.textField_4e5f00ef75.disabled_5bea78403b .inputWrapper_bb6d015f4f {\n  cursor: not-allowed;\n}\n.textField_4e5f00ef75.disabled_5bea78403b .inputWrapper_bb6d015f4f .input_0e9336a579 {\n  user-select: none;\n  border: none;\n  pointer-events: none;\n  background-color: var(--disabled-background-color);\n  cursor: not-allowed;\n}\n.textField_4e5f00ef75.disabled_5bea78403b .inputWrapper_bb6d015f4f .input_0e9336a579::placeholder {\n  color: var(--disabled-text-color);\n}\n.textField_4e5f00ef75.disabled_5bea78403b .inputWrapper_bb6d015f4f .iconContainer_dca06dbd03.iconContainerHasIcon_526a07888e:hover {\n  background-color: transparent;\n}\n.textField_4e5f00ef75 .inputWrapper_bb6d015f4f {\n  width: 100%;\n  position: relative;\n}\n.textField_4e5f00ef75 .inputWrapper_bb6d015f4f .input_0e9336a579 {\n  width: 100%;\n  height: 100%;\n  outline: 0;\n  background-color: var(--secondary-background-color);\n  border: 1px solid;\n  border-color: var(--ui-border-color);\n  border-radius: var(--border-radius-small);\n  transition: border-color var(--motion-productive-medium) ease-in;\n  padding: var(--spacing-small) var(--spacing-medium);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  color: var(--primary-text-color);\n}\n.textField_4e5f00ef75 .inputWrapper_bb6d015f4f .input_0e9336a579.readOnly_0535fdf41b {\n  background-color: var(--allgrey-background-color);\n  border: none;\n}\n.textField_4e5f00ef75 .inputWrapper_bb6d015f4f .input_0e9336a579.inputHover_482fac67c0 {\n  border-color: var(--primary-text-color);\n}\n.textField_4e5f00ef75 .inputWrapper_bb6d015f4f .input_0e9336a579:focus,\n.textField_4e5f00ef75 .inputWrapper_bb6d015f4f .input_0e9336a579:active,\n.textField_4e5f00ef75 .inputWrapper_bb6d015f4f .input_0e9336a579.inputActive_b277b1d760 {\n  border-color: var(--primary-color);\n}\n.textField_4e5f00ef75 .inputWrapper_bb6d015f4f .input_0e9336a579::placeholder {\n  color: var(--secondary-text-color);\n  font-weight: 400;\n}\n.textField_4e5f00ef75 .inputWrapper_bb6d015f4f .input_0e9336a579.inputHasIcon_c6711c4a84 {\n  padding: var(--spacing-small) var(--spacing-large) var(--spacing-small) var(--spacing-medium);\n}\n.textField_4e5f00ef75 .inputWrapper_bb6d015f4f .input_0e9336a579.round_08239fc1c5 {\n  border-radius: 50px;\n}\n.textField_4e5f00ef75 .inputWrapper_bb6d015f4f .input_0e9336a579.square_18e7027ec7 {\n  border-radius: 0;\n}\n.textField_4e5f00ef75 .inputWrapper_bb6d015f4f .input_0e9336a579.onlyUnderline_37e4cc9f3e {\n  border-left: none;\n  border-right: none;\n  border-top: none;\n  padding: var(--spacing-small) var(--spacing-large) var(--spacing-small) var(--spacing-xs);\n  border-radius: 0 !important;\n}\n.textField_4e5f00ef75 .inputWrapper_bb6d015f4f .tooltipContainer_114caba454 {\n  position: absolute;\n  top: 50%;\n  right: 0;\n  width: 32px;\n  height: 20px;\n  transform: translateY(-50%);\n}\n.textField_4e5f00ef75 .inputWrapper_bb6d015f4f.wrapperSizeMedium_d272b92ea6 .tooltipContainer_114caba454 {\n  width: 40px;\n}\n.textField_4e5f00ef75 .inputWrapper_bb6d015f4f.wrapperSizeLarge_4f2c1cf313 .tooltipContainer_114caba454 {\n  width: 46px;\n}\n.textField_4e5f00ef75 .inputWrapper_bb6d015f4f .iconContainer_dca06dbd03 {\n  position: absolute;\n  top: 50%;\n  right: 4px;\n  width: 24px;\n  height: 24px;\n  transform: translateY(-50%);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: var(--border-radius-small);\n  opacity: 0;\n  pointer-events: none;\n  -webkit-appearance: none;\n}\n.textField_4e5f00ef75 .inputWrapper_bb6d015f4f .iconContainer_dca06dbd03.iconContainerActive_a7f31623e1.iconContainerHasIcon_526a07888e.iconContainerClickable_8c4c6d0c5d {\n  pointer-events: all;\n  cursor: pointer;\n}\n.textField_4e5f00ef75 .inputWrapper_bb6d015f4f .iconContainer_dca06dbd03.iconContainerActive_a7f31623e1.iconContainerHasIcon_526a07888e:not(.iconContainerClickable_8c4c6d0c5d) {\n  pointer-events: none;\n  cursor: default;\n}\n.textField_4e5f00ef75 .inputWrapper_bb6d015f4f .iconContainer_dca06dbd03.iconContainerActive_a7f31623e1 {\n  opacity: 1;\n}\n.textField_4e5f00ef75 .inputWrapper_bb6d015f4f .iconContainer_dca06dbd03.iconContainerActive_a7f31623e1 .icon_bb6d015f4f {\n  opacity: 1;\n  pointer-events: all;\n  transform: rotate(0) scale(1);\n}\n.textField_4e5f00ef75 .inputWrapper_bb6d015f4f .iconContainer_dca06dbd03.iconContainerHasIcon_526a07888e.iconContainerClickable_8c4c6d0c5d:hover {\n  background-color: var(--primary-background-hover-color);\n}\n.textField_4e5f00ef75 .inputWrapper_bb6d015f4f .iconContainer_dca06dbd03.iconContainerHasIcon_526a07888e.iconContainerClickable_8c4c6d0c5d:active {\n  transform: translateY(-50%) scale(0.9);\n}\n.textField_4e5f00ef75 .inputWrapper_bb6d015f4f .iconContainer_dca06dbd03 .icon_bb6d015f4f {\n  transform: rotate(90deg) scale(0.8);\n  color: var(--icon-color);\n  will-change: transform;\n  pointer-events: none;\n  transition: color var(--motion-productive-short) var(--motion-timing-enter), transform var(--motion-productive-short) var(--motion-timing-enter);\n  font-size: 14px;\n  font-family: var(--font-family);\n}\n.textField_4e5f00ef75 .inputWrapper_bb6d015f4f.inputErrorValidation_526a07888e:hover .input_0e9336a579 {\n  border-color: var(--negative-color);\n}\n.textField_4e5f00ef75 .inputWrapper_bb6d015f4f.inputErrorValidation_526a07888e .input_0e9336a579 {\n  border-color: var(--negative-color);\n}\n.textField_4e5f00ef75 .inputWrapper_bb6d015f4f.inputErrorValidation_526a07888e .input_0e9336a579:focus,\n.textField_4e5f00ef75 .inputWrapper_bb6d015f4f.inputErrorValidation_526a07888e .input_0e9336a579:active {\n  border-color: var(--negative-color);\n}\n.textField_4e5f00ef75 .inputWrapper_bb6d015f4f.inputErrorValidation_526a07888e .iconContainer_dca06dbd03 .icon_bb6d015f4f {\n  color: var(--negative-color);\n}\n.textField_4e5f00ef75 .inputWrapper_bb6d015f4f.inputErrorValidation_526a07888e .iconContainer_dca06dbd03 .icon_bb6d015f4f:hover {\n  color: var(--negative-color);\n}\n.textField_4e5f00ef75 .inputWrapper_bb6d015f4f.inputErrorValidation_526a07888e + .subTextContainer_8effc9c250 .subTextContainerStatus_90eebcb139,\n.textField_4e5f00ef75 .inputWrapper_bb6d015f4f.inputErrorValidation_526a07888e + .subTextContainer_8effc9c250 .counter_0cc44b01a7 {\n  color: var(--negative-color);\n}\n.textField_4e5f00ef75 .inputWrapper_bb6d015f4f.inputSuccessValidation_7348cbb369:hover .input_0e9336a579 {\n  border-color: var(--positive-color);\n}\n.textField_4e5f00ef75 .inputWrapper_bb6d015f4f.inputSuccessValidation_7348cbb369 .input_0e9336a579 {\n  border-color: var(--positive-color);\n}\n.textField_4e5f00ef75 .inputWrapper_bb6d015f4f.inputSuccessValidation_7348cbb369 .input_0e9336a579:focus,\n.textField_4e5f00ef75 .inputWrapper_bb6d015f4f.inputSuccessValidation_7348cbb369 .input_0e9336a579:active {\n  border-color: var(--positive-color);\n}\n.textField_4e5f00ef75 .inputWrapper_bb6d015f4f.inputSuccessValidation_7348cbb369 .iconContainer_dca06dbd03 .icon_bb6d015f4f {\n  color: var(--positive-color);\n}\n.textField_4e5f00ef75 .inputWrapper_bb6d015f4f.inputSuccessValidation_7348cbb369 .iconContainer_dca06dbd03 .icon_bb6d015f4f:hover {\n  color: var(--positive-color);\n}\n.textField_4e5f00ef75 .inputWrapper_bb6d015f4f.inputSuccessValidation_7348cbb369 + .subTextContainer_8effc9c250 .subTextContainerStatus_90eebcb139 {\n  color: var(--positive-color);\n}\n.textField_4e5f00ef75 .inputWrapper_bb6d015f4f.wrapperSizeSmall_816ba795fb {\n  height: 32px;\n}\n.textField_4e5f00ef75 .inputWrapper_bb6d015f4f.wrapperSizeSmall_816ba795fb .input_0e9336a579 {\n  font: var(--font-text2-normal);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n}\n.textField_4e5f00ef75 .inputWrapper_bb6d015f4f.inputWrapperSizeSmall_884f8e732a .input_0e9336a579.inputHasIcon_c6711c4a84.onlyUnderline_37e4cc9f3e {\n  padding-left: var(--spacing-xs);\n}\n.textField_4e5f00ef75 .inputWrapper_bb6d015f4f.wrapperSizeMedium_d272b92ea6 {\n  height: 40px;\n}\n.textField_4e5f00ef75 .inputWrapper_bb6d015f4f.wrapperSizeMedium_d272b92ea6 .input_0e9336a579 {\n  font: var(--font-text1-normal);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n}\n.textField_4e5f00ef75 .inputWrapper_bb6d015f4f.wrapperSizeMedium_d272b92ea6 .input_0e9336a579.inputHasIcon_c6711c4a84 {\n  padding: var(--spacing-small) var(--spacing-xl) var(--spacing-small) var(--spacing-medium);\n}\n.textField_4e5f00ef75 .inputWrapper_bb6d015f4f.wrapperSizeMedium_d272b92ea6 .input_0e9336a579.inputHasIcon_c6711c4a84.onlyUnderline_37e4cc9f3e {\n  padding-left: 4px;\n}\n.textField_4e5f00ef75 .inputWrapper_bb6d015f4f.wrapperSizeMedium_d272b92ea6 .iconContainer_dca06dbd03 {\n  pointer-events: none;\n  height: 32px;\n  width: 32px;\n  outline: none;\n}\n.textField_4e5f00ef75 .inputWrapper_bb6d015f4f.wrapperSizeMedium_d272b92ea6 .iconContainer_dca06dbd03:hover + .iconContainer_dca06dbd03 + .input_0e9336a579 {\n  border-color: var(--primary-text-color);\n}\n.textField_4e5f00ef75 .inputWrapper_bb6d015f4f.wrapperSizeLarge_4f2c1cf313 {\n  height: 48px;\n}\n.textField_4e5f00ef75 .inputWrapper_bb6d015f4f.wrapperSizeLarge_4f2c1cf313 .input_0e9336a579 {\n  font: var(--font-text1-normal);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n}\n.textField_4e5f00ef75 .inputWrapper_bb6d015f4f.wrapperSizeLarge_4f2c1cf313 .input_0e9336a579.inputHasIcon_c6711c4a84 {\n  padding: var(--spacing-small) var(--spacing-xl) var(--spacing-small) var(--spacing-medium);\n}\n.textField_4e5f00ef75 .inputWrapper_bb6d015f4f.wrapperSizeLarge_4f2c1cf313 .input_0e9336a579.inputHasIcon_c6711c4a84.onlyUnderline_37e4cc9f3e {\n  padding-left: var(--spacing-xs);\n}\n.textField_4e5f00ef75 .inputWrapper_bb6d015f4f.wrapperSizeLarge_4f2c1cf313 .iconContainer_dca06dbd03 {\n  height: 40px;\n  width: 40px;\n}\n.textField_4e5f00ef75 .inputWrapper_bb6d015f4f:hover .input_0e9336a579 {\n  border-color: var(--primary-text-color);\n}\n.textField_4e5f00ef75 .inputWrapper_bb6d015f4f .loaderContainer_6d49cb3c41 {\n  position: absolute;\n  top: 50%;\n  right: 4px;\n  width: 24px;\n  height: 24px;\n  transform: translateY(-50%);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.textField_4e5f00ef75 .inputWrapper_bb6d015f4f .loaderContainer_6d49cb3c41.loaderContainerHasIcon_b44c3506f4 {\n  right: 32px;\n}\n.textField_4e5f00ef75 .inputWrapper_bb6d015f4f .loaderContainer_6d49cb3c41 .loader_ea93d9316f {\n  width: 16px;\n  height: 16px;\n}\n.textField_4e5f00ef75 .inputWrapper_bb6d015f4f .loaderContainer_6d49cb3c41 .loader_ea93d9316f .loaderSvg_e0aacd0d5a {\n  color: var(--secondary-text-color);\n}\n.textField_4e5f00ef75 .inputWrapper_bb6d015f4f.wrapperSizeMedium_d272b92ea6 .iconContainer_dca06dbd03 .icon_bb6d015f4f {\n  font-size: 16px;\n  font-family: var(--font-family);\n}\n.textField_4e5f00ef75 .inputWrapper_bb6d015f4f.wrapperSizeLarge_4f2c1cf313 .iconContainer_dca06dbd03 .icon_bb6d015f4f {\n  font-size: 16px;\n  font-family: var(--font-family);\n}\n.dark-app-theme input[type=date]::-webkit-calendar-picker-indicator, .black-app-theme input[type=date]::-webkit-calendar-picker-indicator, .hacker_theme-app-theme input[type=date]::-webkit-calendar-picker-indicator,\n.dark-app-theme input[type=datetime-local]::-webkit-calendar-picker-indicator,\n.black-app-theme input[type=datetime-local]::-webkit-calendar-picker-indicator,\n.hacker_theme-app-theme input[type=datetime-local]::-webkit-calendar-picker-indicator {\n  filter: invert(1);\n}");export{e as default};
+var e={textField:"textField_4f62bbeb26",labelWrapper:"labelWrapper_52e696d131",subTextContainer:"subTextContainer_ff7e7939a2",counter:"counter_220c2f776d",disabled:"disabled_85ab5a3286",icon:"icon_d38ffa37a2",inputWrapper:"inputWrapper_d38ffa37a2",input:"input_50a42041c1",iconContainer:"iconContainer_532169b854",iconContainerHasIcon:"iconContainerHasIcon_61e37e9fa4",readOnly:"readOnly_1185aab6dd",inputHover:"inputHover_1f28cce40a",inputActive:"inputActive_ffbc64a61c",inputHasIcon:"inputHasIcon_7cac8f06f4",round:"round_178cb70965",square:"square_ee04c0b90f",onlyUnderline:"onlyUnderline_471a970628",tooltipContainer:"tooltipContainer_e9911ff628",wrapperSizeMedium:"wrapperSizeMedium_490ab6a6d1",wrapperSizeLarge:"wrapperSizeLarge_ebce8c69cb",iconContainerActive:"iconContainerActive_a984066d7f",iconContainerClickable:"iconContainerClickable_21feb48bf0",inputErrorValidation:"inputErrorValidation_61e37e9fa4",subTextContainerStatus:"subTextContainerStatus_6e5c7daf55",inputSuccessValidation:"inputSuccessValidation_2ade96737b",wrapperSizeSmall:"wrapperSizeSmall_a6d70071e2",inputWrapperSizeSmall:"inputWrapperSizeSmall_40e4a79ac2",loaderContainer:"loaderContainer_17a6ce22a2",loaderContainerHasIcon:"loaderContainerHasIcon_d75bbca069",loader:"loader_36b18da324",loaderSvg:"loaderSvg_bb4deaeb00"};!function(e){const n="s_id-695413f4db8e_3_86_0";if("undefined"!=typeof document){const a=document.head||document.getElementsByTagName("head")[0];if(a.querySelector("#"+n))return;const t=document.createElement("style");t.id=n,a.firstChild?a.insertBefore(t,a.firstChild):a.appendChild(t),t.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}("/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/* stylelint-enable */\n.textField_4f62bbeb26 {\n  position: relative;\n  box-sizing: border-box;\n  font: var(--font-text2-normal);\n  width: 100%;\n}\n.textField_4f62bbeb26 * {\n  box-sizing: border-box;\n}\n.textField_4f62bbeb26 .labelWrapper_52e696d131 {\n  width: 100%;\n}\n.textField_4f62bbeb26 .subTextContainer_ff7e7939a2 {\n  display: flex;\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n  padding-block: 1px;\n}\n.textField_4f62bbeb26 .subTextContainer_ff7e7939a2 .counter_220c2f776d {\n  margin-left: auto;\n}\n.textField_4f62bbeb26.disabled_85ab5a3286 .icon_d38ffa37a2 {\n  cursor: not-allowed;\n}\n.textField_4f62bbeb26.disabled_85ab5a3286 .inputWrapper_d38ffa37a2 {\n  cursor: not-allowed;\n}\n.textField_4f62bbeb26.disabled_85ab5a3286 .inputWrapper_d38ffa37a2 .input_50a42041c1 {\n  user-select: none;\n  border: none;\n  pointer-events: none;\n  background-color: var(--disabled-background-color);\n  cursor: not-allowed;\n}\n.textField_4f62bbeb26.disabled_85ab5a3286 .inputWrapper_d38ffa37a2 .input_50a42041c1::placeholder {\n  color: var(--disabled-text-color);\n}\n.textField_4f62bbeb26.disabled_85ab5a3286 .inputWrapper_d38ffa37a2 .iconContainer_532169b854.iconContainerHasIcon_61e37e9fa4:hover {\n  background-color: transparent;\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2 {\n  width: 100%;\n  position: relative;\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2 .input_50a42041c1 {\n  width: 100%;\n  height: 100%;\n  outline: 0;\n  background-color: var(--secondary-background-color);\n  border: 1px solid;\n  border-color: var(--ui-border-color);\n  border-radius: var(--border-radius-small);\n  transition: border-color var(--motion-productive-medium) ease-in;\n  padding: var(--spacing-small) var(--spacing-medium);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  color: var(--primary-text-color);\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2 .input_50a42041c1.readOnly_1185aab6dd {\n  background-color: var(--allgrey-background-color);\n  border: none;\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2 .input_50a42041c1.inputHover_1f28cce40a {\n  border-color: var(--primary-text-color);\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2 .input_50a42041c1:focus,\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2 .input_50a42041c1:active,\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2 .input_50a42041c1.inputActive_ffbc64a61c {\n  border-color: var(--primary-color);\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2 .input_50a42041c1::placeholder {\n  color: var(--secondary-text-color);\n  font-weight: 400;\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2 .input_50a42041c1.inputHasIcon_7cac8f06f4 {\n  padding: var(--spacing-small) var(--spacing-large) var(--spacing-small) var(--spacing-medium);\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2 .input_50a42041c1.round_178cb70965 {\n  border-radius: 50px;\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2 .input_50a42041c1.square_ee04c0b90f {\n  border-radius: 0;\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2 .input_50a42041c1.onlyUnderline_471a970628 {\n  border-left: none;\n  border-right: none;\n  border-top: none;\n  padding: var(--spacing-small) var(--spacing-large) var(--spacing-small) var(--spacing-xs);\n  border-radius: 0 !important;\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2 .tooltipContainer_e9911ff628 {\n  position: absolute;\n  top: 50%;\n  right: 0;\n  width: 32px;\n  height: 20px;\n  transform: translateY(-50%);\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2.wrapperSizeMedium_490ab6a6d1 .tooltipContainer_e9911ff628 {\n  width: 40px;\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2.wrapperSizeLarge_ebce8c69cb .tooltipContainer_e9911ff628 {\n  width: 46px;\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2 .iconContainer_532169b854 {\n  position: absolute;\n  top: 50%;\n  right: 4px;\n  width: 24px;\n  height: 24px;\n  transform: translateY(-50%);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: var(--border-radius-small);\n  opacity: 0;\n  pointer-events: none;\n  -webkit-appearance: none;\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2 .iconContainer_532169b854.iconContainerActive_a984066d7f.iconContainerHasIcon_61e37e9fa4.iconContainerClickable_21feb48bf0 {\n  pointer-events: all;\n  cursor: pointer;\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2 .iconContainer_532169b854.iconContainerActive_a984066d7f.iconContainerHasIcon_61e37e9fa4:not(.iconContainerClickable_21feb48bf0) {\n  pointer-events: none;\n  cursor: default;\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2 .iconContainer_532169b854.iconContainerActive_a984066d7f {\n  opacity: 1;\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2 .iconContainer_532169b854.iconContainerActive_a984066d7f .icon_d38ffa37a2 {\n  opacity: 1;\n  pointer-events: all;\n  transform: rotate(0) scale(1);\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2 .iconContainer_532169b854.iconContainerHasIcon_61e37e9fa4.iconContainerClickable_21feb48bf0:hover {\n  background-color: var(--primary-background-hover-color);\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2 .iconContainer_532169b854.iconContainerHasIcon_61e37e9fa4.iconContainerClickable_21feb48bf0:active {\n  transform: translateY(-50%) scale(0.9);\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2 .iconContainer_532169b854 .icon_d38ffa37a2 {\n  transform: rotate(90deg) scale(0.8);\n  color: var(--icon-color);\n  will-change: transform;\n  pointer-events: none;\n  transition: color var(--motion-productive-short) var(--motion-timing-enter), transform var(--motion-productive-short) var(--motion-timing-enter);\n  font-size: 14px;\n  font-family: var(--font-family);\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2.inputErrorValidation_61e37e9fa4:hover .input_50a42041c1 {\n  border-color: var(--negative-color);\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2.inputErrorValidation_61e37e9fa4 .input_50a42041c1 {\n  border-color: var(--negative-color);\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2.inputErrorValidation_61e37e9fa4 .input_50a42041c1:focus,\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2.inputErrorValidation_61e37e9fa4 .input_50a42041c1:active {\n  border-color: var(--negative-color);\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2.inputErrorValidation_61e37e9fa4 .iconContainer_532169b854 .icon_d38ffa37a2 {\n  color: var(--negative-color);\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2.inputErrorValidation_61e37e9fa4 .iconContainer_532169b854 .icon_d38ffa37a2:hover {\n  color: var(--negative-color);\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2.inputErrorValidation_61e37e9fa4 + .subTextContainer_ff7e7939a2 .subTextContainerStatus_6e5c7daf55,\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2.inputErrorValidation_61e37e9fa4 + .subTextContainer_ff7e7939a2 .counter_220c2f776d {\n  color: var(--negative-color);\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2.inputSuccessValidation_2ade96737b:hover .input_50a42041c1 {\n  border-color: var(--positive-color);\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2.inputSuccessValidation_2ade96737b .input_50a42041c1 {\n  border-color: var(--positive-color);\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2.inputSuccessValidation_2ade96737b .input_50a42041c1:focus,\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2.inputSuccessValidation_2ade96737b .input_50a42041c1:active {\n  border-color: var(--positive-color);\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2.inputSuccessValidation_2ade96737b .iconContainer_532169b854 .icon_d38ffa37a2 {\n  color: var(--positive-color);\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2.inputSuccessValidation_2ade96737b .iconContainer_532169b854 .icon_d38ffa37a2:hover {\n  color: var(--positive-color);\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2.inputSuccessValidation_2ade96737b + .subTextContainer_ff7e7939a2 .subTextContainerStatus_6e5c7daf55 {\n  color: var(--positive-color);\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2.wrapperSizeSmall_a6d70071e2 {\n  height: 32px;\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2.wrapperSizeSmall_a6d70071e2 .input_50a42041c1 {\n  font: var(--font-text2-normal);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2.inputWrapperSizeSmall_40e4a79ac2 .input_50a42041c1.inputHasIcon_7cac8f06f4.onlyUnderline_471a970628 {\n  padding-left: var(--spacing-xs);\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2.wrapperSizeMedium_490ab6a6d1 {\n  height: 40px;\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2.wrapperSizeMedium_490ab6a6d1 .input_50a42041c1 {\n  font: var(--font-text1-normal);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2.wrapperSizeMedium_490ab6a6d1 .input_50a42041c1.inputHasIcon_7cac8f06f4 {\n  padding: var(--spacing-small) var(--spacing-xl) var(--spacing-small) var(--spacing-medium);\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2.wrapperSizeMedium_490ab6a6d1 .input_50a42041c1.inputHasIcon_7cac8f06f4.onlyUnderline_471a970628 {\n  padding-left: 4px;\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2.wrapperSizeMedium_490ab6a6d1 .iconContainer_532169b854 {\n  pointer-events: none;\n  height: 32px;\n  width: 32px;\n  outline: none;\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2.wrapperSizeMedium_490ab6a6d1 .iconContainer_532169b854:hover + .iconContainer_532169b854 + .input_50a42041c1 {\n  border-color: var(--primary-text-color);\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2.wrapperSizeLarge_ebce8c69cb {\n  height: 48px;\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2.wrapperSizeLarge_ebce8c69cb .input_50a42041c1 {\n  font: var(--font-text1-normal);\n  -webkit-font-smoothing: var(--font-smoothing-webkit);\n  -moz-osx-font-smoothing: var(--font-smoothing-moz);\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2.wrapperSizeLarge_ebce8c69cb .input_50a42041c1.inputHasIcon_7cac8f06f4 {\n  padding: var(--spacing-small) var(--spacing-xl) var(--spacing-small) var(--spacing-medium);\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2.wrapperSizeLarge_ebce8c69cb .input_50a42041c1.inputHasIcon_7cac8f06f4.onlyUnderline_471a970628 {\n  padding-left: var(--spacing-xs);\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2.wrapperSizeLarge_ebce8c69cb .iconContainer_532169b854 {\n  height: 40px;\n  width: 40px;\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2:hover .input_50a42041c1 {\n  border-color: var(--primary-text-color);\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2 .loaderContainer_17a6ce22a2 {\n  position: absolute;\n  top: 50%;\n  right: 4px;\n  width: 24px;\n  height: 24px;\n  transform: translateY(-50%);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2 .loaderContainer_17a6ce22a2.loaderContainerHasIcon_d75bbca069 {\n  right: 32px;\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2 .loaderContainer_17a6ce22a2 .loader_36b18da324 {\n  width: 16px;\n  height: 16px;\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2 .loaderContainer_17a6ce22a2 .loader_36b18da324 .loaderSvg_bb4deaeb00 {\n  color: var(--secondary-text-color);\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2.wrapperSizeMedium_490ab6a6d1 .iconContainer_532169b854 .icon_d38ffa37a2 {\n  font-size: 16px;\n  font-family: var(--font-family);\n}\n.textField_4f62bbeb26 .inputWrapper_d38ffa37a2.wrapperSizeLarge_ebce8c69cb .iconContainer_532169b854 .icon_d38ffa37a2 {\n  font-size: 16px;\n  font-family: var(--font-family);\n}\n.dark-app-theme input[type=date]::-webkit-calendar-picker-indicator, .black-app-theme input[type=date]::-webkit-calendar-picker-indicator, .hacker_theme-app-theme input[type=date]::-webkit-calendar-picker-indicator,\n.dark-app-theme input[type=datetime-local]::-webkit-calendar-picker-indicator,\n.black-app-theme input[type=datetime-local]::-webkit-calendar-picker-indicator,\n.hacker_theme-app-theme input[type=datetime-local]::-webkit-calendar-picker-indicator {\n  filter: invert(1);\n}");export{e as default};
 //# sourceMappingURL=TextField.module.scss.js.map