@navikt/ds-react 1.4.4 → 1.5.1

package/_docs.json

@@ -920,6 +920,258 @@
       }
     }
   },
+  {
+    "filePath": "src/chips/Chips.tsx",
+    "displayName": "Chips",
+    "props": {
+      "size": {
+        "defaultValue": {
+          "value": "\"medium\""
+        },
+        "description": "Changes padding and font-sizes",
+        "name": "size",
+        "parent": {
+          "fileName": "src/chips/Chips.tsx",
+          "name": "ChipsProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/chips/Chips.tsx",
+            "name": "ChipsProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"medium\" | \"small\""
+        }
+      },
+      "className": {
+        "defaultValue": null,
+        "description": "",
+        "name": "className",
+        "parent": {
+          "fileName": "Designsystemet/node_modules/@types/react/index.d.ts",
+          "name": "HTMLAttributes"
+        },
+        "declarations": [
+          {
+            "fileName": "Designsystemet/node_modules/@types/react/index.d.ts",
+            "name": "HTMLAttributes"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "ref": {
+        "defaultValue": null,
+        "description": "",
+        "name": "ref",
+        "parent": {
+          "fileName": "Designsystemet/node_modules/@types/react/index.d.ts",
+          "name": "RefAttributes"
+        },
+        "declarations": [
+          {
+            "fileName": "Designsystemet/node_modules/@types/react/index.d.ts",
+            "name": "RefAttributes"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "Ref<HTMLUListElement>"
+        }
+      }
+    }
+  },
+  {
+    "filePath": "src/chips/Filter.tsx",
+    "displayName": "FilterChips",
+    "props": {
+      "onSelect": {
+        "defaultValue": null,
+        "description": "",
+        "name": "onSelect",
+        "parent": {
+          "fileName": "src/chips/Filter.tsx",
+          "name": "FilterChipsProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/chips/Filter.tsx",
+            "name": "FilterChipsProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "(() => void)"
+        }
+      },
+      "selected": {
+        "defaultValue": null,
+        "description": "",
+        "name": "selected",
+        "parent": {
+          "fileName": "src/chips/Filter.tsx",
+          "name": "FilterChipsProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/chips/Filter.tsx",
+            "name": "FilterChipsProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "className": {
+        "defaultValue": null,
+        "description": "",
+        "name": "className",
+        "parent": {
+          "fileName": "Designsystemet/node_modules/@types/react/index.d.ts",
+          "name": "HTMLAttributes"
+        },
+        "declarations": [
+          {
+            "fileName": "Designsystemet/node_modules/@types/react/index.d.ts",
+            "name": "HTMLAttributes"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "ref": {
+        "defaultValue": null,
+        "description": "",
+        "name": "ref",
+        "parent": {
+          "fileName": "Designsystemet/node_modules/@types/react/index.d.ts",
+          "name": "RefAttributes"
+        },
+        "declarations": [
+          {
+            "fileName": "Designsystemet/node_modules/@types/react/index.d.ts",
+            "name": "RefAttributes"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "Ref<HTMLButtonElement>"
+        }
+      }
+    }
+  },
+  {
+    "filePath": "src/chips/Removable.tsx",
+    "displayName": "RemovableChips",
+    "props": {
+      "variant": {
+        "defaultValue": {
+          "value": "\"action\""
+        },
+        "description": "Chip-variants",
+        "name": "variant",
+        "parent": {
+          "fileName": "src/chips/Removable.tsx",
+          "name": "RemovableChipsProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/chips/Removable.tsx",
+            "name": "RemovableChipsProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"action\" | \"neutral\""
+        }
+      },
+      "removeLabel": {
+        "defaultValue": {
+          "value": "\"slett filter\""
+        },
+        "description": "Replaces label read for screen-readers",
+        "name": "removeLabel",
+        "parent": {
+          "fileName": "src/chips/Removable.tsx",
+          "name": "RemovableChipsProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/chips/Removable.tsx",
+            "name": "RemovableChipsProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "onDelete": {
+        "defaultValue": null,
+        "description": "Click callback",
+        "name": "onDelete",
+        "parent": {
+          "fileName": "src/chips/Removable.tsx",
+          "name": "RemovableChipsProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/chips/Removable.tsx",
+            "name": "RemovableChipsProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "(() => void)"
+        }
+      },
+      "className": {
+        "defaultValue": null,
+        "description": "",
+        "name": "className",
+        "parent": {
+          "fileName": "Designsystemet/node_modules/@types/react/index.d.ts",
+          "name": "HTMLAttributes"
+        },
+        "declarations": [
+          {
+            "fileName": "Designsystemet/node_modules/@types/react/index.d.ts",
+            "name": "HTMLAttributes"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "ref": {
+        "defaultValue": null,
+        "description": "",
+        "name": "ref",
+        "parent": {
+          "fileName": "Designsystemet/node_modules/@types/react/index.d.ts",
+          "name": "RefAttributes"
+        },
+        "declarations": [
+          {
+            "fileName": "Designsystemet/node_modules/@types/react/index.d.ts",
+            "name": "RefAttributes"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "Ref<HTMLButtonElement>"
+        }
+      }
+    }
+  },
   {
     "filePath": "src/date/DateInput.tsx",
     "displayName": "DatePickerInput",
@@ -6419,28 +6671,9 @@
     "filePath": "src/tag/Tag.tsx",
     "displayName": "Tag",
     "props": {
-      "children": {
-        "defaultValue": null,
-        "description": "Tag label",
-        "name": "children",
-        "parent": {
-          "fileName": "src/tag/Tag.tsx",
-          "name": "TagProps"
-        },
-        "declarations": [
-          {
-            "fileName": "src/tag/Tag.tsx",
-            "name": "TagProps"
-          }
-        ],
-        "required": true,
-        "type": {
-          "name": "ReactNode"
-        }
-      },
       "variant": {
         "defaultValue": null,
-        "description": "Changes background and border color",
+        "description": "Changes visual profile of tag",
         "name": "variant",
         "parent": {
           "fileName": "src/tag/Tag.tsx",
@@ -6454,14 +6687,14 @@
         ],
         "required": true,
         "type": {
-          "name": "\"warning\" | \"error\" | \"info\" | \"success\""
+          "name": "\"warning\" | \"warning-filled\" | \"error\" | \"error-filled\" | \"info\" | \"info-filled\" | \"success\" | \"success-filled\" | \"neutral\" | \"neutral-filled\" | \"alt1\" | \"alt1-filled\" | \"alt2\" | \"alt2-filled\" | \"alt3\" | \"alt3-filled\""
         }
       },
       "size": {
         "defaultValue": {
           "value": "medium"
         },
-        "description": "Changes padding and font-sizes",
+        "description": "",
         "name": "size",
         "parent": {
           "fileName": "src/tag/Tag.tsx",
@@ -6475,7 +6708,7 @@
         ],
         "required": false,
         "type": {
-          "name": "\"medium\" | \"small\""
+          "name": "\"medium\" | \"small\" | \"xsmall\""
         }
       },
       "className": {

package/cjs/chips/Chips.js

@@ -0,0 +1,57 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Chips = void 0;
+const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importStar(require("react"));
+const Filter_1 = __importDefault(require("./Filter"));
+const Removable_1 = __importDefault(require("./Removable"));
+exports.Chips = (0, react_1.forwardRef)((_a, ref) => {
+    var { className, size = "medium", children } = _a, rest = __rest(_a, ["className", "size", "children"]);
+    return (react_1.default.createElement("ul", Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-chips", className, `navds-chips--${size}`, {
+            "navds-body-short navds-body-short--small": size === "medium",
+            "navds-detail navds-detail--small": size === "small",
+        }) }), react_1.default.Children.map(children, (chip, index) => {
+        var _a;
+        return react_1.default.createElement("li", { key: index + ((_a = chip === null || chip === void 0 ? void 0 : chip.toString()) !== null && _a !== void 0 ? _a : "") }, chip);
+    })));
+});
+exports.Chips.Filter = Filter_1.default;
+exports.Chips.Removable = Removable_1.default;
+exports.default = exports.Chips;

package/cjs/chips/Filter.js

@@ -0,0 +1,52 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilterChips = void 0;
+const ds_icons_1 = require("@navikt/ds-icons");
+const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importStar(require("react"));
+exports.FilterChips = (0, react_1.forwardRef)((_a, ref) => {
+    var { className, children, selected, as: Component = "button" } = _a, rest = __rest(_a, ["className", "children", "selected", "as"]);
+    return (react_1.default.createElement(Component, Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-chips__chip navds-chips__filter", className, {
+            "navds-chips--icon-left": selected,
+        }), "aria-pressed": selected }),
+        selected && (react_1.default.createElement(ds_icons_1.SuccessStroke, { "aria-hidden": true, className: "navds-chips__filter-icon" })),
+        react_1.default.createElement("span", { className: "navds-chips__chip-text" }, children)));
+});
+exports.default = exports.FilterChips;

package/cjs/chips/Removable.js

@@ -0,0 +1,55 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RemovableChips = void 0;
+const ds_icons_1 = require("@navikt/ds-icons");
+const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importStar(require("react"));
+exports.RemovableChips = (0, react_1.forwardRef)((_a, ref) => {
+    var { className, children, variant = "action", as: Component = "button", removeLabel = "slett", onDelete } = _a, rest = __rest(_a, ["className", "children", "variant", "as", "removeLabel", "onDelete"]);
+    return (react_1.default.createElement(Component, Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-chips__chip navds-chips__removable navds-chips--icon-right", className, `navds-chips__removable--${variant}`), "aria-label": `${children} ${removeLabel}`, onClick: (e) => {
+            var _a;
+            onDelete === null || onDelete === void 0 ? void 0 : onDelete();
+            (_a = rest === null || rest === void 0 ? void 0 : rest.onClick) === null || _a === void 0 ? void 0 : _a.call(rest, e);
+        } }),
+        react_1.default.createElement("span", { className: "navds-chips__chip-text" }, children),
+        react_1.default.createElement("span", { className: "navds-chips__removable-icon" },
+            react_1.default.createElement(ds_icons_1.Close, { "aria-hidden": true }))));
+});
+exports.default = exports.RemovableChips;

package/cjs/chips/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Chips = void 0;
+var Chips_1 = require("./Chips");
+Object.defineProperty(exports, "Chips", { enumerable: true, get: function () { return __importDefault(Chips_1).default; } });

package/cjs/chips/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "main": "./index.js",
+  "module": "../../esm/chips/index.js",
+  "types": "../../esm/chips/index.d.ts"
+}

package/cjs/index.js

@@ -32,6 +32,7 @@ __exportStar(require("./panel"), exports);
 __exportStar(require("./popover"), exports);
 __exportStar(require("./read-more"), exports);
 __exportStar(require("./chat"), exports);
+__exportStar(require("./chips"), exports);
 __exportStar(require("./stepper"), exports);
 __exportStar(require("./tag"), exports);
 __exportStar(require("./toggle-group"), exports);

package/cjs/tag/Tag.js

@@ -44,6 +44,6 @@ 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, className: (0, clsx_1.default)("navds-tag", className, `navds-tag--${variant}`, `navds-tag--${size}`) })));
+    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}`) })));
 });
 exports.default = exports.Tag;

package/esm/chips/Chips.d.ts

@@ -0,0 +1,17 @@
+import React, { HTMLAttributes } from "react";
+import { FilterChipsType } from "./Filter";
+import { RemovableChipsType } from "./Removable";
+export interface ChipsProps extends HTMLAttributes<HTMLUListElement> {
+    children: React.ReactNode;
+    /**
+     * Changes padding and font-sizes
+     * @default "medium"
+     */
+    size?: "medium" | "small";
+}
+interface ChipsComponent extends React.ForwardRefExoticComponent<ChipsProps & React.RefAttributes<HTMLUListElement>> {
+    Filter: FilterChipsType;
+    Removable: RemovableChipsType;
+}
+export declare const Chips: ChipsComponent;
+export default Chips;

package/esm/chips/Chips.js

@@ -0,0 +1,29 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import cl from "clsx";
+import React, { forwardRef } from "react";
+import FilterChips from "./Filter";
+import RemovableChips from "./Removable";
+export const Chips = forwardRef((_a, ref) => {
+    var { className, size = "medium", children } = _a, rest = __rest(_a, ["className", "size", "children"]);
+    return (React.createElement("ul", Object.assign({}, rest, { ref: ref, className: cl("navds-chips", className, `navds-chips--${size}`, {
+            "navds-body-short navds-body-short--small": size === "medium",
+            "navds-detail navds-detail--small": size === "small",
+        }) }), React.Children.map(children, (chip, index) => {
+        var _a;
+        return React.createElement("li", { key: index + ((_a = chip === null || chip === void 0 ? void 0 : chip.toString()) !== null && _a !== void 0 ? _a : "") }, chip);
+    })));
+});
+Chips.Filter = FilterChips;
+Chips.Removable = RemovableChips;
+export default Chips;
+//# sourceMappingURL=Chips.js.map

package/esm/chips/Chips.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chips.js","sourceRoot":"","sources":["../../src/chips/Chips.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AAC1D,OAAO,WAAgC,MAAM,UAAU,CAAC;AACxD,OAAO,cAAsC,MAAM,aAAa,CAAC;AAmBjE,MAAM,CAAC,MAAM,KAAK,GAAmB,UAAU,CAC7C,CAAC,EAAiD,EAAE,GAAG,EAAE,EAAE;QAA1D,EAAE,SAAS,EAAE,IAAI,GAAG,QAAQ,EAAE,QAAQ,OAAW,EAAN,IAAI,cAA/C,iCAAiD,CAAF;IAC9C,OAAO,CACL,4CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE,gBAAgB,IAAI,EAAE,EAAE;YAC9D,0CAA0C,EAAE,IAAI,KAAK,QAAQ;YAC7D,kCAAkC,EAAE,IAAI,KAAK,OAAO;SACrD,CAAC,KAED,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;;QAC5C,OAAO,4BAAI,GAAG,EAAE,KAAK,GAAG,CAAC,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,QAAQ,EAAE,mCAAI,EAAE,CAAC,IAAG,IAAI,CAAM,CAAC;IAChE,CAAC,CAAC,CACC,CACN,CAAC;AACJ,CAAC,CACgB,CAAC;AAEpB,KAAK,CAAC,MAAM,GAAG,WAAW,CAAC;AAC3B,KAAK,CAAC,SAAS,GAAG,cAAc,CAAC;AAEjC,eAAe,KAAK,CAAC"}

package/esm/chips/Filter.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { OverridableComponent } from "..";
+export interface FilterChipsProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    children: string;
+    /**
+     *
+     */
+    onSelect?: () => void;
+    /**
+     *
+     */
+    selected?: boolean;
+}
+export interface FilterChipsType extends OverridableComponent<FilterChipsProps, HTMLButtonElement> {
+}
+export declare const FilterChips: FilterChipsType;
+export default FilterChips;

package/esm/chips/Filter.js

@@ -0,0 +1,24 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { SuccessStroke } from "@navikt/ds-icons";
+import cl from "clsx";
+import React, { forwardRef } from "react";
+export const FilterChips = forwardRef((_a, ref) => {
+    var { className, children, selected, as: Component = "button" } = _a, rest = __rest(_a, ["className", "children", "selected", "as"]);
+    return (React.createElement(Component, Object.assign({}, rest, { ref: ref, className: cl("navds-chips__chip navds-chips__filter", className, {
+            "navds-chips--icon-left": selected,
+        }), "aria-pressed": selected }),
+        selected && (React.createElement(SuccessStroke, { "aria-hidden": true, className: "navds-chips__filter-icon" })),
+        React.createElement("span", { className: "navds-chips__chip-text" }, children)));
+});
+export default FilterChips;
+//# sourceMappingURL=Filter.js.map

package/esm/chips/Filter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Filter.js","sourceRoot":"","sources":["../../src/chips/Filter.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAmB1C,MAAM,CAAC,MAAM,WAAW,GAAoB,UAAU,CACpD,CACE,EAAoE,EACpE,GAAG,EACH,EAAE;QAFF,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE,SAAS,GAAG,QAAQ,OAAW,EAAN,IAAI,cAAlE,2CAAoE,CAAF;IAGlE,OAAO,CACL,oBAAC,SAAS,oBACJ,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,uCAAuC,EAAE,SAAS,EAAE;YAChE,wBAAwB,EAAE,QAAQ;SACnC,CAAC,kBACY,QAAQ;QAErB,QAAQ,IAAI,CACX,oBAAC,aAAa,yBAAa,SAAS,EAAC,0BAA0B,GAAG,CACnE;QACD,8BAAM,SAAS,EAAC,wBAAwB,IAAE,QAAQ,CAAQ,CAChD,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/esm/chips/Removable.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+import { OverridableComponent } from "..";
+export interface RemovableChipsProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    children: string;
+    /**
+     * Chip-variants
+     * @default "action"
+     */
+    variant?: "action" | "neutral";
+    /**
+     * Replaces label read for screen-readers
+     * @default "slett filter"
+     */
+    removeLabel?: string;
+    /**
+     * Click callback
+     */
+    onDelete?: () => void;
+}
+export interface RemovableChipsType extends OverridableComponent<RemovableChipsProps, HTMLButtonElement> {
+}
+export declare const RemovableChips: OverridableComponent<RemovableChipsProps, HTMLButtonElement>;
+export default RemovableChips;

package/esm/chips/Removable.js

@@ -0,0 +1,27 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { Close } from "@navikt/ds-icons";
+import cl from "clsx";
+import React, { forwardRef } from "react";
+export const RemovableChips = forwardRef((_a, ref) => {
+    var { className, children, variant = "action", as: Component = "button", removeLabel = "slett", onDelete } = _a, rest = __rest(_a, ["className", "children", "variant", "as", "removeLabel", "onDelete"]);
+    return (React.createElement(Component, Object.assign({}, rest, { ref: ref, className: cl("navds-chips__chip navds-chips__removable navds-chips--icon-right", className, `navds-chips__removable--${variant}`), "aria-label": `${children} ${removeLabel}`, onClick: (e) => {
+            var _a;
+            onDelete === null || onDelete === void 0 ? void 0 : onDelete();
+            (_a = rest === null || rest === void 0 ? void 0 : rest.onClick) === null || _a === void 0 ? void 0 : _a.call(rest, e);
+        } }),
+        React.createElement("span", { className: "navds-chips__chip-text" }, children),
+        React.createElement("span", { className: "navds-chips__removable-icon" },
+            React.createElement(Close, { "aria-hidden": true }))));
+});
+export default RemovableChips;
+//# sourceMappingURL=Removable.js.map

package/esm/chips/Removable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Removable.js","sourceRoot":"","sources":["../../src/chips/Removable.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAyB1C,MAAM,CAAC,MAAM,cAAc,GAGvB,UAAU,CACZ,CACE,EAQC,EACD,GAAG,EACH,EAAE;QAVF,EACE,SAAS,EACT,QAAQ,EACR,OAAO,GAAG,QAAQ,EAClB,EAAE,EAAE,SAAS,GAAG,QAAQ,EACxB,WAAW,GAAG,OAAO,EACrB,QAAQ,OAET,EADI,IAAI,cAPT,qEAQC,CADQ;IAIT,OAAO,CACL,oBAAC,SAAS,oBACJ,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,kEAAkE,EAClE,SAAS,EACT,2BAA2B,OAAO,EAAE,CACrC,gBACW,GAAG,QAAQ,IAAI,WAAW,EAAE,EACxC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;;YACb,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,EAAI,CAAC;YACb,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,OAAO,qDAAG,CAAC,CAAC,CAAC;QACrB,CAAC;QAED,8BAAM,SAAS,EAAC,wBAAwB,IAAE,QAAQ,CAAQ;QAC1D,8BAAM,SAAS,EAAC,6BAA6B;YAC3C,oBAAC,KAAK,0BAAe,CAChB,CACG,CACb,CAAC;AACJ,CAAC,CACoB,CAAC;AAExB,eAAe,cAAc,CAAC"}

package/esm/chips/index.d.ts

@@ -0,0 +1 @@
+export { default as Chips, ChipsProps } from "./Chips";

package/esm/chips/index.js

@@ -0,0 +1,2 @@
+export { default as Chips } from "./Chips";
+//# sourceMappingURL=index.js.map

package/esm/chips/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/chips/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAc,MAAM,SAAS,CAAC"}

package/esm/index.d.ts

@@ -16,6 +16,7 @@ export * from "./panel";
 export * from "./popover";
 export * from "./read-more";
 export * from "./chat";
+export * from "./chips";
 export * from "./stepper";
 export * from "./tag";
 export * from "./toggle-group";

package/esm/index.js

@@ -16,6 +16,7 @@ export * from "./panel";
 export * from "./popover";
 export * from "./read-more";
 export * from "./chat";
+export * from "./chips";
 export * from "./stepper";
 export * from "./tag";
 export * from "./toggle-group";

package/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,OAAO,CAAC;AACtB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,OAAO,CAAC;AACtB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC"}

package/esm/tag/Tag.d.ts

@@ -1,18 +1,14 @@
 import React, { HTMLAttributes } from "react";
 export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
-    /**
-     * Tag label
-     */
     children: React.ReactNode;
     /**
-     * Changes background and border color
+     * Changes visual profile of tag
      */
-    variant: "warning" | "error" | "info" | "success";
+    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";
     /**
-     * Changes padding and font-sizes
      * @default "medium"
      */
-    size?: "medium" | "small";
+    size?: "medium" | "small" | "xsmall";
 }
 export declare const Tag: React.ForwardRefExoticComponent<TagProps & React.RefAttributes<HTMLSpanElement>>;
 export default Tag;

package/esm/tag/Tag.js

@@ -15,7 +15,7 @@ import { BodyShort, Detail } 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, className: cl("navds-tag", className, `navds-tag--${variant}`, `navds-tag--${size}`) })));
+    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}`) })));
 });
 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;AAkBvC,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,EACV,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,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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "1.4.4",
+  "version": "1.5.1",
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",
   "license": "MIT",
@@ -37,7 +37,7 @@
   },
   "dependencies": {
     "@floating-ui/react-dom-interactions": "0.9.2",
-    "@navikt/ds-icons": "^1.4.4",
+    "@navikt/ds-icons": "^1.5.1",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^1.2.1",

package/src/chips/Chips.tsx

@@ -0,0 +1,45 @@
+import cl from "clsx";
+import React, { forwardRef, HTMLAttributes } from "react";
+import FilterChips, { FilterChipsType } from "./Filter";
+import RemovableChips, { RemovableChipsType } from "./Removable";
+
+export interface ChipsProps extends HTMLAttributes<HTMLUListElement> {
+  children: React.ReactNode;
+  /**
+   * Changes padding and font-sizes
+   * @default "medium"
+   */
+  size?: "medium" | "small";
+}
+
+interface ChipsComponent
+  extends React.ForwardRefExoticComponent<
+    ChipsProps & React.RefAttributes<HTMLUListElement>
+  > {
+  Filter: FilterChipsType;
+  Removable: RemovableChipsType;
+}
+
+export const Chips: ChipsComponent = forwardRef<HTMLUListElement, ChipsProps>(
+  ({ className, size = "medium", children, ...rest }, ref) => {
+    return (
+      <ul
+        {...rest}
+        ref={ref}
+        className={cl("navds-chips", className, `navds-chips--${size}`, {
+          "navds-body-short navds-body-short--small": size === "medium",
+          "navds-detail navds-detail--small": size === "small",
+        })}
+      >
+        {React.Children.map(children, (chip, index) => {
+          return <li key={index + (chip?.toString() ?? "")}>{chip}</li>;
+        })}
+      </ul>
+    );
+  }
+) as ChipsComponent;
+
+Chips.Filter = FilterChips;
+Chips.Removable = RemovableChips;
+
+export default Chips;

package/src/chips/Filter.tsx

@@ -0,0 +1,45 @@
+import { SuccessStroke } from "@navikt/ds-icons";
+import cl from "clsx";
+import React, { forwardRef } from "react";
+import { OverridableComponent } from "..";
+
+export interface FilterChipsProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  children: string;
+  /**
+   *
+   */
+  onSelect?: () => void;
+  /**
+   *
+   */
+  selected?: boolean;
+}
+
+export interface FilterChipsType
+  extends OverridableComponent<FilterChipsProps, HTMLButtonElement> {}
+
+export const FilterChips: FilterChipsType = forwardRef(
+  (
+    { className, children, selected, as: Component = "button", ...rest },
+    ref
+  ) => {
+    return (
+      <Component
+        {...rest}
+        ref={ref}
+        className={cl("navds-chips__chip navds-chips__filter", className, {
+          "navds-chips--icon-left": selected,
+        })}
+        aria-pressed={selected}
+      >
+        {selected && (
+          <SuccessStroke aria-hidden className="navds-chips__filter-icon" />
+        )}
+        <span className="navds-chips__chip-text">{children}</span>
+      </Component>
+    );
+  }
+);
+
+export default FilterChips;

package/src/chips/Removable.tsx

@@ -0,0 +1,68 @@
+import { Close } from "@navikt/ds-icons";
+import cl from "clsx";
+import React, { forwardRef } from "react";
+import { OverridableComponent } from "..";
+
+export interface RemovableChipsProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  children: string;
+  /**
+   * Chip-variants
+   * @default "action"
+   */
+  variant?: "action" | "neutral";
+  /**
+   * Replaces label read for screen-readers
+   * @default "slett filter"
+   */
+  removeLabel?: string;
+  /**
+   * Click callback
+   */
+  onDelete?: () => void;
+}
+
+export interface RemovableChipsType
+  extends OverridableComponent<RemovableChipsProps, HTMLButtonElement> {}
+
+export const RemovableChips: OverridableComponent<
+  RemovableChipsProps,
+  HTMLButtonElement
+> = forwardRef(
+  (
+    {
+      className,
+      children,
+      variant = "action",
+      as: Component = "button",
+      removeLabel = "slett",
+      onDelete,
+      ...rest
+    },
+    ref
+  ) => {
+    return (
+      <Component
+        {...rest}
+        ref={ref}
+        className={cl(
+          "navds-chips__chip navds-chips__removable navds-chips--icon-right",
+          className,
+          `navds-chips__removable--${variant}`
+        )}
+        aria-label={`${children} ${removeLabel}`}
+        onClick={(e) => {
+          onDelete?.();
+          rest?.onClick?.(e);
+        }}
+      >
+        <span className="navds-chips__chip-text">{children}</span>
+        <span className="navds-chips__removable-icon">
+          <Close aria-hidden />
+        </span>
+      </Component>
+    );
+  }
+) as RemovableChipsType;
+
+export default RemovableChips;

package/src/chips/chips.stories.tsx

@@ -0,0 +1,165 @@
+import React, { useState } from "react";
+import { Chips } from ".";
+
+export default {
+  title: "ds-react/Chips",
+  component: Chips,
+  argTypes: {
+    type: {
+      control: {
+        type: "radio",
+        options: ["filter", "removable"],
+      },
+    },
+    size: {
+      control: {
+        type: "radio",
+        options: ["medium", "small"],
+      },
+    },
+  },
+};
+
+const options = ["Norsk", "Dansk", "Svensk", "Tysk", "Spansk"];
+
+export const Default = (props) => {
+  const [selected, setSelected] = useState(["Dansk", "Svensk"]);
+  const [filter, setFilter] = useState(options);
+
+  if (props.type === "filter") {
+    return (
+      <Chips size={props.size ?? "medium"}>
+        {options.map((c) => (
+          <Chips.Filter
+            selected={selected.includes(c)}
+            key={c}
+            onClick={() =>
+              setSelected(
+                selected.includes(c)
+                  ? selected.filter((x) => x !== c)
+                  : [...selected, c]
+              )
+            }
+          >
+            {c}
+          </Chips.Filter>
+        ))}
+      </Chips>
+    );
+  }
+
+  return (
+    <Chips size={props.size ?? "medium"}>
+      {filter.map((c) => (
+        <Chips.Removable
+          key={c}
+          onClick={() => setFilter((x) => x.filter((y) => y !== c))}
+        >
+          {c}
+        </Chips.Removable>
+      ))}
+    </Chips>
+  );
+};
+
+export const Filter = () => {
+  const [selected, setSelected] = useState<number[]>([]);
+  return (
+    <Chips>
+      {options.map((c, y) => (
+        <Chips.Filter
+          selected={selected.includes(y)}
+          onClick={() =>
+            setSelected(
+              selected.includes(y)
+                ? selected.filter((x) => x !== y)
+                : [...selected, y]
+            )
+          }
+          key={y}
+        >
+          {c}
+        </Chips.Filter>
+      ))}
+    </Chips>
+  );
+};
+
+export const Removable = () => {
+  return (
+    <div className="colgap">
+      <Chips>
+        {options.map((c, y) => (
+          <Chips.Removable key={y}>{c}</Chips.Removable>
+        ))}
+      </Chips>
+      <Chips>
+        {options.map((c, y) => (
+          <Chips.Removable variant="neutral" key={y}>
+            {c}
+          </Chips.Removable>
+        ))}
+      </Chips>
+    </div>
+  );
+};
+
+export const Regular = () => {
+  const [selected, setSelected] = useState<number[]>([]);
+  return (
+    <div className="colgap">
+      <Chips>
+        {options.map((c, y) => (
+          <Chips.Removable key={y}>{c}</Chips.Removable>
+        ))}
+      </Chips>
+      <Chips>
+        {options.map((c, y) => (
+          <Chips.Filter
+            selected={selected.includes(y)}
+            onClick={() =>
+              setSelected(
+                selected.includes(y)
+                  ? selected.filter((x) => x !== y)
+                  : [...selected, y]
+              )
+            }
+            key={y}
+          >
+            {c}
+          </Chips.Filter>
+        ))}
+      </Chips>
+    </div>
+  );
+};
+
+export const Small = () => {
+  const [selected, setSelected] = useState<number[]>([]);
+  return (
+    <div className="colgap">
+      <Chips size="small">
+        {options.map((c, y) => (
+          <Chips.Removable key={y}>{c}</Chips.Removable>
+        ))}
+      </Chips>
+      <Chips size="small">
+        {options.map((c, y) => (
+          <Chips.Filter
+            selected={selected.includes(y)}
+            onClick={() =>
+              setSelected(
+                selected.includes(y)
+                  ? selected.filter((x) => x !== y)
+                  : [...selected, y]
+              )
+            }
+            key={y}
+          >
+            {c}
+          </Chips.Filter>
+        ))}
+      </Chips>
+    </div>
+  );
+};

package/src/chips/index.ts

@@ -0,0 +1 @@
+export { default as Chips, ChipsProps } from "./Chips";

package/src/index.ts

@@ -16,6 +16,7 @@ export * from "./panel";
 export * from "./popover";
 export * from "./read-more";
 export * from "./chat";
+export * from "./chips";
 export * from "./stepper";
 export * from "./tag";
 export * from "./toggle-group";

package/src/tag/Tag.tsx

@@ -3,19 +3,31 @@ import cl from "clsx";
 import { BodyShort, Detail } from "..";
 
 export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
-  /**
-   * Tag label
-   */
   children: React.ReactNode;
   /**
-   * Changes background and border color
+   * Changes visual profile of tag
    */
-  variant: "warning" | "error" | "info" | "success";
+  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";
   /**
-   * Changes padding and font-sizes
    * @default "medium"
    */
-  size?: "medium" | "small";
+  size?: "medium" | "small" | "xsmall";
 }
 
 export const Tag = forwardRef<HTMLSpanElement, TagProps>(
@@ -27,7 +39,7 @@ export const Tag = forwardRef<HTMLSpanElement, TagProps>(
         {...rest}
         ref={ref}
         as="span"
-        size={size}
+        size={size === "medium" ? "medium" : "small"}
         className={cl(
           "navds-tag",
           className,

package/src/tag/tag.stories.tsx

@@ -9,17 +9,70 @@ export default {
       defaultValue: "info",
       control: {
         type: "radio",
-        options: ["error", "warning", "info", "success"],
+        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<"error" | "warning" | "info" | "success"> = [
-  "error",
+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"
+> = [
   "warning",
+  "error",
   "info",
   "success",
+  "neutral",
+  "alt1",
+  "alt2",
+  "alt3",
+  "warning-filled",
+  "error-filled",
+  "info-filled",
+  "success-filled",
+  "neutral-filled",
+  "alt1-filled",
+  "alt2-filled",
+  "alt3-filled",
 ];
 
 export const Default = (props) => (
@@ -34,10 +87,34 @@ Default.args = {
 
 export const Small = () => {
   return (
-    <div className="rowgap">
+    <div className="rowgap rowgap-wrap">
       {variants.map((variant, i) => (
         <Tag key={variant} variant={variant} size="small">
-          {new Array(i + 1).fill("Id elit esse")}
+          {variant}
+        </Tag>
+      ))}
+    </div>
+  );
+};
+
+export const xSmall = () => {
+  return (
+    <div className="rowgap rowgap-wrap">
+      {variants.map((variant, i) => (
+        <Tag key={variant} variant={variant} size="xsmall">
+          {variant}
+        </Tag>
+      ))}
+    </div>
+  );
+};
+
+export const Variants = () => {
+  return (
+    <div className="rowgap rowgap-wrap">
+      {variants.map((variant, i) => (
+        <Tag key={variant} variant={variant}>
+          {variant}
         </Tag>
       ))}
     </div>