@norges-domstoler/dds-components 4.0.1 → 4.1.1

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

@@ -0,0 +1,495 @@
+import { ddsBaseTokens, ddsReferenceTokens } from '@norges-domstoler/dds-design-tokens';
+import { focusVisibleLink } from '../../helpers/styling/focusVisible.js';
+
+var Colors = ddsBaseTokens.colors,
+    FontPackages = ddsBaseTokens.fontPackages,
+    Spacing = ddsBaseTokens.spacing;
+var textDefault = ddsReferenceTokens.textDefault;
+var textColors = {
+  interactive: Colors.DdsColorInteractiveBase,
+  primary: Colors.DdsColorPrimaryBase,
+  danger: Colors.DdsColorDangerBase,
+  success: Colors.DdsColorSuccessBase,
+  warning: Colors.DdsColorWarningBase,
+  onLight: textDefault.textColor,
+  onDark: Colors.DdsColorNeutralsWhite,
+  gray1: Colors.DdsColorNeutralsGray1,
+  gray2: Colors.DdsColorNeutralsGray2,
+  gray3: Colors.DdsColorNeutralsGray3,
+  gray4: Colors.DdsColorNeutralsGray4,
+  gray5: Colors.DdsColorNeutralsGray5,
+  gray6: Colors.DdsColorNeutralsGray6,
+  gray7: Colors.DdsColorNeutralsGray7,
+  gray8: Colors.DdsColorNeutralsGray8,
+  gray9: Colors.DdsColorNeutralsGray9
+};
+var textColorsArray = ['interactive', 'primary', 'danger', 'success', 'warning', 'onLight', 'onDark', 'gray1', 'gray2', 'gray3', 'gray4', 'gray5', 'gray6', 'gray7', 'gray8', 'gray9'];
+var aBase = {
+  color: Colors.DdsColorInteractiveBase,
+  font: 'inherit',
+  textDecoration: 'underline',
+  width: 'fit-content'
+};
+var aMarginsBase = {
+  marginTop: 0,
+  marginBottom: FontPackages.body_sans_02.paragraph.paragraphSpacing
+};
+var aHoverBase = {
+  color: Colors.DdsColorInteractiveDark
+};
+var aFocusBase = Object.assign({}, focusVisibleLink);
+var aBoldBase = Object.assign(Object.assign({}, FontPackages.body_sans_02), {
+  fontWeight: 600
+});
+var boldBase = {
+  fontWeight: 600
+};
+var underlineBase = {
+  textDecoration: 'underline'
+};
+var italicBase = {
+  fontStyle: 'italic'
+};
+var headingSans01Base = Object.assign({
+  color: textDefault.textColor
+}, FontPackages.heading_sans_01.base);
+var headingSans01MarginsBase = {
+  marginTop: 0,
+  marginBottom: FontPackages.heading_sans_01.paragraph.paragraphSpacing,
+  paddingTop: Spacing.SpacingDdsSpacingPaddingTopHeadingSans01Top
+};
+var headingSans02Base = Object.assign({
+  color: textDefault.textColor
+}, FontPackages.heading_sans_02.base);
+var headingSans02MarginsBase = {
+  marginTop: 0,
+  marginBottom: FontPackages.heading_sans_02.paragraph.paragraphSpacing,
+  paddingTop: Spacing.SpacingDdsSpacingPaddingTopHeadingSans02Top
+};
+var headingSans03Base = Object.assign({
+  color: textDefault.textColor
+}, FontPackages.heading_sans_03.base);
+var headingSans03MarginsBase = {
+  marginTop: 0,
+  marginBottom: FontPackages.heading_sans_03.paragraph.paragraphSpacing,
+  paddingTop: Spacing.SpacingDdsSpacingPaddingTopHeadingSans03Top
+};
+var headingSans04Base = Object.assign({
+  color: textDefault.textColor
+}, FontPackages.heading_sans_04.base);
+var headingSans04MarginsBase = {
+  marginTop: 0,
+  marginBottom: FontPackages.heading_sans_04.paragraph.paragraphSpacing,
+  paddingTop: Spacing.SpacingDdsSpacingPaddingTopHeadingSans04Top
+};
+var headingSans05Base = Object.assign({
+  color: textDefault.textColor
+}, FontPackages.heading_sans_05.base);
+var headingSans05MarginsBase = {
+  marginTop: 0,
+  marginBottom: FontPackages.heading_sans_05.paragraph.paragraphSpacing,
+  paddingTop: Spacing.SpacingDdsSpacingPaddingTopHeadingSans05Top
+};
+var headingSans06Base = Object.assign({
+  color: textDefault.textColor
+}, FontPackages.heading_sans_06.base);
+var headingSans06MarginsBase = {
+  marginTop: 0,
+  marginBottom: FontPackages.heading_sans_06.paragraph.paragraphSpacing,
+  paddingTop: Spacing.SpacingDdsSpacingPaddingTopHeadingSans06Top
+};
+var headingSans07Base = Object.assign({
+  color: textDefault.textColor
+}, FontPackages.heading_sans_07.base);
+var headingSans07MarginsBase = {
+  marginTop: 0,
+  marginBottom: FontPackages.heading_sans_07.paragraph.paragraphSpacing,
+  paddingTop: Spacing.SpacingDdsSpacingPaddingTopHeadingSans07Top
+};
+var headingSans08Base = Object.assign({
+  color: textDefault.textColor
+}, FontPackages.heading_sans_08.base);
+var headingSans08MarginsBase = {
+  marginTop: 0,
+  marginBottom: FontPackages.heading_sans_08.paragraph.paragraphSpacing,
+  paddingTop: Spacing.SpacingDdsSpacingPaddingTopHeadingSans08Top
+};
+var bodySans01Base = Object.assign({
+  color: textDefault.textColor
+}, FontPackages.body_sans_01.base);
+var bodySans01MarginsBase = {
+  marginTop: 0,
+  marginBottom: FontPackages.body_sans_01.paragraph.paragraphSpacing
+};
+var bodySans02Base = Object.assign({
+  color: textDefault.textColor
+}, FontPackages.body_sans_02.base);
+var bodySans02MarginsBase = {
+  marginTop: 0,
+  marginBottom: FontPackages.body_sans_02.paragraph.paragraphSpacing
+};
+var bodySans03Base = Object.assign({
+  color: textDefault.textColor
+}, FontPackages.body_sans_03.base);
+var bodySans03MarginsBase = {
+  marginTop: 0,
+  marginBottom: FontPackages.body_sans_03.paragraph.paragraphSpacing
+};
+var bodySans04Base = Object.assign({
+  color: textDefault.textColor
+}, FontPackages.body_sans_04.base);
+var bodySans04MarginsBase = {
+  marginTop: 0,
+  marginBottom: FontPackages.body_sans_04.paragraph.paragraphSpacing
+};
+var bodySerif01Base = Object.assign({
+  color: textDefault.textColor
+}, FontPackages.body_serif_01.base);
+var bodySerif01MarginsBase = {
+  marginTop: 0,
+  marginBottom: FontPackages.body_serif_01.paragraph.paragraphSpacing
+};
+var bodySerif02Base = Object.assign({
+  color: textDefault.textColor
+}, FontPackages.body_serif_02.base);
+var bodySerif02MarginsBase = {
+  marginTop: 0,
+  marginBottom: FontPackages.body_serif_02.paragraph.paragraphSpacing
+};
+var bodySerif03Base = Object.assign({
+  color: textDefault.textColor
+}, FontPackages.body_serif_03.base);
+var bodySerif03MarginsBase = {
+  marginTop: 0,
+  marginBottom: FontPackages.body_serif_03.paragraph.paragraphSpacing
+};
+var bodySerif04Base = Object.assign({
+  color: textDefault.textColor
+}, FontPackages.body_serif_04.base);
+var bodySerif04MarginsBase = {
+  marginTop: 0,
+  marginBottom: FontPackages.body_serif_04.paragraph.paragraphSpacing
+};
+var leadSans01Base = Object.assign({
+  color: textDefault.textColor
+}, FontPackages.lead_sans_01.base);
+var leadSans01MarginsBase = {
+  marginTop: 0,
+  marginBottom: FontPackages.lead_sans_01.paragraph.paragraphSpacing
+};
+var leadSans02Base = Object.assign({
+  color: textDefault.textColor
+}, FontPackages.lead_sans_02.base);
+var leadSans02MarginsBase = {
+  marginTop: 0,
+  marginBottom: FontPackages.lead_sans_02.paragraph.paragraphSpacing
+};
+var leadSans03Base = Object.assign({
+  color: textDefault.textColor
+}, FontPackages.lead_sans_03.base);
+var leadSans03MarginsBase = {
+  marginTop: 0,
+  marginBottom: FontPackages.lead_sans_03.paragraph.paragraphSpacing
+};
+var leadSans04Base = Object.assign({
+  color: textDefault.textColor
+}, FontPackages.lead_sans_04.base);
+var leadSans04MarginsBase = {
+  marginTop: 0,
+  marginBottom: FontPackages.lead_sans_04.paragraph.paragraphSpacing
+};
+var leadSans05Base = Object.assign({
+  color: textDefault.textColor
+}, FontPackages.lead_sans_05.base);
+var leadSans05MarginsBase = {
+  marginTop: 0,
+  marginBottom: FontPackages.lead_sans_05.paragraph.paragraphSpacing
+};
+var supportingStyleLabel01Base = Object.assign(Object.assign({
+  color: Colors.DdsColorNeutralsGray7
+}, FontPackages.supportingStyle_label_01.base), {
+  margin: 0
+});
+var supportingStyleLabel01MarginsBase = {
+  marginTop: FontPackages.supportingStyle_label_01.paragraph.paragraphSpacing,
+  marginBottom: FontPackages.supportingStyle_label_01.paragraph.paragraphSpacing
+};
+var supportingStyleHelperText01Base = Object.assign(Object.assign({
+  color: Colors.DdsColorNeutralsGray6
+}, FontPackages.supportingStyle_helpertext_01.base), {
+  margin: 0
+});
+var supportingStyleHelperText01MarginsBase = {
+  marginTop: FontPackages.supportingStyle_helpertext_01.paragraph.paragraphSpacing,
+  marginBottom: FontPackages.supportingStyle_helpertext_01.paragraph.paragraphSpacing
+};
+var supportingStyleInputText01Base = Object.assign(Object.assign({
+  color: textDefault.textColor
+}, FontPackages.supportingStyle_inputtext_01.base), {
+  margin: 0
+});
+var supportingStyleInputText01MarginsBase = {
+  marginTop: FontPackages.supportingStyle_inputtext_01.paragraph.paragraphSpacing,
+  marginBottom: FontPackages.supportingStyle_inputtext_01.paragraph.paragraphSpacing
+};
+var supportingStyleInputText02Base = Object.assign(Object.assign({
+  color: textDefault.textColor
+}, FontPackages.supportingStyle_inputtext_02.base), {
+  margin: 0
+});
+var supportingStyleInputText02MarginsBase = {
+  marginTop: FontPackages.supportingStyle_inputtext_02.paragraph.paragraphSpacing,
+  marginBottom: FontPackages.supportingStyle_inputtext_02.paragraph.paragraphSpacing
+};
+var supportingStyleInputText03Base = Object.assign(Object.assign({
+  color: textDefault.textColor
+}, FontPackages.supportingStyle_inputtext_03.base), {
+  margin: 0
+});
+var supportingStyleInputText03MarginsBase = {
+  marginTop: FontPackages.supportingStyle_inputtext_03.paragraph.paragraphSpacing,
+  marginBottom: FontPackages.supportingStyle_inputtext_03.paragraph.paragraphSpacing
+};
+var supportingStylePlaceholderText01Base = Object.assign(Object.assign({
+  color: Colors.DdsColorNeutralsGray6
+}, FontPackages.supportingStyle_placeholdertext_01.base), {
+  margin: 0
+});
+var supportingStylePlaceholderText01MarginsBase = {
+  marginTop: FontPackages.supportingStyle_placeholdertext_01.paragraph.paragraphSpacing,
+  marginBottom: FontPackages.supportingStyle_placeholdertext_01.paragraph.paragraphSpacing
+};
+var supportingStyleTiny01Base = Object.assign(Object.assign({
+  color: textDefault.textColor
+}, FontPackages.supportingStyle_tiny_01.base), {
+  margin: 0
+});
+var supportingStyleTiny01MarginsBase = {
+  marginTop: FontPackages.supportingStyle_tiny_01.paragraph.paragraphSpacing,
+  marginBottom: FontPackages.supportingStyle_tiny_01.paragraph.paragraphSpacing
+};
+var supportingStyleTiny02Base = Object.assign(Object.assign({
+  color: textDefault.textColor
+}, FontPackages.supportingStyle_tiny_02.base), {
+  margin: 0
+});
+var supportingStyleTiny02MarginsBase = {
+  marginTop: FontPackages.supportingStyle_tiny_02.paragraph.paragraphSpacing,
+  marginBottom: FontPackages.supportingStyle_tiny_02.paragraph.paragraphSpacing
+};
+var selectionBase = {
+  color: textDefault.textColor,
+  backgroundColor: Colors.DdsColorTertiaryLightest
+};
+var typographyTokens = {
+  selection: {
+    base: selectionBase
+  },
+  typographyType: {
+    a: {
+      base: aBase,
+      hover: {
+        base: aHoverBase
+      },
+      margins: {
+        base: aMarginsBase
+      },
+      focus: {
+        base: aFocusBase
+      },
+      bold: {
+        base: aBoldBase
+      },
+      icon: {
+        marginLeft: Spacing.SizesDdsSpacingLocalX0125
+      }
+    },
+    headingSans01: {
+      base: headingSans01Base,
+      margins: {
+        base: headingSans01MarginsBase
+      }
+    },
+    headingSans02: {
+      base: headingSans02Base,
+      margins: {
+        base: headingSans02MarginsBase
+      }
+    },
+    headingSans03: {
+      base: headingSans03Base,
+      margins: {
+        base: headingSans03MarginsBase
+      }
+    },
+    headingSans04: {
+      base: headingSans04Base,
+      margins: {
+        base: headingSans04MarginsBase
+      }
+    },
+    headingSans05: {
+      base: headingSans05Base,
+      margins: {
+        base: headingSans05MarginsBase
+      }
+    },
+    headingSans06: {
+      base: headingSans06Base,
+      margins: {
+        base: headingSans06MarginsBase
+      }
+    },
+    headingSans07: {
+      base: headingSans07Base,
+      margins: {
+        base: headingSans07MarginsBase
+      }
+    },
+    headingSans08: {
+      base: headingSans08Base,
+      margins: {
+        base: headingSans08MarginsBase
+      }
+    },
+    bodySans01: {
+      base: bodySans01Base,
+      margins: {
+        base: bodySans01MarginsBase
+      }
+    },
+    bodySans02: {
+      base: bodySans02Base,
+      margins: {
+        base: bodySans02MarginsBase
+      }
+    },
+    bodySans03: {
+      base: bodySans03Base,
+      margins: {
+        base: bodySans03MarginsBase
+      }
+    },
+    bodySans04: {
+      base: bodySans04Base,
+      margins: {
+        base: bodySans04MarginsBase
+      }
+    },
+    bodySerif01: {
+      base: bodySerif01Base,
+      margins: {
+        base: bodySerif01MarginsBase
+      }
+    },
+    bodySerif02: {
+      base: bodySerif02Base,
+      margins: {
+        base: bodySerif02MarginsBase
+      }
+    },
+    bodySerif03: {
+      base: bodySerif03Base,
+      margins: {
+        base: bodySerif03MarginsBase
+      }
+    },
+    bodySerif04: {
+      base: bodySerif04Base,
+      margins: {
+        base: bodySerif04MarginsBase
+      }
+    },
+    leadSans01: {
+      base: leadSans01Base,
+      margins: {
+        base: leadSans01MarginsBase
+      }
+    },
+    leadSans02: {
+      base: leadSans02Base,
+      margins: {
+        base: leadSans02MarginsBase
+      }
+    },
+    leadSans03: {
+      base: leadSans03Base,
+      margins: {
+        base: leadSans03MarginsBase
+      }
+    },
+    leadSans04: {
+      base: leadSans04Base,
+      margins: {
+        base: leadSans04MarginsBase
+      }
+    },
+    leadSans05: {
+      base: leadSans05Base,
+      margins: {
+        base: leadSans05MarginsBase
+      }
+    },
+    supportingStyleLabel01: {
+      base: supportingStyleLabel01Base,
+      margins: {
+        base: supportingStyleLabel01MarginsBase
+      }
+    },
+    supportingStyleHelperText01: {
+      base: supportingStyleHelperText01Base,
+      margins: {
+        base: supportingStyleHelperText01MarginsBase
+      }
+    },
+    supportingStyleInputText01: {
+      base: supportingStyleInputText01Base,
+      margins: {
+        base: supportingStyleInputText01MarginsBase
+      }
+    },
+    supportingStyleInputText02: {
+      base: supportingStyleInputText02Base,
+      margins: {
+        base: supportingStyleInputText02MarginsBase
+      }
+    },
+    supportingStyleInputText03: {
+      base: supportingStyleInputText03Base,
+      margins: {
+        base: supportingStyleInputText03MarginsBase
+      }
+    },
+    supportingStylePlaceholderText01: {
+      base: supportingStylePlaceholderText01Base,
+      margins: {
+        base: supportingStylePlaceholderText01MarginsBase
+      }
+    },
+    supportingStyleTiny01: {
+      base: supportingStyleTiny01Base,
+      margins: {
+        base: supportingStyleTiny01MarginsBase
+      }
+    },
+    supportingStyleTiny02: {
+      base: supportingStyleTiny02Base,
+      margins: {
+        base: supportingStyleTiny02MarginsBase
+      }
+    }
+  },
+  style: {
+    bold: {
+      base: boldBase
+    },
+    italic: {
+      base: italicBase
+    },
+    underline: {
+      base: underlineBase
+    }
+  }
+};
+
+export { textColors, textColorsArray, typographyTokens };

package/dist/helpers/Backdrop/Backdrop.js

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
+import { changeRGBAAlpha } from '../../utils/color.js';
+
+var Backdrop = styled.div.withConfig({
+  displayName: "Backdrop",
+  componentId: "sc-vimg90-0"
+})(["position:fixed;display:flex;align-items:center;justify-content:center;background-color:", ";overflow-y:auto;top:0;right:0;bottom:0;left:0;z-index:50;opacity:", ";@media (prefers-reduced-motion:no-preference){transition:opacity 0.2s;}"], changeRGBAAlpha(ddsBaseTokens.colors.DdsColorNeutralsGray9, 0.5), function (_ref) {
+  var isOpen = _ref.isOpen;
+  return isOpen ? 1 : 0;
+});
+
+export { Backdrop };

package/dist/helpers/Backdrop/Backdrop.utils.js

@@ -0,0 +1,16 @@
+var isVerticalScrollbarDisplayed = function isVerticalScrollbarDisplayed(container) {
+  return container.clientHeight > window.innerHeight;
+};
+
+function handleElementWithBackdropMount(container) {
+  if (isVerticalScrollbarDisplayed(container)) {
+    container.style.position = 'fixed';
+    container.style.overflowY = 'scroll';
+  }
+}
+function handleElementWithBackdropUnmount(container) {
+  container.style.removeProperty('position');
+  container.style.removeProperty('overflow-y');
+}
+
+export { handleElementWithBackdropMount, handleElementWithBackdropUnmount };

package/dist/helpers/Chevron/AnimatedChevronUpDown.js

@@ -0,0 +1,33 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { SvgChevron, SvgChevronlGroup, SvgChevronlLeft, SvgChevronlRight } from './AnimatedChevronUpDown.styles.js';
+
+var svgChevronLeftPath = 'M 1 0 L 5 4 C 5 4 5 4 5 4 L 4 5 C 4 5 4 5 4 5 C 4 5 4 5 4 5 L 0 1 C 0 1 0 1 0 1 L 1 0 C 1 0 1 0 1 0 C 1 0 1 0 1 0 L 1 0 Z';
+var svgChevronRightPath = 'M 3 4 L 7 0 L 8 1 C 8 1 8 1 8 1 L 4 5 L 3 4 C 3 4 3 4 3 4 L 3 4 Z';
+var AnimatedChevronUpDown = function AnimatedChevronUpDown(_ref) {
+  var isUp = _ref.isUp,
+      _ref$height = _ref.height,
+      height = _ref$height === void 0 ? '5px' : _ref$height,
+      _ref$width = _ref.width,
+      width = _ref$width === void 0 ? '8px' : _ref$width;
+  return jsx(SvgChevron, Object.assign({
+    viewBox: "0 0 8 5",
+    width: width,
+    height: height,
+    fill: "currentColor",
+    isUp: isUp
+  }, {
+    children: jsxs(SvgChevronlGroup, Object.assign({
+      isUp: isUp
+    }, {
+      children: [jsx(SvgChevronlLeft, {
+        d: svgChevronLeftPath,
+        isUp: isUp
+      }), jsx(SvgChevronlRight, {
+        d: svgChevronRightPath,
+        isUp: isUp
+      })]
+    }))
+  }));
+};
+
+export { AnimatedChevronUpDown };

package/dist/helpers/Chevron/AnimatedChevronUpDown.styles.js

@@ -0,0 +1,29 @@
+import styled from 'styled-components';
+
+var SvgChevron = styled.svg.withConfig({
+  displayName: "AnimatedChevronUpDownstyles__SvgChevron",
+  componentId: "sc-yey4nu-0"
+})(["display:inline-block;flex-shrink:0;position:relative;text-align:center;vertical-align:middle;"]);
+var SvgChevronlGroup = styled.g.withConfig({
+  displayName: "AnimatedChevronUpDownstyles__SvgChevronlGroup",
+  componentId: "sc-yey4nu-1"
+})(["transition:transform 0.2s linear;transform:", ";"], function (_ref) {
+  var isUp = _ref.isUp;
+  return isUp ? 'translateY(3px)' : 'translateY(0)';
+});
+var SvgChevronlLeft = styled.path.withConfig({
+  displayName: "AnimatedChevronUpDownstyles__SvgChevronlLeft",
+  componentId: "sc-yey4nu-2"
+})(["transition:transform 0.2s linear;transform-origin:1px 1px;transform:", ";"], function (_ref2) {
+  var isUp = _ref2.isUp;
+  return isUp ? 'rotate(-90deg) translateY(0)' : 'rotate(0) translateY(0)';
+});
+var SvgChevronlRight = styled.path.withConfig({
+  displayName: "AnimatedChevronUpDownstyles__SvgChevronlRight",
+  componentId: "sc-yey4nu-3"
+})(["transition:transform 0.2s linear;transform-origin:7px 1px;transform:", ";"], function (_ref3) {
+  var isUp = _ref3.isUp;
+  return isUp ? 'rotate(90deg) translateY(0)' : 'rotate(0) translateY(0)';
+});
+
+export { SvgChevron, SvgChevronlGroup, SvgChevronlLeft, SvgChevronlRight };

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

@@ -0,0 +1,39 @@
+import styled, { css } from 'styled-components';
+import { inputTokens } from './Input.tokens.js';
+import { typographyTokens } from '../../components/Typography/Typography.tokens.js';
+import { Typography } from '../../components/Typography/Typography.js';
+
+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, typographyTokens.selection.base, inputTokens.baseInput.focus.base, inputTokens.baseInput.hover.base);
+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) {
+  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",
+  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);
+});
+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 };