@norges-domstoler/dds-components 4.0.2 → 4.2.0

package/dist/components/Chip/Chip.js

@@ -0,0 +1,57 @@
+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 styled from 'styled-components';
+import { chipTokens } from './Chip.tokens.js';
+import CloseOutlinedIcon from '@mui/icons-material/CloseOutlined';
+import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
+import { Button } from '../Button/Button.js';
+
+var Container = styled.div.withConfig({
+  displayName: "Chip__Container",
+  componentId: "sc-1l242zs-0"
+})(["", ""], chipTokens.container.base);
+var TextWrapper = styled.span.withConfig({
+  displayName: "Chip__TextWrapper",
+  componentId: "sc-1l242zs-1"
+})(["", ""], chipTokens.text.base);
+var Chip = /*#__PURE__*/forwardRef(function (props, ref) {
+  var text = props.text,
+      onClose = props.onClose,
+      id = props.id,
+      className = props.className,
+      _props$htmlProps = props.htmlProps,
+      htmlProps = _props$htmlProps === void 0 ? {} : _props$htmlProps,
+      rest = __rest(props, ["text", "onClose", "id", "className", "htmlProps"]);
+
+  var ariaLabel = htmlProps['aria-label'],
+      restHTMLprops = __rest(htmlProps, ['aria-label']);
+
+  var _useState = useState(true),
+      _useState2 = _slicedToArray(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
+
+  var onClick = function onClick() {
+    setIsOpen(false);
+    onClose && onClose();
+  };
+
+  return isOpen ? jsxs(Container, Object.assign({}, getBaseHTMLProps(id, className, restHTMLprops, rest), {
+    ref: ref
+  }, {
+    children: [jsx(TextWrapper, {
+      children: text
+    }), jsx(Button, {
+      size: "tiny",
+      Icon: CloseOutlinedIcon,
+      appearance: "borderless",
+      purpose: "secondary",
+      onClick: onClick,
+      "aria-label": ariaLabel || "Fjern ".concat(text ? "chip ".concat(text) : 'chip')
+    })]
+  })) : null;
+});
+
+export { Chip };

package/dist/components/Chip/Chip.tokens.js

@@ -0,0 +1,39 @@
+import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
+
+var colors = ddsBaseTokens.colors,
+    spacing = ddsBaseTokens.spacing,
+    borderRadius = ddsBaseTokens.borderRadius,
+    fontPackages = ddsBaseTokens.fontPackages;
+var containerBase = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: spacing.SizesDdsSpacingLocalX025,
+  padding: "".concat(spacing.SizesDdsSpacingLocalX0125, " ").concat(spacing.SizesDdsSpacingLocalX025),
+  backgroundColor: colors.DdsColorNeutralsGray1,
+  border: "1px solid ".concat(colors.DdsColorNeutralsGray3),
+  borderRadius: borderRadius.RadiiDdsBorderRadius1Radius,
+  color: colors.DdsColorNeutralsGray9,
+  maxWidth: '100%'
+};
+var textBase = Object.assign({
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis'
+}, fontPackages.body_sans_01.base);
+var groupBase = {
+  display: 'flex',
+  gap: spacing.SizesDdsSpacingLocalX075
+};
+var chipTokens = {
+  container: {
+    base: containerBase
+  },
+  group: {
+    base: groupBase
+  },
+  text: {
+    base: textBase
+  }
+};
+
+export { chipTokens };

package/dist/components/Chip/ChipGroup.js

@@ -0,0 +1,29 @@
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, Children } from 'react';
+import styled from 'styled-components';
+import { removeListStyling } from '../../helpers/styling/removeListStyling.js';
+import { chipTokens } from './Chip.tokens.js';
+
+var Group = styled.ul.withConfig({
+  displayName: "ChipGroup__Group",
+  componentId: "sc-evmxhv-0"
+})(["", " ", ""], removeListStyling, chipTokens.group.base);
+var ChipGroup = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var children = _a.children,
+      rest = __rest(_a, ["children"]);
+
+  var childrenArray = Children.toArray(children);
+  var groupChildren = childrenArray.map(function (item, index) {
+    return jsx("li", {
+      children: item
+    }, "chip-".concat(index));
+  });
+  return jsx(Group, Object.assign({}, rest, {
+    ref: ref
+  }, {
+    children: groupChildren
+  }));
+});
+
+export { ChipGroup };

package/dist/components/Datepicker/Datepicker.js

@@ -0,0 +1,91 @@
+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 styled from 'styled-components';
+import { typographyTokens } from '../Typography/Typography.tokens.js';
+import CalendarIcon from '../../assets/svg/calendar_today.svg.js';
+import { datepickerTokens } from './Datepicker.tokens.js';
+import { StatefulInput, OuterInputContainer, InputContainer, Label } from '../../helpers/Input/Input.styles.js';
+import { derivativeIdGenerator, spaceSeparatedIdListGenerator } from '../../utils/idGenerator.js';
+import { RequiredMarker } from '../../helpers/RequiredMarker/RequiredMarker.js';
+import { InputMessage } from '../InputMessage/InputMessage.js';
+
+var getWidth = function getWidth(type) {
+  return type === 'date' ? '205px' : type === 'datetime-local' ? '235px' : '320px';
+};
+
+var StyledInput = styled(StatefulInput).withConfig({
+  displayName: "Datepicker__StyledInput",
+  componentId: "sc-1ijxhje-0"
+})(["::-webkit-calendar-picker-indicator{background-image:url(\"", "\");", " margin-left:0px;padding:0;top:50%;transform:translate(0,-50%);box-sizing:border-box;}::-webkit-calendar-picker-indicator:focus-visible{", "}::-webkit-inner-spin-button{display:none;}@media (prefers-reduced-motion:no-preference){::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field{transition:0.2s;}}::-webkit-datetime-edit-day-field:focus,::-webkit-datetime-edit-month-field:focus,::-webkit-datetime-edit-year-field:focus,::-webkit-datetime-edit-hour-field:focus,::-webkit-datetime-edit-minute-field:focus{", "}"], CalendarIcon, datepickerTokens.calendarIndicator.base, datepickerTokens.calendarIndicator.focus.base, typographyTokens.selection.base);
+var nextUniqueId = 0;
+var Datepicker = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var id = _a.id,
+      _a$type = _a.type,
+      type = _a$type === void 0 ? 'date' : _a$type,
+      required = _a.required,
+      readOnly = _a.readOnly,
+      disabled = _a.disabled,
+      label = _a.label,
+      width = _a.width,
+      errorMessage = _a.errorMessage,
+      tip = _a.tip,
+      style = _a.style,
+      className = _a.className,
+      ariaDescribedby = _a['aria-describedby'],
+      rest = __rest(_a, ["id", "type", "required", "readOnly", "disabled", "label", "width", "errorMessage", "tip", "style", "className", 'aria-describedby']);
+
+  var _useState = useState(id !== null && id !== void 0 ? id : "datepickerInput-".concat(nextUniqueId++)),
+      _useState2 = _slicedToArray(_useState, 1),
+      uniqueId = _useState2[0];
+
+  var componentWidth = width ? width : getWidth(type);
+  var hasLabel = !!label;
+  var labelPresence = hasLabel ? 'hasLabel' : 'noLabel';
+  var hasErrorMessage = !!errorMessage;
+  var errorMessageId = derivativeIdGenerator(uniqueId, 'errorMessage', errorMessage);
+  var tipId = derivativeIdGenerator(uniqueId, 'tip', tip);
+  var inputProps = Object.assign({
+    id: uniqueId,
+    hasLabel: labelPresence,
+    hasErrorMessage: hasErrorMessage,
+    ref: ref,
+    readOnly: readOnly,
+    tabIndex: readOnly ? -1 : 0,
+    required: required,
+    disabled: disabled,
+    type: type,
+    'aria-describedby': spaceSeparatedIdListGenerator([tipId, errorMessageId, ariaDescribedby]),
+    'aria-invalid': hasErrorMessage ? true : undefined
+  }, rest);
+  var outerInputContainerProps = {
+    width: componentWidth,
+    style: style,
+    className: className
+  };
+  var labelProps = {
+    htmlFor: uniqueId,
+    disabled: disabled
+  };
+  return jsxs(OuterInputContainer, Object.assign({}, outerInputContainerProps, {
+    children: [jsxs(InputContainer, {
+      children: [jsx(StyledInput, Object.assign({}, inputProps)), hasLabel && jsxs(Label, Object.assign({}, labelProps, {
+        typographyType: "supportingStyleLabel01",
+        forwardedAs: "label"
+      }, {
+        children: [label, " ", required && jsx(RequiredMarker, {})]
+      }))]
+    }), hasErrorMessage && jsx(InputMessage, {
+      message: errorMessage,
+      id: errorMessageId,
+      messageType: "error"
+    }), tip && !hasErrorMessage && jsx(InputMessage, {
+      message: tip,
+      id: tipId,
+      messageType: "tip"
+    })]
+  }));
+});
+
+export { Datepicker };

package/dist/components/Datepicker/Datepicker.tokens.js

@@ -0,0 +1,25 @@
+import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
+
+var IconSizes = ddsBaseTokens.iconSizes,
+    Spacing = ddsBaseTokens.spacing,
+    Border = ddsBaseTokens.border;
+var calendarIndicatorBase = {
+  height: IconSizes.DdsIconsizeMedium,
+  width: IconSizes.DdsIconsizeMedium,
+  position: 'absolute',
+  right: Spacing.SizesDdsSpacingLocalX075
+};
+var calendarIndicatorFocusBase = {
+  outline: "".concat(Border.BordersDdsBorderFocusInputfieldStroke, " solid ").concat(Border.BordersDdsBorderFocusInputfieldStrokeWeight),
+  outlineOffset: Spacing.SizesDdsSpacingLocalX0125
+};
+var datepickerTokens = {
+  calendarIndicator: {
+    base: calendarIndicatorBase,
+    focus: {
+      base: calendarIndicatorFocusBase
+    }
+  }
+};
+
+export { datepickerTokens };

package/dist/components/DescriptionList/DescriptionList.js

@@ -0,0 +1,34 @@
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { typographyTokens } from '../Typography/Typography.tokens.js';
+import { descriptionListTermTokens } from './DescriptionListTerm.tokens.js';
+import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
+
+var DList = styled.dl.withConfig({
+  displayName: "DescriptionList__DList",
+  componentId: "sc-1ob73hm-0"
+})(["margin:0;*::selection{", "}", " & > dt:first-of-type{margin-top:", ";}& > dd:last-child{margin-bottom:", ";}dd + dt{margin-top:", ";}"], typographyTokens.selection.base, function (_ref) {
+  var appearance = _ref.appearance;
+  return appearance && css(["dt{", "}"], descriptionListTermTokens.appearance[appearance].base);
+}, descriptionListTermTokens.unwrappedTopAndBottomSpace, descriptionListTermTokens.unwrappedTopAndBottomSpace, descriptionListTermTokens.unwrappedBetweenSpace);
+var DescriptionList = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _props$appearance = props.appearance,
+      appearance = _props$appearance === void 0 ? 'bold' : _props$appearance,
+      children = props.children,
+      id = props.id,
+      className = props.className,
+      htmlProps = props.htmlProps,
+      rest = __rest(props, ["appearance", "children", "id", "className", "htmlProps"]);
+
+  var dListProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
+    appearance: appearance,
+    ref: ref
+  });
+  return jsx(DList, Object.assign({}, dListProps, {
+    children: children
+  }));
+});
+
+export { DescriptionList };

package/dist/components/DescriptionList/DescriptionListDesc.js

@@ -0,0 +1,36 @@
+import { __rest } from 'tslib';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { descriptionListDescTokens } from './DescriptionListDesc.tokens.js';
+import { IconWrapper } from '../IconWrapper/IconWrapper.js';
+import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
+
+var DListDesc = styled.dd.withConfig({
+  displayName: "DescriptionListDesc__DListDesc",
+  componentId: "sc-1djcf0s-0"
+})(["", " display:flex;align-items:center;margin-inline-start:0;"], descriptionListDescTokens.base);
+var StyledIconWrapper = styled(IconWrapper).withConfig({
+  displayName: "DescriptionListDesc__StyledIconWrapper",
+  componentId: "sc-1djcf0s-1"
+})(["", ""], descriptionListDescTokens.icon.base);
+var DescriptionListDesc = /*#__PURE__*/forwardRef(function (props, ref) {
+  var children = props.children,
+      Icon = props.Icon,
+      id = props.id,
+      className = props.className,
+      htmlProps = props.htmlProps,
+      rest = __rest(props, ["children", "Icon", "id", "className", "htmlProps"]);
+
+  var dListDescProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
+    children: children,
+    ref: ref
+  });
+  return jsxs(DListDesc, Object.assign({}, dListDescProps, {
+    children: [Icon && jsx(StyledIconWrapper, {
+      Icon: Icon
+    }), " ", children]
+  }));
+});
+
+export { DescriptionListDesc };

package/dist/components/DescriptionList/DescriptionListDesc.tokens.js

@@ -0,0 +1,19 @@
+import { ddsBaseTokens, ddsReferenceTokens } from '@norges-domstoler/dds-design-tokens';
+
+var Spacing = ddsBaseTokens.spacing,
+    FontPackages = ddsBaseTokens.fontPackages;
+var textDefault = ddsReferenceTokens.textDefault;
+var base = Object.assign(Object.assign({}, FontPackages.body_sans_03.base), {
+  color: textDefault.textColor
+});
+var iconBase = {
+  marginRight: Spacing.SizesDdsSpacingLocalX025
+};
+var descriptionListDescTokens = {
+  base: base,
+  icon: {
+    base: iconBase
+  }
+};
+
+export { descriptionListDescTokens };

package/dist/components/DescriptionList/DescriptionListGroup.js

@@ -0,0 +1,33 @@
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { descriptionListGroupTokens } from './DescriptionListGroup.tokens.js';
+import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
+
+var DListGroup = styled.div.withConfig({
+  displayName: "DescriptionListGroup__DListGroup",
+  componentId: "sc-jkdc0o-0"
+})(["", " ", ""], descriptionListGroupTokens.base, function (_ref) {
+  var margin = _ref.margin;
+  return margin && css(["margin:", ";"], margin);
+});
+var DescriptionListGroup = /*#__PURE__*/forwardRef(function (props, ref) {
+  var children = props.children,
+      margin = props.margin,
+      id = props.id,
+      className = props.className,
+      htmlProps = props.htmlProps,
+      rest = __rest(props, ["children", "margin", "id", "className", "htmlProps"]);
+
+  var dListGroupProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
+    children: children,
+    ref: ref,
+    margin: margin
+  });
+  return jsx(DListGroup, Object.assign({}, dListGroupProps, {
+    children: children
+  }));
+});
+
+export { DescriptionListGroup };

package/dist/components/DescriptionList/DescriptionListGroup.tokens.js

@@ -0,0 +1,11 @@
+import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
+
+var Spacing = ddsBaseTokens.spacing;
+var base = {
+  margin: Spacing.SizesDdsSpacingLocalX2
+};
+var descriptionListGroupTokens = {
+  base: base
+};
+
+export { descriptionListGroupTokens };

package/dist/components/DescriptionList/DescriptionListTerm.js

@@ -0,0 +1,22 @@
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+
+var DListTerm = styled.dt.withConfig({
+  displayName: "DescriptionListTerm__DListTerm",
+  componentId: "sc-10w0rzr-0"
+})([""]);
+var DescriptionListTerm = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var children = _a.children,
+      rest = __rest(_a, ["children"]);
+
+  var dListTermProps = Object.assign({
+    ref: ref
+  }, rest);
+  return jsx(DListTerm, Object.assign({}, dListTermProps, {
+    children: children
+  }));
+});
+
+export { DescriptionListTerm };

package/dist/components/DescriptionList/DescriptionListTerm.tokens.js

@@ -0,0 +1,27 @@
+import { ddsBaseTokens, ddsReferenceTokens } from '@norges-domstoler/dds-design-tokens';
+import { typographyTokens } from '../Typography/Typography.tokens.js';
+
+var Spacing = ddsBaseTokens.spacing,
+    FontPackages = ddsBaseTokens.fontPackages,
+    Colors = ddsBaseTokens.colors;
+var textDefault = ddsReferenceTokens.textDefault;
+var boldBase = Object.assign(Object.assign(Object.assign({}, FontPackages.body_sans_03.base), typographyTokens.style.bold.base), {
+  color: textDefault.textColor
+});
+var smallBase = Object.assign(Object.assign({}, FontPackages.body_sans_01.base), {
+  color: Colors.DdsColorNeutralsGray7
+});
+var descriptionListTermTokens = {
+  appearance: {
+    small: {
+      base: smallBase
+    },
+    bold: {
+      base: boldBase
+    }
+  },
+  unwrappedTopAndBottomSpace: Spacing.SizesDdsSpacingLocalX1,
+  unwrappedBetweenSpace: Spacing.SizesDdsSpacingLocalX2
+};
+
+export { descriptionListTermTokens };

package/dist/components/Divider/Divider.js

@@ -0,0 +1,31 @@
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { dividerTokens, dividerColors } from './Divider.tokens.js';
+import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
+
+var DividerLine = styled.hr.withConfig({
+  displayName: "Divider__DividerLine",
+  componentId: "sc-ggdopz-0"
+})(["", " ", ""], dividerTokens.base, function (_ref) {
+  var color = _ref.color;
+  return color && css(["border-color:", ";"], dividerColors[color]);
+});
+var Divider = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _props$color = props.color,
+      color = _props$color === void 0 ? 'primary' : _props$color,
+      id = props.id,
+      className = props.className,
+      htmlProps = props.htmlProps,
+      rest = __rest(props, ["color", "id", "className", "htmlProps"]);
+
+  var lineProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
+    color: color
+  });
+  return jsx(DividerLine, Object.assign({
+    ref: ref
+  }, lineProps));
+});
+
+export { Divider };

package/dist/components/Divider/Divider.tokens.js

@@ -0,0 +1,20 @@
+import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
+
+var Border = ddsBaseTokens.border,
+    Spacing = ddsBaseTokens.spacing;
+var dividerColors = {
+  primary: Border.BordersDdsBorderStyleDarkStroke,
+  primaryLighter: Border.BordersDdsBorderStyleLightStroke
+};
+var base = {
+  border: 0,
+  backgroundColor: 'transparent',
+  borderTop: "".concat(Border.BordersDdsBorderStyleLightStrokeWeight, " solid"),
+  marginTop: Spacing.SizesDdsSpacingLocalX1,
+  marginBottom: Spacing.SizesDdsSpacingLocalX1
+};
+var dividerTokens = {
+  base: base
+};
+
+export { dividerColors, dividerTokens };

package/dist/components/Drawer/Drawer.js

@@ -0,0 +1,121 @@
+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 { createPortal } from 'react-dom';
+import styled, { css } from 'styled-components';
+import { drawerTokens } from './Drawer.tokens.js';
+import CloseOutlinedIcon from '@mui/icons-material/CloseOutlined';
+import { Paper } from '../../helpers/Paper/Paper.js';
+import { useMountTransition } from '../../hooks/useMountTransition.js';
+import { focusVisible } from '../../helpers/styling/focusVisible.js';
+import { scrollbarStyling } from '../../helpers/styling/scrollbarStyling.js';
+import { Button } from '../Button/Button.js';
+import { useFocusTrap } from '../../hooks/useFocusTrap.js';
+import { useCombinedRef } from '../../hooks/useCombinedRefs.js';
+import { useOnKeyDown } from '../../hooks/useOnKeyDown.js';
+import { useOnClickOutside } from '../../hooks/useOnClickOutside.js';
+import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
+import { Typography } from '../Typography/Typography.js';
+
+var Container = styled(Paper).withConfig({
+  displayName: "Drawer__Container",
+  componentId: "sc-i9luw3-0"
+})(["position:fixed;top:0;height:100%;display:flex;flex-direction:column-reverse;justify-content:flex-end;min-width:300px;", " ", " z-index:50;", " @media (prefers-reduced-motion:no-preference){transition:transform 0.5s;}", " &:focus-visible,&.focus-visible{", "}"], function (_ref) {
+  var size = _ref.size;
+  return css(["", ""], drawerTokens.container.size[size].base);
+}, function (_ref2) {
+  var widthProps = _ref2.widthProps;
+  return widthProps && css(["", ""], widthProps);
+}, function (_ref3) {
+  var placement = _ref3.placement,
+      isOpen = _ref3.isOpen;
+  return placement === 'left' ? css(["left:0;transform:", ";"], isOpen ? 'translate(0px)' : 'translateX(-100%)') : placement === 'right' ? css(["right:0;transform:", ";"], isOpen ? 'translate(0px)' : 'translateX(100%)') : '';
+}, drawerTokens.container.base, focusVisible);
+var ContentContainer = styled.div.withConfig({
+  displayName: "Drawer__ContentContainer",
+  componentId: "sc-i9luw3-1"
+})(["display:flex;flex-direction:column;overflow-x:auto;", " ", ""], scrollbarStyling, drawerTokens.contentContainer.base);
+var HeaderContainer = styled.div.withConfig({
+  displayName: "Drawer__HeaderContainer",
+  componentId: "sc-i9luw3-2"
+})([""]);
+var StyledButton = styled(Button).withConfig({
+  displayName: "Drawer__StyledButton",
+  componentId: "sc-i9luw3-3"
+})(["align-self:flex-end;"]);
+var nextUniqueId = 0;
+var Drawer = /*#__PURE__*/forwardRef(function (props, ref) {
+  var children = props.children,
+      onClose = props.onClose,
+      header = props.header,
+      _props$isOpen = props.isOpen,
+      isOpen = _props$isOpen === void 0 ? false : _props$isOpen,
+      _props$placement = props.placement,
+      placement = _props$placement === void 0 ? 'right' : _props$placement,
+      _props$parentElement = props.parentElement,
+      parentElement = _props$parentElement === void 0 ? document.body : _props$parentElement,
+      _props$size = props.size,
+      size = _props$size === void 0 ? 'small' : _props$size,
+      triggerRef = props.triggerRef,
+      id = props.id,
+      className = props.className,
+      htmlProps = props.htmlProps,
+      rest = __rest(props, ["children", "onClose", "header", "isOpen", "placement", "parentElement", "size", "triggerRef", "id", "className", "htmlProps"]);
+
+  var _useState = useState(id !== null && id !== void 0 ? id : "drawer-".concat(nextUniqueId++)),
+      _useState2 = _slicedToArray(_useState, 1),
+      uniqueId = _useState2[0];
+
+  var hasHeader = !!header;
+  var headerId = hasHeader ? "".concat(uniqueId, "-header") : undefined;
+  var drawerRef = useFocusTrap(isOpen);
+  var combinedRef = useCombinedRef(ref, drawerRef);
+  useOnKeyDown(['Esc', 'Escape'], function () {
+    var _a;
+
+    if (isOpen) {
+      triggerRef && ((_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus());
+      onClose && onClose();
+    }
+  });
+  var elements = [drawerRef.current];
+  if (triggerRef) elements.push(triggerRef.current);
+  useOnClickOutside(elements, function () {
+    return isOpen && onClose && onClose();
+  });
+  var hasTransitionedIn = useMountTransition(isOpen, 500);
+  var containerProps = Object.assign(Object.assign({}, getBaseHTMLProps(uniqueId, className, htmlProps, rest)), {
+    placement: placement,
+    ref: combinedRef,
+    isOpen: hasTransitionedIn && isOpen,
+    tabIndex: -1,
+    role: 'dialog',
+    'aria-labelledby': headerId,
+    size: size
+  });
+  var headerContainerProps = {
+    id: headerId
+  };
+  return isOpen || hasTransitionedIn ? /*#__PURE__*/createPortal(jsxs(Container, Object.assign({}, containerProps, {
+    children: [jsxs(ContentContainer, {
+      children: [hasHeader && jsx(HeaderContainer, Object.assign({}, headerContainerProps, {
+        children: typeof header === 'string' ? jsx(Typography, Object.assign({
+          typographyType: "headingSans03"
+        }, {
+          children: header
+        })) : header
+      })), children]
+    }), jsx(StyledButton, {
+      "data-testid": "drawer-close-btn",
+      size: "small",
+      purpose: "secondary",
+      appearance: "borderless",
+      onClick: onClose,
+      "aria-label": "Lukk",
+      Icon: CloseOutlinedIcon
+    })]
+  })), parentElement) : null;
+});
+
+export { Drawer };

package/dist/components/Drawer/Drawer.tokens.js

@@ -0,0 +1,34 @@
+import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
+
+var Spacing = ddsBaseTokens.spacing;
+var containerBase = {
+  padding: "".concat(Spacing.SizesDdsSpacingLocalX1NumberPx - Spacing.SizesDdsSpacingLocalX025NumberPx, "px ").concat(Spacing.SizesDdsSpacingLocalX1NumberPx - Spacing.SizesDdsSpacingLocalX025NumberPx, "px ").concat(Spacing.SizesDdsSpacingLocalX1NumberPx - Spacing.SizesDdsSpacingLocalX025NumberPx, "px ").concat(Spacing.SizesDdsSpacingLocalX15NumberPx - Spacing.SizesDdsSpacingLocalX025NumberPx, "px")
+};
+var contentContainerBase = {
+  gap: Spacing.SizesDdsSpacingLocalX1,
+  padding: Spacing.SizesDdsSpacingLocalX025
+};
+var containerLarge = {
+  maxWidth: '800px'
+};
+var containerSmall = {
+  maxWidth: '400px'
+};
+var drawerTokens = {
+  container: {
+    base: containerBase,
+    size: {
+      large: {
+        base: containerLarge
+      },
+      small: {
+        base: containerSmall
+      }
+    }
+  },
+  contentContainer: {
+    base: contentContainerBase
+  }
+};
+
+export { drawerTokens };