@helsenorge/designsystem-react 12.0.0-beta.2 → 12.1.0

package/TableExpanderCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableExpanderCell.js","sources":["../src/components/Table/TableExpanderCell/TableExpanderCell.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport Button from '../../Button';\nimport Icon from '../../Icon';\nimport ChevronDown from '../../Icons/ChevronDown';\nimport ChevronUp from '../../Icons/ChevronUp';\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\n\nexport interface Props {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Row is expanded. */\n  expanded: boolean;\n  /** Id for expanded row. */\n  expandableRowId: string;\n  /** Text for hide button used for aria label. */\n  hideDetailsText: string;\n  /** Text for show button used for aria label. */\n  showDetailsText: string;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n}\n\nexport const TableExpanderCell = ({\n  expandableRowId,\n  hideDetailsText,\n  showDetailsText,\n  expanded,\n  className,\n  mode = ModeType.normal,\n}: Props): React.JSX.Element => {\n  const tableCellClass = classNames(tableStyles['table__cell'], tableStyles['table__cell-expander'], className, {\n    [tableStyles['table__cell--compact']]: mode === ModeType.compact,\n  });\n  const icon = expanded ? ChevronUp : ChevronDown;\n\n  return (\n    <td className={tableCellClass}>\n      <Button\n        variant=\"borderless\"\n        aria-expanded={expanded}\n        aria-controls={expandableRowId}\n        ariaLabel={expanded ? hideDetailsText : showDetailsText}\n      >\n        <Icon svgIcon={icon} />\n      </Button>\n    </td>\n  );\n};\n\nexport default TableExpanderCell;\n"],"names":[],"mappings":";;;;;;;;AA0BO,MAAM,oBAAoB,CAAC;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO,SAAS;AAClB,MAAgC;AACxB,QAAA,iBAAiB,WAAW,YAAY,aAAa,GAAG,YAAY,sBAAsB,GAAG,WAAW;AAAA,IAC5G,CAAC,YAAY,sBAAsB,CAAC,GAAG,SAAS,SAAS;AAAA,EAAA,CAC1D;AACK,QAAA,OAAO,WAAW,YAAY;AAGlC,SAAA,oBAAC,MAAG,EAAA,WAAW,gBACb,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,WAAW,WAAW,kBAAkB;AAAA,MAExC,UAAA,oBAAC,MAAK,EAAA,SAAS,KAAM,CAAA;AAAA,IAAA;AAAA,EAAA,GAEzB;AAEJ;"}
+{"version":3,"file":"TableExpanderCell.js","sources":["../src/components/Table/TableExpanderCell/TableExpanderCell.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport Button from '../../Button';\nimport Icon from '../../Icon';\nimport ChevronDown from '../../Icons/ChevronDown';\nimport ChevronUp from '../../Icons/ChevronUp';\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\n\nexport interface Props {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Row is expanded. */\n  expanded: boolean;\n  /** Id for expanded row. */\n  expandableRowId: string;\n  /** Text for hide button used for aria label. */\n  hideDetailsText: string;\n  /** Text for show button used for aria label. */\n  showDetailsText: string;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n}\n\nexport const TableExpanderCell = ({\n  expandableRowId,\n  hideDetailsText,\n  showDetailsText,\n  expanded,\n  className,\n  mode = ModeType.normal,\n}: Props): React.JSX.Element => {\n  const tableCellClass = classNames(tableStyles['table__cell'], tableStyles['table__cell-expander'], className, {\n    [tableStyles['table__cell--compact']]: mode === ModeType.compact,\n  });\n  const icon = expanded ? ChevronUp : ChevronDown;\n\n  return (\n    <td className={tableCellClass}>\n      <Button\n        variant=\"borderless\"\n        aria-expanded={expanded}\n        aria-controls={expandableRowId}\n        ariaLabel={expanded ? hideDetailsText : showDetailsText}\n      >\n        <Icon svgIcon={icon} />\n      </Button>\n    </td>\n  );\n};\n\nexport default TableExpanderCell;\n"],"names":[],"mappings":";;;;;;;;AA0BO,MAAM,oBAAoB,CAAC;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO,SAAS;AAClB,MAAgC;AAC9B,QAAM,iBAAiB,WAAW,YAAY,aAAa,GAAG,YAAY,sBAAsB,GAAG,WAAW;AAAA,IAC5G,CAAC,YAAY,sBAAsB,CAAC,GAAG,SAAS,SAAS;AAAA,EAAA,CAC1D;AACD,QAAM,OAAO,WAAW,YAAY;AAEpC,SACE,oBAAC,MAAA,EAAG,WAAW,gBACb,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,WAAW,WAAW,kBAAkB;AAAA,MAExC,UAAA,oBAAC,MAAA,EAAK,SAAS,KAAA,CAAM;AAAA,IAAA;AAAA,EAAA,GAEzB;AAEJ;"}

package/TableHead.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHead.js","sources":["../src/components/Table/TableHead/TableHead.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\n\nexport enum HeaderCategory {\n  normal = 'normal',\n  transparent = 'transparent',\n  sortable = 'sortable',\n}\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'thead'>, 'style'> {\n  /** Header category for styling. Default: normal */\n  category?: HeaderCategory;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the thead. Add table rows  */\n  children: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n}\n\nexport const TableHead: React.FC<Props> = ({ category = HeaderCategory.normal, className, children, mode, ...rest }) => {\n  const tableHeadClass = classNames(\n    tableStyles['table__head'],\n    {\n      [tableStyles['table__head--normal']]: category === HeaderCategory.normal,\n      [tableStyles['table__head--transparent']]: category === HeaderCategory.transparent,\n      [tableStyles['table__head--sortable']]: category == HeaderCategory.sortable,\n      [tableStyles['table__head--compact']]: mode == ModeType.compact,\n    },\n    className\n  );\n\n  return (\n    <thead className={tableHeadClass} {...rest}>\n      {React.Children.map(children, child => React.isValidElement<{ mode?: ModeType }>(child) && React.cloneElement(child, { mode }))}\n    </thead>\n  );\n};\n\nexport default TableHead;\n"],"names":["HeaderCategory","React"],"mappings":";;;;;AAOY,IAAA,mCAAAA,oBAAL;AACLA,kBAAA,QAAS,IAAA;AACTA,kBAAA,aAAc,IAAA;AACdA,kBAAA,UAAW,IAAA;AAHDA,SAAAA;AAAA,GAAA,kBAAA,CAAA,CAAA;AAiBC,MAAA,YAA6B,CAAC,EAAE,WAAW,UAAuB,WAAW,UAAU,MAAM,GAAG,WAAW;AACtH,QAAM,iBAAiB;AAAA,IACrB,YAAY,aAAa;AAAA,IACzB;AAAA,MACE,CAAC,YAAY,qBAAqB,CAAC,GAAG,aAAa;AAAA,MACnD,CAAC,YAAY,0BAA0B,CAAC,GAAG,aAAa;AAAA,MACxD,CAAC,YAAY,uBAAuB,CAAC,GAAG,YAAY;AAAA,MACpD,CAAC,YAAY,sBAAsB,CAAC,GAAG,QAAQ,SAAS;AAAA,IAC1D;AAAA,IACA;AAAA,EACF;AAGE,SAAA,oBAAC,WAAM,WAAW,gBAAiB,GAAG,MACnC,UAAAC,eAAM,SAAS,IAAI,UAAU,CAAA,UAASA,eAAM,eAAoC,KAAK,KAAKA,eAAM,aAAa,OAAO,EAAE,KAAM,CAAA,CAAC,EAChI,CAAA;AAEJ;"}
+{"version":3,"file":"TableHead.js","sources":["../src/components/Table/TableHead/TableHead.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\n\nexport enum HeaderCategory {\n  normal = 'normal',\n  transparent = 'transparent',\n  sortable = 'sortable',\n}\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'thead'>, 'style'> {\n  /** Header category for styling. Default: normal */\n  category?: HeaderCategory;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the thead. Add table rows  */\n  children: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n}\n\nexport const TableHead: React.FC<Props> = ({ category = HeaderCategory.normal, className, children, mode, ...rest }) => {\n  const tableHeadClass = classNames(\n    tableStyles['table__head'],\n    {\n      [tableStyles['table__head--normal']]: category === HeaderCategory.normal,\n      [tableStyles['table__head--transparent']]: category === HeaderCategory.transparent,\n      [tableStyles['table__head--sortable']]: category == HeaderCategory.sortable,\n      [tableStyles['table__head--compact']]: mode == ModeType.compact,\n    },\n    className\n  );\n\n  return (\n    <thead className={tableHeadClass} {...rest}>\n      {React.Children.map(children, child => React.isValidElement<{ mode?: ModeType }>(child) && React.cloneElement(child, { mode }))}\n    </thead>\n  );\n};\n\nexport default TableHead;\n"],"names":["HeaderCategory","React"],"mappings":";;;;;AAOO,IAAK,mCAAAA,oBAAL;AACLA,kBAAA,QAAA,IAAS;AACTA,kBAAA,aAAA,IAAc;AACdA,kBAAA,UAAA,IAAW;AAHD,SAAAA;AAAA,GAAA,kBAAA,CAAA,CAAA;AAiBL,MAAM,YAA6B,CAAC,EAAE,WAAW,UAAuB,WAAW,UAAU,MAAM,GAAG,WAAW;AACtH,QAAM,iBAAiB;AAAA,IACrB,YAAY,aAAa;AAAA,IACzB;AAAA,MACE,CAAC,YAAY,qBAAqB,CAAC,GAAG,aAAa;AAAA,MACnD,CAAC,YAAY,0BAA0B,CAAC,GAAG,aAAa;AAAA,MACxD,CAAC,YAAY,uBAAuB,CAAC,GAAG,YAAY;AAAA,MACpD,CAAC,YAAY,sBAAsB,CAAC,GAAG,QAAQ,SAAS;AAAA,IAAA;AAAA,IAE1D;AAAA,EAAA;AAGF,SACE,oBAAC,WAAM,WAAW,gBAAiB,GAAG,MACnC,UAAAC,eAAM,SAAS,IAAI,UAAU,CAAA,UAASA,eAAM,eAAoC,KAAK,KAAKA,eAAM,aAAa,OAAO,EAAE,KAAA,CAAM,CAAC,EAAA,CAChI;AAEJ;"}

package/TableHeadCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeadCell.js","sources":["../src/components/Table/TableHeadCell/TableHeadCell.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport Icon, { IconSize } from '../../Icon';\nimport ArrowDown from '../../Icons/ArrowDown';\nimport ArrowUp from '../../Icons/ArrowUp';\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\n\nexport enum SortDirection {\n  asc = 'asc',\n  desc = 'desc',\n}\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'th'>, 'style'> {\n  /** Sets if column for head cell should be sortable*/\n  sortable?: boolean;\n  /** Sort direction  */\n  sortDir?: SortDirection;\n  /** Function that is called when clicked */\n  onClick?: () => void;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the td element.  */\n  children?: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n}\n\nexport const TableHeadCell: React.FC<Props> = ({\n  sortable,\n  onClick,\n  className,\n  children,\n  sortDir,\n  mode = ModeType.normal,\n  scope = 'col',\n  ...rest\n}) => {\n  const tableHeadCellDefaultClass = classNames(tableStyles['table__head-cell'], className, {\n    [tableStyles['table__head-cell--compact']]: mode === ModeType.compact,\n  });\n\n  if (!sortable && !children) {\n    return <td className={tableHeadCellDefaultClass}></td>;\n  }\n\n  if (!sortable) {\n    return (\n      <th scope={scope} className={tableHeadCellDefaultClass} {...rest}>\n        {children}\n      </th>\n    );\n  }\n\n  const sortableClasses = classNames(tableHeadCellDefaultClass, tableStyles['table__head-cell--sortable'], className);\n\n  const renderSortIcon = (): React.JSX.Element | undefined =>\n    sortDir && (\n      <div className={tableStyles['table__head-cell-sort-icon-wrapper']}>\n        <Icon svgIcon={sortDir == SortDirection.asc ? ArrowDown : ArrowUp} size={IconSize.XXSmall} />\n      </div>\n    );\n\n  const getSortDirection = (): React.AriaAttributes['aria-sort'] => {\n    switch (sortDir) {\n      case SortDirection.asc:\n        return 'ascending';\n      case SortDirection.desc:\n        return 'descending';\n    }\n  };\n\n  return (\n    <th scope={scope} className={sortableClasses} aria-sort={getSortDirection()} {...rest}>\n      <button type=\"button\" onClick={onClick} className={tableStyles['table__sort-button']} aria-pressed={sortDir ? !!sortDir : undefined}>\n        {renderSortIcon()}\n        {children}\n      </button>\n    </th>\n  );\n};\n\nexport default TableHeadCell;\n"],"names":["SortDirection"],"mappings":";;;;;;;;AAUY,IAAA,kCAAAA,mBAAL;AACLA,iBAAA,KAAM,IAAA;AACNA,iBAAA,MAAO,IAAA;AAFGA,SAAAA;AAAA,GAAA,iBAAA,CAAA,CAAA;AAoBL,MAAM,gBAAiC,CAAC;AAAA,EAC7C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO,SAAS;AAAA,EAChB,QAAQ;AAAA,EACR,GAAG;AACL,MAAM;AACJ,QAAM,4BAA4B,WAAW,YAAY,kBAAkB,GAAG,WAAW;AAAA,IACvF,CAAC,YAAY,2BAA2B,CAAC,GAAG,SAAS,SAAS;AAAA,EAAA,CAC/D;AAEG,MAAA,CAAC,YAAY,CAAC,UAAU;AACnB,WAAA,oBAAC,MAAG,EAAA,WAAW,0BAA2B,CAAA;AAAA,EAAA;AAGnD,MAAI,CAAC,UAAU;AACb,+BACG,MAAG,EAAA,OAAc,WAAW,2BAA4B,GAAG,MACzD,UACH;AAAA,EAAA;AAIJ,QAAM,kBAAkB,WAAW,2BAA2B,YAAY,4BAA4B,GAAG,SAAS;AAElH,QAAM,iBAAiB,MACrB,+BACG,OAAI,EAAA,WAAW,YAAY,oCAAoC,GAC9D,8BAAC,MAAK,EAAA,SAAS,WAAW,QAAoB,YAAY,SAAS,MAAM,SAAS,QAAS,CAAA,GAC7F;AAGJ,QAAM,mBAAmB,MAAyC;AAChE,YAAQ,SAAS;AAAA,MACf,KAAK;AACI,eAAA;AAAA,MACT,KAAK;AACI,eAAA;AAAA,IAAA;AAAA,EAEb;AAGE,SAAA,oBAAC,MAAG,EAAA,OAAc,WAAW,iBAAiB,aAAW,iBAAiB,GAAI,GAAG,MAC/E,UAAC,qBAAA,UAAA,EAAO,MAAK,UAAS,SAAkB,WAAW,YAAY,oBAAoB,GAAG,gBAAc,UAAU,CAAC,CAAC,UAAU,QACvH,UAAA;AAAA,IAAe,eAAA;AAAA,IACf;AAAA,EAAA,EAAA,CACH,EACF,CAAA;AAEJ;"}
+{"version":3,"file":"TableHeadCell.js","sources":["../src/components/Table/TableHeadCell/TableHeadCell.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport Icon, { IconSize } from '../../Icon';\nimport ArrowDown from '../../Icons/ArrowDown';\nimport ArrowUp from '../../Icons/ArrowUp';\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\n\nexport enum SortDirection {\n  asc = 'asc',\n  desc = 'desc',\n}\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'th'>, 'style'> {\n  /** Sets if column for head cell should be sortable*/\n  sortable?: boolean;\n  /** Sort direction  */\n  sortDir?: SortDirection;\n  /** Function that is called when clicked */\n  onClick?: () => void;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the td element.  */\n  children?: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n}\n\nexport const TableHeadCell: React.FC<Props> = ({\n  sortable,\n  onClick,\n  className,\n  children,\n  sortDir,\n  mode = ModeType.normal,\n  scope = 'col',\n  ...rest\n}) => {\n  const tableHeadCellDefaultClass = classNames(tableStyles['table__head-cell'], className, {\n    [tableStyles['table__head-cell--compact']]: mode === ModeType.compact,\n  });\n\n  if (!sortable && !children) {\n    return <td className={tableHeadCellDefaultClass}></td>;\n  }\n\n  if (!sortable) {\n    return (\n      <th scope={scope} className={tableHeadCellDefaultClass} {...rest}>\n        {children}\n      </th>\n    );\n  }\n\n  const sortableClasses = classNames(tableHeadCellDefaultClass, tableStyles['table__head-cell--sortable'], className);\n\n  const renderSortIcon = (): React.JSX.Element | undefined =>\n    sortDir && (\n      <div className={tableStyles['table__head-cell-sort-icon-wrapper']}>\n        <Icon svgIcon={sortDir == SortDirection.asc ? ArrowDown : ArrowUp} size={IconSize.XXSmall} />\n      </div>\n    );\n\n  const getSortDirection = (): React.AriaAttributes['aria-sort'] => {\n    switch (sortDir) {\n      case SortDirection.asc:\n        return 'ascending';\n      case SortDirection.desc:\n        return 'descending';\n    }\n  };\n\n  return (\n    <th scope={scope} className={sortableClasses} aria-sort={getSortDirection()} {...rest}>\n      <button type=\"button\" onClick={onClick} className={tableStyles['table__sort-button']} aria-pressed={sortDir ? !!sortDir : undefined}>\n        {renderSortIcon()}\n        {children}\n      </button>\n    </th>\n  );\n};\n\nexport default TableHeadCell;\n"],"names":["SortDirection"],"mappings":";;;;;;;;AAUO,IAAK,kCAAAA,mBAAL;AACLA,iBAAA,KAAA,IAAM;AACNA,iBAAA,MAAA,IAAO;AAFG,SAAAA;AAAA,GAAA,iBAAA,CAAA,CAAA;AAoBL,MAAM,gBAAiC,CAAC;AAAA,EAC7C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO,SAAS;AAAA,EAChB,QAAQ;AAAA,EACR,GAAG;AACL,MAAM;AACJ,QAAM,4BAA4B,WAAW,YAAY,kBAAkB,GAAG,WAAW;AAAA,IACvF,CAAC,YAAY,2BAA2B,CAAC,GAAG,SAAS,SAAS;AAAA,EAAA,CAC/D;AAED,MAAI,CAAC,YAAY,CAAC,UAAU;AAC1B,WAAO,oBAAC,MAAA,EAAG,WAAW,0BAAA,CAA2B;AAAA,EACnD;AAEA,MAAI,CAAC,UAAU;AACb,+BACG,MAAA,EAAG,OAAc,WAAW,2BAA4B,GAAG,MACzD,UACH;AAAA,EAEJ;AAEA,QAAM,kBAAkB,WAAW,2BAA2B,YAAY,4BAA4B,GAAG,SAAS;AAElH,QAAM,iBAAiB,MACrB,+BACG,OAAA,EAAI,WAAW,YAAY,oCAAoC,GAC9D,8BAAC,MAAA,EAAK,SAAS,WAAW,QAAoB,YAAY,SAAS,MAAM,SAAS,SAAS,GAC7F;AAGJ,QAAM,mBAAmB,MAAyC;AAChE,YAAQ,SAAA;AAAA,MACN,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,IAAA;AAAA,EAEb;AAEA,SACE,oBAAC,MAAA,EAAG,OAAc,WAAW,iBAAiB,aAAW,iBAAA,GAAqB,GAAG,MAC/E,UAAA,qBAAC,UAAA,EAAO,MAAK,UAAS,SAAkB,WAAW,YAAY,oBAAoB,GAAG,gBAAc,UAAU,CAAC,CAAC,UAAU,QACvH,UAAA;AAAA,IAAA,eAAA;AAAA,IACA;AAAA,EAAA,EAAA,CACH,EAAA,CACF;AAEJ;"}

package/TableRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableRow.js","sources":["../src/components/Table/TableExpanderCell/TableExpanderCellMobile.tsx","../src/components/Table/TableRow/TableRow.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport Button from '../../Button';\nimport Icon from '../../Icon';\nimport ChevronDown from '../../Icons/ChevronDown';\nimport ChevronUp from '../../Icons/ChevronUp';\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\nimport { Props } from '../TableRow/TableRow';\n\ntype TableExpanderCellMobileProps = Pick<Props, 'expanded' | 'onClick' | 'hideDetailsText' | 'showDetailsText' | 'mode'>;\n\nconst TableExpanderCellMobile: React.FC<TableExpanderCellMobileProps> = ({\n  expanded,\n  onClick,\n  hideDetailsText,\n  showDetailsText,\n  mode = ModeType.normal,\n}) => {\n  const cellClass = classNames(tableStyles.table__cell, tableStyles['table__expander-cell-mobile'], {\n    [tableStyles['table__expander-cell-mobile--expanded']]: expanded,\n    [tableStyles['table__cell--compact']]: mode === ModeType.compact,\n  });\n\n  return (\n    <td className={cellClass}>\n      <Button aria-expanded={expanded} variant=\"borderless\" onClick={onClick}>\n        <Icon svgIcon={expanded ? ChevronUp : ChevronDown} /> {expanded ? hideDetailsText : showDetailsText}\n      </Button>\n    </td>\n  );\n};\n\nexport default TableExpanderCellMobile;\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\nimport TableExpanderCellMobile from '../TableExpanderCell/TableExpanderCellMobile';\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'tr'>, 'style'> {\n  /** Sets if expanded row can be expanded */\n  expandable?: boolean;\n  /** Sets if expanded row is expanded */\n  expanded?: boolean;\n  /** When hide/show button for expanded row is clicked. */\n  onClick?: () => void;\n  /** Text for expanded row hide button. */\n  hideDetailsText?: string;\n  /** Text for expanded row show button. */\n  showDetailsText?: string;\n  /** Key attribute for row */\n  rowKey?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the cells of the table row element.  */\n  children?: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n}\n\nexport const TableRow: React.FC<Props> = ({\n  rowKey,\n  hideDetailsText,\n  showDetailsText,\n  expandable,\n  expanded,\n  onClick,\n  className,\n  children,\n  mode = ModeType.normal,\n  ...rest\n}) => {\n  const tableRowClass = classNames(\n    tableStyles['table-row'],\n    {\n      [tableStyles['table__row--expandable']]: expandable,\n    },\n    className\n  );\n\n  return (\n    <tr className={tableRowClass} onClick={onClick} key={rowKey} {...rest}>\n      {React.Children.map(children, child => React.isValidElement<{ mode?: ModeType }>(child) && React.cloneElement(child, { mode }))}\n      {expandable && (\n        <TableExpanderCellMobile\n          expanded={expanded}\n          onClick={onClick}\n          hideDetailsText={hideDetailsText}\n          showDetailsText={showDetailsText}\n          mode={mode}\n        />\n      )}\n    </tr>\n  );\n};\n\nexport default TableRow;\n"],"names":["React"],"mappings":";;;;;;;;;AAcA,MAAM,0BAAkE,CAAC;AAAA,EACvE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO,SAAS;AAClB,MAAM;AACJ,QAAM,YAAY,WAAW,YAAY,aAAa,YAAY,6BAA6B,GAAG;AAAA,IAChG,CAAC,YAAY,uCAAuC,CAAC,GAAG;AAAA,IACxD,CAAC,YAAY,sBAAsB,CAAC,GAAG,SAAS,SAAS;AAAA,EAAA,CAC1D;AAGC,SAAA,oBAAC,MAAG,EAAA,WAAW,WACb,UAAA,qBAAC,UAAO,iBAAe,UAAU,SAAQ,cAAa,SACpD,UAAA;AAAA,IAAA,oBAAC,MAAK,EAAA,SAAS,WAAW,YAAY,aAAa;AAAA,IAAE;AAAA,IAAE,WAAW,kBAAkB;AAAA,EAAA,EAAA,CACtF,EACF,CAAA;AAEJ;ACJO,MAAM,WAA4B,CAAC;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO,SAAS;AAAA,EAChB,GAAG;AACL,MAAM;AACJ,QAAM,gBAAgB;AAAA,IACpB,YAAY,WAAW;AAAA,IACvB;AAAA,MACE,CAAC,YAAY,wBAAwB,CAAC,GAAG;AAAA,IAC3C;AAAA,IACA;AAAA,EACF;AAEA,8BACG,MAAG,EAAA,WAAW,eAAe,SAAgC,GAAG,MAC9D,UAAA;AAAA,IAAAA,eAAM,SAAS,IAAI,UAAU,CAAA,UAASA,eAAM,eAAoC,KAAK,KAAKA,eAAM,aAAa,OAAO,EAAE,KAAM,CAAA,CAAC;AAAA,IAC7H,cACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,EAAA,GATiD,MAWrD;AAEJ;"}
+{"version":3,"file":"TableRow.js","sources":["../src/components/Table/TableExpanderCell/TableExpanderCellMobile.tsx","../src/components/Table/TableRow/TableRow.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport Button from '../../Button';\nimport Icon from '../../Icon';\nimport ChevronDown from '../../Icons/ChevronDown';\nimport ChevronUp from '../../Icons/ChevronUp';\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\nimport { Props } from '../TableRow/TableRow';\n\ntype TableExpanderCellMobileProps = Pick<Props, 'expanded' | 'onClick' | 'hideDetailsText' | 'showDetailsText' | 'mode'>;\n\nconst TableExpanderCellMobile: React.FC<TableExpanderCellMobileProps> = ({\n  expanded,\n  onClick,\n  hideDetailsText,\n  showDetailsText,\n  mode = ModeType.normal,\n}) => {\n  const cellClass = classNames(tableStyles.table__cell, tableStyles['table__expander-cell-mobile'], {\n    [tableStyles['table__expander-cell-mobile--expanded']]: expanded,\n    [tableStyles['table__cell--compact']]: mode === ModeType.compact,\n  });\n\n  return (\n    <td className={cellClass}>\n      <Button aria-expanded={expanded} variant=\"borderless\" onClick={onClick}>\n        <Icon svgIcon={expanded ? ChevronUp : ChevronDown} /> {expanded ? hideDetailsText : showDetailsText}\n      </Button>\n    </td>\n  );\n};\n\nexport default TableExpanderCellMobile;\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\nimport TableExpanderCellMobile from '../TableExpanderCell/TableExpanderCellMobile';\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'tr'>, 'style'> {\n  /** Sets if expanded row can be expanded */\n  expandable?: boolean;\n  /** Sets if expanded row is expanded */\n  expanded?: boolean;\n  /** When hide/show button for expanded row is clicked. */\n  onClick?: () => void;\n  /** Text for expanded row hide button. */\n  hideDetailsText?: string;\n  /** Text for expanded row show button. */\n  showDetailsText?: string;\n  /** Key attribute for row */\n  rowKey?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the cells of the table row element.  */\n  children?: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n}\n\nexport const TableRow: React.FC<Props> = ({\n  rowKey,\n  hideDetailsText,\n  showDetailsText,\n  expandable,\n  expanded,\n  onClick,\n  className,\n  children,\n  mode = ModeType.normal,\n  ...rest\n}) => {\n  const tableRowClass = classNames(\n    tableStyles['table-row'],\n    {\n      [tableStyles['table__row--expandable']]: expandable,\n    },\n    className\n  );\n\n  return (\n    <tr className={tableRowClass} onClick={onClick} key={rowKey} {...rest}>\n      {React.Children.map(children, child => React.isValidElement<{ mode?: ModeType }>(child) && React.cloneElement(child, { mode }))}\n      {expandable && (\n        <TableExpanderCellMobile\n          expanded={expanded}\n          onClick={onClick}\n          hideDetailsText={hideDetailsText}\n          showDetailsText={showDetailsText}\n          mode={mode}\n        />\n      )}\n    </tr>\n  );\n};\n\nexport default TableRow;\n"],"names":["React"],"mappings":";;;;;;;;;AAcA,MAAM,0BAAkE,CAAC;AAAA,EACvE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO,SAAS;AAClB,MAAM;AACJ,QAAM,YAAY,WAAW,YAAY,aAAa,YAAY,6BAA6B,GAAG;AAAA,IAChG,CAAC,YAAY,uCAAuC,CAAC,GAAG;AAAA,IACxD,CAAC,YAAY,sBAAsB,CAAC,GAAG,SAAS,SAAS;AAAA,EAAA,CAC1D;AAED,SACE,oBAAC,MAAA,EAAG,WAAW,WACb,UAAA,qBAAC,UAAO,iBAAe,UAAU,SAAQ,cAAa,SACpD,UAAA;AAAA,IAAA,oBAAC,MAAA,EAAK,SAAS,WAAW,YAAY,aAAa;AAAA,IAAE;AAAA,IAAE,WAAW,kBAAkB;AAAA,EAAA,EAAA,CACtF,EAAA,CACF;AAEJ;ACJO,MAAM,WAA4B,CAAC;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO,SAAS;AAAA,EAChB,GAAG;AACL,MAAM;AACJ,QAAM,gBAAgB;AAAA,IACpB,YAAY,WAAW;AAAA,IACvB;AAAA,MACE,CAAC,YAAY,wBAAwB,CAAC,GAAG;AAAA,IAAA;AAAA,IAE3C;AAAA,EAAA;AAGF,8BACG,MAAA,EAAG,WAAW,eAAe,SAAgC,GAAG,MAC9D,UAAA;AAAA,IAAAA,eAAM,SAAS,IAAI,UAAU,CAAA,UAASA,eAAM,eAAoC,KAAK,KAAKA,eAAM,aAAa,OAAO,EAAE,KAAA,CAAM,CAAC;AAAA,IAC7H,cACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,EAAA,GATiD,MAWrD;AAEJ;"}

package/Textarea.js

@@ -89,7 +89,7 @@ const Textarea = React__default.forwardRef((props, ref) => {
   });
   useEffect(() => {
     var _a, _b, _c;
-    value && setTextareaInput(value);
+    if (value) setTextareaInput(value);
     if (grow && ((_a = referanse.current) == null ? void 0 : _a.children) && ((_b = referanse.current) == null ? void 0 : _b.children[0])) {
       const textarea = (_c = referanse.current) == null ? void 0 : _c.children[0];
       resizeHeight(textarea);

package/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","sources":["../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormOnColor } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper, { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport { renderLabel } from '../Label';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\nexport interface TextareaProps\n  extends ErrorWrapperClassNameProps,\n    Pick<\n      React.InputHTMLAttributes<HTMLTextAreaElement>,\n      | 'aria-describedby'\n      | 'autoFocus'\n      | 'disabled'\n      | 'name'\n      | 'autoComplete'\n      | 'placeholder'\n      | 'readOnly'\n      | 'required'\n      | 'defaultValue'\n      | 'onChange'\n      | 'value'\n    > {\n  /** max character limit in textarea  */\n  maxCharacters?: number;\n  /** The text is displayed in the end of the text-counter */\n  maxText?: string;\n  /** Width of textarea in characters (approximate) */\n  width?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** If true, the component will have a bottom margin. */\n  marginBottom?: boolean;\n  /** If true, the component will be transparent. */\n  transparent?: boolean;\n  /** Changes the visuals of the textarea */\n  onColor?: keyof typeof FormOnColor;\n  /** Label of the input */\n  label?: React.ReactNode;\n  /** id of the textarea */\n  textareaId?: string;\n  /** max rows */\n  maxRows?: number;\n  /** min rows */\n  minRows?: number;\n  /** auto-grows until maxRows */\n  grow?: boolean;\n  /** Activates Error style for the input */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n}\n\nconst getTextareaMaxWidth = (characters: number): string => {\n  const paddingWidth = '2rem';\n  const scrollbarWidth = '16px';\n  const borderWidth = '4px';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${scrollbarWidth} + ${borderWidth})`;\n};\n\nconst Textarea = React.forwardRef((props: TextareaProps, ref: React.Ref<HTMLTextAreaElement>) => {\n  const {\n    maxCharacters,\n    maxText,\n    width,\n    testId,\n    defaultValue,\n    marginBottom: gutterBottom,\n    transparent,\n    onColor = FormOnColor.onwhite,\n    label,\n    textareaId = uuid(),\n    minRows = 3,\n    maxRows = 10,\n    grow,\n    error,\n    errorText,\n    errorTextId,\n    errorWrapperClassName,\n    autoFocus,\n    disabled,\n    name,\n    autoComplete = 'off',\n    placeholder,\n    readOnly,\n    required,\n    onChange,\n    value,\n    ...rest\n  } = props;\n\n  const [rows, setRows] = useState(minRows);\n  const [textareaInput, setTextareaInput] = useState(value || defaultValue || '');\n  const referanse = useRef<HTMLDivElement>(null);\n  const errorTextUuid = useUuid(errorTextId);\n\n  useEffect(() => {\n    setTextareaInput(defaultValue || '');\n  }, [defaultValue]);\n\n  const resizeHeight = (target: HTMLTextAreaElement): void => {\n    const textareaLineHeight = 28;\n\n    const previousRows = target.rows;\n    target.rows = minRows; // reset number of rows in textarea\n\n    const currentRows = Math.floor((target.scrollHeight - 16) / textareaLineHeight); // scrollHeight - 16px of padding to calculate the rows\n\n    if (currentRows === previousRows) {\n      target.rows = currentRows;\n    }\n\n    if (currentRows >= maxRows) {\n      target.rows = maxRows;\n      target.scrollTop = target.scrollHeight;\n    }\n\n    if (currentRows < maxRows) {\n      setRows(currentRows);\n    } else {\n      setRows(maxRows);\n    }\n  };\n\n  const onDark = onColor === FormOnColor.ondark;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const maxCharactersExceeded = !!maxCharacters && textareaInput.toString().length > maxCharacters;\n  const onError = onColor === FormOnColor.oninvalid || !!errorText || !!error || maxCharactersExceeded;\n\n  const textareaWrapperClass = cn(styles.textarea, {\n    [styles['textarea--gutterBottom']]: gutterBottom,\n  });\n\n  const contentWrapperClass = cn(styles['input-container'], {\n    [styles['input-container--transparent']]: transparent,\n    [styles['input-container--on-blueberry']]: onBlueberry,\n    [styles['input-container--on-dark']]: onDark,\n    [styles['input-container--invalid']]: onError,\n    [styles['input-container--disabled']]: props.disabled,\n  });\n\n  const textareaClass = cn(styles['input-container__input'], {\n    [styles[`input-container__input--disabled`]]: props.disabled,\n  });\n\n  useEffect(() => {\n    value && setTextareaInput(value);\n\n    if (grow && referanse.current?.children && referanse.current?.children[0]) {\n      const textarea = referanse.current?.children[0] as HTMLTextAreaElement;\n      resizeHeight(textarea);\n    }\n  }, [value]);\n\n  const onChangeHandler = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    setTextareaInput(e.target.value);\n\n    if (onChange) {\n      onChange(e);\n    }\n\n    if (grow) {\n      resizeHeight(e.target);\n    }\n  };\n\n  const maxWidth = width ? getTextareaMaxWidth(width) : undefined;\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Textarea} className={textareaWrapperClass}>\n        {renderLabel(label, textareaId, onColor as FormOnColor)}\n        <div className={contentWrapperClass} ref={referanse} style={{ maxWidth }}>\n          <textarea\n            {...rest}\n            rows={rows}\n            defaultValue={defaultValue}\n            id={textareaId}\n            className={textareaClass}\n            ref={ref}\n            aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n            aria-invalid={!!onError}\n            // eslint-disable-next-line jsx-a11y/no-autofocus\n            autoFocus={autoFocus}\n            disabled={disabled}\n            name={name}\n            autoComplete={autoComplete ? autoComplete : undefined}\n            placeholder={placeholder}\n            readOnly={readOnly}\n            required={required}\n            onChange={onChangeHandler}\n            value={value}\n          />\n        </div>\n        {maxCharacters && (\n          <MaxCharacters\n            maxCharacters={maxCharacters}\n            length={textareaInput.toString().length}\n            maxText={maxText}\n            onColor={onColor}\n            maxWidth={maxWidth}\n          />\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nTextarea.displayName = 'Textarea';\n\nexport default Textarea;\n"],"names":["React","cn"],"mappings":"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"}
+{"version":3,"file":"Textarea.js","sources":["../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormOnColor } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper, { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport { renderLabel } from '../Label';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\nexport interface TextareaProps\n  extends ErrorWrapperClassNameProps,\n    Pick<\n      React.InputHTMLAttributes<HTMLTextAreaElement>,\n      | 'aria-describedby'\n      | 'autoFocus'\n      | 'disabled'\n      | 'name'\n      | 'autoComplete'\n      | 'placeholder'\n      | 'readOnly'\n      | 'required'\n      | 'defaultValue'\n      | 'onChange'\n      | 'value'\n    > {\n  /** max character limit in textarea  */\n  maxCharacters?: number;\n  /** The text is displayed in the end of the text-counter */\n  maxText?: string;\n  /** Width of textarea in characters (approximate) */\n  width?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** If true, the component will have a bottom margin. */\n  marginBottom?: boolean;\n  /** If true, the component will be transparent. */\n  transparent?: boolean;\n  /** Changes the visuals of the textarea */\n  onColor?: keyof typeof FormOnColor;\n  /** Label of the input */\n  label?: React.ReactNode;\n  /** id of the textarea */\n  textareaId?: string;\n  /** max rows */\n  maxRows?: number;\n  /** min rows */\n  minRows?: number;\n  /** auto-grows until maxRows */\n  grow?: boolean;\n  /** Activates Error style for the input */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n}\n\nconst getTextareaMaxWidth = (characters: number): string => {\n  const paddingWidth = '2rem';\n  const scrollbarWidth = '16px';\n  const borderWidth = '4px';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${scrollbarWidth} + ${borderWidth})`;\n};\n\nconst Textarea = React.forwardRef((props: TextareaProps, ref: React.Ref<HTMLTextAreaElement>) => {\n  const {\n    maxCharacters,\n    maxText,\n    width,\n    testId,\n    defaultValue,\n    marginBottom: gutterBottom,\n    transparent,\n    onColor = FormOnColor.onwhite,\n    label,\n    textareaId = uuid(),\n    minRows = 3,\n    maxRows = 10,\n    grow,\n    error,\n    errorText,\n    errorTextId,\n    errorWrapperClassName,\n    autoFocus,\n    disabled,\n    name,\n    autoComplete = 'off',\n    placeholder,\n    readOnly,\n    required,\n    onChange,\n    value,\n    ...rest\n  } = props;\n\n  const [rows, setRows] = useState(minRows);\n  const [textareaInput, setTextareaInput] = useState(value || defaultValue || '');\n  const referanse = useRef<HTMLDivElement>(null);\n  const errorTextUuid = useUuid(errorTextId);\n\n  useEffect(() => {\n    setTextareaInput(defaultValue || '');\n  }, [defaultValue]);\n\n  const resizeHeight = (target: HTMLTextAreaElement): void => {\n    const textareaLineHeight = 28;\n\n    const previousRows = target.rows;\n    target.rows = minRows; // reset number of rows in textarea\n\n    const currentRows = Math.floor((target.scrollHeight - 16) / textareaLineHeight); // scrollHeight - 16px of padding to calculate the rows\n\n    if (currentRows === previousRows) {\n      target.rows = currentRows;\n    }\n\n    if (currentRows >= maxRows) {\n      target.rows = maxRows;\n      target.scrollTop = target.scrollHeight;\n    }\n\n    if (currentRows < maxRows) {\n      setRows(currentRows);\n    } else {\n      setRows(maxRows);\n    }\n  };\n\n  const onDark = onColor === FormOnColor.ondark;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const maxCharactersExceeded = !!maxCharacters && textareaInput.toString().length > maxCharacters;\n  const onError = onColor === FormOnColor.oninvalid || !!errorText || !!error || maxCharactersExceeded;\n\n  const textareaWrapperClass = cn(styles.textarea, {\n    [styles['textarea--gutterBottom']]: gutterBottom,\n  });\n\n  const contentWrapperClass = cn(styles['input-container'], {\n    [styles['input-container--transparent']]: transparent,\n    [styles['input-container--on-blueberry']]: onBlueberry,\n    [styles['input-container--on-dark']]: onDark,\n    [styles['input-container--invalid']]: onError,\n    [styles['input-container--disabled']]: props.disabled,\n  });\n\n  const textareaClass = cn(styles['input-container__input'], {\n    [styles[`input-container__input--disabled`]]: props.disabled,\n  });\n\n  useEffect(() => {\n    if (value) setTextareaInput(value);\n\n    if (grow && referanse.current?.children && referanse.current?.children[0]) {\n      const textarea = referanse.current?.children[0] as HTMLTextAreaElement;\n      resizeHeight(textarea);\n    }\n  }, [value]);\n\n  const onChangeHandler = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    setTextareaInput(e.target.value);\n\n    if (onChange) {\n      onChange(e);\n    }\n\n    if (grow) {\n      resizeHeight(e.target);\n    }\n  };\n\n  const maxWidth = width ? getTextareaMaxWidth(width) : undefined;\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Textarea} className={textareaWrapperClass}>\n        {renderLabel(label, textareaId, onColor as FormOnColor)}\n        <div className={contentWrapperClass} ref={referanse} style={{ maxWidth }}>\n          <textarea\n            {...rest}\n            rows={rows}\n            defaultValue={defaultValue}\n            id={textareaId}\n            className={textareaClass}\n            ref={ref}\n            aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n            aria-invalid={!!onError}\n            // eslint-disable-next-line jsx-a11y/no-autofocus\n            autoFocus={autoFocus}\n            disabled={disabled}\n            name={name}\n            autoComplete={autoComplete ? autoComplete : undefined}\n            placeholder={placeholder}\n            readOnly={readOnly}\n            required={required}\n            onChange={onChangeHandler}\n            value={value}\n          />\n        </div>\n        {maxCharacters && (\n          <MaxCharacters\n            maxCharacters={maxCharacters}\n            length={textareaInput.toString().length}\n            maxText={maxText}\n            onColor={onColor}\n            maxWidth={maxWidth}\n          />\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nTextarea.displayName = 'Textarea';\n\nexport default Textarea;\n"],"names":["React","cn"],"mappings":"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"}

package/Title.js.map

@@ -1 +1 @@
-{"version":3,"file":"Title.js","sources":["../src/components/Title/Title.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\n\nimport titleStyles from './styles.module.scss';\n\nexport type TitleTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span';\nexport type TitleAppearances = 'titleFeature' | 'title1' | 'title2' | 'title3' | 'title4' | 'title5' | 'title6';\n\nexport interface TitleProps {\n  children: React.ReactNode;\n  /** Gives a unique id to the title */\n  id?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds top and bottom margin in rem. */\n  margin?: number | TitleMargin;\n  /** Changes the underlying element of the title. */\n  htmlMarkup?: TitleTags;\n  /** Changes the appearance of the title. */\n  appearance?: TitleAppearances;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const Title = React.forwardRef(function TitleForwardedRef(props: TitleProps, ref: React.ForwardedRef<HTMLHeadingElement>) {\n  const { id, children, className, htmlMarkup = 'h1', appearance = 'title1', margin = 0, testId } = props;\n  const titleClasses = classNames(\n    titleStyles.title,\n    {\n      [titleStyles['title--feature']]: appearance === 'titleFeature',\n      [titleStyles['title--title1']]: appearance === 'title1',\n      [titleStyles['title--title2']]: appearance === 'title2',\n      [titleStyles['title--title3']]: appearance === 'title3',\n      [titleStyles['title--title4']]: appearance === 'title4',\n      [titleStyles['title--title5']]: appearance === 'title5',\n      [titleStyles['title--title6']]: appearance === 'title6',\n    },\n    className\n  );\n  const CustomTag = htmlMarkup;\n\n  const inlineStyle = instanceOfTitleMargin(margin)\n    ? { marginTop: `${margin.marginTop}rem`, marginBottom: `${margin.marginBottom}rem` }\n    : { marginTop: `${margin}rem`, marginBottom: `${margin}rem` };\n\n  return (\n    <CustomTag id={id} className={titleClasses} style={inlineStyle} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Title}>\n      {children}\n    </CustomTag>\n  );\n});\n\nexport interface TitleMargin {\n  marginTop: number;\n  marginBottom: number;\n}\n\nexport const instanceOfTitleMargin = (margin: unknown): margin is TitleMargin => {\n  return Object.prototype.hasOwnProperty.call(margin, 'marginTop') && Object.prototype.hasOwnProperty.call(margin, 'marginBottom');\n};\n\nexport default Title;\n"],"names":["React"],"mappings":";;;;;AA2BO,MAAM,QAAQA,eAAM,WAAW,SAAS,kBAAkB,OAAmB,KAA6C;AACzH,QAAA,EAAE,IAAI,UAAU,WAAW,aAAa,MAAM,aAAa,UAAU,SAAS,GAAG,OAAW,IAAA;AAClG,QAAM,eAAe;AAAA,IACnB,YAAY;AAAA,IACZ;AAAA,MACE,CAAC,YAAY,gBAAgB,CAAC,GAAG,eAAe;AAAA,MAChD,CAAC,YAAY,eAAe,CAAC,GAAG,eAAe;AAAA,MAC/C,CAAC,YAAY,eAAe,CAAC,GAAG,eAAe;AAAA,MAC/C,CAAC,YAAY,eAAe,CAAC,GAAG,eAAe;AAAA,MAC/C,CAAC,YAAY,eAAe,CAAC,GAAG,eAAe;AAAA,MAC/C,CAAC,YAAY,eAAe,CAAC,GAAG,eAAe;AAAA,MAC/C,CAAC,YAAY,eAAe,CAAC,GAAG,eAAe;AAAA,IACjD;AAAA,IACA;AAAA,EACF;AACA,QAAM,YAAY;AAEZ,QAAA,cAAc,sBAAsB,MAAM,IAC5C,EAAE,WAAW,GAAG,OAAO,SAAS,OAAO,cAAc,GAAG,OAAO,YAAY,MAAA,IAC3E,EAAE,WAAW,GAAG,MAAM,OAAO,cAAc,GAAG,MAAM,MAAM;AAE9D,SACG,oBAAA,WAAA,EAAU,IAAQ,WAAW,cAAc,OAAO,aAAa,KAAU,eAAa,QAAQ,oBAAkB,YAAY,OAC1H,UACH;AAEJ,CAAC;AAOY,MAAA,wBAAwB,CAAC,WAA2C;AAC/E,SAAO,OAAO,UAAU,eAAe,KAAK,QAAQ,WAAW,KAAK,OAAO,UAAU,eAAe,KAAK,QAAQ,cAAc;AACjI;"}
+{"version":3,"file":"Title.js","sources":["../src/components/Title/Title.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\n\nimport titleStyles from './styles.module.scss';\n\nexport type TitleTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span';\nexport type TitleAppearances = 'titleFeature' | 'title1' | 'title2' | 'title3' | 'title4' | 'title5' | 'title6';\n\nexport interface TitleProps {\n  children: React.ReactNode;\n  /** Gives a unique id to the title */\n  id?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds top and bottom margin in rem. */\n  margin?: number | TitleMargin;\n  /** Changes the underlying element of the title. */\n  htmlMarkup?: TitleTags;\n  /** Changes the appearance of the title. */\n  appearance?: TitleAppearances;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const Title = React.forwardRef(function TitleForwardedRef(props: TitleProps, ref: React.ForwardedRef<HTMLHeadingElement>) {\n  const { id, children, className, htmlMarkup = 'h1', appearance = 'title1', margin = 0, testId } = props;\n  const titleClasses = classNames(\n    titleStyles.title,\n    {\n      [titleStyles['title--feature']]: appearance === 'titleFeature',\n      [titleStyles['title--title1']]: appearance === 'title1',\n      [titleStyles['title--title2']]: appearance === 'title2',\n      [titleStyles['title--title3']]: appearance === 'title3',\n      [titleStyles['title--title4']]: appearance === 'title4',\n      [titleStyles['title--title5']]: appearance === 'title5',\n      [titleStyles['title--title6']]: appearance === 'title6',\n    },\n    className\n  );\n  const CustomTag = htmlMarkup;\n\n  const inlineStyle = instanceOfTitleMargin(margin)\n    ? { marginTop: `${margin.marginTop}rem`, marginBottom: `${margin.marginBottom}rem` }\n    : { marginTop: `${margin}rem`, marginBottom: `${margin}rem` };\n\n  return (\n    <CustomTag id={id} className={titleClasses} style={inlineStyle} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Title}>\n      {children}\n    </CustomTag>\n  );\n});\n\nexport interface TitleMargin {\n  marginTop: number;\n  marginBottom: number;\n}\n\nexport const instanceOfTitleMargin = (margin: unknown): margin is TitleMargin => {\n  return Object.prototype.hasOwnProperty.call(margin, 'marginTop') && Object.prototype.hasOwnProperty.call(margin, 'marginBottom');\n};\n\nexport default Title;\n"],"names":["React"],"mappings":";;;;;AA2BO,MAAM,QAAQA,eAAM,WAAW,SAAS,kBAAkB,OAAmB,KAA6C;AAC/H,QAAM,EAAE,IAAI,UAAU,WAAW,aAAa,MAAM,aAAa,UAAU,SAAS,GAAG,OAAA,IAAW;AAClG,QAAM,eAAe;AAAA,IACnB,YAAY;AAAA,IACZ;AAAA,MACE,CAAC,YAAY,gBAAgB,CAAC,GAAG,eAAe;AAAA,MAChD,CAAC,YAAY,eAAe,CAAC,GAAG,eAAe;AAAA,MAC/C,CAAC,YAAY,eAAe,CAAC,GAAG,eAAe;AAAA,MAC/C,CAAC,YAAY,eAAe,CAAC,GAAG,eAAe;AAAA,MAC/C,CAAC,YAAY,eAAe,CAAC,GAAG,eAAe;AAAA,MAC/C,CAAC,YAAY,eAAe,CAAC,GAAG,eAAe;AAAA,MAC/C,CAAC,YAAY,eAAe,CAAC,GAAG,eAAe;AAAA,IAAA;AAAA,IAEjD;AAAA,EAAA;AAEF,QAAM,YAAY;AAElB,QAAM,cAAc,sBAAsB,MAAM,IAC5C,EAAE,WAAW,GAAG,OAAO,SAAS,OAAO,cAAc,GAAG,OAAO,YAAY,MAAA,IAC3E,EAAE,WAAW,GAAG,MAAM,OAAO,cAAc,GAAG,MAAM,MAAA;AAExD,SACE,oBAAC,WAAA,EAAU,IAAQ,WAAW,cAAc,OAAO,aAAa,KAAU,eAAa,QAAQ,oBAAkB,YAAY,OAC1H,UACH;AAEJ,CAAC;AAOM,MAAM,wBAAwB,CAAC,WAA2C;AAC/E,SAAO,OAAO,UAAU,eAAe,KAAK,QAAQ,WAAW,KAAK,OAAO,UAAU,eAAe,KAAK,QAAQ,cAAc;AACjI;"}

package/__mocks__/IntersectionObserver.js.map

@@ -1 +1 @@
-{"version":3,"file":"IntersectionObserver.js","sources":["../../src/__mocks__/IntersectionObserver.ts"],"sourcesContent":["class IntersectionObserver {\n  observe(): void {\n    // do nothing\n  }\n  unobserve(): void {\n    // do nothing\n  }\n  disconnect(): void {\n    // do nothing\n  }\n}\n\nObject.defineProperty(window, 'IntersectionObserver', {\n  value: IntersectionObserver,\n});\n\nexport default IntersectionObserver;\n"],"names":[],"mappings":"AAAA,MAAM,qBAAqB;AAAA,EACzB,UAAgB;AAAA,EAAA;AAAA,EAGhB,YAAkB;AAAA,EAAA;AAAA,EAGlB,aAAmB;AAAA,EAAA;AAGrB;AAEA,OAAO,eAAe,QAAQ,wBAAwB;AAAA,EACpD,OAAO;AACT,CAAC;"}
+{"version":3,"file":"IntersectionObserver.js","sources":["../../src/__mocks__/IntersectionObserver.ts"],"sourcesContent":["class IntersectionObserver {\n  observe(): void {\n    // do nothing\n  }\n  unobserve(): void {\n    // do nothing\n  }\n  disconnect(): void {\n    // do nothing\n  }\n}\n\nObject.defineProperty(window, 'IntersectionObserver', {\n  value: IntersectionObserver,\n});\n\nexport default IntersectionObserver;\n"],"names":[],"mappings":"AAAA,MAAM,qBAAqB;AAAA,EACzB,UAAgB;AAAA,EAEhB;AAAA,EACA,YAAkB;AAAA,EAElB;AAAA,EACA,aAAmB;AAAA,EAEnB;AACF;AAEA,OAAO,eAAe,QAAQ,wBAAwB;AAAA,EACpD,OAAO;AACT,CAAC;"}

package/__mocks__/MutationObserver.js.map

@@ -1 +1 @@
-{"version":3,"file":"MutationObserver.js","sources":["../../src/__mocks__/MutationObserver.ts"],"sourcesContent":["class MutationObserver {\n  observe(): void {\n    // do nothing\n  }\n  disconnect(): void {\n    // do nothing\n  }\n}\n\nObject.defineProperty(window, 'MutationObserver', {\n  value: MutationObserver,\n});\n\nexport default MutationObserver;\n"],"names":[],"mappings":"AAAA,MAAM,iBAAiB;AAAA,EACrB,UAAgB;AAAA,EAAA;AAAA,EAGhB,aAAmB;AAAA,EAAA;AAGrB;AAEA,OAAO,eAAe,QAAQ,oBAAoB;AAAA,EAChD,OAAO;AACT,CAAC;"}
+{"version":3,"file":"MutationObserver.js","sources":["../../src/__mocks__/MutationObserver.ts"],"sourcesContent":["class MutationObserver {\n  observe(): void {\n    // do nothing\n  }\n  disconnect(): void {\n    // do nothing\n  }\n}\n\nObject.defineProperty(window, 'MutationObserver', {\n  value: MutationObserver,\n});\n\nexport default MutationObserver;\n"],"names":[],"mappings":"AAAA,MAAM,iBAAiB;AAAA,EACrB,UAAgB;AAAA,EAEhB;AAAA,EACA,aAAmB;AAAA,EAEnB;AACF;AAEA,OAAO,eAAe,QAAQ,oBAAoB;AAAA,EAChD,OAAO;AACT,CAAC;"}

package/__mocks__/ResizeObserver.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResizeObserver.js","sources":["../../src/__mocks__/ResizeObserver.ts"],"sourcesContent":["class ResizeObserver {\n  observe() {\n    // do nothing\n  }\n  unobserve() {\n    // do nothing\n  }\n  disconnect() {\n    // do nothing\n  }\n}\n\nObject.defineProperty(window, 'ResizeObserver', {\n  value: ResizeObserver,\n});\n\nexport default ResizeObserver;\n"],"names":[],"mappings":"AAAA,MAAM,eAAe;AAAA,EACnB,UAAU;AAAA,EAAA;AAAA,EAGV,YAAY;AAAA,EAAA;AAAA,EAGZ,aAAa;AAAA,EAAA;AAGf;AAEA,OAAO,eAAe,QAAQ,kBAAkB;AAAA,EAC9C,OAAO;AACT,CAAC;"}
+{"version":3,"file":"ResizeObserver.js","sources":["../../src/__mocks__/ResizeObserver.ts"],"sourcesContent":["class ResizeObserver {\n  observe(): void {\n    // do nothing\n  }\n  unobserve(): void {\n    // do nothing\n  }\n  disconnect(): void {\n    // do nothing\n  }\n}\n\nObject.defineProperty(window, 'ResizeObserver', {\n  value: ResizeObserver,\n});\n\nexport default ResizeObserver;\n"],"names":[],"mappings":"AAAA,MAAM,eAAe;AAAA,EACnB,UAAgB;AAAA,EAEhB;AAAA,EACA,YAAkB;AAAA,EAElB;AAAA,EACA,aAAmB;AAAA,EAEnB;AACF;AAEA,OAAO,eAAe,QAAQ,kBAAkB;AAAA,EAC9C,OAAO;AACT,CAAC;"}

package/__mocks__/matchMedia.js.map

@@ -1 +1 @@
-{"version":3,"file":"matchMedia.js","sources":["../../src/__mocks__/matchMedia.ts"],"sourcesContent":["import { vi } from 'vitest';\n\nexport const mockWindowMatchMedia = vi.fn().mockImplementation(() => ({\n  matches: true,\n  addListener: vi.fn(),\n  addEventListener: vi.fn(),\n  removeEventListener: vi.fn(),\n}));\n\nObject.defineProperty(window, 'matchMedia', {\n  writable: true,\n  value: mockWindowMatchMedia,\n});\n"],"names":[],"mappings":";AAEO,MAAM,uBAAuB,GAAG,GAAG,EAAE,mBAAmB,OAAO;AAAA,EACpE,SAAS;AAAA,EACT,aAAa,GAAG,GAAG;AAAA,EACnB,kBAAkB,GAAG,GAAG;AAAA,EACxB,qBAAqB,GAAG,GAAG;AAC7B,EAAE;AAEF,OAAO,eAAe,QAAQ,cAAc;AAAA,EAC1C,UAAU;AAAA,EACV,OAAO;AACT,CAAC;"}
+{"version":3,"file":"matchMedia.js","sources":["../../src/__mocks__/matchMedia.ts"],"sourcesContent":["import { vi } from 'vitest';\n\nexport const mockWindowMatchMedia = vi.fn().mockImplementation(() => ({\n  matches: true,\n  addListener: vi.fn(),\n  addEventListener: vi.fn(),\n  removeEventListener: vi.fn(),\n}));\n\nObject.defineProperty(window, 'matchMedia', {\n  writable: true,\n  value: mockWindowMatchMedia,\n});\n"],"names":[],"mappings":";AAEO,MAAM,uBAAuB,GAAG,GAAA,EAAK,mBAAmB,OAAO;AAAA,EACpE,SAAS;AAAA,EACT,aAAa,GAAG,GAAA;AAAA,EAChB,kBAAkB,GAAG,GAAA;AAAA,EACrB,qBAAqB,GAAG,GAAA;AAC1B,EAAE;AAEF,OAAO,eAAe,QAAQ,cAAc;AAAA,EAC1C,UAAU;AAAA,EACV,OAAO;AACT,CAAC;"}

package/__mocks__/useHover.js.map

@@ -1 +1 @@
-{"version":3,"file":"useHover.js","sources":["../../src/__mocks__/useHover.ts"],"sourcesContent":["vi.mock('../hooks/useHover', () => ({\n  useHover: vi.fn().mockImplementation(ref => {\n    return { hoverRef: ref || { current: undefined }, isHovered: false };\n  }),\n}));\n\nexport {};\n"],"names":[],"mappings":"AAAA,GAAG,KAAK,qBAAqB,OAAO;AAAA,EAClC,UAAU,GAAG,GAAG,EAAE,mBAAmB,CAAO,QAAA;AACnC,WAAA,EAAE,UAAU,OAAO,EAAE,SAAS,OAAU,GAAG,WAAW,MAAM;AAAA,EACpE,CAAA;AACH,EAAE;"}
+{"version":3,"file":"useHover.js","sources":["../../src/__mocks__/useHover.ts"],"sourcesContent":["vi.mock('../hooks/useHover', () => ({\n  useHover: vi.fn().mockImplementation(ref => {\n    return { hoverRef: ref || { current: undefined }, isHovered: false };\n  }),\n}));\n\nexport {};\n"],"names":[],"mappings":"AAAA,GAAG,KAAK,qBAAqB,OAAO;AAAA,EAClC,UAAU,GAAG,GAAA,EAAK,mBAAmB,CAAA,QAAO;AAC1C,WAAO,EAAE,UAAU,OAAO,EAAE,SAAS,OAAA,GAAa,WAAW,MAAA;AAAA,EAC/D,CAAC;AACH,EAAE;"}

package/__mocks__/useLayoutEvent.js.map

@@ -1 +1 @@
-{"version":3,"file":"useLayoutEvent.js","sources":["../../src/__mocks__/useLayoutEvent.ts"],"sourcesContent":["vi.mock('../hooks/useLayoutEvent', () => ({\n  useLayoutEvent: vi.fn(),\n}));\n\nexport {};\n"],"names":[],"mappings":"AAAA,GAAG,KAAK,2BAA2B,OAAO;AAAA,EACxC,gBAAgB,GAAG,GAAG;AACxB,EAAE;"}
+{"version":3,"file":"useLayoutEvent.js","sources":["../../src/__mocks__/useLayoutEvent.ts"],"sourcesContent":["vi.mock('../hooks/useLayoutEvent', () => ({\n  useLayoutEvent: vi.fn(),\n}));\n\nexport {};\n"],"names":[],"mappings":"AAAA,GAAG,KAAK,2BAA2B,OAAO;AAAA,EACxC,gBAAgB,GAAG,GAAA;AACrB,EAAE;"}

package/__mocks__/useOutsideEvent.js.map

@@ -1 +1 @@
-{"version":3,"file":"useOutsideEvent.js","sources":["../../src/__mocks__/useOutsideEvent.ts"],"sourcesContent":["vi.mock('../hooks/useOutsideEvent', () => ({\n  useOutsideEvent: vi.fn(),\n}));\n\nexport {};\n"],"names":[],"mappings":"AAAA,GAAG,KAAK,4BAA4B,OAAO;AAAA,EACzC,iBAAiB,GAAG,GAAG;AACzB,EAAE;"}
+{"version":3,"file":"useOutsideEvent.js","sources":["../../src/__mocks__/useOutsideEvent.ts"],"sourcesContent":["vi.mock('../hooks/useOutsideEvent', () => ({\n  useOutsideEvent: vi.fn(),\n}));\n\nexport {};\n"],"names":[],"mappings":"AAAA,GAAG,KAAK,4BAA4B,OAAO;AAAA,EACzC,iBAAiB,GAAG,GAAA;AACtB,EAAE;"}

package/__mocks__/usePseudoClasses.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePseudoClasses.js","sources":["../../src/__mocks__/usePseudoClasses.ts"],"sourcesContent":["vi.mock('../hooks/usePseudoClasses', () => ({\n  usePseudoClasses: vi.fn().mockImplementation(ref => {\n    return { refObject: ref, isHovered: false, isFocused: false };\n  }),\n}));\n\nexport {};\n"],"names":[],"mappings":"AAAA,GAAG,KAAK,6BAA6B,OAAO;AAAA,EAC1C,kBAAkB,GAAG,GAAG,EAAE,mBAAmB,CAAO,QAAA;AAClD,WAAO,EAAE,WAAW,KAAK,WAAW,OAAO,WAAW,MAAM;AAAA,EAC7D,CAAA;AACH,EAAE;"}
+{"version":3,"file":"usePseudoClasses.js","sources":["../../src/__mocks__/usePseudoClasses.ts"],"sourcesContent":["vi.mock('../hooks/usePseudoClasses', () => ({\n  usePseudoClasses: vi.fn().mockImplementation(ref => {\n    return { refObject: ref, isHovered: false, isFocused: false };\n  }),\n}));\n\nexport {};\n"],"names":[],"mappings":"AAAA,GAAG,KAAK,6BAA6B,OAAO;AAAA,EAC1C,kBAAkB,GAAG,GAAA,EAAK,mBAAmB,CAAA,QAAO;AAClD,WAAO,EAAE,WAAW,KAAK,WAAW,OAAO,WAAW,MAAA;AAAA,EACxD,CAAC;AACH,EAAE;"}

package/__mocks__/useSize.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSize.js","sources":["../../src/__mocks__/useSize.ts"],"sourcesContent":["vi.mock('../hooks/useSize', () => ({\n  useSize: vi.fn().mockReturnValue({\n    height: 100,\n    width: 100,\n    top: 0,\n    left: 0,\n    right: 100,\n    bottom: 100,\n  }),\n}));\n\nexport {};\n"],"names":[],"mappings":"AAAA,GAAG,KAAK,oBAAoB,OAAO;AAAA,EACjC,SAAS,GAAG,GAAG,EAAE,gBAAgB;AAAA,IAC/B,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,KAAK;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,IACP,QAAQ;AAAA,EACT,CAAA;AACH,EAAE;"}
+{"version":3,"file":"useSize.js","sources":["../../src/__mocks__/useSize.ts"],"sourcesContent":["vi.mock('../hooks/useSize', () => ({\n  useSize: vi.fn().mockReturnValue({\n    height: 100,\n    width: 100,\n    top: 0,\n    left: 0,\n    right: 100,\n    bottom: 100,\n  }),\n}));\n\nexport {};\n"],"names":[],"mappings":"AAAA,GAAG,KAAK,oBAAoB,OAAO;AAAA,EACjC,SAAS,GAAG,GAAA,EAAK,gBAAgB;AAAA,IAC/B,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,KAAK;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,IACP,QAAQ;AAAA,EAAA,CACT;AACH,EAAE;"}

package/__mocks__/uuid.js.map

@@ -1 +1 @@
-{"version":3,"file":"uuid.js","sources":["../../src/__mocks__/uuid.ts"],"sourcesContent":["import * as uuidUtils from '../utils/uuid';\n\nconst testId = {\n  id: 0,\n};\n\n/**\n * Returnerer en unik, forutsigbar id hver gang uuid() kalles\n */\nvi.spyOn(uuidUtils, 'uuid').mockImplementation(() => {\n  testId.id++;\n  return `testid-${testId.id}`;\n});\n"],"names":[],"mappings":";AAEA,MAAM,SAAS;AAAA,EACb,IAAI;AACN;AAKA,GAAG,MAAM,WAAW,MAAM,EAAE,mBAAmB,MAAM;AAC5C,SAAA;AACA,SAAA,UAAU,OAAO,EAAE;AAC5B,CAAC;"}
+{"version":3,"file":"uuid.js","sources":["../../src/__mocks__/uuid.ts"],"sourcesContent":["import * as uuidUtils from '../utils/uuid';\n\nconst testId = {\n  id: 0,\n};\n\n/**\n * Returnerer en unik, forutsigbar id hver gang uuid() kalles\n */\nvi.spyOn(uuidUtils, 'uuid').mockImplementation(() => {\n  testId.id++;\n  return `testid-${testId.id}`;\n});\n"],"names":[],"mappings":";AAEA,MAAM,SAAS;AAAA,EACb,IAAI;AACN;AAKA,GAAG,MAAM,WAAW,MAAM,EAAE,mBAAmB,MAAM;AACnD,SAAO;AACP,SAAO,UAAU,OAAO,EAAE;AAC5B,CAAC;"}

package/components/AnchorLink/AnchorLink.d.ts

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
 export type AnchorLinkTargets = '_self' | '_blank' | '_parent';
 export type AnchorLinkTags = 'a' | 'button';
-export type AnchorLinkOnClickEvent = React.MouseEvent<HTMLElement, MouseEvent> | React.FormEvent<{}> | React.KeyboardEvent<HTMLUListElement> | null;
+export type AnchorLinkOnClickEvent = React.MouseEvent<HTMLElement, MouseEvent> | React.FormEvent<unknown> | React.KeyboardEvent<HTMLUListElement> | null;
 export interface AnchorLinkProps {
     /** Sets the content of the <a> tag */
     children: React.ReactNode;

package/components/AnchorLink/styles.module.scss

@@ -20,7 +20,7 @@ $focus-width: 0.15rem;
   display: inline;
   box-decoration-break: clone;
   overflow-wrap: break-word;
-  word-break: break-word;
+  word-break: normal;
   text-align: left;
   color: var(--color-action-text-onlight);
   border: $focus-width solid transparent;

package/components/ArticleTeaser/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/ArticleTeaser/resourceHelper.ts","../../../src/components/ArticleTeaser/ArticleTeaser.tsx"],"sourcesContent":["import { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.ArticleTeaser.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.ArticleTeaser.nb-NO.json';\nimport { HNDesignsystemArticleTeaser } from '../../resources/Resources';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemArticleTeaser => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, LanguageLocales } from '../../constants';\nimport { HNDesignsystemArticleTeaser } from '../../resources/Resources';\nimport { useLanguage } from '../../utils/language';\n\nimport styles from './styles.module.scss';\n\nexport type ArticleTeaserTags = 'div' | 'section' | 'aside' | 'article';\n\nexport interface ArticleTeaserProps {\n  /** Callback for the button. Should be used for setting the expanded boolean */\n  onExpand: () => void;\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** Id of the content, used to set aria-controls */\n  contentId: string;\n  /** If the component is expanded or not */\n  expanded: boolean;\n  /** For overriding the height of the collapsed teaser */\n  heightCollapsed?: string;\n  /** Changes the underlying element of the wrapper */\n  htmlMarkup?: ArticleTeaserTags;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemArticleTeaser>;\n  /** Sets the data-testid attribute */\n  testId?: string;\n}\n\nconst ArticleTeaser: React.FC<ArticleTeaserProps> = props => {\n  const { onExpand, children, contentId, expanded, htmlMarkup = 'div', resources, testId } = props;\n  const WrapperTag = htmlMarkup;\n\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemArticleTeaser = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  return (\n    <WrapperTag className={classNames(styles.articleteaser)} data-testid={testId} data-analyticsid={AnalyticsId.ArticleTeaser}>\n      <div\n        className={classNames(styles['articleteaser__content'], {\n          [styles['articleteaser__content--collapsed']]: !expanded,\n        })}\n        style={{\n          maxHeight: expanded ? 'none' : props.heightCollapsed,\n        }}\n      >\n        {children}\n      </div>\n      <button\n        type=\"button\"\n        className={classNames(styles['articleteaser__button'], {\n          [styles['articleteaser__button--expanded']]: expanded,\n        })}\n        onClick={onExpand}\n        aria-expanded={expanded}\n        aria-controls={contentId}\n      >\n        {expanded ? mergedResources.expandButtonOpen : mergedResources.expandButtonClose}\n      </button>\n    </WrapperTag>\n  );\n};\n\nexport default ArticleTeaser;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAKa,MAAA,eAAe,CAAC,aAA2D;AACtF,UAAQ,UAAU;AAAA,IAChB,KAAK,gBAAgB;AACZ,aAAA;AAAA,IACT,KAAK,gBAAgB;AAAA,IACrB;AACS,aAAA;AAAA,EAAA;AAEb;ACmBA,MAAM,gBAA8C,CAAS,UAAA;AACrD,QAAA,EAAE,UAAU,UAAU,WAAW,UAAU,aAAa,OAAO,WAAW,OAAA,IAAW;AAC3F,QAAM,aAAa;AAEnB,QAAM,EAAE,SAAa,IAAA,YAA6B,gBAAgB,SAAS;AACrE,QAAA,mBAAmB,aAAa,QAAQ;AAE9C,QAAM,kBAA+C;AAAA,IACnD,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AAGE,SAAA,qBAAC,YAAW,EAAA,WAAW,WAAW,OAAO,aAAa,GAAG,eAAa,QAAQ,oBAAkB,YAAY,eAC1G,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,WAAW,OAAO,wBAAwB,GAAG;AAAA,UACtD,CAAC,OAAO,mCAAmC,CAAC,GAAG,CAAC;AAAA,QAAA,CACjD;AAAA,QACD,OAAO;AAAA,UACL,WAAW,WAAW,SAAS,MAAM;AAAA,QACvC;AAAA,QAEC;AAAA,MAAA;AAAA,IACH;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAW,WAAW,OAAO,uBAAuB,GAAG;AAAA,UACrD,CAAC,OAAO,iCAAiC,CAAC,GAAG;AAAA,QAAA,CAC9C;AAAA,QACD,SAAS;AAAA,QACT,iBAAe;AAAA,QACf,iBAAe;AAAA,QAEd,UAAA,WAAW,gBAAgB,mBAAmB,gBAAgB;AAAA,MAAA;AAAA,IAAA;AAAA,EACjE,GACF;AAEJ;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/ArticleTeaser/resourceHelper.ts","../../../src/components/ArticleTeaser/ArticleTeaser.tsx"],"sourcesContent":["import { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.ArticleTeaser.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.ArticleTeaser.nb-NO.json';\nimport { HNDesignsystemArticleTeaser } from '../../resources/Resources';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemArticleTeaser => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, LanguageLocales } from '../../constants';\nimport { HNDesignsystemArticleTeaser } from '../../resources/Resources';\nimport { useLanguage } from '../../utils/language';\n\nimport styles from './styles.module.scss';\n\nexport type ArticleTeaserTags = 'div' | 'section' | 'aside' | 'article';\n\nexport interface ArticleTeaserProps {\n  /** Callback for the button. Should be used for setting the expanded boolean */\n  onExpand: () => void;\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** Id of the content, used to set aria-controls */\n  contentId: string;\n  /** If the component is expanded or not */\n  expanded: boolean;\n  /** For overriding the height of the collapsed teaser */\n  heightCollapsed?: string;\n  /** Changes the underlying element of the wrapper */\n  htmlMarkup?: ArticleTeaserTags;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemArticleTeaser>;\n  /** Sets the data-testid attribute */\n  testId?: string;\n}\n\nconst ArticleTeaser: React.FC<ArticleTeaserProps> = props => {\n  const { onExpand, children, contentId, expanded, htmlMarkup = 'div', resources, testId } = props;\n  const WrapperTag = htmlMarkup;\n\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemArticleTeaser = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  return (\n    <WrapperTag className={classNames(styles.articleteaser)} data-testid={testId} data-analyticsid={AnalyticsId.ArticleTeaser}>\n      <div\n        className={classNames(styles['articleteaser__content'], {\n          [styles['articleteaser__content--collapsed']]: !expanded,\n        })}\n        style={{\n          maxHeight: expanded ? 'none' : props.heightCollapsed,\n        }}\n      >\n        {children}\n      </div>\n      <button\n        type=\"button\"\n        className={classNames(styles['articleteaser__button'], {\n          [styles['articleteaser__button--expanded']]: expanded,\n        })}\n        onClick={onExpand}\n        aria-expanded={expanded}\n        aria-controls={contentId}\n      >\n        {expanded ? mergedResources.expandButtonOpen : mergedResources.expandButtonClose}\n      </button>\n    </WrapperTag>\n  );\n};\n\nexport default ArticleTeaser;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAKO,MAAM,eAAe,CAAC,aAA2D;AACtF,UAAQ,UAAA;AAAA,IACN,KAAK,gBAAgB;AACnB,aAAO;AAAA,IACT,KAAK,gBAAgB;AAAA,IACrB;AACE,aAAO;AAAA,EAAA;AAEb;ACmBA,MAAM,gBAA8C,CAAA,UAAS;AAC3D,QAAM,EAAE,UAAU,UAAU,WAAW,UAAU,aAAa,OAAO,WAAW,OAAA,IAAW;AAC3F,QAAM,aAAa;AAEnB,QAAM,EAAE,SAAA,IAAa,YAA6B,gBAAgB,SAAS;AAC3E,QAAM,mBAAmB,aAAa,QAAQ;AAE9C,QAAM,kBAA+C;AAAA,IACnD,GAAG;AAAA,IACH,GAAG;AAAA,EAAA;AAGL,SACE,qBAAC,YAAA,EAAW,WAAW,WAAW,OAAO,aAAa,GAAG,eAAa,QAAQ,oBAAkB,YAAY,eAC1G,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,WAAW,OAAO,wBAAwB,GAAG;AAAA,UACtD,CAAC,OAAO,mCAAmC,CAAC,GAAG,CAAC;AAAA,QAAA,CACjD;AAAA,QACD,OAAO;AAAA,UACL,WAAW,WAAW,SAAS,MAAM;AAAA,QAAA;AAAA,QAGtC;AAAA,MAAA;AAAA,IAAA;AAAA,IAEH;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAW,WAAW,OAAO,uBAAuB,GAAG;AAAA,UACrD,CAAC,OAAO,iCAAiC,CAAC,GAAG;AAAA,QAAA,CAC9C;AAAA,QACD,SAAS;AAAA,QACT,iBAAe;AAAA,QACf,iBAAe;AAAA,QAEd,UAAA,WAAW,gBAAgB,mBAAmB,gBAAgB;AAAA,MAAA;AAAA,IAAA;AAAA,EACjE,GACF;AAEJ;"}

package/components/Button/Button.d.ts

@@ -33,7 +33,7 @@ export interface ButtonProps extends HTMLButtonProps, HTMLAnchorProps, AriaAttri
     /** Function that is called when the Button loses focus */
     onBlur?: () => void;
     /** Function that is called when clicked */
-    onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent> | React.FormEvent<{}> | React.KeyboardEvent<HTMLUListElement> | null) => void;
+    onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent> | React.FormEvent<unknown> | React.KeyboardEvent<HTMLUListElement> | null) => void;
     /** Changes the button colors for different backgrounds. (Large not available in borderless variant) */
     size?: ButtonSize;
     /** Changes the visual representation of the button. */

package/components/Chip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useHover } from '../../hooks/useHover';\nimport { palette, PaletteNames } from '../../theme/palette';\nimport Icon, { IconSize, SvgIcon } from '../Icon';\nimport Undo from '../Icons/Undo';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\n\nexport enum ChipSize {\n  medium = 'medium',\n  large = 'large',\n}\n\nexport enum ChipAction {\n  remove = 'remove',\n  undo = 'undo',\n}\n\nexport enum ChipVariant {\n  normal = 'normal',\n  oncolor = 'oncolor',\n  emphasised = 'emphasised',\n}\n\nexport type ChipColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'cherry' | 'banana' | 'kiwi' | 'plum'>;\n\nexport interface ChipProps {\n  /** Sets the text of the chip */\n  children: string;\n  /** Sets the size of the chip. Default: medium */\n  size?: keyof typeof ChipSize;\n  /** Sets the background of the chip. Not used if action is \"undo\". Default: blueberry */\n  color?: ChipColors;\n  /* Changes the appearance of the chip. Not used if action is \"undo\". Default: normal */\n  variant?: keyof typeof ChipVariant;\n  /* Makes the chip a clickable button that performs an action. onClick must also be set. */\n  action: keyof typeof ChipAction;\n  /* Called when action is set and the chip is clicked on. action must also be set. */\n  onClick: () => void;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n}\n\nconst Chip: React.FC<ChipProps> = props => {\n  const { children, size = ChipSize.medium, color = 'blueberry', variant = 'normal', action, onClick, testId } = props;\n\n  const { hoverRef, isHovered } = useHover<HTMLButtonElement>();\n\n  const chipClasses = cn(styles.chip, styles[`chip--${size}`], styles[`chip--${color}`], styles[`chip--${variant}`], {\n    [styles[`chip--undo`]]: action === 'undo',\n  });\n\n  const getActionIcon = (): SvgIcon => {\n    switch (action) {\n      case 'undo':\n        return Undo;\n      case 'remove':\n        return X;\n    }\n  };\n\n  return (\n    <button className={chipClasses} onClick={onClick} ref={hoverRef} type=\"button\" data-testid={testId} data-analyticsid={AnalyticsId.Tag}>\n      {children}\n      <Icon svgIcon={getActionIcon()} size={IconSize.XXSmall} color={palette[`${color}800`]} isHovered={isHovered} />\n    </button>\n  );\n};\n\nexport default Chip;\n"],"names":["ChipSize","ChipAction","ChipVariant","cn"],"mappings":";;;;;;;;;AAaY,IAAA,6BAAAA,cAAL;AACLA,YAAA,QAAS,IAAA;AACTA,YAAA,OAAQ,IAAA;AAFEA,SAAAA;AAAA,GAAA,YAAA,CAAA,CAAA;AAKA,IAAA,+BAAAC,gBAAL;AACLA,cAAA,QAAS,IAAA;AACTA,cAAA,MAAO,IAAA;AAFGA,SAAAA;AAAA,GAAA,cAAA,CAAA,CAAA;AAKA,IAAA,gCAAAC,iBAAL;AACLA,eAAA,QAAS,IAAA;AACTA,eAAA,SAAU,IAAA;AACVA,eAAA,YAAa,IAAA;AAHHA,SAAAA;AAAA,GAAA,eAAA,CAAA,CAAA;AAyBZ,MAAM,OAA4B,CAAS,UAAA;AACnC,QAAA,EAAE,UAAU,OAAO,UAAiB,QAAQ,aAAa,UAAU,UAAU,QAAQ,SAAS,OAAW,IAAA;AAE/G,QAAM,EAAE,UAAU,UAAU,IAAI,SAA4B;AAE5D,QAAM,cAAcC,WAAG,OAAO,MAAM,OAAO,SAAS,IAAI,EAAE,GAAG,OAAO,SAAS,KAAK,EAAE,GAAG,OAAO,SAAS,OAAO,EAAE,GAAG;AAAA,IACjH,CAAC,OAAO,YAAY,CAAC,GAAG,WAAW;AAAA,EAAA,CACpC;AAED,QAAM,gBAAgB,MAAe;AACnC,YAAQ,QAAQ;AAAA,MACd,KAAK;AACI,eAAA;AAAA,MACT,KAAK;AACI,eAAA;AAAA,IAAA;AAAA,EAEb;AAEA,SACG,qBAAA,UAAA,EAAO,WAAW,aAAa,SAAkB,KAAK,UAAU,MAAK,UAAS,eAAa,QAAQ,oBAAkB,YAAY,KAC/H,UAAA;AAAA,IAAA;AAAA,IACA,oBAAA,MAAA,EAAK,SAAS,iBAAiB,MAAM,SAAS,SAAS,OAAO,QAAQ,GAAG,KAAK,KAAK,GAAG,UAAsB,CAAA;AAAA,EAAA,GAC/G;AAEJ;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useHover } from '../../hooks/useHover';\nimport { palette, PaletteNames } from '../../theme/palette';\nimport Icon, { IconSize, SvgIcon } from '../Icon';\nimport Undo from '../Icons/Undo';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\n\nexport enum ChipSize {\n  medium = 'medium',\n  large = 'large',\n}\n\nexport enum ChipAction {\n  remove = 'remove',\n  undo = 'undo',\n}\n\nexport enum ChipVariant {\n  normal = 'normal',\n  oncolor = 'oncolor',\n  emphasised = 'emphasised',\n}\n\nexport type ChipColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'cherry' | 'banana' | 'kiwi' | 'plum'>;\n\nexport interface ChipProps {\n  /** Sets the text of the chip */\n  children: string;\n  /** Sets the size of the chip. Default: medium */\n  size?: keyof typeof ChipSize;\n  /** Sets the background of the chip. Not used if action is \"undo\". Default: blueberry */\n  color?: ChipColors;\n  /* Changes the appearance of the chip. Not used if action is \"undo\". Default: normal */\n  variant?: keyof typeof ChipVariant;\n  /* Makes the chip a clickable button that performs an action. onClick must also be set. */\n  action: keyof typeof ChipAction;\n  /* Called when action is set and the chip is clicked on. action must also be set. */\n  onClick: () => void;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n}\n\nconst Chip: React.FC<ChipProps> = props => {\n  const { children, size = ChipSize.medium, color = 'blueberry', variant = 'normal', action, onClick, testId } = props;\n\n  const { hoverRef, isHovered } = useHover<HTMLButtonElement>();\n\n  const chipClasses = cn(styles.chip, styles[`chip--${size}`], styles[`chip--${color}`], styles[`chip--${variant}`], {\n    [styles[`chip--undo`]]: action === 'undo',\n  });\n\n  const getActionIcon = (): SvgIcon => {\n    switch (action) {\n      case 'undo':\n        return Undo;\n      case 'remove':\n        return X;\n    }\n  };\n\n  return (\n    <button className={chipClasses} onClick={onClick} ref={hoverRef} type=\"button\" data-testid={testId} data-analyticsid={AnalyticsId.Tag}>\n      {children}\n      <Icon svgIcon={getActionIcon()} size={IconSize.XXSmall} color={palette[`${color}800`]} isHovered={isHovered} />\n    </button>\n  );\n};\n\nexport default Chip;\n"],"names":["ChipSize","ChipAction","ChipVariant","cn"],"mappings":";;;;;;;;;AAaO,IAAK,6BAAAA,cAAL;AACLA,YAAA,QAAA,IAAS;AACTA,YAAA,OAAA,IAAQ;AAFE,SAAAA;AAAA,GAAA,YAAA,CAAA,CAAA;AAKL,IAAK,+BAAAC,gBAAL;AACLA,cAAA,QAAA,IAAS;AACTA,cAAA,MAAA,IAAO;AAFG,SAAAA;AAAA,GAAA,cAAA,CAAA,CAAA;AAKL,IAAK,gCAAAC,iBAAL;AACLA,eAAA,QAAA,IAAS;AACTA,eAAA,SAAA,IAAU;AACVA,eAAA,YAAA,IAAa;AAHH,SAAAA;AAAA,GAAA,eAAA,CAAA,CAAA;AAyBZ,MAAM,OAA4B,CAAA,UAAS;AACzC,QAAM,EAAE,UAAU,OAAO,UAAiB,QAAQ,aAAa,UAAU,UAAU,QAAQ,SAAS,OAAA,IAAW;AAE/G,QAAM,EAAE,UAAU,UAAA,IAAc,SAAA;AAEhC,QAAM,cAAcC,WAAG,OAAO,MAAM,OAAO,SAAS,IAAI,EAAE,GAAG,OAAO,SAAS,KAAK,EAAE,GAAG,OAAO,SAAS,OAAO,EAAE,GAAG;AAAA,IACjH,CAAC,OAAO,YAAY,CAAC,GAAG,WAAW;AAAA,EAAA,CACpC;AAED,QAAM,gBAAgB,MAAe;AACnC,YAAQ,QAAA;AAAA,MACN,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,IAAA;AAAA,EAEb;AAEA,SACE,qBAAC,UAAA,EAAO,WAAW,aAAa,SAAkB,KAAK,UAAU,MAAK,UAAS,eAAa,QAAQ,oBAAkB,YAAY,KAC/H,UAAA;AAAA,IAAA;AAAA,IACD,oBAAC,MAAA,EAAK,SAAS,cAAA,GAAiB,MAAM,SAAS,SAAS,OAAO,QAAQ,GAAG,KAAK,KAAK,GAAG,UAAA,CAAsB;AAAA,EAAA,GAC/G;AAEJ;"}

package/components/Drawer/styles.module.scss

@@ -9,10 +9,10 @@
   // Scroll shadow
   // Inspired by: https://css-tricks.com/books/greatest-css-tricks/scroll-shadows/
   background:
-    linear-gradient(white 30%, rgba(255 255 255 / 0%)) center top,
-    linear-gradient(rgba(255 255 255 / 0%), white 70%) center bottom,
-    linear-gradient(rgba(0 0 0 / 46%), rgba(0 0 0 / 0%)) center top,
-    linear-gradient(rgba(0 0 0 / 0%), rgba(0 0 0 / 46%)) center bottom;
+    linear-gradient(white 30%, rgb(255 255 255 / 0%)) center top,
+    linear-gradient(rgb(255 255 255 / 0%), white 70%) center bottom,
+    linear-gradient(rgb(0 0 0 / 46%), rgb(0 0 0 / 0%)) center top,
+    linear-gradient(rgb(0 0 0 / 0%), rgb(0 0 0 / 46%)) center bottom;
   background-repeat: no-repeat;
   background-size:
     100% 40px,

package/components/Dropdown/index.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import React__default, { useRef, useState, useEffect } from "react";
+import React__default, { useRef, useId, useEffect } from "react";
 import classNames from "classnames";
 import { theme } from "../../theme/index.js";
 import "../../hooks/useBreakpoint.js";
@@ -7,16 +7,12 @@ import { useHover } from "../../hooks/useHover.js";
 import { useToggle } from "../../hooks/useToggle.js";
 import { useKeyboardEvent } from "../../hooks/useKeyboardEvent.js";
 import { useOutsideEvent } from "../../hooks/useOutsideEvent.js";
-import { useUuid } from "../../hooks/useUuid.js";
 import { LanguageLocales, ZIndex, KeyboardEventKey, AnalyticsId, IconSize } from "../../constants.js";
-import { isComponent } from "../../utils/component.js";
 import { useLanguage } from "../../utils/language.js";
 import { mergeRefs } from "../../utils/refs.js";
 import { B as Button } from "../../Button.js";
-import { C as Checkbox } from "../../Checkbox.js";
 import { I as Icon } from "../../Icon.js";
 import PlusSmall from "../Icons/PlusSmall.js";
-import { R as RadioButton } from "../../RadioButton.js";
 import styles from "./styles.module.scss";
 const closeText$1 = "Close";
 const enGB = {
@@ -65,10 +61,10 @@ const Dropdown = (props) => {
   const openedByKeyboard = useRef(false);
   const { value: isOpen, toggleValue: toggleIsOpen } = useToggle(!disabled && open, onToggle);
   const inputRefList = useRef(React__default.Children.map(children, () => React__default.createRef()));
-  const [currentIndex, setCurrentIndex] = useState();
-  const labelId = useUuid();
-  const toggleLabelId = useUuid();
-  const optionIdPrefix = useUuid();
+  const labelId = useId();
+  const toggleLabelId = useId();
+  const optionIdPrefix = useId();
+  const contentId = useId();
   const { language } = useLanguage(LanguageLocales.NORWEGIAN);
   const defaultResources = getResources(language);
   const mergedResources = {
@@ -86,14 +82,11 @@ const Dropdown = (props) => {
     (_a = buttonRef.current) == null ? void 0 : _a.focus();
   };
   useEffect(() => {
-    var _a, _b, _c;
+    var _a, _b;
     if (isOpen && openedByKeyboard.current) {
-      (_c = (_b = (_a = inputRefList.current) == null ? void 0 : _a.find((inputRef, index) => {
-        if (inputRef.current && !inputRef.current.hasAttribute("disabled")) {
-          setCurrentIndex(index);
-          return true;
-        }
-      })) == null ? void 0 : _b.current) == null ? void 0 : _c.focus();
+      const firstEnabled = (_a = inputRefList.current) == null ? void 0 : _a.find((r) => r.current && !r.current.hasAttribute("disabled"));
+      (_b = firstEnabled == null ? void 0 : firstEnabled.current) == null ? void 0 : _b.focus();
+      openedByKeyboard.current = false;
     }
   }, [isOpen]);
   const handleKeyboardNavigation = (event) => {
@@ -126,7 +119,6 @@ const Dropdown = (props) => {
     if (nextIndex !== -1 && event.key !== KeyboardEventKey.Space) {
       event.preventDefault();
       (_a = inputRefList.current[nextIndex].current) == null ? void 0 : _a.focus();
-      setCurrentIndex(nextIndex);
     }
   };
   useKeyboardEvent(dropdownRef, handleKeyboardNavigation, [
@@ -153,8 +145,9 @@ const Dropdown = (props) => {
   );
   const contentClasses = classNames(styles.dropdown__content, isOpen && styles["dropdown__content--open"]);
   const renderChildren = React__default.Children.map(children, (child, index) => {
-    const role = isComponent(child, RadioButton) ? "menuitemradio" : isComponent(child, Checkbox) ? "menuitemcheckbox" : "menuitem";
-    return /* @__PURE__ */ jsx("li", { className: styles.dropdown__input, role, id: `${optionIdPrefix}-${index}`, children: React__default.isValidElement(child) && inputRefList.current && inputRefList.current[index] ? React__default.cloneElement(child, { ref: mergeRefs([child.props.ref, inputRefList.current[index]]) }) : child });
+    return /* @__PURE__ */ jsx("li", { className: styles.dropdown__input, id: `${optionIdPrefix}-${index}`, children: React__default.isValidElement(child) && inputRefList.current && inputRefList.current[index] ? React__default.cloneElement(child, {
+      ref: mergeRefs([child.props.ref, inputRefList.current[index]])
+    }) : child });
   });
   return /* @__PURE__ */ jsxs("div", { className: styles.dropdown, ref: dropdownRef, children: [
     /* @__PURE__ */ jsx("span", { id: labelId, className: styles.dropdown__label, children: label }),
@@ -169,7 +162,8 @@ const Dropdown = (props) => {
         "data-analyticsid": AnalyticsId.Dropdown,
         disabled,
         "aria-labelledby": toggleLabelId,
-        "aria-haspopup": "menu",
+        "aria-haspopup": true,
+        "aria-controls": contentId,
         "aria-expanded": isOpen,
         children: [
           /* @__PURE__ */ jsx("span", { id: toggleLabelId, className: styles.dropdown__toggle__label, children: placeholder }),
@@ -186,21 +180,18 @@ const Dropdown = (props) => {
         ]
       }
     ),
-    /* @__PURE__ */ jsxs("div", { className: contentClasses, style: { width: fluid ? "100%" : `auto`, minWidth: dropdownMinWidth ?? "auto", zIndex }, children: [
-      /* @__PURE__ */ jsx(
-        "ul",
-        {
-          className: styles.dropdown__options,
-          role: "menu",
-          "aria-labelledby": labelId,
-          tabIndex: -1,
-          "aria-activedescendant": typeof currentIndex !== "undefined" ? `${optionIdPrefix}-${currentIndex}` : void 0,
-          ref: optionsRef,
-          children: renderChildren
-        }
-      ),
-      !noCloseButton && /* @__PURE__ */ jsx("div", { className: styles.dropdown__close, children: /* @__PURE__ */ jsx(Button, { onClick: handleClose, "aria-expanded": isOpen, children: mergedResources.closeText }) })
-    ] })
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        id: contentId,
+        className: contentClasses,
+        style: { width: fluid ? "100%" : `auto`, minWidth: dropdownMinWidth ?? "auto", zIndex },
+        children: [
+          /* @__PURE__ */ jsx("ul", { className: styles.dropdown__options, role: "group", "aria-labelledby": labelId, tabIndex: -1, ref: optionsRef, children: renderChildren }),
+          !noCloseButton && /* @__PURE__ */ jsx("div", { className: styles.dropdown__close, children: /* @__PURE__ */ jsx(Button, { onClick: handleClose, children: mergedResources.closeText }) })
+        ]
+      }
+    )
   ] });
 };
 export {

package/components/Dropdown/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Dropdown/resourceHelper.ts","../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Dropdown.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Dropdown.nb-NO.json';\nimport { HNDesignsystemDropdown } from '../../resources/Resources';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemDropdown => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import React, { useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport {\n  AnalyticsId,\n  IconSize,\n  KeyboardEventKey,\n  LanguageLocales,\n  ZIndex,\n  theme,\n  useHover,\n  useKeyboardEvent,\n  useOutsideEvent,\n  useToggle,\n  useUuid,\n} from '../..';\nimport { HNDesignsystemDropdown } from '../../resources/Resources';\nimport { isComponent } from '../../utils/component';\nimport { useLanguage } from '../../utils/language';\nimport { mergeRefs } from '../../utils/refs';\nimport Button from '../Button';\nimport Checkbox, { CheckboxProps } from '../Checkbox';\nimport Icon from '../Icon';\nimport PlusSmall from '../Icons/PlusSmall';\nimport RadioButton, { RadioButtonProps } from '../RadioButton';\nimport { getResources } from './resourceHelper';\n\nimport styles from './styles.module.scss';\n\nexport enum DropdownOnColor {\n  onwhite = 'onwhite',\n  ongrey = 'ongrey',\n  onblueberry = 'onblueberry',\n  oncherry = 'oncherry',\n}\n\nexport interface DropdownProps {\n  /** Label for dropdown. Visible for screen readers  */\n  label: string;\n  /** Text on the trigger button that opens the dropdown */\n  placeholder: string;\n  /** Sets the dropdown content */\n  children: React.ReactNode;\n  /** @deprecated Close button text */\n  closeText?: string;\n  /** Minimum width for the dropdown in pixels. Does not affect trigger button */\n  dropdownMinWidth?: number;\n  /** No close button */\n  noCloseButton?: boolean;\n  /** Called when dropdown is open/closed */\n  onToggle?: (isOpen: boolean) => void;\n  /** Whether the dropdown is open or not */\n  open?: boolean;\n  /** Changes the visuals of the dropdown */\n  onColor?: keyof typeof DropdownOnColor;\n  /** Makes the background of the trigger transparent */\n  transparent?: boolean;\n  /** Makes the width of the full component adjust to its parent */\n  fluid?: boolean;\n  /** Makes the dropdown disabled */\n  disabled?: boolean;\n  /** Sets the data-testid attribute on the dropdown button */\n  testId?: string;\n  /** Overrides the default z-index of the DropDownContent */\n  zIndex?: number;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemDropdown>;\n}\n\nconst Dropdown: React.FC<DropdownProps> = props => {\n  const {\n    label,\n    placeholder,\n    noCloseButton = false,\n    onToggle,\n    dropdownMinWidth,\n    open = false,\n    children,\n    onColor = DropdownOnColor.onwhite,\n    transparent = false,\n    fluid = false,\n    testId,\n    disabled,\n    zIndex = ZIndex.PopOver,\n    resources,\n  } = props;\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const optionsRef = useRef<HTMLUListElement>(null);\n  const { hoverRef: buttonRef, isHovered } = useHover<HTMLButtonElement>();\n  const openedByKeyboard = useRef<boolean>(false);\n  const { value: isOpen, toggleValue: toggleIsOpen } = useToggle(!disabled && open, onToggle);\n  const inputRefList = useRef(React.Children.map(children, () => React.createRef<HTMLElement>()));\n  const [currentIndex, setCurrentIndex] = useState<number>();\n  const labelId = useUuid();\n  const toggleLabelId = useUuid();\n  const optionIdPrefix = useUuid();\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemDropdown = {\n    ...defaultResources,\n    ...resources,\n    closeText: props.closeText ?? resources?.closeText ?? defaultResources.closeText,\n  };\n\n  const handleOpen = (isKeyboard: boolean): void => {\n    openedByKeyboard.current = isKeyboard;\n    toggleIsOpen();\n  };\n\n  const handleClose = (): void => {\n    toggleIsOpen();\n    buttonRef.current?.focus();\n  };\n\n  useEffect(() => {\n    if (isOpen && openedByKeyboard.current) {\n      inputRefList.current\n        ?.find((inputRef, index) => {\n          if (inputRef.current && !inputRef.current.hasAttribute('disabled')) {\n            setCurrentIndex(index);\n            return true;\n          }\n        })\n        ?.current?.focus();\n    }\n  }, [isOpen]);\n\n  const handleKeyboardNavigation = (event: KeyboardEvent): void => {\n    if (!inputRefList.current) {\n      return;\n    }\n\n    if (event.key === KeyboardEventKey.Escape) {\n      if (isOpen) handleClose();\n      return;\n    }\n\n    if (!isOpen) {\n      handleOpen(true);\n      event.preventDefault();\n      return;\n    }\n\n    const index = inputRefList.current.findIndex(x => x.current === event.target);\n    let nextIndex = index;\n\n    if (event.key === KeyboardEventKey.Home) {\n      nextIndex = 0;\n    } else if (event.key === KeyboardEventKey.End) {\n      nextIndex = inputRefList.current.length - 1;\n    } else if (event.key === KeyboardEventKey.ArrowDown && index < inputRefList.current.length - 1) {\n      nextIndex = index + 1;\n    } else if (event.key === KeyboardEventKey.ArrowUp && index > 0) {\n      nextIndex = index - 1;\n    } else if (event.key === KeyboardEventKey.Enter && index !== -1) {\n      nextIndex = index;\n    }\n\n    if (nextIndex !== -1 && event.key !== KeyboardEventKey.Space) {\n      event.preventDefault();\n\n      inputRefList.current[nextIndex].current?.focus();\n      setCurrentIndex(nextIndex);\n    }\n  };\n\n  useKeyboardEvent(dropdownRef, handleKeyboardNavigation, [\n    KeyboardEventKey.ArrowDown,\n    KeyboardEventKey.ArrowUp,\n    KeyboardEventKey.End,\n    KeyboardEventKey.Enter,\n    KeyboardEventKey.Escape,\n    KeyboardEventKey.Home,\n    KeyboardEventKey.Space,\n  ]);\n\n  useOutsideEvent(dropdownRef, () => isOpen && handleClose());\n\n  const toggleClasses = classNames(\n    styles.dropdown__toggle,\n    !disabled && {\n      [styles['dropdown__toggle--on-white']]: onColor === DropdownOnColor.onwhite,\n      [styles['dropdown__toggle--on-grey']]: onColor === DropdownOnColor.ongrey,\n      [styles['dropdown__toggle--on-blueberry']]: onColor === DropdownOnColor.onblueberry,\n      [styles['dropdown__toggle--on-cherry']]: onColor === DropdownOnColor.oncherry,\n      [styles['dropdown__toggle--transparent']]: transparent,\n      [styles['dropdown__toggle--fluid']]: fluid,\n      [styles['dropdown__toggle--open']]: isOpen,\n    }\n  );\n\n  const contentClasses = classNames(styles.dropdown__content, isOpen && styles['dropdown__content--open']);\n\n  const renderChildren = React.Children.map(children, (child, index) => {\n    const role = isComponent<RadioButtonProps>(child, RadioButton)\n      ? 'menuitemradio'\n      : isComponent<CheckboxProps>(child, Checkbox)\n        ? 'menuitemcheckbox'\n        : 'menuitem';\n\n    return (\n      <li className={styles.dropdown__input} role={role} id={`${optionIdPrefix}-${index}`}>\n        {React.isValidElement(child) && inputRefList.current && inputRefList.current[index]\n          ? React.cloneElement(child as React.ReactElement, { ref: mergeRefs([child.props.ref, inputRefList.current[index]]) })\n          : child}\n      </li>\n    );\n  });\n\n  return (\n    <div className={styles.dropdown} ref={dropdownRef}>\n      <span id={labelId} className={styles.dropdown__label}>\n        {label}\n      </span>\n      <button\n        type=\"button\"\n        onClick={(): false | void => handleOpen(false)}\n        className={toggleClasses}\n        ref={buttonRef}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Dropdown}\n        disabled={disabled}\n        aria-labelledby={toggleLabelId}\n        aria-haspopup=\"menu\"\n        aria-expanded={isOpen}\n      >\n        <span id={toggleLabelId} className={styles.dropdown__toggle__label}>\n          {placeholder}\n        </span>\n        <Icon\n          color={disabled ? theme.palette.neutral700 : theme.palette.blueberry600}\n          svgIcon={PlusSmall}\n          className={styles.dropdown__icon}\n          isHovered={!disabled && isHovered}\n          size={IconSize.XSmall}\n        />\n      </button>\n      <div className={contentClasses} style={{ width: fluid ? '100%' : `auto`, minWidth: dropdownMinWidth ?? 'auto', zIndex: zIndex }}>\n        <ul\n          className={styles.dropdown__options}\n          role=\"menu\"\n          aria-labelledby={labelId}\n          tabIndex={-1}\n          aria-activedescendant={typeof currentIndex !== 'undefined' ? `${optionIdPrefix}-${currentIndex}` : undefined}\n          ref={optionsRef}\n        >\n          {renderChildren}\n        </ul>\n        {!noCloseButton && (\n          <div className={styles.dropdown__close}>\n            <Button onClick={handleClose} aria-expanded={isOpen}>\n              {mergedResources.closeText}\n            </Button>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default Dropdown;\n"],"names":["DropdownOnColor","React"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Dropdown/resourceHelper.ts","../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Dropdown.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Dropdown.nb-NO.json';\nimport { HNDesignsystemDropdown } from '../../resources/Resources';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemDropdown => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import React, { useEffect, useRef, useId } from 'react';\n\nimport classNames from 'classnames';\n\nimport {\n  AnalyticsId,\n  IconSize,\n  KeyboardEventKey,\n  LanguageLocales,\n  ZIndex,\n  theme,\n  useHover,\n  useKeyboardEvent,\n  useOutsideEvent,\n  useToggle,\n} from '../..';\nimport { getResources } from './resourceHelper';\nimport { HNDesignsystemDropdown } from '../../resources/Resources';\nimport { useLanguage } from '../../utils/language';\nimport { mergeRefs } from '../../utils/refs';\nimport Button from '../Button';\nimport Icon from '../Icon';\nimport PlusSmall from '../Icons/PlusSmall';\n\nimport styles from './styles.module.scss';\n\nexport enum DropdownOnColor {\n  onwhite = 'onwhite',\n  ongrey = 'ongrey',\n  onblueberry = 'onblueberry',\n  oncherry = 'oncherry',\n}\n\nexport interface DropdownProps {\n  /** Label for dropdown. Visible for screen readers  */\n  label: string;\n  /** Text on the trigger button that opens the dropdown */\n  placeholder: string;\n  /** Sets the dropdown content */\n  children: React.ReactNode;\n  /** @deprecated Close button text */\n  closeText?: string;\n  /** Minimum width for the dropdown in pixels. Does not affect trigger button */\n  dropdownMinWidth?: number;\n  /** No close button */\n  noCloseButton?: boolean;\n  /** Called when dropdown is open/closed */\n  onToggle?: (isOpen: boolean) => void;\n  /** Whether the dropdown is open or not */\n  open?: boolean;\n  /** Changes the visuals of the dropdown */\n  onColor?: keyof typeof DropdownOnColor;\n  /** Makes the background of the trigger transparent */\n  transparent?: boolean;\n  /** Makes the width of the full component adjust to its parent */\n  fluid?: boolean;\n  /** Makes the dropdown disabled */\n  disabled?: boolean;\n  /** Sets the data-testid attribute on the dropdown button */\n  testId?: string;\n  /** Overrides the default z-index of the DropDownContent */\n  zIndex?: number;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemDropdown>;\n}\n\nconst Dropdown: React.FC<DropdownProps> = props => {\n  const {\n    label,\n    placeholder,\n    noCloseButton = false,\n    onToggle,\n    dropdownMinWidth,\n    open = false,\n    children,\n    onColor = DropdownOnColor.onwhite,\n    transparent = false,\n    fluid = false,\n    testId,\n    disabled,\n    zIndex = ZIndex.PopOver,\n    resources,\n  } = props;\n\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const optionsRef = useRef<HTMLUListElement>(null);\n  const { hoverRef: buttonRef, isHovered } = useHover<HTMLButtonElement>();\n  const openedByKeyboard = useRef<boolean>(false);\n  const { value: isOpen, toggleValue: toggleIsOpen } = useToggle(!disabled && open, onToggle);\n  const inputRefList = useRef(React.Children.map(children, () => React.createRef<HTMLElement>()));\n  const labelId = useId();\n  const toggleLabelId = useId();\n  const optionIdPrefix = useId();\n  const contentId = useId();\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemDropdown = {\n    ...defaultResources,\n    ...resources,\n    closeText: props.closeText ?? resources?.closeText ?? defaultResources.closeText,\n  };\n\n  const handleOpen = (isKeyboard: boolean): void => {\n    openedByKeyboard.current = isKeyboard;\n    toggleIsOpen();\n  };\n\n  const handleClose = (): void => {\n    toggleIsOpen();\n    buttonRef.current?.focus();\n  };\n\n  useEffect(() => {\n    if (isOpen && openedByKeyboard.current) {\n      const firstEnabled = inputRefList.current?.find(r => r.current && !r.current.hasAttribute('disabled'));\n      firstEnabled?.current?.focus();\n      openedByKeyboard.current = false;\n    }\n  }, [isOpen]);\n\n  const handleKeyboardNavigation = (event: KeyboardEvent): void => {\n    if (!inputRefList.current) {\n      return;\n    }\n\n    if (event.key === KeyboardEventKey.Escape) {\n      if (isOpen) handleClose();\n      return;\n    }\n\n    if (!isOpen) {\n      handleOpen(true);\n      event.preventDefault();\n      return;\n    }\n\n    const index = inputRefList.current.findIndex(x => x.current === event.target);\n    let nextIndex = index;\n\n    if (event.key === KeyboardEventKey.Home) {\n      nextIndex = 0;\n    } else if (event.key === KeyboardEventKey.End) {\n      nextIndex = inputRefList.current.length - 1;\n    } else if (event.key === KeyboardEventKey.ArrowDown && index < inputRefList.current.length - 1) {\n      nextIndex = index + 1;\n    } else if (event.key === KeyboardEventKey.ArrowUp && index > 0) {\n      nextIndex = index - 1;\n    } else if (event.key === KeyboardEventKey.Enter && index !== -1) {\n      nextIndex = index;\n    }\n\n    if (nextIndex !== -1 && event.key !== KeyboardEventKey.Space) {\n      event.preventDefault();\n\n      inputRefList.current[nextIndex].current?.focus();\n    }\n  };\n\n  useKeyboardEvent(dropdownRef, handleKeyboardNavigation, [\n    KeyboardEventKey.ArrowDown,\n    KeyboardEventKey.ArrowUp,\n    KeyboardEventKey.End,\n    KeyboardEventKey.Enter,\n    KeyboardEventKey.Escape,\n    KeyboardEventKey.Home,\n    KeyboardEventKey.Space,\n  ]);\n\n  useOutsideEvent(dropdownRef, () => isOpen && handleClose());\n\n  const toggleClasses = classNames(\n    styles.dropdown__toggle,\n    !disabled && {\n      [styles['dropdown__toggle--on-white']]: onColor === DropdownOnColor.onwhite,\n      [styles['dropdown__toggle--on-grey']]: onColor === DropdownOnColor.ongrey,\n      [styles['dropdown__toggle--on-blueberry']]: onColor === DropdownOnColor.onblueberry,\n      [styles['dropdown__toggle--on-cherry']]: onColor === DropdownOnColor.oncherry,\n      [styles['dropdown__toggle--transparent']]: transparent,\n      [styles['dropdown__toggle--fluid']]: fluid,\n      [styles['dropdown__toggle--open']]: isOpen,\n    }\n  );\n\n  const contentClasses = classNames(styles.dropdown__content, isOpen && styles['dropdown__content--open']);\n\n  const renderChildren = React.Children.map(children, (child, index) => {\n    return (\n      <li className={styles.dropdown__input} id={`${optionIdPrefix}-${index}`}>\n        {React.isValidElement(child) && inputRefList.current && inputRefList.current[index]\n          ? React.cloneElement(child as React.ReactElement, {\n              ref: mergeRefs([child.props.ref, inputRefList.current[index]]),\n            })\n          : child}\n      </li>\n    );\n  });\n\n  return (\n    <div className={styles.dropdown} ref={dropdownRef}>\n      <span id={labelId} className={styles.dropdown__label}>\n        {label}\n      </span>\n      <button\n        type=\"button\"\n        onClick={(): false | void => handleOpen(false)}\n        className={toggleClasses}\n        ref={buttonRef}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Dropdown}\n        disabled={disabled}\n        aria-labelledby={toggleLabelId}\n        aria-haspopup={true}\n        aria-controls={contentId}\n        aria-expanded={isOpen}\n      >\n        <span id={toggleLabelId} className={styles.dropdown__toggle__label}>\n          {placeholder}\n        </span>\n        <Icon\n          color={disabled ? theme.palette.neutral700 : theme.palette.blueberry600}\n          svgIcon={PlusSmall}\n          className={styles.dropdown__icon}\n          isHovered={!disabled && isHovered}\n          size={IconSize.XSmall}\n        />\n      </button>\n      <div\n        id={contentId}\n        className={contentClasses}\n        style={{ width: fluid ? '100%' : `auto`, minWidth: dropdownMinWidth ?? 'auto', zIndex: zIndex }}\n      >\n        <ul className={styles.dropdown__options} role=\"group\" aria-labelledby={labelId} tabIndex={-1} ref={optionsRef}>\n          {renderChildren}\n        </ul>\n        {!noCloseButton && (\n          <div className={styles.dropdown__close}>\n            <Button onClick={handleClose}>{mergedResources.closeText}</Button>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default Dropdown;\n"],"names":["DropdownOnColor","React"],"mappings":"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"}

package/components/ElementHeader/ElementHeader.d.ts

@@ -5,7 +5,7 @@ import { BadgeProps, BadgeType } from '../Badge';
 import { SvgIcon } from '../Icon';
 import { StatusDotProps, StatusDotType } from '../StatusDot';
 import { TitleTags } from '../Title';
-import { StatusDotMultiCompositionProps, StatusDotMultiCompositionType } from './StatusDotMultiComposition';
+import { StatusDotListProps, StatusDotListType } from './StatusDotList/StatusDotList';
 export type ElementHeaderSize = 'small' | 'medium' | 'large';
 export type ParentType = 'linklist' | 'expanderlist';
 export interface ElementHeaderType extends React.FC<ElementHeaderProps> {
@@ -13,7 +13,7 @@ export interface ElementHeaderType extends React.FC<ElementHeaderProps> {
     Badge?: BadgeType;
     ElementHeaderText?: ElementHeaderTextType;
     StatusDot?: StatusDotType;
-    StatusDotMultiComposition?: StatusDotMultiCompositionType;
+    StatusDotList?: StatusDotListType;
 }
 export declare const renderElementHeader: (element: React.ReactNode, options: Pick<ElementHeaderProps, "titleHtmlMarkup" | "isHovered" | "size" | "parentType" | "chevronIcon" | "icon" | "highlightText">) => React.ReactElement | undefined;
 export interface ElementHeaderProps {
@@ -43,7 +43,7 @@ interface ElementHeaderChildren {
     elementHeaderTextChildren: React.ReactElement<ElementHeaderTextProps>[];
     badgeChildren?: React.ReactElement<BadgeProps>[];
     statusDotChildren?: React.ReactElement<StatusDotProps>[];
-    statusDotMCChild?: React.ReactElement<StatusDotMultiCompositionProps>;
+    statusDotMCChild?: React.ReactElement<StatusDotListProps>;
     elementChild?: React.ReactElement;
     stringChildren: string[];
     remainingChildren: React.ReactNode[];
@@ -53,7 +53,7 @@ export declare const mapChildren: ChildrenMapper;
 export declare const ElementHeaderRoot: ElementHeaderType;
 type ElementHeaderComponent = typeof ElementHeaderRoot & {
     Text: React.FC<ElementHeaderTextProps>;
-    StatusDotMultiComposition: React.FC<StatusDotMultiCompositionProps>;
+    StatusDotList: React.FC<StatusDotListProps>;
 };
 declare const ElementHeader: ElementHeaderComponent;
 export default ElementHeader;

package/components/ElementHeader/{StatusDotMultiComposition/StatusDotMultiComposition.d.ts → StatusDotList/StatusDotList.d.ts}

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
 import { StatusDotProps } from '../../StatusDot';
-export type StatusDotMultiCompositionType = React.FC<StatusDotMultiCompositionProps>;
-export interface StatusDotMultiCompositionProps {
+export type StatusDotListType = React.FC<StatusDotListProps>;
+export interface StatusDotListProps {
     /** Additional text to the bottom statusdot */
     additionalText?: string;
     /** StatusDot that is under the others and outside the stacking */
@@ -19,5 +19,5 @@ export interface StatusDotMultiCompositionProps {
     /** StatusDot that is over the others and outside the stacking */
     topStatusDot?: React.ReactElement<StatusDotProps>;
 }
-export declare const StatusDotMultiComposition: StatusDotMultiCompositionType;
-export default StatusDotMultiComposition;
+export declare const StatusDotList: StatusDotListType;
+export default StatusDotList;

package/components/ElementHeader/StatusDotList/index.d.ts

@@ -0,0 +1,3 @@
+import { default as StatusDotList } from './StatusDotList';
+export * from './StatusDotList';
+export default StatusDotList;