@helsenorge/designsystem-react 7.7.0 → 7.8.0

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+## [7.7.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv7.6.0&targetVersion=GTv7.7.0) (2024-05-28)
+
+### Features
+
+- ny type notification Badge og tillates flere badges i ListHeader
+  ([0768e0a](https://github.com/helsenorge/designsystem/commit/0768e0ae1d137f17ecfa92aa2b708ca52862e6b2)), closes
+  [#325119](https://github.com/helsenorge/designsystem/issues/325119)
+- **expander:** bruk token på bakgrunn for liten expander
+  ([73d8531](https://github.com/helsenorge/designsystem/commit/73d8531a52ed5a6387af8fa84045a0afd620eb38)), closes
+  [#324989](https://github.com/helsenorge/designsystem/issues/324989)
+- **notificationpanel:** bruk Expander-komponent i NotificationPanel
+  ([e8d4e8d](https://github.com/helsenorge/designsystem/commit/e8d4e8d776333f243cddba8f15742dd6f271bb3d)), closes
+  [#324989](https://github.com/helsenorge/designsystem/issues/324989)
+
+### Bug Fixes
+
+- **expander:** manglende import av supernova stylesheet
+  ([077ec2d](https://github.com/helsenorge/designsystem/commit/077ec2d1f59ce80076deeae5bc7911f7a9a2e431)), closes
+  [#324989](https://github.com/helsenorge/designsystem/issues/324989)
+
 ## [7.6.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv7.5.0&targetVersion=GTv7.6.0) (2024-05-15)
 
 ### Features
@@ -1448,12 +1468,12 @@ Dette er fordi vi skal kunne dynamisk importere alt som ligger i Icons, så da b
 
 ### Bug Fixes
 
-- panel har avstand fra tittel til badge
-  ([09034c4](https://github.com/helsenorge/designsystem/commit/09034c4844408c7cfe8f65d7a1a0d82a7828c2ef)), closes
-  [#282359](https://github.com/helsenorge/designsystem/issues/282359)
 - økt kontrast på understreking av lenker
   ([50b7fa4](https://github.com/helsenorge/designsystem/commit/50b7fa47fb44cb7d75fb877bd53e2309b35e1e21)), closes
   [#229049](https://github.com/helsenorge/designsystem/issues/229049)
+- panel har avstand fra tittel til badge
+  ([09034c4](https://github.com/helsenorge/designsystem/commit/09034c4844408c7cfe8f65d7a1a0d82a7828c2ef)), closes
+  [#282359](https://github.com/helsenorge/designsystem/issues/282359)
 
 ## [1.2.2](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv1.2.1&targetVersion=GTv1.2.2) (2022-08-31)
 

package/components/AnchorLink/styles.module.scss

@@ -10,7 +10,7 @@ $focus-width: 0.15rem;
   cursor: pointer;
   color: $blueberry700;
   background-color: $blueberry60010;
-  border-bottom-color: $blueberry600;
+  text-decoration-color: $blueberry600;
 }
 
 @mixin anchorlink-focus {
@@ -24,12 +24,13 @@ $focus-width: 0.15rem;
   overflow-wrap: break-word;
   word-break: break-word;
   text-align: left;
-  text-decoration: none;
   color: $blueberry600;
   border: $focus-width solid transparent;
-  border-bottom-color: $neutral700;
-  border-bottom-width: $underline-width;
-  padding-bottom: calc($focus-width - $underline-width);
+  text-decoration: underline;
+  text-underline-offset: 0.16rem;
+  text-decoration-color: $blueberry400;
+  text-decoration-thickness: $underline-width;
+  padding: 0.1rem;
 
   &:hover {
     @include anchorlink-hover;

package/components/Button/Button.d.ts

@@ -6,6 +6,7 @@ export type ButtonSize = 'medium' | 'large';
 export type ButtonMode = 'onlight' | 'ondark';
 export type ButtonTags = 'button' | 'a';
 export type ButtonArrows = 'icon' | 'accessibility-character';
+export type ButtonTextPosition = 'left' | 'centered-mobile';
 export interface ButtonProps extends HTMLButtonProps, HTMLAnchorProps, AriaAttributes {
     /** Sets the aria-label of the button, use when the button only includes an icon */
     ariaLabel?: string;
@@ -41,6 +42,8 @@ export interface ButtonProps extends HTMLButtonProps, HTMLAnchorProps, AriaAttri
     tabIndex?: number;
     /** Sets the data-testid attribute. */
     testId?: string;
+    /** Sets the position of the text in the button - only applies when button is fluid */
+    textPosition?: ButtonTextPosition;
     /** Button type. Default: button */
     type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];
 }

package/components/Button/Button.js

@@ -1,116 +1,118 @@
-import o, { useRef as lt, useEffect as ct } from "react";
-import d from "classnames";
-import { Icon as it } from "../Icon/Icon.js";
-import { AnalyticsId as $, IconSize as v } from "../../constants.js";
-import { useBreakpoint as ut } from "../../hooks/useBreakpoint.js";
+import e, { useRef as it, useEffect as ct } from "react";
+import p from "classnames";
+import { Icon as ut } from "../Icon/Icon.js";
+import { AnalyticsId as $, IconSize as N } from "../../constants.js";
+import { useBreakpoint as mt } from "../../hooks/useBreakpoint.js";
 import { useHover as D } from "../../hooks/useHover.js";
-import { useIcons as mt } from "../../hooks/useIcons.js";
-import { getColor as i } from "../../theme/currys/color.js";
-import { breakpoints as bt } from "../../theme/grid.js";
-import { isTest as dt, isProd as pt } from "../../utils/environment.js";
-import ft from "../Icons/ArrowRight.js";
+import { useIcons as bt } from "../../hooks/useIcons.js";
+import { getColor as c } from "../../theme/currys/color.js";
+import { breakpoints as dt } from "../../theme/grid.js";
+import { isTest as pt, isProd as ft } from "../../utils/environment.js";
+import ht from "../Icons/ArrowRight.js";
 import t from "../Button/styles.module.scss";
-const ht = (e, r, n, p, a, g) => g && n ? !a || e ? i("neutral", r ? 500 : 700) : i("white") : n ? !a || e ? i("neutral", 500) : `${i("white")}b3` : e && !a || !e && a ? "white" : p === "normal" ? i("blueberry", 600) : i("cherry", 500), N = (e, r) => r && e ? v.Small : e ? v.Medium : v.XSmall, gt = (e, r, n) => {
-  if (n && e && (r === void 0 || r === ""))
+const _t = (o, r, n, f, s, _) => _ && n ? !s || o ? c("neutral", r ? 500 : 700) : c("white") : n ? !s || o ? c("neutral", 500) : `${c("white")}b3` : o && !s || !o && s ? "white" : f === "normal" ? c("blueberry", 600) : c("cherry", 500), B = (o, r) => r && o ? N.Small : o ? N.Medium : N.XSmall, gt = (o, r, n) => {
+  if (n && o && (r === void 0 || r === ""))
     throw new Error("Fyll inn ariaLabel prop på Button uten tekst for å opprettholde UU krav");
-}, _t = o.forwardRef(function(r, n) {
+}, wt = e.forwardRef(function(r, n) {
   const {
-    ariaLabel: p,
-    id: a,
-    children: g,
+    ariaLabel: f,
+    id: s,
+    children: _,
     wrapperClassName: O,
     className: X,
-    arrow: _,
-    concept: B = "normal",
-    disabled: f = !1,
-    ellipsis: R = !1,
-    fluid: A = !1,
-    htmlMarkup: w = "button",
+    arrow: g,
+    concept: R = "normal",
+    disabled: u = !1,
+    ellipsis: x = !1,
+    fluid: w = !1,
+    htmlMarkup: I = "button",
     mode: j = "onlight",
-    onBlur: E,
-    onClick: x,
+    onBlur: A,
+    onClick: E,
     size: q = "medium",
-    variant: I = "fill",
+    variant: y = "fill",
     href: G,
     tabIndex: S,
     testId: z,
     target: U,
     type: J = "button",
+    textPosition: K = "left",
     ...F
-  } = r, [u, m, H] = mt(o.Children.toArray(g)), { hoverRef: L, isHovered: K } = w === "button" ? D(n) : D(n), Q = lt(null), s = !!(u || m) && !H, M = u && (m || _) && !s, y = j === "ondark", h = ut() < bt.md, P = B === "destructive" && !f, Y = I === "outline", l = I === "borderless", T = ht(I === "fill", l, f, B, y, h), C = _ === "icon" && !l, b = q === "large" && !P && !l, Z = _ === "accessibility-character" && !A && !u && !m && !C && l, tt = { ...F }, V = d(
+  } = r, [m, b, H] = bt(e.Children.toArray(_)), { hoverRef: P, isHovered: Q } = I === "button" ? D(n) : D(n), Y = it(null), a = !!(m || b) && !H, L = m && (b || g) && !a, C = j === "ondark", h = mt() < dt.md, M = R === "destructive" && !u, Z = y === "outline", l = y === "borderless", T = _t(y === "fill", l, u, R, C, h), v = g === "icon" && !l, d = q === "large" && !M && !l, tt = g === "accessibility-character" && !w && !m && !b && !v && l, et = { ...F }, V = p(
     t["button-wrapper"],
-    { [t["button-wrapper--fluid"]]: A || R },
+    { [t["button-wrapper--fluid"]]: w || x },
     O
-  ), ot = d(
+  ), ot = p(
     t.button,
     {
-      [t["button--destructive"]]: P,
-      [t["button--normal"]]: !b,
-      [t["button--large"]]: b,
-      [t["button--outline"]]: Y,
+      [t["button--destructive"]]: M,
+      [t["button--normal"]]: !d,
+      [t["button--large"]]: d,
+      [t["button--outline"]]: Z,
       [t["button--borderless"]]: l,
-      [t["button--left-icon"]]: u && !s,
-      [t["button--right-icon"]]: m && !s,
-      [t["button--both-icons"]]: M,
-      [t["button--only-icon"]]: s,
-      [t["button--arrow"]]: C,
-      [t["button--on-dark"]]: y
+      [t["button--left-icon"]]: m && !a,
+      [t["button--right-icon"]]: b && !a,
+      [t["button--both-icons"]]: L,
+      [t["button--only-icon"]]: a,
+      [t["button--arrow"]]: v,
+      [t["button--on-dark"]]: C
     },
     X
-  ), et = d(t.button__text, {
-    [t["button__text--ellipsis"]]: R
-  }), rt = d(t.diagonal, {
-    [t["diagonal--on-dark"]]: y
+  ), rt = p(t.button__text, {
+    [t["button__text--ellipsis"]]: x,
+    [t["button__text--centered-mobile"]]: w && K === "centered-mobile"
+  }), nt = p(t.diagonal, {
+    [t["diagonal--on-dark"]]: C
   });
   ct(() => {
-    gt(s, p, !dt() && !pt());
+    gt(a, f, !pt() && !ft());
   }, []);
-  const k = (c, at, st) => c ? o.cloneElement(c, {
+  const k = (i, at, lt) => i ? e.cloneElement(i, {
     size: at,
-    color: c != null && c.props.color ? c.props.color : T,
-    isHovered: K,
-    className: st
-  }) : null, nt = () => /* @__PURE__ */ o.createElement("span", { className: et, ref: Q }, f && l && /* @__PURE__ */ o.createElement("span", { className: rt }, /* @__PURE__ */ o.createElement("span", { className: t.diagonal__line })), /* @__PURE__ */ o.createElement("span", null, s ? p : H)), W = () => /* @__PURE__ */ o.createElement("span", { className: ot }, k(u, N(b, h), s ? void 0 : t["button__left-icon"]), nt(), C ? k(
-    /* @__PURE__ */ o.createElement(it, { svgIcon: ft }),
-    N(b, h),
-    d(t.button__arrow, { [t["button__arrow--both-icons"]]: M })
-  ) : k(m, N(b, h), t["button__right-icon"]), Z && /* @__PURE__ */ o.createElement("span", { style: { color: T }, className: t["button__right-unicode-arrow"], "aria-hidden": !0 }, "  →"));
-  return /* @__PURE__ */ o.createElement(o.Fragment, null, w === "button" && /* @__PURE__ */ o.createElement(
+    color: i != null && i.props.color ? i.props.color : T,
+    isHovered: !u && Q,
+    className: lt
+  }) : null, st = () => /* @__PURE__ */ e.createElement("span", { className: rt, ref: Y }, u && l && /* @__PURE__ */ e.createElement("span", { className: nt }, /* @__PURE__ */ e.createElement("span", { className: t.diagonal__line })), /* @__PURE__ */ e.createElement("span", null, a ? f : H)), W = () => /* @__PURE__ */ e.createElement("span", { className: ot }, k(m, B(d, h), a ? void 0 : t["button__left-icon"]), st(), v ? k(
+    /* @__PURE__ */ e.createElement(ut, { svgIcon: ht }),
+    B(d, h),
+    p(t.button__arrow, { [t["button__arrow--both-icons"]]: L })
+  ) : k(b, B(d, h), t["button__right-icon"]), tt && /* @__PURE__ */ e.createElement("span", { style: { color: T }, className: t["button__right-unicode-arrow"], "aria-hidden": !0 }, "  →"));
+  return /* @__PURE__ */ e.createElement(e.Fragment, null, I === "button" && /* @__PURE__ */ e.createElement(
     "button",
     {
-      id: a,
-      onBlur: E,
-      onClick: x,
-      disabled: f,
+      id: s,
+      onBlur: A,
+      onClick: E,
+      disabled: u,
       "data-testid": z,
       "data-analyticsid": $.Button,
       className: V,
-      ref: L,
+      ref: P,
       tabIndex: S,
       type: J,
-      ...tt
+      ...et
     },
     W()
-  ), w === "a" && /* @__PURE__ */ o.createElement(
+  ), I === "a" && /* @__PURE__ */ e.createElement(
     "a",
     {
-      id: a,
-      onBlur: E,
-      onClick: x,
+      id: s,
+      onBlur: A,
+      onClick: E,
       "data-testid": z,
       "data-analyticsid": $.Button,
       className: V,
       href: G,
       target: U,
       rel: U === "_blank" ? "noopener noreferrer" : r.rel,
-      ref: L,
+      ref: P,
       tabIndex: S,
       ...F
     },
     W()
   ));
-}), zt = _t;
+}), Ut = wt;
 export {
-  zt as default
+  Ut as default
 };
 //# sourceMappingURL=Button.js.map

package/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, { AriaAttributes, useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport Icon, { IconSize } from './../Icon';\nimport { HTMLButtonProps, HTMLAnchorProps, AnalyticsId } from '../../constants';\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { BaseIconElement, useIcons } from '../../hooks/useIcons';\nimport { getColor } from '../../theme/currys/color';\nimport { breakpoints } from '../../theme/grid';\nimport { isTest, isProd } from '../../utils/environment';\nimport ArrowRight from '../Icons/ArrowRight';\n\nimport buttonStyles from './styles.module.scss';\n\nexport type ButtonConcept = 'normal' | 'destructive';\nexport type ButtonVariant = 'fill' | 'outline' | 'borderless';\nexport type ButtonSize = 'medium' | 'large';\nexport type ButtonMode = 'onlight' | 'ondark';\nexport type ButtonTags = 'button' | 'a';\nexport type ButtonArrows = 'icon' | 'accessibility-character';\n\nexport interface ButtonProps extends HTMLButtonProps, HTMLAnchorProps, AriaAttributes {\n  /** Sets the aria-label of the button, use when the button only includes an icon */\n  ariaLabel?: string;\n  /** Gives a unique id to the button */\n  id?: string;\n  /** Sets the content of the button. */\n  children: React.ReactNode;\n  /** Adds custom classes to the wrapper element. */\n  wrapperClassName?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Enables an arrow icon to the right inside the button (Not available in borderless variant) */\n  arrow?: ButtonArrows;\n  /** Changes the intent of the button. Mostly changes the color profile. */\n  concept?: ButtonConcept;\n  /** Disables text wrapping and enables ellipsis. */\n  ellipsis?: boolean;\n  /** Makes the button scale to full width of its parent element. */\n  fluid?: boolean;\n  /** Changes the underlying element of the button. */\n  htmlMarkup?: ButtonTags;\n  /** Changes the button colors for different backgrounds. */\n  mode?: ButtonMode;\n  /** Function that is called when the Button loses focus */\n  onBlur?: () => void;\n  /** Function that is called when clicked */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent> | React.FormEvent<{}> | React.KeyboardEvent<HTMLUListElement> | null) => void;\n  /** Changes the button colors for different backgrounds. (Large not available in borderless variant) */\n  size?: ButtonSize;\n  /** Changes the visual representation of the button. */\n  variant?: ButtonVariant;\n  /** Specifies the focus order relative to the other buttons or controls on the page  */\n  tabIndex?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Button type. Default: button */\n  type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];\n}\n\nconst getIconColor = (\n  fill: boolean,\n  borderless: boolean,\n  disabled: boolean,\n  concept: ButtonConcept,\n  ondark: boolean,\n  mobile: boolean\n): string => {\n  if (mobile && disabled) {\n    return !ondark || fill ? getColor('neutral', !borderless ? 700 : 500) : getColor('white');\n  }\n  if (disabled) {\n    return !ondark || fill ? getColor('neutral', 500) : `${getColor('white')}b3`;\n  }\n  if ((fill && !ondark) || (!fill && ondark)) {\n    return 'white';\n  }\n\n  return concept === 'normal' ? getColor('blueberry', 600) : getColor('cherry', 500);\n};\nconst getLargeIconSize = (large: boolean, mobile: boolean): IconSize => {\n  if (mobile && large) return IconSize.Small;\n  if (large) return IconSize.Medium;\n  return IconSize.XSmall;\n};\n\nconst checkOnlyIconAria = (onlyIcon: boolean, ariaLabel: string | undefined, devEnv: boolean): void => {\n  if (devEnv && onlyIcon && (ariaLabel === undefined || ariaLabel === '')) {\n    throw new Error('Fyll inn ariaLabel prop på Button uten tekst for å opprettholde UU krav');\n  }\n};\n\nconst Button = React.forwardRef(function ButtonForwardedRef(\n  props: ButtonProps,\n  ref: React.ForwardedRef<HTMLButtonElement | HTMLAnchorElement>\n) {\n  const {\n    ariaLabel,\n    id,\n    children,\n    wrapperClassName,\n    className,\n    arrow,\n    concept = 'normal',\n    disabled = false,\n    ellipsis = false,\n    fluid = false,\n    htmlMarkup = 'button',\n    mode = 'onlight',\n    onBlur,\n    onClick,\n    size = 'medium',\n    variant = 'fill',\n    href,\n    tabIndex,\n    testId,\n    target,\n    type = 'button',\n    ...restProps\n  } = props;\n\n  const [leftIcon, rightIcon, restChildren] = useIcons(React.Children.toArray(children));\n  const { hoverRef, isHovered } =\n    htmlMarkup === 'button'\n      ? useHover<HTMLButtonElement>(ref as React.RefObject<HTMLButtonElement>)\n      : useHover<HTMLAnchorElement>(ref as React.RefObject<HTMLAnchorElement>);\n  const buttonContentRef = useRef<HTMLDivElement>(null);\n  const onlyIcon = !!(leftIcon || rightIcon) && !restChildren;\n  const bothIcons = leftIcon && (rightIcon || arrow) && !onlyIcon;\n  const onDark = mode === 'ondark';\n  const breakpoint = useBreakpoint();\n  const mobile = breakpoint < breakpoints.md;\n  const destructive = concept === 'destructive' && !disabled;\n  const outlineVariant = variant === 'outline';\n  const borderlessVariant = variant === 'borderless';\n  const iconColor = getIconColor(variant === 'fill', borderlessVariant, disabled, concept, onDark, mobile);\n  const hasArrow = arrow === 'icon' && !borderlessVariant;\n  const large = size === 'large' && !destructive && !borderlessVariant;\n  const hasUURightArrow = arrow === 'accessibility-character' && !fluid && !leftIcon && !rightIcon && !hasArrow && borderlessVariant;\n  const rest = { ...restProps };\n\n  const buttonWrapperClasses = classNames(\n    buttonStyles['button-wrapper'],\n    { [buttonStyles['button-wrapper--fluid']]: fluid || ellipsis },\n    wrapperClassName\n  );\n  const buttonClasses = classNames(\n    buttonStyles.button,\n    {\n      [buttonStyles['button--destructive']]: destructive,\n      [buttonStyles['button--normal']]: !large,\n      [buttonStyles['button--large']]: large,\n      [buttonStyles['button--outline']]: outlineVariant,\n      [buttonStyles['button--borderless']]: borderlessVariant,\n      [buttonStyles['button--left-icon']]: leftIcon && !onlyIcon,\n      [buttonStyles['button--right-icon']]: rightIcon && !onlyIcon,\n      [buttonStyles['button--both-icons']]: bothIcons,\n      [buttonStyles['button--only-icon']]: onlyIcon,\n      [buttonStyles['button--arrow']]: hasArrow,\n      [buttonStyles['button--on-dark']]: onDark,\n    },\n    className\n  );\n  const buttonTextClasses = classNames(buttonStyles['button__text'], {\n    [buttonStyles['button__text--ellipsis']]: ellipsis,\n  });\n  const diagonalClasses = classNames(buttonStyles['diagonal'], {\n    [buttonStyles['diagonal--on-dark']]: onDark,\n  });\n\n  useEffect(() => {\n    checkOnlyIconAria(onlyIcon, ariaLabel, !isTest() && !isProd());\n  }, []);\n\n  const renderIcon = (iconElement: BaseIconElement | null, iconSize: number, iconClassName?: string): BaseIconElement | null => {\n    return iconElement\n      ? React.cloneElement(iconElement, {\n          size: iconSize,\n          color: iconElement?.props.color ? iconElement.props.color : iconColor,\n          isHovered,\n          className: iconClassName,\n        })\n      : null;\n  };\n\n  const renderButtonContent = (): JSX.Element => {\n    return (\n      <span className={buttonTextClasses} ref={buttonContentRef}>\n        {disabled && borderlessVariant && (\n          <span className={diagonalClasses}>\n            <span className={buttonStyles['diagonal__line']} />\n          </span>\n        )}\n        <span>{onlyIcon ? ariaLabel : restChildren}</span>\n      </span>\n    );\n  };\n\n  const renderbuttonContentWrapper = (): JSX.Element => (\n    <span className={buttonClasses}>\n      {renderIcon(leftIcon, getLargeIconSize(large, mobile), !onlyIcon ? buttonStyles['button__left-icon'] : undefined)}\n      {renderButtonContent()}\n      {hasArrow\n        ? renderIcon(\n            <Icon svgIcon={ArrowRight} />,\n            getLargeIconSize(large, mobile),\n            classNames(buttonStyles['button__arrow'], { [buttonStyles['button__arrow--both-icons']]: bothIcons })\n          )\n        : renderIcon(rightIcon, getLargeIconSize(large, mobile), buttonStyles['button__right-icon'])}\n      {hasUURightArrow && (\n        <span style={{ color: iconColor }} className={buttonStyles['button__right-unicode-arrow']} aria-hidden>\n          {'  →'}\n        </span>\n      )}\n    </span>\n  );\n\n  return (\n    <>\n      {htmlMarkup === 'button' && (\n        <button\n          id={id}\n          onBlur={onBlur}\n          onClick={onClick}\n          disabled={disabled}\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.Button}\n          className={buttonWrapperClasses}\n          ref={hoverRef as React.ForwardedRef<HTMLButtonElement>}\n          tabIndex={tabIndex}\n          type={type}\n          {...rest}\n        >\n          {renderbuttonContentWrapper()}\n        </button>\n      )}\n      {htmlMarkup === 'a' && (\n        <a\n          id={id}\n          onBlur={onBlur}\n          onClick={onClick}\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.Button}\n          className={buttonWrapperClasses}\n          href={href}\n          target={target}\n          rel={target === '_blank' ? 'noopener noreferrer' : props.rel}\n          ref={hoverRef as React.ForwardedRef<HTMLAnchorElement>}\n          tabIndex={tabIndex}\n          {...restProps}\n        >\n          {renderbuttonContentWrapper()}\n        </a>\n      )}\n    </>\n  );\n});\n\nexport default Button;\n"],"names":["getIconColor","fill","borderless","disabled","concept","ondark","mobile","getColor","getLargeIconSize","large","IconSize","checkOnlyIconAria","onlyIcon","ariaLabel","devEnv","Button","React","props","ref","id","children","wrapperClassName","className","arrow","ellipsis","fluid","htmlMarkup","mode","onBlur","onClick","size","variant","href","tabIndex","testId","target","type","restProps","leftIcon","rightIcon","restChildren","useIcons","hoverRef","isHovered","useHover","buttonContentRef","useRef","bothIcons","onDark","useBreakpoint","breakpoints","destructive","outlineVariant","borderlessVariant","iconColor","hasArrow","hasUURightArrow","rest","buttonWrapperClasses","classNames","buttonStyles","buttonClasses","buttonTextClasses","diagonalClasses","useEffect","isTest","isProd","renderIcon","iconElement","iconSize","iconClassName","renderButtonContent","renderbuttonContentWrapper","Icon","ArrowRight","AnalyticsId","Button$1"],"mappings":"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"}
+{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, { AriaAttributes, useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport Icon, { IconSize } from './../Icon';\nimport { HTMLButtonProps, HTMLAnchorProps, AnalyticsId } from '../../constants';\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { BaseIconElement, useIcons } from '../../hooks/useIcons';\nimport { getColor } from '../../theme/currys/color';\nimport { breakpoints } from '../../theme/grid';\nimport { isTest, isProd } from '../../utils/environment';\nimport ArrowRight from '../Icons/ArrowRight';\n\nimport buttonStyles from './styles.module.scss';\n\nexport type ButtonConcept = 'normal' | 'destructive';\nexport type ButtonVariant = 'fill' | 'outline' | 'borderless';\nexport type ButtonSize = 'medium' | 'large';\nexport type ButtonMode = 'onlight' | 'ondark';\nexport type ButtonTags = 'button' | 'a';\nexport type ButtonArrows = 'icon' | 'accessibility-character';\nexport type ButtonTextPosition = 'left' | 'centered-mobile';\n\nexport interface ButtonProps extends HTMLButtonProps, HTMLAnchorProps, AriaAttributes {\n  /** Sets the aria-label of the button, use when the button only includes an icon */\n  ariaLabel?: string;\n  /** Gives a unique id to the button */\n  id?: string;\n  /** Sets the content of the button. */\n  children: React.ReactNode;\n  /** Adds custom classes to the wrapper element. */\n  wrapperClassName?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Enables an arrow icon to the right inside the button (Not available in borderless variant) */\n  arrow?: ButtonArrows;\n  /** Changes the intent of the button. Mostly changes the color profile. */\n  concept?: ButtonConcept;\n  /** Disables text wrapping and enables ellipsis. */\n  ellipsis?: boolean;\n  /** Makes the button scale to full width of its parent element. */\n  fluid?: boolean;\n  /** Changes the underlying element of the button. */\n  htmlMarkup?: ButtonTags;\n  /** Changes the button colors for different backgrounds. */\n  mode?: ButtonMode;\n  /** Function that is called when the Button loses focus */\n  onBlur?: () => void;\n  /** Function that is called when clicked */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent> | React.FormEvent<{}> | React.KeyboardEvent<HTMLUListElement> | null) => void;\n  /** Changes the button colors for different backgrounds. (Large not available in borderless variant) */\n  size?: ButtonSize;\n  /** Changes the visual representation of the button. */\n  variant?: ButtonVariant;\n  /** Specifies the focus order relative to the other buttons or controls on the page  */\n  tabIndex?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the position of the text in the button - only applies when button is fluid */\n  textPosition?: ButtonTextPosition;\n  /** Button type. Default: button */\n  type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];\n}\n\nconst getIconColor = (\n  fill: boolean,\n  borderless: boolean,\n  disabled: boolean,\n  concept: ButtonConcept,\n  ondark: boolean,\n  mobile: boolean\n): string => {\n  if (mobile && disabled) {\n    return !ondark || fill ? getColor('neutral', !borderless ? 700 : 500) : getColor('white');\n  }\n  if (disabled) {\n    return !ondark || fill ? getColor('neutral', 500) : `${getColor('white')}b3`;\n  }\n  if ((fill && !ondark) || (!fill && ondark)) {\n    return 'white';\n  }\n\n  return concept === 'normal' ? getColor('blueberry', 600) : getColor('cherry', 500);\n};\nconst getLargeIconSize = (large: boolean, mobile: boolean): IconSize => {\n  if (mobile && large) return IconSize.Small;\n  if (large) return IconSize.Medium;\n  return IconSize.XSmall;\n};\n\nconst checkOnlyIconAria = (onlyIcon: boolean, ariaLabel: string | undefined, devEnv: boolean): void => {\n  if (devEnv && onlyIcon && (ariaLabel === undefined || ariaLabel === '')) {\n    throw new Error('Fyll inn ariaLabel prop på Button uten tekst for å opprettholde UU krav');\n  }\n};\n\nconst Button = React.forwardRef(function ButtonForwardedRef(\n  props: ButtonProps,\n  ref: React.ForwardedRef<HTMLButtonElement | HTMLAnchorElement>\n) {\n  const {\n    ariaLabel,\n    id,\n    children,\n    wrapperClassName,\n    className,\n    arrow,\n    concept = 'normal',\n    disabled = false,\n    ellipsis = false,\n    fluid = false,\n    htmlMarkup = 'button',\n    mode = 'onlight',\n    onBlur,\n    onClick,\n    size = 'medium',\n    variant = 'fill',\n    href,\n    tabIndex,\n    testId,\n    target,\n    type = 'button',\n    textPosition = 'left',\n    ...restProps\n  } = props;\n\n  const [leftIcon, rightIcon, restChildren] = useIcons(React.Children.toArray(children));\n  const { hoverRef, isHovered } =\n    htmlMarkup === 'button'\n      ? useHover<HTMLButtonElement>(ref as React.RefObject<HTMLButtonElement>)\n      : useHover<HTMLAnchorElement>(ref as React.RefObject<HTMLAnchorElement>);\n  const buttonContentRef = useRef<HTMLDivElement>(null);\n  const onlyIcon = !!(leftIcon || rightIcon) && !restChildren;\n  const bothIcons = leftIcon && (rightIcon || arrow) && !onlyIcon;\n  const onDark = mode === 'ondark';\n  const breakpoint = useBreakpoint();\n  const mobile = breakpoint < breakpoints.md;\n  const destructive = concept === 'destructive' && !disabled;\n  const outlineVariant = variant === 'outline';\n  const borderlessVariant = variant === 'borderless';\n  const iconColor = getIconColor(variant === 'fill', borderlessVariant, disabled, concept, onDark, mobile);\n  const hasArrow = arrow === 'icon' && !borderlessVariant;\n  const large = size === 'large' && !destructive && !borderlessVariant;\n  const hasUURightArrow = arrow === 'accessibility-character' && !fluid && !leftIcon && !rightIcon && !hasArrow && borderlessVariant;\n  const rest = { ...restProps };\n\n  const buttonWrapperClasses = classNames(\n    buttonStyles['button-wrapper'],\n    { [buttonStyles['button-wrapper--fluid']]: fluid || ellipsis },\n    wrapperClassName\n  );\n  const buttonClasses = classNames(\n    buttonStyles.button,\n    {\n      [buttonStyles['button--destructive']]: destructive,\n      [buttonStyles['button--normal']]: !large,\n      [buttonStyles['button--large']]: large,\n      [buttonStyles['button--outline']]: outlineVariant,\n      [buttonStyles['button--borderless']]: borderlessVariant,\n      [buttonStyles['button--left-icon']]: leftIcon && !onlyIcon,\n      [buttonStyles['button--right-icon']]: rightIcon && !onlyIcon,\n      [buttonStyles['button--both-icons']]: bothIcons,\n      [buttonStyles['button--only-icon']]: onlyIcon,\n      [buttonStyles['button--arrow']]: hasArrow,\n      [buttonStyles['button--on-dark']]: onDark,\n    },\n    className\n  );\n  const buttonTextClasses = classNames(buttonStyles['button__text'], {\n    [buttonStyles['button__text--ellipsis']]: ellipsis,\n    [buttonStyles['button__text--centered-mobile']]: fluid && textPosition === 'centered-mobile',\n  });\n  const diagonalClasses = classNames(buttonStyles['diagonal'], {\n    [buttonStyles['diagonal--on-dark']]: onDark,\n  });\n\n  useEffect(() => {\n    checkOnlyIconAria(onlyIcon, ariaLabel, !isTest() && !isProd());\n  }, []);\n\n  const renderIcon = (iconElement: BaseIconElement | null, iconSize: number, iconClassName?: string): BaseIconElement | null => {\n    return iconElement\n      ? React.cloneElement(iconElement, {\n          size: iconSize,\n          color: iconElement?.props.color ? iconElement.props.color : iconColor,\n          isHovered: !disabled && isHovered,\n          className: iconClassName,\n        })\n      : null;\n  };\n\n  const renderButtonContent = (): JSX.Element => {\n    return (\n      <span className={buttonTextClasses} ref={buttonContentRef}>\n        {disabled && borderlessVariant && (\n          <span className={diagonalClasses}>\n            <span className={buttonStyles['diagonal__line']} />\n          </span>\n        )}\n        <span>{onlyIcon ? ariaLabel : restChildren}</span>\n      </span>\n    );\n  };\n\n  const renderbuttonContentWrapper = (): JSX.Element => (\n    <span className={buttonClasses}>\n      {renderIcon(leftIcon, getLargeIconSize(large, mobile), !onlyIcon ? buttonStyles['button__left-icon'] : undefined)}\n      {renderButtonContent()}\n      {hasArrow\n        ? renderIcon(\n            <Icon svgIcon={ArrowRight} />,\n            getLargeIconSize(large, mobile),\n            classNames(buttonStyles['button__arrow'], { [buttonStyles['button__arrow--both-icons']]: bothIcons })\n          )\n        : renderIcon(rightIcon, getLargeIconSize(large, mobile), buttonStyles['button__right-icon'])}\n      {hasUURightArrow && (\n        <span style={{ color: iconColor }} className={buttonStyles['button__right-unicode-arrow']} aria-hidden>\n          {'  →'}\n        </span>\n      )}\n    </span>\n  );\n\n  return (\n    <>\n      {htmlMarkup === 'button' && (\n        <button\n          id={id}\n          onBlur={onBlur}\n          onClick={onClick}\n          disabled={disabled}\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.Button}\n          className={buttonWrapperClasses}\n          ref={hoverRef as React.ForwardedRef<HTMLButtonElement>}\n          tabIndex={tabIndex}\n          type={type}\n          {...rest}\n        >\n          {renderbuttonContentWrapper()}\n        </button>\n      )}\n      {htmlMarkup === 'a' && (\n        <a\n          id={id}\n          onBlur={onBlur}\n          onClick={onClick}\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.Button}\n          className={buttonWrapperClasses}\n          href={href}\n          target={target}\n          rel={target === '_blank' ? 'noopener noreferrer' : props.rel}\n          ref={hoverRef as React.ForwardedRef<HTMLAnchorElement>}\n          tabIndex={tabIndex}\n          {...restProps}\n        >\n          {renderbuttonContentWrapper()}\n        </a>\n      )}\n    </>\n  );\n});\n\nexport default Button;\n"],"names":["getIconColor","fill","borderless","disabled","concept","ondark","mobile","getColor","getLargeIconSize","large","IconSize","checkOnlyIconAria","onlyIcon","ariaLabel","devEnv","Button","React","props","ref","id","children","wrapperClassName","className","arrow","ellipsis","fluid","htmlMarkup","mode","onBlur","onClick","size","variant","href","tabIndex","testId","target","type","textPosition","restProps","leftIcon","rightIcon","restChildren","useIcons","hoverRef","isHovered","useHover","buttonContentRef","useRef","bothIcons","onDark","useBreakpoint","breakpoints","destructive","outlineVariant","borderlessVariant","iconColor","hasArrow","hasUURightArrow","rest","buttonWrapperClasses","classNames","buttonStyles","buttonClasses","buttonTextClasses","diagonalClasses","useEffect","isTest","isProd","renderIcon","iconElement","iconSize","iconClassName","renderButtonContent","renderbuttonContentWrapper","Icon","ArrowRight","AnalyticsId","Button$1"],"mappings":"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"}

package/components/Button/styles.module.scss

@@ -330,6 +330,12 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
       overflow: hidden;
       text-overflow: ellipsis;
     }
+
+    &--centered-mobile {
+      @media (max-width: map.get($grid-max-breakpoints, xs)) {
+        width: 100%;
+      }
+    }
   }
 
   &__right-unicode-arrow {

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

@@ -8,6 +8,7 @@ export type Styles = {
   'button__right-icon': string;
   'button__right-unicode-arrow': string;
   button__text: string;
+  'button__text--centered-mobile': string;
   'button__text--ellipsis': string;
   'button--arrow': string;
   'button--arrow--both-icons': string;

package/components/Expander/styles.module.scss

@@ -83,6 +83,7 @@
     &--large {
       width: 100%;
       padding: getSpacer(xs) getSpacer(2xs) getSpacer(xs) getSpacer(s);
+      cursor: pointer;
 
       @media (min-width: map.get($grid-breakpoints, md)) {
         padding: getSpacer(xs) getSpacer(s) getSpacer(xs) getSpacer(l);

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

@@ -1,10 +1,6 @@
 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;
@@ -17,27 +13,32 @@ declare const meta: {
         };
     };
     args: {
-        title: string;
         htmlMarkup: "h2";
-        expanded: false;
         print: false;
     };
     argTypes: {
-        title: {
-            control: string;
-        };
         htmlMarkup: {
             control: string;
             options: string[];
+            description: string;
+        };
+        print: {
+            control: string;
+            description: string;
         };
-        expanded: {
+        children: {
             control: string;
         };
-        print: {
+        level: {
+            control: string;
+            description: string;
+        };
+        testId: {
             control: string;
+            description: string;
         };
     };
 };
 export default meta;
-type Story = StoryObj<ExpanderHierarchyWithAndCustomArgs>;
+type Story = StoryObj<typeof ExpanderHierarchy>;
 export declare const Default: Story;

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { StoryObj } from '@storybook/react';
+import List from './List';
 declare const meta: {
     title: string;
     component: import("./List").ListCompound;
@@ -12,22 +13,38 @@ declare const meta: {
         };
     };
     args: {
-        children: string;
         variant: "bullet";
         margin: false;
+        className: string;
+        testId: string;
     };
     argTypes: {
         variant: {
             control: string;
             options: string[];
+            description: string;
+            defaultValue: string;
         };
         margin: {
             control: string;
+            description: string;
+        };
+        children: {
+            control: string;
+            description: string;
+        };
+        className: {
+            control: string;
+            description: string;
+        };
+        testId: {
+            control: string;
+            description: string;
         };
     };
 };
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof List>;
 export declare const Default: Story;
 export declare const Bullet: Story;
 export declare const Dashed: Story;

package/components/Tabs/Tab.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { SvgIcon } from '../Icon';
+import { IconName } from '../Icons/IconNames';
+export interface TabProps {
+    /** Sets the tab panel content */
+    children?: React.ReactNode;
+    /** Optional icon on the tab */
+    icon?: SvgIcon | IconName;
+    /** Called when tab is selected */
+    onTabClick?: (index: number) => void;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+    /** Title on the tab */
+    title?: string;
+}
+declare const Tab: React.FC<TabProps>;
+export default Tab;

package/components/Tabs/Tab.js

@@ -0,0 +1,6 @@
+import e from "react";
+const a = (t) => /* @__PURE__ */ e.createElement(e.Fragment, null, t.children ?? null), n = a;
+export {
+  n as default
+};
+//# sourceMappingURL=Tab.js.map

package/components/Tabs/Tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.js","sources":["../../../src/components/Tabs/Tab.tsx"],"sourcesContent":["import React from 'react';\n\nimport { SvgIcon } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\n\nexport interface TabProps {\n  /** Sets the tab panel content */\n  children?: React.ReactNode;\n  /** Optional icon on the tab */\n  icon?: SvgIcon | IconName;\n  /** Called when tab is selected */\n  onTabClick?: (index: number) => void;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Title on the tab */\n  title?: string;\n}\n\nconst Tab: React.FC<TabProps> = props => {\n  return <>{props.children ?? null}</>;\n};\n\nexport default Tab;\n"],"names":["Tab","props","React","Tab$1"],"mappings":";AAkBA,MAAMA,IAA0B,CAASC,MAChCC,gBAAAA,EAAA,cAAAA,EAAA,UAAA,MAAGD,EAAM,YAAY,IAAK,GAGnCE,IAAeH;"}

package/components/Tabs/TabList/TabList.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { TabsColors, TabsType } from '../Tabs';
+interface TabListProps {
+    children: React.ReactNode;
+    onTabListClick: (index: number) => void;
+    selectedTab: number;
+    color?: TabsColors;
+    type?: TabsType;
+}
+declare const TabList: React.FC<TabListProps>;
+export default TabList;

package/components/Tabs/TabList/TabList.js

@@ -0,0 +1,51 @@
+import t, { useRef as p } from "react";
+import u from "classnames";
+import { useRovingFocus as N } from "../../../hooks/useRovingFocus.js";
+import { palette as s } from "../../../theme/palette.js";
+import { isComponent as $ } from "../../../utils/component.js";
+import { uuid as L } from "../../../utils/uuid.js";
+import { Icon as S } from "../../Icon/Icon.js";
+import { IconSize as _ } from "../../../constants.js";
+import g from "../../LazyIcon/LazyIcon.js";
+import v from "../Tab.js";
+import e from "../../Tabs/TabList/styles.module.scss";
+const X = (d) => {
+  const { selectedTab: C, onTabListClick: i, children: n, color: k = "white", type: y = "normal" } = d, c = p(null), l = p(t.Children.map(n, () => t.createRef()));
+  N(i, l, c, !0);
+  const R = u(e["tab-list"], e[`tab-list--${y}`]), E = L();
+  return /* @__PURE__ */ t.createElement("ul", { className: R, ref: c, role: "tablist", "aria-orientation": "horizontal" }, t.Children.map(n, (m, o) => {
+    if ($(m, v)) {
+      const r = o === C, { title: b, onTabClick: f, icon: a, testId: T } = m.props, h = () => {
+        f && f(o), i(o);
+      }, z = u(e["tab-list__tab"], e[`tab-list__tab--${k}`], {
+        [e["tab-list__tab--selected"]]: r,
+        [e["tab-list__tab--first"]]: o == 0
+      }), I = l.current && l.current[o];
+      return /* @__PURE__ */ t.createElement("li", { role: "presentation" }, /* @__PURE__ */ t.createElement(
+        "button",
+        {
+          role: "tab",
+          "aria-selected": r,
+          onClick: h,
+          className: z,
+          key: `${b}-${E}`,
+          "data-testid": T,
+          ref: I
+        },
+        /* @__PURE__ */ t.createElement("span", { className: e["tab-list__tab__title-and-icon"] }, a && (typeof a == "string" ? /* @__PURE__ */ t.createElement(
+          g,
+          {
+            iconName: a,
+            size: _.XSmall,
+            color: r ? s.black : s.blueberry500
+          }
+        ) : /* @__PURE__ */ t.createElement(S, { svgIcon: a, size: _.XSmall, color: r ? s.black : s.blueberry500 })), b)
+      ));
+    }
+    return null;
+  }));
+}, M = X;
+export {
+  M as default
+};
+//# sourceMappingURL=TabList.js.map

package/components/Tabs/TabList/TabList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabList.js","sources":["../../../../src/components/Tabs/TabList/TabList.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { useRovingFocus } from '../../../hooks/useRovingFocus';\nimport { palette } from '../../../theme/palette';\nimport { isComponent } from '../../../utils/component';\nimport uuid from '../../../utils/uuid';\nimport Icon, { IconSize } from '../../Icon';\nimport { IconName } from '../../Icons/IconNames';\nimport LazyIcon from '../../LazyIcon';\nimport Tab from '../Tab';\nimport { TabsColors, TabsType } from '../Tabs';\n\nimport styles from './styles.module.scss';\ninterface TabListProps {\n  children: React.ReactNode;\n  onTabListClick: (index: number) => void;\n  selectedTab: number;\n  color?: TabsColors;\n  type?: TabsType;\n}\n\nconst TabList: React.FC<TabListProps> = props => {\n  const { selectedTab, onTabListClick, children, color = 'white', type = 'normal' } = props;\n\n  const listRef = useRef<HTMLUListElement>(null);\n\n  const tabRefs = useRef(React.Children.map(children, () => React.createRef<HTMLButtonElement>()));\n  useRovingFocus(onTabListClick, tabRefs, listRef, true);\n\n  const tablistClasses = classNames(styles['tab-list'], styles[`tab-list--${type}`]);\n\n  const id = uuid();\n\n  return (\n    <ul className={tablistClasses} ref={listRef} role=\"tablist\" aria-orientation=\"horizontal\">\n      {React.Children.map(children, (child, index) => {\n        if (isComponent(child, Tab)) {\n          const isSelected = index === selectedTab;\n          const { title, onTabClick, icon, testId } = child.props;\n          const handleClick = (): void => {\n            onTabClick && onTabClick(index);\n            onTabListClick(index);\n          };\n          const tabButtonClasses = classNames(styles['tab-list__tab'], styles[`tab-list__tab--${color}`], {\n            [styles['tab-list__tab--selected']]: isSelected,\n            [styles['tab-list__tab--first']]: index == 0,\n          });\n\n          const currentRef = tabRefs.current && tabRefs.current[index];\n\n          return (\n            <li role=\"presentation\">\n              <button\n                role=\"tab\"\n                aria-selected={isSelected}\n                onClick={handleClick}\n                className={tabButtonClasses}\n                key={`${title}-${id}`}\n                data-testid={testId}\n                ref={currentRef as React.RefObject<HTMLButtonElement>}\n              >\n                <span className={styles['tab-list__tab__title-and-icon']}>\n                  {icon &&\n                    (typeof icon === 'string' ? (\n                      <LazyIcon\n                        iconName={icon as IconName}\n                        size={IconSize.XSmall}\n                        color={isSelected ? palette[`black`] : palette['blueberry500']}\n                      />\n                    ) : (\n                      <Icon svgIcon={icon} size={IconSize.XSmall} color={isSelected ? palette[`black`] : palette['blueberry500']} />\n                    ))}\n                  {title}\n                </span>\n              </button>\n            </li>\n          );\n        }\n        return null;\n      })}\n    </ul>\n  );\n};\n\nexport default TabList;\n"],"names":["TabList","props","selectedTab","onTabListClick","children","color","type","listRef","useRef","tabRefs","React","useRovingFocus","tablistClasses","classNames","styles","id","uuid","child","index","isComponent","Tab","isSelected","title","onTabClick","icon","testId","handleClick","tabButtonClasses","currentRef","LazyIcon","IconSize","palette","Icon","TabList$1"],"mappings":";;;;;;;;;;;AAuBA,MAAMA,IAAkC,CAASC,MAAA;AACzC,QAAA,EAAE,aAAAC,GAAa,gBAAAC,GAAgB,UAAAC,GAAU,OAAAC,IAAQ,SAAS,MAAAC,IAAO,SAAa,IAAAL,GAE9EM,IAAUC,EAAyB,IAAI,GAEvCC,IAAUD,EAAOE,EAAM,SAAS,IAAIN,GAAU,MAAMM,EAAM,UAA8B,CAAA,CAAC;AAChF,EAAAC,EAAAR,GAAgBM,GAASF,GAAS,EAAI;AAE/C,QAAAK,IAAiBC,EAAWC,EAAO,UAAU,GAAGA,EAAO,aAAaR,CAAI,EAAE,CAAC,GAE3ES,IAAKC;AAEX,yCACG,MAAG,EAAA,WAAWJ,GAAgB,KAAKL,GAAS,MAAK,WAAU,oBAAiB,aAAA,GAC1EG,EAAM,SAAS,IAAIN,GAAU,CAACa,GAAOC,MAAU;AAC1C,QAAAC,EAAYF,GAAOG,CAAG,GAAG;AAC3B,YAAMC,IAAaH,MAAUhB,GACvB,EAAE,OAAAoB,GAAO,YAAAC,GAAY,MAAAC,GAAM,QAAAC,MAAWR,EAAM,OAC5CS,IAAc,MAAY;AAC9B,QAAAH,KAAcA,EAAWL,CAAK,GAC9Bf,EAAee,CAAK;AAAA,MAAA,GAEhBS,IAAmBd,EAAWC,EAAO,eAAe,GAAGA,EAAO,kBAAkBT,CAAK,EAAE,GAAG;AAAA,QAC9F,CAACS,EAAO,yBAAyB,CAAC,GAAGO;AAAA,QACrC,CAACP,EAAO,sBAAsB,CAAC,GAAGI,KAAS;AAAA,MAAA,CAC5C,GAEKU,IAAanB,EAAQ,WAAWA,EAAQ,QAAQS,CAAK;AAGzD,aAAAR,gBAAAA,EAAA,cAAC,MAAG,EAAA,MAAK,eACP,GAAAA,gBAAAA,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,iBAAeW;AAAA,UACf,SAASK;AAAA,UACT,WAAWC;AAAA,UACX,KAAK,GAAGL,CAAK,IAAIP,CAAE;AAAA,UACnB,eAAaU;AAAA,UACb,KAAKG;AAAA,QAAA;AAAA,QAELlB,gBAAAA,EAAA,cAAC,UAAK,WAAWI,EAAO,+BAA+B,EACpD,GAAAU,MACE,OAAOA,KAAS,WACfd,gBAAAA,EAAA;AAAA,UAACmB;AAAA,UAAA;AAAA,YACC,UAAUL;AAAA,YACV,MAAMM,EAAS;AAAA,YACf,OAAOT,IAAaU,EAAQ,QAAWA,EAAQ;AAAA,UAAc;AAAA,QAAA,IAG9DrB,gBAAAA,EAAA,cAAAsB,GAAA,EAAK,SAASR,GAAM,MAAMM,EAAS,QAAQ,OAAOT,IAAaU,EAAQ,QAAWA,EAAQ,aAAc,CAAG,IAE/GT,CACH;AAAA,MAAA,CAEJ;AAAA,IAEJ;AACO,WAAA;AAAA,EACR,CAAA,CACH;AAEJ,GAEAW,IAAejC;"}

package/components/Tabs/TabList/index.d.ts

@@ -0,0 +1,3 @@
+import TabList from './TabList';
+export * from './TabList';
+export default TabList;

package/components/Tabs/TabList/index.js

@@ -0,0 +1,5 @@
+import a from "./TabList.js";
+export {
+  a as default
+};
+//# sourceMappingURL=index.js.map

package/components/Tabs/TabList/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}