@helsenorge/designsystem-react 6.5.0 → 7.0.0-beta.2

package/components/Expander/Expander.js

@@ -15,7 +15,7 @@ const F = (s) => {
   const {
     title: x,
     children: $,
-    size: t = "small",
+    size: n = "small",
     color: g,
     svgIcon: o,
     expanded: k = !1,
@@ -24,12 +24,12 @@ const F = (s) => {
     testId: f,
     onExpand: w,
     renderChildrenWhenClosed: R = !1
-  } = s, [n, u] = D(k, w), E = N(null), l = N(null), { isHovered: i } = O(l), { isOutsideWindow: W, isLeavingWindow: c, offsetHeight: v, contentWidth: y } = U(E, l), a = S && n && W, I = (m) => /* @__PURE__ */ r.createElement("span", { className: d(e.expander__icon, e[`expander__icon--${m}`]) }, /* @__PURE__ */ r.createElement(_, { svgIcon: n ? h : b, size: p.XSmall, isHovered: i })), X = d(
+  } = s, [t, u] = D(k, w), E = N(null), l = N(null), { isHovered: i } = O(l), { isOutsideWindow: W, isLeavingWindow: c, offsetHeight: v, contentWidth: y } = U(E, l), a = S && t && W, I = (m) => /* @__PURE__ */ r.createElement("span", { className: d(e.expander__icon, e[`expander__icon--${m}`]) }, /* @__PURE__ */ r.createElement(_, { svgIcon: t ? h : b, size: p.XSmall, isHovered: i })), X = d(
     e.expander__trigger,
-    e[`expander__trigger--${t}`],
-    t === "large" && e[`expander__trigger--${g || "neutral"}`],
-    t === "large" && o && e["expander__trigger--icon"],
-    n && e["expander__trigger--expanded"],
+    n === "large" && e[`expander__trigger--${n}`],
+    n === "large" && e[`expander__trigger--${g || "neutral"}`],
+    n === "large" && o && e["expander__trigger--icon"],
+    t && e["expander__trigger--expanded"],
     a && !c && e["expander__trigger--sticky"],
     a && c && e["expander__trigger--absolute"]
   ), H = () => /* @__PURE__ */ r.createElement(
@@ -41,19 +41,19 @@ const F = (s) => {
         zIndex: i || a ? A.ExpanderTrigger : void 0,
         width: a && y ? `${y}px` : void 0
       },
-      "aria-expanded": n,
+      "aria-expanded": t,
       ref: l,
-      onClick: () => u(!n),
+      onClick: () => u(!t),
       "data-testid": f,
       "data-analyticsid": C.Expander
     },
-    t === "small" && I("left"),
+    n === "small" && I("left"),
     o && /* @__PURE__ */ r.createElement("span", { className: d(e.expander__icon, e["expander__icon--left"]) }, typeof o == "string" ? /* @__PURE__ */ r.createElement(j, { iconName: o, size: p.XSmall, isHovered: i }) : /* @__PURE__ */ r.createElement(_, { svgIcon: o, size: p.XSmall, isHovered: i })),
     x,
-    t === "large" && I("right")
+    n === "large" && I("right")
   ), L = d(
     e.expander__button,
-    n && e["expander__button--expanded"],
+    t && e["expander__button--expanded"],
     a && !c && e["expander__button--sticky"],
     a && c && e["expander__button--absolute"]
   ), T = () => /* @__PURE__ */ r.createElement(
@@ -61,24 +61,24 @@ const F = (s) => {
     {
       variant: "borderless",
       className: L,
-      "aria-expanded": n,
+      "aria-expanded": t,
       ref: l,
-      onClick: () => u(!n),
+      onClick: () => u(!t),
       testId: f,
       "data-analyticsid": C.Expander
     },
-    /* @__PURE__ */ r.createElement(_, { svgIcon: n ? h : b, size: p.XSmall }),
+    /* @__PURE__ */ r.createElement(_, { svgIcon: t ? h : b, size: p.XSmall }),
     x
   ), B = () => {
-    if (!R && !n)
+    if (!R && !t)
       return null;
     const m = d(
       e.expander__content,
-      e[`expander__content--${t}`],
-      t === "large" && e[`expander__content--${g || "neutral"}`],
-      t === "large" && o && e["expander__content--icon"],
-      n && e["expander__content--expanded"],
-      t === "small" && !z && e["expander__content--nested-line"]
+      e[`expander__content--${n}`],
+      n === "large" && e[`expander__content--${g || "neutral"}`],
+      n === "large" && o && e["expander__content--icon"],
+      t && e["expander__content--expanded"],
+      n === "small" && !z && e["expander__content--nested-line"]
     );
     return /* @__PURE__ */ r.createElement("div", { className: m }, $);
   };
@@ -89,7 +89,7 @@ const F = (s) => {
       ref: E,
       style: { paddingTop: a && v ? `${v}px` : void 0 }
     },
-    t === "large" ? H() : T(),
+    n === "large" ? H() : T(),
     B()
   );
 }, ae = F;

package/components/Expander/Expander.js.map

@@ -1 +1 @@
-{"version":3,"file":"Expander.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 '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport { IconName } from '../Icons/IconNames';\nimport LazyIcon from '../LazyIcon';\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 | IconName;\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          {typeof icon === 'string' ? (\n            <LazyIcon iconName={icon} size={IconSize.XSmall} isHovered={isHovered} />\n          ) : (\n            <Icon svgIcon={icon} size={IconSize.XSmall} isHovered={isHovered} />\n          )}\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","LazyIcon","buttonClassName","renderButton","Button","renderContent","contentClassName","Expander$1"],"mappings":"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"}
+{"version":3,"file":"Expander.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 '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport { IconName } from '../Icons/IconNames';\nimport LazyIcon from '../LazyIcon';\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\nexport interface 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 | IconName;\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    size === ExpanderSize.large && 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          {typeof icon === 'string' ? (\n            <LazyIcon iconName={icon} size={IconSize.XSmall} isHovered={isHovered} />\n          ) : (\n            <Icon svgIcon={icon} size={IconSize.XSmall} isHovered={isHovered} />\n          )}\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","LazyIcon","buttonClassName","renderButton","Button","renderContent","contentClassName","Expander$1"],"mappings":"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"}

package/components/Expander/Expander.stories.d.ts

@@ -0,0 +1,59 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+import { ExpanderSize } from './Expander';
+declare const meta: {
+    title: string;
+    component: React.FC<import("./Expander").ExpanderProps>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    args: {
+        children: string;
+        title: string;
+        size: ExpanderSize.small;
+        color: "blueberry";
+        noNestedLine: false;
+        expanded: false;
+        renderChildrenWhenClosed: false;
+        sticky: true;
+    };
+    argTypes: {
+        children: {
+            control: string;
+        };
+        title: {
+            control: string;
+        };
+        size: {
+            control: string;
+            options: typeof ExpanderSize;
+        };
+        color: {
+            control: string;
+            options: string[];
+        };
+        noNestedLine: {
+            control: string;
+        };
+        expanded: {
+            control: string;
+        };
+        renderChildrenWhenClosed: {
+            control: string;
+        };
+        sticky: {
+            control: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const DefaultSmall: Story;
+export declare const Large: Story;
+export declare const WithIcon: Story;
+export declare const WithLoader: Story;
+export declare const WithCallback: Story;

package/components/Expander/index.d.ts

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

package/components/Expander/styles.module.scss

@@ -94,7 +94,9 @@
         }
 
         &:focus {
-          box-shadow: 0 0 0 1.5px $neutral600, inset 0 0 0 1.5px $neutral600;
+          box-shadow:
+            0 0 0 1.5px $neutral600,
+            inset 0 0 0 1.5px $neutral600;
         }
         &#{$trigger}--expanded {
           background-color: map.get($palette-map, #{$color}100);
@@ -115,13 +117,18 @@
       }
 
       &:focus {
-        box-shadow: 0 0 0 1.5px $neutral600, inset 0 0 0 1.5px $neutral600;
+        box-shadow:
+          0 0 0 1.5px $neutral600,
+          inset 0 0 0 1.5px $neutral600;
       }
       &#{$trigger}--expanded {
         box-shadow: inset 0 0 0 6px $neutral100;
 
         &:focus {
-          box-shadow: 0 0 0 1.5px $neutral600, inset 0 0 0 1.5px $neutral600, inset 0 0 0 6px $neutral100;
+          box-shadow:
+            0 0 0 1.5px $neutral600,
+            inset 0 0 0 1.5px $neutral600,
+            inset 0 0 0 6px $neutral100;
         }
       }
     }

package/components/ExpanderHierarchy/Expander.d.ts

@@ -15,4 +15,3 @@ export interface ExpanderProps extends ExpanderHierarchyCommonProps {
 export type ExpanderType = React.FC<ExpanderProps>;
 declare const Expander: ExpanderType;
 export default Expander;
-//# sourceMappingURL=Expander.d.ts.map

package/components/ExpanderHierarchy/Expander.js

@@ -1,9 +1,9 @@
 import t from "react";
 import i from "classnames";
 import x from "./ExpanderButton.js";
-import l from "./ExpanderHierarchy.js";
-import { getHeadingTag as E } from "./utils.js";
-import { isComponent as _ } from "../../utils/component.js";
+import E from "./ExpanderHierarchy.js";
+import { getHeadingTag as _ } from "./utils.js";
+import { isComponent as l } from "../../utils/component.js";
 import r from "./expander.module.scss";
 const u = ({
   title: m,
@@ -17,12 +17,12 @@ const u = ({
 }) => {
   const f = i(
     r.expander__content,
-    e <= 2 && r[`expander__content--${e}`],
+    (e === 1 || e === 2) && r[`expander__content--${e}`],
     e > 2 && r["expander__content--3-and-lower"]
   );
   return /* @__PURE__ */ t.createElement("li", { className: r.expander }, /* @__PURE__ */ t.createElement(x, { htmlMarkup: a, level: e, print: o, expanded: s, onExpand: p, testId: d }, m), /* @__PURE__ */ t.createElement("div", { className: f }, t.Children.map(
     c,
-    (n) => _(n, l) ? t.cloneElement(n, { htmlMarkup: E(a), level: e + 1, print: o }) : n
+    (n) => l(n, E) ? t.cloneElement(n, { htmlMarkup: _(a), level: e + 1, print: o }) : n
   )));
 }, w = u;
 export {

package/components/ExpanderHierarchy/Expander.js.map

@@ -1 +1 @@
-{"version":3,"file":"Expander.js","sources":["../../../src/components/ExpanderHierarchy/Expander.tsx"],"sourcesContent":["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"],"names":["Expander","title","htmlMarkup","level","print","expanded","onExpand","children","testId","contentClasses","classNames","styles","React","ExpanderButton","isComponent","child","ExpanderHierarchy","getHeadingTag","Expander$1"],"mappings":";;;;;;;AA0BA,MAAMA,IAAyB,CAAC;AAAA,EAC9B,OAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,OAAAC,IAAQ;AAAA,EACR,OAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AACF,MAAqB;AACnB,QAAMC,IAAiBC;AAAA,IACrBC,EAAO;AAAA,IACPR,KAAS,KAAKQ,EAAO,sBAAsBR,CAAK,EAAE;AAAA,IAClDA,IAAQ,KAAKQ,EAAO,gCAAgC;AAAA,EAAA;AAIpD,SAAAC,gBAAAA,EAAA,cAAC,QAAG,WAAWD,EAAO,YACnBC,gBAAAA,EAAA,cAAAC,GAAA,EAAe,YAAAX,GAAwB,OAAAC,GAAc,OAAAC,GAAc,UAAAC,GAAoB,UAAAC,GAAoB,QAAAE,EAAA,GACzGP,CACH,GACAW,gBAAAA,EAAA,cAAC,SAAI,WAAWH,EAAA,GACbG,EAAM,SAAS;AAAA,IAAIL;AAAA,IAAU,OAC5BO,EAAoCC,GAAOC,CAAiB,IACxDJ,EAAM,aAAaG,GAAO,EAAE,YAAYE,EAAcf,CAAU,GAAG,OAAOC,IAAQ,GAAG,OAAAC,EAAO,CAAA,IAC5FW;AAAA,EAER,CAAA,CACF;AAEJ,GAEAG,IAAelB;"}
+{"version":3,"file":"Expander.js","sources":["../../../src/components/ExpanderHierarchy/Expander.tsx"],"sourcesContent":["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 === 1 || 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"],"names":["Expander","title","htmlMarkup","level","print","expanded","onExpand","children","testId","contentClasses","classNames","styles","React","ExpanderButton","isComponent","child","ExpanderHierarchy","getHeadingTag","Expander$1"],"mappings":";;;;;;;AA0BA,MAAMA,IAAyB,CAAC;AAAA,EAC9B,OAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,OAAAC,IAAQ;AAAA,EACR,OAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AACF,MAAqB;AACnB,QAAMC,IAAiBC;AAAA,IACrBC,EAAO;AAAA,KACNR,MAAU,KAAKA,MAAU,MAAMQ,EAAO,sBAAsBR,CAAK,EAAE;AAAA,IACpEA,IAAQ,KAAKQ,EAAO,gCAAgC;AAAA,EAAA;AAIpD,SAAAC,gBAAAA,EAAA,cAAC,QAAG,WAAWD,EAAO,YACnBC,gBAAAA,EAAA,cAAAC,GAAA,EAAe,YAAAX,GAAwB,OAAAC,GAAc,OAAAC,GAAc,UAAAC,GAAoB,UAAAC,GAAoB,QAAAE,EAAA,GACzGP,CACH,GACAW,gBAAAA,EAAA,cAAC,SAAI,WAAWH,EAAA,GACbG,EAAM,SAAS;AAAA,IAAIL;AAAA,IAAU,OAC5BO,EAAoCC,GAAOC,CAAiB,IACxDJ,EAAM,aAAaG,GAAO,EAAE,YAAYE,EAAcf,CAAU,GAAG,OAAOC,IAAQ,GAAG,OAAAC,EAAO,CAAA,IAC5FW;AAAA,EAER,CAAA,CACF;AAEJ,GAEAG,IAAelB;"}

package/components/ExpanderHierarchy/ExpanderButton.d.ts

@@ -8,4 +8,3 @@ interface ExpanderButtonProps extends ExpanderHierarchyCommonProps {
 }
 declare const ExpanderButton: React.FC<ExpanderButtonProps>;
 export default ExpanderButton;
-//# sourceMappingURL=ExpanderButton.d.ts.map

package/components/ExpanderHierarchy/ExpanderButton.js

@@ -16,7 +16,7 @@ const g = ({ htmlMarkup: s = "h2", level: t = 1, print: r, expanded: d, onExpand
     r && e["expander__button--print"]
   ), E = o(
     e.expander__title,
-    t <= 3 && e[`expander__title--${t}`],
+    (t === 1 || t === 2 || t === 3) && e[`expander__title--${t}`],
     t > 3 && e["expander__title--4-and-lower"],
     n && e["expander__title--expanded"],
     r && e["expander__title--print"]
@@ -39,8 +39,8 @@ const g = ({ htmlMarkup: s = "h2", level: t = 1, print: r, expanded: d, onExpand
     i,
     /* @__PURE__ */ a.createElement(I, { svgIcon: n ? H : N, isHovered: _, className: C, size: h.XSmall })
   ));
-}, T = g;
+}, U = g;
 export {
-  T as default
+  U as default
 };
 //# sourceMappingURL=ExpanderButton.js.map

package/components/ExpanderHierarchy/ExpanderButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpanderButton.js","sources":["../../../src/components/ExpanderHierarchy/ExpanderButton.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 '../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 { 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    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={hoverRef}\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"],"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"],"mappings":";;;;;;;;;AAqBA,MAAMA,IAAgD,CAAC,EAAE,YAAAC,IAAa,MAAM,OAAAC,IAAQ,GAAG,OAAAC,GAAO,UAAAC,GAAU,UAAAC,GAAU,UAAAC,GAAU,QAAAC,EAAA,MAAa;AACvI,QAAM,EAAE,UAAAC,GAAU,WAAAC,EAAU,IAAIC,EAA4B,GACtD,CAACC,GAAYC,CAAa,IAAIC,EAAUT,GAAUC,CAAQ,GAE1DS,IAAc,MAAY;AAC9B,IAAAF,EAAc,CAACD,CAAU;AAAA,EAAA,GAGrBI,IAAYd,GAEZe,IAAgBC;AAAA,IACpBC,EAAO;AAAA,IACPhB,IAAQ,KAAKgB,EAAO,+BAA+B;AAAA,IACnDf,KAASe,EAAO,yBAAyB;AAAA,EAAA,GAGrCC,IAAeF;AAAA,IACnBC,EAAO;AAAA,IACPhB,KAAS,KAAKgB,EAAO,oBAAoBhB,CAAK,EAAE;AAAA,IAChDA,IAAQ,KAAKgB,EAAO,8BAA8B;AAAA,IAClDP,KAAcO,EAAO,2BAA2B;AAAA,IAChDf,KAASe,EAAO,wBAAwB;AAAA,EAAA,GAGpCE,IAAcH;AAAA,IAClBC,EAAO;AAAA,IACPhB,IAAQ,KAAKgB,EAAO,6BAA6B;AAAA,IACjDhB,IAAQ,KAAKgB,EAAO,6BAA6B;AAAA,EAAA;AAIjD,SAAAG,gBAAAA,EAAA,cAACN,GAAU,EAAA,WAAWI,EACpB,GAAAE,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,SAASP;AAAA,MACT,WAAWE;AAAA,MACX,iBAAeL;AAAA,MACf,KAAKH;AAAA,MACL,eAAaD;AAAA,MACb,oBAAkBe,EAAY;AAAA,IAAA;AAAA,IAE7BhB;AAAA,IACDe,gBAAAA,EAAA,cAACE,GAAK,EAAA,SAASZ,IAAaa,IAAYC,GAAa,WAAAhB,GAAsB,WAAWW,GAAa,MAAMM,EAAS,OAAQ,CAAA;AAAA,EAAA,CAE9H;AAEJ,GAEAC,IAAe3B;"}
+{"version":3,"file":"ExpanderButton.js","sources":["../../../src/components/ExpanderHierarchy/ExpanderButton.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 '../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 { 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 === 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={hoverRef}\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"],"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"],"mappings":";;;;;;;;;AAqBA,MAAMA,IAAgD,CAAC,EAAE,YAAAC,IAAa,MAAM,OAAAC,IAAQ,GAAG,OAAAC,GAAO,UAAAC,GAAU,UAAAC,GAAU,UAAAC,GAAU,QAAAC,EAAA,MAAa;AACvI,QAAM,EAAE,UAAAC,GAAU,WAAAC,EAAU,IAAIC,EAA4B,GACtD,CAACC,GAAYC,CAAa,IAAIC,EAAUT,GAAUC,CAAQ,GAE1DS,IAAc,MAAY;AAC9B,IAAAF,EAAc,CAACD,CAAU;AAAA,EAAA,GAGrBI,IAAYd,GAEZe,IAAgBC;AAAA,IACpBC,EAAO;AAAA,IACPhB,IAAQ,KAAKgB,EAAO,+BAA+B;AAAA,IACnDf,KAASe,EAAO,yBAAyB;AAAA,EAAA,GAGrCC,IAAeF;AAAA,IACnBC,EAAO;AAAA,KACNhB,MAAU,KAAKA,MAAU,KAAKA,MAAU,MAAMgB,EAAO,oBAAoBhB,CAAK,EAAE;AAAA,IACjFA,IAAQ,KAAKgB,EAAO,8BAA8B;AAAA,IAClDP,KAAcO,EAAO,2BAA2B;AAAA,IAChDf,KAASe,EAAO,wBAAwB;AAAA,EAAA,GAGpCE,IAAcH;AAAA,IAClBC,EAAO;AAAA,IACPhB,IAAQ,KAAKgB,EAAO,6BAA6B;AAAA,IACjDhB,IAAQ,KAAKgB,EAAO,6BAA6B;AAAA,EAAA;AAIjD,SAAAG,gBAAAA,EAAA,cAACN,GAAU,EAAA,WAAWI,EACpB,GAAAE,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,SAASP;AAAA,MACT,WAAWE;AAAA,MACX,iBAAeL;AAAA,MACf,KAAKH;AAAA,MACL,eAAaD;AAAA,MACb,oBAAkBe,EAAY;AAAA,IAAA;AAAA,IAE7BhB;AAAA,IACDe,gBAAAA,EAAA,cAACE,GAAK,EAAA,SAASZ,IAAaa,IAAYC,GAAa,WAAAhB,GAAsB,WAAWW,GAAa,MAAMM,EAAS,OAAQ,CAAA;AAAA,EAAA,CAE9H;AAEJ,GAEAC,IAAe3B;"}

package/components/ExpanderHierarchy/ExpanderHierarchy.d.ts

@@ -19,4 +19,3 @@ export interface ExpanderHierarchyCompound extends React.FC<ExpanderHierarchyPro
 }
 declare const ExpanderHierarchy: ExpanderHierarchyCompound;
 export default ExpanderHierarchy;
-//# sourceMappingURL=ExpanderHierarchy.d.ts.map

package/components/ExpanderHierarchy/ExpanderHierarchy.js

@@ -2,7 +2,7 @@ import e from "react";
 import c from "classnames";
 import n from "./Expander.js";
 import { AnalyticsId as h } from "../../constants.js";
-import { isComponent as l } from "../../utils/component.js";
+import { isComponent as x } from "../../utils/component.js";
 import t from "./styles.module.scss";
 const o = ({
   htmlMarkup: s = "h2",
@@ -13,12 +13,12 @@ const o = ({
 }) => {
   const d = c(
     t.expanderhierarchy,
-    t[`expanderhierarchy--${r}`],
+    r === 2 && t[`expanderhierarchy--${r}`],
     r > 2 && t["expanderhierarchy--3-and-lower"]
   );
   return /* @__PURE__ */ e.createElement("ul", { className: d, "data-testid": p, "data-analyticsid": h.ExpanderHierarchy }, e.Children.map(
     i,
-    (a) => l(a, n) ? e.cloneElement(a, { htmlMarkup: s, level: r, print: m }) : a
+    (a) => x(a, n) ? e.cloneElement(a, { htmlMarkup: s, level: r, print: m }) : a
   ));
 };
 o.Expander = n;

package/components/ExpanderHierarchy/ExpanderHierarchy.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpanderHierarchy.js","sources":["../../../src/components/ExpanderHierarchy/ExpanderHierarchy.tsx"],"sourcesContent":["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":["ExpanderHierarchy","htmlMarkup","level","print","children","testId","listClasses","classNames","styles","React","AnalyticsId","child","isComponent","Expander","ExpanderHierarchy$1"],"mappings":";;;;;;AA8BA,MAAMA,IAA+C,CAAC;AAAA,EACpD,YAAAC,IAAa;AAAA,EACb,OAAAC,IAAQ;AAAA,EACR,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AACF,MAA8B;AAC5B,QAAMC,IAAcC;AAAA,IAClBC,EAAO;AAAA,IACPA,EAAO,sBAAsBN,CAAK,EAAE;AAAA,IACpCA,IAAQ,KAAKM,EAAO,gCAAgC;AAAA,EAAA;AAIpD,SAAAC,gBAAAA,EAAA,cAAC,MAAG,EAAA,WAAWH,GAAa,eAAaD,GAAQ,oBAAkBK,EAAY,kBAC5E,GAAAD,EAAM,SAAS;AAAA,IAAIL;AAAA,IAAU,CAC5BO,MAAAC,EAA2BD,GAAOE,CAAQ,IAAIJ,EAAM,aAAaE,GAAO,EAAE,YAAAV,GAAY,OAAAC,GAAO,OAAAC,EAAA,CAAO,IAAIQ;AAAA,EAAA,CAE5G;AAEJ;AAEAX,EAAkB,WAAWa;AAE7B,MAAAC,IAAed;"}
+{"version":3,"file":"ExpanderHierarchy.js","sources":["../../../src/components/ExpanderHierarchy/ExpanderHierarchy.tsx"],"sourcesContent":["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    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"],"names":["ExpanderHierarchy","htmlMarkup","level","print","children","testId","listClasses","classNames","styles","React","AnalyticsId","child","isComponent","Expander","ExpanderHierarchy$1"],"mappings":";;;;;;AA8BA,MAAMA,IAA+C,CAAC;AAAA,EACpD,YAAAC,IAAa;AAAA,EACb,OAAAC,IAAQ;AAAA,EACR,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AACF,MAA8B;AAC5B,QAAMC,IAAcC;AAAA,IAClBC,EAAO;AAAA,IACPN,MAAU,KAAKM,EAAO,sBAAsBN,CAAK,EAAE;AAAA,IACnDA,IAAQ,KAAKM,EAAO,gCAAgC;AAAA,EAAA;AAIpD,SAAAC,gBAAAA,EAAA,cAAC,MAAG,EAAA,WAAWH,GAAa,eAAaD,GAAQ,oBAAkBK,EAAY,kBAC5E,GAAAD,EAAM,SAAS;AAAA,IAAIL;AAAA,IAAU,CAC5BO,MAAAC,EAA2BD,GAAOE,CAAQ,IAAIJ,EAAM,aAAaE,GAAO,EAAE,YAAAV,GAAY,OAAAC,GAAO,OAAAC,EAAA,CAAO,IAAIQ;AAAA,EAAA,CAE5G;AAEJ;AAEAX,EAAkB,WAAWa;AAE7B,MAAAC,IAAed;"}

package/components/ExpanderHierarchy/ExpanderHierarchy.stories.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+import ExpanderHierarchy from './ExpanderHierarchy';
+type ExpanderHierarchyWithAndCustomArgs = React.ComponentProps<typeof ExpanderHierarchy> & {
+    title: string;
+    expanded: boolean;
+};
+declare const meta: {
+    title: string;
+    component: import("./ExpanderHierarchy").ExpanderHierarchyCompound;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    args: {
+        title: string;
+        htmlMarkup: "h2";
+        expanded: false;
+        print: false;
+    };
+    argTypes: {
+        title: {
+            control: string;
+        };
+        htmlMarkup: {
+            control: string;
+            options: string[];
+        };
+        expanded: {
+            control: string;
+        };
+        print: {
+            control: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<ExpanderHierarchyWithAndCustomArgs>;
+export declare const Default: Story;

package/components/ExpanderHierarchy/index.d.ts

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

package/components/ExpanderHierarchy/utils.d.ts

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

package/components/ExpanderList/ExpanderList.d.ts

@@ -52,4 +52,3 @@ type ExpanderProps = Modify<React.HTMLAttributes<HTMLButtonElement>, {
 }> & Pick<ExpanderListProps, 'renderChildrenWhenClosed' | 'sticky' | 'variant'>;
 export declare const ExpanderList: ExpanderListCompound;
 export default ExpanderList;
-//# sourceMappingURL=ExpanderList.d.ts.map