@helsenorge/designsystem-react 5.2.0 → 6.0.0-beta.9

package/components/Panel/Panel.js.map

@@ -0,0 +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  children?: React.ReactNode;\n  /** Title of the panel */\n  title?: string;\n  /** Changes the underlying element of the title. Default: h2 */\n  titleHtmlMarkup?: TitleTags;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Displays a status on the left side: defualt normal */\n  status?: keyof typeof PanelStatus;\n  /** Displayed on top of the panel with a status icon */\n  statusMessage?: string;\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  /** Icon displayed in title */\n  icon?: React.ReactNode;\n  /** Display icon on right */\n  iconRight?: boolean;\n  /** Panel section A content */\n  contentA?: React.ReactNode | string;\n  /** Panel section B content*/\n  contentB?: React.ReactNode | string;\n  /** A version of panel that prioritises content-B visually and audibly */\n  prioritiseMetaDataInContentB?: boolean;\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 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  /** Show close button in bottom of Panel Expand */\n  /** @deprecated Has no effect anymore due to accessbility reasons. No close button is shown in expanded content. Will be removed in 2.0.0 */\n  showCloseButtonInExpand?: boolean;\n  /** Layout (see description) */\n  layout?: keyof typeof PanelLayout;\n  /** Clicking anywhere on the container will trigger a click on the panel's button */\n  containerAsButton?: boolean;\n  /** Displays time with icon */\n  time?: string;\n  /** Displays date with icon */\n  date?: string;\n  /** Removes top border when variant is \"line\" */\n  noTopBorder?: boolean;\n  /** Opens or closes the panel */\n  expanded?: boolean;\n  /** Called when panel is open/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  /** Whether panel is focusable or not */\n  focusable?: boolean;\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 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 Panel = React.forwardRef(function PanelForwardedRef(props: PanelProps, ref: React.ForwardedRef<HTMLHeadingElement>) {\n  const {\n    children,\n    contentA,\n    contentB,\n    prioritiseMetaDataInContentB,\n    className,\n    testId,\n    title,\n    titleHtmlMarkup = 'h2',\n    url,\n    target = '_self',\n    icon,\n    iconRight = false,\n    variant = PanelVariant.fill,\n    status = PanelStatus.normal,\n    statusMessage,\n    buttonText = 'Se detaljer',\n    buttonTextClose = 'Skjul detaljer',\n    buttonAriaLabelledById,\n    buttonAriaLabel,\n    layout = PanelLayout.layout2,\n    containerAsButton = false,\n    date,\n    time,\n    noTopBorder,\n    buttonOnClick,\n    buttonHtmlMarkup = 'a',\n    expanded = false,\n    onExpand,\n    renderChildrenWhenClosed = false,\n    focusable = false,\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 layout3 = [PanelLayout.layout3a.toString(), PanelLayout.layout3b.toString(), PanelLayout.layout3c.toString()].includes(layout);\n\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 panelContainerClasses = classNames({\n    [panelStyles['panel__container']]: layout === PanelLayout.layout2 && contentB,\n    [panelStyles['panel__container--layout1']]: layout === PanelLayout.layout1 && contentB,\n    [panelStyles['panel__container--layout2']]: layout === PanelLayout.layout2 && contentB,\n    [panelStyles['panel__container--layout3']]: layout3 && contentB,\n    [panelStyles['panel__container--grow']]: icon,\n    [panelStyles['panel__container--prioritiseMetaDataInContentB']]: prioritiseMetaDataInContentB,\n  });\n\n  const panelContentLeftClasses = classNames({\n    [panelStyles['panel-content-a']]: layout === PanelLayout.layout2,\n    [panelStyles['panel-content-a--layout3a']]: layout === PanelLayout.layout3a,\n    [panelStyles['panel-content-a--layout3b']]: layout === PanelLayout.layout3b,\n    [panelStyles['panel-content-a--layout3c']]: layout === PanelLayout.layout3c,\n    [panelStyles['panel-content-a--non-prioritiseMetaDataInContentB']]: !prioritiseMetaDataInContentB,\n  });\n\n  const panelContentRightClasses = classNames({\n    [panelStyles['panel__content-right--layout1']]: contentB && layout === PanelLayout.layout1,\n    [panelStyles['panel__content-right--layout2']]: contentB && layout === PanelLayout.layout2,\n    [panelStyles['panel__content-right--layout3']]: contentB && layout3,\n    [panelStyles['panel__content-right--layout3a']]: contentB && layout === PanelLayout.layout3a,\n    [panelStyles['panel__content-right--layout3b']]: contentB && layout === PanelLayout.layout3b,\n    [panelStyles['panel__content-right--layout3c']]: contentB && layout === PanelLayout.layout3c,\n    [panelStyles['panel__content-right--prioritiseMetaDataInContentB']]: prioritiseMetaDataInContentB,\n  });\n\n  const panelContentBClasses = classNames(panelStyles['panel-content-b'], {\n    [panelStyles['panel-content-b--layout1']]: layout === PanelLayout.layout1,\n    [panelStyles['panel-content-b--layout2']]: layout === PanelLayout.layout2,\n    [panelStyles['panel-content-b--layout3']]: layout3,\n    [panelStyles['panel-content-b--prioritiseMetaDataInContentB']]: prioritiseMetaDataInContentB,\n  });\n\n  const titleClasses = classNames(panelStyles['panel-content-a__title'], { [panelStyles['panel-content-a__title--badge']]: hasBadge });\n\n  const renderDetailsButton = (): JSX.Element => {\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 btnContainerClass = classNames(panelStyles['panel__btn-container'], {\n    [panelStyles['panel__btn-container--layout3']]: layout3,\n    [panelStyles['panel__btn-container--no-content-b']]: !contentB,\n    [panelStyles['panel__btn-container--padding-top']]: contentA || contentB,\n  });\n\n  const renderContent = (): JSX.Element | 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      [panelStyles['panel-details--with-icon']]: icon,\n    });\n\n    return (\n      <div className={panelDetailsClasses} data-testid=\"panel-details\">\n        <div>{children}</div>\n      </div>\n    );\n  };\n\n  const contentBElement = (\n    <div className={panelContentRightClasses}>\n      {contentB && <div className={panelContentBClasses}>{contentB}</div>}\n      {(children || url || date || time || buttonOnClick) && (\n        <div className={btnContainerClass}>\n          {<DateTime date={date} time={time} />}\n          {(children || url || buttonOnClick) && <div className={panelStyles['panel__details-btn']}>{renderDetailsButton()}</div>}\n        </div>\n      )}\n    </div>\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        {icon && !iconRight && <div className={panelStyles.panel__icon}>{icon}</div>}\n        <div className={panelContainerClasses}>\n          {prioritiseMetaDataInContentB && contentBElement}\n          <div className={panelContentLeftClasses}>\n            <StatusText status={status} statusMessage={statusMessage} />\n            {title && (\n              <div className={panelStyles['panel-content-a__title-container']}>\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            {contentA}\n          </div>\n          {!prioritiseMetaDataInContentB && contentBElement}\n        </div>\n        {icon && iconRight && <div className={panelStyles['panel__icon--right']}>{icon}</div>}\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","DateTime","date","time","Calendar","Watch","Panel","props","ref","children","contentA","contentB","prioritiseMetaDataInContentB","className","testId","title","titleHtmlMarkup","url","target","icon","iconRight","variant","buttonText","buttonTextClose","buttonAriaLabelledById","buttonAriaLabel","layout","containerAsButton","noTopBorder","buttonOnClick","buttonHtmlMarkup","expanded","onExpand","renderChildrenWhenClosed","focusable","isExpanded","setIsExpanded","useExpand","titleId","useUuid","buttonTextId","hasBadge","layout3","panelWrapperClasses","panelClasses","panelContainerClasses","panelContentLeftClasses","panelContentRightClasses","panelContentBClasses","titleClasses","renderDetailsButton","ariaLabelAttributes","getAriaLabelAttributes","commonProps","Button","ChevronUp","ChevronDown","ArrowRight","btnContainerClass","renderContent","panelDetailsClasses","contentBElement","AnalyticsId","Title","Badge","Panel$1"],"mappings":";;;;;;;;;;;;;;;;;;;AAuBY,IAAAA,uBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,MAAM,OACNA,EAAA,QAAQ,SACRA,EAAA,QAAQ,SAJEA,IAAAA,MAAA,CAAA,CAAA,GAOAC,uBAAAA,OACVA,EAAA,OAAO,QACPA,EAAA,QAAQ,SACRA,EAAA,SAAS,UACTA,EAAA,OAAO,QAJGA,IAAAA,MAAA,CAAA,CAAA,GAOAC,uBAAAA,OACVA,EAAA,UAAU,WACVA,EAAA,UAAU,WACVA,EAAA,WAAW,YACXA,EAAA,WAAW,YACXA,EAAA,WAAW,YALDA,IAAAA,MAAA,CAAA,CAAA;AAyEZ,MAAMC,KAAsF,CAAC,EAAE,QAAAC,GAAQ,eAAAC,QAAoB;AACzH,QAAMC,IAAa,MACbF,MAAW,UACN,EAAE,OAAOG,EAAQ,WAAW,SAASC,GAAc,IAGrD,EAAE,OAAOD,EAAQ,OAAO,SAASE,GAAO,GAG3CC,IAAqBC,EAAWC,EAAY,gBAAgB,GAAG;AAAA,IACnE,CAACA,EAAY,qBAAqB,CAAC,GAAGR,MAAW;AAAA;AAAA,EAAA,CAClD;AAED,UAAKA,MAAW,WAAqBA,MAAW,YAAsBC,oCAEjE,OAAI,EAAA,WAAWK,GAAoB,eAAY,iBAAA,mCAC5CG,GAAM,EAAA,GAAGP,KAAc,MAAMQ,EAAS,OAAQ,CAAA,GAAG,KAAE,gBAAAC,EAAA,cAAA,QAAA,MAAMV,CAAc,CAC3E,IAIG;AACT,GAEMW,KAAuD,CAAC,EAAE,MAAAC,GAAM,MAAAC,QAChED,KAAQC,IAER,gBAAAH,EAAA,cAAC,SAAI,WAAWH,EAAY,oBAAoB,GAAG,eAAY,cAC5DK,KACC,gBAAAF,EAAA,cAAC,SAAI,WAAWH,EAAY,0BAA0B,EACpD,GAAA,gBAAAG,EAAA,cAACF,KAAK,SAASM,IAAU,MAAML,EAAS,OAAQ,CAAA,mCAC/C,QAAM,MAAAG,CAAK,CACd,GAEDC,qCACE,OAAI,EAAA,WAAWN,EAAY,0BAA0B,EACpD,GAAA,gBAAAG,EAAA,cAACF,KAAK,SAASO,IAAO,MAAMN,EAAS,OAAQ,CAAA,GAC5C,gBAAAC,EAAA,cAAA,QAAA,MAAMG,CAAK,CACd,CAEJ,IAIG,MAGHG,KAAQN,EAAM,WAAW,SAA2BO,GAAmBC,GAA6C;AAClH,QAAA;AAAA,IACJ,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,8BAAAC;AAAA,IACA,WAAAC;AAAA,IACA,QAAAC;AAAA,IACA,OAAAC;AAAA,IACA,iBAAAC,IAAkB;AAAA,IAClB,KAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,IACT,MAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,SAAAC,IAAU;AAAA,IACV,QAAAhC,IAAS;AAAA,IACT,eAAAC;AAAA,IACA,YAAAgC,IAAa;AAAA,IACb,iBAAAC,IAAkB;AAAA,IAClB,wBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,IACT,mBAAAC,IAAoB;AAAA,IACpB,MAAAzB;AAAA,IACA,MAAAC;AAAA,IACA,aAAAyB;AAAA,IACA,eAAAC;AAAA,IACA,kBAAAC,IAAmB;AAAA,IACnB,UAAAC,IAAW;AAAA,IACX,UAAAC;AAAA,IACA,0BAAAC,IAA2B;AAAA,IAC3B,WAAAC,IAAY;AAAA,EACV,IAAA3B,GAEE,CAAC4B,GAAYC,CAAa,IAAIC,GAAUN,GAAUC,CAAQ,GAC1DM,IAAUC,KACVC,IAAeD,KACfE,IAAWnD,KAAiBD,MAAW,OACvCqD,IAAU,CAAC,WAAqB,SAAA,GAAY,WAAqB,YAAY,WAAqB,SAAU,CAAA,EAAE,SAAShB,CAAM,GAE7HiB,IAAsB/C,EAAWC,EAAY,eAAe,GAAGgB,CAAS,GAExE+B,IAAehD,EAAWC,EAAY,OAAO;AAAA,IACjD,CAACA,EAAY,aAAa,CAAC,GAAGwB,MAAY;AAAA,IAC1C,CAACxB,EAAY,eAAe,CAAC,GAAGwB,MAAY;AAAA,IAC5C,CAACxB,EAAY,cAAc,CAAC,GAAGwB,MAAY;AAAA,IAC3C,CAACxB,EAAY,aAAa,CAAC,GAAGwB,MAAY;AAAA,IAC1C,CAACxB,EAAY,sBAAsB,CAAC,GAAGwB,MAAY,UAAqBO;AAAA,IACxE,CAAC/B,EAAY,iBAAiB,CAAC,GAAGsC;AAAA,IAClC,CAACtC,EAAY,YAAY,CAAC,GAAGR,MAAW;AAAA,IACxC,CAACQ,EAAY,cAAc,CAAC,GAAGR,MAAW;AAAA,IAC1C,CAACQ,EAAY,cAAc,CAAC,GAAGR,MAAW;AAAA,IAC1C,CAACQ,EAAY,eAAe,CAAC,GAAGR,KAAUA,MAAW;AAAA,IACrD,CAACQ,EAAY,kBAAkB,CAAC,GAAGsB;AAAA,IACnC,CAACtB,EAAY,eAAe,CAAC,GAAG8B;AAAA,IAChC,CAAC9B,EAAY,kBAAkB,CAAC,GAAGY,KAAYQ,KAAOe,KAAYH,KAAiBF;AAAA,EAAA,CACpF,GAEKkB,IAAwBjD,EAAW;AAAA,IACvC,CAACC,EAAY,gBAAmB,GAAG6B,MAAW,aAAuBf;AAAA,IACrE,CAACd,EAAY,2BAA2B,CAAC,GAAG6B,MAAW,aAAuBf;AAAA,IAC9E,CAACd,EAAY,2BAA2B,CAAC,GAAG6B,MAAW,aAAuBf;AAAA,IAC9E,CAACd,EAAY,2BAA2B,CAAC,GAAG6C,KAAW/B;AAAA,IACvD,CAACd,EAAY,wBAAwB,CAAC,GAAGsB;AAAA,IACzC,CAACtB,EAAY,gDAAgD,CAAC,GAAGe;AAAA,EAAA,CAClE,GAEKkC,IAA0BlD,EAAW;AAAA,IACzC,CAACC,EAAY,iBAAiB,CAAC,GAAG6B,MAAW;AAAA,IAC7C,CAAC7B,EAAY,2BAA2B,CAAC,GAAG6B,MAAW;AAAA,IACvD,CAAC7B,EAAY,2BAA2B,CAAC,GAAG6B,MAAW;AAAA,IACvD,CAAC7B,EAAY,2BAA2B,CAAC,GAAG6B,MAAW;AAAA,IACvD,CAAC7B,EAAY,mDAAmD,CAAC,GAAG,CAACe;AAAA,EAAA,CACtE,GAEKmC,KAA2BnD,EAAW;AAAA,IAC1C,CAACC,EAAY,+BAA+B,CAAC,GAAGc,KAAYe,MAAW;AAAA,IACvE,CAAC7B,EAAY,+BAA+B,CAAC,GAAGc,KAAYe,MAAW;AAAA,IACvE,CAAC7B,EAAY,+BAA+B,CAAC,GAAGc,KAAY+B;AAAA,IAC5D,CAAC7C,EAAY,gCAAgC,CAAC,GAAGc,KAAYe,MAAW;AAAA,IACxE,CAAC7B,EAAY,gCAAgC,CAAC,GAAGc,KAAYe,MAAW;AAAA,IACxE,CAAC7B,EAAY,gCAAgC,CAAC,GAAGc,KAAYe,MAAW;AAAA,IACxE,CAAC7B,EAAY,oDAAoD,CAAC,GAAGe;AAAA,EAAA,CACtE,GAEKoC,KAAuBpD,EAAWC,EAAY,iBAAiB,GAAG;AAAA,IACtE,CAACA,EAAY,0BAA0B,CAAC,GAAG6B,MAAW;AAAA,IACtD,CAAC7B,EAAY,0BAA0B,CAAC,GAAG6B,MAAW;AAAA,IACtD,CAAC7B,EAAY,0BAA0B,CAAC,GAAG6C;AAAA,IAC3C,CAAC7C,EAAY,+CAA+C,CAAC,GAAGe;AAAA,EAAA,CACjE,GAEKqC,KAAerD,EAAWC,EAAY,wBAAwB,GAAG,EAAE,CAACA,EAAY,+BAA+B,CAAC,GAAG4C,EAAA,CAAU,GAE7HS,KAAsB,MAAmB;AAC7C,UAAMC,IAAsBC,GAAuB;AAAA,MACjD,OAAO3B;AAAA,MACP,IAAKD,KAA0B,GAAGgB,CAAY,IAAIhB,CAAsB,MAAQT,KAASuB,KAAW,GAAGE,CAAY,IAAIF,CAAO;AAAA,MAC9H,QAAQ;AAAA,IAAA,CACT,GAEKe,IAA0D;AAAA,MAC9D,SAASxB,MAAgC,MAAYO,EAAc,CAACD,CAAU;AAAA,MAC9E,WAAWR,IAAoB9B,EAAY,gBAAmB;AAAA,MAC9D,SAAS;AAAA,MACT,UAAU;AAAA,MACV,GAAGsD;AAAA,IAAA;AAGL,WAAI1C,IAEA,gBAAAT,EAAA,cAACsD,KAAO,QAAO,UAAS,iBAAenB,GAAa,GAAGkB,EACrD,GAAA,gBAAArD,EAAA,cAAC,QAAK,EAAA,IAAIwC,KAAeL,IAAaZ,IAAkBD,CAAW,GACnE,gBAAAtB,EAAA,cAACF,KAAK,SAASqC,IAAaoB,KAAYC,GAAA,CAAa,CACvD,IAKF,gBAAAxD,EAAA,cAACsD,KAAO,QAAO,OAAM,YAAYxB,GAAkB,MAAMb,GAAK,QAAAC,GAAiB,GAAGmC,KAC/E,gBAAArD,EAAA,cAAA,QAAA,EAAK,IAAIwC,EAAe,GAAAlB,CAAW,GACnC,gBAAAtB,EAAA,cAAAF,GAAA,EAAK,SAAS2D,GAAA,CAAY,CAC7B;AAAA,EAAA,GAIEC,KAAoB9D,EAAWC,EAAY,sBAAsB,GAAG;AAAA,IACxE,CAACA,EAAY,+BAA+B,CAAC,GAAG6C;AAAA,IAChD,CAAC7C,EAAY,oCAAoC,CAAC,GAAG,CAACc;AAAA,IACtD,CAACd,EAAY,mCAAmC,CAAC,GAAGa,KAAYC;AAAA,EAAA,CACjE,GAEKgD,KAAgB,MAA0B;AAC9C,QAAI,CAAClD,KAAa,CAACwB,KAA4B,CAACE;AACvC,aAAA;AAGT,UAAMyB,IAAsBhE,EAAWC,EAAY,eAAe,GAAG;AAAA,MACnE,CAACA,EAAY,qBAAqB,CAAC,GAAGsC;AAAA,MACtC,CAACtC,EAAY,qBAAqB,CAAC,GAAGwB,MAAY;AAAA,MAClD,CAACxB,EAAY,sBAAsB,CAAC,GAAGwB,MAAY;AAAA,MACnD,CAACxB,EAAY,0BAA0B,CAAC,GAAGsB;AAAA,IAAA,CAC5C;AAGC,WAAA,gBAAAnB,EAAA,cAAC,SAAI,WAAW4D,GAAqB,eAAY,gBAC/C,GAAA,gBAAA5D,EAAA,cAAC,OAAK,MAAAS,CAAS,CACjB;AAAA,EAAA,GAIEoD,IACH,gBAAA7D,EAAA,cAAA,OAAA,EAAI,WAAW+C,MACbpC,KAAa,gBAAAX,EAAA,cAAA,OAAA,EAAI,WAAWgD,GAAA,GAAuBrC,CAAS,IAC3DF,KAAYQ,KAAOf,KAAQC,KAAQ0B,MAClC,gBAAA7B,EAAA,cAAA,OAAA,EAAI,WAAW0D,sCACZzD,IAAS,EAAA,MAAAC,GAAY,MAAAC,GAAY,IACjCM,KAAYQ,KAAOY,MAAmB,gBAAA7B,EAAA,cAAA,OAAA,EAAI,WAAWH,EAAY,oBAAoB,KAAIqD,GAAsB,CAAA,CACnH,CAEJ;AAIA,SAAA,gBAAAlD,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC,UAAUkC,IAAY,KAAK;AAAA,MAC3B,KAAA1B;AAAA,MACA,eAAaM;AAAA,MACb,WAAW6B;AAAA,MACX,oBAAkBmB,GAAY;AAAA,IAAA;AAAA,oCAE7B,OAAI,EAAA,WAAWlB,EACb,GAAAzB,KAAQ,CAACC,KAAa,gBAAApB,EAAA,cAAC,OAAI,EAAA,WAAWH,EAAY,YAAc,GAAAsB,CAAK,GACtE,gBAAAnB,EAAA,cAAC,SAAI,WAAW6C,EAAA,GACbjC,KAAgCiD,mCAChC,OAAI,EAAA,WAAWf,KACd,gBAAA9C,EAAA,cAACZ,MAAW,QAAAC,GAAgB,eAAAC,GAA8B,GACzDyB,qCACE,OAAI,EAAA,WAAWlB,EAAY,kCAAkC,qCAC3DkE,IAAM,EAAA,YAAW,UAAS,YAAY/C,GAAiB,IAAIsB,GAAS,WAAWW,GAAA,GAC7ElC,CACH,GACC0B,KACE,gBAAAzC,EAAA,cAAA,OAAA,EAAI,WAAWH,EAAY,aAAA,mCACzBmE,IAAM,EAAA,OAAM,aAAY,QAAO,kBAC7B1E,CACH,CACF,CAEJ,GAEDoB,CACH,GACC,CAACE,KAAgCiD,CACpC,GACC1C,KAAQC,qCAAc,OAAI,EAAA,WAAWvB,EAAY,oBAAoB,KAAIsB,CAAK,CACjF;AAAA,IACCwC,GAAc;AAAA,EAAA;AAGrB,CAAC,GAEDM,KAAe3D;"}

package/components/Panel/index.js

@@ -1,2 +1,9 @@
-import{P as o}from"../../Panel.js";import{c as J,a as K,b as M}from"../../Panel.js";import"react";import"classnames";import"../../constants.js";import"../../hooks/useExpand.js";import"../../hooks/usePrevious.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../../theme/palette.js";import"../../utils/accessibility.js";import"../../Badge.js";import"../Badge/styles.module.scss";import"../../Button.js";import"../Icons/Icon.js";import"../../hooks/useBreakpoint.js";import"../../theme/grid.js";import"../../hooks/useHover.js";import"../../hooks/usePseudoClasses.js";import"../../hooks/useIcons.js";import"../../hooks/useSize.js";import"../../utils/debounce.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/spacers.js";import"../Icons/ArrowRight.js";import"../Button/styles.module.scss";import"../Icons/AlertSignFill.js";import"../Icons/Calendar.js";import"../Icons/ChevronDown.js";import"../Icons/ChevronUp.js";import"../Icons/Pencil.js";import"../Icons/Watch.js";import"../../Title.js";import"../Title/styles.module.scss";import"./styles.module.scss";export{J as PanelLayout,K as PanelStatus,M as PanelVariant,o as default};
+import t from "./Panel.js";
+import { PanelLayout as r, PanelStatus as l, PanelVariant as n } from "./Panel.js";
+export {
+  r as PanelLayout,
+  l as PanelStatus,
+  n as PanelVariant,
+  t as default
+};
 //# sourceMappingURL=index.js.map

package/components/Panel/index.js.map

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

package/components/PanelList/PanelList.js

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

package/components/PanelList/PanelList.js.map

@@ -0,0 +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\ninterface 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} className={styles['panel-list']} 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;AAEH,SACG,gBAAAb,EAAA,cAAA,OAAA,EAAI,KAAAI,GAAU,eAAaC,GAAQ,WAAWQ,EAAO,YAAY,GAAG,oBAAkBC,EAAY,UAAA,GAChGd,EAAM,SAAS,IAAIM,GAAU,CAACS,GAAOC,MAAWlB,EAAiBiB,CAAK,IAAIN,EAAYM,GAAOC,MAAU,CAAC,IAAID,CAAM,CACrH;AAEJ,CAAC,GAEDE,IAAef;"}

package/components/PanelList/index.js

@@ -1,2 +1,5 @@
-import r from"react";import c from"classnames";import{AnalyticsId as f}from"../../constants.js";import{b as p,P}from"../../Panel.js";import a from"./styles.module.scss";import"../../hooks/useExpand.js";import"../../hooks/usePrevious.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../../theme/palette.js";import"../../utils/accessibility.js";import"../../Badge.js";import"../Badge/styles.module.scss";import"../../Button.js";import"../Icons/Icon.js";import"../../hooks/useBreakpoint.js";import"../../theme/grid.js";import"../../hooks/useHover.js";import"../../hooks/usePseudoClasses.js";import"../../hooks/useIcons.js";import"../../hooks/useSize.js";import"../../utils/debounce.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/spacers.js";import"../Icons/ArrowRight.js";import"../Button/styles.module.scss";import"../Icons/AlertSignFill.js";import"../Icons/Calendar.js";import"../Icons/ChevronDown.js";import"../Icons/ChevronUp.js";import"../Icons/Pencil.js";import"../Icons/Watch.js";import"../../Title.js";import"../Title/styles.module.scss";import"../Panel/styles.module.scss";const y=o=>r.isValidElement(o)&&o.type===P,N=r.forwardRef(function(e,n){const{testId:s,children:l,variant:i=p.fill}=e,d=(t,m)=>r.cloneElement(t,{variant:i,noTopBorder:i===p.line&&!m,className:c(t.props.className,i!==p.line&&a["panel-list__panel"])});return r.createElement("div",{ref:n,"data-testid":s,className:a["panel-list"],"data-analyticsid":f.PanelList},r.Children.map(l,(t,m)=>y(t)?d(t,m===0):t))}),tt=N;export{tt as default};
+import a from "./PanelList.js";
+export {
+  a as default
+};
 //# sourceMappingURL=index.js.map

package/components/PanelList/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.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\ninterface 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} className={styles['panel-list']} 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":"kpCAkBA,MAAMA,EAAoBC,GACxBC,EAAM,eAA2BD,CAAO,GAAMA,EAA+B,OAASE,EAElFC,EAAYF,EAAM,WAAW,SAA2BG,EAAuBC,EAAyC,CAC5H,KAAM,CAAE,OAAAC,EAAQ,SAAAC,EAAU,QAAAC,EAAUC,EAAa,IAAS,EAAAL,EAEpDM,EAAc,CAACC,EAAuCC,IAC1DX,EAAM,aAAaU,EAAO,CACxB,QAAAH,EACA,YAAaA,IAAYC,EAAa,MAAQ,CAACG,EAC/C,UAAWC,EAAWF,EAAM,MAAM,UAAWH,IAAYC,EAAa,MAAQK,EAAO,mBAAmB,CAAC,CAAA,CAC1G,EAEH,OACGb,EAAA,cAAA,MAAA,CAAI,IAAAI,EAAU,cAAaC,EAAQ,UAAWQ,EAAO,YAAY,EAAG,mBAAkBC,EAAY,SAAA,EAChGd,EAAM,SAAS,IAAIM,EAAU,CAACS,EAAOC,IAAWlB,EAAiBiB,CAAK,EAAIN,EAAYM,EAAOC,IAAU,CAAC,EAAID,CAAM,CACrH,CAEJ,CAAC,EAEDE,GAAef"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/components/PopMenu/PopMenu.js

@@ -0,0 +1,75 @@
+import o, { useRef as s, useState as h } from "react";
+import a from "classnames";
+import { IconSize as b, AnalyticsId as L } from "../../constants.js";
+import { useBreakpoint as w } from "../../hooks/useBreakpoint.js";
+import { useHover as H } from "../../hooks/useHover.js";
+import { useOutsideEvent as _ } from "../../hooks/useOutsideEvent.js";
+import { getColor as g } from "../../theme/currys/color.js";
+import { breakpoints as z } from "../../theme/grid.js";
+import { isComponent as A } from "../../utils/component.js";
+import M from "../Close/Close.js";
+import { Icon as T } from "../Icon/Icon.js";
+import P from "../Icons/VerticalDots.js";
+import $ from "../LinkList/LinkList.js";
+import x from "../PopOver/PopOver.js";
+import t from "./styles.module.scss";
+var D = /* @__PURE__ */ ((e) => (e.onWhite = "on-white", e.onGray = "on-gray", e.onBlueberry = "on-blueberry", e))(D || {});
+const G = (e) => {
+  const l = s(null), m = s(null), p = s(null), [r, n] = h(!1), {
+    children: i,
+    popOverClassName: d,
+    popMenuClassName: v,
+    openButtonTestId: I,
+    closeButtonTestId: C,
+    popOverTestId: k,
+    popMenuVariant: c = "on-white",
+    openButtonAriaLabel: B,
+    closeButtonAriaLabel: N
+  } = e, u = a(t["pop-menu-button"], {
+    [t[`pop-menu-button--${c}`]]: c
+  }), f = w() < z.md;
+  _(p, () => n(!r));
+  const { isHovered: y } = H(m), O = f ? b.XSmall : b.Small, E = () => {
+    if (A(i, $))
+      return /* @__PURE__ */ o.createElement(
+        x,
+        {
+          testId: k,
+          className: a(t["pop-menu__pop-over"], d),
+          arrowClassName: t["pop-menu__pop-over-arrow"],
+          controllerRef: l,
+          popOverRef: p
+        },
+        i
+      );
+  }, R = /* @__PURE__ */ o.createElement(
+    "button",
+    {
+      ref: m,
+      "data-testid": I,
+      className: u,
+      "aria-label": B || "Se mer",
+      onClick: () => n(!0),
+      type: "button"
+    },
+    /* @__PURE__ */ o.createElement(T, { svgIcon: P, className: "test", color: g("black"), size: O, isHovered: y })
+  ), S = /* @__PURE__ */ o.createElement(
+    M,
+    {
+      ariaLabel: N,
+      color: "black",
+      className: u,
+      testId: C,
+      ref: l,
+      onClick: () => n(!1),
+      small: f
+    }
+  );
+  return /* @__PURE__ */ o.createElement("div", { className: a(t["pop-menu-button"], v), "data-analyticsid": L.PopMenu }, r ? S : R, r && E());
+}, ne = G;
+export {
+  G as PopMenu,
+  D as PopMenuVariant,
+  ne as default
+};
+//# sourceMappingURL=PopMenu.js.map

package/components/PopMenu/PopMenu.js.map

@@ -0,0 +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 Close from '../Close';\nimport Icon from '../Icon';\nimport VerticalDots from '../Icons/VerticalDots';\nimport LinkList, { LinkListProps } 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 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}\n\nexport const PopMenu: React.FC<PopMenuProps> = (props: PopMenuProps) => {\n  const closeRef = useRef<HTMLButtonElement>(null);\n  const openRef = useRef<HTMLButtonElement>(null);\n  const popOverRef = 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  } = 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  useOutsideEvent(popOverRef, () => setIsOpen(!isOpen));\n  const { isHovered: openButtonIsHovered } = useHover(openRef);\n  const mobileIconSize = mobile ? IconSize.XSmall : IconSize.Small;\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={closeRef}\n          popOverRef={popOverRef}\n        >\n          {children}\n        </PopOver>\n      );\n    }\n  };\n\n  const openButton = (\n    <button\n      ref={openRef}\n      data-testid={openButtonTestId}\n      className={buttonClasses}\n      aria-label={openButtonAriaLabel || 'Se mer'}\n      onClick={(): void => setIsOpen(true)}\n      type=\"button\"\n    >\n      <Icon svgIcon={VerticalDots} className=\"test\" color={getColor('black')} size={mobileIconSize} isHovered={openButtonIsHovered} />\n    </button>\n  );\n\n  const closeButton = (\n    <Close\n      ariaLabel={closeButtonAriaLabel}\n      color=\"black\"\n      className={buttonClasses}\n      testId={closeButtonTestId}\n      ref={closeRef}\n      onClick={(): void => setIsOpen(false)}\n      small={mobile}\n    />\n  );\n\n  return (\n    <div className={classNames(styles['pop-menu-button'], popMenuClassName)} data-analyticsid={AnalyticsId.PopMenu}>\n      {!isOpen ? openButton : closeButton}\n      {isOpen && renderChildren()}\n    </div>\n  );\n};\n\nexport default PopMenu;\n"],"names":["PopMenuVariant","PopMenu","props","closeRef","useRef","openRef","popOverRef","isOpen","setIsOpen","useState","children","popOverClassName","popMenuClassName","openButtonTestId","closeButtonTestId","popOverTestId","popMenuVariant","openButtonAriaLabel","closeButtonAriaLabel","buttonClasses","classNames","styles","mobile","useBreakpoint","breakpoints","useOutsideEvent","openButtonIsHovered","useHover","mobileIconSize","IconSize","renderChildren","isComponent","LinkList","React","PopOver","openButton","Icon","VerticalDots","getColor","closeButton","Close","AnalyticsId","PopMenu$1"],"mappings":";;;;;;;;;;;;;;;AAmBY,IAAAA,sBAAAA,OACVA,EAAA,UAAU,YACVA,EAAA,SAAS,WACTA,EAAA,cAAc,gBAHJA,IAAAA,KAAA,CAAA,CAAA;AA2BC,MAAAC,IAAkC,CAACC,MAAwB;AAChE,QAAAC,IAAWC,EAA0B,IAAI,GACzCC,IAAUD,EAA0B,IAAI,GACxCE,IAAaF,EAAuB,IAAI,GACxC,CAACG,GAAQC,CAAS,IAAIC,EAAS,EAAK,GACpC;AAAA,IACJ,UAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,eAAAC;AAAA,IACA,gBAAAC,IAAiB;AAAA,IACjB,qBAAAC;AAAA,IACA,sBAAAC;AAAA,EACE,IAAAhB,GACEiB,IAAgBC,EAAWC,EAAO,iBAAiB,GAAG;AAAA,IAC1D,CAACA,EAAO,oBAAoBL,CAAc,EAAE,CAAC,GAAGA;AAAA,EAAA,CACjD,GAEKM,IADaC,MACSC,EAAY;AACxC,EAAAC,EAAgBnB,GAAY,MAAME,EAAU,CAACD,CAAM,CAAC;AACpD,QAAM,EAAE,WAAWmB,EAAoB,IAAIC,EAAStB,CAAO,GACrDuB,IAAiBN,IAASO,EAAS,SAASA,EAAS,OAErDC,IAAiB,MAAM;AACvB,QAAAC,EAA2BrB,GAAUsB,CAAQ;AAE7C,aAAA,gBAAAC,EAAA;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,QAAQnB;AAAA,UACR,WAAWK,EAAWC,EAAO,oBAAoB,GAAGV,CAAgB;AAAA,UACpE,gBAAgBU,EAAO,0BAA0B;AAAA,UACjD,eAAelB;AAAA,UACf,YAAAG;AAAA,QAAA;AAAA,QAECI;AAAA,MAAA;AAAA,EAGP,GAGIyB,IACJ,gBAAAF,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK5B;AAAA,MACL,eAAaQ;AAAA,MACb,WAAWM;AAAA,MACX,cAAYF,KAAuB;AAAA,MACnC,SAAS,MAAYT,EAAU,EAAI;AAAA,MACnC,MAAK;AAAA,IAAA;AAAA,IAEJ,gBAAAyB,EAAA,cAAAG,GAAA,EAAK,SAASC,GAAc,WAAU,QAAO,OAAOC,EAAS,OAAO,GAAG,MAAMV,GAAgB,WAAWF,GAAqB;AAAA,EAAA,GAI5Ha,IACJ,gBAAAN,EAAA;AAAA,IAACO;AAAA,IAAA;AAAA,MACC,WAAWtB;AAAA,MACX,OAAM;AAAA,MACN,WAAWC;AAAA,MACX,QAAQL;AAAA,MACR,KAAKX;AAAA,MACL,SAAS,MAAYK,EAAU,EAAK;AAAA,MACpC,OAAOc;AAAA,IAAA;AAAA,EAAA;AAIX,yCACG,OAAI,EAAA,WAAWF,EAAWC,EAAO,iBAAiB,GAAGT,CAAgB,GAAG,oBAAkB6B,EAAY,WACnGlC,IAAsBgC,IAAbJ,GACV5B,KAAUuB,GACb;AAEJ,GAEAY,KAAezC;"}

package/components/PopMenu/index.js

@@ -1,2 +1,8 @@
-import t,{useRef as p,useState as S}from"react";import i from"classnames";import{IconSize as b,AnalyticsId as h}from"../../constants.js";import{useBreakpoint as w}from"../../hooks/useBreakpoint.js";import{useHover as H}from"../../hooks/useHover.js";import{useOutsideEvent as _}from"../../hooks/useOutsideEvent.js";import{getColor as g}from"../../theme/currys/color.js";import{breakpoints as z}from"../../theme/grid.js";import{isComponent as A}from"../../utils/component.js";import{C as M}from"../../Close.js";import{Icon as T}from"../Icons/Icon.js";import P from"../Icons/VerticalDots.js";import{L as $}from"../../LinkList.js";import{a as x}from"../../PopOver.js";import e from"./styles.module.scss";import"../../hooks/usePseudoClasses.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../utils/refs.js";import"../Icons/X.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../Close/styles.module.scss";import"../Icons/ChevronRight.js";import"../../ListHeader.js";import"../../ListHeaderText.js";import"../../StatusDot.js";import"../Icons/Attachment.js";import"../Icons/Group.js";import"../Icons/NoAccess.js";import"../Icons/Undo.js";import"../StatusDot/styles.module.scss";import"../ListHeader/styles.module.scss";import"../../Avatar.js";import"../Icons/Check.js";import"../Avatar/styles.module.scss";import"../../Badge.js";import"../Badge/styles.module.scss";import"../LinkList/styles.module.scss";import"../../hooks/useInterval.js";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../../hooks/useLayoutEvent.js";import"../../utils/debounce.js";import"../../hooks/useSize.js";import"../PopOver/styles.module.scss";var D=(o=>(o.onWhite="on-white",o.onGray="on-gray",o.onBlueberry="on-blueberry",o))(D||{});const G=o=>{const n=p(null),s=p(null),a=p(null),[r,m]=S(!1),{children:l,popOverClassName:d,popMenuClassName:v,openButtonTestId:I,closeButtonTestId:C,popOverTestId:k,popMenuVariant:c="on-white",openButtonAriaLabel:B,closeButtonAriaLabel:N}=o,u=i(e["pop-menu-button"],{[e[`pop-menu-button--${c}`]]:c}),f=w()<z.md;_(a,()=>m(!r));const{isHovered:y}=H(s),O=f?b.XSmall:b.Small,E=()=>{if(A(l,$))return t.createElement(x,{testId:k,className:i(e["pop-menu__pop-over"],d),arrowClassName:e["pop-menu__pop-over-arrow"],controllerRef:n,popOverRef:a},l)},L=t.createElement("button",{ref:s,"data-testid":I,className:u,"aria-label":B||"Se mer",onClick:()=>m(!0),type:"button"},t.createElement(T,{svgIcon:P,className:"test",color:g("black"),size:O,isHovered:y})),R=t.createElement(M,{ariaLabel:N,color:"black",className:u,testId:C,ref:n,onClick:()=>m(!1),small:f});return t.createElement("div",{className:i(e["pop-menu-button"],v),"data-analyticsid":h.PopMenu},r?R:L,r&&E())},$o=G;export{G as PopMenu,D as PopMenuVariant,$o as default};
+import e from "./PopMenu.js";
+import { PopMenu as t, PopMenuVariant as a } from "./PopMenu.js";
+export {
+  t as PopMenu,
+  a as PopMenuVariant,
+  e as default
+};
 //# sourceMappingURL=index.js.map

package/components/PopMenu/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.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 Close from '../Close';\nimport Icon from '../Icons';\nimport VerticalDots from '../Icons/VerticalDots';\nimport LinkList, { LinkListProps } 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 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}\n\nexport const PopMenu: React.FC<PopMenuProps> = (props: PopMenuProps) => {\n  const closeRef = useRef<HTMLButtonElement>(null);\n  const openRef = useRef<HTMLButtonElement>(null);\n  const popOverRef = 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  } = 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  useOutsideEvent(popOverRef, () => setIsOpen(!isOpen));\n  const { isHovered: openButtonIsHovered } = useHover(openRef);\n  const mobileIconSize = mobile ? IconSize.XSmall : IconSize.Small;\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={closeRef}\n          popOverRef={popOverRef}\n        >\n          {children}\n        </PopOver>\n      );\n    }\n  };\n\n  const openButton = (\n    <button\n      ref={openRef}\n      data-testid={openButtonTestId}\n      className={buttonClasses}\n      aria-label={openButtonAriaLabel || 'Se mer'}\n      onClick={(): void => setIsOpen(true)}\n      type=\"button\"\n    >\n      <Icon svgIcon={VerticalDots} className=\"test\" color={getColor('black')} size={mobileIconSize} isHovered={openButtonIsHovered} />\n    </button>\n  );\n\n  const closeButton = (\n    <Close\n      ariaLabel={closeButtonAriaLabel}\n      color=\"black\"\n      className={buttonClasses}\n      testId={closeButtonTestId}\n      ref={closeRef}\n      onClick={(): void => setIsOpen(false)}\n      small={mobile}\n    />\n  );\n\n  return (\n    <div className={classNames(styles['pop-menu-button'], popMenuClassName)} data-analyticsid={AnalyticsId.PopMenu}>\n      {!isOpen ? openButton : closeButton}\n      {isOpen && renderChildren()}\n    </div>\n  );\n};\n\nexport default PopMenu;\n"],"names":["PopMenuVariant","PopMenu","props","closeRef","useRef","openRef","popOverRef","isOpen","setIsOpen","useState","children","popOverClassName","popMenuClassName","openButtonTestId","closeButtonTestId","popOverTestId","popMenuVariant","openButtonAriaLabel","closeButtonAriaLabel","buttonClasses","classNames","styles","mobile","useBreakpoint","breakpoints","useOutsideEvent","openButtonIsHovered","useHover","mobileIconSize","IconSize","renderChildren","isComponent","LinkList","React","PopOver","openButton","Icon","VerticalDots","getColor","closeButton","Close","AnalyticsId","PopMenu$1"],"mappings":"+tDAmBY,IAAAA,GAAAA,IACVA,EAAA,QAAU,WACVA,EAAA,OAAS,UACTA,EAAA,YAAc,eAHJA,IAAAA,GAAA,CAAA,CAAA,EA2BC,MAAAC,EAAmCC,GAAwB,CAChE,MAAAC,EAAWC,EAA0B,IAAI,EACzCC,EAAUD,EAA0B,IAAI,EACxCE,EAAaF,EAAuB,IAAI,EACxC,CAACG,EAAQC,CAAS,EAAIC,EAAS,EAAK,EACpC,CACJ,SAAAC,EACA,iBAAAC,EACA,iBAAAC,EACA,iBAAAC,EACA,kBAAAC,EACA,cAAAC,EACA,eAAAC,EAAiB,WACjB,oBAAAC,EACA,qBAAAC,CACE,EAAAhB,EACEiB,EAAgBC,EAAWC,EAAO,iBAAiB,EAAG,CAC1D,CAACA,EAAO,oBAAoBL,CAAc,EAAE,CAAC,EAAGA,CAAA,CACjD,EAEKM,EADaC,IACSC,EAAY,GACxCC,EAAgBnB,EAAY,IAAME,EAAU,CAACD,CAAM,CAAC,EACpD,KAAM,CAAE,UAAWmB,CAAoB,EAAIC,EAAStB,CAAO,EACrDuB,EAAiBN,EAASO,EAAS,OAASA,EAAS,MAErDC,EAAiB,IAAM,CACvB,GAAAC,EAA2BrB,EAAUsB,CAAQ,EAE7C,OAAAC,EAAA,cAACC,EAAA,CACC,OAAQnB,EACR,UAAWK,EAAWC,EAAO,oBAAoB,EAAGV,CAAgB,EACpE,eAAgBU,EAAO,0BAA0B,EACjD,cAAelB,EACf,WAAAG,CAAA,EAECI,CAAA,CAGP,EAGIyB,EACJF,EAAA,cAAC,SAAA,CACC,IAAK5B,EACL,cAAaQ,EACb,UAAWM,EACX,aAAYF,GAAuB,SACnC,QAAS,IAAYT,EAAU,EAAI,EACnC,KAAK,QAAA,EAEJyB,EAAA,cAAAG,EAAA,CAAK,QAASC,EAAc,UAAU,OAAO,MAAOC,EAAS,OAAO,EAAG,KAAMV,EAAgB,UAAWF,EAAqB,CAAA,EAI5Ha,EACJN,EAAA,cAACO,EAAA,CACC,UAAWtB,EACX,MAAM,QACN,UAAWC,EACX,OAAQL,EACR,IAAKX,EACL,QAAS,IAAYK,EAAU,EAAK,EACpC,MAAOc,CAAA,CAAA,EAIX,uBACG,MAAI,CAAA,UAAWF,EAAWC,EAAO,iBAAiB,EAAGT,CAAgB,EAAG,mBAAkB6B,EAAY,SACnGlC,EAAsBgC,EAAbJ,EACV5B,GAAUuB,GACb,CAEJ,EAEAY,GAAezC"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/components/PopOver/PopOver.js

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

package/components/PopOver/PopOver.js.map

@@ -0,0 +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 } 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}\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  } = 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  });\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}\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} />\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","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;AA+BZ,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,EACE,IAAAX,GAEEY,IAAYP,KAAcQ,EAAuB,IAAI,GACrDC,IAAWD,EAAuB,IAAI,GACtCE,IAAaC,EAAQJ,CAAS,GAC9B,CAACK,GAAgBC,CAAiB,IAAIC,EAAkB,GACxDC,IAAsBC,EAAajB,GAAe,CAAC,GAEnDkB,IAAuB,MAAY;;AACrB,IAAAJ,GAAAK,IAAAnB,EAAc,YAAd,gBAAAmB,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,IAAYlB,MAAS,WAErBmB,IAAiBC,EAAWC,EAAO,SAAS,EAAE,CAACA,EAAO,kBAAkB,CAAC,GAAGH,IAAYrB,IAAOc,KAAuBb,CAAS,GAC/HwB,IAAmBd,KAAkBF,KAAciB,EAAoBf,GAAgBF,GAAYP,CAAO,GAC1GyB,IAAeJ,EAAWC,EAAO,gBAAgBnB,GAAgB;AAAA,IACrE,CAACmB,EAAO,sBAAsB,CAAC,GAAGC,MAAqB;AAAA,IACvD,CAACD,EAAO,uBAAuB,CAAC,GAAGC,MAAqB;AAAA;AAAA,EAAA,CACzD,GAEKG,IAAcjB,KAAkBF,KAAcoB,EAAelB,GAAgBF,GAAYP,CAAO,GAChG4B,IAAaF,KAAejB,KAAkBc,KAAoBM,EAAcH,GAAajB,GAAgBc,CAAgB;AAEnI,SAEI,gBAAAhC,EAAA,cAAAA,EAAA,UAAA,MAAA,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAAG;AAAA,MACA,KAAKoC,EAAU,CAACrC,GAAKW,CAAS,CAAC;AAAA,MAC/B,WAAWgB;AAAA,MACX,OAAOM;AAAA,MACP,eAAaxB;AAAA,MACb,oBAAkB6B,EAAY;AAAA,MAC9B,MAAA9B;AAAA,IAAA;AAAA,IAECN;AAAA,EACH,mCACC,OAAI,EAAA,KAAKW,GAAU,WAAWmB,GAAc,OAAOG,EAAA,CAAY,CAClE;AAEJ,CAAC;AAEDtC,EAAQ,cAAc;AAEtB,MAAA0C,IAAe1C;"}

package/components/PopOver/index.js

@@ -1,2 +1,7 @@
-import{a as o}from"../../PopOver.js";import{P as l}from"../../PopOver.js";import"react";import"classnames";import"../../constants.js";import"../../hooks/useInterval.js";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../../hooks/useLayoutEvent.js";import"../../utils/debounce.js";import"../../hooks/useSize.js";import"../../utils/refs.js";import"./styles.module.scss";export{l as PopOverVariant,o as default};
+import o from "./PopOver.js";
+import { PopOverVariant as t } from "./PopOver.js";
+export {
+  t as PopOverVariant,
+  o as default
+};
 //# sourceMappingURL=index.js.map

package/components/PopOver/index.js.map

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

package/components/PopOver/utils.js

@@ -0,0 +1,33 @@
+import { PopOverVariant as s } from "./PopOver.js";
+const w = 373, r = 12, h = 16, l = 20, x = 4, P = 12, a = (t, o, n) => n !== s.positionautomatic ? n : t.top > o.height + h ? s.positionabove : s.positionbelow, p = (t) => t.left + t.width / 2, m = (t) => document.documentElement.clientWidth - t.right + t.width / 2, u = (t, o) => p(t) - o.width / 2, R = (t, o) => u(t, o) + o.width, B = (t, o) => u(t, o) > r, _ = (t, o) => R(t, o) < document.documentElement.clientWidth - r, L = (t, o) => _(t, o) ? B(t, o) ? "floating" : "left" : "right", b = (t, o) => t.top - h - o.height, c = (t) => t.bottom + h, W = () => document.documentElement.clientWidth - r * 2, v = () => document.documentElement.clientWidth > w + r * 2, d = (t) => t.top - h - x, A = (t) => p(t) - l / 2, E = (t) => m(t) - l / 2, I = (t, o, n) => {
+  const i = L(t, o), e = a(t, o, n);
+  return i === "left" ? e === s.positionabove ? "leftabove" : "leftbelow" : i === "right" ? e === s.positionabove ? "rightabove" : "rightbelow" : e === s.positionabove ? "floatingabove" : "floatingbelow";
+}, C = (t, o, n) => {
+  const i = I(t, o, n), e = v() ? void 0 : W();
+  return i === "leftabove" ? {
+    left: r,
+    top: b(t, o),
+    width: e
+  } : i === "leftbelow" ? { left: r, top: c(t), width: e } : i === "rightabove" ? { right: r, top: b(t, o), width: e } : i === "rightbelow" ? { right: r, top: c(t), width: e } : i === "floatingbelow" ? { left: u(t, o), top: c(t), width: e } : { left: u(t, o), top: b(t, o), width: e };
+}, T = (t, o, n) => {
+  const i = A(o), e = E(o), f = t.left + P, g = t.right + P;
+  return t.right ? n === s.positionabove ? {
+    right: e > g ? e : g,
+    top: d(o)
+  } : {
+    right: e > g ? e : g,
+    top: o.bottom
+  } : n === s.positionabove ? {
+    left: i > f ? i : f,
+    top: d(o)
+  } : {
+    left: i > f ? i : f,
+    top: o.bottom
+  };
+};
+export {
+  T as getArrowStyle,
+  C as getBubbleStyle,
+  a as getVerticalPosition
+};
+//# sourceMappingURL=utils.js.map

package/components/PopOver/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../src/components/PopOver/utils.ts"],"sourcesContent":["import { CSSProperties } from 'react';\n\nimport { PopOverVariant } from './PopOver';\n\ntype HorizontalPosition = 'left' | 'right' | 'floating';\ntype BubblePosition = 'leftabove' | 'leftbelow' | 'rightabove' | 'rightbelow' | 'floatingabove' | 'floatingbelow';\n\n/** Bredde på hjelpeboble */\nconst BUBBLE_WIDTH_PX = 373;\n/** Hjelpeboblen skal holde avstand til venstre/høyre kant på vinduet */\nconst WINDOW_MARGIN_PX = 12;\n/** Vertikal avstand fra hjelpeboble til kontroller */\nconst BUBBLE_VERTICAL_OFFSET_PX = 16;\n/** Høyde/bredde på pil */\nconst ARROW_WIDTH_PX = 20;\n/** Avstand fra pil til hjelpeboble */\nconst ARROW_VERTICAL_OFFSET_PX = 4;\n/** Pilen skal holde avstand til venstre/høyre kant av hjelpeboblen */\nconst ARROW_HORIZONTAL_MARGIN_PX = 12;\n\n/**\n * Beregn om hjelpeboblen skal vises over eller under kontrolleren\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @param variant Ønsket plassering av hjelpeboblen (over/under/automatisk)\n * @returns Om hjelpeboblen skal vises over eller under\n */\nexport const getVerticalPosition = (\n  controllerSize: DOMRect,\n  bubbleSize: DOMRect,\n  variant: keyof typeof PopOverVariant\n): keyof typeof PopOverVariant => {\n  if (variant !== PopOverVariant.positionautomatic) {\n    return variant;\n  }\n  if (controllerSize.top > bubbleSize.height + BUBBLE_VERTICAL_OFFSET_PX) {\n    return PopOverVariant.positionabove;\n  } else {\n    return PopOverVariant.positionbelow;\n  }\n};\n\n/**\n * Finn horisontalt midtpunkt på kontrolleren i forhold til venstre kant av vinduet\n * @param controllerSize DOMRect for controlleren\n * @returns Horisontalt senter av controlleren i px\n */\nconst getControllerLeftCenterPx = (controllerSize: DOMRect): number => controllerSize.left + controllerSize.width / 2;\n\n/**\n * Finn horisontalt midtpunkt på kontrolleren i forhold til høyre kant av vinduet\n * @param controllerSize DOMRect for controlleren\n * @returns Horisontalt senter av controlleren i px\n */\nconst getControllerRightCenterPx = (controllerSize: DOMRect): number =>\n  document.documentElement.clientWidth - controllerSize.right + controllerSize.width / 2;\n\n/**\n * Finn venstre kant av hjelpeboblen i forhold til kontrolleren\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns Venstre kant av hjelpeboblen i px\n */\nconst getBubbleLeftPx = (controllerSize: DOMRect, bubbleSize: DOMRect): number => {\n  const controllerHorizontalCenterPx = getControllerLeftCenterPx(controllerSize);\n\n  return controllerHorizontalCenterPx - bubbleSize.width / 2;\n};\n\n/**\n * Finn høyre kant av hjelpeboblen i forhold til kontrolleren\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns Høyre kant av hjelpeboblen i px\n */\nconst getBubbleRightPx = (controllerSize: DOMRect, bubbleSize: DOMRect): number => {\n  const bubbleLeftPx = getBubbleLeftPx(controllerSize, bubbleSize);\n\n  return bubbleLeftPx + bubbleSize.width;\n};\n\n/**\n * Sjekk om venstre kant av hjelpeboblen er innenfor vinduet\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns true dersom venstre kant er innenfor vinduet\n */\nconst getBubbleLeftVisible = (controllerSize: DOMRect, bubbleSize: DOMRect): boolean => {\n  const bubbleLeftPx = getBubbleLeftPx(controllerSize, bubbleSize);\n\n  return bubbleLeftPx > WINDOW_MARGIN_PX;\n};\n\n/**\n * Sjekk om høyre kant av hjelpeboblen er innenfor vinduet\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns true dersom høyre kant er innenfor vinduet\n */\nconst getBubbleRightIsVisible = (controllerSize: DOMRect, bubbleSize: DOMRect): boolean => {\n  const bubbleRightPx = getBubbleRightPx(controllerSize, bubbleSize);\n\n  return bubbleRightPx < document.documentElement.clientWidth - WINDOW_MARGIN_PX;\n};\n\n/**\n * Finn riktig horisontal plassering til hjelpeboblen\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns left, right eller floating\n */\nconst getHorizontalPosition = (controllerSize: DOMRect, bubbleSize: DOMRect): HorizontalPosition => {\n  if (!getBubbleRightIsVisible(controllerSize, bubbleSize)) {\n    return 'right';\n  }\n  if (!getBubbleLeftVisible(controllerSize, bubbleSize)) {\n    return 'left';\n  }\n\n  return 'floating';\n};\n\n/**\n * Finn vertikal plassering av hjelpeboblen når den skal vises over\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns \"Top\" for hjelpeboblen i px\n */\nconst getBubbleAbovePx = (controllerSize: DOMRect, bubbleSize: DOMRect): number =>\n  controllerSize.top - BUBBLE_VERTICAL_OFFSET_PX - bubbleSize.height;\n\n/**\n * Finn vertikal plassering av hjelpeboblen når den skal vises under\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns \"Top\" for hjelpeboblen i px\n */\nconst getBubbleBelowPx = (controllerSize: DOMRect): number => controllerSize.bottom + BUBBLE_VERTICAL_OFFSET_PX;\n\n/**\n * Finn maks bredde på hjelpeboblen i forhold til vinduet\n * @returns Bredde på hjelpeboblen i px\n */\nconst getBubbleWidth = (): number => document.documentElement.clientWidth - WINDOW_MARGIN_PX * 2;\n\n/**\n * Sjekk om hjelpeboblen har plass i vinduet\n * @returns true dersom det er plass til hjelpeboblen i vinduet\n */\nconst getBubbleFitsInWindow = (): boolean => {\n  return document.documentElement.clientWidth > BUBBLE_WIDTH_PX + WINDOW_MARGIN_PX * 2;\n};\n\n/**\n * Finn vertikal plassering av pilen når den skal vises over\n * @param controllerSize DOMRect for controlleren\n * @returns \"Top\" for pilen i px\n */\nconst getArrowTopxPx = (controllerSize: DOMRect): number => controllerSize.top - BUBBLE_VERTICAL_OFFSET_PX - ARROW_VERTICAL_OFFSET_PX;\n\n/**\n * Finn horisontal plassering av pilen i forhold til venstre kant av vinduet\n * @param controllerSize DOMRect for controlleren\n * @returns Venstre kant av pilen i px\n */\nconst getArrowLeftPx = (controllerSize: DOMRect): number => getControllerLeftCenterPx(controllerSize) - ARROW_WIDTH_PX / 2;\n\n/**\n * Finn horisontal plassering av pilen\n * @param controllerSize DOMRect for controlleren\n * @returns Venstre kant av pilen i px\n */\nconst getArrowRightPx = (controllerSize: DOMRect): number => getControllerRightCenterPx(controllerSize) - ARROW_WIDTH_PX / 2;\n\n/**\n * Finn riktig plassering av hjelpeboblen\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @param variant Ønsket plassering av hjelpeboblen (over/under)\n * @returns Beste mulige plassering av hjelpeboblen\n */\nconst getBubblePosition = (controllerSize: DOMRect, bubbleSize: DOMRect, variant: keyof typeof PopOverVariant): BubblePosition => {\n  const horizontalPosition = getHorizontalPosition(controllerSize, bubbleSize);\n  const verticalPosition = getVerticalPosition(controllerSize, bubbleSize, variant);\n\n  if (horizontalPosition === 'left') {\n    if (verticalPosition === PopOverVariant.positionabove) {\n      return 'leftabove';\n    }\n    return 'leftbelow';\n  }\n\n  if (horizontalPosition === 'right') {\n    if (verticalPosition === PopOverVariant.positionabove) {\n      return 'rightabove';\n    }\n    return 'rightbelow';\n  }\n\n  if (verticalPosition === PopOverVariant.positionabove) {\n    return 'floatingabove';\n  }\n\n  return 'floatingbelow';\n};\n\n/**\n * Finn riktig plassering av hjelpeboblen\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @param variant Ønsket plassering av hjelpeboblen (over/under)\n * @returns CSSProperties som plasserer hjelpeboblen riktig\n */\nexport const getBubbleStyle = (controllerSize: DOMRect, bubbleSize: DOMRect, variant: keyof typeof PopOverVariant): CSSProperties => {\n  const bubblePosition = getBubblePosition(controllerSize, bubbleSize, variant);\n  const bubbleWidth = !getBubbleFitsInWindow() ? getBubbleWidth() : undefined;\n\n  if (bubblePosition === 'leftabove') {\n    return {\n      left: WINDOW_MARGIN_PX,\n      top: getBubbleAbovePx(controllerSize, bubbleSize),\n      width: bubbleWidth,\n    };\n  }\n  if (bubblePosition === 'leftbelow') {\n    return { left: WINDOW_MARGIN_PX, top: getBubbleBelowPx(controllerSize), width: bubbleWidth };\n  }\n  if (bubblePosition === 'rightabove') {\n    return { right: WINDOW_MARGIN_PX, top: getBubbleAbovePx(controllerSize, bubbleSize), width: bubbleWidth };\n  }\n  if (bubblePosition === 'rightbelow') {\n    return { right: WINDOW_MARGIN_PX, top: getBubbleBelowPx(controllerSize), width: bubbleWidth };\n  }\n\n  if (bubblePosition === 'floatingbelow') {\n    return { left: getBubbleLeftPx(controllerSize, bubbleSize), top: getBubbleBelowPx(controllerSize), width: bubbleWidth };\n  }\n\n  return { left: getBubbleLeftPx(controllerSize, bubbleSize), top: getBubbleAbovePx(controllerSize, bubbleSize), width: bubbleWidth };\n};\n\n/**\n * Finn riktig plassering av pilen\n * @param bubbleStyle CSSProperties for hjelpeboblen\n * @param controllerSize DOMRect for kontrolleren\n * @param verticalPosition Ønsket plassering av hjelpeboblen (over/under)\n * @returns CSSProperties som plasserer pilen riktig\n */\nexport const getArrowStyle = (\n  bubbleStyle: CSSProperties,\n  controllerSize: DOMRect,\n  verticalPosition: keyof typeof PopOverVariant\n): CSSProperties => {\n  const leftPx = getArrowLeftPx(controllerSize);\n  const rightPx = getArrowRightPx(controllerSize);\n  const minLeftPx = (bubbleStyle.left as number) + ARROW_HORIZONTAL_MARGIN_PX;\n  const minRightPx = (bubbleStyle.right as number) + ARROW_HORIZONTAL_MARGIN_PX;\n\n  if (bubbleStyle.right) {\n    if (verticalPosition === PopOverVariant.positionabove) {\n      return {\n        right: rightPx > minRightPx ? rightPx : minRightPx,\n        top: getArrowTopxPx(controllerSize),\n      };\n    }\n\n    return {\n      right: rightPx > minRightPx ? rightPx : minRightPx,\n      top: controllerSize.bottom,\n    };\n  }\n\n  if (verticalPosition === PopOverVariant.positionabove) {\n    return {\n      left: leftPx > minLeftPx ? leftPx : minLeftPx,\n      top: getArrowTopxPx(controllerSize),\n    };\n  }\n\n  return {\n    left: leftPx > minLeftPx ? leftPx : minLeftPx,\n    top: controllerSize.bottom,\n  };\n};\n"],"names":["BUBBLE_WIDTH_PX","WINDOW_MARGIN_PX","BUBBLE_VERTICAL_OFFSET_PX","ARROW_WIDTH_PX","ARROW_VERTICAL_OFFSET_PX","ARROW_HORIZONTAL_MARGIN_PX","getVerticalPosition","controllerSize","bubbleSize","variant","PopOverVariant","getControllerLeftCenterPx","getControllerRightCenterPx","getBubbleLeftPx","getBubbleRightPx","getBubbleLeftVisible","getBubbleRightIsVisible","getHorizontalPosition","getBubbleAbovePx","getBubbleBelowPx","getBubbleWidth","getBubbleFitsInWindow","getArrowTopxPx","getArrowLeftPx","getArrowRightPx","getBubblePosition","horizontalPosition","verticalPosition","getBubbleStyle","bubblePosition","bubbleWidth","getArrowStyle","bubbleStyle","leftPx","rightPx","minLeftPx","minRightPx"],"mappings":"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"}

package/components/Portal/index.js

@@ -1,2 +1,16 @@
-import c from"react";import{createPortal as l}from"react-dom";import{AnalyticsId as n}from"../../constants.js";function p({children:s,parent:e,className:o,testId:i}){const t=c.useMemo(()=>document.createElement("div"),[]);return t.setAttribute("data-analyticsid",n.Portal),i&&t.setAttribute("data-testid",i),c.useEffect(()=>{const a=e&&e.appendChild?e:document.body,d=["portal-container"];return o&&o.split(" ").forEach(r=>d.push(r)),d.forEach(r=>t.classList.add(r)),a.appendChild(t),()=>{a.removeChild(t)}},[t,e,o]),l(s,t)}export{p as default};
+import c from "react";
+import { createPortal as l } from "react-dom";
+import { AnalyticsId as n } from "../../constants.js";
+function p({ children: s, parent: e, className: o, testId: i }) {
+  const t = c.useMemo(() => document.createElement("div"), []);
+  return t.setAttribute("data-analyticsid", n.Portal), i && t.setAttribute("data-testid", i), c.useEffect(() => {
+    const a = e && e.appendChild ? e : document.body, d = ["portal-container"];
+    return o && o.split(" ").forEach((r) => d.push(r)), d.forEach((r) => t.classList.add(r)), a.appendChild(t), () => {
+      a.removeChild(t);
+    };
+  }, [t, e, o]), l(s, t);
+}
+export {
+  p as default
+};
 //# sourceMappingURL=index.js.map

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":"+GAiBA,SAAwBA,EAAO,CAAE,SAAAC,EAAU,OAAAC,EAAQ,UAAAC,EAAW,OAAAC,GAA0C,CAEhG,MAAAC,EAAKC,EAAM,QAAQ,IAAM,SAAS,cAAc,KAAK,EAAG,CAAA,CAAE,EAC7D,OAAAD,EAAA,aAAa,mBAAoBE,EAAY,MAAM,EAClDH,GACCC,EAAA,aAAa,cAAeD,CAAM,EAGvCE,EAAM,UAAU,IAAM,CAEpB,MAAME,EAASN,GAAYA,EAAO,YAAcA,EAAS,SAAS,KAE5DO,EAAY,CAAC,kBAAkB,EAEjC,OAAAN,GAAqBA,EAAA,MAAM,GAAG,EAAE,WAAgBM,EAAU,KAAKC,CAAI,CAAC,EACxED,EAAU,QAAgBC,GAAAL,EAAG,UAAU,IAAIK,CAAI,CAAC,EAEhDF,EAAO,YAAYH,CAAE,EAEd,IAAY,CAEjBG,EAAO,YAAYH,CAAE,CAAA,CAEtB,EAAA,CAACA,EAAIH,EAAQC,CAAS,CAAC,EAEnBQ,EAAaV,EAAUI,CAAE,CAClC"}
+{"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;"}

package/components/RadioButton/RadioButton.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
-import { FormMode, FormVariant } from '../../constants';
+import { FormMode, FormSize } from '../../constants';
 export interface RadioButtonProps extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'aria-describedby' | 'name' | 'value' | 'disabled' | 'defaultChecked' | 'required' | 'onChange'> {
     /** Adds custom classes to the element. */
     className?: string;
-    /** The <Label/> next to the radioButton - sublabels kan ikke kombineres med bigform variant */
+    /** The <Label/> next to the radioButton - sublabels kan ikke kombineres med large variant */
     label: React.ReactNode;
     /** Adds custom classes to the label element. */
     labelClassNames?: string;
@@ -12,7 +12,7 @@ export interface RadioButtonProps extends Pick<React.InputHTMLAttributes<HTMLInp
     /** Changes the visuals of the radioButton */
     mode?: keyof typeof FormMode;
     /** Changes the visuals of the radioButton */
-    variant?: keyof typeof FormVariant;
+    size?: keyof typeof FormSize;
     /** Activates Error style for the radioButton - This is can be true while errorText is empty, when in a FormGroup */
     error?: boolean;
     /** Error text to show above the component */
@@ -20,7 +20,7 @@ export interface RadioButtonProps extends Pick<React.InputHTMLAttributes<HTMLInp
     /** Sets the data-testid attribute. */
     testId?: string;
 }
-export declare const getRadioLabelClasses: (radioId: string, mode: FormMode, bigform: boolean, checkedRadioId?: string) => string | undefined;
+export declare const getRadioLabelClasses: (radioId: string, mode: FormMode, large: boolean, checkedRadioId?: string) => string | undefined;
 export declare const RadioButton: React.ForwardRefExoticComponent<RadioButtonProps & React.RefAttributes<HTMLInputElement>>;
 export default RadioButton;
 //# sourceMappingURL=RadioButton.d.ts.map

package/components/RadioButton/RadioButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.d.ts","sourceRoot":"","sources":["../../../src/components/RadioButton/RadioButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAIxC,OAAO,EAAe,QAAQ,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAQrE,MAAM,WAAW,gBACf,SAAQ,IAAI,CACV,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,kBAAkB,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,gBAAgB,GAAG,UAAU,GAAG,UAAU,CAChG;IACD,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+FAA+F;IAC/F,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,gDAAgD;IAChD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kCAAkC;IAClC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,OAAO,QAAQ,CAAC;IAC7B,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,OAAO,WAAW,CAAC;IACnC,oHAAoH;IACpH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,oBAAoB,YAAa,MAAM,QAAQ,QAAQ,WAAW,OAAO,mBAAmB,MAAM,KAAG,MAAM,GAAG,SAU1H,CAAC;AAEF,eAAO,MAAM,WAAW,2FAoGtB,CAAC;AAIH,eAAe,WAAW,CAAC"}
+{"version":3,"file":"RadioButton.d.ts","sourceRoot":"","sources":["../../../src/components/RadioButton/RadioButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAIxC,OAAO,EAAe,QAAQ,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAQlE,MAAM,WAAW,gBACf,SAAQ,IAAI,CACV,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,kBAAkB,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,gBAAgB,GAAG,UAAU,GAAG,UAAU,CAChG;IACD,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6FAA6F;IAC7F,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,gDAAgD;IAChD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kCAAkC;IAClC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,OAAO,QAAQ,CAAC;IAC7B,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,OAAO,QAAQ,CAAC;IAC7B,oHAAoH;IACpH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,oBAAoB,YAAa,MAAM,QAAQ,QAAQ,SAAS,OAAO,mBAAmB,MAAM,KAAG,MAAM,GAAG,SAUxH,CAAC;AAEF,eAAO,MAAM,WAAW,2FAoGtB,CAAC;AAIH,eAAe,WAAW,CAAC"}

package/components/RadioButton/RadioButton.js

@@ -0,0 +1,102 @@
+import p, { useState as q } from "react";
+import l from "classnames";
+import { FormMode as i, FormSize as D, AnalyticsId as W } from "../../constants.js";
+import { usePseudoClasses as $ } from "../../hooks/usePseudoClasses.js";
+import { isMutableRefObject as G, mergeRefs as H } from "../../utils/refs.js";
+import { uuid as J } from "../../utils/uuid.js";
+import { getLabelText as K, renderLabelAsParent as Q } from "../Label/Label.js";
+import e from "./styles.module.scss";
+const oe = (s, o, r, b) => {
+  const n = o === "oninvalid", a = s === b;
+  return l({
+    [e["radio-button-label__large--on-grey"]]: r && o === "ongrey" && !a,
+    [e["radio-button-label__large--on-blueberry"]]: o === "onblueberry" && !a && r,
+    [e["radio-button-label__large--selected"]]: r && a && !n,
+    [e["radio-button-label__large--selected-invalid"]]: r && a && n
+  });
+}, v = p.forwardRef((s, o) => {
+  const {
+    className: r,
+    defaultChecked: b = !1,
+    onChange: n,
+    disabled: a,
+    label: y,
+    inputId: _ = J(),
+    mode: d = i.onwhite,
+    name: C = _,
+    size: w,
+    errorText: u,
+    error: R = !!u,
+    value: k = K(y),
+    testId: B,
+    required: N,
+    labelClassNames: L,
+    ...S
+  } = s, g = R || d === i.oninvalid, f = d === i.ondark, h = d === i.onblueberry, x = d === i.oninvalid, t = w === D.large, [E, F] = q(b), { refObject: I, isFocused: c } = $(G(o) ? o : null), j = H([o, I]), z = l(e["radio-button-wrapper"], {
+    [e["radio-button-wrapper--with-error"]]: u,
+    [e["radio-button-wrapper__large"]]: t,
+    [e["radio-button-wrapper__large--focused"]]: t && c,
+    [e["radio-button-wrapper__large--selected"]]: t && E && c,
+    [e["radio-button-wrapper__large--invalid"]]: t && x && c,
+    [e["radio-button-wrapper__large--on-blueberry"]]: t && h && c
+  }), A = l(
+    e["radio-button-label"],
+    {
+      [e["radio-button-label--disabled"]]: a,
+      [e["radio-button-label--on-dark"]]: f,
+      [e["radio-button-label--invalid"]]: g,
+      [e["radio-button-label__large"]]: t,
+      [e["radio-button-label__large--disabled"]]: t && a
+    },
+    L
+  ), M = l(
+    e["radio-button"],
+    {
+      [e["radio-button--on-dark"]]: f,
+      [e["radio-button--disabled"]]: a,
+      [e["radio-button--on-blueberry"]]: h,
+      [e["radio-button--invalid"]]: g,
+      [e["radio-button__large"]]: t,
+      [e["radio-button__large--disabled"]]: t && a,
+      [e["radio-button__large--invalid"]]: t && g
+    },
+    r
+  ), O = l(e["radio-button-errors"]), P = (m) => {
+    F(m.target.checked), n && n(m);
+  }, T = () => /* @__PURE__ */ p.createElement(
+    "input",
+    {
+      id: _,
+      name: C,
+      className: M,
+      type: "radio",
+      disabled: a,
+      value: k,
+      ref: j,
+      defaultChecked: b,
+      "aria-describedby": s["aria-describedby"] ?? void 0,
+      required: N,
+      ...S,
+      onChange: (m) => P(m)
+    }
+  );
+  return /* @__PURE__ */ p.createElement("div", { "data-testid": B, "data-analyticsid": W.RadioButton, className: z }, u && /* @__PURE__ */ p.createElement("p", { className: O }, u), Q(
+    y,
+    T(),
+    _,
+    d,
+    a,
+    A,
+    void 0,
+    e["radiobutton-sublabel-wrapper"],
+    t
+  ));
+});
+v.displayName = "RadioButton";
+const re = v;
+export {
+  v as RadioButton,
+  re as default,
+  oe as getRadioLabelClasses
+};
+//# sourceMappingURL=RadioButton.js.map