@helsenorge/designsystem-react 7.12.0 → 7.13.0

package/components/Panel/Panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.js","sources":["../../../src/components/Panel/Panel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnchorTarget, AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { useUuid } from '../../hooks/useUuid';\nimport { palette } from '../../theme/palette';\nimport { AriaLabelAttributes, getAriaLabelAttributes } from '../../utils/accessibility';\nimport Badge from '../Badge';\nimport Button, { ButtonProps, ButtonTags } from '../Button';\nimport Icon, { IconSize, SvgPathProps } from '../Icon';\nimport AlertSignFill from '../Icons/AlertSignFill';\nimport ArrowRight from '../Icons/ArrowRight';\nimport Calendar from '../Icons/Calendar';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport Pencil from '../Icons/Pencil';\nimport Watch from '../Icons/Watch';\nimport Title, { TitleTags } from '../Title';\n\nimport panelStyles from './styles.module.scss';\n\nexport enum PanelStatus {\n  normal = 'normal',\n  new = 'new',\n  error = 'error',\n  draft = 'draft',\n}\n\nexport enum PanelVariant {\n  fill = 'fill',\n  white = 'white',\n  stroke = 'stroke',\n  line = 'line',\n}\n\nexport enum PanelLayout {\n  layout1 = 'layout1',\n  layout2 = 'layout2',\n  layout3a = 'layout3a',\n  layout3b = 'layout3b',\n  layout3c = 'layout3c',\n}\n\nexport interface PanelProps {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Panel section A content */\n  contentA?: React.ReactNode | string;\n  /** Panel section B content */\n  contentB?: React.ReactNode | string;\n  /** Content for a container that renders above A and B regardless of layout */\n  contentHeader?: React.ReactNode;\n  /** Container acts as a button, clicking anywhere triggers a panel button click */\n  containerAsButton?: boolean;\n  /** Panel children */\n  children?: React.ReactNode;\n  /** Displays date with icon */\n  date?: string;\n  /** Expands or collapses the panel */\n  expanded?: boolean;\n  /** Whether the panel can be focused */\n  focusable?: boolean;\n  /** Icon displayed in title */\n  icon?: React.ReactNode;\n  /** Panel button text */\n  buttonText?: string;\n  /** Panel button close text */\n  buttonTextClose?: string;\n  /** HTML markup for panel button. Default: a */\n  buttonHtmlMarkup?: ButtonTags;\n  /** Callback when the panel button is clicked */\n  buttonOnClick?: ButtonProps['onClick'];\n  /** Panel button is aria-labelledby the text in the button itself + the element set in buttonAriaLabelledById. Default: auto-generated id for title (if title is set). */\n  buttonAriaLabelledById?: string;\n  /** Panel button aria label */\n  buttonAriaLabel?: string;\n  /** Layout of the panel */\n  layout?: keyof typeof PanelLayout;\n  /** Removes top border when variant is \"line\" */\n  noTopBorder?: boolean;\n  /** Called when the panel is opened/closed */\n  onExpand?: (isExpanded: boolean) => void;\n  /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n  renderChildrenWhenClosed?: boolean;\n  /** Displays a status on the left side: default normal */\n  status?: keyof typeof PanelStatus;\n  /** Displayed on top of the panel with a status icon */\n  statusMessage?: string;\n  /** Sets the data-testid attribute for testing purposes */\n  testId?: string;\n  /** Displays time with icon */\n  time?: string;\n  /** Title of the panel */\n  title?: string;\n  /** Changes the underlying element of the title. Default: h2 */\n  titleHtmlMarkup?: TitleTags;\n  /** Changes the visual representation of the panel */\n  variant?: keyof typeof PanelVariant;\n  /** URL to details, renders as a button with anchor tag */\n  url?: string;\n  /** target used in the button: default is _self */\n  target?: AnchorTarget;\n}\n\nexport interface LayoutProps\n  extends Pick<PanelProps, 'contentA' | 'contentB' | 'contentHeader' | 'icon' | 'layout' | 'status' | 'statusMessage'> {\n  ctaContainer?: React.ReactNode;\n  titleElement: React.ReactNode;\n}\n\nconst StatusText: React.FC<{ status?: keyof typeof PanelStatus; statusMessage?: string }> = ({ status, statusMessage }) => {\n  const statusIcon = (): { color: string; svgIcon: React.FC<SvgPathProps> } => {\n    if (status === PanelStatus.error) {\n      return { color: palette.cherry500, svgIcon: AlertSignFill };\n    }\n\n    return { color: palette.black, svgIcon: Pencil };\n  };\n\n  const statusMessageClass = classNames(panelStyles['status-message'], {\n    [panelStyles['status-message--new']]: status === PanelStatus.new,\n  });\n\n  if ((status === PanelStatus.error || status === PanelStatus.draft) && statusMessage) {\n    return (\n      <div className={statusMessageClass} data-testid=\"display-status\">\n        {<Icon {...statusIcon()} size={IconSize.XSmall} />} <span>{statusMessage}</span>\n      </div>\n    );\n  }\n\n  return null;\n};\n\nconst PreContainer: React.FC<{ children?: React.ReactNode }> = ({ children }) => {\n  if (typeof children === 'undefined') return null;\n  return <div className={panelStyles['header-container']}>{children}</div>;\n};\n\nconst DateTime: React.FC<{ date?: string; time?: string }> = ({ date, time }) => {\n  if (date || time) {\n    return (\n      <div className={panelStyles['datetime-container']} data-testid=\"datetime\">\n        {date && (\n          <div className={panelStyles['datetime-container__icon']}>\n            <Icon svgIcon={Calendar} size={IconSize.XSmall} />\n            <span>{date}</span>\n          </div>\n        )}\n        {time && (\n          <div className={panelStyles['datetime-container__icon']}>\n            <Icon svgIcon={Watch} size={IconSize.XSmall} />\n            <span>{time}</span>\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  return null;\n};\n\nconst PanelLayout1: React.FC<LayoutProps> = ({\n  contentA,\n  contentB,\n  contentHeader,\n  ctaContainer,\n  icon,\n  status,\n  statusMessage,\n  titleElement,\n}) => {\n  const panelLayoutClasses = classNames(panelStyles['panel__layout-1'], {\n    [panelStyles['panel__layout-1--with-icon']]: icon,\n  });\n  const iconClasses = classNames(panelStyles.panel__icon, panelStyles['panel__icon--layout-1'], {\n    [panelStyles['panel__icon--no-content']]: !contentA && !contentB,\n  });\n\n  return (\n    <div className={panelLayoutClasses}>\n      <StatusText status={status} statusMessage={statusMessage} />\n      <PreContainer>{contentHeader}</PreContainer>\n      {icon && <div className={iconClasses}>{icon}</div>}\n      <div className={panelStyles['panel__layout-1__content-a']}>\n        {titleElement}\n        {contentA}\n      </div>\n      {contentB && <div>{contentB}</div>}\n      {ctaContainer}\n    </div>\n  );\n};\n\nconst PanelLayout2: React.FC<LayoutProps> = ({\n  contentA,\n  contentB,\n  contentHeader,\n  ctaContainer,\n  icon,\n  status,\n  statusMessage,\n  titleElement,\n}) => {\n  const panelLayoutClasses = classNames(panelStyles['panel__layout-2'], {\n    [panelStyles['panel__layout-2--with-icon']]: icon,\n  });\n  const iconClasses = classNames(panelStyles.panel__icon, panelStyles['panel__icon--layout-2'], {\n    [panelStyles['panel__icon--no-content']]: !contentA && !contentB,\n  });\n  const lastColumnClass = panelStyles['panel__layout-2__last-column'];\n\n  return (\n    <div className={panelLayoutClasses}>\n      <StatusText status={status} statusMessage={statusMessage} />\n      <PreContainer>{contentHeader}</PreContainer>\n      {icon && <div className={iconClasses}>{icon}</div>}\n      <div className={panelStyles['panel__layout-2__content-a']}>\n        {titleElement}\n        {contentA}\n      </div>\n      {contentB && <div className={lastColumnClass}>{contentB}</div>}\n      {ctaContainer && <div className={lastColumnClass}>{ctaContainer}</div>}\n    </div>\n  );\n};\n\nconst PanelLayout3: React.FC<LayoutProps> = ({\n  contentA,\n  contentB,\n  contentHeader,\n  ctaContainer,\n  icon,\n  layout,\n  status,\n  statusMessage,\n  titleElement,\n}) => {\n  const layoutClasses = classNames(panelStyles['panel__layout-3'], {\n    [panelStyles['panel__layout-3--with-icon']]: icon,\n    [panelStyles['panel__layout-3--a']]: layout === PanelLayout.layout3a,\n    [panelStyles['panel__layout-3--b']]: layout === PanelLayout.layout3b,\n    [panelStyles['panel__layout-3--c']]: layout === PanelLayout.layout3c,\n  });\n  const iconClasses = classNames(panelStyles.panel__icon, panelStyles['panel__icon--layout-3'], {\n    [panelStyles['panel__icon--no-content']]: !contentA && !contentB,\n  });\n\n  return (\n    <div className={layoutClasses}>\n      <StatusText status={status} statusMessage={statusMessage} />\n      <PreContainer>{contentHeader}</PreContainer>\n      {icon && <div className={iconClasses}>{icon}</div>}\n      <div>\n        {titleElement}\n        {contentA}\n      </div>\n      <div className={panelStyles['panel__layout-3__last-column']}>\n        {contentB && <div className={panelStyles['panel__layout-3__last-column__content-b']}>{contentB}</div>}\n        {ctaContainer}\n      </div>\n    </div>\n  );\n};\n\nconst Panel = React.forwardRef(function PanelForwardedRef(props: PanelProps, ref: React.ForwardedRef<HTMLHeadingElement>) {\n  const {\n    buttonAriaLabel,\n    buttonAriaLabelledById,\n    buttonText = 'Se detaljer',\n    buttonTextClose = 'Skjul detaljer',\n    buttonHtmlMarkup = 'a',\n    buttonOnClick,\n    children,\n    className,\n    containerAsButton = false,\n    contentA,\n    contentB,\n    contentHeader,\n    date,\n    expanded = false,\n    focusable = false,\n    icon,\n    layout = PanelLayout.layout2,\n    noTopBorder,\n    onExpand,\n    renderChildrenWhenClosed = false,\n    status = PanelStatus.normal,\n    statusMessage,\n    target = '_self',\n    testId,\n    time,\n    title,\n    titleHtmlMarkup = 'h2',\n    url,\n    variant = PanelVariant.fill,\n  } = props;\n\n  const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n  const titleId = useUuid();\n  const buttonTextId = useUuid();\n  const hasBadge = statusMessage && status === PanelStatus.new;\n  const noContentB = typeof contentB === 'undefined';\n  const layout1 = layout === 'layout1' || noContentB;\n  const layout2 = !noContentB && layout === 'layout2';\n  const layout3 = !noContentB && (layout === 'layout3a' || layout === 'layout3b' || layout === 'layout3c');\n  const panelWrapperClasses = classNames(panelStyles['panel-wrapper'], className);\n\n  const panelClasses = classNames(panelStyles.panel, {\n    [panelStyles['panel--fill']]: variant === PanelVariant.fill,\n    [panelStyles['panel--stroke']]: variant === PanelVariant.stroke,\n    [panelStyles['panel--white']]: variant === PanelVariant.white,\n    [panelStyles['panel--line']]: variant === PanelVariant.line,\n    [panelStyles['panel--no-top-border']]: variant === PanelVariant.line && noTopBorder,\n    [panelStyles['panel--selected']]: isExpanded,\n    [panelStyles['panel--new']]: status === PanelStatus.new,\n    [panelStyles['panel--draft']]: status === PanelStatus.draft,\n    [panelStyles['panel--error']]: status === PanelStatus.error,\n    [panelStyles['panel--status']]: status && status !== PanelStatus.normal,\n    [panelStyles['panel--with-icon']]: icon,\n    [panelStyles['panel--button']]: containerAsButton,\n    [panelStyles['panel--clickable']]: children || url || onExpand || buttonOnClick || containerAsButton,\n  });\n\n  const renderCTAContainer = () => {\n    const hasButton = children || url || buttonOnClick;\n    const btnContainerClasses = classNames(panelStyles['panel__btn-container'], {\n      [panelStyles['panel__btn-container--no-content-b']]: noContentB,\n      [panelStyles['panel__btn-container--no-button']]: !hasButton,\n    });\n\n    return (\n      (hasButton || date || time) && (\n        <div className={btnContainerClasses}>\n          {<DateTime date={date} time={time} />}\n          {hasButton && <div className={panelStyles['panel__details-btn']}>{renderDetailsButton()}</div>}\n        </div>\n      )\n    );\n  };\n\n  const renderDetailsButton = (): React.ReactNode => {\n    const ariaLabelAttributes = getAriaLabelAttributes({\n      label: buttonAriaLabel,\n      id: (buttonAriaLabelledById && `${buttonTextId} ${buttonAriaLabelledById}`) || (title && titleId && `${buttonTextId} ${titleId}`),\n      prefer: 'label',\n    });\n\n    const commonProps: Partial<ButtonProps> & AriaLabelAttributes = {\n      onClick: buttonOnClick ? buttonOnClick : (): void => setIsExpanded(!isExpanded),\n      className: containerAsButton ? panelStyles['panel__expand'] : undefined,\n      variant: 'borderless',\n      ellipsis: true,\n      ...ariaLabelAttributes,\n    };\n\n    if (children) {\n      return (\n        <Button testId=\"expand\" aria-expanded={isExpanded} {...commonProps}>\n          <span id={buttonTextId}>{isExpanded ? buttonTextClose : buttonText}</span>\n          <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} />\n        </Button>\n      );\n    }\n\n    return (\n      <Button testId=\"url\" htmlMarkup={buttonHtmlMarkup} href={url} target={target} {...commonProps}>\n        <span id={buttonTextId}>{buttonText}</span>\n        <Icon svgIcon={ArrowRight} />\n      </Button>\n    );\n  };\n\n  const renderContent = (): React.ReactNode | null => {\n    if (!children || (!renderChildrenWhenClosed && !isExpanded)) {\n      return null;\n    }\n\n    const panelDetailsClasses = classNames(panelStyles['panel-details'], {\n      [panelStyles['panel-details--open']]: isExpanded,\n      [panelStyles['panel-details--line']]: variant === PanelVariant.line,\n      [panelStyles['panel-details--white']]: variant === PanelVariant.white,\n    });\n\n    return (\n      <div className={panelDetailsClasses} data-testid=\"panel-details\">\n        <div>{children}</div>\n      </div>\n    );\n  };\n\n  const renderTitle = () => {\n    const titleContainerClasses = classNames(panelStyles['title-container'], {\n      [panelStyles['title-container--no-content-a']]: !contentA,\n    });\n    const titleClasses = classNames(panelStyles['title-container__title'], {\n      [panelStyles['title-container__title--badge']]: hasBadge,\n    });\n\n    return (\n      title && (\n        <div className={titleContainerClasses}>\n          <Title appearance=\"title3\" htmlMarkup={titleHtmlMarkup} id={titleId} className={titleClasses}>\n            {title}\n          </Title>\n          {hasBadge && (\n            <div className={panelStyles.panel__badge}>\n              <Badge color=\"blueberry\" testId=\"badge-status\">\n                {statusMessage}\n              </Badge>\n            </div>\n          )}\n        </div>\n      )\n    );\n  };\n\n  const layoutProps: LayoutProps = {\n    contentA: contentA,\n    contentB: contentB,\n    contentHeader: contentHeader,\n    ctaContainer: renderCTAContainer(),\n    icon: icon,\n    status: status,\n    statusMessage: statusMessage,\n    titleElement: renderTitle(),\n  };\n\n  return (\n    <div\n      // eslint-disable-next-line no-constant-condition\n      tabIndex={focusable ? -1 : undefined}\n      ref={ref}\n      data-testid={testId}\n      className={panelWrapperClasses}\n      data-analyticsid={AnalyticsId.Panel}\n    >\n      <div className={panelClasses}>\n        {layout1 && <PanelLayout1 {...layoutProps} />}\n        {layout2 && <PanelLayout2 {...layoutProps} />}\n        {layout3 && <PanelLayout3 {...layoutProps} layout={layout} />}\n      </div>\n      {renderContent()}\n    </div>\n  );\n});\n\nexport default Panel;\n"],"names":["PanelStatus","PanelVariant","PanelLayout","StatusText","status","statusMessage","statusIcon","palette","AlertSignFill","Pencil","statusMessageClass","classNames","panelStyles","Icon","IconSize","React","PreContainer","children","DateTime","date","time","Calendar","Watch","PanelLayout1","contentA","contentB","contentHeader","ctaContainer","icon","titleElement","panelLayoutClasses","iconClasses","PanelLayout2","lastColumnClass","PanelLayout3","layout","layoutClasses","Panel","props","ref","buttonAriaLabel","buttonAriaLabelledById","buttonText","buttonTextClose","buttonHtmlMarkup","buttonOnClick","className","containerAsButton","expanded","focusable","noTopBorder","onExpand","renderChildrenWhenClosed","target","testId","title","titleHtmlMarkup","url","variant","isExpanded","setIsExpanded","useExpand","titleId","useUuid","buttonTextId","hasBadge","noContentB","layout1","layout2","layout3","panelWrapperClasses","panelClasses","renderCTAContainer","hasButton","btnContainerClasses","renderDetailsButton","ariaLabelAttributes","getAriaLabelAttributes","commonProps","Button","ChevronUp","ChevronDown","ArrowRight","renderContent","panelDetailsClasses","renderTitle","titleContainerClasses","titleClasses","Title","Badge","layoutProps","AnalyticsId","Panel$1"],"mappings":"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"}
+{"version":3,"file":"Panel.js","sources":["../../../src/components/Panel/Panel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnchorTarget, AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { useUuid } from '../../hooks/useUuid';\nimport { palette } from '../../theme/palette';\nimport { AriaLabelAttributes, getAriaLabelAttributes } from '../../utils/accessibility';\nimport Badge from '../Badge';\nimport Button, { ButtonProps, ButtonTags } from '../Button';\nimport Icon, { IconSize, SvgPathProps } from '../Icon';\nimport AlertSignFill from '../Icons/AlertSignFill';\nimport ArrowRight from '../Icons/ArrowRight';\nimport Calendar from '../Icons/Calendar';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport Pencil from '../Icons/Pencil';\nimport Watch from '../Icons/Watch';\nimport Title, { TitleTags } from '../Title';\n\nimport panelStyles from './styles.module.scss';\n\nexport enum PanelStatus {\n  normal = 'normal',\n  new = 'new',\n  error = 'error',\n  draft = 'draft',\n}\n\nexport enum PanelVariant {\n  fill = 'fill',\n  white = 'white',\n  stroke = 'stroke',\n  line = 'line',\n}\n\nexport enum PanelLayout {\n  layout1 = 'layout1',\n  layout2 = 'layout2',\n  layout3a = 'layout3a',\n  layout3b = 'layout3b',\n  layout3c = 'layout3c',\n}\n\nexport interface PanelProps {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Panel section A content */\n  contentA?: React.ReactNode | string;\n  /** Panel section B content */\n  contentB?: React.ReactNode | string;\n  /** Content for a container that renders above A and B regardless of layout */\n  contentHeader?: React.ReactNode;\n  /** Container acts as a button, clicking anywhere triggers a panel button click */\n  containerAsButton?: boolean;\n  /** Panel children */\n  children?: React.ReactNode;\n  /** Displays date with icon */\n  date?: string;\n  /** Expands or collapses the panel */\n  expanded?: boolean;\n  /** Whether the panel can be focused */\n  focusable?: boolean;\n  /** Icon displayed in title */\n  icon?: React.ReactNode;\n  /** Panel button text */\n  buttonText?: string;\n  /** Panel button close text */\n  buttonTextClose?: string;\n  /** HTML markup for panel button. Default: a */\n  buttonHtmlMarkup?: ButtonTags;\n  /** Callback when the panel button is clicked */\n  buttonOnClick?: ButtonProps['onClick'];\n  /** Panel button is aria-labelledby the text in the button itself + the element set in buttonAriaLabelledById. Default: auto-generated id for title (if title is set). */\n  buttonAriaLabelledById?: string;\n  /** Panel button aria label */\n  buttonAriaLabel?: string;\n  /** Layout of the panel */\n  layout?: keyof typeof PanelLayout;\n  /** Removes top border when variant is \"line\" */\n  noTopBorder?: boolean;\n  /** Called when the panel is opened/closed */\n  onExpand?: (isExpanded: boolean) => void;\n  /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n  renderChildrenWhenClosed?: boolean;\n  /** Displays a status on the left side: default normal */\n  status?: keyof typeof PanelStatus;\n  /** Displayed on top of the panel with a status icon */\n  statusMessage?: string;\n  /** Sets the data-testid attribute for testing purposes */\n  testId?: string;\n  /** Displays time with icon */\n  time?: string;\n  /** Title of the panel */\n  title?: string;\n  /** Changes the underlying element of the title. Default: h2 */\n  titleHtmlMarkup?: TitleTags;\n  /** Changes the visual representation of the panel */\n  variant?: keyof typeof PanelVariant;\n  /** URL to details, renders as a button with anchor tag */\n  url?: string;\n  /** target used in the button: default is _self */\n  target?: AnchorTarget;\n}\n\nexport interface LayoutProps\n  extends Pick<PanelProps, 'contentA' | 'contentB' | 'contentHeader' | 'icon' | 'layout' | 'status' | 'statusMessage'> {\n  ctaContainer?: React.ReactNode;\n  titleElement: React.ReactNode;\n}\n\nconst StatusText: React.FC<{ status?: keyof typeof PanelStatus; statusMessage?: string }> = ({ status, statusMessage }) => {\n  const statusIcon = (): { color: string; svgIcon: React.FC<SvgPathProps> } => {\n    if (status === PanelStatus.error) {\n      return { color: palette.cherry500, svgIcon: AlertSignFill };\n    }\n\n    return { color: palette.black, svgIcon: Pencil };\n  };\n\n  const statusMessageClass = classNames(panelStyles['status-message'], {\n    [panelStyles['status-message--new']]: status === PanelStatus.new,\n  });\n\n  if ((status === PanelStatus.error || status === PanelStatus.draft) && statusMessage) {\n    return (\n      <div className={statusMessageClass} data-testid=\"display-status\">\n        {<Icon {...statusIcon()} size={IconSize.XSmall} />} <span>{statusMessage}</span>\n      </div>\n    );\n  }\n\n  return null;\n};\n\nconst PreContainer: React.FC<{ children?: React.ReactNode }> = ({ children }) => {\n  if (typeof children === 'undefined') return null;\n  return <div className={panelStyles['header-container']}>{children}</div>;\n};\n\nconst DateTime: React.FC<{ date?: string; time?: string }> = ({ date, time }) => {\n  if (date || time) {\n    return (\n      <div className={panelStyles['datetime-container']} data-testid=\"datetime\">\n        {date && (\n          <div className={panelStyles['datetime-container__icon']}>\n            <Icon svgIcon={Calendar} size={IconSize.XSmall} />\n            <span>{date}</span>\n          </div>\n        )}\n        {time && (\n          <div className={panelStyles['datetime-container__icon']}>\n            <Icon svgIcon={Watch} size={IconSize.XSmall} />\n            <span>{time}</span>\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  return null;\n};\n\nconst PanelLayout1: React.FC<LayoutProps> = ({\n  contentA,\n  contentB,\n  contentHeader,\n  ctaContainer,\n  icon,\n  status,\n  statusMessage,\n  titleElement,\n}) => {\n  const panelLayoutClasses = classNames(panelStyles['panel__layout-1'], {\n    [panelStyles['panel__layout-1--with-icon']]: icon,\n  });\n  const iconClasses = classNames(panelStyles.panel__icon, panelStyles['panel__icon--layout-1'], {\n    [panelStyles['panel__icon--no-content']]: !contentA && !contentB,\n  });\n\n  return (\n    <div className={panelLayoutClasses}>\n      <StatusText status={status} statusMessage={statusMessage} />\n      <PreContainer>{contentHeader}</PreContainer>\n      {icon && <div className={iconClasses}>{icon}</div>}\n      <div className={panelStyles['panel__layout-1__content-a']}>\n        {titleElement}\n        {contentA}\n      </div>\n      {contentB && <div>{contentB}</div>}\n      {ctaContainer}\n    </div>\n  );\n};\n\nconst PanelLayout2: React.FC<LayoutProps> = ({\n  contentA,\n  contentB,\n  contentHeader,\n  ctaContainer,\n  icon,\n  status,\n  statusMessage,\n  titleElement,\n}) => {\n  const panelLayoutClasses = classNames(panelStyles['panel__layout-2'], {\n    [panelStyles['panel__layout-2--with-icon']]: icon,\n  });\n  const iconClasses = classNames(panelStyles.panel__icon, panelStyles['panel__icon--layout-2'], {\n    [panelStyles['panel__icon--no-content']]: !contentA && !contentB,\n  });\n  const lastColumnClass = panelStyles['panel__layout-2__last-column'];\n\n  return (\n    <div className={panelLayoutClasses}>\n      <StatusText status={status} statusMessage={statusMessage} />\n      <PreContainer>{contentHeader}</PreContainer>\n      {icon && <div className={iconClasses}>{icon}</div>}\n      <div className={panelStyles['panel__layout-2__content-a']}>\n        {titleElement}\n        {contentA}\n      </div>\n      {contentB && <div className={lastColumnClass}>{contentB}</div>}\n      {ctaContainer && <div className={lastColumnClass}>{ctaContainer}</div>}\n    </div>\n  );\n};\n\nconst PanelLayout3: React.FC<LayoutProps> = ({\n  contentA,\n  contentB,\n  contentHeader,\n  ctaContainer,\n  icon,\n  layout,\n  status,\n  statusMessage,\n  titleElement,\n}) => {\n  const layoutClasses = classNames(panelStyles['panel__layout-3'], {\n    [panelStyles['panel__layout-3--with-icon']]: icon,\n    [panelStyles['panel__layout-3--a']]: layout === PanelLayout.layout3a,\n    [panelStyles['panel__layout-3--b']]: layout === PanelLayout.layout3b,\n    [panelStyles['panel__layout-3--c']]: layout === PanelLayout.layout3c,\n  });\n  const iconClasses = classNames(panelStyles.panel__icon, panelStyles['panel__icon--layout-3'], {\n    [panelStyles['panel__icon--no-content']]: !contentA && !contentB,\n  });\n\n  return (\n    <div className={layoutClasses}>\n      <StatusText status={status} statusMessage={statusMessage} />\n      <PreContainer>{contentHeader}</PreContainer>\n      {icon && <div className={iconClasses}>{icon}</div>}\n      <div>\n        {titleElement}\n        {contentA}\n      </div>\n      <div className={panelStyles['panel__layout-3__last-column']}>\n        {contentB && <div className={panelStyles['panel__layout-3__last-column__content-b']}>{contentB}</div>}\n        {ctaContainer}\n      </div>\n    </div>\n  );\n};\n\nconst Panel = React.forwardRef(function PanelForwardedRef(props: PanelProps, ref: React.ForwardedRef<HTMLHeadingElement>) {\n  const {\n    buttonAriaLabel,\n    buttonAriaLabelledById,\n    buttonText = 'Se detaljer',\n    buttonTextClose = 'Skjul detaljer',\n    buttonHtmlMarkup = 'a',\n    buttonOnClick,\n    children,\n    className,\n    containerAsButton = false,\n    contentA,\n    contentB,\n    contentHeader,\n    date,\n    expanded = false,\n    focusable = false,\n    icon,\n    layout = PanelLayout.layout2,\n    noTopBorder,\n    onExpand,\n    renderChildrenWhenClosed = false,\n    status = PanelStatus.normal,\n    statusMessage,\n    target = '_self',\n    testId,\n    time,\n    title,\n    titleHtmlMarkup = 'h2',\n    url,\n    variant = PanelVariant.fill,\n  } = props;\n\n  const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n  const titleId = useUuid();\n  const buttonTextId = useUuid();\n  const hasBadge = statusMessage && status === PanelStatus.new;\n  const noContentB = typeof contentB === 'undefined';\n  const layout1 = layout === 'layout1' || noContentB;\n  const layout2 = !noContentB && layout === 'layout2';\n  const layout3 = !noContentB && (layout === 'layout3a' || layout === 'layout3b' || layout === 'layout3c');\n  const panelWrapperClasses = classNames(panelStyles['panel-wrapper'], className);\n\n  const panelClasses = classNames(panelStyles.panel, {\n    [panelStyles['panel--fill']]: variant === PanelVariant.fill,\n    [panelStyles['panel--stroke']]: variant === PanelVariant.stroke,\n    [panelStyles['panel--white']]: variant === PanelVariant.white,\n    [panelStyles['panel--line']]: variant === PanelVariant.line,\n    [panelStyles['panel--no-top-border']]: variant === PanelVariant.line && noTopBorder,\n    [panelStyles['panel--selected']]: isExpanded,\n    [panelStyles['panel--new']]: status === PanelStatus.new,\n    [panelStyles['panel--draft']]: status === PanelStatus.draft,\n    [panelStyles['panel--error']]: status === PanelStatus.error,\n    [panelStyles['panel--status']]: status && status !== PanelStatus.normal,\n    [panelStyles['panel--with-icon']]: icon,\n    [panelStyles['panel--button']]: containerAsButton,\n    [panelStyles['panel--clickable']]: children || url || onExpand || buttonOnClick || containerAsButton,\n  });\n\n  const renderCTAContainer = () => {\n    const hasButton = children || url || buttonOnClick;\n    const btnContainerClasses = classNames(panelStyles['panel__btn-container'], {\n      [panelStyles['panel__btn-container--no-content-b']]: noContentB,\n      [panelStyles['panel__btn-container--no-button']]: !hasButton,\n    });\n\n    return (\n      (hasButton || date || time) && (\n        <div className={btnContainerClasses}>\n          {<DateTime date={date} time={time} />}\n          {hasButton && <div className={panelStyles['panel__details-btn']}>{renderDetailsButton()}</div>}\n        </div>\n      )\n    );\n  };\n\n  const renderDetailsButton = (): React.ReactNode => {\n    const ariaLabelAttributes = getAriaLabelAttributes({\n      label: buttonAriaLabel,\n      id: (buttonAriaLabelledById && `${buttonTextId} ${buttonAriaLabelledById}`) || (title && titleId && `${buttonTextId} ${titleId}`),\n      prefer: 'label',\n    });\n\n    const commonProps: Partial<ButtonProps> & AriaLabelAttributes = {\n      onClick: buttonOnClick ? buttonOnClick : (): void => setIsExpanded(!isExpanded),\n      className: containerAsButton ? panelStyles['panel__expand'] : undefined,\n      variant: 'borderless',\n      ellipsis: true,\n      ...ariaLabelAttributes,\n    };\n\n    if (children) {\n      return (\n        <Button testId=\"expand\" aria-expanded={isExpanded} {...commonProps}>\n          <span id={buttonTextId}>{isExpanded ? buttonTextClose : buttonText}</span>\n          <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} />\n        </Button>\n      );\n    }\n\n    return (\n      <Button testId=\"url\" htmlMarkup={buttonHtmlMarkup} href={url} target={target} {...commonProps}>\n        <span id={buttonTextId}>{buttonText}</span>\n        <Icon svgIcon={ArrowRight} />\n      </Button>\n    );\n  };\n\n  const renderContent = (): React.ReactNode | null => {\n    if (!children || (!renderChildrenWhenClosed && !isExpanded)) {\n      return null;\n    }\n\n    const panelDetailsClasses = classNames(panelStyles['panel-details'], {\n      [panelStyles['panel-details--open']]: isExpanded,\n      [panelStyles['panel-details--line']]: variant === PanelVariant.line,\n      [panelStyles['panel-details--white']]: variant === PanelVariant.white,\n    });\n\n    return (\n      <div className={panelDetailsClasses} data-testid=\"panel-details\">\n        <div>{children}</div>\n      </div>\n    );\n  };\n\n  const renderTitle = () => {\n    const titleContainerClasses = classNames(panelStyles['title-container'], {\n      [panelStyles['title-container--no-content-a']]: !contentA,\n    });\n    const titleClasses = classNames(panelStyles['title-container__title'], {\n      [panelStyles['title-container__title--badge']]: hasBadge,\n    });\n\n    return (\n      title && (\n        <div className={titleContainerClasses}>\n          <Title appearance=\"title3\" htmlMarkup={titleHtmlMarkup} id={titleId} className={titleClasses}>\n            {title}\n          </Title>\n          {hasBadge && (\n            <div className={panelStyles.panel__badge}>\n              <Badge color=\"blueberry\" testId=\"badge-status\">\n                {statusMessage}\n              </Badge>\n            </div>\n          )}\n        </div>\n      )\n    );\n  };\n\n  const layoutProps: LayoutProps = {\n    contentA: contentA,\n    contentB: contentB,\n    contentHeader: contentHeader,\n    ctaContainer: renderCTAContainer(),\n    icon: icon,\n    status: status,\n    statusMessage: statusMessage,\n    titleElement: renderTitle(),\n  };\n\n  return (\n    <div\n      // eslint-disable-next-line no-constant-condition\n      tabIndex={focusable ? -1 : undefined}\n      ref={ref}\n      data-testid={testId}\n      className={panelWrapperClasses}\n      data-analyticsid={AnalyticsId.Panel}\n    >\n      <div className={panelClasses}>\n        {layout1 && <PanelLayout1 {...layoutProps} />}\n        {layout2 && <PanelLayout2 {...layoutProps} />}\n        {layout3 && <PanelLayout3 {...layoutProps} layout={layout} />}\n      </div>\n      {renderContent()}\n    </div>\n  );\n});\n\nexport default Panel;\n"],"names":["PanelStatus","PanelVariant","PanelLayout","StatusText","status","statusMessage","statusIcon","palette","AlertSignFill","Pencil","statusMessageClass","classNames","panelStyles","Icon","IconSize","React","PreContainer","children","DateTime","date","time","Calendar","Watch","PanelLayout1","contentA","contentB","contentHeader","ctaContainer","icon","titleElement","panelLayoutClasses","iconClasses","PanelLayout2","lastColumnClass","PanelLayout3","layout","layoutClasses","Panel","props","ref","buttonAriaLabel","buttonAriaLabelledById","buttonText","buttonTextClose","buttonHtmlMarkup","buttonOnClick","className","containerAsButton","expanded","focusable","noTopBorder","onExpand","renderChildrenWhenClosed","target","testId","title","titleHtmlMarkup","url","variant","isExpanded","setIsExpanded","useExpand","titleId","useUuid","buttonTextId","hasBadge","noContentB","layout1","layout2","layout3","panelWrapperClasses","panelClasses","renderCTAContainer","hasButton","btnContainerClasses","renderDetailsButton","ariaLabelAttributes","getAriaLabelAttributes","commonProps","Button","ChevronUp","ChevronDown","ArrowRight","renderContent","panelDetailsClasses","renderTitle","titleContainerClasses","titleClasses","Title","Badge","layoutProps","AnalyticsId"],"mappings":"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"}

package/components/Panel/styles.module.scss

@@ -5,7 +5,7 @@
 @import '../../scss/font-settings';
 
 @mixin panel-padding {
-  padding: getSpacer(s) getSpacer(s) getSpacer(s) getSpacer(s);
+  padding: getSpacer(s);
 
   @media (min-width: map.get($grid-breakpoints, md)) {
     padding: getSpacer(l) getSpacer(m) getSpacer(l) getSpacer(l);
@@ -13,10 +13,10 @@
 }
 
 @mixin panel-padding-icon {
-  padding: getSpacer(m) getSpacer(s) getSpacer(l) getSpacer(s);
+  padding: getSpacer(m) getSpacer(s) getSpacer(l);
 
   @media (min-width: map.get($grid-breakpoints, md)) {
-    padding: getSpacer(m) getSpacer(m) getSpacer(l) getSpacer(m);
+    padding: getSpacer(m) getSpacer(m) getSpacer(l);
   }
 }
 

package/components/PanelList/PanelList.js

@@ -1,16 +1,16 @@
-import t from "react";
-import c from "classnames";
-import { AnalyticsId as p } from "../../constants.js";
+import a from "react";
+import p from "classnames";
+import { AnalyticsId as c } from "../../constants.js";
 import f, { PanelVariant as o } from "../Panel/Panel.js";
 import P from "../PanelList/styles.module.scss";
-const u = (a) => t.isValidElement(a) && a.type === f, y = t.forwardRef(function(s, l) {
-  const { testId: i, children: m, variant: n = o.fill } = s, d = (e, r) => t.cloneElement(e, {
+const u = (t) => a.isValidElement(t) && t.type === f, v = a.forwardRef(function(l, s) {
+  const { testId: i, children: m, variant: n = o.fill } = l, d = (e, r) => a.cloneElement(e, {
     variant: n,
     noTopBorder: n === o.line && !r,
-    className: c(e.props.className, n !== o.line && P["panel-list__panel"])
+    className: p(e.props.className, n !== o.line && P["panel-list__panel"])
   });
-  return /* @__PURE__ */ t.createElement("div", { ref: l, "data-testid": i, "data-analyticsid": p.PanelList }, t.Children.map(m, (e, r) => u(e) ? d(e, r === 0) : e));
-}), v = y;
+  return /* @__PURE__ */ a.createElement("div", { ref: s, "data-testid": i, "data-analyticsid": c.PanelList }, a.Children.map(m, (e, r) => u(e) ? d(e, r === 0) : e));
+});
 export {
   v as default
 };

package/components/PanelList/PanelList.js.map

@@ -1 +1 @@
-{"version":3,"file":"PanelList.js","sources":["../../../src/components/PanelList/PanelList.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport Panel, { PanelProps, PanelVariant } from '../Panel';\n\nimport styles from './styles.module.scss';\n\nexport interface PanelListProps {\n  /** Panels to render inside the PanelList */\n  children?: React.ReactNode;\n  /** Changes the visual representation of the panel. Default: fill */\n  variant?: keyof typeof PanelVariant;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst isPanelComponent = (element: {} | null | undefined): element is React.ReactElement<PanelProps> =>\n  React.isValidElement<PanelProps>(element) && (element as React.ReactElement).type === Panel;\n\nconst PanelList = React.forwardRef(function BadgeForwardedRef(props: PanelListProps, ref: React.ForwardedRef<HTMLDivElement>) {\n  const { testId, children, variant = PanelVariant.fill } = props;\n\n  const renderPanel = (panel: React.ReactElement<PanelProps>, firstChild: boolean) =>\n    React.cloneElement(panel, {\n      variant: variant,\n      noTopBorder: variant === PanelVariant.line && !firstChild,\n      className: classNames(panel.props.className, variant !== PanelVariant.line && styles['panel-list__panel']),\n    });\n\n  return (\n    <div ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.PanelList}>\n      {React.Children.map(children, (child, index) => (isPanelComponent(child) ? renderPanel(child, index === 0) : child))}\n    </div>\n  );\n});\n\nexport default PanelList;\n"],"names":["isPanelComponent","element","React","Panel","PanelList","props","ref","testId","children","variant","PanelVariant","renderPanel","panel","firstChild","classNames","styles","AnalyticsId","child","index","PanelList$1"],"mappings":";;;;;AAkBA,MAAMA,IAAmB,CAACC,MACxBC,EAAM,eAA2BD,CAAO,KAAMA,EAA+B,SAASE,GAElFC,IAAYF,EAAM,WAAW,SAA2BG,GAAuBC,GAAyC;AAC5H,QAAM,EAAE,QAAAC,GAAQ,UAAAC,GAAU,SAAAC,IAAUC,EAAa,KAAS,IAAAL,GAEpDM,IAAc,CAACC,GAAuCC,MAC1DX,EAAM,aAAaU,GAAO;AAAA,IACxB,SAAAH;AAAA,IACA,aAAaA,MAAYC,EAAa,QAAQ,CAACG;AAAA,IAC/C,WAAWC,EAAWF,EAAM,MAAM,WAAWH,MAAYC,EAAa,QAAQK,EAAO,mBAAmB,CAAC;AAAA,EAAA,CAC1G;AAGD,SAAAb,gBAAAA,EAAA,cAAC,OAAI,EAAA,KAAAI,GAAU,eAAaC,GAAQ,oBAAkBS,EAAY,UAAA,GAC/Dd,EAAM,SAAS,IAAIM,GAAU,CAACS,GAAOC,MAAWlB,EAAiBiB,CAAK,IAAIN,EAAYM,GAAOC,MAAU,CAAC,IAAID,CAAM,CACrH;AAEJ,CAAC,GAEDE,IAAef;"}
+{"version":3,"file":"PanelList.js","sources":["../../../src/components/PanelList/PanelList.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport Panel, { PanelProps, PanelVariant } from '../Panel';\n\nimport styles from './styles.module.scss';\n\nexport interface PanelListProps {\n  /** Panels to render inside the PanelList */\n  children?: React.ReactNode;\n  /** Changes the visual representation of the panel. Default: fill */\n  variant?: keyof typeof PanelVariant;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst isPanelComponent = (element: {} | null | undefined): element is React.ReactElement<PanelProps> =>\n  React.isValidElement<PanelProps>(element) && (element as React.ReactElement).type === Panel;\n\nconst PanelList = React.forwardRef(function BadgeForwardedRef(props: PanelListProps, ref: React.ForwardedRef<HTMLDivElement>) {\n  const { testId, children, variant = PanelVariant.fill } = props;\n\n  const renderPanel = (panel: React.ReactElement<PanelProps>, firstChild: boolean) =>\n    React.cloneElement(panel, {\n      variant: variant,\n      noTopBorder: variant === PanelVariant.line && !firstChild,\n      className: classNames(panel.props.className, variant !== PanelVariant.line && styles['panel-list__panel']),\n    });\n\n  return (\n    <div ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.PanelList}>\n      {React.Children.map(children, (child, index) => (isPanelComponent(child) ? renderPanel(child, index === 0) : child))}\n    </div>\n  );\n});\n\nexport default PanelList;\n"],"names":["isPanelComponent","element","React","Panel","PanelList","props","ref","testId","children","variant","PanelVariant","renderPanel","panel","firstChild","classNames","styles","AnalyticsId","child","index"],"mappings":";;;;;AAkBA,MAAMA,IAAmB,CAACC,MACxBC,EAAM,eAA2BD,CAAO,KAAMA,EAA+B,SAASE,GAElFC,IAAYF,EAAM,WAAW,SAA2BG,GAAuBC,GAAyC;AAC5H,QAAM,EAAE,QAAAC,GAAQ,UAAAC,GAAU,SAAAC,IAAUC,EAAa,KAAS,IAAAL,GAEpDM,IAAc,CAACC,GAAuCC,MAC1DX,EAAM,aAAaU,GAAO;AAAA,IACxB,SAAAH;AAAA,IACA,aAAaA,MAAYC,EAAa,QAAQ,CAACG;AAAA,IAC/C,WAAWC,EAAWF,EAAM,MAAM,WAAWH,MAAYC,EAAa,QAAQK,EAAO,mBAAmB,CAAC;AAAA,EAAA,CAC1G;AAGD,SAAAb,gBAAAA,EAAA,cAAC,OAAI,EAAA,KAAAI,GAAU,eAAaC,GAAQ,oBAAkBS,EAAY,UAAA,GAC/Dd,EAAM,SAAS,IAAIM,GAAU,CAACS,GAAOC,MAAWlB,EAAiBiB,CAAK,IAAIN,EAAYM,GAAOC,MAAU,CAAC,IAAID,CAAM,CACrH;AAEJ,CAAC;"}

package/components/PopMenu/PopMenu.js

@@ -1,6 +1,6 @@
-import e, { useRef as p, useState as G } from "react";
+import e, { useRef as m, useState as W } from "react";
 import u from "classnames";
-import { IconSize as m, AnalyticsId as W } from "../../constants.js";
+import { IconSize as p, AnalyticsId as $ } from "../../constants.js";
 import { useBreakpoint as j } from "../../hooks/useBreakpoint.js";
 import { useHover as q } from "../../hooks/useHover.js";
 import { useOutsideEvent as F } from "../../hooks/useOutsideEvent.js";
@@ -10,13 +10,13 @@ import { isComponent as y } from "../../utils/component.js";
 import { Icon as f } from "../Icon/Icon.js";
 import K from "../Icons/VerticalDots.js";
 import Q from "../Icons/X.js";
-import U from "../LazyIcon/LazyIcon.js";
-import h from "../LinkList/LinkList.js";
+import { LazyIcon as U } from "../LazyIcon/LazyIcon.js";
+import { LinkList as h } from "../LinkList/LinkList.js";
 import V from "../PopOver/PopOver.js";
 import l from "../PopMenu/styles.module.scss";
 var Y = /* @__PURE__ */ ((o) => (o.onWhite = "on-white", o.onGray = "on-gray", o.onBlueberry = "on-blueberry", o))(Y || {}), Z = /* @__PURE__ */ ((o) => (o.right = "right", o.left = "left", o))(Z || {});
-const ee = (o) => {
-  const d = p(null), v = p(null), B = p(null), b = p(null), [r, c] = G(!1), {
+const ge = (o) => {
+  const d = m(null), v = m(null), B = m(null), b = m(null), [r, c] = W(!1), {
     children: g,
     popOverClassName: O,
     popMenuClassName: N,
@@ -36,7 +36,7 @@ const ee = (o) => {
   F(b, () => {
     c(!1);
   });
-  const { isHovered: i } = q(d), k = T ? m.XSmall : m.Small, w = (t) => {
+  const { isHovered: i } = q(d), k = T ? p.XSmall : p.Small, w = (t) => {
     c(!1), t && t();
   }, x = () => {
     if (y(g, h))
@@ -55,7 +55,7 @@ const ee = (o) => {
             children: e.Children.map(
               t.props.children,
               (s) => y(s, h.Link) ? e.cloneElement(s, {
-                onClick: (D) => w(() => s.props.onClick && s.props.onClick(D))
+                onClick: (P) => w(() => s.props.onClick && s.props.onClick(P))
               }) : s
             )
           })
@@ -63,7 +63,7 @@ const ee = (o) => {
       );
   }, X = (t) => {
     t && t.stopPropagation(), c(!r);
-  }, A = n && typeof n == "string" ? /* @__PURE__ */ e.createElement(U, { iconName: n, size: m.XSmall, isHovered: i }) : n && /* @__PURE__ */ e.createElement(f, { svgIcon: n, size: m.XSmall, isHovered: i }), M = n ? A : /* @__PURE__ */ e.createElement(f, { svgIcon: n ?? K, color: E("black"), size: k, isHovered: i }), P = /* @__PURE__ */ e.createElement(f, { svgIcon: Q, color: E("black"), size: k, isHovered: i }), $ = /* @__PURE__ */ e.createElement(
+  }, A = n && typeof n == "string" ? /* @__PURE__ */ e.createElement(U, { iconName: n, size: p.XSmall, isHovered: i }) : n && /* @__PURE__ */ e.createElement(f, { svgIcon: n, size: p.XSmall, isHovered: i }), D = n ? A : /* @__PURE__ */ e.createElement(f, { svgIcon: n ?? K, color: E("black"), size: k, isHovered: i }), G = /* @__PURE__ */ e.createElement(f, { svgIcon: Q, color: E("black"), size: k, isHovered: i }), M = /* @__PURE__ */ e.createElement(
     "button",
     {
       ref: d,
@@ -75,15 +75,15 @@ const ee = (o) => {
       type: "button"
     },
     a && I == "left" && /* @__PURE__ */ e.createElement("span", null, a),
-    /* @__PURE__ */ e.createElement("div", { ref: v }, r ? P : M),
+    /* @__PURE__ */ e.createElement("div", { ref: v }, r ? G : D),
     a && I == "right" && /* @__PURE__ */ e.createElement("span", null, a)
   );
-  return /* @__PURE__ */ e.createElement("div", { ref: b, className: u(l["pop-menu-button"], N), "data-analyticsid": W.PopMenu }, $, r && x());
-}, Ce = ee;
+  return /* @__PURE__ */ e.createElement("div", { ref: b, className: u(l["pop-menu-button"], N), "data-analyticsid": $.PopMenu }, M, r && x());
+};
 export {
-  ee as PopMenu,
+  ge as PopMenu,
   Z as PopMenuLabelPosition,
   Y as PopMenuVariant,
-  Ce as default
+  ge as default
 };
 //# sourceMappingURL=PopMenu.js.map

package/components/PopMenu/PopMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopMenu.js","sources":["../../../src/components/PopMenu/PopMenu.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { useOutsideEvent } from '../../hooks/useOutsideEvent';\nimport { getColor } from '../../theme/currys';\nimport { breakpoints } from '../../theme/grid';\nimport { isComponent } from '../../utils/component';\nimport Icon, { SvgIcon } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\nimport VerticalDots from '../Icons/VerticalDots';\nimport X from '../Icons/X';\nimport LazyIcon from '../LazyIcon';\nimport LinkList, { LinkListProps, LinkProps } from '../LinkList';\nimport PopOver from '../PopOver';\n\nimport styles from './styles.module.scss';\n\nexport 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\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  /** 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<HTMLDivElement>(null);\n  const popOverRef = useRef<HTMLDivElement>(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    popMenuVariant = PopMenuVariant.onWhite,\n    openButtonAriaLabel,\n    closeButtonAriaLabel,\n    svgIcon,\n    labelText,\n    labelTextPosition = PopMenuLabelPosition.right,\n  } = props;\n  const buttonClasses = classNames(styles['pop-menu-button'], {\n    [styles[`pop-menu-button--${popMenuVariant}`]]: popMenuVariant,\n  });\n  const breakpoint = useBreakpoint();\n  const mobile = breakpoint < breakpoints.md;\n\n  useOutsideEvent(outerRef, () => {\n    setIsOpen(false);\n  });\n\n  const { isHovered: triggerButtonIsHovered } = useHover(triggerButtonRef);\n  const mobileIconSize = mobile ? IconSize.XSmall : IconSize.Small;\n\n  const handleClick = (cb?: () => void): void => {\n    setIsOpen(false);\n    cb && cb();\n  };\n\n  const renderChildren = () => {\n    if (isComponent<LinkListProps>(children, LinkList)) {\n      return (\n        <PopOver\n          testId={popOverTestId}\n          className={classNames(styles['pop-menu__pop-over'], popOverClassName)}\n          arrowClassName={styles['pop-menu__pop-over-arrow']}\n          controllerRef={iconRef}\n          popOverRef={popOverRef}\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 = (e?: React.MouseEvent<HTMLElement, MouseEvent>): void => {\n    e && e.stopPropagation();\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 svgIcon={svgIcon ?? VerticalDots} color={getColor('black')} size={mobileIconSize} isHovered={triggerButtonIsHovered} />\n  );\n\n  const closeIcon = <Icon svgIcon={X} color={getColor('black')} size={mobileIconSize} isHovered={triggerButtonIsHovered} />;\n\n  const triggerButton = (\n    <button\n      ref={triggerButtonRef}\n      data-testid={isOpen ? closeButtonTestId : openButtonTestId}\n      className={buttonClasses}\n      aria-label={isOpen ? closeButtonAriaLabel : openButtonAriaLabel}\n      aria-expanded={isOpen}\n      onClick={toggleOpenOnClick}\n      type=\"button\"\n    >\n      {labelText && labelTextPosition == PopMenuLabelPosition.left && <span>{labelText}</span>}\n      {<div ref={iconRef}>{isOpen ? closeIcon : openIcon}</div>}\n      {labelText && labelTextPosition == PopMenuLabelPosition.right && <span>{labelText}</span>}\n    </button>\n  );\n\n  return (\n    <div ref={outerRef} className={classNames(styles['pop-menu-button'], popMenuClassName)} data-analyticsid={AnalyticsId.PopMenu}>\n      {triggerButton}\n      {isOpen && renderChildren()}\n    </div>\n  );\n};\n\nexport default PopMenu;\n"],"names":["PopMenuVariant","PopMenuLabelPosition","PopMenu","props","triggerButtonRef","useRef","iconRef","popOverRef","outerRef","isOpen","setIsOpen","useState","children","popOverClassName","popMenuClassName","openButtonTestId","closeButtonTestId","popOverTestId","popMenuVariant","openButtonAriaLabel","closeButtonAriaLabel","svgIcon","labelText","labelTextPosition","buttonClasses","classNames","styles","mobile","useBreakpoint","breakpoints","useOutsideEvent","triggerButtonIsHovered","useHover","mobileIconSize","IconSize","handleClick","cb","renderChildren","isComponent","LinkList","React","PopOver","child","event","toggleOpenOnClick","e","iconComponent","LazyIcon","Icon","openIcon","VerticalDots","getColor","closeIcon","X","triggerButton","AnalyticsId","PopMenu$1"],"mappings":"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"}
+{"version":3,"file":"PopMenu.js","sources":["../../../src/components/PopMenu/PopMenu.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { useOutsideEvent } from '../../hooks/useOutsideEvent';\nimport { getColor } from '../../theme/currys';\nimport { breakpoints } from '../../theme/grid';\nimport { isComponent } from '../../utils/component';\nimport Icon, { SvgIcon } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\nimport VerticalDots from '../Icons/VerticalDots';\nimport X from '../Icons/X';\nimport LazyIcon from '../LazyIcon';\nimport LinkList, { LinkListProps, LinkProps } from '../LinkList';\nimport PopOver from '../PopOver';\n\nimport styles from './styles.module.scss';\n\nexport 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\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  /** 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<HTMLDivElement>(null);\n  const popOverRef = useRef<HTMLDivElement>(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    popMenuVariant = PopMenuVariant.onWhite,\n    openButtonAriaLabel,\n    closeButtonAriaLabel,\n    svgIcon,\n    labelText,\n    labelTextPosition = PopMenuLabelPosition.right,\n  } = props;\n  const buttonClasses = classNames(styles['pop-menu-button'], {\n    [styles[`pop-menu-button--${popMenuVariant}`]]: popMenuVariant,\n  });\n  const breakpoint = useBreakpoint();\n  const mobile = breakpoint < breakpoints.md;\n\n  useOutsideEvent(outerRef, () => {\n    setIsOpen(false);\n  });\n\n  const { isHovered: triggerButtonIsHovered } = useHover(triggerButtonRef);\n  const mobileIconSize = mobile ? IconSize.XSmall : IconSize.Small;\n\n  const handleClick = (cb?: () => void): void => {\n    setIsOpen(false);\n    cb && cb();\n  };\n\n  const renderChildren = () => {\n    if (isComponent<LinkListProps>(children, LinkList)) {\n      return (\n        <PopOver\n          testId={popOverTestId}\n          className={classNames(styles['pop-menu__pop-over'], popOverClassName)}\n          arrowClassName={styles['pop-menu__pop-over-arrow']}\n          controllerRef={iconRef}\n          popOverRef={popOverRef}\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 = (e?: React.MouseEvent<HTMLElement, MouseEvent>): void => {\n    e && e.stopPropagation();\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 svgIcon={svgIcon ?? VerticalDots} color={getColor('black')} size={mobileIconSize} isHovered={triggerButtonIsHovered} />\n  );\n\n  const closeIcon = <Icon svgIcon={X} color={getColor('black')} size={mobileIconSize} isHovered={triggerButtonIsHovered} />;\n\n  const triggerButton = (\n    <button\n      ref={triggerButtonRef}\n      data-testid={isOpen ? closeButtonTestId : openButtonTestId}\n      className={buttonClasses}\n      aria-label={isOpen ? closeButtonAriaLabel : openButtonAriaLabel}\n      aria-expanded={isOpen}\n      onClick={toggleOpenOnClick}\n      type=\"button\"\n    >\n      {labelText && labelTextPosition == PopMenuLabelPosition.left && <span>{labelText}</span>}\n      {<div ref={iconRef}>{isOpen ? closeIcon : openIcon}</div>}\n      {labelText && labelTextPosition == PopMenuLabelPosition.right && <span>{labelText}</span>}\n    </button>\n  );\n\n  return (\n    <div ref={outerRef} className={classNames(styles['pop-menu-button'], popMenuClassName)} data-analyticsid={AnalyticsId.PopMenu}>\n      {triggerButton}\n      {isOpen && renderChildren()}\n    </div>\n  );\n};\n\nexport default PopMenu;\n"],"names":["PopMenuVariant","PopMenuLabelPosition","PopMenu","props","triggerButtonRef","useRef","iconRef","popOverRef","outerRef","isOpen","setIsOpen","useState","children","popOverClassName","popMenuClassName","openButtonTestId","closeButtonTestId","popOverTestId","popMenuVariant","openButtonAriaLabel","closeButtonAriaLabel","svgIcon","labelText","labelTextPosition","buttonClasses","classNames","styles","mobile","useBreakpoint","breakpoints","useOutsideEvent","triggerButtonIsHovered","useHover","mobileIconSize","IconSize","handleClick","cb","renderChildren","isComponent","LinkList","React","PopOver","child","event","toggleOpenOnClick","e","iconComponent","LazyIcon","Icon","openIcon","VerticalDots","getColor","closeIcon","X","triggerButton","AnalyticsId"],"mappings":"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"}

package/components/PopMenu/index.js

@@ -1,7 +1,7 @@
-import e from "./PopMenu.js";
-import { PopMenu as r, PopMenuLabelPosition as t, PopMenuVariant as a } from "./PopMenu.js";
+import { PopMenu as e } from "./PopMenu.js";
+import { PopMenuLabelPosition as t, PopMenuVariant as a } from "./PopMenu.js";
 export {
-  r as PopMenu,
+  e as PopMenu,
   t as PopMenuLabelPosition,
   a as PopMenuVariant,
   e as default

package/components/PopOver/PopOver.js

@@ -1,57 +1,56 @@
-import r, { useRef as w, useState as A, useEffect as B } from "react";
+import r, { useRef as w, useState as h, useEffect as A } from "react";
 import y from "classnames";
-import { getVerticalPosition as F, getBubbleStyle as L, getArrowStyle as T } from "./utils.js";
-import { ZIndex as V, AnalyticsId as Z } from "../../constants.js";
-import { useInterval as $ } from "../../hooks/useInterval.js";
+import { getVerticalPosition as B, getBubbleStyle as F, getArrowStyle as L } from "./utils.js";
+import { ZIndex as T, AnalyticsId as V } from "../../constants.js";
+import { useInterval as Z } from "../../hooks/useInterval.js";
 import { useIsVisible as j } from "../../hooks/useIsVisible.js";
 import { useLayoutEvent as k } from "../../hooks/useLayoutEvent.js";
 import { useSize as q } from "../../hooks/useSize.js";
 import { mergeRefs as D } from "../../utils/refs.js";
 import t from "../PopOver/styles.module.scss";
-var G = /* @__PURE__ */ ((o) => (o.positionautomatic = "positionautomatic", o.positionbelow = "positionbelow", o.positionabove = "positionabove", o))(G || {});
-const S = r.forwardRef((o, _) => {
+var G = /* @__PURE__ */ ((e) => (e.positionautomatic = "positionautomatic", e.positionbelow = "positionbelow", e.positionabove = "positionabove", e))(G || {});
+const H = r.forwardRef((e, S) => {
   const {
-    id: R,
-    children: g,
+    id: _,
+    children: R,
     controllerRef: n,
-    popOverRef: z,
+    popOverRef: g,
     show: p = !1,
-    className: C = "",
+    className: z = "",
     variant: c = "positionautomatic",
     role: m,
-    testId: I,
-    arrowClassName: N,
-    zIndex: u = V.PopOver
-  } = o, f = z || w(null), E = w(null), s = q(f), [e, O] = A(), v = j(n, 0), l = () => {
+    testId: C,
+    arrowClassName: I,
+    zIndex: u = T.PopOver
+  } = e, f = g || w(null), N = w(null), s = q(f), [o, E] = h(), v = j(n, 0), l = () => {
     var d;
-    O((d = n.current) == null ? void 0 : d.getBoundingClientRect());
+    E((d = n.current) == null ? void 0 : d.getBoundingClientRect());
   };
-  $(l, 500), k(l, ["scroll", "resize"], 10), B(() => {
+  Z(l, 500), k(l, ["scroll", "resize"], 10), A(() => {
     l();
   }, []);
-  const b = m === "tooltip", P = y(t.popover, { [t["popover--visible"]]: b ? p : v }, C), i = e && s && F(e, s, c), x = y(t.popover__arrow, N, {
+  const b = m === "tooltip", O = y(t.popover, { [t["popover--visible"]]: b ? p : v }, z), i = o && s && B(o, s, c), P = y(t.popover__arrow, I, {
     [t["popover__arrow--over"]]: i === "positionbelow",
     [t["popover__arrow--under"]]: i === "positionabove",
     [t["popover__arrow--visible"]]: b ? p : v
-  }), a = e && s && L(e, s, c), h = a && e && i && T(a, e, i);
+  }), a = o && s && F(o, s, c), x = a && o && i && L(a, o, i);
   return /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(
     "div",
     {
-      id: R,
-      ref: D([_, f]),
-      className: P,
+      id: _,
+      ref: D([S, f]),
+      className: O,
       style: { ...a, zIndex: u },
-      "data-testid": I,
-      "data-analyticsid": Z.PopOver,
+      "data-testid": C,
+      "data-analyticsid": V.PopOver,
       role: m
     },
-    g
-  ), /* @__PURE__ */ r.createElement("div", { ref: E, className: x, style: { ...h, zIndex: u } }));
+    R
+  ), /* @__PURE__ */ r.createElement("div", { ref: N, className: P, style: { ...x, zIndex: u } }));
 });
-S.displayName = "PopOver";
-const eo = S;
+H.displayName = "PopOver";
 export {
   G as PopOverVariant,
-  eo as default
+  H as default
 };
 //# sourceMappingURL=PopOver.js.map

package/components/PopOver/PopOver.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopOver.js","sources":["../../../src/components/PopOver/PopOver.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { getArrowStyle, getBubbleStyle, getVerticalPosition } from './utils';\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport { useInterval } from '../../hooks/useInterval';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useLayoutEvent } from '../../hooks/useLayoutEvent';\nimport { useSize } from '../../hooks/useSize';\nimport { mergeRefs } from '../../utils/refs';\n\nimport styles from './styles.module.scss';\n\nexport enum PopOverVariant {\n  positionautomatic = 'positionautomatic',\n  positionbelow = 'positionbelow',\n  positionabove = 'positionabove',\n}\n\nexport type PopOverRole = 'tooltip';\n\nexport interface PopOverProps {\n  /** Id of the PopOver */\n  id?: string;\n  /** Content shown inside PopOver. Note that if role=\"tooltip\", you must not include interactive/focusable elements. */\n  children: React.ReactNode;\n  /** Ref for the element the PopOver is placed upon */\n  controllerRef: React.RefObject<HTMLElement | SVGSVGElement>;\n  /** Ref for the element the PopOver is placed upon */\n  popOverRef?: React.RefObject<HTMLDivElement>;\n  /** Show the popover. Only applies when role=tooltip. Default: false. */\n  show?: boolean;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds custom classes to the arrow element. */\n  arrowClassName?: string;\n  /** Determines the placement of the popover. Default: automatic positioning. */\n  variant?: keyof typeof PopOverVariant;\n  /** Sets role of the PopOver element */\n  role?: PopOverRole;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Overrides the default z-index of PopOver */\n  zIndex?: number;\n}\n\nconst PopOver = React.forwardRef<HTMLDivElement | SVGSVGElement, PopOverProps>((props, ref) => {\n  const {\n    id,\n    children,\n    controllerRef,\n    popOverRef,\n    show = false,\n    className = '',\n    variant = PopOverVariant.positionautomatic,\n    role,\n    testId,\n    arrowClassName,\n    zIndex = ZIndex.PopOver,\n  } = props;\n\n  const bubbleRef = popOverRef || useRef<HTMLDivElement>(null);\n  const arrowRef = useRef<HTMLDivElement>(null);\n  const bubbleSize = useSize(bubbleRef);\n  const [controllerSize, setControllerSize] = useState<DOMRect>();\n  const controllerisVisible = useIsVisible(controllerRef, 0);\n\n  const updateControllerSize = (): void => {\n    setControllerSize(controllerRef.current?.getBoundingClientRect());\n  };\n\n  useInterval(updateControllerSize, 500);\n  useLayoutEvent(updateControllerSize, ['scroll', 'resize'], 10);\n\n  useEffect(() => {\n    updateControllerSize();\n  }, []);\n\n  const isTooltip = role === 'tooltip';\n\n  const popOverClasses = classNames(styles.popover, { [styles['popover--visible']]: isTooltip ? show : controllerisVisible }, className);\n  const verticalPosition = controllerSize && bubbleSize && getVerticalPosition(controllerSize, bubbleSize, variant);\n  const arrowClasses = classNames(styles.popover__arrow, arrowClassName, {\n    [styles['popover__arrow--over']]: verticalPosition === PopOverVariant.positionbelow,\n    [styles['popover__arrow--under']]: verticalPosition === PopOverVariant.positionabove,\n    [styles['popover__arrow--visible']]: isTooltip ? show : controllerisVisible,\n  });\n\n  const bubbleStyle = controllerSize && bubbleSize && getBubbleStyle(controllerSize, bubbleSize, variant);\n  const arrowStyle = bubbleStyle && controllerSize && verticalPosition && getArrowStyle(bubbleStyle, controllerSize, verticalPosition);\n\n  return (\n    <>\n      <div\n        id={id}\n        ref={mergeRefs([ref, bubbleRef])}\n        className={popOverClasses}\n        style={{ ...bubbleStyle, zIndex }}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.PopOver}\n        role={role}\n      >\n        {children}\n      </div>\n      <div ref={arrowRef} className={arrowClasses} style={{ ...arrowStyle, zIndex }} />\n    </>\n  );\n});\n\nPopOver.displayName = 'PopOver';\n\nexport default PopOver;\n"],"names":["PopOverVariant","PopOver","React","props","ref","id","children","controllerRef","popOverRef","show","className","variant","role","testId","arrowClassName","zIndex","ZIndex","bubbleRef","useRef","arrowRef","bubbleSize","useSize","controllerSize","setControllerSize","useState","controllerisVisible","useIsVisible","updateControllerSize","_a","useInterval","useLayoutEvent","useEffect","isTooltip","popOverClasses","classNames","styles","verticalPosition","getVerticalPosition","arrowClasses","bubbleStyle","getBubbleStyle","arrowStyle","getArrowStyle","mergeRefs","AnalyticsId","PopOver$1"],"mappings":";;;;;;;;;;AAcY,IAAAA,sBAAAA,OACVA,EAAA,oBAAoB,qBACpBA,EAAA,gBAAgB,iBAChBA,EAAA,gBAAgB,iBAHNA,IAAAA,KAAA,CAAA,CAAA;AAiCZ,MAAMC,IAAUC,EAAM,WAAyD,CAACC,GAAOC,MAAQ;AACvF,QAAA;AAAA,IACJ,IAAAC;AAAA,IACA,UAAAC;AAAA,IACA,eAAAC;AAAA,IACA,YAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,WAAAC,IAAY;AAAA,IACZ,SAAAC,IAAU;AAAA,IACV,MAAAC;AAAA,IACA,QAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,QAAAC,IAASC,EAAO;AAAA,EACd,IAAAb,GAEEc,IAAYT,KAAcU,EAAuB,IAAI,GACrDC,IAAWD,EAAuB,IAAI,GACtCE,IAAaC,EAAQJ,CAAS,GAC9B,CAACK,GAAgBC,CAAiB,IAAIC,EAAkB,GACxDC,IAAsBC,EAAanB,GAAe,CAAC,GAEnDoB,IAAuB,MAAY;;AACrB,IAAAJ,GAAAK,IAAArB,EAAc,YAAd,gBAAAqB,EAAuB,uBAAuB;AAAA,EAAA;AAGlE,EAAAC,EAAYF,GAAsB,GAAG,GACrCG,EAAeH,GAAsB,CAAC,UAAU,QAAQ,GAAG,EAAE,GAE7DI,EAAU,MAAM;AACO,IAAAJ;EACvB,GAAG,CAAE,CAAA;AAEL,QAAMK,IAAYpB,MAAS,WAErBqB,IAAiBC,EAAWC,EAAO,SAAS,EAAE,CAACA,EAAO,kBAAkB,CAAC,GAAGH,IAAYvB,IAAOgB,KAAuBf,CAAS,GAC/H0B,IAAmBd,KAAkBF,KAAciB,EAAoBf,GAAgBF,GAAYT,CAAO,GAC1G2B,IAAeJ,EAAWC,EAAO,gBAAgBrB,GAAgB;AAAA,IACrE,CAACqB,EAAO,sBAAsB,CAAC,GAAGC,MAAqB;AAAA,IACvD,CAACD,EAAO,uBAAuB,CAAC,GAAGC,MAAqB;AAAA,IACxD,CAACD,EAAO,yBAAyB,CAAC,GAAGH,IAAYvB,IAAOgB;AAAA,EAAA,CACzD,GAEKc,IAAcjB,KAAkBF,KAAcoB,EAAelB,GAAgBF,GAAYT,CAAO,GAChG8B,IAAaF,KAAejB,KAAkBc,KAAoBM,EAAcH,GAAajB,GAAgBc,CAAgB;AAEnI,SAEIlC,gBAAAA,EAAA,cAAAA,EAAA,UAAA,MAAAA,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAAG;AAAA,MACA,KAAKsC,EAAU,CAACvC,GAAKa,CAAS,CAAC;AAAA,MAC/B,WAAWgB;AAAA,MACX,OAAO,EAAE,GAAGM,GAAa,QAAAxB,EAAO;AAAA,MAChC,eAAaF;AAAA,MACb,oBAAkB+B,EAAY;AAAA,MAC9B,MAAAhC;AAAA,IAAA;AAAA,IAECN;AAAA,EAEH,GAAAJ,gBAAAA,EAAA,cAAC,OAAI,EAAA,KAAKiB,GAAU,WAAWmB,GAAc,OAAO,EAAE,GAAGG,GAAY,QAAA1B,KAAU,CACjF;AAEJ,CAAC;AAEDd,EAAQ,cAAc;AAEtB,MAAA4C,KAAe5C;"}
+{"version":3,"file":"PopOver.js","sources":["../../../src/components/PopOver/PopOver.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { getArrowStyle, getBubbleStyle, getVerticalPosition } from './utils';\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport { useInterval } from '../../hooks/useInterval';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useLayoutEvent } from '../../hooks/useLayoutEvent';\nimport { useSize } from '../../hooks/useSize';\nimport { mergeRefs } from '../../utils/refs';\n\nimport styles from './styles.module.scss';\n\nexport enum PopOverVariant {\n  positionautomatic = 'positionautomatic',\n  positionbelow = 'positionbelow',\n  positionabove = 'positionabove',\n}\n\nexport type PopOverRole = 'tooltip';\n\nexport interface PopOverProps {\n  /** Id of the PopOver */\n  id?: string;\n  /** Content shown inside PopOver. Note that if role=\"tooltip\", you must not include interactive/focusable elements. */\n  children: React.ReactNode;\n  /** Ref for the element the PopOver is placed upon */\n  controllerRef: React.RefObject<HTMLElement | SVGSVGElement>;\n  /** Ref for the element the PopOver is placed upon */\n  popOverRef?: React.RefObject<HTMLDivElement>;\n  /** Show the popover. Only applies when role=tooltip. Default: false. */\n  show?: boolean;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds custom classes to the arrow element. */\n  arrowClassName?: string;\n  /** Determines the placement of the popover. Default: automatic positioning. */\n  variant?: keyof typeof PopOverVariant;\n  /** Sets role of the PopOver element */\n  role?: PopOverRole;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Overrides the default z-index of PopOver */\n  zIndex?: number;\n}\n\nconst PopOver = React.forwardRef<HTMLDivElement | SVGSVGElement, PopOverProps>((props, ref) => {\n  const {\n    id,\n    children,\n    controllerRef,\n    popOverRef,\n    show = false,\n    className = '',\n    variant = PopOverVariant.positionautomatic,\n    role,\n    testId,\n    arrowClassName,\n    zIndex = ZIndex.PopOver,\n  } = props;\n\n  const bubbleRef = popOverRef || useRef<HTMLDivElement>(null);\n  const arrowRef = useRef<HTMLDivElement>(null);\n  const bubbleSize = useSize(bubbleRef);\n  const [controllerSize, setControllerSize] = useState<DOMRect>();\n  const controllerisVisible = useIsVisible(controllerRef, 0);\n\n  const updateControllerSize = (): void => {\n    setControllerSize(controllerRef.current?.getBoundingClientRect());\n  };\n\n  useInterval(updateControllerSize, 500);\n  useLayoutEvent(updateControllerSize, ['scroll', 'resize'], 10);\n\n  useEffect(() => {\n    updateControllerSize();\n  }, []);\n\n  const isTooltip = role === 'tooltip';\n\n  const popOverClasses = classNames(styles.popover, { [styles['popover--visible']]: isTooltip ? show : controllerisVisible }, className);\n  const verticalPosition = controllerSize && bubbleSize && getVerticalPosition(controllerSize, bubbleSize, variant);\n  const arrowClasses = classNames(styles.popover__arrow, arrowClassName, {\n    [styles['popover__arrow--over']]: verticalPosition === PopOverVariant.positionbelow,\n    [styles['popover__arrow--under']]: verticalPosition === PopOverVariant.positionabove,\n    [styles['popover__arrow--visible']]: isTooltip ? show : controllerisVisible,\n  });\n\n  const bubbleStyle = controllerSize && bubbleSize && getBubbleStyle(controllerSize, bubbleSize, variant);\n  const arrowStyle = bubbleStyle && controllerSize && verticalPosition && getArrowStyle(bubbleStyle, controllerSize, verticalPosition);\n\n  return (\n    <>\n      <div\n        id={id}\n        ref={mergeRefs([ref, bubbleRef])}\n        className={popOverClasses}\n        style={{ ...bubbleStyle, zIndex }}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.PopOver}\n        role={role}\n      >\n        {children}\n      </div>\n      <div ref={arrowRef} className={arrowClasses} style={{ ...arrowStyle, zIndex }} />\n    </>\n  );\n});\n\nPopOver.displayName = 'PopOver';\n\nexport default PopOver;\n"],"names":["PopOverVariant","PopOver","React","props","ref","id","children","controllerRef","popOverRef","show","className","variant","role","testId","arrowClassName","zIndex","ZIndex","bubbleRef","useRef","arrowRef","bubbleSize","useSize","controllerSize","setControllerSize","useState","controllerisVisible","useIsVisible","updateControllerSize","_a","useInterval","useLayoutEvent","useEffect","isTooltip","popOverClasses","classNames","styles","verticalPosition","getVerticalPosition","arrowClasses","bubbleStyle","getBubbleStyle","arrowStyle","getArrowStyle","mergeRefs","AnalyticsId"],"mappings":";;;;;;;;;;AAcY,IAAAA,sBAAAA,OACVA,EAAA,oBAAoB,qBACpBA,EAAA,gBAAgB,iBAChBA,EAAA,gBAAgB,iBAHNA,IAAAA,KAAA,CAAA,CAAA;AAiCZ,MAAMC,IAAUC,EAAM,WAAyD,CAACC,GAAOC,MAAQ;AACvF,QAAA;AAAA,IACJ,IAAAC;AAAA,IACA,UAAAC;AAAA,IACA,eAAAC;AAAA,IACA,YAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,WAAAC,IAAY;AAAA,IACZ,SAAAC,IAAU;AAAA,IACV,MAAAC;AAAA,IACA,QAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,QAAAC,IAASC,EAAO;AAAA,EACd,IAAAb,GAEEc,IAAYT,KAAcU,EAAuB,IAAI,GACrDC,IAAWD,EAAuB,IAAI,GACtCE,IAAaC,EAAQJ,CAAS,GAC9B,CAACK,GAAgBC,CAAiB,IAAIC,EAAkB,GACxDC,IAAsBC,EAAanB,GAAe,CAAC,GAEnDoB,IAAuB,MAAY;;AACrB,IAAAJ,GAAAK,IAAArB,EAAc,YAAd,gBAAAqB,EAAuB,uBAAuB;AAAA,EAAA;AAGlE,EAAAC,EAAYF,GAAsB,GAAG,GACrCG,EAAeH,GAAsB,CAAC,UAAU,QAAQ,GAAG,EAAE,GAE7DI,EAAU,MAAM;AACO,IAAAJ;EACvB,GAAG,CAAE,CAAA;AAEL,QAAMK,IAAYpB,MAAS,WAErBqB,IAAiBC,EAAWC,EAAO,SAAS,EAAE,CAACA,EAAO,kBAAkB,CAAC,GAAGH,IAAYvB,IAAOgB,KAAuBf,CAAS,GAC/H0B,IAAmBd,KAAkBF,KAAciB,EAAoBf,GAAgBF,GAAYT,CAAO,GAC1G2B,IAAeJ,EAAWC,EAAO,gBAAgBrB,GAAgB;AAAA,IACrE,CAACqB,EAAO,sBAAsB,CAAC,GAAGC,MAAqB;AAAA,IACvD,CAACD,EAAO,uBAAuB,CAAC,GAAGC,MAAqB;AAAA,IACxD,CAACD,EAAO,yBAAyB,CAAC,GAAGH,IAAYvB,IAAOgB;AAAA,EAAA,CACzD,GAEKc,IAAcjB,KAAkBF,KAAcoB,EAAelB,GAAgBF,GAAYT,CAAO,GAChG8B,IAAaF,KAAejB,KAAkBc,KAAoBM,EAAcH,GAAajB,GAAgBc,CAAgB;AAEnI,SAEIlC,gBAAAA,EAAA,cAAAA,EAAA,UAAA,MAAAA,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAAG;AAAA,MACA,KAAKsC,EAAU,CAACvC,GAAKa,CAAS,CAAC;AAAA,MAC/B,WAAWgB;AAAA,MACX,OAAO,EAAE,GAAGM,GAAa,QAAAxB,EAAO;AAAA,MAChC,eAAaF;AAAA,MACb,oBAAkB+B,EAAY;AAAA,MAC9B,MAAAhC;AAAA,IAAA;AAAA,IAECN;AAAA,EAEH,GAAAJ,gBAAAA,EAAA,cAAC,OAAI,EAAA,KAAKiB,GAAU,WAAWmB,GAAc,OAAO,EAAE,GAAGG,GAAY,QAAA1B,KAAU,CACjF;AAEJ,CAAC;AAEDd,EAAQ,cAAc;"}

package/components/Portal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Portal/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport { createPortal } from 'react-dom';\n\nimport { AnalyticsId } from '../../constants';\n\nexport interface PortalProps {\n  /** Add custom class to portal, default class is portal-container */\n  className?: string;\n  /** Content to be displayed in Portal */\n  children?: React.ReactNode;\n  /** Default is document.body */\n  parent?: HTMLElement;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport default function Portal({ children, parent, className, testId }: PortalProps): React.ReactPortal {\n  // Create div to contain everything\n  const el = React.useMemo(() => document.createElement('div'), []);\n  el.setAttribute('data-analyticsid', AnalyticsId.Portal);\n  if (testId) {\n    el.setAttribute('data-testid', testId);\n  }\n  // On mount function\n  React.useEffect(() => {\n    // work out target in the DOM based on parent prop\n    const target = parent && !!parent.appendChild ? parent : document.body;\n    // Default classes\n    const classList = ['portal-container'];\n    // If className prop is present add each class the classList\n    if (className) className.split(' ').forEach(item => classList.push(item));\n    classList.forEach(item => el.classList.add(item));\n\n    target.appendChild(el);\n    // On unmount function\n    return (): void => {\n      // Remove element from dom\n      target.removeChild(el);\n    };\n  }, [el, parent, className]);\n\n  return createPortal(children, el);\n}\n"],"names":["Portal","children","parent","className","testId","el","React","AnalyticsId","target","classList","item","createPortal"],"mappings":";;;AAiBA,SAAwBA,EAAO,EAAE,UAAAC,GAAU,QAAAC,GAAQ,WAAAC,GAAW,QAAAC,KAA0C;AAEhG,QAAAC,IAAKC,EAAM,QAAQ,MAAM,SAAS,cAAc,KAAK,GAAG,CAAA,CAAE;AAC7D,SAAAD,EAAA,aAAa,oBAAoBE,EAAY,MAAM,GAClDH,KACCC,EAAA,aAAa,eAAeD,CAAM,GAGvCE,EAAM,UAAU,MAAM;AAEpB,UAAME,IAASN,KAAYA,EAAO,cAAcA,IAAS,SAAS,MAE5DO,IAAY,CAAC,kBAAkB;AAEjC,WAAAN,KAAqBA,EAAA,MAAM,GAAG,EAAE,QAAQ,OAAQM,EAAU,KAAKC,CAAI,CAAC,GACxED,EAAU,QAAQ,CAAQC,MAAAL,EAAG,UAAU,IAAIK,CAAI,CAAC,GAEhDF,EAAO,YAAYH,CAAE,GAEd,MAAY;AAEjB,MAAAG,EAAO,YAAYH,CAAE;AAAA,IAAA;AAAA,EAEtB,GAAA,CAACA,GAAIH,GAAQC,CAAS,CAAC,GAEnBQ,EAAaV,GAAUI,CAAE;AAClC;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Portal/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport { createPortal } from 'react-dom';\n\nimport { AnalyticsId } from '../../constants';\n\nexport interface PortalProps {\n  /** Add custom class to portal, default class is portal-container */\n  className?: string;\n  /** Content to be displayed in Portal */\n  children?: React.ReactNode;\n  /** Default is document.body */\n  parent?: HTMLElement;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport default function Portal({ children, parent, className, testId }: PortalProps): React.ReactPortal {\n  // Create div to contain everything\n  const el = React.useMemo(() => document.createElement('div'), []);\n  el.setAttribute('data-analyticsid', AnalyticsId.Portal);\n  if (testId) {\n    el.setAttribute('data-testid', testId);\n  }\n  // On mount function\n  React.useEffect(() => {\n    // work out target in the DOM based on parent prop\n    const target = parent && !!parent.appendChild ? parent : document.body;\n    // Default classes\n    const classList = ['portal-container'];\n    // If className prop is present add each class the classList\n    if (className) className.split(' ').forEach(item => classList.push(item));\n    classList.forEach(item => el.classList.add(item));\n\n    target.appendChild(el);\n    // On unmount function\n    return (): void => {\n      // Remove element from dom\n      target.removeChild(el);\n    };\n  }, [el, parent, className]);\n\n  return createPortal(children, el);\n}\n"],"names":["Portal","children","parent","className","testId","el","React","AnalyticsId","target","classList","item","createPortal"],"mappings":";;;AAiBA,SAAwBA,EAAO,EAAE,UAAAC,GAAU,QAAAC,GAAQ,WAAAC,GAAW,QAAAC,KAA0C;AAEhG,QAAAC,IAAKC,EAAM,QAAQ,MAAM,SAAS,cAAc,KAAK,GAAG,CAAA,CAAE;AAC7D,SAAAD,EAAA,aAAa,oBAAoBE,EAAY,MAAM,GAClDH,KACCC,EAAA,aAAa,eAAeD,CAAM,GAGvCE,EAAM,UAAU,MAAM;AAEpB,UAAME,IAASN,KAAYA,EAAO,cAAcA,IAAS,SAAS,MAE5DO,IAAY,CAAC,kBAAkB;AAEjC,WAAAN,KAAqBA,EAAA,MAAM,GAAG,EAAE,QAAQ,CAAQO,MAAAD,EAAU,KAAKC,CAAI,CAAC,GACxED,EAAU,QAAQ,CAAQC,MAAAL,EAAG,UAAU,IAAIK,CAAI,CAAC,GAEhDF,EAAO,YAAYH,CAAE,GAEd,MAAY;AAEjB,MAAAG,EAAO,YAAYH,CAAE;AAAA,IAAA;AAAA,EAEtB,GAAA,CAACA,GAAIH,GAAQC,CAAS,CAAC,GAEnBQ,EAAaV,GAAUI,CAAE;AAClC;"}

package/components/Progressbar/Progressbar.js

@@ -1,26 +1,26 @@
 import a, { useRef as _, useEffect as v } from "react";
-import $ from "classnames";
-import { ZIndex as N } from "../../constants.js";
+import N from "classnames";
+import { ZIndex as $ } from "../../constants.js";
 import { palette as o } from "../../theme/palette.js";
 import s from "../Progressbar/styles.module.scss";
 var B = /* @__PURE__ */ ((e) => (e.small = "small", e.medium = "medium", e.large = "large", e))(B || {}), C = /* @__PURE__ */ ((e) => (e.ondark = "ondark", e.onlight = "onlight", e))(C || {}), R = /* @__PURE__ */ ((e) => (e.screen = "screen", e.parent = "parent", e))(R || {});
-const I = ({
+const W = ({
   value: e,
-  size: c = "large",
-  mode: i = "onlight",
+  size: i = "large",
+  mode: c = "onlight",
   overlay: t,
   testId: b,
   ariaLabel: w
 }) => {
-  t && (i = "ondark"), e = Math.max(0, Math.min(e, 100));
+  t && (c = "ondark"), e = Math.max(0, Math.min(e, 100));
   let n;
-  c === "large" ? n = 96 : c === "medium" ? n = 50 : n = 44;
-  const m = n / 2, p = 8, f = m - p / 2, l = m * 2, r = m, k = i === "onlight" ? o.blueberry100 : o.neutral700, h = i === "onlight" ? o.blueberry600 : o.white, g = 2 * Math.PI * f, y = g - e / 100 * g, d = _(null);
+  i === "large" ? n = 96 : i === "medium" ? n = 50 : n = 44;
+  const m = n / 2, p = 8, f = m - p / 2, l = m * 2, r = m, k = c === "onlight" ? o.blueberry100 : o.neutral700, h = c === "onlight" ? o.blueberry600 : o.white, g = 2 * Math.PI * f, y = g - e / 100 * g, d = _(null);
   v(() => {
     var u, x;
     t === "parent" && ((x = (u = d.current) == null ? void 0 : u.parentElement) != null && x.style) && (d.current.parentElement.style.position = "relative");
   }, []);
-  const E = $({
+  const E = N({
     [s["progressbar--overlay"]]: t,
     [s["progressbar--overlay-screen"]]: t === "screen",
     [s["progressbar--overlay-parent"]]: t === "parent"
@@ -36,7 +36,7 @@ const I = ({
       "aria-valuenow": e,
       "aria-label": w,
       "aria-live": "polite",
-      style: t === "screen" ? { zIndex: N.OverlayScreen } : {}
+      style: t === "screen" ? { zIndex: $.OverlayScreen } : {}
     },
     /* @__PURE__ */ a.createElement(
       "svg",
@@ -75,15 +75,15 @@ const I = ({
           textAnchor: "middle",
           alignmentBaseline: "middle"
         },
-        c == "large" && `${e}%`
+        i == "large" && `${e}%`
       )
     )
   );
-}, Z = I;
+};
 export {
   R as Overlay,
   C as ProgressBarMode,
   B as ProgressbarSize,
-  Z as default
+  W as default
 };
 //# sourceMappingURL=Progressbar.js.map

package/components/Progressbar/Progressbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Progressbar.js","sources":["../../../src/components/Progressbar/Progressbar.tsx"],"sourcesContent":["import React, { useRef, useEffect } from 'react';\n\nimport classNames from 'classnames';\n\nimport { ZIndex } from '../../constants';\nimport { palette } from '../../theme/palette';\n\nimport styles from './styles.module.scss';\n\nexport enum ProgressbarSize {\n  small = 'small',\n  medium = 'medium',\n  large = 'large',\n}\n\nexport enum ProgressBarMode {\n  ondark = 'ondark',\n  onlight = 'onlight',\n}\n\nexport enum Overlay {\n  screen = 'screen',\n  parent = 'parent',\n}\nexport interface ProgressbarProps {\n  /** The value of the progressbar given in percent. Value between 0 and 100 */\n  value: number;\n  /** Size of the progressbar. Default is large */\n  size?: ProgressbarSize;\n  /** Changes the visuals of the ProgressBar. Default is onLight */\n  mode?: ProgressBarMode;\n  /** Loader is displayed with grey background covering the entire screen */\n  overlay?: keyof typeof Overlay;\n  /** Aria label for the progressbar */\n  ariaLabel?: string;\n  /** Sets the data-testid attribute */\n  testId?: string;\n}\n\nconst Progressbar: React.FC<ProgressbarProps> = ({\n  value,\n  size = ProgressbarSize.large,\n  mode = ProgressBarMode.onlight,\n  overlay,\n  testId,\n  ariaLabel,\n}: ProgressbarProps) => {\n  if (overlay) {\n    mode = ProgressBarMode.ondark;\n  }\n  // Restrict value to be between 0 and 100\n  value = Math.max(0, Math.min(value, 100));\n\n  let width;\n  if (size === ProgressbarSize.large) {\n    width = 96;\n  } else if (size === ProgressbarSize.medium) {\n    width = 50;\n  } else {\n    width = 44;\n  }\n\n  const totalRadius = width / 2;\n  const strokeWidth = 8;\n  const radius = totalRadius - strokeWidth / 2;\n  const viewBoxSize = totalRadius * 2;\n  const viewBoxCenter = totalRadius;\n  const circleBackgroundColor = mode === ProgressBarMode.onlight ? palette.blueberry100 : palette.neutral700;\n  const mainColor = mode === ProgressBarMode.onlight ? palette.blueberry600 : palette.white;\n  const circumference = 2 * Math.PI * radius;\n  const strokeDashoffset = circumference - (value / 100) * circumference;\n\n  const wrapperRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (overlay === Overlay.parent && wrapperRef.current?.parentElement?.style) {\n      wrapperRef.current.parentElement.style.position = 'relative';\n    }\n  }, []);\n\n  const wrapperClasses = classNames({\n    [styles['progressbar--overlay']]: overlay,\n    [styles['progressbar--overlay-screen']]: overlay === Overlay.screen,\n    [styles['progressbar--overlay-parent']]: overlay === Overlay.parent,\n  });\n\n  return (\n    <div\n      ref={wrapperRef}\n      className={wrapperClasses}\n      data-testid={testId}\n      role=\"progressbar\"\n      aria-valuenow={value}\n      aria-label={ariaLabel}\n      aria-live=\"polite\"\n      style={overlay === Overlay.screen ? { zIndex: ZIndex.OverlayScreen } : {}}\n    >\n      <svg\n        role=\"presentation\"\n        width={viewBoxSize}\n        height={viewBoxSize}\n        viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`}\n        className={styles['progressbar__svg']}\n      >\n        <circle cx={viewBoxCenter} cy={viewBoxCenter} r={radius} stroke={circleBackgroundColor} strokeWidth={strokeWidth} fill=\"none\" />\n        <circle\n          cx={viewBoxCenter}\n          cy={viewBoxCenter}\n          r={radius}\n          stroke={mainColor}\n          strokeWidth={strokeWidth}\n          fill=\"none\"\n          strokeDasharray={circumference}\n          strokeDashoffset={strokeDashoffset}\n          className={styles['progressbar__progress-circle']}\n          transform={`rotate(-90 ${viewBoxCenter} ${viewBoxCenter})`}\n        />{' '}\n        <text\n          className=\"progress-wheel__text--large\"\n          fontSize={'1.5rem'}\n          fill={mainColor}\n          x={viewBoxCenter}\n          y={viewBoxCenter}\n          textAnchor=\"middle\"\n          alignmentBaseline=\"middle\"\n        >\n          {size == ProgressbarSize.large && `${value}%`}\n        </text>\n      </svg>\n    </div>\n  );\n};\n\nexport default Progressbar;\n"],"names":["ProgressbarSize","ProgressBarMode","Overlay","Progressbar","value","size","mode","overlay","testId","ariaLabel","width","totalRadius","strokeWidth","radius","viewBoxSize","viewBoxCenter","circleBackgroundColor","palette","mainColor","circumference","strokeDashoffset","wrapperRef","useRef","useEffect","_b","_a","wrapperClasses","classNames","styles","React","ZIndex","Progressbar$1"],"mappings":"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"}
+{"version":3,"file":"Progressbar.js","sources":["../../../src/components/Progressbar/Progressbar.tsx"],"sourcesContent":["import React, { useRef, useEffect } from 'react';\n\nimport classNames from 'classnames';\n\nimport { ZIndex } from '../../constants';\nimport { palette } from '../../theme/palette';\n\nimport styles from './styles.module.scss';\n\nexport enum ProgressbarSize {\n  small = 'small',\n  medium = 'medium',\n  large = 'large',\n}\n\nexport enum ProgressBarMode {\n  ondark = 'ondark',\n  onlight = 'onlight',\n}\n\nexport enum Overlay {\n  screen = 'screen',\n  parent = 'parent',\n}\nexport interface ProgressbarProps {\n  /** The value of the progressbar given in percent. Value between 0 and 100 */\n  value: number;\n  /** Size of the progressbar. Default is large */\n  size?: ProgressbarSize;\n  /** Changes the visuals of the ProgressBar. Default is onLight */\n  mode?: ProgressBarMode;\n  /** Loader is displayed with grey background covering the entire screen */\n  overlay?: keyof typeof Overlay;\n  /** Aria label for the progressbar */\n  ariaLabel?: string;\n  /** Sets the data-testid attribute */\n  testId?: string;\n}\n\nconst Progressbar: React.FC<ProgressbarProps> = ({\n  value,\n  size = ProgressbarSize.large,\n  mode = ProgressBarMode.onlight,\n  overlay,\n  testId,\n  ariaLabel,\n}: ProgressbarProps) => {\n  if (overlay) {\n    mode = ProgressBarMode.ondark;\n  }\n  // Restrict value to be between 0 and 100\n  value = Math.max(0, Math.min(value, 100));\n\n  let width;\n  if (size === ProgressbarSize.large) {\n    width = 96;\n  } else if (size === ProgressbarSize.medium) {\n    width = 50;\n  } else {\n    width = 44;\n  }\n\n  const totalRadius = width / 2;\n  const strokeWidth = 8;\n  const radius = totalRadius - strokeWidth / 2;\n  const viewBoxSize = totalRadius * 2;\n  const viewBoxCenter = totalRadius;\n  const circleBackgroundColor = mode === ProgressBarMode.onlight ? palette.blueberry100 : palette.neutral700;\n  const mainColor = mode === ProgressBarMode.onlight ? palette.blueberry600 : palette.white;\n  const circumference = 2 * Math.PI * radius;\n  const strokeDashoffset = circumference - (value / 100) * circumference;\n\n  const wrapperRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (overlay === Overlay.parent && wrapperRef.current?.parentElement?.style) {\n      wrapperRef.current.parentElement.style.position = 'relative';\n    }\n  }, []);\n\n  const wrapperClasses = classNames({\n    [styles['progressbar--overlay']]: overlay,\n    [styles['progressbar--overlay-screen']]: overlay === Overlay.screen,\n    [styles['progressbar--overlay-parent']]: overlay === Overlay.parent,\n  });\n\n  return (\n    <div\n      ref={wrapperRef}\n      className={wrapperClasses}\n      data-testid={testId}\n      role=\"progressbar\"\n      aria-valuenow={value}\n      aria-label={ariaLabel}\n      aria-live=\"polite\"\n      style={overlay === Overlay.screen ? { zIndex: ZIndex.OverlayScreen } : {}}\n    >\n      <svg\n        role=\"presentation\"\n        width={viewBoxSize}\n        height={viewBoxSize}\n        viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`}\n        className={styles['progressbar__svg']}\n      >\n        <circle cx={viewBoxCenter} cy={viewBoxCenter} r={radius} stroke={circleBackgroundColor} strokeWidth={strokeWidth} fill=\"none\" />\n        <circle\n          cx={viewBoxCenter}\n          cy={viewBoxCenter}\n          r={radius}\n          stroke={mainColor}\n          strokeWidth={strokeWidth}\n          fill=\"none\"\n          strokeDasharray={circumference}\n          strokeDashoffset={strokeDashoffset}\n          className={styles['progressbar__progress-circle']}\n          transform={`rotate(-90 ${viewBoxCenter} ${viewBoxCenter})`}\n        />{' '}\n        <text\n          className=\"progress-wheel__text--large\"\n          fontSize={'1.5rem'}\n          fill={mainColor}\n          x={viewBoxCenter}\n          y={viewBoxCenter}\n          textAnchor=\"middle\"\n          alignmentBaseline=\"middle\"\n        >\n          {size == ProgressbarSize.large && `${value}%`}\n        </text>\n      </svg>\n    </div>\n  );\n};\n\nexport default Progressbar;\n"],"names":["ProgressbarSize","ProgressBarMode","Overlay","Progressbar","value","size","mode","overlay","testId","ariaLabel","width","totalRadius","strokeWidth","radius","viewBoxSize","viewBoxCenter","circleBackgroundColor","palette","mainColor","circumference","strokeDashoffset","wrapperRef","useRef","useEffect","_b","_a","wrapperClasses","classNames","styles","React","ZIndex"],"mappings":"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"}