@helsenorge/designsystem-react 13.5.0 → 14.0.0-beta.1

package/lib/components/StickyNote/index.js

@@ -1,22 +1,19 @@
-import "../../constants2.js";
 import { t as usePseudoClasses } from "../../usePseudoClasses.js";
-import "../../grid.js";
 import { n as mergeRefs } from "../../refs.js";
 import { t as Icon_default } from "../../Icon.js";
-import "../../useBreakpoint.js";
 import { t as useIsMobileBreakpoint } from "../../useIsMobileBreakpoint.js";
 import { t as useIdWithFallback } from "../../useIdWithFallback.js";
 import { t as getAriaDescribedBy } from "../../accessibility.js";
 import { t as X_default } from "../../X.js";
-import React, { useLayoutEffect, useRef } from "react";
-import cn from "classnames";
+import classNames from "classnames";
+import { useLayoutEffect, useRef } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import styles from "./styles.module.scss";
-var Close_default = React.forwardRef(function ButtonForwardedRef(props, ref) {
-	const { testId, ariaLabel = "Lukk", onClick } = props;
+var Close = (props) => {
+	const { testId, ariaLabel = "Lukk", onClick, ref } = props;
 	const { refObject, isHovered } = usePseudoClasses();
 	const iconSize = useIsMobileBreakpoint() ? 38 : 48;
-	const closeClasses = cn(styles.close);
+	const closeClasses = classNames(styles.close);
 	return /* @__PURE__ */ jsx("button", {
 		ref: mergeRefs([ref, refObject]),
 		"data-testid": testId,
@@ -25,7 +22,7 @@ var Close_default = React.forwardRef(function ButtonForwardedRef(props, ref) {
 		onClick,
 		type: "button",
 		children: /* @__PURE__ */ jsx("span", {
-			className: cn(styles["close__inner-container"]),
+			className: classNames(styles["close__inner-container"]),
 			children: /* @__PURE__ */ jsx(Icon_default, {
 				svgIcon: X_default,
 				color: "black",
@@ -34,7 +31,8 @@ var Close_default = React.forwardRef(function ButtonForwardedRef(props, ref) {
 			})
 		})
 	});
-});
+};
+var Close_default = Close;
 var Triangle = ({ isHover, isFocus, isActive, isError }) => {
 	const palette = (() => {
 		const colors = {
@@ -146,7 +144,7 @@ var StickyNote = (props) => {
 	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
 		"data-testid": testId,
 		ref: stickynoteRef,
-		className: cn(styles["sticky-note"], wrapperClassName, {
+		className: classNames(styles["sticky-note"], wrapperClassName, {
 			[styles["sticky-note--focused"]]: isTextareaFocused,
 			[styles["sticky-note--active"]]: isActive,
 			[styles["sticky-note--hovered"]]: isHovered && !isTextareaFocused && !textareaProps.disabled,
@@ -160,7 +158,7 @@ var StickyNote = (props) => {
 		},
 		children: [
 			/* @__PURE__ */ jsx("div", {
-				className: cn(styles["sticky-note__header"]),
+				className: classNames(styles["sticky-note__header"]),
 				children: timestamp && /* @__PURE__ */ jsx("span", {
 					className: styles["sticky-note__header__timestamp"],
 					children: timestamp
@@ -169,7 +167,7 @@ var StickyNote = (props) => {
 			/* @__PURE__ */ jsx("textarea", {
 				ref: textareaRef,
 				"data-testid": `${testId}-textarea`,
-				className: cn(styles["sticky-note__textarea"], textareaProps.className),
+				className: classNames(styles["sticky-note__textarea"], textareaProps.className),
 				...textareaProps,
 				onChange: handleChange,
 				"aria-describedby": getAriaDescribedBy(props, errorTextId)
@@ -180,11 +178,11 @@ var StickyNote = (props) => {
 				testId: "closeButton"
 			}),
 			/* @__PURE__ */ jsx("div", {
-				className: cn(styles["sticky-note__footer"]),
+				className: classNames(styles["sticky-note__footer"]),
 				children: footerText && /* @__PURE__ */ jsx("span", { children: footerText })
 			}),
 			/* @__PURE__ */ jsx("div", {
-				className: cn(styles["sticky-note__triangle"]),
+				className: classNames(styles["sticky-note__triangle"]),
 				children: /* @__PURE__ */ jsx(Triangle_default, {
 					isHover: isHovered,
 					isActive,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Triangle: React.FC<TriangleProps>","colors: Palette","svg: React.ReactNode","StickyNote: React.FC<StickyNoteProps>"],"sources":["../../../src/components/StickyNote/Close.tsx","../../../src/components/StickyNote/Triangle.tsx","../../../src/components/StickyNote/StickyNote.tsx","../../../src/components/StickyNote/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { mergeRefs } from '../../utils/refs';\nimport Icon from '../Icon';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\n\nexport interface CloseProps {\n  /** Function is called when user clicks the button */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Sets the aria-label of the button */\n  ariaLabel?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\n/*\n  Denne er kopiert fra Close-komponent. \n  Det er for å kunne ha en egen lokal variant for StickyNote. \n  Likt som i Figma.\n */\n\nconst Close = React.forwardRef(function ButtonForwardedRef(props: CloseProps, ref: React.ForwardedRef<HTMLButtonElement>) {\n  const { testId, ariaLabel = 'Lukk', onClick } = props;\n  const { refObject, isHovered } = usePseudoClasses();\n\n  const iconSize = useIsMobileBreakpoint() ? 38 : 48;\n\n  const closeClasses = classNames(styles.close);\n\n  return (\n    <button\n      ref={mergeRefs([ref, refObject])}\n      data-testid={testId}\n      className={closeClasses}\n      aria-label={ariaLabel}\n      onClick={onClick}\n      type=\"button\"\n    >\n      <span className={classNames(styles['close__inner-container'])}>\n        <Icon svgIcon={X} color=\"black\" size={iconSize} isHovered={isHovered} />\n      </span>\n    </button>\n  );\n});\n\nexport default Close;\n","import React from 'react';\n\ninterface TriangleProps {\n  isHover: boolean;\n  isFocus: boolean;\n  isActive: boolean;\n  isError: boolean;\n}\n\nexport interface Palette {\n  border: string;\n  background: string;\n}\n\nconst Triangle: React.FC<TriangleProps> = ({ isHover, isFocus, isActive, isError }) => {\n  const palette = ((): Palette => {\n    const colors: Palette = {\n      border: 'var(--component-stickynote-border-normal)',\n      background: 'var(--component-stickynote-background-fold-normal-light)',\n    };\n\n    if (!isError) {\n      if (isHover) {\n        colors.background = 'var(--component-stickynote-background-fold-normal-medium)';\n      }\n      if (isFocus) {\n        colors.border = 'var(--color-action-border-onlight-focus)';\n        colors.background = 'var(--component-stickynote-background-fold-normal-medium)';\n      }\n      if (isActive) {\n        colors.background = 'var(--component-stickynote-background-fold-normal-dark)';\n      }\n    } else {\n      colors.border = 'var(--component-stickynote-border-error)';\n      colors.background = 'var(--component-stickynote-background-fold-error-light)';\n      if (isHover) {\n        colors.background = 'var(--component-stickynote-background-fold-error-medium)';\n      }\n      if (isFocus) {\n        colors.border = 'var(--color-action-border-onlight-focus)';\n        colors.background = 'var(--component-stickynote-background-fold-error-medium)';\n      }\n      if (isActive) {\n        colors.background = 'var(--component-stickynote-background-fold-error-dark)';\n      }\n    }\n    return colors;\n  })();\n\n  let svg: React.ReactNode;\n\n  if (isFocus) {\n    svg = (\n      <svg width=\"21\" height=\"21\" viewBox=\"0 0 21 21\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <mask id=\"path-1-inside-1_7753_1401\" fill=\"white\">\n          <path d=\"M0.493163 20.9211L0.276366 20.9211L0.276367 0.921142L20.2764 0.921143L20.2764 1.13794L0.493163 20.9211Z\" />\n        </mask>\n        <path\n          d=\"M0.493163 20.9211L0.276366 20.9211L0.276367 0.921142L20.2764 0.921143L20.2764 1.13794L0.493163 20.9211Z\"\n          fill={palette.background}\n        />\n        <path\n          d=\"M0.493163 20.9211L0.493163 22.9211L1.32159 22.9211L1.90738 22.3354L0.493163 20.9211ZM0.276366 20.9211L-1.72363 20.9211L-1.72363 22.9211L0.276366 22.9211L0.276366 20.9211ZM0.276367 0.921142L0.276367 -1.07886L-1.72363 -1.07886L-1.72363 0.921142L0.276367 0.921142ZM20.2764 0.921143L22.2764 0.921143L22.2764 -1.07886L20.2764 -1.07886L20.2764 0.921143ZM20.2764 1.13794L21.6906 2.55215L22.2764 1.96637L22.2764 1.13794L20.2764 1.13794ZM0.493163 20.9211L0.493163 18.9211L0.276366 18.9211L0.276366 20.9211L0.276366 22.9211L0.493163 22.9211L0.493163 20.9211ZM0.276366 20.9211L2.27637 20.9211L2.27637 0.921142L0.276367 0.921142L-1.72363 0.921142L-1.72363 20.9211L0.276366 20.9211ZM0.276367 0.921142L0.276367 2.92114L20.2764 2.92114L20.2764 0.921143L20.2764 -1.07886L0.276367 -1.07886L0.276367 0.921142ZM20.2764 0.921143L18.2764 0.921142L18.2764 1.13794L20.2764 1.13794L22.2764 1.13794L22.2764 0.921143L20.2764 0.921143ZM20.2764 1.13794L18.8622 -0.276274L-0.92105 19.5069L0.493163 20.9211L1.90738 22.3354L21.6906 2.55215L20.2764 1.13794Z\"\n          fill={palette.border}\n          mask=\"url(#path-1-inside-1_7753_1401)\"\n        />\n      </svg>\n    );\n  } else {\n    svg = (\n      <svg width=\"21\" height=\"21\" viewBox=\"0 0 21 21\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <mask id=\"path-1-inside-1_7717_293537\" fill=\"white\">\n          <path d=\"M0.923827 20.9211L0.70703 20.9211L0.707031 0.921142L20.707 0.921143L20.707 1.13794L0.923827 20.9211Z\" />\n        </mask>\n        <path\n          d=\"M0.923827 20.9211L0.70703 20.9211L0.707031 0.921142L20.707 0.921143L20.707 1.13794L0.923827 20.9211Z\"\n          fill={palette.background}\n        />\n        <path\n          d=\"M0.923827 20.9211L0.923827 21.9211L1.33804 21.9211L1.63093 21.6282L0.923827 20.9211ZM0.70703 20.9211L-0.29297 20.9211L-0.29297 21.9211L0.70703 21.9211L0.70703 20.9211ZM0.707031 0.921142L0.707031 -0.0788582L-0.292969 -0.0788583L-0.292969 0.921142L0.707031 0.921142ZM20.707 0.921143L21.707 0.921143L21.707 -0.0788574L20.707 -0.0788574L20.707 0.921143ZM20.707 1.13794L21.4141 1.84505L21.707 1.55215L21.707 1.13794L20.707 1.13794ZM0.923827 20.9211L0.923827 19.9211L0.70703 19.9211L0.70703 20.9211L0.70703 21.9211L0.923827 21.9211L0.923827 20.9211ZM0.70703 20.9211L1.70703 20.9211L1.70703 0.921142L0.707031 0.921142L-0.292969 0.921142L-0.29297 20.9211L0.70703 20.9211ZM0.707031 0.921142L0.707031 1.92114L20.707 1.92114L20.707 0.921143L20.707 -0.0788574L0.707031 -0.0788582L0.707031 0.921142ZM20.707 0.921143L19.707 0.921143L19.707 1.13794L20.707 1.13794L21.707 1.13794L21.707 0.921143L20.707 0.921143ZM20.707 1.13794L19.9999 0.430833L0.21672 20.214L0.923827 20.9211L1.63093 21.6282L21.4141 1.84505L20.707 1.13794Z\"\n          fill={palette.border}\n          mask=\"url(#path-1-inside-1_7717_293537)\"\n        />\n      </svg>\n    );\n  }\n\n  return <>{svg}</>;\n};\n\nexport default Triangle;\n","import React, { useLayoutEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport Close from './Close';\nimport Triangle from './Triangle';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\n\nimport styles from './styles.module.scss';\n\nexport interface StickyNoteProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {\n  /** Aria label for the delete/close button */\n  arialabelXButton: string;\n  /** Activates the error styling */\n  error?: boolean;\n  /** Error text to show below the note */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Text shown under the textarea  */\n  footerText?: string;\n  /** Function run when clicking the delete/close button */\n  onXButtonClick?: () => void;\n  /** Function run if user clicks the component while it is disabled */\n  onClickWhileDisabled?: () => void;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Timestamp shown over the textarea  */\n  timestamp: string;\n  /** Classname for the outer wrapper */\n  wrapperClassName?: string;\n}\n\nconst StickyNote: React.FC<StickyNoteProps> = (props: StickyNoteProps) => {\n  const {\n    wrapperClassName,\n    timestamp,\n    onXButtonClick,\n    arialabelXButton,\n    footerText,\n    error,\n    errorText,\n    errorTextId: errorTextIdProp,\n    onClickWhileDisabled,\n    testId,\n    ...textareaProps\n  } = props;\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const stickynoteRef = useRef<HTMLDivElement>(null);\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n  const { isFocused: isTextareaFocused } = usePseudoClasses<HTMLTextAreaElement>(textareaRef);\n  const { isHovered, isActive } = usePseudoClasses<HTMLDivElement>(stickynoteRef);\n\n  const handleWrapperClick = (event: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>): void => {\n    if ((event.target as HTMLElement).closest('button')) {\n      return;\n    }\n    if (textareaProps.disabled) {\n      if (onClickWhileDisabled) onClickWhileDisabled();\n      return;\n    }\n    textareaRef.current?.focus();\n  };\n\n  const resizeTextarea = (): void => {\n    const textarea = textareaRef.current;\n    if (!textarea) return;\n    resizeTarget(textarea);\n  };\n\n  const resizeTarget = (target: HTMLTextAreaElement): void => {\n    // Reset field height\n    target.style.height = 'inherit';\n    // Set new height\n    target.style.height = `${target.scrollHeight}px`;\n  };\n\n  useLayoutEffect(() => {\n    resizeTextarea();\n    // Must run after the shadow DOM has been set up to work on microweb\n    setTimeout(() => resizeTextarea(), 1000);\n  }, []);\n\n  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    const textarea = e.target as HTMLTextAreaElement;\n    resizeTarget(textarea);\n    if (textareaProps.onChange) textareaProps.onChange(e);\n  };\n\n  return (\n    <div>\n      <div\n        data-testid={testId}\n        ref={stickynoteRef}\n        className={classNames(styles['sticky-note'], wrapperClassName, {\n          [styles['sticky-note--focused']]: isTextareaFocused,\n          [styles['sticky-note--active']]: isActive,\n          [styles['sticky-note--hovered']]: isHovered && !isTextareaFocused && !textareaProps.disabled,\n          [styles['sticky-note--error']]: error,\n        })}\n        onClick={handleWrapperClick}\n        role=\"textbox\"\n        tabIndex={-1}\n        onKeyDown={e => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            handleWrapperClick(e as React.KeyboardEvent<HTMLDivElement>);\n          }\n        }}\n      >\n        <div className={classNames(styles['sticky-note__header'])}>\n          {timestamp && <span className={styles['sticky-note__header__timestamp']}>{timestamp}</span>}\n        </div>\n        <textarea\n          ref={textareaRef}\n          data-testid={`${testId}-textarea`}\n          className={classNames(styles['sticky-note__textarea'], textareaProps.className)}\n          {...textareaProps}\n          onChange={handleChange}\n          aria-describedby={getAriaDescribedBy(props, errorTextId)}\n        />\n        <Close onClick={onXButtonClick} ariaLabel={arialabelXButton} testId=\"closeButton\" />\n        <div className={classNames(styles['sticky-note__footer'])}>{footerText && <span>{footerText}</span>}</div>\n        <div className={classNames(styles['sticky-note__triangle'])}>\n          <Triangle isHover={isHovered} isActive={isActive} isFocus={isTextareaFocused} isError={!!error} />\n        </div>\n      </div>\n      {error && (\n        <p className={styles['sticky-note__error-text']} id={errorTextId}>\n          {errorText}\n        </p>\n      )}\n    </div>\n  );\n};\n\nexport default StickyNote;\n","import StickyNote from './StickyNote';\nexport * from './StickyNote';\nexport default StickyNote;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["Close: React.FC<CloseProps>","Triangle: React.FC<TriangleProps>","colors: Palette","svg: React.ReactNode","StickyNote: React.FC<StickyNoteProps>"],"sources":["../../../src/components/StickyNote/Close.tsx","../../../src/components/StickyNote/Triangle.tsx","../../../src/components/StickyNote/StickyNote.tsx","../../../src/components/StickyNote/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { mergeRefs } from '../../utils/refs';\nimport Icon from '../Icon';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\n\nexport interface CloseProps {\n  /** Function is called when user clicks the button */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Sets the aria-label of the button */\n  ariaLabel?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref passed to the button element */\n  ref?: React.Ref<HTMLButtonElement | null>;\n}\n\n/*\n  Denne er kopiert fra Close-komponent. \n  Det er for å kunne ha en egen lokal variant for StickyNote. \n  Likt som i Figma.\n */\n\nconst Close: React.FC<CloseProps> = (props: CloseProps) => {\n  const { testId, ariaLabel = 'Lukk', onClick, ref } = props;\n  const { refObject, isHovered } = usePseudoClasses();\n\n  const iconSize = useIsMobileBreakpoint() ? 38 : 48;\n\n  const closeClasses = classNames(styles.close);\n\n  return (\n    <button\n      ref={mergeRefs([ref, refObject])}\n      data-testid={testId}\n      className={closeClasses}\n      aria-label={ariaLabel}\n      onClick={onClick}\n      type=\"button\"\n    >\n      <span className={classNames(styles['close__inner-container'])}>\n        <Icon svgIcon={X} color=\"black\" size={iconSize} isHovered={isHovered} />\n      </span>\n    </button>\n  );\n};\n\nexport default Close;\n","interface TriangleProps {\n  isHover: boolean;\n  isFocus: boolean;\n  isActive: boolean;\n  isError: boolean;\n}\n\nexport interface Palette {\n  border: string;\n  background: string;\n}\n\nconst Triangle: React.FC<TriangleProps> = ({ isHover, isFocus, isActive, isError }) => {\n  const palette = ((): Palette => {\n    const colors: Palette = {\n      border: 'var(--component-stickynote-border-normal)',\n      background: 'var(--component-stickynote-background-fold-normal-light)',\n    };\n\n    if (!isError) {\n      if (isHover) {\n        colors.background = 'var(--component-stickynote-background-fold-normal-medium)';\n      }\n      if (isFocus) {\n        colors.border = 'var(--color-action-border-onlight-focus)';\n        colors.background = 'var(--component-stickynote-background-fold-normal-medium)';\n      }\n      if (isActive) {\n        colors.background = 'var(--component-stickynote-background-fold-normal-dark)';\n      }\n    } else {\n      colors.border = 'var(--component-stickynote-border-error)';\n      colors.background = 'var(--component-stickynote-background-fold-error-light)';\n      if (isHover) {\n        colors.background = 'var(--component-stickynote-background-fold-error-medium)';\n      }\n      if (isFocus) {\n        colors.border = 'var(--color-action-border-onlight-focus)';\n        colors.background = 'var(--component-stickynote-background-fold-error-medium)';\n      }\n      if (isActive) {\n        colors.background = 'var(--component-stickynote-background-fold-error-dark)';\n      }\n    }\n    return colors;\n  })();\n\n  let svg: React.ReactNode;\n\n  if (isFocus) {\n    svg = (\n      <svg width=\"21\" height=\"21\" viewBox=\"0 0 21 21\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <mask id=\"path-1-inside-1_7753_1401\" fill=\"white\">\n          <path d=\"M0.493163 20.9211L0.276366 20.9211L0.276367 0.921142L20.2764 0.921143L20.2764 1.13794L0.493163 20.9211Z\" />\n        </mask>\n        <path\n          d=\"M0.493163 20.9211L0.276366 20.9211L0.276367 0.921142L20.2764 0.921143L20.2764 1.13794L0.493163 20.9211Z\"\n          fill={palette.background}\n        />\n        <path\n          d=\"M0.493163 20.9211L0.493163 22.9211L1.32159 22.9211L1.90738 22.3354L0.493163 20.9211ZM0.276366 20.9211L-1.72363 20.9211L-1.72363 22.9211L0.276366 22.9211L0.276366 20.9211ZM0.276367 0.921142L0.276367 -1.07886L-1.72363 -1.07886L-1.72363 0.921142L0.276367 0.921142ZM20.2764 0.921143L22.2764 0.921143L22.2764 -1.07886L20.2764 -1.07886L20.2764 0.921143ZM20.2764 1.13794L21.6906 2.55215L22.2764 1.96637L22.2764 1.13794L20.2764 1.13794ZM0.493163 20.9211L0.493163 18.9211L0.276366 18.9211L0.276366 20.9211L0.276366 22.9211L0.493163 22.9211L0.493163 20.9211ZM0.276366 20.9211L2.27637 20.9211L2.27637 0.921142L0.276367 0.921142L-1.72363 0.921142L-1.72363 20.9211L0.276366 20.9211ZM0.276367 0.921142L0.276367 2.92114L20.2764 2.92114L20.2764 0.921143L20.2764 -1.07886L0.276367 -1.07886L0.276367 0.921142ZM20.2764 0.921143L18.2764 0.921142L18.2764 1.13794L20.2764 1.13794L22.2764 1.13794L22.2764 0.921143L20.2764 0.921143ZM20.2764 1.13794L18.8622 -0.276274L-0.92105 19.5069L0.493163 20.9211L1.90738 22.3354L21.6906 2.55215L20.2764 1.13794Z\"\n          fill={palette.border}\n          mask=\"url(#path-1-inside-1_7753_1401)\"\n        />\n      </svg>\n    );\n  } else {\n    svg = (\n      <svg width=\"21\" height=\"21\" viewBox=\"0 0 21 21\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <mask id=\"path-1-inside-1_7717_293537\" fill=\"white\">\n          <path d=\"M0.923827 20.9211L0.70703 20.9211L0.707031 0.921142L20.707 0.921143L20.707 1.13794L0.923827 20.9211Z\" />\n        </mask>\n        <path\n          d=\"M0.923827 20.9211L0.70703 20.9211L0.707031 0.921142L20.707 0.921143L20.707 1.13794L0.923827 20.9211Z\"\n          fill={palette.background}\n        />\n        <path\n          d=\"M0.923827 20.9211L0.923827 21.9211L1.33804 21.9211L1.63093 21.6282L0.923827 20.9211ZM0.70703 20.9211L-0.29297 20.9211L-0.29297 21.9211L0.70703 21.9211L0.70703 20.9211ZM0.707031 0.921142L0.707031 -0.0788582L-0.292969 -0.0788583L-0.292969 0.921142L0.707031 0.921142ZM20.707 0.921143L21.707 0.921143L21.707 -0.0788574L20.707 -0.0788574L20.707 0.921143ZM20.707 1.13794L21.4141 1.84505L21.707 1.55215L21.707 1.13794L20.707 1.13794ZM0.923827 20.9211L0.923827 19.9211L0.70703 19.9211L0.70703 20.9211L0.70703 21.9211L0.923827 21.9211L0.923827 20.9211ZM0.70703 20.9211L1.70703 20.9211L1.70703 0.921142L0.707031 0.921142L-0.292969 0.921142L-0.29297 20.9211L0.70703 20.9211ZM0.707031 0.921142L0.707031 1.92114L20.707 1.92114L20.707 0.921143L20.707 -0.0788574L0.707031 -0.0788582L0.707031 0.921142ZM20.707 0.921143L19.707 0.921143L19.707 1.13794L20.707 1.13794L21.707 1.13794L21.707 0.921143L20.707 0.921143ZM20.707 1.13794L19.9999 0.430833L0.21672 20.214L0.923827 20.9211L1.63093 21.6282L21.4141 1.84505L20.707 1.13794Z\"\n          fill={palette.border}\n          mask=\"url(#path-1-inside-1_7717_293537)\"\n        />\n      </svg>\n    );\n  }\n\n  return <>{svg}</>;\n};\n\nexport default Triangle;\n","import { useLayoutEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport Close from './Close';\nimport Triangle from './Triangle';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\n\nimport styles from './styles.module.scss';\n\nexport interface StickyNoteProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {\n  /** Aria label for the delete/close button */\n  arialabelXButton: string;\n  /** Activates the error styling */\n  error?: boolean;\n  /** Error text to show below the note */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Text shown under the textarea  */\n  footerText?: string;\n  /** Function run when clicking the delete/close button */\n  onXButtonClick?: () => void;\n  /** Function run if user clicks the component while it is disabled */\n  onClickWhileDisabled?: () => void;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Timestamp shown over the textarea  */\n  timestamp: string;\n  /** Classname for the outer wrapper */\n  wrapperClassName?: string;\n}\n\nconst StickyNote: React.FC<StickyNoteProps> = (props: StickyNoteProps) => {\n  const {\n    wrapperClassName,\n    timestamp,\n    onXButtonClick,\n    arialabelXButton,\n    footerText,\n    error,\n    errorText,\n    errorTextId: errorTextIdProp,\n    onClickWhileDisabled,\n    testId,\n    ...textareaProps\n  } = props;\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const stickynoteRef = useRef<HTMLDivElement>(null);\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n  const { isFocused: isTextareaFocused } = usePseudoClasses<HTMLTextAreaElement | null>(textareaRef);\n  const { isHovered, isActive } = usePseudoClasses<HTMLDivElement | null>(stickynoteRef);\n\n  const handleWrapperClick = (event: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>): void => {\n    if ((event.target as HTMLElement).closest('button')) {\n      return;\n    }\n    if (textareaProps.disabled) {\n      if (onClickWhileDisabled) onClickWhileDisabled();\n      return;\n    }\n    textareaRef.current?.focus();\n  };\n\n  const resizeTextarea = (): void => {\n    const textarea = textareaRef.current;\n    if (!textarea) return;\n    resizeTarget(textarea);\n  };\n\n  const resizeTarget = (target: HTMLTextAreaElement): void => {\n    // Reset field height\n    target.style.height = 'inherit';\n    // Set new height\n    target.style.height = `${target.scrollHeight}px`;\n  };\n\n  useLayoutEffect(() => {\n    resizeTextarea();\n    // Must run after the shadow DOM has been set up to work on microweb\n    setTimeout(() => resizeTextarea(), 1000);\n  }, []);\n\n  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    const textarea = e.target as HTMLTextAreaElement;\n    resizeTarget(textarea);\n    if (textareaProps.onChange) textareaProps.onChange(e);\n  };\n\n  return (\n    <div>\n      <div\n        data-testid={testId}\n        ref={stickynoteRef}\n        className={classNames(styles['sticky-note'], wrapperClassName, {\n          [styles['sticky-note--focused']]: isTextareaFocused,\n          [styles['sticky-note--active']]: isActive,\n          [styles['sticky-note--hovered']]: isHovered && !isTextareaFocused && !textareaProps.disabled,\n          [styles['sticky-note--error']]: error,\n        })}\n        onClick={handleWrapperClick}\n        role=\"textbox\"\n        tabIndex={-1}\n        onKeyDown={e => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            handleWrapperClick(e as React.KeyboardEvent<HTMLDivElement>);\n          }\n        }}\n      >\n        <div className={classNames(styles['sticky-note__header'])}>\n          {timestamp && <span className={styles['sticky-note__header__timestamp']}>{timestamp}</span>}\n        </div>\n        <textarea\n          ref={textareaRef}\n          data-testid={`${testId}-textarea`}\n          className={classNames(styles['sticky-note__textarea'], textareaProps.className)}\n          {...textareaProps}\n          onChange={handleChange}\n          aria-describedby={getAriaDescribedBy(props, errorTextId)}\n        />\n        <Close onClick={onXButtonClick} ariaLabel={arialabelXButton} testId=\"closeButton\" />\n        <div className={classNames(styles['sticky-note__footer'])}>{footerText && <span>{footerText}</span>}</div>\n        <div className={classNames(styles['sticky-note__triangle'])}>\n          <Triangle isHover={isHovered} isActive={isActive} isFocus={isTextareaFocused} isError={!!error} />\n        </div>\n      </div>\n      {error && (\n        <p className={styles['sticky-note__error-text']} id={errorTextId}>\n          {errorText}\n        </p>\n      )}\n    </div>\n  );\n};\n\nexport default StickyNote;\n","import StickyNote from './StickyNote';\nexport * from './StickyNote';\nexport default StickyNote;\n"],"mappings":"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"}

package/lib/components/Table/TableBody/index.js

@@ -1,15 +1,2 @@
-import "../../../constants2.js";
-import "../../../grid.js";
-import "../../../useBreakpoint.js";
-import "../../../accessibility.js";
-import "../../../useIntersectionObserver.js";
-import "../../../useIsVisible.js";
-import "../../../debounce.js";
-import "../../../useLayoutEvent.js";
-import "../../../useSize.js";
-import "../../../usestopPropagation.js";
-import "../../../HorizontalScroll.js";
-import "../../../device.js";
-import "../../../Table.js";
 import { n as TableBody, t as TableBody_default } from "../../../TableBody.js";
 export { TableBody, TableBody_default as default };

package/lib/components/Table/TableCell/index.js

@@ -1,15 +1,2 @@
-import "../../../constants2.js";
-import "../../../grid.js";
-import "../../../useBreakpoint.js";
-import "../../../accessibility.js";
-import "../../../useIntersectionObserver.js";
-import "../../../useIsVisible.js";
-import "../../../debounce.js";
-import "../../../useLayoutEvent.js";
-import "../../../useSize.js";
-import "../../../usestopPropagation.js";
-import "../../../HorizontalScroll.js";
-import "../../../device.js";
-import "../../../Table.js";
-import { n as TableCell, r as TextAlign, t as TableCell_default } from "../../../TableCell.js";
-export { TableCell, TextAlign, TableCell_default as default };
+import { n as TableCell, t as TableCell_default } from "../../../TableCell.js";
+export { TableCell, TableCell_default as default };

package/lib/components/Table/TableExpandedRow/index.js

@@ -1,31 +1,2 @@
-import "../../../environment.js";
-import "../../../constants2.js";
-import "../../../usePseudoClasses.js";
-import "../../../grid.js";
-import "../../../palette.js";
-import "../../../spacers.js";
-import "../../../theme.js";
-import "../../../color.js";
-import "../../../Icon.js";
-import "../../../_rolldown_dynamic_import_helper.js";
-import "../../../useIsServerSide.js";
-import "../../../LazyIcon.js";
-import "../../../component.js";
-import "../../../useIcons.js";
-import "../../../useBreakpoint.js";
-import "../../../useIsMobileBreakpoint.js";
-import "../../../ArrowRight.js";
-import "../../../Button.js";
-import "../../../accessibility.js";
-import "../../../useIntersectionObserver.js";
-import "../../../useIsVisible.js";
-import "../../../debounce.js";
-import "../../../useLayoutEvent.js";
-import "../../../useSize.js";
-import "../../../ChevronUp.js";
-import "../../../usestopPropagation.js";
-import "../../../HorizontalScroll.js";
-import "../../../device.js";
-import "../../../Table.js";
 import { n as TableExpandedRow, t as TableExpandedRow_default } from "../../../TableExpandedRow.js";
 export { TableExpandedRow, TableExpandedRow_default as default };

package/lib/components/Table/TableExpanderCell/index.js

@@ -1,32 +1,2 @@
-import "../../../environment.js";
-import "../../../constants2.js";
-import "../../../usePseudoClasses.js";
-import "../../../grid.js";
-import "../../../palette.js";
-import "../../../spacers.js";
-import "../../../theme.js";
-import "../../../color.js";
-import "../../../Icon.js";
-import "../../../_rolldown_dynamic_import_helper.js";
-import "../../../useIsServerSide.js";
-import "../../../LazyIcon.js";
-import "../../../component.js";
-import "../../../useIcons.js";
-import "../../../useBreakpoint.js";
-import "../../../useIsMobileBreakpoint.js";
-import "../../../ArrowRight.js";
-import "../../../Button.js";
-import "../../../accessibility.js";
-import "../../../useIntersectionObserver.js";
-import "../../../useIsVisible.js";
-import "../../../debounce.js";
-import "../../../useLayoutEvent.js";
-import "../../../useSize.js";
-import "../../../ChevronDown.js";
-import "../../../ChevronUp.js";
-import "../../../usestopPropagation.js";
-import "../../../HorizontalScroll.js";
-import "../../../device.js";
-import "../../../Table.js";
 import { n as TableExpanderCell, t as TableExpanderCell_default } from "../../../TableExpanderCell.js";
 export { TableExpanderCell, TableExpanderCell_default as default };

package/lib/components/Table/TableHead/index.js

@@ -1,15 +1,2 @@
-import "../../../constants2.js";
-import "../../../grid.js";
-import "../../../useBreakpoint.js";
-import "../../../accessibility.js";
-import "../../../useIntersectionObserver.js";
-import "../../../useIsVisible.js";
-import "../../../debounce.js";
-import "../../../useLayoutEvent.js";
-import "../../../useSize.js";
-import "../../../usestopPropagation.js";
-import "../../../HorizontalScroll.js";
-import "../../../device.js";
-import "../../../Table.js";
-import { n as HeaderCategory, r as TableHead, t as TableHead_default } from "../../../TableHead.js";
-export { HeaderCategory, TableHead, TableHead_default as default };
+import { n as TableHead, t as TableHead_default } from "../../../TableHead.js";
+export { TableHead, TableHead_default as default };

package/lib/components/Table/TableHeadCell/index.js

@@ -1,18 +1,2 @@
-import "../../../constants2.js";
-import "../../../grid.js";
-import "../../../Icon.js";
-import "../../../useBreakpoint.js";
-import "../../../accessibility.js";
-import "../../../useIntersectionObserver.js";
-import "../../../useIsVisible.js";
-import "../../../debounce.js";
-import "../../../useLayoutEvent.js";
-import "../../../useSize.js";
-import "../../../usestopPropagation.js";
-import "../../../HorizontalScroll.js";
-import "../../../ArrowDown.js";
-import "../../../ArrowUp.js";
-import "../../../device.js";
-import "../../../Table.js";
-import { n as SortDirection, r as TableHeadCell, t as TableHeadCell_default } from "../../../TableHeadCell.js";
-export { SortDirection, TableHeadCell, TableHeadCell_default as default };
+import { n as TableHeadCell, t as TableHeadCell_default } from "../../../TableHeadCell.js";
+export { TableHeadCell, TableHeadCell_default as default };

package/lib/components/Table/TableRow/index.js

@@ -1,32 +1,2 @@
-import "../../../environment.js";
-import "../../../constants2.js";
-import "../../../usePseudoClasses.js";
-import "../../../grid.js";
-import "../../../palette.js";
-import "../../../spacers.js";
-import "../../../theme.js";
-import "../../../color.js";
-import "../../../Icon.js";
-import "../../../_rolldown_dynamic_import_helper.js";
-import "../../../useIsServerSide.js";
-import "../../../LazyIcon.js";
-import "../../../component.js";
-import "../../../useIcons.js";
-import "../../../useBreakpoint.js";
-import "../../../useIsMobileBreakpoint.js";
-import "../../../ArrowRight.js";
-import "../../../Button.js";
-import "../../../accessibility.js";
-import "../../../useIntersectionObserver.js";
-import "../../../useIsVisible.js";
-import "../../../debounce.js";
-import "../../../useLayoutEvent.js";
-import "../../../useSize.js";
-import "../../../ChevronDown.js";
-import "../../../ChevronUp.js";
-import "../../../usestopPropagation.js";
-import "../../../HorizontalScroll.js";
-import "../../../device.js";
-import "../../../Table.js";
 import { n as TableRow, t as TableRow_default } from "../../../TableRow.js";
 export { TableRow, TableRow_default as default };

package/lib/components/Table/index.js

@@ -1,42 +1,77 @@
-import "../../environment.js";
-import "../../constants2.js";
-import "../../usePseudoClasses.js";
-import "../../grid.js";
-import "../../palette.js";
-import "../../spacers.js";
-import "../../theme.js";
-import "../../color.js";
-import "../../Icon.js";
-import "../../_rolldown_dynamic_import_helper.js";
-import "../../useIsServerSide.js";
-import "../../LazyIcon.js";
-import "../../component.js";
-import "../../useIcons.js";
-import "../../useBreakpoint.js";
-import "../../useIsMobileBreakpoint.js";
-import "../../ArrowRight.js";
-import "../../Button.js";
-import "../../accessibility.js";
-import "../../useIntersectionObserver.js";
-import "../../useIsVisible.js";
-import "../../debounce.js";
-import "../../useLayoutEvent.js";
-import "../../useSize.js";
-import "../../ChevronDown.js";
-import "../../ChevronUp.js";
-import "../../usestopPropagation.js";
-import "../../HorizontalScroll.js";
-import "../../ArrowDown.js";
-import "../../ArrowUp.js";
-import "../../device.js";
-import { a as simpleConfig, i as defaultConfig, n as ResponsiveTableVariant, r as Table, t as ModeType } from "../../Table.js";
+import { n as AnalyticsId } from "../../constants2.js";
+import { n as useBreakpoint } from "../../useBreakpoint.js";
+import { n as getAriaLabelAttributes } from "../../accessibility.js";
+import { t as useIsVisible } from "../../useIsVisible.js";
+import { t as useLayoutEvent } from "../../useLayoutEvent.js";
+import { t as HorizontalScroll_default } from "../../HorizontalScroll.js";
+import { a as TextAlign, i as SortDirection, n as ModeType, o as defaultConfig, r as ResponsiveTableVariant, s as simpleConfig, t as HeaderCategory } from "../../constants4.js";
+import { a as omitProps, i as mapChildrenWithMode, n as getCenteredOverflowTableStyle, r as getCurrentConfig, t as getBreakpointClass } from "../../utils5.js";
 import { n as TableBody } from "../../TableBody.js";
-import { n as TableCell, r as TextAlign } from "../../TableCell.js";
+import { n as TableCell } from "../../TableCell.js";
 import { n as TableExpandedRow } from "../../TableExpandedRow.js";
 import { n as TableExpanderCell } from "../../TableExpanderCell.js";
-import { n as HeaderCategory, r as TableHead } from "../../TableHead.js";
-import { n as SortDirection, r as TableHeadCell } from "../../TableHeadCell.js";
+import { n as TableHead } from "../../TableHead.js";
+import { n as TableHeadCell } from "../../TableHeadCell.js";
 import { n as TableRow } from "../../TableRow.js";
+import classNames from "classnames";
+import { useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import tableStyles from "./styles.module.scss";
+const Table = ({ id, testId, className, children, breakpointConfig = defaultConfig, mode = ModeType.normal, scrollAriaLabel, scrollAriaLabelledById, ...rest }) => {
+	const [currentConfig, setCurrentConfig] = useState();
+	const [tableWidth, setTableWidth] = useState(0);
+	const [parentWidth, setParentWidth] = useState(0);
+	const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+	const tableRef = useRef(null);
+	const tableIsVisible = useIsVisible(tableRef, 0);
+	const breakpoint = useBreakpoint();
+	useEffect(() => {
+		setCurrentConfig(getCurrentConfig(breakpointConfig, breakpoint, tableWidth, windowWidth));
+	}, [
+		breakpointConfig,
+		breakpoint,
+		tableWidth,
+		windowWidth
+	]);
+	useEffect(() => {
+		if (currentConfig?.variant === ResponsiveTableVariant.centeredoverflow || currentConfig?.variant === ResponsiveTableVariant.horizontalscroll) setTableWidth(tableRef.current?.getBoundingClientRect().width ?? 0);
+		if (currentConfig?.variant === ResponsiveTableVariant.centeredoverflow) setParentWidth(tableRef.current?.parentElement?.getBoundingClientRect().width ?? 0);
+	}, [currentConfig, breakpoint]);
+	useLayoutEvent(() => setWindowWidth(window.innerWidth), ["resize"], 100);
+	useEffect(() => {
+		if (tableWidth === 0 && tableIsVisible) setTableWidth(tableRef.current?.getBoundingClientRect().width ?? 0);
+	}, [tableWidth, tableIsVisible]);
+	const tableStyle = currentConfig?.variant === ResponsiveTableVariant.centeredoverflow ? getCenteredOverflowTableStyle(parentWidth, tableWidth) : void 0;
+	const breakpointClass = getBreakpointClass(currentConfig);
+	const tableClass = classNames(tableStyles.table, breakpointClass, className);
+	const domRest = omitProps(rest, [
+		"breakpoint",
+		"variant",
+		"fallbackVariant",
+		"headerCategory"
+	]);
+	const table = /* @__PURE__ */ jsx("table", {
+		className: tableClass,
+		id,
+		"data-testid": testId,
+		"data-analyticsid": AnalyticsId.Table,
+		ref: tableRef,
+		style: tableStyle,
+		...domRest,
+		children: mapChildrenWithMode(children, mode)
+	});
+	const ariaLabelAttributes = getAriaLabelAttributes({
+		label: scrollAriaLabel,
+		id: scrollAriaLabelledById
+	});
+	if (currentConfig?.variant === ResponsiveTableVariant.horizontalscroll) return /* @__PURE__ */ jsx(HorizontalScroll_default, {
+		childWidth: tableWidth,
+		testId: "horizontal-scroll",
+		...ariaLabelAttributes,
+		children: table
+	});
+	return table;
+};
 var Table_default = Table;
 export { HeaderCategory, ModeType, ResponsiveTableVariant, SortDirection, Table, TableBody, TableCell, TableExpandedRow, TableExpanderCell, TableHead, TableHeadCell, TableRow, TextAlign, Table_default as default, defaultConfig, simpleConfig };
 

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Table/index.ts"],"sourcesContent":["import { Table } from './Table';\n\nexport { TableBody } from './TableBody';\nexport { TableCell, TextAlign } from './TableCell';\nexport { TableExpandedRow } from './TableExpandedRow';\nexport { TableExpanderCell } from './TableExpanderCell';\nexport { TableHead, HeaderCategory } from './TableHead';\nexport { TableHeadCell, SortDirection } from './TableHeadCell';\nexport { TableRow } from './TableRow';\n\nexport * from './Table';\n\nexport default Table;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,IAAA,gBAAe"}
+{"version":3,"file":"index.js","names":["Table: React.FC<Props>"],"sources":["../../../src/components/Table/Table.tsx","../../../src/components/Table/index.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { Breakpoint } from '../../hooks/useBreakpoint';\n\nimport { defaultConfig, ModeType, ResponsiveTableVariant } from './constants';\nimport { getCurrentConfig, getBreakpointClass, getCenteredOverflowTableStyle, mapChildrenWithMode, omitProps } from './utils';\nimport { AnalyticsId } from '../../constants';\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useLayoutEvent } from '../../hooks/useLayoutEvent';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport HorizontalScroll from '../HorizontalScroll';\n\nimport styles from './styles.module.scss';\n\nexport interface BreakpointConfig {\n  /** Breakpoint at which responsive behaviour will be applied. The table component uses a \"desktop first\" approach. */\n  breakpoint: keyof typeof Breakpoint;\n  /** Desired behaviour on this breakpoint and all smaller screens. */\n  variant: keyof typeof ResponsiveTableVariant;\n  /** If variant is horizontallscroll, use a fallback instead of device is not a touch device. */\n  fallbackVariant?: keyof typeof ResponsiveTableVariant;\n}\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'table'>, 'style'> {\n  /** Unique ID */\n  id?: string;\n  /** Id used for testing */\n  testId?: string;\n  /** Customize how the table behaves on various screen widths */\n  breakpointConfig?: BreakpointConfig | BreakpointConfig[];\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the table. Use TableHead and TableBody */\n  children: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n  /** Sets aria-label of the horizontal scroll container. scrollAriaLabel or scrollAriaLabelledById MUST be set if horizontal scrolling is enabled! */\n  scrollAriaLabel?: string;\n  /** Sets aria-labelledby of the horizontal scroll container. scrollAriaLabel or scrollAriaLabelledById MUST be set if horizontal scrolling is enabled! */\n  scrollAriaLabelledById?: string;\n}\n\nexport const Table: React.FC<Props> = ({\n  id,\n  testId,\n  className,\n  children,\n  breakpointConfig = defaultConfig,\n  mode = ModeType.normal,\n  scrollAriaLabel,\n  scrollAriaLabelledById,\n  ...rest\n}) => {\n  const [currentConfig, setCurrentConfig] = useState<BreakpointConfig>();\n  const [tableWidth, setTableWidth] = useState<number>(0);\n  const [parentWidth, setParentWidth] = useState<number>(0);\n  const [windowWidth, setWindowWidth] = useState(window.innerWidth);\n  const tableRef = useRef<HTMLTableElement>(null);\n  const tableIsVisible = useIsVisible(tableRef, 0);\n  const breakpoint = useBreakpoint();\n\n  useEffect(() => {\n    setCurrentConfig(getCurrentConfig(breakpointConfig, breakpoint, tableWidth, windowWidth));\n  }, [breakpointConfig, breakpoint, tableWidth, windowWidth]);\n\n  useEffect(() => {\n    if (\n      currentConfig?.variant === ResponsiveTableVariant.centeredoverflow ||\n      currentConfig?.variant === ResponsiveTableVariant.horizontalscroll\n    ) {\n      setTableWidth(tableRef.current?.getBoundingClientRect().width ?? 0);\n    }\n    if (currentConfig?.variant === ResponsiveTableVariant.centeredoverflow) {\n      setParentWidth(tableRef.current?.parentElement?.getBoundingClientRect().width ?? 0);\n    }\n  }, [currentConfig, breakpoint]);\n\n  useLayoutEvent(() => setWindowWidth(window.innerWidth), ['resize'], 100);\n\n  useEffect(() => {\n    if (tableWidth === 0 && tableIsVisible) {\n      setTableWidth(tableRef.current?.getBoundingClientRect().width ?? 0);\n    }\n  }, [tableWidth, tableIsVisible]);\n\n  const tableStyle =\n    currentConfig?.variant === ResponsiveTableVariant.centeredoverflow ? getCenteredOverflowTableStyle(parentWidth, tableWidth) : undefined;\n\n  const breakpointClass = getBreakpointClass(currentConfig);\n  const tableClass = classNames(styles.table, breakpointClass, className);\n  const domRest = omitProps(rest as Record<string, unknown>, ['breakpoint', 'variant', 'fallbackVariant', 'headerCategory']);\n\n  const table = (\n    <table\n      className={tableClass}\n      id={id}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Table}\n      ref={tableRef}\n      style={tableStyle}\n      {...(domRest as React.ComponentPropsWithoutRef<'table'>)}\n    >\n      {mapChildrenWithMode(children, mode)}\n    </table>\n  );\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: scrollAriaLabel, id: scrollAriaLabelledById });\n\n  if (currentConfig?.variant === ResponsiveTableVariant.horizontalscroll) {\n    return (\n      <HorizontalScroll childWidth={tableWidth} testId=\"horizontal-scroll\" {...ariaLabelAttributes}>\n        {table}\n      </HorizontalScroll>\n    );\n  }\n\n  return table;\n};\n\nexport default Table;\n","import { Table } from './Table';\n\nexport { TableBody } from './TableBody';\nexport { TableCell } from './TableCell';\nexport { TableExpandedRow } from './TableExpandedRow';\nexport { TableExpanderCell } from './TableExpanderCell';\nexport { TableHead } from './TableHead';\nexport { TableHeadCell } from './TableHeadCell';\nexport { TableRow } from './TableRow';\nexport { SortDirection, HeaderCategory, TextAlign, ResponsiveTableVariant, ModeType, defaultConfig, simpleConfig } from './constants';\n\nexport * from './Table';\n\nexport default Table;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA6CA,MAAaA,SAA0B,EACrC,IACA,QACA,WACA,UACA,mBAAmB,eACnB,OAAO,SAAS,QAChB,iBACA,wBACA,GAAG,WACC;CACJ,MAAM,CAAC,eAAe,oBAAoB,UAA4B;CACtE,MAAM,CAAC,YAAY,iBAAiB,SAAiB,EAAE;CACvD,MAAM,CAAC,aAAa,kBAAkB,SAAiB,EAAE;CACzD,MAAM,CAAC,aAAa,kBAAkB,SAAS,OAAO,WAAW;CACjE,MAAM,WAAW,OAAyB,KAAK;CAC/C,MAAM,iBAAiB,aAAa,UAAU,EAAE;CAChD,MAAM,aAAa,eAAe;AAElC,iBAAgB;AACd,mBAAiB,iBAAiB,kBAAkB,YAAY,YAAY,YAAY,CAAC;IACxF;EAAC;EAAkB;EAAY;EAAY;EAAY,CAAC;AAE3D,iBAAgB;AACd,MACE,eAAe,YAAY,uBAAuB,oBAClD,eAAe,YAAY,uBAAuB,iBAElD,eAAc,SAAS,SAAS,uBAAuB,CAAC,SAAS,EAAE;AAErE,MAAI,eAAe,YAAY,uBAAuB,iBACpD,gBAAe,SAAS,SAAS,eAAe,uBAAuB,CAAC,SAAS,EAAE;IAEpF,CAAC,eAAe,WAAW,CAAC;AAE/B,sBAAqB,eAAe,OAAO,WAAW,EAAE,CAAC,SAAS,EAAE,IAAI;AAExE,iBAAgB;AACd,MAAI,eAAe,KAAK,eACtB,eAAc,SAAS,SAAS,uBAAuB,CAAC,SAAS,EAAE;IAEpE,CAAC,YAAY,eAAe,CAAC;CAEhC,MAAM,aACJ,eAAe,YAAY,uBAAuB,mBAAmB,8BAA8B,aAAa,WAAW,GAAG,KAAA;CAEhI,MAAM,kBAAkB,mBAAmB,cAAc;CACzD,MAAM,aAAa,WAAW,YAAO,OAAO,iBAAiB,UAAU;CACvE,MAAM,UAAU,UAAU,MAAiC;EAAC;EAAc;EAAW;EAAmB;EAAiB,CAAC;CAE1H,MAAM,QACJ,oBAAC,SAAA;EACC,WAAW;EACP;EACJ,eAAa;EACb,oBAAkB,YAAY;EAC9B,KAAK;EACL,OAAO;EACP,GAAK;YAEJ,oBAAoB,UAAU,KAAK;GAC9B;CAGV,MAAM,sBAAsB,uBAAuB;EAAE,OAAO;EAAiB,IAAI;EAAwB,CAAC;AAE1G,KAAI,eAAe,YAAY,uBAAuB,iBACpD,QACE,oBAAC,0BAAA;EAAiB,YAAY;EAAY,QAAO;EAAoB,GAAI;YACtE;GACgB;AAIvB,QAAO;;AC1GT,IAAA,gBAAe"}

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

@@ -1,16 +1,2 @@
-import "../../../constants2.js";
-import "../../../usePseudoClasses.js";
-import "../../../palette.js";
-import "../../../Icon.js";
-import "../../../_rolldown_dynamic_import_helper.js";
-import "../../../useIsServerSide.js";
-import "../../../LazyIcon.js";
-import "../../../component.js";
-import "../../../useIntersectionObserver.js";
-import "../../../useIsVisible.js";
-import "../../../useKeyboardEvent.js";
-import "../../../ChevronLeft.js";
-import "../../../ChevronRight.js";
 import { t as TabList_default } from "../../../TabList.js";
-import "../../../useRovingFocus.js";
 export { TabList_default as default };

package/lib/components/Tabs/index.js

@@ -1,22 +1,9 @@
 import { s as LanguageLocales } from "../../constants2.js";
-import "../../usePseudoClasses.js";
-import "../../palette.js";
-import "../../Icon.js";
-import { r as useLanguage } from "../../language.js";
-import "../../_rolldown_dynamic_import_helper.js";
-import "../../useIsServerSide.js";
-import "../../LazyIcon.js";
-import "../../component.js";
-import "../../useIntersectionObserver.js";
-import "../../useIsVisible.js";
-import "../../useKeyboardEvent.js";
-import "../../ChevronLeft.js";
-import "../../ChevronRight.js";
+import { n as useLanguage } from "../../useLanguage.js";
 import { n as Tab_default, t as TabList_default } from "../../TabList.js";
-import "../../useRovingFocus.js";
 import { t as TabPanel_default } from "../../TabPanel.js";
+import classNames from "classnames";
 import React, { useRef, useState } from "react";
-import cn from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import designsystemlayout from "../../scss/layout.module.scss";
 import styles from "./styles.module.scss";
@@ -35,19 +22,16 @@ const getResources = (language) => {
 		default: return HN_Designsystem_Tabs_nb_NO_default;
 	}
 };
-const TabsRoot = ({ activeTab, children, className, color = "white", containerBreakout = true, onColor = "onwhite", sticky = true, testId, ariaLabelRightButton: ariaLabelRightButton$2, ariaLabelLeftButton: ariaLabelLeftButton$2, resources, zIndex }) => {
+const TabsRoot = ({ activeTab, children, className, color = "white", containerBreakout = true, onColor = "onwhite", sticky = true, testId, resources, zIndex }) => {
 	const isControlled = activeTab !== void 0;
 	const [uncontrolledValue, setUncontrolledValue] = useState(0);
 	const tabsRef = useRef(null);
 	const tabPanelRef = useRef(null);
 	const tabListRef = useRef(null);
 	const { language } = useLanguage(LanguageLocales.NORWEGIAN);
-	const defaultResources = getResources(language);
 	const mergedResources = {
-		...defaultResources,
-		...resources,
-		ariaLabelRightButton: ariaLabelRightButton$2 || resources?.ariaLabelRightButton || defaultResources.ariaLabelRightButton,
-		ariaLabelLeftButton: ariaLabelLeftButton$2 || resources?.ariaLabelLeftButton || defaultResources.ariaLabelLeftButton
+		...getResources(language),
+		...resources
 	};
 	let onColorUsed = "onwhite";
 	if (color === "white") onColorUsed = onColor;
@@ -56,11 +40,11 @@ const TabsRoot = ({ activeTab, children, className, color = "white", containerBr
 	};
 	const activeTabIndex = isControlled ? activeTab : uncontrolledValue;
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn(className, containerBreakout && designsystemlayout["container-breakout"]),
+		className: classNames(className, containerBreakout && designsystemlayout["container-breakout"]),
 		"data-testid": testId,
 		children: [/* @__PURE__ */ jsxs("div", {
 			ref: tabListRef,
-			className: cn(styles["tab-list-wrapper"], { [styles["tab-list-wrapper--sticky"]]: sticky }),
+			className: classNames(styles["tab-list-wrapper"], { [styles["tab-list-wrapper--sticky"]]: sticky }),
 			style: { zIndex },
 			children: [/* @__PURE__ */ jsx(TabList_default, {
 				onTabListClick: (index) => onValueChange(index),
@@ -70,7 +54,7 @@ const TabsRoot = ({ activeTab, children, className, color = "white", containerBr
 				ariaLabelLeftButton: mergedResources.ariaLabelLeftButton,
 				ariaLabelRightButton: mergedResources.ariaLabelRightButton,
 				children
-			}), /* @__PURE__ */ jsx("div", { className: cn(styles["panel-wrapper"], styles[`panel-wrapper--${color}`]) })]
+			}), /* @__PURE__ */ jsx("div", { className: classNames(styles["panel-wrapper"], styles[`panel-wrapper--${color}`]) })]
 		}), /* @__PURE__ */ jsx("div", {
 			ref: tabsRef,
 			style: { marginTop: "-50px" },

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["TabsRoot: React.FC<TabsProps>","mergedResources: HNDesignsystemTabs","onColorUsed: TabsOnColor"],"sources":["../../../src/resources/HN.Designsystem.Tabs.en-GB.json","../../../src/resources/HN.Designsystem.Tabs.nb-NO.json","../../../src/components/Tabs/resourceHelper.ts","../../../src/components/Tabs/Tabs.tsx","../../../src/components/Tabs/index.ts"],"sourcesContent":["{\n  \"ariaLabelRightButton\": \"Scroll right\",\n  \"ariaLabelLeftButton\": \"Scroll left\"\n}\n","{\n  \"ariaLabelRightButton\": \"Scroll til høyre\",\n  \"ariaLabelLeftButton\": \"Scroll til venstre\"\n}\n","import { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Tabs.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Tabs.nb-NO.json';\nimport { HNDesignsystemTabs } from '../../resources/Resources';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemTabs => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import React, { useState, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { getResources } from './resourceHelper';\nimport Tab from './Tab';\nimport TabList from './TabList';\nimport TabPanel from './TabPanel';\nimport { LanguageLocales } from '../../constants';\nimport { HNDesignsystemTabs } from '../../resources/Resources';\nimport designsystemlayout from '../../scss/layout.module.scss';\nimport { PaletteNames } from '../../theme/palette';\nimport { useLanguage } from '../../utils/language';\n\nimport styles from './styles.module.scss';\n\nexport type { TabProps } from './Tab';\nexport type TabsColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'white'>;\nexport type TabsOnColor = 'onblueberry' | 'onneutral' | 'onwhite';\n\nexport interface TabsProps {\n  children?: React.ReactNode;\n  /** Controlled state for Tabs component */\n  activeTab?: number;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the color of the tabs. Default: white */\n  color?: TabsColors;\n  /** Sets wether the component should use the container-breakout class. Default: true */\n  containerBreakout?: boolean;\n  /** Sets the background color of the tabs. Can only be used when the color is set to white. Default: onwhite */\n  onColor?: TabsOnColor;\n  /** Whether the tab list should be sticky */\n  sticky?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** @deprecated Sets aria label on the \"scroll to the right\" button in TabList */\n  ariaLabelRightButton?: string;\n  /** @deprecated Sets aria label on the \"scroll to the left\" button in TabList */\n  ariaLabelLeftButton?: string;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemTabs>;\n  /** Overrides the default z-index of the tabs header */\n  zIndex?: number;\n}\n\nexport const TabsRoot: React.FC<TabsProps> = ({\n  activeTab,\n  children,\n  className,\n  color = 'white',\n  containerBreakout = true,\n  onColor = 'onwhite',\n  sticky = true,\n  testId,\n  ariaLabelRightButton,\n  ariaLabelLeftButton,\n  resources,\n  zIndex,\n}) => {\n  const isControlled = activeTab !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState(0);\n  const tabsRef = useRef<HTMLDivElement>(null);\n  const tabPanelRef = useRef<HTMLDivElement>(null);\n  const tabListRef = useRef<HTMLDivElement>(null);\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemTabs = {\n    ...defaultResources,\n    ...resources,\n    ariaLabelRightButton: ariaLabelRightButton || resources?.ariaLabelRightButton || defaultResources.ariaLabelRightButton,\n    ariaLabelLeftButton: ariaLabelLeftButton || resources?.ariaLabelLeftButton || defaultResources.ariaLabelLeftButton,\n  };\n\n  let onColorUsed: TabsOnColor = 'onwhite';\n  if (color === 'white') {\n    onColorUsed = onColor;\n  }\n\n  const onValueChange = (newValue: number): void => {\n    if (!isControlled) {\n      setUncontrolledValue(newValue);\n    }\n  };\n\n  const activeTabIndex = isControlled ? activeTab : uncontrolledValue;\n\n  return (\n    <div className={classNames(className, containerBreakout && designsystemlayout['container-breakout'])} data-testid={testId}>\n      <div\n        ref={tabListRef}\n        className={classNames(styles['tab-list-wrapper'], {\n          [styles['tab-list-wrapper--sticky']]: sticky,\n        })}\n        style={{\n          zIndex: zIndex,\n        }}\n      >\n        <TabList\n          onTabListClick={(index: number) => onValueChange(index)}\n          selectedTab={activeTabIndex}\n          color={color}\n          onColor={onColorUsed}\n          ariaLabelLeftButton={mergedResources.ariaLabelLeftButton}\n          ariaLabelRightButton={mergedResources.ariaLabelRightButton}\n        >\n          {children}\n        </TabList>\n        <div className={classNames(styles['panel-wrapper'], styles[`panel-wrapper--${color}`])}></div>\n      </div>\n      <div ref={tabsRef} style={{ marginTop: '-50px' }}>\n        <TabPanel ref={tabPanelRef} color={color} isFirst={activeTabIndex == 0}>\n          {React.Children.toArray(children)[activeTabIndex]}\n        </TabPanel>\n      </div>\n    </div>\n  );\n};\n\ntype TabsComponent = typeof TabsRoot & {\n  Tab: typeof Tab;\n};\nconst Tabs = TabsRoot as TabsComponent;\nTabsRoot.displayName = 'Tabs';\nTabs.displayName = 'Tabs';\nTabs.Tab = Tab;\nTabs.Tab.displayName = 'Tabs.Tab';\n\nexport default Tabs;\n","import Tabs from './Tabs';\nexport * from './Tabs';\nexport default Tabs;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AEKA,MAAa,gBAAgB,aAAkD;AAC7E,SAAQ,UAAR;EACE,KAAK,gBAAgB,QACnB,QAAO;EACT,KAAK,gBAAgB;EACrB,QACE,QAAO;;;ACmCb,MAAaA,YAAiC,EAC5C,WACA,UACA,WACA,QAAQ,SACR,oBAAoB,MACpB,UAAU,WACV,SAAS,MACT,QACA,sBAAA,wBACA,qBAAA,uBACA,WACA,aACI;CACJ,MAAM,eAAe,cAAc,KAAA;CACnC,MAAM,CAAC,mBAAmB,wBAAwB,SAAS,EAAE;CAC7D,MAAM,UAAU,OAAuB,KAAK;CAC5C,MAAM,cAAc,OAAuB,KAAK;CAChD,MAAM,aAAa,OAAuB,KAAK;CAC/C,MAAM,EAAE,aAAa,YAA6B,gBAAgB,UAAU;CAC5E,MAAM,mBAAmB,aAAa,SAAS;CAE/C,MAAMC,kBAAsC;EAC1C,GAAG;EACH,GAAG;EACH,sBAAsB,0BAAwB,WAAW,wBAAwB,iBAAiB;EAClG,qBAAqB,yBAAuB,WAAW,uBAAuB,iBAAiB;EAChG;CAED,IAAIC,cAA2B;AAC/B,KAAI,UAAU,QACZ,eAAc;CAGhB,MAAM,iBAAiB,aAA2B;AAChD,MAAI,CAAC,aACH,sBAAqB,SAAS;;CAIlC,MAAM,iBAAiB,eAAe,YAAY;AAElD,QACE,qBAAC,OAAA;EAAI,WAAW,GAAW,WAAW,qBAAqB,mBAAmB,sBAAsB;EAAE,eAAa;aACjH,qBAAC,OAAA;GACC,KAAK;GACL,WAAW,GAAW,OAAO,qBAAqB,GAC/C,OAAO,8BAA8B,QACvC,CAAC;GACF,OAAO,EACG,QACT;cAED,oBAAC,iBAAA;IACC,iBAAiB,UAAkB,cAAc,MAAM;IACvD,aAAa;IACN;IACP,SAAS;IACT,qBAAqB,gBAAgB;IACrC,sBAAsB,gBAAgB;IAErC;KACO,EACV,oBAAC,OAAA,EAAI,WAAW,GAAW,OAAO,kBAAkB,OAAO,kBAAkB,SAAS,EAAA,CAAQ,CAAA;IAC1F,EACN,oBAAC,OAAA;GAAI,KAAK;GAAS,OAAO,EAAE,WAAW,SAAS;aAC9C,oBAAC,kBAAA;IAAS,KAAK;IAAoB;IAAO,SAAS,kBAAkB;cAClE,MAAM,SAAS,QAAQ,SAAS,CAAC;KACzB;IACP,CAAA;GACF;;AAOV,IAAM,OAAO;AACb,SAAS,cAAc;AACvB,KAAK,cAAc;AACnB,KAAK,MAAM;AACX,KAAK,IAAI,cAAc;AC7HvB,IAAA,eD+He"}
+{"version":3,"file":"index.js","names":["TabsRoot: React.FC<TabsProps>","mergedResources: HNDesignsystemTabs","onColorUsed: TabsOnColor"],"sources":["../../../src/resources/HN.Designsystem.Tabs.en-GB.json","../../../src/resources/HN.Designsystem.Tabs.nb-NO.json","../../../src/components/Tabs/resourceHelper.ts","../../../src/components/Tabs/Tabs.tsx","../../../src/components/Tabs/index.ts"],"sourcesContent":["{\n  \"ariaLabelRightButton\": \"Scroll right\",\n  \"ariaLabelLeftButton\": \"Scroll left\"\n}\n","{\n  \"ariaLabelRightButton\": \"Scroll til høyre\",\n  \"ariaLabelLeftButton\": \"Scroll til venstre\"\n}\n","import type { HNDesignsystemTabs } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Tabs.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Tabs.nb-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemTabs => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import React, { useState, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { HNDesignsystemTabs } from '../../resources/Resources';\nimport type { PaletteNames } from '../../theme/palette';\n\nimport { getResources } from './resourceHelper';\nimport Tab from './Tab';\nimport TabList from './TabList';\nimport TabPanel from './TabPanel';\nimport { LanguageLocales } from '../../constants';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport designsystemlayout from '../../scss/layout.module.scss';\n\nimport styles from './styles.module.scss';\n\nexport type { TabProps } from './Tab';\nexport type TabsColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'white'>;\nexport type TabsOnColor = 'onblueberry' | 'onneutral' | 'onwhite';\n\nexport interface TabsProps {\n  children?: React.ReactNode;\n  /** Controlled state for Tabs component */\n  activeTab?: number;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the color of the tabs. Default: white */\n  color?: TabsColors;\n  /** Sets wether the component should use the container-breakout class. Default: true */\n  containerBreakout?: boolean;\n  /** Sets the background color of the tabs. Can only be used when the color is set to white. Default: onwhite */\n  onColor?: TabsOnColor;\n  /** Whether the tab list should be sticky */\n  sticky?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemTabs>;\n  /** Overrides the default z-index of the tabs header */\n  zIndex?: number;\n}\n\nexport const TabsRoot: React.FC<TabsProps> = ({\n  activeTab,\n  children,\n  className,\n  color = 'white',\n  containerBreakout = true,\n  onColor = 'onwhite',\n  sticky = true,\n  testId,\n  resources,\n  zIndex,\n}) => {\n  const isControlled = activeTab !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState(0);\n  const tabsRef = useRef<HTMLDivElement>(null);\n  const tabPanelRef = useRef<HTMLDivElement>(null);\n  const tabListRef = useRef<HTMLDivElement>(null);\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemTabs = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  let onColorUsed: TabsOnColor = 'onwhite';\n  if (color === 'white') {\n    onColorUsed = onColor;\n  }\n\n  const onValueChange = (newValue: number): void => {\n    if (!isControlled) {\n      setUncontrolledValue(newValue);\n    }\n  };\n\n  const activeTabIndex = isControlled ? activeTab : uncontrolledValue;\n\n  return (\n    <div className={classNames(className, containerBreakout && designsystemlayout['container-breakout'])} data-testid={testId}>\n      <div\n        ref={tabListRef}\n        className={classNames(styles['tab-list-wrapper'], {\n          [styles['tab-list-wrapper--sticky']]: sticky,\n        })}\n        style={{\n          zIndex: zIndex,\n        }}\n      >\n        <TabList\n          onTabListClick={(index: number) => onValueChange(index)}\n          selectedTab={activeTabIndex}\n          color={color}\n          onColor={onColorUsed}\n          ariaLabelLeftButton={mergedResources.ariaLabelLeftButton}\n          ariaLabelRightButton={mergedResources.ariaLabelRightButton}\n        >\n          {children}\n        </TabList>\n        <div className={classNames(styles['panel-wrapper'], styles[`panel-wrapper--${color}`])}></div>\n      </div>\n      <div ref={tabsRef} style={{ marginTop: '-50px' }}>\n        <TabPanel ref={tabPanelRef} color={color} isFirst={activeTabIndex == 0}>\n          {React.Children.toArray(children)[activeTabIndex]}\n        </TabPanel>\n      </div>\n    </div>\n  );\n};\n\ntype TabsComponent = typeof TabsRoot & {\n  Tab: typeof Tab;\n};\nconst Tabs = TabsRoot as TabsComponent;\nTabsRoot.displayName = 'Tabs';\nTabs.displayName = 'Tabs';\nTabs.Tab = Tab;\nTabs.Tab.displayName = 'Tabs.Tab';\n\nexport default Tabs;\n","import Tabs from './Tabs';\nexport * from './Tabs';\nexport default Tabs;\n"],"mappings":";;;;;;;;;;;;;;;;;AEMA,MAAa,gBAAgB,aAAkD;AAC7E,SAAQ,UAAR;EACE,KAAK,gBAAgB,QACnB,QAAO;EACT,KAAK,gBAAgB;EACrB,QACE,QAAO;;;AC+Bb,MAAaA,YAAiC,EAC5C,WACA,UACA,WACA,QAAQ,SACR,oBAAoB,MACpB,UAAU,WACV,SAAS,MACT,QACA,WACA,aACI;CACJ,MAAM,eAAe,cAAc,KAAA;CACnC,MAAM,CAAC,mBAAmB,wBAAwB,SAAS,EAAE;CAC7D,MAAM,UAAU,OAAuB,KAAK;CAC5C,MAAM,cAAc,OAAuB,KAAK;CAChD,MAAM,aAAa,OAAuB,KAAK;CAC/C,MAAM,EAAE,aAAa,YAA6B,gBAAgB,UAAU;CAG5E,MAAMC,kBAAsC;EAC1C,GAHuB,aAAa,SAAS;EAI7C,GAAG;EACJ;CAED,IAAIC,cAA2B;AAC/B,KAAI,UAAU,QACZ,eAAc;CAGhB,MAAM,iBAAiB,aAA2B;AAChD,MAAI,CAAC,aACH,sBAAqB,SAAS;;CAIlC,MAAM,iBAAiB,eAAe,YAAY;AAElD,QACE,qBAAC,OAAA;EAAI,WAAW,WAAW,WAAW,qBAAqB,mBAAmB,sBAAsB;EAAE,eAAa;aACjH,qBAAC,OAAA;GACC,KAAK;GACL,WAAW,WAAW,OAAO,qBAAqB,GAC/C,OAAO,8BAA8B,QACvC,CAAC;GACF,OAAO,EACG,QACT;cAED,oBAAC,iBAAA;IACC,iBAAiB,UAAkB,cAAc,MAAM;IACvD,aAAa;IACN;IACP,SAAS;IACT,qBAAqB,gBAAgB;IACrC,sBAAsB,gBAAgB;IAErC;KACO,EACV,oBAAC,OAAA,EAAI,WAAW,WAAW,OAAO,kBAAkB,OAAO,kBAAkB,SAAS,EAAA,CAAQ,CAAA;IAC1F,EACN,oBAAC,OAAA;GAAI,KAAK;GAAS,OAAO,EAAE,WAAW,SAAS;aAC9C,oBAAC,kBAAA;IAAS,KAAK;IAAoB;IAAO,SAAS,kBAAkB;cAClE,MAAM,SAAS,QAAQ,SAAS,CAAC;KACzB;IACP,CAAA;GACF;;AAOV,IAAM,OAAO;AACb,SAAS,cAAc;AACvB,KAAK,cAAc;AACnB,KAAK,MAAM;AACX,KAAK,IAAI,cAAc;ACtHvB,IAAA,eDwHe"}