@helsenorge/designsystem-react 14.0.0-beta.9 → 14.0.0

package/lib/TableHeadCell.js

@@ -5,9 +5,9 @@ import { t as ArrowUp_default } from "./ArrowUp.js";
 import { i as SortDirection, n as ModeType } from "./constants3.js";
 import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
-import styles from "./components/Table/styles.module.scss";
+import tableStyles from "./components/Table/styles.module.scss";
 const TableHeadCell = ({ sortable, onClick, className, children, sortDir, mode = ModeType.normal, scope = "col", ...rest }) => {
-	const tableHeadCellDefaultClass = classNames(styles["table__head-cell"], className, { [styles["table__head-cell--compact"]]: mode === ModeType.compact });
+	const tableHeadCellDefaultClass = classNames(tableStyles["table__head-cell"], className, { [tableStyles["table__head-cell--compact"]]: mode === ModeType.compact });
 	if (!sortable && !children) return /* @__PURE__ */ jsx("td", { className: tableHeadCellDefaultClass });
 	if (!sortable) return /* @__PURE__ */ jsx("th", {
 		scope,
@@ -15,9 +15,9 @@ const TableHeadCell = ({ sortable, onClick, className, children, sortDir, mode =
 		...rest,
 		children
 	});
-	const sortableClasses = classNames(tableHeadCellDefaultClass, styles["table__head-cell--sortable"], className);
+	const sortableClasses = classNames(tableHeadCellDefaultClass, tableStyles["table__head-cell--sortable"], className);
 	const renderSortIcon = () => sortDir && /* @__PURE__ */ jsx("div", {
-		className: styles["table__head-cell-sort-icon-wrapper"],
+		className: tableStyles["table__head-cell-sort-icon-wrapper"],
 		children: /* @__PURE__ */ jsx(Icon_default, {
 			svgIcon: sortDir == SortDirection.asc ? ArrowDown_default : ArrowUp_default,
 			size: IconSize.XXSmall
@@ -37,7 +37,7 @@ const TableHeadCell = ({ sortable, onClick, className, children, sortDir, mode =
 		children: /* @__PURE__ */ jsxs("button", {
 			type: "button",
 			onClick,
-			className: styles["table__sort-button"],
+			className: tableStyles["table__sort-button"],
 			"aria-pressed": sortDir ? !!sortDir : void 0,
 			children: [renderSortIcon(), children]
 		})

package/lib/TableHeadCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeadCell.js","names":["TableHeadCell: React.FC<Props>"],"sources":["../src/components/Table/TableHeadCell/TableHeadCell.tsx","../src/components/Table/TableHeadCell/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport Icon, { IconSize } from '../../Icon';\nimport ArrowDown from '../../Icons/ArrowDown';\nimport ArrowUp from '../../Icons/ArrowUp';\nimport { ModeType, SortDirection } from '../constants';\nimport tableStyles from '../styles.module.scss';\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","import TableHeadCell from './TableHeadCell';\nexport * from './TableHeadCell';\nexport default TableHeadCell;\n"],"mappings":";;;;;;;;AAuBA,MAAaA,iBAAkC,EAC7C,UACA,SACA,WACA,UACA,SACA,OAAO,SAAS,QAChB,QAAQ,OACR,GAAG,WACC;CACJ,MAAM,4BAA4B,WAAW,OAAY,qBAAqB,WAAW,GACtF,OAAY,+BAA+B,SAAS,SAAS,SAC/D,CAAC;AAEF,KAAI,CAAC,YAAY,CAAC,SAChB,QAAO,oBAAC,MAAA,EAAG,WAAW,2BAAA,CAAgC;AAGxD,KAAI,CAAC,SACH,QACE,oBAAC,MAAA;EAAU;EAAO,WAAW;EAA2B,GAAI;EACzD;GACE;CAIT,MAAM,kBAAkB,WAAW,2BAA2B,OAAY,+BAA+B,UAAU;CAEnH,MAAM,uBACJ,WACE,oBAAC,OAAA;EAAI,WAAW,OAAY;YAC1B,oBAAC,cAAA;GAAK,SAAS,WAAW,cAAc,MAAM,oBAAY;GAAS,MAAM,SAAS;IAAW;GACzF;CAGV,MAAM,yBAA4D;AAChE,UAAQ,SAAR;GACE,KAAK,cAAc,IACjB,QAAO;GACT,KAAK,cAAc,KACjB,QAAO;;;AAIb,QACE,oBAAC,MAAA;EAAU;EAAO,WAAW;EAAiB,aAAW,kBAAkB;EAAE,GAAI;YAC/E,qBAAC,UAAA;GAAO,MAAK;GAAkB;GAAS,WAAW,OAAY;GAAuB,gBAAc,UAAU,CAAC,CAAC,UAAU,KAAA;cACvH,gBAAgB,EAChB,SAAA;IACM;GACN;;ACvET,IAAA,0BD2Ee"}
+{"version":3,"file":"TableHeadCell.js","names":["TableHeadCell: React.FC<Props>"],"sources":["../src/components/Table/TableHeadCell/TableHeadCell.tsx","../src/components/Table/TableHeadCell/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport Icon, { IconSize } from '../../Icon';\nimport ArrowDown from '../../Icons/ArrowDown';\nimport ArrowUp from '../../Icons/ArrowUp';\nimport { ModeType, SortDirection } from '../constants';\nimport tableStyles from '../styles.module.scss';\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","import TableHeadCell from './TableHeadCell';\nexport * from './TableHeadCell';\nexport default TableHeadCell;\n"],"mappings":";;;;;;;;AAuBA,MAAaA,iBAAkC,EAC7C,UACA,SACA,WACA,UACA,SACA,OAAO,SAAS,QAChB,QAAQ,OACR,GAAG,WACC;CACJ,MAAM,4BAA4B,WAAW,YAAY,qBAAqB,WAAW,GACtF,YAAY,+BAA+B,SAAS,SAAS,SAC/D,CAAC;AAEF,KAAI,CAAC,YAAY,CAAC,SAChB,QAAO,oBAAC,MAAA,EAAG,WAAW,2BAAA,CAAgC;AAGxD,KAAI,CAAC,SACH,QACE,oBAAC,MAAA;EAAU;EAAO,WAAW;EAA2B,GAAI;EACzD;GACE;CAIT,MAAM,kBAAkB,WAAW,2BAA2B,YAAY,+BAA+B,UAAU;CAEnH,MAAM,uBACJ,WACE,oBAAC,OAAA;EAAI,WAAW,YAAY;YAC1B,oBAAC,cAAA;GAAK,SAAS,WAAW,cAAc,MAAM,oBAAY;GAAS,MAAM,SAAS;IAAW;GACzF;CAGV,MAAM,yBAA4D;AAChE,UAAQ,SAAR;GACE,KAAK,cAAc,IACjB,QAAO;GACT,KAAK,cAAc,KACjB,QAAO;;;AAIb,QACE,oBAAC,MAAA;EAAU;EAAO,WAAW;EAAiB,aAAW,kBAAkB;EAAE,GAAI;YAC/E,qBAAC,UAAA;GAAO,MAAK;GAAkB;GAAS,WAAW,YAAY;GAAuB,gBAAc,UAAU,CAAC,CAAC,UAAU,KAAA;cACvH,gBAAgB,EAChB,SAAA;IACM;GACN;;ACvET,IAAA,0BD2Ee"}

package/lib/TableRow.js

@@ -6,12 +6,12 @@ import { n as ModeType } from "./constants3.js";
 import { i as mapChildrenWithMode } from "./utils6.js";
 import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
-import styles from "./components/Table/styles.module.scss";
+import tableStyles from "./components/Table/styles.module.scss";
 var TableExpanderCellMobile = ({ expanded, onClick, hideDetailsText, showDetailsText, mode = ModeType.normal }) => {
 	return /* @__PURE__ */ jsx("td", {
-		className: classNames(styles.table__cell, styles["table__expander-cell-mobile"], {
-			[styles["table__expander-cell-mobile--expanded"]]: expanded,
-			[styles["table__cell--compact"]]: mode === ModeType.compact
+		className: classNames(tableStyles.table__cell, tableStyles["table__expander-cell-mobile"], {
+			[tableStyles["table__expander-cell-mobile--expanded"]]: expanded,
+			[tableStyles["table__cell--compact"]]: mode === ModeType.compact
 		}),
 		children: /* @__PURE__ */ jsxs(Button_default, {
 			"aria-expanded": expanded,
@@ -28,7 +28,7 @@ var TableExpanderCellMobile = ({ expanded, onClick, hideDetailsText, showDetails
 var TableExpanderCellMobile_default = TableExpanderCellMobile;
 const TableRow = ({ rowKey, hideDetailsText, showDetailsText, expandable, expanded, onClick, className, children, mode = ModeType.normal, ...rest }) => {
 	return /* @__PURE__ */ jsxs("tr", {
-		className: classNames(styles["table-row"], { [styles["table__row--expandable"]]: expandable }, className),
+		className: classNames(tableStyles["table-row"], { [tableStyles["table__row--expandable"]]: expandable }, className),
 		onClick,
 		...rest,
 		children: [mapChildrenWithMode(children, mode), expandable && /* @__PURE__ */ jsx(TableExpanderCellMobile_default, {

package/lib/TableRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableRow.js","names":["TableExpanderCellMobile: React.FC<TableExpanderCellMobileProps>","TableRow: React.FC<Props>"],"sources":["../src/components/Table/TableExpanderCell/TableExpanderCellMobile.tsx","../src/components/Table/TableRow/TableRow.tsx","../src/components/Table/TableRow/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { Props } from '../TableRow/TableRow';\n\nimport Button from '../../Button';\nimport Icon from '../../Icon';\nimport ChevronDown from '../../Icons/ChevronDown';\nimport ChevronUp from '../../Icons/ChevronUp';\nimport { ModeType } from '../constants';\nimport tableStyles from '../styles.module.scss';\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 classNames from 'classnames';\n\nimport { ModeType } from '../constants';\nimport tableStyles from '../styles.module.scss';\nimport TableExpanderCellMobile from '../TableExpanderCell/TableExpanderCellMobile';\nimport { mapChildrenWithMode } from '../utils';\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      {mapChildrenWithMode(children, 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","import TableRow from './TableRow';\nexport * from './TableRow';\nexport default TableRow;\n"],"mappings":";;;;;;;;;AAaA,IAAMA,2BAAmE,EACvE,UACA,SACA,iBACA,iBACA,OAAO,SAAS,aACZ;AAMJ,QACE,oBAAC,MAAA;EAAG,WANY,WAAW,OAAY,aAAa,OAAY,gCAAgC;IAC/F,OAAY,2CAA2C;IACvD,OAAY,0BAA0B,SAAS,SAAS;GAC1D,CAAC;YAIE,qBAAC,gBAAA;GAAO,iBAAe;GAAU,SAAQ;GAAsB;;IAC7D,oBAAC,cAAA,EAAK,SAAS,WAAW,oBAAY,qBAAA,CAAe;;IAAE,WAAW,kBAAkB;;IAC7E;GACN;;AAIT,IAAA,kCAAe;ACNf,MAAaC,YAA6B,EACxC,QACA,iBACA,iBACA,YACA,UACA,SACA,WACA,UACA,OAAO,SAAS,QAChB,GAAG,WACC;AASJ,QACE,qBAAC,MAAA;EAAG,WATgB,WACpB,OAAY,cACZ,GACG,OAAY,4BAA4B,YAC1C,EACD,UACD;EAGwC;EAAsB,GAAI;aAC9D,oBAAoB,UAAU,KAAK,EACnC,cACC,oBAAC,iCAAA;GACW;GACD;GACQ;GACA;GACX;IACN,CAAA;IAT+C,OAWhD;;AC1DT,IAAA,qBD8De"}
+{"version":3,"file":"TableRow.js","names":["TableExpanderCellMobile: React.FC<TableExpanderCellMobileProps>","TableRow: React.FC<Props>"],"sources":["../src/components/Table/TableExpanderCell/TableExpanderCellMobile.tsx","../src/components/Table/TableRow/TableRow.tsx","../src/components/Table/TableRow/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { Props } from '../TableRow/TableRow';\n\nimport Button from '../../Button';\nimport Icon from '../../Icon';\nimport ChevronDown from '../../Icons/ChevronDown';\nimport ChevronUp from '../../Icons/ChevronUp';\nimport { ModeType } from '../constants';\nimport tableStyles from '../styles.module.scss';\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 classNames from 'classnames';\n\nimport { ModeType } from '../constants';\nimport tableStyles from '../styles.module.scss';\nimport TableExpanderCellMobile from '../TableExpanderCell/TableExpanderCellMobile';\nimport { mapChildrenWithMode } from '../utils';\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      {mapChildrenWithMode(children, 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","import TableRow from './TableRow';\nexport * from './TableRow';\nexport default TableRow;\n"],"mappings":";;;;;;;;;AAaA,IAAMA,2BAAmE,EACvE,UACA,SACA,iBACA,iBACA,OAAO,SAAS,aACZ;AAMJ,QACE,oBAAC,MAAA;EAAG,WANY,WAAW,YAAY,aAAa,YAAY,gCAAgC;IAC/F,YAAY,2CAA2C;IACvD,YAAY,0BAA0B,SAAS,SAAS;GAC1D,CAAC;YAIE,qBAAC,gBAAA;GAAO,iBAAe;GAAU,SAAQ;GAAsB;;IAC7D,oBAAC,cAAA,EAAK,SAAS,WAAW,oBAAY,qBAAA,CAAe;;IAAE,WAAW,kBAAkB;;IAC7E;GACN;;AAIT,IAAA,kCAAe;ACNf,MAAaC,YAA6B,EACxC,QACA,iBACA,iBACA,YACA,UACA,SACA,WACA,UACA,OAAO,SAAS,QAChB,GAAG,WACC;AASJ,QACE,qBAAC,MAAA;EAAG,WATgB,WACpB,YAAY,cACZ,GACG,YAAY,4BAA4B,YAC1C,EACD,UACD;EAGwC;EAAsB,GAAI;aAC9D,oBAAoB,UAAU,KAAK,EACnC,cACC,oBAAC,iCAAA;GACW;GACD;GACQ;GACA;GACX;IACN,CAAA;IAT+C,OAWhD;;AC1DT,IAAA,qBD8De"}

package/lib/Textarea.js

@@ -7,7 +7,7 @@ import { t as ErrorWrapper_default } from "./ErrorWrapper.js";
 import { n as renderLabel } from "./utils2.js";
 import { t as MaxCharacters_default } from "./MaxCharacters.js";
 import classNames from "classnames";
-import { useEffect, useRef, useState } from "react";
+import { useLayoutEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/Textarea/styles.module.scss";
 var HN_Designsystem_TextArea_en_GB_default = { characters: "characters" };
@@ -26,8 +26,9 @@ var getTextareaMaxWidth = (characters$3) => {
 };
 var Textarea = (props) => {
 	const { maxCharacters, width, testId, defaultValue, marginBottom: gutterBottom, transparent, onColor = FormOnColor.onwhite, label, textareaId = uuid(), minRows = 3, maxRows = 10, grow, error, errorText, errorTextId: errorTextIdProp, errorWrapperClassName, autoFocus, disabled, name, autoComplete = "off", placeholder, readOnly, required, onChange, value, resources, ref, ...rest } = props;
-	const [rows, setRows] = useState(minRows);
 	const [textareaInput, setTextareaInput] = useState(value || defaultValue || "");
+	const [prevDefaultValue, setPrevDefaultValue] = useState(defaultValue);
+	const [prevValue, setPrevValue] = useState(value);
 	const referanse = useRef(null);
 	const errorTextUuid = useIdWithFallback(errorTextIdProp);
 	const { language } = useLanguage(LanguageLocales.NORWEGIAN);
@@ -35,21 +36,22 @@ var Textarea = (props) => {
 		...getResources(language),
 		...resources
 	};
-	useEffect(() => {
+	if (defaultValue !== prevDefaultValue) {
+		setPrevDefaultValue(defaultValue);
 		setTextareaInput(defaultValue || "");
-	}, [defaultValue]);
+	}
+	if (value !== prevValue) {
+		setPrevValue(value);
+		if (value) setTextareaInput(value);
+	}
 	const resizeHeight = (target) => {
 		const textareaLineHeight = 28;
-		const previousRows = target.rows;
 		target.rows = minRows;
 		const currentRows = Math.floor((target.scrollHeight - 16) / textareaLineHeight);
-		if (currentRows === previousRows) target.rows = currentRows;
 		if (currentRows >= maxRows) {
 			target.rows = maxRows;
 			target.scrollTop = target.scrollHeight;
-		}
-		if (currentRows < maxRows) setRows(currentRows);
-		else setRows(maxRows);
+		} else target.rows = currentRows;
 	};
 	const onDark = onColor === FormOnColor.ondark;
 	const onBlueberry = onColor === FormOnColor.onblueberry;
@@ -64,8 +66,7 @@ var Textarea = (props) => {
 		[styles["input-container--disabled"]]: props.disabled
 	});
 	const textareaClass = classNames(styles["input-container__input"], { [styles[`input-container__input--disabled`]]: props.disabled });
-	useEffect(() => {
-		if (value) setTextareaInput(value);
+	useLayoutEffect(() => {
 		if (grow && referanse.current?.children && referanse.current?.children[0]) {
 			const textarea = referanse.current?.children[0];
 			resizeHeight(textarea);
@@ -97,7 +98,7 @@ var Textarea = (props) => {
 					style: { maxWidth },
 					children: /* @__PURE__ */ jsx("textarea", {
 						...rest,
-						rows,
+						rows: minRows,
 						defaultValue,
 						id: textareaId,
 						className: textareaClass,

package/lib/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","names":["Textarea: React.FC<TextareaProps>","mergedResources: HNDesignsystemTextArea"],"sources":["../src/resources/HN.Designsystem.TextArea.en-GB.json","../src/resources/HN.Designsystem.TextArea.nb-NO.json","../src/resources/HN.Designsystem.TextArea.nn-NO.json","../src/components/Textarea/resourceHelper.ts","../src/components/Textarea/Textarea.tsx","../src/components/Textarea/index.ts"],"sourcesContent":["{\n  \"characters\": \"characters\"\n}\n","{\n  \"characters\": \"tegn\"\n}\n","{\n  \"characters\": \"teikn\"\n}\n","import type { HNDesignsystemTextArea } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.TextArea.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.TextArea.nb-NO.json';\nimport nnNO from '../../resources/HN.Designsystem.TextArea.nn-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemTextArea => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN_NYNORSK:\n      return nnNO;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import { useState, useRef, useEffect } from 'react';\n\nimport cn from 'classnames';\n\nimport type { HNDesignsystemTextArea } from '../../resources/Resources';\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormOnColor, LanguageLocales } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\nimport { renderLabel } from '../Label/utils';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\nexport interface TextareaProps\n  extends\n    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  /** 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  /** Resources for component */\n  resources?: Partial<HNDesignsystemTextArea>;\n  /** Ref passed to the component */\n  ref?: React.Ref<HTMLTextAreaElement | null>;\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.FC<TextareaProps> = props => {\n  const {\n    maxCharacters,\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: errorTextIdProp,\n    errorWrapperClassName,\n    autoFocus,\n    disabled,\n    name,\n    autoComplete = 'off',\n    placeholder,\n    readOnly,\n    required,\n    onChange,\n    value,\n    resources,\n    ref,\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 = useIdWithFallback(errorTextIdProp);\n\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemTextArea = {\n    ...defaultResources,\n    ...resources,\n  };\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: label, inputId: textareaId, onColor: 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={mergedResources.characters}\n            onColor={onColor}\n            maxWidth={maxWidth}\n          />\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n};\n\nTextarea.displayName = 'Textarea';\n\nexport default Textarea;\n","import Textarea from './Textarea';\nexport * from './Textarea';\nexport default Textarea;\n"],"mappings":"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"}
+{"version":3,"file":"Textarea.js","names":["Textarea: React.FC<TextareaProps>","mergedResources: HNDesignsystemTextArea"],"sources":["../src/resources/HN.Designsystem.TextArea.en-GB.json","../src/resources/HN.Designsystem.TextArea.nb-NO.json","../src/resources/HN.Designsystem.TextArea.nn-NO.json","../src/components/Textarea/resourceHelper.ts","../src/components/Textarea/Textarea.tsx","../src/components/Textarea/index.ts"],"sourcesContent":["{\n  \"characters\": \"characters\"\n}\n","{\n  \"characters\": \"tegn\"\n}\n","{\n  \"characters\": \"teikn\"\n}\n","import type { HNDesignsystemTextArea } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.TextArea.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.TextArea.nb-NO.json';\nimport nnNO from '../../resources/HN.Designsystem.TextArea.nn-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemTextArea => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN_NYNORSK:\n      return nnNO;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import { useState, useRef, useLayoutEffect } from 'react';\n\nimport cn from 'classnames';\n\nimport type { HNDesignsystemTextArea } from '../../resources/Resources';\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormOnColor, LanguageLocales } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\nimport { renderLabel } from '../Label/utils';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\nexport interface TextareaProps\n  extends\n    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  /** 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  /** Resources for component */\n  resources?: Partial<HNDesignsystemTextArea>;\n  /** Ref passed to the component */\n  ref?: React.Ref<HTMLTextAreaElement | null>;\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.FC<TextareaProps> = props => {\n  const {\n    maxCharacters,\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: errorTextIdProp,\n    errorWrapperClassName,\n    autoFocus,\n    disabled,\n    name,\n    autoComplete = 'off',\n    placeholder,\n    readOnly,\n    required,\n    onChange,\n    value,\n    resources,\n    ref,\n    ...rest\n  } = props;\n\n  const [textareaInput, setTextareaInput] = useState(value || defaultValue || '');\n  const [prevDefaultValue, setPrevDefaultValue] = useState(defaultValue);\n  const [prevValue, setPrevValue] = useState(value);\n  const referanse = useRef<HTMLDivElement>(null);\n  const errorTextUuid = useIdWithFallback(errorTextIdProp);\n\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemTextArea = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  if (defaultValue !== prevDefaultValue) {\n    setPrevDefaultValue(defaultValue);\n    setTextareaInput(defaultValue || '');\n  }\n\n  if (value !== prevValue) {\n    setPrevValue(value);\n\n    if (value) {\n      setTextareaInput(value);\n    }\n  }\n\n  const resizeHeight = (target: HTMLTextAreaElement): void => {\n    const textareaLineHeight = 28;\n\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 >= maxRows) {\n      target.rows = maxRows;\n      target.scrollTop = target.scrollHeight;\n    } else {\n      target.rows = currentRows;\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  useLayoutEffect(() => {\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: label, inputId: textareaId, onColor: onColor as FormOnColor })}\n        <div className={contentWrapperClass} ref={referanse} style={{ maxWidth }}>\n          <textarea\n            {...rest}\n            rows={minRows}\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={mergedResources.characters}\n            onColor={onColor}\n            maxWidth={maxWidth}\n          />\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n};\n\nTextarea.displayName = 'Textarea';\n\nexport default Textarea;\n","import Textarea from './Textarea';\nexport * from './Textarea';\nexport default Textarea;\n"],"mappings":"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"}

package/lib/ThinkingMedium.js

@@ -0,0 +1,98 @@
+import { t as ViewBoxSize } from "./utils4.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ThinkingMedium = ({ color, svgProperties, title }) => {
+	const palette = (() => {
+		switch (color) {
+			case "blueberry": return {
+				lines: "#000",
+				shapes1: "#188097",
+				shapes2: "#AFDAE3"
+			};
+			case "cherry": return {
+				lines: "#000",
+				shapes1: "#A31F0E",
+				shapes2: "#F05A3B"
+			};
+			default: return {
+				lines: "#1D1C1A",
+				shapes1: "#989693",
+				shapes2: "#D6D3D2"
+			};
+		}
+	})();
+	return /* @__PURE__ */ jsxs("svg", {
+		...svgProperties,
+		viewBox: ViewBoxSize.Medium,
+		children: [
+			title,
+			/* @__PURE__ */ jsx("path", {
+				d: "m301.601 134.422-11.125 19.26-11.115-19.26h22.24Z",
+				fill: palette.lines
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M215.7 117.402c6.645 0 12.033-5.387 12.033-12.033s-5.388-12.033-12.033-12.033c-6.646 0-12.033 5.387-12.033 12.033s5.387 12.033 12.033 12.033Z",
+				fill: palette.shapes2
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M352.636 188.933a543.85 543.85 0 0 1-15.73 3.395 116.773 116.773 0 0 0-4.179-9.625c-2.107-4.28-6.387-8.313-9.121-10.633l21.21-6.968 7.809 23.82.011.011ZM138.19 133.719l-15.753-14.487c-1.659-1.524-5.11-.448-7.72 2.386-2.611 2.835-3.373 6.375-1.726 7.899l15.753 14.487c1.659 1.524 5.11.448 7.72-2.386 2.611-2.835 3.373-6.376 1.726-7.899Z",
+				fill: palette.lines
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M120.712 127.141c2.608-2.839 3.38-6.372 1.726-7.892-1.655-1.519-5.109-.449-7.717 2.391-2.607 2.839-3.38 6.373-1.725 7.892 1.654 1.519 5.109.449 7.716-2.391Zm170.674-32.739-1.429 27.457 13.427.699 1.429-27.457-13.427-.7Zm45.811 97.869a586.22 586.22 0 0 1-11.417 2.196c-26.576 4.84-50.587 7.271-71.931 8.089 1.132-22.531 19.764-40.447 42.576-40.447 19.204 0 35.439 12.706 40.772 30.162Z",
+				fill: palette.shapes1
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "m362.978 139.172 2.957 11.047-11.047-2.969 8.09-8.078Z",
+				fill: palette.shapes2
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M299.965 451.799c-.918 0-1.669-.74-1.68-1.658l-.874-66.329a1.679 1.679 0 0 1 1.658-1.703h.022c.919 0 1.67.74 1.681 1.659l.874 66.328a1.678 1.678 0 0 1-1.658 1.703h-.023Zm-91.784-142.302c-1.288 0-2.621-.269-4.022-.84-7.563-3.149-18.767-21.871-24.66-50.352-.964-4.672-.605-12.358 3.607-18.632 2.869-4.291 7.093-7.07 12.191-8.022 13.87-2.611 20.75 7.036 21.041 7.45a1.68 1.68 0 0 1-2.756 1.927c-.258-.358-6.006-8.268-17.658-6.072-4.258.807-7.63 3.025-10.017 6.588-3.394 5.075-4.011 11.731-3.103 16.089 4.807 23.215 14.969 44.716 22.666 47.92 3.26 1.367 7.607 1.21 15.036-10.252a1.68 1.68 0 0 1 2.319-.493c.784.504.997 1.546.493 2.331-4.078 6.285-8.974 12.369-15.126 12.369l-.011-.011Z",
+				fill: palette.lines
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M215.699 255.82c-.47 0-.941-.191-1.266-.583-.078-.09-7.977-9.087-15.17-9.087h-.056c-2.353.012-4.336 1.02-6.062 3.059a1.683 1.683 0 0 1-2.364.202 1.683 1.683 0 0 1-.201-2.364c2.364-2.801 5.266-4.235 8.616-4.258 8.784-.045 17.422 9.826 17.792 10.252a1.684 1.684 0 0 1-.168 2.375 1.64 1.64 0 0 1-1.098.415l-.023-.011Zm-7.697 36.301c-.28 0-.56-.067-.818-.213a1.686 1.686 0 0 1-.65-2.285c5.569-9.938.807-13.871-3.787-17.68-2.521-2.084-4.907-4.056-4.661-6.902.225-2.667 2.712-5.176 8.325-8.403a1.681 1.681 0 1 1 1.681 2.913c-5.636 3.238-6.588 5.008-6.656 5.781-.089 1.098 1.625 2.521 3.451 4.034 4.583 3.787 11.518 9.523 4.583 21.915a1.673 1.673 0 0 1-1.468.863v-.023Zm-62.989-99.709c-.717 0-1.389-.47-1.614-1.198a10.523 10.523 0 0 1-.28-1.166c-.874-5.131 2.588-10.005 7.72-10.879a9.398 9.398 0 0 1 7.742 2.151 1.686 1.686 0 0 1-2.196 2.555 6.06 6.06 0 0 0-4.986-1.389c-3.305.56-5.535 3.708-4.963 7.002.045.258.101.516.179.751a1.683 1.683 0 0 1-1.12 2.095 1.8 1.8 0 0 1-.493.067l.011.011Zm128.276-75.598c-4.583 0-8.314-3.731-8.314-8.313 0-4.583 3.731-8.313 8.314-8.313 4.582 0 8.313 3.73 8.313 8.313 0 4.582-3.731 8.313-8.313 8.313Zm0-13.276a4.954 4.954 0 0 0-4.953 4.952 4.954 4.954 0 0 0 4.953 4.952 4.954 4.954 0 0 0 4.952-4.952 4.954 4.954 0 0 0-4.952-4.952Zm-19.496 100.226h-.1a1.682 1.682 0 0 1-1.58-1.782c1.389-23.293 20.783-41.544 44.155-41.544 19.473 0 36.447 12.481 42.24 31.057a1.677 1.677 0 0 1-1.109 2.107 1.677 1.677 0 0 1-2.107-1.109c-5.344-17.165-21.03-28.694-39.024-28.694-21.59 0-39.506 16.862-40.794 38.385a1.682 1.682 0 0 1-1.681 1.58Zm-12.089-111.67a1.4 1.4 0 0 1-.37-.045l-11.551-2.565a1.66 1.66 0 0 1-1.221-1.098 1.655 1.655 0 0 1 .302-1.614l8.134-9.803-13.019-2.095a1.678 1.678 0 0 1-.918-2.846l10.531-10.532a1.671 1.671 0 0 1 2.376 0c.649.66.661 1.725 0 2.375l-8.202 8.202 12.672 2.039c.594.09 1.098.504 1.311 1.064.213.56.101 1.199-.28 1.67l-8.258 9.949 8.874 1.972a1.68 1.68 0 0 1 1.277 2.005 1.683 1.683 0 0 1-1.635 1.311l-.023.011Zm-68.042 68.289a1.663 1.663 0 0 1-1.524-.975c-1.311-2.868-1.994-5.355-2.241-7.484-4.157-.84-8.257-3.63-10.162-9.658-.784-2.498-1.087-4.952-.93-7.283a14.842 14.842 0 0 1-2.812-1.613c-2.812-2.028-4.448-4.717-4.863-8-1.109-8.75 7.025-18.666 7.373-19.092a1.685 1.685 0 0 1 2.364-.224c.717.594.818 1.647.224 2.364-.079.09-7.563 9.221-6.622 16.526.303 2.353 1.445 4.213 3.496 5.692.493.359.974.65 1.445.896a15.674 15.674 0 0 1 5.076-7.764c3.417-2.846 7.63-3.877 10.218-2.498 1.232.649 1.938 1.927 1.927 3.484-.034 3.44-3.294 7.776-7.417 9.86-2.308 1.165-4.728 1.591-7.104 1.277-.022 1.591.213 3.372.841 5.355 1.333 4.247 4.022 6.409 6.901 7.216.348-3.384 1.815-5.479 2.757-6.487 2.33-2.51 5.859-3.563 8.582-2.555 1.893.695 3.07 2.319 3.148 4.325.146 3.832-3.675 7.305-9.086 8.235a13.47 13.47 0 0 1-1.916.202c.291 1.792.919 3.742 1.86 5.815.392.84.022 1.837-.829 2.229a1.739 1.739 0 0 1-.695.157h-.011Zm5.322-17.983c-1.199 0-2.723.561-3.922 1.86-1.098 1.177-1.725 2.734-1.893 4.572a13.605 13.605 0 0 0 1.501-.157c3.552-.616 6.375-2.768 6.297-4.796-.011-.414-.135-.997-.953-1.299a2.92 2.92 0 0 0-1.03-.168v-.012Zm-16.403-9.837c2.039.258 3.787-.28 5.109-.941 3.428-1.737 5.557-5.187 5.58-6.902 0-.157-.012-.425-.135-.493-1.165-.616-3.977.023-6.498 2.118-1.166.975-3.137 3.003-4.045 6.218h-.011Zm105.431-42.398a1.69 1.69 0 0 1-1.188-.493 1.67 1.67 0 0 1 0-2.376l7.574-7.574a1.67 1.67 0 0 1 2.375 0c.65.661.661 1.726 0 2.376l-7.574 7.574a1.69 1.69 0 0 1-1.187.493Zm-2.017-12.601a1.69 1.69 0 0 1-1.188-.493 1.67 1.67 0 0 1 0-2.375l7.294-7.294a1.67 1.67 0 0 1 2.375 0c.65.661.662 1.725 0 2.375l-7.293 7.294a1.69 1.69 0 0 1-1.188.493Zm88.165 42.094c-1.423 0-2.879-.213-4.336-.65-2.42-.729-4.526-2.23-6.263-4.146a17.099 17.099 0 0 1-7.328 1.95c-9.052.257-13.075-7.115-13.96-11.07a1.68 1.68 0 0 1 1.277-2.005 1.68 1.68 0 0 1 2.006 1.266c.09.369 2.106 8.739 10.577 8.447a13.455 13.455 0 0 0 5.389-1.31c-1.67-2.667-2.745-5.726-3.137-8.549-.493-3.597.235-6.196 2.061-7.35 1.065-.661 2.902-1.087 5.658.717 3.843 2.532 5.434 6.196 4.336 10.073-.638 2.252-2.084 4.302-4.044 5.938 1.266 1.311 2.745 2.319 4.392 2.812 4.773 1.434 8.257-.37 10.33-2.14 3.316-2.812 4.65-6.689 4.47-8.067a1.678 1.678 0 0 1 1.446-1.882c.918-.135 1.759.526 1.882 1.445.358 2.711-1.692 7.72-5.625 11.058-2.677 2.275-5.826 3.451-9.131 3.451v.012Zm-11.686-20.627a.539.539 0 0 0-.235.045c-.381.235-.863 1.557-.516 4.044.325 2.342 1.233 4.93 2.622 7.171 1.446-1.255 2.454-2.734 2.868-4.179.684-2.432-.336-4.627-2.946-6.353-.885-.582-1.457-.74-1.77-.74l-.023.012Zm-221.762 28.11c2.608-2.839 3.38-6.372 1.726-7.892-1.655-1.519-5.109-.449-7.717 2.391-2.607 2.839-3.38 6.373-1.725 7.892 1.654 1.519 5.109.449 7.716-2.391Z",
+				fill: palette.lines
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M114.963 131.871c-1.187 0-2.263-.358-3.092-1.12-1.244-1.143-1.692-2.98-1.244-5.053.392-1.782 1.401-3.63 2.868-5.221 3.283-3.574 7.72-4.672 10.095-2.488 2.376 2.185 1.67 6.689-1.613 10.275-2.14 2.33-4.773 3.607-7.003 3.607h-.011Zm1.009-9.12c-1.042 1.143-1.793 2.476-2.051 3.664-.19.863-.101 1.546.235 1.86.706.638 3.194.056 5.345-2.286s2.521-4.874 1.826-5.523c-.706-.639-3.193-.056-5.344 2.285h-.011Z",
+				fill: palette.lines
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M130.705 146.358c-1.187 0-2.263-.358-3.092-1.12l-15.753-14.487a1.682 1.682 0 0 1 2.274-2.476l15.753 14.487c.695.638 3.194.056 5.345-2.286 2.151-2.341 2.521-4.874 1.826-5.523l-15.753-14.487a1.681 1.681 0 1 1 2.274-2.476l15.753 14.486c2.376 2.185 1.659 6.689-1.624 10.263-2.14 2.331-4.773 3.608-7.003 3.608v.011Zm133.318 13.154a17.92 17.92 0 0 1-3.149-.28c-6.308-1.12-10.677-5.188-9.949-9.255.381-2.106 2.005-3.787 4.594-4.739 2.274-.84 5.097-1.02 7.943-.504 6.308 1.12 10.678 5.187 9.95 9.254-.381 2.107-2.006 3.787-4.594 4.74-1.423.526-3.07.784-4.795.784Zm-3.698-11.697c-1.333 0-2.599.19-3.652.583-1.401.515-2.286 1.299-2.443 2.173-.336 1.86 2.689 4.549 7.227 5.356 2.241.403 4.504.269 6.196-.348 1.4-.515 2.285-1.299 2.442-2.173.336-1.86-2.689-4.549-7.226-5.356a14.23 14.23 0 0 0-2.555-.224l.011-.011Z",
+				fill: palette.lines
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M250.678 162.53c-.1 0-.201 0-.302-.022a1.677 1.677 0 0 1-1.356-1.95l1.905-10.599a1.684 1.684 0 0 1 1.949-1.356 1.677 1.677 0 0 1 1.356 1.95l-1.905 10.599a1.676 1.676 0 0 1-1.647 1.389v-.011Zm17.771 11.269c-.101 0-.202 0-.303-.022a1.677 1.677 0 0 1-1.356-1.95l3.306-18.431a1.684 1.684 0 0 1 1.949-1.355 1.676 1.676 0 0 1 1.356 1.949l-3.305 18.431a1.678 1.678 0 0 1-1.647 1.389v-.011Zm-27.327-32.967a1.67 1.67 0 0 1-1.546-1.031l-5.233-12.391a1.661 1.661 0 0 1 0-1.289c.168-.414.493-.739.908-.918l25.332-10.689a1.68 1.68 0 0 1 2.196.896l5.233 12.392c.179.414.179.874 0 1.288-.168.415-.493.74-.908.919l-25.332 10.689a1.7 1.7 0 0 1-.65.134Zm-3.025-13.176 3.921 9.288 22.24-9.377-3.921-9.289-22.24 9.378Zm-6.891 29.578c-.426 0-.841-.157-1.165-.47l-12.291-11.899-6.297 6.498a1.67 1.67 0 0 1-2.375.034 1.67 1.67 0 0 1-.034-2.375l7.462-7.709a1.68 1.68 0 0 1 2.375-.033l13.501 13.075a1.67 1.67 0 0 1 .034 2.375 1.7 1.7 0 0 1-1.21.516v-.012Zm-46.945 21.455c-.426 0-.841-.157-1.166-.47a1.672 1.672 0 0 1-.033-2.376l14.857-15.338a1.67 1.67 0 0 1 2.375-.034c.672.65.683 1.715.033 2.376l-14.856 15.338a1.699 1.699 0 0 1-1.21.515v-.011Zm147.67-14.599c-.291 0-.582-.078-.84-.224l-20.672-11.932a1.683 1.683 0 0 1-.616-2.297l11.932-20.672a1.706 1.706 0 0 1 1.02-.784 1.701 1.701 0 0 1 1.277.168l20.672 11.932a1.683 1.683 0 0 1 .616 2.297l-11.932 20.672a1.703 1.703 0 0 1-1.02.784 1.925 1.925 0 0 1-.437.056Zm-18.375-14.229 17.759 10.252 10.252-17.759-17.759-10.252-10.252 17.759Zm-152.465 15.736h-.056l-15.653-.47a1.708 1.708 0 0 1-1.434-.886 1.696 1.696 0 0 1 .045-1.68l8.235-13.322c.314-.515.885-.851 1.479-.795a1.703 1.703 0 0 1 1.434.885l7.417 13.792a1.7 1.7 0 0 1-.044 1.681 1.689 1.689 0 0 1-1.435.795h.012Zm-12.695-3.742 9.838.291-4.661-8.661-5.177 8.37Zm142.08-6.875a1.69 1.69 0 0 1-1.457-.84l-11.114-19.26a1.666 1.666 0 0 1 0-1.68 1.687 1.687 0 0 1 1.456-.841h22.24a1.69 1.69 0 0 1 1.457.841 1.67 1.67 0 0 1 0 1.68l-11.115 19.26c-.302.516-.851.84-1.456.84h-.011Zm-8.213-19.259 8.213 14.218 8.212-14.218h-16.425Z",
+				fill: palette.lines
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "m198.109 134.477 18.476 24.761-30.689 3.619 12.213-28.38Z",
+				fill: palette.lines
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M185.897 164.536a1.671 1.671 0 0 1-1.345-.672 1.69 1.69 0 0 1-.202-1.669l12.202-28.391c.235-.549.75-.93 1.344-1.009a1.654 1.654 0 0 1 1.546.661l18.487 24.761a1.69 1.69 0 0 1 .202 1.67c-.235.549-.751.93-1.345 1.008l-30.688 3.63c-.067 0-.134.011-.201.011Zm12.593-26.733-9.904 23.036 24.906-2.947-15.002-20.1v.011Zm117.554 116.906c-4.941 0-10.655-1.065-17.165-3.855a1.69 1.69 0 0 1-.885-2.207 1.688 1.688 0 0 1 2.207-.885c24.447 10.498 36.077-5.019 36.559-5.692a1.685 1.685 0 0 1 2.342-.381c.75.538.918 1.591.381 2.342-.101.146-7.899 10.678-23.451 10.678h.012Z",
+				fill: palette.lines
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M198.277 198.441c0 .896-.056 1.77-.145 2.633-20.089-1.972-35.854-5.143-47.047-8.022 2.443-10.611 11.944-18.521 23.283-18.521 13.198 0 23.909 10.7 23.909 23.91Z",
+				fill: palette.shapes2
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M253.961 168.822a15.8 15.8 0 0 1-2.073 7.865l-14.43-8.335-8.101 14.027c-4.482-2.846-7.462-7.854-7.462-13.557 0-8.862 7.171-16.033 16.033-16.033 8.863 0 16.033 7.171 16.033 16.033Z",
+				fill: palette.shapes1
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M154.043 449.909a1.76 1.76 0 0 1-.784-.19 1.68 1.68 0 0 1-.695-2.275c2.824-5.344 5.468-10.162 8.034-14.834 21.164-38.576 29.926-54.541 3.428-121.71-15.551-39.416-21.243-70.149-23.282-88.994-1.972-18.162-1.053-28.885-.773-31.417a2.363 2.363 0 0 1 0-.571c.123-.852.963-1.457 1.792-1.446.359.012.695.146.975.359.706.246 3.025.964 10.577 2.902 13.602 3.496 28.738 6.072 44.984 7.663 17.681 1.726 36.347 2.23 55.483 1.468 23.025-.885 47.147-3.596 71.695-8.056a464.258 464.258 0 0 0 11.384-2.196 553.362 553.362 0 0 0 15.394-3.327 565.684 565.684 0 0 0 7.249-1.714c.46-.112.941-.023 1.334.246.392.269.649.684.717 1.154.045.336 1.098 8.302-3.608 29.187l42.912 86.148c.224.46.235.986.022 1.457a1.697 1.697 0 0 1-1.12.93l-30.812 7.663c-.056 37.702-2.677 71.404-30.733 73.107-9.893.605-33.052 2.006-55.437-4.033-27.473-7.406-44.772-23.428-51.427-47.618a1.674 1.674 0 0 1 1.176-2.061 1.675 1.675 0 0 1 2.062 1.176c6.319 22.957 22.822 38.184 49.062 45.265 21.86 5.893 44.638 4.515 54.363 3.921 25.467-1.546 27.584-34.497 27.584-71.056a1.69 1.69 0 0 1 1.278-1.636l30.049-7.473-42.251-84.815a1.682 1.682 0 0 1-.134-1.121c3.417-15.002 3.809-23.282 3.776-26.688-1.782.426-3.552.84-5.311 1.244a595.78 595.78 0 0 1-15.473 3.35c-3.72.762-7.574 1.501-11.451 2.207-24.705 4.493-48.984 7.227-72.165 8.112-19.283.75-38.106.257-55.942-1.491-16.415-1.602-31.719-4.212-45.5-7.753-4.269-1.098-7.395-1.938-9.311-2.498-.706 9.624-1.838 51.718 23.977 117.172 27.069 68.637 17.456 86.16-3.619 124.557-2.555 4.661-5.199 9.467-8.011 14.789a1.683 1.683 0 0 1-1.49.896h.022Z",
+				fill: palette.lines
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M217.985 203.765a1.683 1.683 0 0 1-1.456-2.521l19.517-33.826a1.71 1.71 0 0 1 1.02-.784 1.701 1.701 0 0 1 1.277.168l22.756 13.143a1.681 1.681 0 0 1 .616 2.296 1.673 1.673 0 0 1-2.297.617l-21.299-12.302-18.677 32.368a1.683 1.683 0 0 1-1.457.841Z",
+				fill: palette.lines
+			})
+		]
+	});
+};
+var ThinkingMedium_default = ThinkingMedium;
+export { ThinkingMedium_default as t };
+
+//# sourceMappingURL=ThinkingMedium.js.map

package/lib/ThinkingMedium.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThinkingMedium.js","names":["ThinkingMedium: React.FC<BaseSvgIllustrationProps>"],"sources":["../src/components/Illustrations/ThinkingMedium.tsx"],"sourcesContent":["import type React from 'react';\n\nimport type { Palette } from './Thinking';\n\nimport { type BaseSvgIllustrationProps, ViewBoxSize } from '../Illustration';\n\nconst ThinkingMedium: React.FC<BaseSvgIllustrationProps> = ({ color, svgProperties, title }) => {\n  const palette = ((): Palette => {\n    switch (color) {\n      case 'blueberry':\n        return {\n          lines: '#000',\n          shapes1: '#188097',\n          shapes2: '#AFDAE3',\n        };\n      case 'cherry':\n        return {\n          lines: '#000',\n          shapes1: '#A31F0E',\n          shapes2: '#F05A3B',\n        };\n      default:\n        return {\n          lines: '#1D1C1A',\n          shapes1: '#989693',\n          shapes2: '#D6D3D2',\n        };\n    }\n  })();\n\n  return (\n    <svg {...svgProperties} viewBox={ViewBoxSize.Medium}>\n      {title}\n      <path d=\"m301.601 134.422-11.125 19.26-11.115-19.26h22.24Z\" fill={palette.lines} />\n      <path\n        d=\"M215.7 117.402c6.645 0 12.033-5.387 12.033-12.033s-5.388-12.033-12.033-12.033c-6.646 0-12.033 5.387-12.033 12.033s5.387 12.033 12.033 12.033Z\"\n        fill={palette.shapes2}\n      />\n      <path\n        d=\"M352.636 188.933a543.85 543.85 0 0 1-15.73 3.395 116.773 116.773 0 0 0-4.179-9.625c-2.107-4.28-6.387-8.313-9.121-10.633l21.21-6.968 7.809 23.82.011.011ZM138.19 133.719l-15.753-14.487c-1.659-1.524-5.11-.448-7.72 2.386-2.611 2.835-3.373 6.375-1.726 7.899l15.753 14.487c1.659 1.524 5.11.448 7.72-2.386 2.611-2.835 3.373-6.376 1.726-7.899Z\"\n        fill={palette.lines}\n      />\n      <path\n        d=\"M120.712 127.141c2.608-2.839 3.38-6.372 1.726-7.892-1.655-1.519-5.109-.449-7.717 2.391-2.607 2.839-3.38 6.373-1.725 7.892 1.654 1.519 5.109.449 7.716-2.391Zm170.674-32.739-1.429 27.457 13.427.699 1.429-27.457-13.427-.7Zm45.811 97.869a586.22 586.22 0 0 1-11.417 2.196c-26.576 4.84-50.587 7.271-71.931 8.089 1.132-22.531 19.764-40.447 42.576-40.447 19.204 0 35.439 12.706 40.772 30.162Z\"\n        fill={palette.shapes1}\n      />\n      <path d=\"m362.978 139.172 2.957 11.047-11.047-2.969 8.09-8.078Z\" fill={palette.shapes2} />\n      <path\n        d=\"M299.965 451.799c-.918 0-1.669-.74-1.68-1.658l-.874-66.329a1.679 1.679 0 0 1 1.658-1.703h.022c.919 0 1.67.74 1.681 1.659l.874 66.328a1.678 1.678 0 0 1-1.658 1.703h-.023Zm-91.784-142.302c-1.288 0-2.621-.269-4.022-.84-7.563-3.149-18.767-21.871-24.66-50.352-.964-4.672-.605-12.358 3.607-18.632 2.869-4.291 7.093-7.07 12.191-8.022 13.87-2.611 20.75 7.036 21.041 7.45a1.68 1.68 0 0 1-2.756 1.927c-.258-.358-6.006-8.268-17.658-6.072-4.258.807-7.63 3.025-10.017 6.588-3.394 5.075-4.011 11.731-3.103 16.089 4.807 23.215 14.969 44.716 22.666 47.92 3.26 1.367 7.607 1.21 15.036-10.252a1.68 1.68 0 0 1 2.319-.493c.784.504.997 1.546.493 2.331-4.078 6.285-8.974 12.369-15.126 12.369l-.011-.011Z\"\n        fill={palette.lines}\n      />\n      <path\n        d=\"M215.699 255.82c-.47 0-.941-.191-1.266-.583-.078-.09-7.977-9.087-15.17-9.087h-.056c-2.353.012-4.336 1.02-6.062 3.059a1.683 1.683 0 0 1-2.364.202 1.683 1.683 0 0 1-.201-2.364c2.364-2.801 5.266-4.235 8.616-4.258 8.784-.045 17.422 9.826 17.792 10.252a1.684 1.684 0 0 1-.168 2.375 1.64 1.64 0 0 1-1.098.415l-.023-.011Zm-7.697 36.301c-.28 0-.56-.067-.818-.213a1.686 1.686 0 0 1-.65-2.285c5.569-9.938.807-13.871-3.787-17.68-2.521-2.084-4.907-4.056-4.661-6.902.225-2.667 2.712-5.176 8.325-8.403a1.681 1.681 0 1 1 1.681 2.913c-5.636 3.238-6.588 5.008-6.656 5.781-.089 1.098 1.625 2.521 3.451 4.034 4.583 3.787 11.518 9.523 4.583 21.915a1.673 1.673 0 0 1-1.468.863v-.023Zm-62.989-99.709c-.717 0-1.389-.47-1.614-1.198a10.523 10.523 0 0 1-.28-1.166c-.874-5.131 2.588-10.005 7.72-10.879a9.398 9.398 0 0 1 7.742 2.151 1.686 1.686 0 0 1-2.196 2.555 6.06 6.06 0 0 0-4.986-1.389c-3.305.56-5.535 3.708-4.963 7.002.045.258.101.516.179.751a1.683 1.683 0 0 1-1.12 2.095 1.8 1.8 0 0 1-.493.067l.011.011Zm128.276-75.598c-4.583 0-8.314-3.731-8.314-8.313 0-4.583 3.731-8.313 8.314-8.313 4.582 0 8.313 3.73 8.313 8.313 0 4.582-3.731 8.313-8.313 8.313Zm0-13.276a4.954 4.954 0 0 0-4.953 4.952 4.954 4.954 0 0 0 4.953 4.952 4.954 4.954 0 0 0 4.952-4.952 4.954 4.954 0 0 0-4.952-4.952Zm-19.496 100.226h-.1a1.682 1.682 0 0 1-1.58-1.782c1.389-23.293 20.783-41.544 44.155-41.544 19.473 0 36.447 12.481 42.24 31.057a1.677 1.677 0 0 1-1.109 2.107 1.677 1.677 0 0 1-2.107-1.109c-5.344-17.165-21.03-28.694-39.024-28.694-21.59 0-39.506 16.862-40.794 38.385a1.682 1.682 0 0 1-1.681 1.58Zm-12.089-111.67a1.4 1.4 0 0 1-.37-.045l-11.551-2.565a1.66 1.66 0 0 1-1.221-1.098 1.655 1.655 0 0 1 .302-1.614l8.134-9.803-13.019-2.095a1.678 1.678 0 0 1-.918-2.846l10.531-10.532a1.671 1.671 0 0 1 2.376 0c.649.66.661 1.725 0 2.375l-8.202 8.202 12.672 2.039c.594.09 1.098.504 1.311 1.064.213.56.101 1.199-.28 1.67l-8.258 9.949 8.874 1.972a1.68 1.68 0 0 1 1.277 2.005 1.683 1.683 0 0 1-1.635 1.311l-.023.011Zm-68.042 68.289a1.663 1.663 0 0 1-1.524-.975c-1.311-2.868-1.994-5.355-2.241-7.484-4.157-.84-8.257-3.63-10.162-9.658-.784-2.498-1.087-4.952-.93-7.283a14.842 14.842 0 0 1-2.812-1.613c-2.812-2.028-4.448-4.717-4.863-8-1.109-8.75 7.025-18.666 7.373-19.092a1.685 1.685 0 0 1 2.364-.224c.717.594.818 1.647.224 2.364-.079.09-7.563 9.221-6.622 16.526.303 2.353 1.445 4.213 3.496 5.692.493.359.974.65 1.445.896a15.674 15.674 0 0 1 5.076-7.764c3.417-2.846 7.63-3.877 10.218-2.498 1.232.649 1.938 1.927 1.927 3.484-.034 3.44-3.294 7.776-7.417 9.86-2.308 1.165-4.728 1.591-7.104 1.277-.022 1.591.213 3.372.841 5.355 1.333 4.247 4.022 6.409 6.901 7.216.348-3.384 1.815-5.479 2.757-6.487 2.33-2.51 5.859-3.563 8.582-2.555 1.893.695 3.07 2.319 3.148 4.325.146 3.832-3.675 7.305-9.086 8.235a13.47 13.47 0 0 1-1.916.202c.291 1.792.919 3.742 1.86 5.815.392.84.022 1.837-.829 2.229a1.739 1.739 0 0 1-.695.157h-.011Zm5.322-17.983c-1.199 0-2.723.561-3.922 1.86-1.098 1.177-1.725 2.734-1.893 4.572a13.605 13.605 0 0 0 1.501-.157c3.552-.616 6.375-2.768 6.297-4.796-.011-.414-.135-.997-.953-1.299a2.92 2.92 0 0 0-1.03-.168v-.012Zm-16.403-9.837c2.039.258 3.787-.28 5.109-.941 3.428-1.737 5.557-5.187 5.58-6.902 0-.157-.012-.425-.135-.493-1.165-.616-3.977.023-6.498 2.118-1.166.975-3.137 3.003-4.045 6.218h-.011Zm105.431-42.398a1.69 1.69 0 0 1-1.188-.493 1.67 1.67 0 0 1 0-2.376l7.574-7.574a1.67 1.67 0 0 1 2.375 0c.65.661.661 1.726 0 2.376l-7.574 7.574a1.69 1.69 0 0 1-1.187.493Zm-2.017-12.601a1.69 1.69 0 0 1-1.188-.493 1.67 1.67 0 0 1 0-2.375l7.294-7.294a1.67 1.67 0 0 1 2.375 0c.65.661.662 1.725 0 2.375l-7.293 7.294a1.69 1.69 0 0 1-1.188.493Zm88.165 42.094c-1.423 0-2.879-.213-4.336-.65-2.42-.729-4.526-2.23-6.263-4.146a17.099 17.099 0 0 1-7.328 1.95c-9.052.257-13.075-7.115-13.96-11.07a1.68 1.68 0 0 1 1.277-2.005 1.68 1.68 0 0 1 2.006 1.266c.09.369 2.106 8.739 10.577 8.447a13.455 13.455 0 0 0 5.389-1.31c-1.67-2.667-2.745-5.726-3.137-8.549-.493-3.597.235-6.196 2.061-7.35 1.065-.661 2.902-1.087 5.658.717 3.843 2.532 5.434 6.196 4.336 10.073-.638 2.252-2.084 4.302-4.044 5.938 1.266 1.311 2.745 2.319 4.392 2.812 4.773 1.434 8.257-.37 10.33-2.14 3.316-2.812 4.65-6.689 4.47-8.067a1.678 1.678 0 0 1 1.446-1.882c.918-.135 1.759.526 1.882 1.445.358 2.711-1.692 7.72-5.625 11.058-2.677 2.275-5.826 3.451-9.131 3.451v.012Zm-11.686-20.627a.539.539 0 0 0-.235.045c-.381.235-.863 1.557-.516 4.044.325 2.342 1.233 4.93 2.622 7.171 1.446-1.255 2.454-2.734 2.868-4.179.684-2.432-.336-4.627-2.946-6.353-.885-.582-1.457-.74-1.77-.74l-.023.012Zm-221.762 28.11c2.608-2.839 3.38-6.372 1.726-7.892-1.655-1.519-5.109-.449-7.717 2.391-2.607 2.839-3.38 6.373-1.725 7.892 1.654 1.519 5.109.449 7.716-2.391Z\"\n        fill={palette.lines}\n      />\n      <path\n        d=\"M114.963 131.871c-1.187 0-2.263-.358-3.092-1.12-1.244-1.143-1.692-2.98-1.244-5.053.392-1.782 1.401-3.63 2.868-5.221 3.283-3.574 7.72-4.672 10.095-2.488 2.376 2.185 1.67 6.689-1.613 10.275-2.14 2.33-4.773 3.607-7.003 3.607h-.011Zm1.009-9.12c-1.042 1.143-1.793 2.476-2.051 3.664-.19.863-.101 1.546.235 1.86.706.638 3.194.056 5.345-2.286s2.521-4.874 1.826-5.523c-.706-.639-3.193-.056-5.344 2.285h-.011Z\"\n        fill={palette.lines}\n      />\n      <path\n        d=\"M130.705 146.358c-1.187 0-2.263-.358-3.092-1.12l-15.753-14.487a1.682 1.682 0 0 1 2.274-2.476l15.753 14.487c.695.638 3.194.056 5.345-2.286 2.151-2.341 2.521-4.874 1.826-5.523l-15.753-14.487a1.681 1.681 0 1 1 2.274-2.476l15.753 14.486c2.376 2.185 1.659 6.689-1.624 10.263-2.14 2.331-4.773 3.608-7.003 3.608v.011Zm133.318 13.154a17.92 17.92 0 0 1-3.149-.28c-6.308-1.12-10.677-5.188-9.949-9.255.381-2.106 2.005-3.787 4.594-4.739 2.274-.84 5.097-1.02 7.943-.504 6.308 1.12 10.678 5.187 9.95 9.254-.381 2.107-2.006 3.787-4.594 4.74-1.423.526-3.07.784-4.795.784Zm-3.698-11.697c-1.333 0-2.599.19-3.652.583-1.401.515-2.286 1.299-2.443 2.173-.336 1.86 2.689 4.549 7.227 5.356 2.241.403 4.504.269 6.196-.348 1.4-.515 2.285-1.299 2.442-2.173.336-1.86-2.689-4.549-7.226-5.356a14.23 14.23 0 0 0-2.555-.224l.011-.011Z\"\n        fill={palette.lines}\n      />\n      <path\n        d=\"M250.678 162.53c-.1 0-.201 0-.302-.022a1.677 1.677 0 0 1-1.356-1.95l1.905-10.599a1.684 1.684 0 0 1 1.949-1.356 1.677 1.677 0 0 1 1.356 1.95l-1.905 10.599a1.676 1.676 0 0 1-1.647 1.389v-.011Zm17.771 11.269c-.101 0-.202 0-.303-.022a1.677 1.677 0 0 1-1.356-1.95l3.306-18.431a1.684 1.684 0 0 1 1.949-1.355 1.676 1.676 0 0 1 1.356 1.949l-3.305 18.431a1.678 1.678 0 0 1-1.647 1.389v-.011Zm-27.327-32.967a1.67 1.67 0 0 1-1.546-1.031l-5.233-12.391a1.661 1.661 0 0 1 0-1.289c.168-.414.493-.739.908-.918l25.332-10.689a1.68 1.68 0 0 1 2.196.896l5.233 12.392c.179.414.179.874 0 1.288-.168.415-.493.74-.908.919l-25.332 10.689a1.7 1.7 0 0 1-.65.134Zm-3.025-13.176 3.921 9.288 22.24-9.377-3.921-9.289-22.24 9.378Zm-6.891 29.578c-.426 0-.841-.157-1.165-.47l-12.291-11.899-6.297 6.498a1.67 1.67 0 0 1-2.375.034 1.67 1.67 0 0 1-.034-2.375l7.462-7.709a1.68 1.68 0 0 1 2.375-.033l13.501 13.075a1.67 1.67 0 0 1 .034 2.375 1.7 1.7 0 0 1-1.21.516v-.012Zm-46.945 21.455c-.426 0-.841-.157-1.166-.47a1.672 1.672 0 0 1-.033-2.376l14.857-15.338a1.67 1.67 0 0 1 2.375-.034c.672.65.683 1.715.033 2.376l-14.856 15.338a1.699 1.699 0 0 1-1.21.515v-.011Zm147.67-14.599c-.291 0-.582-.078-.84-.224l-20.672-11.932a1.683 1.683 0 0 1-.616-2.297l11.932-20.672a1.706 1.706 0 0 1 1.02-.784 1.701 1.701 0 0 1 1.277.168l20.672 11.932a1.683 1.683 0 0 1 .616 2.297l-11.932 20.672a1.703 1.703 0 0 1-1.02.784 1.925 1.925 0 0 1-.437.056Zm-18.375-14.229 17.759 10.252 10.252-17.759-17.759-10.252-10.252 17.759Zm-152.465 15.736h-.056l-15.653-.47a1.708 1.708 0 0 1-1.434-.886 1.696 1.696 0 0 1 .045-1.68l8.235-13.322c.314-.515.885-.851 1.479-.795a1.703 1.703 0 0 1 1.434.885l7.417 13.792a1.7 1.7 0 0 1-.044 1.681 1.689 1.689 0 0 1-1.435.795h.012Zm-12.695-3.742 9.838.291-4.661-8.661-5.177 8.37Zm142.08-6.875a1.69 1.69 0 0 1-1.457-.84l-11.114-19.26a1.666 1.666 0 0 1 0-1.68 1.687 1.687 0 0 1 1.456-.841h22.24a1.69 1.69 0 0 1 1.457.841 1.67 1.67 0 0 1 0 1.68l-11.115 19.26c-.302.516-.851.84-1.456.84h-.011Zm-8.213-19.259 8.213 14.218 8.212-14.218h-16.425Z\"\n        fill={palette.lines}\n      />\n      <path d=\"m198.109 134.477 18.476 24.761-30.689 3.619 12.213-28.38Z\" fill={palette.lines} />\n      <path\n        d=\"M185.897 164.536a1.671 1.671 0 0 1-1.345-.672 1.69 1.69 0 0 1-.202-1.669l12.202-28.391c.235-.549.75-.93 1.344-1.009a1.654 1.654 0 0 1 1.546.661l18.487 24.761a1.69 1.69 0 0 1 .202 1.67c-.235.549-.751.93-1.345 1.008l-30.688 3.63c-.067 0-.134.011-.201.011Zm12.593-26.733-9.904 23.036 24.906-2.947-15.002-20.1v.011Zm117.554 116.906c-4.941 0-10.655-1.065-17.165-3.855a1.69 1.69 0 0 1-.885-2.207 1.688 1.688 0 0 1 2.207-.885c24.447 10.498 36.077-5.019 36.559-5.692a1.685 1.685 0 0 1 2.342-.381c.75.538.918 1.591.381 2.342-.101.146-7.899 10.678-23.451 10.678h.012Z\"\n        fill={palette.lines}\n      />\n      <path\n        d=\"M198.277 198.441c0 .896-.056 1.77-.145 2.633-20.089-1.972-35.854-5.143-47.047-8.022 2.443-10.611 11.944-18.521 23.283-18.521 13.198 0 23.909 10.7 23.909 23.91Z\"\n        fill={palette.shapes2}\n      />\n      <path\n        d=\"M253.961 168.822a15.8 15.8 0 0 1-2.073 7.865l-14.43-8.335-8.101 14.027c-4.482-2.846-7.462-7.854-7.462-13.557 0-8.862 7.171-16.033 16.033-16.033 8.863 0 16.033 7.171 16.033 16.033Z\"\n        fill={palette.shapes1}\n      />\n      <path\n        d=\"M154.043 449.909a1.76 1.76 0 0 1-.784-.19 1.68 1.68 0 0 1-.695-2.275c2.824-5.344 5.468-10.162 8.034-14.834 21.164-38.576 29.926-54.541 3.428-121.71-15.551-39.416-21.243-70.149-23.282-88.994-1.972-18.162-1.053-28.885-.773-31.417a2.363 2.363 0 0 1 0-.571c.123-.852.963-1.457 1.792-1.446.359.012.695.146.975.359.706.246 3.025.964 10.577 2.902 13.602 3.496 28.738 6.072 44.984 7.663 17.681 1.726 36.347 2.23 55.483 1.468 23.025-.885 47.147-3.596 71.695-8.056a464.258 464.258 0 0 0 11.384-2.196 553.362 553.362 0 0 0 15.394-3.327 565.684 565.684 0 0 0 7.249-1.714c.46-.112.941-.023 1.334.246.392.269.649.684.717 1.154.045.336 1.098 8.302-3.608 29.187l42.912 86.148c.224.46.235.986.022 1.457a1.697 1.697 0 0 1-1.12.93l-30.812 7.663c-.056 37.702-2.677 71.404-30.733 73.107-9.893.605-33.052 2.006-55.437-4.033-27.473-7.406-44.772-23.428-51.427-47.618a1.674 1.674 0 0 1 1.176-2.061 1.675 1.675 0 0 1 2.062 1.176c6.319 22.957 22.822 38.184 49.062 45.265 21.86 5.893 44.638 4.515 54.363 3.921 25.467-1.546 27.584-34.497 27.584-71.056a1.69 1.69 0 0 1 1.278-1.636l30.049-7.473-42.251-84.815a1.682 1.682 0 0 1-.134-1.121c3.417-15.002 3.809-23.282 3.776-26.688-1.782.426-3.552.84-5.311 1.244a595.78 595.78 0 0 1-15.473 3.35c-3.72.762-7.574 1.501-11.451 2.207-24.705 4.493-48.984 7.227-72.165 8.112-19.283.75-38.106.257-55.942-1.491-16.415-1.602-31.719-4.212-45.5-7.753-4.269-1.098-7.395-1.938-9.311-2.498-.706 9.624-1.838 51.718 23.977 117.172 27.069 68.637 17.456 86.16-3.619 124.557-2.555 4.661-5.199 9.467-8.011 14.789a1.683 1.683 0 0 1-1.49.896h.022Z\"\n        fill={palette.lines}\n      />\n      <path\n        d=\"M217.985 203.765a1.683 1.683 0 0 1-1.456-2.521l19.517-33.826a1.71 1.71 0 0 1 1.02-.784 1.701 1.701 0 0 1 1.277.168l22.756 13.143a1.681 1.681 0 0 1 .616 2.296 1.673 1.673 0 0 1-2.297.617l-21.299-12.302-18.677 32.368a1.683 1.683 0 0 1-1.457.841Z\"\n        fill={palette.lines}\n      />\n    </svg>\n  );\n};\n\nexport default ThinkingMedium;\n"],"mappings":";;AAMA,IAAMA,kBAAsD,EAAE,OAAO,eAAe,YAAY;CAC9F,MAAM,iBAA0B;AAC9B,UAAQ,OAAR;GACE,KAAK,YACH,QAAO;IACL,OAAO;IACP,SAAS;IACT,SAAS;IACV;GACH,KAAK,SACH,QAAO;IACL,OAAO;IACP,SAAS;IACT,SAAS;IACV;GACH,QACE,QAAO;IACL,OAAO;IACP,SAAS;IACT,SAAS;IACV;;KAEH;AAEJ,QACE,qBAAC,OAAA;EAAI,GAAI;EAAe,SAAS,YAAY;;GAC1C;GACD,oBAAC,QAAA;IAAK,GAAE;IAAoD,MAAM,QAAQ;KAAS;GACnF,oBAAC,QAAA;IACC,GAAE;IACF,MAAM,QAAQ;KACd;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAM,QAAQ;KACd;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAM,QAAQ;KACd;GACF,oBAAC,QAAA;IAAK,GAAE;IAAyD,MAAM,QAAQ;KAAW;GAC1F,oBAAC,QAAA;IACC,GAAE;IACF,MAAM,QAAQ;KACd;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAM,QAAQ;KACd;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAM,QAAQ;KACd;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAM,QAAQ;KACd;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAM,QAAQ;KACd;GACF,oBAAC,QAAA;IAAK,GAAE;IAA4D,MAAM,QAAQ;KAAS;GAC3F,oBAAC,QAAA;IACC,GAAE;IACF,MAAM,QAAQ;KACd;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAM,QAAQ;KACd;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAM,QAAQ;KACd;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAM,QAAQ;KACd;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAM,QAAQ;KACd;;GACE;;AAIV,IAAA,yBAAe"}

package/lib/components/Button/styles.module.scss

@@ -94,9 +94,7 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
   }
 
   :disabled > & {
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-      color: palette.$neutral700;
-    }
+    color: palette.$neutral700;
   }
 }
 

package/lib/components/Drawer/styles.module.scss

@@ -73,15 +73,8 @@
 
   &__header {
     display: flex;
-    align-items: center;
     justify-content: space-between;
-
-    // legg til padding for å gi plass til close button
-    padding: var(--core-space-xs) 2.75rem var(--core-space-xs) var(--core-space-2xs);
-
-    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-      padding: var(--core-space-xs) 2.75rem var(--core-space-xs) var(--core-space-xs);
-    }
+    padding: var(--core-space-xs);
 
     @include breakpoints.tiny-screens-media-query {
       padding: var(--core-space-4xs) 0;
@@ -89,22 +82,12 @@
       align-items: flex-start;
     }
 
-    &--no-close-button {
-      padding: var(--core-space-xs) var(--core-space-2xs);
-
-      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-        padding: var(--core-space-xs);
-      }
+    &__title {
+      margin-top: 0.5rem !important;
     }
 
     &__close-button {
-      position: absolute;
-      top: 0;
-      right: 0;
-
-      @include breakpoints.tiny-screens-media-query {
-        position: relative;
-      }
+      align-self: flex-start;
     }
   }
 

package/lib/components/Drawer/styles.module.scss.d.ts

@@ -12,7 +12,7 @@ export type Styles = {
   drawer__footer: string;
   drawer__header: string;
   'drawer__header__close-button': string;
-  'drawer__header--no-close-button': string;
+  drawer__header__title: string;
   drawer__overlay: string;
 };
 

package/lib/components/ExpanderHierarchy/Expander.d.ts

@@ -14,7 +14,7 @@ export interface ExpanderProps extends ExpanderHierarchyCommonProps {
     /** Adds custom classes to the element. */
     className?: string;
     /** ref that is placed on the li element */
-    ref?: React.RefObject<HTMLLIElement>;
+    ref?: React.RefObject<HTMLLIElement | null>;
 }
 export type ExpanderType = typeof Expander;
 declare const Expander: React.FC<ExpanderProps>;

package/lib/components/ExpanderHierarchy/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ExpanderButton: React.FC<ExpanderButtonProps>","Expander: React.FC<ExpanderProps>","ExpanderHierarchy: ExpanderHierarchyCompound"],"sources":["../../../src/components/ExpanderHierarchy/ExpanderButton.tsx","../../../src/components/ExpanderHierarchy/utils.ts","../../../src/components/ExpanderHierarchy/Expander.tsx","../../../src/components/ExpanderHierarchy/ExpanderHierarchy.tsx","../../../src/components/ExpanderHierarchy/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { ExpanderHierarchyCommonProps } from '../ExpanderHierarchy';\n\nimport { AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport Icon, { IconSize } from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\n\nimport styles from './expander.module.scss';\n\ninterface ExpanderButtonProps extends ExpanderHierarchyCommonProps {\n  expanded: boolean;\n  onExpand?: (isExpanded: boolean) => void;\n  children: string;\n  testId?: string;\n}\n\nconst ExpanderButton: React.FC<ExpanderButtonProps> = ({ htmlMarkup = 'h2', level = 1, print, expanded, onExpand, children, testId }) => {\n  const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement>();\n  const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n\n  const handleClick = (): void => {\n    setIsExpanded(!isExpanded);\n  };\n\n  const CustomTag = htmlMarkup;\n\n  const buttonClasses = classNames(\n    styles.expander__button,\n    level > 1 && styles[`expander__button--2-and-lower`],\n    print && styles['expander__button--print']\n  );\n\n  const titleClasses = classNames(\n    styles.expander__title,\n    (level === 1 || level === 2 || level === 3) && styles[`expander__title--${level}`],\n    level > 3 && styles[`expander__title--4-and-lower`],\n    isExpanded && styles['expander__title--expanded'],\n    print && styles['expander__title--print']\n  );\n\n  const iconClasses = classNames(\n    styles.expander__icon,\n    level > 1 && styles[`expander__icon--2-and-lower`],\n    level > 2 && styles[`expander__icon--3-and-lower`]\n  );\n\n  return (\n    <CustomTag className={titleClasses}>\n      <button\n        type=\"button\"\n        onClick={handleClick}\n        className={buttonClasses}\n        aria-expanded={isExpanded}\n        ref={refObject}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.ExpanderHierarchyExpander}\n      >\n        {children}\n        <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} isHovered={isHovered} className={iconClasses} size={IconSize.XSmall} />\n      </button>\n    </CustomTag>\n  );\n};\n\nexport default ExpanderButton;\n","export type HeadingTags = 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\nexport const getHeadingTag = (htmlMarkup?: HeadingTags): HeadingTags => {\n  switch (htmlMarkup) {\n    case 'h2':\n      return 'h3';\n    case 'h3':\n      return 'h4';\n    case 'h4':\n      return 'h5';\n    case 'h5':\n      return 'h6';\n    case 'h6':\n      return 'h6';\n    default:\n      return 'h2';\n  }\n};\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { ExpanderHierarchyCommonProps, ExpanderHierarchyProps } from './ExpanderHierarchy';\n\nimport ExpanderButton from './ExpanderButton';\nimport ExpanderHierarchy from './ExpanderHierarchy';\nimport { getHeadingTag } from './utils';\nimport { isComponent } from '../../utils/component';\n\nimport styles from './expander.module.scss';\n\nexport interface ExpanderProps extends ExpanderHierarchyCommonProps {\n  /** Sets the trigger title */\n  title: string;\n  /** Opens or closes the expander */\n  expanded?: boolean;\n  /** Called when expander is open/closed. */\n  onExpand?: (isExpanded: boolean) => void;\n  /** Sets the expanded content */\n  children?: React.ReactNode;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** ref that is placed on the li element */\n  ref?: React.RefObject<HTMLLIElement>;\n}\n\nexport type ExpanderType = typeof Expander;\n\nconst Expander: React.FC<ExpanderProps> = ({\n  title,\n  htmlMarkup = 'h2',\n  level = 1,\n  print,\n  expanded = false,\n  onExpand,\n  children,\n  testId,\n  className,\n  ref,\n}: ExpanderProps) => {\n  const contentClasses = classNames(\n    styles.expander__content,\n    (level === 1 || level === 2) && styles[`expander__content--${level}`],\n    level > 2 && styles[`expander__content--3-and-lower`]\n  );\n\n  return (\n    <li className={classNames(styles.expander, className)} ref={ref}>\n      <ExpanderButton htmlMarkup={htmlMarkup} level={level} print={print} expanded={expanded} onExpand={onExpand} testId={testId}>\n        {title}\n      </ExpanderButton>\n      <div className={contentClasses}>\n        {React.Children.map(children, child =>\n          isComponent<ExpanderHierarchyProps>(child, ExpanderHierarchy)\n            ? React.cloneElement(child, { htmlMarkup: getHeadingTag(htmlMarkup), level: level + 1, print })\n            : child\n        )}\n      </div>\n    </li>\n  );\n};\n\nexport default Expander;\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { ExpanderProps, ExpanderType } from './Expander';\nimport type { HeadingTags } from './utils';\n\nimport Expander from './Expander';\nimport { AnalyticsId } from '../../constants';\nimport { isComponent } from '../../utils/component';\n\nimport styles from './styles.module.scss';\n\nexport interface ExpanderHierarchyCommonProps {\n  /** Changes the underlying element of the expander title. Default: h2. */\n  htmlMarkup?: HeadingTags;\n  /** Expand all children when printing. */\n  print?: boolean;\n  /** Expander nesting level. Should not be set manually. */\n  level?: number;\n}\n\nexport interface ExpanderHierarchyProps extends ExpanderHierarchyCommonProps {\n  children: React.ReactNode;\n  /** Sets the data-testid attribute on the expander list. */\n  testId?: string;\n}\n\nexport interface ExpanderHierarchyCompound extends React.FC<ExpanderHierarchyProps> {\n  Expander: ExpanderType;\n}\n\nconst ExpanderHierarchy: ExpanderHierarchyCompound = ({\n  htmlMarkup = 'h2',\n  level = 1,\n  print,\n  children,\n  testId,\n}: ExpanderHierarchyProps) => {\n  const listClasses = classNames(\n    styles.expanderhierarchy,\n    level === 2 && styles[`expanderhierarchy--${level}`],\n    level > 2 && styles[`expanderhierarchy--3-and-lower`]\n  );\n\n  return (\n    <ul className={listClasses} data-testid={testId} data-analyticsid={AnalyticsId.ExpanderHierarchy}>\n      {React.Children.map(children, child =>\n        isComponent<ExpanderProps>(child, Expander) ? React.cloneElement(child, { htmlMarkup, level, print }) : child\n      )}\n    </ul>\n  );\n};\n\nExpanderHierarchy.Expander = Expander;\n\nexport default ExpanderHierarchy;\n","import ExpanderHierarchy from './ExpanderHierarchy';\nexport * from './ExpanderHierarchy';\nexport * from './utils';\nexport default ExpanderHierarchy;\n"],"mappings":";;;;;;;;;;;;AAoBA,IAAMA,kBAAiD,EAAE,aAAa,MAAM,QAAQ,GAAG,OAAO,UAAU,UAAU,UAAU,aAAa;CACvI,MAAM,EAAE,WAAW,cAAc,kBAAqC;CACtE,MAAM,CAAC,YAAY,iBAAiB,UAAU,UAAU,SAAS;CAEjE,MAAM,oBAA0B;AAC9B,gBAAc,CAAC,WAAW;;CAG5B,MAAM,YAAY;CAElB,MAAM,gBAAgB,WACpB,OAAO,kBACP,QAAQ,KAAK,OAAO,kCACpB,SAAS,OAAO,2BACjB;CAED,MAAM,eAAe,WACnB,OAAO,kBACN,UAAU,KAAK,UAAU,KAAK,UAAU,MAAM,OAAO,oBAAoB,UAC1E,QAAQ,KAAK,OAAO,iCACpB,cAAc,OAAO,8BACrB,SAAS,OAAO,0BACjB;CAED,MAAM,cAAc,WAClB,OAAO,gBACP,QAAQ,KAAK,OAAO,gCACpB,QAAQ,KAAK,OAAO,+BACrB;AAED,QACE,oBAAC,WAAA;EAAU,WAAW;YACpB,qBAAC,UAAA;GACC,MAAK;GACL,SAAS;GACT,WAAW;GACX,iBAAe;GACf,KAAK;GACL,eAAa;GACb,oBAAkB,YAAY;cAE7B,UACD,oBAAC,cAAA;IAAK,SAAS,aAAa,oBAAY;IAAwB;IAAW,WAAW;IAAa,MAAM,SAAS;KAAU,CAAA;IACrH;GACC;;AAIhB,IAAA,yBAAe;AClEf,MAAa,iBAAiB,eAA0C;AACtE,SAAQ,YAAR;EACE,KAAK,KACH,QAAO;EACT,KAAK,KACH,QAAO;EACT,KAAK,KACH,QAAO;EACT,KAAK,KACH,QAAO;EACT,KAAK,KACH,QAAO;EACT,QACE,QAAO;;;ACiBb,IAAMC,YAAqC,EACzC,OACA,aAAa,MACb,QAAQ,GACR,OACA,WAAW,OACX,UACA,UACA,QACA,WACA,UACmB;CACnB,MAAM,iBAAiB,WACrB,OAAO,oBACN,UAAU,KAAK,UAAU,MAAM,OAAO,sBAAsB,UAC7D,QAAQ,KAAK,OAAO,kCACrB;AAED,QACE,qBAAC,MAAA;EAAG,WAAW,WAAW,OAAO,UAAU,UAAU;EAAO;aAC1D,oBAAC,wBAAA;GAA2B;GAAmB;GAAc;GAAiB;GAAoB;GAAkB;aACjH;IACc,EACjB,oBAAC,OAAA;GAAI,WAAW;aACb,MAAM,SAAS,IAAI,WAAU,UAC5B,YAAoC,OAAO,4BAAkB,GACzD,MAAM,aAAa,OAAO;IAAE,YAAY,cAAc,WAAW;IAAE,OAAO,QAAQ;IAAG;IAAO,CAAC,GAC7F,MACL;IACG,CAAA;GACH;;AAIT,IAAA,mBAAe;AClCf,IAAMC,qBAAgD,EACpD,aAAa,MACb,QAAQ,GACR,OACA,UACA,aAC4B;AAO5B,QACE,oBAAC,MAAA;EAAG,WAPc,WAClB,SAAO,mBACP,UAAU,KAAK,SAAO,sBAAsB,UAC5C,QAAQ,KAAK,SAAO,kCACrB;EAG6B,eAAa;EAAQ,oBAAkB,YAAY;YAC5E,MAAM,SAAS,IAAI,WAAU,UAC5B,YAA2B,OAAO,iBAAS,GAAG,MAAM,aAAa,OAAO;GAAE;GAAY;GAAO;GAAO,CAAC,GAAG,MACzG;GACE;;AAIT,kBAAkB,WAAW;AAE7B,IAAA,8BAAe;ACrDf,IAAA,4BAAe"}
+{"version":3,"file":"index.js","names":["ExpanderButton: React.FC<ExpanderButtonProps>","Expander: React.FC<ExpanderProps>","ExpanderHierarchy: ExpanderHierarchyCompound"],"sources":["../../../src/components/ExpanderHierarchy/ExpanderButton.tsx","../../../src/components/ExpanderHierarchy/utils.ts","../../../src/components/ExpanderHierarchy/Expander.tsx","../../../src/components/ExpanderHierarchy/ExpanderHierarchy.tsx","../../../src/components/ExpanderHierarchy/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { ExpanderHierarchyCommonProps } from '../ExpanderHierarchy';\n\nimport { AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport Icon, { IconSize } from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\n\nimport styles from './expander.module.scss';\n\ninterface ExpanderButtonProps extends ExpanderHierarchyCommonProps {\n  expanded: boolean;\n  onExpand?: (isExpanded: boolean) => void;\n  children: string;\n  testId?: string;\n}\n\nconst ExpanderButton: React.FC<ExpanderButtonProps> = ({ htmlMarkup = 'h2', level = 1, print, expanded, onExpand, children, testId }) => {\n  const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement>();\n  const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n\n  const handleClick = (): void => {\n    setIsExpanded(!isExpanded);\n  };\n\n  const CustomTag = htmlMarkup;\n\n  const buttonClasses = classNames(\n    styles.expander__button,\n    level > 1 && styles[`expander__button--2-and-lower`],\n    print && styles['expander__button--print']\n  );\n\n  const titleClasses = classNames(\n    styles.expander__title,\n    (level === 1 || level === 2 || level === 3) && styles[`expander__title--${level}`],\n    level > 3 && styles[`expander__title--4-and-lower`],\n    isExpanded && styles['expander__title--expanded'],\n    print && styles['expander__title--print']\n  );\n\n  const iconClasses = classNames(\n    styles.expander__icon,\n    level > 1 && styles[`expander__icon--2-and-lower`],\n    level > 2 && styles[`expander__icon--3-and-lower`]\n  );\n\n  return (\n    <CustomTag className={titleClasses}>\n      <button\n        type=\"button\"\n        onClick={handleClick}\n        className={buttonClasses}\n        aria-expanded={isExpanded}\n        ref={refObject}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.ExpanderHierarchyExpander}\n      >\n        {children}\n        <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} isHovered={isHovered} className={iconClasses} size={IconSize.XSmall} />\n      </button>\n    </CustomTag>\n  );\n};\n\nexport default ExpanderButton;\n","export type HeadingTags = 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\nexport const getHeadingTag = (htmlMarkup?: HeadingTags): HeadingTags => {\n  switch (htmlMarkup) {\n    case 'h2':\n      return 'h3';\n    case 'h3':\n      return 'h4';\n    case 'h4':\n      return 'h5';\n    case 'h5':\n      return 'h6';\n    case 'h6':\n      return 'h6';\n    default:\n      return 'h2';\n  }\n};\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { ExpanderHierarchyCommonProps, ExpanderHierarchyProps } from './ExpanderHierarchy';\n\nimport ExpanderButton from './ExpanderButton';\nimport ExpanderHierarchy from './ExpanderHierarchy';\nimport { getHeadingTag } from './utils';\nimport { isComponent } from '../../utils/component';\n\nimport styles from './expander.module.scss';\n\nexport interface ExpanderProps extends ExpanderHierarchyCommonProps {\n  /** Sets the trigger title */\n  title: string;\n  /** Opens or closes the expander */\n  expanded?: boolean;\n  /** Called when expander is open/closed. */\n  onExpand?: (isExpanded: boolean) => void;\n  /** Sets the expanded content */\n  children?: React.ReactNode;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** ref that is placed on the li element */\n  ref?: React.RefObject<HTMLLIElement | null>;\n}\n\nexport type ExpanderType = typeof Expander;\n\nconst Expander: React.FC<ExpanderProps> = ({\n  title,\n  htmlMarkup = 'h2',\n  level = 1,\n  print,\n  expanded = false,\n  onExpand,\n  children,\n  testId,\n  className,\n  ref,\n}: ExpanderProps) => {\n  const contentClasses = classNames(\n    styles.expander__content,\n    (level === 1 || level === 2) && styles[`expander__content--${level}`],\n    level > 2 && styles[`expander__content--3-and-lower`]\n  );\n\n  return (\n    <li className={classNames(styles.expander, className)} ref={ref}>\n      <ExpanderButton htmlMarkup={htmlMarkup} level={level} print={print} expanded={expanded} onExpand={onExpand} testId={testId}>\n        {title}\n      </ExpanderButton>\n      <div className={contentClasses}>\n        {React.Children.map(children, child =>\n          isComponent<ExpanderHierarchyProps>(child, ExpanderHierarchy)\n            ? React.cloneElement(child, { htmlMarkup: getHeadingTag(htmlMarkup), level: level + 1, print })\n            : child\n        )}\n      </div>\n    </li>\n  );\n};\n\nexport default Expander;\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { ExpanderProps, ExpanderType } from './Expander';\nimport type { HeadingTags } from './utils';\n\nimport Expander from './Expander';\nimport { AnalyticsId } from '../../constants';\nimport { isComponent } from '../../utils/component';\n\nimport styles from './styles.module.scss';\n\nexport interface ExpanderHierarchyCommonProps {\n  /** Changes the underlying element of the expander title. Default: h2. */\n  htmlMarkup?: HeadingTags;\n  /** Expand all children when printing. */\n  print?: boolean;\n  /** Expander nesting level. Should not be set manually. */\n  level?: number;\n}\n\nexport interface ExpanderHierarchyProps extends ExpanderHierarchyCommonProps {\n  children: React.ReactNode;\n  /** Sets the data-testid attribute on the expander list. */\n  testId?: string;\n}\n\nexport interface ExpanderHierarchyCompound extends React.FC<ExpanderHierarchyProps> {\n  Expander: ExpanderType;\n}\n\nconst ExpanderHierarchy: ExpanderHierarchyCompound = ({\n  htmlMarkup = 'h2',\n  level = 1,\n  print,\n  children,\n  testId,\n}: ExpanderHierarchyProps) => {\n  const listClasses = classNames(\n    styles.expanderhierarchy,\n    level === 2 && styles[`expanderhierarchy--${level}`],\n    level > 2 && styles[`expanderhierarchy--3-and-lower`]\n  );\n\n  return (\n    <ul className={listClasses} data-testid={testId} data-analyticsid={AnalyticsId.ExpanderHierarchy}>\n      {React.Children.map(children, child =>\n        isComponent<ExpanderProps>(child, Expander) ? React.cloneElement(child, { htmlMarkup, level, print }) : child\n      )}\n    </ul>\n  );\n};\n\nExpanderHierarchy.Expander = Expander;\n\nexport default ExpanderHierarchy;\n","import ExpanderHierarchy from './ExpanderHierarchy';\nexport * from './ExpanderHierarchy';\nexport * from './utils';\nexport default ExpanderHierarchy;\n"],"mappings":";;;;;;;;;;;;AAoBA,IAAMA,kBAAiD,EAAE,aAAa,MAAM,QAAQ,GAAG,OAAO,UAAU,UAAU,UAAU,aAAa;CACvI,MAAM,EAAE,WAAW,cAAc,kBAAqC;CACtE,MAAM,CAAC,YAAY,iBAAiB,UAAU,UAAU,SAAS;CAEjE,MAAM,oBAA0B;AAC9B,gBAAc,CAAC,WAAW;;CAG5B,MAAM,YAAY;CAElB,MAAM,gBAAgB,WACpB,OAAO,kBACP,QAAQ,KAAK,OAAO,kCACpB,SAAS,OAAO,2BACjB;CAED,MAAM,eAAe,WACnB,OAAO,kBACN,UAAU,KAAK,UAAU,KAAK,UAAU,MAAM,OAAO,oBAAoB,UAC1E,QAAQ,KAAK,OAAO,iCACpB,cAAc,OAAO,8BACrB,SAAS,OAAO,0BACjB;CAED,MAAM,cAAc,WAClB,OAAO,gBACP,QAAQ,KAAK,OAAO,gCACpB,QAAQ,KAAK,OAAO,+BACrB;AAED,QACE,oBAAC,WAAA;EAAU,WAAW;YACpB,qBAAC,UAAA;GACC,MAAK;GACL,SAAS;GACT,WAAW;GACX,iBAAe;GACf,KAAK;GACL,eAAa;GACb,oBAAkB,YAAY;cAE7B,UACD,oBAAC,cAAA;IAAK,SAAS,aAAa,oBAAY;IAAwB;IAAW,WAAW;IAAa,MAAM,SAAS;KAAU,CAAA;IACrH;GACC;;AAIhB,IAAA,yBAAe;AClEf,MAAa,iBAAiB,eAA0C;AACtE,SAAQ,YAAR;EACE,KAAK,KACH,QAAO;EACT,KAAK,KACH,QAAO;EACT,KAAK,KACH,QAAO;EACT,KAAK,KACH,QAAO;EACT,KAAK,KACH,QAAO;EACT,QACE,QAAO;;;ACiBb,IAAMC,YAAqC,EACzC,OACA,aAAa,MACb,QAAQ,GACR,OACA,WAAW,OACX,UACA,UACA,QACA,WACA,UACmB;CACnB,MAAM,iBAAiB,WACrB,OAAO,oBACN,UAAU,KAAK,UAAU,MAAM,OAAO,sBAAsB,UAC7D,QAAQ,KAAK,OAAO,kCACrB;AAED,QACE,qBAAC,MAAA;EAAG,WAAW,WAAW,OAAO,UAAU,UAAU;EAAO;aAC1D,oBAAC,wBAAA;GAA2B;GAAmB;GAAc;GAAiB;GAAoB;GAAkB;aACjH;IACc,EACjB,oBAAC,OAAA;GAAI,WAAW;aACb,MAAM,SAAS,IAAI,WAAU,UAC5B,YAAoC,OAAO,4BAAkB,GACzD,MAAM,aAAa,OAAO;IAAE,YAAY,cAAc,WAAW;IAAE,OAAO,QAAQ;IAAG;IAAO,CAAC,GAC7F,MACL;IACG,CAAA;GACH;;AAIT,IAAA,mBAAe;AClCf,IAAMC,qBAAgD,EACpD,aAAa,MACb,QAAQ,GACR,OACA,UACA,aAC4B;AAO5B,QACE,oBAAC,MAAA;EAAG,WAPc,WAClB,SAAO,mBACP,UAAU,KAAK,SAAO,sBAAsB,UAC5C,QAAQ,KAAK,SAAO,kCACrB;EAG6B,eAAa;EAAQ,oBAAkB,YAAY;YAC5E,MAAM,SAAS,IAAI,WAAU,UAC5B,YAA2B,OAAO,iBAAS,GAAG,MAAM,aAAa,OAAO;GAAE;GAAY;GAAO;GAAO,CAAC,GAAG,MACzG;GACE;;AAIT,kBAAkB,WAAW;AAE7B,IAAA,8BAAe;ACrDf,IAAA,4BAAe"}

package/lib/components/ExpanderList/index.js

@@ -110,6 +110,7 @@ const Expander = (props) => {
 var isExpanderComponent = (element) => React.isValidElement(element) && element.type === Expander;
 var ExpanderListComponent = (props) => {
 	const { children, childPadding = true, large, renderChildrenWhenClosed = false, color = "white", className = "", accordion = false, testId, variant, zIndex, highlightText, editMode = false, ref } = props;
+	const [prevChildren, setPrevChildren] = useState(children);
 	const [activeExpander, setActiveExpander] = useState();
 	const [latestExpander, setLatestExpander] = useState();
 	const expanderIdBase = useId();
@@ -129,18 +130,26 @@ var ExpanderListComponent = (props) => {
 	useEffect(() => {
 		if (accordion && latestExpander && !isElementInViewport(latestExpander)) latestExpander.scrollIntoView();
 	}, [accordion, latestExpander]);
-	useEffect(() => {
-		const newActiveExpander = React.Children.map(children, (child) => {
+	const getExpanderStateFromChildren = () => {
+		return React.Children.map(children, (child) => {
 			if (isExpanderComponent(child)) return child;
 		})?.reduce((acc, child, index) => {
 			if (typeof child.props.expanded !== "undefined") acc[getExpanderId(index)] = child.props.expanded;
 			return acc;
 		}, {});
-		setActiveExpander({
+	};
+	if (children !== prevChildren) {
+		setPrevChildren(children);
+		const newActiveExpander = getExpanderStateFromChildren();
+		if (newActiveExpander) setActiveExpander({
 			...activeExpander,
 			...newActiveExpander
 		});
-	}, [children]);
+	}
+	if (activeExpander === void 0) {
+		const initialState = getExpanderStateFromChildren();
+		if (initialState && Object.keys(initialState).length > 0) setActiveExpander(initialState);
+	}
 	return /* @__PURE__ */ jsx("ul", {
 		className: expanderListClasses,
 		ref,