@helsenorge/designsystem-react 8.5.0 → 8.5.1

package/Textarea.js

@@ -0,0 +1,110 @@
+import { jsx as l, jsxs as ee } from "react/jsx-runtime";
+import te, { useState as A, useRef as re, useEffect as B } from "react";
+import p from "classnames";
+import { FormMode as m, AnalyticsId as ae, AVERAGE_CHARACTER_WIDTH_PX as oe } from "./constants.js";
+import { useUuid as ne } from "./hooks/useUuid.js";
+import { getAriaDescribedBy as ie } from "./utils/accessibility.js";
+import { u as se } from "./uuid.js";
+import { E as de } from "./ErrorWrapper.js";
+import { a as ce } from "./Label.js";
+import { M as le } from "./MaxCharacters.js";
+import t from "./components/Textarea/styles.module.scss";
+const me = (a) => `calc(${a * oe}px + 2rem + 16px + 4px)`, ue = te.forwardRef((a, h) => {
+  const {
+    maxCharacters: o,
+    maxText: x,
+    width: f,
+    testId: M,
+    defaultValue: i,
+    marginBottom: N,
+    transparent: $,
+    mode: n = m.onwhite,
+    label: k,
+    textareaId: b = se(),
+    minRows: g = 3,
+    maxRows: s = 10,
+    grow: w,
+    error: D,
+    errorText: C,
+    errorTextId: L,
+    autoFocus: S,
+    disabled: j,
+    name: F,
+    autoComplete: T = "off",
+    placeholder: U,
+    readOnly: V,
+    required: q,
+    onChange: W,
+    ...z
+  } = a, [G, y] = A(g), [R, v] = A(i || ""), d = re(null), E = ne(L);
+  B(() => {
+    v(i || "");
+  }, [i]);
+  const H = (e) => {
+    const c = e.rows;
+    e.rows = g;
+    const r = Math.floor((e.scrollHeight - 16) / 28);
+    r === c && (e.rows = r), r >= s && (e.rows = s, e.scrollTop = e.scrollHeight), r < s ? y(r) : y(s);
+  }, O = n === m.ondark, P = n === m.onblueberry, X = !!o && R.toString().length > o, I = n === m.oninvalid || !!C || !!D || X, J = p(t.textarea, {
+    [t["textarea--gutterBottom"]]: N
+  }), K = p(t["input-container"], {
+    [t["input-container--transparent"]]: $,
+    [t["input-container--on-blueberry"]]: P,
+    [t["input-container--on-dark"]]: O,
+    [t["input-container--invalid"]]: I,
+    [t["input-container--disabled"]]: a.disabled
+  }), Q = p(t["input-container__input"], {
+    [t["input-container__input--disabled"]]: a.disabled
+  });
+  B(() => {
+    var e, u, c;
+    if (w && ((e = d.current) != null && e.children) && ((u = d.current) != null && u.children[0])) {
+      const r = (c = d.current) == null ? void 0 : c.children[0];
+      H(r);
+    }
+  }, []);
+  const Y = (e) => {
+    w && H(e.target), v(e.target.value);
+  }, Z = (e) => {
+    W && W(e), Y(e);
+  }, _ = f ? me(f) : void 0;
+  return /* @__PURE__ */ l(de, { errorText: C, errorTextId: E, children: /* @__PURE__ */ ee("div", { "data-testid": M, "data-analyticsid": ae.Textarea, className: J, children: [
+    ce(k, b, n),
+    /* @__PURE__ */ l("div", { className: K, ref: d, style: { maxWidth: _ }, children: /* @__PURE__ */ l(
+      "textarea",
+      {
+        rows: G,
+        defaultValue: i,
+        id: b,
+        className: Q,
+        ref: h,
+        "aria-describedby": ie(a, E),
+        "aria-invalid": !!I,
+        autoFocus: S,
+        disabled: j,
+        name: F,
+        autoComplete: T || void 0,
+        placeholder: U,
+        readOnly: V,
+        required: q,
+        onChange: Z,
+        ...z
+      }
+    ) }),
+    o && /* @__PURE__ */ l(
+      le,
+      {
+        maxCharacters: o,
+        length: R.toString().length,
+        maxText: x,
+        mode: n,
+        maxWidth: _
+      }
+    )
+  ] }) });
+});
+ue.displayName = "Textarea";
+export {
+  ue as T
+};
+//# sourceMappingURL=Textarea.js.map

package/Textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.js","sources":["../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormMode } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\nimport { renderLabel } from '../Label';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\nexport interface TextareaProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLTextAreaElement>,\n    | 'aria-describedby'\n    | 'autoFocus'\n    | 'disabled'\n    | 'name'\n    | 'autoComplete'\n    | 'placeholder'\n    | 'readOnly'\n    | 'required'\n    | 'defaultValue'\n    | 'onChange'\n  > {\n  /** max character limit in textarea  */\n  maxCharacters?: number;\n  /** The text is displayed in the end of the text-counter */\n  maxText?: string;\n  /** Width of textarea in characters (approximate) */\n  width?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** If true, the component will have a bottom margin. */\n  marginBottom?: boolean;\n  /** If true, the component will be transparent. */\n  transparent?: boolean;\n  /** Changes the visuals of the textarea */\n  mode?: keyof typeof FormMode;\n  /** Label of the input */\n  label?: React.ReactNode;\n  /** id of the textarea */\n  textareaId?: string;\n  /** max rows */\n  maxRows?: number;\n  /** min rows */\n  minRows?: number;\n  /** auto-grows until maxRows */\n  grow?: boolean;\n  /** Activates Error style for the input */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n}\n\nconst getTextareaMaxWidth = (characters: number): string => {\n  const paddingWidth = '2rem';\n  const scrollbarWidth = '16px';\n  const borderWidth = '4px';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${scrollbarWidth} + ${borderWidth})`;\n};\n\nconst Textarea = React.forwardRef((props: TextareaProps, ref: React.Ref<HTMLTextAreaElement>) => {\n  const {\n    maxCharacters,\n    maxText,\n    width,\n    testId,\n    defaultValue,\n    marginBottom: gutterBottom,\n    transparent,\n    mode = FormMode.onwhite,\n    label,\n    textareaId = uuid(),\n    minRows = 3,\n    maxRows = 10,\n    grow,\n    error,\n    errorText,\n    errorTextId,\n    autoFocus,\n    disabled,\n    name,\n    autoComplete = 'off',\n    placeholder,\n    readOnly,\n    required,\n    onChange,\n    ...rest\n  } = props;\n\n  const [rows, setRows] = useState(minRows);\n  const [textareaInput, setTextareaInput] = useState(defaultValue || '');\n  const referanse = useRef<HTMLDivElement>(null);\n  const errorTextUuid = useUuid(errorTextId);\n\n  useEffect(() => {\n    setTextareaInput(defaultValue || '');\n  }, [defaultValue]);\n\n  const resizeHeight = (target: HTMLTextAreaElement): void => {\n    const textareaLineHeight = 28;\n\n    const previousRows = target.rows;\n    target.rows = minRows; // reset number of rows in textarea\n\n    const currentRows = Math.floor((target.scrollHeight - 16) / textareaLineHeight); // scrollHeight - 16px of padding to calculate the rows\n\n    if (currentRows === previousRows) {\n      target.rows = currentRows;\n    }\n\n    if (currentRows >= maxRows) {\n      target.rows = maxRows;\n      target.scrollTop = target.scrollHeight;\n    }\n\n    if (currentRows < maxRows) {\n      setRows(currentRows);\n    } else {\n      setRows(maxRows);\n    }\n  };\n\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const maxCharactersExceeded = !!maxCharacters && textareaInput.toString().length > maxCharacters;\n  const onError = mode === FormMode.oninvalid || !!errorText || !!error || maxCharactersExceeded;\n\n  const textareaWrapperClass = cn(styles.textarea, {\n    [styles['textarea--gutterBottom']]: gutterBottom,\n  });\n\n  const contentWrapperClass = cn(styles['input-container'], {\n    [styles['input-container--transparent']]: transparent,\n    [styles['input-container--on-blueberry']]: onBlueberry,\n    [styles['input-container--on-dark']]: onDark,\n    [styles['input-container--invalid']]: onError,\n    [styles['input-container--disabled']]: props.disabled,\n  });\n\n  const textareaClass = cn(styles['input-container__input'], {\n    [styles[`input-container__input--disabled`]]: props.disabled,\n  });\n\n  useEffect(() => {\n    if (grow && referanse.current?.children && referanse.current?.children[0]) {\n      const textarea = referanse.current?.children[0] as HTMLTextAreaElement;\n      resizeHeight(textarea);\n    }\n  }, []);\n\n  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    if (grow) {\n      resizeHeight(e.target);\n    }\n    setTextareaInput(e.target.value);\n  };\n\n  const onChangeHandler = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    if (onChange) {\n      onChange(e);\n    }\n    handleChange(e);\n  };\n\n  const maxWidth = width ? getTextareaMaxWidth(width) : undefined;\n\n  return (\n    <ErrorWrapper errorText={errorText} errorTextId={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Textarea} className={textareaWrapperClass}>\n        {renderLabel(label, textareaId, mode as FormMode)}\n        <div className={contentWrapperClass} ref={referanse} style={{ maxWidth }}>\n          <textarea\n            rows={rows}\n            defaultValue={defaultValue}\n            id={textareaId}\n            className={textareaClass}\n            ref={ref}\n            aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n            aria-invalid={!!onError}\n            // eslint-disable-next-line jsx-a11y/no-autofocus\n            autoFocus={autoFocus}\n            disabled={disabled}\n            name={name}\n            autoComplete={autoComplete ? autoComplete : undefined}\n            placeholder={placeholder}\n            readOnly={readOnly}\n            required={required}\n            onChange={onChangeHandler}\n            {...rest}\n          />\n        </div>\n        {maxCharacters && (\n          <MaxCharacters\n            maxCharacters={maxCharacters}\n            length={textareaInput.toString().length}\n            maxText={maxText}\n            mode={mode}\n            maxWidth={maxWidth}\n          />\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nTextarea.displayName = 'Textarea';\n\nexport default Textarea;\n"],"names":["getTextareaMaxWidth","characters","AVERAGE_CHARACTER_WIDTH_PX","Textarea","React","props","ref","maxCharacters","maxText","width","testId","defaultValue","gutterBottom","transparent","mode","FormMode","label","textareaId","uuid","minRows","maxRows","grow","error","errorText","errorTextId","autoFocus","disabled","name","autoComplete","placeholder","readOnly","required","onChange","rest","rows","setRows","useState","textareaInput","setTextareaInput","referanse","useRef","errorTextUuid","useUuid","useEffect","resizeHeight","target","previousRows","currentRows","onDark","onBlueberry","maxCharactersExceeded","onError","textareaWrapperClass","cn","styles","contentWrapperClass","textareaClass","_a","_b","textarea","_c","handleChange","onChangeHandler","maxWidth","jsx","ErrorWrapper","jsxs","AnalyticsId","renderLabel","getAriaDescribedBy","MaxCharacters"],"mappings":"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"}

package/Title.js

@@ -0,0 +1,25 @@
+import { jsx as g } from "react/jsx-runtime";
+import T from "react";
+import y from "classnames";
+import { AnalyticsId as u } from "./constants.js";
+import t from "./components/Title/styles.module.scss";
+const N = T.forwardRef(function(l, a) {
+  const { id: o, children: m, className: n, htmlMarkup: s = "h1", appearance: e = "title1", margin: i = 0, testId: c } = l, p = y(
+    t.title,
+    {
+      [t["title--feature"]]: e === "titleFeature",
+      [t["title--title1"]]: e === "title1",
+      [t["title--title2"]]: e === "title2",
+      [t["title--title3"]]: e === "title3",
+      [t["title--title4"]]: e === "title4",
+      [t["title--title5"]]: e === "title5"
+    },
+    n
+  ), d = s, f = h(i) ? { marginTop: `${i.marginTop}rem`, marginBottom: `${i.marginBottom}rem` } : { marginTop: `${i}rem`, marginBottom: `${i}rem` };
+  return /* @__PURE__ */ g(d, { id: o, className: p, style: f, ref: a, "data-testid": c, "data-analyticsid": u.Title, children: m });
+}), h = (r) => Object.prototype.hasOwnProperty.call(r, "marginTop") && Object.prototype.hasOwnProperty.call(r, "marginBottom");
+export {
+  N as T,
+  h as i
+};
+//# sourceMappingURL=Title.js.map

package/Title.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Title.js","sources":["../src/components/Title/Title.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\n\nimport titleStyles from './styles.module.scss';\n\nexport type TitleTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'span';\nexport type TitleAppearances = 'titleFeature' | 'title1' | 'title2' | 'title3' | 'title4' | 'title5';\n\nexport interface TitleProps {\n  children: React.ReactNode;\n  /** Gives a unique id to the title */\n  id?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds top and bottom margin in rem. */\n  margin?: number | TitleMargin;\n  /** Changes the underlying element of the title. */\n  htmlMarkup?: TitleTags;\n  /** Changes the appearance of the title. */\n  appearance?: TitleAppearances;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const Title = React.forwardRef(function TitleForwardedRef(props: TitleProps, ref: React.ForwardedRef<HTMLHeadingElement>) {\n  const { id, children, className, htmlMarkup = 'h1', appearance = 'title1', margin = 0, testId } = props;\n  const titleClasses = classNames(\n    titleStyles.title,\n    {\n      [titleStyles['title--feature']]: appearance === 'titleFeature',\n      [titleStyles['title--title1']]: appearance === 'title1',\n      [titleStyles['title--title2']]: appearance === 'title2',\n      [titleStyles['title--title3']]: appearance === 'title3',\n      [titleStyles['title--title4']]: appearance === 'title4',\n      [titleStyles['title--title5']]: appearance === 'title5',\n    },\n    className\n  );\n  const CustomTag = htmlMarkup;\n\n  const inlineStyle = instanceOfTitleMargin(margin)\n    ? { marginTop: `${margin.marginTop}rem`, marginBottom: `${margin.marginBottom}rem` }\n    : { marginTop: `${margin}rem`, marginBottom: `${margin}rem` };\n\n  return (\n    <CustomTag id={id} className={titleClasses} style={inlineStyle} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Title}>\n      {children}\n    </CustomTag>\n  );\n});\n\nexport interface TitleMargin {\n  marginTop: number;\n  marginBottom: number;\n}\n\nexport const instanceOfTitleMargin = (margin: unknown): margin is TitleMargin => {\n  return Object.prototype.hasOwnProperty.call(margin, 'marginTop') && Object.prototype.hasOwnProperty.call(margin, 'marginBottom');\n};\n\nexport default Title;\n"],"names":["Title","React","props","ref","id","children","className","htmlMarkup","appearance","margin","testId","titleClasses","classNames","titleStyles","CustomTag","inlineStyle","instanceOfTitleMargin","jsx","AnalyticsId"],"mappings":";;;;;AA2BO,MAAMA,IAAQC,EAAM,WAAW,SAA2BC,GAAmBC,GAA6C;AACzH,QAAA,EAAE,IAAAC,GAAI,UAAAC,GAAU,WAAAC,GAAW,YAAAC,IAAa,MAAM,YAAAC,IAAa,UAAU,QAAAC,IAAS,GAAG,QAAAC,EAAA,IAAWR,GAC5FS,IAAeC;AAAA,IACnBC,EAAY;AAAA,IACZ;AAAA,MACE,CAACA,EAAY,gBAAgB,CAAC,GAAGL,MAAe;AAAA,MAChD,CAACK,EAAY,eAAe,CAAC,GAAGL,MAAe;AAAA,MAC/C,CAACK,EAAY,eAAe,CAAC,GAAGL,MAAe;AAAA,MAC/C,CAACK,EAAY,eAAe,CAAC,GAAGL,MAAe;AAAA,MAC/C,CAACK,EAAY,eAAe,CAAC,GAAGL,MAAe;AAAA,MAC/C,CAACK,EAAY,eAAe,CAAC,GAAGL,MAAe;AAAA,IACjD;AAAA,IACAF;AAAA,EAAA,GAEIQ,IAAYP,GAEZQ,IAAcC,EAAsBP,CAAM,IAC5C,EAAE,WAAW,GAAGA,EAAO,SAAS,OAAO,cAAc,GAAGA,EAAO,YAAY,MAC3E,IAAA,EAAE,WAAW,GAAGA,CAAM,OAAO,cAAc,GAAGA,CAAM,MAAM;AAE9D,SACG,gBAAAQ,EAAAH,GAAA,EAAU,IAAAV,GAAQ,WAAWO,GAAc,OAAOI,GAAa,KAAAZ,GAAU,eAAaO,GAAQ,oBAAkBQ,EAAY,OAC1H,UAAAb,EACH,CAAA;AAEJ,CAAC,GAOYW,IAAwB,CAACP,MAC7B,OAAO,UAAU,eAAe,KAAKA,GAAQ,WAAW,KAAK,OAAO,UAAU,eAAe,KAAKA,GAAQ,cAAc;"}

package/TooltipWord.js

@@ -0,0 +1,28 @@
+import { jsx as m } from "react/jsx-runtime";
+import p from "react";
+import { AnalyticsId as l } from "./constants.js";
+import f from "./components/Tooltip/TooltipWord/styles.module.scss";
+const c = p.forwardRef(
+  ({ children: a, onClick: r, onFocus: o, onBlur: t, onKeyDown: e, testId: i, ariaDescribedById: s }, d) => /* @__PURE__ */ m(
+    "button",
+    {
+      className: f.word,
+      ref: d,
+      onClick: r,
+      onMouseEnter: o,
+      onMouseLeave: t,
+      onFocus: o,
+      onBlur: t,
+      onKeyDown: e,
+      "aria-describedby": s,
+      "data-testid": i,
+      "data-analyticsid": l.Tooltip,
+      children: a
+    }
+  )
+);
+c.displayName = "TooltipWord";
+export {
+  c as T
+};
+//# sourceMappingURL=TooltipWord.js.map

package/TooltipWord.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipWord.js","sources":["../src/components/Tooltip/TooltipWord/TooltipWord.tsx"],"sourcesContent":["import React from 'react';\n\nimport { AnalyticsId } from '../../../constants';\n\nimport styles from './styles.module.scss';\n\nexport interface TooltipWordProps {\n  /** Ordet som skal ha en tilhørende tooltip */\n  children: string;\n  /** Callback når ordet klikkes på */\n  onClick: () => void;\n  /** Callback når ordet får fokus eller hovres over */\n  onFocus: () => void;\n  /** Callback når ordet mister fokus eller hover forsvinner */\n  onBlur: () => void;\n  /** Callback når det skrives på tastaturet */\n  onKeyDown: (e: React.KeyboardEvent<HTMLSpanElement>) => void;\n  /** ID til element som beskriver ordet */\n  ariaDescribedById: string;\n  /** Valgfri test-id */\n  testId?: string;\n}\n\nconst TooltipWord = React.forwardRef<HTMLButtonElement, TooltipWordProps>(\n  ({ children, onClick, onFocus, onBlur, onKeyDown, testId, ariaDescribedById }, ref) => (\n    <button\n      className={styles.word}\n      ref={ref}\n      onClick={onClick}\n      onMouseEnter={onFocus}\n      onMouseLeave={onBlur}\n      onFocus={onFocus}\n      onBlur={onBlur}\n      onKeyDown={onKeyDown}\n      aria-describedby={ariaDescribedById}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Tooltip}\n    >\n      {children}\n    </button>\n  )\n);\n\nTooltipWord.displayName = 'TooltipWord';\n\nexport default TooltipWord;\n"],"names":["TooltipWord","React","children","onClick","onFocus","onBlur","onKeyDown","testId","ariaDescribedById","ref","jsx","styles","AnalyticsId"],"mappings":";;;;AAuBA,MAAMA,IAAcC,EAAM;AAAA,EACxB,CAAC,EAAE,UAAAC,GAAU,SAAAC,GAAS,SAAAC,GAAS,QAAAC,GAAQ,WAAAC,GAAW,QAAAC,GAAQ,mBAAAC,KAAqBC,MAC7E,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAO;AAAA,MAClB,KAAAF;AAAA,MACA,SAAAN;AAAA,MACA,cAAcC;AAAA,MACd,cAAcC;AAAA,MACd,SAAAD;AAAA,MACA,QAAAC;AAAA,MACA,WAAAC;AAAA,MACA,oBAAkBE;AAAA,MAClB,eAAaD;AAAA,MACb,oBAAkBK,EAAY;AAAA,MAE7B,UAAAV;AAAA,IAAA;AAAA,EACH;AAEJ;AAEAF,EAAY,cAAc;"}

package/Trigger.js

@@ -0,0 +1,73 @@
+import { jsx as t } from "react/jsx-runtime";
+import v from "react";
+import M from "classnames";
+import { g as Z, I as T } from "./Icon.js";
+import { IconSize as d, AnalyticsId as f } from "./constants.js";
+import { useHover as A } from "./hooks/useHover.js";
+import { getColor as h } from "./theme/currys/color.js";
+import { getAriaLabelAttributes as C } from "./utils/accessibility.js";
+import { mergeRefs as N } from "./utils/refs.js";
+import l from "./components/Trigger/styles.module.scss";
+const R = ({ size: o, isHovered: e }) => Z({ size: o, isHovered: e, normal: /* @__PURE__ */ t("path", { d: "M18.854 19.678c0-2.268 1.701-4.74 5.126-4.74 3.358 0 5.172 2.222 5.172 4.536 0 1.793-.952 3.064-2.268 3.992l-.976.682c-.749.521-1.134 1.27-1.134 2.154 0 .047 0 .16.023.296h-2.269a46.85 46.85 0 0 0-.01-.139 8.554 8.554 0 0 1-.036-.724c0-1.36.522-2.471 1.84-3.424l1.042-.75c.75-.544 1.066-1.201 1.066-1.974 0-1.178-.793-2.29-2.45-2.29-1.679 0-2.563 1.293-2.563 2.585 0 .34.045.772.136 1.022l-2.564-.181a3.903 3.903 0 0 1-.135-1.044Zm3.176 10.186c0-.908.726-1.678 1.656-1.678.908 0 1.656.77 1.656 1.678 0 .907-.748 1.657-1.656 1.657-.93 0-1.656-.75-1.656-1.657Z" }), normalHover: /* @__PURE__ */ t("path", { d: "M18.854 18.178c0-2.268 1.701-4.74 5.126-4.74 3.358 0 5.172 2.223 5.172 4.536 0 1.793-.952 3.064-2.268 3.992l-.976.682c-.749.521-1.134 1.27-1.134 2.154 0 .047 0 .16.023.296h-2.269a46.85 46.85 0 0 0-.01-.139 8.554 8.554 0 0 1-.036-.724c0-1.36.522-2.471 1.838-3.424l1.044-.75c.75-.544 1.066-1.201 1.066-1.974 0-1.178-.793-2.29-2.45-2.29-1.679 0-2.563 1.293-2.563 2.585 0 .34.045.772.135 1.022l-2.563-.181a3.903 3.903 0 0 1-.135-1.044Zm3.176 11.686c0-.908.725-1.678 1.655-1.678.908 0 1.657.77 1.657 1.678 0 .907-.749 1.657-1.657 1.657-.93 0-1.655-.75-1.655-1.657Z" }), xSmall: /* @__PURE__ */ t("path", { d: "M23.98 14.937c-3.425 0-5.127 2.473-5.127 4.741 0 .363.047.726.137 1.044l2.563.182c-.09-.25-.136-.681-.136-1.022 0-1.292.885-2.586 2.563-2.586 1.658 0 2.45 1.112 2.45 2.291 0 .772-.317 1.43-1.065 1.974l-1.043.749c-1.317.953-1.84 2.065-1.84 3.425 0 .319.024.567.047.862h2.267c-.021-.135-.021-.25-.021-.295 0-.884.385-1.633 1.133-2.154l.976-.681c1.317-.93 2.27-2.2 2.27-3.993 0-2.314-1.816-4.537-5.174-4.537m-.294 13.248c-.93 0-1.656.773-1.656 1.678a1.65 1.65 0 0 0 1.656 1.657c.907 0 1.656-.748 1.656-1.657 0-.905-.749-1.678-1.656-1.678" }), xSmallHover: /* @__PURE__ */ t("path", { d: "M18.853 18.289c0-2.268 1.701-4.742 5.127-4.742 3.357 0 5.173 2.223 5.173 4.537 0 1.794-.953 3.065-2.27 3.994l-.976.681c-.747.52-1.133 1.27-1.133 2.154 0 .046 0 .16.022.295h-2.267a39.324 39.324 0 0 0-.01-.125 8.468 8.468 0 0 1-.037-.737c0-1.36.523-2.472 1.839-3.425l1.043-.75c.748-.543 1.065-1.201 1.065-1.973 0-1.18-.792-2.29-2.45-2.29-1.678 0-2.562 1.293-2.562 2.585 0 .341.045.772.135 1.022l-2.563-.183a3.914 3.914 0 0 1-.136-1.043Zm3.176 11.575c0-.907.726-1.679 1.656-1.679.908 0 1.657.772 1.657 1.68 0 .907-.749 1.656-1.657 1.656-.93 0-1.656-.749-1.656-1.657Z" }) }), $ = {
+  help: R
+  //info: InfoSignStroke, // @todo Support variant='info' in later version
+}, k = {
+  medium: d.XSmall,
+  large: d.Small
+}, w = (o, e, a) => {
+  if (o === "ondark")
+    return "white";
+  const r = a ? 800 : 600;
+  if (e === "help")
+    return h("plum", r);
+  if (e === "info")
+    return h("blueberry", r);
+}, z = v.forwardRef(
+  ({
+    ariaLabel: o,
+    ariaLabelledById: e,
+    variant: a = "help",
+    mode: r = "onlight",
+    size: i = "medium",
+    selected: c = !1,
+    isHovered: n,
+    htmlMarkup: u = "button",
+    className: b,
+    testId: s,
+    ...S
+  }, x) => {
+    const { isHovered: m, hoverRef: y } = A(), g = M(
+      l.trigger,
+      r === "onlight" && l[`trigger--${a}`],
+      // variants look the same when mode=ondark
+      r === "ondark" && l[`trigger--${r}`],
+      l[`trigger--${i}`],
+      n && l["trigger--hovered"],
+      c && l["trigger--selected"],
+      b
+    ), H = w(r, a, n || m || c), p = /* @__PURE__ */ t(T, { svgIcon: $[a], size: k[i], color: H, isHovered: n || m });
+    if (u === "span")
+      return /* @__PURE__ */ t("span", { "data-testid": s, "data-analyticsid": f.Trigger, className: g, children: p });
+    const I = C({ label: o, id: e });
+    return /* @__PURE__ */ t(
+      "button",
+      {
+        "aria-label": o,
+        type: "button",
+        "data-testid": s,
+        "data-analyticsid": f.Trigger,
+        className: g,
+        ref: N([x, y]),
+        "aria-expanded": c,
+        ...I,
+        ...S,
+        children: p
+      }
+    );
+  }
+);
+z.displayName = "Trigger";
+export {
+  z as T
+};
+//# sourceMappingURL=Trigger.js.map

package/Trigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Trigger.js","sources":["../src/components/Trigger/HelpSign.tsx","../src/components/Trigger/Trigger.tsx"],"sourcesContent":["import React from 'react';\n\nimport { getIcon, SvgPathProps } from '../Icon';\n\nconst HelpSign: React.FC<SvgPathProps> = ({ size, isHovered }: SvgPathProps): React.ReactElement => {\n  const normal = (\n    <path d=\"M18.854 19.678c0-2.268 1.701-4.74 5.126-4.74 3.358 0 5.172 2.222 5.172 4.536 0 1.793-.952 3.064-2.268 3.992l-.976.682c-.749.521-1.134 1.27-1.134 2.154 0 .047 0 .16.023.296h-2.269a46.85 46.85 0 0 0-.01-.139 8.554 8.554 0 0 1-.036-.724c0-1.36.522-2.471 1.84-3.424l1.042-.75c.75-.544 1.066-1.201 1.066-1.974 0-1.178-.793-2.29-2.45-2.29-1.679 0-2.563 1.293-2.563 2.585 0 .34.045.772.136 1.022l-2.564-.181a3.903 3.903 0 0 1-.135-1.044Zm3.176 10.186c0-.908.726-1.678 1.656-1.678.908 0 1.656.77 1.656 1.678 0 .907-.748 1.657-1.656 1.657-.93 0-1.656-.75-1.656-1.657Z\" />\n  );\n\n  const normalHover = (\n    <path d=\"M18.854 18.178c0-2.268 1.701-4.74 5.126-4.74 3.358 0 5.172 2.223 5.172 4.536 0 1.793-.952 3.064-2.268 3.992l-.976.682c-.749.521-1.134 1.27-1.134 2.154 0 .047 0 .16.023.296h-2.269a46.85 46.85 0 0 0-.01-.139 8.554 8.554 0 0 1-.036-.724c0-1.36.522-2.471 1.838-3.424l1.044-.75c.75-.544 1.066-1.201 1.066-1.974 0-1.178-.793-2.29-2.45-2.29-1.679 0-2.563 1.293-2.563 2.585 0 .34.045.772.135 1.022l-2.563-.181a3.903 3.903 0 0 1-.135-1.044Zm3.176 11.686c0-.908.725-1.678 1.655-1.678.908 0 1.657.77 1.657 1.678 0 .907-.749 1.657-1.657 1.657-.93 0-1.655-.75-1.655-1.657Z\" />\n  );\n\n  const xSmall = (\n    <path d=\"M23.98 14.937c-3.425 0-5.127 2.473-5.127 4.741 0 .363.047.726.137 1.044l2.563.182c-.09-.25-.136-.681-.136-1.022 0-1.292.885-2.586 2.563-2.586 1.658 0 2.45 1.112 2.45 2.291 0 .772-.317 1.43-1.065 1.974l-1.043.749c-1.317.953-1.84 2.065-1.84 3.425 0 .319.024.567.047.862h2.267c-.021-.135-.021-.25-.021-.295 0-.884.385-1.633 1.133-2.154l.976-.681c1.317-.93 2.27-2.2 2.27-3.993 0-2.314-1.816-4.537-5.174-4.537m-.294 13.248c-.93 0-1.656.773-1.656 1.678a1.65 1.65 0 0 0 1.656 1.657c.907 0 1.656-.748 1.656-1.657 0-.905-.749-1.678-1.656-1.678\" />\n  );\n\n  const xSmallHover = (\n    <path d=\"M18.853 18.289c0-2.268 1.701-4.742 5.127-4.742 3.357 0 5.173 2.223 5.173 4.537 0 1.794-.953 3.065-2.27 3.994l-.976.681c-.747.52-1.133 1.27-1.133 2.154 0 .046 0 .16.022.295h-2.267a39.324 39.324 0 0 0-.01-.125 8.468 8.468 0 0 1-.037-.737c0-1.36.523-2.472 1.839-3.425l1.043-.75c.748-.543 1.065-1.201 1.065-1.973 0-1.18-.792-2.29-2.45-2.29-1.678 0-2.562 1.293-2.562 2.585 0 .341.045.772.135 1.022l-2.563-.183a3.914 3.914 0 0 1-.136-1.043Zm3.176 11.575c0-.907.726-1.679 1.656-1.679.908 0 1.657.772 1.657 1.68 0 .907-.749 1.656-1.657 1.656-.93 0-1.656-.749-1.656-1.657Z\" />\n  );\n\n  return getIcon({ size, isHovered, normal, normalHover, xSmall, xSmallHover });\n};\n\nexport default HelpSign;\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport HelpSign from './HelpSign';\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { useHover } from '../../hooks/useHover';\nimport { getColor } from '../../theme/currys';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { mergeRefs } from '../../utils/refs';\nimport Icon, { SvgIcon } from '../Icon';\n\nimport styles from './styles.module.scss';\n\nexport type TriggerTags = 'button' | 'span';\n\nexport type TriggerVariant = 'help'; // @todo Support variant='info' in later version\n\nexport type TriggerSize = 'medium' | 'large';\n\nexport type TriggerMode = 'onlight' | 'ondark';\n\nexport interface TriggerProps extends Pick<React.InputHTMLAttributes<HTMLButtonElement>, 'onClick' | 'aria-haspopup' | 'aria-controls'> {\n  /**\n   * Sets aria-label of the trigger. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabel?: string;\n  /**\n   * Sets aria-labelledby of the trigger. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabelledById?: string;\n  /**\n   * Controls the icon and color. Default: help.\n   */\n  variant?: TriggerVariant;\n  /**\n   * Changes the design based on the background the trigger is placed on. Default: onlight.\n   */\n  mode?: TriggerMode;\n  /**\n   * Size of the trigger. Default: medium.\n   */\n  size?: TriggerSize;\n  /**\n   * Indicates that the trigger is in use.\n   */\n  selected?: boolean;\n  /**\n   * Indicates that the trigger is hovered. Used in combination with htmlMarkup=span to force visual hover state.\n   */\n  isHovered?: boolean;\n  /**\n   * Changes the underlying element of the trigger. If set to span, the trigger will be a non-interactive icon. Default: button\n   */\n  htmlMarkup?: TriggerTags;\n  /**\n   * Classname will be applied to the button element.\n   */\n  className?: string;\n  /**\n   * Optional test id.\n   */\n  testId?: string;\n}\n\nconst iconMap: Record<TriggerVariant, SvgIcon> = {\n  help: HelpSign,\n  //info: InfoSignStroke, // @todo Support variant='info' in later version\n};\n\nconst iconSizeMap: Record<TriggerSize, IconSize> = {\n  medium: IconSize.XSmall,\n  large: IconSize.Small,\n};\n\nconst getIconColor = (mode: TriggerMode, variant: TriggerVariant, isActive: boolean): string | undefined => {\n  if (mode === 'ondark') {\n    return 'white';\n  }\n\n  const depth = isActive ? 800 : 600;\n\n  if (variant === 'help') {\n    return getColor('plum', depth);\n  }\n\n  if (variant === 'info') {\n    return getColor('blueberry', depth);\n  }\n};\n\nconst Trigger = React.forwardRef<HTMLButtonElement, TriggerProps>(\n  (\n    {\n      ariaLabel,\n      ariaLabelledById,\n      variant = 'help',\n      mode = 'onlight',\n      size = 'medium',\n      selected = false,\n      isHovered,\n      htmlMarkup = 'button',\n      className,\n      testId,\n      ...rest\n    },\n    ref\n  ) => {\n    const { isHovered: buttonIsHovered, hoverRef } = useHover<HTMLButtonElement>();\n\n    const triggerClasses = classNames(\n      styles.trigger,\n      mode === 'onlight' && styles[`trigger--${variant}`], // variants look the same when mode=ondark\n      mode === 'ondark' && styles[`trigger--${mode}`],\n      styles[`trigger--${size}`],\n      isHovered && styles[`trigger--hovered`],\n      selected && styles[`trigger--selected`],\n      className\n    );\n\n    const iconColor = getIconColor(mode, variant, isHovered || buttonIsHovered || selected);\n\n    const icon = <Icon svgIcon={iconMap[variant]} size={iconSizeMap[size]} color={iconColor} isHovered={isHovered || buttonIsHovered} />;\n\n    if (htmlMarkup === 'span') {\n      return (\n        <span data-testid={testId} data-analyticsid={AnalyticsId.Trigger} className={triggerClasses}>\n          {icon}\n        </span>\n      );\n    }\n\n    const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });\n\n    return (\n      <button\n        aria-label={ariaLabel}\n        type=\"button\"\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Trigger}\n        className={triggerClasses}\n        ref={mergeRefs([ref, hoverRef])}\n        aria-expanded={selected}\n        {...ariaLabelAttributes}\n        {...rest}\n      >\n        {icon}\n      </button>\n    );\n  }\n);\n\nTrigger.displayName = 'Trigger';\n\nexport default Trigger;\n"],"names":["HelpSign","size","isHovered","getIcon","jsx","iconMap","iconSizeMap","IconSize","getIconColor","mode","variant","isActive","depth","getColor","Trigger","React","ariaLabel","ariaLabelledById","selected","htmlMarkup","className","testId","rest","ref","buttonIsHovered","hoverRef","useHover","triggerClasses","classNames","styles","iconColor","icon","Icon","AnalyticsId","ariaLabelAttributes","getAriaLabelAttributes","mergeRefs"],"mappings":";;;;;;;;;;AAIA,MAAMA,IAAmC,CAAC,EAAE,MAAAC,GAAM,WAAAC,QAiBzCC,EAAQ,EAAE,MAAAF,GAAM,WAAAC,GAAW,QAfhC,gBAAAE,EAAC,QAAK,EAAA,GAAE,ijBAAijB,CAAA,GAejhB,aAXxC,gBAAAA,EAAC,QAAK,EAAA,GAAE,kjBAAkjB,CAAA,GAWrgB,QAPrD,gBAAAA,EAAC,QAAK,EAAA,GAAE,yhBAAyhB,CAAA,GAOpe,aAH7D,gBAAAA,EAAC,QAAK,EAAA,GAAE,sjBAAsjB,CAAA,GAGpf,GC4CxEC,IAA2C;AAAA,EAC/C,MAAML;AAAA;AAER,GAEMM,IAA6C;AAAA,EACjD,QAAQC,EAAS;AAAA,EACjB,OAAOA,EAAS;AAClB,GAEMC,IAAe,CAACC,GAAmBC,GAAyBC,MAA0C;AAC1G,MAAIF,MAAS;AACJ,WAAA;AAGH,QAAAG,IAAQD,IAAW,MAAM;AAE/B,MAAID,MAAY;AACP,WAAAG,EAAS,QAAQD,CAAK;AAG/B,MAAIF,MAAY;AACP,WAAAG,EAAS,aAAaD,CAAK;AAEtC,GAEME,IAAUC,EAAM;AAAA,EACpB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,SAAAP,IAAU;AAAA,IACV,MAAAD,IAAO;AAAA,IACP,MAAAR,IAAO;AAAA,IACP,UAAAiB,IAAW;AAAA,IACX,WAAAhB;AAAA,IACA,YAAAiB,IAAa;AAAA,IACb,WAAAC;AAAA,IACA,QAAAC;AAAA,IACA,GAAGC;AAAA,KAELC,MACG;AACH,UAAM,EAAE,WAAWC,GAAiB,UAAAC,MAAaC,EAA4B,GAEvEC,IAAiBC;AAAA,MACrBC,EAAO;AAAA,MACPpB,MAAS,aAAaoB,EAAO,YAAYnB,CAAO,EAAE;AAAA;AAAA,MAClDD,MAAS,YAAYoB,EAAO,YAAYpB,CAAI,EAAE;AAAA,MAC9CoB,EAAO,YAAY5B,CAAI,EAAE;AAAA,MACzBC,KAAa2B,EAAO,kBAAkB;AAAA,MACtCX,KAAYW,EAAO,mBAAmB;AAAA,MACtCT;AAAA,IAAA,GAGIU,IAAYtB,EAAaC,GAAMC,GAASR,KAAasB,KAAmBN,CAAQ,GAEhFa,IAAO,gBAAA3B,EAAC4B,GAAK,EAAA,SAAS3B,EAAQK,CAAO,GAAG,MAAMJ,EAAYL,CAAI,GAAG,OAAO6B,GAAW,WAAW5B,KAAasB,EAAiB,CAAA;AAElI,QAAIL,MAAe;AAEf,aAAA,gBAAAf,EAAC,UAAK,eAAaiB,GAAQ,oBAAkBY,EAAY,SAAS,WAAWN,GAC1E,UACHI,EAAA,CAAA;AAIJ,UAAMG,IAAsBC,EAAuB,EAAE,OAAOnB,GAAW,IAAIC,GAAkB;AAG3F,WAAA,gBAAAb;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,cAAYY;AAAA,QACZ,MAAK;AAAA,QACL,eAAaK;AAAA,QACb,oBAAkBY,EAAY;AAAA,QAC9B,WAAWN;AAAA,QACX,KAAKS,EAAU,CAACb,GAAKE,CAAQ,CAAC;AAAA,QAC9B,iBAAeP;AAAA,QACd,GAAGgB;AAAA,QACH,GAAGZ;AAAA,QAEH,UAAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEAjB,EAAQ,cAAc;"}

package/__mocks__/uuid.js

@@ -1,5 +1,5 @@
 import { vi as t } from "vitest";
-import * as d from "../utils/uuid.js";
+import { a as d } from "../uuid.js";
 const i = {
   id: 0
 };

package/components/AnchorLink/index.js

@@ -1,4 +1,4 @@
-import r from "./AnchorLink.js";
+import { A as r } from "../../AnchorLink.js";
 export {
   r as default
 };

package/components/Avatar/index.js

@@ -1,7 +1,7 @@
-import a from "./Avatar.js";
-import { AvatarSize as e } from "./Avatar.js";
+import { A as r } from "../../Avatar.js";
+import { a as e } from "../../Avatar.js";
 export {
   e as AvatarSize,
-  a as default
+  r as default
 };
 //# sourceMappingURL=index.js.map

package/components/Badge/index.js

@@ -1,4 +1,4 @@
-import e from "./Badge.js";
+import { B as e } from "../../Badge.js";
 export {
   e as default
 };

package/components/Button/index.js

@@ -1,4 +1,4 @@
-import o from "./Button.js";
+import { B as o } from "../../Button.js";
 export {
   o as default
 };

package/components/Checkbox/index.js

@@ -1,6 +1,6 @@
-import { Checkbox as e } from "./Checkbox.js";
+import { C as a } from "../../Checkbox.js";
 export {
-  e as Checkbox,
-  e as default
+  a as Checkbox,
+  a as default
 };
 //# sourceMappingURL=index.js.map

package/components/Chip/index.js

@@ -1,9 +1,33 @@
-import p from "./Chip.js";
-import { ChipAction as t, ChipSize as a, ChipVariant as e } from "./Chip.js";
+import { jsxs as p, jsx as f } from "react/jsx-runtime";
+import v from "classnames";
+import { AnalyticsId as h, IconSize as I } from "../../constants.js";
+import { useHover as g } from "../../hooks/useHover.js";
+import { palette as y } from "../../theme/palette.js";
+import { I as b } from "../../Icon.js";
+import $ from "../Icons/Undo.js";
+import x from "../Icons/X.js";
+import r from "./styles.module.scss";
+var X = /* @__PURE__ */ ((o) => (o.medium = "medium", o.large = "large", o))(X || {}), j = /* @__PURE__ */ ((o) => (o.remove = "remove", o.undo = "undo", o))(j || {}), z = /* @__PURE__ */ ((o) => (o.normal = "normal", o.oncolor = "oncolor", o.emphasised = "emphasised", o))(z || {});
+const q = (o) => {
+  const { children: s, size: m = "medium", color: e = "blueberry", variant: n = "normal", action: t, onClick: c, testId: a } = o, { hoverRef: i, isHovered: l } = g(), d = v(r.chip, r[`chip--${m}`], r[`chip--${e}`], r[`chip--${n}`], {
+    [r["chip--undo"]]: t === "undo"
+  }), u = () => {
+    switch (t) {
+      case "undo":
+        return $;
+      case "remove":
+        return x;
+    }
+  };
+  return /* @__PURE__ */ p("button", { className: d, onClick: c, ref: i, type: "button", "data-testid": a, "data-analyticsid": h.Tag, children: [
+    s,
+    /* @__PURE__ */ f(b, { svgIcon: u(), size: I.XXSmall, color: y[`${e}800`], isHovered: l })
+  ] });
+};
 export {
-  t as ChipAction,
-  a as ChipSize,
-  e as ChipVariant,
-  p as default
+  j as ChipAction,
+  X as ChipSize,
+  z as ChipVariant,
+  q as default
 };
 //# sourceMappingURL=index.js.map

package/components/Chip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useHover } from '../../hooks/useHover';\nimport { palette, PaletteNames } from '../../theme/palette';\nimport Icon, { IconSize, SvgIcon } from '../Icon';\nimport Undo from '../Icons/Undo';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\n\nexport enum ChipSize {\n  medium = 'medium',\n  large = 'large',\n}\n\nexport enum ChipAction {\n  remove = 'remove',\n  undo = 'undo',\n}\n\nexport enum ChipVariant {\n  normal = 'normal',\n  oncolor = 'oncolor',\n  emphasised = 'emphasised',\n}\n\nexport type ChipColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'cherry' | 'banana' | 'kiwi' | 'plum'>;\n\nexport interface ChipProps {\n  /** Sets the text of the chip */\n  children: string;\n  /** Sets the size of the chip. Default: medium */\n  size?: keyof typeof ChipSize;\n  /** Sets the background of the chip. Not used if action is \"undo\". Default: blueberry */\n  color?: ChipColors;\n  /* Changes the appearance of the chip. Not used if action is \"undo\". Default: normal */\n  variant?: keyof typeof ChipVariant;\n  /* Makes the chip a clickable button that performs an action. onClick must also be set. */\n  action: keyof typeof ChipAction;\n  /* Called when action is set and the chip is clicked on. action must also be set. */\n  onClick: () => void;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n}\n\nconst Chip: React.FC<ChipProps> = props => {\n  const { children, size = ChipSize.medium, color = 'blueberry', variant = 'normal', action, onClick, testId } = props;\n\n  const { hoverRef, isHovered } = useHover<HTMLButtonElement>();\n\n  const chipClasses = cn(styles.chip, styles[`chip--${size}`], styles[`chip--${color}`], styles[`chip--${variant}`], {\n    [styles[`chip--undo`]]: action === 'undo',\n  });\n\n  const getActionIcon = (): SvgIcon => {\n    switch (action) {\n      case 'undo':\n        return Undo;\n      case 'remove':\n        return X;\n    }\n  };\n\n  return (\n    <button className={chipClasses} onClick={onClick} ref={hoverRef} type=\"button\" data-testid={testId} data-analyticsid={AnalyticsId.Tag}>\n      {children}\n      <Icon svgIcon={getActionIcon()} size={IconSize.XXSmall} color={palette[`${color}800`]} isHovered={isHovered} />\n    </button>\n  );\n};\n\nexport default Chip;\n"],"names":["ChipSize","ChipAction","ChipVariant","Chip","props","children","size","color","variant","action","onClick","testId","hoverRef","isHovered","useHover","chipClasses","cn","styles","getActionIcon","Undo","X","jsxs","AnalyticsId","jsx","Icon","IconSize","palette"],"mappings":";;;;;;;;;AAaY,IAAAA,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,QAAQ,SAFEA,IAAAA,KAAA,CAAA,CAAA,GAKAC,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,OAAO,QAFGA,IAAAA,KAAA,CAAA,CAAA,GAKAC,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,UAAU,WACVA,EAAA,aAAa,cAHHA,IAAAA,KAAA,CAAA,CAAA;AAyBZ,MAAMC,IAA4B,CAASC,MAAA;AACnC,QAAA,EAAE,UAAAC,GAAU,MAAAC,IAAO,UAAiB,OAAAC,IAAQ,aAAa,SAAAC,IAAU,UAAU,QAAAC,GAAQ,SAAAC,GAAS,QAAAC,EAAA,IAAWP,GAEzG,EAAE,UAAAQ,GAAU,WAAAC,EAAU,IAAIC,EAA4B,GAEtDC,IAAcC,EAAGC,EAAO,MAAMA,EAAO,SAASX,CAAI,EAAE,GAAGW,EAAO,SAASV,CAAK,EAAE,GAAGU,EAAO,SAAST,CAAO,EAAE,GAAG;AAAA,IACjH,CAACS,EAAO,YAAY,CAAC,GAAGR,MAAW;AAAA,EAAA,CACpC,GAEKS,IAAgB,MAAe;AACnC,YAAQT,GAAQ;AAAA,MACd,KAAK;AACI,eAAAU;AAAA,MACT,KAAK;AACI,eAAAC;AAAA,IACX;AAAA,EAAA;AAGF,SACG,gBAAAC,EAAA,UAAA,EAAO,WAAWN,GAAa,SAAAL,GAAkB,KAAKE,GAAU,MAAK,UAAS,eAAaD,GAAQ,oBAAkBW,EAAY,KAC/H,UAAA;AAAA,IAAAjB;AAAA,IACA,gBAAAkB,EAAAC,GAAA,EAAK,SAASN,KAAiB,MAAMO,EAAS,SAAS,OAAOC,EAAQ,GAAGnB,CAAK,KAAK,GAAG,WAAAM,GAAsB;AAAA,EAC/G,EAAA,CAAA;AAEJ;"}

package/components/Close/index.js

@@ -1,5 +1,5 @@
-import e from "./Close.js";
+import { C as a } from "../../Close.js";
 export {
-  e as default
+  a as default
 };
 //# sourceMappingURL=index.js.map

package/components/DictionaryTrigger/index.js

@@ -1,5 +1,28 @@
-import i from "./DictionaryTrigger.js";
+import { jsx as m } from "react/jsx-runtime";
+import n from "react";
+import c from "classnames";
+import { AnalyticsId as d } from "../../constants.js";
+import g from "./styles.module.scss";
+const f = n.forwardRef(
+  ({ children: r, selected: t = !1, className: a, testId: i, ...e }, o) => {
+    const s = c(g.dictionarytrigger, a);
+    return /* @__PURE__ */ m(
+      "button",
+      {
+        type: "button",
+        "data-testid": i,
+        "data-analyticsid": d.DictionaryTrigger,
+        className: s,
+        "aria-expanded": t,
+        ref: o,
+        ...e,
+        children: r
+      }
+    );
+  }
+);
+f.displayName = "DictionaryTrigger";
 export {
-  i as default
+  f as default
 };
 //# sourceMappingURL=index.js.map

package/components/DictionaryTrigger/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index.js","sources":["../../../src/components/DictionaryTrigger/DictionaryTrigger.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\n\nimport styles from './styles.module.scss';\n\nexport interface DictionaryTriggerProps extends Pick<React.InputHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onFocus' | 'onBlur'> {\n  /**\n   * Sets the content of the trigger.\n   */\n  children: React.ReactNode;\n  /**\n   * Indicates that the trigger is in use.\n   */\n  selected?: boolean;\n  /**\n   * Classname will be applied to the button element.\n   */\n  className?: string;\n  /**\n   * Sets the data-testid attribute.\n   */\n  testId?: string;\n}\n\nconst DictionaryTrigger = React.forwardRef<HTMLButtonElement, DictionaryTriggerProps>(\n  ({ children, selected = false, className, testId, ...rest }, ref) => {\n    const triggerClasses = classNames(styles.dictionarytrigger, className);\n\n    return (\n      <button\n        type=\"button\"\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.DictionaryTrigger}\n        className={triggerClasses}\n        aria-expanded={selected}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </button>\n    );\n  }\n);\n\nDictionaryTrigger.displayName = 'DictionaryTrigger';\n\nexport default DictionaryTrigger;\n"],"names":["DictionaryTrigger","React","children","selected","className","testId","rest","ref","triggerClasses","classNames","styles","jsx","AnalyticsId"],"mappings":";;;;;AA2BA,MAAMA,IAAoBC,EAAM;AAAA,EAC9B,CAAC,EAAE,UAAAC,GAAU,UAAAC,IAAW,IAAO,WAAAC,GAAW,QAAAC,GAAQ,GAAGC,EAAK,GAAGC,MAAQ;AACnE,UAAMC,IAAiBC,EAAWC,EAAO,mBAAmBN,CAAS;AAGnE,WAAA,gBAAAO;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,eAAaN;AAAA,QACb,oBAAkBO,EAAY;AAAA,QAC9B,WAAWJ;AAAA,QACX,iBAAeL;AAAA,QACf,KAAAI;AAAA,QACC,GAAGD;AAAA,QAEH,UAAAJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEAF,EAAkB,cAAc;"}

package/components/Dropdown/index.js

@@ -1,7 +1,127 @@
-import r from "./Dropdown.js";
-import { DropdownMode as e } from "./Dropdown.js";
+import { jsx as d, jsxs as g } from "react/jsx-runtime";
+import c, { useRef as _, useState as Z } from "react";
+import R from "classnames";
+import { theme as A } from "../../theme/index.js";
+import "../../hooks/useBreakpoint.js";
+import { useHover as q } from "../../hooks/useHover.js";
+import { useToggle as F } from "../../hooks/useToggle.js";
+import { useKeyboardEvent as G } from "../../hooks/useKeyboardEvent.js";
+import { useOutsideEvent as J } from "../../hooks/useOutsideEvent.js";
+import { useUuid as y } from "../../hooks/useUuid.js";
+import { ZIndex as Q, KeyboardEventKey as n, AnalyticsId as W, IconSize as Y } from "../../constants.js";
+import { mergeRefs as M } from "../../utils/refs.js";
+import { B as ee } from "../../Button.js";
+import { I as oe } from "../../Icon.js";
+import re from "../Icons/PlusSmall.js";
+import o from "./styles.module.scss";
+var ne = /* @__PURE__ */ ((a) => (a.onwhite = "onwhite", a.ongrey = "ongrey", a.onblueberry = "onblueberry", a.oncherry = "oncherry", a))(ne || {});
+const Ie = (a) => {
+  const {
+    label: H,
+    placeholder: K,
+    closeText: O = "Lukk",
+    noCloseButton: S = !1,
+    onToggle: $,
+    open: z = !1,
+    children: b,
+    mode: p = "onwhite",
+    transparent: B = !1,
+    fluid: h = !1,
+    testId: L,
+    disabled: i,
+    zIndex: P = Q.PopOver
+  } = a, u = _(null), w = _(null), { hoverRef: I, isHovered: T } = q(), { value: t, toggleValue: x } = F(!i && z, $), l = _(c.Children.map(b, () => c.createRef())), [f, U] = Z(), v = y(), N = y(), E = y(), k = () => {
+    var e;
+    x(), (e = w.current) == null || e.focus();
+  }, m = () => {
+    var e;
+    x(), (e = I.current) == null || e.focus();
+  };
+  G(u, (e) => {
+    var C;
+    if (e.preventDefault(), !l.current)
+      return;
+    if (t) {
+      if (e.key === n.Escape && t) {
+        m();
+        return;
+      }
+    } else {
+      k();
+      return;
+    }
+    const r = l.current.findIndex((X) => X.current === e.target);
+    let s = r;
+    e.key === n.Home ? s = 0 : e.key === n.End ? s = l.current.length - 1 : e.key === n.ArrowDown && r < l.current.length - 1 ? s = r + 1 : e.key === n.ArrowUp && r > 0 ? s = r - 1 : e.key === n.Enter && r !== -1 && (s = r), s !== -1 && ((C = l.current[s].current) == null || C.focus(), U(s));
+  }, [
+    n.ArrowDown,
+    n.ArrowUp,
+    n.End,
+    n.Enter,
+    n.Escape,
+    n.Home
+  ]), J(u, () => t && m());
+  const j = R(
+    o.dropdown__toggle,
+    !i && {
+      [o["dropdown__toggle--on-white"]]: p === "onwhite",
+      [o["dropdown__toggle--on-grey"]]: p === "ongrey",
+      [o["dropdown__toggle--on-blueberry"]]: p === "onblueberry",
+      [o["dropdown__toggle--on-cherry"]]: p === "oncherry",
+      [o["dropdown__toggle--transparent"]]: B,
+      [o["dropdown__toggle--fluid"]]: h,
+      [o["dropdown__toggle--open"]]: t
+    }
+  ), D = R(o.dropdown__content, t && o["dropdown__content--open"]), V = c.Children.map(b, (e, r) => /* @__PURE__ */ d("li", { className: o.dropdown__input, role: "option", id: `${E}-${r}`, "aria-selected": r === f, children: c.isValidElement(e) && l.current && l.current[r] ? c.cloneElement(e, { ref: M([e.props.ref, l.current[r]]) }) : e }));
+  return /* @__PURE__ */ g("div", { className: o.dropdown, ref: u, children: [
+    /* @__PURE__ */ d("span", { id: v, className: o.dropdown__label, children: H }),
+    /* @__PURE__ */ g(
+      "button",
+      {
+        type: "button",
+        onClick: () => !t && k(),
+        className: j,
+        ref: I,
+        "data-testid": L,
+        "data-analyticsid": W.Dropdown,
+        disabled: i,
+        "aria-labelledby": N,
+        "aria-haspopup": "listbox",
+        "aria-expanded": t,
+        children: [
+          /* @__PURE__ */ d("span", { id: N, className: o.dropdown__toggle__label, children: K }),
+          /* @__PURE__ */ d(
+            oe,
+            {
+              color: i ? A.palette.neutral700 : A.palette.blueberry600,
+              svgIcon: re,
+              className: o.dropdown__icon,
+              isHovered: !i && T,
+              size: Y.XSmall
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ g("div", { className: D, style: { width: h ? "100%" : "auto", zIndex: P }, children: [
+      /* @__PURE__ */ d(
+        "ul",
+        {
+          className: o.dropdown__options,
+          role: "listbox",
+          "aria-labelledby": v,
+          tabIndex: -1,
+          "aria-activedescendant": typeof f < "u" ? `${E}-${f}` : void 0,
+          ref: w,
+          children: V
+        }
+      ),
+      !S && /* @__PURE__ */ d("div", { className: o.dropdown__close, children: /* @__PURE__ */ d(ee, { onClick: m, "aria-expanded": t, children: O }) })
+    ] })
+  ] });
+};
 export {
-  e as DropdownMode,
-  r as default
+  ne as DropdownMode,
+  Ie as default
 };
 //# sourceMappingURL=index.js.map

package/components/Dropdown/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport {\n  AnalyticsId,\n  IconSize,\n  KeyboardEventKey,\n  ZIndex,\n  theme,\n  useHover,\n  useKeyboardEvent,\n  useOutsideEvent,\n  useToggle,\n  useUuid,\n} from '../..';\nimport { mergeRefs } from '../../utils/refs';\nimport Button from '../Button';\nimport Icon from '../Icon';\nimport PlusSmall from '../Icons/PlusSmall';\n\nimport styles from './styles.module.scss';\n\nexport enum DropdownMode {\n  onwhite = 'onwhite',\n  ongrey = 'ongrey',\n  onblueberry = 'onblueberry',\n  oncherry = 'oncherry',\n}\n\nexport interface DropdownProps {\n  /** Label for dropdown. Visible for screen readers  */\n  label: string;\n  /** Text on the trigger button that opens the dropdown */\n  placeholder: string;\n  /** Sets the dropdown content */\n  children: React.ReactNode;\n  /** Close button text */\n  closeText?: string;\n  /** No close button */\n  noCloseButton?: boolean;\n  /** Called when dropdown is open/closed */\n  onToggle?: (isOpen: boolean) => void;\n  /** Whether the dropdown is open or not */\n  open?: boolean;\n  /** Changes the visuals of the dropdown */\n  mode?: keyof typeof DropdownMode;\n  /** Makes the background of the trigger transparent */\n  transparent?: boolean;\n  /** Makes the width of the full component adjust to its parent */\n  fluid?: boolean;\n  /** Makes the dropdown disabled */\n  disabled?: boolean;\n  /** Sets the data-testid attribute on the dropdown button */\n  testId?: string;\n  /** Overrides the default z-index of the DropDownContent */\n  zIndex?: number;\n}\n\nconst Dropdown: React.FC<DropdownProps> = props => {\n  const {\n    label,\n    placeholder,\n    closeText = 'Lukk',\n    noCloseButton = false,\n    onToggle,\n    open = false,\n    children,\n    mode = DropdownMode.onwhite,\n    transparent = false,\n    fluid = false,\n    testId,\n    disabled,\n    zIndex = ZIndex.PopOver,\n  } = props;\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const optionsRef = useRef<HTMLUListElement>(null);\n  const { hoverRef: buttonRef, isHovered } = useHover<HTMLButtonElement>();\n  const { value: isOpen, toggleValue: toggleIsOpen } = useToggle(!disabled && open, onToggle);\n  const inputRefList = useRef(React.Children.map(children, () => React.createRef<HTMLElement>()));\n  const [currentIndex, setCurrentIndex] = useState<number>();\n  const labelId = useUuid();\n  const toggleLabelId = useUuid();\n  const optionIdPrefix = useUuid();\n\n  const handleOpen = (): void => {\n    toggleIsOpen();\n    optionsRef.current?.focus();\n  };\n\n  const handleClose = (): void => {\n    toggleIsOpen();\n    buttonRef.current?.focus();\n  };\n\n  const handleKeyboardNavigation = (event: KeyboardEvent): void => {\n    event.preventDefault();\n\n    if (!inputRefList.current) {\n      return;\n    }\n\n    if (!isOpen) {\n      handleOpen();\n      return;\n    } else if (event.key === KeyboardEventKey.Escape && isOpen) {\n      handleClose();\n      return;\n    }\n\n    const index = inputRefList.current.findIndex(x => x.current === event.target);\n    let nextIndex = index;\n\n    if (event.key === KeyboardEventKey.Home) {\n      nextIndex = 0;\n    } else if (event.key === KeyboardEventKey.End) {\n      nextIndex = inputRefList.current.length - 1;\n    } else if (event.key === KeyboardEventKey.ArrowDown && index < inputRefList.current.length - 1) {\n      nextIndex = index + 1;\n    } else if (event.key === KeyboardEventKey.ArrowUp && index > 0) {\n      nextIndex = index - 1;\n    } else if (event.key === KeyboardEventKey.Enter && index !== -1) {\n      nextIndex = index;\n    }\n    if (nextIndex !== -1) {\n      inputRefList.current[nextIndex].current?.focus();\n      setCurrentIndex(nextIndex);\n    }\n  };\n\n  useKeyboardEvent(dropdownRef, handleKeyboardNavigation, [\n    KeyboardEventKey.ArrowDown,\n    KeyboardEventKey.ArrowUp,\n    KeyboardEventKey.End,\n    KeyboardEventKey.Enter,\n    KeyboardEventKey.Escape,\n    KeyboardEventKey.Home,\n  ]);\n\n  useOutsideEvent(dropdownRef, () => isOpen && handleClose());\n\n  const toggleClasses = classNames(\n    styles.dropdown__toggle,\n    !disabled && {\n      [styles['dropdown__toggle--on-white']]: mode === DropdownMode.onwhite,\n      [styles['dropdown__toggle--on-grey']]: mode === DropdownMode.ongrey,\n      [styles['dropdown__toggle--on-blueberry']]: mode === DropdownMode.onblueberry,\n      [styles['dropdown__toggle--on-cherry']]: mode === DropdownMode.oncherry,\n      [styles['dropdown__toggle--transparent']]: transparent,\n      [styles['dropdown__toggle--fluid']]: fluid,\n      [styles['dropdown__toggle--open']]: isOpen,\n    }\n  );\n\n  const contentClasses = classNames(styles.dropdown__content, isOpen && styles['dropdown__content--open']);\n\n  const renderChildren = React.Children.map(children, (child, index) => (\n    <li className={styles.dropdown__input} role=\"option\" id={`${optionIdPrefix}-${index}`} aria-selected={index === currentIndex}>\n      {React.isValidElement(child) && inputRefList.current && inputRefList.current[index]\n        ? React.cloneElement(child as React.ReactElement, { ref: mergeRefs([child.props.ref, inputRefList.current[index]]) })\n        : child}\n    </li>\n  ));\n\n  return (\n    <div className={styles.dropdown} ref={dropdownRef}>\n      <span id={labelId} className={styles.dropdown__label}>\n        {label}\n      </span>\n      <button\n        type=\"button\"\n        onClick={(): false | void => !isOpen && handleOpen()}\n        className={toggleClasses}\n        ref={buttonRef}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Dropdown}\n        disabled={disabled}\n        aria-labelledby={toggleLabelId}\n        aria-haspopup=\"listbox\"\n        aria-expanded={isOpen}\n      >\n        <span id={toggleLabelId} className={styles.dropdown__toggle__label}>\n          {placeholder}\n        </span>\n        <Icon\n          color={disabled ? theme.palette.neutral700 : theme.palette.blueberry600}\n          svgIcon={PlusSmall}\n          className={styles.dropdown__icon}\n          isHovered={!disabled && isHovered}\n          size={IconSize.XSmall}\n        />\n      </button>\n      <div className={contentClasses} style={{ width: fluid ? '100%' : `auto`, zIndex: zIndex }}>\n        <ul\n          className={styles.dropdown__options}\n          role=\"listbox\"\n          aria-labelledby={labelId}\n          tabIndex={-1}\n          aria-activedescendant={typeof currentIndex !== 'undefined' ? `${optionIdPrefix}-${currentIndex}` : undefined}\n          ref={optionsRef}\n        >\n          {renderChildren}\n        </ul>\n        {!noCloseButton && (\n          <div className={styles.dropdown__close}>\n            <Button onClick={handleClose} aria-expanded={isOpen}>\n              {closeText}\n            </Button>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default Dropdown;\n"],"names":["DropdownMode","Dropdown","props","label","placeholder","closeText","noCloseButton","onToggle","open","children","mode","transparent","fluid","testId","disabled","zIndex","ZIndex","dropdownRef","useRef","optionsRef","buttonRef","isHovered","useHover","isOpen","toggleIsOpen","useToggle","inputRefList","React","currentIndex","setCurrentIndex","useState","labelId","useUuid","toggleLabelId","optionIdPrefix","handleOpen","_a","handleClose","useKeyboardEvent","event","KeyboardEventKey","index","x","nextIndex","useOutsideEvent","toggleClasses","classNames","styles","contentClasses","renderChildren","child","jsx","mergeRefs","jsxs","AnalyticsId","Icon","theme","PlusSmall","IconSize","Button"],"mappings":"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"}