@norges-domstoler/dds-components 4.0.2 → 4.1.0

package/dist/components/Pagination/paginationGenerator.js

@@ -0,0 +1,42 @@
+import { toConsumableArray as _toConsumableArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+
+var arrayRange = function arrayRange(start, end) {
+  var length = end - start + 1;
+  return Array.from({
+    length: length
+  }, function (_, idx) {
+    return idx + start;
+  });
+};
+
+function PaginationGenerator(pagesAmount, activePage) {
+  var siblingsCount = 1;
+  var maxPagesShown = 7;
+  var pagesBeforeTruncator = 5;
+  var truncator = 'truncator';
+  var pageRange;
+
+  if (pagesAmount > 4) {
+    var middleStartPage = Math.max(1, activePage < pagesBeforeTruncator || pagesAmount <= maxPagesShown ? 1 : activePage + siblingsCount + 1 >= pagesAmount ? pagesAmount - 4 // - 4 to fit total columns /
+    : activePage > 4 && pagesAmount > maxPagesShown ? activePage - siblingsCount : 1);
+    var middleEndOffset = activePage < pagesBeforeTruncator && pagesAmount > maxPagesShown ? pagesBeforeTruncator : activePage < pagesBeforeTruncator && pagesAmount <= maxPagesShown ? pagesAmount : activePage + siblingsCount + 1 < pagesAmount - 1 ? activePage + siblingsCount : activePage + siblingsCount + 1 === pagesAmount - 1 ? pagesAmount : pagesAmount;
+    var middleEndPage = Math.min(pagesAmount, middleEndOffset);
+    pageRange = arrayRange(middleStartPage, middleEndPage);
+    var truncatedLeft = middleStartPage > 2 && pagesAmount > maxPagesShown;
+    var truncatedRight = pagesAmount - middleEndPage > 1 && pagesAmount > maxPagesShown;
+
+    if (truncatedLeft && truncatedRight) {
+      pageRange = [1, truncator].concat(_toConsumableArray(pageRange), [truncator, pagesAmount]);
+    } else if (truncatedLeft && !truncatedRight) {
+      pageRange = [1, truncator].concat(_toConsumableArray(pageRange));
+    } else if (!truncatedLeft && truncatedRight) {
+      pageRange = [].concat(_toConsumableArray(pageRange), [truncator, pagesAmount]);
+    }
+
+    return _toConsumableArray(pageRange);
+  }
+
+  return arrayRange(1, pagesAmount);
+}
+
+export { PaginationGenerator };

package/dist/components/Popover/Popover.js

@@ -0,0 +1,104 @@
+import { __rest } from 'tslib';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import CloseOutlinedIcon from '@mui/icons-material/CloseOutlined';
+import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
+import { forwardRef, useEffect } from 'react';
+import styled, { css } from 'styled-components';
+import { popoverTokens } from './Popover.tokens.js';
+import { visibilityTransition } from '../../helpers/styling/visibilityTransition.js';
+import { Button } from '../Button/Button.js';
+import { useFloatPosition } from '../../hooks/useFloatPosition.js';
+import { useCombinedRef } from '../../hooks/useCombinedRefs.js';
+import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
+import { Typography } from '../Typography/Typography.js';
+
+var Spacing = ddsBaseTokens.spacing;
+var Wrapper = styled.div.withConfig({
+  displayName: "Popover__Wrapper",
+  componentId: "sc-1fecd7e-0"
+})(["", " box-sizing:border-box;position:absolute;width:fit-content;z-index:20;", " ", ""], function (_ref) {
+  var isOpen = _ref.isOpen;
+  return visibilityTransition(isOpen);
+}, popoverTokens.wrapper.base, function (_ref2) {
+  var sizeProps = _ref2.sizeProps;
+  return sizeProps && css(["", ""], sizeProps);
+});
+var TitleContainer = styled.div.withConfig({
+  displayName: "Popover__TitleContainer",
+  componentId: "sc-1fecd7e-1"
+})(["", ""], popoverTokens.title.base);
+var ContentContainer = styled.div.withConfig({
+  displayName: "Popover__ContentContainer",
+  componentId: "sc-1fecd7e-2"
+})(["", ""], function (_ref3) {
+  var withCloseButton = _ref3.withCloseButton,
+      hasTitle = _ref3.hasTitle;
+  return withCloseButton && !hasTitle && css(["margin-top:", ";"], popoverTokens.content.spaceTopNoTitle);
+});
+var StyledButton = styled(Button).withConfig({
+  displayName: "Popover__StyledButton",
+  componentId: "sc-1fecd7e-3"
+})(["", ""], popoverTokens.button.base);
+var Popover = /*#__PURE__*/forwardRef(function (props, ref) {
+  var title = props.title,
+      _props$isOpen = props.isOpen,
+      isOpen = _props$isOpen === void 0 ? false : _props$isOpen,
+      _props$withCloseButto = props.withCloseButton,
+      withCloseButton = _props$withCloseButto === void 0 ? true : _props$withCloseButto,
+      onCloseButtonClick = props.onCloseButtonClick,
+      onCloseButtonBlur = props.onCloseButtonBlur,
+      anchorElement = props.anchorElement,
+      children = props.children,
+      _props$placement = props.placement,
+      placement = _props$placement === void 0 ? 'bottom' : _props$placement,
+      _props$offset = props.offset,
+      offset = _props$offset === void 0 ? Spacing.SizesDdsSpacingLocalX05NumberPx : _props$offset,
+      id = props.id,
+      className = props.className,
+      _props$htmlProps = props.htmlProps,
+      htmlProps = _props$htmlProps === void 0 ? {} : _props$htmlProps,
+      rest = __rest(props, ["title", "isOpen", "withCloseButton", "onCloseButtonClick", "onCloseButtonBlur", "anchorElement", "children", "placement", "offset", "id", "className", "htmlProps"]);
+
+  var _useFloatPosition = useFloatPosition(null, placement, offset),
+      reference = _useFloatPosition.reference,
+      floating = _useFloatPosition.floating,
+      styles = _useFloatPosition.styles;
+
+  var multiRef = useCombinedRef(ref, floating);
+  useEffect(function () {
+    isOpen && anchorElement ? reference(anchorElement) : reference(null);
+    return function () {
+      return reference(null);
+    };
+  }, [anchorElement, isOpen]);
+  var wrapperProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
+    ref: multiRef,
+    isOpen: isOpen,
+    style: Object.assign(Object.assign({}, htmlProps.style), styles.floating),
+    role: 'dialog'
+  });
+  return jsxs(Wrapper, Object.assign({}, wrapperProps, {
+    children: [title && jsx(TitleContainer, {
+      children: typeof title === 'string' ? jsx(Typography, Object.assign({
+        typographyType: "headingSans02"
+      }, {
+        children: title
+      })) : title
+    }), jsx(ContentContainer, Object.assign({
+      hasTitle: !!title,
+      withCloseButton: withCloseButton
+    }, {
+      children: children
+    })), withCloseButton && jsx(StyledButton, {
+      Icon: CloseOutlinedIcon,
+      appearance: "borderless",
+      purpose: "secondary",
+      size: "small",
+      onClick: onCloseButtonClick,
+      "aria-label": "Lukk",
+      onBlur: onCloseButtonBlur
+    })]
+  }));
+});
+
+export { Popover };

package/dist/components/Popover/Popover.tokens.js

@@ -0,0 +1,38 @@
+import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
+
+var Colors = ddsBaseTokens.colors,
+    BorderRadius = ddsBaseTokens.borderRadius,
+    Spacing = ddsBaseTokens.spacing,
+    OuterShadow = ddsBaseTokens.outerShadow,
+    Border = ddsBaseTokens.border;
+var wrapperBase = {
+  backgroundColor: Colors.DdsColorNeutralsWhite,
+  borderRadius: BorderRadius.RadiiDdsBorderRadius1Radius,
+  padding: "".concat(Spacing.SizesDdsSpacingLocalX075, " ").concat(Spacing.SizesDdsSpacingLocalX1, " ").concat(Spacing.SizesDdsSpacingLocalX15, " ").concat(Spacing.SizesDdsSpacingLocalX1),
+  boxShadow: OuterShadow.DdsShadow3Onlight,
+  border: "".concat(Border.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(Border.BordersDdsBorderStyleLightStroke)
+};
+var buttonBase = {
+  position: 'absolute',
+  top: Spacing.SizesDdsSpacingLocalX025,
+  right: Spacing.SizesDdsSpacingLocalX025
+};
+var titleBase = {
+  marginRight: Spacing.SizesDdsSpacingLocalX2
+};
+var popoverTokens = {
+  wrapper: {
+    base: wrapperBase
+  },
+  button: {
+    base: buttonBase
+  },
+  title: {
+    base: titleBase
+  },
+  content: {
+    spaceTopNoTitle: Spacing.SizesDdsSpacingLocalX2
+  }
+};
+
+export { popoverTokens };

package/dist/components/Popover/PopoverGroup.js

@@ -0,0 +1,85 @@
+import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useEffect, useRef, Children, isValidElement, cloneElement } from 'react';
+import { useOnKeyDown } from '../../hooks/useOnKeyDown.js';
+import { useOnClickOutside } from '../../hooks/useOnClickOutside.js';
+
+var nextUniqueId = 0;
+var PopoverGroup = function PopoverGroup(_ref) {
+  var _ref$isOpen = _ref.isOpen,
+      isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
+      onCloseButtonClick = _ref.onCloseButtonClick,
+      onTriggerClick = _ref.onTriggerClick,
+      children = _ref.children,
+      popoverId = _ref.popoverId;
+
+  var _useState = useState(isOpen),
+      _useState2 = _slicedToArray(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+
+  useEffect(function () {
+    setOpen(isOpen);
+  }, [isOpen]);
+  var uniqueId = nextUniqueId++;
+
+  var _useState3 = useState(popoverId !== null && popoverId !== void 0 ? popoverId : "popover-".concat(uniqueId)),
+      _useState4 = _slicedToArray(_useState3, 1),
+      uniquePopoverId = _useState4[0];
+
+  var handleOnCloseButtonClick = function handleOnCloseButtonClick() {
+    setOpen(false);
+    onCloseButtonClick && onCloseButtonClick();
+  };
+
+  var handleOnTriggerClick = function handleOnTriggerClick() {
+    setOpen(!open);
+    onTriggerClick && onTriggerClick();
+  };
+
+  var buttonRef = useRef(null);
+  var popoverRef = useRef(null);
+
+  var handleBlur = function handleBlur() {
+    setTimeout(function () {
+      var _a;
+
+      (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, 5);
+    setOpen(false);
+  };
+
+  useOnKeyDown(['Esc', 'Escape'], function () {
+    var _a;
+
+    if (open) {
+      setOpen(false);
+      (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+  });
+  useOnClickOutside([popoverRef.current, buttonRef.current], function () {
+    if (open) setOpen(false);
+  });
+  var Children$1 = Children.map(children, function (child, childIndex) {
+    return /*#__PURE__*/isValidElement(child) && (childIndex === 0 ? /*#__PURE__*/cloneElement(child, {
+      'aria-haspopup': 'dialog',
+      'aria-controls': uniquePopoverId,
+      'aria-expanded': open,
+      onClick: handleOnTriggerClick,
+      ref: buttonRef
+    }) : /*#__PURE__*/cloneElement(child, {
+      isOpen: open,
+      'aria-hidden': !open,
+      id: uniquePopoverId,
+      onCloseButtonClick: handleOnCloseButtonClick,
+      onCloseButtonBlur: handleBlur,
+      anchorElement: buttonRef.current,
+      ref: popoverRef
+    }));
+  });
+  return jsx(Fragment, {
+    children: Children$1
+  });
+};
+
+export { PopoverGroup };

package/dist/components/RadioButton/RadioButton.js

@@ -0,0 +1,90 @@
+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 { useRadioButtonGroup } from './RadioButtonGroupContext.js';
+import { Container, Input, CustomRadioButton } from './RadioButton.styles.js';
+import { getBaseHTMLProps, joinClassNames } from '../../types/BaseComponentProps.js';
+import { Typography } from '../Typography/Typography.js';
+
+var nextUniqueId = 0;
+
+var isValueEqualToGroupValueOrFalsy = function isValueEqualToGroupValueOrFalsy(value, group) {
+  if (typeof value !== 'undefined' && value !== null && group) {
+    if (typeof value === 'number') {
+      return value === Number(group === null || group === void 0 ? void 0 : group.value);
+    }
+
+    return value === (group === null || group === void 0 ? void 0 : group.value);
+  }
+
+  return !!value;
+};
+
+var RadioButton = /*#__PURE__*/forwardRef(function (props, ref) {
+  var id = props.id,
+      name = props.name,
+      label = props.label,
+      disabled = props.disabled,
+      readOnly = props.readOnly,
+      error = props.error,
+      checked = props.checked,
+      value = props.value,
+      children = props.children,
+      required = props.required,
+      onChange = props.onChange,
+      ariaDescribedby = props['aria-describedby'],
+      className = props.className,
+      _props$htmlProps = props.htmlProps,
+      htmlProps = _props$htmlProps === void 0 ? {} : _props$htmlProps,
+      rest = __rest(props, ["id", "name", "label", "disabled", "readOnly", "error", "checked", "value", "children", "required", "onChange", 'aria-describedby', "className", "htmlProps"]);
+
+  var htmlPropsClassName = htmlProps.className,
+      style = htmlProps.style,
+      restHtmlProps = __rest(htmlProps, ["className", "style"]);
+
+  var _useState = useState(id !== null && id !== void 0 ? id : "radioButton-".concat(nextUniqueId++)),
+      _useState2 = _slicedToArray(_useState, 1),
+      uniqueId = _useState2[0];
+
+  var radioButtonGroup = useRadioButtonGroup();
+
+  var handleChange = function handleChange(event) {
+    onChange && onChange(event);
+    radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.onChange(event);
+  };
+
+  var describedByIds = [];
+  if (radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.errorMessageId) describedByIds.push(radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.errorMessageId);
+  if (ariaDescribedby) describedByIds.push(ariaDescribedby);
+  var inputProps = Object.assign(Object.assign({}, getBaseHTMLProps(uniqueId, restHtmlProps, rest)), {
+    name: name !== null && name !== void 0 ? name : radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.name,
+    disabled: disabled || readOnly || (radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.disabled) || (radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.readOnly),
+    required: required || (radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.required),
+    checked: typeof checked !== 'undefined' ? checked : isValueEqualToGroupValueOrFalsy(value, radioButtonGroup),
+    onChange: handleChange,
+    value: value,
+    'aria-describedby': describedByIds.length > 0 ? describedByIds.join(' ') : undefined,
+    'aria-invalid': error || (radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.error) ? true : undefined
+  });
+  var containerProps = {
+    error: error || (radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.error),
+    disabled: disabled || (radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.disabled),
+    readOnly: readOnly || (radioButtonGroup === null || radioButtonGroup === void 0 ? void 0 : radioButtonGroup.readOnly),
+    style: style,
+    className: joinClassNames(className, htmlPropsClassName)
+  };
+  return jsxs(Container, Object.assign({}, containerProps, {
+    htmlFor: uniqueId
+  }, {
+    children: [jsx(Input, Object.assign({
+      ref: ref
+    }, inputProps)), jsx(CustomRadioButton, {}), jsx(Typography, Object.assign({
+      as: "span"
+    }, {
+      children: children !== null && children !== void 0 ? children : label
+    }))]
+  }));
+});
+
+export { RadioButton };

package/dist/components/RadioButton/RadioButton.styles.js

@@ -0,0 +1,34 @@
+import styled, { css } from 'styled-components';
+import { radioButtonTokens } from './RadioButton.tokens.js';
+import { hideInput } from '../../helpers/styling/hideInput.js';
+import { focusVisibleTransitionValue } from '../../helpers/styling/focusVisible.js';
+
+var CustomRadioButton = styled.span.withConfig({
+  displayName: "RadioButtonstyles__CustomRadioButton",
+  componentId: "sc-iwypha-0"
+})(["position:absolute;box-sizing:border-box;border-radius:50%;vertical-align:middle;", " left:", ";&:after{content:'';position:absolute;display:none;}"], radioButtonTokens.radioButton.base, radioButtonTokens.radioButton.spaceLeft);
+var Input = styled.input.attrs(function (_ref) {
+  var _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'radio' : _ref$type;
+  return {
+    type: type
+  };
+}).withConfig({
+  displayName: "RadioButtonstyles__Input",
+  componentId: "sc-iwypha-1"
+})(["", ""], hideInput);
+var Container = styled.label.withConfig({
+  displayName: "RadioButtonstyles__Container",
+  componentId: "sc-iwypha-2"
+})(["position:relative;display:block;cursor:pointer;user-select:none;width:fit-content;display:flex;align-items:center;", " input:checked ~ ", ":after{display:block;}input ~ ", "{transition:box-shadow 0.2s,background-color 0.2s,border 0.2s;}input:checked ~ ", "{", "}&:hover input:enabled ~ ", "{", "}&:hover input:checked:enabled ~ ", "{", "}&:focus-within{", " transition:", ";}", " ", " ", " ", ":after{border-radius:50%;", "}"], radioButtonTokens.container.base, CustomRadioButton, CustomRadioButton, CustomRadioButton, radioButtonTokens.radioButton.checked.base, CustomRadioButton, radioButtonTokens.radioButton.hover.base, CustomRadioButton, radioButtonTokens.radioButton.checked.hover.base, radioButtonTokens.container.focus.base, focusVisibleTransitionValue, function (_ref2) {
+  var error = _ref2.error;
+  return error && css(["input ~ ", "{", "}&:hover input:enabled ~ ", "{", "}"], CustomRadioButton, radioButtonTokens.radioButton.danger.base, CustomRadioButton, radioButtonTokens.radioButton.danger.hover.base);
+}, function (_ref3) {
+  var disabled = _ref3.disabled;
+  return disabled && css(["cursor:not-allowed;input ~ ", "{", "}input:checked ~ ", "{", "}"], CustomRadioButton, radioButtonTokens.radioButton.disabled.base, CustomRadioButton, radioButtonTokens.radioButton.checked.disabled.base);
+}, function (_ref4) {
+  var readOnly = _ref4.readOnly;
+  return readOnly && css(["cursor:default;input ~ ", "{", "}input:checked ~ ", "{", "}"], CustomRadioButton, radioButtonTokens.radioButton.readOnly.base, CustomRadioButton, radioButtonTokens.radioButton.checked.readOnly.base);
+}, CustomRadioButton, radioButtonTokens.checkmark.base);
+
+export { Container, CustomRadioButton, Input };

package/dist/components/RadioButton/RadioButton.tokens.js

@@ -0,0 +1,97 @@
+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;
+var radioButtonBase = {
+  border: '1px solid',
+  borderColor: Colors.DdsColorNeutralsGray5,
+  backgroundColor: Colors.DdsColorNeutralsWhite,
+  height: FontPackages.supportingStyle_inputtext_02.numbers.fontSizeNumber,
+  width: FontPackages.supportingStyle_inputtext_02.numbers.fontSizeNumber
+};
+var radioButtonHoverBase = Object.assign({}, hoverInputfield);
+var radioButtonDisabledBase = {
+  borderColor: Colors.DdsColorNeutralsGray5,
+  color: Colors.DdsColorNeutralsGray6
+};
+var radioButtonReadOnlyBase = {
+  backgroundColor: 'transparent'
+};
+var radioButtonDangerBase = Object.assign({}, dangerInputfield);
+var radioButtonDangerHoverBase = Object.assign({}, hoverDangerInputfield);
+var radioButtonCheckedBase = {
+  backgroundColor: Colors.DdsColorInteractiveBase,
+  borderColor: Colors.DdsColorInteractiveBase
+};
+var radioButtonCheckedHoverBase = {
+  backgroundColor: Colors.DdsColorInteractiveDark,
+  borderColor: Colors.DdsColorInteractiveDark,
+  boxShadow: "inset 0 0 0 1px  ".concat(Colors.DdsColorInteractiveDark)
+};
+var radioButtonCheckedDisabledBase = {
+  borderColor: Colors.DdsColorNeutralsGray6,
+  backgroundColor: Colors.DdsColorNeutralsGray6
+};
+var radioButtonCheckedReadOnlyBase = {
+  borderColor: Colors.DdsColorNeutralsGray6,
+  backgroundColor: Colors.DdsColorNeutralsGray6
+};
+var checkmarkBase = {
+  backgroundColor: Colors.DdsColorNeutralsWhite,
+  height: Spacing.SizesDdsSpacingLocalX05,
+  width: Spacing.SizesDdsSpacingLocalX05,
+  left: "calc(50% - ".concat(Spacing.SizesDdsSpacingLocalX05NumberPx / 2, "px)"),
+  top: "calc(50% - ".concat(Spacing.SizesDdsSpacingLocalX05NumberPx / 2, "px)")
+};
+var containerBase = {
+  padding: "0 ".concat(Spacing.SizesDdsSpacingLocalX025, " 0 ").concat(20 + Spacing.SizesDdsSpacingLocalX075NumberPx, "px")
+};
+var focusBase = Object.assign({}, focusVisible);
+var radioButtonTokens = {
+  radioButton: {
+    base: radioButtonBase,
+    spaceLeft: Spacing.SizesDdsSpacingLocalX025,
+    hover: {
+      base: radioButtonHoverBase
+    },
+    disabled: {
+      base: radioButtonDisabledBase
+    },
+    readOnly: {
+      base: radioButtonReadOnlyBase
+    },
+    checked: {
+      base: radioButtonCheckedBase,
+      hover: {
+        base: radioButtonCheckedHoverBase
+      },
+      disabled: {
+        base: radioButtonCheckedDisabledBase
+      },
+      readOnly: {
+        base: radioButtonCheckedReadOnlyBase
+      }
+    },
+    danger: {
+      base: radioButtonDangerBase,
+      hover: {
+        base: radioButtonDangerHoverBase
+      }
+    }
+  },
+  checkmark: {
+    base: checkmarkBase
+  },
+  container: {
+    base: containerBase,
+    focus: {
+      base: focusBase
+    }
+  }
+};
+
+export { radioButtonTokens };

package/dist/components/RadioButton/RadioButtonGroup.js

@@ -0,0 +1,108 @@
+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 { radioButtonGroupTokens } from './RadioButtonGroup.tokens.js';
+import { RadioButtonGroupContext } from './RadioButtonGroupContext.js';
+import { combineHandlers } from '../../utils/combineHandlers.js';
+import { RequiredMarker } from '../../helpers/RequiredMarker/RequiredMarker.js';
+import { InputMessage } from '../InputMessage/InputMessage.js';
+import { Typography } from '../Typography/Typography.js';
+import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
+
+var Container = styled.div.withConfig({
+  displayName: "RadioButtonGroup__Container",
+  componentId: "sc-1xsll60-0"
+})(["display:flex;flex-direction:column;", ""], radioButtonGroupTokens.container.base);
+var GroupContainer = styled.div.withConfig({
+  displayName: "RadioButtonGroup__GroupContainer",
+  componentId: "sc-1xsll60-1"
+})(["display:flex;", ""], function (_ref) {
+  var direction = _ref.direction;
+  return css(["flex-direction:", ";", ""], direction, radioButtonGroupTokens.groupContainer.direction[direction].base);
+});
+var Label = styled(Typography).withConfig({
+  displayName: "RadioButtonGroup__Label",
+  componentId: "sc-1xsll60-2"
+})(["padding-left:", ";"], radioButtonGroupTokens.label.spaceLeft);
+var nextUniqueGroupId = 0;
+var RadioButtonGroup = function RadioButtonGroup(_a) {
+  var name = _a.name,
+      label = _a.label,
+      groupId = _a.groupId,
+      errorMessage = _a.errorMessage,
+      tip = _a.tip,
+      disabled = _a.disabled,
+      readOnly = _a.readOnly,
+      _a$direction = _a.direction,
+      direction = _a$direction === void 0 ? 'row' : _a$direction,
+      value = _a.value,
+      children = _a.children,
+      required = _a.required,
+      onChange = _a.onChange,
+      id = _a.id,
+      className = _a.className,
+      htmlProps = _a.htmlProps,
+      rest = __rest(_a, ["name", "label", "groupId", "errorMessage", "tip", "disabled", "readOnly", "direction", "value", "children", "required", "onChange", "id", "className", "htmlProps"]);
+
+  var _useState = useState(value),
+      _useState2 = _slicedToArray(_useState, 2),
+      groupValue = _useState2[0],
+      setGroupValue = _useState2[1];
+
+  var _useState3 = useState(groupId !== null && groupId !== void 0 ? groupId : "radioButtonGroup-".concat(nextUniqueGroupId++)),
+      _useState4 = _slicedToArray(_useState3, 1),
+      uniqueGroupId = _useState4[0];
+
+  var handleChange = combineHandlers(function (e) {
+    return setGroupValue(e.target.value);
+  }, function (e) {
+    return onChange && onChange(e, e.target.value);
+  });
+  var hasErrorMessage = !!errorMessage;
+  var hasTip = !!tip;
+  var tipId = hasTip ? "".concat(uniqueGroupId, "-tip") : undefined;
+  var errorMessageId = hasErrorMessage ? "".concat(uniqueGroupId, "-errorMessage") : undefined;
+  var contextProps = {
+    name: name,
+    disabled: disabled,
+    error: hasErrorMessage,
+    errorMessageId: errorMessageId,
+    required: required,
+    readOnly: readOnly,
+    value: groupValue,
+    onChange: handleChange
+  };
+  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, {})]
+    })), hasTip && jsx(InputMessage, {
+      message: tip,
+      messageType: "tip",
+      id: tipId
+    }), jsx(RadioButtonGroupContext.Provider, Object.assign({
+      value: Object.assign({}, contextProps)
+    }, {
+      children: jsx(GroupContainer, Object.assign({
+        role: "radiogroup",
+        direction: direction,
+        "aria-labelledby": uniqueGroupId,
+        "aria-describedby": tipId,
+        "aria-errormessage": errorMessageId
+      }, {
+        children: children
+      }))
+    })), hasErrorMessage && jsx(InputMessage, {
+      message: errorMessage,
+      messageType: "error",
+      id: errorMessageId
+    })]
+  }));
+};
+
+export { RadioButtonGroup };

package/dist/components/RadioButton/RadioButtonGroup.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 radioButtonGroupTokens = {
+  label: {
+    spaceLeft: Spacing.SizesDdsSpacingLocalX025
+  },
+  container: {
+    base: containerBase
+  },
+  groupContainer: {
+    direction: {
+      row: {
+        base: groupContainerRowBase
+      },
+      column: {
+        base: groupContainerColumnBase
+      }
+    }
+  }
+};
+
+export { radioButtonGroupTokens };

package/dist/components/RadioButton/RadioButtonGroupContext.js

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