@norges-domstoler/dds-components 6.0.0 → 7.0.0

package/dist/helpers/Input/Input.styles.d.ts

@@ -1,14 +1,12 @@
-import { StyledLabelProps } from '.';
 import { Property } from 'csstype';
 export declare const Input: import("styled-components").StyledComponent<"input", any, {}, never>;
-export declare const StatefulInput: import("styled-components").StyledComponent<"input", any, Pick<import("./Input.types").InputProps, "disabled" | "readOnly"> & {
+export declare const StatefulInput: import("styled-components").StyledComponent<"input", any, Pick<import("./Input.types").InputProps, "disabled" | "readOnly" | "componentSize"> & {
     hasErrorMessage: boolean;
-    hasLabel: import("./Input.types").LabelPresence;
 }, never>;
-export declare const Label: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../components/Typography").TypographyProps & import("react").RefAttributes<HTMLElement>>, any, StyledLabelProps, never>;
-export declare const InputContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare type OuterInputContainerProps = {
     width?: Property.Width<string>;
 };
 export declare const OuterInputContainer: import("styled-components").StyledComponent<"div", any, OuterInputContainerProps, never>;
+/**Brukes som container til input og ikon for posisjonering. */
+export declare const InputContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export {};

package/dist/helpers/Input/Input.styles.js

@@ -1,47 +1,39 @@
 import styled, { css } from 'styled-components';
 import { inputTokens } from './Input.tokens.js';
-import { Typography } from '../../components/Typography/Typography/Typography.js';
-import 'tslib';
-import 'react/jsx-runtime';
-import 'react';
-import '../../components/Typography/Link/Link.js';
 import '../styling/focusVisible.js';
-import '../styling/hover.js';
-import '../styling/focus.js';
-import '../styling/danger.js';
+import { hoverInputfield, hoverDangerInputfield } from '../styling/hover.js';
+import { focusInputfield, focusDangerInputfield } from '../styling/focus.js';
+import { dangerInputfield } from '../styling/danger.js';
 import { selection } from '../styling/selection.js';
 
+var input = inputTokens.input,
+    container = inputTokens.container;
 var Input = styled.input.withConfig({
   displayName: "Inputstyles__Input",
   componentId: "sc-1oz9x8w-0"
-})(["", " width:100%;top:0;left:0;margin:0;padding:0;box-sizing:border-box;box-shadow:none;@media (prefers-reduced-motion:no-preference){transition:box-shadow 0.2s,border-color 0.2s,background-color 0.2s;}&[type='text'],&[type='password'],&[type='number'],&[type='tel'],&[type='date'],&[type='url'],&[type='email'],&[type='search'],&[type='datetime-local']{-webkit-appearance:none;}&::selection{", "}&:focus:enabled:read-write,&:active:enabled:read-write{", "}&:hover:enabled:read-write{", "}"], inputTokens.baseInput.base, selection, inputTokens.baseInput.focus.base, inputTokens.baseInput.hover.base);
+})(["position:relative;color:", ";border-radius:", ";border:", ";border-color:", ";background-color:", ";padding:", ";width:100%;margin:0;box-sizing:border-box;box-shadow:none;@media (prefers-reduced-motion:no-preference){transition:box-shadow 0.2s,border-color 0.2s,background-color 0.2s;}&[type='text'],&[type='password'],&[type='number'],&[type='tel'],&[type='date'],&[type='url'],&[type='email'],&[type='search'],&[type='datetime-local']{-webkit-appearance:none;}&::selection{", "}&:hover:enabled:read-write{", "}&:focus:enabled:read-write,&:active:enabled:read-write{", "}"], input.base.color, input.base.borderRadius, input.base.border, input.base.borderColor, input.base.backgroundColor, input.base.padding, selection, hoverInputfield, focusInputfield);
 var StatefulInput = styled(Input).withConfig({
   displayName: "Inputstyles__StatefulInput",
   componentId: "sc-1oz9x8w-1"
-})(["-webkit-appearance:textfield;", ";&:hover:enabled:read-write ~ label{", "}&:focus:enabled:read-write ~ label{", "}", " &:enabled:read-only{", "}&:disabled{", "}"], function (_ref) {
-  var hasLabel = _ref.hasLabel;
-  return css(["", ""], inputTokens[hasLabel].base);
-}, inputTokens.label.hover.base, inputTokens.label.focus.base, function (_ref2) {
+})(["-webkit-appearance:textfield;", " ", " &:enabled:read-only{border:none;outline:none;cursor:default;background-color:", ";padding-left:0;}&:disabled{cursor:not-allowed;color:", ";background-color:", ";}"], function (_ref) {
+  var componentSize = _ref.componentSize;
+  return componentSize && css(["padding:", ";", ""], input.sizes[componentSize].padding, input.sizes[componentSize].font);
+}, function (_ref2) {
   var hasErrorMessage = _ref2.hasErrorMessage;
-  return hasErrorMessage && css(["", " &:hover:enabled:read-write{", "}&:focus:enabled:read-write,&:active:enabled:read-write{", "}"], inputTokens.error.base, inputTokens.error.hover.base, inputTokens.error.focus.base);
-}, inputTokens.readOnly.base, inputTokens.disabled.base);
-var Label = styled(Typography).withConfig({
-  displayName: "Inputstyles__Label",
+  return hasErrorMessage && css(["", " &:hover:enabled:read-write{", "}&:focus:enabled:read-write,&:active:enabled:read-write{", "}"], dangerInputfield, hoverDangerInputfield, focusDangerInputfield);
+}, input.readOnly.backgroundColor, input.disabled.color, input.disabled.backgroundColor);
+var OuterInputContainer = styled.div.withConfig({
+  displayName: "Inputstyles__OuterInputContainer",
   componentId: "sc-1oz9x8w-2"
-})(["position:absolute;top:0;left:0;@media (prefers-reduced-motion:no-preference){transition:color 0.2s,background-color 0.2s;}", " ", ""], inputTokens.label.base, function (_ref3) {
-  var disabled = _ref3.disabled;
-  return disabled && css(["", ""], inputTokens.label.disabled.base);
+})(["position:relative;gap:", ";width:", ";"], container.gap, function (_ref3) {
+  var width = _ref3.width;
+  return width;
 });
+/**Brukes som container til input og ikon for posisjonering. */
+
 var InputContainer = styled.div.withConfig({
   displayName: "Inputstyles__InputContainer",
   componentId: "sc-1oz9x8w-3"
 })(["position:relative;"]);
-var OuterInputContainer = styled.div.withConfig({
-  displayName: "Inputstyles__OuterInputContainer",
-  componentId: "sc-1oz9x8w-4"
-})(["display:flex;flex-direction:column;", ";"], function (_ref4) {
-  var width = _ref4.width;
-  return width && css(["width:", ";"], width);
-});
 
-export { Input, InputContainer, Label, OuterInputContainer, StatefulInput };
+export { Input, InputContainer, OuterInputContainer, StatefulInput };

package/dist/helpers/Input/Input.tokens.d.ts

@@ -1,13 +1,59 @@
 import { CSSObject } from 'styled-components';
 export declare const inputTokens: {
-    baseInput: {
-        base: CSSObject;
-        focus: {
-            base: CSSObject;
+    input: {
+        base: {
+            color: string;
+            borderRadius: string;
+            border: string;
+            borderColor: string;
+            backgroundColor: string;
+            padding: string;
         };
-        hover: {
-            base: CSSObject;
+        disabled: {
+            color: string;
+            backgroundColor: string;
+        };
+        readOnly: {
+            backgroundColor: string;
         };
+        sizes: {
+            medium: {
+                padding: string;
+                font: {
+                    lineHeight: any;
+                    fontSize: string;
+                    letterSpacing: any;
+                    fontFamily: any;
+                    fontWeight: any;
+                    fontStyle: any;
+                };
+            };
+            small: {
+                padding: string;
+                font: {
+                    lineHeight: any;
+                    fontSize: string;
+                    letterSpacing: any;
+                    fontFamily: any;
+                    fontWeight: any;
+                    fontStyle: any;
+                };
+            };
+            tiny: {
+                padding: string;
+                font: {
+                    lineHeight: any;
+                    fontSize: string;
+                    letterSpacing: any;
+                    fontFamily: any;
+                    fontWeight: any;
+                    fontStyle: any;
+                };
+            };
+        };
+    };
+    container: {
+        gap: string;
     };
     general: {
         input: {
@@ -15,14 +61,6 @@ export declare const inputTokens: {
             borderWidth: string;
             borderColor: string;
             textColor: string;
-            font: {
-                lineHeight: any;
-                fontSize: string;
-                letterSpacing: any;
-                fontFamily: any;
-                fontWeight: any;
-                fontStyle: any;
-            };
             hover: {
                 backgroundColor: string;
                 borderColor: string;
@@ -48,21 +86,6 @@ export declare const inputTokens: {
     noLabel: {
         base: CSSObject;
     };
-    readOnly: {
-        base: CSSObject;
-    };
-    disabled: {
-        base: CSSObject;
-    };
-    error: {
-        base: CSSObject;
-        hover: {
-            base: CSSObject;
-        };
-        focus: {
-            base: CSSObject;
-        };
-    };
     label: {
         base: CSSObject;
         hover: {

package/dist/helpers/Input/Input.tokens.js

@@ -1,46 +1,47 @@
 import { ddsBaseTokens, ddsReferenceTokens } from '@norges-domstoler/dds-design-tokens';
-import 'styled-components';
-import '../styling/focusVisible.js';
-import { hoverInputfield, hoverDangerInputfield } from '../styling/hover.js';
-import { focusInputfield, focusDangerInputfield } from '../styling/focus.js';
-import { dangerInputfield } from '../styling/danger.js';
-import '../styling/selection.js';
 
 var colors = ddsBaseTokens.colors,
     spacing = ddsBaseTokens.spacing,
     fontPackages = ddsBaseTokens.fontPackages,
     border = ddsBaseTokens.border;
 var TextInput = ddsReferenceTokens.textInput;
-var inputBase = Object.assign({
-  color: TextInput.input.textColor,
-  borderRadius: TextInput.input.borderRadius,
-  border: "".concat(border.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(colors.DdsColorNeutralsGray5),
-  borderColor: TextInput.input.borderColor,
-  backgroundColor: colors.DdsColorNeutralsWhite
-}, TextInput.input.font);
-var inputFocusBase = Object.assign({}, focusInputfield);
-var inputHoverBase = Object.assign({}, hoverInputfield);
+var input = {
+  base: {
+    color: TextInput.input.textColor,
+    borderRadius: TextInput.input.borderRadius,
+    border: "".concat(border.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(colors.DdsColorNeutralsGray5),
+    borderColor: TextInput.input.borderColor,
+    backgroundColor: colors.DdsColorNeutralsWhite,
+    padding: "".concat(spacing.SizesDdsSpacingLocalX075, " ").concat(spacing.SizesDdsSpacingLocalX1, " ").concat(spacing.SizesDdsSpacingLocalX075, " ").concat(spacing.SizesDdsSpacingLocalX075)
+  },
+  disabled: {
+    color: colors.DdsColorNeutralsGray7,
+    backgroundColor: colors.DdsColorNeutralsGray1
+  },
+  readOnly: {
+    backgroundColor: 'transparent'
+  },
+  sizes: {
+    medium: {
+      padding: spacing.SizesDdsSpacingLocalX075,
+      font: fontPackages.body_sans_02.base
+    },
+    small: {
+      padding: "".concat(spacing.SizesDdsSpacingLocalX05, " ").concat(spacing.SizesDdsSpacingLocalX075, " ").concat(spacing.SizesDdsSpacingLocalX05, " ").concat(spacing.SizesDdsSpacingLocalX075),
+      font: fontPackages.body_sans_01.base
+    },
+    tiny: {
+      padding: "".concat(spacing.SizesDdsSpacingLocalX025, " ").concat(spacing.SizesDdsSpacingLocalX05, " ").concat(spacing.SizesDdsSpacingLocalX025, " ").concat(spacing.SizesDdsSpacingLocalX05),
+      font: fontPackages.supportingStyle_tiny_01.base
+    }
+  }
+};
 var inputHasLabelBase = {
   padding: "".concat(spacing.SizesDdsSpacingLocalX075NumberPx + fontPackages.supportingStyle_label_01.numbers.lineHeightNumber * 0.01 * fontPackages.supportingStyle_label_01.numbers.fontSizeNumber, "px ").concat(spacing.SizesDdsSpacingLocalX1, " ").concat(spacing.SizesDdsSpacingLocalX075, " ").concat(spacing.SizesDdsSpacingLocalX1)
 };
 var inputNoLabelBase = {
   padding: "".concat(spacing.SizesDdsSpacingLocalX075, " ").concat(spacing.SizesDdsSpacingLocalX1, " ").concat(spacing.SizesDdsSpacingLocalX075, " ").concat(spacing.SizesDdsSpacingLocalX1)
 };
-var inputDisabledBase = {
-  cursor: 'not-allowed',
-  color: colors.DdsColorNeutralsGray7,
-  backgroundColor: colors.DdsColorNeutralsGray1
-};
-var inputErrorBase = Object.assign({}, dangerInputfield);
-var inputErrorHoverBase = Object.assign({}, hoverDangerInputfield);
-var inputErrorFocusBase = Object.assign({}, focusDangerInputfield);
-var inputReadOnlyBase = {
-  border: 'none',
-  outline: 'none',
-  cursor: 'default',
-  backgroundColor: 'transparent',
-  paddingLeft: spacing.SizesDdsSpacingLocalX1
-};
 var inputLabelBase = {
   padding: "".concat(spacing.SizesDdsSpacingLocalX075, " ").concat(spacing.SizesDdsSpacingLocalX1)
 };
@@ -53,16 +54,12 @@ var inputLabelFocusBase = {
 var inputLabelDisabledBase = {
   color: colors.DdsColorNeutralsGray6
 };
+var container = {
+  gap: spacing.SizesDdsSpacingLocalX0125
+};
 var inputTokens = {
-  baseInput: {
-    base: inputBase,
-    focus: {
-      base: inputFocusBase
-    },
-    hover: {
-      base: inputHoverBase
-    }
-  },
+  input: input,
+  container: container,
   general: TextInput,
   hasLabel: {
     base: inputHasLabelBase
@@ -70,21 +67,6 @@ var inputTokens = {
   noLabel: {
     base: inputNoLabelBase
   },
-  readOnly: {
-    base: inputReadOnlyBase
-  },
-  disabled: {
-    base: inputDisabledBase
-  },
-  error: {
-    base: inputErrorBase,
-    hover: {
-      base: inputErrorHoverBase
-    },
-    focus: {
-      base: inputErrorFocusBase
-    }
-  },
   label: {
     base: inputLabelBase,
     hover: {

package/dist/helpers/Input/Input.types.d.ts

@@ -1,8 +1,11 @@
 import { InputHTMLAttributes } from 'react';
 import { Property } from 'csstype';
+export declare type InputSize = 'medium' | 'small' | 'tiny';
 export declare type InputProps = {
     /**Ledetekst for input. */
     label?: string;
+    /**Størrelse på inputfeltet. */
+    componentSize?: InputSize;
     /**Bredde for inputfeltet. */
     width?: Property.Width<string>;
     /**Hjelpetekst. */
@@ -10,11 +13,6 @@ export declare type InputProps = {
     /**Feilmelding. Setter også error state. */
     errorMessage?: string;
 } & InputHTMLAttributes<HTMLInputElement>;
-export declare type LabelPresence = 'hasLabel' | 'noLabel';
-export declare type StyledInputProps = Pick<InputProps, 'readOnly' | 'disabled'> & {
+export declare type StyledInputProps = Pick<InputProps, 'readOnly' | 'disabled' | 'componentSize'> & {
     hasErrorMessage: boolean;
-    hasLabel: LabelPresence;
-};
-export declare type StyledLabelProps = {
-    disabled?: boolean;
 };

package/dist/helpers/Input/Input.utils.d.ts

@@ -0,0 +1,3 @@
+import { IconSize } from '../../components/Icon';
+import { InputSize } from './Input.types';
+export declare const getFormInputIconSize: (componentSize: InputSize) => IconSize;

package/dist/helpers/Input/Input.utils.js

@@ -0,0 +1,14 @@
+var getFormInputIconSize = function getFormInputIconSize(componentSize) {
+  switch (componentSize) {
+    case 'medium':
+      return 'medium';
+
+    case 'small':
+      return 'small';
+
+    case 'tiny':
+      return 'small';
+  }
+};
+
+export { getFormInputIconSize };

package/dist/helpers/Input/index.d.ts

@@ -1,3 +1,4 @@
 export * from './Input.styles';
 export * from './Input.types';
 export * from './Input.tokens';
+export * from './Input.utils';

package/dist/helpers/SelectionControl/SelectionControl.styles.d.ts

@@ -0,0 +1,15 @@
+declare type SelectionControlType = 'radio' | 'checkbox';
+declare type CustomSelectionControlProps = {
+    controlType?: SelectionControlType;
+};
+export declare const CustomSelectionControl: import("styled-components").StyledComponent<"span", any, CustomSelectionControlProps, never>;
+declare type ContainerProps = {
+    hasLabel?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    error?: boolean;
+    indeterminate?: boolean;
+    controlType: SelectionControlType;
+};
+export declare const Container: import("styled-components").StyledComponent<"label", any, ContainerProps, never>;
+export {};

package/dist/helpers/SelectionControl/SelectionControl.styles.js

@@ -0,0 +1,36 @@
+import styled, { css } from 'styled-components';
+import { focusVisible, focusVisibleTransitionValue } from '../styling/focusVisible.js';
+import '../styling/hover.js';
+import '../styling/focus.js';
+import '../styling/danger.js';
+import '../styling/selection.js';
+import { selectionControlTokens } from './SelectionControl.tokens.js';
+
+var selectionControl = selectionControlTokens.selectionControl,
+    container = selectionControlTokens.container,
+    checkmark = selectionControlTokens.checkmark;
+var CustomSelectionControl = styled.span.withConfig({
+  displayName: "SelectionControlstyles__CustomSelectionControl",
+  componentId: "sc-1wv80b7-0"
+})(["position:absolute;left:0;box-sizing:border-box;border:", ";border-color:", ";background-color:", ";border-radius:", ";height:", ";width:", ";", " &:after{content:'';position:absolute;display:none;}"], selectionControl.base.border, selectionControl.base.borderColor, selectionControl.base.backgroundColor, selectionControl.base.borderRadius, selectionControl.base.height, selectionControl.base.width, function (_ref) {
+  var controlType = _ref.controlType;
+  return controlType === 'radio' && css(["border-radius:50%;"]);
+});
+var Container = styled.label.withConfig({
+  displayName: "SelectionControlstyles__Container",
+  componentId: "sc-1wv80b7-1"
+})(["position:relative;display:flex;align-items:center;cursor:pointer;user-select:none;width:fit-content;color:", ";", " input ~ ", "{@media (prefers-reduced-motion:no-preference){transition:box-shadow 0.2s,background-color 0.2s,border 0.2s;}}&:focus-within{", " @media (prefers-reduced-motion:no-preference){transition:", ";}}&:hover input:enabled ~ ", "{background-color:", ";box-shadow:", ";border-color:", ";}input:checked:enabled ~ ", ",input[data-indeterminate='true'] ~ ", "{border-color:", ";background-color:", ";}&:hover input:checked:enabled ~ ", ",&:hover input:enabled[data-indeterminate='true'] ~ ", "{background-color:", ";box-shadow:", ";border-color:", ";}", " input:disabled ~ ", "{", "}input:checked:disabled ~ ", ",input:disabled[data-indeterminate='true'] ~ ", "{background-color:", ";border-color:", ";}input:checked ~ ", ":after,input[data-indeterminate='true'] ~ ", ":after{display:block;}", " ", ""], container.color, function (_ref2) {
+  var hasLabel = _ref2.hasLabel;
+  return hasLabel ? css(["padding-left:", ";"], container.withLabel.paddingLeft) : css(["padding:", ";"], container.noLabel.padding);
+}, CustomSelectionControl, focusVisible, focusVisibleTransitionValue, CustomSelectionControl, selectionControl.hover.base.backgroundColor, selectionControl.hover.base.boxShadow, selectionControl.hover.base.borderColor, CustomSelectionControl, CustomSelectionControl, selectionControl.checked.base.borderColor, selectionControl.checked.base.backgroundColor, CustomSelectionControl, CustomSelectionControl, selectionControl.checked.hover.backgroundColor, selectionControl.checked.hover.boxShadow, selectionControl.checked.hover.borderColor, function (_ref3) {
+  var error = _ref3.error;
+  return error && css(["&:hover input:enabled ~ ", "{background-color:", ";box-shadow:", ";border-color:", ";}input ~ ", ",input:checked:enabled ~ ", ",&:hover input:checked:enabled ~ ", "{box-shadow:", ";border-color:", ";}"], CustomSelectionControl, selectionControl.hover.danger.backgroundColor, selectionControl.hover.danger.boxShadow, selectionControl.hover.danger.borderColor, CustomSelectionControl, CustomSelectionControl, CustomSelectionControl, selectionControl.danger.boxShadow, selectionControl.danger.borderColor);
+}, CustomSelectionControl, selectionControl.disabled, CustomSelectionControl, CustomSelectionControl, selectionControl.checked.disabled.backgroundColor, selectionControl.checked.disabled.borderColor, CustomSelectionControl, CustomSelectionControl, function (_ref4) {
+  var disabled = _ref4.disabled;
+  return disabled && css(["cursor:not-allowed;color:", ";"], container.disabled.color);
+}, function (_ref5) {
+  var controlType = _ref5.controlType;
+  return controlType === 'checkbox' ? css(["", ":after{border:solid ", ";border-width:0 1px 1px 0;left:35%;top:10%;width:30%;height:65%;transform:rotate(45deg);}input[data-indeterminate='true'] ~ ", ":after{border-width:1px 0 0 0;left:25%;top:50%;width:50%;height:1px;transform:none;}"], CustomSelectionControl, checkmark.checkbox.borderColor, CustomSelectionControl) : css(["", ":after{border-radius:50%;background-color:", ";width:", ";height:", ";left:", ";top:", ";}"], CustomSelectionControl, checkmark.radio.backgroundColor, checkmark.radio.width, checkmark.radio.height, checkmark.radio.left, checkmark.radio.top);
+});
+
+export { Container, CustomSelectionControl };

package/dist/helpers/SelectionControl/SelectionControl.tokens.d.ts

@@ -0,0 +1,83 @@
+export declare const selectionControlTokens: {
+    selectionControl: {
+        base: {
+            border: string;
+            borderColor: string;
+            backgroundColor: string;
+            borderRadius: string;
+            height: string;
+            width: string;
+        };
+        hover: {
+            base: {
+                backgroundColor: string;
+                boxShadow: string;
+                borderColor: string;
+            };
+            danger: {
+                backgroundColor: string;
+                boxShadow: string;
+                borderColor: string;
+            };
+        };
+        danger: {
+            boxShadow: string;
+            borderColor: string;
+        };
+        disabled: {
+            borderColor: string;
+        };
+        readOnly: {
+            backgroundColor: string;
+        };
+        checked: {
+            base: {
+                borderColor: string;
+                backgroundColor: string;
+            };
+            hover: {
+                backgroundColor: string;
+                boxShadow: string;
+                borderColor: string;
+            };
+            disabled: {
+                borderColor: string;
+                backgroundColor: string;
+            };
+            readOnly: {
+                borderColor: string;
+                backgroundColor: string;
+            };
+        };
+        checkbox: {
+            indeterminate: {
+                borderColor: string;
+                backgroundColor: string;
+            };
+        };
+    };
+    checkmark: {
+        checkbox: {
+            borderColor: string;
+        };
+        radio: {
+            backgroundColor: string;
+            height: string;
+            width: string;
+            left: string;
+            top: string;
+        };
+    };
+    container: {
+        color: string;
+        disabled: {
+            color: string;
+        };
+        withLabel: {
+            paddingLeft: string;
+        };
+        noLabel: {
+            padding: string;
+        };
+    };
+};

package/dist/helpers/SelectionControl/SelectionControl.tokens.js

@@ -0,0 +1,100 @@
+import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
+import { selectionControlSize, selectionControlSizeNumberPx } from './SelectionControl.utils.js';
+import 'styled-components';
+import '../styling/focusVisible.js';
+import { hoverInputfield } from '../styling/hover.js';
+import '../styling/focus.js';
+import { dangerInputfield } from '../styling/danger.js';
+import '../styling/selection.js';
+
+var colors = ddsBaseTokens.colors,
+    spacing = ddsBaseTokens.spacing,
+    borderRadius = ddsBaseTokens.borderRadius;
+var checkmark = {
+  checkbox: {
+    borderColor: colors.DdsColorNeutralsWhite
+  },
+  radio: {
+    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 selectionControl = {
+  base: {
+    border: '1px solid',
+    borderColor: colors.DdsColorNeutralsGray5,
+    backgroundColor: colors.DdsColorNeutralsWhite,
+    borderRadius: borderRadius.RadiiDdsBorderRadius1Radius,
+    height: selectionControlSize,
+    width: selectionControlSize
+  },
+  hover: {
+    base: {
+      backgroundColor: colors.DdsColorInteractiveLightest,
+      boxShadow: "inset 0 0 0 1px ".concat(hoverInputfield.borderColor),
+      borderColor: hoverInputfield.borderColor
+    },
+    danger: {
+      backgroundColor: colors.DdsColorDangerLightest,
+      boxShadow: "inset 0 0 0 1px ".concat(dangerInputfield.borderColor),
+      borderColor: dangerInputfield.borderColor
+    }
+  },
+  danger: {
+    boxShadow: "inset 0 0 0 1px ".concat(dangerInputfield.borderColor),
+    borderColor: dangerInputfield.borderColor
+  },
+  disabled: {
+    borderColor: colors.DdsColorNeutralsGray5
+  },
+  readOnly: {
+    backgroundColor: 'transparent'
+  },
+  checked: {
+    base: {
+      borderColor: colors.DdsColorInteractiveBase,
+      backgroundColor: colors.DdsColorInteractiveBase
+    },
+    hover: {
+      backgroundColor: colors.DdsColorInteractiveDark,
+      boxShadow: "inset 0 0 0 1px  ".concat(colors.DdsColorInteractiveDark),
+      borderColor: colors.DdsColorInteractiveDark
+    },
+    disabled: {
+      borderColor: colors.DdsColorNeutralsGray6,
+      backgroundColor: colors.DdsColorNeutralsGray6
+    },
+    readOnly: {
+      borderColor: colors.DdsColorNeutralsGray6,
+      backgroundColor: colors.DdsColorNeutralsGray6
+    }
+  },
+  checkbox: {
+    indeterminate: {
+      borderColor: colors.DdsColorInteractiveBase,
+      backgroundColor: colors.DdsColorInteractiveBase
+    }
+  }
+};
+var container = {
+  color: colors.DdsColorNeutralsGray9,
+  disabled: {
+    color: colors.DdsColorNeutralsGray6
+  },
+  withLabel: {
+    paddingLeft: "".concat(selectionControlSizeNumberPx + spacing.SizesDdsSpacingLocalX05NumberPx, "px")
+  },
+  noLabel: {
+    padding: "".concat(selectionControlSizeNumberPx / 2, "px")
+  }
+};
+var selectionControlTokens = {
+  selectionControl: selectionControl,
+  checkmark: checkmark,
+  container: container
+};
+
+export { selectionControlTokens };

package/dist/helpers/SelectionControl/SelectionControl.utils.d.ts

@@ -0,0 +1,2 @@
+export declare const selectionControlSizeNumberPx = 18;
+export declare const selectionControlSize: string;

package/dist/helpers/SelectionControl/SelectionControl.utils.js

@@ -0,0 +1,4 @@
+var selectionControlSizeNumberPx = 18;
+var selectionControlSize = "".concat(selectionControlSizeNumberPx, "px");
+
+export { selectionControlSize, selectionControlSizeNumberPx };

package/dist/helpers/SelectionControl/index.d.ts

@@ -0,0 +1,3 @@
+export * from './SelectionControl.styles';
+export * from './SelectionControl.tokens';
+export * from './SelectionControl.utils';

package/dist/helpers/styling/danger.js

@@ -3,7 +3,7 @@ import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
 var Colors = ddsBaseTokens.colors;
 var dangerInputfield = {
   borderColor: Colors.DdsColorDangerBase,
-  boxShadow: "inset 0 0 0 1px ".concat(Colors.DdsColorDangerBase)
+  boxShadow: "0 0 0 1px ".concat(Colors.DdsColorDangerBase)
 };
 
 export { dangerInputfield };

package/dist/helpers/styling/focus.js

@@ -1,15 +1,14 @@
 import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
 
-var Border = ddsBaseTokens.border,
-    Colors = ddsBaseTokens.colors;
+var border = ddsBaseTokens.border;
 var focusInputfield = {
   outline: 'none',
-  borderColor: Border.BordersDdsBorderFocusInputfieldStroke,
-  boxShadow: "inset 0 0 0 1px ".concat(Border.BordersDdsBorderFocusInputfieldStroke)
+  borderColor: border.BordersDdsBorderFocusInputfieldStroke,
+  boxShadow: "0 0 0 2px ".concat(border.BordersDdsBorderFocusInputfieldStroke)
 };
 var focusDangerInputfield = {
-  borderColor: Colors.DdsColorDangerDarker,
-  boxShadow: "inset 0 0 0 1px ".concat(Colors.DdsColorDangerDarker)
+  borderColor: border.BordersDdsBorderFocusInputfieldStroke,
+  boxShadow: "0 0 0 2px ".concat(border.BordersDdsBorderFocusInputfieldStroke)
 };
 
 export { focusDangerInputfield, focusInputfield };