@navikt/ds-react 3.3.0 → 3.4.0

package/cjs/tag/Tag.js

@@ -43,7 +43,6 @@ const clsx_1 = __importDefault(require("clsx"));
 const __1 = require("..");
 exports.Tag = (0, react_1.forwardRef)((_a, ref) => {
     var { className, variant, size = "medium" } = _a, rest = __rest(_a, ["className", "variant", "size"]);
-    const Component = size === "medium" ? __1.BodyShort : __1.Detail;
-    return (react_1.default.createElement(Component, Object.assign({}, rest, { ref: ref, as: "span", size: size === "medium" ? "medium" : "small", className: (0, clsx_1.default)("navds-tag", className, `navds-tag--${variant}`, `navds-tag--${size}`) })));
+    return (react_1.default.createElement(__1.BodyShort, Object.assign({}, rest, { ref: ref, as: "span", size: size === "medium" ? "medium" : "small", className: (0, clsx_1.default)("navds-tag", className, `navds-tag--${variant}`, `navds-tag--${size}`) })));
 });
 exports.default = exports.Tag;

package/cjs/util/copy.js

@@ -1,73 +1,28 @@
 "use strict";
-// https://github.com/sudodoki/copy-to-clipboard/blob/main/index.js
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-const defaultMessage = "Kopier til utklippstavle: #{key}, Enter";
-function format(message) {
-    const copyKey = (/mac os x/i.test(navigator.userAgent) ? "⌘" : "Ctrl") + "+C";
-    return message.replace(/#{\s*key\s*}/g, copyKey);
-}
 function copy(text) {
-    let debug, message, range, selection, mark, success = false;
-    debug = process.env.NODE_ENV !== "production";
-    try {
-        range = document.createRange();
-        selection = document.getSelection();
-        mark = document.createElement("span");
-        mark.textContent = text;
-        // avoid screen readers from reading out loud the text
-        mark.ariaHidden = "true";
-        // reset user styles for span element
-        mark.style.all = "unset";
-        // prevents scrolling to the end of the page
-        mark.style.position = "fixed";
-        mark.style.top = 0;
-        mark.style.clip = "rect(0, 0, 0, 0)";
-        // used to preserve spaces and line breaks
-        mark.style.whiteSpace = "pre";
-        // do not inherit user-select (it may be `none`)
-        mark.style.webkitUserSelect = "text";
-        mark.style.MozUserSelect = "text";
-        mark.style.msUserSelect = "text";
-        mark.style.userSelect = "text";
-        mark.addEventListener("copy", function (e) {
-            e.stopPropagation();
-        });
-        document.body.appendChild(mark);
-        range.selectNodeContents(mark);
-        selection.addRange(range);
-        const successful = document.execCommand("copy");
-        if (!successful) {
-            throw new Error("copy command was unsuccessful");
-        }
-        success = true;
-    }
-    catch (err) {
-        debug && console.error("unable to copy using execCommand: ", err);
-        debug && console.warn("trying IE specific stuff");
+    return __awaiter(this, void 0, void 0, function* () {
         try {
-            window.clipboardData.setData("text", text);
-            success = true;
+            yield navigator.clipboard.writeText(text);
         }
         catch (err) {
-            debug && console.error("unable to copy using clipboardData: ", err);
-            debug && console.error("falling back to prompt");
-            message = format(defaultMessage);
-            window.prompt(message, text);
-        }
-    }
-    finally {
-        if (selection) {
-            if (typeof selection.removeRange == "function") {
-                selection.removeRange(range);
+            if (process.env.NODE_ENV !== "production") {
+                console.error("Unable to copy using Clipboard API", err);
             }
-            else {
-                selection.removeAllRanges();
-            }
-        }
-        if (mark) {
-            document.body.removeChild(mark);
+            // Fallback for browsers that do not support the Clipboard API.
+            const copyKey = /mac os x/i.test(navigator.userAgent) ? "⌘" : "Ctrl";
+            const message = `Kopier til utklippstavle: ${copyKey}+C, Enter`;
+            window.prompt(message, text);
         }
-    }
-    return success;
+    });
 }
 exports.default = copy;

package/esm/date/context/useSharedMonthContext.d.ts

@@ -18,4 +18,4 @@ export declare const SharedMonthProvider: ({ children, dropdownCaption, disabled
     onSelect: any;
     year: any;
     onYearChange: any;
-}) => JSX.Element;
+}) => React.JSX.Element;

package/esm/date/datepicker/DayButton.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import React from "react";
 import { DayProps } from "react-day-picker";
-export declare const DayButton: (props: DayProps) => JSX.Element;
+export declare const DayButton: (props: DayProps) => React.JSX.Element;

package/esm/date/datepicker/TableHead.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 /** Render the table head. */
 export declare function TableHead(): JSX.Element;

package/esm/date/datepicker/caption/Caption.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import { CaptionProps } from "react-day-picker";
-export declare const DatePickerCaption: ({ displayMonth, id }: CaptionProps) => JSX.Element;
+export declare const DatePickerCaption: ({ displayMonth, id }: CaptionProps) => React.JSX.Element;
 export default DatePickerCaption;

package/esm/date/datepicker/caption/DropdownCaption.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import { CaptionProps } from "react-day-picker";
-export declare const DropdownCaption: ({ displayMonth, id }: CaptionProps) => JSX.Element | null;
+export declare const DropdownCaption: ({ displayMonth, id }: CaptionProps) => React.JSX.Element | null;
 export default DropdownCaption;

package/esm/date/monthpicker/MonthButton.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 interface MonthType {
     month: Date;
     months: Date[];
@@ -7,5 +7,5 @@ interface MonthType {
     tabRoot?: Date;
     setTabRoot: Function;
 }
-export declare const MonthButton: ({ month, months, focus, setFocus, tabRoot, setTabRoot, }: MonthType) => JSX.Element;
+export declare const MonthButton: ({ month, months, focus, setFocus, tabRoot, setTabRoot, }: MonthType) => React.JSX.Element;
 export default MonthButton;

package/esm/date/monthpicker/MonthCaption.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-export declare const MonthCaption: () => JSX.Element;
+import React from "react";
+export declare const MonthCaption: () => React.JSX.Element;
 export default MonthCaption;

package/esm/date/monthpicker/MonthSelector.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-export declare const MonthSelector: () => JSX.Element;
+import React from "react";
+export declare const MonthSelector: () => React.JSX.Element;
 export default MonthSelector;

package/esm/form/Textarea.d.ts

@@ -54,5 +54,5 @@ export declare const Counter: ({ maxLength, currentLength, size, i18n }: {
     currentLength: any;
     size: any;
     i18n: any;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export default Textarea;

package/esm/help-text/HelpTextIcon.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
+import React from "react";
 export declare const HelpTextIcon: ({ title, filled, }: {
     title: string;
     filled?: boolean | undefined;
-}) => JSX.Element;
+}) => React.JSX.Element;

package/esm/provider/Provider.d.ts

@@ -16,5 +16,5 @@ export interface ProviderProps {
     appElement?: HTMLElement;
 }
 export declare const useProvider: () => ProviderContextType | undefined;
-export declare const Provider: ({ children, ...rest }: ProviderProps) => JSX.Element;
+export declare const Provider: ({ children, ...rest }: ProviderProps) => React.JSX.Element;
 export default Provider;

package/esm/tag/Tag.d.ts

@@ -4,7 +4,7 @@ export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
     /**
      * Changes visual profile of tag
      */
-    variant: "warning" | "warning-filled" | "error" | "error-filled" | "info" | "info-filled" | "success" | "success-filled" | "neutral" | "neutral-filled" | "alt1" | "alt1-filled" | "alt2" | "alt2-filled" | "alt3" | "alt3-filled";
+    variant: "warning" | "warning-filled" | "warning-moderate" | "error" | "error-filled" | "error-moderate" | "info" | "info-filled" | "info-moderate" | "success" | "success-filled" | "success-moderate" | "neutral" | "neutral-filled" | "neutral-moderate" | "alt1" | "alt1-filled" | "alt1-moderate" | "alt2" | "alt2-filled" | "alt2-moderate" | "alt3" | "alt3-filled" | "alt3-moderate";
     /**
      * @default "medium"
      */

package/esm/tag/Tag.js

@@ -11,11 +11,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React, { forwardRef } from "react";
 import cl from "clsx";
-import { BodyShort, Detail } from "..";
+import { BodyShort } from "..";
 export const Tag = forwardRef((_a, ref) => {
     var { className, variant, size = "medium" } = _a, rest = __rest(_a, ["className", "variant", "size"]);
-    const Component = size === "medium" ? BodyShort : Detail;
-    return (React.createElement(Component, Object.assign({}, rest, { ref: ref, as: "span", size: size === "medium" ? "medium" : "small", className: cl("navds-tag", className, `navds-tag--${variant}`, `navds-tag--${size}`) })));
+    return (React.createElement(BodyShort, Object.assign({}, rest, { ref: ref, as: "span", size: size === "medium" ? "medium" : "small", className: cl("navds-tag", className, `navds-tag--${variant}`, `navds-tag--${size}`) })));
 });
 export default Tag;
 //# sourceMappingURL=Tag.js.map

package/esm/tag/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../src/tag/Tag.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,IAAI,CAAC;AA8BvC,MAAM,CAAC,MAAM,GAAG,GAAG,UAAU,CAC3B,CAAC,EAAgD,EAAE,GAAG,EAAE,EAAE;QAAzD,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,GAAG,QAAQ,OAAW,EAAN,IAAI,cAA9C,gCAAgD,CAAF;IAC7C,MAAM,SAAS,GAAG,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC;IAEzD,OAAO,CACL,oBAAC,SAAS,oBACJ,IAAI,IACR,GAAG,EAAE,GAAG,EACR,EAAE,EAAC,MAAM,EACT,IAAI,EAAE,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,EAC5C,SAAS,EAAE,EAAE,CACX,WAAW,EACX,SAAS,EACT,cAAc,OAAO,EAAE,EACvB,cAAc,IAAI,EAAE,CACrB,IACD,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,GAAG,CAAC"}
+{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../src/tag/Tag.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,EAAE,SAAS,EAAE,MAAM,IAAI,CAAC;AAsC/B,MAAM,CAAC,MAAM,GAAG,GAAG,UAAU,CAC3B,CAAC,EAAgD,EAAE,GAAG,EAAE,EAAE;QAAzD,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,GAAG,QAAQ,OAAW,EAAN,IAAI,cAA9C,gCAAgD,CAAF;IAAY,OAAA,CACzD,oBAAC,SAAS,oBACJ,IAAI,IACR,GAAG,EAAE,GAAG,EACR,EAAE,EAAC,MAAM,EACT,IAAI,EAAE,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,EAC5C,SAAS,EAAE,EAAE,CACX,WAAW,EACX,SAAS,EACT,cAAc,OAAO,EAAE,EACvB,cAAc,IAAI,EAAE,CACrB,IACD,CACH,CAAA;CAAA,CACF,CAAC;AAEF,eAAe,GAAG,CAAC"}

package/esm/util/copy.d.ts

@@ -1 +1 @@
-export default function copy(text: any): boolean;
+export default function copy(text: string): Promise<void>;

package/esm/util/copy.js

@@ -1,71 +1,26 @@
-// https://github.com/sudodoki/copy-to-clipboard/blob/main/index.js
-const defaultMessage = "Kopier til utklippstavle: #{key}, Enter";
-function format(message) {
-    const copyKey = (/mac os x/i.test(navigator.userAgent) ? "⌘" : "Ctrl") + "+C";
-    return message.replace(/#{\s*key\s*}/g, copyKey);
-}
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 export default function copy(text) {
-    let debug, message, range, selection, mark, success = false;
-    debug = process.env.NODE_ENV !== "production";
-    try {
-        range = document.createRange();
-        selection = document.getSelection();
-        mark = document.createElement("span");
-        mark.textContent = text;
-        // avoid screen readers from reading out loud the text
-        mark.ariaHidden = "true";
-        // reset user styles for span element
-        mark.style.all = "unset";
-        // prevents scrolling to the end of the page
-        mark.style.position = "fixed";
-        mark.style.top = 0;
-        mark.style.clip = "rect(0, 0, 0, 0)";
-        // used to preserve spaces and line breaks
-        mark.style.whiteSpace = "pre";
-        // do not inherit user-select (it may be `none`)
-        mark.style.webkitUserSelect = "text";
-        mark.style.MozUserSelect = "text";
-        mark.style.msUserSelect = "text";
-        mark.style.userSelect = "text";
-        mark.addEventListener("copy", function (e) {
-            e.stopPropagation();
-        });
-        document.body.appendChild(mark);
-        range.selectNodeContents(mark);
-        selection.addRange(range);
-        const successful = document.execCommand("copy");
-        if (!successful) {
-            throw new Error("copy command was unsuccessful");
-        }
-        success = true;
-    }
-    catch (err) {
-        debug && console.error("unable to copy using execCommand: ", err);
-        debug && console.warn("trying IE specific stuff");
+    return __awaiter(this, void 0, void 0, function* () {
         try {
-            window.clipboardData.setData("text", text);
-            success = true;
+            yield navigator.clipboard.writeText(text);
         }
         catch (err) {
-            debug && console.error("unable to copy using clipboardData: ", err);
-            debug && console.error("falling back to prompt");
-            message = format(defaultMessage);
-            window.prompt(message, text);
-        }
-    }
-    finally {
-        if (selection) {
-            if (typeof selection.removeRange == "function") {
-                selection.removeRange(range);
+            if (process.env.NODE_ENV !== "production") {
+                console.error("Unable to copy using Clipboard API", err);
             }
-            else {
-                selection.removeAllRanges();
-            }
-        }
-        if (mark) {
-            document.body.removeChild(mark);
+            // Fallback for browsers that do not support the Clipboard API.
+            const copyKey = /mac os x/i.test(navigator.userAgent) ? "⌘" : "Ctrl";
+            const message = `Kopier til utklippstavle: ${copyKey}+C, Enter`;
+            window.prompt(message, text);
         }
-    }
-    return success;
+    });
 }
 //# sourceMappingURL=copy.js.map

package/esm/util/copy.js.map

@@ -1 +1 @@
-{"version":3,"file":"copy.js","sourceRoot":"","sources":["../../src/util/copy.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"copy.js","sourceRoot":"","sources":["../../src/util/copy.ts"],"names":[],"mappings":";;;;;;;;;AAAA,MAAM,CAAC,OAAO,UAAgB,IAAI,CAAC,IAAY;;QAC7C,IAAI;YACF,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;SAC3C;QAAC,OAAO,GAAG,EAAE;YACZ,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,EAAE;gBACzC,OAAO,CAAC,KAAK,CAAC,oCAAoC,EAAE,GAAG,CAAC,CAAC;aAC1D;YAED,+DAA+D;YAC/D,MAAM,OAAO,GAAG,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC;YACrE,MAAM,OAAO,GAAG,6BAA6B,OAAO,WAAW,CAAC;YAChE,MAAM,CAAC,MAAM,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;SAC9B;IACH,CAAC;CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "3.3.0",
+  "version": "3.4.0",
   "description": "Aksel react-components for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -38,7 +38,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "0.24.1",
-    "@navikt/aksel-icons": "^3.3.0",
+    "@navikt/aksel-icons": "^3.4.0",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^1.2.1",

package/src/button/button.stories.tsx

@@ -123,7 +123,7 @@ export const Link = () => (
 
 export const Loading = {
   render: () => (
-    <div className="colgap">
+    <div className="colgap chromatic-ignore">
       <div className="rowgap">
         {variants.map((variant) => (
           <Button key={variant} variant={variant} loading>
@@ -153,7 +153,7 @@ export const Loading = {
 };
 
 export const Icon = () => (
-  <div className="colgap">
+  <div className="colgap ">
     <div className="rowgap">
       {variants.map((variant) => (
         <Button
@@ -250,7 +250,7 @@ export const Disabled = () => (
 
 export const LoadingWithAs = {
   render: () => (
-    <div className="colgap">
+    <div className="colgap chromatic-ignore">
       <div className="rowgap">
         {variants.map((variant) => (
           <Button key={variant} variant={variant} loading size="small">

package/src/tag/Tag.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef, HTMLAttributes } from "react";
 import cl from "clsx";
-import { BodyShort, Detail } from "..";
+import { BodyShort } from "..";
 
 export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
   children: React.ReactNode;
@@ -10,20 +10,28 @@ export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
   variant:
     | "warning"
     | "warning-filled"
+    | "warning-moderate"
     | "error"
     | "error-filled"
+    | "error-moderate"
     | "info"
     | "info-filled"
+    | "info-moderate"
     | "success"
     | "success-filled"
+    | "success-moderate"
     | "neutral"
     | "neutral-filled"
+    | "neutral-moderate"
     | "alt1"
     | "alt1-filled"
+    | "alt1-moderate"
     | "alt2"
     | "alt2-filled"
+    | "alt2-moderate"
     | "alt3"
-    | "alt3-filled";
+    | "alt3-filled"
+    | "alt3-moderate";
   /**
    * @default "medium"
    */
@@ -31,24 +39,20 @@ export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
 }
 
 export const Tag = forwardRef<HTMLSpanElement, TagProps>(
-  ({ className, variant, size = "medium", ...rest }, ref) => {
-    const Component = size === "medium" ? BodyShort : Detail;
-
-    return (
-      <Component
-        {...rest}
-        ref={ref}
-        as="span"
-        size={size === "medium" ? "medium" : "small"}
-        className={cl(
-          "navds-tag",
-          className,
-          `navds-tag--${variant}`,
-          `navds-tag--${size}`
-        )}
-      />
-    );
-  }
+  ({ className, variant, size = "medium", ...rest }, ref) => (
+    <BodyShort
+      {...rest}
+      ref={ref}
+      as="span"
+      size={size === "medium" ? "medium" : "small"}
+      className={cl(
+        "navds-tag",
+        className,
+        `navds-tag--${variant}`,
+        `navds-tag--${size}`
+      )}
+    />
+  )
 );
 
 export default Tag;

package/src/tag/tag.stories.tsx

@@ -1,62 +1,8 @@
 import React from "react";
-import { Tag } from ".";
+import type { Meta } from "@storybook/react";
+import { Tag, TagProps } from ".";
 
-export default {
-  title: "ds-react/Tag",
-  component: Tag,
-  argTypes: {
-    variant: {
-      defaultValue: "info",
-      control: {
-        type: "radio",
-        options: [
-          "warning",
-          "error",
-          "info",
-          "success",
-          "neutral",
-          "alt1",
-          "alt2",
-          "alt3",
-          "warning-filled",
-          "error-filled",
-          "info-filled",
-          "success-filled",
-          "neutral-filled",
-          "alt1-filled",
-          "alt2-filled",
-          "alt3-filled",
-        ],
-      },
-    },
-    size: {
-      defaultValue: "medium",
-      control: {
-        type: "radio",
-        options: ["xsmall", "small", "medium"],
-      },
-    },
-  },
-};
-
-const variants: Array<
-  | "warning"
-  | "warning-filled"
-  | "error"
-  | "error-filled"
-  | "info"
-  | "info-filled"
-  | "success"
-  | "success-filled"
-  | "neutral"
-  | "neutral-filled"
-  | "alt1"
-  | "alt1-filled"
-  | "alt2"
-  | "alt2-filled"
-  | "alt3"
-  | "alt3-filled"
-> = [
+const variants: TagProps["variant"][] = [
   "warning",
   "error",
   "info",
@@ -73,8 +19,37 @@ const variants: Array<
   "alt1-filled",
   "alt2-filled",
   "alt3-filled",
+  "warning-moderate",
+  "error-moderate",
+  "info-moderate",
+  "success-moderate",
+  "neutral-moderate",
+  "alt1-moderate",
+  "alt2-moderate",
+  "alt3-moderate",
 ];
 
+export default {
+  title: "ds-react/Tag",
+  component: Tag,
+  argTypes: {
+    variant: {
+      defaultValue: "info",
+      control: {
+        type: "radio",
+      },
+      options: variants,
+    },
+    size: {
+      defaultValue: "medium",
+      control: {
+        type: "radio",
+      },
+      options: ["xsmall", "small", "medium"],
+    },
+  },
+} satisfies Meta<typeof Tag>;
+
 export const Default = {
   render: (props) => (
     <Tag variant={props.variant} size={props.size}>

package/src/util/copy.ts

@@ -1,81 +1,14 @@
-// https://github.com/sudodoki/copy-to-clipboard/blob/main/index.js
-
-const defaultMessage = "Kopier til utklippstavle: #{key}, Enter";
-
-function format(message) {
-  const copyKey = (/mac os x/i.test(navigator.userAgent) ? "⌘" : "Ctrl") + "+C";
-  return message.replace(/#{\s*key\s*}/g, copyKey);
-}
-
-export default function copy(text) {
-  let debug,
-    message,
-    range,
-    selection,
-    mark,
-    success = false;
-  debug = process.env.NODE_ENV !== "production";
+export default async function copy(text: string): Promise<void> {
   try {
-    range = document.createRange();
-    selection = document.getSelection();
-
-    mark = document.createElement("span");
-    mark.textContent = text;
-    // avoid screen readers from reading out loud the text
-    mark.ariaHidden = "true";
-    // reset user styles for span element
-    mark.style.all = "unset";
-    // prevents scrolling to the end of the page
-    mark.style.position = "fixed";
-    mark.style.top = 0;
-    mark.style.clip = "rect(0, 0, 0, 0)";
-    // used to preserve spaces and line breaks
-    mark.style.whiteSpace = "pre";
-    // do not inherit user-select (it may be `none`)
-    mark.style.webkitUserSelect = "text";
-    mark.style.MozUserSelect = "text";
-    mark.style.msUserSelect = "text";
-    mark.style.userSelect = "text";
-    mark.addEventListener("copy", function (e) {
-      e.stopPropagation();
-    });
-
-    document.body.appendChild(mark);
-
-    range.selectNodeContents(mark);
-    selection.addRange(range);
-
-    const successful = document.execCommand("copy");
-    if (!successful) {
-      throw new Error("copy command was unsuccessful");
-    }
-    success = true;
+    await navigator.clipboard.writeText(text);
   } catch (err) {
-    debug && console.error("unable to copy using execCommand: ", err);
-    debug && console.warn("trying IE specific stuff");
-    try {
-      (window as any).clipboardData.setData("text", text);
-
-      success = true;
-    } catch (err) {
-      debug && console.error("unable to copy using clipboardData: ", err);
-      debug && console.error("falling back to prompt");
-      message = format(defaultMessage);
-      window.prompt(message, text);
-    }
-  } finally {
-    if (selection) {
-      if (typeof selection.removeRange == "function") {
-        selection.removeRange(range);
-      } else {
-        selection.removeAllRanges();
-      }
+    if (process.env.NODE_ENV !== "production") {
+      console.error("Unable to copy using Clipboard API", err);
     }
 
-    if (mark) {
-      document.body.removeChild(mark);
-    }
+    // Fallback for browsers that do not support the Clipboard API.
+    const copyKey = /mac os x/i.test(navigator.userAgent) ? "⌘" : "Ctrl";
+    const message = `Kopier til utklippstavle: ${copyKey}+C, Enter`;
+    window.prompt(message, text);
   }
-
-  return success;
 }