@helsenorge/designsystem-react 6.3.0 → 6.5.0

package/CHANGELOG.md

@@ -1,3 +1,36 @@
+## [6.4.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv6.3.0&targetVersion=GTv6.4.0) (2024-02-29)
+
+### Features
+
+- slider har fatt value prop og fiks til selected state
+  ([645ca82](https://github.com/helsenorge/designsystem/commit/645ca8291d85705f7e9cf3a372376cb4e53dc4cd)), closes
+  [#321070](https://github.com/helsenorge/designsystem/issues/321070)
+- table-komponenter støtter alle vanlige html-attributter
+  ([0810650](https://github.com/helsenorge/designsystem/commit/08106504e1441a9c8916c41fbca31accf0beade2)), closes
+  [#321166](https://github.com/helsenorge/designsystem/issues/321166)
+
+### Bug Fixes
+
+- slider value prop oppdaterer og selectedstate
+  ([e510bd7](https://github.com/helsenorge/designsystem/commit/e510bd7a1ef3fe89eaa4cbd6af614291d055cbb8))
+
+## [6.3.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv6.2.0&targetVersion=GTv6.3.0) (2024-02-22)
+
+### Features
+
+- select og datepicker støtter autoComplete-attributt
+  ([84c34af](https://github.com/helsenorge/designsystem/commit/84c34afd23a5d236573f5b3b3480175708fb9ecc)), closes
+  [#314727](https://github.com/helsenorge/designsystem/issues/314727) [#314932](https://github.com/helsenorge/designsystem/issues/314932)
+
+### Bug Fixes
+
+- badge er inline-flex og skalerer ikke til full bredde
+  ([ac485e9](https://github.com/helsenorge/designsystem/commit/ac485e923223e7a92ede0743e924a2c39c40bbb8))
+- spacing i promopanel ([60a00bd](https://github.com/helsenorge/designsystem/commit/60a00bdb88d3b35b2e7b1449832674a9bf35ee46))
+- tabell endrer responsiv oppførsel når den vises
+  ([0c21208](https://github.com/helsenorge/designsystem/commit/0c212084cfa5161842dbb0339ae85c82e3c42046)), closes
+  [#315245](https://github.com/helsenorge/designsystem/issues/315245)
+
 ## [6.2.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv6.1.3&targetVersion=GTv6.2.0) (2024-02-20)
 
 ### Features

package/components/Dropdown/Dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAsBhD,oBAAY,YAAY;IACtB,OAAO,YAAY;IACnB,MAAM,WAAW;IACjB,WAAW,gBAAgB;IAC3B,QAAQ,aAAa;CACtB;AAED,MAAM,WAAW,aAAa;IAC5B,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,4CAA4C;IAC5C,WAAW,EAAE,MAAM,CAAC;IACpB,gCAAgC;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sBAAsB;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,0BAA0B;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,OAAO,YAAY,CAAC;IACjC,uCAAuC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uCAAuC;IACvC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAsJrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAuBhD,oBAAY,YAAY;IACtB,OAAO,YAAY;IACnB,MAAM,WAAW;IACjB,WAAW,gBAAgB;IAC3B,QAAQ,aAAa;CACtB;AAED,MAAM,WAAW,aAAa;IAC5B,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,4CAA4C;IAC5C,WAAW,EAAE,MAAM,CAAC;IACpB,gCAAgC;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sBAAsB;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,0BAA0B;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,OAAO,YAAY,CAAC;IACjC,uCAAuC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uCAAuC;IACvC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA0JrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/components/Dropdown/Dropdown.js

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

package/components/Dropdown/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.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  theme,\n  useHover,\n  useKeyboardEvent,\n  useOutsideEvent,\n  useSize,\n  useToggle,\n  useUuid,\n} from '../..';\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. Synlig for skjermlesere.  */\n  label: string;\n  /** Tekst på knappen som åpner dropdownen */\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  /** Om dropdown er åpen */\n  open?: boolean;\n  /** Changes the visuals of the dropdown */\n  mode?: keyof typeof DropdownMode;\n  /** Makes the background transparent */\n  transparent?: boolean;\n  /** Makes the background transparent */\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}\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  } = 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 { width: buttonWidth } = useSize(buttonRef) || {};\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  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={() => !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%' : `${buttonWidth}px` }}>\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          {React.Children.map(children, (child, index) => (\n            <li className={styles.dropdown__input} role=\"option\" id={`${optionIdPrefix}-${index}`} aria-selected={index === currentIndex}>\n              {React.cloneElement(child as React.ReactElement, { ref: inputRefList.current?.[index] })}\n            </li>\n          ))}\n        </ul>\n        {!noCloseButton && (\n          <div className={styles.dropdown__close}>\n            <Button onClick={handleClose} fluid 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","dropdownRef","useRef","optionsRef","buttonRef","isHovered","useHover","isOpen","toggleIsOpen","useToggle","inputRefList","React","currentIndex","setCurrentIndex","useState","buttonWidth","useSize","labelId","useUuid","toggleLabelId","optionIdPrefix","handleOpen","_a","handleClose","useKeyboardEvent","event","KeyboardEventKey","index","x","nextIndex","useOutsideEvent","toggleClasses","classNames","styles","contentClasses","AnalyticsId","Icon","theme","PlusSmall","IconSize","child","Button","Dropdown$1"],"mappings":"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"}
+{"version":3,"file":"Dropdown.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  theme,\n  useHover,\n  useKeyboardEvent,\n  useOutsideEvent,\n  useSize,\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. Synlig for skjermlesere.  */\n  label: string;\n  /** Tekst på knappen som åpner dropdownen */\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  /** Om dropdown er åpen */\n  open?: boolean;\n  /** Changes the visuals of the dropdown */\n  mode?: keyof typeof DropdownMode;\n  /** Makes the background transparent */\n  transparent?: boolean;\n  /** Makes the background transparent */\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}\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  } = 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 { width: buttonWidth } = useSize(buttonRef) || {};\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={() => !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%' : `${buttonWidth}px` }}>\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} fluid 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","dropdownRef","useRef","optionsRef","buttonRef","isHovered","useHover","isOpen","toggleIsOpen","useToggle","inputRefList","React","currentIndex","setCurrentIndex","useState","buttonWidth","useSize","labelId","useUuid","toggleLabelId","optionIdPrefix","handleOpen","_a","handleClose","useKeyboardEvent","event","KeyboardEventKey","index","x","nextIndex","useOutsideEvent","toggleClasses","classNames","styles","contentClasses","renderChildren","child","mergeRefs","AnalyticsId","Icon","theme","PlusSmall","IconSize","Button","Dropdown$1"],"mappings":"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"}

package/components/Slider/Slider.d.ts

@@ -28,6 +28,8 @@ interface SliderProps {
     step?: number;
     /** Sets the data-testid attribute. */
     testId?: string;
+    /** Sets the value of the slider */
+    value?: number;
 }
 export declare const Slider: React.FC<SliderProps>;
 export default Slider;

package/components/Slider/Slider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAgC3D,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,UAAU,WAAW;IACnB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iHAAiH;IACjH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iHAAiH;IACjH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,0JAA0J;IAC1J,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yCAAyC;IACzC,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC;IACrB,oDAAoD;IACpD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA+RxC,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAgC3D,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,UAAU,WAAW;IACnB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iHAAiH;IACjH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iHAAiH;IACjH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,0JAA0J;IAC1J,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yCAAyC;IACzC,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC;IACrB,oDAAoD;IACpD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA2SxC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/components/Slider/Slider.js

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