@helsenorge/designsystem-react 1.0.0-beta.7 → 1.0.0-beta101

package/package.json

@@ -1,58 +1,35 @@
 {
   "name": "@helsenorge/designsystem-react",
-  "version": "1.0.0-beta.7",
+  "sideEffects": false,
+  "version": "1.0.0-beta101",
   "description": "The official design system for Helsenorge built with React.",
   "repository": {
-    "type": "git",
-    "url": "https://github.com/helsenorge/designsystem",
-    "directory": "packages/designsystem-react"
+    "type": "tfs",
+    "url": "https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem"
   },
   "homepage": "https://helsenorge.design",
-  "author": "Helsenorge ROX",
-  "bugs": {
-    "url": "https://github.com/Helsenorge/designsystem/issues",
-    "email": "contact@helsenorge.design"
-  },
-  "license": "MIT",
-  "keywords": [
-    "components",
-    "design-system",
-    "helsenorge",
-    "patterns",
-    "react"
+  "author": "Helsenorge",
+  "maintainers": [
+    "ROX"
   ],
+  "license": "MIT",
   "publishConfig": {
+    "directory": "lib",
     "access": "public"
   },
-  "main": "dist/js/helsenorge.js",
-  "module": "dist/js/helsenorge.esm.js",
-  "types": "dist/index.d.ts",
+  "types": "lib/index.d.ts",
   "source": "src/index.ts",
-  "files": [
-    "dist/"
-  ],
-  "scripts": {
-    "build": "yarn clean && rollup -c --environment BUILD:production && yarn build:defs",
-    "build:defs": "tsc --emitDeclarationOnly && dts-bundle-generator -project ./tsconfig.json -o ./dist/index.d.ts ./types/src/index.d.ts",
-    "clean": "rimraf dist types",
-    "cz": "git-cz",
-    "format": "prettier --write \"src/**/*.+(js|jsx|json|ts|tsx)\"",
-    "generate:icons": "node scripts/iconGenerator.js generate",
-    "lint": "eslint \"src/**/*\"",
-    "precommit": "lint-staged",
-    "test": "jest",
-    "test:open": "open -a 'Google Chrome' coverage/lcov-report/index.html",
-    "test:watch": "jest --watch",
-    "start": "start-storybook",
-    "validate": "yarn lint && yarn format -l"
-  },
+  "scripts": {},
   "peerDependencies": {
-    "bootstrap": "4.4.1",
+    "bootstrap": "4.6.1",
     "normalize.css": "8.0.1",
     "react": ">= 16.12.0",
     "react-dom": ">= 16.12.0",
     "styled-components": "^5.0.0"
   },
+  "dependencies": {
+    "bootstrap": "4.6.1"
+  },
   "devDependencies": {
     "@babel/core": "^7.8.3",
     "@babel/plugin-proposal-class-properties": "^7.8.3",
@@ -61,6 +38,7 @@
     "@babel/preset-env": "^7.8.3",
     "@babel/preset-react": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
+    "@rollup/plugin-typescript": "^4.1.2",
     "@storybook/addon-a11y": "^5.3.13",
     "@storybook/addon-actions": "^5.3.12",
     "@storybook/addon-backgrounds": "^5.3.12",
@@ -70,49 +48,56 @@
     "@storybook/addons": "^5.3.12",
     "@storybook/react": "^5.3.12",
     "@svgr/core": "^4.3.3",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.4.0",
-    "@types/jest": "^24.9.0",
-    "@types/styled-components": "^5.0.1",
-    "@types/testing-library__react": "^9.1.2",
+    "@testing-library/jest-dom": "^5.9.0",
+    "@testing-library/react": "^10.0.5",
+    "@testing-library/user-event": "^13.1.8",
+    "@types/classnames": "^2.2.11",
+    "@types/jest": "^25.2.3",
+    "@types/prettier": "1.19.0",
+    "@types/react-dom": "16.9.8",
+    "@types/styled-components": "5.0.1",
+    "@types/testing-library__react": "^10.0.5",
     "async": "^3.1.0",
     "babel-loader": "^8.0.6",
+    "classnames": "^2.2.6",
+    "copyfiles": "^2.2.0",
     "css-loader": "^3.2.0",
-    "dts-bundle-generator": "^3.3.0",
     "file-loader": "^4.2.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^24.9.0",
+    "jest": "^26.0.1",
     "jest-styled-components": "^7.0.0",
     "jest-watch-typeahead": "^0.4.2",
+    "node-sass": "^4.13.0",
     "normalize.css": "8.0.1",
-    "postcss-import": "^12.0.1",
-    "postcss-loader": "^3.0.0",
-    "postcss-nested": "^4.2.1",
-    "postcss-preset-env": "^6.7.0",
+    "npm-run-all": "^4.1.5",
+    "prettier": "1.19.1",
     "react": "16.12.0",
+    "react-docgen-typescript": "^1.22.0",
     "react-docgen-typescript-loader": "^3.3.0",
     "react-dom": "16.12.0",
+    "react-hook-form": "^6.15.8",
     "resolve-url-loader": "^3.1.1",
-    "rollup": "^1.26.5",
-    "rollup-plugin-babel": "^4.3.3",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.10.9",
+    "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-buble": "^0.19.8",
     "rollup-plugin-commonjs": "^10.1.0",
-    "rollup-plugin-copy": "^3.1.0",
+    "rollup-plugin-copy": "^3.3.0",
     "rollup-plugin-execute": "^1.1.1",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-peer-deps-external": "^2.2.2",
-    "rollup-plugin-progress": "^1.1.1",
-    "rollup-plugin-scss": "^1.0.2",
-    "rollup-plugin-sizes": "^0.5.1",
+    "rollup-plugin-progress": "^1.1.2",
+    "rollup-plugin-terser": "^6.1.0",
+    "rollup-plugin-typescript2": "^0.29.0",
     "sass-loader": "^8.0.0",
     "style-loader": "^1.0.0",
     "styled-components": "5.0.1",
     "svg-parser": "^2.0.2",
+    "svgo": "^1.3.2",
     "ts-loader": "^6.2.1",
+    "typed-scss-modules": "^4.1.1",
+    "typescript": "~3.8.3",
     "webpack": "^4.41.2",
     "yargs": "^15.0.2"
-  },
-  "dependencies": {
-    "bootstrap": "4.4.1"
   }
-}
+}

package/palette-f206f488.js

@@ -0,0 +1,2 @@
+var r=Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({},{banana50:"#FCF2BF",banana100:"#F9EA9F",banana200:"#F5E080",banana300:"#F1D460",banana400:"#EBC840",banana500:"#DDAB06",banana600:"#C59302",banana700:"#AB7C00",banana800:"#916500",banana900:"#764F00"}),{blueberry50:"#E4F7F9",blueberry100:"#CAE7ED",blueberry200:"#AFDAE3",blueberry300:"#7ABECC",blueberry400:"#58AABB",blueberry500:"#188097",blueberry600:"#126F87",blueberry700:"#08667C",blueberry800:"#06596C",blueberry900:"#084350"}),{cherry50:"#FFF2EA",cherry100:"#F7E1D2",cherry200:"#EEC0A5",cherry300:"#E39376",cherry400:"#D56147",cherry500:"#C83521",cherry600:"#B62E1C",cherry700:"#A31F0E",cherry800:"#912112",cherry900:"#7E1C0E"}),{kiwi50:"#E6F8EE",kiwi100:"#C2EDD6",kiwi200:"#9DE2BF",kiwi300:"#79D6AA",kiwi400:"#56CA96",kiwi500:"#33BE84",kiwi600:"#10B172",kiwi700:"#0CA161",kiwi800:"#099150",kiwi900:"#078141"}),{neutral50:"#F5F3F3",neutral100:"#EAE7E7",neutral200:"#D6D4D3",neutral300:"#BDBAB9",neutral400:"#AAA8A6",neutral500:"#989693",neutral600:"#7D7C79",neutral700:"#62625F",neutral800:"#474745",neutral900:"#2B2C2B"}),{plum50:"#EFE4FD",plum100:"#D7BDF9",plum200:"#BF98F3",plum300:"#A875EB",plum400:"#9153E2",plum500:"#7A33D7",plum600:"#6A2ABF",plum700:"#5B22A6",plum800:"#4C1B8C",plum900:"#3C1471"}),{black:"#000000",white:"#ffffff"});export{r as p};
+//# sourceMappingURL=palette-f206f488.js.map

package/palette-f206f488.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"palette-f206f488.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/scss/_body.scss

@@ -0,0 +1,11 @@
+body {
+  font-family: 'Source Sans Pro', Arial, Verdana, sans-serif;
+  background-color: $neutral50;
+  color: $black;
+  font-size: $font-size-sm;
+  line-height: $lineheight-size-sm;
+  @include media-breakpoint-up(md) {
+    font-size: $font-size-md;
+    line-height: $lineheight-size-md;
+  }
+}

package/{dist/scss → scss}/_breakpoints.scss

@@ -1,14 +1,16 @@
-$grid-gutter-width: map-get($spacers, 5);
-
-$grid-breakpoints: (
-  xs: 0,
-  sm: 564px,
-  md: 682px,
-  lg: 1088px,
-);
-
-$container-max-widths: (
-  sm: 528px,
-  md: 634px,
-  lg: 1056px,
-);
+$grid-gutter-width: map-get($spacers, 5);
+
+$grid-breakpoints: (
+  null: 0,
+  xs: 360px,
+  sm: 564px,
+  md: 768px,
+  lg: 1088px,
+  xl: 1450px,
+);
+
+$container-max-widths: (
+  sm: 528px,
+  md: 612px,
+  lg: 1056px,
+);

package/scss/_font-settings.scss

@@ -0,0 +1,8 @@
+$font-size-xs: 1rem; // 16px
+$font-size-sm: 1.125rem; // 18px
+$font-size-md: 1.25rem; // 20px
+$font-size-lg: 1.5rem; // 24px
+$lineheight-size-xs: 1.5rem; // 28px
+$lineheight-size-sm: 1.75rem; // 28px
+$lineheight-size-md: 1.875rem; // 30px
+$lineheight-size-lg: 2rem; // 32px

package/{dist/scss → scss}/_fonts.scss

@@ -1,120 +1,112 @@
-/* latin */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 200;
-  font-display: swap;
-  src: local('Source Sans Pro Extra Light'), local('SourceSansPro-ExtraLight'),
-    url(../fonts/source-sans-pro-200-extralight.woff) format('woff'),
-    url(../fonts/source-sans-pro-200-extralight.woff2) format('woff2');
-}
-/* latin */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: italic;
-  font-weight: 200;
-  font-display: swap;
-  src: local('Source Sans Pro Extra Light Italic'), local('SourceSansPro-ExtraLightItalic'),
-    url(../fonts/source-sans-pro-200-extralight-italic.woff) format('woff'),
-    url(../fonts/source-sans-pro-200-extralight-italic.woff2) format('woff2');
-}
-/* latin */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 300;
-  font-display: swap;
-  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'),
-    url(../fonts/source-sans-pro-300-light.woff) format('woff'),
-    url(../fonts/source-sans-pro-300-light.woff2) format('woff2');
-}
-/* latin */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: italic;
-  font-weight: 300;
-  font-display: swap;
-  src: local('Source Sans Pro Light Italic'), local('SourceSansPro-LightItalic'),
-    url(../fonts/source-sans-pro-300-light-italic.woff) format('woff'),
-    url(../fonts/source-sans-pro-300-light-italic.woff2) format('woff2');
-}
-/* latin */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'),
-    url(../fonts/source-sans-pro-400-regular.woff) format('woff'),
-    url(../fonts/source-sans-pro-400-regular.woff2) format('woff2');
-}
-/* latin */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: italic;
-  font-weight: 400;
-  font-display: swap;
-  src: local('Source Sans Pro Italic'), local('SourceSansPro-Italic'),
-    url(../fonts/source-sans-pro-400-regular-italic.woff) format('woff'),
-    url(../fonts/source-sans-pro-400-regular-italic.woff2) format('woff2');
-}
-/* latin */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'),
-    url(../fonts/source-sans-pro-600-semibold.woff) format('woff'),
-    url(../fonts/source-sans-pro-600-semibold.woff2) format('woff2');
-}
-/* latin */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: italic;
-  font-weight: 600;
-  font-display: swap;
-  src: local('Source Sans Pro SemiBold Italic'), local('SourceSansPro-SemiBoldItalic'),
-    url(../fonts/source-sans-pro-600-semibold-italic.woff) format('woff'),
-    url(../fonts/source-sans-pro-600-semibold-italic.woff2) format('woff2');
-}
-/* latin */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'),
-    url(../fonts/source-sans-pro-700-bold.woff) format('woff'),
-    url(../fonts/source-sans-pro-700-bold.woff2) format('woff2');
-}
-/* latin */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: italic;
-  font-weight: 700;
-  font-display: swap;
-  src: local('Source Sans Pro Bold Italic'), local('SourceSansPro-BoldItalic'),
-    url(../fonts/source-sans-pro-700-bold-italic.woff) format('woff'),
-    url(../fonts/source-sans-pro-700-bold-italic.woff2) format('woff2');
-}
-/* latin */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 900;
-  font-display: swap;
-  src: local('Source Sans Pro Black'), local('SourceSansPro-Black'),
-    url(../fonts/source-sans-pro-900-black.woff) format('woff'),
-    url(../fonts/source-sans-pro-900-black.woff2) format('woff2');
-}
-/* latin */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: italic;
-  font-weight: 900;
-  font-display: swap;
-  src: local('Source Sans Pro Black Italic'), local('SourceSansPro-BlackItalic'),
-    url(../fonts/source-sans-pro-900-black-italic.woff) format('woff'),
-    url(../fonts/source-sans-pro-900-black-italic.woff2) format('woff2');
-}
+@import './font-settings.scss';
+
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 200;
+  font-display: swap;
+  src: local('Source Sans Pro Extra Light'), local('SourceSansPro-ExtraLight'),
+    url(../fonts/source-sans-pro-200-extralight.woff) format('woff'), url(../fonts/source-sans-pro-200-extralight.woff2) format('woff2');
+}
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: italic;
+  font-weight: 200;
+  font-display: swap;
+  src: local('Source Sans Pro Extra Light Italic'), local('SourceSansPro-ExtraLightItalic'),
+    url(../fonts/source-sans-pro-200-extralight-italic.woff) format('woff'),
+    url(../fonts/source-sans-pro-200-extralight-italic.woff2) format('woff2');
+}
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url(../fonts/source-sans-pro-300-light.woff) format('woff'),
+    url(../fonts/source-sans-pro-300-light.woff2) format('woff2');
+}
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: italic;
+  font-weight: 300;
+  font-display: swap;
+  src: local('Source Sans Pro Light Italic'), local('SourceSansPro-LightItalic'),
+    url(../fonts/source-sans-pro-300-light-italic.woff) format('woff'), url(../fonts/source-sans-pro-300-light-italic.woff2) format('woff2');
+}
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(../fonts/source-sans-pro-400-regular.woff) format('woff'),
+    url(../fonts/source-sans-pro-400-regular.woff2) format('woff2');
+}
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: local('Source Sans Pro Italic'), local('SourceSansPro-Italic'), url(../fonts/source-sans-pro-400-regular-italic.woff) format('woff'),
+    url(../fonts/source-sans-pro-400-regular-italic.woff2) format('woff2');
+}
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'), url(../fonts/source-sans-pro-600-semibold.woff) format('woff'),
+    url(../fonts/source-sans-pro-600-semibold.woff2) format('woff2');
+}
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: italic;
+  font-weight: 600;
+  font-display: swap;
+  src: local('Source Sans Pro SemiBold Italic'), local('SourceSansPro-SemiBoldItalic'),
+    url(../fonts/source-sans-pro-600-semibold-italic.woff) format('woff'),
+    url(../fonts/source-sans-pro-600-semibold-italic.woff2) format('woff2');
+}
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(../fonts/source-sans-pro-700-bold.woff) format('woff'),
+    url(../fonts/source-sans-pro-700-bold.woff2) format('woff2');
+}
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: local('Source Sans Pro Bold Italic'), local('SourceSansPro-BoldItalic'),
+    url(../fonts/source-sans-pro-700-bold-italic.woff) format('woff'), url(../fonts/source-sans-pro-700-bold-italic.woff2) format('woff2');
+}
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  font-weight: 900;
+  font-display: swap;
+  src: local('Source Sans Pro Black'), local('SourceSansPro-Black'), url(../fonts/source-sans-pro-900-black.woff) format('woff'),
+    url(../fonts/source-sans-pro-900-black.woff2) format('woff2');
+}
+/* latin */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: italic;
+  font-weight: 900;
+  font-display: swap;
+  src: local('Source Sans Pro Black Italic'), local('SourceSansPro-BlackItalic'),
+    url(../fonts/source-sans-pro-900-black-italic.woff) format('woff'), url(../fonts/source-sans-pro-900-black-italic.woff2) format('woff2');
+}

package/{dist/scss → scss}/_grid.scss

@@ -1 +1 @@
-@import 'bootstrap/scss/bootstrap-grid';
+@import 'bootstrap/scss/bootstrap-grid';

package/scss/_input.scss

@@ -0,0 +1,175 @@
+@mixin input-wrapper {
+  width: 100%;
+  line-height: 0;
+
+  &__label-wrapper {
+    display: inline-flex;
+    align-items: center;
+    line-height: getSpacer(m);
+    font-size: $font-size-sm;
+    font-weight: 600;
+    padding-bottom: getSpacer(xs);
+
+    @media (min-width: map-get($grid-breakpoints, md)) {
+      line-height: getSpacer(l);
+      font-size: $font-size-md;
+    }
+
+    &--on-dark {
+      color: $white;
+    }
+  }
+
+  &__after-label-children {
+    padding-left: 0.75rem;
+  }
+}
+
+@mixin content-wrapper {
+  font-size: $font-size-sm;
+  width: 100%;
+  border: $neutral700 2px solid;
+  outline: none;
+  background: $white;
+
+  svg:first-child {
+    padding-left: 0.375rem;
+  }
+
+  svg:last-child {
+    padding-right: 0.375rem;
+  }
+
+  &--bigform {
+    padding: getSpacer(2xs) 0;
+
+    svg:first-child {
+      padding-left: getSpacer(2xs);
+    }
+
+    svg:last-child {
+      padding-right: getSpacer(2xs);
+    }
+  }
+
+  &:hover {
+    background: $neutral50;
+    border-color: $neutral700;
+    box-shadow: 0px 0px 0px 1px $neutral700;
+
+    &:focus-within {
+      border-color: $black;
+      box-shadow: 0px 0px 0px 2px $black;
+    }
+  }
+  &:focus-within {
+    background: $white;
+    border-color: $neutral900;
+    box-shadow: 0px 0px 0px 2px $neutral900;
+  }
+
+  &--on-blueberry {
+    border-color: $blueberry500;
+
+    &:hover {
+      background: $blueberry50;
+      box-shadow: 0px 0px 0px 1px $blueberry500;
+      border-color: $blueberry500;
+    }
+
+    &:focus-within {
+      background: $white;
+      border-color: $neutral900;
+      box-shadow: 0px 0px 0px 2px $neutral900;
+    }
+  }
+  &--on-dark {
+    border-color: $blueberry900;
+    &:hover {
+      background: $blueberry50;
+      border-color: $blueberry900;
+      box-shadow: 0px 0px 0px 1px $blueberry900;
+    }
+    &:focus-within {
+      background: $white;
+      border-color: $neutral900;
+      box-shadow: 0px 0px 0px 2px $neutral900;
+    }
+  }
+  &--invalid {
+    border-color: $cherry500;
+
+    &:hover {
+      background: $cherry100;
+      border-color: $cherry500;
+      box-shadow: 0px 0px 0px 2px $cherry500;
+    }
+    &:focus-within {
+      background: $white;
+      border-color: $neutral900;
+      box-shadow: 0px 0px 0px 2px $neutral900;
+    }
+  }
+  &--transparent {
+    background: transparent;
+
+    &:hover {
+      background: $neutral100;
+    }
+
+    &:focus-within {
+      background: $white;
+    }
+  }
+  &--transparent#{&}--on-blueberry {
+    &:hover {
+      background: $blueberry100;
+    }
+
+    &:focus-within {
+      background: $white;
+    }
+  }
+
+  &--disabled {
+    background: $neutral50;
+    border-color: $neutral500;
+    color: $neutral500;
+
+    &:hover {
+      background: $neutral50;
+      border-color: $neutral500;
+      box-shadow: none;
+    }
+  }
+
+  &__input {
+    line-height: 1.625rem;
+    font-size: $font-size-sm;
+    padding: 0 getSpacer(2xs);
+    border: none;
+    outline: none;
+    background-color: transparent;
+    width: 100%;
+
+    @media (min-width: map-get($grid-breakpoints, md)) {
+      font-size: $font-size-md;
+    }
+
+    &::placeholder {
+      color: $neutral500;
+    }
+
+    &--disabled {
+      color: $neutral500;
+    }
+
+    &:first-child {
+      padding-left: getSpacer(s);
+    }
+
+    &:last-child {
+      padding-right: getSpacer(s);
+    }
+  }
+}