@norges-domstoler/dds-components 4.3.0 → 5.2.0-beta.0

package/dist/components/Popover/Popover.js

@@ -1,6 +1,5 @@
 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';
@@ -11,6 +10,7 @@ import { useFloatPosition } from '../../hooks/useFloatPosition.js';
 import { useCombinedRef } from '../../hooks/useCombinedRefs.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
 import { Typography } from '../Typography/Typography.js';
+import { CloseIcon } from '../../icons/tsx/close.js';
 
 var Spacing = ddsBaseTokens.spacing;
 var Wrapper = styled.div.withConfig({
@@ -90,7 +90,7 @@ var Popover = /*#__PURE__*/forwardRef(function (props, ref) {
     }, {
       children: children
     })), withCloseButton && jsx(StyledButton, {
-      Icon: CloseOutlinedIcon,
+      icon: CloseIcon,
       appearance: "borderless",
       purpose: "secondary",
       size: "small",

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { PopoverProps } from '.';
 import { Placement } from '../../hooks';
 declare const _default: {

package/dist/components/RadioButton/RadioButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const RadioButton: import("react").ForwardRefExoticComponent<{
     htmlProps?: Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "name" | "readOnly" | "checked" | "value" | "required" | "onChange" | "aria-describedby"> | undefined;
 } & Pick<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "name" | "readOnly" | "checked" | "value" | "required" | "onChange" | "aria-describedby">, "id" | "className"> & {

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { RadioButtonProps } from '.';
 declare const _default: {
     title: string;

package/dist/components/RadioButton/RadioButton.styles.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { RadioButtonProps } from './RadioButton.types';
 export declare const CustomRadioButton: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const Input: import("styled-components").StyledComponent<"input", any, {

package/dist/components/RadioButton/RadioButtonGroup.stories.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { RadioButtonGroupProps } from '.';
 declare const _default: {
     title: string;

package/dist/components/Search/Search.js

@@ -3,9 +3,10 @@ import { __rest } from 'tslib';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useState } from 'react';
 import styled, { css } from 'styled-components';
-import SearchOutlinedIcon from '@mui/icons-material/SearchOutlined';
 import { searchTokens } from './Search.tokens.js';
 import { Input as Input$1, OuterInputContainer, InputContainer } from '../../helpers/Input/Input.styles.js';
+import { SearchIcon } from '../../icons/tsx/search.js';
+import { Icon } from '../Icon/Icon.js';
 import { derivativeIdGenerator, spaceSeparatedIdListGenerator } from '../../utils/idGenerator.js';
 import { InputMessage } from '../InputMessage/InputMessage.js';
 import { Button } from '../Button/Button.js';
@@ -17,10 +18,13 @@ var Input = styled(Input$1).withConfig({
   var componentSize = _ref.componentSize;
   return css(["", ""], searchTokens.input[componentSize].base);
 });
-var IconWrapper = styled.span.withConfig({
+var IconWrapper = styled(Icon).withConfig({
   displayName: "Search__IconWrapper",
   componentId: "sc-1ax3s9s-1"
-})(["", " position:absolute;top:", ";left:", ";"], searchTokens.iconWrapper.base, searchTokens.icon.spaceTop, searchTokens.icon.spaceLeft);
+})(["position:absolute;", " left:", ";", ""], searchTokens.iconWrapper.base, searchTokens.icon.spaceLeft, function (_ref2) {
+  var size = _ref2.size;
+  return css(["top:", ";"], searchTokens.icon[size].spaceTop);
+});
 var Container = styled.div.withConfig({
   displayName: "Search__Container",
   componentId: "sc-1ax3s9s-2"
@@ -73,7 +77,9 @@ var Search = /*#__PURE__*/forwardRef(function (_a, ref) {
     }, {
       children: [jsxs(InputContainer, {
         children: [jsx(IconWrapper, {
-          children: jsx(SearchOutlinedIcon, {})
+          icon: SearchIcon,
+          size: componentSize,
+          iconSize: searchTokens.icon[componentSize].size
         }), jsx(Input, Object.assign({}, inputProps))]
       }), hasTip && jsx(InputMessage, {
         id: tipId,

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SearchProps } from './Search';
 declare const _default: {
     title: string;

package/dist/components/Search/Search.tokens.d.ts

@@ -13,8 +13,20 @@ export declare const searchTokens: {
         };
     };
     icon: {
-        spaceTop: string;
         spaceLeft: string;
+        small: {
+            size: string;
+            spaceTop: string;
+        };
+        medium: {
+            size: string;
+            spaceTop: string;
+        };
+        large: {
+            size: string;
+            spaceTop: string;
+        };
+        spaceTop: string;
     };
     iconWrapper: {
         base: CSSObject;

package/dist/components/Search/Search.tokens.js

@@ -1,7 +1,8 @@
 import { ddsBaseTokens, ddsReferenceTokens } from '@norges-domstoler/dds-design-tokens';
 
 var spacing = ddsBaseTokens.spacing,
-    fontPackages = ddsBaseTokens.fontPackages;
+    fontPackages = ddsBaseTokens.fontPackages,
+    iconSizes = ddsBaseTokens.iconSizes;
 var textDefault = ddsReferenceTokens.textDefault;
 var inputBase = {
   paddingRight: spacing.SizesDdsSpacingLocalX05,
@@ -41,8 +42,20 @@ var searchTokens = {
     }
   },
   icon: {
-    spaceTop: "calc(50% - ".concat(spacing.SizesDdsSpacingLocalX15NumberPx / 2, "px)"),
-    spaceLeft: spacing.SizesDdsSpacingLocalX075
+    spaceLeft: spacing.SizesDdsSpacingLocalX075,
+    small: {
+      size: 'small',
+      spaceTop: "calc(50% - ".concat(iconSizes.DdsIconsizeSmallNumberPx / 2, "px)")
+    },
+    medium: {
+      size: 'medium',
+      spaceTop: "calc(50% - ".concat(iconSizes.DdsIconsizeMediumNumberPx / 2, "px)")
+    },
+    large: {
+      size: 'medium',
+      spaceTop: "calc(50% - ".concat(iconSizes.DdsIconsizeMediumNumberPx / 2, "px)")
+    },
+    spaceTop: "calc(50% - ".concat(spacing.SizesDdsSpacingLocalX15NumberPx / 2, "px)")
   },
   iconWrapper: {
     base: iconWrapperBase

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

@@ -0,0 +1,66 @@
+import React from 'react';
+import { SelectOption, SelectProps } from '.';
+declare const _default: {
+    title: string;
+    component: <TOption extends Record<string, unknown>, IsMulti extends boolean = false>({ id, label, errorMessage, tip, required, readOnly, options, isMulti, value, defaultValue, width, closeMenuOnSelect, className, style, isDisabled, isClearable, placeholder, customOptionElement, customSingleValueElement, ...rest }: SelectProps<TOption, IsMulti>, ref: ((instance: import("react-select").SelectInstance<TOption, IsMulti, import("react-select").GroupBase<TOption>> | null) => void) | React.MutableRefObject<import("react-select").SelectInstance<TOption, IsMulti, import("react-select").GroupBase<TOption>> | null> | null) => JSX.Element;
+    argTypes: {
+        label: {
+            control: {
+                type: string;
+            };
+        };
+        tip: {
+            control: {
+                type: string;
+            };
+        };
+        errorMessage: {
+            control: {
+                type: string;
+            };
+        };
+        width: {
+            control: {
+                type: string;
+            };
+        };
+        placeholder: {
+            control: {
+                type: string;
+            };
+        };
+        isDisabled: {
+            control: {
+                type: string;
+            };
+        };
+        isClearable: {
+            control: {
+                type: string;
+            };
+        };
+        required: {
+            control: {
+                type: string;
+            };
+        };
+        readOnly: {
+            control: {
+                type: string;
+            };
+        };
+        isLoading: {
+            control: {
+                type: string;
+            };
+        };
+    };
+    parameters: {
+        controls: {
+            exclude: string[];
+        };
+    };
+};
+export default _default;
+declare type SingleSelectProps = SelectProps<SelectOption, false>;
+export declare const Overview: (args: SingleSelectProps) => JSX.Element;

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

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import { SelectProps } from './Select';
 declare const _default: {
     title: string;
-    component: <TOption extends Record<string, unknown>, IsMulti extends boolean = false>({ id, label, errorMessage, tip, required, readOnly, options, isMulti, value, defaultValue, width, closeMenuOnSelect, className, style, isDisabled, isClearable, placeholder, ...rest }: SelectProps<TOption, IsMulti>, ref: ((instance: import("react-select").SelectInstance<TOption, IsMulti, import("react-select").GroupBase<TOption>> | null) => void) | import("react").MutableRefObject<import("react-select").SelectInstance<TOption, IsMulti, import("react-select").GroupBase<TOption>> | null> | null) => JSX.Element;
+    component: <TOption extends Record<string, unknown>, IsMulti extends boolean = false>({ id, label, errorMessage, tip, required, readOnly, options, isMulti, value, defaultValue, width, closeMenuOnSelect, className, style, isDisabled, isClearable, placeholder, customOptionElement, customSingleValueElement, ...rest }: SelectProps<TOption, IsMulti>, ref: ((instance: import("react-select").SelectInstance<TOption, IsMulti, import("react-select").GroupBase<TOption>> | null) => void) | import("react").MutableRefObject<import("react-select").SelectInstance<TOption, IsMulti, import("react-select").GroupBase<TOption>> | null> | null) => JSX.Element;
     argTypes: {
         label: {
             control: {

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

@@ -1,6 +1,6 @@
 import { Property } from 'csstype';
 import React from 'react';
-import { GroupBase, Props as ReactSelectProps, SelectInstance } from 'react-select';
+import { GroupBase, OptionProps, Props as ReactSelectProps, SelectInstance, SingleValueProps } from 'react-select';
 import { WithRequiredIf } from '../../types/utils';
 export declare type SelectOption<TValue = unknown> = {
     label: string | number;
@@ -26,7 +26,9 @@ export declare type SelectProps<TOption extends Record<string, unknown>, IsMulti
     className?: string;
     /** Inline styling. */
     style?: React.CSSProperties;
+    customOptionElement?: (props: OptionProps<TOption, IsMulti, GroupBase<TOption>>) => JSX.Element;
+    customSingleValueElement?: (props: SingleValueProps<TOption, IsMulti, GroupBase<TOption>>) => JSX.Element;
 } & WrappedReactSelectProps<TOption, IsMulti, GroupBase<TOption>>;
 declare type ForwardRefType<TOption, IsMulti extends boolean> = React.ForwardedRef<SelectInstance<TOption, IsMulti, GroupBase<TOption>>>;
-export declare const Select: <TOption extends Record<string, unknown>, IsMulti extends boolean = false>({ id, label, errorMessage, tip, required, readOnly, options, isMulti, value, defaultValue, width, closeMenuOnSelect, className, style, isDisabled, isClearable, placeholder, ...rest }: SelectProps<TOption, IsMulti>, ref: ForwardRefType<TOption, IsMulti>) => JSX.Element;
+export declare const Select: <TOption extends Record<string, unknown>, IsMulti extends boolean = false>({ id, label, errorMessage, tip, required, readOnly, options, isMulti, value, defaultValue, width, closeMenuOnSelect, className, style, isDisabled, isClearable, placeholder, customOptionElement, customSingleValueElement, ...rest }: SelectProps<TOption, IsMulti>, ref: ForwardRefType<TOption, IsMulti>) => JSX.Element;
 export {};

package/dist/components/Select/Select.js

@@ -1,18 +1,20 @@
 import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { __rest } from 'tslib';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import CheckOutlinedIcon from '@mui/icons-material/CheckOutlined';
 import React, { useState } from 'react';
 import ReactSelect, { components } from 'react-select';
-import { prefix, getCustomStyles, Wrapper, Container, Label, SelectedIconWrapper } from './Select.styles.js';
+import { prefix, getCustomStyles, Wrapper, Container, Label } from './Select.styles.js';
 import { selectTokens } from './Select.tokens.js';
+import { CheckIcon } from '../../icons/tsx/check.js';
 import { RequiredMarker } from '../../helpers/RequiredMarker/RequiredMarker.js';
 import { InputMessage } from '../InputMessage/InputMessage.js';
+import { Icon } from '../Icon/Icon.js';
 import { derivativeIdGenerator, spaceSeparatedIdListGenerator } from '../../utils/idGenerator.js';
 
 var DdsOption = components.Option,
     NoOptionsMessage = components.NoOptionsMessage,
-    Input = components.Input;
+    Input = components.Input,
+    SingleValue = components.SingleValue;
 var createSelectOptions = function createSelectOptions() {
   for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
     args[_key] = arguments[_key];
@@ -28,13 +30,25 @@ var createSelectOptions = function createSelectOptions() {
 
 var IconOption = function IconOption(props) {
   return jsxs(DdsOption, Object.assign({}, props, {
-    children: [props.isSelected && jsx(SelectedIconWrapper, {
-      Icon: CheckOutlinedIcon,
-      iconSize: "inline"
+    children: [props.isSelected && jsx(Icon, {
+      icon: CheckIcon,
+      iconSize: "inherit"
     }), props.children]
   }));
 };
 
+var CustomOption = function CustomOption(props, Element) {
+  return jsx(DdsOption, Object.assign({}, props, {
+    children: jsx(Element, Object.assign({}, props))
+  }));
+};
+
+var CustomSingleValue = function CustomSingleValue(props, Element) {
+  return jsx(SingleValue, Object.assign({}, props, {
+    children: jsx(Element, Object.assign({}, props))
+  }));
+};
+
 var NoOptionsMessageCustom = function NoOptionsMessageCustom(props) {
   return jsx(NoOptionsMessage, Object.assign({}, props, {
     children: "Ingen treff"
@@ -73,7 +87,9 @@ var SelectInner = function SelectInner(_a, ref) {
       isClearable = _a$isClearable === void 0 ? true : _a$isClearable,
       _a$placeholder = _a.placeholder,
       placeholder = _a$placeholder === void 0 ? '-- Velg fra listen --' : _a$placeholder,
-      rest = __rest(_a, ["id", "label", "errorMessage", "tip", "required", "readOnly", "options", "isMulti", "value", "defaultValue", "width", "closeMenuOnSelect", "className", "style", "isDisabled", "isClearable", "placeholder"]);
+      customOptionElement = _a.customOptionElement,
+      customSingleValueElement = _a.customSingleValueElement,
+      rest = __rest(_a, ["id", "label", "errorMessage", "tip", "required", "readOnly", "options", "isMulti", "value", "defaultValue", "width", "closeMenuOnSelect", "className", "style", "isDisabled", "isClearable", "placeholder", "customOptionElement", "customSingleValueElement"]);
 
   var _useState = useState(id !== null && id !== void 0 ? id : "select-".concat(nextUniqueId++)),
       _useState2 = _slicedToArray(_useState, 1),
@@ -120,9 +136,14 @@ var SelectInner = function SelectInner(_a, ref) {
       return searchFilter(label, inputValue) || inputValue === '';
     },
     components: {
-      Option: IconOption,
+      Option: customOptionElement ? function (props) {
+        return CustomOption(props, customOptionElement);
+      } : IconOption,
       NoOptionsMessage: NoOptionsMessageCustom,
-      Input: CustomInput
+      Input: CustomInput,
+      SingleValue: customSingleValueElement ? function (props) {
+        return CustomSingleValue(props, customSingleValueElement);
+      } : SingleValue
     },
     'aria-invalid': hasErrorMessage ? true : undefined
   }, rest);

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

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import { SelectOption, SelectProps } from '.';
 declare const _default: {
     title: string;
-    component: <TOption extends Record<string, unknown>, IsMulti extends boolean = false>({ id, label, errorMessage, tip, required, readOnly, options, isMulti, value, defaultValue, width, closeMenuOnSelect, className, style, isDisabled, isClearable, placeholder, ...rest }: SelectProps<TOption, IsMulti>, ref: ((instance: import("react-select").SelectInstance<TOption, IsMulti, import("react-select").GroupBase<TOption>> | null) => void) | import("react").MutableRefObject<import("react-select").SelectInstance<TOption, IsMulti, import("react-select").GroupBase<TOption>> | null> | null) => JSX.Element;
+    component: <TOption extends Record<string, unknown>, IsMulti extends boolean = false>({ id, label, errorMessage, tip, required, readOnly, options, isMulti, value, defaultValue, width, closeMenuOnSelect, className, style, isDisabled, isClearable, placeholder, customOptionElement, customSingleValueElement, ...rest }: SelectProps<TOption, IsMulti>, ref: ((instance: import("react-select").SelectInstance<TOption, IsMulti, import("react-select").GroupBase<TOption>> | null) => void) | import("react").MutableRefObject<import("react-select").SelectInstance<TOption, IsMulti, import("react-select").GroupBase<TOption>> | null> | null) => JSX.Element;
     argTypes: {
         label: {
             control: {

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

@@ -1,6 +1,4 @@
-/// <reference types="react" />
 import { GroupBase, StylesConfig } from 'react-select';
-import { IconWrapper } from '../IconWrapper';
 export declare const prefix = "dds-select";
 export declare const Label: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Typography").TypographyProps & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
 declare type StyledContainerProps = {
@@ -14,6 +12,5 @@ export declare const Container: import("styled-components").StyledComponent<"div
 export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {
     width?: string | number | undefined;
 }, never>;
-export declare const SelectedIconWrapper: import("styled-components").StyledComponent<typeof IconWrapper, any, {}, never>;
 export declare const getCustomStyles: <TOption>() => Partial<StylesConfig<TOption, boolean, GroupBase<TOption>>>;
 export {};

package/dist/components/Select/Select.styles.js

@@ -3,7 +3,6 @@ import { typographyTokens } from '../Typography/Typography.tokens.js';
 import { selectTokens } from './Select.tokens.js';
 import { Typography } from '../Typography/Typography.js';
 import { scrollbarStyling } from '../../helpers/styling/scrollbarStyling.js';
-import { IconWrapper } from '../IconWrapper/IconWrapper.js';
 
 var prefix = 'dds-select';
 var Label = styled(Typography).withConfig({
@@ -13,34 +12,27 @@ var Label = styled(Typography).withConfig({
 var Container = styled.div.withConfig({
   displayName: "Selectstyles__Container",
   componentId: "sc-19jkd5s-1"
-})(["@media (prefers-reduced-motion:no-preference){transition:box-shadow 0.2s,border-color 0.2s,background-color 0.2s;}position:relative;", " ", " *::selection{", "}", " ", " &:hover{", " ", "{", "}}&:focus-within{", " ", "{", "}}", " .", "__menu-list{", "}&:hover .", "__dropdown-indicator,&:focus-within .", "__dropdown-indicator{", "}", " ", ""], selectTokens.container.base, scrollbarStyling, typographyTokens.selection.base, function (_ref) {
-  var isMulti = _ref.isMulti;
-  return isMulti && css([""]);
-}, function (_ref2) {
-  var hasLabel = _ref2.hasLabel,
-      isMulti = _ref2.isMulti;
+})(["@media (prefers-reduced-motion:no-preference){transition:box-shadow 0.2s,border-color 0.2s,background-color 0.2s;}position:relative;", " ", " *::selection{", "}", " &:hover{", " ", "{", "}}&:focus-within{", " ", "{", "}}", " .", "__menu-list{", "}&:hover .", "__dropdown-indicator,&:focus-within .", "__dropdown-indicator{", "}", " ", ""], selectTokens.container.base, scrollbarStyling, typographyTokens.selection.base, function (_ref) {
+  var hasLabel = _ref.hasLabel,
+      isMulti = _ref.isMulti;
   return isMulti && hasLabel ? css([".", "__value-container{", "}.", "__indicators{", "}"], prefix, selectTokens.valueContainer.isMulti.withLabel.base, prefix, selectTokens.indicatorsContainer.isMulti.withLabel.base) : isMulti && !hasLabel ? css([".", "__control{", "}.", "__value-container{", "}.", "__indicators{", "}"], prefix, selectTokens.input.isMulti.noLabel.base, prefix, selectTokens.valueContainer.isMulti.noLabel.base, prefix, selectTokens.indicatorsContainer.isMulti.noLabel.base) : hasLabel ? css([".", "__value-container{", "}.", "__indicators{", "}"], prefix, selectTokens.valueContainer.withLabel.base, prefix, selectTokens.indicatorsContainer.withLabel.base) : css([".", "__control{", "}.", "__value-container{", "}.", "__indicators{", "}"], prefix, selectTokens.input.noLabel.base, prefix, selectTokens.valueContainer.noLabel.base, prefix, selectTokens.indicatorsContainer.noLabel.base);
-}, selectTokens.container.hover.base, Label, selectTokens.label.hover.base, selectTokens.container.focus.base, Label, selectTokens.label.focus.base, function (_ref3) {
-  var errorMessage = _ref3.errorMessage;
+}, selectTokens.container.hover.base, Label, selectTokens.label.hover.base, selectTokens.container.focus.base, Label, selectTokens.label.focus.base, function (_ref2) {
+  var errorMessage = _ref2.errorMessage;
   return errorMessage && css(["", " &:hover{", "}&:focus-within{", "}"], selectTokens.container.danger.base, selectTokens.container.danger.hover.base, selectTokens.container.danger.focus.base);
-}, prefix, scrollbarStyling, prefix, prefix, selectTokens.dropdownIndicator.hover.base, function (_ref4) {
-  var isDisabled = _ref4.isDisabled;
+}, prefix, scrollbarStyling, prefix, prefix, selectTokens.dropdownIndicator.hover.base, function (_ref3) {
+  var isDisabled = _ref3.isDisabled;
   return isDisabled && css(["cursor:not-allowed;", " &:hover{box-shadow:none;", " ", "{", "}&:hover .", "__dropdown-indicator{", "}}"], selectTokens.container.disabled.base, selectTokens.container.disabled.base, Label, selectTokens.label.base, prefix, selectTokens.dropdownIndicator.base);
-}, function (_ref5) {
-  var readOnly = _ref5.readOnly;
+}, function (_ref4) {
+  var readOnly = _ref4.readOnly;
   return readOnly && css(["", " &:hover{box-shadow:none;", " ", "{", "}}.", "__dropdown-indicator,&:hover .", "__dropdown-indicator{", "}"], selectTokens.container.readOnly.base, selectTokens.container.readOnly.base, Label, selectTokens.label.base, prefix, prefix, selectTokens.dropdownIndicator.readOnly.base);
 });
 var Wrapper = styled.div.withConfig({
   displayName: "Selectstyles__Wrapper",
   componentId: "sc-19jkd5s-2"
-})(["margin:0;width:", ";"], function (_ref6) {
-  var width = _ref6.width;
+})(["margin:0;width:", ";"], function (_ref5) {
+  var width = _ref5.width;
   return width;
 });
-var SelectedIconWrapper = styled(IconWrapper).withConfig({
-  displayName: "Selectstyles__SelectedIconWrapper",
-  componentId: "sc-19jkd5s-3"
-})(["margin:", ";"], selectTokens.option.selected.icon.margin);
 var getCustomStyles = function getCustomStyles() {
   return {
     control: function control() {
@@ -121,8 +113,6 @@ var getCustomStyles = function getCustomStyles() {
     },
     option: function option(provided, state) {
       return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, provided), {
-        display: 'flex',
-        alignItems: 'center',
         '@media (prefers-reduced-motion: no-preference)': {
           transition: 'color 0.2s, background-color 0.2s'
         }
@@ -146,4 +136,4 @@ var getCustomStyles = function getCustomStyles() {
   };
 };
 
-export { Container, Label, SelectedIconWrapper, Wrapper, getCustomStyles, prefix };
+export { Container, Label, Wrapper, getCustomStyles, prefix };

package/dist/components/Select/Select.tokens.js

@@ -109,6 +109,9 @@ var menuBase = {
   marginBottom: Spacing.SizesDdsSpacingLocalX025
 };
 var optionBase = Object.assign(Object.assign({
+  display: 'flex',
+  alignItems: 'center',
+  gap: Spacing.SizesDdsSpacingLocalX05,
   padding: "".concat(Spacing.SizesDdsSpacingLocalX05, " ").concat(Spacing.SizesDdsSpacingLocalX1)
 }, FontPackages.body_sans_02.base), {
   color: textDefault.textColor

package/dist/components/SkipToContent/SkipToContent.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Property } from 'csstype';
 import { BaseComponentProps } from '../../types';
 export declare type SkipToContentProps = BaseComponentProps<HTMLAnchorElement, {

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SkipToContentProps } from '.';
 declare const _default: {
     title: string;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Property } from 'csstype';
 import { TextColor } from '../Typography';
 import { BaseComponentProps } from '../../types';

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Spinner, SpinnerProps } from '.';
 declare const _default: {
     title: string;

package/dist/components/Stepper/Step.d.ts

@@ -0,0 +1,20 @@
+import { BaseComponentPropsWithChildren } from '../../types';
+declare type BaseStepProps = {
+    /** Om steget er valgt eller ikke. Settes av konsument. */
+    active?: boolean;
+    /** Om steget er ferdig eller ikke. Settes av konsument */
+    completed?: boolean;
+    /** Indeksen til steget. NB! Denne settes automatisk av <Stepper /> og skal ikke settes manuelt. */
+    index?: number;
+};
+declare type StepProps = ({
+    /** Click-handler som gjør det mulig for bruker å klikke på steget for å navigere. Valgfri. */
+    onClick: (stepIndex: number) => void;
+} & BaseComponentPropsWithChildren<HTMLButtonElement, BaseStepProps>) | ({
+    onClick?: undefined;
+} & BaseComponentPropsWithChildren<HTMLDivElement, BaseStepProps>);
+/**
+ * @beta Denne komponenten er ikke ferdig og endringer kan gjøres utenfor semver.
+ */
+export declare const Step: (props: StepProps) => JSX.Element;
+export {};

package/dist/components/Stepper/Step.js

@@ -0,0 +1,114 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import styled, { css } from 'styled-components';
+import { useStepperContext } from './Stepper.context.js';
+import { stepperTokens } from './Stepper.tokens.js';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
+import { focusVisibleTransitionValue, focusVisible } from '../../helpers/styling/focusVisible.js';
+
+var toStepState = function toStepState(active, completed) {
+  return active ? completed ? 'activeCompleted' : 'activeIncomplete' : completed ? 'inactiveCompleted' : 'inactiveIncomplete';
+};
+
+var stepNumber = stepperTokens.stepNumber,
+    connector = stepperTokens.connector,
+    stepButton = stepperTokens.stepButton;
+var stepSize = '40px';
+var StepWrapper = styled.li.withConfig({
+  displayName: "Step__StepWrapper",
+  componentId: "sc-5n6xpp-0"
+})(["flex:1;position:relative;display:flex;justify-content:center;:not(:last-child):after{content:'';display:block;border-top:1px solid ", ";position:absolute;width:100%;left:50%;top:calc(", " / 2);}"], connector.color, stepSize);
+var StepContentWrapper = styled.div.withConfig({
+  displayName: "Step__StepContentWrapper",
+  componentId: "sc-5n6xpp-1"
+})(["background:none;border:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:center;transition:", ";:focus-visible{", "}", ""], focusVisibleTransitionValue, focusVisible, function (_ref) {
+  var clickable = _ref.clickable;
+  return clickable && css(["cursor:pointer;"]);
+});
+var StepNumber = styled.div.withConfig({
+  displayName: "Step__StepNumber",
+  componentId: "sc-5n6xpp-2"
+})(["border-radius:50%;border:1px solid;padding:5px;width:", ";height:", ";display:flex;align-items:center;justify-content:center;z-index:2;", ""], stepSize, stepSize, function (_ref2) {
+  var state = _ref2.state;
+
+  switch (state) {
+    case 'activeIncomplete':
+      return css(["border-color:", ";color:", ";background-color:", ";"], stepNumber.active.borderColor, stepNumber.active.color, stepNumber.active.backgroundColor);
+
+    case 'activeCompleted':
+    case 'inactiveCompleted':
+      return css(["border-color:", ";color:", ";background-color:", ";"], stepNumber.completed.borderColor, stepNumber.completed.color, stepNumber.completed.backgroundColor);
+
+    case 'inactiveIncomplete':
+      return css(["border-color:", ";color:", ";background-color:", ";"], stepNumber.inactive.borderColor, stepNumber.inactive.color, stepNumber.inactive.backgroundColor);
+  }
+});
+var StepCompletedCheck = styled.div.withConfig({
+  displayName: "Step__StepCompletedCheck",
+  componentId: "sc-5n6xpp-3"
+})(["border:solid ", ";border-width:0 2px 2px 0;transform:rotate(45deg);width:27.5%;height:55%;margin-top:-2px;"], stepNumber.completed.color);
+var StepText = styled.div.withConfig({
+  displayName: "Step__StepText",
+  componentId: "sc-5n6xpp-4"
+})(["font-family:", ";font-size:", ";margin-top:", ";", ""], stepButton.fontFamily, stepButton.fontSize, stepButton.marginTop, function (_ref3) {
+  var state = _ref3.state,
+      clickable = _ref3.clickable;
+
+  switch (state) {
+    case 'activeCompleted':
+    case 'activeIncomplete':
+      return css(["color:", ";text-decoration ", ";"], stepButton.active.color, clickable ? stepButton.active.textDecoration : 'none');
+
+    case 'inactiveCompleted':
+      return css(["color:", ";text-decoration ", ";"], stepButton.completed.color, clickable ? stepButton.completed.textDecoration : 'none');
+
+    case 'inactiveIncomplete':
+      return css(["color:", ";text-decoration ", ";"], stepButton.inactive.color, clickable ? stepButton.inactive.textDecoration : 'none');
+  }
+});
+
+var getVisuallyHiddenText = function getVisuallyHiddenText(active, completed) {
+  return "".concat(active ? '' : 'Trinn, ').concat(completed ? 'Ferdig, ' : 'Ikke ferdig, ');
+};
+/**
+ * @beta Denne komponenten er ikke ferdig og endringer kan gjøres utenfor semver.
+ */
+
+
+var Step = function Step(props) {
+  var _props$index = props.index,
+      index = _props$index === void 0 ? 0 : _props$index,
+      _props$completed = props.completed,
+      completed = _props$completed === void 0 ? false : _props$completed,
+      children = props.children;
+
+  var _useStepperContext = useStepperContext(),
+      activeStep = _useStepperContext.activeStep;
+
+  var active = activeStep === index;
+  var styleProps = {
+    state: toStepState(active, completed),
+    clickable: props.onClick !== undefined
+  };
+  return jsx(StepWrapper, Object.assign({
+    "aria-current": active ? 'step' : undefined
+  }, {
+    children: jsxs(StepContentWrapper, Object.assign({}, styleProps, {
+      as: props.onClick ? 'button' : 'div',
+      onClick: props.onClick ? function () {
+        return props.onClick(index);
+      } : undefined
+    }, {
+      children: [jsx(StepNumber, Object.assign({}, styleProps, {
+        children: completed ? jsx(StepCompletedCheck, {}) : index + 1
+      })), jsxs(StepText, Object.assign({}, styleProps, {
+        children: [jsx(VisuallyHidden, Object.assign({
+          as: "span"
+        }, {
+          children: getVisuallyHiddenText(active, completed)
+        })), children]
+      }))]
+    }))
+  }));
+};
+
+export { Step };

package/dist/components/Stepper/Stepper.context.d.ts

@@ -0,0 +1,6 @@
+declare type StepperContextType = {
+    activeStep: number;
+};
+export declare const StepperContext: import("react").Context<StepperContextType>;
+export declare const useStepperContext: () => StepperContextType;
+export {};

package/dist/components/Stepper/Stepper.context.js

@@ -0,0 +1,10 @@
+import { createContext, useContext } from 'react';
+
+var StepperContext = /*#__PURE__*/createContext({
+  activeStep: 0
+});
+var useStepperContext = function useStepperContext() {
+  return useContext(StepperContext);
+};
+
+export { StepperContext, useStepperContext };

package/dist/components/Stepper/Stepper.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @beta Denne komponenten er ikke ferdig og endringer kan gjøres utenfor semver.
+ */
+export declare const Stepper: import("react").ForwardRefExoticComponent<{
+    htmlProps?: import("react").HTMLAttributes<HTMLDivElement> | undefined;
+} & Pick<import("react").HTMLAttributes<HTMLDivElement>, "id" | "className"> & {
+    /** Indeksen til det aktive steget. */
+    activeStep?: number | undefined;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;