@helsenorge/designsystem-react 8.4.0 → 8.5.1

package/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  /** 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","jsxs","jsx","Icon","IconSize","PreContainer","children","DateTime","date","time","Calendar","Watch","PanelLayout1","contentA","contentB","contentHeader","ctaContainer","icon","titleElement","panelLayoutClasses","iconClasses","PanelLayout2","lastColumnClass","PanelLayout3","layout","layoutClasses","Panel","React","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/PopOver.js

@@ -0,0 +1,85 @@
+import { jsxs as M, Fragment as U, jsx as L } from "react/jsx-runtime";
+import Z, { useRef as A, useState as k, useEffect as q } from "react";
+import C from "classnames";
+import { ZIndex as J, AnalyticsId as K } from "./constants.js";
+import { useInterval as Q } from "./hooks/useInterval.js";
+import { useIsVisible as Y } from "./hooks/useIsVisible.js";
+import { useLayoutEvent as $ } from "./hooks/useLayoutEvent.js";
+import { useSize as z } from "./hooks/useSize.js";
+import { mergeRefs as S } from "./utils/refs.js";
+import f from "./components/PopOver/styles.module.scss";
+const tt = 373, s = 12, g = 16, O = 20, ot = 4, W = 12, N = (t, o, i) => i !== r.positionautomatic ? i : t.top > o.height + g ? r.positionabove : r.positionbelow, y = (t) => t.left + t.width / 2, et = (t) => document.documentElement.clientWidth - t.right + t.width / 2, b = (t, o) => y(t) - o.width / 2, it = (t, o) => b(t, o) + o.width, nt = (t, o) => b(t, o) > s, rt = (t, o) => it(t, o) < document.documentElement.clientWidth - s, st = (t, o) => rt(t, o) ? nt(t, o) ? "floating" : "left" : "right", d = (t, o) => t.top - g - o.height, w = (t) => t.bottom + g, lt = () => document.documentElement.clientWidth - s * 2, at = () => document.documentElement.clientWidth > tt + s * 2, E = (t) => t.top - g - ot, ct = (t) => y(t) - O / 2, ft = (t) => et(t) - O / 2, ut = (t, o, i) => {
+  const n = st(t, o), e = N(t, o, i);
+  return n === "left" ? e === r.positionabove ? "leftabove" : "leftbelow" : n === "right" ? e === r.positionabove ? "rightabove" : "rightbelow" : e === r.positionabove ? "floatingabove" : "floatingbelow";
+}, pt = (t, o, i) => {
+  const n = ut(t, o, i), e = at() ? void 0 : lt();
+  return n === "leftabove" ? {
+    left: s,
+    top: d(t, o),
+    width: e
+  } : n === "leftbelow" ? { left: s, top: w(t), width: e } : n === "rightabove" ? { right: s, top: d(t, o), width: e } : n === "rightbelow" ? { right: s, top: w(t), width: e } : n === "floatingbelow" ? { left: b(t, o), top: w(t), width: e } : { left: b(t, o), top: d(t, o), width: e };
+}, bt = (t, o, i) => {
+  const n = ct(o), e = ft(o), a = t.left + W, l = t.right + W;
+  return t.right ? i === r.positionabove ? {
+    right: e > l ? e : l,
+    top: E(o)
+  } : {
+    right: e > l ? e : l,
+    top: o.bottom
+  } : i === r.positionabove ? {
+    left: n > a ? n : a,
+    top: E(o)
+  } : {
+    left: n > a ? n : a,
+    top: o.bottom
+  };
+};
+var r = /* @__PURE__ */ ((t) => (t.positionautomatic = "positionautomatic", t.positionbelow = "positionbelow", t.positionabove = "positionabove", t))(r || {});
+const gt = Z.forwardRef((t, o) => {
+  const {
+    id: i,
+    children: n,
+    controllerRef: e,
+    popOverRef: a,
+    show: l = !1,
+    className: T = "",
+    variant: P = "positionautomatic",
+    role: v,
+    testId: F,
+    arrowClassName: H,
+    zIndex: x = J.PopOver
+  } = t, R = a || A(null), X = A(null), u = z(R), [c, V] = k(), _ = Y(e, 0), m = () => {
+    var I;
+    V((I = e.current) == null ? void 0 : I.getBoundingClientRect());
+  };
+  Q(m, 500), $(m, ["scroll", "resize"], 10), q(() => {
+    m();
+  }, []);
+  const B = v === "tooltip", D = C(f.popover, { [f["popover--visible"]]: B ? l : _ }, T), p = c && u && N(c, u, P), j = C(f.popover__arrow, H, {
+    [f["popover__arrow--over"]]: p === "positionbelow",
+    [f["popover__arrow--under"]]: p === "positionabove",
+    [f["popover__arrow--visible"]]: B ? l : _
+  }), h = c && u && pt(c, u, P), G = h && c && p && bt(h, c, p);
+  return /* @__PURE__ */ M(U, { children: [
+    /* @__PURE__ */ L(
+      "div",
+      {
+        id: i,
+        ref: S([o, R]),
+        className: D,
+        style: { ...h, zIndex: x },
+        "data-testid": F,
+        "data-analyticsid": K.PopOver,
+        role: v,
+        children: n
+      }
+    ),
+    /* @__PURE__ */ L("div", { ref: X, className: j, style: { ...G, zIndex: x } })
+  ] });
+});
+gt.displayName = "PopOver";
+export {
+  r as P,
+  gt as a
+};
+//# sourceMappingURL=PopOver.js.map

package/PopOver.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopOver.js","sources":["../src/components/PopOver/utils.ts","../src/components/PopOver/PopOver.tsx"],"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","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":["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","PopOver","React","props","ref","id","children","controllerRef","popOverRef","show","className","role","testId","arrowClassName","zIndex","ZIndex","bubbleRef","useRef","arrowRef","useSize","setControllerSize","useState","controllerisVisible","useIsVisible","updateControllerSize","_a","useInterval","useLayoutEvent","useEffect","isTooltip","popOverClasses","classNames","styles","arrowClasses","arrowStyle","jsxs","Fragment","jsx","mergeRefs","AnalyticsId"],"mappings":"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"}

package/RadioButton.js

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

package/RadioButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButton.js","sources":["../src/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormMode, FormSize } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\nimport { getLabelText, renderLabelAsParent } from '../Label';\n\nimport radioButtonStyles from './styles.module.scss';\n\nexport interface RadioButtonProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    'aria-describedby' | 'name' | 'value' | 'disabled' | 'checked' | 'defaultChecked' | 'required' | 'onChange'\n  > {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The <Label/> next to the radioButton - sublabels kan ikke kombineres med large variant */\n  label: React.ReactNode;\n  /** Adds custom classes to the label element. */\n  labelClassNames?: string;\n  /** input id of the radioButton */\n  inputId?: string;\n  /** Changes the visuals of the radioButton */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the radioButton. Large version only works when used inside a FormGroup wrapper. */\n  size?: keyof typeof FormSize;\n  /** Activates Error style for the radioButton - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const getRadioLabelClasses = (radioId: string, mode: FormMode, large: boolean, checkedRadioId?: string): string | undefined => {\n  const onCherry = mode === 'oninvalid';\n  const checked = radioId === checkedRadioId;\n\n  return classNames({\n    [radioButtonStyles['radio-button-label__large--on-grey']]: large && mode === 'ongrey' && !checked,\n    [radioButtonStyles['radio-button-label__large--on-blueberry']]: mode === 'onblueberry' && !checked && large,\n    [radioButtonStyles['radio-button-label__large--selected']]: large && checked && !onCherry,\n    [radioButtonStyles['radio-button-label__large--selected-invalid']]: large && checked && onCherry,\n  });\n};\n\nexport const RadioButton = React.forwardRef((props: RadioButtonProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    defaultChecked,\n    onChange,\n    disabled,\n    label,\n    inputId = uuid(),\n    mode = FormMode.onwhite,\n    name = inputId,\n    size,\n    errorText,\n    error = !!errorText,\n    errorTextId,\n    value = getLabelText(label),\n    testId,\n    required,\n    labelClassNames,\n    ...rest\n  } = props;\n  const invalid = error || mode === FormMode.oninvalid;\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const onCherry = mode === FormMode.oninvalid;\n  const isLarge = size === FormSize.large;\n  const [checked, changeChecked] = useState<boolean>();\n  const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n  const errorTextUuid = useUuid(errorTextId);\n\n  const radioButtonWrapperClasses = classNames(radioButtonStyles['radio-button-wrapper'], {\n    [radioButtonStyles['radio-button-wrapper--with-error']]: errorText,\n    [radioButtonStyles['radio-button-wrapper__large']]: isLarge,\n    [radioButtonStyles['radio-button-wrapper__large--focused']]: isLarge && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--selected']]: isLarge && checked && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--invalid']]: isLarge && onCherry && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--on-blueberry']]: isLarge && onBlueberry && isFocused,\n  });\n  const radioButtonLabelClasses = classNames(\n    radioButtonStyles['radio-button-label'],\n    {\n      [radioButtonStyles['radio-button-label--disabled']]: disabled,\n      [radioButtonStyles['radio-button-label--on-dark']]: onDark,\n      [radioButtonStyles['radio-button-label--invalid']]: invalid,\n      [radioButtonStyles['radio-button-label__large']]: isLarge,\n      [radioButtonStyles['radio-button-label__large--disabled']]: isLarge && disabled,\n    },\n    labelClassNames\n  );\n  const radioButtonClasses = classNames(\n    radioButtonStyles['radio-button'],\n    {\n      [radioButtonStyles['radio-button--on-dark']]: onDark,\n      [radioButtonStyles['radio-button--disabled']]: disabled,\n      [radioButtonStyles['radio-button--on-blueberry']]: onBlueberry,\n      [radioButtonStyles['radio-button--invalid']]: invalid,\n      [radioButtonStyles['radio-button__large']]: isLarge,\n      [radioButtonStyles['radio-button__large--disabled']]: isLarge && disabled,\n      [radioButtonStyles['radio-button__large--invalid']]: isLarge && invalid,\n    },\n    className\n  );\n\n  const change = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    changeChecked(e.target.checked);\n    onChange && onChange(e);\n  };\n\n  const getLabelContent = (): React.ReactNode => (\n    <input\n      id={inputId}\n      name={name}\n      className={radioButtonClasses}\n      type=\"radio\"\n      disabled={disabled}\n      value={value}\n      ref={mergedRefs}\n      defaultChecked={defaultChecked}\n      aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n      required={required}\n      {...rest}\n      onChange={(e): void => change(e)}\n    />\n  );\n\n  return (\n    <ErrorWrapper errorText={errorText} errorTextId={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.RadioButton} className={radioButtonWrapperClasses}>\n        {renderLabelAsParent(\n          label,\n          getLabelContent(),\n          inputId,\n          mode as FormMode,\n          radioButtonLabelClasses,\n          undefined,\n          radioButtonStyles['radiobutton-sublabel-wrapper'],\n          isLarge\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nRadioButton.displayName = 'RadioButton';\n\nexport default RadioButton;\n"],"names":["getRadioLabelClasses","radioId","mode","large","checkedRadioId","onCherry","checked","classNames","radioButtonStyles","RadioButton","React","props","ref","className","defaultChecked","onChange","disabled","label","inputId","uuid","FormMode","name","size","errorText","error","errorTextId","value","getLabelText","testId","required","labelClassNames","rest","invalid","onDark","onBlueberry","isLarge","FormSize","changeChecked","useState","refObject","isFocused","usePseudoClasses","isMutableRefObject","mergedRefs","mergeRefs","errorTextUuid","useUuid","radioButtonWrapperClasses","radioButtonLabelClasses","radioButtonClasses","change","e","getLabelContent","jsx","getAriaDescribedBy","ErrorWrapper","AnalyticsId","renderLabelAsParent"],"mappings":"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"}

package/Select.js

@@ -0,0 +1,76 @@
+import { jsx as l, jsxs as w } from "react/jsx-runtime";
+import F from "react";
+import n from "classnames";
+import { FormMode as H, AnalyticsId as M, IconSize as U, AVERAGE_CHARACTER_WIDTH_PX as V } from "./constants.js";
+import { useUuid as h } from "./hooks/useUuid.js";
+import { getColor as v } from "./theme/currys/color.js";
+import { getAriaDescribedBy as X } from "./utils/accessibility.js";
+import { E as $ } from "./ErrorWrapper.js";
+import { I as G } from "./Icon.js";
+import L from "./components/Icons/ChevronDown.js";
+import { a as P } from "./Label.js";
+import e from "./components/Select/styles.module.scss";
+const k = (t) => `calc(${t * V}px + 2rem)`, J = (t, r) => r ? v("neutral", 500) : v(t ? "cherry" : "blueberry", 600), ne = F.forwardRef(function(r, i) {
+  const {
+    className: y,
+    children: I,
+    concept: x = "normal",
+    disabled: a,
+    error: S,
+    errorText: c,
+    errorTextId: W,
+    label: g,
+    selectId: d,
+    name: N = d,
+    mode: s = H.onwhite,
+    testId: A,
+    width: m,
+    required: p,
+    value: R,
+    defaultValue: T,
+    autoComplete: u = "off",
+    wrapperClassName: E,
+    ...D
+  } = r, f = h(d), b = h(W), C = s === "onblueberry", o = s === "oninvalid" || !!c || !!S, _ = J(o, !!a), j = m ? k(m) : void 0, q = n(
+    e["select-inner-wrapper"],
+    {
+      [e["select-inner-wrapper--transparent"]]: x === "transparent",
+      [e["select-inner-wrapper--on-blueberry"]]: C,
+      [e["select-inner-wrapper--invalid"]]: o,
+      [e["select-inner-wrapper--disabled"]]: a
+    },
+    y
+  ), z = n(e.select, {
+    [e["select--on-blueberry"]]: C,
+    [e["select--invalid"]]: o
+  }), B = n(e["select-wrapper"], E);
+  return /* @__PURE__ */ l($, { errorText: c, errorTextId: b, children: /* @__PURE__ */ w("div", { "data-testid": A, "data-analyticsid": M.Select, className: B, style: { maxWidth: j }, children: [
+    P(g, f, s),
+    /* @__PURE__ */ w("div", { className: q, children: [
+      /* @__PURE__ */ l(G, { className: e["select-arrow"], svgIcon: L, color: _, size: U.XSmall }),
+      /* @__PURE__ */ l(
+        "select",
+        {
+          "aria-invalid": !!o,
+          id: f,
+          name: N,
+          className: z,
+          disabled: a,
+          ref: i,
+          required: p,
+          "aria-describedby": X(r, b),
+          "aria-required": !!p,
+          value: R,
+          defaultValue: T,
+          autoComplete: u || void 0,
+          ...D,
+          children: I
+        }
+      )
+    ] })
+  ] }) });
+});
+export {
+  ne as S
+};
+//# sourceMappingURL=Select.js.map

package/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sources":["../src/components/Select/Select.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormMode, IconSize } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Icon from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport { renderLabel } from '../Label';\n\nimport selectStyles from './styles.module.scss';\n\ntype SelectConcept = 'normal' | 'transparent';\n\nexport interface SelectProps\n  extends Pick<\n    React.SelectHTMLAttributes<HTMLSelectElement>,\n    'aria-describedby' | 'name' | 'disabled' | 'required' | 'value' | 'onChange' | 'autoComplete'\n  > {\n  /** Sets the content of the select element. */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the visuals of the component */\n  concept?: SelectConcept;\n  /** The label text above the select */\n  label?: React.ReactNode;\n  /** Changes the visuals of the component */\n  mode?: keyof typeof FormMode;\n  /** Activates Error style for the select component - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** select id of the select element */\n  selectId?: string;\n  /** Width of select in characters (approximate) */\n  width?: number;\n  /** Gives defaultvalue to the comp. Preferred over selected prop on option by react */\n  defaultValue?: string | number;\n  /** Adds custom classes to the wrapper tag */\n  wrapperClassName?: string;\n}\n\nconst getSelectMaxWidth = (characters: number): string => {\n  const paddingWidth = '2rem';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth})`;\n};\n\nconst getIconColor = (invalid: boolean, disabled: boolean) => {\n  const iconColor = invalid ? 'cherry' : 'blueberry';\n  return disabled ? getColor('neutral', 500) : getColor(iconColor, 600);\n};\n\nexport const Select = React.forwardRef(function SelectForwardedRef(props: SelectProps, ref: React.Ref<HTMLSelectElement>) {\n  const {\n    className,\n    children,\n    concept = 'normal',\n    disabled,\n    error,\n    errorText,\n    errorTextId,\n    label,\n    selectId,\n    name = selectId,\n    mode = FormMode.onwhite,\n    testId,\n    width,\n    required,\n    value,\n    defaultValue,\n    autoComplete = 'off',\n    wrapperClassName,\n    ...rest\n  } = props;\n\n  const uuid = useUuid(selectId);\n  const errorTextUuid = useUuid(errorTextId);\n  const onBlueberry = mode === 'onblueberry';\n  const invalid = mode === 'oninvalid' || !!errorText || !!error;\n  const iconColor = getIconColor(invalid, !!disabled);\n  const maxWidth = width ? getSelectMaxWidth(width) : undefined;\n\n  const selectInnerWrapperClasses = classNames(\n    selectStyles['select-inner-wrapper'],\n    {\n      [selectStyles['select-inner-wrapper--transparent']]: concept === 'transparent',\n      [selectStyles['select-inner-wrapper--on-blueberry']]: onBlueberry,\n      [selectStyles['select-inner-wrapper--invalid']]: invalid,\n      [selectStyles['select-inner-wrapper--disabled']]: disabled,\n    },\n    className\n  );\n\n  const selectClasses = classNames(selectStyles.select, {\n    [selectStyles['select--on-blueberry']]: onBlueberry,\n    [selectStyles['select--invalid']]: invalid,\n  });\n\n  const selectWrapperClasses = classNames(selectStyles['select-wrapper'], wrapperClassName);\n\n  return (\n    <ErrorWrapper errorText={errorText} errorTextId={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Select} className={selectWrapperClasses} style={{ maxWidth }}>\n        {renderLabel(label, uuid, mode as FormMode)}\n        <div className={selectInnerWrapperClasses}>\n          <Icon className={selectStyles['select-arrow']} svgIcon={ChevronDown} color={iconColor} size={IconSize.XSmall} />\n          <select\n            aria-invalid={!!invalid}\n            id={uuid}\n            name={name}\n            className={selectClasses}\n            disabled={disabled}\n            ref={ref}\n            required={required}\n            aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n            aria-required={!!required}\n            value={value}\n            defaultValue={defaultValue}\n            autoComplete={autoComplete ? autoComplete : undefined}\n            {...rest}\n          >\n            {children}\n          </select>\n        </div>\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nexport default Select;\n"],"names":["getSelectMaxWidth","characters","AVERAGE_CHARACTER_WIDTH_PX","getIconColor","invalid","disabled","getColor","Select","React","props","ref","className","children","concept","error","errorText","errorTextId","label","selectId","name","mode","FormMode","testId","width","required","value","defaultValue","autoComplete","wrapperClassName","rest","uuid","useUuid","errorTextUuid","onBlueberry","iconColor","maxWidth","selectInnerWrapperClasses","classNames","selectStyles","selectClasses","selectWrapperClasses","ErrorWrapper","AnalyticsId","renderLabel","jsxs","jsx","Icon","ChevronDown","IconSize","getAriaDescribedBy"],"mappings":";;;;;;;;;;;;AAkDA,MAAMA,IAAoB,CAACC,MAGlB,QAAQA,IAAaC,CAA0B,cAGlDC,IAAe,CAACC,GAAkBC,MAE/BA,IAAWC,EAAS,WAAW,GAAG,IAAIA,EAD3BF,IAAU,WAAW,aAC0B,GAAG,GAGzDG,KAASC,EAAM,WAAW,SAA4BC,GAAoBC,GAAmC;AAClH,QAAA;AAAA,IACJ,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,UAAAR;AAAA,IACA,OAAAS;AAAA,IACA,WAAAC;AAAA,IACA,aAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC,IAAOD;AAAA,IACP,MAAAE,IAAOC,EAAS;AAAA,IAChB,QAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,cAAAC;AAAA,IACA,cAAAC,IAAe;AAAA,IACf,kBAAAC;AAAA,IACA,GAAGC;AAAA,EACD,IAAApB,GAEEqB,IAAOC,EAAQb,CAAQ,GACvBc,IAAgBD,EAAQf,CAAW,GACnCiB,IAAcb,MAAS,eACvBhB,IAAUgB,MAAS,eAAe,CAAC,CAACL,KAAa,CAAC,CAACD,GACnDoB,IAAY/B,EAAaC,GAAS,CAAC,CAACC,CAAQ,GAC5C8B,IAAWZ,IAAQvB,EAAkBuB,CAAK,IAAI,QAE9Ca,IAA4BC;AAAA,IAChCC,EAAa,sBAAsB;AAAA,IACnC;AAAA,MACE,CAACA,EAAa,mCAAmC,CAAC,GAAGzB,MAAY;AAAA,MACjE,CAACyB,EAAa,oCAAoC,CAAC,GAAGL;AAAA,MACtD,CAACK,EAAa,+BAA+B,CAAC,GAAGlC;AAAA,MACjD,CAACkC,EAAa,gCAAgC,CAAC,GAAGjC;AAAA,IACpD;AAAA,IACAM;AAAA,EAAA,GAGI4B,IAAgBF,EAAWC,EAAa,QAAQ;AAAA,IACpD,CAACA,EAAa,sBAAsB,CAAC,GAAGL;AAAA,IACxC,CAACK,EAAa,iBAAiB,CAAC,GAAGlC;AAAA,EAAA,CACpC,GAEKoC,IAAuBH,EAAWC,EAAa,gBAAgB,GAAGV,CAAgB;AAExF,2BACGa,GAAa,EAAA,WAAA1B,GAAsB,aAAaiB,GAC/C,4BAAC,OAAI,EAAA,eAAaV,GAAQ,oBAAkBoB,EAAY,QAAQ,WAAWF,GAAsB,OAAO,EAAE,UAAAL,EACvG,GAAA,UAAA;AAAA,IAAYQ,EAAA1B,GAAOa,GAAMV,CAAgB;AAAA,IAC1C,gBAAAwB,EAAC,OAAI,EAAA,WAAWR,GACd,UAAA;AAAA,MAAC,gBAAAS,EAAAC,GAAA,EAAK,WAAWR,EAAa,cAAc,GAAG,SAASS,GAAa,OAAOb,GAAW,MAAMc,EAAS,OAAQ,CAAA;AAAA,MAC9G,gBAAAH;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,gBAAc,CAAC,CAACzC;AAAA,UAChB,IAAI0B;AAAA,UACJ,MAAAX;AAAA,UACA,WAAWoB;AAAA,UACX,UAAAlC;AAAA,UACA,KAAAK;AAAA,UACA,UAAAc;AAAA,UACA,oBAAkByB,EAAmBxC,GAAOuB,CAAa;AAAA,UACzD,iBAAe,CAAC,CAACR;AAAA,UACjB,OAAAC;AAAA,UACA,cAAAC;AAAA,UACA,cAAcC,KAA8B;AAAA,UAC3C,GAAGE;AAAA,UAEH,UAAAjB;AAAA,QAAA;AAAA,MACH;AAAA,IAAA,GACF;AAAA,EAAA,EACF,CAAA,EACF,CAAA;AAEJ,CAAC;"}

package/{components/Spacer/Spacer.js → Spacer.js}

@@ -1,9 +1,10 @@
-import e from "react";
-import x from "classnames";
-import { AnalyticsId as o } from "../../constants.js";
-import s from "../Spacer/styles.module.scss";
-const u = e.forwardRef(function(r, c) {
-  const { size: a = "s", className: p, testId: l } = r, t = x(
+import { jsx as l } from "react/jsx-runtime";
+import t from "react";
+import o from "classnames";
+import { AnalyticsId as m } from "./constants.js";
+import s from "./components/Spacer/styles.module.scss";
+const N = t.forwardRef(function(r, e) {
+  const { size: a = "s", className: c, testId: p } = r, x = o(
     s.spacer,
     {
       [s["spacer--4xs"]]: a === "4xs",
@@ -20,11 +21,11 @@ const u = e.forwardRef(function(r, c) {
       [s["spacer--5xl"]]: a === "5xl",
       [s["spacer--6xl"]]: a === "6xl"
     },
-    p
+    c
   );
-  return /* @__PURE__ */ e.createElement("span", { className: t, ref: c, "data-testid": l, "data-analyticsid": o.Spacer });
+  return /* @__PURE__ */ l("span", { className: x, ref: e, "data-testid": p, "data-analyticsid": m.Spacer });
 });
 export {
-  u as default
+  N as S
 };
 //# sourceMappingURL=Spacer.js.map

package/Spacer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spacer.js","sources":["../src/components/Spacer/Spacer.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { SpacerSizes } from './../../theme/spacers';\nimport { AnalyticsId } from '../../constants';\n\nimport spacerStyles from './styles.module.scss';\n\nexport interface SpacerProps {\n  /** Sets the size of the spacer. */\n  size?: SpacerSizes;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Spacer = React.forwardRef(function SpacerForwardedRef(props: SpacerProps, ref: React.ForwardedRef<HTMLElement>) {\n  const { size = 's', className, testId } = props;\n  const spacerClasses = classNames(\n    spacerStyles.spacer,\n    {\n      [spacerStyles['spacer--4xs']]: size === '4xs',\n      [spacerStyles['spacer--3xs']]: size === '3xs',\n      [spacerStyles['spacer--2xs']]: size === '2xs',\n      [spacerStyles['spacer--xs']]: size === 'xs',\n      [spacerStyles['spacer--s']]: size === 's',\n      [spacerStyles['spacer--m']]: size === 'm',\n      [spacerStyles['spacer--l']]: size === 'l',\n      [spacerStyles['spacer--xl']]: size === 'xl',\n      [spacerStyles['spacer--2xl']]: size === '2xl',\n      [spacerStyles['spacer--3xl']]: size === '3xl',\n      [spacerStyles['spacer--4xl']]: size === '4xl',\n      [spacerStyles['spacer--5xl']]: size === '5xl',\n      [spacerStyles['spacer--6xl']]: size === '6xl',\n    },\n    className\n  );\n\n  return <span className={spacerClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Spacer}></span>;\n});\n\nexport default Spacer;\n"],"names":["Spacer","React","props","ref","size","className","testId","spacerClasses","classNames","spacerStyles","jsx","AnalyticsId"],"mappings":";;;;;AAkBA,MAAMA,IAASC,EAAM,WAAW,SAA4BC,GAAoBC,GAAsC;AACpH,QAAM,EAAE,MAAAC,IAAO,KAAK,WAAAC,GAAW,QAAAC,MAAWJ,GACpCK,IAAgBC;AAAA,IACpBC,EAAa;AAAA,IACb;AAAA,MACE,CAACA,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,MACxC,CAACK,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,MACxC,CAACK,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,MACxC,CAACK,EAAa,YAAY,CAAC,GAAGL,MAAS;AAAA,MACvC,CAACK,EAAa,WAAW,CAAC,GAAGL,MAAS;AAAA,MACtC,CAACK,EAAa,WAAW,CAAC,GAAGL,MAAS;AAAA,MACtC,CAACK,EAAa,WAAW,CAAC,GAAGL,MAAS;AAAA,MACtC,CAACK,EAAa,YAAY,CAAC,GAAGL,MAAS;AAAA,MACvC,CAACK,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,MACxC,CAACK,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,MACxC,CAACK,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,MACxC,CAACK,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,MACxC,CAACK,EAAa,aAAa,CAAC,GAAGL,MAAS;AAAA,IAC1C;AAAA,IACAC;AAAA,EAAA;AAGK,SAAA,gBAAAK,EAAC,UAAK,WAAWH,GAAe,KAAAJ,GAAU,eAAaG,GAAQ,oBAAkBK,EAAY,OAAQ,CAAA;AAC9G,CAAC;"}

package/StatusDot.js

@@ -0,0 +1,33 @@
+import { jsxs as _, jsx as e } from "react/jsx-runtime";
+import l from "classnames";
+import "./theme/grid.js";
+import "./hooks/useBreakpoint.js";
+import "react";
+import { FormMode as i, AnalyticsId as w, IconSize as v } from "./constants.js";
+import { getColor as m } from "./theme/currys/color.js";
+import { I as a } from "./Icon.js";
+import C from "./components/Icons/Attachment.js";
+import N from "./components/Icons/Change.js";
+import b from "./components/Icons/Group.js";
+import x from "./components/Icons/NoAccess.js";
+import n from "./components/StatusDot/styles.module.scss";
+var c = ((o) => (o[o.onwhite = i.onwhite] = "onwhite", o[o.ondark = i.ondark] = "ondark", o))(c || {}), y = /* @__PURE__ */ ((o) => (o.info = "info", o.warning = "warning", o.alert = "alert", o.cancelled = "cancelled", o.active = "active", o.transparent = "transparent", o.recurring = "recurring", o.group = "group", o.noaccess = "noaccess", o.attachment = "attachment", o))(y || {});
+const A = ({ mode: o, variant: s }) => {
+  const r = { color: o === c.ondark ? m("white") : m("black"), size: v.XXSmall, mode: o };
+  return s === "recurring" ? /* @__PURE__ */ e(a, { ...r, svgIcon: N }) : s === "group" ? /* @__PURE__ */ e(a, { ...r, svgIcon: b }) : s === "noaccess" ? /* @__PURE__ */ e(a, { ...r, svgIcon: x, color: m("cherry", 600) }) : s === "attachment" ? /* @__PURE__ */ e(a, { ...r, svgIcon: C }) : null;
+}, L = (o) => {
+  const { id: s, mode: t = c.onwhite, variant: r = "info", text: d, className: p, testId: f } = o, u = r === "recurring" || r === "group" || r === "noaccess" || r === "attachment", g = r === "cancelled", h = l(n.statusdot, g && n["statusdot--cancelled"], p), I = l(n.statusdot__dot, {
+    ...u ? {} : { [n[`statusdot__dot--${r}`]]: !0 },
+    [n["statusdot__dot--on-dark"]]: t === c.ondark
+  }), k = l(t === c.ondark && n["statusdot__label--on-dark"]);
+  return /* @__PURE__ */ _("span", { id: s, className: h, "data-testid": f, "data-analyticsid": w.StatusDot, children: [
+    /* @__PURE__ */ e("span", { className: I, children: /* @__PURE__ */ e(A, { mode: t, variant: r }) }),
+    /* @__PURE__ */ e("span", { className: k, children: d })
+  ] });
+};
+export {
+  L as S,
+  c as a,
+  y as b
+};
+//# sourceMappingURL=StatusDot.js.map

package/StatusDot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusDot.js","sources":["../src/components/StatusDot/StatusDot.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { IconSize } from '../..';\nimport { AnalyticsId, FormMode } from '../../constants';\nimport { getColor } from '../../theme/currys';\nimport { Icon } from '../Icon';\nimport Attachment from '../Icons/Attachment';\nimport Change from '../Icons/Change';\nimport Group from '../Icons/Group';\nimport NoAccess from '../Icons/NoAccess';\n\nimport styles from './styles.module.scss';\n\nexport enum StatusDotModes {\n  onwhite = FormMode.onwhite,\n  ondark = FormMode.ondark,\n}\n\nexport enum StatusDotVariant {\n  info = 'info',\n  warning = 'warning',\n  alert = 'alert',\n  cancelled = 'cancelled',\n  active = 'active',\n  transparent = 'transparent',\n  recurring = 'recurring',\n  group = 'group',\n  noaccess = 'noaccess',\n  attachment = 'attachment',\n}\n\nexport interface StatusDotIconProps {\n  /** Defines the color of the icon */\n  mode?: keyof typeof StatusDotModes;\n  /** The variant defines style formatting and what icon to use */\n  variant?: keyof typeof StatusDotVariant;\n}\n\nconst StatusDotIcon: React.FC<StatusDotIconProps> = ({ mode, variant }) => {\n  const color = mode === StatusDotModes.ondark ? getColor('white') : getColor('black');\n  const iconProps = { color, size: IconSize.XXSmall, mode };\n\n  if (variant === StatusDotVariant.recurring) {\n    return <Icon {...iconProps} svgIcon={Change} />;\n  } else if (variant === StatusDotVariant.group) {\n    return <Icon {...iconProps} svgIcon={Group} />;\n  } else if (variant === StatusDotVariant.noaccess) {\n    return <Icon {...iconProps} svgIcon={NoAccess} color={getColor('cherry', 600)} />;\n  } else if (variant === StatusDotVariant.attachment) {\n    return <Icon {...iconProps} svgIcon={Attachment} />;\n  }\n\n  return null;\n};\n\nexport interface StatusDotProps {\n  /** id that is placed on the wrapper */\n  id?: string;\n  /** Defines the color mode, onwhite, ondark etc. */\n  mode?: keyof typeof StatusDotModes;\n  /** Visual variants for the statusdot */\n  variant?: keyof typeof StatusDotVariant;\n  /** Text placed to the right of the statusdot */\n  text: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst StatusDot: React.FC<StatusDotProps> = props => {\n  const { id, mode = StatusDotModes.onwhite, variant = StatusDotVariant.info, text, className, testId } = props;\n\n  const hasIcon =\n    variant === StatusDotVariant.recurring ||\n    variant === StatusDotVariant.group ||\n    variant === StatusDotVariant.noaccess ||\n    variant === StatusDotVariant.attachment;\n\n  const isCancelled = variant === StatusDotVariant.cancelled;\n\n  const statusDotClasses = classNames(styles['statusdot'], isCancelled && styles['statusdot--cancelled'], className);\n  const dotClasses = classNames(styles['statusdot__dot'], {\n    ...(hasIcon ? {} : { [styles[`statusdot__dot--${variant}`]]: true }),\n    [styles['statusdot__dot--on-dark']]: mode === StatusDotModes.ondark,\n  });\n  const labelClasses = classNames(mode === StatusDotModes.ondark && styles['statusdot__label--on-dark']);\n\n  return (\n    <span id={id} className={statusDotClasses} data-testid={testId} data-analyticsid={AnalyticsId.StatusDot}>\n      <span className={dotClasses}>\n        <StatusDotIcon mode={mode} variant={variant} />\n      </span>\n      <span className={labelClasses}>{text}</span>\n    </span>\n  );\n};\n\nexport default StatusDot;\n"],"names":["StatusDotModes","FormMode","StatusDotVariant","StatusDotIcon","mode","variant","iconProps","getColor","IconSize","jsx","Icon","Change","Group","NoAccess","Attachment","StatusDot","props","id","text","className","testId","hasIcon","isCancelled","statusDotClasses","classNames","styles","dotClasses","labelClasses","jsxs","AnalyticsId"],"mappings":";;;;;;;;;;;;;AAeY,IAAAA,KAAL,CAAKA,OACVA,EAAAA,EAAA,UAAUC,EAAS,OAAnB,IAAA,WACAD,EAAAA,EAAA,SAASC,EAAS,MAAlB,IAAA,UAFUD,IAAAA,KAAA,CAAA,CAAA,GAKAE,sBAAAA,OACVA,EAAA,OAAO,QACPA,EAAA,UAAU,WACVA,EAAA,QAAQ,SACRA,EAAA,YAAY,aACZA,EAAA,SAAS,UACTA,EAAA,cAAc,eACdA,EAAA,YAAY,aACZA,EAAA,QAAQ,SACRA,EAAA,WAAW,YACXA,EAAA,aAAa,cAVHA,IAAAA,KAAA,CAAA,CAAA;AAoBZ,MAAMC,IAA8C,CAAC,EAAE,MAAAC,GAAM,SAAAC,QAAc;AAEzE,QAAMC,IAAY,EAAE,OADNF,MAASJ,EAAe,SAASO,EAAS,OAAO,IAAIA,EAAS,OAAO,GACxD,MAAMC,EAAS,SAAS,MAAAJ;AAEnD,SAAIC,MAAY,cACN,gBAAAI,EAAAC,GAAA,EAAM,GAAGJ,GAAW,SAASK,EAAQ,CAAA,IACpCN,MAAY,UACb,gBAAAI,EAAAC,GAAA,EAAM,GAAGJ,GAAW,SAASM,EAAO,CAAA,IACnCP,MAAY,aACd,gBAAAI,EAACC,GAAM,EAAA,GAAGJ,GAAW,SAASO,GAAU,OAAON,EAAS,UAAU,GAAG,EAAG,CAAA,IACtEF,MAAY,eACb,gBAAAI,EAAAC,GAAA,EAAM,GAAGJ,GAAW,SAASQ,EAAY,CAAA,IAG5C;AACT,GAiBMC,IAAsC,CAASC,MAAA;AAC7C,QAAA,EAAE,IAAAC,GAAI,MAAAb,IAAOJ,EAAe,SAAS,SAAAK,IAAU,QAAuB,MAAAa,GAAM,WAAAC,GAAW,QAAAC,EAAA,IAAWJ,GAElGK,IACJhB,MAAY,eACZA,MAAY,WACZA,MAAY,cACZA,MAAY,cAERiB,IAAcjB,MAAY,aAE1BkB,IAAmBC,EAAWC,EAAO,WAAcH,KAAeG,EAAO,sBAAsB,GAAGN,CAAS,GAC3GO,IAAaF,EAAWC,EAAO,gBAAmB;AAAA,IACtD,GAAIJ,IAAU,KAAK,EAAE,CAACI,EAAO,mBAAmBpB,CAAO,EAAE,CAAC,GAAG,GAAK;AAAA,IAClE,CAACoB,EAAO,yBAAyB,CAAC,GAAGrB,MAASJ,EAAe;AAAA,EAAA,CAC9D,GACK2B,IAAeH,EAAWpB,MAASJ,EAAe,UAAUyB,EAAO,2BAA2B,CAAC;AAGnG,SAAA,gBAAAG,EAAC,UAAK,IAAAX,GAAQ,WAAWM,GAAkB,eAAaH,GAAQ,oBAAkBS,EAAY,WAC5F,UAAA;AAAA,IAAA,gBAAApB,EAAC,UAAK,WAAWiB,GACf,4BAACvB,GAAc,EAAA,MAAAC,GAAY,SAAAC,GAAkB,EAC/C,CAAA;AAAA,IACC,gBAAAI,EAAA,QAAA,EAAK,WAAWkB,GAAe,UAAKT,GAAA;AAAA,EACvC,EAAA,CAAA;AAEJ;"}

package/StepButtons.js

@@ -0,0 +1,28 @@
+import { jsxs as i, jsx as l } from "react/jsx-runtime";
+import r from "react";
+import a from "classnames";
+import { AnalyticsId as p } from "./constants.js";
+import t from "./components/StepButtons/styles.module.scss";
+const B = (u) => {
+  const { backButton: s, forwardButton: n, additionalButtons: e, cancelButton: o, sticky: c = !1, testId: d } = u, m = a(t.stepbuttons, c && t["stepbuttons--has-sticky-buttons"]);
+  return s || n || e || o ? /* @__PURE__ */ i("div", { className: m, "data-testid": d, "data-analyticsid": p.StepButtons, children: [
+    (s || n) && /* @__PURE__ */ i("div", { className: t.stepbuttons__buttons, children: [
+      s && r.cloneElement(s, {
+        variant: "outline",
+        wrapperClassName: a(t["stepbuttons__button--back"])
+      }),
+      n && r.cloneElement(n, {
+        variant: "fill",
+        wrapperClassName: a(t["stepbuttons__button--forward"])
+      })
+    ] }),
+    e && /* @__PURE__ */ l("div", { className: a(t.stepbuttons__buttons, t["stepbuttons__buttons--additional"]), children: e }),
+    o && /* @__PURE__ */ l("div", { className: t.stepbuttons__buttons, children: r.cloneElement(o, {
+      variant: "borderless"
+    }) })
+  ] }) : null;
+};
+export {
+  B as S
+};
+//# sourceMappingURL=StepButtons.js.map

package/StepButtons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepButtons.js","sources":["../src/components/StepButtons/StepButtons.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { ButtonProps } from '../Button';\n\nimport styles from './styles.module.scss';\n\nexport interface StepButtonsProps {\n  /** Knapp for å gå tilbake. Vises med \"outline\" variant. */\n  backButton?: React.ReactElement<ButtonProps>;\n  /** Knapp for å gå videre. Vises med \"fill\" variant. */\n  forwardButton?: React.ReactElement<ButtonProps>;\n  /** Ekstra knapper. Valgfritt utseende. */\n  additionalButtons?: React.ReactElement<ButtonProps>[];\n  /** Knapp for å avbryte eller fortsette senere. Vises med \"borderless\" variant. */\n  cancelButton?: React.ReactElement<ButtonProps>;\n  /** Knappene vil vises sticky nederst på skjermen. Default: false  */\n  sticky?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const StepButtons: React.FC<StepButtonsProps> = props => {\n  const { backButton, forwardButton, additionalButtons, cancelButton, sticky = false, testId } = props;\n\n  const navigationClasses = classNames(styles.stepbuttons, sticky && styles['stepbuttons--has-sticky-buttons']);\n\n  if (backButton || forwardButton || additionalButtons || cancelButton) {\n    return (\n      <div className={navigationClasses} data-testid={testId} data-analyticsid={AnalyticsId.StepButtons}>\n        {(backButton || forwardButton) && (\n          <div className={styles.stepbuttons__buttons}>\n            {backButton &&\n              React.cloneElement(backButton, {\n                variant: 'outline',\n                wrapperClassName: classNames(styles['stepbuttons__button--back']),\n              })}\n            {forwardButton &&\n              React.cloneElement(forwardButton, {\n                variant: 'fill',\n                wrapperClassName: classNames(styles['stepbuttons__button--forward']),\n              })}\n          </div>\n        )}\n        {additionalButtons && (\n          <div className={classNames(styles.stepbuttons__buttons, styles['stepbuttons__buttons--additional'])}>{additionalButtons}</div>\n        )}\n        {cancelButton && (\n          <div className={styles.stepbuttons__buttons}>\n            {React.cloneElement(cancelButton, {\n              variant: 'borderless',\n            })}\n          </div>\n        )}\n      </div>\n    );\n  }\n  return null;\n};\n\nexport default StepButtons;\n"],"names":["StepButtons","props","backButton","forwardButton","additionalButtons","cancelButton","sticky","testId","navigationClasses","classNames","styles","jsxs","AnalyticsId","React","jsx"],"mappings":";;;;;AAwBO,MAAMA,IAA0C,CAASC,MAAA;AACxD,QAAA,EAAE,YAAAC,GAAY,eAAAC,GAAe,mBAAAC,GAAmB,cAAAC,GAAc,QAAAC,IAAS,IAAO,QAAAC,EAAW,IAAAN,GAEzFO,IAAoBC,EAAWC,EAAO,aAAaJ,KAAUI,EAAO,iCAAiC,CAAC;AAExG,SAAAR,KAAcC,KAAiBC,KAAqBC,IAEpD,gBAAAM,EAAC,SAAI,WAAWH,GAAmB,eAAaD,GAAQ,oBAAkBK,EAAY,aAClF,UAAA;AAAA,KAAAV,KAAcC,MACd,gBAAAQ,EAAC,OAAI,EAAA,WAAWD,EAAO,sBACpB,UAAA;AAAA,MACCR,KAAAW,EAAM,aAAaX,GAAY;AAAA,QAC7B,SAAS;AAAA,QACT,kBAAkBO,EAAWC,EAAO,2BAA2B,CAAC;AAAA,MAAA,CACjE;AAAA,MACFP,KACCU,EAAM,aAAaV,GAAe;AAAA,QAChC,SAAS;AAAA,QACT,kBAAkBM,EAAWC,EAAO,8BAA8B,CAAC;AAAA,MAAA,CACpE;AAAA,IAAA,GACL;AAAA,IAEDN,KACE,gBAAAU,EAAA,OAAA,EAAI,WAAWL,EAAWC,EAAO,sBAAsBA,EAAO,kCAAkC,CAAC,GAAI,UAAkBN,EAAA,CAAA;AAAA,IAEzHC,uBACE,OAAI,EAAA,WAAWK,EAAO,sBACpB,UAAAG,EAAM,aAAaR,GAAc;AAAA,MAChC,SAAS;AAAA,IACV,CAAA,GACH;AAAA,EAEJ,EAAA,CAAA,IAGG;AACT;"}