@helsenorge/designsystem-react 16.0.0 → 16.2.0

package/lib/components/Modal/index.js

@@ -8,9 +8,9 @@ import { getAriaLabelAttributes } from "../../utils/accessibility.js";
 import useFocusTrap from "../../hooks/useFocusTrap.js";
 import { useIsVisible } from "../../hooks/useIsVisible.js";
 import { t as Close_default } from "../../Close.js";
+import { t as Title } from "../../Title.js";
 import { useReturnFocusOnUnmount } from "../../hooks/useReturnFocusOnUnmount.js";
 import { disableBodyScroll, enableBodyScroll } from "../../utils/scroll.js";
-import { t as Title } from "../../Title.js";
 import AlertSignFill from "../Icons/AlertSignFill.js";
 import AlertSignStroke from "../Icons/AlertSignStroke.js";
 import CheckOutline from "../Icons/CheckOutline.js";
@@ -172,7 +172,10 @@ var Modal = (props) => {
 											})
 										]
 									}),
-									props.children && /* @__PURE__ */ jsx("div", { children: props.children }),
+									props.children && /* @__PURE__ */ jsx("div", {
+										"data-overflow-boundary": true,
+										children: props.children
+									}),
 									!props.children && /* @__PURE__ */ jsx("p", {
 										className: styles.modal__description,
 										children: props.description

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Modal/constants.ts","../../../src/components/Modal/Modal.tsx","../../../src/components/Modal/index.ts"],"sourcesContent":["export enum ModalVariants {\n  normal = 'normal',\n  warning = 'warning',\n  error = 'error',\n  success = 'success',\n}\n\nexport enum ModalSize {\n  normal = 'normal',\n  medium = 'medium',\n}\n","import React, { useEffect } from 'react';\n\nimport cn from 'classnames';\n\nimport type { IconProps } from '../Icon';\n\nimport { ModalSize, ModalVariants } from './constants';\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport useFocusTrap from '../../hooks/useFocusTrap';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useReturnFocusOnUnmount } from '../../hooks/useReturnFocusOnUnmount';\nimport { palette } from '../../theme/palette';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { isComponent } from '../../utils/component';\nimport { disableBodyScroll, enableBodyScroll } from '../../utils/scroll';\nimport { uuid } from '../../utils/uuid';\nimport Button from '../Button';\nimport Close from '../Close';\nimport Icon, { IconSize } from '../Icon';\nimport AlertSignFill from '../Icons/AlertSignFill';\nimport AlertSignStroke from '../Icons/AlertSignStroke';\nimport CheckOutline from '../Icons/CheckOutline';\nimport Portal from '../Portal';\nimport Title from '../Title/Title';\n\nimport styles from './styles.module.scss';\n\nexport interface ModalProps {\n  /** Title of the modal */\n  title: string;\n  /** id of the modal title */\n  titleId?: string;\n  /** Description of the modal. Will not render if the modal has children. */\n  description?: string;\n  /** Optional footer content that can be rendered instead of default CTA(s) */\n  footerContent?: React.ReactNode;\n  /** Changes the visual representation of the modal */\n  variant?: keyof typeof ModalVariants;\n  /** Change width of the modal (default: large) */\n  size?: keyof typeof ModalSize;\n  /** Icon displayed in title */\n  icon?: React.ReactElement;\n  /** Hides the close button */\n  noCloseButton?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Primary button text */\n  primaryButtonText?: string;\n  /** Secondary button text */\n  secondaryButtonText?: string;\n  /** Sets the aria-label of the modal */\n  ariaLabel?: string;\n  /** Sets the aria-labelledby of the modal */\n  ariaLabelledBy?: string;\n  /** Close button aria-label */\n  ariaLabelCloseBtn?: string;\n  /** Alternative component to modal */\n  children?: React.ReactNode;\n  /** Component shown after title */\n  afterTitleChildren?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Customize the z-index of the modal */\n  zIndex?: number;\n  /** Function is called when user clicks primary button */\n  onSuccess?: () => void;\n  /** Function is called when user clicks secondary button, clicks escape or outside the modal */\n  onClose?: () => void;\n  /** When enabled the component will be rendered in the bottom of document.body */\n  printable?: boolean;\n  /** If disabled, clicking escape or outside the modal will not close it */\n  disableCloseEvents?: boolean;\n  /** Aria role used for the Modal. Default is dialog */\n  role?: 'dialog' | 'alertdialog';\n}\n\nconst getVariantIcon = (variant?: ModalProps['variant']): React.JSX.Element | null => {\n  if (variant === ModalVariants.error) {\n    return <Icon size={IconSize.Small} svgIcon={AlertSignFill} color={palette.cherry500} />;\n  } else if (variant === ModalVariants.warning) {\n    return <Icon size={IconSize.Small} svgIcon={AlertSignStroke} color={palette.black} />;\n  } else if (variant === ModalVariants.success) {\n    return <Icon size={IconSize.Small} svgIcon={CheckOutline} color={palette.kiwi900} />;\n  }\n  return null;\n};\n\nconst getIcon = (variant?: ModalProps['variant'], icon?: ModalProps['icon']): React.JSX.Element | null => {\n  const variantIcon = getVariantIcon(variant);\n  if (variantIcon) {\n    return <div className={styles.modal__iconWrapper}>{variantIcon}</div>;\n  }\n  if (icon) {\n    return (\n      <div className={styles.modal__iconWrapper}>\n        {isComponent<IconProps>(icon, Icon) &&\n          React.cloneElement(icon, {\n            size: IconSize.Small,\n          })}\n      </div>\n    );\n  }\n  return null;\n};\n\nconst Modal: React.FC<ModalProps> = props => {\n  const {\n    footerContent,\n    variant = ModalVariants.normal,\n    primaryButtonText = 'OK',\n    titleId = uuid(),\n    className = '',\n    size = ModalSize.normal,\n    zIndex = ZIndex.OverlayScreen,\n    role = 'dialog',\n  } = props;\n\n  const topContent = React.useRef<HTMLDivElement>(null);\n  const modalContentRef = React.useRef<HTMLDivElement>(null);\n  const dialogRef = React.useRef<HTMLDivElement>(null);\n  useFocusTrap(dialogRef, true);\n  const topContentVisible = useIsVisible(topContent);\n  const bottomContent = React.useRef<HTMLDivElement>(null);\n  const bottomContentVisible = useIsVisible(bottomContent);\n  const contentIsScrollable = modalContentRef.current && modalContentRef.current.scrollHeight > modalContentRef.current.clientHeight;\n  useReturnFocusOnUnmount(dialogRef);\n\n  function handleKeyboardEvent(e: KeyboardEvent): void {\n    if (e.key === 'Escape' && props.onClose) {\n      e.stopPropagation();\n      props.onClose();\n    }\n  }\n\n  function handleClickEvent(event: MouseEvent): void {\n    if (event.target && overlayRef.current === event.target && props.onClose) {\n      event.stopPropagation();\n      props.onClose();\n    }\n  }\n\n  const overlayRef = React.useRef<HTMLDivElement>(null);\n\n  const showActions = (props.secondaryButtonText && props.secondaryButtonText?.length > 0) || props.onSuccess || footerContent;\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: props.ariaLabel, id: props.ariaLabelledBy, fallbackId: titleId });\n\n  useEffect(() => {\n    const overlayElement = overlayRef.current;\n    disableBodyScroll();\n    if (!props.disableCloseEvents && overlayElement) {\n      overlayElement.addEventListener('keydown', handleKeyboardEvent);\n      overlayElement.addEventListener('click', handleClickEvent);\n    }\n    return (): void => {\n      enableBodyScroll();\n      if (!props.disableCloseEvents && overlayElement) {\n        overlayElement.removeEventListener('keydown', handleKeyboardEvent);\n        overlayElement.removeEventListener('click', handleClickEvent);\n      }\n    };\n  }, [props.disableCloseEvents]);\n\n  useEffect(() => {\n    dialogRef.current?.focus();\n  }, []);\n\n  const dialogClasses = cn(\n    className,\n    styles.modal,\n    variant && styles[`modal--${variant}`],\n    size && styles[`modal--${size}`],\n    contentIsScrollable && !showActions && styles['modal--no-actions']\n  );\n\n  const titleClasses = cn({\n    [styles['modal__title--error']]: variant === ModalVariants.error,\n    [styles['modal__title--success']]: variant === ModalVariants.success,\n  });\n\n  const Component = (\n    <div data-testid=\"dialog-container\">\n      <div\n        ref={overlayRef}\n        className={styles['modal-overlay']}\n        data-testid={props.testId}\n        data-analyticsid={AnalyticsId.Modal}\n        style={{ zIndex }}\n      >\n        <div className={styles.align}>\n          <div className={dialogClasses} role={role} aria-modal=\"true\" tabIndex={-1} {...ariaLabelAttributes} ref={dialogRef}>\n            <div\n              className={cn(styles['modal__shadow'], styles['modal__shadow--top'], {\n                [styles['modal__shadow--show']]: !topContentVisible && contentIsScrollable,\n              })}\n            />\n            <div\n              className={cn(styles.modal__contentWrapper)}\n              tabIndex={contentIsScrollable ? 0 : undefined}\n              role={contentIsScrollable ? 'region' : undefined}\n              {...(contentIsScrollable ? ariaLabelAttributes : {})}\n              ref={modalContentRef}\n            >\n              {!props.noCloseButton && (\n                <div className={styles.modal__closeWrapper}>\n                  <div className={cn(styles.modal__closeWrapper__close)}>\n                    <Close onClick={props.onClose} ariaLabel={props.ariaLabelCloseBtn} />\n                  </div>\n                </div>\n              )}\n              <div className={cn(size && styles[`modal__contentWrapper__scroll--${size}`])}>\n                <div ref={topContent} />\n                <div className={styles.modal__contentWrapper__title}>\n                  {getIcon(variant, props.icon)}\n                  <Title id={ariaLabelAttributes?.['aria-labelledby']} htmlMarkup=\"h3\" appearance=\"title3\" className={titleClasses}>\n                    {props.title}\n                  </Title>\n                  {props.afterTitleChildren && <div className={styles['modal__afterTitleChildren']}>{props.afterTitleChildren}</div>}\n                </div>\n                {props.children && <div>{props.children}</div>}\n                {!props.children && <p className={styles.modal__description}>{props.description}</p>}\n                <div ref={bottomContent} />\n              </div>\n            </div>\n            <div\n              className={cn(styles['modal__shadow'], styles['modal__shadow--bottom'], {\n                [styles['modal__shadow--show']]: !bottomContentVisible && contentIsScrollable,\n              })}\n            />\n            {showActions && (\n              <div className={cn(styles['modal__call-to-action'], size && styles[`modal__call-to-action--${size}`])}>\n                {props.onSuccess && primaryButtonText && <Button onClick={props.onSuccess}>{primaryButtonText}</Button>}\n                {props.secondaryButtonText && props.secondaryButtonText?.length > 0 && (\n                  <Button variant=\"borderless\" onClick={props.onClose}>\n                    {props.secondaryButtonText}\n                  </Button>\n                )}\n                {footerContent}\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n\n  if (props.printable) {\n    const printModal = 'print-modal';\n    return (\n      <Portal className={printModal} testId=\"print-modal\">\n        <style media=\"print\">{`body > *:not(.${printModal}) {display: none;}`}</style>\n        {Component}\n      </Portal>\n    );\n  }\n\n  return Component;\n};\n\nexport default Modal;\n","import Modal from './Modal';\nexport { ModalVariants, ModalSize } from './constants';\nexport * from './Modal';\nexport default Modal;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Modal/constants.ts","../../../src/components/Modal/Modal.tsx","../../../src/components/Modal/index.ts"],"sourcesContent":["export enum ModalVariants {\n  normal = 'normal',\n  warning = 'warning',\n  error = 'error',\n  success = 'success',\n}\n\nexport enum ModalSize {\n  normal = 'normal',\n  medium = 'medium',\n}\n","import React, { useEffect } from 'react';\n\nimport cn from 'classnames';\n\nimport type { IconProps } from '../Icon';\n\nimport { ModalSize, ModalVariants } from './constants';\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport useFocusTrap from '../../hooks/useFocusTrap';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useReturnFocusOnUnmount } from '../../hooks/useReturnFocusOnUnmount';\nimport { palette } from '../../theme/palette';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { isComponent } from '../../utils/component';\nimport { disableBodyScroll, enableBodyScroll } from '../../utils/scroll';\nimport { uuid } from '../../utils/uuid';\nimport Button from '../Button';\nimport Close from '../Close';\nimport Icon, { IconSize } from '../Icon';\nimport AlertSignFill from '../Icons/AlertSignFill';\nimport AlertSignStroke from '../Icons/AlertSignStroke';\nimport CheckOutline from '../Icons/CheckOutline';\nimport Portal from '../Portal';\nimport Title from '../Title/Title';\n\nimport styles from './styles.module.scss';\n\nexport interface ModalProps {\n  /** Title of the modal */\n  title: string;\n  /** id of the modal title */\n  titleId?: string;\n  /** Description of the modal. Will not render if the modal has children. */\n  description?: string;\n  /** Optional footer content that can be rendered instead of default CTA(s) */\n  footerContent?: React.ReactNode;\n  /** Changes the visual representation of the modal */\n  variant?: keyof typeof ModalVariants;\n  /** Change width of the modal (default: large) */\n  size?: keyof typeof ModalSize;\n  /** Icon displayed in title */\n  icon?: React.ReactElement;\n  /** Hides the close button */\n  noCloseButton?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Primary button text */\n  primaryButtonText?: string;\n  /** Secondary button text */\n  secondaryButtonText?: string;\n  /** Sets the aria-label of the modal */\n  ariaLabel?: string;\n  /** Sets the aria-labelledby of the modal */\n  ariaLabelledBy?: string;\n  /** Close button aria-label */\n  ariaLabelCloseBtn?: string;\n  /** Alternative component to modal */\n  children?: React.ReactNode;\n  /** Component shown after title */\n  afterTitleChildren?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Customize the z-index of the modal */\n  zIndex?: number;\n  /** Function is called when user clicks primary button */\n  onSuccess?: () => void;\n  /** Function is called when user clicks secondary button, clicks escape or outside the modal */\n  onClose?: () => void;\n  /** When enabled the component will be rendered in the bottom of document.body */\n  printable?: boolean;\n  /** If disabled, clicking escape or outside the modal will not close it */\n  disableCloseEvents?: boolean;\n  /** Aria role used for the Modal. Default is dialog */\n  role?: 'dialog' | 'alertdialog';\n}\n\nconst getVariantIcon = (variant?: ModalProps['variant']): React.JSX.Element | null => {\n  if (variant === ModalVariants.error) {\n    return <Icon size={IconSize.Small} svgIcon={AlertSignFill} color={palette.cherry500} />;\n  } else if (variant === ModalVariants.warning) {\n    return <Icon size={IconSize.Small} svgIcon={AlertSignStroke} color={palette.black} />;\n  } else if (variant === ModalVariants.success) {\n    return <Icon size={IconSize.Small} svgIcon={CheckOutline} color={palette.kiwi900} />;\n  }\n  return null;\n};\n\nconst getIcon = (variant?: ModalProps['variant'], icon?: ModalProps['icon']): React.JSX.Element | null => {\n  const variantIcon = getVariantIcon(variant);\n  if (variantIcon) {\n    return <div className={styles.modal__iconWrapper}>{variantIcon}</div>;\n  }\n  if (icon) {\n    return (\n      <div className={styles.modal__iconWrapper}>\n        {isComponent<IconProps>(icon, Icon) &&\n          React.cloneElement(icon, {\n            size: IconSize.Small,\n          })}\n      </div>\n    );\n  }\n  return null;\n};\n\nconst Modal: React.FC<ModalProps> = props => {\n  const {\n    footerContent,\n    variant = ModalVariants.normal,\n    primaryButtonText = 'OK',\n    titleId = uuid(),\n    className = '',\n    size = ModalSize.normal,\n    zIndex = ZIndex.OverlayScreen,\n    role = 'dialog',\n  } = props;\n\n  const topContent = React.useRef<HTMLDivElement>(null);\n  const modalContentRef = React.useRef<HTMLDivElement>(null);\n  const dialogRef = React.useRef<HTMLDivElement>(null);\n  useFocusTrap(dialogRef, true);\n  const topContentVisible = useIsVisible(topContent);\n  const bottomContent = React.useRef<HTMLDivElement>(null);\n  const bottomContentVisible = useIsVisible(bottomContent);\n  const contentIsScrollable = modalContentRef.current && modalContentRef.current.scrollHeight > modalContentRef.current.clientHeight;\n  useReturnFocusOnUnmount(dialogRef);\n\n  function handleKeyboardEvent(e: KeyboardEvent): void {\n    if (e.key === 'Escape' && props.onClose) {\n      e.stopPropagation();\n      props.onClose();\n    }\n  }\n\n  function handleClickEvent(event: MouseEvent): void {\n    if (event.target && overlayRef.current === event.target && props.onClose) {\n      event.stopPropagation();\n      props.onClose();\n    }\n  }\n\n  const overlayRef = React.useRef<HTMLDivElement>(null);\n\n  const showActions = (props.secondaryButtonText && props.secondaryButtonText?.length > 0) || props.onSuccess || footerContent;\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: props.ariaLabel, id: props.ariaLabelledBy, fallbackId: titleId });\n\n  useEffect(() => {\n    const overlayElement = overlayRef.current;\n    disableBodyScroll();\n    if (!props.disableCloseEvents && overlayElement) {\n      overlayElement.addEventListener('keydown', handleKeyboardEvent);\n      overlayElement.addEventListener('click', handleClickEvent);\n    }\n    return (): void => {\n      enableBodyScroll();\n      if (!props.disableCloseEvents && overlayElement) {\n        overlayElement.removeEventListener('keydown', handleKeyboardEvent);\n        overlayElement.removeEventListener('click', handleClickEvent);\n      }\n    };\n  }, [props.disableCloseEvents]);\n\n  useEffect(() => {\n    dialogRef.current?.focus();\n  }, []);\n\n  const dialogClasses = cn(\n    className,\n    styles.modal,\n    variant && styles[`modal--${variant}`],\n    size && styles[`modal--${size}`],\n    contentIsScrollable && !showActions && styles['modal--no-actions']\n  );\n\n  const titleClasses = cn({\n    [styles['modal__title--error']]: variant === ModalVariants.error,\n    [styles['modal__title--success']]: variant === ModalVariants.success,\n  });\n\n  const Component = (\n    <div data-testid=\"dialog-container\">\n      <div\n        ref={overlayRef}\n        className={styles['modal-overlay']}\n        data-testid={props.testId}\n        data-analyticsid={AnalyticsId.Modal}\n        style={{ zIndex }}\n      >\n        <div className={styles.align}>\n          <div className={dialogClasses} role={role} aria-modal=\"true\" tabIndex={-1} {...ariaLabelAttributes} ref={dialogRef}>\n            <div\n              className={cn(styles['modal__shadow'], styles['modal__shadow--top'], {\n                [styles['modal__shadow--show']]: !topContentVisible && contentIsScrollable,\n              })}\n            />\n            <div\n              className={cn(styles.modal__contentWrapper)}\n              tabIndex={contentIsScrollable ? 0 : undefined}\n              role={contentIsScrollable ? 'region' : undefined}\n              {...(contentIsScrollable ? ariaLabelAttributes : {})}\n              ref={modalContentRef}\n            >\n              {!props.noCloseButton && (\n                <div className={styles.modal__closeWrapper}>\n                  <div className={cn(styles.modal__closeWrapper__close)}>\n                    <Close onClick={props.onClose} ariaLabel={props.ariaLabelCloseBtn} />\n                  </div>\n                </div>\n              )}\n              <div className={cn(size && styles[`modal__contentWrapper__scroll--${size}`])}>\n                <div ref={topContent} />\n                <div className={styles.modal__contentWrapper__title}>\n                  {getIcon(variant, props.icon)}\n                  <Title id={ariaLabelAttributes?.['aria-labelledby']} htmlMarkup=\"h3\" appearance=\"title3\" className={titleClasses}>\n                    {props.title}\n                  </Title>\n                  {props.afterTitleChildren && <div className={styles['modal__afterTitleChildren']}>{props.afterTitleChildren}</div>}\n                </div>\n                {props.children && <div data-overflow-boundary>{props.children}</div>}\n                {!props.children && <p className={styles.modal__description}>{props.description}</p>}\n                <div ref={bottomContent} />\n              </div>\n            </div>\n            <div\n              className={cn(styles['modal__shadow'], styles['modal__shadow--bottom'], {\n                [styles['modal__shadow--show']]: !bottomContentVisible && contentIsScrollable,\n              })}\n            />\n            {showActions && (\n              <div className={cn(styles['modal__call-to-action'], size && styles[`modal__call-to-action--${size}`])}>\n                {props.onSuccess && primaryButtonText && <Button onClick={props.onSuccess}>{primaryButtonText}</Button>}\n                {props.secondaryButtonText && props.secondaryButtonText?.length > 0 && (\n                  <Button variant=\"borderless\" onClick={props.onClose}>\n                    {props.secondaryButtonText}\n                  </Button>\n                )}\n                {footerContent}\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n\n  if (props.printable) {\n    const printModal = 'print-modal';\n    return (\n      <Portal className={printModal} testId=\"print-modal\">\n        <style media=\"print\">{`body > *:not(.${printModal}) {display: none;}`}</style>\n        {Component}\n      </Portal>\n    );\n  }\n\n  return Component;\n};\n\nexport default Modal;\n","import Modal from './Modal';\nexport { ModalVariants, ModalSize } from './constants';\nexport * from './Modal';\nexport default Modal;\n"],"mappings":"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"}

package/lib/components/Panel/styles.module.scss.d.ts

@@ -6,7 +6,6 @@ export type Styles = {
   'button__left-icon': string;
   'button__only-icon': string;
   'button__right-icon': string;
-  'button__right-unicode-arrow': string;
   button__text: string;
   'button__text--centered': string;
   'button__text--ellipsis': string;

package/lib/components/PopMenu/PopMenu.d.ts

@@ -10,6 +10,10 @@ export interface PopMenuProps {
     popOverClassName?: string;
     /** Adds custom classes to the element. */
     popMenuClassName?: string;
+    /** Adds custom classes to the trigger button element. */
+    triggerClassName?: string;
+    /** Adds custom classes to the trigger button's inner content element. */
+    triggerContentClassName?: string;
     /** @deprecated Changes responsive design for the trigger buttons. */
     popMenuVariant?: PopMenuVariant;
     /** Sets the data-testid attribute for the button that opens. */

package/lib/components/PopMenu/index.js

@@ -33,7 +33,7 @@ var PopMenu = (props) => {
 	const iconRef = useRef(null);
 	const outerRef = useRef(null);
 	const [isOpen, setIsOpen] = useState(false);
-	const { children, popOverClassName, popMenuClassName, openButtonTestId, closeButtonTestId, popOverTestId, openButtonAriaLabel, closeButtonAriaLabel, svgIcon, labelText, labelTextPosition = PopMenuLabelPosition.right } = props;
+	const { children, popOverClassName, popMenuClassName, triggerClassName, triggerContentClassName, openButtonTestId, closeButtonTestId, popOverTestId, openButtonAriaLabel, closeButtonAriaLabel, svgIcon, labelText, labelTextPosition = PopMenuLabelPosition.right } = props;
 	const isMobile = useIsMobileBreakpoint();
 	const handleClose = useDismissablePopover({
 		popoverRef: outerRef,
@@ -92,6 +92,8 @@ var PopMenu = (props) => {
 			ref: triggerButtonRef,
 			ariaLabel: isOpen ? closeButtonAriaLabel : openButtonAriaLabel,
 			testId: isOpen ? closeButtonTestId : openButtonTestId,
+			wrapperClassName: triggerClassName,
+			className: triggerContentClassName,
 			children: [
 				labelText && labelTextPosition == PopMenuLabelPosition.left && /* @__PURE__ */ jsx("span", { children: labelText }),
 				isOpen ? closeIcon : openIcon,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/PopMenu/constants.ts","../../../src/components/PopMenu/PopMenu.tsx","../../../src/components/PopMenu/index.ts"],"sourcesContent":["export enum PopMenuVariant {\n  onWhite = 'on-white',\n  onGray = 'on-gray',\n  onBlueberry = 'on-blueberry',\n}\n\nexport enum PopMenuLabelPosition {\n  right = 'right',\n  left = 'left',\n}\n","import React, { useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { SvgIcon } from '../Icon';\nimport type { IconName } from '../Icons/IconNames';\nimport type { LinkListProps, LinkProps } from '../LinkList';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { useDismissablePopover } from '../../hooks/useDismissablePopover';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { isComponent } from '../../utils/component';\nimport Button from '../Button';\nimport Icon from '../Icon';\nimport VerticalDots from '../Icons/VerticalDots';\nimport X from '../Icons/X';\nimport LazyIcon from '../LazyIcon';\nimport LinkList from '../LinkList';\nimport PopOver from '../PopOver';\nimport { PopMenuLabelPosition, type PopMenuVariant } from './constants';\n\nimport styles from './styles.module.scss';\n\nexport interface PopMenuProps {\n  /** Content shown inside PopOver. Can only be a LinkList */\n  children: React.ReactElement<LinkListProps>;\n  /** Adds custom classes to the popover element. */\n  popOverClassName?: string;\n  /** Adds custom classes to the element. */\n  popMenuClassName?: string;\n  /** @deprecated Changes responsive design for the trigger buttons. */\n  popMenuVariant?: PopMenuVariant;\n  /** Sets the data-testid attribute for the button that opens. */\n  openButtonTestId?: string;\n  /** Sets the data-testid attribute for the button that closes. */\n  closeButtonTestId?: string;\n  /** Sets the data-testid attribute for the popover. */\n  popOverTestId?: string;\n  /** Sets the arial-label attribute for the openButton. */\n  openButtonAriaLabel?: string;\n  /** Sets the arial-label attribute for the closeButton. */\n  closeButtonAriaLabel?: string;\n  /** Sets the icon on the trigger button. */\n  svgIcon?: SvgIcon | IconName;\n  /** Optional text next to the trigger button. */\n  labelText?: string;\n  /** Placement of the label text relative to the trigger button. */\n  labelTextPosition?: PopMenuLabelPosition;\n}\n\nexport const PopMenu: React.FC<PopMenuProps> = (props: PopMenuProps) => {\n  const triggerButtonRef = useRef<HTMLButtonElement>(null);\n  const iconRef = useRef(null);\n  const outerRef = useRef<HTMLDivElement>(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const {\n    children,\n    popOverClassName,\n    popMenuClassName,\n    openButtonTestId,\n    closeButtonTestId,\n    popOverTestId,\n    openButtonAriaLabel,\n    closeButtonAriaLabel,\n    svgIcon,\n    labelText,\n    labelTextPosition = PopMenuLabelPosition.right,\n  } = props;\n  const isMobile = useIsMobileBreakpoint();\n\n  const handleClose = useDismissablePopover({\n    popoverRef: outerRef,\n    triggerRef: triggerButtonRef,\n    isOpen,\n    onClose: () => setIsOpen(false),\n  });\n\n  const { isHovered: triggerButtonIsHovered } = usePseudoClasses(triggerButtonRef);\n  const mobileIconSize = isMobile ? IconSize.XSmall : IconSize.Small;\n\n  const handleClick = (cb?: () => void): void => {\n    handleClose();\n    if (cb) cb();\n  };\n\n  const renderChildren = (): React.ReactElement | undefined => {\n    if (isComponent<LinkListProps>(children, LinkList)) {\n      return (\n        <PopOver\n          testId={popOverTestId}\n          className={classNames(styles['pop-menu__pop-over'], popOverClassName)}\n          controllerRef={iconRef}\n          role=\"dialog\"\n          show={isOpen}\n        >\n          {React.Children.map(children, child =>\n            React.cloneElement(child, {\n              children: React.Children.map(child.props.children, child =>\n                isComponent<LinkProps>(child, LinkList.Link)\n                  ? React.cloneElement(child, {\n                      onClick: (event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) =>\n                        handleClick(() => child.props.onClick && child.props.onClick(event)),\n                    })\n                  : child\n              ),\n            })\n          )}\n        </PopOver>\n      );\n    }\n  };\n\n  const toggleOpenOnClick = (): void => {\n    setIsOpen(!isOpen);\n  };\n\n  const iconComponent =\n    svgIcon && typeof svgIcon === 'string' ? (\n      <LazyIcon iconName={svgIcon} size={IconSize.XSmall} isHovered={triggerButtonIsHovered} />\n    ) : (\n      svgIcon && <Icon svgIcon={svgIcon} size={IconSize.XSmall} isHovered={triggerButtonIsHovered} />\n    );\n\n  const openIcon = svgIcon ? (\n    iconComponent\n  ) : (\n    <Icon ref={iconRef} svgIcon={svgIcon ?? VerticalDots} size={mobileIconSize} isHovered={triggerButtonIsHovered} />\n  );\n\n  const closeIcon = <Icon svgIcon={X} ref={iconRef} size={mobileIconSize} isHovered={triggerButtonIsHovered} />;\n\n  return (\n    <div ref={outerRef} className={classNames(popMenuClassName)} data-analyticsid={AnalyticsId.PopMenu}>\n      <Button\n        variant=\"borderless\"\n        aria-expanded={isOpen}\n        onClick={toggleOpenOnClick}\n        ref={triggerButtonRef}\n        ariaLabel={isOpen ? closeButtonAriaLabel : openButtonAriaLabel}\n        testId={isOpen ? closeButtonTestId : openButtonTestId}\n      >\n        {labelText && labelTextPosition == PopMenuLabelPosition.left && <span>{labelText}</span>}\n        {isOpen ? closeIcon : openIcon}\n        {labelText && labelTextPosition == PopMenuLabelPosition.right && <span>{labelText}</span>}\n      </Button>\n      {isOpen && renderChildren()}\n    </div>\n  );\n};\n\nexport default PopMenu;\n","import PopMenu from './PopMenu';\nexport { PopMenuVariant, PopMenuLabelPosition } from './constants';\nexport * from './PopMenu';\nexport default PopMenu;\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA,IAAY,iBAAL,yBAAA,gBAAA;CACL,eAAA,aAAA;CACA,eAAA,YAAA;CACA,eAAA,iBAAA;;AACF,EAAA,CAAA,CAAA;AAEA,IAAY,uBAAL,yBAAA,sBAAA;CACL,qBAAA,WAAA;CACA,qBAAA,UAAA;;AACF,EAAA,CAAA,CAAA;;;AC0CA,IAAa,WAAmC,UAAwB;CACtE,MAAM,mBAAmB,OAA0B,IAAI;CACvD,MAAM,UAAU,OAAO,IAAI;CAC3B,MAAM,WAAW,OAAuB,IAAI;CAC5C,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAC1C,MAAM,EACJ,UACA,kBACA,kBACA,kBACA,mBACA,eACA,qBACA,sBACA,SACA,WACA,oBAAoB,qBAAqB,UACvC;CACJ,MAAM,WAAW,sBAAsB;CAEvC,MAAM,cAAc,sBAAsB;EACxC,YAAY;EACZ,YAAY;EACZ;EACA,eAAe,UAAU,KAAK;CAChC,CAAC;CAED,MAAM,EAAE,WAAW,2BAA2B,iBAAiB,gBAAgB;CAC/E,MAAM,iBAAiB,WAAW,SAAS,SAAS,SAAS;CAE7D,MAAM,eAAe,OAA0B;EAC7C,YAAY;EACZ,IAAI,IAAI,GAAG;CACb;CAEA,MAAM,uBAAuD;EAC3D,IAAI,YAA2B,UAAU,gBAAQ,GAC/C,OACE,oBAAC,iBAAD;GACE,QAAQ;GACR,WAAW,WAAW,OAAO,uBAAuB,gBAAgB;GACpE,eAAe;GACf,MAAK;GACL,MAAM;GAEL,UAAA,MAAM,SAAS,IAAI,WAAU,UAC5B,MAAM,aAAa,OAAO,EACxB,UAAU,MAAM,SAAS,IAAI,MAAM,MAAM,WAAU,UACjD,YAAuB,OAAO,iBAAS,IAAI,IACvC,MAAM,aAAa,OAAO,EACxB,UAAU,UACR,kBAAkB,MAAM,MAAM,WAAW,MAAM,MAAM,QAAQ,KAAK,CAAC,EACvE,CAAC,IACD,KACN,EACF,CAAC,CACH;EACO,CAAA;CAGf;CAEA,MAAM,0BAAgC;EACpC,UAAU,CAAC,MAAM;CACnB;CAEA,MAAM,gBACJ,WAAW,OAAO,YAAY,WAC5B,oBAAC,kBAAD;EAAU,UAAU;EAAS,MAAM,SAAS;EAAQ,WAAW;CAAyB,CAAA,IAExF,WAAW,oBAAC,cAAD;EAAe;EAAS,MAAM,SAAS;EAAQ,WAAW;CAAyB,CAAA;CAGlG,MAAM,WAAW,UACf,gBAEA,oBAAC,cAAD;EAAM,KAAK;EAAS,SAAS,WAAW;EAAc,MAAM;EAAgB,WAAW;CAAyB,CAAA;CAGlH,MAAM,YAAY,oBAAC,cAAD;EAAM,SAAS;EAAG,KAAK;EAAS,MAAM;EAAgB,WAAW;CAAyB,CAAA;CAE5G,OACE,qBAAC,OAAD;EAAK,KAAK;EAAU,WAAW,WAAW,gBAAgB;EAAG,oBAAkB,YAAY;EAA3F,UAAA,CACE,qBAAC,gBAAD;GACE,SAAQ;GACR,iBAAe;GACf,SAAS;GACT,KAAK;GACL,WAAW,SAAS,uBAAuB;GAC3C,QAAQ,SAAS,oBAAoB;GANvC,UAAA;IAQG,aAAa,qBAAqB,qBAAqB,QAAQ,oBAAC,QAAD,EAAA,UAAO,UAAgB,CAAA;IACtF,SAAS,YAAY;IACrB,aAAa,qBAAqB,qBAAqB,SAAS,oBAAC,QAAD,EAAA,UAAO,UAAgB,CAAA;GAClF;EACP,CAAA,GAAA,UAAU,eAAe,CACvB;;AAET;;;AClJA,IAAA,kBAAe"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/PopMenu/constants.ts","../../../src/components/PopMenu/PopMenu.tsx","../../../src/components/PopMenu/index.ts"],"sourcesContent":["export enum PopMenuVariant {\n  onWhite = 'on-white',\n  onGray = 'on-gray',\n  onBlueberry = 'on-blueberry',\n}\n\nexport enum PopMenuLabelPosition {\n  right = 'right',\n  left = 'left',\n}\n","import React, { useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { SvgIcon } from '../Icon';\nimport type { IconName } from '../Icons/IconNames';\nimport type { LinkListProps, LinkProps } from '../LinkList';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { useDismissablePopover } from '../../hooks/useDismissablePopover';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { isComponent } from '../../utils/component';\nimport Button from '../Button';\nimport Icon from '../Icon';\nimport VerticalDots from '../Icons/VerticalDots';\nimport X from '../Icons/X';\nimport LazyIcon from '../LazyIcon';\nimport LinkList from '../LinkList';\nimport PopOver from '../PopOver';\nimport { PopMenuLabelPosition, type PopMenuVariant } from './constants';\n\nimport styles from './styles.module.scss';\n\nexport interface PopMenuProps {\n  /** Content shown inside PopOver. Can only be a LinkList */\n  children: React.ReactElement<LinkListProps>;\n  /** Adds custom classes to the popover element. */\n  popOverClassName?: string;\n  /** Adds custom classes to the element. */\n  popMenuClassName?: string;\n  /** Adds custom classes to the trigger button element. */\n  triggerClassName?: string;\n  /** Adds custom classes to the trigger button's inner content element. */\n  triggerContentClassName?: string;\n  /** @deprecated Changes responsive design for the trigger buttons. */\n  popMenuVariant?: PopMenuVariant;\n  /** Sets the data-testid attribute for the button that opens. */\n  openButtonTestId?: string;\n  /** Sets the data-testid attribute for the button that closes. */\n  closeButtonTestId?: string;\n  /** Sets the data-testid attribute for the popover. */\n  popOverTestId?: string;\n  /** Sets the arial-label attribute for the openButton. */\n  openButtonAriaLabel?: string;\n  /** Sets the arial-label attribute for the closeButton. */\n  closeButtonAriaLabel?: string;\n  /** Sets the icon on the trigger button. */\n  svgIcon?: SvgIcon | IconName;\n  /** Optional text next to the trigger button. */\n  labelText?: string;\n  /** Placement of the label text relative to the trigger button. */\n  labelTextPosition?: PopMenuLabelPosition;\n}\n\nexport const PopMenu: React.FC<PopMenuProps> = (props: PopMenuProps) => {\n  const triggerButtonRef = useRef<HTMLButtonElement>(null);\n  const iconRef = useRef(null);\n  const outerRef = useRef<HTMLDivElement>(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const {\n    children,\n    popOverClassName,\n    popMenuClassName,\n    triggerClassName,\n    triggerContentClassName,\n    openButtonTestId,\n    closeButtonTestId,\n    popOverTestId,\n    openButtonAriaLabel,\n    closeButtonAriaLabel,\n    svgIcon,\n    labelText,\n    labelTextPosition = PopMenuLabelPosition.right,\n  } = props;\n  const isMobile = useIsMobileBreakpoint();\n\n  const handleClose = useDismissablePopover({\n    popoverRef: outerRef,\n    triggerRef: triggerButtonRef,\n    isOpen,\n    onClose: () => setIsOpen(false),\n  });\n\n  const { isHovered: triggerButtonIsHovered } = usePseudoClasses(triggerButtonRef);\n  const mobileIconSize = isMobile ? IconSize.XSmall : IconSize.Small;\n\n  const handleClick = (cb?: () => void): void => {\n    handleClose();\n    if (cb) cb();\n  };\n\n  const renderChildren = (): React.ReactElement | undefined => {\n    if (isComponent<LinkListProps>(children, LinkList)) {\n      return (\n        <PopOver\n          testId={popOverTestId}\n          className={classNames(styles['pop-menu__pop-over'], popOverClassName)}\n          controllerRef={iconRef}\n          role=\"dialog\"\n          show={isOpen}\n        >\n          {React.Children.map(children, child =>\n            React.cloneElement(child, {\n              children: React.Children.map(child.props.children, child =>\n                isComponent<LinkProps>(child, LinkList.Link)\n                  ? React.cloneElement(child, {\n                      onClick: (event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) =>\n                        handleClick(() => child.props.onClick && child.props.onClick(event)),\n                    })\n                  : child\n              ),\n            })\n          )}\n        </PopOver>\n      );\n    }\n  };\n\n  const toggleOpenOnClick = (): void => {\n    setIsOpen(!isOpen);\n  };\n\n  const iconComponent =\n    svgIcon && typeof svgIcon === 'string' ? (\n      <LazyIcon iconName={svgIcon} size={IconSize.XSmall} isHovered={triggerButtonIsHovered} />\n    ) : (\n      svgIcon && <Icon svgIcon={svgIcon} size={IconSize.XSmall} isHovered={triggerButtonIsHovered} />\n    );\n\n  const openIcon = svgIcon ? (\n    iconComponent\n  ) : (\n    <Icon ref={iconRef} svgIcon={svgIcon ?? VerticalDots} size={mobileIconSize} isHovered={triggerButtonIsHovered} />\n  );\n\n  const closeIcon = <Icon svgIcon={X} ref={iconRef} size={mobileIconSize} isHovered={triggerButtonIsHovered} />;\n\n  return (\n    <div ref={outerRef} className={classNames(popMenuClassName)} data-analyticsid={AnalyticsId.PopMenu}>\n      <Button\n        variant=\"borderless\"\n        aria-expanded={isOpen}\n        onClick={toggleOpenOnClick}\n        ref={triggerButtonRef}\n        ariaLabel={isOpen ? closeButtonAriaLabel : openButtonAriaLabel}\n        testId={isOpen ? closeButtonTestId : openButtonTestId}\n        wrapperClassName={triggerClassName}\n        className={triggerContentClassName}\n      >\n        {labelText && labelTextPosition == PopMenuLabelPosition.left && <span>{labelText}</span>}\n        {isOpen ? closeIcon : openIcon}\n        {labelText && labelTextPosition == PopMenuLabelPosition.right && <span>{labelText}</span>}\n      </Button>\n      {isOpen && renderChildren()}\n    </div>\n  );\n};\n\nexport default PopMenu;\n","import PopMenu from './PopMenu';\nexport { PopMenuVariant, PopMenuLabelPosition } from './constants';\nexport * from './PopMenu';\nexport default PopMenu;\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA,IAAY,iBAAL,yBAAA,gBAAA;CACL,eAAA,aAAA;CACA,eAAA,YAAA;CACA,eAAA,iBAAA;;AACF,EAAA,CAAA,CAAA;AAEA,IAAY,uBAAL,yBAAA,sBAAA;CACL,qBAAA,WAAA;CACA,qBAAA,UAAA;;AACF,EAAA,CAAA,CAAA;;;AC8CA,IAAa,WAAmC,UAAwB;CACtE,MAAM,mBAAmB,OAA0B,IAAI;CACvD,MAAM,UAAU,OAAO,IAAI;CAC3B,MAAM,WAAW,OAAuB,IAAI;CAC5C,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAC1C,MAAM,EACJ,UACA,kBACA,kBACA,kBACA,yBACA,kBACA,mBACA,eACA,qBACA,sBACA,SACA,WACA,oBAAoB,qBAAqB,UACvC;CACJ,MAAM,WAAW,sBAAsB;CAEvC,MAAM,cAAc,sBAAsB;EACxC,YAAY;EACZ,YAAY;EACZ;EACA,eAAe,UAAU,KAAK;CAChC,CAAC;CAED,MAAM,EAAE,WAAW,2BAA2B,iBAAiB,gBAAgB;CAC/E,MAAM,iBAAiB,WAAW,SAAS,SAAS,SAAS;CAE7D,MAAM,eAAe,OAA0B;EAC7C,YAAY;EACZ,IAAI,IAAI,GAAG;CACb;CAEA,MAAM,uBAAuD;EAC3D,IAAI,YAA2B,UAAU,gBAAQ,GAC/C,OACE,oBAAC,iBAAD;GACE,QAAQ;GACR,WAAW,WAAW,OAAO,uBAAuB,gBAAgB;GACpE,eAAe;GACf,MAAK;GACL,MAAM;GAEL,UAAA,MAAM,SAAS,IAAI,WAAU,UAC5B,MAAM,aAAa,OAAO,EACxB,UAAU,MAAM,SAAS,IAAI,MAAM,MAAM,WAAU,UACjD,YAAuB,OAAO,iBAAS,IAAI,IACvC,MAAM,aAAa,OAAO,EACxB,UAAU,UACR,kBAAkB,MAAM,MAAM,WAAW,MAAM,MAAM,QAAQ,KAAK,CAAC,EACvE,CAAC,IACD,KACN,EACF,CAAC,CACH;EACO,CAAA;CAGf;CAEA,MAAM,0BAAgC;EACpC,UAAU,CAAC,MAAM;CACnB;CAEA,MAAM,gBACJ,WAAW,OAAO,YAAY,WAC5B,oBAAC,kBAAD;EAAU,UAAU;EAAS,MAAM,SAAS;EAAQ,WAAW;CAAyB,CAAA,IAExF,WAAW,oBAAC,cAAD;EAAe;EAAS,MAAM,SAAS;EAAQ,WAAW;CAAyB,CAAA;CAGlG,MAAM,WAAW,UACf,gBAEA,oBAAC,cAAD;EAAM,KAAK;EAAS,SAAS,WAAW;EAAc,MAAM;EAAgB,WAAW;CAAyB,CAAA;CAGlH,MAAM,YAAY,oBAAC,cAAD;EAAM,SAAS;EAAG,KAAK;EAAS,MAAM;EAAgB,WAAW;CAAyB,CAAA;CAE5G,OACE,qBAAC,OAAD;EAAK,KAAK;EAAU,WAAW,WAAW,gBAAgB;EAAG,oBAAkB,YAAY;EAA3F,UAAA,CACE,qBAAC,gBAAD;GACE,SAAQ;GACR,iBAAe;GACf,SAAS;GACT,KAAK;GACL,WAAW,SAAS,uBAAuB;GAC3C,QAAQ,SAAS,oBAAoB;GACrC,kBAAkB;GAClB,WAAW;GARb,UAAA;IAUG,aAAa,qBAAqB,qBAAqB,QAAQ,oBAAC,QAAD,EAAA,UAAO,UAAgB,CAAA;IACtF,SAAS,YAAY;IACrB,aAAa,qBAAqB,qBAAqB,SAAS,oBAAC,QAAD,EAAA,UAAO,UAAgB,CAAA;GAClF;EACP,CAAA,GAAA,UAAU,eAAe,CACvB;;AAET;;;AC1JA,IAAA,kBAAe"}

package/lib/components/Radio/styles.module.scss

@@ -3,6 +3,7 @@
 @use '../../scss/font-settings' as font-settings;
 @use '../../scss/breakpoints' as breakpoints;
 @use '../../scss/screen-reader' as *;
+@use '../Label/styles.module' as label;
 
 $padding-clickable-area-top-bottom: 8px;
 $padding-clickable-area-left: 8px;
@@ -145,13 +146,17 @@ $padding-clickable-area-left: 8px;
 
   &__large:has(input:checked) {
     background-color: palette.$blueberry500;
-    color: palette.$white;
+    color: var(--color-base-text-ondark);
 
     &:hover {
       background-color: palette.$blueberry600;
     }
   }
 
+  &__large:has(input:checked):not(#{&}__large--invalid, #{&}__large--disabled) {
+    @include label.on-dark-tokens;
+  }
+
   &__large#{&}__large--disabled {
     color: palette.$neutral700;
     background-color: palette.$neutral50;
@@ -180,11 +185,6 @@ $padding-clickable-area-left: 8px;
   margin-right: var(--core-space-s);
 }
 
-.radio-sublabel-wrapper {
-  margin-top: -$padding-clickable-area-top-bottom;
-  padding-left: calc(2.8rem + $padding-clickable-area-left);
-}
-
 .radio-afterlabelchildren-wrapper {
   padding-top: $padding-clickable-area-top-bottom;
 }

package/lib/components/Radio/styles.module.scss.d.ts

@@ -1,4 +1,13 @@
 export type Styles = {
+  'after-label-children': string;
+  label: string;
+  label__texts: string;
+  'label--on-dark': string;
+  'label--subdued': string;
+  'label-content-wrapper': string;
+  'label-wrapper': string;
+  'label-wrapper--after-label-children': string;
+  'label-wrapper--no-bottom-margin': string;
   radio: string;
   'radio__marker-wrapper': string;
   'radio-afterlabelchildren-wrapper': string;
@@ -12,11 +21,13 @@ export type Styles = {
   'radio-label--disabled': string;
   'radio-label--invalid': string;
   'radio-label--on-dark': string;
-  'radio-sublabel-wrapper': string;
   'radio-wrapper': string;
   'radio-wrapper__large': string;
   'radio-wrapper__large--invalid': string;
   'radio-wrapper__large--on-blueberry': string;
+  sublabel: string;
+  'sublabel--on-dark': string;
+  'sublabel--subdued': string;
 };
 
 export type ClassNames = keyof Styles;

package/lib/components/Table/index.js

@@ -63,7 +63,6 @@ var Table = ({ id, testId, className, children, breakpointConfig = defaultConfig
 		id: scrollAriaLabelledById
 	});
 	if (currentConfig?.variant === ResponsiveTableVariant.horizontalscroll) return /* @__PURE__ */ jsx(HorizontalScroll_default, {
-		childWidth: tableWidth,
 		testId: "horizontal-scroll",
 		...ariaLabelAttributes,
 		children: table

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Table/Table.tsx","../../../src/components/Table/index.ts"],"sourcesContent":["import { useEffect, useMemo, 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 [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  const currentConfig = useMemo(\n    () => getCurrentConfig(breakpointConfig, breakpoint, tableWidth, windowWidth),\n    [breakpointConfig, breakpoint, tableWidth, windowWidth]\n  );\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';\nexport * from './utils';\n\nexport default Table;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA6CA,IAAa,SAA0B,EACrC,IACA,QACA,WACA,UACA,mBAAmB,eACnB,OAAO,SAAS,QAChB,iBACA,wBACA,GAAG,WACC;CACJ,MAAM,CAAC,YAAY,iBAAiB,SAAiB,CAAC;CACtD,MAAM,CAAC,aAAa,kBAAkB,SAAiB,CAAC;CACxD,MAAM,CAAC,aAAa,kBAAkB,SAAS,OAAO,UAAU;CAChE,MAAM,WAAW,OAAyB,IAAI;CAC9C,MAAM,iBAAiB,aAAa,UAAU,CAAC;CAC/C,MAAM,aAAa,cAAc;CAEjC,MAAM,gBAAgB,cACd,iBAAiB,kBAAkB,YAAY,YAAY,WAAW,GAC5E;EAAC;EAAkB;EAAY;EAAY;CAAW,CACxD;CAEA,gBAAgB;EACd,IACE,eAAe,YAAY,uBAAuB,oBAClD,eAAe,YAAY,uBAAuB,kBAElD,cAAc,SAAS,SAAS,sBAAsB,CAAC,CAAC,SAAS,CAAC;EAEpE,IAAI,eAAe,YAAY,uBAAuB,kBACpD,eAAe,SAAS,SAAS,eAAe,sBAAsB,CAAC,CAAC,SAAS,CAAC;CAEtF,GAAG,CAAC,eAAe,UAAU,CAAC;CAE9B,qBAAqB,eAAe,OAAO,UAAU,GAAG,CAAC,QAAQ,GAAG,GAAG;CAEvE,gBAAgB;EACd,IAAI,eAAe,KAAK,gBACtB,cAAc,SAAS,SAAS,sBAAsB,CAAC,CAAC,SAAS,CAAC;CAEtE,GAAG,CAAC,YAAY,cAAc,CAAC;CAE/B,MAAM,aACJ,eAAe,YAAY,uBAAuB,mBAAmB,8BAA8B,aAAa,UAAU,IAAI,KAAA;CAEhI,MAAM,kBAAkB,mBAAmB,aAAa;CACxD,MAAM,aAAa,WAAW,OAAO,OAAO,iBAAiB,SAAS;CACtE,MAAM,UAAU,UAAU,MAAiC;EAAC;EAAc;EAAW;EAAmB;CAAgB,CAAC;CAEzH,MAAM,QACJ,oBAAC,SAAD;EACE,WAAW;EACP;EACJ,eAAa;EACb,oBAAkB,YAAY;EAC9B,KAAK;EACL,OAAO;EACP,GAAK;EAEJ,UAAA,oBAAoB,UAAU,IAAI;CAC9B,CAAA;CAGT,MAAM,sBAAsB,uBAAuB;EAAE,OAAO;EAAiB,IAAI;CAAuB,CAAC;CAEzG,IAAI,eAAe,YAAY,uBAAuB,kBACpD,OACE,oBAAC,0BAAD;EAAkB,YAAY;EAAY,QAAO;EAAoB,GAAI;EACtE,UAAA;CACe,CAAA;CAItB,OAAO;AACT;;;AC1GA,IAAA,gBAAe"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Table/Table.tsx","../../../src/components/Table/index.ts"],"sourcesContent":["import { useEffect, useMemo, 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 [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  const currentConfig = useMemo(\n    () => getCurrentConfig(breakpointConfig, breakpoint, tableWidth, windowWidth),\n    [breakpointConfig, breakpoint, tableWidth, windowWidth]\n  );\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 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';\nexport * from './utils';\n\nexport default Table;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA6CA,IAAa,SAA0B,EACrC,IACA,QACA,WACA,UACA,mBAAmB,eACnB,OAAO,SAAS,QAChB,iBACA,wBACA,GAAG,WACC;CACJ,MAAM,CAAC,YAAY,iBAAiB,SAAiB,CAAC;CACtD,MAAM,CAAC,aAAa,kBAAkB,SAAiB,CAAC;CACxD,MAAM,CAAC,aAAa,kBAAkB,SAAS,OAAO,UAAU;CAChE,MAAM,WAAW,OAAyB,IAAI;CAC9C,MAAM,iBAAiB,aAAa,UAAU,CAAC;CAC/C,MAAM,aAAa,cAAc;CAEjC,MAAM,gBAAgB,cACd,iBAAiB,kBAAkB,YAAY,YAAY,WAAW,GAC5E;EAAC;EAAkB;EAAY;EAAY;CAAW,CACxD;CAEA,gBAAgB;EACd,IACE,eAAe,YAAY,uBAAuB,oBAClD,eAAe,YAAY,uBAAuB,kBAElD,cAAc,SAAS,SAAS,sBAAsB,CAAC,CAAC,SAAS,CAAC;EAEpE,IAAI,eAAe,YAAY,uBAAuB,kBACpD,eAAe,SAAS,SAAS,eAAe,sBAAsB,CAAC,CAAC,SAAS,CAAC;CAEtF,GAAG,CAAC,eAAe,UAAU,CAAC;CAE9B,qBAAqB,eAAe,OAAO,UAAU,GAAG,CAAC,QAAQ,GAAG,GAAG;CAEvE,gBAAgB;EACd,IAAI,eAAe,KAAK,gBACtB,cAAc,SAAS,SAAS,sBAAsB,CAAC,CAAC,SAAS,CAAC;CAEtE,GAAG,CAAC,YAAY,cAAc,CAAC;CAE/B,MAAM,aACJ,eAAe,YAAY,uBAAuB,mBAAmB,8BAA8B,aAAa,UAAU,IAAI,KAAA;CAEhI,MAAM,kBAAkB,mBAAmB,aAAa;CACxD,MAAM,aAAa,WAAW,OAAO,OAAO,iBAAiB,SAAS;CACtE,MAAM,UAAU,UAAU,MAAiC;EAAC;EAAc;EAAW;EAAmB;CAAgB,CAAC;CAEzH,MAAM,QACJ,oBAAC,SAAD;EACE,WAAW;EACP;EACJ,eAAa;EACb,oBAAkB,YAAY;EAC9B,KAAK;EACL,OAAO;EACP,GAAK;EAEJ,UAAA,oBAAoB,UAAU,IAAI;CAC9B,CAAA;CAGT,MAAM,sBAAsB,uBAAuB;EAAE,OAAO;EAAiB,IAAI;CAAuB,CAAC;CAEzG,IAAI,eAAe,YAAY,uBAAuB,kBACpD,OACE,oBAAC,0BAAD;EAAkB,QAAO;EAAoB,GAAI;EAC9C,UAAA;CACe,CAAA;CAItB,OAAO;AACT;;;AC1GA,IAAA,gBAAe"}

package/lib/components/UNSAFE_Table/StackedCellContent.d.ts

@@ -0,0 +1,9 @@
+interface StackedCellContentProps {
+    /** Heading shown before the content in the stack variant */
+    headingText?: string;
+    /** The content */
+    children?: React.ReactNode;
+}
+/** Heading + content as rendered in a stacked cell. Shared by UNSAFE_TableCell and UNSAFE_TableDetail. */
+export declare const StackedCellContent: React.FC<StackedCellContentProps>;
+export default StackedCellContent;

package/lib/components/UNSAFE_Table/TableCaption.d.ts

@@ -0,0 +1,10 @@
+export interface TableCaptionProps {
+    /** Unique ID. Can be used with aria-labelledby, e.g. for the scroll container. */
+    id?: string;
+    /** Adds custom classes to the element. */
+    className?: string;
+    /** Sets the content of the caption. */
+    children: React.ReactNode;
+}
+export declare const TableCaption: React.FC<TableCaptionProps>;
+export default TableCaption;

package/lib/components/UNSAFE_Table/TableContext.d.ts

@@ -0,0 +1,22 @@
+import { HNDesignsystemTable } from '../../resources/Resources';
+import { ResponsiveTableVariant, TableColors, TableSizes } from './constants';
+export interface TableContextValue {
+    /** Resolved responsive variant for the current breakpoint. */
+    variant: keyof typeof ResponsiveTableVariant;
+    /** Header category for styling. */
+    color: TableColors;
+    /** For display with less space. */
+    size: TableSizes;
+    /** Whether zebra stripes are enabled. Applied by UNSAFE_TableBody, which can also override it. */
+    zebraStripes: boolean;
+    /** Indexes of the columns marked with hideBehindExpander on their UNSAFE_TableHeadCell. */
+    hiddenColumns: number[];
+    /** Text of each column's UNSAFE_TableHeadCell, used as the default heading of cells in the stack variant. */
+    headingTexts: string[];
+    /** Resource texts of the Table. */
+    resources: HNDesignsystemTable;
+}
+/** Table-wide configuration provided by UNSAFE_Table. */
+export declare const TableContext: import('react').Context<TableContextValue>;
+/** Heading of the column a cell belongs to. Provided per cell by UNSAFE_TableRow. */
+export declare const CellHeadingContext: import('react').Context<string>;

package/lib/components/UNSAFE_Table/UNSAFE_Table.d.ts

@@ -0,0 +1,37 @@
+import { HNDesignsystemTable } from '../../resources/Resources';
+import { ResponsiveTableVariant, TableColors, TableSizes } from './constants';
+import { Breakpoint } from '../../hooks/useBreakpoint';
+export interface BreakpointConfig {
+    /** Breakpoint at which responsive behaviour will be applied. The table component uses a "desktop first" approach. */
+    breakpoint: keyof typeof Breakpoint;
+    /** Desired behaviour on this breakpoint and all smaller screens. */
+    variant: keyof typeof ResponsiveTableVariant;
+    /** If variant is horizontallscroll, use a fallback instead of device is not a touch device. */
+    fallbackVariant?: keyof typeof ResponsiveTableVariant;
+}
+export interface UNSAFE_TableProps extends Omit<React.ComponentPropsWithoutRef<'table'>, 'style'> {
+    /** Customize how the table behaves on various screen widths */
+    breakpointConfig?: BreakpointConfig | BreakpointConfig[];
+    /** Description of the table for screen readers. Rendered as a visually hidden caption and used to label the scroll container. */
+    caption: string;
+    /** Sets the content of the table. Use TableHead and UNSAFE_TableBody */
+    children: React.ReactNode;
+    /** Adds custom classes to the element. */
+    className?: string;
+    /** Header category for styling. Default: normal */
+    color?: TableColors;
+    /** Unique ID */
+    id?: string;
+    /** Resources for component */
+    resources?: Partial<HNDesignsystemTable>;
+    /** For display with less space. Discouraged to use together with interactive elements. */
+    size?: TableSizes;
+    /** Width of the head column in percentage in the stack variant. When not set, the column follows the widest heading in the table, but wraps (minimum 30%) when the content needs the space. */
+    stackHeadWidth?: number;
+    /** Id used for testing */
+    testId?: string;
+    /** Applies zebra stripes to every other row. Default: false */
+    zebraStripes?: boolean;
+}
+export declare const UNSAFE_Table: React.FC<UNSAFE_TableProps>;
+export default UNSAFE_Table;

package/lib/components/UNSAFE_Table/UNSAFE_TableBody/UNSAFE_TableBody.d.ts

@@ -0,0 +1,10 @@
+export interface Props extends Omit<React.ComponentPropsWithoutRef<'tbody'>, 'style'> {
+    /** Adds custom classes to the element. */
+    className?: string;
+    /** Sets the content of the table body. Use TableRows */
+    children?: React.ReactNode;
+    /** Applies zebra stripes to every other row. Overrides the value from UNSAFE_Table. */
+    zebraStripes?: boolean;
+}
+export declare const UNSAFE_TableBody: React.FC<Props>;
+export default UNSAFE_TableBody;

package/lib/components/UNSAFE_Table/UNSAFE_TableBody/index.d.ts

@@ -0,0 +1,3 @@
+import { default as UNSAFE_TableBody } from './UNSAFE_TableBody';
+export * from './UNSAFE_TableBody';
+export default UNSAFE_TableBody;

package/lib/components/UNSAFE_Table/UNSAFE_TableBody/index.js

@@ -0,0 +1,2 @@
+import { n as UNSAFE_TableBody, t as UNSAFE_TableBody_default } from "../../../UNSAFE_TableBody.js";
+export { UNSAFE_TableBody, UNSAFE_TableBody_default as default };

package/lib/components/UNSAFE_Table/UNSAFE_TableCell/UNSAFE_TableCell.d.ts

@@ -0,0 +1,15 @@
+import { TextAlign } from '../constants';
+export interface Props extends Omit<React.ComponentPropsWithoutRef<'td'>, 'style'> {
+    /**  text align in cell */
+    textAlign?: TextAlign;
+    /**  nowrap for white space */
+    nowrap?: boolean;
+    /** Adds custom classes to the element. */
+    className?: string;
+    /** Sets the content of the table cell */
+    children?: React.ReactNode;
+    /** For test purposes */
+    testId?: string;
+}
+export declare const UNSAFE_TableCell: React.FC<Props>;
+export default UNSAFE_TableCell;

package/lib/components/UNSAFE_Table/UNSAFE_TableCell/index.d.ts

@@ -0,0 +1,3 @@
+import { default as UNSAFE_TableCell } from './UNSAFE_TableCell';
+export * from './UNSAFE_TableCell';
+export default UNSAFE_TableCell;

package/lib/components/UNSAFE_Table/UNSAFE_TableCell/index.js

@@ -0,0 +1,7 @@
+import { t as UNSAFE_TableCell } from "../../../UNSAFE_TableCell.js";
+//#region src/components/UNSAFE_Table/UNSAFE_TableCell/index.ts
+var UNSAFE_TableCell_default = UNSAFE_TableCell;
+//#endregion
+export { UNSAFE_TableCell, UNSAFE_TableCell_default as default };
+
+//# sourceMappingURL=index.js.map

package/lib/components/UNSAFE_Table/UNSAFE_TableCell/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/UNSAFE_Table/UNSAFE_TableCell/index.ts"],"sourcesContent":["import UNSAFE_TableCell from './UNSAFE_TableCell';\nexport * from './UNSAFE_TableCell';\nexport default UNSAFE_TableCell;\n"],"mappings":";;AAEA,IAAA,2BAAe"}

package/lib/components/UNSAFE_Table/UNSAFE_TableDetail/UNSAFE_TableDetail.d.ts

@@ -0,0 +1,12 @@
+export interface Props {
+    /** Heading shown before the content */
+    headingText: string;
+    /** Adds custom classes to the element. */
+    className?: string;
+    /** The content, typically the value of a column hidden with hideBehindExpander */
+    children?: React.ReactNode;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+}
+export declare const UNSAFE_TableDetail: React.FC<Props>;
+export default UNSAFE_TableDetail;

package/lib/components/UNSAFE_Table/UNSAFE_TableDetail/index.d.ts

@@ -0,0 +1,3 @@
+import { default as UNSAFE_TableDetail } from './UNSAFE_TableDetail';
+export * from './UNSAFE_TableDetail';
+export default UNSAFE_TableDetail;

package/lib/components/UNSAFE_Table/UNSAFE_TableDetail/index.js

@@ -0,0 +1,7 @@
+import { t as UNSAFE_TableDetail } from "../../../UNSAFE_TableDetail.js";
+//#region src/components/UNSAFE_Table/UNSAFE_TableDetail/index.ts
+var UNSAFE_TableDetail_default = UNSAFE_TableDetail;
+//#endregion
+export { UNSAFE_TableDetail, UNSAFE_TableDetail_default as default };
+
+//# sourceMappingURL=index.js.map

package/lib/components/UNSAFE_Table/UNSAFE_TableDetail/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/UNSAFE_Table/UNSAFE_TableDetail/index.ts"],"sourcesContent":["import UNSAFE_TableDetail from './UNSAFE_TableDetail';\nexport * from './UNSAFE_TableDetail';\nexport default UNSAFE_TableDetail;\n"],"mappings":";;AAEA,IAAA,6BAAe"}

package/lib/components/UNSAFE_Table/UNSAFE_TableExpandedRow/UNSAFE_TableExpandedRow.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+export interface Props {
+    /** Row is expanded. */
+    expanded: boolean;
+    /** When hide button inside expanded row is clicked. */
+    toggleClick: () => void;
+    /** Adds custom classes to the element. */
+    className?: string;
+    /** Sets the content of the expanded row.  */
+    children: React.ReactNode;
+    /** Only display the expanded row in the stack variant. */
+    stackOnly?: boolean;
+    /** Row id. For use with aria-controls. */
+    id?: string;
+}
+export declare const UNSAFE_TableExpandedRow: ({ expanded, toggleClick, children, className, stackOnly, id }: Props) => React.JSX.Element;
+export default UNSAFE_TableExpandedRow;

package/lib/components/UNSAFE_Table/UNSAFE_TableExpandedRow/index.d.ts

@@ -0,0 +1,3 @@
+import { default as UNSAFE_TableExpandedRow } from './UNSAFE_TableExpandedRow';
+export * from './UNSAFE_TableExpandedRow';
+export default UNSAFE_TableExpandedRow;

package/lib/components/UNSAFE_Table/UNSAFE_TableExpandedRow/index.js

@@ -0,0 +1,7 @@
+import { t as UNSAFE_TableExpandedRow } from "../../../UNSAFE_TableExpandedRow.js";
+//#region src/components/UNSAFE_Table/UNSAFE_TableExpandedRow/index.ts
+var UNSAFE_TableExpandedRow_default = UNSAFE_TableExpandedRow;
+//#endregion
+export { UNSAFE_TableExpandedRow, UNSAFE_TableExpandedRow_default as default };
+
+//# sourceMappingURL=index.js.map

package/lib/components/UNSAFE_Table/UNSAFE_TableExpandedRow/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/UNSAFE_Table/UNSAFE_TableExpandedRow/index.ts"],"sourcesContent":["import UNSAFE_TableExpandedRow from './UNSAFE_TableExpandedRow';\nexport * from './UNSAFE_TableExpandedRow';\nexport default UNSAFE_TableExpandedRow;\n"],"mappings":";;AAEA,IAAA,kCAAe"}

package/lib/components/UNSAFE_Table/UNSAFE_TableExpanderCell/UNSAFE_TableExpanderCellMobile.d.ts

@@ -0,0 +1,4 @@
+import { Props } from '../UNSAFE_TableRow/UNSAFE_TableRow';
+type UNSAFE_TableExpanderCellMobileProps = Pick<Props, 'expanded' | 'onClick' | 'expandableRowId'>;
+declare const UNSAFE_TableExpanderCellMobile: React.FC<UNSAFE_TableExpanderCellMobileProps>;
+export default UNSAFE_TableExpanderCellMobile;

package/lib/components/UNSAFE_Table/UNSAFE_TableHead/UNSAFE_TableHead.d.ts

@@ -0,0 +1,8 @@
+export interface Props extends Omit<React.ComponentPropsWithoutRef<'thead'>, 'style'> {
+    /** Adds custom classes to the element. */
+    className?: string;
+    /** Sets the content of the thead. Add table rows  */
+    children: React.ReactNode;
+}
+export declare const UNSAFE_TableHead: React.FC<Props>;
+export default UNSAFE_TableHead;

package/lib/components/UNSAFE_Table/UNSAFE_TableHead/index.d.ts

@@ -0,0 +1,3 @@
+import { default as UNSAFE_TableHead } from './UNSAFE_TableHead';
+export * from './UNSAFE_TableHead';
+export default UNSAFE_TableHead;

package/lib/components/UNSAFE_Table/UNSAFE_TableHead/index.js

@@ -0,0 +1,7 @@
+import { t as UNSAFE_TableHead } from "../../../UNSAFE_TableHead.js";
+//#region src/components/UNSAFE_Table/UNSAFE_TableHead/index.ts
+var UNSAFE_TableHead_default = UNSAFE_TableHead;
+//#endregion
+export { UNSAFE_TableHead, UNSAFE_TableHead_default as default };
+
+//# sourceMappingURL=index.js.map

package/lib/components/UNSAFE_Table/UNSAFE_TableHead/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/UNSAFE_Table/UNSAFE_TableHead/index.ts"],"sourcesContent":["import UNSAFE_TableHead from './UNSAFE_TableHead';\nexport * from './UNSAFE_TableHead';\nexport default UNSAFE_TableHead;\n"],"mappings":";;AAEA,IAAA,2BAAe"}

package/lib/components/UNSAFE_Table/UNSAFE_TableHeadCell/UNSAFE_TableHeadCell.d.ts

@@ -0,0 +1,15 @@
+import { SortDirection } from '../constants';
+export interface Props extends Omit<React.ComponentPropsWithoutRef<'th'>, 'style'> {
+    /** Sort direction  */
+    sortDir?: SortDirection;
+    /** Adds custom classes to the element. */
+    className?: string;
+    /** Sets the content of the td element.  */
+    children?: React.ReactNode;
+    /** Sets the width of the column, e.g. '10rem', '25%' or a number of pixels. Ignored in the stack variant. */
+    width?: string | number;
+    /** In the stack variant, hides the cells of this column and shows the column heading + content in an automatically rendered expanded row. */
+    hideBehindExpander?: boolean;
+}
+export declare const UNSAFE_TableHeadCell: React.FC<Props>;
+export default UNSAFE_TableHeadCell;

package/lib/components/UNSAFE_Table/UNSAFE_TableHeadCell/index.d.ts

@@ -0,0 +1,3 @@
+import { default as UNSAFE_TableHeadCell } from './UNSAFE_TableHeadCell';
+export * from './UNSAFE_TableHeadCell';
+export default UNSAFE_TableHeadCell;

package/lib/components/UNSAFE_Table/UNSAFE_TableHeadCell/index.js

@@ -0,0 +1,2 @@
+import { n as UNSAFE_TableHeadCell, t as UNSAFE_TableHeadCell_default } from "../../../UNSAFE_TableHeadCell.js";
+export { UNSAFE_TableHeadCell, UNSAFE_TableHeadCell_default as default };

package/lib/components/UNSAFE_Table/UNSAFE_TablePopMenuCell/UNSAFE_TablePopMenuCell.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+import { PopMenuProps } from '../../PopMenu';
+export interface UNSAFE_TablePopMenuCellProps {
+    /** PopMenu shown inside the cell. Fills the entire cell. */
+    children: React.ReactElement<PopMenuProps>;
+}
+declare const UNSAFE_TablePopMenuCell: React.FC<UNSAFE_TablePopMenuCellProps>;
+export default UNSAFE_TablePopMenuCell;

package/lib/components/UNSAFE_Table/UNSAFE_TableRow/UNSAFE_TableRow.d.ts

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+import { PopMenuProps } from '../../PopMenu';
+export interface Props extends Omit<React.ComponentPropsWithoutRef<'tr'>, 'style'> {
+    /** Content to be rendered in an expandable row. Make sure to add an empty TableHeadCell to the beginning of the Table. This content renders below the column content with hideBehindExpander set in the stack variant. */
+    expandedContent?: React.ReactNode;
+    /** Sets if expanded row is expanded */
+    expanded?: boolean;
+    /** Id of the expanded row this row controls. For use with aria-controls on the expander button. */
+    expandableRowId?: string;
+    /** When hide/show button for expanded row is clicked. */
+    onClick?: () => void;
+    /** Adds custom classes to the element. */
+    className?: string;
+    /** Sets the cells of the table row element.  */
+    children?: React.ReactNode;
+    /** PopMenu rendered in an extra cell as the last cell in the row. Fills the entire cell. Outside the stack variant labelText is hidden and used as aria-label instead. */
+    popMenu?: React.ReactElement<PopMenuProps>;
+}
+export declare const UNSAFE_TableRow: React.FC<Props>;
+export default UNSAFE_TableRow;

package/lib/components/UNSAFE_Table/UNSAFE_TableRow/index.d.ts

@@ -0,0 +1,3 @@
+import { default as UNSAFE_TableRow } from './UNSAFE_TableRow';
+export * from './UNSAFE_TableRow';
+export default UNSAFE_TableRow;