@fremtind/jkl-icons-react - npm Package Compare versions

Comparing version 7.1.3 to 7.2.0

build/cjs/animated-icons/ArrowHorizontalAnimated.js

@@ -44,4 +44,18 @@ "use strict";
   ...rest
-}) => /* @__PURE__ */ import_react.default.createElement("div", { ...rest, className: (0, import_classnames.default)(`jkl-icon jkl-icon--${variant}`, "jkl-animated-horizontal-arrows", className) }, /* @__PURE__ */ import_react.default.createElement("div", { className: "jkl-animated-horizontal-arrows__slider", "data-show": pointingRight ? "right" : "left" }, /* @__PURE__ */ import_react.default.createElement(import_ArrowRightIcon.ArrowRightIcon, { className: "jkl-animated-horizontal-arrows__arrow", variant, bold }), /* @__PURE__ */ import_react.default.createElement(import_ArrowLeftIcon.ArrowLeftIcon, { className: "jkl-animated-horizontal-arrows__arrow", variant, bold })));
+}) => /* @__PURE__ */ import_react.default.createElement(
+  "div",
+  {
+    ...rest,
+    className: (0, import_classnames.default)(
+      "jkl-icon",
+      "jkl-icon--animated",
+      `jkl-icon--${variant}`,
+      { "jkl-icon--bold": bold },
+      "jkl-animated-horizontal-arrows",
+      className
+    )
+  },
+  /* @__PURE__ */ import_react.default.createElement("div", { className: "jkl-animated-horizontal-arrows__slider", "data-show": pointingRight ? "right" : "left" }, /* @__PURE__ */ import_react.default.createElement(import_ArrowRightIcon.ArrowRightIcon, { className: "jkl-animated-horizontal-arrows__arrow", variant, bold }), /* @__PURE__ */ import_react.default.createElement(import_ArrowLeftIcon.ArrowLeftIcon, { className: "jkl-animated-horizontal-arrows__arrow", variant, bold }))
+);
 ArrowHorizontalAnimated.displayName = "ArrowHorizontalAnimated";
 //# sourceMappingURL=ArrowHorizontalAnimated.js.map

build/cjs/animated-icons/ArrowVerticalAnimated.js

@@ -44,4 +44,18 @@ "use strict";
   ...rest
-}) => /* @__PURE__ */ import_react.default.createElement("div", { ...rest, className: (0, import_classnames.default)(`jkl-icon jkl-icon--${variant}`, "jkl-animated-vertical-arrows", className) }, /* @__PURE__ */ import_react.default.createElement("div", { className: "jkl-animated-vertical-arrows__slider", "data-show": pointingDown ? "down" : "up" }, /* @__PURE__ */ import_react.default.createElement(import_ArrowDownIcon.ArrowDownIcon, { className: "jkl-animated-vertical-arrows__arrow", variant, bold }), /* @__PURE__ */ import_react.default.createElement(import_ArrowUpIcon.ArrowUpIcon, { className: "jkl-animated-vertical-arrows__arrow", variant, bold })));
+}) => /* @__PURE__ */ import_react.default.createElement(
+  "div",
+  {
+    ...rest,
+    className: (0, import_classnames.default)(
+      "jkl-icon",
+      "jkl-icon--animated",
+      `jkl-icon--${variant}`,
+      { "jkl-icon--bold": bold },
+      "jkl-animated-vertical-arrows",
+      className
+    )
+  },
+  /* @__PURE__ */ import_react.default.createElement("div", { className: "jkl-animated-vertical-arrows__slider", "data-show": pointingDown ? "down" : "up" }, /* @__PURE__ */ import_react.default.createElement(import_ArrowDownIcon.ArrowDownIcon, { className: "jkl-animated-vertical-arrows__arrow", variant, bold }), /* @__PURE__ */ import_react.default.createElement(import_ArrowUpIcon.ArrowUpIcon, { className: "jkl-animated-vertical-arrows__arrow", variant, bold }))
+);
 ArrowVerticalAnimated.displayName = "ArrowVerticalAnimated";
 //# sourceMappingURL=ArrowVerticalAnimated.js.map

build/cjs/animated-icons/PlusRemoveAnimated.js

@@ -43,11 +43,18 @@ "use strict";
   ...rest
-}) => /* @__PURE__ */ import_react.default.createElement("div", { ...rest, className: (0, import_classnames.default)("jkl-icon", `jkl-icon--${variant}`, className) }, /* @__PURE__ */ import_react.default.createElement(
-  import_PlusIcon.PlusIcon,
+}) => /* @__PURE__ */ import_react.default.createElement(
+  "div",
   {
-    variant,
-    bold,
-    className: (0, import_classnames.default)("jkl-icons-animated__plus", `jkl-icons-animated__plus--${isPlus ? "plus" : "close"}`)
-  }
-));
+    ...rest,
+    className: (0, import_classnames.default)("jkl-icon", "jkl-icon--animated", `jkl-icon--${variant}`, { "jkl-icon--bold": bold }, className)
+  },
+  /* @__PURE__ */ import_react.default.createElement(
+    import_PlusIcon.PlusIcon,
+    {
+      variant,
+      bold,
+      className: (0, import_classnames.default)("jkl-icons-animated__plus", `jkl-icons-animated__plus--${isPlus ? "plus" : "close"}`)
+    }
+  )
+);
 PlusRemoveAnimated.displayName = "PlusRemoveAnimated";
 //# sourceMappingURL=PlusRemoveAnimated.js.map

build/cjs/IconFactory.js

@@ -37,5 +37,55 @@ "use strict";
 const makeIconComponent = (variants) => {
-  const Icon = ({ bold = false, className, variant = "inherit", ...rest }) => {
-    const IconComponent = variants[bold ? "bold" : "regular"][variant];
-    return /* @__PURE__ */ import_react.default.createElement(IconComponent, { className: (0, import_classnames.default)(className, "jkl-icon", `jkl-icon--${variant}`), "aria-hidden": true, ...rest });
+  const Icon = ({
+    bold = false,
+    className,
+    variant = "inherit",
+    "data-testid": testId,
+    style,
+    ...rest
+  }) => {
+    const IconComponent = variants["regular"]["inherit"];
+    const BoldIconComponent = variants["bold"]["inherit"];
+    const MediumIconComponent = variants["regular"]["medium"];
+    const MediumBoldIconComponent = variants["bold"]["medium"];
+    const SmallIconComponent = variants["regular"]["small"];
+    const SmallBoldIconComponent = variants["bold"]["small"];
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: (0, import_classnames.default)(className, "jkl-icon", `jkl-icon--${variant}`, { "jkl-icon--bold": bold }),
+        "aria-hidden": "true",
+        style,
+        "data-testid": testId
+      },
+      /* @__PURE__ */ import_react.default.createElement(IconComponent, { className: "jkl-icon__icon jkl-icon__icon--inherit jkl-icon__icon--regular", ...rest }),
+      /* @__PURE__ */ import_react.default.createElement(BoldIconComponent, { className: "jkl-icon__icon jkl-icon__icon--inherit jkl-icon__icon--bold", ...rest }),
+      /* @__PURE__ */ import_react.default.createElement(
+        MediumIconComponent,
+        {
+          className: "jkl-icon__icon jkl-icon__icon--medium jkl-icon__icon--regular",
+          ...rest
+        }
+      ),
+      /* @__PURE__ */ import_react.default.createElement(
+        MediumBoldIconComponent,
+        {
+          className: "jkl-icon__icon jkl-icon__icon--medium jkl-icon__icon--bold",
+          ...rest
+        }
+      ),
+      /* @__PURE__ */ import_react.default.createElement(
+        SmallIconComponent,
+        {
+          className: "jkl-icon__icon jkl-icon__icon--small jkl-icon__icon--regular",
+          ...rest
+        }
+      ),
+      /* @__PURE__ */ import_react.default.createElement(
+        SmallBoldIconComponent,
+        {
+          className: "jkl-icon__icon jkl-icon__icon--small jkl-icon__icon--bold",
+          ...rest
+        }
+      )
+    );
   };
@@ -42,0 +92,0 @@ return Icon;

build/cjs/icons/error/ErrorMedium.js

@@ -34,12 +34,16 @@ "use strict";
 module.exports = __toCommonJS(ErrorMedium_exports);
+var import_jkl_react_hooks = require("@fremtind/jkl-react-hooks");
 var import_react = __toESM(require("react"));
-const ErrorMedium = (props) => /* @__PURE__ */ import_react.default.createElement("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ import_react.default.createElement("g", { clipPath: "url(#a)" }, /* @__PURE__ */ import_react.default.createElement(
-  "path",
-  {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zm-1-8V7h2v7h-2zm2.25 2.75a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0z",
-    fill: "currentColor"
-  }
-)), /* @__PURE__ */ import_react.default.createElement("defs", null, /* @__PURE__ */ import_react.default.createElement("clipPath", { id: "a" }, /* @__PURE__ */ import_react.default.createElement("path", { fill: "#fff", d: "M0 0h24v24H0z" }))));
+const ErrorMedium = (props) => {
+  const id = (0, import_jkl_react_hooks.useId)("em");
+  return /* @__PURE__ */ import_react.default.createElement("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ import_react.default.createElement("g", { clipPath: `url(#${id})` }, /* @__PURE__ */ import_react.default.createElement(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zm-1-8V7h2v7h-2zm2.25 2.75a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0z",
+      fill: "currentColor"
+    }
+  )), /* @__PURE__ */ import_react.default.createElement("defs", null, /* @__PURE__ */ import_react.default.createElement("clipPath", { id }, /* @__PURE__ */ import_react.default.createElement("path", { fill: "#fff", d: "M0 0h24v24H0z" }))));
+};
 //# sourceMappingURL=ErrorMedium.js.map

build/cjs/icons/error/ErrorMediumBold.js

@@ -34,12 +34,16 @@ "use strict";
 module.exports = __toCommonJS(ErrorMediumBold_exports);
+var import_jkl_react_hooks = require("@fremtind/jkl-react-hooks");
 var import_react = __toESM(require("react"));
-const ErrorMediumBold = (props) => /* @__PURE__ */ import_react.default.createElement("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ import_react.default.createElement("g", { clipPath: "url(#a)" }, /* @__PURE__ */ import_react.default.createElement(
-  "path",
-  {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zm-1-8V7h2v7h-2zm2.25 2.75a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0z",
-    fill: "currentColor"
-  }
-)), /* @__PURE__ */ import_react.default.createElement("defs", null, /* @__PURE__ */ import_react.default.createElement("clipPath", { id: "a" }, /* @__PURE__ */ import_react.default.createElement("path", { fill: "#fff", d: "M0 0h24v24H0z" }))));
+const ErrorMediumBold = (props) => {
+  const id = (0, import_jkl_react_hooks.useId)("emb");
+  return /* @__PURE__ */ import_react.default.createElement("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ import_react.default.createElement("g", { clipPath: `url(#${id})` }, /* @__PURE__ */ import_react.default.createElement(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zm-1-8V7h2v7h-2zm2.25 2.75a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0z",
+      fill: "currentColor"
+    }
+  )), /* @__PURE__ */ import_react.default.createElement("defs", null, /* @__PURE__ */ import_react.default.createElement("clipPath", { id }, /* @__PURE__ */ import_react.default.createElement("path", { fill: "#fff", d: "M0 0h24v24H0z" }))));
+};
 //# sourceMappingURL=ErrorMediumBold.js.map

build/cjs/icons/error/ErrorSmall.js

@@ -34,12 +34,16 @@ "use strict";
 module.exports = __toCommonJS(ErrorSmall_exports);
+var import_jkl_react_hooks = require("@fremtind/jkl-react-hooks");
 var import_react = __toESM(require("react"));
-const ErrorSmall = (props) => /* @__PURE__ */ import_react.default.createElement("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ import_react.default.createElement("g", { clipPath: "url(#a)" }, /* @__PURE__ */ import_react.default.createElement(
-  "path",
-  {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M10 18a8 8 0 100-16 8 8 0 000 16zM9.25 6v5h1.5V6h-1.5zm.75 8.5a1 1 0 100-2 1 1 0 000 2z",
-    fill: "currentColor"
-  }
-)), /* @__PURE__ */ import_react.default.createElement("defs", null, /* @__PURE__ */ import_react.default.createElement("clipPath", { id: "a" }, /* @__PURE__ */ import_react.default.createElement("path", { fill: "#fff", d: "M0 0h20v20H0z" }))));
+const ErrorSmall = (props) => {
+  const id = (0, import_jkl_react_hooks.useId)("es");
+  return /* @__PURE__ */ import_react.default.createElement("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ import_react.default.createElement("g", { clipPath: `url(#${id})` }, /* @__PURE__ */ import_react.default.createElement(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M10 18a8 8 0 100-16 8 8 0 000 16zM9.25 6v5h1.5V6h-1.5zm.75 8.5a1 1 0 100-2 1 1 0 000 2z",
+      fill: "currentColor"
+    }
+  )), /* @__PURE__ */ import_react.default.createElement("defs", null, /* @__PURE__ */ import_react.default.createElement("clipPath", { id }, /* @__PURE__ */ import_react.default.createElement("path", { fill: "#fff", d: "M0 0h20v20H0z" }))));
+};
 //# sourceMappingURL=ErrorSmall.js.map

build/cjs/icons/error/ErrorSmallBold.js

@@ -34,12 +34,16 @@ "use strict";
 module.exports = __toCommonJS(ErrorSmallBold_exports);
+var import_jkl_react_hooks = require("@fremtind/jkl-react-hooks");
 var import_react = __toESM(require("react"));
-const ErrorSmallBold = (props) => /* @__PURE__ */ import_react.default.createElement("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ import_react.default.createElement("g", { clipPath: "url(#a)" }, /* @__PURE__ */ import_react.default.createElement(
-  "path",
-  {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M10 18a8 8 0 100-16 8 8 0 000 16zM9.25 6v5h1.5V6h-1.5zm.75 8.5a1 1 0 100-2 1 1 0 000 2z",
-    fill: "currentColor"
-  }
-)), /* @__PURE__ */ import_react.default.createElement("defs", null, /* @__PURE__ */ import_react.default.createElement("clipPath", { id: "a" }, /* @__PURE__ */ import_react.default.createElement("path", { fill: "#fff", d: "M0 0h20v20H0z" }))));
+const ErrorSmallBold = (props) => {
+  const id = (0, import_jkl_react_hooks.useId)("esb");
+  return /* @__PURE__ */ import_react.default.createElement("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ import_react.default.createElement("g", { clipPath: `url(#${id})` }, /* @__PURE__ */ import_react.default.createElement(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M10 18a8 8 0 100-16 8 8 0 000 16zM9.25 6v5h1.5V6h-1.5zm.75 8.5a1 1 0 100-2 1 1 0 000 2z",
+      fill: "currentColor"
+    }
+  )), /* @__PURE__ */ import_react.default.createElement("defs", null, /* @__PURE__ */ import_react.default.createElement("clipPath", { id }, /* @__PURE__ */ import_react.default.createElement("path", { fill: "#fff", d: "M0 0h20v20H0z" }))));
+};
 //# sourceMappingURL=ErrorSmallBold.js.map

build/esm/animated-icons/ArrowHorizontalAnimated.js

@@ -1,2 +0,2 @@
-import cx from "classnames";
+import cn from "classnames";
 import React from "react";
@@ -11,3 +11,17 @@ import { ArrowLeftIcon } from "../icons/arrow-left/ArrowLeftIcon";
   ...rest
-}) => /* @__PURE__ */ React.createElement("div", { ...rest, className: cx(`jkl-icon jkl-icon--${variant}`, "jkl-animated-horizontal-arrows", className) }, /* @__PURE__ */ React.createElement("div", { className: "jkl-animated-horizontal-arrows__slider", "data-show": pointingRight ? "right" : "left" }, /* @__PURE__ */ React.createElement(ArrowRightIcon, { className: "jkl-animated-horizontal-arrows__arrow", variant, bold }), /* @__PURE__ */ React.createElement(ArrowLeftIcon, { className: "jkl-animated-horizontal-arrows__arrow", variant, bold })));
+}) => /* @__PURE__ */ React.createElement(
+  "div",
+  {
+    ...rest,
+    className: cn(
+      "jkl-icon",
+      "jkl-icon--animated",
+      `jkl-icon--${variant}`,
+      { "jkl-icon--bold": bold },
+      "jkl-animated-horizontal-arrows",
+      className
+    )
+  },
+  /* @__PURE__ */ React.createElement("div", { className: "jkl-animated-horizontal-arrows__slider", "data-show": pointingRight ? "right" : "left" }, /* @__PURE__ */ React.createElement(ArrowRightIcon, { className: "jkl-animated-horizontal-arrows__arrow", variant, bold }), /* @__PURE__ */ React.createElement(ArrowLeftIcon, { className: "jkl-animated-horizontal-arrows__arrow", variant, bold }))
+);
 ArrowHorizontalAnimated.displayName = "ArrowHorizontalAnimated";
@@ -14,0 +28,0 @@ export {

build/esm/animated-icons/ArrowVerticalAnimated.js

@@ -1,2 +0,2 @@
-import cx from "classnames";
+import cn from "classnames";
 import React from "react";
@@ -11,3 +11,17 @@ import { ArrowDownIcon } from "../icons/arrow-down/ArrowDownIcon";
   ...rest
-}) => /* @__PURE__ */ React.createElement("div", { ...rest, className: cx(`jkl-icon jkl-icon--${variant}`, "jkl-animated-vertical-arrows", className) }, /* @__PURE__ */ React.createElement("div", { className: "jkl-animated-vertical-arrows__slider", "data-show": pointingDown ? "down" : "up" }, /* @__PURE__ */ React.createElement(ArrowDownIcon, { className: "jkl-animated-vertical-arrows__arrow", variant, bold }), /* @__PURE__ */ React.createElement(ArrowUpIcon, { className: "jkl-animated-vertical-arrows__arrow", variant, bold })));
+}) => /* @__PURE__ */ React.createElement(
+  "div",
+  {
+    ...rest,
+    className: cn(
+      "jkl-icon",
+      "jkl-icon--animated",
+      `jkl-icon--${variant}`,
+      { "jkl-icon--bold": bold },
+      "jkl-animated-vertical-arrows",
+      className
+    )
+  },
+  /* @__PURE__ */ React.createElement("div", { className: "jkl-animated-vertical-arrows__slider", "data-show": pointingDown ? "down" : "up" }, /* @__PURE__ */ React.createElement(ArrowDownIcon, { className: "jkl-animated-vertical-arrows__arrow", variant, bold }), /* @__PURE__ */ React.createElement(ArrowUpIcon, { className: "jkl-animated-vertical-arrows__arrow", variant, bold }))
+);
 ArrowVerticalAnimated.displayName = "ArrowVerticalAnimated";
@@ -14,0 +28,0 @@ export {

build/esm/animated-icons/PlusRemoveAnimated.js

@@ -1,2 +0,2 @@
-import cx from "classnames";
+import cn from "classnames";
 import React from "react";
@@ -10,10 +10,17 @@ import { PlusIcon } from "../icons/plus/PlusIcon";
   ...rest
-}) => /* @__PURE__ */ React.createElement("div", { ...rest, className: cx("jkl-icon", `jkl-icon--${variant}`, className) }, /* @__PURE__ */ React.createElement(
-  PlusIcon,
+}) => /* @__PURE__ */ React.createElement(
+  "div",
   {
-    variant,
-    bold,
-    className: cx("jkl-icons-animated__plus", `jkl-icons-animated__plus--${isPlus ? "plus" : "close"}`)
-  }
-));
+    ...rest,
+    className: cn("jkl-icon", "jkl-icon--animated", `jkl-icon--${variant}`, { "jkl-icon--bold": bold }, className)
+  },
+  /* @__PURE__ */ React.createElement(
+    PlusIcon,
+    {
+      variant,
+      bold,
+      className: cn("jkl-icons-animated__plus", `jkl-icons-animated__plus--${isPlus ? "plus" : "close"}`)
+    }
+  )
+);
 PlusRemoveAnimated.displayName = "PlusRemoveAnimated";
@@ -20,0 +27,0 @@ export {

build/esm/IconFactory.js

 import cn from "classnames";
 import React from "react";
 const makeIconComponent = (variants) => {
-  const Icon = ({ bold = false, className, variant = "inherit", ...rest }) => {
-    const IconComponent = variants[bold ? "bold" : "regular"][variant];
-    return /* @__PURE__ */ React.createElement(IconComponent, { className: cn(className, "jkl-icon", `jkl-icon--${variant}`), "aria-hidden": true, ...rest });
+  const Icon = ({
+    bold = false,
+    className,
+    variant = "inherit",
+    "data-testid": testId,
+    style,
+    ...rest
+  }) => {
+    const IconComponent = variants["regular"]["inherit"];
+    const BoldIconComponent = variants["bold"]["inherit"];
+    const MediumIconComponent = variants["regular"]["medium"];
+    const MediumBoldIconComponent = variants["bold"]["medium"];
+    const SmallIconComponent = variants["regular"]["small"];
+    const SmallBoldIconComponent = variants["bold"]["small"];
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: cn(className, "jkl-icon", `jkl-icon--${variant}`, { "jkl-icon--bold": bold }),
+        "aria-hidden": "true",
+        style,
+        "data-testid": testId
+      },
+      /* @__PURE__ */ React.createElement(IconComponent, { className: "jkl-icon__icon jkl-icon__icon--inherit jkl-icon__icon--regular", ...rest }),
+      /* @__PURE__ */ React.createElement(BoldIconComponent, { className: "jkl-icon__icon jkl-icon__icon--inherit jkl-icon__icon--bold", ...rest }),
+      /* @__PURE__ */ React.createElement(
+        MediumIconComponent,
+        {
+          className: "jkl-icon__icon jkl-icon__icon--medium jkl-icon__icon--regular",
+          ...rest
+        }
+      ),
+      /* @__PURE__ */ React.createElement(
+        MediumBoldIconComponent,
+        {
+          className: "jkl-icon__icon jkl-icon__icon--medium jkl-icon__icon--bold",
+          ...rest
+        }
+      ),
+      /* @__PURE__ */ React.createElement(
+        SmallIconComponent,
+        {
+          className: "jkl-icon__icon jkl-icon__icon--small jkl-icon__icon--regular",
+          ...rest
+        }
+      ),
+      /* @__PURE__ */ React.createElement(
+        SmallBoldIconComponent,
+        {
+          className: "jkl-icon__icon jkl-icon__icon--small jkl-icon__icon--bold",
+          ...rest
+        }
+      )
+    );
   };
@@ -8,0 +58,0 @@ return Icon;

build/esm/icons/error/ErrorMedium.js

@@ -0,11 +1,15 @@
+import { useId } from "@fremtind/jkl-react-hooks";
 import React from "react";
-const ErrorMedium = (props) => /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("g", { clipPath: "url(#a)" }, /* @__PURE__ */ React.createElement(
-  "path",
-  {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zm-1-8V7h2v7h-2zm2.25 2.75a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0z",
-    fill: "currentColor"
-  }
-)), /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("clipPath", { id: "a" }, /* @__PURE__ */ React.createElement("path", { fill: "#fff", d: "M0 0h24v24H0z" }))));
+const ErrorMedium = (props) => {
+  const id = useId("em");
+  return /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("g", { clipPath: `url(#${id})` }, /* @__PURE__ */ React.createElement(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zm-1-8V7h2v7h-2zm2.25 2.75a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0z",
+      fill: "currentColor"
+    }
+  )), /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("clipPath", { id }, /* @__PURE__ */ React.createElement("path", { fill: "#fff", d: "M0 0h24v24H0z" }))));
+};
 export {
@@ -12,0 +16,0 @@ ErrorMedium

build/esm/icons/error/ErrorMediumBold.js

@@ -0,11 +1,15 @@
+import { useId } from "@fremtind/jkl-react-hooks";
 import React from "react";
-const ErrorMediumBold = (props) => /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("g", { clipPath: "url(#a)" }, /* @__PURE__ */ React.createElement(
-  "path",
-  {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zm-1-8V7h2v7h-2zm2.25 2.75a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0z",
-    fill: "currentColor"
-  }
-)), /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("clipPath", { id: "a" }, /* @__PURE__ */ React.createElement("path", { fill: "#fff", d: "M0 0h24v24H0z" }))));
+const ErrorMediumBold = (props) => {
+  const id = useId("emb");
+  return /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("g", { clipPath: `url(#${id})` }, /* @__PURE__ */ React.createElement(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zm-1-8V7h2v7h-2zm2.25 2.75a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0z",
+      fill: "currentColor"
+    }
+  )), /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("clipPath", { id }, /* @__PURE__ */ React.createElement("path", { fill: "#fff", d: "M0 0h24v24H0z" }))));
+};
 export {
@@ -12,0 +16,0 @@ ErrorMediumBold

build/esm/icons/error/ErrorSmall.js

@@ -0,11 +1,15 @@
+import { useId } from "@fremtind/jkl-react-hooks";
 import React from "react";
-const ErrorSmall = (props) => /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("g", { clipPath: "url(#a)" }, /* @__PURE__ */ React.createElement(
-  "path",
-  {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M10 18a8 8 0 100-16 8 8 0 000 16zM9.25 6v5h1.5V6h-1.5zm.75 8.5a1 1 0 100-2 1 1 0 000 2z",
-    fill: "currentColor"
-  }
-)), /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("clipPath", { id: "a" }, /* @__PURE__ */ React.createElement("path", { fill: "#fff", d: "M0 0h20v20H0z" }))));
+const ErrorSmall = (props) => {
+  const id = useId("es");
+  return /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("g", { clipPath: `url(#${id})` }, /* @__PURE__ */ React.createElement(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M10 18a8 8 0 100-16 8 8 0 000 16zM9.25 6v5h1.5V6h-1.5zm.75 8.5a1 1 0 100-2 1 1 0 000 2z",
+      fill: "currentColor"
+    }
+  )), /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("clipPath", { id }, /* @__PURE__ */ React.createElement("path", { fill: "#fff", d: "M0 0h20v20H0z" }))));
+};
 export {
@@ -12,0 +16,0 @@ ErrorSmall

build/esm/icons/error/ErrorSmallBold.js

@@ -0,11 +1,15 @@
+import { useId } from "@fremtind/jkl-react-hooks";
 import React from "react";
-const ErrorSmallBold = (props) => /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("g", { clipPath: "url(#a)" }, /* @__PURE__ */ React.createElement(
-  "path",
-  {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M10 18a8 8 0 100-16 8 8 0 000 16zM9.25 6v5h1.5V6h-1.5zm.75 8.5a1 1 0 100-2 1 1 0 000 2z",
-    fill: "currentColor"
-  }
-)), /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("clipPath", { id: "a" }, /* @__PURE__ */ React.createElement("path", { fill: "#fff", d: "M0 0h20v20H0z" }))));
+const ErrorSmallBold = (props) => {
+  const id = useId("esb");
+  return /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("g", { clipPath: `url(#${id})` }, /* @__PURE__ */ React.createElement(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M10 18a8 8 0 100-16 8 8 0 000 16zM9.25 6v5h1.5V6h-1.5zm.75 8.5a1 1 0 100-2 1 1 0 000 2z",
+      fill: "currentColor"
+    }
+  )), /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("clipPath", { id }, /* @__PURE__ */ React.createElement("path", { fill: "#fff", d: "M0 0h20v20H0z" }))));
+};
 export {
@@ -12,0 +16,0 @@ ErrorSmallBold

build/icons/types.d.ts

@@ -0,7 +1,8 @@
+/// <reference types="react" />
 export type IconVariant = "inherit" | "small" | "medium";
 export interface IconProps {
+    "data-testid"?: string;
     /**
      * Størrelsesvarianten til ikonet. `"small"` er 16px med 20px bounding box, og `"medium"` er 20px med 24px bounding box.
      * `"inherit"` setter størrelsen til ikonet (ikke bounding box) lik skriftstørrelsen (1em).
-     * @default "inherit"
      */
@@ -15,2 +16,3 @@ variant?: IconVariant;
     className?: string;
+    style?: React.CSSProperties;
 }

package.json

 {
     "name": "@fremtind/jkl-icons-react",
-    "version": "7.1.3",
+    "version": "7.2.0",
     "publishConfig": {
@@ -42,3 +42,4 @@ "access": "public"
         "@fremtind/jkl-core": "^12.0.4",
-        "@fremtind/jkl-icons": "^7.0.4",
+        "@fremtind/jkl-icons": "^8.0.0",
+        "@fremtind/jkl-react-hooks": "^11.1.2",
         "classnames": "^2.3.2"
@@ -59,3 +60,3 @@ },
     },
-    "gitHead": "783b82fc02974a12c277d0a3b28e53c33403ae90"
+    "gitHead": "dfe98e3ed72dfb4a5380915dfa708cd5f27c0d98"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

540036

increased by2.43%

Lines of code

6805

increased by3.06%

Worsened metrics

Dependency count

8

increased by14.29%

Dependency changes

• + Added@fremtind/jkl-react-hooks@^11.1.2

• + Added@fremtind/jkl-icons@8.0.3(transitive)

• + Added@fremtind/jkl-react-hooks@11.5.1(transitive)

• + Addednanoid@3.3.7(transitive)

• - Removed@fremtind/jkl-icons@7.0.4(transitive)

• Updated@fremtind/jkl-icons@^8.0.0