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

package/components/RadioButton/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 { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport { uuid } from '../../utils/uuid';\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' | '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 */\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  /** 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 = false,\n    onChange,\n    disabled,\n    label,\n    inputId = uuid(),\n    mode = FormMode.onwhite,\n    name = inputId,\n    size,\n    errorText,\n    error = !!errorText,\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>(defaultChecked);\n  const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\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  const errorStyles = classNames(radioButtonStyles['radio-button-errors']);\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={props['aria-describedby'] ?? undefined}\n      required={required}\n      {...rest}\n      onChange={(e): void => change(e)}\n    />\n  );\n\n  return (\n    <div data-testid={testId} data-analyticsid={AnalyticsId.RadioButton} className={radioButtonWrapperClasses}>\n      {errorText && <p className={errorStyles}>{errorText}</p>}\n      {renderLabelAsParent(\n        label,\n        getLabelContent(),\n        inputId,\n        mode as FormMode,\n        disabled,\n        radioButtonLabelClasses,\n        undefined,\n        radioButtonStyles['radiobutton-sublabel-wrapper'],\n        isLarge\n      )}\n    </div>\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","value","getLabelText","testId","required","labelClassNames","rest","invalid","onDark","onBlueberry","isLarge","FormSize","changeChecked","useState","refObject","isFocused","usePseudoClasses","isMutableRefObject","mergedRefs","mergeRefs","radioButtonWrapperClasses","radioButtonLabelClasses","radioButtonClasses","errorStyles","change","e","getLabelContent","AnalyticsId","renderLabelAsParent","RadioButton$1"],"mappings":"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"}

package/components/RadioButton/index.js

@@ -1,2 +1,8 @@
-import{R as t}from"../../RadioButton.js";import{a as D,g as E}from"../../RadioButton.js";import"react";import"classnames";import"../../constants.js";import"../../hooks/usePseudoClasses.js";import"../../utils/refs.js";import"../../uuid.js";import"../../utils/environment.js";import"../../Label.js";import"../../Spacer.js";import"../Spacer/styles.module.scss";import"../Label/styles.module.scss";import"../../utils/component.js";import"../../StatusDot.js";import"../../theme/grid.js";import"../../hooks/useBreakpoint.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../Icons/Attachment.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../Icons/Group.js";import"../Icons/NoAccess.js";import"../Icons/Undo.js";import"../StatusDot/styles.module.scss";import"./styles.module.scss";export{D as RadioButton,t as default,E as getRadioLabelClasses};
+import t from "./RadioButton.js";
+import { RadioButton as r, getRadioLabelClasses as d } from "./RadioButton.js";
+export {
+  r as RadioButton,
+  t as default,
+  d as getRadioLabelClasses
+};
 //# sourceMappingURL=index.js.map

package/components/RadioButton/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/RadioButton/styles.module.scss

@@ -26,11 +26,11 @@
     }
   }
 
-  &--with-error#{&}__bigform {
+  &--with-error#{&}__large {
     padding: getSpacer(m) getSpacer(m);
   }
 
-  &__bigform {
+  &__large {
     margin: getSpacer(2xs) 0 getSpacer(2xs) 0;
 
     &--focused {
@@ -78,7 +78,7 @@
     color: $neutral700;
   }
 
-  &__bigform {
+  &__large {
     padding: getSpacer(s);
     background-color: $neutral50;
 
@@ -111,17 +111,17 @@
     }
   }
 
-  &__bigform#{&}--on-dark {
+  &__large#{&}--on-dark {
     background-color: $blueberry800;
   }
-  &__bigform#{&}--invalid {
+  &__large#{&}--invalid {
     background-color: $white;
 
     &:hover {
       background-color: $cherry100;
     }
   }
-  &__bigform#{&}__bigform--selected-invalid {
+  &__large#{&}__large--selected-invalid {
     background-color: $cherry100;
     color: $black;
 
@@ -130,7 +130,7 @@
     }
   }
 
-  &__bigform#{&}__bigform--disabled {
+  &__large#{&}__large--disabled {
     background-color: $neutral50;
 
     &:hover {
@@ -141,7 +141,7 @@
       background-color: $neutral50;
     }
   }
-  &__bigform#{&}__bigform--on-grey {
+  &__large#{&}__large--on-grey {
     background-color: $white;
 
     &:hover {
@@ -153,7 +153,7 @@
     }
   }
 
-  &__bigform#{&}__bigform--on-blueberry {
+  &__large#{&}__large--on-blueberry {
     background-color: $white;
 
     &:hover {
@@ -165,7 +165,7 @@
     }
   }
 
-  &__bigform--selected {
+  &__large--selected {
     background-color: $blueberry500;
     color: $white;
 
@@ -175,7 +175,7 @@
   }
 
   @media (min-width: map.get($grid-breakpoints, md)) {
-    &__bigform {
+    &__large {
       padding: 1.68rem getSpacer(l);
     }
   }
@@ -346,7 +346,7 @@
     background-color: $cherry600;
   }
 
-  &__bigform {
+  &__large {
     &:checked {
       outline: none;
       color: $blueberry100;

package/components/RadioButton/styles.module.scss.d.ts

@@ -1,29 +1,29 @@
 export type Styles = {
   'radio-button': string;
-  'radio-button__bigform': string;
-  'radio-button__bigform--disabled': string;
-  'radio-button__bigform--invalid': string;
+  'radio-button__large': string;
+  'radio-button__large--disabled': string;
+  'radio-button__large--invalid': string;
   'radio-button--disabled': string;
   'radio-button--invalid': string;
   'radio-button--on-blueberry': string;
   'radio-button--on-dark': string;
   'radio-button-errors': string;
   'radio-button-label': string;
-  'radio-button-label__bigform': string;
-  'radio-button-label__bigform--disabled': string;
-  'radio-button-label__bigform--on-blueberry': string;
-  'radio-button-label__bigform--on-grey': string;
-  'radio-button-label__bigform--selected': string;
-  'radio-button-label__bigform--selected-invalid': string;
+  'radio-button-label__large': string;
+  'radio-button-label__large--disabled': string;
+  'radio-button-label__large--on-blueberry': string;
+  'radio-button-label__large--on-grey': string;
+  'radio-button-label__large--selected': string;
+  'radio-button-label__large--selected-invalid': string;
   'radio-button-label--disabled': string;
   'radio-button-label--invalid': string;
   'radio-button-label--on-dark': string;
   'radio-button-wrapper': string;
-  'radio-button-wrapper__bigform': string;
-  'radio-button-wrapper__bigform--focused': string;
-  'radio-button-wrapper__bigform--invalid': string;
-  'radio-button-wrapper__bigform--on-blueberry': string;
-  'radio-button-wrapper__bigform--selected': string;
+  'radio-button-wrapper__large': string;
+  'radio-button-wrapper__large--focused': string;
+  'radio-button-wrapper__large--invalid': string;
+  'radio-button-wrapper__large--on-blueberry': string;
+  'radio-button-wrapper__large--selected': string;
   'radio-button-wrapper--with-error': string;
   'radiobutton-sublabel-wrapper': string;
 };

package/components/Select/Select.js

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

package/components/Select/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 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'\n  > {\n  /** Component shown after label */\n  afterLabelChildren?: React.ReactNode;\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  /** 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}\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    afterLabelChildren,\n    className,\n    children,\n    concept = 'normal',\n    disabled,\n    error,\n    errorText,\n    label,\n    selectId,\n    name = selectId,\n    mode = FormMode.onwhite,\n    testId,\n    width,\n    required,\n    value,\n    defaultValue,\n    ...rest\n  } = props;\n\n  const uuid = useUuid(selectId);\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  return (\n    <ErrorWrapper errorText={errorText}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Select} className={selectStyles['select-wrapper']} style={{ maxWidth }}>\n        {renderLabel(label, uuid, mode as FormMode, disabled)}\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={props['aria-describedby'] ?? undefined}\n            aria-required={!!required}\n            value={value}\n            defaultValue={defaultValue}\n            {...rest}\n          >\n            {children}\n          </select>\n        </div>\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nexport default Select;\n"],"names":["getSelectMaxWidth","characters","paddingWidth","AVERAGE_CHARACTER_WIDTH_PX","getIconColor","invalid","disabled","getColor","Select","React","props","ref","afterLabelChildren","className","children","concept","error","errorText","label","selectId","name","mode","FormMode","testId","width","required","value","defaultValue","rest","uuid","useUuid","onBlueberry","iconColor","maxWidth","selectInnerWrapperClasses","classNames","selectStyles","selectClasses","ErrorWrapper","AnalyticsId","renderLabel","Icon","ChevronDown","IconSize","Select$1"],"mappings":";;;;;;;;;;AA+CA,MAAMA,IAAoB,CAACC,MAA+B;AACxD,QAAMC,IAAe;AAErB,SAAO,QAAQD,IAAaE,CAA0B,QAAQD,CAAY;AAC5E,GAEME,IAAe,CAACC,GAAkBC,MAE/BA,IAAWC,EAAS,WAAW,GAAG,IAAIA,EAD3BF,IAAU,WAAW,aAC0B,GAAG,GAGzDG,IAASC,EAAM,WAAW,SAA4BC,GAAoBC,GAAmC;AAClH,QAAA;AAAA,IACJ,oBAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,UAAAT;AAAA,IACA,OAAAU;AAAA,IACA,WAAAC;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,GAAGC;AAAA,EACD,IAAAlB,GAEEmB,IAAOC,EAAQX,CAAQ,GACvBY,IAAcV,MAAS,eACvBhB,IAAUgB,MAAS,eAAe,CAAC,CAACJ,KAAa,CAAC,CAACD,GACnDgB,IAAY5B,EAAaC,GAAS,CAAC,CAACC,CAAQ,GAC5C2B,IAAWT,IAAQxB,EAAkBwB,CAAK,IAAI,QAE9CU,IAA4BC;AAAA,IAChCC,EAAa,sBAAsB;AAAA,IACnC;AAAA,MACE,CAACA,EAAa,mCAAmC,CAAC,GAAGrB,MAAY;AAAA,MACjE,CAACqB,EAAa,oCAAoC,CAAC,GAAGL;AAAA,MACtD,CAACK,EAAa,+BAA+B,CAAC,GAAG/B;AAAA,MACjD,CAAC+B,EAAa,gCAAgC,CAAC,GAAG9B;AAAA,IACpD;AAAA,IACAO;AAAA,EAAA,GAGIwB,IAAgBF,EAAWC,EAAa,QAAQ;AAAA,IACpD,CAACA,EAAa,sBAAsB,CAAC,GAAGL;AAAA,IACxC,CAACK,EAAa,iBAAiB,CAAC,GAAG/B;AAAA,EAAA,CACpC;AAED,yCACGiC,GAAa,EAAA,WAAArB,EAAA,mCACX,OAAI,EAAA,eAAaM,GAAQ,oBAAkBgB,EAAY,QAAQ,WAAWH,EAAa,gBAAgB,GAAG,OAAO,EAAE,UAAAH,OACjHO,EAAYtB,GAAOW,GAAMR,GAAkBf,CAAQ,GACpD,gBAAAG,EAAA,cAAC,SAAI,WAAWyB,qCACbO,GAAK,EAAA,WAAWL,EAAa,cAAc,GAAG,SAASM,GAAa,OAAOV,GAAW,MAAMW,EAAS,QAAQ,GAC9G,gBAAAlC,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,gBAAc,CAAC,CAACJ;AAAA,MAChB,IAAIwB;AAAA,MACJ,MAAAT;AAAA,MACA,WAAWiB;AAAA,MACX,UAAA/B;AAAA,MACA,KAAAK;AAAA,MACA,UAAAc;AAAA,MACA,oBAAkBf,EAAM,kBAAkB,KAAK;AAAA,MAC/C,iBAAe,CAAC,CAACe;AAAA,MACjB,OAAAC;AAAA,MACA,cAAAC;AAAA,MACC,GAAGC;AAAA,IAAA;AAAA,IAEHd;AAAA,EAEL,CAAA,CACF,CACF;AAEJ,CAAC,GAED8B,IAAepC;"}

package/components/Select/index.js

@@ -1,2 +1,7 @@
-import{S as o}from"../../Select.js";import{a as F}from"../../Select.js";import"react";import"classnames";import"../../constants.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/grid.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../ErrorWrapper.js";import"../ErrorWrapper/styles.module.scss";import"../Icons/Icon.js";import"../Icons/ChevronDown.js";import"../../Label.js";import"../../Spacer.js";import"../Spacer/styles.module.scss";import"../Label/styles.module.scss";import"../../utils/component.js";import"../../StatusDot.js";import"../../hooks/useBreakpoint.js";import"../Icons/Attachment.js";import"../Icons/Group.js";import"../Icons/NoAccess.js";import"../Icons/Undo.js";import"../StatusDot/styles.module.scss";import"./styles.module.scss";export{F as Select,o as default};
+import t from "./Select.js";
+import { Select as f } from "./Select.js";
+export {
+  f as Select,
+  t as default
+};
 //# sourceMappingURL=index.js.map

package/components/Select/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/ServiceMessage/ServiceMessage.js

@@ -0,0 +1,106 @@
+import e, { useState as R } from "react";
+import u from "classnames";
+import { useBreakpoint as w } from "../../hooks/useBreakpoint.js";
+import { useHover as h } from "../../hooks/useHover.js";
+import { useUuid as y } from "../../hooks/useUuid.js";
+import { getColor as I } from "../../theme/currys/color.js";
+import { breakpoints as M } from "../../theme/grid.js";
+import { palette as c } from "../../theme/palette.js";
+import { getAriaLabelAttributes as X } from "../../utils/accessibility.js";
+import F from "../Close/Close.js";
+import { Icon as n } from "../Icon/Icon.js";
+import { IconSize as N } from "../../constants.js";
+import L from "../Icons/CheckFill.js";
+import A from "../Icons/ChevronDown.js";
+import U from "../Icons/ChevronUp.js";
+import $ from "../Icons/ErrorSignFill.js";
+import j from "../Icons/Forward.js";
+import B from "../Icons/InfoSignFill.js";
+import q from "../Icons/TriangleX.js";
+import D from "../Icons/X.js";
+import r from "./styles.module.scss";
+const G = ({ label: l, variant: t, id: m, hasExpander: s, isExpanded: i, dismissable: _, onExpand: v, onDismiss: f, closeBtnText: g }) => {
+  const d = w(), { isHovered: a, hoverRef: p } = h(), o = d < M.lg ? N.XSmall : N.Small, C = {
+    info: /* @__PURE__ */ e.createElement(n, { svgIcon: B, color: c.blueberry700, hoverColor: c.blueberry700, size: o, isHovered: a }),
+    warn: /* @__PURE__ */ e.createElement(n, { svgIcon: $, color: c.banana700, hoverColor: c.banana700, size: o, isHovered: a }),
+    alert: /* @__PURE__ */ e.createElement(n, { svgIcon: q, color: c.cherry700, hoverColor: c.cherry700, size: o, isHovered: a }),
+    success: /* @__PURE__ */ e.createElement(n, { svgIcon: L, color: c.kiwi900, hoverColor: c.kiwi900, size: o, isHovered: a })
+  }, b = s ? "button" : "span", E = u(
+    r["service-message__label-container"],
+    r[`service-message__label-container--${t}`],
+    s && r["service-message__label-container--has-expander"]
+  );
+  return /* @__PURE__ */ e.createElement("div", { className: E, ref: p }, /* @__PURE__ */ e.createElement("div", { className: r["service-message__container"] }, /* @__PURE__ */ e.createElement("div", { className: r["service-message__row"] }, /* @__PURE__ */ e.createElement("div", { className: r["service-message__col"] }, /* @__PURE__ */ e.createElement("div", { className: r["service-message__label"] }, C[t], /* @__PURE__ */ e.createElement("h1", { className: r["service-message__title"], id: m }, /* @__PURE__ */ e.createElement(
+    b,
+    {
+      className: r["service-message__toggle"],
+      onClick: s ? v : void 0,
+      "aria-expanded": s ? i : void 0
+    },
+    l
+  )), s && /* @__PURE__ */ e.createElement(n, { size: o, svgIcon: i ? U : A, isHovered: a }), !s && _ && /* @__PURE__ */ e.createElement(F, { onClick: f, ariaLabel: g, className: r["service-message__close"] }))))));
+}, J = ({ info: l, extraInfo: t, urlTitle: m, url: s, target: i, dismissable: _, closeBtnText: v, onDismiss: f }) => {
+  const { hoverRef: g, isHovered: d } = h(), { hoverRef: a, isHovered: p } = h(), o = s && m;
+  return /* @__PURE__ */ e.createElement("div", { className: r["service-message__container"] }, /* @__PURE__ */ e.createElement("div", { className: r["service-message__row"] }, /* @__PURE__ */ e.createElement("div", { className: r["service-message__col"] }, /* @__PURE__ */ e.createElement("div", { className: r["service-message__content"] }, l && /* @__PURE__ */ e.createElement("p", { className: r["service-message__info"] }, l), t && /* @__PURE__ */ e.createElement("p", { className: u(r["service-message__info"], r["service-message__info--extra"]) }, t), /* @__PURE__ */ e.createElement("div", { className: r["service-message__actions"] }, o && /* @__PURE__ */ e.createElement("a", { className: r["service-message__action"], href: s, ref: g, target: i }, m, /* @__PURE__ */ e.createElement(n, { size: N.XSmall, svgIcon: j, color: I("blueberry", 700), isHovered: d })), _ && /* @__PURE__ */ e.createElement(
+    "button",
+    {
+      ref: a,
+      className: u(r["service-message__action"], r["service-message__action--close"]),
+      "aria-label": v,
+      onClick: f
+    },
+    v,
+    /* @__PURE__ */ e.createElement(n, { size: N.XSmall, svgIcon: D, color: I("blueberry", 700), isHovered: p })
+  ))))));
+}, K = ({
+  label: l,
+  dismissable: t = !0,
+  onDismiss: m,
+  info: s,
+  extraInfo: i,
+  urlTitle: _,
+  url: v,
+  target: f = "_self",
+  closeBtnText: g = "fjern melding",
+  expanderOpenFromStart: d = !1,
+  variant: a = "alert",
+  testId: p
+}) => {
+  const [o, C] = R(d), b = y(), E = !!s || !!i, S = a === "alert" ? "alert" : "region", k = X({ label: l, id: b }), z = () => {
+    E && C(!o);
+  }, H = u(
+    r["service-message"],
+    r[`service-message--${a}`],
+    o && r["service-message--expanded"]
+  );
+  return /* @__PURE__ */ e.createElement("div", { className: H, role: S, ...k, "data-testid": p }, /* @__PURE__ */ e.createElement(
+    G,
+    {
+      label: l,
+      variant: a,
+      id: b,
+      hasExpander: E,
+      isExpanded: o,
+      dismissable: t,
+      onExpand: z,
+      onDismiss: m,
+      closeBtnText: g
+    }
+  ), E && o && /* @__PURE__ */ e.createElement(
+    J,
+    {
+      info: s,
+      extraInfo: i,
+      urlTitle: _,
+      url: v,
+      target: f,
+      dismissable: t,
+      onDismiss: m,
+      closeBtnText: g
+    }
+  ));
+}, ge = K;
+export {
+  ge as default
+};
+//# sourceMappingURL=ServiceMessage.js.map

package/components/ServiceMessage/ServiceMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ServiceMessage.js","sources":["../../../src/components/ServiceMessage/ServiceMessage.tsx"],"sourcesContent":["import React, { useState, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport { breakpoints } from '../../theme/grid';\nimport { palette } from '../../theme/palette';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { AnchorLinkTargets } from '../AnchorLink';\nimport Close from '../Close';\nimport Icon, { IconSize } from '../Icon';\nimport CheckFill from '../Icons/CheckFill';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport ErrorSignFill from '../Icons/ErrorSignFill';\nimport Forward from '../Icons/Forward';\nimport InfoSignFill from '../Icons/InfoSignFill';\nimport TriangleX from '../Icons/TriangleX';\nimport X from '../Icons/X';\nimport { NotificationPanelVariants } from '../NotificationPanel';\n\nimport styles from './styles.module.scss';\n\ninterface LabelProps {\n  label: string;\n  variant: NotificationPanelVariants;\n  id: string;\n  hasExpander: boolean;\n  isExpanded: boolean;\n  dismissable: boolean;\n  onExpand: () => void;\n  onDismiss?: () => void;\n  closeBtnText?: string;\n}\n\nconst Label: React.FC<LabelProps> = ({ label, variant, id, hasExpander, isExpanded, dismissable, onExpand, onDismiss, closeBtnText }) => {\n  const breakpoint = useBreakpoint();\n  const { isHovered, hoverRef } = useHover<HTMLDivElement>();\n\n  const iconSize = breakpoint < breakpoints.lg ? IconSize.XSmall : IconSize.Small;\n  const variantToIconMap = {\n    info: (\n      <Icon svgIcon={InfoSignFill} color={palette.blueberry700} hoverColor={palette.blueberry700} size={iconSize} isHovered={isHovered} />\n    ),\n    warn: <Icon svgIcon={ErrorSignFill} color={palette.banana700} hoverColor={palette.banana700} size={iconSize} isHovered={isHovered} />,\n    alert: <Icon svgIcon={TriangleX} color={palette.cherry700} hoverColor={palette.cherry700} size={iconSize} isHovered={isHovered} />,\n    success: <Icon svgIcon={CheckFill} color={palette.kiwi900} hoverColor={palette.kiwi900} size={iconSize} isHovered={isHovered} />,\n  };\n  const CustomTag = hasExpander ? 'button' : 'span';\n\n  const labelContainerClasses = classNames(\n    styles['service-message__label-container'],\n    styles[`service-message__label-container--${variant}`],\n    hasExpander && styles[`service-message__label-container--has-expander`]\n  );\n\n  return (\n    <div className={labelContainerClasses} ref={hoverRef}>\n      <div className={styles['service-message__container']}>\n        <div className={styles['service-message__row']}>\n          <div className={styles['service-message__col']}>\n            <div className={styles['service-message__label']}>\n              {variantToIconMap[variant]}\n              <h1 className={styles['service-message__title']} id={id}>\n                <CustomTag\n                  className={styles['service-message__toggle']}\n                  onClick={hasExpander ? onExpand : undefined}\n                  aria-expanded={hasExpander ? isExpanded : undefined}\n                >\n                  {label}\n                </CustomTag>\n              </h1>\n              {hasExpander && <Icon size={iconSize} svgIcon={isExpanded ? ChevronUp : ChevronDown} isHovered={isHovered} />}\n              {!hasExpander && dismissable && (\n                <Close onClick={onDismiss} ariaLabel={closeBtnText} className={styles['service-message__close']} />\n              )}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\ninterface ContentProps {\n  info?: string;\n  extraInfo?: string;\n  urlTitle?: string;\n  url?: string;\n  target?: AnchorLinkTargets;\n  dismissable: boolean;\n  onDismiss?: () => void;\n  closeBtnText?: string;\n}\n\nconst Content: React.FC<ContentProps> = ({ info, extraInfo, urlTitle, url, target, dismissable, closeBtnText, onDismiss }) => {\n  const { hoverRef: readMoreRef, isHovered: readMoreHoverRefIsHovered } = useHover<HTMLAnchorElement>();\n  const { hoverRef: closeButtonRef, isHovered: closeButtonIsHovered } = useHover<HTMLButtonElement>();\n\n  const hasUrl = url && urlTitle;\n\n  return (\n    <div className={styles['service-message__container']}>\n      <div className={styles['service-message__row']}>\n        <div className={styles['service-message__col']}>\n          <div className={styles['service-message__content']}>\n            {info && <p className={styles['service-message__info']}>{info}</p>}\n            {extraInfo && (\n              <p className={classNames(styles['service-message__info'], styles['service-message__info--extra'])}>{extraInfo}</p>\n            )}\n            <div className={styles['service-message__actions']}>\n              {hasUrl && (\n                <a className={styles['service-message__action']} href={url} ref={readMoreRef} target={target}>\n                  {urlTitle}\n                  <Icon size={IconSize.XSmall} svgIcon={Forward} color={getColor('blueberry', 700)} isHovered={readMoreHoverRefIsHovered} />\n                </a>\n              )}\n\n              {dismissable && (\n                <button\n                  ref={closeButtonRef}\n                  className={classNames(styles['service-message__action'], styles['service-message__action--close'])}\n                  aria-label={closeBtnText}\n                  onClick={onDismiss}\n                >\n                  {closeBtnText}\n                  <Icon size={IconSize.XSmall} svgIcon={X} color={getColor('blueberry', 700)} isHovered={closeButtonIsHovered} />\n                </button>\n              )}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport interface ServiceMessageProps {\n  /** Sets a label for the notification panel. */\n  label: string;\n  /** String displayed in service-message when expanded */\n  info?: string;\n  /** String displayed in service-message when expanded, with a smaller font */\n  extraInfo?: string;\n  /** function that runs on dismiss */\n  onDismiss?: () => void;\n  /** Allows for dismiss to be an option, also for ServiceMessage with only label as content */\n  dismissable?: boolean;\n  /** Makes expander be open from start. */\n  expanderOpenFromStart?: boolean;\n  /** Name that describes a url-link for the user*/\n  urlTitle?: string;\n  /** Url for further information*/\n  url?: string;\n  /** Sets target for the anchorlink to the url*/\n  target?: AnchorLinkTargets;\n  /** Text on close-button in service messages. */\n  closeBtnText?: string;\n  /** Changes the visual representation. */\n  variant?: NotificationPanelVariants;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /**\n   * First of its type. Used to remove border-top\n   * @deprecated Har ingen effekt på komponenten\n   */\n  first?: boolean;\n}\n\nconst ServiceMessage: React.FC<ServiceMessageProps> = ({\n  label,\n  dismissable = true,\n  onDismiss,\n  info,\n  extraInfo,\n  urlTitle,\n  url,\n  target = '_self',\n  closeBtnText = 'fjern melding',\n  expanderOpenFromStart = false,\n  variant = 'alert',\n  testId,\n}) => {\n  const [isExpanded, setIsExpanded] = useState<boolean>(expanderOpenFromStart);\n\n  const labelId = useUuid();\n  const hasExpander = !!info || !!extraInfo;\n\n  const ariaRole = variant === 'alert' ? 'alert' : 'region';\n  const ariaLabelAttributes = getAriaLabelAttributes({ label, id: labelId });\n\n  const handleClick = (): void => {\n    hasExpander && setIsExpanded(!isExpanded);\n  };\n\n  const classes = classNames(\n    styles['service-message'],\n    styles[`service-message--${variant}`],\n    isExpanded && styles[`service-message--expanded`]\n  );\n\n  return (\n    <div className={classes} role={ariaRole} {...ariaLabelAttributes} data-testid={testId}>\n      <Label\n        label={label}\n        variant={variant}\n        id={labelId}\n        hasExpander={hasExpander}\n        isExpanded={isExpanded}\n        dismissable={dismissable}\n        onExpand={handleClick}\n        onDismiss={onDismiss}\n        closeBtnText={closeBtnText}\n      />\n      {hasExpander && isExpanded && (\n        <Content\n          info={info}\n          extraInfo={extraInfo}\n          urlTitle={urlTitle}\n          url={url}\n          target={target}\n          dismissable={dismissable}\n          onDismiss={onDismiss}\n          closeBtnText={closeBtnText}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default ServiceMessage;\n"],"names":["Label","label","variant","id","hasExpander","isExpanded","dismissable","onExpand","onDismiss","closeBtnText","breakpoint","useBreakpoint","isHovered","hoverRef","useHover","iconSize","breakpoints","IconSize","variantToIconMap","React","Icon","InfoSignFill","palette","ErrorSignFill","TriangleX","CheckFill","CustomTag","labelContainerClasses","classNames","styles","ChevronUp","ChevronDown","Close","Content","info","extraInfo","urlTitle","url","target","readMoreRef","readMoreHoverRefIsHovered","closeButtonRef","closeButtonIsHovered","hasUrl","Forward","getColor","X","ServiceMessage","expanderOpenFromStart","testId","setIsExpanded","useState","labelId","useUuid","ariaRole","ariaLabelAttributes","getAriaLabelAttributes","handleClick","classes","ServiceMessage$1"],"mappings":"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"}

package/components/ServiceMessage/index.js

@@ -1,2 +1,5 @@
-import e,{useState as R}from"react";import u from"classnames";import{useBreakpoint as w}from"../../hooks/useBreakpoint.js";import{useHover as h}from"../../hooks/useHover.js";import{useUuid as y}from"../../hooks/useUuid.js";import{getColor as I}from"../../theme/currys/color.js";import{breakpoints as M}from"../../theme/grid.js";import{palette as c}from"../../theme/palette.js";import{getAriaLabelAttributes as X}from"../../utils/accessibility.js";import{C as F}from"../../Close.js";import{Icon as n}from"../Icons/Icon.js";import{IconSize as N}from"../../constants.js";import L from"../Icons/CheckFill.js";import A from"../Icons/ChevronDown.js";import U from"../Icons/ChevronUp.js";import $ from"../Icons/ErrorSignFill.js";import j from"../Icons/Forward.js";import B from"../Icons/InfoSignFill.js";import q from"../Icons/TriangleX.js";import D from"../Icons/X.js";import r from"./styles.module.scss";import"../../hooks/usePseudoClasses.js";import"../../uuid.js";import"../../utils/environment.js";import"../../theme/index.js";import"../../theme/spacers.js";import"../../utils/refs.js";import"../Close/styles.module.scss";const G=({label:m,variant:t,id:i,hasExpander:s,isExpanded:l,dismissable:_,onExpand:v,onDismiss:p,closeBtnText:g})=>{const f=w(),{isHovered:a,hoverRef:d}=h(),o=f<M.lg?N.XSmall:N.Small,C={info:e.createElement(n,{svgIcon:B,color:c.blueberry700,hoverColor:c.blueberry700,size:o,isHovered:a}),warn:e.createElement(n,{svgIcon:$,color:c.banana700,hoverColor:c.banana700,size:o,isHovered:a}),alert:e.createElement(n,{svgIcon:q,color:c.cherry700,hoverColor:c.cherry700,size:o,isHovered:a}),success:e.createElement(n,{svgIcon:L,color:c.kiwi900,hoverColor:c.kiwi900,size:o,isHovered:a})},b=s?"button":"span",E=u(r["service-message__label-container"],r[`service-message__label-container--${t}`],s&&r["service-message__label-container--has-expander"]);return e.createElement("div",{className:E,ref:d},e.createElement("div",{className:r["service-message__container"]},e.createElement("div",{className:r["service-message__row"]},e.createElement("div",{className:r["service-message__col"]},e.createElement("div",{className:r["service-message__label"]},C[t],e.createElement("h1",{className:r["service-message__title"],id:i},e.createElement(b,{className:r["service-message__toggle"],onClick:s?v:void 0,"aria-expanded":s?l:void 0},m)),s&&e.createElement(n,{size:o,svgIcon:l?U:A,isHovered:a}),!s&&_&&e.createElement(F,{onClick:p,ariaLabel:g,className:r["service-message__close"]}))))))},J=({info:m,extraInfo:t,urlTitle:i,url:s,target:l,dismissable:_,closeBtnText:v,onDismiss:p})=>{const{hoverRef:g,isHovered:f}=h(),{hoverRef:a,isHovered:d}=h(),o=s&&i;return e.createElement("div",{className:r["service-message__container"]},e.createElement("div",{className:r["service-message__row"]},e.createElement("div",{className:r["service-message__col"]},e.createElement("div",{className:r["service-message__content"]},m&&e.createElement("p",{className:r["service-message__info"]},m),t&&e.createElement("p",{className:u(r["service-message__info"],r["service-message__info--extra"])},t),e.createElement("div",{className:r["service-message__actions"]},o&&e.createElement("a",{className:r["service-message__action"],href:s,ref:g,target:l},i,e.createElement(n,{size:N.XSmall,svgIcon:j,color:I("blueberry",700),isHovered:f})),_&&e.createElement("button",{ref:a,className:u(r["service-message__action"],r["service-message__action--close"]),"aria-label":v,onClick:p},v,e.createElement(n,{size:N.XSmall,svgIcon:D,color:I("blueberry",700),isHovered:d})))))))},K=({label:m,dismissable:t=!0,onDismiss:i,info:s,extraInfo:l,urlTitle:_,url:v,target:p="_self",closeBtnText:g="fjern melding",expanderOpenFromStart:f=!1,variant:a="alert",testId:d})=>{const[o,C]=R(f),b=y(),E=!!s||!!l,S=a==="alert"?"alert":"region",k=X({label:m,id:b}),z=()=>{E&&C(!o)},H=u(r["service-message"],r[`service-message--${a}`],o&&r["service-message--expanded"]);return e.createElement("div",{className:H,role:S,...k,"data-testid":d},e.createElement(G,{label:m,variant:a,id:b,hasExpander:E,isExpanded:o,dismissable:t,onExpand:z,onDismiss:i,closeBtnText:g}),E&&o&&e.createElement(J,{info:s,extraInfo:l,urlTitle:_,url:v,target:p,dismissable:t,onDismiss:i,closeBtnText:g}))},ue=K;export{ue as default};
+import r from "./ServiceMessage.js";
+export {
+  r as default
+};
 //# sourceMappingURL=index.js.map

package/components/ServiceMessage/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/ServiceMessage/ServiceMessage.tsx"],"sourcesContent":["import React, { useState, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport { breakpoints } from '../../theme/grid';\nimport { palette } from '../../theme/palette';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { AnchorLinkTargets } from '../AnchorLink';\nimport Close from '../Close';\nimport Icon, { IconSize } from '../Icons';\nimport CheckFill from '../Icons/CheckFill';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport ErrorSignFill from '../Icons/ErrorSignFill';\nimport Forward from '../Icons/Forward';\nimport InfoSignFill from '../Icons/InfoSignFill';\nimport TriangleX from '../Icons/TriangleX';\nimport X from '../Icons/X';\nimport { NotificationPanelVariants } from '../NotificationPanel';\n\nimport styles from './styles.module.scss';\n\ninterface LabelProps {\n  label: string;\n  variant: NotificationPanelVariants;\n  id: string;\n  hasExpander: boolean;\n  isExpanded: boolean;\n  dismissable: boolean;\n  onExpand: () => void;\n  onDismiss?: () => void;\n  closeBtnText?: string;\n}\n\nconst Label: React.FC<LabelProps> = ({ label, variant, id, hasExpander, isExpanded, dismissable, onExpand, onDismiss, closeBtnText }) => {\n  const breakpoint = useBreakpoint();\n  const { isHovered, hoverRef } = useHover<HTMLDivElement>();\n\n  const iconSize = breakpoint < breakpoints.lg ? IconSize.XSmall : IconSize.Small;\n  const variantToIconMap = {\n    info: (\n      <Icon svgIcon={InfoSignFill} color={palette.blueberry700} hoverColor={palette.blueberry700} size={iconSize} isHovered={isHovered} />\n    ),\n    warn: <Icon svgIcon={ErrorSignFill} color={palette.banana700} hoverColor={palette.banana700} size={iconSize} isHovered={isHovered} />,\n    alert: <Icon svgIcon={TriangleX} color={palette.cherry700} hoverColor={palette.cherry700} size={iconSize} isHovered={isHovered} />,\n    success: <Icon svgIcon={CheckFill} color={palette.kiwi900} hoverColor={palette.kiwi900} size={iconSize} isHovered={isHovered} />,\n  };\n  const CustomTag = hasExpander ? 'button' : 'span';\n\n  const labelContainerClasses = classNames(\n    styles['service-message__label-container'],\n    styles[`service-message__label-container--${variant}`],\n    hasExpander && styles[`service-message__label-container--has-expander`]\n  );\n\n  return (\n    <div className={labelContainerClasses} ref={hoverRef}>\n      <div className={styles['service-message__container']}>\n        <div className={styles['service-message__row']}>\n          <div className={styles['service-message__col']}>\n            <div className={styles['service-message__label']}>\n              {variantToIconMap[variant]}\n              <h1 className={styles['service-message__title']} id={id}>\n                <CustomTag\n                  className={styles['service-message__toggle']}\n                  onClick={hasExpander ? onExpand : undefined}\n                  aria-expanded={hasExpander ? isExpanded : undefined}\n                >\n                  {label}\n                </CustomTag>\n              </h1>\n              {hasExpander && <Icon size={iconSize} svgIcon={isExpanded ? ChevronUp : ChevronDown} isHovered={isHovered} />}\n              {!hasExpander && dismissable && (\n                <Close onClick={onDismiss} ariaLabel={closeBtnText} className={styles['service-message__close']} />\n              )}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\ninterface ContentProps {\n  info?: string;\n  extraInfo?: string;\n  urlTitle?: string;\n  url?: string;\n  target?: AnchorLinkTargets;\n  dismissable: boolean;\n  onDismiss?: () => void;\n  closeBtnText?: string;\n}\n\nconst Content: React.FC<ContentProps> = ({ info, extraInfo, urlTitle, url, target, dismissable, closeBtnText, onDismiss }) => {\n  const { hoverRef: readMoreRef, isHovered: readMoreHoverRefIsHovered } = useHover<HTMLAnchorElement>();\n  const { hoverRef: closeButtonRef, isHovered: closeButtonIsHovered } = useHover<HTMLButtonElement>();\n\n  const hasUrl = url && urlTitle;\n\n  return (\n    <div className={styles['service-message__container']}>\n      <div className={styles['service-message__row']}>\n        <div className={styles['service-message__col']}>\n          <div className={styles['service-message__content']}>\n            {info && <p className={styles['service-message__info']}>{info}</p>}\n            {extraInfo && (\n              <p className={classNames(styles['service-message__info'], styles['service-message__info--extra'])}>{extraInfo}</p>\n            )}\n            <div className={styles['service-message__actions']}>\n              {hasUrl && (\n                <a className={styles['service-message__action']} href={url} ref={readMoreRef} target={target}>\n                  {urlTitle}\n                  <Icon size={IconSize.XSmall} svgIcon={Forward} color={getColor('blueberry', 700)} isHovered={readMoreHoverRefIsHovered} />\n                </a>\n              )}\n\n              {dismissable && (\n                <button\n                  ref={closeButtonRef}\n                  className={classNames(styles['service-message__action'], styles['service-message__action--close'])}\n                  aria-label={closeBtnText}\n                  onClick={onDismiss}\n                >\n                  {closeBtnText}\n                  <Icon size={IconSize.XSmall} svgIcon={X} color={getColor('blueberry', 700)} isHovered={closeButtonIsHovered} />\n                </button>\n              )}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport interface ServiceMessageProps {\n  /** Sets a label for the notification panel. */\n  label: string;\n  /** String displayed in service-message when expanded */\n  info?: string;\n  /** String displayed in service-message when expanded, with a smaller font */\n  extraInfo?: string;\n  /** function that runs on dismiss */\n  onDismiss?: () => void;\n  /** Allows for dismiss to be an option, also for ServiceMessage with only label as content */\n  dismissable?: boolean;\n  /** Makes expander be open from start. */\n  expanderOpenFromStart?: boolean;\n  /** Name that describes a url-link for the user*/\n  urlTitle?: string;\n  /** Url for further information*/\n  url?: string;\n  /** Sets target for the anchorlink to the url*/\n  target?: AnchorLinkTargets;\n  /** Text on close-button in service messages. */\n  closeBtnText?: string;\n  /** Changes the visual representation. */\n  variant?: NotificationPanelVariants;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /**\n   * First of its type. Used to remove border-top\n   * @deprecated Har ingen effekt på komponenten\n   */\n  first?: boolean;\n}\n\nconst ServiceMessage: React.FC<ServiceMessageProps> = ({\n  label,\n  dismissable = true,\n  onDismiss,\n  info,\n  extraInfo,\n  urlTitle,\n  url,\n  target = '_self',\n  closeBtnText = 'fjern melding',\n  expanderOpenFromStart = false,\n  variant = 'alert',\n  testId,\n}) => {\n  const [isExpanded, setIsExpanded] = useState<boolean>(expanderOpenFromStart);\n\n  const labelId = useUuid();\n  const hasExpander = !!info || !!extraInfo;\n\n  const ariaRole = variant === 'alert' ? 'alert' : 'region';\n  const ariaLabelAttributes = getAriaLabelAttributes({ label, id: labelId });\n\n  const handleClick = (): void => {\n    hasExpander && setIsExpanded(!isExpanded);\n  };\n\n  const classes = classNames(\n    styles['service-message'],\n    styles[`service-message--${variant}`],\n    isExpanded && styles[`service-message--expanded`]\n  );\n\n  return (\n    <div className={classes} role={ariaRole} {...ariaLabelAttributes} data-testid={testId}>\n      <Label\n        label={label}\n        variant={variant}\n        id={labelId}\n        hasExpander={hasExpander}\n        isExpanded={isExpanded}\n        dismissable={dismissable}\n        onExpand={handleClick}\n        onDismiss={onDismiss}\n        closeBtnText={closeBtnText}\n      />\n      {hasExpander && isExpanded && (\n        <Content\n          info={info}\n          extraInfo={extraInfo}\n          urlTitle={urlTitle}\n          url={url}\n          target={target}\n          dismissable={dismissable}\n          onDismiss={onDismiss}\n          closeBtnText={closeBtnText}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default ServiceMessage;\n"],"names":["Label","label","variant","id","hasExpander","isExpanded","dismissable","onExpand","onDismiss","closeBtnText","breakpoint","useBreakpoint","isHovered","hoverRef","useHover","iconSize","breakpoints","IconSize","variantToIconMap","React","Icon","InfoSignFill","palette","ErrorSignFill","TriangleX","CheckFill","CustomTag","labelContainerClasses","classNames","styles","ChevronUp","ChevronDown","Close","Content","info","extraInfo","urlTitle","url","target","readMoreRef","readMoreHoverRefIsHovered","closeButtonRef","closeButtonIsHovered","hasUrl","Forward","getColor","X","ServiceMessage","expanderOpenFromStart","testId","setIsExpanded","useState","labelId","useUuid","ariaRole","ariaLabelAttributes","getAriaLabelAttributes","handleClick","classes","ServiceMessage$1"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/components/Slider/Slider.js

@@ -0,0 +1,125 @@
+import s, { useState as b, useRef as D, useEffect as h } from "react";
+import P from "classnames";
+import { AnalyticsId as j } from "../../constants.js";
+import { useSize as M } from "../../hooks/useSize.js";
+import { useUuid as g } from "../../hooks/useUuid.js";
+import { getAriaLabelAttributes as C } from "../../utils/accessibility.js";
+import K from "../Title/Title.js";
+import i from "./styles.module.scss";
+const W = (n, k, c) => {
+  const [u, r] = b(n);
+  return [u, (f) => {
+    f > c ? r(c) : f < k ? r(k) : r(f);
+  }];
+}, d = 100, m = 0, N = 1, V = 10, $ = ({ title: n, ariaLabel: k, labelLeft: c, labelRight: u, disabled: r = !1, onChange: E, testId: f }) => {
+  const [L, S] = b(!1), [a, o] = W((d - m) / 2, m, d), p = g(), w = g(), _ = g(), A = D(null), v = D(null), { width: y } = M(A) || { width: 0 }, { width: U } = M(v) || { width: 0 };
+  h(() => {
+    const e = () => {
+      S(!1);
+    };
+    return document.addEventListener("pointerup", e), () => {
+      document.removeEventListener("pointerup", e);
+    };
+  }, []);
+  const I = (e) => {
+    var l;
+    const t = ((l = A.current) == null ? void 0 : l.getBoundingClientRect().x) ?? 0;
+    return Math.round((e - t) / y * (d - m));
+  };
+  h(() => {
+    const e = (t) => {
+      if (!r && L) {
+        const l = I(t.clientX);
+        o(l);
+      }
+    };
+    return document.addEventListener("pointermove", e), () => {
+      document.removeEventListener("pointermove", e);
+    };
+  }, [L]), h(() => {
+    !r && E && E(a);
+  }, [a]);
+  const R = (e) => {
+    if (r)
+      return;
+    let t = !1;
+    switch (e.key) {
+      case "ArrowLeft":
+      case "ArrowDown":
+        o(a - N), t = !0;
+        break;
+      case "PageDown":
+        o(a - V), t = !0;
+        break;
+      case "ArrowRight":
+      case "ArrowUp":
+        o(a + N), t = !0;
+        break;
+      case "PageUp":
+        o(a + V), t = !0;
+        break;
+      case "Home":
+        o(m), t = !0;
+        break;
+      case "End":
+        o(d), t = !0;
+        break;
+    }
+    t && (e.preventDefault(), e.stopPropagation());
+  }, x = (e) => {
+    var l;
+    if (r)
+      return;
+    const t = I(e.clientX);
+    o(t), (l = v.current) == null || l.focus();
+  }, B = (e) => {
+    var t;
+    r || (S(!0), e.preventDefault(), e.stopPropagation(), (t = v.current) == null || t.focus());
+  }, T = (y - U) / (d - m) * a, X = C({
+    label: k,
+    id: (() => {
+      if (n && c && u)
+        return [p, w, _].join(" ");
+      if (n && c)
+        return [p, w].join(" ");
+      if (n && u)
+        return [p, _].join(" ");
+      if (n)
+        return p;
+    })(),
+    prefer: "label"
+  });
+  return /* @__PURE__ */ s.createElement("div", { className: i.slider, "data-testid": f, "data-analyticsid": j.Slider }, n && /* @__PURE__ */ s.createElement(K, { htmlMarkup: "h3", margin: 1.5, appearance: "title3", id: p }, n), /* @__PURE__ */ s.createElement(
+    "div",
+    {
+      ref: A,
+      className: P(i["slider__track-wrapper"], r && i["slider__track-wrapper--disabled"]),
+      onClick: x,
+      onPointerDown: B
+    },
+    /* @__PURE__ */ s.createElement("div", { className: P(i.slider__track, r && i["slider__track--disabled"]) }),
+    /* @__PURE__ */ s.createElement(
+      "div",
+      {
+        role: r ? void 0 : "slider",
+        ref: v,
+        className: P(i.slider__marker, r && i["slider__marker--disabled"]),
+        style: {
+          left: `${T}px`
+        },
+        onKeyDown: R,
+        "aria-valuenow": a,
+        "aria-valuemin": m,
+        "aria-valuemax": d,
+        tabIndex: r ? void 0 : 0,
+        "aria-disabled": r,
+        ...X
+      }
+    )
+  ), (c || u) && /* @__PURE__ */ s.createElement("span", { className: i.slider__options }, /* @__PURE__ */ s.createElement("span", { id: w }, c), /* @__PURE__ */ s.createElement("span", { id: _ }, u)));
+}, Z = $;
+export {
+  $ as Slider,
+  Z as default
+};
+//# sourceMappingURL=Slider.js.map