@dep-dio/dio-designsystem 0.2.0 → 0.4.0

package/README.md

@@ -1,3 +1,140 @@
 # @dep-dio/dio-designsystem
 
-Documentation: [repository README](../../README.md#using-dep-diodio-designsystem)
+DIO design system built on [Designsystemet](https://designsystemet.no).
+
+Storybook and repository docs: [dio-designsystemet README](../../README.md).
+
+## Install
+
+```bash
+npm install @dep-dio/dio-designsystem
+```
+
+Peer dependencies for Vite sprite icons (optional):
+
+```bash
+npm install -D vite vite-plugin-svg-icons
+```
+
+## Usage
+
+### Styles
+
+Same stylesheet, two entry points (same idea as `@digdir/designsystemet-css`):
+
+```ts
+import "@dep-dio/dio-designsystem/styles"
+```
+
+```css
+@import "@dep-dio/dio-designsystem/styles.css";
+```
+
+### Web components
+
+```ts
+import "@dep-dio/dio-designsystem/web"
+```
+
+Registers Designsystemet web components and DIO custom elements.
+
+### React components
+
+```ts
+import { Button } from "@dep-dio/dio-designsystem/react"
+```
+
+Use React components when the consuming application is built with React. For server-rendered HTML, CMS templates (for example Optimizely) and other stacks, use plain HTML markup with styles and web components instead.
+
+### Nav icons (Aksel)
+
+```ts
+import { StarIcon } from "@dep-dio/dio-designsystem/icons"
+```
+
+### Vite SVG sprite
+
+```ts
+// vite.config.ts
+import { createDioSvgIconsPlugin } from "@dep-dio/dio-designsystem/vite-icons-plugin"
+
+export default defineConfig({
+    plugins: [createDioSvgIconsPlugin()],
+})
+```
+
+```ts
+import "@dep-dio/dio-designsystem/svg-icons-register"
+```
+
+```html
+<svg width="24" height="24" aria-hidden="true">
+    <use href="#dio-chevron-right" />
+</svg>
+```
+
+### SCSS utils
+
+```scss
+@use "@dep-dio/dio-designsystem/scss-utils" as *;
+
+.my-link {
+    @include dio-text-small;
+}
+```
+
+## Publishing
+
+`@dep-dio/dio-designsystem` is published to [npm](https://www.npmjs.com/package/@dep-dio/dio-designsystem) as a public scoped package. Storybook (`@design/storybook`) is private and ignored by Changesets.
+
+Versions follow [Semantic Versioning](https://semver.org/):
+
+- **patch** — bug fixes, internal refactors, non-breaking style tweaks
+- **minor** — new components, new exports, backward-compatible features
+- **major** — breaking API, class name, or markup changes for consumers
+
+Changelog entries land in [`CHANGELOG.md`](./CHANGELOG.md) when the version is bumped.
+
+### 1. Add a changeset (every PR that should release)
+
+Releases use [Changesets](https://github.com/changesets/changesets). On the feature branch:
+
+```bash
+npx changeset
+```
+
+1. Choose **@dep-dio/dio-designsystem**
+2. Pick **patch**, **minor**, or **major**
+3. Write the release note: a plain **summary** line first, then optional bullet **details**
+
+The changelog prefixes the summary with the commit hash (`- abc1234: …`). Do not start the summary with `-`, or the first line looks mangled. Prefer:
+
+```markdown
+Typography, theme colors, SCSS utils, and new icons
+
+- Explicit DIO font-size overrides (small `1–4`, medium `1–5`)
+- `./mixins` export replaced by `./scss-utils`
+```
+
+Edit the generated `.changeset/*.md` if the interactive prompt only captured a single line. Commit it with the code change, then merge the PR to `main`.
+
+### 2. Release via GitHub Actions
+
+Publishing is done only through the [Release workflow](https://github.com/dss-web/dio-designsystemet/actions/workflows/release.yml) ([changesets/action](https://github.com/changesets/action)). It is **manual**: open that page → **Run workflow**.
+
+Each run does **one** of these (never both):
+
+| State on `main`                                         | What the workflow does                                                                                       |
+| ------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
+| Pending `.changeset/*.md` files                         | Opens or updates a **“chore: version packages”** PR (bumps version + changelog, removes consumed changesets) |
+| No pending changesets, but a new version is unpublished | Builds and publishes that version to npm                                                                     |
+
+**Release steps:**
+
+1. Merge feature PRs that include changeset files
+2. Run **Release** → review and merge the version PR
+3. Run **Release** again → publishes to npm
+
+You always need both workflow runs: version first, publish second.
+
+**Repo setup (once):** add an `NPM_TOKEN` secret (npm automation token with publish rights for `@dep-dio/dio-designsystem`). The action uses the default `GITHUB_TOKEN` for the version PR.

package/designsystemet.config.json

@@ -0,0 +1,56 @@
+{
+    "$schema": "node_modules/@digdir/designsystemet/dist/config.schema.json",
+    "clean": true,
+    "outDir": "./design-tokens",
+    "themes": {
+        "theme": {
+            "colors": {
+                "primary": "#3867C8",
+                "accent1": "#11846b",
+                "regjeringsbla": "#002E5E",
+                "neutral": "#333333"
+            },
+            "overrides": {
+                "colors": {
+                    "primary": {
+                        "base-hover": {
+                            "light": "#CD4658"
+                        },
+                        "base-active": {
+                            "light": "#BC3345"
+                        },
+                        "text-subtle": {
+                            "light": "#3867C8"
+                        }
+                    },
+                    "accent1": {
+                        "base-active": {
+                            "light": "#BC3345"
+                        },
+                        "base-hover": {
+                            "light": "#CD4658"
+                        }
+                    },
+                    "neutral": {
+                        "surface-default": {
+                            "light": "#EDEDED"
+                        },
+                        "base-active": {
+                            "light": "#BC3345"
+                        },
+                        "base-hover": {
+                            "light": "#CD4658"
+                        },
+                        "text-default": {
+                            "light": "#333333"
+                        },
+                        "text-subtle": {
+                            "light": "#333333"
+                        }
+                    }
+                }
+            },
+            "borderRadius": 0
+        }
+    }
+}

package/dist/assets/icons/floppydisk.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 3.25C3.58579 3.25 3.25 3.58579 3.25 4V20C3.25 20.4142 3.58579 20.75 4 20.75H20C20.4142 20.75 20.75 20.4142 20.75 20V6C20.75 5.80109 20.671 5.61032 20.5303 5.46967L18.5303 3.46967C18.3897 3.32902 18.1989 3.25 18 3.25H4ZM19.25 6.31066L17.6893 4.75H16.75V7C16.75 7.41421 16.4142 7.75 16 7.75H8C7.58579 7.75 7.25 7.41421 7.25 7V4.75H4.75V19.25H6.25V11C6.25 10.5858 6.58579 10.25 7 10.25H17C17.4142 10.25 17.75 10.5858 17.75 11V19.25H19.25V6.31066ZM16.25 19.25H7.75V11.75H16.25V19.25ZM15.25 4.75V6.25H8.75V4.75H15.25ZM9.25 14C9.25 13.5858 9.58579 13.25 10 13.25H14C14.4142 13.25 14.75 13.5858 14.75 14C14.75 14.4142 14.4142 14.75 14 14.75H10C9.58579 14.75 9.25 14.4142 9.25 14ZM9.25 17C9.25 16.5858 9.58579 16.25 10 16.25H13C13.4142 16.25 13.75 16.5858 13.75 17C13.75 17.4142 13.4142 17.75 13 17.75H10C9.58579 17.75 9.25 17.4142 9.25 17Z" />
+</svg>

package/dist/assets/icons/menu-hamburger.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.75 6C2.75 5.58579 3.08579 5.25 3.5 5.25H20.5C20.9142 5.25 21.25 5.58579 21.25 6C21.25 6.41421 20.9142 6.75 20.5 6.75H3.5C3.08579 6.75 2.75 6.41421 2.75 6ZM2.75 12C2.75 11.5858 3.08579 11.25 3.5 11.25H20.5C20.9142 11.25 21.25 11.5858 21.25 12C21.25 12.4142 20.9142 12.75 20.5 12.75H3.5C3.08579 12.75 2.75 12.4142 2.75 12ZM3.5 17.25C3.08579 17.25 2.75 17.5858 2.75 18C2.75 18.4142 3.08579 18.75 3.5 18.75H20.5C20.9142 18.75 21.25 18.4142 21.25 18C21.25 17.5858 20.9142 17.25 20.5 17.25H3.5Z"/>
+</svg>

package/dist/assets/icons/pencil.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.6381 4.41742C18.3693 3.13949 16.3036 3.13578 15.0302 4.40915L5.65182 13.7876C5.56169 13.8777 5.49602 13.9893 5.461 14.1118L4.04679 19.0616C3.97205 19.3232 4.04482 19.6047 4.23693 19.7973C4.42905 19.9899 4.7104 20.0634 4.97215 19.9893L9.91261 18.5912C10.0359 18.5563 10.1481 18.4904 10.2387 18.3999L19.6298 9.00875C20.8967 7.74183 20.9004 5.68889 19.6381 4.41742ZM16.0909 5.46981C16.777 4.78372 17.89 4.78571 18.5736 5.47427C19.2538 6.15934 19.2518 7.26547 18.5692 7.94809L18.3397 8.17752L15.8615 5.69924L16.0909 5.46981ZM14.8008 6.7599L6.8499 14.7108L5.85885 18.1795L9.31619 17.2011L17.2791 9.23818L14.8008 6.7599Z" />
+</svg>

package/dist/assets/icons/social-facebook.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+  <path transform="matrix(1 0 0 -1 0 960)" d="M591.744-64h-213.248c-17.707 0-32 14.293-32 32v458.453h-95.915c-17.707 0-32 14.293-32 32v170.581c0 17.707 14.293 32 32 32h95.957v59.691c-0.043 56.107 16.64 239.275 231.125 239.275h184.661c17.707 0 32-14.293 32-32v-170.581c0-17.707-14.293-32-32-32h-127.957c-6.272-0.555-11.307-6.699-10.795-11.733l0.085-52.651h149.76c9.045 0 17.707-3.84 23.765-10.581 6.059-6.699 9.003-15.701 8.107-24.704l-17.493-170.624c-1.707-16.299-15.445-28.715-31.829-28.715h-132.181v-458.411c-0.043-17.707-14.379-32-32.043-32zM410.496 0h149.205v458.453c0 17.707 14.293 32 32 32h135.296l10.923 106.581h-146.261c-17.707 0-32 14.293-32 32v81.451c-3.925 37.76 26.069 74.453 66.987 78.549 1.067 0.085 6.613 0.384 7.637 0.384h95.957v106.581h-152.661c-145.451 0-167.168-109.824-167.168-175.275v-91.691c0-17.707-14.293-32-32-32h-95.829v-106.581h95.957c17.707 0 32-14.293 32-32v-458.453z"/>
+</svg>

package/dist/assets/icons/social-flickr.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+  <path transform="matrix(1 0 0 -1 0 960)" d="M783.36 207.36c-132.693 0-240.64 107.947-240.64 240.64s107.947 240.64 240.64 240.64 240.64-107.947 240.64-240.64-107.947-240.64-240.64-240.64zM783.36 624.64c-97.365 0-176.64-79.232-176.64-176.64s79.232-176.64 176.64-176.64 176.64 79.232 176.64 176.64-79.232 176.64-176.64 176.64zM240.64 207.36c-132.693 0-240.64 107.947-240.64 240.64s107.947 240.64 240.64 240.64 240.64-107.947 240.64-240.64-107.947-240.64-240.64-240.64zM240.64 624.64c-97.408 0-176.64-79.232-176.64-176.64s79.232-176.64 176.64-176.64 176.64 79.232 176.64 176.64-79.275 176.64-176.64 176.64z"/>
+</svg>

package/dist/assets/icons/social-instagram.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+  <path transform="matrix(1 0 0 -1 0 960)" d="M783.36-64h-542.72c-132.693 0-240.64 107.989-240.64 240.64v542.72c0 132.693 107.947 240.64 240.64 240.64h542.72c132.693 0 240.64-107.947 240.64-240.64v-542.72c0-132.651-107.947-240.64-240.64-240.64zM240.64 896c-97.408 0-176.64-79.232-176.64-176.64v-542.72c0-97.408 79.232-176.64 176.64-176.64h542.72c97.365 0 176.64 79.232 176.64 176.64v542.72c0 97.408-79.232 176.64-176.64 176.64h-542.72zM512 266.667c-100.011 0-181.333 81.323-181.333 181.333s81.323 181.333 181.333 181.333c100.011 0 181.333-81.323 181.333-181.333 0-99.968-81.323-181.333-181.333-181.333zM512 565.333c-64.683 0-117.333-52.608-117.333-117.333 0-64.683 52.608-117.333 117.333-117.333s117.333 52.608 117.333 117.333c0 64.725-52.651 117.333-117.333 117.333zM682.667 74.667h-341.333c-111.787 0-202.667 90.923-202.667 202.667v341.333c0 111.787 90.88 202.667 202.667 202.667h341.333c111.787 0 202.667-90.88 202.667-202.667v-341.333c0-111.744-90.88-202.667-202.667-202.667zM341.333 757.333c-76.459 0-138.667-62.165-138.667-138.667v-341.333c0-76.459 62.208-138.667 138.624-138.667h341.376c76.459 0 138.624 62.208 138.624 138.667v341.333c0 76.459-62.208 138.667-138.624 138.667h-341.333zM709.76 688c-23.552 0-42.667-19.115-42.667-42.667s19.115-42.667 42.667-42.667c23.552 0 42.667 19.115 42.667 42.667s-19.115 42.667-42.667 42.667z"/>
+</svg>

package/dist/assets/icons/social-linkedin.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+  <path transform="matrix(1 0 0 -1 0 960)" d="M992-37.12h-229.035c-17.707 0-32 14.293-32 32v309.205c0.085 16-6.016 30.891-17.152 42.155-10.24 10.325-23.595 16.427-37.973 17.408-1.323-0.171-2.731-0.299-4.139-0.299-32.683 0-59.264-26.581-59.264-59.264v-309.205c0-17.707-14.293-32-32-32h-217.899c-17.707 0-32 14.293-32 32v594.048c0 17.707 14.293 32 32 32h217.899c17.707 0 32-14.293 32-32v-7.168c45.781 25.131 97.408 38.955 150.144 39.637 161.408 0 261.419-123.563 261.419-322.432v-304.043c0-17.749-14.293-32.043-32-32.043zM794.965 26.88h165.035v272.043c0 164.267-71.808 258.432-197.035 258.432-58.923-0.768-116.565-22.315-161.835-60.672-9.515-7.979-22.869-9.813-34.176-4.608-11.307 5.248-18.517 16.555-18.517 29.013v35.84h-153.899v-530.048h153.899v277.205c0 66.005 52.139 120.021 117.376 123.136 1.92 0.341 3.883 0.512 5.888 0.512 33.493-0.171 64.427-13.099 87.552-36.48 23.168-23.424 35.84-54.4 35.669-87.339v-277.035zM671.701 395.733v0zM241.408-37.12h-207.275c-17.707 0-32 14.293-32 32v594.048c0 17.707 14.293 32 32 32h207.275c17.707 0 32-14.293 32-32v-594.048c0-17.707-14.293-32-32-32zM66.133 26.88h143.275v530.048h-143.275v-530.048zM138.624 655.872c-76.416 0-138.624 62.208-138.624 138.624s62.208 138.624 138.624 138.624c73.301-0.597 133.291-58.368 137.515-130.432 0.768-2.645 1.109-5.376 1.109-8.192 0-76.416-62.165-138.624-138.624-138.624zM138.368 869.12c-40.917 0-74.368-33.451-74.368-74.624s33.451-74.624 74.624-74.624c39.040 0 71.168 30.123 74.368 68.352-0.427 2.048-0.64 4.139-0.64 6.272 0.043 40.832-33.152 74.325-73.984 74.624z"/>
+</svg>

package/dist/assets/icons/social-x.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <path d="M12.6 0.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867 -5.07 -4.425 5.07H0.316l5.733 -6.57L0 0.75h5.063l3.495 4.633L12.601 0.75Zm-0.86 13.028h1.36L4.323 2.145H2.865z" stroke-width="1"></path>
+</svg>

package/dist/assets/icons/upload.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.96967 9.03033C7.26256 9.32322 7.73744 9.32322 8.03033 9.03033L11.25 5.81066V14.5C11.25 14.9142 11.5858 15.25 12 15.25C12.4142 15.25 12.75 14.9142 12.75 14.5V5.81066L15.9697 9.03033C16.2626 9.32322 16.7374 9.32322 17.0303 9.03033C17.3232 8.73744 17.3232 8.26256 17.0303 7.96967L12.5303 3.46967C12.2374 3.17678 11.7626 3.17678 11.4697 3.46967L6.96967 7.96967C6.67678 8.26256 6.67678 8.73744 6.96967 9.03033ZM4.75 15.5C4.75 15.0858 4.41421 14.75 4 14.75C3.58579 14.75 3.25 15.0858 3.25 15.5V19C3.25 19.9665 4.0335 20.75 5 20.75H19C19.9665 20.75 20.75 19.9665 20.75 19V15.5C20.75 15.0858 20.4142 14.75 20 14.75C19.5858 14.75 19.25 15.0858 19.25 15.5V19C19.25 19.1381 19.1381 19.25 19 19.25H5C4.86193 19.25 4.75 19.1381 4.75 19V15.5Z" />
+</svg>

package/dist/components/Alert/Alert.d.ts

@@ -0,0 +1,8 @@
+import { type AlertProps as DsAlertProps } from "@digdir/designsystemet-react";
+import type { SeverityColors } from "../../theme-colors";
+export interface AlertProps extends DsAlertProps {
+    color?: SeverityColors;
+    title?: string;
+    description?: string;
+}
+export declare function Alert({ className, color, title, description, children, ...props }: AlertProps): import("react").JSX.Element;

package/dist/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,18 @@
+import { type BreadcrumbsProps as DsBreadcrumbsProps } from "@digdir/designsystemet-react";
+export interface BreadcrumbItem {
+    href?: string;
+    label: string;
+    isCurrent?: boolean;
+}
+export interface BreadcrumbsProps extends DsBreadcrumbsProps {
+    items?: BreadcrumbItem[];
+}
+export declare function Breadcrumbs({ items, className, children, "aria-label": ariaLabel, ...props }: BreadcrumbsProps): import("react").JSX.Element;
+export declare namespace Breadcrumbs {
+    var Item: import("react").ForwardRefExoticComponent<import("@digdir/designsystemet-react").BreadcrumbsItemProps & import("react").RefAttributes<HTMLLIElement>>;
+    var Link: import("react").ForwardRefExoticComponent<Omit<import("@digdir/designsystemet-react").DefaultProps & import("react").AnchorHTMLAttributes<HTMLAnchorElement>, "asChild" | "children"> & {
+        children: import("react").ReactNode;
+        asChild?: boolean;
+    } & import("react").RefAttributes<HTMLAnchorElement>>;
+    var List: import("react").ForwardRefExoticComponent<import("@digdir/designsystemet-react").BreadcrumbsListProps & import("react").RefAttributes<HTMLOListElement>>;
+}

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,12 @@
+import { type ButtonProps as DsButtonProps } from "@digdir/designsystemet-react";
+import type { ThemeColor } from "../../theme-colors";
+export interface ButtonProps extends Omit<DsButtonProps, "data-color" | "loading" | "disabled" | "aria-label"> {
+    color?: ThemeColor;
+    iconLeft?: string;
+    iconRight?: string;
+    ariaLabel?: string;
+    isLoading?: DsButtonProps["loading"];
+    isDisabled?: boolean;
+    size?: "sm" | "md" | "lg";
+}
+export declare function Button({ className, color, iconLeft, iconRight, children, ariaLabel, isLoading, isDisabled, size, ...props }: ButtonProps): import("react").JSX.Element;

package/dist/components/Button/ButtonClose.d.ts

@@ -0,0 +1,8 @@
+import { type ButtonProps as DsButtonProps } from "@digdir/designsystemet-react";
+import type { MouseEventHandler } from "react";
+export type ButtonCloseProps = Omit<DsButtonProps, "icon" | "children" | "aria-label"> & {
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    ariaLabel?: string;
+    commandFor?: string;
+};
+export declare function ButtonClose({ className, onClick, ariaLabel, title, id, commandFor, variant, ...props }: ButtonCloseProps): import("react").JSX.Element;

package/dist/components/Button/ButtonLink.d.ts

@@ -0,0 +1,10 @@
+import { type LinkProps as DsLinkProps } from "@digdir/designsystemet-react";
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+export type ButtonLinkProps = Omit<DsLinkProps, "href" | "children" | "onClick" | "aria-label" | "asChild"> & {
+    children?: ReactNode;
+    iconLeft?: string;
+    iconRight?: string;
+    onClick?: ButtonHTMLAttributes<HTMLButtonElement>["onClick"];
+    isDisabled?: boolean;
+};
+export declare function ButtonLink({ className, children, iconLeft, iconRight, onClick, isDisabled, ...props }: ButtonLinkProps): import("react").JSX.Element;

package/dist/components/Card/Card.d.ts

@@ -0,0 +1,20 @@
+import { type CardProps as DsCardProps } from "@digdir/designsystemet-react";
+import type { ReactNode } from "react";
+import type { Color } from "../../theme-colors";
+export type CardVariant = "default" | "tinted";
+export type CardProps = Omit<DsCardProps, "children"> & {
+    title?: string;
+    href?: string;
+    description?: string;
+    children?: ReactNode;
+    color?: Color;
+    variant?: CardVariant;
+    headingLevel?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+    hasBlocks?: boolean;
+};
+export declare function Card({ title, href, description, color, variant, children, className, headingLevel, hasBlocks, ...props }: CardProps): import("react").JSX.Element;
+export declare namespace Card {
+    var Block: import("react").ForwardRefExoticComponent<{
+        asChild?: boolean;
+    } & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+}

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,17 @@
+import { type CheckboxProps as DsCheckboxProps } from "@digdir/designsystemet-react";
+import { type ChangeEventHandler, type ReactNode } from "react";
+export type CheckboxProps = Omit<DsCheckboxProps, "label" | "disabled" | "checked" | "required" | "defaultChecked" | "error" | "onChange"> & {
+    label?: ReactNode;
+    description?: ReactNode;
+    controlClassName?: string;
+    isValid?: boolean;
+    errorMessage?: string;
+    isValidationVisible?: boolean;
+    isDisabled?: boolean;
+    isChecked?: boolean;
+    isRequired?: boolean;
+    isDefaultChecked?: boolean;
+    requiredMessage?: string;
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+};
+export declare function Checkbox({ className, controlClassName, label, description, isValid, errorMessage, isValidationVisible, isDisabled, isChecked, isRequired, isDefaultChecked, requiredMessage, onChange, ...props }: CheckboxProps): import("react").JSX.Element;

package/dist/components/Checkbox/CheckboxFieldset.d.ts

@@ -0,0 +1,10 @@
+import { type FieldsetProps as DsFieldsetProps } from "@digdir/designsystemet-react";
+import type { CSSProperties, ReactNode } from "react";
+export interface CheckboxFieldsetProps extends DsFieldsetProps {
+    legend: string;
+    description?: ReactNode;
+    children: ReactNode;
+    direction?: "horizontal" | "vertical";
+    style?: CSSProperties;
+}
+export declare function CheckboxFieldset({ legend, description, children, direction, style, className, ...props }: CheckboxFieldsetProps): import("react").JSX.Element;

package/dist/components/ControlGroup/ControlGroup.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+export interface ControlGroupProps {
+    children: ReactNode;
+    className?: string;
+    orientation?: "horizontal" | "vertical";
+}
+export declare function ControlGroup({ children, className, orientation, }: ControlGroupProps): import("react").JSX.Element;

package/dist/components/Details/Details.d.ts

@@ -0,0 +1,18 @@
+import { type DetailsProps as DsDetailsProps } from "@digdir/designsystemet-react";
+import type { ReactNode } from "react";
+export type DetailsProps = Omit<DsDetailsProps, "children" | "open" | "onToggle" | "defaultOpen"> & {
+    children: ReactNode;
+    trigger: string;
+    triggerExtraLabel?: ReactNode;
+    contentClassName?: string;
+    isOpen?: boolean;
+    onToggle?: (event: Event) => void;
+    isDefaultOpen?: boolean;
+};
+export declare function Details({ children, trigger, triggerExtraLabel, contentClassName, className, isOpen, onToggle, isDefaultOpen, ...props }: DetailsProps): import("react").JSX.Element;
+export declare namespace Details {
+    var Summary: import("react").ForwardRefExoticComponent<{
+        children?: ReactNode;
+    } & import("react").HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;
+    var Content: import("react").ForwardRefExoticComponent<import("@digdir/designsystemet-react").DetailsContentProps & import("react").RefAttributes<HTMLDivElement>>;
+}

package/dist/components/Dialog/Dialog.d.ts

@@ -0,0 +1,30 @@
+import { type DialogProps as DsDialogProps } from "@digdir/designsystemet-react";
+import { type ReactNode } from "react";
+export interface DialogProps extends Omit<DsDialogProps, "closeButton" | "open" | "modal"> {
+    children?: ReactNode;
+    title?: string;
+    id: string;
+    isInitialOpen?: boolean;
+    isModal?: boolean;
+    closeButtonText?: string;
+}
+export declare function Dialog({ children, className, placement, isModal, title, id, isInitialOpen, closeButtonText, onClose, ...props }: DialogProps): import("react").JSX.Element;
+export declare namespace Dialog {
+    var Block: import("react").ForwardRefExoticComponent<{
+        asChild?: boolean;
+    } & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    var Trigger: import("react").ForwardRefExoticComponent<Omit<Omit<import("@digdir/designsystemet-react").DefaultProps & Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "command" | "commandFor" | "commandfor">, "asChild" | "command" | "commandFor" | "commandfor" | "icon" | "loading" | "type" | "variant"> & {
+        variant?: "primary" | "secondary" | "tertiary";
+        icon?: boolean;
+        loading?: boolean | import("react").ReactNode;
+        asChild?: boolean;
+        type?: import("react").ButtonHTMLAttributes<HTMLButtonElement>["type"];
+        command?: string;
+        commandfor?: string;
+        commandFor?: string;
+    } & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    var TriggerContext: {
+        (rest: import("@digdir/designsystemet-react").DialogTriggerContextProps): import("react").JSX.Element;
+        displayName: string;
+    };
+}

package/dist/components/Dropdown/Dropdown.d.ts

@@ -0,0 +1,19 @@
+import { type DropdownProps as DsDropdownProps } from "@digdir/designsystemet-react";
+export type DropdownProps = DsDropdownProps;
+declare function DropdownRoot({ className, children, ...props }: DropdownProps): import("react").JSX.Element;
+export declare const Dropdown: typeof DropdownRoot & {
+    TriggerContext: {
+        ({ children, }: import("@digdir/designsystemet-react").DropdownTriggerContextProps): import("react").JSX.Element;
+        displayName: string;
+    };
+    Trigger: import("react").ForwardRefExoticComponent<import("@digdir/designsystemet-react").PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Heading: import("react").ForwardRefExoticComponent<{
+        level?: 1 | 2 | 3 | 4 | 5 | 6;
+        'data-size'?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+        asChild?: boolean;
+    } & import("react").HTMLAttributes<HTMLHeadingElement> & import("react").RefAttributes<HTMLHeadingElement>>;
+    List: import("react").ForwardRefExoticComponent<import("@digdir/designsystemet-react").DropdownListProps & import("react").RefAttributes<HTMLUListElement>>;
+    Item: import("react").ForwardRefExoticComponent<import("@digdir/designsystemet-react").DropdownItemProps & import("react").RefAttributes<HTMLLIElement>>;
+    Button: import("react").ForwardRefExoticComponent<import("@digdir/designsystemet-react").DropdownButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+};
+export {};

package/dist/components/ErrorSummary/ErrorSummary.d.ts

@@ -0,0 +1,27 @@
+import { type ErrorSummaryProps as DsErrorSummaryProps } from "@digdir/designsystemet-react";
+export interface ErrorSummaryItem {
+    label: string;
+    href: string;
+}
+export interface ErrorSummaryProps extends DsErrorSummaryProps {
+    title?: string;
+    errors?: ErrorSummaryItem[];
+}
+export declare function ErrorSummary({ title, errors, className, children, ...props }: ErrorSummaryProps): import("react").JSX.Element;
+export declare namespace ErrorSummary {
+    var Heading: import("react").ForwardRefExoticComponent<{
+        level?: 1 | 2 | 3 | 4 | 5 | 6;
+        'data-size'?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+        asChild?: boolean;
+    } & import("react").HTMLAttributes<HTMLHeadingElement> & import("react").RefAttributes<HTMLHeadingElement>>;
+    var List: import("react").ForwardRefExoticComponent<{
+        asChild?: boolean;
+    } & import("@digdir/designsystemet-react").DefaultProps & Omit<import("react").HTMLAttributes<HTMLUListElement>, "size"> & import("react").RefAttributes<HTMLOListElement>>;
+    var Item: import("react").ForwardRefExoticComponent<{
+        asChild?: boolean;
+    } & import("react").LiHTMLAttributes<HTMLLIElement> & import("react").RefAttributes<HTMLLIElement>>;
+    var Link: import("react").ForwardRefExoticComponent<Omit<import("@digdir/designsystemet-react").DefaultProps & import("react").AnchorHTMLAttributes<HTMLAnchorElement>, "asChild" | "children"> & {
+        children: import("react").ReactNode;
+        asChild?: boolean;
+    } & import("react").RefAttributes<HTMLAnchorElement>>;
+}

package/dist/components/FeedbackBanner/FeedbackBanner.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+import type { SeverityColors } from "../../theme-colors";
+export interface FeedbackBannerProps {
+    color?: SeverityColors;
+    className?: string;
+    children?: ReactNode;
+    closeLabel?: string;
+}
+export declare function FeedbackBanner({ color, className, children, closeLabel, }: FeedbackBannerProps): import("react").JSX.Element;

package/dist/components/Form/Form.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from "react";
+export interface FormProps {
+    className?: string;
+    children: ReactNode;
+}
+export declare function Form({ className, children }: FormProps): import("react").JSX.Element;

package/dist/components/Label/Label.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export declare const DEFAULT_REQUIRED_MESSAGE = "M\u00E5 fylles ut";
+export interface LabelProps extends HTMLAttributes<HTMLSpanElement> {
+    isRequired?: boolean;
+    isInvalid?: boolean;
+    requiredMessage?: string;
+    children: ReactNode;
+}
+export declare function Label({ className, children, isRequired, isInvalid, requiredMessage, ...props }: LabelProps): import("react").JSX.Element;

package/dist/components/LinkList/LinkList.d.ts

@@ -0,0 +1,11 @@
+export interface LinkListItem {
+    href: string;
+    label: string;
+    target?: string;
+    rel?: string;
+}
+export interface LinkListProps {
+    links?: LinkListItem[];
+    className?: string;
+}
+export declare function LinkList({ links, className }: LinkListProps): import("react").JSX.Element;

package/dist/components/NavigationalLink/NavigationalLink.d.ts

@@ -0,0 +1,8 @@
+import { type LinkProps as DsLinkProps } from "@digdir/designsystemet-react";
+import type { ReactNode } from "react";
+export type NavigationalLinkProps = Omit<DsLinkProps, "children"> & {
+    children?: ReactNode;
+    iconLeft?: string;
+    iconRight?: string;
+};
+export declare function NavigationalLink({ children, className, iconLeft, iconRight, ...props }: NavigationalLinkProps): import("react").JSX.Element;

package/dist/components/Pagination/Pagination.d.ts

@@ -0,0 +1,15 @@
+import { type PaginationProps as DsPaginationProps } from "@digdir/designsystemet-react";
+export type PaginationProps = DsPaginationProps;
+declare function PaginationRoot({ className, children, ...props }: PaginationProps): import("react").JSX.Element;
+export declare const Pagination: typeof PaginationRoot & {
+    List: import("react").ForwardRefExoticComponent<{
+        asChild?: boolean;
+    } & Omit<import("react").HTMLAttributes<HTMLUListElement>, "size"> & import("react").RefAttributes<HTMLUListElement>>;
+    Item: import("react").ForwardRefExoticComponent<{
+        asChild?: boolean;
+    } & Omit<import("react").HTMLAttributes<HTMLLIElement>, "size"> & import("react").RefAttributes<HTMLLIElement>>;
+    Button: import("react").ForwardRefExoticComponent<{
+        'aria-current'?: import("react").AriaAttributes["aria-current"];
+    } & Omit<import("@digdir/designsystemet-react").ButtonProps, "icon" | "loading"> & import("react").RefAttributes<HTMLButtonElement>>;
+};
+export {};

package/dist/components/Radio/Radio.d.ts

@@ -0,0 +1,9 @@
+import { type RadioProps as DsRadioProps } from "@digdir/designsystemet-react";
+import type { ChangeEventHandler } from "react";
+export type RadioProps = Omit<DsRadioProps, "disabled" | "checked" | "required" | "defaultChecked" | "error" | "onChange"> & {
+    isDisabled?: boolean;
+    isChecked?: boolean;
+    isDefaultChecked?: boolean;
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+};
+export declare function Radio({ className, isDisabled, isChecked, isDefaultChecked, onChange, ...props }: RadioProps): import("react").JSX.Element;

package/dist/components/Radio/RadioFieldset.d.ts

@@ -0,0 +1,10 @@
+import { type FieldsetProps as DsFieldsetProps } from "@digdir/designsystemet-react";
+import type { CSSProperties, ReactNode } from "react";
+export interface RadioFieldsetProps extends DsFieldsetProps {
+    legend: string;
+    description?: ReactNode;
+    children: ReactNode;
+    direction?: "horizontal" | "vertical";
+    style?: CSSProperties;
+}
+export declare function RadioFieldset({ legend, description, children, direction, style, className, ...props }: RadioFieldsetProps): import("react").JSX.Element;

package/dist/components/Select/Select.d.ts

@@ -0,0 +1,25 @@
+import { type SelectProps as DsSelectProps } from "@digdir/designsystemet-react";
+import type { ChangeEventHandler, ReactNode } from "react";
+export interface SelectProps extends Omit<DsSelectProps, "required" | "disabled" | "onChange"> {
+    controlClassName?: string;
+    label?: ReactNode;
+    description?: ReactNode;
+    selectedValue?: string;
+    isValid?: boolean;
+    errorMessage?: string;
+    isValidationVisible?: boolean;
+    isRequired?: boolean;
+    isDisabled?: boolean;
+    requiredMessage?: string;
+    onChange?: ChangeEventHandler<HTMLSelectElement>;
+}
+declare function SelectRoot({ className, controlClassName, label, description, id, isRequired, isDisabled, selectedValue, value, onChange, isValid, errorMessage, isValidationVisible, requiredMessage, children, ...props }: SelectProps): import("react").JSX.Element;
+export declare const Select: typeof SelectRoot & {
+    Option: import("react").ForwardRefExoticComponent<{
+        asChild?: boolean;
+    } & import("react").OptionHTMLAttributes<HTMLOptionElement> & import("react").RefAttributes<HTMLOptionElement>>;
+    Optgroup: import("react").ForwardRefExoticComponent<{
+        asChild?: boolean;
+    } & import("react").OptgroupHTMLAttributes<HTMLOptGroupElement> & import("react").RefAttributes<HTMLOptGroupElement>>;
+};
+export {};

package/dist/components/Spinner/Spinner.d.ts

@@ -0,0 +1,8 @@
+import { type SpinnerProps as DsSpinnerProps } from "@digdir/designsystemet-react";
+export interface SpinnerProps extends Omit<DsSpinnerProps, "data-size" | "aria-label"> {
+    size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+    textBefore?: string;
+    textAfter?: string;
+    ariaLabel?: string;
+}
+export declare function Spinner({ size, textBefore, textAfter, ariaLabel, className, ...props }: SpinnerProps): import("react").JSX.Element;

package/dist/components/SvgIcon/SvgIcon.d.ts

@@ -0,0 +1,10 @@
+import type { CSSProperties } from "react";
+export interface SvgIconProps {
+    name: string;
+    width?: number;
+    height?: number;
+    className?: string;
+    label?: string;
+    style?: CSSProperties;
+}
+export declare function SvgIcon({ name, width, height, className, label, style }: SvgIconProps): import("react").JSX.Element;

package/dist/components/Switch/Switch.d.ts

@@ -0,0 +1,9 @@
+import { type SwitchProps as DsSwitchProps } from "@digdir/designsystemet-react";
+import type { ChangeEventHandler } from "react";
+export type SwitchProps = Omit<DsSwitchProps, "disabled" | "checked" | "required" | "defaultChecked" | "onChange"> & {
+    isDisabled?: boolean;
+    isChecked?: boolean;
+    isDefaultChecked?: boolean;
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+};
+export declare function Switch({ className, isDisabled, isChecked, isDefaultChecked, onChange, ...props }: SwitchProps): import("react").JSX.Element;