@navikt/ds-react 3.3.1 → 3.4.1

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "3.3.1",
+  "version": "3.4.1",
   "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.1",
+    "@navikt/aksel-icons": "^3.4.1",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^1.2.1",

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}>