@navikt/ds-react 4.0.0 → 4.1.0

package/esm/typography/Heading.d.ts

@@ -20,5 +20,19 @@ export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
      */
     spacing?: boolean;
 }
+/**
+ * Part of a set of components for displaying text with consistent typography.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/typography)
+ * @see 🏷️ {@link HeadingProps}
+ * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+ *
+ * @example
+ * ```jsx
+ *     <Heading level="1" size="xlarge">
+ *       Pengestøtte når du er syk
+ *     </Heading>
+ * ```
+ */
 export declare const Heading: OverridableComponent<HeadingProps, HTMLHeadingElement>;
 export default Heading;

package/esm/typography/Heading.js

@@ -11,6 +11,20 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React, { forwardRef } from "react";
 import cl from "clsx";
+/**
+ * Part of a set of components for displaying text with consistent typography.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/typography)
+ * @see 🏷️ {@link HeadingProps}
+ * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+ *
+ * @example
+ * ```jsx
+ *     <Heading level="1" size="xlarge">
+ *       Pengestøtte når du er syk
+ *     </Heading>
+ * ```
+ */
 export const Heading = forwardRef((_a, ref) => {
     var { level = "1", size, spacing = false, className, as } = _a, rest = __rest(_a, ["level", "size", "spacing", "className", "as"]);
     let HeadingTag = as !== null && as !== void 0 ? as : `h${level}`;

package/esm/typography/Heading.js.map

@@ -1 +1 @@
-{"version":3,"file":"Heading.js","sourceRoot":"","sources":["../../src/typography/Heading.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,MAAM,CAAC;AAwBtB,MAAM,CAAC,MAAM,OAAO,GAClB,UAAU,CACR,CAAC,EAA8D,EAAE,GAAG,EAAE,EAAE;QAAvE,EAAE,KAAK,GAAG,GAAG,EAAE,IAAI,EAAE,OAAO,GAAG,KAAK,EAAE,SAAS,EAAE,EAAE,OAAW,EAAN,IAAI,cAA5D,+CAA8D,CAAF;IAC3D,IAAI,UAAU,GAAG,EAAE,aAAF,EAAE,cAAF,EAAE,GAAK,IAAI,KAAK,EAAwB,CAAC;IAE1D,OAAO,CACL,oBAAC,UAAU,oBACL,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,eAAe,EAAE,kBAAkB,IAAI,EAAE,EAAE;YAClE,qBAAqB,EAAE,OAAO;SAC/B,CAAC,IACF,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEJ,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Heading.js","sourceRoot":"","sources":["../../src/typography/Heading.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,MAAM,CAAC;AAwBtB;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,OAAO,GAClB,UAAU,CACR,CAAC,EAA8D,EAAE,GAAG,EAAE,EAAE;QAAvE,EAAE,KAAK,GAAG,GAAG,EAAE,IAAI,EAAE,OAAO,GAAG,KAAK,EAAE,SAAS,EAAE,EAAE,OAAW,EAAN,IAAI,cAA5D,+CAA8D,CAAF;IAC3D,IAAI,UAAU,GAAG,EAAE,aAAF,EAAE,cAAF,EAAE,GAAK,IAAI,KAAK,EAAwB,CAAC;IAE1D,OAAO,CACL,oBAAC,UAAU,oBACL,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,eAAe,EAAE,kBAAkB,IAAI,EAAE,EAAE;YAClE,qBAAqB,EAAE,OAAO;SAC/B,CAAC,IACF,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEJ,eAAe,OAAO,CAAC"}

package/esm/typography/Ingress.d.ts

@@ -10,5 +10,19 @@ export interface IngressProps extends React.HTMLAttributes<HTMLParagraphElement>
      */
     spacing?: boolean;
 }
+/**
+ * Part of a set of components for displaying text with consistent typography.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/typography)
+ * @see 🏷️ {@link IngressProps}
+ * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+ *
+ * @example
+ * ```jsx
+ *     <Ingress level="1" size="xlarge">
+ *       Pengestøtte når du er syk
+ *     </Ingress>
+ * ```
+ */
 export declare const Ingress: OverridableComponent<IngressProps, HTMLParagraphElement>;
 export default Ingress;

package/esm/typography/Ingress.js

@@ -11,6 +11,20 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React, { forwardRef } from "react";
 import cl from "clsx";
+/**
+ * Part of a set of components for displaying text with consistent typography.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/typography)
+ * @see 🏷️ {@link IngressProps}
+ * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+ *
+ * @example
+ * ```jsx
+ *     <Ingress level="1" size="xlarge">
+ *       Pengestøtte når du er syk
+ *     </Ingress>
+ * ```
+ */
 export const Ingress = forwardRef((_a, ref) => {
     var { className, spacing, as: Component = "p" } = _a, rest = __rest(_a, ["className", "spacing", "as"]);
     return (React.createElement(Component, Object.assign({}, rest, { ref: ref, className: cl(className, "navds-ingress", {

package/esm/typography/Ingress.js.map

@@ -1 +1 @@
-{"version":3,"file":"Ingress.js","sourceRoot":"","sources":["../../src/typography/Ingress.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,MAAM,CAAC;AAetB,MAAM,CAAC,MAAM,OAAO,GAClB,UAAU,CAAC,CAAC,EAAoD,EAAE,GAAG,EAAE,EAAE;QAA7D,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,EAAE,SAAS,GAAG,GAAG,OAAW,EAAN,IAAI,cAAlD,8BAAoD,CAAF;IAAY,OAAA,CACxE,oBAAC,SAAS,oBACJ,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,eAAe,EAAE;YACxC,qBAAqB,EAAE,CAAC,CAAC,OAAO;SACjC,CAAC,IACF,CACH,CAAA;CAAA,CAAC,CAAC;AAEL,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Ingress.js","sourceRoot":"","sources":["../../src/typography/Ingress.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,MAAM,CAAC;AAetB;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,OAAO,GAClB,UAAU,CAAC,CAAC,EAAoD,EAAE,GAAG,EAAE,EAAE;QAA7D,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,EAAE,SAAS,GAAG,GAAG,OAAW,EAAN,IAAI,cAAlD,8BAAoD,CAAF;IAAY,OAAA,CACxE,oBAAC,SAAS,oBACJ,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,eAAe,EAAE;YACxC,qBAAqB,EAAE,CAAC,CAAC,OAAO;SACjC,CAAC,IACF,CACH,CAAA;CAAA,CAAC,CAAC;AAEL,eAAe,OAAO,CAAC"}

package/esm/typography/Label.d.ts

@@ -15,5 +15,19 @@ export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement>
      */
     spacing?: boolean;
 }
+/**
+ * Part of a set of components for displaying text with consistent typography.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/typography)
+ * @see 🏷️ {@link LabelProps}
+ * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+ *
+ * @example
+ * ```jsx
+ *     <Label level="1" size="xlarge">
+ *       Pengestøtte når du er syk
+ *     </Label>
+ * ```
+ */
 export declare const Label: OverridableComponent<LabelProps, HTMLLabelElement>;
 export default Label;

package/esm/typography/Label.js

@@ -11,6 +11,20 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React, { forwardRef } from "react";
 import cl from "clsx";
+/**
+ * Part of a set of components for displaying text with consistent typography.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/typography)
+ * @see 🏷️ {@link LabelProps}
+ * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+ *
+ * @example
+ * ```jsx
+ *     <Label level="1" size="xlarge">
+ *       Pengestøtte når du er syk
+ *     </Label>
+ * ```
+ */
 export const Label = forwardRef((_a, ref) => {
     var { className, size = "medium", spacing, as: Component = "label" } = _a, rest = __rest(_a, ["className", "size", "spacing", "as"]);
     return (React.createElement(Component, Object.assign({}, rest, { ref: ref, className: cl(className, "navds-label", {

package/esm/typography/Label.js.map

@@ -1 +1 @@
-{"version":3,"file":"Label.js","sourceRoot":"","sources":["../../src/typography/Label.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,MAAM,CAAC;AAoBtB,MAAM,CAAC,MAAM,KAAK,GAChB,UAAU,CACR,CACE,EAAyE,EACzE,GAAG,EACH,EAAE;QAFF,EAAE,SAAS,EAAE,IAAI,GAAG,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE,SAAS,GAAG,OAAO,OAAW,EAAN,IAAI,cAAvE,sCAAyE,CAAF;IAEpE,OAAA,CACH,oBAAC,SAAS,oBACJ,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,aAAa,EAAE;YACtC,oBAAoB,EAAE,IAAI,KAAK,OAAO;YACtC,qBAAqB,EAAE,CAAC,CAAC,OAAO;SACjC,CAAC,IACF,CACH,CAAA;CAAA,CACF,CAAC;AAEJ,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Label.js","sourceRoot":"","sources":["../../src/typography/Label.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,MAAM,CAAC;AAoBtB;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,KAAK,GAChB,UAAU,CACR,CACE,EAAyE,EACzE,GAAG,EACH,EAAE;QAFF,EAAE,SAAS,EAAE,IAAI,GAAG,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE,SAAS,GAAG,OAAO,OAAW,EAAN,IAAI,cAAvE,sCAAyE,CAAF;IAEpE,OAAA,CACH,oBAAC,SAAS,oBACJ,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,aAAa,EAAE;YACtC,oBAAoB,EAAE,IAAI,KAAK,OAAO;YACtC,qBAAqB,EAAE,CAAC,CAAC,OAAO;SACjC,CAAC,IACF,CACH,CAAA;CAAA,CACF,CAAC;AAEJ,eAAe,KAAK,CAAC"}

package/package.json

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

package/src/accordion/Accordion.tsx

@@ -1,17 +1,32 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import AccordionItem, { AccordionItemType } from "./AccordionItem";
-import AccordionContent, { AccordionContentType } from "./AccordionContent";
-import AccordionHeader, { AccordionHeaderType } from "./AccordionHeader";
+import AccordionItem, { AccordionItemProps } from "./AccordionItem";
+import AccordionContent, { AccordionContentProps } from "./AccordionContent";
+import AccordionHeader, { AccordionHeaderProps } from "./AccordionHeader";
 import { AccordionContext } from "./AccordionContext";
 
 interface AccordionComponent
   extends React.ForwardRefExoticComponent<
     AccordionProps & React.RefAttributes<HTMLDivElement>
   > {
-  Item: AccordionItemType;
-  Header: AccordionHeaderType;
-  Content: AccordionContentType;
+  /**
+   * @see 🏷️ {@link AccordionItemProps}
+   */
+  Item: React.ForwardRefExoticComponent<
+    AccordionItemProps & React.RefAttributes<HTMLDivElement>
+  >;
+  /**
+   * @see 🏷️ {@link AccordionHeaderProps}
+   */
+  Header: React.ForwardRefExoticComponent<
+    AccordionHeaderProps & React.RefAttributes<HTMLButtonElement>
+  >;
+  /**
+   * @see 🏷️ {@link AccordionContentProps}
+   */
+  Content: React.ForwardRefExoticComponent<
+    AccordionContentProps & React.RefAttributes<HTMLDivElement>
+  >;
 }
 
 export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -27,12 +42,37 @@ export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
    * @default "medium"
    */
   size?: "large" | "medium" | "small";
+  /**
+   * Whether to indent content or not
+   * @default true
+   */
+  indent?: boolean;
   /**
    * Instances of Accordion.Item
    */
   children: React.ReactNode;
 }
 
+/**
+ * A component that displays collapsible content sections.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/accordion)
+ * @see 🏷️ {@link AccordionProps}
+ *
+ * @example
+ * ```jsx
+ * <Accordion>
+ *   <Accordion.Item>
+ *     <Accordion.Header>Section 1</Accordion.Header>
+ *     <Accordion.Content>Content 1</Accordion.Content>
+ *   </Accordion.Item>
+ *   <Accordion.Item>
+ *     <Accordion.Header>Section 2</Accordion.Header>
+ *     <Accordion.Content>Content 2</Accordion.Content>
+ *   </Accordion.Item>
+ * </Accordion>
+ * ```
+ */
 export const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
   (
     {
@@ -40,6 +80,7 @@ export const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
       variant = "default",
       headingSize = "small",
       size = "medium",
+      indent = true,
       ...rest
     },
     ref
@@ -57,7 +98,8 @@ export const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
           className={cl(
             "navds-accordion",
             className,
-            `navds-accordion--${size}`
+            `navds-accordion--${size}`,
+            { "navds-accordion--indent": indent }
           )}
           ref={ref}
         />

package/src/accordion/AccordionContent.tsx

@@ -11,11 +11,7 @@ export interface AccordionContentProps
   children: React.ReactNode;
 }
 
-export type AccordionContentType = React.ForwardRefExoticComponent<
-  AccordionContentProps & React.RefAttributes<HTMLDivElement>
->;
-
-const AccordionContent: AccordionContentType = forwardRef(
+const AccordionContent = forwardRef<HTMLDivElement, AccordionContentProps>(
   ({ children, className, ...rest }, ref) => {
     const context = useContext(AccordionItemContext);
 

package/src/accordion/AccordionHeader.tsx

@@ -13,11 +13,7 @@ export interface AccordionHeaderProps
   children: React.ReactNode;
 }
 
-export type AccordionHeaderType = React.ForwardRefExoticComponent<
-  AccordionHeaderProps & React.RefAttributes<HTMLButtonElement>
->;
-
-const AccordionHeader: AccordionHeaderType = forwardRef(
+const AccordionHeader = forwardRef<HTMLButtonElement, AccordionHeaderProps>(
   ({ children, className, onClick, ...rest }, ref) => {
     const itemContext = useContext(AccordionItemContext);
     const accordionContext = useContext(AccordionContext);

package/src/accordion/AccordionItem.tsx

@@ -27,10 +27,6 @@ export interface AccordionItemProps
   defaultOpen?: boolean;
 }
 
-export type AccordionItemType = React.ForwardRefExoticComponent<
-  AccordionItemProps & React.RefAttributes<HTMLDivElement>
->;
-
 export interface AccordionItemContextProps {
   open: boolean;
   toggleOpen: () => void;
@@ -39,7 +35,7 @@ export interface AccordionItemContextProps {
 export const AccordionItemContext =
   createContext<AccordionItemContextProps | null>(null);
 
-const AccordionItem: AccordionItemType = forwardRef(
+const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(
   (
     { children, className, open, defaultOpen = false, onClick, id, ...rest },
     ref

package/src/accordion/accordion.stories.tsx

@@ -114,11 +114,12 @@ export const Default = {
   },
 
   args: {
-    controlled: "false",
+    controlled: false,
     nItems: 2,
     variant: "default",
     headingSize: "medium",
     size: "medium",
+    indent: true,
   },
 };
 
@@ -137,7 +138,7 @@ export const DefaultOpen = {
 
   args: {
     openItems: [1, 2],
-    controlled: "false",
+    controlled: false,
     nItems: 5,
     variant: "neutral",
     headingSize: "large",
@@ -251,6 +252,7 @@ export const WithTable = {
   args: {
     variant: "default",
     headingSize: "large",
+    indent: false,
   },
 };
 

package/src/alert/Alert.tsx

@@ -53,6 +53,15 @@ export interface AlertContextProps {
   size: "medium" | "small";
 }
 
+/**
+ * A component for displaying alerts
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/alert)
+ * @see 🏷️ {@link AlertProps}
+ * @example
+ * ```jsx
+ * <Alert variant="error">Dette er en feilmelding</Alert>
+ * ```
+ */
 export const Alert = forwardRef<HTMLDivElement, AlertProps>(
   (
     {

package/src/button/Button.tsx

@@ -47,6 +47,16 @@ export interface ButtonProps
   iconPosition?: "left" | "right";
 }
 
+/**
+ * A button component
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/button)
+ * @see 🏷️ {@link ButtonProps}
+ * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+ * @example
+ * ```jsx
+ * <Button>Klikk meg</Button>
+ * ```
+ */
 export const Button: OverridableComponent<ButtonProps, HTMLButtonElement> =
   forwardRef(
     (

package/src/chat/Bubble.tsx

@@ -25,11 +25,7 @@ export interface BubbleProps extends HTMLAttributes<HTMLDivElement> {
   toptextPosition?: "left" | "right";
 }
 
-export type BubbleType = React.ForwardRefExoticComponent<
-  BubbleProps & React.RefAttributes<HTMLDivElement>
->;
-
-const Bubble: BubbleType = forwardRef(
+const Bubble = forwardRef<HTMLDivElement, BubbleProps>(
   (
     {
       children,

package/src/chat/Chat.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef, HTMLAttributes } from "react";
 import cl from "clsx";
-import Bubble, { BubbleType } from "./Bubble";
+import Bubble, { BubbleProps } from "./Bubble";
 import { BodyLong, BodyShort } from "../typography";
 
 export interface ChatProps extends HTMLAttributes<HTMLDivElement> {
@@ -44,9 +44,30 @@ interface ChatComponent
   extends React.ForwardRefExoticComponent<
     ChatProps & React.RefAttributes<HTMLDivElement>
   > {
-  Bubble: BubbleType;
+  /**
+   * @see 🏷️ {@link BubbleProps}
+   */
+  Bubble: React.ForwardRefExoticComponent<
+    BubbleProps & React.RefAttributes<HTMLDivElement>
+  >;
 }
 
+/**
+ * A component for displaying chat messages.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/chat)
+ * @see 🏷️ {@link ChatProps}
+ *
+ * @example
+ * ```jsx
+ * <Chat>
+ *   <Chat.Bubble avatar="A" name="Alice">Hello!</Chat.Bubble>
+ * </Chat>
+ * <Chat>
+ *   <Chat.Bubble avatar="B" name="Bob">Hi there!</Chat.Bubble>
+ * </Chat>
+ * ```
+ */
 export const Chat = forwardRef<HTMLDivElement, ChatProps>(
   (
     {

package/src/chips/Chips.tsx

@@ -1,7 +1,8 @@
 import cl from "clsx";
 import React, { forwardRef, HTMLAttributes } from "react";
-import ToggleChips, { ToggleChipsType } from "./Toggle";
-import RemovableChips, { RemovableChipsType } from "./Removable";
+import ToggleChips, { ToggleChipsProps } from "./Toggle";
+import RemovableChips, { RemovableChipsProps } from "./Removable";
+import { OverridableComponent } from "../util/OverridableComponent";
 
 export interface ChipsProps extends HTMLAttributes<HTMLUListElement> {
   children: React.ReactNode;
@@ -16,10 +17,47 @@ interface ChipsComponent
   extends React.ForwardRefExoticComponent<
     ChipsProps & React.RefAttributes<HTMLUListElement>
   > {
-  Toggle: ToggleChipsType;
-  Removable: RemovableChipsType;
+  /**
+   * Toggle between selected-states.
+   * @see 🏷️ {@link ToggleChipsProps}
+   * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+   */
+  Toggle: OverridableComponent<ToggleChipsProps, HTMLButtonElement>;
+  /**
+   * Remove filter or the likes on click
+   * @see 🏷️ {@link RemovableChipsProps}
+   * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+   */
+  Removable: OverridableComponent<RemovableChipsProps, HTMLButtonElement>;
 }
 
+/**
+ * A component that displays a list of items as chips.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/chips)
+ * @see 🏷️ {@link ChipsProps}
+ *
+ * @example
+ * ```jsx
+      <Chips size="small">
+        {options.map((c) => (
+          <Chips.Toggle
+            selected={selected.includes(c)}
+            key={c}
+            onClick={() =>
+              setSelected(
+                selected.includes(c)
+                  ? selected.filter((x) => x !== c)
+                  : [...selected, c]
+              )
+            }
+          >
+            {c}
+          </Chips.Toggle>
+        ))}
+      </Chips>
+ * ```
+ */
 export const Chips: ChipsComponent = forwardRef<HTMLUListElement, ChipsProps>(
   ({ className, size = "medium", children, ...rest }, ref) => {
     return (

package/src/chips/Removable.tsx

@@ -22,9 +22,6 @@ export interface RemovableChipsProps
   onDelete?: () => void;
 }
 
-export interface RemovableChipsType
-  extends OverridableComponent<RemovableChipsProps, HTMLButtonElement> {}
-
 export const RemovableChips: OverridableComponent<
   RemovableChipsProps,
   HTMLButtonElement
@@ -63,6 +60,6 @@ export const RemovableChips: OverridableComponent<
       </Component>
     );
   }
-) as RemovableChipsType;
+);
 
 export default RemovableChips;

package/src/chips/Toggle.tsx

@@ -1,4 +1,3 @@
-import { CheckmarkIcon } from "@navikt/aksel-icons";
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import { OverridableComponent } from "../util/OverridableComponent";
@@ -10,27 +9,64 @@ export interface ToggleChipsProps
    * Toggles aria-pressed and visual-changes
    */
   selected?: boolean;
+  /**
+   * Chip-variants
+   * @default "action"
+   */
+  variant?: "action" | "neutral";
+  /**
+   * Toggles display of checkmark on selected
+   * @default true
+   */
+  checkmark?: boolean;
 }
 
-export interface ToggleChipsType
-  extends OverridableComponent<ToggleChipsProps, HTMLButtonElement> {}
-
-export const ToggleChips: ToggleChipsType = forwardRef(
+export const ToggleChips: OverridableComponent<
+  ToggleChipsProps,
+  HTMLButtonElement
+> = forwardRef(
   (
-    { className, children, selected, as: Component = "button", ...rest },
+    {
+      className,
+      children,
+      selected,
+      variant = "action",
+      checkmark = true,
+      as: Component = "button",
+      ...rest
+    },
     ref
   ) => {
     return (
       <Component
         {...rest}
         ref={ref}
-        className={cl("navds-chips__chip navds-chips__toggle", className, {
-          "navds-chips--icon-left": selected,
-        })}
+        className={cl(
+          "navds-chips__chip navds-chips__toggle",
+          className,
+          `navds-chips__toggle--${variant}`
+        )}
         aria-pressed={selected}
       >
-        {selected && (
-          <CheckmarkIcon aria-hidden className="navds-chips__toggle-icon" />
+        {selected && checkmark && (
+          <svg
+            aria-hidden
+            className="navds-chips__toggle-icon"
+            width="10"
+            height="8"
+            viewBox="0 0 10 8"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            focusable={false}
+            role="img"
+          >
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M9.51894 0.45851C9.81799 0.745107 9.8281 1.21987 9.5415 1.51893L3.7915 7.51893C3.51247 7.81009 3.05315 7.82848 2.75174 7.56056L0.501735 5.56056C0.192148 5.28537 0.164263 4.81132 0.439451 4.50173C0.71464 4.19214 1.18869 4.16426 1.49828 4.43944L3.20835 5.95951L8.45852 0.481072C8.74511 0.182015 9.21988 0.171913 9.51894 0.45851Z"
+              fill="currentColor"
+            />
+          </svg>
         )}
         <span className="navds-chips__chip-text">{children}</span>
       </Component>