@hazelcast/ui 1.1.1 → 1.3.0

package/package.json

@@ -1,11 +1,13 @@
 {
   "name": "@hazelcast/ui",
-  "version": "1.1.1",
+  "version": "1.3.0",
   "description": "Hazelcast design system components",
   "author": "",
   "homepage": "https://github.com/hazelcast/frontend-shared#readme",
   "license": "Apache-2.0",
   "main": "lib/index.js",
+  "module": "lib/index.js",
+  "sideEffects": false,
   "directories": {
     "lib": "lib",
     "test": "__tests__"
@@ -23,12 +25,13 @@
   },
   "scripts": {
     "compile": "shx rm -f *.tsbuildinfo && shx rm -rf lib && shx mkdir lib && shx cp -r src/* lib && shx rm -rf lib/*.{tsx,ts} && shx rm -rf lib/**/*.{tsx,ts} && tsc -p tsconfig.build.json",
-    "test": "jest",
+    "test": "jest --maxWorkers=50%",
     "test:watch": "jest --watch",
     "start": "npm run storybook",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
     "publish-storybook": "chromatic --storybook-build-dir storybook-static --project-token $CHROMATIC_PROJECT_TOKEN --exit-zero-on-changes",
+    "chromatic": "chromatic --project-token=CHROMATIC_PROJECT_TOKEN",
     "test:visual": "loki --verboseRenderer --requireReference --reactUri file:./storybook-static --chromeFlags='--headless --disable-gpu --hide-scrollbars --no-sandbox --allow-file-access-from-files'",
     "test:visual:approve": "loki approve",
     "generate-screenshots": "npm run build-storybook && loki update --reactUri file:./storybook-static --chromeFlags='--headless --disable-gpu --hide-scrollbars --no-sandbox --allow-file-access-from-files'",
@@ -43,68 +46,72 @@
     "url": "https://github.com/hazelcast/frontend-shared/issues"
   },
   "dependencies": {
-    "@codemirror/basic-setup": "0.18.0",
-    "@codemirror/legacy-modes": "0.18.0",
-    "@codemirror/stream-parser": "0.18.2",
-    "@codemirror/view": "0.18.8",
-    "@hazelcast/helpers": "^1.1.1",
-    "@hazelcast/services": "^1.1.1",
-    "@headlessui/react": "^1.2.0",
-    "@icons-pack/react-simple-icons": "^3.13.0",
-    "@popperjs/core": "^2.5.3",
+    "@codemirror/basic-setup": "^0.19.1",
+    "@codemirror/stream-parser": "^0.19.3",
+    "@codemirror/view": "^0.19.35",
+    "@hazelcast/helpers": "^1.3.0",
+    "@hazelcast/services": "^1.3.0",
+    "@headlessui/react": "^1.4.2",
+    "@icons-pack/react-simple-icons": "^4.6.1",
+    "@popperjs/core": "^2.11.0",
+    "@types/react-modal": "^3.13.1",
     "@types/react-select": "3.0.26",
-    "@types/react-table": "^7.0.28",
-    "classnames": "^2.2.6",
-    "date-fns": "^2.16.1",
+    "@types/react-table": "^7.7.9",
+    "classnames": "^2.3.1",
+    "date-fns": "^2.27.0",
     "dequal": "^2.0.2",
-    "formik": "^2.2.0",
-    "rc-tooltip": "^4.2.3",
-    "react-datepicker": "^3.4.1",
-    "react-feather": "^2.0.8",
+    "focus-trap-react": "^8.9.0",
+    "formik": "^2.2.9",
+    "rc-tooltip": "^5.1.1",
+    "react-datepicker": "^4.5.0",
+    "react-feather": "^2.0.9",
     "react-merge-refs": "^1.1.0",
-    "react-modal": "^3.12.1",
+    "react-modal": "^3.14.4",
     "react-popper": "^2.2.3",
-    "react-resize-aware": "^3.1.0",
+    "react-resize-aware": "^3.1.1",
     "react-select": "^4.1.0",
-    "react-table": "^7.6.3",
+    "react-table": "^7.7.0",
     "react-uid": "^2.3.1",
-    "react-use": "^15.3.4",
+    "react-use": "^17.3.1",
     "use-deep-compare": "^1.1.0"
   },
   "devDependencies": {
-    "@hazelcast/test-helpers": "^1.1.1",
-    "@storybook/addon-docs": "6.1.21",
-    "@storybook/addons": "6.1.21",
-    "@storybook/preset-scss": "^1.0.2",
-    "@storybook/react": "6.1.21",
-    "@storybook/theming": "6.1.21",
-    "@types/classnames": "^2.2.10",
-    "@types/enzyme": "^3.10.8",
+    "@codemirror/legacy-modes": "0.19.0",
+    "@hazelcast/test-helpers": "^1.3.0",
+    "@storybook/addon-docs": "^6.4.9",
+    "@storybook/addons": "^6.4.9",
+    "@storybook/builder-webpack5": "^6.4.9",
+    "@storybook/manager-webpack5": "^6.4.9",
+    "@storybook/preset-scss": "^1.0.3",
+    "@storybook/react": "^6.4.9",
+    "@storybook/theming": "^6.4.9",
+    "@types/classnames": "^2.3.1",
+    "@types/enzyme": "^3.10.10",
     "@types/enzyme-adapter-react-16": "^1.0.6",
-    "@types/react": "^16.14.4",
-    "@types/react-datepicker": "^3.1.3",
-    "@types/react-dom": "^16.9.11",
-    "@types/react-modal": "^3.10.6",
+    "@types/jest-axe": "^3.5.3",
+    "@types/react": "^16.14.21",
+    "@types/react-datepicker": "^4.3.2",
+    "@types/react-dom": "^16.9.14",
     "doiuse": "^4.2.0",
     "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.5",
+    "enzyme-adapter-react-16": "^1.15.6",
+    "jest-axe": "^5.0.1",
     "loki": "^0.28.1",
-    "postcss": "^8.1.1",
-    "postcss-cli": "^8.1.0",
-    "postcss-reporter": "^7.0.1",
-    "postcss-scss": "^3.0.2",
+    "postcss": "^8.4.5",
+    "postcss-cli": "^9.1.0",
+    "postcss-reporter": "^7.0.4",
+    "postcss-scss": "^4.0.2",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
-    "storybook-addon-designs": "5.4.2",
-    "stylelint": "^13.7.2",
-    "stylelint-config-prettier": "^8.0.2",
-    "stylelint-config-standard": "^20.0.0",
-    "stylelint-scss": "^3.18.0",
-    "yup": "^0.32.9"
+    "storybook-addon-designs": "^6.2.0",
+    "stylelint": "^14.1.0",
+    "stylelint-config-prettier": "^9.0.3",
+    "stylelint-config-standard": "^24.0.0",
+    "stylelint-config-standard-scss": "^3.0.0",
+    "stylelint-prettier": "^2.0.0",
+    "stylelint-scss": "^4.0.1",
+    "webpack": "^5.65.0",
+    "yup": "^0.32.11"
   },
-  "peerDependencies": {
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0"
-  },
-  "gitHead": "5a0535dc082f67640534d78d666ccc9e720828b4"
+  "gitHead": "7cd01422db092f9a01102d2ab48d6c3cfcdb6e70"
 }

package/styles/constants/_animations.scss

@@ -1,5 +1,4 @@
 // animation globals
 
 $transitionTimeMedium: 0.2s;
-
 $durationLoader: 1.6s;

package/styles/constants/_colors.scss

@@ -2,34 +2,25 @@
 $colorPrimaryLight: #2d7de4 !default;
 $colorPrimary: #2160c0 !default;
 $colorPrimaryDark: #003b87 !default;
-
 $colorNeutralWhite: #fff !default;
 $colorNeutralLighter: #fafafa !default;
 $colorNeutralLight: #b7c1cb !default;
 $colorNeutral: #dbdbdb !default;
-
 $colorSuccessLight: #68c200 !default;
 $colorSuccess: #008a00 !default;
 $colorSuccessDark: #005c09 !default;
-
 $colorInfoLight: #cbdbff !default;
 $colorInfo: #87a7ee !default;
 $colorInfoDark: #4a71c4 !default;
-
 $colorWarningLight: #f9b721 !default;
 $colorWarning: #f47027 !default;
 $colorWarningDark: #ad6200 !default;
-
 $colorErrorLight: #e75851 !default;
 $colorError: #b00020 !default;
 $colorErrorDark: #891b15 !default;
-
 $colorText: #041a3b !default;
 $colorTextSecondary: #707482 !default;
 $colorTextSubdued: #69707d !default;
-
 $colorOverlayBackground: #f2f5f9 !default;
-
 $colorAccessibilityOutline: #9648bd !default;
-
-$colorShadow: rgba(53, 61, 73, 0.2) !default;
+$colorShadow: rgb(53 61 73 / 20%) !default;

package/styles/constants/_sizes.scss

@@ -4,53 +4,37 @@
 // Any spacing should be expressed as a multiplier if $grid
 
 $grid: 0.25rem !default;
-
 $alertWidth: 350px !default;
-
 $borderRadius: $grid * 1.25 !default;
 $borderRadiusButtonSmall: $grid * 5 !default;
-
 $borderRadiusToast: 37px !default;
-
 $borderRadiusBadge: 37px !default;
-
 $borderRadiusTimeField: 3px !default;
 
 // It does not make sense to express separator width in REMs since we do not need it to scale with the base font size
 $separatorWidth: 1px !default;
-
 $borderWidth: 1px !default;
 $borderWidthButton: 1px !default;
-
 $outlineWidth: 2px !default;
-
 $iconStrokeWidth: 1.5px !default;
 $iconStrokeWidthBold: 3px !default;
-
 $iconSizeSmall: $grid * 4 !default;
 $iconSizeSmallMedium: $grid * 5 !default;
 $iconSizeMedium: $grid * 6 !default;
 $iconSizeLarge: $grid * 10 !default;
 $iconSizeXLarge: $grid * 12 !default;
-
 $tooltipArrowSize: 6px !default;
-
 $tooltipMaxWidth: 550px !default;
-
 $buttonMaxWidth: 370px !default;
-
 $toastMaxWidth: 580px !default;
-
 $inputHeight: $grid * 10 !default;
 $inputHeightSmall: $grid * 7.5 !default;
-
 $cardShadowSize: 1px !default;
 $cardShadowBlur: 4px !default;
-
 $selectMenuShadowSize: 1px !default;
 $selectMenuShadowBlur: 4px !default;
 
-//Overlay
+// Overlay
 $overlayContentMaxWidth: 1000px;
 
 // Modal
@@ -65,22 +49,20 @@ $dialogMinHeight: 200px !default;
 
 // border radius on left/right size of the progress tracker
 $sliderTrackBorderRadius: $grid * 2;
+
 // height of the track
 $slideTrackHeight: $grid * 2;
 $sliderThumbBorderSize: $grid * 1.5; // in rem
 $sliderThumbHoverBorderSize: 1px;
-
 $sliderThumbShadowSize: 1px;
 $sliderThumbShadowBlur: $grid;
 $sliderFillBorderSize: 1px;
-
-$emptyStateMaxWidth: 960px !important;
 $emptyStateButtonMinWidthNormal: 120px !default;
 $emptyStateButtonMinWidthLarge: 140px !default;
-
 $borderRadiusNotification: 3px;
 
 // Table column widths
-$tableColumnMinWidth: 30;
-$tableColumnWidth: 150;
-$tableColumnMaxWidth: 200;
+$tableColumnMinWidth: 60;
+$tableColumnWidth: 170;
+$tableColumnMaxWidth: 600;
+$errorHeight: $grid * 4.75;

package/styles/constants/_typography.scss

@@ -1,12 +1,11 @@
-$fontFamilyHeading: 'Ubuntu', sans-serif !default;
+$fontFamilyHeading: 'Roboto', 'Helvetica', 'Arial', sans-serif !default;
 $fontWeightHeadingLight: 300 !default;
 $fontWeightHeadingRegular: 400 !default;
 $fontWeightHeadingBold: 500 !default;
-
-$fontFamilyText: 'Open Sans', sans-serif !default;
+$fontFamilyText: 'Roboto', 'Helvetica', 'Arial', sans-serif !default;
 $fontWeightTextLight: 300 !default;
 $fontWeightTextRegular: 400 !default;
-$fontWeightTextBold: 600 !default;
+$fontWeightTextBold: 500 !default;
 
 // https://www.figma.com/file/8mVm6LTbp2Z0RaWWjTZoft/%F0%9F%90%9DHIVE?node-id=0%3A136
 $fontSizeH1: 2rem !default;
@@ -18,7 +17,6 @@ $fontSizeBodyNormal: 1rem !default;
 $fontSizeBodySmall: 0.875rem !default;
 $fontSizeBodySmaller: 0.75rem !default;
 $fontSizeBodyTiny: 0.625rem !default;
-
 $letterSpacingH1: 0.25px !default;
 $letterSpacingH2: 0 !default;
 $letterSpacingH3: 0.15px !default;
@@ -28,7 +26,6 @@ $letterSpacingBodyNormal: 0.5px !default;
 $letterSpacingBodySmall: 0.25px !default;
 $letterSpacingBodySmaller: normal !default;
 $letterSpacingBodyTiny: normal !default;
-
 $lineHeightH1: normal !default;
 $lineHeightH2: normal !default;
 $lineHeightH3: normal !default;
@@ -39,33 +36,37 @@ $lineHeightBodySmaller: normal !default;
 $lineHeightBodyTiny: normal !default;
 
 @function override($override: false) {
-  @if ($override) {
+  @if $override {
     @return '!important';
   }
+
   @return '';
 }
 
 @mixin typographyH1($override: false) {
-  font-family: $fontFamilyHeading #{override($override)}; /* stylelint-disable-line font-family-no-missing-generic-family-keyword */
+  font-family: $fontFamilyHeading #{override($override)};
   font-weight: $fontWeightHeadingBold #{override($override)};
   font-size: $fontSizeH1 #{override($override)};
   letter-spacing: $letterSpacingH1 #{override($override)};
   line-height: $lineHeightH1 #{override($override)};
 }
+
 @mixin typographyH2($override: false) {
-  font-family: $fontFamilyHeading #{override($override)}; /* stylelint-disable-line font-family-no-missing-generic-family-keyword */
+  font-family: $fontFamilyHeading #{override($override)};
   font-weight: $fontWeightHeadingBold #{override($override)};
   font-size: $fontSizeH2 #{override($override)};
   letter-spacing: $letterSpacingH2 #{override($override)};
   line-height: $lineHeightH2 #{override($override)};
 }
+
 @mixin typographyH3($override: false) {
-  font-family: $fontFamilyHeading #{override($override)}; /* stylelint-disable-line font-family-no-missing-generic-family-keyword */
+  font-family: $fontFamilyHeading #{override($override)};
   font-weight: $fontWeightHeadingBold #{override($override)};
   font-size: $fontSizeH3 #{override($override)};
   letter-spacing: $letterSpacingH3 #{override($override)};
   line-height: $lineHeightH3 #{override($override)};
 }
+
 @mixin typographyButton($size: 'medium') {
   font-family: $fontFamilyText;
   line-height: $lineHeightButton;
@@ -75,23 +76,28 @@ $lineHeightBodyTiny: normal !default;
     font-size: $fontSizeButton;
     letter-spacing: $letterSpacingButton;
   }
+
   @if $size == 'small' {
     font-weight: $fontWeightTextRegular;
     font-size: $fontSizeButtonSmall;
     letter-spacing: $letterSpacingButtonSmall;
   }
 }
+
 @mixin typographyBodyWeight($weight: 'regular') {
   @if $weight == 'regular' {
     font-weight: $fontWeightTextRegular;
   }
+
   @if $weight == 'bold' {
     font-weight: $fontWeightTextBold;
   }
+
   @if $weight == 'light' {
     font-weight: $fontWeightTextLight;
   }
 }
+
 @mixin typographyBodyNormal($weight: 'regular') {
   font-family: $fontFamilyText;
   font-size: $fontSizeBodyNormal;
@@ -100,6 +106,7 @@ $lineHeightBodyTiny: normal !default;
 
   @include typographyBodyWeight($weight);
 }
+
 @mixin typographyBodySmall($weight: 'regular') {
   font-family: $fontFamilyText;
   font-size: $fontSizeBodySmall;
@@ -108,6 +115,7 @@ $lineHeightBodyTiny: normal !default;
 
   @include typographyBodyWeight($weight);
 }
+
 @mixin typographyBodySmaller($weight: 'regular') {
   font-family: $fontFamilyText;
   font-size: $fontSizeBodySmaller;
@@ -116,6 +124,7 @@ $lineHeightBodyTiny: normal !default;
 
   @include typographyBodyWeight($weight);
 }
+
 @mixin typographyBodyTiny($weight: 'regular') {
   font-family: $fontFamilyText;
   font-size: $fontSizeBodyTiny;
@@ -131,9 +140,11 @@ $lineHeightBodyTiny: normal !default;
   h1 {
     @include typographyH1($override);
   }
+
   h2 {
     @include typographyH2($override);
   }
+
   h3 {
     @include typographyH3($override);
   }

package/styles/constants/export.module.scss

@@ -1,4 +1,4 @@
-@use "sass:meta";
+@use 'sass:meta';
 @use '.' as c;
 
 :export {

package/styles/fonts.css

@@ -1,77 +1,26 @@
-/* Generated with https://google-webfonts-helper.herokuapp.com/fonts */
-
-/* ubuntu-300 - latin */
+/* roboto-300 - latin */
 @font-face {
-  font-family: 'Ubuntu';
+  font-family: Roboto;
   font-style: normal;
   font-weight: 300;
-  src: url('../assets/ubuntu-v15-latin-300.eot'); /* IE9 Compat Modes */
-  src: local('Ubuntu Light'), local('Ubuntu-Light'), url('../assets/ubuntu-v15-latin-300.eot?#iefix') format('embedded-opentype'),
-    /* IE6-IE8 */ url('../assets/ubuntu-v15-latin-300.woff2') format('woff2'),
-    /* Super Modern Browsers */ url('../assets/ubuntu-v15-latin-300.woff') format('woff'),
-    /* Modern Browsers */ url('../assets/ubuntu-v15-latin-300.ttf') format('truetype'),
-    /* Safari, Android, iOS */ url('../assets/ubuntu-v15-latin-300.svg#Ubuntu') format('svg'); /* Legacy iOS */
-}
-/* ubuntu-regular - latin */
-@font-face {
-  font-family: 'Ubuntu';
-  font-style: normal;
-  font-weight: 400;
-  src: url('../assets/ubuntu-v15-latin-regular.eot'); /* IE9 Compat Modes */
-  src: local('Ubuntu Regular'), local('Ubuntu-Regular'), url('../assets/ubuntu-v15-latin-regular.eot?#iefix') format('embedded-opentype'),
-    /* IE6-IE8 */ url('../assets/ubuntu-v15-latin-regular.woff2') format('woff2'),
-    /* Super Modern Browsers */ url('../assets/ubuntu-v15-latin-regular.woff') format('woff'),
-    /* Modern Browsers */ url('../assets/ubuntu-v15-latin-regular.ttf') format('truetype'),
-    /* Safari, Android, iOS */ url('../assets/ubuntu-v15-latin-regular.svg#Ubuntu') format('svg'); /* Legacy iOS */
-}
-/* ubuntu-500 - latin */
-@font-face {
-  font-family: 'Ubuntu';
-  font-style: normal;
-  font-weight: 500;
-  src: url('../assets/ubuntu-v15-latin-500.eot'); /* IE9 Compat Modes */
-  src: local('Ubuntu Medium'), local('Ubuntu-Medium'), url('../assets/ubuntu-v15-latin-500.eot?#iefix') format('embedded-opentype'),
-    /* IE6-IE8 */ url('../assets/ubuntu-v15-latin-500.woff2') format('woff2'),
-    /* Super Modern Browsers */ url('../assets/ubuntu-v15-latin-500.woff') format('woff'),
-    /* Modern Browsers */ url('../assets/ubuntu-v15-latin-500.ttf') format('truetype'),
-    /* Safari, Android, iOS */ url('../assets/ubuntu-v15-latin-500.svg#Ubuntu') format('svg'); /* Legacy iOS */
+  src: url('../fonts/roboto-v27-latin-300.woff2') format('woff2'), url('../fonts/roboto-v27-latin-300.woff') format('woff'),
+    url('../fonts/roboto-v27-latin-300.ttf') format('truetype'), url('../fonts/roboto-v27-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
 }
 
-/* open-sans-300 - latin */
+/* roboto-regular - latin */
 @font-face {
-  font-family: 'Open Sans';
-  font-style: normal;
-  font-weight: 300;
-  src: url('../assets/open-sans-v18-latin-300.eot'); /* IE9 Compat Modes */
-  src: local('Open Sans Light'), local('OpenSans-Light'), url('../assets/open-sans-v18-latin-300.eot?#iefix') format('embedded-opentype'),
-    /* IE6-IE8 */ url('../assets/open-sans-v18-latin-300.woff2') format('woff2'),
-    /* Super Modern Browsers */ url('../assets/open-sans-v18-latin-300.woff') format('woff'),
-    /* Modern Browsers */ url('../assets/open-sans-v18-latin-300.ttf') format('truetype'),
-    /* Safari, Android, iOS */ url('../assets/open-sans-v18-latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */
-}
-/* open-sans-regular - latin */
-@font-face {
-  font-family: 'Open Sans';
+  font-family: Roboto;
   font-style: normal;
   font-weight: 400;
-  src: url('../assets/open-sans-v18-latin-regular.eot'); /* IE9 Compat Modes */
-  src: local('Open Sans Regular'), local('OpenSans-Regular'),
-    url('../assets/open-sans-v18-latin-regular.eot?#iefix') format('embedded-opentype'),
-    /* IE6-IE8 */ url('../assets/open-sans-v18-latin-regular.woff2') format('woff2'),
-    /* Super Modern Browsers */ url('../assets/open-sans-v18-latin-regular.woff') format('woff'),
-    /* Modern Browsers */ url('../assets/open-sans-v18-latin-regular.ttf') format('truetype'),
-    /* Safari, Android, iOS */ url('../assets/open-sans-v18-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
+  src: url('../fonts/roboto-v27-latin-regular.woff2') format('woff2'), url('../fonts/roboto-v27-latin-regular.woff') format('woff'),
+    url('../fonts/roboto-v27-latin-regular.ttf') format('truetype'), url('../fonts/roboto-v27-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
 }
-/* open-sans-600 - latin */
+
+/* roboto-500 - latin */
 @font-face {
-  font-family: 'Open Sans';
+  font-family: Roboto;
   font-style: normal;
-  font-weight: 600;
-  src: url('../assets/open-sans-v18-latin-600.eot'); /* IE9 Compat Modes */
-  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
-    url('../assets/open-sans-v18-latin-600.eot?#iefix') format('embedded-opentype'),
-    /* IE6-IE8 */ url('../assets/open-sans-v18-latin-600.woff2') format('woff2'),
-    /* Super Modern Browsers */ url('../assets/open-sans-v18-latin-600.woff') format('woff'),
-    /* Modern Browsers */ url('../assets/open-sans-v18-latin-600.ttf') format('truetype'),
-    /* Safari, Android, iOS */ url('../assets/open-sans-v18-latin-600.svg#OpenSans') format('svg'); /* Legacy iOS */
+  font-weight: 500;
+  src: url('../fonts/roboto-v27-latin-500.woff2') format('woff2'), url('../fonts/roboto-v27-latin-500.woff') format('woff'),
+    url('../fonts/roboto-v27-latin-500.ttf') format('truetype'), url('../fonts/roboto-v27-latin-500.svg#Roboto') format('svg'); /* Legacy iOS */
 }

package/styles/helpers/_a11y.scss

@@ -4,9 +4,15 @@
   box-shadow: inset 0 0 0 c.$outlineWidth c.$colorAccessibilityOutline;
 }
 
+@mixin outlineAround {
+  box-shadow: 0 0 0 c.$outlineWidth c.$colorAccessibilityOutline;
+}
+
 @mixin outlineFormField {
   border-color: c.$colorAccessibilityOutline;
-  // Border is also colored with the a11y color. We need to make the total visible outline width c.$outlineWidth, including the border
+
+  // Border is also colored with the a11y color. We need to make the total visible outline width c.$outlineWidth,
+  // including the border
   box-shadow: inset 0 0 0 (c.$outlineWidth - c.$borderWidth) c.$colorAccessibilityOutline;
 
   // Do not remove outline for high-contrast modes
@@ -25,6 +31,7 @@
   overflow: hidden;
   border: 0;
   white-space: nowrap;
+
   // Without explicit top and left it causes rendering a scrollbar
   top: 1px;
   left: 1px;

package/styles/helpers/_error.scss

@@ -0,0 +1,17 @@
+@use '../constants' as c;
+
+@mixin withError {
+  .withError {
+    position: relative;
+    padding-bottom: c.$errorHeight + c.$grid;
+
+    .errorContainer {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      overflow: hidden;
+      height: c.$errorHeight;
+      width: 100%;
+    }
+  }
+}

package/styles/helpers/_index.scss

@@ -1,3 +1,4 @@
 @forward './a11y';
 @forward './input';
 @forward './text';
+@forward './error';

package/styles/helpers/_input.scss

@@ -3,7 +3,7 @@
   /* doiuse-disable css-appearance */
   appearance: menulist-button;
   /* doiuse-enable css-appearance */
-  background-color: rgb(232, 240, 254) !important;
+  background-color: rgb(232 240 254) !important;
   background-image: none !important;
   color: -internal-light-dark(black, white) !important;
 }