@helsenorge/designsystem-react 2.16.1 → 3.0.0

package/components/ErrorWrapper/index.js

@@ -1,2 +1,2 @@
-import"../../ErrorWrapper.js";import{E as e,E as i}from"../../ErrorWrapper.js";import"react";import"classnames";import"./styles.module.scss";export{e as ErrorWrapper,i as default};
+import{E as o}from"../../ErrorWrapper.js";import{a as i}from"../../ErrorWrapper.js";import"react";import"classnames";import"./styles.module.scss";export{i as ErrorWrapper,o as default};
 //# sourceMappingURL=index.js.map

package/components/Expander/Expander.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
-import { SvgIcon } from '../Icons';
 import { PaletteNames } from '../../theme/palette';
+import { SvgIcon } from '../Icons';
 export declare enum ExpanderSize {
     small = "small",
     large = "large"
 }
-export declare type ExpanderColors = Extract<PaletteNames, 'banana' | 'blueberry' | 'cherry' | 'kiwi' | 'neutral' | 'plum' | 'white'>;
+export type ExpanderColors = Extract<PaletteNames, 'banana' | 'blueberry' | 'cherry' | 'kiwi' | 'neutral' | 'plum' | 'white'>;
 interface ExpanderProps {
     /** Sets the trigger title */
     title: string;

package/components/Expander/Expander.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Expander.d.ts","sourceRoot":"","sources":["../../../src/components/Expander/Expander.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAC3D,OAAa,EAAY,OAAO,EAAE,MAAM,UAAU,CAAC;AAGnD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAUnD,oBAAY,YAAY;IACtB,KAAK,UAAU;IACf,KAAK,UAAU;CAChB;AAED,oBAAY,cAAc,GAAG,OAAO,CAAC,YAAY,EAAE,QAAQ,GAAG,WAAW,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;AAE9H,UAAU,aAAa;IACrB,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,iEAAiE;IACjE,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,6EAA6E;IAC7E,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,8EAA8E;IAC9E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mFAAmF;IACnF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,mEAAmE;IACnE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,sGAAsG;IACtG,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA6HrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Expander.d.ts","sourceRoot":"","sources":["../../../src/components/Expander/Expander.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAQtC,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,OAAa,EAAY,OAAO,EAAE,MAAM,UAAU,CAAC;AAMnD,oBAAY,YAAY;IACtB,KAAK,UAAU;IACf,KAAK,UAAU;CAChB;AAED,MAAM,MAAM,cAAc,GAAG,OAAO,CAAC,YAAY,EAAE,QAAQ,GAAG,WAAW,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;AAE9H,UAAU,aAAa;IACrB,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,iEAAiE;IACjE,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,6EAA6E;IAC7E,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,8EAA8E;IAC9E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mFAAmF;IACnF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,mEAAmE;IACnE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,sGAAsG;IACtG,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAgHrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/components/Expander/componentdata.json

@@ -1 +1 @@
-{"props":{"title":{"defaultValue":null,"description":"Sets the trigger title","name":"title","parent":{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},"declarations":[{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"}],"required":true,"type":{"name":"string"}},"children":{"defaultValue":null,"description":"Sets the expanded content","name":"children","parent":{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},"declarations":[{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactNode"}},"size":{"defaultValue":null,"description":"Sets the size of the expander. Default: ExpanderSize.small","name":"size","parent":{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},"declarations":[{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"}],"required":false,"type":{"name":"enum","raw":"ExpanderSize","value":[{"value":"\"small\"","description":"","fullComment":"","tags":{}},{"value":"\"large\"","description":"","fullComment":"","tags":{}}]}},"color":{"defaultValue":null,"description":"Sets the background of the expander. Requires size=ExpanderSize.large.","name":"color","parent":{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},"declarations":[{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"}],"required":false,"type":{"name":"enum","raw":"ExpanderColors","value":[{"value":"\"banana\""},{"value":"\"blueberry\""},{"value":"\"cherry\""},{"value":"\"kiwi\""},{"value":"\"neutral\""},{"value":"\"plum\""},{"value":"\"white\""}]}},"svgIcon":{"defaultValue":null,"description":"Adds an icon to the expander trigger. Requires size=ExpanderSize.large.","name":"svgIcon","parent":{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},"declarations":[{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"}],"required":false,"type":{"name":"SvgIcon"}},"expanded":{"defaultValue":null,"description":"Opens or closes the expander","name":"expanded","parent":{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},"declarations":[{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"}],"required":false,"type":{"name":"boolean"}},"noNestedLine":{"defaultValue":null,"description":"Removes border to the left of the content. Requires size=ExpanderSize.small.","name":"noNestedLine","parent":{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},"declarations":[{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"}],"required":false,"type":{"name":"boolean"}},"sticky":{"defaultValue":null,"description":"Stick expander trigger to top of screen while scrolling down","name":"sticky","parent":{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},"declarations":[{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"}],"required":false,"type":{"name":"boolean"}},"onExpand":{"defaultValue":null,"description":"Called when expander is open/closed.","name":"onExpand","parent":{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},"declarations":[{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"}],"required":false,"type":{"name":"((isExpanded: boolean) => void)"}},"renderChildrenWhenClosed":{"defaultValue":null,"description":"Whether to render children when closed (in which case they are hidden with CSS). Default: false","name":"renderChildrenWhenClosed","parent":{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},"declarations":[{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"}],"required":false,"type":{"name":"boolean"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute on the expander button.","name":"testId","parent":{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},"declarations":[{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"}],"required":false,"type":{"name":"string"}}}}
+{"props":{"title":{"defaultValue":null,"description":"Sets the trigger title","name":"title","parent":{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},"declarations":[{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"}],"required":true,"type":{"name":"string"}},"children":{"defaultValue":null,"description":"Sets the expanded content","name":"children","parent":{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},"declarations":[{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},{"fileName":"s/node_modules/@types/react/index.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactNode"}},"size":{"defaultValue":null,"description":"Sets the size of the expander. Default: ExpanderSize.small","name":"size","parent":{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},"declarations":[{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"}],"required":false,"type":{"name":"enum","raw":"ExpanderSize","value":[{"value":"\"small\"","description":"","fullComment":"","tags":{}},{"value":"\"large\"","description":"","fullComment":"","tags":{}}]}},"color":{"defaultValue":null,"description":"Sets the background of the expander. Requires size=ExpanderSize.large.","name":"color","parent":{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},"declarations":[{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"}],"required":false,"type":{"name":"enum","raw":"ExpanderColors","value":[{"value":"\"banana\""},{"value":"\"blueberry\""},{"value":"\"cherry\""},{"value":"\"kiwi\""},{"value":"\"neutral\""},{"value":"\"plum\""},{"value":"\"white\""}]}},"svgIcon":{"defaultValue":null,"description":"Adds an icon to the expander trigger. Requires size=ExpanderSize.large.","name":"svgIcon","parent":{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},"declarations":[{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"}],"required":false,"type":{"name":"SvgIcon"}},"expanded":{"defaultValue":null,"description":"Opens or closes the expander","name":"expanded","parent":{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},"declarations":[{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"}],"required":false,"type":{"name":"boolean"}},"noNestedLine":{"defaultValue":null,"description":"Removes border to the left of the content. Requires size=ExpanderSize.small.","name":"noNestedLine","parent":{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},"declarations":[{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"}],"required":false,"type":{"name":"boolean"}},"sticky":{"defaultValue":null,"description":"Stick expander trigger to top of screen while scrolling down","name":"sticky","parent":{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},"declarations":[{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"}],"required":false,"type":{"name":"boolean"}},"onExpand":{"defaultValue":null,"description":"Called when expander is open/closed.","name":"onExpand","parent":{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},"declarations":[{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"}],"required":false,"type":{"name":"((isExpanded: boolean) => void)"}},"renderChildrenWhenClosed":{"defaultValue":null,"description":"Whether to render children when closed (in which case they are hidden with CSS). Default: false","name":"renderChildrenWhenClosed","parent":{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},"declarations":[{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"}],"required":false,"type":{"name":"boolean"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute on the expander button.","name":"testId","parent":{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"},"declarations":[{"fileName":"src/components/Expander/Expander.tsx","name":"ExpanderProps"}],"required":false,"type":{"name":"string"}}}}

package/components/Expander/index.js

@@ -1,2 +1,2 @@
-import n,{useState as O,useRef as b,useEffect as h}from"react";import{Icon as g}from"../Icons/Icon.js";import{ZIndex as P,AnalyticsId as k,IconSize as f}from"../../constants.js";import{useHover as U}from"../../hooks/useHover.js";import{usePrevious as Z}from"../../hooks/usePrevious.js";import e from"./styles.module.scss";import s from"classnames";import $ from"../Icons/ChevronDown.js";import S from"../Icons/ChevronUp.js";import{B as j}from"../../Button.js";import{useSticky as q}from"../../hooks/useSticky.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../../hooks/useIcons.js";import"../../hooks/useBreakpoint.js";import"../Button/styles.module.scss";import"../Icons/ArrowRight.js";import"../../hooks/useSize.js";import"../../utils/debounce.js";import"../../hooks/useLayoutEvent.js";var F=(o=>(o.small="small",o.large="large",o))(F||{});const Ee=o=>{const{title:u,children:z,size:r="small",color:v,svgIcon:i,expanded:d=!1,noNestedLine:w=!1,sticky:R=!1,testId:E,onExpand:c,renderChildrenWhenClosed:W=!1}=o,[t,m]=O(d),B=Z(t),y=b(null),l=b(null),{isHovered:_}=U(l),{isOutsideWindow:H,isLeavingWindow:p,offsetHeight:I,contentWidth:C}=q(y,l),a=R&&t&&H;h(()=>{d!==t&&m(d)},[d]),h(()=>{c&&t!==!!B&&c(t)},[t,c]);const N=x=>n.createElement("span",{className:s(e.expander__icon,e[`expander__icon--${x}`])},n.createElement(g,{svgIcon:t?S:$,size:f.XSmall,isHovered:_})),T=s(e.expander__trigger,e[`expander__trigger--${r}`],r==="large"&&e[`expander__trigger--${v||"neutral"}`],r==="large"&&i&&e["expander__trigger--icon"],t&&e["expander__trigger--expanded"],a&&!p&&e["expander__trigger--sticky"],a&&p&&e["expander__trigger--absolute"]),X=()=>n.createElement("button",{type:"button",className:T,style:{zIndex:_||a?P.ExpanderTrigger:void 0,width:a&&C?`${C}px`:void 0},"aria-expanded":t,ref:l,onClick:()=>m(!t),"data-testid":E,"data-analyticsid":k.Expander},r==="small"&&N("left"),i&&n.createElement("span",{className:s(e.expander__icon,e["expander__icon--left"])},n.createElement(g,{svgIcon:i,size:f.XSmall,isHovered:_})),u,r==="large"&&N("right")),L=s(e.expander__button,t&&e["expander__button--expanded"],a&&!p&&e["expander__button--sticky"],a&&p&&e["expander__button--absolute"]),A=()=>n.createElement(j,{variant:"borderless",className:L,"aria-expanded":t,ref:l,onClick:()=>m(!t),testId:E,"data-analyticsid":k.Expander},n.createElement(g,{svgIcon:t?S:$,size:f.XSmall}),u),D=()=>{if(!W&&!t)return null;const x=s(e.expander__content,e[`expander__content--${r}`],r==="large"&&e[`expander__content--${v||"neutral"}`],r==="large"&&i&&e["expander__content--icon"],t&&e["expander__content--expanded"],r==="small"&&!w&&e["expander__content--nested-line"]);return n.createElement("div",{className:x},z)};return n.createElement("div",{className:e.expander,ref:y,style:{paddingTop:a&&I?`${I}px`:void 0}},r==="large"?X():A(),D())};export{F as ExpanderSize,Ee as default};
+import n,{useRef as I}from"react";import i from"classnames";import{ZIndex as A,AnalyticsId as N,IconSize as m}from"../../constants.js";import{useExpand as D}from"../../hooks/useExpand.js";import{useHover as O}from"../../hooks/useHover.js";import{useSticky as U}from"../../hooks/useSticky.js";import{B as Z}from"../../Button.js";import{Icon as x}from"../Icons/Icon.js";import b from"../Icons/ChevronDown.js";import h from"../Icons/ChevronUp.js";import e from"./styles.module.scss";import"../../hooks/usePrevious.js";import"../../hooks/useLayoutEvent.js";import"../../utils/debounce.js";import"../../hooks/useBreakpoint.js";import"../../theme/grid.js";import"../../hooks/useIcons.js";import"../../hooks/useSize.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../utils/environment.js";import"../Icons/ArrowRight.js";import"../Button/styles.module.scss";import"../../hooks/useUuid.js";import"../../uuid.js";var j=(o=>(o.small="small",o.large="large",o))(j||{});const q=o=>{const{title:_,children:$,size:r="small",color:g,svgIcon:s,expanded:k=!1,noNestedLine:z=!1,sticky:S=!1,testId:f,onExpand:w,renderChildrenWhenClosed:R=!1}=o,[t,u]=D(k,w),v=I(null),d=I(null),{isHovered:p}=O(d),{isOutsideWindow:W,isLeavingWindow:l,offsetHeight:E,contentWidth:y}=U(v,d),a=S&&t&&W,C=c=>n.createElement("span",{className:i(e.expander__icon,e[`expander__icon--${c}`])},n.createElement(x,{svgIcon:t?h:b,size:m.XSmall,isHovered:p})),B=i(e.expander__trigger,e[`expander__trigger--${r}`],r==="large"&&e[`expander__trigger--${g||"neutral"}`],r==="large"&&s&&e["expander__trigger--icon"],t&&e["expander__trigger--expanded"],a&&!l&&e["expander__trigger--sticky"],a&&l&&e["expander__trigger--absolute"]),H=()=>n.createElement("button",{type:"button",className:B,style:{zIndex:p||a?A.ExpanderTrigger:void 0,width:a&&y?`${y}px`:void 0},"aria-expanded":t,ref:d,onClick:()=>u(!t),"data-testid":f,"data-analyticsid":N.Expander},r==="small"&&C("left"),s&&n.createElement("span",{className:i(e.expander__icon,e["expander__icon--left"])},n.createElement(x,{svgIcon:s,size:m.XSmall,isHovered:p})),_,r==="large"&&C("right")),T=i(e.expander__button,t&&e["expander__button--expanded"],a&&!l&&e["expander__button--sticky"],a&&l&&e["expander__button--absolute"]),X=()=>n.createElement(Z,{variant:"borderless",className:T,"aria-expanded":t,ref:d,onClick:()=>u(!t),testId:f,"data-analyticsid":N.Expander},n.createElement(x,{svgIcon:t?h:b,size:m.XSmall}),_),L=()=>{if(!R&&!t)return null;const c=i(e.expander__content,e[`expander__content--${r}`],r==="large"&&e[`expander__content--${g||"neutral"}`],r==="large"&&s&&e["expander__content--icon"],t&&e["expander__content--expanded"],r==="small"&&!z&&e["expander__content--nested-line"]);return n.createElement("div",{className:c},$)};return n.createElement("div",{className:e.expander,ref:v,style:{paddingTop:a&&E?`${E}px`:void 0}},r==="large"?H():X(),L())},ve=q;export{j as ExpanderSize,ve as default};
 //# sourceMappingURL=index.js.map

package/components/Expander/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Expander/Expander.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react';\nimport Icon, { IconSize, SvgIcon } from '../Icons';\nimport { useHover } from '../../hooks/useHover';\nimport { usePrevious } from '../../hooks/usePrevious';\nimport { PaletteNames } from '../../theme/palette';\n\nimport styles from './styles.module.scss';\nimport classNames from 'classnames';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport Button from '../Button';\nimport { useSticky } from '../../hooks/useSticky';\nimport { AnalyticsId, ZIndex } from '../../constants';\n\nexport enum ExpanderSize {\n  small = 'small',\n  large = 'large',\n}\n\nexport type ExpanderColors = Extract<PaletteNames, 'banana' | 'blueberry' | 'cherry' | 'kiwi' | 'neutral' | 'plum' | 'white'>;\n\ninterface ExpanderProps {\n  /** Sets the trigger title */\n  title: string;\n  /** Sets the expanded content */\n  children?: React.ReactNode;\n  /** Sets the size of the expander. Default: ExpanderSize.small */\n  size?: ExpanderSize;\n  /** Sets the background of the expander. Requires size=ExpanderSize.large. */\n  color?: ExpanderColors;\n  /** Adds an icon to the expander trigger. Requires size=ExpanderSize.large. */\n  svgIcon?: SvgIcon;\n  /** Opens or closes the expander */\n  expanded?: boolean;\n  /** Removes border to the left of the content. Requires size=ExpanderSize.small. */\n  noNestedLine?: boolean;\n  /** Stick expander trigger to top of screen while scrolling down */\n  sticky?: boolean;\n  /** Called when expander is open/closed. */\n  onExpand?: (isExpanded: boolean) => void;\n  /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n  renderChildrenWhenClosed?: boolean;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n}\n\nconst Expander: React.FC<ExpanderProps> = props => {\n  const {\n    title,\n    children,\n    size = ExpanderSize.small,\n    color,\n    svgIcon: icon,\n    expanded = false,\n    noNestedLine = false,\n    sticky = false,\n    testId,\n    onExpand,\n    renderChildrenWhenClosed = false,\n  } = props;\n  const [isExpanded, setIsExpanded] = useState<boolean>(expanded);\n  const previousIsExpanded = usePrevious(isExpanded);\n  const expanderRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const { isHovered } = useHover(triggerRef);\n  const { isOutsideWindow, isLeavingWindow, offsetHeight, contentWidth } = useSticky(expanderRef, triggerRef);\n\n  const isSticky = sticky && isExpanded && isOutsideWindow;\n\n  useEffect(() => {\n    if (expanded !== isExpanded) {\n      setIsExpanded(expanded);\n    }\n  }, [expanded]);\n\n  useEffect(() => {\n    if (onExpand && isExpanded !== !!previousIsExpanded) {\n      onExpand(isExpanded);\n    }\n  }, [isExpanded, onExpand]);\n\n  const renderChevron = (align: 'left' | 'right') => (\n    <span className={classNames(styles['expander__icon'], styles[`expander__icon--${align}`])}>\n      <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} size={IconSize.XSmall} isHovered={isHovered} />\n    </span>\n  );\n\n  const triggerClassName = classNames(\n    styles['expander__trigger'],\n    styles[`expander__trigger--${size}`],\n    size === ExpanderSize.large && styles[`expander__trigger--${color || 'neutral'}`],\n    size === ExpanderSize.large && icon && styles['expander__trigger--icon'],\n    isExpanded && styles['expander__trigger--expanded'],\n    isSticky && !isLeavingWindow && styles['expander__trigger--sticky'],\n    isSticky && isLeavingWindow && styles['expander__trigger--absolute']\n  );\n\n  const renderTrigger = () => (\n    <button\n      type=\"button\"\n      className={triggerClassName}\n      style={{\n        zIndex: isHovered || isSticky ? ZIndex.ExpanderTrigger : undefined,\n        width: isSticky && contentWidth ? `${contentWidth}px` : undefined,\n      }}\n      aria-expanded={isExpanded}\n      ref={triggerRef}\n      onClick={() => setIsExpanded(!isExpanded)}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Expander}\n    >\n      {size === ExpanderSize.small && renderChevron('left')}\n      {icon && (\n        <span className={classNames(styles['expander__icon'], styles['expander__icon--left'])}>\n          <Icon svgIcon={icon} size={IconSize.XSmall} isHovered={isHovered} />\n        </span>\n      )}\n      {title}\n      {size === ExpanderSize.large && renderChevron('right')}\n    </button>\n  );\n\n  const buttonClassName = classNames(\n    styles['expander__button'],\n    isExpanded && styles['expander__button--expanded'],\n    isSticky && !isLeavingWindow && styles['expander__button--sticky'],\n    isSticky && isLeavingWindow && styles['expander__button--absolute']\n  );\n\n  const renderButton = () => (\n    <Button\n      variant=\"borderless\"\n      className={buttonClassName}\n      aria-expanded={isExpanded}\n      ref={triggerRef}\n      onClick={() => setIsExpanded(!isExpanded)}\n      testId={testId}\n      data-analyticsid={AnalyticsId.Expander}\n    >\n      <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} size={IconSize.XSmall} />\n      {title}\n    </Button>\n  );\n\n  const renderContent = () => {\n    if (!renderChildrenWhenClosed && !isExpanded) {\n      return null;\n    }\n\n    const contentClassName = classNames(\n      styles['expander__content'],\n      styles[`expander__content--${size}`],\n      size === ExpanderSize.large && styles[`expander__content--${color || 'neutral'}`],\n      size === ExpanderSize.large && icon && styles['expander__content--icon'],\n      isExpanded && styles['expander__content--expanded'],\n      size === ExpanderSize.small && !noNestedLine && styles['expander__content--nested-line']\n    );\n\n    return <div className={contentClassName}>{children}</div>;\n  };\n\n  return (\n    <div\n      className={styles['expander']}\n      ref={expanderRef}\n      style={{ paddingTop: isSticky && offsetHeight ? `${offsetHeight}px` : undefined }}\n    >\n      {size === ExpanderSize.large ? renderTrigger() : renderButton()}\n      {renderContent()}\n    </div>\n  );\n};\n\nexport default Expander;\n"],"names":["ExpanderSize","Expander","props","title","children","size","color","icon","expanded","noNestedLine","sticky","testId","onExpand","renderChildrenWhenClosed","isExpanded","setIsExpanded","useState","previousIsExpanded","usePrevious","expanderRef","useRef","triggerRef","isHovered","useHover","isOutsideWindow","isLeavingWindow","offsetHeight","contentWidth","useSticky","isSticky","useEffect","renderChevron","align","React","classNames","styles","Icon","ChevronUp","ChevronDown","IconSize","triggerClassName","renderTrigger","ZIndex","AnalyticsId","buttonClassName","renderButton","Button","renderContent","contentClassName"],"mappings":"k+BAcY,IAAAA,GAAAA,IACVA,EAAA,MAAQ,QACRA,EAAA,MAAQ,QAFEA,IAAAA,GAAA,CAAA,CAAA,EAgCZ,MAAMC,GAA6CC,GAAA,CAC3C,KAAA,CACJ,MAAAC,EACA,SAAAC,EACA,KAAAC,EAAO,QACP,MAAAC,EACA,QAASC,EACT,SAAAC,EAAW,GACX,aAAAC,EAAe,GACf,OAAAC,EAAS,GACT,OAAAC,EACA,SAAAC,EACA,yBAAAC,EAA2B,EACzB,EAAAX,EACE,CAACY,EAAYC,CAAa,EAAIC,EAAkBR,CAAQ,EACxDS,EAAqBC,EAAYJ,CAAU,EAC3CK,EAAcC,EAAuB,IAAI,EACzCC,EAAaD,EAA0B,IAAI,EAC3C,CAAE,UAAAE,CAAA,EAAcC,EAASF,CAAU,EACnC,CAAE,gBAAAG,EAAiB,gBAAAC,EAAiB,aAAAC,EAAc,aAAAC,GAAiBC,EAAUT,EAAaE,CAAU,EAEpGQ,EAAWnB,GAAUI,GAAcU,EAEzCM,EAAU,IAAM,CACVtB,IAAaM,GACfC,EAAcP,CAAQ,CACxB,EACC,CAACA,CAAQ,CAAC,EAEbsB,EAAU,IAAM,CACVlB,GAAYE,IAAe,CAAC,CAACG,GAC/BL,EAASE,CAAU,CACrB,EACC,CAACA,EAAYF,CAAQ,CAAC,EAEnB,MAAAmB,EAAiBC,GACpBC,EAAA,cAAA,OAAA,CAAK,UAAWC,EAAWC,EAAO,eAAmBA,EAAO,mBAAmBH,IAAQ,CAAA,EACrFC,EAAA,cAAAG,EAAA,CAAK,QAAStB,EAAauB,EAAYC,EAAa,KAAMC,EAAS,OAAQ,UAAAjB,CAAsB,CAAA,CACpG,EAGIkB,EAAmBN,EACvBC,EAAO,kBACPA,EAAO,sBAAsB9B,KAC7BA,IAAS,SAAsB8B,EAAO,sBAAsB7B,GAAS,aACrED,IAAS,SAAsBE,GAAQ4B,EAAO,2BAC9CrB,GAAcqB,EAAO,+BACrBN,GAAY,CAACJ,GAAmBU,EAAO,6BACvCN,GAAYJ,GAAmBU,EAAO,8BAAA,EAGlCM,EAAgB,IACnBR,EAAA,cAAA,SAAA,CACC,KAAK,SACL,UAAWO,EACX,MAAO,CACL,OAAQlB,GAAaO,EAAWa,EAAO,gBAAkB,OACzD,MAAOb,GAAYF,EAAe,GAAGA,MAAmB,MAC1D,EACA,gBAAeb,EACf,IAAKO,EACL,QAAS,IAAMN,EAAc,CAACD,CAAU,EACxC,cAAaH,EACb,mBAAkBgC,EAAY,QAAA,EAE7BtC,IAAS,SAAsB0B,EAAc,MAAM,EACnDxB,GACE0B,EAAA,cAAA,OAAA,CAAK,UAAWC,EAAWC,EAAO,eAAmBA,EAAO,uBAAuB,CAAA,EACjFF,EAAA,cAAAG,EAAA,CAAK,QAAS7B,EAAM,KAAMgC,EAAS,OAAQ,UAAAjB,CAAA,CAAsB,CACpE,EAEDnB,EACAE,IAAS,SAAsB0B,EAAc,OAAO,CACvD,EAGIa,EAAkBV,EACtBC,EAAO,iBACPrB,GAAcqB,EAAO,8BACrBN,GAAY,CAACJ,GAAmBU,EAAO,4BACvCN,GAAYJ,GAAmBU,EAAO,6BAAA,EAGlCU,EAAe,IAClBZ,EAAA,cAAAa,EAAA,CACC,QAAQ,aACR,UAAWF,EACX,gBAAe9B,EACf,IAAKO,EACL,QAAS,IAAMN,EAAc,CAACD,CAAU,EACxC,OAAAH,EACA,mBAAkBgC,EAAY,QAAA,EAE7BV,EAAA,cAAAG,EAAA,CAAK,QAAStB,EAAauB,EAAYC,EAAa,KAAMC,EAAS,MAAA,CAAQ,EAC3EpC,CACH,EAGI4C,EAAgB,IAAM,CACtB,GAAA,CAAClC,GAA4B,CAACC,EACzB,OAAA,KAGT,MAAMkC,EAAmBd,EACvBC,EAAO,kBACPA,EAAO,sBAAsB9B,KAC7BA,IAAS,SAAsB8B,EAAO,sBAAsB7B,GAAS,aACrED,IAAS,SAAsBE,GAAQ4B,EAAO,2BAC9CrB,GAAcqB,EAAO,+BACrB9B,IAAS,SAAsB,CAACI,GAAgB0B,EAAO,iCAAA,EAGzD,OAAQF,EAAA,cAAA,MAAA,CAAI,UAAWe,CAAA,EAAmB5C,CAAS,CAAA,EAGrD,OACG6B,EAAA,cAAA,MAAA,CACC,UAAWE,EAAO,SAClB,IAAKhB,EACL,MAAO,CAAE,WAAYU,GAAYH,EAAe,GAAGA,MAAmB,MAAU,CAAA,EAE/ErB,IAAS,QAAqBoC,EAAA,EAAkBI,EAAa,EAC7DE,GACH,CAEJ"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Expander/Expander.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { useHover } from '../../hooks/useHover';\nimport { useSticky } from '../../hooks/useSticky';\nimport { PaletteNames } from '../../theme/palette';\nimport Button from '../Button';\nimport Icon, { IconSize, SvgIcon } from '../Icons';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\n\nimport styles from './styles.module.scss';\n\nexport enum ExpanderSize {\n  small = 'small',\n  large = 'large',\n}\n\nexport type ExpanderColors = Extract<PaletteNames, 'banana' | 'blueberry' | 'cherry' | 'kiwi' | 'neutral' | 'plum' | 'white'>;\n\ninterface ExpanderProps {\n  /** Sets the trigger title */\n  title: string;\n  /** Sets the expanded content */\n  children?: React.ReactNode;\n  /** Sets the size of the expander. Default: ExpanderSize.small */\n  size?: ExpanderSize;\n  /** Sets the background of the expander. Requires size=ExpanderSize.large. */\n  color?: ExpanderColors;\n  /** Adds an icon to the expander trigger. Requires size=ExpanderSize.large. */\n  svgIcon?: SvgIcon;\n  /** Opens or closes the expander */\n  expanded?: boolean;\n  /** Removes border to the left of the content. Requires size=ExpanderSize.small. */\n  noNestedLine?: boolean;\n  /** Stick expander trigger to top of screen while scrolling down */\n  sticky?: boolean;\n  /** Called when expander is open/closed. */\n  onExpand?: (isExpanded: boolean) => void;\n  /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n  renderChildrenWhenClosed?: boolean;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n}\n\nconst Expander: React.FC<ExpanderProps> = props => {\n  const {\n    title,\n    children,\n    size = ExpanderSize.small,\n    color,\n    svgIcon: icon,\n    expanded = false,\n    noNestedLine = false,\n    sticky = false,\n    testId,\n    onExpand,\n    renderChildrenWhenClosed = false,\n  } = props;\n  const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n  const expanderRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const { isHovered } = useHover(triggerRef);\n  const { isOutsideWindow, isLeavingWindow, offsetHeight, contentWidth } = useSticky(expanderRef, triggerRef);\n\n  const isSticky = sticky && isExpanded && isOutsideWindow;\n\n  const renderChevron = (align: 'left' | 'right') => (\n    <span className={classNames(styles['expander__icon'], styles[`expander__icon--${align}`])}>\n      <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} size={IconSize.XSmall} isHovered={isHovered} />\n    </span>\n  );\n\n  const triggerClassName = classNames(\n    styles['expander__trigger'],\n    styles[`expander__trigger--${size}`],\n    size === ExpanderSize.large && styles[`expander__trigger--${color || 'neutral'}`],\n    size === ExpanderSize.large && icon && styles['expander__trigger--icon'],\n    isExpanded && styles['expander__trigger--expanded'],\n    isSticky && !isLeavingWindow && styles['expander__trigger--sticky'],\n    isSticky && isLeavingWindow && styles['expander__trigger--absolute']\n  );\n\n  const renderTrigger = () => (\n    <button\n      type=\"button\"\n      className={triggerClassName}\n      style={{\n        zIndex: isHovered || isSticky ? ZIndex.ExpanderTrigger : undefined,\n        width: isSticky && contentWidth ? `${contentWidth}px` : undefined,\n      }}\n      aria-expanded={isExpanded}\n      ref={triggerRef}\n      onClick={() => setIsExpanded(!isExpanded)}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Expander}\n    >\n      {size === ExpanderSize.small && renderChevron('left')}\n      {icon && (\n        <span className={classNames(styles['expander__icon'], styles['expander__icon--left'])}>\n          <Icon svgIcon={icon} size={IconSize.XSmall} isHovered={isHovered} />\n        </span>\n      )}\n      {title}\n      {size === ExpanderSize.large && renderChevron('right')}\n    </button>\n  );\n\n  const buttonClassName = classNames(\n    styles['expander__button'],\n    isExpanded && styles['expander__button--expanded'],\n    isSticky && !isLeavingWindow && styles['expander__button--sticky'],\n    isSticky && isLeavingWindow && styles['expander__button--absolute']\n  );\n\n  const renderButton = () => (\n    <Button\n      variant=\"borderless\"\n      className={buttonClassName}\n      aria-expanded={isExpanded}\n      ref={triggerRef}\n      onClick={() => setIsExpanded(!isExpanded)}\n      testId={testId}\n      data-analyticsid={AnalyticsId.Expander}\n    >\n      <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} size={IconSize.XSmall} />\n      {title}\n    </Button>\n  );\n\n  const renderContent = () => {\n    if (!renderChildrenWhenClosed && !isExpanded) {\n      return null;\n    }\n\n    const contentClassName = classNames(\n      styles['expander__content'],\n      styles[`expander__content--${size}`],\n      size === ExpanderSize.large && styles[`expander__content--${color || 'neutral'}`],\n      size === ExpanderSize.large && icon && styles['expander__content--icon'],\n      isExpanded && styles['expander__content--expanded'],\n      size === ExpanderSize.small && !noNestedLine && styles['expander__content--nested-line']\n    );\n\n    return <div className={contentClassName}>{children}</div>;\n  };\n\n  return (\n    <div\n      className={styles['expander']}\n      ref={expanderRef}\n      style={{ paddingTop: isSticky && offsetHeight ? `${offsetHeight}px` : undefined }}\n    >\n      {size === ExpanderSize.large ? renderTrigger() : renderButton()}\n      {renderContent()}\n    </div>\n  );\n};\n\nexport default Expander;\n"],"names":["ExpanderSize","Expander","props","title","children","size","color","icon","expanded","noNestedLine","sticky","testId","onExpand","renderChildrenWhenClosed","isExpanded","setIsExpanded","useExpand","expanderRef","useRef","triggerRef","isHovered","useHover","isOutsideWindow","isLeavingWindow","offsetHeight","contentWidth","useSticky","isSticky","renderChevron","align","React","classNames","styles","Icon","ChevronUp","ChevronDown","IconSize","triggerClassName","renderTrigger","ZIndex","AnalyticsId","buttonClassName","renderButton","Button","renderContent","contentClassName","Expander$1"],"mappings":"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"}

package/components/ExpanderHierarchy/Expander.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { ExpanderHierarchyCommonProps } from './ExpanderHierarchy';
+export interface ExpanderProps extends ExpanderHierarchyCommonProps {
+    /** Sets the trigger title */
+    title: string;
+    /** Opens or closes the expander */
+    expanded?: boolean;
+    /** Called when expander is open/closed. */
+    onExpand?: (isExpanded: boolean) => void;
+    /** Sets the expanded content */
+    children?: React.ReactNode;
+    /** Sets the data-testid attribute on the expander button. */
+    testId?: string;
+}
+export type ExpanderType = React.FC<ExpanderProps>;
+declare const Expander: ExpanderType;
+export default Expander;
+//# sourceMappingURL=Expander.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Expander.d.ts","sourceRoot":"","sources":["../../../src/components/ExpanderHierarchy/Expander.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAA0B,EAAE,4BAA4B,EAA0B,MAAM,qBAAqB,CAAC;AAM9G,MAAM,WAAW,aAAc,SAAQ,4BAA4B;IACjE,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,gCAAgC;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC;AAEnD,QAAA,MAAM,QAAQ,EAAE,YA8Bf,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/components/ExpanderHierarchy/ExpanderButton.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ExpanderHierarchyCommonProps } from '../ExpanderHierarchy';
+interface ExpanderButtonProps extends ExpanderHierarchyCommonProps {
+    expanded: boolean;
+    onExpand?: (isExpanded: boolean) => void;
+    children: string;
+    testId?: string;
+}
+declare const ExpanderButton: React.FC<ExpanderButtonProps>;
+export default ExpanderButton;
+//# sourceMappingURL=ExpanderButton.d.ts.map

package/components/ExpanderHierarchy/ExpanderButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpanderButton.d.ts","sourceRoot":"","sources":["../../../src/components/ExpanderHierarchy/ExpanderButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAE,4BAA4B,EAAE,MAAM,sBAAsB,CAAC;AAOpE,UAAU,mBAAoB,SAAQ,4BAA4B;IAChE,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA0CjD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/components/ExpanderHierarchy/ExpanderHierarchy.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { ExpanderType } from './Expander';
+import { HeadingTags } from './utils';
+export interface ExpanderHierarchyCommonProps {
+    /** Changes the underlying element of the expander title. Default: h2. */
+    htmlMarkup?: HeadingTags;
+    /** Expand all children when printing. */
+    print?: boolean;
+    /** Expander nesting level. Should not be set manually. */
+    level?: number;
+}
+export interface ExpanderHierarchyProps extends ExpanderHierarchyCommonProps {
+    children: React.ReactNode;
+    /** Sets the data-testid attribute on the expander list. */
+    testId?: string;
+}
+export interface ExpanderHierarchyCompound extends React.FC<ExpanderHierarchyProps> {
+    Expander: ExpanderType;
+}
+declare const ExpanderHierarchy: ExpanderHierarchyCompound;
+export default ExpanderHierarchy;
+//# sourceMappingURL=ExpanderHierarchy.d.ts.map

package/components/ExpanderHierarchy/ExpanderHierarchy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpanderHierarchy.d.ts","sourceRoot":"","sources":["../../../src/components/ExpanderHierarchy/ExpanderHierarchy.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAiB,EAAiB,YAAY,EAAE,MAAM,YAAY,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAMtC,MAAM,WAAW,4BAA4B;IAC3C,yEAAyE;IACzE,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,yCAAyC;IACzC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,sBAAuB,SAAQ,4BAA4B;IAC1E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,2DAA2D;IAC3D,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,yBAA0B,SAAQ,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAAC;IACjF,QAAQ,EAAE,YAAY,CAAC;CACxB;AAED,QAAA,MAAM,iBAAiB,EAAE,yBAoBxB,CAAC;AAIF,eAAe,iBAAiB,CAAC"}

package/components/ExpanderHierarchy/componentdata.json

@@ -0,0 +1 @@
+{"props":{}}

package/components/ExpanderHierarchy/expander.module.scss

@@ -0,0 +1,147 @@
+@import '../../scss/breakpoints';
+@import '../../scss/palette';
+@import '../../scss/spacers';
+@import '../../scss/title';
+
+.expander {
+  $item: &;
+  @media (prefers-reduced-motion: no-preference) {
+    animation: fadeIn 150ms linear forwards;
+  }
+
+  &:first-of-type {
+    border-top: 1px solid $neutral500;
+  }
+
+  &__button {
+    all: unset;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    cursor: pointer;
+    background-color: transparent;
+    border-bottom: 1px solid $neutral500;
+    padding: getSpacer(xs) 0 getSpacer(xs) 0;
+
+    @media (min-width: map-get($grid-breakpoints, lg)) {
+      flex-direction: row-reverse;
+      justify-content: start;
+      padding: getSpacer(s) getSpacer(s) getSpacer(s) getSpacer(2xs);
+    }
+
+    &:hover,
+    &:focus {
+      background-color: $neutral100;
+    }
+
+    &:focus {
+      text-decoration: underline;
+      outline: getSpacer(4xs) solid $black;
+    }
+
+    &[aria-expanded='true'] {
+      background-color: $neutral100;
+      border-bottom: none;
+
+      + #{$item}__content {
+        display: block;
+      }
+    }
+
+    @media print {
+      &--print {
+        background-color: $neutral100;
+        + #{$item}__content {
+          display: block;
+        }
+      }
+    }
+
+    &--2-and-lower {
+      padding: getSpacer(2xs) 0 getSpacer(2xs) 0;
+      @media (min-width: map-get($grid-breakpoints, lg)) {
+        padding: getSpacer(xs) getSpacer(s) getSpacer(xs) getSpacer(2xs);
+      }
+    }
+  }
+
+  &__title {
+    margin: 0;
+
+    &--1 {
+      @include title2;
+    }
+
+    &--2 {
+      @include title3;
+    }
+
+    &--3 {
+      @include title4;
+    }
+
+    &--4-and-lower {
+      @include title5;
+    }
+  }
+
+  &__content {
+    display: none;
+    border-bottom: 1px solid $neutral500;
+    padding-top: getSpacer(m);
+    padding-left: getSpacer(2xs);
+    padding-bottom: getSpacer(m);
+
+    &--1 {
+      padding-top: getSpacer(xl);
+    }
+
+    &--1,
+    &--2 {
+      @media (min-width: map-get($grid-breakpoints, lg)) {
+        padding-left: getSpacer(2xl);
+      }
+    }
+
+    &--3-and-lower {
+      @media (min-width: map-get($grid-breakpoints, lg)) {
+        padding-left: getSpacer(xl);
+      }
+    }
+  }
+
+  &__icon {
+    margin-left: getSpacer(s);
+
+    &--2-and-lower {
+      margin-left: getSpacer(xs);
+    }
+
+    @media (min-width: map-get($grid-breakpoints, lg)) {
+      margin-left: 0;
+      margin-right: getSpacer(s);
+    }
+
+    &--3-and-lower {
+      @media (min-width: map-get($grid-breakpoints, lg)) {
+        margin-right: getSpacer(xs);
+      }
+    }
+  }
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+    max-height: 0;
+  }
+  99% {
+    max-height: 24rem;
+  }
+  100% {
+    opacity: 1;
+    max-height: none;
+  }
+}

package/components/ExpanderHierarchy/expander.module.scss.d.ts

@@ -0,0 +1,25 @@
+export type Styles = {
+  expander: string;
+  expander__button: string;
+  'expander__button--2-and-lower': string;
+  'expander__button--print': string;
+  expander__content: string;
+  'expander__content--1': string;
+  'expander__content--2': string;
+  'expander__content--3-and-lower': string;
+  expander__icon: string;
+  'expander__icon--2-and-lower': string;
+  'expander__icon--3-and-lower': string;
+  expander__title: string;
+  'expander__title--1': string;
+  'expander__title--2': string;
+  'expander__title--3': string;
+  'expander__title--4-and-lower': string;
+  fadeIn: string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/components/ExpanderHierarchy/index.d.ts

@@ -0,0 +1,4 @@
+import ExpanderHierarchy from './ExpanderHierarchy';
+export * from './ExpanderHierarchy';
+export default ExpanderHierarchy;
+//# sourceMappingURL=index.d.ts.map

package/components/ExpanderHierarchy/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ExpanderHierarchy/index.ts"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,MAAM,qBAAqB,CAAC;AACpD,cAAc,qBAAqB,CAAC;AACpC,eAAe,iBAAiB,CAAC"}

package/components/ExpanderHierarchy/index.js

@@ -0,0 +1,2 @@
+import n from"react";import i from"classnames";import{AnalyticsId as l,IconSize as $}from"../../constants.js";import{useExpand as b}from"../../hooks/useExpand.js";import{useHover as g}from"../../hooks/useHover.js";import{Icon as I}from"../Icons/Icon.js";import k from"../Icons/ChevronDown.js";import z from"../Icons/ChevronUp.js";import t from"./expander.module.scss";import{isComponent as _}from"../../utils/component.js";import h from"./styles.module.scss";import"../../hooks/usePrevious.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";const B=({htmlMarkup:a="h2",level:e=1,print:r,expanded:c,onExpand:d,children:p,testId:o})=>{const{hoverRef:m,isHovered:x}=g(),[s,f]=b(c,d),y=()=>{f(!s)},C=a,w=i(t.expander__button,e>1&&t["expander__button--2-and-lower"],r&&t["expander__button--print"]),H=i(t.expander__title,e<=3&&t[`expander__title--${e}`],e>3&&t["expander__title--4-and-lower"]),N=i(t.expander__icon,e>1&&t["expander__icon--2-and-lower"],e>2&&t["expander__icon--3-and-lower"]);return n.createElement("button",{type:"button",onClick:y,className:w,"aria-expanded":s,ref:m,"data-testid":o,"data-analyticsid":l.ExpanderHierarchyExpander},n.createElement(C,{className:H},p),n.createElement(I,{svgIcon:s?z:k,isHovered:x,className:N,size:$.XSmall}))},R=B,S=a=>{switch(a){case"h2":return"h3";case"h3":return"h4";case"h4":return"h5";case"h5":return"h6";case"h6":return"h6";default:return"h2"}},T=({title:a,htmlMarkup:e="h2",level:r=1,print:c,expanded:d=!1,onExpand:p,children:o,testId:m})=>{const x=i(t.expander__content,r<=2&&t[`expander__content--${r}`],r>2&&t["expander__content--3-and-lower"]);return n.createElement("li",{className:t.expander},n.createElement(R,{htmlMarkup:e,level:r,print:c,expanded:d,onExpand:p,testId:m},a),n.createElement("div",{className:x},n.Children.map(o,s=>_(s,A)?n.cloneElement(s,{htmlMarkup:S(e),level:r+1,print:c}):s)))},u=T,E=({htmlMarkup:a="h2",level:e=1,print:r,children:c,testId:d})=>{const p=i(h.expanderhierarchy,h[`expanderhierarchy--${e}`],e>2&&h["expanderhierarchy--3-and-lower"]);return n.createElement("ul",{className:p,"data-testid":d,"data-analyticsid":l.ExpanderHierarchy},n.Children.map(c,o=>_(o,u)?n.cloneElement(o,{htmlMarkup:a,level:e,print:r}):o))};E.Expander=u;const A=E;export{A as default};
+//# sourceMappingURL=index.js.map

package/components/ExpanderHierarchy/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/ExpanderHierarchy/ExpanderButton.tsx","../../../src/components/ExpanderHierarchy/utils.ts","../../../src/components/ExpanderHierarchy/Expander.tsx","../../../src/components/ExpanderHierarchy/ExpanderHierarchy.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { useHover } from '../../hooks/useHover';\nimport { ExpanderHierarchyCommonProps } from '../ExpanderHierarchy';\nimport Icon, { IconSize } from '../Icons';\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 { hoverRef, isHovered } = useHover<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 <= 3 && styles[`expander__title--${level}`],\n    level > 3 && styles[`expander__title--4-and-lower`]\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    <button\n      type=\"button\"\n      onClick={handleClick}\n      className={buttonClasses}\n      aria-expanded={isExpanded}\n      ref={hoverRef}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.ExpanderHierarchyExpander}\n    >\n      <CustomTag className={titleClasses}>{children}</CustomTag>\n      <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} isHovered={isHovered} className={iconClasses} size={IconSize.XSmall} />\n    </button>\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 ExpanderButton from './ExpanderButton';\nimport ExpanderHierarchy, { ExpanderHierarchyCommonProps, ExpanderHierarchyProps } 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}\n\nexport type ExpanderType = React.FC<ExpanderProps>;\n\nconst Expander: ExpanderType = ({\n  title,\n  htmlMarkup = 'h2',\n  level = 1,\n  print,\n  expanded = false,\n  onExpand,\n  children,\n  testId,\n}: ExpanderProps) => {\n  const contentClasses = classNames(\n    styles.expander__content,\n    level <= 2 && styles[`expander__content--${level}`],\n    level > 2 && styles[`expander__content--3-and-lower`]\n  );\n\n  return (\n    <li className={styles.expander}>\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 Expander, { ExpanderProps, ExpanderType } from './Expander';\nimport { HeadingTags } from './utils';\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    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"],"names":["ExpanderButton","htmlMarkup","level","print","expanded","onExpand","children","testId","hoverRef","isHovered","useHover","isExpanded","setIsExpanded","useExpand","handleClick","CustomTag","buttonClasses","classNames","styles","titleClasses","iconClasses","React","AnalyticsId","Icon","ChevronUp","ChevronDown","IconSize","ExpanderButton$1","getHeadingTag","Expander","title","contentClasses","isComponent","child","ExpanderHierarchy","Expander$1","listClasses","ExpanderHierarchy$1"],"mappings":"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"}

package/components/ExpanderHierarchy/styles.module.scss

@@ -0,0 +1,17 @@
+@import '../../scss/_palette.scss';
+@import '../../scss/_spacers.scss';
+@import '../../scss/_title.scss';
+
+.expanderhierarchy {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+
+  &--2 {
+    margin-top: getSpacer(xl);
+  }
+
+  &--3-and-lower {
+    margin-top: getSpacer(m);
+  }
+}

package/components/ExpanderHierarchy/styles.module.scss.d.ts

@@ -0,0 +1,11 @@
+export type Styles = {
+  expanderhierarchy: string;
+  'expanderhierarchy--2': string;
+  'expanderhierarchy--3-and-lower': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/components/ExpanderHierarchy/utils.d.ts

@@ -0,0 +1,3 @@
+export type HeadingTags = 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export declare const getHeadingTag: (htmlMarkup?: HeadingTags) => HeadingTags;
+//# sourceMappingURL=utils.d.ts.map

package/components/ExpanderHierarchy/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/ExpanderHierarchy/utils.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3D,eAAO,MAAM,aAAa,gBAAiB,WAAW,KAAG,WAexD,CAAC"}

package/components/ExpanderList/ExpanderList.d.ts

@@ -2,14 +2,14 @@ import React from 'react';
 import { PaletteNames } from '../../theme/palette';
 import { ListHeaderType } from '../ListHeader/ListHeader';
 import { TitleTags } from '../Title';
-export declare type ExpanderListColors = PaletteNames;
+export type ExpanderListColors = PaletteNames;
 export interface ExpanderType extends React.ForwardRefExoticComponent<ExpanderProps & React.RefAttributes<HTMLLIElement>> {
     ListHeader?: ListHeaderType;
 }
 export interface ExpanderListCompound extends React.ForwardRefExoticComponent<ExpanderListProps & React.RefAttributes<HTMLUListElement>> {
     Expander: ExpanderType;
 }
-export declare type ExpanderListVariant = 'line' | 'outline' | 'fill';
+export type ExpanderListVariant = 'line' | 'outline' | 'fill';
 interface ExpanderListProps {
     /** Toggles accordion functionality for the expanders. */
     accordion?: boolean;
@@ -39,8 +39,8 @@ interface ExpanderListProps {
     /** Sets visual priority */
     variant?: ExpanderListVariant;
 }
-declare type Modify<T, R> = Omit<T, keyof R> & R;
-declare type ExpanderProps = Modify<React.HTMLAttributes<HTMLButtonElement>, {
+type Modify<T, R> = Omit<T, keyof R> & R;
+type ExpanderProps = Modify<React.HTMLAttributes<HTMLButtonElement>, {
     id?: string;
     title: JSX.Element | string;
     /** Changes the underlying element of the title. Default: span*/

package/components/ExpanderList/ExpanderList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExpanderList.d.ts","sourceRoot":"","sources":["../../../src/components/ExpanderList/ExpanderList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAanD,OAAO,EAAE,cAAc,EAAoB,MAAM,0BAA0B,CAAC;AAG5E,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAErC,oBAAY,kBAAkB,GAAG,YAAY,CAAC;AAC9C,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,yBAAyB,CAAC,aAAa,GAAG,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;IACvH,UAAU,CAAC,EAAE,cAAc,CAAC;CAC7B;AAED,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,yBAAyB,CAAC,iBAAiB,GAAG,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IACtI,QAAQ,EAAE,YAAY,CAAC;CACxB;AAED,oBAAY,mBAAmB,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;AAE9D,UAAU,iBAAiB;IACzB,yDAAyD;IACzD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sDAAsD;IACtD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gCAAgC;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,wCAAwC;IACxC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uDAAuD;IACvD,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,6BAA6B;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,wCAAwC;IACxC,qGAAqG;IACrG,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,sGAAsG;IACtG,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,sDAAsD;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mEAAmE;IACnE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,mBAAmB,CAAC;CAC/B;AAED,aAAK,MAAM,CAAC,CAAC,EAAE,CAAC,IAAI,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC;AAEzC,aAAK,aAAa,GAAG,MAAM,CACzB,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,EACvC;IACE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAC5B,gEAAgE;IAChE,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACjF,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C,CACF,GACC,IAAI,CAAC,iBAAiB,EAAE,0BAA0B,GAAG,QAAQ,GAAG,SAAS,CAAC,CAAC;AAuG7E,eAAO,MAAM,YAAY,sBA+FC,CAAC;AAK3B,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ExpanderList.d.ts","sourceRoot":"","sources":["../../../src/components/ExpanderList/ExpanderList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAS3D,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAKnD,OAAO,EAAE,cAAc,EAAoB,MAAM,0BAA0B,CAAC;AAC5E,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAIrC,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC;AAC9C,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,yBAAyB,CAAC,aAAa,GAAG,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;IACvH,UAAU,CAAC,EAAE,cAAc,CAAC;CAC7B;AAED,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,yBAAyB,CAAC,iBAAiB,GAAG,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IACtI,QAAQ,EAAE,YAAY,CAAC;CACxB;AAED,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;AAE9D,UAAU,iBAAiB;IACzB,yDAAyD;IACzD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sDAAsD;IACtD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gCAAgC;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,wCAAwC;IACxC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uDAAuD;IACvD,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,6BAA6B;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,wCAAwC;IACxC,qGAAqG;IACrG,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,sGAAsG;IACtG,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,sDAAsD;IACtD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mEAAmE;IACnE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,mBAAmB,CAAC;CAC/B;AAED,KAAK,MAAM,CAAC,CAAC,EAAE,CAAC,IAAI,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC;AAEzC,KAAK,aAAa,GAAG,MAAM,CACzB,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,EACvC;IACE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC;IAC5B,gEAAgE;IAChE,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACjF,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C,CACF,GACC,IAAI,CAAC,iBAAiB,EAAE,0BAA0B,GAAG,QAAQ,GAAG,SAAS,CAAC,CAAC;AA0F7E,eAAO,MAAM,YAAY,sBA+FC,CAAC;AAM3B,eAAe,YAAY,CAAC"}

package/components/ExpanderList/index.js

@@ -1,2 +1,2 @@
-import o,{useState as V,useRef as O,useEffect as k}from"react";import{useHover as M}from"../../hooks/useHover.js";import{usePrevious as Z}from"../../hooks/usePrevious.js";import{isElementInViewport as q}from"../../utils/viewport.js";import g from"classnames";import i from"./styles.module.scss";import{AnalyticsId as U,ZIndex as F}from"../../constants.js";import{useUuid as G}from"../../hooks/useUuid.js";import{useSticky as K}from"../../hooks/useSticky.js";import{mergeRefs as Q}from"../../utils/refs.js";import{r as X}from"../../ListHeader.js";import Y from"../Icons/ChevronUp.js";import v from"../Icons/ChevronDown.js";import"../../uuid.js";import"../../utils/environment.js";import"../../hooks/useLayoutEvent.js";import"../../utils/debounce.js";import"../../Avatar.js";import"../Icons/Icon.js";import"../Icons/Check.js";import"../Avatar/styles.module.scss";import"../../theme/palette.js";import"../../Badge.js";import"../Badge/styles.module.scss";import"../../ListHeaderText.js";import"../../StatusDot.js";import"../../theme/grid.js";import"../../hooks/useBreakpoint.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/spacers.js";import"../Icons/Attachment.js";import"../Icons/Group.js";import"../Icons/NoAccess.js";import"../Icons/Undo.js";import"../StatusDot/styles.module.scss";import"../ListHeader/styles.module.scss";import"../../utils/component.js";const B=o.forwardRef((p,w)=>{const{id:m,children:L,padding:N=!0,color:f="neutral",className:R="",icon:$,large:y=!1,title:l,titleHtmlMarkup:b="span",expanded:c=!1,sticky:H,testId:W,handleExpanderClick:T,onExpand:d,renderChildrenWhenClosed:u,variant:a="line"}=p,[r,_]=V(c),j=Z(r),h=O(null),E=O(null),{isHovered:I}=M(E),{isOutsideWindow:C,isLeavingWindow:n,offsetHeight:e,contentWidth:t}=K(h,E),s=H&&r&&C,x=typeof l=="object",A=g(R,{[i["expander-list__item--"+a]]:a,[i["expander-list__item--jsx"]]:x}),z=g(i["expander-list-link"],i[`expander-list-link--${f}`],{[i["expander-list-link--fill"]]:a==="fill",[i["expander-list-link--closed"]]:!r,[i["expander-list-link--large"]]:y,[i["expander-list-link--jsx"]]:x,[i["expander-list-link--sticky"]]:s&&!n,[i["expander-list-link--absolute"]]:s&&n});k(()=>{c!==r&&_(c)},[c]),k(()=>{d&&r!==!!j&&d(r)},[r,d]);const D=()=>{if(!u&&!r)return null;const J=g(i["expander-list-link__main-content"],r&&i["expander-list-link__main-content--expanded"],N?i["expander-list-link__main-content--padding"]:"");return o.createElement("div",{className:J},L)};return o.createElement("li",{className:A,ref:Q([w,h]),style:{paddingTop:s&&e?`${e}px`:void 0}},o.createElement("button",{type:"button",id:m,onClick:T,"data-testid":W,"data-analyticsid":U.ExpanderListExpander,className:z,ref:E,"aria-expanded":r,style:{zIndex:I||s?F.ExpanderTrigger:void 0,width:s&&t?`${t}px`:void 0}},X(l,b,r?Y:v,I,y?"large":"medium",$)),D())}),P=p=>o.isValidElement(p)&&p.type===B,S=o.forwardRef((p,w)=>{const{children:m,childPadding:L=!0,large:N,isOpen:f=!1,renderChildrenWhenClosed:R=!1,color:$,className:y="",accordion:l=!1,topBorder:b=!0,bottomBorder:c=!0,sticky:H=!1,testId:W,variant:T}=p,[d,u]=V(),[a,r]=V(),_=G(),j=o.Children.count(m),h=g(i["expander-list"],y);function E(n,e){u(t=>l?{[e]:!(t!=null&&t[e])}:{...t,[e]:!(t!=null&&t[e])}),r(n.currentTarget)}const I=n=>g(i["expander-list__item"],{[i["expander-list__item--top"]]:n===0&&b,[i["expander-list__item--no-bottom"]]:n===j-1&&!c}),C=n=>`${_}-${n}`;return k(()=>{l&&a&&!q(a)&&a.scrollIntoView()},[l,a]),k(()=>{if(f){const n=C(0);u(e=>l?{[n]:!(e!=null&&e[n])}:{...e,[n]:!(e!=null&&e[n])})}},[f]),k(()=>{var n;if(!f){const e=(n=o.Children.map(m,t=>{if(P(t))return t}))==null?void 0:n.reduce((t,s,x)=>(typeof s.props.expanded<"u"&&(t[C(x)]=s.props.expanded),t),{});u({...d,...e})}},[m]),o.createElement("ul",{className:h,ref:w,"data-testid":W,"data-analyticsid":U.ExpanderList},o.Children.map(m,(n,e)=>{if(P(n)){const t=C(e),s=d==null?void 0:d[t],x=I(e);return o.cloneElement(n,{id:t,key:e,expanded:s,padding:L,color:$,large:N,sticky:H,"aria-expanded":s,className:x,handleExpanderClick:A=>E(A,`${_}-${e}`),renderChildrenWhenClosed:R,variant:T})}return n}))});S.Expander=B;B.displayName="ExpanderList.Expander";export{S as ExpanderList,S as default};
+import r,{useRef as O,useState as U,useEffect as A}from"react";import k from"classnames";import{AnalyticsId as D,ZIndex as M}from"../../constants.js";import{useExpand as P}from"../../hooks/useExpand.js";import{useHover as Z}from"../../hooks/useHover.js";import{useSticky as q}from"../../hooks/useSticky.js";import{useUuid as F}from"../../hooks/useUuid.js";import{mergeRefs as G}from"../../utils/refs.js";import{isElementInViewport as K}from"../../utils/viewport.js";import Q from"../Icons/ChevronDown.js";import X from"../Icons/ChevronUp.js";import{r as Y}from"../../ListHeader.js";import i from"./styles.module.scss";import"../../hooks/usePrevious.js";import"../../hooks/useLayoutEvent.js";import"../../utils/debounce.js";import"../../uuid.js";import"../../utils/environment.js";import"../Icons/Icon.js";import"../../ListHeaderText.js";import"../../StatusDot.js";import"../../theme/grid.js";import"../../hooks/useBreakpoint.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../Icons/Attachment.js";import"../Icons/Group.js";import"../Icons/NoAccess.js";import"../Icons/Undo.js";import"../StatusDot/styles.module.scss";import"../ListHeader/styles.module.scss";import"../../utils/component.js";import"../../Avatar.js";import"../Icons/Check.js";import"../Avatar/styles.module.scss";import"../../Badge.js";import"../Badge/styles.module.scss";const V=r.forwardRef((l,h)=>{const{id:p,children:L,padding:I=!0,color:x="neutral",className:N="",icon:w,large:g=!1,title:a,titleHtmlMarkup:$="span",expanded:R=!1,sticky:b,testId:H,handleExpanderClick:W,onExpand:m,renderChildrenWhenClosed:f,variant:s="line"}=l,[o]=P(R,m),u=O(null),E=O(null),{isHovered:y}=Z(E),{isOutsideWindow:T,isLeavingWindow:_,offsetHeight:c,contentWidth:n}=q(u,E),e=b&&o&&T,t=typeof a=="object",d=k(N,{[i["expander-list__item--"+s]]:s,[i["expander-list__item--jsx"]]:t}),C=k(i["expander-list-link"],i[`expander-list-link--${x}`],{[i["expander-list-link--fill"]]:s==="fill",[i["expander-list-link--closed"]]:!o,[i["expander-list-link--large"]]:g,[i["expander-list-link--jsx"]]:t,[i["expander-list-link--sticky"]]:e&&!_,[i["expander-list-link--absolute"]]:e&&_}),j=()=>{if(!f&&!o)return null;const J=k(i["expander-list-link__main-content"],o&&i["expander-list-link__main-content--expanded"],I?i["expander-list-link__main-content--padding"]:"");return r.createElement("div",{className:J},L)};return r.createElement("li",{className:d,ref:G([h,u]),style:{paddingTop:e&&c?`${c}px`:void 0}},r.createElement("button",{type:"button",id:p,onClick:W,"data-testid":H,"data-analyticsid":D.ExpanderListExpander,className:C,ref:E,"aria-expanded":o,style:{zIndex:y||e?M.ExpanderTrigger:void 0,width:e&&n?`${n}px`:void 0}},Y(a,$,y,g?"large":"medium",o?X:Q,w)),j())}),z=l=>r.isValidElement(l)&&l.type===V,B=r.forwardRef((l,h)=>{const{children:p,childPadding:L=!0,large:I,isOpen:x=!1,renderChildrenWhenClosed:N=!1,color:w,className:g="",accordion:a=!1,topBorder:$=!0,bottomBorder:R=!0,sticky:b=!1,testId:H,variant:W}=l,[m,f]=U(),[s,o]=U(),u=F(),E=r.Children.count(p),y=k(i["expander-list"],g);function T(n,e){f(t=>a?{[e]:!(t!=null&&t[e])}:{...t,[e]:!(t!=null&&t[e])}),o(n.currentTarget)}const _=n=>k(i["expander-list__item"],{[i["expander-list__item--top"]]:n===0&&$,[i["expander-list__item--no-bottom"]]:n===E-1&&!R}),c=n=>`${u}-${n}`;return A(()=>{a&&s&&!K(s)&&s.scrollIntoView()},[a,s]),A(()=>{if(x){const n=c(0);f(e=>a?{[n]:!(e!=null&&e[n])}:{...e,[n]:!(e!=null&&e[n])})}},[x]),A(()=>{var n;if(!x){const e=(n=r.Children.map(p,t=>{if(z(t))return t}))==null?void 0:n.reduce((t,d,C)=>(typeof d.props.expanded<"u"&&(t[c(C)]=d.props.expanded),t),{});f({...m,...e})}},[p]),r.createElement("ul",{className:y,ref:h,"data-testid":H,"data-analyticsid":D.ExpanderList},r.Children.map(p,(n,e)=>{if(z(n)){const t=c(e),d=m==null?void 0:m[t],C=_(e);return r.cloneElement(n,{id:t,key:e,expanded:d,padding:L,color:w,large:I,sticky:b,"aria-expanded":d,className:C,handleExpanderClick:j=>T(j,`${u}-${e}`),renderChildrenWhenClosed:N,variant:W})}return n}))});B.displayName="ExpanderList";B.Expander=V;V.displayName="ExpanderList.Expander";const Oe=B;export{B as ExpanderList,Oe as default};
 //# sourceMappingURL=index.js.map