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

package/components/LazyIcon/LazyIcon.stories.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: React.FC<import("./LazyIcon").LazyIconProps>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    args: {
+        iconName: "Hospital";
+    };
+    argTypes: {
+        iconName: {
+            control: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/components/LazyIcon/index.d.ts

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

package/components/LazyIcon/utils.d.ts

@@ -1,2 +1 @@
 export declare const isServerSide: () => boolean;
-//# sourceMappingURL=utils.d.ts.map

package/components/LazyIllustration/LazyIllustration.d.ts

@@ -7,4 +7,3 @@ export interface LazyIllustrationProps extends BaseIllustrationProps {
 export declare const lazyLoadIllustration: (illustrationName: IllustrationName, size: number) => React.LazyExoticComponent<SvgIllustration>;
 export declare const LazyIllustration: React.FC<LazyIllustrationProps>;
 export default LazyIllustration;
-//# sourceMappingURL=LazyIllustration.d.ts.map

package/components/LazyIllustration/LazyIllustration.js.map

@@ -1 +1 @@
-{"version":3,"file":"LazyIllustration.js","sources":["../../../src/components/LazyIllustration/LazyIllustration.tsx"],"sourcesContent":["import React, { lazy, Suspense, useMemo } from 'react';\n\nimport Illustration, { BaseIllustrationProps, SvgIllustration } from '../Illustration';\nimport { getIllustration } from '../Illustration/utils';\nimport { IllustrationName, IllustrationSizeList } from '../Illustrations/IllustrationNames';\nimport ErrorBoundary from '../LazyIcon/ErrorBoundary';\nimport { isServerSide } from '../LazyIcon/utils';\n\nexport interface LazyIllustrationProps extends BaseIllustrationProps {\n  // Navnet på illustrasjonen som skal vises. Tilsvarer filnavnet til illustrasjonen i Icons-mappen\n  illustrationName: IllustrationName;\n}\n\nexport const lazyLoadIllustration = (illustrationName: IllustrationName, size: number): React.LazyExoticComponent<SvgIllustration> => {\n  const sizes = IllustrationSizeList[illustrationName];\n  const illustrationFileName = getIllustration({ size, ...sizes });\n\n  return lazy<SvgIllustration>(() => import(`../Illustrations/${illustrationFileName}.tsx`));\n};\n\nexport const LazyIllustration: React.FC<LazyIllustrationProps> = ({ illustrationName, size = 512, ...rest }) => {\n  const illustration = useMemo(() => lazyLoadIllustration(illustrationName, size), [illustrationName, size]);\n\n  if (isServerSide()) {\n    return null;\n  }\n\n  const fallback = (\n    <svg\n      data-testid={'fallback'}\n      role={'presentation'}\n      focusable={false}\n      aria-hidden={true}\n      viewBox=\"0 0 512 512\"\n      style={{ minWidth: size, minHeight: size }}\n      width={size}\n      height={size}\n    />\n  );\n\n  return (\n    <ErrorBoundary fallback={fallback} reset={illustrationName}>\n      <Suspense fallback={fallback}>\n        <Illustration illustration={illustration} size={size} {...rest} />\n      </Suspense>\n    </ErrorBoundary>\n  );\n};\n\nexport default LazyIllustration;\n"],"names":["lazyLoadIllustration","illustrationName","size","sizes","IllustrationSizeList","illustrationFileName","getIllustration","lazy","__variableDynamicImportRuntimeHelper","LazyIllustration","rest","illustration","useMemo","isServerSide","fallback","React","ErrorBoundary","Suspense","Illustration","LazyIllustration$1"],"mappings":";;;;;;;AAaa,MAAAA,IAAuB,CAACC,GAAoCC,MAA6D;AAC9H,QAAAC,IAAQC,EAAqBH,CAAgB,GAC7CI,IAAuBC,EAAgB,EAAE,MAAAJ,GAAM,GAAGC,EAAO,CAAA;AAE/D,SAAOI,EAAsB,MAAMC,EAAsD,uBAAA,OAAA,EAAA,+BAAA,MAAA,OAAA,4BAAA,GAAA,qCAAA,MAAA,OAAA,kCAAA,GAAA,oCAAA,MAAA,OAAA,iCAAA,GAAA,4CAAA,MAAA,OAAA,yCAAA,GAAA,kDAAA,MAAA,OAAA,+CAAA,GAAA,iDAAA,MAAA,OAAA,8CAAA,EAAA,CAAA,GAAA,oBAAAH,CAAA,MAAA,CAAA;AAC3F,GAEaI,IAAoD,CAAC,EAAE,kBAAAR,GAAkB,MAAAC,IAAO,KAAK,GAAGQ,QAAW;AACxG,QAAAC,IAAeC,EAAQ,MAAMZ,EAAqBC,GAAkBC,CAAI,GAAG,CAACD,GAAkBC,CAAI,CAAC;AAEzG,MAAIW;AACK,WAAA;AAGT,QAAMC,IACJC,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAa;AAAA,MACb,MAAM;AAAA,MACN,WAAW;AAAA,MACX,eAAa;AAAA,MACb,SAAQ;AAAA,MACR,OAAO,EAAE,UAAUb,GAAM,WAAWA,EAAK;AAAA,MACzC,OAAOA;AAAA,MACP,QAAQA;AAAA,IAAA;AAAA,EAAA;AAIZ,SACGa,gBAAAA,EAAA,cAAAC,GAAA,EAAc,UAAAF,GAAoB,OAAOb,KACvCc,gBAAAA,EAAA,cAAAE,GAAA,EAAS,UAAAH,KACRC,gBAAAA,EAAA,cAACG,KAAa,cAAAP,GAA4B,MAAAT,GAAa,GAAGQ,GAAM,CAClE,CACF;AAEJ,GAEAS,IAAeV;"}
+{"version":3,"file":"LazyIllustration.js","sources":["../../../src/components/LazyIllustration/LazyIllustration.tsx"],"sourcesContent":["import React, { lazy, Suspense, useMemo } from 'react';\n\nimport Illustration, { BaseIllustrationProps, SvgIllustration } from '../Illustration';\nimport { getIllustration } from '../Illustration/utils';\nimport { IllustrationName, IllustrationSizeList } from '../Illustrations/IllustrationNames';\nimport ErrorBoundary from '../LazyIcon/ErrorBoundary';\nimport { isServerSide } from '../LazyIcon/utils';\n\nexport interface LazyIllustrationProps extends BaseIllustrationProps {\n  // Navnet på illustrasjonen som skal vises. Tilsvarer filnavnet til illustrasjonen i Icons-mappen\n  illustrationName: IllustrationName;\n}\n\nexport const lazyLoadIllustration = (illustrationName: IllustrationName, size: number): React.LazyExoticComponent<SvgIllustration> => {\n  const sizes = IllustrationSizeList[illustrationName];\n  const illustrationFileName = getIllustration({ size, ...sizes });\n\n  return lazy<SvgIllustration>(() => import(`../Illustrations/${illustrationFileName}.tsx`));\n};\n\nexport const LazyIllustration: React.FC<LazyIllustrationProps> = ({ illustrationName, size = 512, ...rest }) => {\n  const illustration = useMemo(() => lazyLoadIllustration(illustrationName, size), [illustrationName, size]);\n\n  if (isServerSide()) {\n    return null;\n  }\n\n  const fallback = (\n    <svg\n      data-testid={'fallback'}\n      role={'presentation'}\n      focusable={false}\n      aria-hidden={true}\n      viewBox=\"0 0 512 512\"\n      style={{ minWidth: size, minHeight: size }}\n      width={size}\n      height={size}\n    />\n  );\n\n  return (\n    <ErrorBoundary fallback={fallback} reset={illustrationName}>\n      <Suspense fallback={fallback}>\n        <Illustration illustration={illustration} size={size} {...rest} />\n      </Suspense>\n    </ErrorBoundary>\n  );\n};\n\nexport default LazyIllustration;\n"],"names":["lazyLoadIllustration","illustrationName","size","sizes","IllustrationSizeList","illustrationFileName","getIllustration","lazy","__variableDynamicImportRuntimeHelper","LazyIllustration","rest","illustration","useMemo","isServerSide","fallback","React","ErrorBoundary","Suspense","Illustration","LazyIllustration$1"],"mappings":";;;;;;;AAaa,MAAAA,IAAuB,CAACC,GAAoCC,MAA6D;AAC9H,QAAAC,IAAQC,EAAqBH,CAAgB,GAC7CI,IAAuBC,EAAgB,EAAE,MAAAJ,GAAM,GAAGC,EAAO,CAAA;AAE/D,SAAOI,EAAsB,MAAMC,EAAA,uBAAA,OAAA,EAAA,+BAAA,MAAA,OAAA,4BAAA,GAAA,qCAAA,MAAA,OAAA,kCAAA,GAAA,oCAAA,MAAA,OAAA,iCAAA,GAAA,4CAAA,MAAA,OAAA,yCAAA,GAAA,kDAAA,MAAA,OAAA,+CAAA,GAAA,iDAAA,MAAA,OAAA,8CAAA,EAAA,CAAA,GAAA,oBAAAH,CAAA,MAAA,CAAsD;AAC3F,GAEaI,IAAoD,CAAC,EAAE,kBAAAR,GAAkB,MAAAC,IAAO,KAAK,GAAGQ,QAAW;AACxG,QAAAC,IAAeC,EAAQ,MAAMZ,EAAqBC,GAAkBC,CAAI,GAAG,CAACD,GAAkBC,CAAI,CAAC;AAEzG,MAAIW;AACK,WAAA;AAGT,QAAMC,IACJC,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAa;AAAA,MACb,MAAM;AAAA,MACN,WAAW;AAAA,MACX,eAAa;AAAA,MACb,SAAQ;AAAA,MACR,OAAO,EAAE,UAAUb,GAAM,WAAWA,EAAK;AAAA,MACzC,OAAOA;AAAA,MACP,QAAQA;AAAA,IAAA;AAAA,EAAA;AAIZ,SACGa,gBAAAA,EAAA,cAAAC,GAAA,EAAc,UAAAF,GAAoB,OAAOb,KACvCc,gBAAAA,EAAA,cAAAE,GAAA,EAAS,UAAAH,KACRC,gBAAAA,EAAA,cAACG,KAAa,cAAAP,GAA4B,MAAAT,GAAa,GAAGQ,GAAM,CAClE,CACF;AAEJ,GAEAS,IAAeV;"}

package/components/LazyIllustration/LazyIllustration.stories.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: React.FC<import("./LazyIllustration").LazyIllustrationProps>;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    args: {
+        illustrationName: "Doctor";
+        size: number;
+        color: "neutral";
+        ariaLabel: string;
+    };
+    argTypes: {
+        illustrationName: {
+            control: string;
+        };
+        size: {
+            control: string;
+        };
+        color: {
+            control: string;
+            options: string[];
+        };
+        ariaLabel: {
+            control: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/components/LazyIllustration/index.d.ts

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

package/components/LinkList/LinkList.d.ts

@@ -47,4 +47,3 @@ export type LinkProps = Modify<React.HTMLAttributes<HTMLAnchorElement | HTMLButt
 }> & Pick<LinkListProps, 'color' | 'size' | 'variant'>;
 export declare const LinkList: CompoundComponent;
 export default LinkList;
-//# sourceMappingURL=LinkList.d.ts.map

package/components/LinkList/LinkList.js

@@ -5,56 +5,56 @@ import { useHover as w } from "../../hooks/useHover.js";
 import y from "../Icons/ChevronRight.js";
 import { renderListHeader as R } from "../ListHeader/ListHeader.js";
 import t from "./styles.module.scss";
-const _ = e.forwardRef((p, a) => {
+const p = e.forwardRef((L, l) => {
   const {
     children: s,
     className: o = "",
     color: c = "neutral",
-    icon: l,
+    icon: r,
     size: i = "medium",
-    chevron: r = !1,
+    chevron: a = !1,
     linkRef: m,
     testId: d,
     target: n,
     variant: f,
     htmlMarkup: k = "a",
-    ...L
-  } = p, { hoverRef: h, isHovered: v } = w(m), C = u(t["link-list__list-item"], {
+    ..._
+  } = L, { hoverRef: h, isHovered: v } = w(m), C = u({
     [t["link-list__list-item--line"]]: f === "line",
     [t["link-list__list-item--outline"]]: f === "outline"
   }), N = u(
     t["link-list__anchor"],
-    t["link-list__anchor--" + c],
+    t[`link-list__anchor--${c}`],
     {
       [t["link-list__anchor--fill"]]: f === "fill",
-      [t["link-list__anchor--" + i]]: i,
+      [t[`link-list__anchor--${i}`]]: i,
       [t["link-list__anchor--button"]]: k === "button"
     },
     o
   );
-  return /* @__PURE__ */ e.createElement("li", { className: C, ref: a, "data-testid": d, "data-analyticsid": b.Link }, k === "a" && /* @__PURE__ */ e.createElement(
+  return /* @__PURE__ */ e.createElement("li", { className: C, ref: l, "data-testid": d, "data-analyticsid": b.Link }, k === "a" && /* @__PURE__ */ e.createElement(
     "a",
     {
       className: N,
       ref: h,
       rel: n === "_blank" ? "noopener noreferrer" : void 0,
       target: n,
-      ...L
+      ..._
     },
-    R(s, "span", v, i, r ? y : void 0, l)
-  ), k === "button" && /* @__PURE__ */ e.createElement("button", { className: N, ref: h, type: "button", ...L }, R(s, "span", v, i, r ? y : void 0, l)));
-}), E = e.forwardRef(function(a, s) {
-  const { children: o, className: c = "", chevron: l = !1, size: i = "medium", color: r, testId: m, variant: d = "line" } = a;
+    R(s, "span", v, i, a ? y : void 0, r)
+  ), k === "button" && /* @__PURE__ */ e.createElement("button", { className: N, ref: h, type: "button", ..._ }, R(s, "span", v, i, a ? y : void 0, r)));
+}), E = e.forwardRef(function(l, s) {
+  const { children: o, className: c = "", chevron: r = !1, size: i = "medium", color: a, testId: m, variant: d = "line" } = l;
   return /* @__PURE__ */ e.createElement("ul", { ref: s, className: u(t["link-list"], c), "data-testid": m, "data-analyticsid": b.LinkList }, e.Children.map(o, (n) => {
-    if (n.type === _)
-      return e.cloneElement(n, { color: r, size: i, chevron: l, variant: d });
+    if (n.type === p)
+      return e.cloneElement(n, { color: a, size: i, chevron: r, variant: d });
   }));
 });
-E.Link = _;
-_.displayName = "LinkList.Link";
-const M = E;
+E.Link = p;
+p.displayName = "LinkList.Link";
+const F = E;
 export {
   E as LinkList,
-  M as default
+  F as default
 };
 //# sourceMappingURL=LinkList.js.map

package/components/LinkList/LinkList.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinkList.js","sources":["../../../src/components/LinkList/LinkList.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useHover } from '../../hooks/useHover';\nimport { PaletteNames } from '../../theme/palette';\nimport ChevronRight from '../Icons/ChevronRight';\nimport { ListHeaderType, renderListHeader } from '../ListHeader/ListHeader';\n\nimport LinkListStyles from './styles.module.scss';\n\nexport type LinkListSize = 'small' | 'medium' | 'large';\n\nexport type LinkAnchorTargets = '_self' | '_blank' | '_parent';\n\nexport type LinkListColors = PaletteNames;\nexport type LinkListVariant = 'line' | 'outline' | 'fill';\n\nexport interface LinkType extends React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLLIElement>> {\n  ListHeader?: ListHeaderType;\n}\n\nexport type LinkTags = 'button' | 'a';\nexport interface CompoundComponent extends React.ForwardRefExoticComponent<LinkListProps & React.RefAttributes<HTMLUListElement>> {\n  Link: LinkType;\n}\n\nexport interface LinkListProps {\n  /** Items in the LinkList */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the link list background color on hover. */\n  color?: LinkListColors;\n  /** Toggles chevron icon on or off. */\n  chevron?: boolean;\n  /** Changes size of the LinkList. */\n  size?: LinkListSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets visual priority */\n  variant?: LinkListVariant;\n}\n\ntype Modify<T, R> = Omit<T, keyof R> & R;\n\nexport type LinkProps = Modify<\n  React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>,\n  {\n    children: React.ReactNode;\n    chevron?: boolean;\n    className?: string;\n    icon?: React.ReactElement;\n    href?: string;\n    target?: LinkAnchorTargets;\n    /** HTML markup for link. Default: a */\n    htmlMarkup?: LinkTags;\n    /**\n     * Ref for lenke/knapp\n     */\n    linkRef?: React.RefObject<HTMLButtonElement | HTMLAnchorElement>;\n    /** Sets the data-testid attribute. */\n    testId?: string;\n  }\n> &\n  Pick<LinkListProps, 'color' | 'size' | 'variant'>;\n\nconst Link: LinkType = React.forwardRef((props: LinkProps, ref: React.Ref<HTMLLIElement>) => {\n  const {\n    children,\n    className = '',\n    color = 'neutral',\n    icon,\n    size = 'medium',\n    chevron = false,\n    linkRef,\n    testId,\n    target,\n    variant,\n    htmlMarkup = 'a',\n    ...restProps\n  } = props;\n  const { hoverRef, isHovered } = useHover<HTMLButtonElement | HTMLAnchorElement>(linkRef);\n\n  const liClasses = cn(LinkListStyles['link-list__list-item'], {\n    [LinkListStyles['link-list__list-item--line']]: variant === 'line',\n    [LinkListStyles['link-list__list-item--outline']]: variant === 'outline',\n  });\n  const linkClasses = cn(\n    LinkListStyles['link-list__anchor'],\n    LinkListStyles['link-list__anchor--' + color],\n\n    {\n      [LinkListStyles['link-list__anchor--fill']]: variant === 'fill',\n      [LinkListStyles['link-list__anchor--' + size]]: size,\n      [LinkListStyles['link-list__anchor--button']]: htmlMarkup === 'button',\n    },\n    className\n  );\n  return (\n    <li className={liClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Link}>\n      {htmlMarkup === 'a' && (\n        <a\n          className={linkClasses}\n          ref={hoverRef as React.RefObject<HTMLAnchorElement>}\n          rel={target === '_blank' ? 'noopener noreferrer' : undefined}\n          target={target}\n          {...restProps}\n        >\n          {renderListHeader(children, 'span', isHovered, size, chevron ? ChevronRight : undefined, icon)}\n        </a>\n      )}\n      {htmlMarkup === 'button' && (\n        <button className={linkClasses} ref={hoverRef as React.RefObject<HTMLButtonElement>} type=\"button\" {...restProps}>\n          {renderListHeader(children, 'span', isHovered, size, chevron ? ChevronRight : undefined, icon)}\n        </button>\n      )}\n    </li>\n  );\n});\n\nexport const LinkList = React.forwardRef(function LinkListForwardedRef(props: LinkListProps, ref: React.Ref<HTMLUListElement>) {\n  const { children, className = '', chevron = false, size = 'medium', color, testId, variant = 'line' } = props;\n  return (\n    <ul ref={ref} className={cn(LinkListStyles['link-list'], className)} data-testid={testId} data-analyticsid={AnalyticsId.LinkList}>\n      {React.Children.map(children, (child: React.ReactNode | React.ReactElement<LinkProps>) => {\n        if ((child as React.ReactElement<LinkProps>).type === Link) {\n          return React.cloneElement(child as React.ReactElement<LinkProps>, { color, size, chevron, variant });\n        }\n      })}\n    </ul>\n  );\n}) as CompoundComponent;\n\nLinkList.Link = Link;\nLink.displayName = 'LinkList.Link';\n\nexport default LinkList;\n"],"names":["Link","React","props","ref","children","className","color","icon","size","chevron","linkRef","testId","target","variant","htmlMarkup","restProps","hoverRef","isHovered","useHover","liClasses","cn","LinkListStyles","linkClasses","AnalyticsId","renderListHeader","ChevronRight","LinkList","child","LinkList$1"],"mappings":";;;;;;;AAoEA,MAAMA,IAAiBC,EAAM,WAAW,CAACC,GAAkBC,MAAkC;AACrF,QAAA;AAAA,IACJ,UAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,OAAAC,IAAQ;AAAA,IACR,MAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,SAAAC,IAAU;AAAA,IACV,SAAAC;AAAA,IACA,QAAAC;AAAA,IACA,QAAAC;AAAA,IACA,SAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,GAAGC;AAAA,EACD,IAAAb,GACE,EAAE,UAAAc,GAAU,WAAAC,EAAU,IAAIC,EAAgDR,CAAO,GAEjFS,IAAYC,EAAGC,EAAe,sBAAsB,GAAG;AAAA,IAC3D,CAACA,EAAe,4BAA4B,CAAC,GAAGR,MAAY;AAAA,IAC5D,CAACQ,EAAe,+BAA+B,CAAC,GAAGR,MAAY;AAAA,EAAA,CAChE,GACKS,IAAcF;AAAAA,IAClBC,EAAe,mBAAmB;AAAA,IAClCA,EAAe,wBAAwBf,CAAK;AAAA,IAE5C;AAAA,MACE,CAACe,EAAe,yBAAyB,CAAC,GAAGR,MAAY;AAAA,MACzD,CAACQ,EAAe,wBAAwBb,CAAI,CAAC,GAAGA;AAAA,MAChD,CAACa,EAAe,2BAA2B,CAAC,GAAGP,MAAe;AAAA,IAChE;AAAA,IACAT;AAAA,EAAA;AAGA,SAAAJ,gBAAAA,EAAA,cAAC,MAAG,EAAA,WAAWkB,GAAW,KAAAhB,GAAU,eAAaQ,GAAQ,oBAAkBY,EAAY,KACpF,GAAAT,MAAe,OACdb,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWqB;AAAA,MACX,KAAKN;AAAA,MACL,KAAKJ,MAAW,WAAW,wBAAwB;AAAA,MACnD,QAAAA;AAAA,MACC,GAAGG;AAAA,IAAA;AAAA,IAEHS,EAAiBpB,GAAU,QAAQa,GAAWT,GAAMC,IAAUgB,IAAe,QAAWlB,CAAI;AAAA,EAC/F,GAEDO,MAAe,YACdb,gBAAAA,EAAA,cAAC,YAAO,WAAWqB,GAAa,KAAKN,GAAgD,MAAK,UAAU,GAAGD,EACpG,GAAAS,EAAiBpB,GAAU,QAAQa,GAAWT,GAAMC,IAAUgB,IAAe,QAAWlB,CAAI,CAC/F,CAEJ;AAEJ,CAAC,GAEYmB,IAAWzB,EAAM,WAAW,SAA8BC,GAAsBC,GAAkC;AAC7H,QAAM,EAAE,UAAAC,GAAU,WAAAC,IAAY,IAAI,SAAAI,IAAU,IAAO,MAAAD,IAAO,UAAU,OAAAF,GAAO,QAAAK,GAAQ,SAAAE,IAAU,OAAA,IAAWX;AAEtG,SAAAD,gBAAAA,EAAA,cAAC,QAAG,KAAAE,GAAU,WAAWiB,EAAGC,EAAe,WAAW,GAAGhB,CAAS,GAAG,eAAaM,GAAQ,oBAAkBY,EAAY,SACrH,GAAAtB,EAAM,SAAS,IAAIG,GAAU,CAACuB,MAA2D;AACnF,QAAAA,EAAwC,SAAS3B;AAC7C,aAAAC,EAAM,aAAa0B,GAAwC,EAAE,OAAArB,GAAO,MAAAE,GAAM,SAAAC,GAAS,SAAAI,GAAS;AAAA,EAEtG,CAAA,CACH;AAEJ,CAAC;AAEDa,EAAS,OAAO1B;AAChBA,EAAK,cAAc;AAEnB,MAAA4B,IAAeF;"}
+{"version":3,"file":"LinkList.js","sources":["../../../src/components/LinkList/LinkList.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useHover } from '../../hooks/useHover';\nimport { PaletteNames } from '../../theme/palette';\nimport ChevronRight from '../Icons/ChevronRight';\nimport { ListHeaderType, renderListHeader } from '../ListHeader/ListHeader';\n\nimport LinkListStyles from './styles.module.scss';\n\nexport type LinkListSize = 'small' | 'medium' | 'large';\n\nexport type LinkAnchorTargets = '_self' | '_blank' | '_parent';\n\nexport type LinkListColors = PaletteNames;\nexport type LinkListVariant = 'line' | 'outline' | 'fill';\n\nexport interface LinkType extends React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLLIElement>> {\n  ListHeader?: ListHeaderType;\n}\n\nexport type LinkTags = 'button' | 'a';\nexport interface CompoundComponent extends React.ForwardRefExoticComponent<LinkListProps & React.RefAttributes<HTMLUListElement>> {\n  Link: LinkType;\n}\n\nexport interface LinkListProps {\n  /** Items in the LinkList */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the link list background color on hover. */\n  color?: LinkListColors;\n  /** Toggles chevron icon on or off. */\n  chevron?: boolean;\n  /** Changes size of the LinkList. */\n  size?: LinkListSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets visual priority */\n  variant?: LinkListVariant;\n}\n\ntype Modify<T, R> = Omit<T, keyof R> & R;\n\nexport type LinkProps = Modify<\n  React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>,\n  {\n    children: React.ReactNode;\n    chevron?: boolean;\n    className?: string;\n    icon?: React.ReactElement;\n    href?: string;\n    target?: LinkAnchorTargets;\n    /** HTML markup for link. Default: a */\n    htmlMarkup?: LinkTags;\n    /**\n     * Ref for lenke/knapp\n     */\n    linkRef?: React.RefObject<HTMLButtonElement | HTMLAnchorElement>;\n    /** Sets the data-testid attribute. */\n    testId?: string;\n  }\n> &\n  Pick<LinkListProps, 'color' | 'size' | 'variant'>;\n\nconst Link: LinkType = React.forwardRef((props: LinkProps, ref: React.Ref<HTMLLIElement>) => {\n  const {\n    children,\n    className = '',\n    color = 'neutral',\n    icon,\n    size = 'medium',\n    chevron = false,\n    linkRef,\n    testId,\n    target,\n    variant,\n    htmlMarkup = 'a',\n    ...restProps\n  } = props;\n  const { hoverRef, isHovered } = useHover<HTMLButtonElement | HTMLAnchorElement>(linkRef);\n\n  const liClasses = cn({\n    [LinkListStyles['link-list__list-item--line']]: variant === 'line',\n    [LinkListStyles['link-list__list-item--outline']]: variant === 'outline',\n  });\n  const linkClasses = cn(\n    LinkListStyles['link-list__anchor'],\n    LinkListStyles[`link-list__anchor--${color}`],\n    {\n      [LinkListStyles['link-list__anchor--fill']]: variant === 'fill',\n      [LinkListStyles[`link-list__anchor--${size}`]]: size,\n      [LinkListStyles['link-list__anchor--button']]: htmlMarkup === 'button',\n    },\n    className\n  );\n  return (\n    <li className={liClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Link}>\n      {htmlMarkup === 'a' && (\n        <a\n          className={linkClasses}\n          ref={hoverRef as React.RefObject<HTMLAnchorElement>}\n          rel={target === '_blank' ? 'noopener noreferrer' : undefined}\n          target={target}\n          {...restProps}\n        >\n          {renderListHeader(children, 'span', isHovered, size, chevron ? ChevronRight : undefined, icon)}\n        </a>\n      )}\n      {htmlMarkup === 'button' && (\n        <button className={linkClasses} ref={hoverRef as React.RefObject<HTMLButtonElement>} type=\"button\" {...restProps}>\n          {renderListHeader(children, 'span', isHovered, size, chevron ? ChevronRight : undefined, icon)}\n        </button>\n      )}\n    </li>\n  );\n});\n\nexport const LinkList = React.forwardRef(function LinkListForwardedRef(props: LinkListProps, ref: React.Ref<HTMLUListElement>) {\n  const { children, className = '', chevron = false, size = 'medium', color, testId, variant = 'line' } = props;\n  return (\n    <ul ref={ref} className={cn(LinkListStyles['link-list'], className)} data-testid={testId} data-analyticsid={AnalyticsId.LinkList}>\n      {React.Children.map(children, (child: React.ReactNode | React.ReactElement<LinkProps>) => {\n        if ((child as React.ReactElement<LinkProps>).type === Link) {\n          return React.cloneElement(child as React.ReactElement<LinkProps>, { color, size, chevron, variant });\n        }\n      })}\n    </ul>\n  );\n}) as CompoundComponent;\n\nLinkList.Link = Link;\nLink.displayName = 'LinkList.Link';\n\nexport default LinkList;\n"],"names":["Link","React","props","ref","children","className","color","icon","size","chevron","linkRef","testId","target","variant","htmlMarkup","restProps","hoverRef","isHovered","useHover","liClasses","cn","LinkListStyles","linkClasses","AnalyticsId","renderListHeader","ChevronRight","LinkList","child","LinkList$1"],"mappings":";;;;;;;AAoEA,MAAMA,IAAiBC,EAAM,WAAW,CAACC,GAAkBC,MAAkC;AACrF,QAAA;AAAA,IACJ,UAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,OAAAC,IAAQ;AAAA,IACR,MAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,SAAAC,IAAU;AAAA,IACV,SAAAC;AAAA,IACA,QAAAC;AAAA,IACA,QAAAC;AAAA,IACA,SAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,GAAGC;AAAA,EACD,IAAAb,GACE,EAAE,UAAAc,GAAU,WAAAC,EAAU,IAAIC,EAAgDR,CAAO,GAEjFS,IAAYC,EAAG;AAAA,IACnB,CAACC,EAAe,4BAA4B,CAAC,GAAGR,MAAY;AAAA,IAC5D,CAACQ,EAAe,+BAA+B,CAAC,GAAGR,MAAY;AAAA,EAAA,CAChE,GACKS,IAAcF;AAAAA,IAClBC,EAAe,mBAAmB;AAAA,IAClCA,EAAe,sBAAsBf,CAAK,EAAE;AAAA,IAC5C;AAAA,MACE,CAACe,EAAe,yBAAyB,CAAC,GAAGR,MAAY;AAAA,MACzD,CAACQ,EAAe,sBAAsBb,CAAI,EAAE,CAAC,GAAGA;AAAA,MAChD,CAACa,EAAe,2BAA2B,CAAC,GAAGP,MAAe;AAAA,IAChE;AAAA,IACAT;AAAA,EAAA;AAGA,SAAAJ,gBAAAA,EAAA,cAAC,MAAG,EAAA,WAAWkB,GAAW,KAAAhB,GAAU,eAAaQ,GAAQ,oBAAkBY,EAAY,KACpF,GAAAT,MAAe,OACdb,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWqB;AAAA,MACX,KAAKN;AAAA,MACL,KAAKJ,MAAW,WAAW,wBAAwB;AAAA,MACnD,QAAAA;AAAA,MACC,GAAGG;AAAA,IAAA;AAAA,IAEHS,EAAiBpB,GAAU,QAAQa,GAAWT,GAAMC,IAAUgB,IAAe,QAAWlB,CAAI;AAAA,EAC/F,GAEDO,MAAe,YACdb,gBAAAA,EAAA,cAAC,YAAO,WAAWqB,GAAa,KAAKN,GAAgD,MAAK,UAAU,GAAGD,EACpG,GAAAS,EAAiBpB,GAAU,QAAQa,GAAWT,GAAMC,IAAUgB,IAAe,QAAWlB,CAAI,CAC/F,CAEJ;AAEJ,CAAC,GAEYmB,IAAWzB,EAAM,WAAW,SAA8BC,GAAsBC,GAAkC;AAC7H,QAAM,EAAE,UAAAC,GAAU,WAAAC,IAAY,IAAI,SAAAI,IAAU,IAAO,MAAAD,IAAO,UAAU,OAAAF,GAAO,QAAAK,GAAQ,SAAAE,IAAU,OAAA,IAAWX;AAEtG,SAAAD,gBAAAA,EAAA,cAAC,QAAG,KAAAE,GAAU,WAAWiB,EAAGC,EAAe,WAAW,GAAGhB,CAAS,GAAG,eAAaM,GAAQ,oBAAkBY,EAAY,SACrH,GAAAtB,EAAM,SAAS,IAAIG,GAAU,CAACuB,MAA2D;AACnF,QAAAA,EAAwC,SAAS3B;AAC7C,aAAAC,EAAM,aAAa0B,GAAwC,EAAE,OAAArB,GAAO,MAAAE,GAAM,SAAAC,GAAS,SAAAI,GAAS;AAAA,EAEtG,CAAA,CACH;AAEJ,CAAC;AAEDa,EAAS,OAAO1B;AAChBA,EAAK,cAAc;AAEnB,MAAA4B,IAAeF;"}

package/components/LinkList/LinkList.stories.d.ts

@@ -0,0 +1,46 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import("./LinkList").CompoundComponent;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    args: {
+        children: string;
+        chevron: false;
+        size: "medium";
+        color: "blueberry";
+    };
+    argTypes: {
+        chevron: {
+            control: string;
+        };
+        variant: {
+            control: string;
+            options: string[];
+        };
+        size: {
+            control: string;
+            options: import("./LinkList").LinkListSize[];
+        };
+        color: {
+            control: string;
+            options: import("./LinkList").LinkListColors[];
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithIconAndChevron: Story;
+export declare const WithListHeaderComp: Story;
+export declare const WithAvatarAndBadge: Story;
+export declare const VariantLine: Story;
+export declare const VariantOutline: Story;
+export declare const VariantFill: Story;
+export declare const WithRef: Story;
+export declare const AsButton: Story;

package/components/LinkList/index.d.ts

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

package/components/List/List.d.ts

@@ -21,4 +21,3 @@ export interface ListCompound extends React.FC<ListProps> {
 }
 declare const List: ListCompound;
 export default List;
-//# sourceMappingURL=List.d.ts.map

package/components/List/List.stories.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import("./List").ListCompound;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+            page: () => React.JSX.Element;
+        };
+    };
+    args: {
+        children: string;
+        variant: "bullet";
+        margin: false;
+    };
+    argTypes: {
+        variant: {
+            control: string;
+            options: string[];
+        };
+        margin: {
+            control: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Bullet: Story;
+export declare const Dashed: Story;
+export declare const Numbered: Story;
+export declare const Nested: Story;

package/components/List/index.d.ts

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

package/components/ListHeader/ListHeader.d.ts

@@ -5,7 +5,7 @@ import { BadgeProps, BadgeType } from '../Badge';
 import { SvgIcon } from '../Icon';
 import { TitleTags } from '../Title';
 export type ListHeaderSize = 'small' | 'medium' | 'large';
-export interface ListHeaderType extends React.ForwardRefExoticComponent<ListHeaderProps & React.RefAttributes<HTMLLIElement>> {
+export interface ListHeaderType extends React.FC<ListHeaderProps> {
     Avatar?: AvatarType;
     Badge?: BadgeType;
     ListHeaderText?: ListHeaderTextType;
@@ -41,4 +41,3 @@ type ChildrenMapper = (children: React.ReactNode, isJsxChild?: boolean) => ListH
 export declare const mapChildren: ChildrenMapper;
 export declare const ListHeader: ListHeaderType;
 export default ListHeader;
-//# sourceMappingURL=ListHeader.d.ts.map

package/components/ListHeader/ListHeader.js

@@ -1,73 +1,80 @@
-import s from "react";
-import _ from "classnames";
-import k from "./ListHeaderText/ListHeaderText.js";
-import { useBreakpoint as A, Breakpoint as R } from "../../hooks/useBreakpoint.js";
-import { isComponent as u, isComponentWithChildren as b } from "../../utils/component.js";
-import B, { AvatarSize as p } from "../Avatar/Avatar.js";
-import w from "../Badge/Badge.js";
-import { Icon as X } from "../Icon/Icon.js";
+import r from "react";
+import h from "classnames";
+import L from "./ListHeaderText/ListHeaderText.js";
+import { useBreakpoint as k, Breakpoint as A } from "../../hooks/useBreakpoint.js";
+import { isComponent as u, isComponentWithChildren as N } from "../../utils/component.js";
+import $, { AvatarSize as B } from "../Avatar/Avatar.js";
+import R from "../Badge/Badge.js";
+import { Icon as p } from "../Icon/Icon.js";
 import { IconSize as C } from "../../constants.js";
 import t from "./styles.module.scss";
-const P = (l, h, c, m, o, i) => {
-  if (u(l, E))
-    return s.cloneElement(l, {
-      chevronIcon: o,
-      icon: i,
-      isHovered: c,
-      size: m
+const K = (m, f, _, i, c, o) => {
+  if (u(m, E))
+    return r.cloneElement(m, {
+      chevronIcon: c,
+      icon: o,
+      isHovered: _,
+      size: i
     });
-  if (l)
-    return /* @__PURE__ */ s.createElement(E, { titleHtmlMarkup: h, chevronIcon: o, icon: i, isHovered: c, size: m }, l);
-}, N = (l, h = !1) => {
-  var d, v, f, n;
-  let c, m;
-  const o = [], i = [], r = [];
-  s.Children.forEach(l, (e) => {
-    e === null || typeof e > "u" || (u(e, B) ? c = e : u(e, k) ? o.push(e) : u(e, w) ? m = e : typeof e == "string" ? i.push(e) : r.push(e));
+  if (m)
+    return /* @__PURE__ */ r.createElement(E, { titleHtmlMarkup: f, chevronIcon: c, icon: o, isHovered: _, size: i }, m);
+}, b = (m, f = !1) => {
+  var d, g, s, e;
+  let _, i;
+  const c = [], o = [], l = [];
+  r.Children.forEach(m, (a) => {
+    a === null || typeof a > "u" || (u(a, $) ? _ = a : u(a, L) ? c.push(a) : u(a, R) ? i = a : typeof a == "string" ? o.push(a) : l.push(a));
   });
-  const g = c !== void 0 || o.length > 0 || m !== void 0 && i.length > 0, a = r.length === 0 || b(r[0]) && typeof ((v = (d = r[0]) == null ? void 0 : d.props) == null ? void 0 : v.children) > "u";
-  if (h || g || a)
-    return { avatarChild: c, listHeaderTextChildren: o, badgeChild: m, stringChildren: i, remainingChildren: r };
-  if (b(r[0]))
-    return N((n = (f = r[0]) == null ? void 0 : f.props) == null ? void 0 : n.children, !0);
-}, E = s.forwardRef((l, h) => {
-  const { className: c = "", titleHtmlMarkup: m = "h2", chevronIcon: o, children: i, icon: r, isHovered: g, size: a, testId: d } = l, v = A(), f = a !== "small" && !!(o || r), n = typeof i == "string", e = N(i), H = (e == null ? void 0 : e.avatarChild) || (e == null ? void 0 : e.listHeaderTextChildren) && e.listHeaderTextChildren.length > 0 || (e == null ? void 0 : e.remainingChildren) && (e == null ? void 0 : e.remainingChildren.length) > 0, x = _(
+  const n = _ !== void 0 || c.length > 0 || i !== void 0 && o.length > 0, v = l.length === 0 || N(l[0]) && typeof ((g = (d = l[0]) == null ? void 0 : d.props) == null ? void 0 : g.children) > "u";
+  if (f || n || v)
+    return { avatarChild: _, listHeaderTextChildren: c, badgeChild: i, stringChildren: o, remainingChildren: l };
+  if (N(l[0]))
+    return b((e = (s = l[0]) == null ? void 0 : s.props) == null ? void 0 : e.children, !0);
+}, E = (m) => {
+  const { className: f = "", titleHtmlMarkup: _ = "h2", chevronIcon: i, children: c, icon: o, isHovered: l, size: n, testId: v } = m, d = k(), g = n !== "small" && !!(i || o), s = typeof c == "string", e = b(c), a = (e == null ? void 0 : e.avatarChild) || (e == null ? void 0 : e.listHeaderTextChildren) && e.listHeaderTextChildren.length > 0 || (e == null ? void 0 : e.remainingChildren) && (e == null ? void 0 : e.remainingChildren.length) > 0, H = h(
     t["list-header"],
     {
-      [t["list-header--for-element-content"]]: !n,
-      [t["list-header--top-align-content"]]: H
+      [t["list-header--for-element-content"]]: !s,
+      [t["list-header--top-align-content"]]: a
     },
-    c
-  ), S = _(t["list-header__badge"], {
-    [t["list-header__badge--for-string-content"]]: n,
-    [t["list-header__badge--right"]]: !n,
-    [t["list-header__badge--" + a]]: !n && a
-  }), y = _(t["list-header__chevron"], {
-    [t["list-header__chevron--for-string-content"]]: n,
-    [t["list-header__chevron--" + a]]: !n && a
-  }), I = _(t["list-header__content"], {
-    [t["list-header__content--string"]]: n,
-    [t["list-header__content--element"]]: !n,
-    [t["list-header__content--spacing"]]: !(e != null && e.avatarChild) && !r
-  }), T = _(t["list-header__icon"], {
-    [t["list-header__icon--for-string-content"]]: n,
-    [t["list-header__icon--for-element-content"]]: !n,
-    [t["list-header__icon--for-element-content--" + a]]: !n && a
-  }), z = _(t["list-header__avatar"], {
-    [t["list-header__avatar--for-string-content"]]: n,
-    [t["list-header__avatar--for-element-content"]]: !n,
-    [t["list-header__avatar--for-element-content--" + a]]: !n && a
-  }), L = m;
-  return /* @__PURE__ */ s.createElement("span", { "data-testid": d, className: x }, f && r && /* @__PURE__ */ s.createElement("span", { className: T }, s.cloneElement(r, {
-    size: v === R.xs ? C.XSmall : C.Small,
-    isHovered: g
-  })), a !== "small" && (e == null ? void 0 : e.avatarChild) && /* @__PURE__ */ s.createElement("span", { className: z }, s.cloneElement(e.avatarChild, { size: p.xsmall })), /* @__PURE__ */ s.createElement("span", { className: I }, e == null ? void 0 : e.listHeaderTextChildren, !!(e != null && e.stringChildren.length) && /* @__PURE__ */ s.createElement(L, { className: t["list-header__title"] }, e.stringChildren), e == null ? void 0 : e.remainingChildren), (e == null ? void 0 : e.badgeChild) && /* @__PURE__ */ s.createElement("span", { className: S }, e.badgeChild), f && o && /* @__PURE__ */ s.createElement("span", { className: y }, /* @__PURE__ */ s.createElement(X, { svgIcon: o, isHovered: g, size: C.XSmall })));
-});
+    f
+  ), x = h(
+    t["list-header__badge"],
+    {
+      [t["list-header__badge--for-string-content"]]: s
+    },
+    !s && n && t[`list-header__badge--${n}`]
+  ), S = h(t["list-header__chevron"], !s && n && t[`list-header__chevron--${n}`], {
+    [t["list-header__chevron--for-string-content"]]: s
+  }), y = h(t["list-header__content"], {
+    [t["list-header__content--string"]]: s,
+    [t["list-header__content--element"]]: !s,
+    [t["list-header__content--spacing"]]: !(e != null && e.avatarChild) && !o
+  }), I = h(
+    t["list-header__icon"],
+    !s && n && (n === "medium" || n === "large") && t[`list-header__icon--for-element-content--${n}`],
+    {
+      [t["list-header__icon--for-string-content"]]: s,
+      [t["list-header__icon--for-element-content"]]: !s
+    }
+  ), T = h(
+    t["list-header__avatar"],
+    !s && n && (n === "medium" || n === "large") && t[`list-header__avatar--for-element-content--${n}`],
+    {
+      [t["list-header__avatar--for-string-content"]]: s,
+      [t["list-header__avatar--for-element-content"]]: !s
+    }
+  ), z = _;
+  return /* @__PURE__ */ r.createElement("span", { "data-testid": v, className: H }, g && o && /* @__PURE__ */ r.createElement("span", { className: I }, r.cloneElement(o, {
+    size: d === A.xs ? C.XSmall : C.Small,
+    isHovered: l
+  })), n !== "small" && (e == null ? void 0 : e.avatarChild) && /* @__PURE__ */ r.createElement("span", { className: T }, r.cloneElement(e.avatarChild, { size: B.xsmall })), /* @__PURE__ */ r.createElement("span", { className: y }, e == null ? void 0 : e.listHeaderTextChildren, !!(e != null && e.stringChildren.length) && /* @__PURE__ */ r.createElement(z, { className: t["list-header__title"] }, e.stringChildren), e == null ? void 0 : e.remainingChildren), (e == null ? void 0 : e.badgeChild) && /* @__PURE__ */ r.createElement("span", { className: x }, e.badgeChild), g && i && /* @__PURE__ */ r.createElement("span", { className: S }, /* @__PURE__ */ r.createElement(p, { svgIcon: i, isHovered: l, size: C.XSmall })));
+};
 E.displayName = "ListHeader";
 export {
   E as ListHeader,
   E as default,
-  N as mapChildren,
-  P as renderListHeader
+  b as mapChildren,
+  K as renderListHeader
 };
 //# sourceMappingURL=ListHeader.js.map

package/components/ListHeader/ListHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListHeader.js","sources":["../../../src/components/ListHeader/ListHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport ListHeaderText, { ListHeaderTextProps, ListHeaderTextType } from './ListHeaderText/ListHeaderText';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { isComponent, isComponentWithChildren } from '../../utils/component';\nimport Avatar, { AvatarProps, AvatarSize, AvatarType } from '../Avatar';\nimport Badge, { BadgeProps, BadgeType } from '../Badge';\nimport Icon, { IconSize, SvgIcon } from '../Icon';\nimport { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\nexport type ListHeaderSize = 'small' | 'medium' | 'large';\n\nexport interface ListHeaderType extends React.ForwardRefExoticComponent<ListHeaderProps & React.RefAttributes<HTMLLIElement>> {\n  Avatar?: AvatarType;\n  Badge?: BadgeType;\n  ListHeaderText?: ListHeaderTextType;\n}\n\nexport const renderListHeader = (\n  element: React.ReactNode,\n  titleHtmlMarkup: TitleTags,\n  isHovered: boolean,\n  size: ListHeaderSize,\n  chevronIcon?: SvgIcon,\n  icon?: React.ReactElement\n): JSX.Element | undefined => {\n  if (isComponent<ListHeaderProps>(element, ListHeader)) {\n    return React.cloneElement(element, {\n      chevronIcon,\n      icon,\n      isHovered,\n      size,\n    });\n  }\n  if (element) {\n    return (\n      <ListHeader titleHtmlMarkup={titleHtmlMarkup} chevronIcon={chevronIcon} icon={icon} isHovered={isHovered} size={size}>\n        {element}\n      </ListHeader>\n    );\n  }\n};\n\nexport interface ListHeaderProps {\n  /** Adds custom classes to the ListHeader element. */\n  className?: string;\n  /** Chevron to render inside of the ListHeader */\n  chevronIcon?: SvgIcon;\n  /** Children to be rendered inside of ListHeader */\n  children: React.ReactNode;\n  /** Changes the underlying element of the title. Default: h2*/\n  titleHtmlMarkup?: TitleTags;\n  /** icon to be rendered inside of ListHeader */\n  icon?: React.ReactElement;\n  /** whether or not the parent is hovered */\n  isHovered?: boolean;\n  /** Changes size of the ListHeader. */\n  size?: ListHeaderSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\ninterface ListHeaderChildren {\n  avatarChild?: React.ReactElement<AvatarProps>;\n  listHeaderTextChildren: React.ReactElement<ListHeaderTextProps>[];\n  badgeChild?: React.ReactElement<BadgeProps>;\n  elementChild?: React.ReactElement;\n  stringChildren: string[];\n  remainingChildren: React.ReactNode[];\n}\n\ntype ChildrenMapper = (children: React.ReactNode, isJsxChild?: boolean) => ListHeaderChildren | undefined;\n\nexport const mapChildren: ChildrenMapper = (children, isJsxChild = false) => {\n  let avatarChild: React.ReactElement<AvatarProps> | undefined;\n  let badgeChild: React.ReactElement<BadgeProps> | undefined;\n  const listHeaderTextChildren: React.ReactElement<ListHeaderTextProps>[] = [];\n  const stringChildren: string[] = [];\n  const remainingChildren: React.ReactNode[] = [];\n\n  React.Children.forEach(children, child => {\n    if (child === null || typeof child === 'undefined') return;\n    if (isComponent<AvatarProps>(child, Avatar)) {\n      avatarChild = child;\n    } else if (isComponent<ListHeaderTextProps>(child, ListHeaderText)) {\n      listHeaderTextChildren.push(child);\n    } else if (isComponent<BadgeProps>(child, Badge)) {\n      badgeChild = child;\n    } else if (typeof child === 'string') {\n      stringChildren.push(child);\n    } else {\n      remainingChildren.push(child);\n    }\n  });\n\n  // Dette og recursive mapChildren under(gjøres en gang) er for å passe på at jsx children også sjekkes for Avatar og liknende innhold.\n  // Slik opprettholder vi stylingen i tilfeller hvor vertikaler har wrappet elementer i en parent span eller div.\n  const hasSpecialChildren =\n    avatarChild !== undefined || listHeaderTextChildren.length > 0 || (badgeChild !== undefined && stringChildren.length > 0);\n  const noRemainingRecursiveChildren =\n    remainingChildren.length === 0 ||\n    (isComponentWithChildren(remainingChildren[0]) && typeof remainingChildren[0]?.props?.children === 'undefined');\n\n  if (isJsxChild || hasSpecialChildren || noRemainingRecursiveChildren) {\n    return { avatarChild, listHeaderTextChildren, badgeChild, stringChildren, remainingChildren };\n  }\n\n  if (isComponentWithChildren(remainingChildren[0])) {\n    return mapChildren(remainingChildren[0]?.props?.children, true);\n  }\n};\n\nexport const ListHeader: ListHeaderType = React.forwardRef((props: ListHeaderProps, ref: React.Ref<HTMLLIElement>) => {\n  const { className = '', titleHtmlMarkup = 'h2', chevronIcon, children, icon, isHovered, size, testId } = props;\n  const breakpoint = useBreakpoint();\n  const showChevronAndIcon = size !== 'small' && !!(chevronIcon || icon);\n  const contentIsString = typeof children === 'string';\n  const mappedChildren = mapChildren(children);\n  const topAlignContent =\n    mappedChildren?.avatarChild ||\n    (mappedChildren?.listHeaderTextChildren && mappedChildren.listHeaderTextChildren.length > 0) ||\n    (mappedChildren?.remainingChildren && mappedChildren?.remainingChildren.length > 0);\n\n  const listLabelClasses = cn(\n    styles['list-header'],\n    {\n      [styles['list-header--for-element-content']]: !contentIsString,\n      [styles['list-header--top-align-content']]: topAlignContent,\n    },\n    className\n  );\n  const badgeClasses = cn(styles['list-header__badge'], {\n    [styles['list-header__badge--for-string-content']]: contentIsString,\n    [styles['list-header__badge--right']]: !contentIsString,\n    [styles['list-header__badge--' + size]]: !contentIsString && size,\n  });\n  const chevronClasses = cn(styles['list-header__chevron'], {\n    [styles['list-header__chevron--for-string-content']]: contentIsString,\n    [styles['list-header__chevron--' + size]]: !contentIsString && size,\n  });\n  const contentClasses = cn(styles['list-header__content'], {\n    [styles['list-header__content--string']]: contentIsString,\n    [styles['list-header__content--element']]: !contentIsString,\n    [styles['list-header__content--spacing']]: !mappedChildren?.avatarChild && !icon,\n  });\n  const iconClasses = cn(styles['list-header__icon'], {\n    [styles['list-header__icon--for-string-content']]: contentIsString,\n    [styles['list-header__icon--for-element-content']]: !contentIsString,\n    [styles['list-header__icon--for-element-content--' + size]]: !contentIsString && size,\n  });\n  const avatarClasses = cn(styles['list-header__avatar'], {\n    [styles['list-header__avatar--for-string-content']]: contentIsString,\n    [styles['list-header__avatar--for-element-content']]: !contentIsString,\n    [styles['list-header__avatar--for-element-content--' + size]]: !contentIsString && size,\n  });\n  const CustomTag = titleHtmlMarkup;\n  return (\n    <span data-testid={testId} className={listLabelClasses}>\n      {showChevronAndIcon && icon && (\n        <span className={iconClasses}>\n          {React.cloneElement(icon, {\n            size: breakpoint === Breakpoint.xs ? IconSize.XSmall : IconSize.Small,\n            isHovered,\n          })}\n        </span>\n      )}\n      {size !== 'small' && mappedChildren?.avatarChild && (\n        <span className={avatarClasses}>{React.cloneElement(mappedChildren.avatarChild, { size: AvatarSize.xsmall })}</span>\n      )}\n      <span className={contentClasses}>\n        {mappedChildren?.listHeaderTextChildren}\n        {!!mappedChildren?.stringChildren.length && (\n          <CustomTag className={styles['list-header__title']}>{mappedChildren.stringChildren}</CustomTag>\n        )}\n        {mappedChildren?.remainingChildren}\n      </span>\n\n      {mappedChildren?.badgeChild && <span className={badgeClasses}>{mappedChildren.badgeChild}</span>}\n      {showChevronAndIcon && chevronIcon && (\n        <span className={chevronClasses}>\n          <Icon svgIcon={chevronIcon} isHovered={isHovered} size={IconSize.XSmall} />\n        </span>\n      )}\n    </span>\n  );\n});\n\nListHeader.displayName = 'ListHeader';\n\nexport default ListHeader;\n"],"names":["renderListHeader","element","titleHtmlMarkup","isHovered","size","chevronIcon","icon","isComponent","ListHeader","React","mapChildren","children","isJsxChild","avatarChild","badgeChild","listHeaderTextChildren","stringChildren","remainingChildren","child","Avatar","ListHeaderText","Badge","hasSpecialChildren","noRemainingRecursiveChildren","isComponentWithChildren","_b","_a","_d","_c","props","ref","className","testId","breakpoint","useBreakpoint","showChevronAndIcon","contentIsString","mappedChildren","topAlignContent","listLabelClasses","cn","styles","badgeClasses","chevronClasses","contentClasses","iconClasses","avatarClasses","CustomTag","Breakpoint","IconSize","AvatarSize","Icon"],"mappings":"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"}
+{"version":3,"file":"ListHeader.js","sources":["../../../src/components/ListHeader/ListHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport ListHeaderText, { ListHeaderTextProps, ListHeaderTextType } from './ListHeaderText/ListHeaderText';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { isComponent, isComponentWithChildren } from '../../utils/component';\nimport Avatar, { AvatarProps, AvatarSize, AvatarType } from '../Avatar';\nimport Badge, { BadgeProps, BadgeType } from '../Badge';\nimport Icon, { IconSize, SvgIcon } from '../Icon';\nimport { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\nexport type ListHeaderSize = 'small' | 'medium' | 'large';\n\nexport interface ListHeaderType extends React.FC<ListHeaderProps> {\n  Avatar?: AvatarType;\n  Badge?: BadgeType;\n  ListHeaderText?: ListHeaderTextType;\n}\n\nexport const renderListHeader = (\n  element: React.ReactNode,\n  titleHtmlMarkup: TitleTags,\n  isHovered: boolean,\n  size: ListHeaderSize,\n  chevronIcon?: SvgIcon,\n  icon?: React.ReactElement\n): JSX.Element | undefined => {\n  if (isComponent<ListHeaderProps>(element, ListHeader)) {\n    return React.cloneElement(element, {\n      chevronIcon,\n      icon,\n      isHovered,\n      size,\n    });\n  }\n  if (element) {\n    return (\n      <ListHeader titleHtmlMarkup={titleHtmlMarkup} chevronIcon={chevronIcon} icon={icon} isHovered={isHovered} size={size}>\n        {element}\n      </ListHeader>\n    );\n  }\n};\n\nexport interface ListHeaderProps {\n  /** Adds custom classes to the ListHeader element. */\n  className?: string;\n  /** Chevron to render inside of the ListHeader */\n  chevronIcon?: SvgIcon;\n  /** Children to be rendered inside of ListHeader */\n  children: React.ReactNode;\n  /** Changes the underlying element of the title. Default: h2*/\n  titleHtmlMarkup?: TitleTags;\n  /** icon to be rendered inside of ListHeader */\n  icon?: React.ReactElement;\n  /** whether or not the parent is hovered */\n  isHovered?: boolean;\n  /** Changes size of the ListHeader. */\n  size?: ListHeaderSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\ninterface ListHeaderChildren {\n  avatarChild?: React.ReactElement<AvatarProps>;\n  listHeaderTextChildren: React.ReactElement<ListHeaderTextProps>[];\n  badgeChild?: React.ReactElement<BadgeProps>;\n  elementChild?: React.ReactElement;\n  stringChildren: string[];\n  remainingChildren: React.ReactNode[];\n}\n\ntype ChildrenMapper = (children: React.ReactNode, isJsxChild?: boolean) => ListHeaderChildren | undefined;\n\nexport const mapChildren: ChildrenMapper = (children, isJsxChild = false) => {\n  let avatarChild: React.ReactElement<AvatarProps> | undefined;\n  let badgeChild: React.ReactElement<BadgeProps> | undefined;\n  const listHeaderTextChildren: React.ReactElement<ListHeaderTextProps>[] = [];\n  const stringChildren: string[] = [];\n  const remainingChildren: React.ReactNode[] = [];\n\n  React.Children.forEach(children, child => {\n    if (child === null || typeof child === 'undefined') return;\n    if (isComponent<AvatarProps>(child, Avatar)) {\n      avatarChild = child;\n    } else if (isComponent<ListHeaderTextProps>(child, ListHeaderText)) {\n      listHeaderTextChildren.push(child);\n    } else if (isComponent<BadgeProps>(child, Badge)) {\n      badgeChild = child;\n    } else if (typeof child === 'string') {\n      stringChildren.push(child);\n    } else {\n      remainingChildren.push(child);\n    }\n  });\n\n  // Dette og recursive mapChildren under(gjøres en gang) er for å passe på at jsx children også sjekkes for Avatar og liknende innhold.\n  // Slik opprettholder vi stylingen i tilfeller hvor vertikaler har wrappet elementer i en parent span eller div.\n  const hasSpecialChildren =\n    avatarChild !== undefined || listHeaderTextChildren.length > 0 || (badgeChild !== undefined && stringChildren.length > 0);\n  const noRemainingRecursiveChildren =\n    remainingChildren.length === 0 ||\n    (isComponentWithChildren(remainingChildren[0]) && typeof remainingChildren[0]?.props?.children === 'undefined');\n\n  if (isJsxChild || hasSpecialChildren || noRemainingRecursiveChildren) {\n    return { avatarChild, listHeaderTextChildren, badgeChild, stringChildren, remainingChildren };\n  }\n\n  if (isComponentWithChildren(remainingChildren[0])) {\n    return mapChildren(remainingChildren[0]?.props?.children, true);\n  }\n};\n\nexport const ListHeader: ListHeaderType = props => {\n  const { className = '', titleHtmlMarkup = 'h2', chevronIcon, children, icon, isHovered, size, testId } = props;\n  const breakpoint = useBreakpoint();\n  const showChevronAndIcon = size !== 'small' && !!(chevronIcon || icon);\n  const contentIsString = typeof children === 'string';\n  const mappedChildren = mapChildren(children);\n  const topAlignContent =\n    mappedChildren?.avatarChild ||\n    (mappedChildren?.listHeaderTextChildren && mappedChildren.listHeaderTextChildren.length > 0) ||\n    (mappedChildren?.remainingChildren && mappedChildren?.remainingChildren.length > 0);\n\n  const listLabelClasses = cn(\n    styles['list-header'],\n    {\n      [styles['list-header--for-element-content']]: !contentIsString,\n      [styles['list-header--top-align-content']]: topAlignContent,\n    },\n    className\n  );\n  const badgeClasses = cn(\n    styles['list-header__badge'],\n    {\n      [styles['list-header__badge--for-string-content']]: contentIsString,\n    },\n    !contentIsString && size && styles[`list-header__badge--${size}`]\n  );\n  const chevronClasses = cn(styles['list-header__chevron'], !contentIsString && size && styles[`list-header__chevron--${size}`], {\n    [styles['list-header__chevron--for-string-content']]: contentIsString,\n  });\n  const contentClasses = cn(styles['list-header__content'], {\n    [styles['list-header__content--string']]: contentIsString,\n    [styles['list-header__content--element']]: !contentIsString,\n    [styles['list-header__content--spacing']]: !mappedChildren?.avatarChild && !icon,\n  });\n  const iconClasses = cn(\n    styles['list-header__icon'],\n    !contentIsString && size && (size === 'medium' || size === 'large') && styles[`list-header__icon--for-element-content--${size}`],\n    {\n      [styles['list-header__icon--for-string-content']]: contentIsString,\n      [styles['list-header__icon--for-element-content']]: !contentIsString,\n    }\n  );\n  const avatarClasses = cn(\n    styles['list-header__avatar'],\n    !contentIsString && size && (size === 'medium' || size === 'large') && styles[`list-header__avatar--for-element-content--${size}`],\n    {\n      [styles['list-header__avatar--for-string-content']]: contentIsString,\n      [styles['list-header__avatar--for-element-content']]: !contentIsString,\n    }\n  );\n  const CustomTag = titleHtmlMarkup;\n  return (\n    <span data-testid={testId} className={listLabelClasses}>\n      {showChevronAndIcon && icon && (\n        <span className={iconClasses}>\n          {React.cloneElement(icon, {\n            size: breakpoint === Breakpoint.xs ? IconSize.XSmall : IconSize.Small,\n            isHovered,\n          })}\n        </span>\n      )}\n      {size !== 'small' && mappedChildren?.avatarChild && (\n        <span className={avatarClasses}>{React.cloneElement(mappedChildren.avatarChild, { size: AvatarSize.xsmall })}</span>\n      )}\n      <span className={contentClasses}>\n        {mappedChildren?.listHeaderTextChildren}\n        {!!mappedChildren?.stringChildren.length && (\n          <CustomTag className={styles['list-header__title']}>{mappedChildren.stringChildren}</CustomTag>\n        )}\n        {mappedChildren?.remainingChildren}\n      </span>\n\n      {mappedChildren?.badgeChild && <span className={badgeClasses}>{mappedChildren.badgeChild}</span>}\n      {showChevronAndIcon && chevronIcon && (\n        <span className={chevronClasses}>\n          <Icon svgIcon={chevronIcon} isHovered={isHovered} size={IconSize.XSmall} />\n        </span>\n      )}\n    </span>\n  );\n};\n\nListHeader.displayName = 'ListHeader';\n\nexport default ListHeader;\n"],"names":["renderListHeader","element","titleHtmlMarkup","isHovered","size","chevronIcon","icon","isComponent","ListHeader","React","mapChildren","children","isJsxChild","avatarChild","badgeChild","listHeaderTextChildren","stringChildren","remainingChildren","child","Avatar","ListHeaderText","Badge","hasSpecialChildren","noRemainingRecursiveChildren","isComponentWithChildren","_b","_a","_d","_c","props","className","testId","breakpoint","useBreakpoint","showChevronAndIcon","contentIsString","mappedChildren","topAlignContent","listLabelClasses","cn","styles","badgeClasses","chevronClasses","contentClasses","iconClasses","avatarClasses","CustomTag","Breakpoint","IconSize","AvatarSize","Icon"],"mappings":";;;;;;;;;;AAsBO,MAAMA,IAAmB,CAC9BC,GACAC,GACAC,GACAC,GACAC,GACAC,MAC4B;AACxB,MAAAC,EAA6BN,GAASO,CAAU;AAC3C,WAAAC,EAAM,aAAaR,GAAS;AAAA,MACjC,aAAAI;AAAA,MACA,MAAAC;AAAA,MACA,WAAAH;AAAA,MACA,MAAAC;AAAA,IAAA,CACD;AAEH,MAAIH;AACF,2CACGO,GAAW,EAAA,iBAAAN,GAAkC,aAAAG,GAA0B,MAAAC,GAAY,WAAAH,GAAsB,MAAAC,KACvGH,CACH;AAGN,GAgCaS,IAA8B,CAACC,GAAUC,IAAa,OAAU;;AACvE,MAAAC,GACAC;AACJ,QAAMC,IAAoE,CAAA,GACpEC,IAA2B,CAAA,GAC3BC,IAAuC,CAAA;AAEvCR,EAAAA,EAAA,SAAS,QAAQE,GAAU,CAASO,MAAA;AACpC,IAAAA,MAAU,QAAQ,OAAOA,IAAU,QACnCX,EAAyBW,GAAOC,CAAM,IAC1BN,IAAAK,IACLX,EAAiCW,GAAOE,CAAc,IAC/DL,EAAuB,KAAKG,CAAK,IACxBX,EAAwBW,GAAOG,CAAK,IAChCP,IAAAI,IACJ,OAAOA,KAAU,WAC1BF,EAAe,KAAKE,CAAK,IAEzBD,EAAkB,KAAKC,CAAK;AAAA,EAC9B,CACD;AAIK,QAAAI,IACJT,MAAgB,UAAaE,EAAuB,SAAS,KAAMD,MAAe,UAAaE,EAAe,SAAS,GACnHO,IACJN,EAAkB,WAAW,KAC5BO,EAAwBP,EAAkB,CAAC,CAAC,KAAK,SAAOQ,KAAAC,IAAAT,EAAkB,CAAC,MAAnB,gBAAAS,EAAsB,UAAtB,gBAAAD,EAA6B,YAAa;AAEjG,MAAAb,KAAcU,KAAsBC;AACtC,WAAO,EAAE,aAAAV,GAAa,wBAAAE,GAAwB,YAAAD,GAAY,gBAAAE,GAAgB,mBAAAC,EAAkB;AAG9F,MAAIO,EAAwBP,EAAkB,CAAC,CAAC;AAC9C,WAAOP,GAAYiB,KAAAC,IAAAX,EAAkB,CAAC,MAAnB,gBAAAW,EAAsB,UAAtB,gBAAAD,EAA6B,UAAU,EAAI;AAElE,GAEanB,IAA6B,CAASqB,MAAA;AAC3C,QAAA,EAAE,WAAAC,IAAY,IAAI,iBAAA5B,IAAkB,MAAM,aAAAG,GAAa,UAAAM,GAAU,MAAAL,GAAM,WAAAH,GAAW,MAAAC,GAAM,QAAA2B,EAAA,IAAWF,GACnGG,IAAaC,KACbC,IAAqB9B,MAAS,WAAW,CAAC,EAAEC,KAAeC,IAC3D6B,IAAkB,OAAOxB,KAAa,UACtCyB,IAAiB1B,EAAYC,CAAQ,GACrC0B,KACJD,KAAA,gBAAAA,EAAgB,iBACfA,KAAA,gBAAAA,EAAgB,2BAA0BA,EAAe,uBAAuB,SAAS,MACzFA,KAAA,gBAAAA,EAAgB,uBAAqBA,KAAA,gBAAAA,EAAgB,kBAAkB,UAAS,GAE7EE,IAAmBC;AAAAA,IACvBC,EAAO,aAAa;AAAA,IACpB;AAAA,MACE,CAACA,EAAO,kCAAkC,CAAC,GAAG,CAACL;AAAA,MAC/C,CAACK,EAAO,gCAAgC,CAAC,GAAGH;AAAA,IAC9C;AAAA,IACAP;AAAA,EAAA,GAEIW,IAAeF;AAAAA,IACnBC,EAAO,oBAAoB;AAAA,IAC3B;AAAA,MACE,CAACA,EAAO,wCAAwC,CAAC,GAAGL;AAAA,IACtD;AAAA,IACA,CAACA,KAAmB/B,KAAQoC,EAAO,uBAAuBpC,CAAI,EAAE;AAAA,EAAA,GAE5DsC,IAAiBH,EAAGC,EAAO,sBAAsB,GAAG,CAACL,KAAmB/B,KAAQoC,EAAO,yBAAyBpC,CAAI,EAAE,GAAG;AAAA,IAC7H,CAACoC,EAAO,0CAA0C,CAAC,GAAGL;AAAA,EAAA,CACvD,GACKQ,IAAiBJ,EAAGC,EAAO,sBAAsB,GAAG;AAAA,IACxD,CAACA,EAAO,8BAA8B,CAAC,GAAGL;AAAA,IAC1C,CAACK,EAAO,+BAA+B,CAAC,GAAG,CAACL;AAAA,IAC5C,CAACK,EAAO,+BAA+B,CAAC,GAAG,EAACJ,KAAA,QAAAA,EAAgB,gBAAe,CAAC9B;AAAA,EAAA,CAC7E,GACKsC,IAAcL;AAAAA,IAClBC,EAAO,mBAAmB;AAAA,IAC1B,CAACL,KAAmB/B,MAASA,MAAS,YAAYA,MAAS,YAAYoC,EAAO,2CAA2CpC,CAAI,EAAE;AAAA,IAC/H;AAAA,MACE,CAACoC,EAAO,uCAAuC,CAAC,GAAGL;AAAA,MACnD,CAACK,EAAO,wCAAwC,CAAC,GAAG,CAACL;AAAA,IACvD;AAAA,EAAA,GAEIU,IAAgBN;AAAAA,IACpBC,EAAO,qBAAqB;AAAA,IAC5B,CAACL,KAAmB/B,MAASA,MAAS,YAAYA,MAAS,YAAYoC,EAAO,6CAA6CpC,CAAI,EAAE;AAAA,IACjI;AAAA,MACE,CAACoC,EAAO,yCAAyC,CAAC,GAAGL;AAAA,MACrD,CAACK,EAAO,0CAA0C,CAAC,GAAG,CAACL;AAAA,IACzD;AAAA,EAAA,GAEIW,IAAY5C;AAClB,SACGO,gBAAAA,EAAA,cAAA,QAAA,EAAK,eAAasB,GAAQ,WAAWO,EACnC,GAAAJ,KAAsB5B,KACrBG,gBAAAA,EAAA,cAAC,QAAK,EAAA,WAAWmC,KACdnC,EAAM,aAAaH,GAAM;AAAA,IACxB,MAAM0B,MAAee,EAAW,KAAKC,EAAS,SAASA,EAAS;AAAA,IAChE,WAAA7C;AAAA,EAAA,CACD,CACH,GAEDC,MAAS,YAAWgC,KAAA,gBAAAA,EAAgB,gBAClC3B,gBAAAA,EAAA,cAAA,QAAA,EAAK,WAAWoC,EAAA,GAAgBpC,EAAM,aAAa2B,EAAe,aAAa,EAAE,MAAMa,EAAW,OAAO,CAAC,CAAE,mCAE9G,QAAK,EAAA,WAAWN,EACd,GAAAP,KAAA,gBAAAA,EAAgB,wBAChB,CAAC,EAACA,KAAA,QAAAA,EAAgB,eAAe,WAChC3B,gBAAAA,EAAA,cAACqC,GAAU,EAAA,WAAWN,EAAO,oBAAoB,EAAI,GAAAJ,EAAe,cAAe,GAEpFA,KAAA,gBAAAA,EAAgB,iBACnB,IAECA,KAAA,gBAAAA,EAAgB,eAAe3B,gBAAAA,EAAA,cAAA,QAAA,EAAK,WAAWgC,KAAeL,EAAe,UAAW,GACxFF,KAAsB7B,KACpBI,gBAAAA,EAAA,cAAA,QAAA,EAAK,WAAWiC,EACf,GAAAjC,gBAAAA,EAAA,cAACyC,GAAK,EAAA,SAAS7C,GAAa,WAAAF,GAAsB,MAAM6C,EAAS,OAAA,CAAQ,CAC3E,CAEJ;AAEJ;AAEAxC,EAAW,cAAc;"}

package/components/ListHeader/ListHeaderText/ListHeaderText.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { StatusDotVariant } from '../../StatusDot';
 import { TitleTags } from '../../Title';
-export type ListHeaderTextType = React.ForwardRefExoticComponent<ListHeaderTextProps & React.RefAttributes<HTMLLIElement>>;
+export type ListHeaderTextType = React.FC<ListHeaderTextProps>;
 export interface ListHeaderTextProps {
     /** The first text in the ListHeaderText Component */
     firstText: string;
@@ -24,4 +24,3 @@ export interface ListHeaderTextProps {
 }
 export declare const ListHeaderText: ListHeaderTextType;
 export default ListHeaderText;
-//# sourceMappingURL=ListHeaderText.d.ts.map

package/components/ListHeader/ListHeaderText/ListHeaderText.js

@@ -2,7 +2,7 @@ import e from "react";
 import s from "classnames";
 import _ from "../../StatusDot/StatusDot.js";
 import t from "../styles.module.scss";
-const l = e.forwardRef((m, N) => {
+const l = (m) => {
   const {
     firstText: n,
     firstTextEmphasised: p = !1,
@@ -10,22 +10,22 @@ const l = e.forwardRef((m, N) => {
     secondTextEmphasised: o = !1,
     subText: c = !1,
     statusDotVariant: r,
-    className: d = "",
-    testId: i,
+    className: i = "",
+    testId: d,
     titleHtmlMarkup: x = "span"
-  } = m, f = s(d, t["text-wrapper"], {
+  } = m, f = s(i, t["text-wrapper"], {
     [t["text-wrapper--sub-level"]]: c
   }), T = s({
     [t["text-wrapper__text--emphasised"]]: p
   }), u = s({
     [t["text-wrapper__text--emphasised"]]: o
   }), E = x;
-  return /* @__PURE__ */ e.createElement("span", { "data-testid": i, className: f }, r !== void 0 && /* @__PURE__ */ e.createElement("span", null, /* @__PURE__ */ e.createElement(_, { text: "", variant: r })), /* @__PURE__ */ e.createElement(E, { className: t["list-header__title"] }, /* @__PURE__ */ e.createElement("span", { className: T }, n), a && /* @__PURE__ */ e.createElement("span", { className: u }, a)));
-});
+  return /* @__PURE__ */ e.createElement("span", { "data-testid": d, className: f }, r !== void 0 && /* @__PURE__ */ e.createElement("span", null, /* @__PURE__ */ e.createElement(_, { text: "", variant: r })), /* @__PURE__ */ e.createElement(E, { className: t["list-header__title"] }, /* @__PURE__ */ e.createElement("span", { className: T }, n), a && /* @__PURE__ */ e.createElement("span", { className: u }, a)));
+};
 l.displayName = "ListHeaderText";
-const C = l;
+const w = l;
 export {
   l as ListHeaderText,
-  C as default
+  w as default
 };
 //# sourceMappingURL=ListHeaderText.js.map