@norges-domstoler/dds-components 4.0.2 → 4.2.0

package/dist/components/Card/CardAccordion/CardAccordionBody.js

@@ -0,0 +1,73 @@
+import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { __rest } from 'tslib';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useRef, useState, useEffect } from 'react';
+import styled, { css } from 'styled-components';
+import { cardAccordionBodyTokens } from './CardAccordionBody.tokens.js';
+import { getBaseHTMLProps } from '../../../types/BaseComponentProps.js';
+
+var expandingAnimation = css(["@media (prefers-reduced-motion:no-preference){transition:padding 0.2s,visibility 0.3s,max-height 0.2s cubic-bezier(0.4,0,0.2,1);}"]);
+var Body = styled.div.withConfig({
+  displayName: "CardAccordionBody__Body",
+  componentId: "sc-igsnpx-0"
+})(["@media (prefers-reduced-motion:no-preference){", "}", " ", " ", ""], expandingAnimation, cardAccordionBodyTokens.base, function (_ref) {
+  var paddingTop = _ref.paddingTop;
+  return paddingTop && css(["padding-top:", ";"], paddingTop);
+}, function (_ref2) {
+  var isExpanded = _ref2.isExpanded;
+  return !isExpanded && css(["padding-top:0;padding-bottom:0;"]);
+});
+var BodyContainer = styled.div.withConfig({
+  displayName: "CardAccordionBody__BodyContainer",
+  componentId: "sc-igsnpx-1"
+})(["", " overflow:hidden;visibility:", ";max-height:", "px;"], expandingAnimation, function (_ref3) {
+  var isExpanded = _ref3.isExpanded;
+  return isExpanded ? 'visible' : 'hidden';
+}, function (_ref4) {
+  var maxHeight = _ref4.maxHeight;
+  return maxHeight ? maxHeight : 0;
+});
+var CardAccordionBody = /*#__PURE__*/forwardRef(function (props, ref) {
+  var children = props.children,
+      isExpanded = props.isExpanded,
+      headerId = props.headerId,
+      id = props.id,
+      className = props.className,
+      htmlProps = props.htmlProps,
+      rest = __rest(props, ["children", "isExpanded", "headerId", "id", "className", "htmlProps"]);
+
+  var bodyRef = useRef(null);
+
+  var _useState = useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      maxHeight = _useState2[0],
+      setMaxHeight = _useState2[1];
+
+  useEffect(function () {
+    if (!isExpanded) {
+      setMaxHeight(0);
+    } else if (bodyRef && bodyRef.current) {
+      setMaxHeight(bodyRef.current.scrollHeight);
+    }
+  }, [isExpanded]);
+  var bodyProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
+    ref: ref,
+    isExpanded: isExpanded,
+    role: 'region'
+  });
+  var bodyContainerProps = {
+    ref: bodyRef,
+    maxHeight: maxHeight,
+    isExpanded: isExpanded
+  };
+  return jsx(Body, Object.assign({}, bodyProps, {
+    "aria-labelledby": headerId,
+    "aria-hidden": !isExpanded
+  }, {
+    children: jsxs(BodyContainer, Object.assign({}, bodyContainerProps, {
+      children: [" ", children, " "]
+    }))
+  }));
+});
+
+export { CardAccordionBody };

package/dist/components/Card/CardAccordion/CardAccordionBody.tokens.js

@@ -0,0 +1,12 @@
+import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
+
+var Spacing = ddsBaseTokens.spacing,
+    FontPackages = ddsBaseTokens.fontPackages;
+var base = Object.assign({
+  padding: "".concat(Spacing.SizesDdsSpacingLocalX1, " ").concat(Spacing.SizesDdsSpacingLocalX2NumberPx + Spacing.SizesDdsSpacingLocalX075NumberPx, "px ").concat(Spacing.SizesDdsSpacingLocalX2, " ").concat(Spacing.SizesDdsSpacingLocalX15)
+}, FontPackages.body_sans_03.base);
+var cardAccordionBodyTokens = {
+  base: base
+};
+
+export { cardAccordionBodyTokens };

package/dist/components/Card/CardAccordion/CardAccordionHeader.js

@@ -0,0 +1,65 @@
+import { __rest } from 'tslib';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { cardAccordionHeaderTokens } from './CardAccordionHeader.tokens.js';
+import { AnimatedChevronUpDown } from '../../../helpers/Chevron/AnimatedChevronUpDown.js';
+import { removeButtonStyling } from '../../../helpers/styling/removeButtonStyling.js';
+import { getBaseHTMLProps } from '../../../types/BaseComponentProps.js';
+
+var ContentWrapper = styled.div.withConfig({
+  displayName: "CardAccordionHeader__ContentWrapper",
+  componentId: "sc-1qs6bkj-0"
+})(["text-align:left;"]);
+var HeaderContainer = styled.div.withConfig({
+  displayName: "CardAccordionHeader__HeaderContainer",
+  componentId: "sc-1qs6bkj-1"
+})(["display:flex;justify-content:space-between;align-items:center;@media (prefers-reduced-motion:no-preference){transition:box-shadow 0.2s;}", ""], cardAccordionHeaderTokens.base);
+var HeaderWrapper = styled.button.withConfig({
+  displayName: "CardAccordionHeader__HeaderWrapper",
+  componentId: "sc-1qs6bkj-2"
+})(["position:relative;cursor:pointer;@media (prefers-reduced-motion:no-preference){transition:box-shadow 0.2s;}", " display:block;width:100%;&:hover{", "}&:focus-visible,&.focus-visible{outline:none;", "}"], removeButtonStyling, cardAccordionHeaderTokens.hover.base, cardAccordionHeaderTokens.focus.base);
+var ChevronWrapper = styled.span.withConfig({
+  displayName: "CardAccordionHeader__ChevronWrapper",
+  componentId: "sc-1qs6bkj-3"
+})(["display:flex;align-items:center;justify-content:center;", ""], cardAccordionHeaderTokens.chevronWrapper.base);
+var CardAccordionHeader = /*#__PURE__*/forwardRef(function (props, ref) {
+  var children = props.children,
+      _props$isExpanded = props.isExpanded,
+      isExpanded = _props$isExpanded === void 0 ? false : _props$isExpanded,
+      toggleExpanded = props.toggleExpanded,
+      bodyId = props.bodyId,
+      id = props.id,
+      className = props.className,
+      htmlProps = props.htmlProps,
+      rest = __rest(props, ["children", "isExpanded", "toggleExpanded", "bodyId", "id", "className", "htmlProps"]);
+
+  var handleClick = function handleClick() {
+    if (toggleExpanded) {
+      toggleExpanded();
+    }
+  };
+
+  var headerWrapperProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
+    'aria-expanded': isExpanded,
+    'aria-controls': bodyId,
+    ref: ref,
+    onClick: handleClick
+  });
+  var chevronProps = {
+    isUp: isExpanded,
+    width: cardAccordionHeaderTokens.chevron.width,
+    height: cardAccordionHeaderTokens.chevron.height
+  };
+  return jsx(HeaderWrapper, Object.assign({}, headerWrapperProps, {
+    children: jsxs(HeaderContainer, {
+      children: [jsxs(ContentWrapper, {
+        children: [" ", children, " "]
+      }), jsx(ChevronWrapper, {
+        children: jsx(AnimatedChevronUpDown, Object.assign({}, chevronProps))
+      })]
+    })
+  }));
+});
+
+export { CardAccordionHeader };

package/dist/components/Card/CardAccordion/CardAccordionHeader.tokens.js

@@ -0,0 +1,38 @@
+import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
+
+var Spacing = ddsBaseTokens.spacing,
+    FontPackages = ddsBaseTokens.fontPackages,
+    Border = ddsBaseTokens.border,
+    IconSizes = ddsBaseTokens.iconSizes;
+var base = Object.assign({
+  padding: "".concat(Spacing.SizesDdsSpacingLocalX1, " ").concat(Spacing.SizesDdsSpacingLocalX075, " ").concat(Spacing.SizesDdsSpacingLocalX1, " ").concat(Spacing.SizesDdsSpacingLocalX15)
+}, FontPackages.heading_sans_03.base);
+var focusBase = {
+  boxShadow: "0 0 0 ".concat(Border.BordersDdsBorderFocusCardStrokeWeight, " ").concat(Border.BordersDdsBorderFocusCardStroke)
+};
+var hoverBase = {
+  boxShadow: "0 0 0 ".concat(Border.BordersDdsBorderFocusInputfieldStrokeWeight, " ").concat(Border.BordersDdsBorderFocusInputfieldStroke)
+};
+var chevronWrapperBase = {
+  width: IconSizes.DdsIconsizeMedium,
+  height: IconSizes.DdsIconsizeMedium,
+  marginLeft: Spacing.SizesDdsSpacingLocalX05
+};
+var cardAccordionHeaderTokens = {
+  base: base,
+  focus: {
+    base: focusBase
+  },
+  hover: {
+    base: hoverBase
+  },
+  chevronWrapper: {
+    base: chevronWrapperBase
+  },
+  chevron: {
+    width: IconSizes.DdsIconsizeMedium,
+    height: Spacing.SizesDdsSpacingLocalX05
+  }
+};
+
+export { cardAccordionHeaderTokens };

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 export declare const Checkbox: import("react").ForwardRefExoticComponent<{
-    htmlProps?: Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "aria-describedby" | "name" | "checked" | "onChange"> | undefined;
-} & Pick<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "aria-describedby" | "name" | "checked" | "onChange">, "id" | "className"> & {
+    htmlProps?: Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "aria-describedby" | "name" | "checked" | "defaultChecked" | "value" | "defaultValue" | "onChange" | "onBlur"> | undefined;
+} & Pick<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "aria-describedby" | "name" | "checked" | "defaultChecked" | "value" | "defaultValue" | "onChange" | "onBlur">, "id" | "className"> & {
     label?: string | undefined;
     error?: boolean | undefined;
     disabled?: boolean | undefined;
@@ -11,5 +11,9 @@ export declare const Checkbox: import("react").ForwardRefExoticComponent<{
     'aria-describedby'?: string | undefined;
     name?: string | undefined;
     checked?: boolean | undefined;
+    defaultChecked?: boolean | undefined;
+    value?: string | number | readonly string[] | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
     onChange?: import("react").ChangeEventHandler<HTMLInputElement> | undefined;
+    onBlur?: import("react").FocusEventHandler<HTMLInputElement> | undefined;
 } & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/Checkbox/Checkbox.js

@@ -0,0 +1,68 @@
+import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { __rest } from 'tslib';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useState } from 'react';
+import { Container, Input, CustomCheckbox } from './Checkbox.styles.js';
+import { useCheckboxGroup } from './CheckboxGroupContext.js';
+import { spaceSeparatedIdListGenerator } from '../../utils/idGenerator.js';
+import { joinClassNames, getBaseHTMLProps } from '../../types/BaseComponentProps.js';
+import { Typography } from '../Typography/Typography.js';
+
+var nextUniqueId = 0;
+var Checkbox = /*#__PURE__*/forwardRef(function (props, ref) {
+  var id = props.id,
+      name = props.name,
+      label = props.label,
+      error = props.error,
+      disabled = props.disabled,
+      readOnly = props.readOnly,
+      indeterminate = props.indeterminate,
+      ariaDescribedby = props['aria-describedby'],
+      className = props.className,
+      _props$htmlProps = props.htmlProps,
+      htmlProps = _props$htmlProps === void 0 ? {} : _props$htmlProps,
+      rest = __rest(props, ["id", "name", "label", "error", "disabled", "readOnly", "indeterminate", 'aria-describedby', "className", "htmlProps"]);
+
+  var _useState = useState(id !== null && id !== void 0 ? id : "checkbox-".concat(nextUniqueId++)),
+      _useState2 = _slicedToArray(_useState, 1),
+      uniqueId = _useState2[0];
+
+  var checkboxGroup = useCheckboxGroup();
+
+  var style = htmlProps.style,
+      htmlPropsClassName = htmlProps.className,
+      restHtmlProps = __rest(htmlProps, ["style", "className"]);
+
+  var containerProps = {
+    error: error || (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.error),
+    disabled: disabled,
+    indeterminate: indeterminate,
+    readOnly: readOnly,
+    htmlFor: uniqueId,
+    label: label,
+    className: joinClassNames(className, htmlPropsClassName),
+    style: style
+  };
+  var inputProps = Object.assign(Object.assign({}, getBaseHTMLProps(uniqueId, restHtmlProps, rest)), {
+    ref: ref,
+    name: name,
+    indeterminate: indeterminate,
+    disabled: disabled || readOnly,
+    'aria-describedby': spaceSeparatedIdListGenerator([checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.tipId, checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.errorMessageId, ariaDescribedby]),
+    'aria-invalid': error || (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.error) ? true : undefined,
+    'aria-labelledby': checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.uniqueGroupId,
+    'aria-checked': indeterminate ? 'mixed' : undefined,
+    'aria-readonly': readOnly
+  });
+  return jsxs(Container, Object.assign({}, containerProps, {
+    children: [jsx(Input, Object.assign({}, inputProps, {
+      "data-indeterminate": indeterminate
+    })), jsx(CustomCheckbox, {}), label && jsx(Typography, Object.assign({
+      as: "span"
+    }, {
+      children: label
+    }))]
+  }));
+});
+
+export { Checkbox };

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

@@ -3,17 +3,21 @@ import { CheckboxProps } from '.';
 declare const _default: {
     title: string;
     component: import("react").ForwardRefExoticComponent<{
-        htmlProps?: Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "aria-describedby" | "onChange" | "name" | "checked"> | undefined;
-    } & Pick<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "aria-describedby" | "onChange" | "name" | "checked">, "id" | "className"> & {
+        htmlProps?: Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "defaultChecked" | "defaultValue" | "aria-describedby" | "onBlur" | "onChange" | "name" | "value" | "checked"> | undefined;
+    } & Pick<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "defaultChecked" | "defaultValue" | "aria-describedby" | "onBlur" | "onChange" | "name" | "value" | "checked">, "id" | "className"> & {
         label?: string | undefined;
         error?: boolean | undefined;
         disabled?: boolean | undefined;
         readOnly?: boolean | undefined;
         indeterminate?: boolean | undefined;
     } & {
+        defaultChecked?: boolean | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
         'aria-describedby'?: string | undefined;
+        onBlur?: import("react").FocusEventHandler<HTMLInputElement> | undefined;
         onChange?: import("react").ChangeEventHandler<HTMLInputElement> | undefined;
         name?: string | undefined;
+        value?: string | number | readonly string[] | undefined;
         checked?: boolean | undefined;
     } & import("react").RefAttributes<HTMLInputElement>>;
     argTypes: {

package/dist/components/Checkbox/Checkbox.styles.js

@@ -0,0 +1,45 @@
+import styled, { css } from 'styled-components';
+import { checkboxTokens } from './Checkbox.tokens.js';
+import { hideInput } from '../../helpers/styling/hideInput.js';
+import { focusVisibleTransitionValue } from '../../helpers/styling/focusVisible.js';
+
+var CustomCheckbox = styled.span.withConfig({
+  displayName: "Checkboxstyles__CustomCheckbox",
+  componentId: "sc-17q1ubf-0"
+})(["position:absolute;", " left:", ";box-sizing:border-box;&:after{content:'';position:absolute;display:none;}"], checkboxTokens.checkbox.base, checkboxTokens.checkbox.spaceLeft);
+var Input = styled.input.attrs(function (_ref) {
+  var _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'checkbox' : _ref$type;
+  return {
+    type: type
+  };
+}).withConfig({
+  displayName: "Checkboxstyles__Input",
+  componentId: "sc-17q1ubf-1"
+})(["", ""], hideInput);
+var Container = styled.label.withConfig({
+  displayName: "Checkboxstyles__Container",
+  componentId: "sc-17q1ubf-2"
+})(["position:relative;display:flex;align-items:center;cursor:pointer;user-select:none;width:fit-content;", " ", " input ~ ", "{@media (prefers-reduced-motion:no-preference){transition:box-shadow 0.2s,background-color 0.2s,border 0.2s;}}input:checked ~ ", ":after{display:block;}input:checked ~ ", "{", "}&:hover input:enabled ~ ", "{", "}&:hover input:checked:enabled ~ ", "{", "}&:focus-within{", " @media (prefers-reduced-motion:no-preference){transition:", ";}}", " ", " ", " ", " ", ":after{border:solid ", ";", "}"], checkboxTokens.container.base, function (_ref2) {
+  var label = _ref2.label;
+  return label ? css(["", ""], checkboxTokens.container.withLabel.base) : css(["", ""], checkboxTokens.container.noLabel.base);
+}, CustomCheckbox, CustomCheckbox, CustomCheckbox, checkboxTokens.checkbox.checked.base, CustomCheckbox, checkboxTokens.checkbox.hover.base, CustomCheckbox, checkboxTokens.checkbox.checked.hover.base, checkboxTokens.container.focus.base, focusVisibleTransitionValue, function (_ref3) {
+  var error = _ref3.error;
+  return error && css(["input ~ ", "{", "}&:hover input:enabled ~ ", "{", "}"], CustomCheckbox, checkboxTokens.checkbox.danger.base, CustomCheckbox, checkboxTokens.checkbox.danger.hover.base);
+}, function (_ref4) {
+  var indeterminate = _ref4.indeterminate;
+  return indeterminate && css(["input:enabled ~ ", "{", "}input ~ ", ":after{display:block;}&:hover input:enabled ~ ", "{", "}"], CustomCheckbox, checkboxTokens.checkbox.indeterminate.base, CustomCheckbox, CustomCheckbox, checkboxTokens.checkbox.indeterminate.hover.base);
+}, function (_ref5) {
+  var disabled = _ref5.disabled,
+      indeterminate = _ref5.indeterminate;
+  return disabled && css(["cursor:not-allowed;input ~ ", "{", "}input:checked ~ ", "{", "}", ""], CustomCheckbox, checkboxTokens.checkbox.disabled.base, CustomCheckbox, checkboxTokens.checkbox.checked.disabled.base, indeterminate && css(["input ~ ", "{", "}"], CustomCheckbox, checkboxTokens.checkbox.indeterminate.disabled.base));
+}, function (_ref6) {
+  var readOnly = _ref6.readOnly,
+      indeterminate = _ref6.indeterminate;
+  return readOnly && css(["cursor:default;input ~ ", "{", "}input:checked ~ ", "{", "}", ""], CustomCheckbox, checkboxTokens.checkbox.readOnly.base, CustomCheckbox, checkboxTokens.checkbox.checked.readOnly.base, indeterminate && css(["input ~ ", "{", "}"], CustomCheckbox, checkboxTokens.checkbox.indeterminate.readOnly.base));
+}, CustomCheckbox, checkboxTokens.checkmark.color, function (_ref7) {
+  var indeterminate = _ref7.indeterminate;
+  return indeterminate ? css(["left:25%;top:50%;width:50%;height:1px;", ""], checkboxTokens.checkmark.indeterminate.base) : css(["", ""], checkboxTokens.checkmark.base);
+});
+
+export { Container, CustomCheckbox, Input };

package/dist/components/Checkbox/Checkbox.tokens.js

@@ -0,0 +1,129 @@
+import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
+import { hoverInputfield, hoverDangerInputfield } from '../../helpers/styling/hover.js';
+import { dangerInputfield } from '../../helpers/styling/danger.js';
+import { focusVisible } from '../../helpers/styling/focusVisible.js';
+
+var Colors = ddsBaseTokens.colors,
+    Spacing = ddsBaseTokens.spacing,
+    FontPackages = ddsBaseTokens.fontPackages,
+    BorderRadius = ddsBaseTokens.borderRadius;
+var checkboxBase = {
+  border: '1px solid',
+  backgroundColor: Colors.DdsColorNeutralsWhite,
+  borderColor: Colors.DdsColorNeutralsGray5,
+  borderRadius: BorderRadius.RadiiDdsBorderRadius1Radius,
+  height: FontPackages.supportingStyle_inputtext_02.base.fontSize,
+  width: FontPackages.supportingStyle_inputtext_02.base.fontSize
+};
+var checkboxCheckedBase = {
+  borderColor: Colors.DdsColorInteractiveBase,
+  backgroundColor: Colors.DdsColorInteractiveBase
+};
+var checkboxDisabledBase = {
+  borderColor: Colors.DdsColorNeutralsGray5,
+  color: Colors.DdsColorNeutralsGray6
+};
+var checkboxCheckedDisabledBase = {
+  borderColor: Colors.DdsColorNeutralsGray6,
+  backgroundColor: Colors.DdsColorNeutralsGray6
+};
+var checkboxReadOnlyBase = {
+  backgroundColor: 'transparent'
+};
+var checkboxCheckedReadOnlyBase = {
+  borderColor: Colors.DdsColorNeutralsGray6,
+  backgroundColor: Colors.DdsColorNeutralsGray6
+};
+var checkboxHoverBase = Object.assign({}, hoverInputfield);
+var checkboxCheckedHoverBase = {
+  backgroundColor: Colors.DdsColorInteractiveDark,
+  boxShadow: "inset 0 0 0 1px  ".concat(Colors.DdsColorInteractiveDark),
+  borderColor: Colors.DdsColorInteractiveDark
+};
+var checkboxDangerBase = Object.assign({}, dangerInputfield);
+var checkboxDangerHoverBase = Object.assign({}, hoverDangerInputfield);
+var focusBase = Object.assign({}, focusVisible);
+var checkmarkBase = {
+  borderWidth: '0 1px 1px 0',
+  transform: 'rotate(45deg)',
+  left: '35%',
+  top: '10%',
+  width: '30%',
+  height: '65%'
+};
+var checkmarkIndeterminateBase = {
+  borderWidth: '1px 0 0 0'
+};
+var containerBase = Object.assign({}, FontPackages.body_sans_02.base);
+var containerWithLabelBase = Object.assign(Object.assign({}, FontPackages.body_sans_02.base), {
+  padding: "0 ".concat(Spacing.SizesDdsSpacingLocalX025, " 0 ").concat(FontPackages.supportingStyle_inputtext_02.numbers.fontSizeNumber + Spacing.SizesDdsSpacingLocalX075NumberPx, "px")
+});
+var containerNoLabelBase = {
+  padding: "".concat(Spacing.SizesDdsSpacingLocalX075, " ").concat(Spacing.SizesDdsSpacingLocalX0125, " ").concat(Spacing.SizesDdsSpacingLocalX075, " ").concat(Spacing.SizesDdsSpacingLocalX15)
+};
+var checkboxTokens = {
+  checkbox: {
+    base: checkboxBase,
+    spaceLeft: Spacing.SizesDdsSpacingLocalX025,
+    hover: {
+      base: checkboxHoverBase
+    },
+    disabled: {
+      base: checkboxDisabledBase
+    },
+    readOnly: {
+      base: checkboxReadOnlyBase
+    },
+    checked: {
+      base: checkboxCheckedBase,
+      hover: {
+        base: checkboxCheckedHoverBase
+      },
+      disabled: {
+        base: checkboxCheckedDisabledBase
+      },
+      readOnly: {
+        base: checkboxCheckedReadOnlyBase
+      }
+    },
+    indeterminate: {
+      base: checkboxCheckedBase,
+      hover: {
+        base: checkboxCheckedHoverBase
+      },
+      disabled: {
+        base: checkboxCheckedDisabledBase
+      },
+      readOnly: {
+        base: checkboxCheckedReadOnlyBase
+      }
+    },
+    danger: {
+      base: checkboxDangerBase,
+      hover: {
+        base: checkboxDangerHoverBase
+      }
+    }
+  },
+  checkmark: {
+    base: checkmarkBase,
+    color: Colors.DdsColorNeutralsWhite,
+    indeterminate: {
+      base: checkmarkIndeterminateBase
+    }
+  },
+  container: {
+    base: containerBase,
+    focus: {
+      base: focusBase
+    },
+    withLabel: {
+      base: containerWithLabelBase
+    },
+    noLabel: {
+      base: containerNoLabelBase
+    }
+  }
+};
+
+export { checkboxTokens };

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

@@ -1,6 +1,6 @@
 import { InputHTMLAttributes } from 'react';
 import { BaseComponentProps } from '../../types';
-declare type PickedHTMLAttributes = Pick<InputHTMLAttributes<HTMLInputElement>, 'aria-describedby' | 'name' | 'checked' | 'onChange'>;
+declare type PickedHTMLAttributes = Pick<InputHTMLAttributes<HTMLInputElement>, 'aria-describedby' | 'name' | 'checked' | 'defaultChecked' | 'value' | 'defaultValue' | 'onChange' | 'onBlur'>;
 export declare type CheckboxProps = BaseComponentProps<HTMLInputElement, {
     /** Ledetekst for inputelementet. */
     label?: string;

package/dist/components/Checkbox/CheckboxGroup.js

@@ -0,0 +1,87 @@
+import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { __rest } from 'tslib';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import styled, { css } from 'styled-components';
+import { checkboxGroupTokens } from './CheckboxGroup.tokens.js';
+import { CheckboxGroupContext } from './CheckboxGroupContext.js';
+import { derivativeIdGenerator } from '../../utils/idGenerator.js';
+import { Typography } from '../Typography/Typography.js';
+import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
+import { RequiredMarker } from '../../helpers/RequiredMarker/RequiredMarker.js';
+import { InputMessage } from '../InputMessage/InputMessage.js';
+
+var Container = styled.div.withConfig({
+  displayName: "CheckboxGroup__Container",
+  componentId: "sc-uixbzg-0"
+})(["display:flex;flex-direction:column;", ""], checkboxGroupTokens.container.base);
+var GroupContainer = styled.div.withConfig({
+  displayName: "CheckboxGroup__GroupContainer",
+  componentId: "sc-uixbzg-1"
+})(["display:flex;", ""], function (_ref) {
+  var direction = _ref.direction;
+  return css(["flex-direction:", ";", ""], direction, checkboxGroupTokens.groupContainer.direction[direction].base);
+});
+var Label = styled(Typography).withConfig({
+  displayName: "CheckboxGroup__Label",
+  componentId: "sc-uixbzg-2"
+})(["padding-left:", ";"], checkboxGroupTokens.label.spaceLeft);
+var nextUniqueGroupId = 0;
+var CheckboxGroup = function CheckboxGroup(_a) {
+  var label = _a.label,
+      _a$direction = _a.direction,
+      direction = _a$direction === void 0 ? 'row' : _a$direction,
+      errorMessage = _a.errorMessage,
+      tip = _a.tip,
+      required = _a.required,
+      groupId = _a.groupId,
+      children = _a.children,
+      id = _a.id,
+      className = _a.className,
+      htmlProps = _a.htmlProps,
+      rest = __rest(_a, ["label", "direction", "errorMessage", "tip", "required", "groupId", "children", "id", "className", "htmlProps"]);
+
+  var _useState = useState(groupId !== null && groupId !== void 0 ? groupId : "checkboxGroup-".concat(nextUniqueGroupId++)),
+      _useState2 = _slicedToArray(_useState, 1),
+      uniqueGroupId = _useState2[0];
+
+  var hasErrorMessage = !!errorMessage;
+  var errorMessageId = derivativeIdGenerator(uniqueGroupId, 'errorMessage', errorMessage);
+  var tipId = derivativeIdGenerator(uniqueGroupId, 'tip', tip);
+  var contextProps = {
+    error: hasErrorMessage,
+    errorMessageId: errorMessageId,
+    uniqueGroupId: uniqueGroupId,
+    tipId: tipId
+  };
+  return jsxs(Container, Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest), {
+    children: [jsxs(Label, Object.assign({
+      forwardedAs: "span",
+      typographyType: "supportingStyleLabel01",
+      id: uniqueGroupId
+    }, {
+      children: [label, " ", required && jsx(RequiredMarker, {})]
+    })), tip && jsx(InputMessage, {
+      messageType: "tip",
+      message: tip,
+      id: tipId
+    }), jsx(CheckboxGroupContext.Provider, Object.assign({
+      value: Object.assign({}, contextProps)
+    }, {
+      children: jsx(GroupContainer, Object.assign({
+        role: "group",
+        "aria-labelledby": uniqueGroupId,
+        "aria-describedby": tipId,
+        direction: direction
+      }, {
+        children: children
+      }))
+    })), errorMessage && jsx(InputMessage, {
+      messageType: "error",
+      message: errorMessage,
+      id: errorMessageId
+    })]
+  }));
+};
+
+export { CheckboxGroup };

package/dist/components/Checkbox/CheckboxGroup.tokens.js

@@ -0,0 +1,32 @@
+import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
+
+var Spacing = ddsBaseTokens.spacing;
+var groupContainerRowBase = {
+  gap: Spacing.SizesDdsSpacingLocalX075
+};
+var groupContainerColumnBase = {
+  gap: Spacing.SizesDdsSpacingLocalX05
+};
+var containerBase = {
+  gap: Spacing.SizesDdsSpacingLocalX0125
+};
+var checkboxGroupTokens = {
+  label: {
+    spaceLeft: Spacing.SizesDdsSpacingLocalX025
+  },
+  container: {
+    base: containerBase
+  },
+  groupContainer: {
+    direction: {
+      row: {
+        base: groupContainerRowBase
+      },
+      column: {
+        base: groupContainerColumnBase
+      }
+    }
+  }
+};
+
+export { checkboxGroupTokens };

package/dist/components/Checkbox/CheckboxGroupContext.js

@@ -0,0 +1,8 @@
+import React, { useContext } from 'react';
+
+var CheckboxGroupContext = /*#__PURE__*/React.createContext(null);
+var useCheckboxGroup = function useCheckboxGroup() {
+  return useContext(CheckboxGroupContext);
+};
+
+export { CheckboxGroupContext, useCheckboxGroup };