@helsenorge/designsystem-react 8.4.0 → 8.5.1

package/components/Toggle/styles.module.scss

@@ -0,0 +1,125 @@
+@use 'sass:map';
+@import '../../scss/spacers';
+@import '../../scss/breakpoints';
+@import '../../scss/palette';
+@import '../../scss/font-settings';
+@import '../../scss/supernova/styles/colors';
+
+.toggle-container {
+  display: flex;
+  flex-direction: column;
+  max-width: 43.5rem;
+
+  &__row {
+    display: flex;
+    align-items: center;
+
+    &--right {
+      width: 100%;
+      justify-content: space-between;
+    }
+  }
+
+  &__label {
+    font-size: $font-size-md;
+    font-weight: 400;
+    line-height: $lineheight-size-xs;
+    color: var(--core-color-neutral-900);
+    margin-left: getSpacer(xs);
+
+    @media (min-width: map.get($grid-breakpoints, sm)) {
+      margin-left: getSpacer(s);
+    }
+
+    &__text--semibold {
+      font-weight: 600;
+    }
+
+    &--toggle-right {
+      margin-left: 0;
+      margin-right: getSpacer(xs);
+
+      @media (min-width: map.get($grid-breakpoints, sm)) {
+        margin-right: getSpacer(s);
+      }
+    }
+  }
+
+  &__sublabel {
+    font-size: $font-size-xs;
+    line-height: 1.25rem;
+    color: var(--core-color-neutral-800);
+    margin-left: 3.9rem;
+    text-align: left;
+
+    @media (min-width: map.get($grid-breakpoints, sm)) {
+      font-size: $font-size-sm;
+      line-height: $lineheight-size-xs;
+      text-align: left;
+      margin-left: 4.1rem;
+    }
+
+    &--toggle-right {
+      margin-left: 0;
+    }
+  }
+
+  &__toggle-group {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+  }
+
+  &__toggle {
+    position: relative;
+    display: inline-block;
+    width: 3.125rem;
+    height: 2rem;
+    background-color: var(--color-base-background-white);
+    border-radius: 60px;
+    border: 2px solid var(--color-base-border-onlight-emphasized);
+
+    &--on-white {
+      background-color: var(--core-color-neutral-50);
+    }
+
+    &--ignore-hover {
+      pointer-events: none;
+    }
+
+    &__dot {
+      content: '';
+      position: absolute;
+      width: 1.375rem;
+      height: 1.375rem;
+      left: 3px;
+      bottom: 3px;
+      background-color: var(--brandcolor-neutral-dark);
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &--ignore-hover {
+        pointer-events: none;
+      }
+
+      &__icon {
+        opacity: 0;
+        stroke: var(--color-action-graphics-onlight);
+      }
+    }
+  }
+
+  &__input {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+
+    &:focus-visible + .toggle-container__toggle {
+      border-color: var(--color-action-border-onlight-focus);
+      outline: 2px solid var(--color-action-border-onlight-focus);
+    }
+  }
+}

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

@@ -0,0 +1,24 @@
+export type Styles = {
+  'toggle-container': string;
+  'toggle-container__input': string;
+  'toggle-container__label': string;
+  'toggle-container__label__text--semibold': string;
+  'toggle-container__label--toggle-right': string;
+  'toggle-container__row': string;
+  'toggle-container__row--right': string;
+  'toggle-container__sublabel': string;
+  'toggle-container__sublabel--toggle-right': string;
+  'toggle-container__toggle': string;
+  'toggle-container__toggle__dot': string;
+  'toggle-container__toggle__dot__icon': string;
+  'toggle-container__toggle__dot--ignore-hover': string;
+  'toggle-container__toggle--ignore-hover': string;
+  'toggle-container__toggle--on-white': string;
+  'toggle-container__toggle-group': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/components/Tooltip/TooltipWord/index.js

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

package/components/Tooltip/index.js

@@ -1,8 +1,57 @@
-import { Tooltip as r } from "./Tooltip.js";
-import { TooltipOpenProvider as e } from "./Tooltip.js";
+import { jsxs as m, Fragment as w, jsx as c } from "react/jsx-runtime";
+import O, { useRef as y, useContext as C, useEffect as u, useState as D } from "react";
+import { T as b } from "../../TooltipWord.js";
+import { useDelayedState as B } from "../../hooks/useDelayedState.js";
+import { useUuid as E } from "../../hooks/useUuid.js";
+import { H as v } from "../../HelpBubble.js";
+const x = 200, g = ({ children: p, description: s, testId: i }) => {
+  const t = E(), a = y(null), { currentTooltip: n, setCurrentTooltip: r } = C(h), [{ showTooltip: l, keepOpen: T }, k, o] = B(
+    { showTooltip: !1, keepOpen: !1 },
+    x
+  );
+  u(() => {
+    r && r(l ? t : void 0);
+  }, [l]), u(() => {
+    n !== t && typeof n < "u" && o((e) => ({ showTooltip: !1, keepOpen: e.keepOpen }));
+  }, [n]);
+  const d = () => {
+    l || o({ showTooltip: !1, keepOpen: !1 });
+  };
+  return u(() => (document.addEventListener("mouseup", d), () => {
+    document.removeEventListener("mouseup", d);
+  }), []), /* @__PURE__ */ m(w, { children: [
+    /* @__PURE__ */ c(
+      b,
+      {
+        ref: a,
+        onClick: () => {
+          o((e) => ({ showTooltip: !e.showTooltip, keepOpen: !e.keepOpen }));
+        },
+        onFocus: () => {
+          n || k((e) => ({ showTooltip: !0, keepOpen: e.keepOpen }));
+        },
+        onBlur: () => {
+          o((e) => ({ showTooltip: !1, keepOpen: e.keepOpen }));
+        },
+        onKeyDown: (e) => {
+          e.key === "Enter" && o((f) => ({ showTooltip: !f.showTooltip, keepOpen: !f.keepOpen })), e.key === "Escape" && o({ showTooltip: !1, keepOpen: !1 });
+        },
+        ariaDescribedById: t,
+        testId: i,
+        children: p
+      }
+    ),
+    /* @__PURE__ */ c(v, { helpBubbleId: t, controllerRef: a, role: "tooltip", showBubble: l || T, children: s })
+  ] });
+}, h = O.createContext({
+  currentTooltip: void 0
+}), A = ({ children: p }) => {
+  const [s, i] = D();
+  return /* @__PURE__ */ c(h.Provider, { value: { currentTooltip: s, setCurrentTooltip: i }, children: p });
+};
 export {
-  r as Tooltip,
-  e as TooltipOpenProvider,
-  r as default
+  g as Tooltip,
+  A as TooltipOpenProvider,
+  g as default
 };
 //# sourceMappingURL=index.js.map

package/components/Tooltip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, { useContext, useState, useEffect, useRef } from 'react';\n\nimport TooltipWord from './TooltipWord';\nimport { useDelayedState } from '../../hooks/useDelayedState';\nimport { useUuid } from '../../hooks/useUuid';\nimport HelpBubble from '../HelpBubble';\n\nconst HOVER_DELAY_MS = 200;\n\nexport interface TooltipProps {\n  /** Ordet som skal ha en tilhørende tooltip */\n  children: string;\n  /** Teksten som skal vises i tooltip */\n  description: React.ReactNode;\n  /** Valgfri test-id */\n  testId?: string;\n}\n\nexport const Tooltip: React.FC<TooltipProps> = ({ children, description, testId }) => {\n  const helpBubbleId = useUuid();\n  const wordRef = useRef<HTMLButtonElement>(null);\n  const { currentTooltip, setCurrentTooltip } = useContext(TooltipOpenContext);\n  const [{ showTooltip, keepOpen }, setShowTooltipDelayed, setShowTooltip] = useDelayedState(\n    { showTooltip: false, keepOpen: false },\n    HOVER_DELAY_MS\n  );\n\n  useEffect(() => {\n    if (!setCurrentTooltip) {\n      return;\n    }\n    if (showTooltip) {\n      setCurrentTooltip(helpBubbleId);\n    } else {\n      setCurrentTooltip(undefined);\n    }\n  }, [showTooltip]);\n\n  useEffect(() => {\n    if (currentTooltip !== helpBubbleId && typeof currentTooltip !== 'undefined') {\n      setShowTooltip(prevState => ({ showTooltip: false, keepOpen: prevState.keepOpen }));\n    }\n  }, [currentTooltip]);\n\n  const handleDocumentClick = (): void => {\n    if (!showTooltip) {\n      setShowTooltip({ showTooltip: false, keepOpen: false });\n    }\n  };\n\n  useEffect(() => {\n    document.addEventListener('mouseup', handleDocumentClick);\n    return (): void => {\n      document.removeEventListener('mouseup', handleDocumentClick);\n    };\n  }, []);\n\n  const handleTooltipClick = (): void => {\n    setShowTooltip(prevState => ({ showTooltip: !prevState.showTooltip, keepOpen: !prevState.keepOpen }));\n  };\n\n  const handleFocus = (): void => {\n    if (!currentTooltip) {\n      setShowTooltipDelayed(prevState => ({ showTooltip: true, keepOpen: prevState.keepOpen }));\n    }\n  };\n\n  const handleBlur = (): void => {\n    setShowTooltip(prevState => ({ showTooltip: false, keepOpen: prevState.keepOpen }));\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLSpanElement>): void => {\n    if (e.key === 'Enter') {\n      setShowTooltip(prevState => ({ showTooltip: !prevState.showTooltip, keepOpen: !prevState.keepOpen }));\n    }\n    if (e.key === 'Escape') {\n      setShowTooltip({ showTooltip: false, keepOpen: false });\n    }\n  };\n\n  return (\n    <>\n      <TooltipWord\n        ref={wordRef}\n        onClick={handleTooltipClick}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        onKeyDown={handleKeyDown}\n        ariaDescribedById={helpBubbleId}\n        testId={testId}\n      >\n        {children}\n      </TooltipWord>\n      <HelpBubble helpBubbleId={helpBubbleId} controllerRef={wordRef} role=\"tooltip\" showBubble={showTooltip || keepOpen}>\n        {description}\n      </HelpBubble>\n    </>\n  );\n};\n\nexport type TooltipContext = {\n  currentTooltip?: string;\n  setCurrentTooltip?: (id?: string) => void;\n};\n\nconst TooltipOpenContext = React.createContext<TooltipContext>({\n  currentTooltip: undefined,\n});\n\ninterface TooltipOpenProviderProps {\n  children?: React.ReactNode;\n}\n\nexport const TooltipOpenProvider: React.FC<TooltipOpenProviderProps> = ({ children }) => {\n  const [currentTooltip, setCurrentTooltip] = useState<string>();\n\n  return <TooltipOpenContext.Provider value={{ currentTooltip, setCurrentTooltip }}>{children}</TooltipOpenContext.Provider>;\n};\n\nexport default Tooltip;\n"],"names":["HOVER_DELAY_MS","Tooltip","children","description","testId","helpBubbleId","useUuid","wordRef","useRef","currentTooltip","setCurrentTooltip","useContext","TooltipOpenContext","showTooltip","keepOpen","setShowTooltipDelayed","setShowTooltip","useDelayedState","useEffect","prevState","handleDocumentClick","jsxs","Fragment","jsx","TooltipWord","HelpBubble","React","TooltipOpenProvider","useState"],"mappings":";;;;;;AAOA,MAAMA,IAAiB,KAWVC,IAAkC,CAAC,EAAE,UAAAC,GAAU,aAAAC,GAAa,QAAAC,QAAa;AACpF,QAAMC,IAAeC,KACfC,IAAUC,EAA0B,IAAI,GACxC,EAAE,gBAAAC,GAAgB,mBAAAC,EAAkB,IAAIC,EAAWC,CAAkB,GACrE,CAAC,EAAE,aAAAC,GAAa,UAAAC,EAAY,GAAAC,GAAuBC,CAAc,IAAIC;AAAA,IACzE,EAAE,aAAa,IAAO,UAAU,GAAM;AAAA,IACtCjB;AAAA,EAAA;AAGF,EAAAkB,EAAU,MAAM;AACd,IAAKR,KAIHA,EADEG,IACgBR,IAEA,MAFY;AAAA,EAGhC,GACC,CAACQ,CAAW,CAAC,GAEhBK,EAAU,MAAM;AACd,IAAIT,MAAmBJ,KAAgB,OAAOI,IAAmB,OAC/DO,EAAe,QAAc,EAAE,aAAa,IAAO,UAAUG,EAAU,SAAW,EAAA;AAAA,EACpF,GACC,CAACV,CAAc,CAAC;AAEnB,QAAMW,IAAsB,MAAY;AACtC,IAAKP,KACHG,EAAe,EAAE,aAAa,IAAO,UAAU,GAAO,CAAA;AAAA,EACxD;AAGF,SAAAE,EAAU,OACC,SAAA,iBAAiB,WAAWE,CAAmB,GACjD,MAAY;AACR,aAAA,oBAAoB,WAAWA,CAAmB;AAAA,EAAA,IAE5D,CAAE,CAAA,GA2BD,gBAAAC,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAKjB;AAAA,QACL,SA3BqB,MAAY;AACtB,UAAAS,EAAA,CAAAG,OAAc,EAAE,aAAa,CAACA,EAAU,aAAa,UAAU,CAACA,EAAU,SAAA,EAAW;AAAA,QAAA;AAAA,QA2BhG,SAxBc,MAAY;AAC9B,UAAKV,KACHM,EAAsB,QAAc,EAAE,aAAa,IAAM,UAAUI,EAAU,SAAW,EAAA;AAAA,QAC1F;AAAA,QAsBI,QAnBa,MAAY;AAC7B,UAAAH,EAAe,QAAc,EAAE,aAAa,IAAO,UAAUG,EAAU,SAAW,EAAA;AAAA,QAAA;AAAA,QAmB9E,WAhBgB,CAAC,MAAkD;AACnE,UAAA,EAAE,QAAQ,WACGH,EAAA,CAAAG,OAAc,EAAE,aAAa,CAACA,EAAU,aAAa,UAAU,CAACA,EAAU,SAAA,EAAW,GAElG,EAAE,QAAQ,YACZH,EAAe,EAAE,aAAa,IAAO,UAAU,GAAO,CAAA;AAAA,QACxD;AAAA,QAWI,mBAAmBX;AAAA,QACnB,QAAAD;AAAA,QAEC,UAAAF;AAAA,MAAA;AAAA,IACH;AAAA,IACA,gBAAAqB,EAACE,GAAW,EAAA,cAAApB,GAA4B,eAAeE,GAAS,MAAK,WAAU,YAAYM,KAAeC,GACvG,UACHX,EAAA,CAAA;AAAA,EACF,EAAA,CAAA;AAEJ,GAOMS,IAAqBc,EAAM,cAA8B;AAAA,EAC7D,gBAAgB;AAClB,CAAC,GAMYC,IAA0D,CAAC,EAAE,UAAAzB,QAAe;AACvF,QAAM,CAACO,GAAgBC,CAAiB,IAAIkB,EAAiB;AAEtD,SAAA,gBAAAL,EAACX,EAAmB,UAAnB,EAA4B,OAAO,EAAE,gBAAAH,GAAgB,mBAAAC,EAAkB,GAAI,UAAAR,EAAS,CAAA;AAC9F;"}

package/components/Trigger/index.js

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

package/components/Validation/index.js

@@ -1,6 +1,50 @@
-import { Validation as o } from "./Validation.js";
+import { jsx as e, Fragment as m, jsxs as l } from "react/jsx-runtime";
+import o from "react";
+import c from "classnames";
+import { A as f } from "../../AnchorLink.js";
+import { L as d } from "../../List.js";
+import { useUuid as u } from "../../hooks/useUuid.js";
+import { T as h } from "../../Title.js";
+import n from "./styles.module.scss";
+import { AnalyticsId as y } from "../../constants.js";
+import { isComponent as T } from "../../utils/component.js";
+import { F as g } from "../../FormGroup.js";
+const C = (r) => {
+  const t = (a, i) => {
+    a == null || a.preventDefault(), i != null && i.focus && (i == null || i.focus());
+  };
+  return r.error.ref ? /* @__PURE__ */ e(f, { href: `#${r.name}`, onClick: (a) => t(a, r.error.ref), children: r.error.message }) : /* @__PURE__ */ e(m, { children: r.error.message });
+}, v = (r) => /* @__PURE__ */ e(d, { children: Object.entries(r.errors).map(([t, a]) => /* @__PURE__ */ e(d.Item, { children: /* @__PURE__ */ e(C, { name: t, error: a }) }, t)) }), N = (r) => {
+  const { errorTitleHtmlMarkup: t = "h2" } = r, a = u(), i = !!r.errors && Object.entries(r.errors).length > 0, s = c(n.validation__summary, i && n["validation__summary--visible"]);
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      role: "alert",
+      "aria-live": "polite",
+      "aria-relevant": "all",
+      "aria-labelledby": i && r.errorTitle ? a : void 0,
+      className: s,
+      children: [
+        i && /* @__PURE__ */ l(m, { children: [
+          r.errorTitle && /* @__PURE__ */ e(h, { appearance: "title4", id: a, htmlMarkup: t, margin: { marginTop: 0, marginBottom: 1 }, children: r.errorTitle }),
+          /* @__PURE__ */ e(v, { errors: r.errors })
+        ] }),
+        r.children
+      ]
+    }
+  );
+}, _ = o.forwardRef((r, t) => {
+  const a = (i) => T(i, g) ? o.cloneElement(i, {
+    errorWrapperClassName: n["validation__error-wrapper"]
+  }) : o.isValidElement(i) && i.type === o.Fragment ? o.Children.map(i.props.children, (s) => a(s)) : i;
+  return /* @__PURE__ */ l(m, { children: [
+    /* @__PURE__ */ e("div", { "data-testid": r.testId, "data-analyticsid": y.Validation, className: r.className, ref: t, children: o.Children.map(r.children, (i) => a(i)) }),
+    /* @__PURE__ */ e(N, { errorTitle: r.errorTitle, errors: r.errors })
+  ] });
+});
+_.displayName = "Validation";
 export {
-  o as Validation,
-  o as default
+  _ as Validation,
+  _ as default
 };
 //# sourceMappingURL=index.js.map

package/components/Validation/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Validation/ErrorListItem.tsx","../../../src/components/Validation/ErrorList.tsx","../../../src/components/Validation/ValidationSummary.tsx","../../../src/components/Validation/Validation.tsx"],"sourcesContent":["import React from 'react';\n\nimport { ErrorDetails, FocusableElement } from './types';\nimport AnchorLink, { AnchorLinkOnClickEvent } from '../AnchorLink';\n\ninterface ErrorElementProps {\n  name: string;\n  error: ErrorDetails;\n}\n\nconst ErrorListItem: React.FC<ErrorElementProps> = props => {\n  const handleClick = (event?: AnchorLinkOnClickEvent, element?: FocusableElement): void => {\n    event?.preventDefault();\n    element?.focus && element?.focus();\n  };\n\n  if (props.error.ref) {\n    return (\n      <AnchorLink href={`#${props.name}`} onClick={(e): void => handleClick(e, props.error.ref)}>\n        {props.error.message}\n      </AnchorLink>\n    );\n  }\n\n  return <>{props.error.message}</>;\n};\n\nexport default ErrorListItem;\n","import React from 'react';\n\nimport ErrorListItem from './ErrorListItem';\nimport { ValidationErrors } from './types';\nimport List from '../List';\n\ninterface ErrorListProps {\n  errors: ValidationErrors;\n}\n\nconst ErrorList: React.FC<ErrorListProps> = props => (\n  <List>\n    {Object.entries(props.errors).map(([name, error]) => (\n      <List.Item key={name}>\n        <ErrorListItem name={name} error={error} />\n      </List.Item>\n    ))}\n  </List>\n);\n\nexport default ErrorList;\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport ErrorList from './ErrorList';\nimport { ValidationErrors } from './types';\nimport { useUuid } from '../../hooks/useUuid';\nimport Title, { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\ninterface ValidationSummaryProps {\n  /** Error summary title */\n  errorTitle?: string;\n  /** Error list */\n  errors?: ValidationErrors;\n  /** Markup props for error summary title. Default: h2 */\n  errorTitleHtmlMarkup?: TitleTags;\n  /** Will be shown last */\n  children?: React.ReactNode;\n}\n\nconst ValidationSummary: React.FC<ValidationSummaryProps> = props => {\n  const { errorTitleHtmlMarkup = 'h2' } = props;\n  const titleId = useUuid();\n\n  const hasErrors = !!props.errors && Object.entries(props.errors).length > 0;\n\n  const summaryClasses = classNames(styles['validation__summary'], hasErrors && styles['validation__summary--visible']);\n\n  return (\n    <div\n      role={'alert'}\n      aria-live={'polite'}\n      aria-relevant={'all'}\n      aria-labelledby={hasErrors && props.errorTitle ? titleId : undefined}\n      className={summaryClasses}\n    >\n      {hasErrors && (\n        <>\n          {props.errorTitle && (\n            <Title appearance=\"title4\" id={titleId} htmlMarkup={errorTitleHtmlMarkup} margin={{ marginTop: 0, marginBottom: 1 }}>\n              {props.errorTitle}\n            </Title>\n          )}\n          <ErrorList errors={props.errors!} />\n        </>\n      )}\n      {props.children}\n    </div>\n  );\n};\n\nexport default ValidationSummary;\n","import React from 'react';\n\nimport { ValidationErrors } from './types';\nimport ValidationSummary from './ValidationSummary';\nimport { AnalyticsId, FormSize } from '../../constants';\nimport { isComponent } from '../../utils/component';\nimport FormGroup, { FormGroupProps } from '../FormGroup/FormGroup';\n\nimport styles from './styles.module.scss';\n\ninterface ValidationProps {\n  /** Error summary title */\n  errorTitle?: string;\n  /** Validation errors. If errors include references to HTML elements, the errors will be rendered as links with an onClick handler to focus the element. */\n  errors?: ValidationErrors;\n  /** Items in the Validation compontent */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the visuals of the formgroup */\n  size?: keyof typeof FormSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const Validation = React.forwardRef((props: ValidationProps, ref: React.ForwardedRef<HTMLDivElement>) => {\n  const renderChild = (child: React.ReactNode): React.ReactNode => {\n    if (isComponent<FormGroupProps>(child, FormGroup)) {\n      return React.cloneElement(child, {\n        errorWrapperClassName: styles['validation__error-wrapper'],\n      });\n    }\n    if (React.isValidElement(child) && child.type === React.Fragment) {\n      return React.Children.map(child.props.children, (child: React.ReactNode) => {\n        return renderChild(child);\n      });\n    }\n\n    return child;\n  };\n\n  return (\n    <>\n      <div data-testid={props.testId} data-analyticsid={AnalyticsId.Validation} className={props.className} ref={ref}>\n        {React.Children.map(props.children, (child: React.ReactNode) => renderChild(child))}\n      </div>\n      <ValidationSummary errorTitle={props.errorTitle} errors={props.errors} />\n    </>\n  );\n});\n\nValidation.displayName = 'Validation';\n\nexport default Validation;\n"],"names":["ErrorListItem","props","handleClick","event","element","AnchorLink","e","jsx","Fragment","ErrorList","List","name","error","ValidationSummary","errorTitleHtmlMarkup","titleId","useUuid","hasErrors","summaryClasses","classNames","styles","jsxs","Title","Validation","React","ref","renderChild","child","isComponent","FormGroup","AnalyticsId"],"mappings":";;;;;;;;;;;AAUA,MAAMA,IAA6C,CAASC,MAAA;AACpD,QAAAC,IAAc,CAACC,GAAgCC,MAAqC;AACxF,IAAAD,KAAA,QAAAA,EAAO,kBACEC,KAAA,QAAAA,EAAA,UAASA,KAAA,QAAAA,EAAS;AAAA,EAAM;AAG/B,SAAAH,EAAM,MAAM,wBAEXI,GAAW,EAAA,MAAM,IAAIJ,EAAM,IAAI,IAAI,SAAS,CAACK,MAAYJ,EAAYI,GAAGL,EAAM,MAAM,GAAG,GACrF,UAAAA,EAAM,MAAM,QACf,CAAA,IAIG,gBAAAM,EAAAC,GAAA,EAAG,UAAMP,EAAA,MAAM,QAAQ,CAAA;AAChC,GCfMQ,IAAsC,CAC1CR,MAAA,gBAAAM,EAACG,GACE,EAAA,UAAA,OAAO,QAAQT,EAAM,MAAM,EAAE,IAAI,CAAC,CAACU,GAAMC,CAAK,MAC7C,gBAAAL,EAACG,EAAK,MAAL,EACC,UAAA,gBAAAH,EAACP,GAAc,EAAA,MAAAW,GAAY,OAAAC,EAAc,CAAA,EAAA,GAD3BD,CAEhB,CACD,EACH,CAAA,GCKIE,IAAsD,CAASZ,MAAA;AAC7D,QAAA,EAAE,sBAAAa,IAAuB,KAAS,IAAAb,GAClCc,IAAUC,KAEVC,IAAY,CAAC,CAAChB,EAAM,UAAU,OAAO,QAAQA,EAAM,MAAM,EAAE,SAAS,GAEpEiB,IAAiBC,EAAWC,EAAO,qBAAwBH,KAAaG,EAAO,8BAA8B,CAAC;AAGlH,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAM;AAAA,MACN,aAAW;AAAA,MACX,iBAAe;AAAA,MACf,mBAAiBJ,KAAahB,EAAM,aAAac,IAAU;AAAA,MAC3D,WAAWG;AAAA,MAEV,UAAA;AAAA,QAAAD,KAEI,gBAAAI,EAAAb,GAAA,EAAA,UAAA;AAAA,UAAAP,EAAM,cACJ,gBAAAM,EAAAe,GAAA,EAAM,YAAW,UAAS,IAAIP,GAAS,YAAYD,GAAsB,QAAQ,EAAE,WAAW,GAAG,cAAc,EAAE,GAC/G,YAAM,YACT;AAAA,UAED,gBAAAP,EAAAE,GAAA,EAAU,QAAQR,EAAM,OAAS,CAAA;AAAA,QAAA,GACpC;AAAA,QAEDA,EAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGb,GC1BasB,IAAaC,EAAM,WAAW,CAACvB,GAAwBwB,MAA4C;AACxG,QAAAC,IAAc,CAACC,MACfC,EAA4BD,GAAOE,CAAS,IACvCL,EAAM,aAAaG,GAAO;AAAA,IAC/B,uBAAuBP,EAAO,2BAA2B;AAAA,EAAA,CAC1D,IAECI,EAAM,eAAeG,CAAK,KAAKA,EAAM,SAASH,EAAM,WAC/CA,EAAM,SAAS,IAAIG,EAAM,MAAM,UAAU,CAACA,MACxCD,EAAYC,CAAK,CACzB,IAGIA;AAGT,SAEI,gBAAAN,EAAAb,GAAA,EAAA,UAAA;AAAA,IAAC,gBAAAD,EAAA,OAAA,EAAI,eAAaN,EAAM,QAAQ,oBAAkB6B,EAAY,YAAY,WAAW7B,EAAM,WAAW,KAAAwB,GACnG,UAAMD,EAAA,SAAS,IAAIvB,EAAM,UAAU,CAAC0B,MAA2BD,EAAYC,CAAK,CAAC,EACpF,CAAA;AAAA,sBACCd,GAAkB,EAAA,YAAYZ,EAAM,YAAY,QAAQA,EAAM,QAAQ;AAAA,EACzE,EAAA,CAAA;AAEJ,CAAC;AAEDsB,EAAW,cAAc;"}

package/constants.d.ts

@@ -107,6 +107,7 @@ export declare enum AnalyticsId {
     Textarea = "textarea",
     Tile = "tile",
     Title = "title",
+    Toggle = "toggle",
     Tooltip = "tooltip",
     Trigger = "trigger",
     Validation = "validation"

package/constants.js

@@ -1,13 +1,13 @@
 var e = /* @__PURE__ */ ((r) => (r[r.XXSmall = 24] = "XXSmall", r[r.XSmall = 38] = "XSmall", r[r.Small = 48] = "Small", r[r.Medium = 64] = "Medium", r[r.Large = 80] = "Large", r[r.XLarge = 130] = "XLarge", r))(e || {}), o = /* @__PURE__ */ ((r) => (r[r.Modal = 13e5] = "Modal", r[r.PopOver = 11e3] = "PopOver", r[r.ExpanderTrigger = 1e4] = "ExpanderTrigger", r[r.OverlayScreen = 9999] = "OverlayScreen", r[r.LightBoxButtons = 1e3] = "LightBoxButtons", r))(o || {});
-const g = 12;
-var p = /* @__PURE__ */ ((r) => (r.onwhite = "onwhite", r.ongrey = "ongrey", r.onblueberry = "onblueberry", r.ondark = "ondark", r.oninvalid = "oninvalid", r))(p || {}), a = /* @__PURE__ */ ((r) => (r.medium = "medium", r.large = "large", r))(a || {}), t = /* @__PURE__ */ ((r) => (r.AnchorLink = "anchor-link", r.Avatar = "avatar", r.Badge = "badge", r.Button = "button", r.Checkbox = "checkbox", r.Chip = "chip", r.Close = "close", r.DictionaryTrigger = "dictionary-trigger", r.Dropdown = "dropdown", r.Duolist = "duolist", r.EmptyState = "empty-state", r.Expander = "expander", r.ExpanderHierarchy = "expander-hierarchy", r.ExpanderHierarchyExpander = "expander-hierarchy-expander", r.ExpanderList = "expander-list", r.ExpanderListExpander = "expander-list-expander", r.EyebrowHeader = "eyebrow-header", r.FormGroup = "form-group", r.FormLayout = "form-layout", r.HelpBubble = "help-bubble", r.HelpQuestion = "help-question", r.HighlightPanel = "highlight-panel", r.Icon = "icon", r.Illustration = "Illustration", r.Input = "input", r.Label = "label", r.Link = "link", r.LinkList = "link-list", r.List = "list", r.Loader = "loader", r.Logo = "logo", r.Modal = "modal", r.NotificationPanel = "notification-panel", r.Panel = "panel", r.PanelList = "panel-list", r.PopMenu = "pop-menu", r.PopOver = "pop-over", r.Portal = "portal", r.PromoPanel = "promo-panel", r.RadioButton = "radio-button", r.Select = "select", r.SharingStatus = "sharing-status", r.Slider = "slider", r.Spacer = "spacer", r.StatusDot = "status-dot", r.Step = "step", r.StepButtons = "step-buttons", r.Stepper = "stepper", r.Sublabel = "sublabel", r.Table = "table", r.Tag = "tag", r.TagList = "tag-list", r.Textarea = "textarea", r.Tile = "tile", r.Title = "title", r.Tooltip = "tooltip", r.Trigger = "trigger", r.Validation = "validation", r))(t || {}), u = /* @__PURE__ */ ((r) => (r.Enter = "Enter", r.Escape = "Escape", r.ArrowDown = "ArrowDown", r.ArrowUp = "ArrowUp", r.ArrowRight = "ArrowRight", r.ArrowLeft = "ArrowLeft", r.Home = "Home", r.End = "End", r.Space = " ", r.Tab = "Tab", r))(u || {});
+const u = 12;
+var p = /* @__PURE__ */ ((r) => (r.onwhite = "onwhite", r.ongrey = "ongrey", r.onblueberry = "onblueberry", r.ondark = "ondark", r.oninvalid = "oninvalid", r))(p || {}), a = /* @__PURE__ */ ((r) => (r.medium = "medium", r.large = "large", r))(a || {}), t = /* @__PURE__ */ ((r) => (r.AnchorLink = "anchor-link", r.Avatar = "avatar", r.Badge = "badge", r.Button = "button", r.Checkbox = "checkbox", r.Chip = "chip", r.Close = "close", r.DictionaryTrigger = "dictionary-trigger", r.Dropdown = "dropdown", r.Duolist = "duolist", r.EmptyState = "empty-state", r.Expander = "expander", r.ExpanderHierarchy = "expander-hierarchy", r.ExpanderHierarchyExpander = "expander-hierarchy-expander", r.ExpanderList = "expander-list", r.ExpanderListExpander = "expander-list-expander", r.EyebrowHeader = "eyebrow-header", r.FormGroup = "form-group", r.FormLayout = "form-layout", r.HelpBubble = "help-bubble", r.HelpQuestion = "help-question", r.HighlightPanel = "highlight-panel", r.Icon = "icon", r.Illustration = "Illustration", r.Input = "input", r.Label = "label", r.Link = "link", r.LinkList = "link-list", r.List = "list", r.Loader = "loader", r.Logo = "logo", r.Modal = "modal", r.NotificationPanel = "notification-panel", r.Panel = "panel", r.PanelList = "panel-list", r.PopMenu = "pop-menu", r.PopOver = "pop-over", r.Portal = "portal", r.PromoPanel = "promo-panel", r.RadioButton = "radio-button", r.Select = "select", r.SharingStatus = "sharing-status", r.Slider = "slider", r.Spacer = "spacer", r.StatusDot = "status-dot", r.Step = "step", r.StepButtons = "step-buttons", r.Stepper = "stepper", r.Sublabel = "sublabel", r.Table = "table", r.Tag = "tag", r.TagList = "tag-list", r.Textarea = "textarea", r.Tile = "tile", r.Title = "title", r.Toggle = "toggle", r.Tooltip = "tooltip", r.Trigger = "trigger", r.Validation = "validation", r))(t || {}), g = /* @__PURE__ */ ((r) => (r.Enter = "Enter", r.Escape = "Escape", r.ArrowDown = "ArrowDown", r.ArrowUp = "ArrowUp", r.ArrowRight = "ArrowRight", r.ArrowLeft = "ArrowLeft", r.Home = "Home", r.End = "End", r.Space = " ", r.Tab = "Tab", r))(g || {});
 export {
-  g as AVERAGE_CHARACTER_WIDTH_PX,
+  u as AVERAGE_CHARACTER_WIDTH_PX,
   t as AnalyticsId,
   p as FormMode,
   a as FormSize,
   e as IconSize,
-  u as KeyboardEventKey,
+  g as KeyboardEventKey,
   o as ZIndex
 };
 //# sourceMappingURL=constants.js.map

package/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sources":["../src/constants.ts"],"sourcesContent":["export enum IconSize {\n  XXSmall = 24,\n  XSmall = 38,\n  Small = 48,\n  Medium = 64,\n  Large = 80,\n  XLarge = 130,\n}\n\nexport enum ZIndex {\n  Modal = 1300000,\n  PopOver = 11000,\n  // TODO: Skille mellom ExpanderTrigger isSticky og isHovered? Skulle tro isHovered trenger vesentlig mindre z-index\n  ExpanderTrigger = 10000,\n  OverlayScreen = 9999,\n  LightBoxButtons = 1000,\n}\n\nexport const AVERAGE_CHARACTER_WIDTH_PX = 12;\n\nexport interface HTMLButtonProps {\n  autoFocus?: boolean;\n  disabled?: boolean;\n  form?: string;\n  formAction?: string;\n  formEncType?: string;\n  formMethod?: string;\n  formNoValidate?: boolean;\n  formTarget?: string;\n  name?: string;\n  type?: 'submit' | 'reset' | 'button' | string;\n  value?: string | string[] | number;\n  id?: string;\n}\n\nexport type AnchorTarget = '_self' | '_blank' | '_parent' | '_top';\n\nexport interface HTMLAnchorProps {\n  download?: string;\n  href?: string;\n  hrefLang?: string;\n  media?: string;\n  ping?: string;\n  rel?: AnchorTarget;\n  target?: string;\n  referrerPolicy?:\n    | ''\n    | 'same-origin'\n    | 'no-referrer'\n    | 'no-referrer-when-downgrade'\n    | 'origin'\n    | 'origin-when-cross-origin'\n    | 'strict-origin'\n    | 'strict-origin-when-cross-origin'\n    | 'unsafe-url';\n}\n\nexport type ButtonVariant = 'secondary' | 'tertiary' | string | undefined | null;\n\nexport enum FormMode {\n  onwhite = 'onwhite',\n  ongrey = 'ongrey',\n  onblueberry = 'onblueberry',\n  ondark = 'ondark',\n  oninvalid = 'oninvalid',\n}\n\nexport enum FormSize {\n  medium = 'medium',\n  large = 'large',\n}\n\nexport enum AnalyticsId {\n  AnchorLink = 'anchor-link',\n  Avatar = 'avatar',\n  Badge = 'badge',\n  Button = 'button',\n  Checkbox = 'checkbox',\n  Chip = 'chip',\n  Close = 'close',\n  DictionaryTrigger = 'dictionary-trigger',\n  Dropdown = 'dropdown',\n  Duolist = 'duolist',\n  EmptyState = 'empty-state',\n  Expander = 'expander',\n  ExpanderHierarchy = 'expander-hierarchy',\n  ExpanderHierarchyExpander = 'expander-hierarchy-expander',\n  ExpanderList = 'expander-list',\n  ExpanderListExpander = 'expander-list-expander',\n  EyebrowHeader = 'eyebrow-header',\n  FormGroup = 'form-group',\n  FormLayout = 'form-layout',\n  HelpBubble = 'help-bubble',\n  HelpQuestion = 'help-question',\n  HighlightPanel = 'highlight-panel',\n  Icon = 'icon',\n  Illustration = 'Illustration',\n  Input = 'input',\n  Label = 'label',\n  Link = 'link',\n  LinkList = 'link-list',\n  List = 'list',\n  Loader = 'loader',\n  Logo = 'logo',\n  Modal = 'modal',\n  NotificationPanel = 'notification-panel',\n  Panel = 'panel',\n  PanelList = 'panel-list',\n  PopMenu = 'pop-menu',\n  PopOver = 'pop-over',\n  Portal = 'portal',\n  PromoPanel = 'promo-panel',\n  RadioButton = 'radio-button',\n  Select = 'select',\n  SharingStatus = 'sharing-status',\n  Slider = 'slider',\n  Spacer = 'spacer',\n  StatusDot = 'status-dot',\n  Step = 'step',\n  StepButtons = 'step-buttons',\n  Stepper = 'stepper',\n  Sublabel = 'sublabel',\n  Table = 'table',\n  Tag = 'tag',\n  TagList = 'tag-list',\n  Textarea = 'textarea',\n  Tile = 'tile',\n  Title = 'title',\n  Tooltip = 'tooltip',\n  Trigger = 'trigger',\n  Validation = 'validation',\n}\n\nexport enum KeyboardEventKey {\n  Enter = 'Enter',\n  Escape = 'Escape',\n  ArrowDown = 'ArrowDown',\n  ArrowUp = 'ArrowUp',\n  ArrowRight = 'ArrowRight',\n  ArrowLeft = 'ArrowLeft',\n  Home = 'Home',\n  End = 'End',\n  Space = ' ',\n  Tab = 'Tab',\n}\n"],"names":["IconSize","ZIndex","AVERAGE_CHARACTER_WIDTH_PX","FormMode","FormSize","AnalyticsId","KeyboardEventKey"],"mappings":"AAAY,IAAAA,sBAAAA,OACVA,EAAAA,EAAA,UAAU,EAAV,IAAA,WACAA,EAAAA,EAAA,SAAS,EAAT,IAAA,UACAA,EAAAA,EAAA,QAAQ,EAAR,IAAA,SACAA,EAAAA,EAAA,SAAS,EAAT,IAAA,UACAA,EAAAA,EAAA,QAAQ,EAAR,IAAA,SACAA,EAAAA,EAAA,SAAS,GAAT,IAAA,UANUA,IAAAA,KAAA,CAAA,CAAA,GASAC,sBAAAA,OACVA,EAAAA,EAAA,QAAQ,IAAR,IAAA,SACAA,EAAAA,EAAA,UAAU,IAAV,IAAA,WAEAA,EAAAA,EAAA,kBAAkB,GAAlB,IAAA,mBACAA,EAAAA,EAAA,gBAAgB,IAAhB,IAAA,iBACAA,EAAAA,EAAA,kBAAkB,GAAlB,IAAA,mBANUA,IAAAA,KAAA,CAAA,CAAA;AASL,MAAMC,IAA6B;AAyC9B,IAAAC,sBAAAA,OACVA,EAAA,UAAU,WACVA,EAAA,SAAS,UACTA,EAAA,cAAc,eACdA,EAAA,SAAS,UACTA,EAAA,YAAY,aALFA,IAAAA,KAAA,CAAA,CAAA,GAQAC,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,QAAQ,SAFEA,IAAAA,KAAA,CAAA,CAAA,GAKAC,sBAAAA,OACVA,EAAA,aAAa,eACbA,EAAA,SAAS,UACTA,EAAA,QAAQ,SACRA,EAAA,SAAS,UACTA,EAAA,WAAW,YACXA,EAAA,OAAO,QACPA,EAAA,QAAQ,SACRA,EAAA,oBAAoB,sBACpBA,EAAA,WAAW,YACXA,EAAA,UAAU,WACVA,EAAA,aAAa,eACbA,EAAA,WAAW,YACXA,EAAA,oBAAoB,sBACpBA,EAAA,4BAA4B,+BAC5BA,EAAA,eAAe,iBACfA,EAAA,uBAAuB,0BACvBA,EAAA,gBAAgB,kBAChBA,EAAA,YAAY,cACZA,EAAA,aAAa,eACbA,EAAA,aAAa,eACbA,EAAA,eAAe,iBACfA,EAAA,iBAAiB,mBACjBA,EAAA,OAAO,QACPA,EAAA,eAAe,gBACfA,EAAA,QAAQ,SACRA,EAAA,QAAQ,SACRA,EAAA,OAAO,QACPA,EAAA,WAAW,aACXA,EAAA,OAAO,QACPA,EAAA,SAAS,UACTA,EAAA,OAAO,QACPA,EAAA,QAAQ,SACRA,EAAA,oBAAoB,sBACpBA,EAAA,QAAQ,SACRA,EAAA,YAAY,cACZA,EAAA,UAAU,YACVA,EAAA,UAAU,YACVA,EAAA,SAAS,UACTA,EAAA,aAAa,eACbA,EAAA,cAAc,gBACdA,EAAA,SAAS,UACTA,EAAA,gBAAgB,kBAChBA,EAAA,SAAS,UACTA,EAAA,SAAS,UACTA,EAAA,YAAY,cACZA,EAAA,OAAO,QACPA,EAAA,cAAc,gBACdA,EAAA,UAAU,WACVA,EAAA,WAAW,YACXA,EAAA,QAAQ,SACRA,EAAA,MAAM,OACNA,EAAA,UAAU,YACVA,EAAA,WAAW,YACXA,EAAA,OAAO,QACPA,EAAA,QAAQ,SACRA,EAAA,UAAU,WACVA,EAAA,UAAU,WACVA,EAAA,aAAa,cA1DHA,IAAAA,KAAA,CAAA,CAAA,GA6DAC,sBAAAA,OACVA,EAAA,QAAQ,SACRA,EAAA,SAAS,UACTA,EAAA,YAAY,aACZA,EAAA,UAAU,WACVA,EAAA,aAAa,cACbA,EAAA,YAAY,aACZA,EAAA,OAAO,QACPA,EAAA,MAAM,OACNA,EAAA,QAAQ,KACRA,EAAA,MAAM,OAVIA,IAAAA,KAAA,CAAA,CAAA;"}
+{"version":3,"file":"constants.js","sources":["../src/constants.ts"],"sourcesContent":["export enum IconSize {\n  XXSmall = 24,\n  XSmall = 38,\n  Small = 48,\n  Medium = 64,\n  Large = 80,\n  XLarge = 130,\n}\n\nexport enum ZIndex {\n  Modal = 1300000,\n  PopOver = 11000,\n  // TODO: Skille mellom ExpanderTrigger isSticky og isHovered? Skulle tro isHovered trenger vesentlig mindre z-index\n  ExpanderTrigger = 10000,\n  OverlayScreen = 9999,\n  LightBoxButtons = 1000,\n}\n\nexport const AVERAGE_CHARACTER_WIDTH_PX = 12;\n\nexport interface HTMLButtonProps {\n  autoFocus?: boolean;\n  disabled?: boolean;\n  form?: string;\n  formAction?: string;\n  formEncType?: string;\n  formMethod?: string;\n  formNoValidate?: boolean;\n  formTarget?: string;\n  name?: string;\n  type?: 'submit' | 'reset' | 'button' | string;\n  value?: string | string[] | number;\n  id?: string;\n}\n\nexport type AnchorTarget = '_self' | '_blank' | '_parent' | '_top';\n\nexport interface HTMLAnchorProps {\n  download?: string;\n  href?: string;\n  hrefLang?: string;\n  media?: string;\n  ping?: string;\n  rel?: AnchorTarget;\n  target?: string;\n  referrerPolicy?:\n    | ''\n    | 'same-origin'\n    | 'no-referrer'\n    | 'no-referrer-when-downgrade'\n    | 'origin'\n    | 'origin-when-cross-origin'\n    | 'strict-origin'\n    | 'strict-origin-when-cross-origin'\n    | 'unsafe-url';\n}\n\nexport type ButtonVariant = 'secondary' | 'tertiary' | string | undefined | null;\n\nexport enum FormMode {\n  onwhite = 'onwhite',\n  ongrey = 'ongrey',\n  onblueberry = 'onblueberry',\n  ondark = 'ondark',\n  oninvalid = 'oninvalid',\n}\n\nexport enum FormSize {\n  medium = 'medium',\n  large = 'large',\n}\n\nexport enum AnalyticsId {\n  AnchorLink = 'anchor-link',\n  Avatar = 'avatar',\n  Badge = 'badge',\n  Button = 'button',\n  Checkbox = 'checkbox',\n  Chip = 'chip',\n  Close = 'close',\n  DictionaryTrigger = 'dictionary-trigger',\n  Dropdown = 'dropdown',\n  Duolist = 'duolist',\n  EmptyState = 'empty-state',\n  Expander = 'expander',\n  ExpanderHierarchy = 'expander-hierarchy',\n  ExpanderHierarchyExpander = 'expander-hierarchy-expander',\n  ExpanderList = 'expander-list',\n  ExpanderListExpander = 'expander-list-expander',\n  EyebrowHeader = 'eyebrow-header',\n  FormGroup = 'form-group',\n  FormLayout = 'form-layout',\n  HelpBubble = 'help-bubble',\n  HelpQuestion = 'help-question',\n  HighlightPanel = 'highlight-panel',\n  Icon = 'icon',\n  Illustration = 'Illustration',\n  Input = 'input',\n  Label = 'label',\n  Link = 'link',\n  LinkList = 'link-list',\n  List = 'list',\n  Loader = 'loader',\n  Logo = 'logo',\n  Modal = 'modal',\n  NotificationPanel = 'notification-panel',\n  Panel = 'panel',\n  PanelList = 'panel-list',\n  PopMenu = 'pop-menu',\n  PopOver = 'pop-over',\n  Portal = 'portal',\n  PromoPanel = 'promo-panel',\n  RadioButton = 'radio-button',\n  Select = 'select',\n  SharingStatus = 'sharing-status',\n  Slider = 'slider',\n  Spacer = 'spacer',\n  StatusDot = 'status-dot',\n  Step = 'step',\n  StepButtons = 'step-buttons',\n  Stepper = 'stepper',\n  Sublabel = 'sublabel',\n  Table = 'table',\n  Tag = 'tag',\n  TagList = 'tag-list',\n  Textarea = 'textarea',\n  Tile = 'tile',\n  Title = 'title',\n  Toggle = 'toggle',\n  Tooltip = 'tooltip',\n  Trigger = 'trigger',\n  Validation = 'validation',\n}\n\nexport enum KeyboardEventKey {\n  Enter = 'Enter',\n  Escape = 'Escape',\n  ArrowDown = 'ArrowDown',\n  ArrowUp = 'ArrowUp',\n  ArrowRight = 'ArrowRight',\n  ArrowLeft = 'ArrowLeft',\n  Home = 'Home',\n  End = 'End',\n  Space = ' ',\n  Tab = 'Tab',\n}\n"],"names":["IconSize","ZIndex","AVERAGE_CHARACTER_WIDTH_PX","FormMode","FormSize","AnalyticsId","KeyboardEventKey"],"mappings":"AAAY,IAAAA,sBAAAA,OACVA,EAAAA,EAAA,UAAU,EAAV,IAAA,WACAA,EAAAA,EAAA,SAAS,EAAT,IAAA,UACAA,EAAAA,EAAA,QAAQ,EAAR,IAAA,SACAA,EAAAA,EAAA,SAAS,EAAT,IAAA,UACAA,EAAAA,EAAA,QAAQ,EAAR,IAAA,SACAA,EAAAA,EAAA,SAAS,GAAT,IAAA,UANUA,IAAAA,KAAA,CAAA,CAAA,GASAC,sBAAAA,OACVA,EAAAA,EAAA,QAAQ,IAAR,IAAA,SACAA,EAAAA,EAAA,UAAU,IAAV,IAAA,WAEAA,EAAAA,EAAA,kBAAkB,GAAlB,IAAA,mBACAA,EAAAA,EAAA,gBAAgB,IAAhB,IAAA,iBACAA,EAAAA,EAAA,kBAAkB,GAAlB,IAAA,mBANUA,IAAAA,KAAA,CAAA,CAAA;AASL,MAAMC,IAA6B;AAyC9B,IAAAC,sBAAAA,OACVA,EAAA,UAAU,WACVA,EAAA,SAAS,UACTA,EAAA,cAAc,eACdA,EAAA,SAAS,UACTA,EAAA,YAAY,aALFA,IAAAA,KAAA,CAAA,CAAA,GAQAC,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,QAAQ,SAFEA,IAAAA,KAAA,CAAA,CAAA,GAKAC,sBAAAA,OACVA,EAAA,aAAa,eACbA,EAAA,SAAS,UACTA,EAAA,QAAQ,SACRA,EAAA,SAAS,UACTA,EAAA,WAAW,YACXA,EAAA,OAAO,QACPA,EAAA,QAAQ,SACRA,EAAA,oBAAoB,sBACpBA,EAAA,WAAW,YACXA,EAAA,UAAU,WACVA,EAAA,aAAa,eACbA,EAAA,WAAW,YACXA,EAAA,oBAAoB,sBACpBA,EAAA,4BAA4B,+BAC5BA,EAAA,eAAe,iBACfA,EAAA,uBAAuB,0BACvBA,EAAA,gBAAgB,kBAChBA,EAAA,YAAY,cACZA,EAAA,aAAa,eACbA,EAAA,aAAa,eACbA,EAAA,eAAe,iBACfA,EAAA,iBAAiB,mBACjBA,EAAA,OAAO,QACPA,EAAA,eAAe,gBACfA,EAAA,QAAQ,SACRA,EAAA,QAAQ,SACRA,EAAA,OAAO,QACPA,EAAA,WAAW,aACXA,EAAA,OAAO,QACPA,EAAA,SAAS,UACTA,EAAA,OAAO,QACPA,EAAA,QAAQ,SACRA,EAAA,oBAAoB,sBACpBA,EAAA,QAAQ,SACRA,EAAA,YAAY,cACZA,EAAA,UAAU,YACVA,EAAA,UAAU,YACVA,EAAA,SAAS,UACTA,EAAA,aAAa,eACbA,EAAA,cAAc,gBACdA,EAAA,SAAS,UACTA,EAAA,gBAAgB,kBAChBA,EAAA,SAAS,UACTA,EAAA,SAAS,UACTA,EAAA,YAAY,cACZA,EAAA,OAAO,QACPA,EAAA,cAAc,gBACdA,EAAA,UAAU,WACVA,EAAA,WAAW,YACXA,EAAA,QAAQ,SACRA,EAAA,MAAM,OACNA,EAAA,UAAU,YACVA,EAAA,WAAW,YACXA,EAAA,OAAO,QACPA,EAAA,QAAQ,SACRA,EAAA,SAAS,UACTA,EAAA,UAAU,WACVA,EAAA,UAAU,WACVA,EAAA,aAAa,cA3DHA,IAAAA,KAAA,CAAA,CAAA,GA8DAC,sBAAAA,OACVA,EAAA,QAAQ,SACRA,EAAA,SAAS,UACTA,EAAA,YAAY,aACZA,EAAA,UAAU,WACVA,EAAA,aAAa,cACbA,EAAA,YAAY,aACZA,EAAA,OAAO,QACPA,EAAA,MAAM,OACNA,EAAA,QAAQ,KACRA,EAAA,MAAM,OAVIA,IAAAA,KAAA,CAAA,CAAA;"}

package/{components → docs}/ButtonWithModal/ButtonWithModal.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ModalProps } from '../Modal/Modal';
+import { ModalProps } from '../../components/Modal';
 interface ModalWithButtonProps extends ModalProps {
     /** Text of the button */
     buttonText: string;

package/{components → docs}/HelpBubbleExample/HelpBubbleExample.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import { HelpBubbleProps } from '../HelpBubble/HelpBubble';
+import { HelpBubbleProps } from '../../components/HelpBubble';
 declare const HelpBubbleExample: React.FC<HelpBubbleProps>;
 export default HelpBubbleExample;

package/{components → docs}/TooltipExample/TooltipExample.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import { TooltipProps } from '../Tooltip';
+import { TooltipProps } from '../../components/Tooltip';
 declare const TooltipExample: React.FC<TooltipProps>;
 export default TooltipExample;

package/hoc/withBreakpoint/withBreakpoint.js

@@ -1,13 +1,14 @@
-import t from "react";
-import { useBreakpoint as n } from "../../hooks/useBreakpoint.js";
-function p(e) {
-  return t.forwardRef((r, o) => {
-    const a = n();
-    return /* @__PURE__ */ t.createElement(e, { ref: o, ...r, breakpoint: a });
+import { jsx as i } from "react/jsx-runtime";
+import n from "react";
+import { useBreakpoint as a } from "../../hooks/useBreakpoint.js";
+function u(r) {
+  return n.forwardRef((t, o) => {
+    const e = a();
+    return /* @__PURE__ */ i(r, { ref: o, ...t, breakpoint: e });
   });
 }
 export {
-  p as default,
-  p as withBreakpoint
+  u as default,
+  u as withBreakpoint
 };
 //# sourceMappingURL=withBreakpoint.js.map

package/hoc/withBreakpoint/withBreakpoint.js.map

@@ -1 +1 @@
-{"version":3,"file":"withBreakpoint.js","sources":["../../../src/hoc/withBreakpoint/withBreakpoint.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\n\nexport interface BreakpointProps {\n  breakpoint: Breakpoint;\n}\n\n// Hentet fra https://github.com/DefinitelyTyped/DefinitelyTyped/issues/35834#issuecomment-497605842\nexport function withBreakpoint<P extends BreakpointProps, C extends React.ComponentClass<P>>(\n  Component: C & React.ComponentType<P>\n): React.ForwardRefExoticComponent<Omit<React.ComponentPropsWithoutRef<C> & { ref?: React.Ref<InstanceType<C>> }, keyof BreakpointProps>>;\n\nexport function withBreakpoint<P extends BreakpointProps & { ref?: React.Ref<unknown> }>(\n  Component: React.ForwardRefExoticComponent<P>\n): React.ForwardRefExoticComponent<Omit<P, keyof BreakpointProps>>;\n\nexport function withBreakpoint<P extends BreakpointProps>(\n  Component: React.FunctionComponent<P>\n): React.ForwardRefExoticComponent<Omit<P, keyof BreakpointProps>>;\n\nexport function withBreakpoint<P extends BreakpointProps>(Component: React.ComponentType<P>) {\n  return React.forwardRef((props, ref) => {\n    const breakpoint = useBreakpoint();\n    return <Component ref={ref} {...(props as P)} breakpoint={breakpoint} />;\n  });\n}\n\nexport default withBreakpoint;\n"],"names":["withBreakpoint","Component","React","props","ref","breakpoint","useBreakpoint"],"mappings":";;AAqBO,SAASA,EAA0CC,GAAmC;AAC3F,SAAOC,EAAM,WAAW,CAACC,GAAOC,MAAQ;AACtC,UAAMC,IAAaC;AACnB,WAAQJ,gBAAAA,EAAA,cAAAD,GAAA,EAAU,KAAAG,GAAW,GAAID,GAAa,YAAAE,EAAwB,CAAA;AAAA,EAAA,CACvE;AACH;"}
+{"version":3,"file":"withBreakpoint.js","sources":["../../../src/hoc/withBreakpoint/withBreakpoint.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\n\nexport interface BreakpointProps {\n  breakpoint: Breakpoint;\n}\n\n// Hentet fra https://github.com/DefinitelyTyped/DefinitelyTyped/issues/35834#issuecomment-497605842\nexport function withBreakpoint<P extends BreakpointProps, C extends React.ComponentClass<P>>(\n  Component: C & React.ComponentType<P>\n): React.ForwardRefExoticComponent<Omit<React.ComponentPropsWithoutRef<C> & { ref?: React.Ref<InstanceType<C>> }, keyof BreakpointProps>>;\n\nexport function withBreakpoint<P extends BreakpointProps & { ref?: React.Ref<unknown> }>(\n  Component: React.ForwardRefExoticComponent<P>\n): React.ForwardRefExoticComponent<Omit<P, keyof BreakpointProps>>;\n\nexport function withBreakpoint<P extends BreakpointProps>(\n  Component: React.FunctionComponent<P>\n): React.ForwardRefExoticComponent<Omit<P, keyof BreakpointProps>>;\n\nexport function withBreakpoint<P extends BreakpointProps>(Component: React.ComponentType<P>) {\n  return React.forwardRef((props, ref) => {\n    const breakpoint = useBreakpoint();\n    return <Component ref={ref} {...(props as P)} breakpoint={breakpoint} />;\n  });\n}\n\nexport default withBreakpoint;\n"],"names":["withBreakpoint","Component","React","props","ref","breakpoint","useBreakpoint","jsx"],"mappings":";;;AAqBO,SAASA,EAA0CC,GAAmC;AAC3F,SAAOC,EAAM,WAAW,CAACC,GAAOC,MAAQ;AACtC,UAAMC,IAAaC;AACnB,WAAQ,gBAAAC,EAAAN,GAAA,EAAU,KAAAG,GAAW,GAAID,GAAa,YAAAE,EAAwB,CAAA;AAAA,EAAA,CACvE;AACH;"}

package/hooks/useIcons.js

@@ -1,16 +1,16 @@
-import { Icon as i } from "../components/Icon/Icon.js";
-import { LazyIcon as e } from "../components/LazyIcon/LazyIcon.js";
+import { I as i } from "../Icon.js";
+import { L as e } from "../LazyIcon.js";
 import { isComponent as o } from "../utils/component.js";
-const c = (t) => {
-  let s = null, f = null;
+const a = (t) => {
+  let l = null, f = null;
   const n = t[0];
-  (o(n, i) || o(n, e)) && (s = n, t.shift());
-  const l = t[t.length - 1];
-  (o(l, i) || o(l, e)) && (f = l, t.pop());
+  (o(n, i) || o(n, e)) && (l = n, t.shift());
+  const s = t[t.length - 1];
+  (o(s, i) || o(s, e)) && (f = s, t.pop());
   const r = t.filter((m) => m);
-  return [s, f, r.length > 0 ? r : null];
+  return [l, f, r.length > 0 ? r : null];
 };
 export {
-  c as useIcons
+  a as useIcons
 };
 //# sourceMappingURL=useIcons.js.map

package/hooks/usePseudoClasses.d.ts

@@ -8,4 +8,5 @@ export declare const usePseudoClasses: <T extends HTMLElement | SVGElement>(ref?
     refObject: RefObject<T> | MutableRefObject<T>;
     isHovered: boolean;
     isFocused: boolean;
+    isActive: boolean;
 };

package/hooks/usePseudoClasses.js

@@ -1,16 +1,16 @@
-import { useRef as O, useState as I, useEffect as b } from "react";
-const x = (r) => {
-  const e = r || O(null), [H, s] = I(!1), [M, o] = I(!1);
-  return b(() => {
-    var v, a, d, i, l, E;
-    const t = () => s(!0), n = () => s(!1), u = () => o(!0), c = () => o(!1);
-    return (v = e.current) == null || v.addEventListener("mouseenter", t), (a = e.current) == null || a.addEventListener("mouseleave", n), (d = e.current) == null || d.addEventListener("pointerenter", t), (i = e.current) == null || i.addEventListener("pointerleave", n), (l = e.current) == null || l.addEventListener("focusin", u), (E = e.current) == null || E.addEventListener("focusout", c), () => {
-      var L, f, m, p, h, F;
-      (L = e.current) == null || L.removeEventListener("mouseenter", t), (f = e.current) == null || f.removeEventListener("mouseleave", n), (m = e.current) == null || m.removeEventListener("pointerenter", t), (p = e.current) == null || p.removeEventListener("pointerleave", n), (h = e.current) == null || h.removeEventListener("focusin", u), (F = e.current) == null || F.removeEventListener("focusout", c);
+import { useRef as U, useState as s, useEffect as g } from "react";
+const q = (o) => {
+  const e = o || U(null), [D, u] = s(!1), [R, c] = s(!1), [S, r] = s(!1);
+  return g(() => {
+    var E, L, f, m, p, h, F, I, P;
+    const t = () => u(!0), n = () => u(!1), i = () => c(!0), v = () => c(!1), a = () => r(!0), d = () => r(!1), l = () => r(!1);
+    return (E = e.current) == null || E.addEventListener("mouseenter", t), (L = e.current) == null || L.addEventListener("mouseleave", n), (f = e.current) == null || f.addEventListener("pointerenter", t), (m = e.current) == null || m.addEventListener("pointerleave", n), (p = e.current) == null || p.addEventListener("focusin", i), (h = e.current) == null || h.addEventListener("focusout", v), (F = e.current) == null || F.addEventListener("pointerdown", a), (I = e.current) == null || I.addEventListener("pointerup", d), (P = e.current) == null || P.addEventListener("pointerleave", l), () => {
+      var w, A, H, M, O, b, j, x, C;
+      (w = e.current) == null || w.removeEventListener("mouseenter", t), (A = e.current) == null || A.removeEventListener("mouseleave", n), (H = e.current) == null || H.removeEventListener("pointerenter", t), (M = e.current) == null || M.removeEventListener("pointerleave", n), (O = e.current) == null || O.removeEventListener("focusin", i), (b = e.current) == null || b.removeEventListener("focusout", v), (j = e.current) == null || j.removeEventListener("pointerdown", a), (x = e.current) == null || x.removeEventListener("pointerup", d), (C = e.current) == null || C.removeEventListener("pointerleave", l);
     };
-  }, [e]), { refObject: e, isHovered: H, isFocused: M };
+  }, [e]), { refObject: e, isHovered: D, isFocused: R, isActive: S };
 };
 export {
-  x as usePseudoClasses
+  q as usePseudoClasses
 };
 //# sourceMappingURL=usePseudoClasses.js.map

package/hooks/usePseudoClasses.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePseudoClasses.js","sources":["../../src/hooks/usePseudoClasses.ts"],"sourcesContent":["import { useRef, useEffect, useState, RefObject, MutableRefObject } from 'react';\n\n/**\n * Få vite når et element hovres over eller mottar fokus.\n * @param ref Element som skal observeres\n * @returns Objekt med ref og om objekt er hovered/focused\n */\nexport const usePseudoClasses = <T extends HTMLElement | SVGElement>(\n  ref?: RefObject<T> | MutableRefObject<T> | null\n): { refObject: RefObject<T> | MutableRefObject<T>; isHovered: boolean; isFocused: boolean } => {\n  const refObject = ref ? ref : useRef<T>(null);\n  const [isHovered, setIsHovered] = useState(false);\n  const [isFocused, setIsFocused] = useState(false);\n\n  useEffect(() => {\n    const handleMouseEnter = (): void => setIsHovered(true);\n    const handleMouseLeave = (): void => setIsHovered(false);\n    const handleFocusIn = (): void => setIsFocused(true);\n    const handleFocusOut = (): void => setIsFocused(false);\n\n    refObject.current?.addEventListener('mouseenter', handleMouseEnter);\n    refObject.current?.addEventListener('mouseleave', handleMouseLeave);\n    refObject.current?.addEventListener('pointerenter', handleMouseEnter);\n    refObject.current?.addEventListener('pointerleave', handleMouseLeave);\n    refObject.current?.addEventListener('focusin', handleFocusIn);\n    refObject.current?.addEventListener('focusout', handleFocusOut);\n\n    return (): void => {\n      refObject.current?.removeEventListener('mouseenter', handleMouseEnter);\n      refObject.current?.removeEventListener('mouseleave', handleMouseLeave);\n      refObject.current?.removeEventListener('pointerenter', handleMouseEnter);\n      refObject.current?.removeEventListener('pointerleave', handleMouseLeave);\n      refObject.current?.removeEventListener('focusin', handleFocusIn);\n      refObject.current?.removeEventListener('focusout', handleFocusOut);\n    };\n  }, [refObject]);\n\n  return { refObject, isHovered, isFocused };\n};\n"],"names":["usePseudoClasses","ref","refObject","useRef","isHovered","setIsHovered","useState","isFocused","setIsFocused","useEffect","handleMouseEnter","handleMouseLeave","handleFocusIn","handleFocusOut","_a","_b","_c","_d","_e","_f"],"mappings":";AAOa,MAAAA,IAAmB,CAC9BC,MAC8F;AAC9F,QAAMC,IAAYD,KAAYE,EAAU,IAAI,GACtC,CAACC,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAC1C,CAACC,GAAWC,CAAY,IAAIF,EAAS,EAAK;AAEhD,SAAAG,EAAU,MAAM;;AACR,UAAAC,IAAmB,MAAYL,EAAa,EAAI,GAChDM,IAAmB,MAAYN,EAAa,EAAK,GACjDO,IAAgB,MAAYJ,EAAa,EAAI,GAC7CK,IAAiB,MAAYL,EAAa,EAAK;AAE3C,YAAAM,IAAAZ,EAAA,YAAA,QAAAY,EAAS,iBAAiB,cAAcJ,KACxCK,IAAAb,EAAA,YAAA,QAAAa,EAAS,iBAAiB,cAAcJ,KACxCK,IAAAd,EAAA,YAAA,QAAAc,EAAS,iBAAiB,gBAAgBN,KAC1CO,IAAAf,EAAA,YAAA,QAAAe,EAAS,iBAAiB,gBAAgBN,KAC1CO,IAAAhB,EAAA,YAAA,QAAAgB,EAAS,iBAAiB,WAAWN,KACrCO,IAAAjB,EAAA,YAAA,QAAAiB,EAAS,iBAAiB,YAAYN,IAEzC,MAAY;;AACP,OAAAC,IAAAZ,EAAA,YAAA,QAAAY,EAAS,oBAAoB,cAAcJ,KAC3CK,IAAAb,EAAA,YAAA,QAAAa,EAAS,oBAAoB,cAAcJ,KAC3CK,IAAAd,EAAA,YAAA,QAAAc,EAAS,oBAAoB,gBAAgBN,KAC7CO,IAAAf,EAAA,YAAA,QAAAe,EAAS,oBAAoB,gBAAgBN,KAC7CO,IAAAhB,EAAA,YAAA,QAAAgB,EAAS,oBAAoB,WAAWN,KACxCO,IAAAjB,EAAA,YAAA,QAAAiB,EAAS,oBAAoB,YAAYN;AAAA,IAAc;AAAA,EACnE,GACC,CAACX,CAAS,CAAC,GAEP,EAAE,WAAAA,GAAW,WAAAE,GAAW,WAAAG;AACjC;"}
+{"version":3,"file":"usePseudoClasses.js","sources":["../../src/hooks/usePseudoClasses.ts"],"sourcesContent":["import { useRef, useEffect, useState, RefObject, MutableRefObject } from 'react';\n\n/**\n * Få vite når et element hovres over eller mottar fokus.\n * @param ref Element som skal observeres\n * @returns Objekt med ref og om objekt er hovered/focused\n */\nexport const usePseudoClasses = <T extends HTMLElement | SVGElement>(\n  ref?: RefObject<T> | MutableRefObject<T> | null\n): { refObject: RefObject<T> | MutableRefObject<T>; isHovered: boolean; isFocused: boolean; isActive: boolean } => {\n  const refObject = ref ? ref : useRef<T>(null);\n  const [isHovered, setIsHovered] = useState(false);\n  const [isFocused, setIsFocused] = useState(false);\n  const [isActive, setIsActive] = useState(false);\n\n  useEffect(() => {\n    const handleMouseEnter = (): void => setIsHovered(true);\n    const handleMouseLeave = (): void => setIsHovered(false);\n    const handleFocusIn = (): void => setIsFocused(true);\n    const handleFocusOut = (): void => setIsFocused(false);\n    const handlePointerDown = (): void => setIsActive(true);\n    const handlePointerUp = (): void => setIsActive(false);\n    const handlePointerLeave = (): void => setIsActive(false);\n\n    refObject.current?.addEventListener('mouseenter', handleMouseEnter);\n    refObject.current?.addEventListener('mouseleave', handleMouseLeave);\n    refObject.current?.addEventListener('pointerenter', handleMouseEnter);\n    refObject.current?.addEventListener('pointerleave', handleMouseLeave);\n    refObject.current?.addEventListener('focusin', handleFocusIn);\n    refObject.current?.addEventListener('focusout', handleFocusOut);\n    refObject.current?.addEventListener('pointerdown', handlePointerDown);\n    refObject.current?.addEventListener('pointerup', handlePointerUp);\n    refObject.current?.addEventListener('pointerleave', handlePointerLeave);\n\n    return (): void => {\n      refObject.current?.removeEventListener('mouseenter', handleMouseEnter);\n      refObject.current?.removeEventListener('mouseleave', handleMouseLeave);\n      refObject.current?.removeEventListener('pointerenter', handleMouseEnter);\n      refObject.current?.removeEventListener('pointerleave', handleMouseLeave);\n      refObject.current?.removeEventListener('focusin', handleFocusIn);\n      refObject.current?.removeEventListener('focusout', handleFocusOut);\n      refObject.current?.removeEventListener('pointerdown', handlePointerDown);\n      refObject.current?.removeEventListener('pointerup', handlePointerUp);\n      refObject.current?.removeEventListener('pointerleave', handlePointerLeave);\n    };\n  }, [refObject]);\n\n  return { refObject, isHovered, isFocused, isActive };\n};\n"],"names":["usePseudoClasses","ref","refObject","useRef","isHovered","setIsHovered","useState","isFocused","setIsFocused","isActive","setIsActive","useEffect","handleMouseEnter","handleMouseLeave","handleFocusIn","handleFocusOut","handlePointerDown","handlePointerUp","handlePointerLeave","_a","_b","_c","_d","_e","_f","_g","_h","_i"],"mappings":";AAOa,MAAAA,IAAmB,CAC9BC,MACiH;AACjH,QAAMC,IAAYD,KAAYE,EAAU,IAAI,GACtC,CAACC,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAC1C,CAACC,GAAWC,CAAY,IAAIF,EAAS,EAAK,GAC1C,CAACG,GAAUC,CAAW,IAAIJ,EAAS,EAAK;AAE9C,SAAAK,EAAU,MAAM;;AACR,UAAAC,IAAmB,MAAYP,EAAa,EAAI,GAChDQ,IAAmB,MAAYR,EAAa,EAAK,GACjDS,IAAgB,MAAYN,EAAa,EAAI,GAC7CO,IAAiB,MAAYP,EAAa,EAAK,GAC/CQ,IAAoB,MAAYN,EAAY,EAAI,GAChDO,IAAkB,MAAYP,EAAY,EAAK,GAC/CQ,IAAqB,MAAYR,EAAY,EAAK;AAE9C,YAAAS,IAAAjB,EAAA,YAAA,QAAAiB,EAAS,iBAAiB,cAAcP,KACxCQ,IAAAlB,EAAA,YAAA,QAAAkB,EAAS,iBAAiB,cAAcP,KACxCQ,IAAAnB,EAAA,YAAA,QAAAmB,EAAS,iBAAiB,gBAAgBT,KAC1CU,IAAApB,EAAA,YAAA,QAAAoB,EAAS,iBAAiB,gBAAgBT,KAC1CU,IAAArB,EAAA,YAAA,QAAAqB,EAAS,iBAAiB,WAAWT,KACrCU,IAAAtB,EAAA,YAAA,QAAAsB,EAAS,iBAAiB,YAAYT,KACtCU,IAAAvB,EAAA,YAAA,QAAAuB,EAAS,iBAAiB,eAAeT,KACzCU,IAAAxB,EAAA,YAAA,QAAAwB,EAAS,iBAAiB,aAAaT,KACvCU,IAAAzB,EAAA,YAAA,QAAAyB,EAAS,iBAAiB,gBAAgBT,IAE7C,MAAY;;AACP,OAAAC,IAAAjB,EAAA,YAAA,QAAAiB,EAAS,oBAAoB,cAAcP,KAC3CQ,IAAAlB,EAAA,YAAA,QAAAkB,EAAS,oBAAoB,cAAcP,KAC3CQ,IAAAnB,EAAA,YAAA,QAAAmB,EAAS,oBAAoB,gBAAgBT,KAC7CU,IAAApB,EAAA,YAAA,QAAAoB,EAAS,oBAAoB,gBAAgBT,KAC7CU,IAAArB,EAAA,YAAA,QAAAqB,EAAS,oBAAoB,WAAWT,KACxCU,IAAAtB,EAAA,YAAA,QAAAsB,EAAS,oBAAoB,YAAYT,KACzCU,IAAAvB,EAAA,YAAA,QAAAuB,EAAS,oBAAoB,eAAeT,KAC5CU,IAAAxB,EAAA,YAAA,QAAAwB,EAAS,oBAAoB,aAAaT,KAC1CU,IAAAzB,EAAA,YAAA,QAAAyB,EAAS,oBAAoB,gBAAgBT;AAAA,IAAkB;AAAA,EAC3E,GACC,CAAChB,CAAS,CAAC,GAEP,EAAE,WAAAA,GAAW,WAAAE,GAAW,WAAAG,GAAW,UAAAE,EAAS;AACrD;"}

package/hooks/useUuid.js

@@ -1,10 +1,10 @@
 import { useState as r } from "react";
-import { uuid as u } from "../utils/uuid.js";
-const m = (t) => {
+import { u } from "../uuid.js";
+const s = (t) => {
   const [o] = r(t || u());
   return o;
 };
 export {
-  m as useUuid
+  s as useUuid
 };
 //# sourceMappingURL=useUuid.js.map

package/index.js

@@ -3,7 +3,7 @@ import { Breakpoint as s, useBreakpoint as u } from "./hooks/useBreakpoint.js";
 import { useFocusToggle as p } from "./hooks/useFocusToggle.js";
 import { useFocusTrap as f } from "./hooks/useFocusTrap.js";
 import { useHover as n } from "./hooks/useHover.js";
-import { useIntersectionObserver as v } from "./hooks/useIntersectionObserver.js";
+import { useIntersectionObserver as d } from "./hooks/useIntersectionObserver.js";
 import { useIsVisible as E } from "./hooks/useIsVisible.js";
 import { useLayoutEvent as c } from "./hooks/useLayoutEvent.js";
 import { usePrevious as A } from "./hooks/usePrevious.js";
@@ -15,7 +15,7 @@ import { useKeyboardEvent as H } from "./hooks/useKeyboardEvent.js";
 import { useOutsideEvent as O } from "./hooks/useOutsideEvent.js";
 import { useUuid as B } from "./hooks/useUuid.js";
 import { isMobileUA as M } from "./utils/mobile.js";
-import { uuid as U } from "./utils/uuid.js";
+import { u as U } from "./uuid.js";
 import { AVERAGE_CHARACTER_WIDTH_PX as h, AnalyticsId as D, FormMode as G, FormSize as L, IconSize as W, KeyboardEventKey as X, ZIndex as Z } from "./constants.js";
 export {
   h as AVERAGE_CHARACTER_WIDTH_PX,
@@ -32,7 +32,7 @@ export {
   p as useFocusToggle,
   f as useFocusTrap,
   n as useHover,
-  v as useIntersectionObserver,
+  d as useIntersectionObserver,
   E as useIsVisible,
   H as useKeyboardEvent,
   c as useLayoutEvent,

package/package.json

@@ -7,9 +7,12 @@
     "url": "git+https://github.com/helsenorge/designsystem.git"
   },
   "homepage": "https://helsenorge.design",
-  "version": "8.4.0",
+  "version": "8.5.1",
   "author": "Helsenorge",
   "license": "MIT",
+  "dependencies": {
+    "framer-motion": "^11.5.4"
+  },
   "peerDependencies": {
     "bootstrap": "^4.6.2",
     "classnames": "^2.3.2",

package/style.css

@@ -0,0 +1 @@
+:root{--core-color-black: #000000;--core-color-white: #ffffff;--core-color-blueberry-50: #e4f7f9;--core-color-neutral-500: #989693;--core-color-neutral-700: #62625f;--color-action-text-ondark: #ffffff;--color-action-background-transparent-onlight-hover: #126f8721;--color-action-background-transparent-onlight-hoverselected: #126f872b;--color-notification-background-info: #e4f7f9;--color-notification-background-error: #fff2ea;--color-destructive-graphics-normal: #c83521;--color-base-text-onlight: #000000;--color-action-background-ondark: #ffffff;--color-action-border-ondark: #ffffff;--color-action-border-ondark-focus: #ffffff;--color-action-graphics-ondark: #ffffff;--color-base-text-ondark: #ffffff;--color-base-background-neutral: #f5f3f3;--color-base-background-white: #ffffff;--color-base-graphics-ondark: #ffffff;--color-disabled-text-ondark: #ffffff;--color-action-border-onlight: #188097;--color-action-border-onlight-hover: #08667c;--color-action-border-onlight-focus: #000000;--color-action-text-onlight: #126f87;--color-action-text-onlight-hover: #08667c;--color-action-graphics-onlight: #188097;--color-action-graphics-onlight-hover: #126f87;--color-action-graphics-ondark-hover: #e4f7f9;--color-action-background-ondark-hover: #e4f7f9;--color-action-background-ondark-selected: #cae7ed;--color-action-background-ondark-hoverselected: #afdae3;--color-action-background-onlight: #188097;--color-action-background-onlight-hover: #08667c;--color-notification-background-warning: #fdf8df;--color-notification-background-success: #e6f8ee;--color-notification-border-info: #08667c;--color-notification-border-error: #a31f0e;--color-notification-border-warning: #ab7c00;--color-notification-border-success: #078141;--color-notification-graphics-info: #08667c;--color-notification-graphics-error: #a31f0e;--color-notification-graphics-warning: #ab7c00;--color-notification-graphics-success: #078141;--color-notification-status-warning: #ebc840;--color-notification-status-success: #099150;--color-destructive-graphics-hover: #b62e1c;--color-destructive-text-normal: #b62e1c;--color-destructive-text-hover: #a31f0e;--color-disabled-background: #d6d4d3;--color-disabled-text: #62625f;--color-disabled-border: #7d7c79;--color-disabled-graphics: #62625f;--color-disabled-border-ondark: #d6d4d3;--color-disabled-graphics-ondark: #d6d4d3;--color-base-background-blueberry: #e4f7f9;--color-base-background-cherry: #fff2ea;--color-base-background-dark-blueberry: #188097;--color-base-background-dark-cherry: #c83521;--color-base-graphics-onlight: #000000;--color-base-border-ondark: #d6d4d3;--color-base-border-onlight: #989693;--color-base-border-onlight-emphasized: #62625f;--color-help-background: #efe4fd;--color-help-graphics: #5b22a6;--color-help-border: #5b22a6;--core-color-blueberry-100: #cae7ed;--core-color-blueberry-200: #afdae3;--core-color-blueberry-300: #7abecc;--core-color-blueberry-400: #58aabb;--core-color-blueberry-500: #188097;--core-color-blueberry-600: #126f87;--core-color-blueberry-700: #08667c;--core-color-blueberry-800: #06596c;--core-color-blueberry-900: #084350;--core-color-neutral-50: #f5f3f3;--core-color-neutral-100: #eae7e7;--core-color-neutral-200: #d6d4d3;--core-color-neutral-300: #bdbab9;--core-color-neutral-400: #aaa8a6;--core-color-neutral-600: #7d7c79;--core-color-neutral-800: #474745;--core-color-neutral-900: #2b2c2b;--core-color-banana-50: #fdf8df;--core-color-banana-100: #fcf2bf;--core-color-banana-200: #f9ea9f;--core-color-banana-300: #f5e080;--core-color-banana-400: #ebc840;--core-color-banana-500: #ddab06;--core-color-banana-600: #c59302;--core-color-banana-700: #ab7c00;--core-color-banana-800: #916500;--core-color-banana-900: #764f00;--core-color-cherry-50: #fff2ea;--core-color-cherry-100: #f7e1d2;--core-color-cherry-200: #eec0a5;--core-color-cherry-300: #e39376;--core-color-cherry-400: #d56147;--core-color-cherry-500: #c83521;--core-color-cherry-600: #b62e1c;--core-color-cherry-700: #a31f0e;--core-color-cherry-800: #912112;--core-color-cherry-900: #7e1c0e;--core-color-kiwi-50: #e6f8ee;--core-color-kiwi-100: #c2edd6;--core-color-kiwi-200: #9de2bf;--core-color-kiwi-300: #79d6aa;--core-color-kiwi-400: #56ca96;--core-color-kiwi-500: #33be84;--core-color-kiwi-600: #10b172;--core-color-kiwi-700: #0ca161;--core-color-kiwi-800: #099150;--core-color-kiwi-900: #078141;--core-color-plum-50: #efe4fd;--core-color-plum-100: #d7bdf9;--core-color-plum-200: #bf98f3;--core-color-plum-300: #a875eb;--core-color-plum-400: #9153e2;--core-color-plum-500: #7a33d7;--core-color-plum-600: #6a2abf;--core-color-plum-700: #5b22a6;--core-color-plum-800: #4c1b8c;--core-color-plum-900: #3c1471;--color-destructive-background-emphasized: #f7e1d2;--color-destructive-background-normal: #fff2ea;--brandcolor-white: #ffffff;--brandcolor-black: #000000;--brandcolor-neutral-verylight: #f5f3f3;--brandcolor-neutral-light: #eae7e7;--brandcolor-neutral-mediumlight: #d6d4d3;--brandcolor-neutral-medium: #989693;--brandcolor-neutral-dark: #62625f;--brandcolor-neutral-verydark: #2b2c2b;--brandcolor-blueberry-verylight: #e4f7f9;--brandcolor-blueberry-light: #cae7ed;--brandcolor-blueberry-mediumlight: #afdae3;--brandcolor-blueberry-medium: #188097;--brandcolor-blueberry-mediumdark: #126f87;--brandcolor-blueberry-dark: #08667c;--brandcolor-cherry-verylight: #fff2ea;--brandcolor-cherry-light: #f7e1d2;--brandcolor-cherry-medium: #c83521;--brandcolor-cherry-mediumdark: #b62e1c;--brandcolor-cherry-dark: #a31f0e;--color-notification-status-info: #188097;--color-notification-status-error: #c83521;--color-destructive-border-normal: #c83521;--color-action-border-ondark-hover: #e4f7f9;--color-action-background-transparent-ondark-hover: #00000026;--color-action-background-transparent-ondark-hoverselected: #000000bf;--color-base-background-dark-neutral: #2b2c2b;--color-placeholder-text-onlight: #62625f;--color-base-border-onlight-subtle: #d6d4d3;--color-base-border-neutral: #d6d4d3;--color-base-border-blueberry: #afdae3;--color-base-border-cherry: #eec0a5;--color-notification-text-info: #08667c;--color-notification-text-warning: #916500;--color-notification-text-error: #a31f0e;--color-notification-text-success: #078141}