@norges-domstoler/dds-components 6.0.0 → 7.0.1

package/dist/components/Typography/Typography.tokens.js

@@ -148,46 +148,6 @@ var bodySans04 = {
     marginBottom: fontPackages.body_sans_04.paragraph.paragraphSpacing
   }
 };
-var bodySerif01 = {
-  base: {
-    color: textDefault.textColor,
-    font: fontPackages.body_serif_01.base
-  },
-  margins: {
-    marginTop: 0,
-    marginBottom: fontPackages.body_serif_01.paragraph.paragraphSpacing
-  }
-};
-var bodySerif02 = {
-  base: {
-    color: textDefault.textColor,
-    font: fontPackages.body_serif_02.base
-  },
-  margins: {
-    marginTop: 0,
-    marginBottom: fontPackages.body_serif_02.paragraph.paragraphSpacing
-  }
-};
-var bodySerif03 = {
-  base: {
-    color: textDefault.textColor,
-    font: fontPackages.body_serif_03.base
-  },
-  margins: {
-    marginTop: 0,
-    marginBottom: fontPackages.body_serif_03.paragraph.paragraphSpacing
-  }
-};
-var bodySerif04 = {
-  base: {
-    color: textDefault.textColor,
-    font: fontPackages.body_serif_04.base
-  },
-  margins: {
-    marginTop: 0,
-    marginBottom: fontPackages.body_serif_04.paragraph.paragraphSpacing
-  }
-};
 var leadSans01 = {
   base: {
     color: textDefault.textColor,
@@ -260,48 +220,37 @@ var supportingStyleHelperText01 = {
     marginBottom: fontPackages.supportingStyle_helpertext_01.paragraph.paragraphSpacing
   }
 };
-var supportingStyleInputText01 = {
-  base: {
-    color: textDefault.textColor,
-    font: fontPackages.supportingStyle_inputtext_01.base,
-    margin: 0
-  },
-  margins: {
-    marginTop: fontPackages.supportingStyle_inputtext_01.paragraph.paragraphSpacing,
-    marginBottom: fontPackages.supportingStyle_inputtext_01.paragraph.paragraphSpacing
-  }
-};
-var supportingStyleInputText02 = {
+var supportingStylePlaceholderText01 = {
   base: {
-    color: textDefault.textColor,
-    font: fontPackages.supportingStyle_inputtext_02.base,
+    color: colors.DdsColorNeutralsGray6,
+    font: fontPackages.supportingStyle_placeholdertext_01.base,
     margin: 0
   },
   margins: {
-    marginTop: fontPackages.supportingStyle_inputtext_02.paragraph.paragraphSpacing,
-    marginBottom: fontPackages.supportingStyle_inputtext_02.paragraph.paragraphSpacing
+    marginTop: fontPackages.supportingStyle_placeholdertext_01.paragraph.paragraphSpacing,
+    marginBottom: fontPackages.supportingStyle_placeholdertext_01.paragraph.paragraphSpacing
   }
 };
-var supportingStyleInputText03 = {
+var supportingStylePlaceholderText02 = {
   base: {
-    color: textDefault.textColor,
-    font: fontPackages.supportingStyle_inputtext_03.base,
+    color: colors.DdsColorNeutralsGray6,
+    font: fontPackages.supportingStyle_placeholdertext_02.base,
     margin: 0
   },
   margins: {
-    marginTop: fontPackages.supportingStyle_inputtext_03.paragraph.paragraphSpacing,
-    marginBottom: fontPackages.supportingStyle_inputtext_03.paragraph.paragraphSpacing
+    marginTop: fontPackages.supportingStyle_placeholdertext_02.paragraph.paragraphSpacing,
+    marginBottom: fontPackages.supportingStyle_placeholdertext_02.paragraph.paragraphSpacing
   }
 };
-var supportingStylePlaceholderText01 = {
+var supportingStylePlaceholderText03 = {
   base: {
     color: colors.DdsColorNeutralsGray6,
-    font: fontPackages.supportingStyle_placeholdertext_01.base,
+    font: fontPackages.supportingStyle_placeholdertext_03.base,
     margin: 0
   },
   margins: {
-    marginTop: fontPackages.supportingStyle_placeholdertext_01.paragraph.paragraphSpacing,
-    marginBottom: fontPackages.supportingStyle_placeholdertext_01.paragraph.paragraphSpacing
+    marginTop: fontPackages.supportingStyle_placeholdertext_03.paragraph.paragraphSpacing,
+    marginBottom: fontPackages.supportingStyle_placeholdertext_03.paragraph.paragraphSpacing
   }
 };
 var supportingStyleTiny01 = {
@@ -341,10 +290,6 @@ var typographyTokens = {
     bodySans02: bodySans02,
     bodySans03: bodySans03,
     bodySans04: bodySans04,
-    bodySerif01: bodySerif01,
-    bodySerif02: bodySerif02,
-    bodySerif03: bodySerif03,
-    bodySerif04: bodySerif04,
     leadSans01: leadSans01,
     leadSans02: leadSans02,
     leadSans03: leadSans03,
@@ -352,10 +297,9 @@ var typographyTokens = {
     leadSans05: leadSans05,
     supportingStyleLabel01: supportingStyleLabel01,
     supportingStyleHelperText01: supportingStyleHelperText01,
-    supportingStyleInputText01: supportingStyleInputText01,
-    supportingStyleInputText02: supportingStyleInputText02,
-    supportingStyleInputText03: supportingStyleInputText03,
     supportingStylePlaceholderText01: supportingStylePlaceholderText01,
+    supportingStylePlaceholderText02: supportingStylePlaceholderText02,
+    supportingStylePlaceholderText03: supportingStylePlaceholderText03,
     supportingStyleTiny01: supportingStyleTiny01,
     supportingStyleTiny02: supportingStyleTiny02
   },

package/dist/components/Typography/Typography.utils.js

@@ -38,20 +38,15 @@ var getElementType = function getElementType(element) {
     case 'bodySans02':
     case 'bodySans03':
     case 'bodySans04':
-    case 'bodySerif01':
-    case 'bodySerif02':
-    case 'bodySerif03':
-    case 'bodySerif04':
     case 'leadSans01':
     case 'leadSans02':
     case 'leadSans03':
     case 'leadSans04':
     case 'leadSans05':
-    case 'supportingStyleInputText01':
-    case 'supportingStyleInputText02':
-    case 'supportingStyleInputText03':
     case 'supportingStyleHelperText01':
     case 'supportingStylePlaceholderText01':
+    case 'supportingStylePlaceholderText02':
+    case 'supportingStylePlaceholderText03':
     case 'supportingStyleTiny01':
     case 'supportingStyleTiny02':
     default:
@@ -69,7 +64,7 @@ var getMarginStyling = function getMarginStyling(typographyType, element, withMa
   return withMargins ? css(["", " margin-top:", ";margin-bottom:", ";", ""], isInlineElement(element) && element !== 'a' && css(["display:block;"]), typographyTokens.typographyType[typographyType].margins.marginTop, typographyTokens.typographyType[typographyType].margins.marginBottom, css(["padding-top:", ";"], typographyTokens.typographyType[typographyType].margins.paddingTop)) : css(["margin:0;"]);
 };
 var getAnchorStyling = function getAnchorStyling(external, interactionStyling, typographyType, withMargins) {
-  return css(["", " width:fit-content;text-decoration:underline;@media (prefers-reduced-motion:no-preference){transition:", ";}", " &:hover{color:", ";", "}", " &:focus-visible,&.focus-visible,&:focus-visible::selection,&.focus-visible::selection{", "}"], typographyType ? css(["", ";color:", ";", ""], typographyTokens.typographyType[typographyType].base.font, typographyTokens.typographyType[typographyType].base.color, getMarginStyling(typographyType, 'a', withMargins)) : css(["font:inherit;color:", ";", ""], typographyTokens.typographyType.a.base.color, getMarginStyling('a', 'a', withMargins)), focusVisibleLinkTransitionValue, external ? css(["display:inline-flex;align-items:center;gap:", ";"], typographyTokens.typographyType.a.base.gap) : '', typographyTokens.typographyType.a.hover.color, interactionStyling && interactionStyling.hover && css(["", ""], interactionStyling.hover), interactionStyling && interactionStyling.active && css(["&:active{", "}"], interactionStyling.active), focusVisibleLink);
+  return css(["", " color:", ";width:fit-content;text-decoration:underline;@media (prefers-reduced-motion:no-preference){transition:", ";}", " &:hover{color:", ";", "}", " &:focus-visible,&.focus-visible,&:focus-visible::selection,&.focus-visible::selection{", "}"], typographyType ? css(["", ";", ""], typographyTokens.typographyType[typographyType].base.font, getMarginStyling(typographyType, 'a', withMargins)) : css(["font:inherit;", ""], getMarginStyling('a', 'a', withMargins)), typographyTokens.typographyType.a.base.color, focusVisibleLinkTransitionValue, external && css(["display:inline-flex;align-items:center;gap:", ";"], typographyTokens.typographyType.a.base.gap), typographyTokens.typographyType.a.hover.color, interactionStyling && interactionStyling.hover && css(["", ""], interactionStyling.hover), interactionStyling && interactionStyling.active && css(["&:active{", "}"], interactionStyling.active), focusVisibleLink);
 };
 
 export { getAdditionalFontStyle, getAnchorStyling, getElementType, getMarginStyling, inlineElements, isInlineElement };

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 };