@jorilindell/hds-core 4.10.1

package/lib/components/checkbox/checkbox.css

@@ -0,0 +1,173 @@
+.hds-checkbox {
+  --size: 24px;
+  --icon-scale: 1;
+  --border-width: 2px;
+  --outline-width: 3px;
+  --label-font-size: var(--fontsize-body-m);
+  --label-padding: var(--spacing-2-xs);
+  --background-unselected: transparent;
+  --background-selected: var(--color-bus);
+  --background-hover: var(--color-bus-dark);
+  --background-disabled: var(--color-black-10);
+  --border-color-selected: var(--color-bus);
+  --border-color-selected-hover: var(--color-bus-dark);
+  --border-color-selected-focus: var(--color-bus);
+  --border-color-unselected: var(--color-black-50);
+  --border-color-unselected-hover: var(--color-black-90);
+  --border-color-unselected-focus: var(--color-black-90);
+  --border-color-disabled: var(--color-black-10);
+  --icon-color-unselected: transparent;
+  --icon-color-selected: var(--color-white);
+  --icon-color-disabled: var(--color-white);
+  --label-color: var(--color-black-90);
+  --label-color-disabled: var(--color-black-40);
+  --icon-size: var(--spacing-m);
+  display: flex;
+  flex-wrap: wrap;
+  min-height: var(--size);
+  position: relative;
+}
+.hds-checkbox, .hds-checkbox *, .hds-checkbox *:before, .hds-checkbox *:after {
+  box-sizing: border-box;
+}
+.hds-checkbox {
+  /* stylelint-disable no-descending-specificity */
+}
+.hds-checkbox:not(:first-of-type) {
+  margin-top: var(--spacing-2-xs);
+}
+.hds-checkbox .hds-checkbox__input {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 100%;
+  height: var(--size);
+  left: 0;
+  line-height: 1.15;
+  margin: 0;
+  outline: none;
+  position: absolute;
+  top: 0;
+  width: var(--size);
+}
+.hds-checkbox .hds-checkbox__input:before {
+  background-color: var(--icon-color-unselected);
+  content: "";
+  height: var(--size);
+  left: 0;
+  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpolygon fill='currentColor' points='21 7 10 18 4.5 12.5 6 11 10 15 19.5 5.5'/%3E %3C/g%3E %3C/svg%3E");
+          mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpolygon fill='currentColor' points='21 7 10 18 4.5 12.5 6 11 10 15 19.5 5.5'/%3E %3C/g%3E %3C/svg%3E");
+  -webkit-mask-position: center;
+          mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+          mask-repeat: no-repeat;
+  -webkit-mask-size: calc(var(--size) * var(--icon-scale));
+          mask-size: calc(var(--size) * var(--icon-scale));
+  position: absolute;
+  top: 0;
+  transform: scale(0.6);
+  width: var(--size);
+  z-index: 1;
+}
+.hds-checkbox .hds-checkbox__input:disabled + label {
+  color: var(--label-color-disabled);
+}
+.hds-checkbox .hds-checkbox__input:checked:disabled:before {
+  background-color: var(--icon-color-disabled);
+}
+.hds-checkbox .hds-checkbox__input:disabled, .hds-checkbox .hds-checkbox__input:disabled + label {
+  cursor: not-allowed;
+}
+.hds-checkbox .hds-checkbox__input:hover:before, .hds-checkbox .hds-checkbox__input:focus:before, .hds-checkbox .hds-checkbox__input:hover + label:after, .hds-checkbox .hds-checkbox__input:focus + label:after {
+  transition: 85ms ease-out;
+  transition-property: background-color, border-color, transform;
+}
+.hds-checkbox .hds-checkbox__input:focus + label:before {
+  box-shadow: 0 0 0 var(--outline-width) var(--color-focus-outline);
+  transform: translate3d(0, 0, 0);
+  transition: 85ms ease-out;
+  transition-property: box-shadow, transform;
+}
+.hds-checkbox .hds-checkbox__input:checked:before {
+  background-color: var(--icon-color-selected);
+  transform: scale(1);
+}
+.hds-checkbox .hds-checkbox__input:not(:checked):indeterminate:before {
+  background-color: var(--icon-color-selected);
+  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M6 11h12v2H6z'/%3E%3C/g%3E%3C/svg%3E");
+          mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M6 11h12v2H6z'/%3E%3C/g%3E%3C/svg%3E");
+  transform: scale(1);
+}
+.hds-checkbox .hds-checkbox__input:checked + label:after, .hds-checkbox .hds-checkbox__input:indeterminate + label:after {
+  background-color: var(--background-selected);
+  border-color: var(--border-color-selected);
+}
+.hds-checkbox .hds-checkbox__input:disabled + label:after {
+  background-color: var(--background-disabled);
+  border-color: var(--border-color-disabled);
+}
+.hds-checkbox .hds-checkbox__input:not(:disabled):focus + label:after {
+  border-color: var(--border-color-unselected-focus);
+}
+.hds-checkbox .hds-checkbox__input:not(:disabled):hover + label:after, .hds-checkbox .hds-checkbox__input:not(:disabled):hover:focus + label:after {
+  border-color: var(--border-color-unselected-hover);
+}
+.hds-checkbox .hds-checkbox__input:not(:disabled):checked:focus + label:after, .hds-checkbox .hds-checkbox__input:not(:disabled):indeterminate:focus + label:after {
+  border-color: var(--border-color-selected-focus);
+}
+.hds-checkbox .hds-checkbox__input:not(:disabled):checked:hover + label:after, .hds-checkbox .hds-checkbox__input:not(:disabled):indeterminate:hover + label:after, .hds-checkbox .hds-checkbox__input:not(:disabled):checked:hover:focus + label:after, .hds-checkbox .hds-checkbox__input:not(:disabled):indeterminate:hover:focus + label:after {
+  background-color: var(--background-hover);
+  border-color: var(--border-color-selected-hover);
+}
+.hds-checkbox .hds-checkbox__label {
+  color: var(--label-color);
+  cursor: pointer;
+  font-size: var(--label-font-size);
+  line-height: var(--lineheight-m);
+  padding-left: calc(var(--size) + var(--label-padding));
+  padding-top: calc((var(--size) - var(--label-font-size) * var(--lineheight-m)) / 2);
+  position: relative;
+}
+.hds-checkbox .hds-checkbox__label:before, .hds-checkbox .hds-checkbox__label:after {
+  content: "";
+  left: 0;
+  position: absolute;
+  top: 0;
+}
+.hds-checkbox .hds-checkbox__label:before {
+  height: var(--size);
+  width: var(--size);
+}
+.hds-checkbox .hds-checkbox__label:after {
+  background-color: var(--background-unselected);
+  border: var(--border-width) solid var(--border-color-unselected);
+  height: var(--size);
+  width: var(--size);
+}
+.hds-checkbox__label .hds-checkbox__label--hidden {
+  padding-left: var(--size);
+}
+.hds-checkbox .hds-checkbox__error-text {
+  background-color: var(--color-error-light);
+  border-left: 8px solid var(--color-error);
+  color: var(--color-black);
+  display: flex;
+  flex-basis: 100%;
+  font-size: var(--fontsize-body-m);
+  margin-top: var(--spacing-2-xs);
+  padding: var(--spacing-2-xs);
+  position: relative;
+}
+.hds-checkbox .hds-checkbox__error-text:before {
+  background: var(--color-error);
+  content: "";
+  display: inline-block;
+  height: var(--icon-size);
+  margin-right: var(--spacing-2-xs);
+  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.45608C11.5239 2.86969 12.3977 2.84875 12.7842 3.39325L12.825 3.45608L21.8771 18.6666C22.2202 19.2432 21.8055 19.951 21.1235 19.9976L21.052 20H2.94799C2.24813 20 1.7987 19.3114 2.09013 18.7267L2.12295 18.6666L11.175 3.45608ZM13 16V18H11V16H13ZM13 8.5V14.5H11V8.5H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E");
+  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.45608C11.5239 2.86969 12.3977 2.84875 12.7842 3.39325L12.825 3.45608L21.8771 18.6666C22.2202 19.2432 21.8055 19.951 21.1235 19.9976L21.052 20H2.94799C2.24813 20 1.7987 19.3114 2.09013 18.7267L2.12295 18.6666L11.175 3.45608ZM13 16V18H11V16H13ZM13 8.5V14.5H11V8.5H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E");
+  pointer-events: none;
+  width: var(--icon-size);
+}

package/lib/components/checkbox/checkbox.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/_bem.scss","../../../src/components/checkbox/checkbox.scss","../../../src/components/checkbox/_checkbox-mixin.scss"],"names":[],"mappings":"AAoFM;ECnFN,YAAA;ECKE,eAAA;EACA,mBAAA;EACA,oBAAA;EACA,yCAAA;EACA,oCAAA;EACA,oCAAA;EACA,uCAAA;EACA,yCAAA;EACA,4CAAA;EACA,yCAAA;EACA,oDAAA;EACA,+CAAA;EACA,gDAAA;EACA,sDAAA;EACA,sDAAA;EACA,8CAAA;EACA,oCAAA;EACA,yCAAA;EACA,yCAAA;EACA,oCAAA;EACA,6CAAA;EACA,6BAAA;EAEA,aAAA;EACA,eAAA;EACA,uBAAA;EACA,kBAAA;ADJF;ACME;EAIE,sBAAA;ADPJ;ADqDM;EE3CJ,gDAAA;ADPF;ACQE;EACE,+BAAA;ADNJ;AD8DM;EEjDJ,wBAAA;KAAA,qBAAA;UAAA,gBAAA;EACA,eAAA;EAIA,oBAAA;EACA,eAAA;EACA,mBAAA;EACA,OAAA;EAKA,iBAAA;EACA,SAAA;EACA,aAAA;EACA,kBAAA;EACA,MAAA;EACA,kBAAA;ADdF;ACgBE;EAEE,8CAAA;EACA,WAAA;EACA,mBAAA;EACA,OAAA;EACA,0TAAA;UAAA,kTAAA;EACA,6BAAA;UAAA,qBAAA;EACA,8BAAA;UAAA,sBAAA;EACA,wDAAA;UAAA,gDAAA;EACA,kBAAA;EACA,MAAA;EACA,qBAAA;EACA,kBAAA;EACA,UAAA;ADfJ;AC4EE;EACE,kCAAA;AD1EJ;AC6EE;EACE,4CAAA;AD3EJ;AC8EE;EAEE,mBAAA;AD7EJ;ACmFE;EAIE,yBAAA;EACA,8DAAA;ADpFJ;ACuFE;EACE,iEAAA;EACA,+BAAA;EACA,yBAAA;EACA,0CAAA;ADrFJ;ACIE;EACE,4CAAA;EACA,mBAAA;ADFJ;ACME;EACE,4CAAA;EACA,8QAAA;UAAA,sQAAA;EACA,mBAAA;ADJJ;ACQE;EAEE,4CAAA;EACA,0CAAA;ADPJ;ACWE;EACE,4CAAA;EACA,0CAAA;ADTJ;ACaE;EACE,kDAAA;ADXJ;ACeE;EAEE,kDAAA;ADdJ;ACkBE;EAEE,gDAAA;ADjBJ;ACqBE;EAIE,yCAAA;EACA,gDAAA;ADtBJ;ADnBM;EEgFJ,yBAAA;EACA,eAAA;EACA,iCAAA;EACA,gCAAA;EACA,sDAAA;EACA,mFAAA;EACA,kBAAA;ADzDF;AC2DE;EAEE,WAAA;EACA,OAAA;EACA,kBAAA;EACA,MAAA;AD1DJ;AC8DE;EACE,mBAAA;EACA,kBAAA;AD5DJ;ACgEE;EACE,8CAAA;EACA,gEAAA;EACA,mBAAA;EACA,kBAAA;AD9DJ;ACmEE;EACE,yBAAA;ADhEJ;ADjDM;EEsHJ,0CAAA;EACA,yCAAA;EACA,yBAAA;EACA,aAAA;EACA,gBAAA;EACA,iCAAA;EACA,+BAAA;EACA,4BAAA;EACA,kBAAA;ADjEF;ACmEE;EACE,8BAAA;EACA,WAAA;EACA,qBAAA;EACA,wBAAA;EACA,iCAAA;EACA,4fAAA;EACA,ofAAA;EACA,oBAAA;EACA,uBAAA;ADjEJ","file":"checkbox.css","sourcesContent":["@use \"sass:string\";\n\n$blockPrefix: 'hds-';\n$modifierDelimeter: '--';\n$elementDelimeter: '__';\n\n// Copied from https://github.com/Shudrum/sass-easy-bem\n// The module was added to root/node_modules, so SASS cannot find it from core.\n\n// Copyright (c) 2018-2019 Julien Martin.\n// This source code is licensed under the MIT license found in the\n// LICENSE file in the root directory of this source tree.\n\n// Utility functions\n\n@function get-parent-selector($selector) {\n  $parent: null;\n\n  @while string.index('#{$selector}', ' ') {\n    $first-element: string.slice('#{$selector}', 0, string.index('#{$selector}', ' ') - 1);\n\n    @if $parent {\n      $parent: '#{$parent} #{$first-element}';\n    } @else {\n      $parent: $first-element;\n    }\n\n    $selector: string.slice('#{$selector}', string.index('#{$selector}', ' ') + 1);\n  }\n\n  @return $parent;\n}\n\n@function get-last-selector($selector) {\n  @while string.index('#{$selector}', ' ') {\n    $selector: string.slice('#{$selector}', string.index('#{$selector}', ' ') + 1);\n  }\n\n  @return $selector;\n}\n\n@function get-block($selector) {\n  $have-element: string.index('#{&}', $elementDelimeter);\n  $have-modifier: string.index('#{&}', $modifierDelimeter);\n\n  @if $have-element {\n    @return string.slice('#{$selector}', 0, string.index('#{&}', $elementDelimeter) - 1);\n  }\n\n  @if $have-modifier {\n    @return string.slice('#{$selector}', 0, string.index('#{&}', $modifierDelimeter) - 1);\n  }\n\n  @return $selector;\n}\n\n@function get-element($selector) {\n  $have-modifier: string.index('#{$selector}', $modifierDelimeter);\n\n  @if $have-modifier {\n    $selector: string.slice('#{$selector}', 0, string.index('#{$selector}', $modifierDelimeter) - 1);\n\n    @while string.index(string.slice('#{$selector}', 2), '.') {\n      $selector: string.slice('#{$selector}', string.index(string.slice('#{$selector}', 2), '.') + 1);\n    }\n  }\n\n  @return $selector;\n}\n\n// prefix added by HDS\n// use for creating classes like .hds-<$block>\n// set $noPrefix to false to create classes like .-<$block>\n@mixin block($block, $noPrefix: false, $react: false) {\n  $className: $block;\n\n  @if not($noPrefix) {\n    $className: #{$blockPrefix + $block};\n  }\n\n  @if $react {\n    @content;\n  } @else {\n    @at-root {\n      .#{$className} {\n        @content;\n      }\n    }\n  }\n}\n\n// use inside block() or another element() to create scoped classes like .hds-<block>.hds-<block>__<$element>\n@mixin element($element) {\n  $is-modifier: string.index('#{&}', $modifierDelimeter);\n  // stylelint-disable-next-line scss/function-no-unknown\n  $block: get-block(&);\n\n  @if not $is-modifier {\n    @at-root {\n      #{$block}__#{$element} {\n        @content;\n      }\n    }\n  }\n\n  @if $is-modifier {\n    $is-element: string.index('#{&}', $elementDelimeter);\n\n    @if $is-element {\n      $block: string.slice('#{&}', 0, string.index('#{&}', $elementDelimeter) - 1);\n\n      @at-root {\n        & #{$block}__#{$element} {\n          @content;\n        }\n      }\n    }\n\n    @if not $is-element {\n      $block: string.slice('#{&}', 0, string.index('#{&}', $modifierDelimeter) - 1);\n      $block: string.slice($block, 1, string.index(string.slice($block, 2, -1), '.'));\n\n      @at-root {\n        & #{$block}__#{$element} {\n          @content;\n        }\n      }\n    }\n  }\n}\n\n// use inside block() or element() to create scoped classes like .hds-<block>.hds-<block>--<$modifier>\n@mixin modifier($modifier) {\n  $parent-selector: get-parent-selector('#{&}');\n  $last-selector: get-last-selector('#{&}');\n  // stylelint-disable-next-line scss/function-no-unknown\n  $element: get-element($last-selector);\n\n  @at-root {\n    @if $parent-selector {\n      #{$parent-selector} #{$last-selector}#{$element}#{$modifierDelimeter}#{$modifier} {\n        @content;\n      }\n    } @else {\n      #{$last-selector}#{$element}#{$modifierDelimeter}#{$modifier} {\n        @content;\n      }\n    }\n  }\n}\n\n// end of sass-easy-bem\n\n// HDS add-on to create .hds-<block>--modifier instead of .hds-<block>.hds-<block>--modifier\n@mixin unscopedModifier($block, $modifier, $react: false) {\n  @if $react {\n    @content;\n  } @else {\n    @at-root {\n      .#{$blockPrefix + $block}#{$modifierDelimeter}#{$modifier} {\n        @content;\n      }\n    }\n  }\n}\n\n// HDS add-on to create .hds-<block>__element instead of .hds-<block>.hds-<block>__element\n@mixin unscopedElement($block, $element, $react: false) {\n  @if $react {\n    @content;\n  } @else {\n    @at-root {\n      .#{$blockPrefix + $block}#{$elementDelimeter}#{$element} {\n        @content;\n      }\n    }\n  }\n}\n\n// HDS add-on to create .hds-<block>--modifier.hds-<block>--theme {\n@mixin unscopedModifierWithTheme($block, $modifier, $theme, $react: false) {\n  @if $react {\n    @content;\n  } @else {\n    @at-root {\n      .#{$blockPrefix + $block}#{$modifierDelimeter}#{$modifier}.#{$blockPrefix + $block}#{$modifierDelimeter}#{$theme} {\n        @content;\n      }\n    }\n  }\n}","@use './checkbox-mixin' as *;\n@include checkbox;\n","@use '../../utils/bem' as BemUtil;\n\n@mixin base {\n  --size: 24px;\n\n  // icon size relative to the checkbox size (--size)\n  --icon-scale: 1;\n  --border-width: 2px;\n  --outline-width: 3px;\n  --label-font-size: var(--fontsize-body-m);\n  --label-padding: var(--spacing-2-xs);\n  --background-unselected: transparent;\n  --background-selected: var(--color-bus);\n  --background-hover: var(--color-bus-dark);\n  --background-disabled: var(--color-black-10);\n  --border-color-selected: var(--color-bus);\n  --border-color-selected-hover: var(--color-bus-dark);\n  --border-color-selected-focus: var(--color-bus);\n  --border-color-unselected: var(--color-black-50);\n  --border-color-unselected-hover: var(--color-black-90);\n  --border-color-unselected-focus: var(--color-black-90);\n  --border-color-disabled: var(--color-black-10);\n  --icon-color-unselected: transparent;\n  --icon-color-selected: var(--color-white);\n  --icon-color-disabled: var(--color-white);\n  --label-color: var(--color-black-90);\n  --label-color-disabled: var(--color-black-40);\n  --icon-size: var(--spacing-m);\n\n  display: flex;\n  flex-wrap: wrap;\n  min-height: var(--size);\n  position: relative;\n\n  &,\n  & *,\n  & *:before,\n  & *:after {\n    box-sizing: border-box;\n  }\n\n  /* stylelint-disable no-descending-specificity */\n  &:not(:first-of-type) {\n    margin-top: var(--spacing-2-xs);\n  }\n}\n\n@mixin input {\n  -moz-appearance: none;\n  -webkit-appearance: none;\n  appearance: none;\n  cursor: pointer;\n\n  // Normalize.css rules\n  // Change the font styles in all browsers.\n  font-family: inherit; // 1\n  font-size: 100%; // 1\n  height: var(--size);\n  left: 0;\n\n  // Normalize.css rules\n  // 1. Change the font styles in all browsers.\n  // 2. Remove the margin in Firefox and Safari.\n  line-height: 1.15; // 1\n  margin: 0; // 2\n  outline: none;\n  position: absolute;\n  top: 0;\n  width: var(--size);\n\n  &:before {\n    // checkbox icon\n    background-color: var(--icon-color-unselected);\n    content: '';\n    height: var(--size);\n    left: 0;\n    mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpolygon fill='currentColor' points='21 7 10 18 4.5 12.5 6 11 10 15 19.5 5.5'/%3E %3C/g%3E %3C/svg%3E\");\n    mask-position: center;\n    mask-repeat: no-repeat;\n    mask-size: calc(var(--size) * var(--icon-scale));\n    position: absolute;\n    top: 0;\n    transform: scale(0.6);\n    width: var(--size);\n    z-index: 1;\n  }\n}\n\n@mixin inputCustom {\n  // CUSTOM CHECKBOX\n\n  // checkbox icon - selected\n  &:checked:before {\n    background-color: var(--icon-color-selected);\n    transform: scale(1);\n  }\n\n  // checkbox icon - indeterminated\n  &:not(:checked):indeterminate:before {\n    background-color: var(--icon-color-selected);\n    mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M6 11h12v2H6z'/%3E%3C/g%3E%3C/svg%3E\");\n    transform: scale(1);\n  }\n\n  // background - selected or indeterminated\n  &:checked + label:after,\n  &:indeterminate + label:after {\n    background-color: var(--background-selected);\n    border-color: var(--border-color-selected);\n  }\n\n  // background\n  &:disabled + label:after {\n    background-color: var(--background-disabled);\n    border-color: var(--border-color-disabled);\n  }\n\n  // background - unselected - focus\n  &:not(:disabled):focus + label:after {\n    border-color: var(--border-color-unselected-focus);\n  }\n\n  // background - unselected - hover\n  &:not(:disabled):hover + label:after,\n  &:not(:disabled):hover:focus + label:after {\n    border-color: var(--border-color-unselected-hover);\n  }\n\n  // background - selected - focus\n  &:not(:disabled):checked:focus + label:after,\n  &:not(:disabled):indeterminate:focus + label:after {\n    border-color: var(--border-color-selected-focus);\n  }\n\n  // background - selected - hover\n  &:not(:disabled):checked:hover + label:after,\n  &:not(:disabled):indeterminate:hover + label:after,\n  &:not(:disabled):checked:hover:focus + label:after,\n  &:not(:disabled):indeterminate:hover:focus + label:after {\n    background-color: var(--background-hover);\n    border-color: var(--border-color-selected-hover);\n  }\n}\n\n@mixin inputDisabled {\n  &:disabled + label {\n    color: var(--label-color-disabled);\n  }\n\n  &:checked:disabled:before {\n    background-color: var(--icon-color-disabled);\n  }\n\n  &:disabled,\n  &:disabled + label {\n    cursor: not-allowed;\n  }\n}\n\n@mixin inputTransitions {\n  // checkbox transitions\n  &:hover:before,\n  &:focus:before,\n  &:hover + label:after,\n  &:focus + label:after {\n    transition: 85ms ease-out;\n    transition-property: background-color, border-color, transform;\n  }\n\n  &:focus + label:before {\n    box-shadow: 0 0 0 var(--outline-width) var(--color-focus-outline);\n    transform: translate3d(0, 0, 0);\n    transition: 85ms ease-out;\n    transition-property: box-shadow, transform;\n  }\n}\n\n\n@mixin label {\n  color: var(--label-color);\n  cursor: pointer;\n  font-size: var(--label-font-size);\n  line-height: var(--lineheight-m);\n  padding-left: calc(var(--size) + var(--label-padding));\n  padding-top: calc((var(--size) - (var(--label-font-size) * var(--lineheight-m))) / 2);\n  position: relative;\n\n  &:before,\n  &:after {\n    content: \"\";\n    left: 0;\n    position: absolute;\n    top: 0;\n  }\n\n  // focus outline\n  &:before {\n    height: var(--size);\n    width: var(--size);\n  }\n\n  // background\n  &:after {\n    background-color: var(--background-unselected);\n    border: var(--border-width) solid var(--border-color-unselected);\n    height: var(--size);\n    width: var(--size);\n  }\n}\n\n@mixin noLabel {\n  & {\n    padding-left: var(--size);\n  }\n}\n\n@mixin error-text {\n  background-color: var(--color-error-light);\n  border-left: 8px solid var(--color-error);\n  color: var(--color-black);\n  display: flex;\n  flex-basis: 100%;\n  font-size: var(--fontsize-body-m);\n  margin-top: var(--spacing-2-xs);\n  padding: var(--spacing-2-xs);\n  position: relative;\n\n  &:before {\n    background: var(--color-error);\n    content: '';\n    display: inline-block;\n    height: var(--icon-size);\n    margin-right: var(--spacing-2-xs);\n    -webkit-mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.45608C11.5239 2.86969 12.3977 2.84875 12.7842 3.39325L12.825 3.45608L21.8771 18.6666C22.2202 19.2432 21.8055 19.951 21.1235 19.9976L21.052 20H2.94799C2.24813 20 1.7987 19.3114 2.09013 18.7267L2.12295 18.6666L11.175 3.45608ZM13 16V18H11V16H13ZM13 8.5V14.5H11V8.5H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n    mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.45608C11.5239 2.86969 12.3977 2.84875 12.7842 3.39325L12.825 3.45608L21.8771 18.6666C22.2202 19.2432 21.8055 19.951 21.1235 19.9976L21.052 20H2.94799C2.24813 20 1.7987 19.3114 2.09013 18.7267L2.12295 18.6666L11.175 3.45608ZM13 16V18H11V16H13ZM13 8.5V14.5H11V8.5H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n    pointer-events: none;\n    width: var(--icon-size);\n  }\n}\n\n@mixin checkbox(\n  $all: true,\n  $base: false,\n  $input: false,\n  $label: false,\n  $noLabel: false,\n  $error-text: false,\n  $override: null,\n  $react: false\n) {\n  $className: 'checkbox';\n\n  @if $override {\n    $className: $override;\n  }\n\n  @if $all or $base {\n    @include BemUtil.block($className, if($override, true, false), $react) {\n      @include base;\n    }\n  }\n\n  @if $all or $input {\n    @if $react {\n      @include BemUtil.unscopedElement($className, 'input', true) {\n        @include input;\n        @include inputDisabled;\n        @include inputTransitions;\n        @include inputCustom;\n      }\n    } @else {\n      @include BemUtil.block($className, if($override, true, false), false) {\n        & #{&} {\n          @include BemUtil.element('input') {\n            @include input;\n            @include inputDisabled;\n            @include inputTransitions;\n            @include inputCustom;\n          }\n        }\n      }\n    }\n  }\n\n  @if $all or $label {\n    @if $react {\n      @include BemUtil.unscopedElement($className, 'label', true) {\n        @include label;\n      }\n    } @else {\n      @include BemUtil.block($className, if($override, true, false), false) {\n        & #{&} {\n          @include BemUtil.element('label') {\n            @include label;\n          }\n        }\n      }\n    }\n  }\n\n  @if $all or $noLabel {\n    @if $react {\n      @include BemUtil.unscopedElement($className, 'label', true) {\n        @include noLabel;\n      }\n    } @else {\n      @include BemUtil.unscopedElement($className, 'label') {\n        & #{&}--hidden {\n          @include noLabel;\n        }\n      }\n    }\n  }\n\n  @if $all or $error-text {\n    @if $react {\n      @include BemUtil.unscopedElement($className, 'error-text', true) {\n        @include error-text;\n      }\n    } @else {\n      @include BemUtil.block($className, if($override, true, false), false) {\n        & #{&} {\n          @include BemUtil.element('error-text') {\n            @include error-text;\n          }\n        }\n      }\n    }\n  }\n\n}\n"]}

package/lib/components/checkbox/checkbox.min.css

@@ -0,0 +1 @@
+.hds-checkbox{--size:24px;--icon-scale:1;--border-width:2px;--outline-width:3px;--label-font-size:var(--fontsize-body-m);--label-padding:var(--spacing-2-xs);--background-unselected:transparent;--background-selected:var(--color-bus);--background-hover:var(--color-bus-dark);--background-disabled:var(--color-black-10);--border-color-selected:var(--color-bus);--border-color-selected-hover:var(--color-bus-dark);--border-color-selected-focus:var(--color-bus);--border-color-unselected:var(--color-black-50);--border-color-unselected-hover:var(--color-black-90);--border-color-unselected-focus:var(--color-black-90);--border-color-disabled:var(--color-black-10);--icon-color-unselected:transparent;--icon-color-selected:var(--color-white);--icon-color-disabled:var(--color-white);--label-color:var(--color-black-90);--label-color-disabled:var(--color-black-40);--icon-size:var(--spacing-m);display:flex;flex-wrap:wrap;min-height:var(--size);position:relative}.hds-checkbox,.hds-checkbox *,.hds-checkbox :after,.hds-checkbox :before{box-sizing:border-box}.hds-checkbox:not(:first-of-type){margin-top:var(--spacing-2-xs)}.hds-checkbox .hds-checkbox__input{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;font-family:inherit;font-size:100%;height:var(--size);left:0;line-height:1.15;margin:0;outline:none;position:absolute;top:0;width:var(--size)}.hds-checkbox .hds-checkbox__input:before{background-color:var(--icon-color-unselected);content:"";height:var(--size);left:0;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M21 7L10 18l-5.5-5.5L6 11l4 4 9.5-9.5z'/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M21 7L10 18l-5.5-5.5L6 11l4 4 9.5-9.5z'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:calc(var(--size) * var(--icon-scale));mask-size:calc(var(--size) * var(--icon-scale));position:absolute;top:0;transform:scale(.6);width:var(--size);z-index:1}.hds-checkbox .hds-checkbox__input:disabled+label{color:var(--label-color-disabled)}.hds-checkbox .hds-checkbox__input:checked:disabled:before{background-color:var(--icon-color-disabled)}.hds-checkbox .hds-checkbox__input:disabled,.hds-checkbox .hds-checkbox__input:disabled+label{cursor:not-allowed}.hds-checkbox .hds-checkbox__input:focus+label:after,.hds-checkbox .hds-checkbox__input:focus:before,.hds-checkbox .hds-checkbox__input:hover+label:after,.hds-checkbox .hds-checkbox__input:hover:before{transition:85ms ease-out;transition-property:background-color,border-color,transform}.hds-checkbox .hds-checkbox__input:focus+label:before{box-shadow:0 0 0 var(--outline-width) var(--color-focus-outline);transform:translateZ(0);transition:85ms ease-out;transition-property:box-shadow,transform}.hds-checkbox .hds-checkbox__input:checked:before{background-color:var(--icon-color-selected);transform:scale(1)}.hds-checkbox .hds-checkbox__input:not(:checked):indeterminate:before{background-color:var(--icon-color-selected);-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M6 11h12v2H6z'/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M6 11h12v2H6z'/%3E%3C/g%3E%3C/svg%3E");transform:scale(1)}.hds-checkbox .hds-checkbox__input:checked+label:after,.hds-checkbox .hds-checkbox__input:indeterminate+label:after{background-color:var(--background-selected);border-color:var(--border-color-selected)}.hds-checkbox .hds-checkbox__input:disabled+label:after{background-color:var(--background-disabled);border-color:var(--border-color-disabled)}.hds-checkbox .hds-checkbox__input:not(:disabled):focus+label:after{border-color:var(--border-color-unselected-focus)}.hds-checkbox .hds-checkbox__input:not(:disabled):hover+label:after,.hds-checkbox .hds-checkbox__input:not(:disabled):hover:focus+label:after{border-color:var(--border-color-unselected-hover)}.hds-checkbox .hds-checkbox__input:not(:disabled):checked:focus+label:after,.hds-checkbox .hds-checkbox__input:not(:disabled):indeterminate:focus+label:after{border-color:var(--border-color-selected-focus)}.hds-checkbox .hds-checkbox__input:not(:disabled):checked:hover+label:after,.hds-checkbox .hds-checkbox__input:not(:disabled):checked:hover:focus+label:after,.hds-checkbox .hds-checkbox__input:not(:disabled):indeterminate:hover+label:after,.hds-checkbox .hds-checkbox__input:not(:disabled):indeterminate:hover:focus+label:after{background-color:var(--background-hover);border-color:var(--border-color-selected-hover)}.hds-checkbox .hds-checkbox__label{color:var(--label-color);cursor:pointer;font-size:var(--label-font-size);line-height:var(--lineheight-m);padding-left:calc(var(--size) + var(--label-padding));padding-top:calc((var(--size) - var(--label-font-size) * var(--lineheight-m)) / 2);position:relative}.hds-checkbox .hds-checkbox__label:after,.hds-checkbox .hds-checkbox__label:before{content:"";left:0;position:absolute;top:0}.hds-checkbox .hds-checkbox__label:before{height:var(--size);width:var(--size)}.hds-checkbox .hds-checkbox__label:after{background-color:var(--background-unselected);border:var(--border-width) solid var(--border-color-unselected);height:var(--size);width:var(--size)}.hds-checkbox__label .hds-checkbox__label--hidden{padding-left:var(--size)}.hds-checkbox .hds-checkbox__error-text{background-color:var(--color-error-light);border-left:8px solid var(--color-error);color:var(--color-black);display:flex;flex-basis:100%;font-size:var(--fontsize-body-m);margin-top:var(--spacing-2-xs);padding:var(--spacing-2-xs);position:relative}.hds-checkbox .hds-checkbox__error-text:before{background:var(--color-error);content:"";display:inline-block;height:var(--icon-size);margin-right:var(--spacing-2-xs);-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.456c.349-.586 1.223-.607 1.61-.063l.04.063 9.052 15.21c.343.577-.072 1.285-.753 1.332l-.072.002H2.948c-.7 0-1.15-.689-.858-1.273l.033-.06 9.052-15.21zM13 16v2h-2v-2h2zm0-7.5v6h-2v-6h2z' fill='currentColor'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.456c.349-.586 1.223-.607 1.61-.063l.04.063 9.052 15.21c.343.577-.072 1.285-.753 1.332l-.072.002H2.948c-.7 0-1.15-.689-.858-1.273l.033-.06 9.052-15.21zM13 16v2h-2v-2h2zm0-7.5v6h-2v-6h2z' fill='currentColor'/%3E%3C/svg%3E");pointer-events:none;width:var(--icon-size)}

package/lib/components/checkbox/checkbox.min.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/_bem.scss","../../../src/components/checkbox/checkbox.scss","../../../src/components/checkbox/_checkbox-mixin.scss"],"names":[],"mappings":"AAoFM,cCnFN,WAAA,CCKE,cAAA,CACA,kBAAA,CACA,mBAAA,CACA,wCAAA,CACA,mCAAA,CACA,mCAAA,CACA,sCAAA,CACA,wCAAA,CACA,2CAAA,CACA,wCAAA,CACA,mDAAA,CACA,8CAAA,CACA,+CAAA,CACA,qDAAA,CACA,qDAAA,CACA,6CAAA,CACA,mCAAA,CACA,wCAAA,CACA,wCAAA,CACA,mCAAA,CACA,4CAAA,CACA,4BAAA,CAEA,YAAA,CACA,cAAA,CACA,sBAAA,CACA,iBDJF,CCME,yEAIE,qBDPJ,CCWE,kCACE,8BDNJ,CD8DM,mCEjDJ,uBAAA,CAAA,oBAAA,CAAA,eAAA,CACA,cAAA,CAIA,mBAAA,CACA,cAAA,CACA,kBAAA,CACA,MAAA,CAKA,gBAAA,CACA,QAAA,CACA,YAAA,CACA,iBAAA,CACA,KAAA,CACA,iBDdF,CCgBE,0CAEE,6CAAA,CACA,UAAA,CACA,kBAAA,CACA,MAAA,CACA,2RAAA,CAAA,mRAAA,CACA,4BAAA,CAAA,oBAAA,CACA,6BAAA,CAAA,qBAAA,CACA,uDAAA,CAAA,+CAAA,CACA,iBAAA,CACA,KAAA,CACA,mBAAA,CACA,iBAAA,CACA,SDfJ,CC4EE,kDACE,iCD1EJ,CC6EE,2DACE,2CD3EJ,CC8EE,8FAEE,kBD7EJ,CCmFE,0MAIE,wBAAA,CACA,2DDpFJ,CCuFE,sDACE,gEAAA,CACA,uBAAA,CACA,wBAAA,CACA,wCDrFJ,CCIE,kDACE,2CAAA,CACA,kBDFJ,CCME,sEACE,2CAAA,CACA,kQAAA,CAAA,0PAAA,CACA,kBDJJ,CCQE,oHAEE,2CAAA,CACA,yCDPJ,CCWE,wDACE,2CAAA,CACA,yCDTJ,CCaE,oEACE,iDDXJ,CCeE,8IAEE,iDDdJ,CCkBE,8JAEE,+CDjBJ,CCqBE,wUAIE,wCAAA,CACA,+CDtBJ,CDnBM,mCEgFJ,wBAAA,CACA,cAAA,CACA,gCAAA,CACA,+BAAA,CACA,qDAAA,CACA,kFAAA,CACA,iBDzDF,CC2DE,mFAEE,UAAA,CACA,MAAA,CACA,iBAAA,CACA,KD1DJ,CC8DE,0CACE,kBAAA,CACA,iBD5DJ,CCgEE,yCACE,6CAAA,CACA,+DAAA,CACA,kBAAA,CACA,iBD9DJ,CCmEE,kDACE,wBDhEJ,CDjDM,wCEsHJ,yCAAA,CACA,wCAAA,CACA,wBAAA,CACA,YAAA,CACA,eAAA,CACA,gCAAA,CACA,8BAAA,CACA,2BAAA,CACA,iBDjEF,CCmEE,+CACE,6BAAA,CACA,UAAA,CACA,oBAAA,CACA,uBAAA,CACA,gCAAA,CACA,mZAAA,CACA,2YAAA,CACA,mBAAA,CACA,sBDjEJ","file":"checkbox.min.css","sourcesContent":["@use \"sass:string\";\n\n$blockPrefix: 'hds-';\n$modifierDelimeter: '--';\n$elementDelimeter: '__';\n\n// Copied from https://github.com/Shudrum/sass-easy-bem\n// The module was added to root/node_modules, so SASS cannot find it from core.\n\n// Copyright (c) 2018-2019 Julien Martin.\n// This source code is licensed under the MIT license found in the\n// LICENSE file in the root directory of this source tree.\n\n// Utility functions\n\n@function get-parent-selector($selector) {\n  $parent: null;\n\n  @while string.index('#{$selector}', ' ') {\n    $first-element: string.slice('#{$selector}', 0, string.index('#{$selector}', ' ') - 1);\n\n    @if $parent {\n      $parent: '#{$parent} #{$first-element}';\n    } @else {\n      $parent: $first-element;\n    }\n\n    $selector: string.slice('#{$selector}', string.index('#{$selector}', ' ') + 1);\n  }\n\n  @return $parent;\n}\n\n@function get-last-selector($selector) {\n  @while string.index('#{$selector}', ' ') {\n    $selector: string.slice('#{$selector}', string.index('#{$selector}', ' ') + 1);\n  }\n\n  @return $selector;\n}\n\n@function get-block($selector) {\n  $have-element: string.index('#{&}', $elementDelimeter);\n  $have-modifier: string.index('#{&}', $modifierDelimeter);\n\n  @if $have-element {\n    @return string.slice('#{$selector}', 0, string.index('#{&}', $elementDelimeter) - 1);\n  }\n\n  @if $have-modifier {\n    @return string.slice('#{$selector}', 0, string.index('#{&}', $modifierDelimeter) - 1);\n  }\n\n  @return $selector;\n}\n\n@function get-element($selector) {\n  $have-modifier: string.index('#{$selector}', $modifierDelimeter);\n\n  @if $have-modifier {\n    $selector: string.slice('#{$selector}', 0, string.index('#{$selector}', $modifierDelimeter) - 1);\n\n    @while string.index(string.slice('#{$selector}', 2), '.') {\n      $selector: string.slice('#{$selector}', string.index(string.slice('#{$selector}', 2), '.') + 1);\n    }\n  }\n\n  @return $selector;\n}\n\n// prefix added by HDS\n// use for creating classes like .hds-<$block>\n// set $noPrefix to false to create classes like .-<$block>\n@mixin block($block, $noPrefix: false, $react: false) {\n  $className: $block;\n\n  @if not($noPrefix) {\n    $className: #{$blockPrefix + $block};\n  }\n\n  @if $react {\n    @content;\n  } @else {\n    @at-root {\n      .#{$className} {\n        @content;\n      }\n    }\n  }\n}\n\n// use inside block() or another element() to create scoped classes like .hds-<block>.hds-<block>__<$element>\n@mixin element($element) {\n  $is-modifier: string.index('#{&}', $modifierDelimeter);\n  // stylelint-disable-next-line scss/function-no-unknown\n  $block: get-block(&);\n\n  @if not $is-modifier {\n    @at-root {\n      #{$block}__#{$element} {\n        @content;\n      }\n    }\n  }\n\n  @if $is-modifier {\n    $is-element: string.index('#{&}', $elementDelimeter);\n\n    @if $is-element {\n      $block: string.slice('#{&}', 0, string.index('#{&}', $elementDelimeter) - 1);\n\n      @at-root {\n        & #{$block}__#{$element} {\n          @content;\n        }\n      }\n    }\n\n    @if not $is-element {\n      $block: string.slice('#{&}', 0, string.index('#{&}', $modifierDelimeter) - 1);\n      $block: string.slice($block, 1, string.index(string.slice($block, 2, -1), '.'));\n\n      @at-root {\n        & #{$block}__#{$element} {\n          @content;\n        }\n      }\n    }\n  }\n}\n\n// use inside block() or element() to create scoped classes like .hds-<block>.hds-<block>--<$modifier>\n@mixin modifier($modifier) {\n  $parent-selector: get-parent-selector('#{&}');\n  $last-selector: get-last-selector('#{&}');\n  // stylelint-disable-next-line scss/function-no-unknown\n  $element: get-element($last-selector);\n\n  @at-root {\n    @if $parent-selector {\n      #{$parent-selector} #{$last-selector}#{$element}#{$modifierDelimeter}#{$modifier} {\n        @content;\n      }\n    } @else {\n      #{$last-selector}#{$element}#{$modifierDelimeter}#{$modifier} {\n        @content;\n      }\n    }\n  }\n}\n\n// end of sass-easy-bem\n\n// HDS add-on to create .hds-<block>--modifier instead of .hds-<block>.hds-<block>--modifier\n@mixin unscopedModifier($block, $modifier, $react: false) {\n  @if $react {\n    @content;\n  } @else {\n    @at-root {\n      .#{$blockPrefix + $block}#{$modifierDelimeter}#{$modifier} {\n        @content;\n      }\n    }\n  }\n}\n\n// HDS add-on to create .hds-<block>__element instead of .hds-<block>.hds-<block>__element\n@mixin unscopedElement($block, $element, $react: false) {\n  @if $react {\n    @content;\n  } @else {\n    @at-root {\n      .#{$blockPrefix + $block}#{$elementDelimeter}#{$element} {\n        @content;\n      }\n    }\n  }\n}\n\n// HDS add-on to create .hds-<block>--modifier.hds-<block>--theme {\n@mixin unscopedModifierWithTheme($block, $modifier, $theme, $react: false) {\n  @if $react {\n    @content;\n  } @else {\n    @at-root {\n      .#{$blockPrefix + $block}#{$modifierDelimeter}#{$modifier}.#{$blockPrefix + $block}#{$modifierDelimeter}#{$theme} {\n        @content;\n      }\n    }\n  }\n}","@use './checkbox-mixin' as *;\n@include checkbox;\n","@use '../../utils/bem' as BemUtil;\n\n@mixin base {\n  --size: 24px;\n\n  // icon size relative to the checkbox size (--size)\n  --icon-scale: 1;\n  --border-width: 2px;\n  --outline-width: 3px;\n  --label-font-size: var(--fontsize-body-m);\n  --label-padding: var(--spacing-2-xs);\n  --background-unselected: transparent;\n  --background-selected: var(--color-bus);\n  --background-hover: var(--color-bus-dark);\n  --background-disabled: var(--color-black-10);\n  --border-color-selected: var(--color-bus);\n  --border-color-selected-hover: var(--color-bus-dark);\n  --border-color-selected-focus: var(--color-bus);\n  --border-color-unselected: var(--color-black-50);\n  --border-color-unselected-hover: var(--color-black-90);\n  --border-color-unselected-focus: var(--color-black-90);\n  --border-color-disabled: var(--color-black-10);\n  --icon-color-unselected: transparent;\n  --icon-color-selected: var(--color-white);\n  --icon-color-disabled: var(--color-white);\n  --label-color: var(--color-black-90);\n  --label-color-disabled: var(--color-black-40);\n  --icon-size: var(--spacing-m);\n\n  display: flex;\n  flex-wrap: wrap;\n  min-height: var(--size);\n  position: relative;\n\n  &,\n  & *,\n  & *:before,\n  & *:after {\n    box-sizing: border-box;\n  }\n\n  /* stylelint-disable no-descending-specificity */\n  &:not(:first-of-type) {\n    margin-top: var(--spacing-2-xs);\n  }\n}\n\n@mixin input {\n  -moz-appearance: none;\n  -webkit-appearance: none;\n  appearance: none;\n  cursor: pointer;\n\n  // Normalize.css rules\n  // Change the font styles in all browsers.\n  font-family: inherit; // 1\n  font-size: 100%; // 1\n  height: var(--size);\n  left: 0;\n\n  // Normalize.css rules\n  // 1. Change the font styles in all browsers.\n  // 2. Remove the margin in Firefox and Safari.\n  line-height: 1.15; // 1\n  margin: 0; // 2\n  outline: none;\n  position: absolute;\n  top: 0;\n  width: var(--size);\n\n  &:before {\n    // checkbox icon\n    background-color: var(--icon-color-unselected);\n    content: '';\n    height: var(--size);\n    left: 0;\n    mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpolygon fill='currentColor' points='21 7 10 18 4.5 12.5 6 11 10 15 19.5 5.5'/%3E %3C/g%3E %3C/svg%3E\");\n    mask-position: center;\n    mask-repeat: no-repeat;\n    mask-size: calc(var(--size) * var(--icon-scale));\n    position: absolute;\n    top: 0;\n    transform: scale(0.6);\n    width: var(--size);\n    z-index: 1;\n  }\n}\n\n@mixin inputCustom {\n  // CUSTOM CHECKBOX\n\n  // checkbox icon - selected\n  &:checked:before {\n    background-color: var(--icon-color-selected);\n    transform: scale(1);\n  }\n\n  // checkbox icon - indeterminated\n  &:not(:checked):indeterminate:before {\n    background-color: var(--icon-color-selected);\n    mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M6 11h12v2H6z'/%3E%3C/g%3E%3C/svg%3E\");\n    transform: scale(1);\n  }\n\n  // background - selected or indeterminated\n  &:checked + label:after,\n  &:indeterminate + label:after {\n    background-color: var(--background-selected);\n    border-color: var(--border-color-selected);\n  }\n\n  // background\n  &:disabled + label:after {\n    background-color: var(--background-disabled);\n    border-color: var(--border-color-disabled);\n  }\n\n  // background - unselected - focus\n  &:not(:disabled):focus + label:after {\n    border-color: var(--border-color-unselected-focus);\n  }\n\n  // background - unselected - hover\n  &:not(:disabled):hover + label:after,\n  &:not(:disabled):hover:focus + label:after {\n    border-color: var(--border-color-unselected-hover);\n  }\n\n  // background - selected - focus\n  &:not(:disabled):checked:focus + label:after,\n  &:not(:disabled):indeterminate:focus + label:after {\n    border-color: var(--border-color-selected-focus);\n  }\n\n  // background - selected - hover\n  &:not(:disabled):checked:hover + label:after,\n  &:not(:disabled):indeterminate:hover + label:after,\n  &:not(:disabled):checked:hover:focus + label:after,\n  &:not(:disabled):indeterminate:hover:focus + label:after {\n    background-color: var(--background-hover);\n    border-color: var(--border-color-selected-hover);\n  }\n}\n\n@mixin inputDisabled {\n  &:disabled + label {\n    color: var(--label-color-disabled);\n  }\n\n  &:checked:disabled:before {\n    background-color: var(--icon-color-disabled);\n  }\n\n  &:disabled,\n  &:disabled + label {\n    cursor: not-allowed;\n  }\n}\n\n@mixin inputTransitions {\n  // checkbox transitions\n  &:hover:before,\n  &:focus:before,\n  &:hover + label:after,\n  &:focus + label:after {\n    transition: 85ms ease-out;\n    transition-property: background-color, border-color, transform;\n  }\n\n  &:focus + label:before {\n    box-shadow: 0 0 0 var(--outline-width) var(--color-focus-outline);\n    transform: translate3d(0, 0, 0);\n    transition: 85ms ease-out;\n    transition-property: box-shadow, transform;\n  }\n}\n\n\n@mixin label {\n  color: var(--label-color);\n  cursor: pointer;\n  font-size: var(--label-font-size);\n  line-height: var(--lineheight-m);\n  padding-left: calc(var(--size) + var(--label-padding));\n  padding-top: calc((var(--size) - (var(--label-font-size) * var(--lineheight-m))) / 2);\n  position: relative;\n\n  &:before,\n  &:after {\n    content: \"\";\n    left: 0;\n    position: absolute;\n    top: 0;\n  }\n\n  // focus outline\n  &:before {\n    height: var(--size);\n    width: var(--size);\n  }\n\n  // background\n  &:after {\n    background-color: var(--background-unselected);\n    border: var(--border-width) solid var(--border-color-unselected);\n    height: var(--size);\n    width: var(--size);\n  }\n}\n\n@mixin noLabel {\n  & {\n    padding-left: var(--size);\n  }\n}\n\n@mixin error-text {\n  background-color: var(--color-error-light);\n  border-left: 8px solid var(--color-error);\n  color: var(--color-black);\n  display: flex;\n  flex-basis: 100%;\n  font-size: var(--fontsize-body-m);\n  margin-top: var(--spacing-2-xs);\n  padding: var(--spacing-2-xs);\n  position: relative;\n\n  &:before {\n    background: var(--color-error);\n    content: '';\n    display: inline-block;\n    height: var(--icon-size);\n    margin-right: var(--spacing-2-xs);\n    -webkit-mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.45608C11.5239 2.86969 12.3977 2.84875 12.7842 3.39325L12.825 3.45608L21.8771 18.6666C22.2202 19.2432 21.8055 19.951 21.1235 19.9976L21.052 20H2.94799C2.24813 20 1.7987 19.3114 2.09013 18.7267L2.12295 18.6666L11.175 3.45608ZM13 16V18H11V16H13ZM13 8.5V14.5H11V8.5H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n    mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.45608C11.5239 2.86969 12.3977 2.84875 12.7842 3.39325L12.825 3.45608L21.8771 18.6666C22.2202 19.2432 21.8055 19.951 21.1235 19.9976L21.052 20H2.94799C2.24813 20 1.7987 19.3114 2.09013 18.7267L2.12295 18.6666L11.175 3.45608ZM13 16V18H11V16H13ZM13 8.5V14.5H11V8.5H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n    pointer-events: none;\n    width: var(--icon-size);\n  }\n}\n\n@mixin checkbox(\n  $all: true,\n  $base: false,\n  $input: false,\n  $label: false,\n  $noLabel: false,\n  $error-text: false,\n  $override: null,\n  $react: false\n) {\n  $className: 'checkbox';\n\n  @if $override {\n    $className: $override;\n  }\n\n  @if $all or $base {\n    @include BemUtil.block($className, if($override, true, false), $react) {\n      @include base;\n    }\n  }\n\n  @if $all or $input {\n    @if $react {\n      @include BemUtil.unscopedElement($className, 'input', true) {\n        @include input;\n        @include inputDisabled;\n        @include inputTransitions;\n        @include inputCustom;\n      }\n    } @else {\n      @include BemUtil.block($className, if($override, true, false), false) {\n        & #{&} {\n          @include BemUtil.element('input') {\n            @include input;\n            @include inputDisabled;\n            @include inputTransitions;\n            @include inputCustom;\n          }\n        }\n      }\n    }\n  }\n\n  @if $all or $label {\n    @if $react {\n      @include BemUtil.unscopedElement($className, 'label', true) {\n        @include label;\n      }\n    } @else {\n      @include BemUtil.block($className, if($override, true, false), false) {\n        & #{&} {\n          @include BemUtil.element('label') {\n            @include label;\n          }\n        }\n      }\n    }\n  }\n\n  @if $all or $noLabel {\n    @if $react {\n      @include BemUtil.unscopedElement($className, 'label', true) {\n        @include noLabel;\n      }\n    } @else {\n      @include BemUtil.unscopedElement($className, 'label') {\n        & #{&}--hidden {\n          @include noLabel;\n        }\n      }\n    }\n  }\n\n  @if $all or $error-text {\n    @if $react {\n      @include BemUtil.unscopedElement($className, 'error-text', true) {\n        @include error-text;\n      }\n    } @else {\n      @include BemUtil.block($className, if($override, true, false), false) {\n        & #{&} {\n          @include BemUtil.element('error-text') {\n            @include error-text;\n          }\n        }\n      }\n    }\n  }\n\n}\n"]}

package/lib/components/container/container.css

@@ -0,0 +1,20 @@
+.hds-container {
+  box-sizing: border-box;
+  padding-left: var(--spacing-layout-2-xs);
+  padding-right: var(--spacing-layout-2-xs);
+}
+
+@media (min-width: 768px) {
+  .hds-container {
+    padding-left: var(--spacing-layout-xs);
+    padding-right: var(--spacing-layout-xs);
+  }
+}
+
+@media (min-width: 1248px) {
+  .hds-container {
+    max-width: var(--container-width-xl);
+    padding-left: 0;
+    padding-right: 0;
+  }
+}

package/lib/components/container/container.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/container/container.css%23sass","../../../src/components/container/container.css"],"names":[],"mappings":"AAAA;EACE,sBAAA;EACA,wCAAA;EACA,yCAAA;ACCF;;ADEA;EACE;IACE,sCAAA;IACA,uCAAA;ECCF;AACF;;ADEA;ECAA;IACE,oCAAA;IDEE,eAAA;IACA,gBAAA;ECAF;AACF","file":"container.css","sourcesContent":[".hds-container {\n  box-sizing: border-box;\n  padding-left: var(--spacing-layout-2-xs);\n  padding-right: var(--spacing-layout-2-xs);\n}\n\n@media(min-width: 768px) {\n  .hds-container {\n    padding-left: var(--spacing-layout-xs);\n    padding-right: var(--spacing-layout-xs);\n  }\n}\n\n@media (min-width: 1248px) {\n  .hds-container {\n    max-width: var(--container-width-xl);\n    padding-left: 0;\n    padding-right: 0;\n  }\n}\n",".hds-container {\n  box-sizing: border-box;\n  padding-left: var(--spacing-layout-2-xs);\n  padding-right: var(--spacing-layout-2-xs);\n}\n\n@media(min-width: 768px) {\n  .hds-container {\n    padding-left: var(--spacing-layout-xs);\n    padding-right: var(--spacing-layout-xs);\n  }\n}\n\n@media (min-width: 1248px) {\n  .hds-container {\n    max-width: var(--container-width-xl);\n    padding-left: 0;\n    padding-right: 0;\n  }\n}\n"]}

package/lib/components/container/container.min.css

@@ -0,0 +1 @@
+.hds-container{box-sizing:border-box;padding-left:var(--spacing-layout-2-xs);padding-right:var(--spacing-layout-2-xs)}@media (min-width:768px){.hds-container{padding-left:var(--spacing-layout-xs);padding-right:var(--spacing-layout-xs)}}@media (min-width:1248px){.hds-container{max-width:var(--container-width-xl);padding-left:0;padding-right:0}}

package/lib/components/container/container.min.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/container/container.css%23sass","../../../src/components/container/container.css"],"names":[],"mappings":"AAAA,eACE,qBAAA,CACA,uCAAA,CACA,wCCCF,CDEA,yBACE,eACE,qCAAA,CACA,sCCCF,CACF,CDEA,0BCAA,eACE,mCAAA,CDEE,cAAA,CACA,eCAF,CACF","file":"container.min.css","sourcesContent":[".hds-container {\n  box-sizing: border-box;\n  padding-left: var(--spacing-layout-2-xs);\n  padding-right: var(--spacing-layout-2-xs);\n}\n\n@media(min-width: 768px) {\n  .hds-container {\n    padding-left: var(--spacing-layout-xs);\n    padding-right: var(--spacing-layout-xs);\n  }\n}\n\n@media (min-width: 1248px) {\n  .hds-container {\n    max-width: var(--container-width-xl);\n    padding-left: 0;\n    padding-right: 0;\n  }\n}\n",".hds-container {\n  box-sizing: border-box;\n  padding-left: var(--spacing-layout-2-xs);\n  padding-right: var(--spacing-layout-2-xs);\n}\n\n@media(min-width: 768px) {\n  .hds-container {\n    padding-left: var(--spacing-layout-xs);\n    padding-right: var(--spacing-layout-xs);\n  }\n}\n\n@media (min-width: 1248px) {\n  .hds-container {\n    max-width: var(--container-width-xl);\n    padding-left: 0;\n    padding-right: 0;\n  }\n}\n"]}

package/lib/components/cookie-consent/_cookie-consent-tokens.scss

@@ -0,0 +1,127 @@
+/* stylelint-disable color-hex-length */
+
+/* This is copy of design-tokens/all.css. Could not import with out scss mixins. */
+:host {
+  --breakpoint-xs: 320px;
+  --breakpoint-s: 576px;
+  --breakpoint-m: 768px;
+  --breakpoint-l: 992px;
+  --breakpoint-xl: 1248px;
+  --container-width-xs: 288px;
+  --container-width-s: 544px;
+  --container-width-m: 720px;
+  --container-width-l: 944px;
+  --container-width-xl: 1200px;
+  --color-brick: #bd2719;
+  --color-brick-light: #ffeeed;
+  --color-brick-medium-light: #facbc8;
+  --color-brick-dark: #800e04;
+  --color-bus: #0000bf;
+  --color-bus-light: #f0f0ff;
+  --color-bus-medium-light: #ccccff;
+  --color-bus-dark: #00005e;
+  --color-coat-of-arms: #0072c6;
+  --color-coat-of-arms-light: #e6f4ff;
+  --color-coat-of-arms-medium-light: #b5daf7;
+  --color-coat-of-arms-dark: #005799;
+  --color-copper: #00d7a7;
+  --color-copper-light: #cffaf1;
+  --color-copper-medium-light: #9ef0de;
+  --color-copper-dark: #00a17d;
+  --color-engel: #ffe977;
+  --color-engel-light: #fff9db;
+  --color-engel-medium-light: #fff3b8;
+  --color-engel-dark: #dbc030;
+  --color-fog: #9fc9eb;
+  --color-fog-light: #e8f3fc;
+  --color-fog-medium-light: #d0e6f7;
+  --color-fog-dark: #72a5cf;
+  --color-gold: #c2a251;
+  --color-gold-light: #f7f2e4;
+  --color-gold-medium-light: #e8d7a7;
+  --color-gold-dark: #9e823c;
+  --color-metro: #fd4f00;
+  --color-metro-light: #ffeee6;
+  --color-metro-medium-light: #ffcab3;
+  --color-metro-dark: #bd2f00;
+  --color-silver: #dedfe1;
+  --color-silver-light: #f7f7f8;
+  --color-silver-medium-light: #efeff0;
+  --color-silver-dark: #b0b8bf;
+  --color-summer: #ffc61e;
+  --color-summer-light: #fff4d4;
+  --color-summer-medium-light: #ffe49c;
+  --color-summer-dark: #cc9200;
+  --color-suomenlinna: #f5a3c7;
+  --color-suomenlinna-light: #fff0f7;
+  --color-suomenlinna-medium-light: #ffdbeb;
+  --color-suomenlinna-dark: #e673a5;
+  --color-tram: #008741;
+  --color-tram-light: #dff7eb;
+  --color-tram-medium-light: #a3e3c2;
+  --color-tram-dark: #006631;
+  --color-focus-outline: #0072c6;
+  --color-black: #000000;
+  --color-white: #ffffff;
+  --color-black-5: #f2f2f2;
+  --color-black-10: #e6e6e6;
+  --color-black-20: #cccccc;
+  --color-black-30: #b3b3b3;
+  --color-black-40: #999999;
+  --color-black-50: #808080;
+  --color-black-60: #595959;
+  --color-black-70: #4d4d4d;
+  --color-black-80: #333333;
+  --color-black-90: #1a1a1a;
+  --color-error: #b01038;
+  --color-error-light: #f6e2e6;
+  --color-error-dark: #8d0d2d;
+  --color-success: #007a64;
+  --color-success-light: #e2f5f3;
+  --color-success-dark: #006250;
+  --color-alert: #ffda07;
+  --color-alert-light: #fff4b4;
+  --color-alert-dark: #d18200;
+  --color-info: #0062b9;
+  --color-info-light: #e5eff8;
+  --color-info-dark: #004f94;
+  --box-shadow-s: 0px 2px 10px 0px rgb(0 0 0 / 0.07);
+  --box-shadow-m: 0px 2px 10px 0px rgb(0 0 0 / 0.1);
+  --box-shadow-l: 0px 2px 20px 0px rgb(0 0 0 / 0.2);
+  --spacing-layout-2-xs: 1rem;
+  --spacing-layout-xs: 1.5rem;
+  --spacing-layout-s: 2rem;
+  --spacing-layout-m: 3rem;
+  --spacing-layout-l: 4rem;
+  --spacing-layout-xl: 6rem;
+  --spacing-layout-2-xl: 8rem;
+  --spacing-4-xs: 0.125rem;
+  --spacing-3-xs: 0.25rem;
+  --spacing-2-xs: 0.5rem;
+  --spacing-xs: 0.75rem;
+  --spacing-s: 1rem;
+  --spacing-m: 1.5rem;
+  --spacing-l: 2rem;
+  --spacing-xl: 2.5rem;
+  --spacing-2-xl: 3rem;
+  --spacing-3-xl: 3.5rem;
+  --spacing-4-xl: 4rem;
+  --spacing-5-xl: 4.5rem;
+  --fontsize-heading-xxl: 4rem;
+  --fontsize-heading-xl: 3rem;
+  --fontsize-heading-xl-mobile: 2.5rem;
+  --fontsize-heading-l: 2rem;
+  --fontsize-heading-m: 1.5rem;
+  --fontsize-heading-s: 1.25rem;
+  --fontsize-heading-xs: 1.125rem;
+  --fontsize-heading-xxs: 1rem;
+  --fontsize-body-s: 0.875rem;
+  --fontsize-body-m: 1rem;
+  --fontsize-body-l: 1.125rem;
+  --fontsize-body-xl: 1.25rem;
+  --font-default: helsinkigrotesk, arial, sans-serif;
+  --lineheight-s: 1;
+  --lineheight-m: 1.2;
+  --lineheight-l: 1.5;
+  --lineheight-xl: 1.75;
+}

package/lib/components/cookie-consent/_font-face.scss

@@ -0,0 +1,124 @@
+///
+/// Generates `@font-face` rules for different font weights and styles.
+///
+/// @param {boolean} $all - Whether to generate `@font-face` rules for all font weights and styles.
+/// @param {boolean} $font-style-italic - Whether to generate `@font-face` rules for italic font style.
+/// @param {boolean} $font-weight-400 - Whether to generate `@font-face` rules for font weight 400 (Normal or Regular).
+/// @param {boolean} $font-weight-500 - Whether to generate `@font-face` rules for font weight 500 (Medium).
+/// @param {boolean} $font-weight-700 - Whether to generate `@font-face` rules for font weight 700 (Bold).
+/// @param {boolean} $font-weight-900 - Whether to generate `@font-face` rules for font weight 900 (Black).
+///
+/// @example
+/// @use 'temp/font-face' as FontFace;
+///
+/// // Generate `@font-face` rules for all font weights and styles
+/// @include FontFace.font-face($all: true);
+///
+/// // Include only non-italic font-face styles with weights 400, 500 and 700
+/// @include FontFace.font-face(
+///   $all: false,
+///   $font-weight-400: true, // Normal or Regular
+///   $font-weight-500: true, // Medium
+///   $font-weight-700: true, // Bold
+/// );
+///
+@mixin font-face(
+    $all:true,
+
+    $font-style-italic: false, // Italic
+
+    $font-weight-400: false, // Normal or Regular
+    $font-weight-500: false, // Medium
+    $font-weight-700: false, // Bold
+    $font-weight-900: false, // Black
+  ){
+    $font-cdn-base: 'https://makasiini.hel.ninja/delivery/HelsinkiGrotesk';
+
+    @if $all or ($font-weight-400) {
+      @font-face {
+        font-display: swap;
+        font-family: HelsinkiGrotesk;
+        font-style: normal;
+        font-weight: 400;
+        src: url('#{$font-cdn-base}/565d73a693abe0776c801607ac28f0bf.woff') format('woff');
+        text-rendering: optimizelegibility;
+      }
+    }
+
+    @if $all or ($font-weight-400 and $font-style-italic) {
+      @font-face {
+        font-display: swap;
+        font-family: HelsinkiGrotesk;
+        font-style: italic;
+        font-weight: 400;
+        src: url('#{$font-cdn-base}/5bb29e3b7b1d3ef30121229bbe67c3e1.woff') format('woff');
+        text-rendering: optimizelegibility;
+      }
+    }
+
+    @if $all or ($font-weight-500) {
+      @font-face {
+        font-display: swap;
+        font-family: HelsinkiGrotesk;
+        font-style: normal;
+        font-weight: 500;
+        src: url('#{$font-cdn-base}/7c46f288e8133b87e6b12b45dac71865.woff') format('woff');
+        text-rendering: optimizelegibility;
+      }
+    }
+
+    @if $all or ($font-weight-500 and $font-style-italic) {
+      @font-face {
+        font-display: swap;
+        font-family: HelsinkiGrotesk;
+        font-style: italic;
+        font-weight: 500;
+        src: url('#{$font-cdn-base}/e62dc97e83a385e4d8cdc939cf1e4213.woff') format('woff');
+        text-rendering: optimizelegibility;
+      }
+    }
+
+    @if $all or ($font-weight-700) {
+      @font-face {
+        font-display: swap;
+        font-family: HelsinkiGrotesk;
+        font-style: normal;
+        font-weight: 700;
+        src: url('#{$font-cdn-base}/533af26cf28d7660f24c2884d3c27eac.woff') format('woff');
+        text-rendering: optimizelegibility;
+      }
+    }
+
+    @if $all or ($font-weight-700 and $font-style-italic) {
+      @font-face {
+        font-display: swap;
+        font-family: HelsinkiGrotesk;
+        font-style: italic;
+        font-weight: 700;
+        src: url('#{$font-cdn-base}/20d494430c87e15e194932b729d48270.woff') format('woff');
+        text-rendering: optimizelegibility;
+      }
+    }
+
+    @if $all or ($font-weight-900) {
+      @font-face {
+        font-display: swap;
+        font-family: HelsinkiGrotesk;
+        font-style: normal;
+        font-weight: 900;
+        src: url('#{$font-cdn-base}/a50a1bd245ce63abcc0d1da80ff790d2.woff') format('woff');
+        text-rendering: optimizelegibility;
+      }
+    }
+
+    @if $all or ($font-weight-900 and $font-style-italic) {
+      @font-face {
+        font-display: swap;
+        font-family: HelsinkiGrotesk;
+        font-style: italic;
+        font-weight: 900;
+        src: url('#{$font-cdn-base}/62a1781d8b396fbb025b0552cf6304d2.woff') format('woff');
+        text-rendering: optimizelegibility;
+      }
+    }
+  }

package/lib/components/cookie-consent/_fonts.scss

@@ -0,0 +1,73 @@
+$font-cdn-base: 'https://makasiini.hel.ninja/delivery/HelsinkiGrotesk';
+
+/* Webfont: HelsinkiGrotesk-Regular */
+@font-face {
+  font-family: HelsinkiGrotesk;
+  font-style: normal;
+  font-weight: $font-weight-regular;
+  src: url('#{$font-cdn-base}/565d73a693abe0776c801607ac28f0bf.woff') format('woff');
+  text-rendering: optimizelegibility;
+}
+
+/* Webfont: HelsinkiGrotesk-RegularItalic */
+@font-face {
+  font-family: HelsinkiGrotesk;
+  font-style: italic;
+  font-weight: $font-weight-regular;
+  src: url('#{$font-cdn-base}/5bb29e3b7b1d3ef30121229bbe67c3e1.woff') format('woff');
+  text-rendering: optimizelegibility;
+}
+
+/* Webfont: HelsinkiGrotesk-Medium */
+@font-face {
+  font-family: HelsinkiGrotesk;
+  font-style: normal;
+  font-weight: $font-weight-medium;
+  src: url('#{$font-cdn-base}/7c46f288e8133b87e6b12b45dac71865.woff') format('woff');
+  text-rendering: optimizelegibility;
+}
+
+/* Webfont: HelsinkiGrotesk-MediumItalic */
+@font-face {
+  font-family: HelsinkiGrotesk;
+  font-style: italic;
+  font-weight: $font-weight-medium;
+  src: url('#{$font-cdn-base}/e62dc97e83a385e4d8cdc939cf1e4213.woff') format('woff');
+  text-rendering: optimizelegibility;
+}
+
+/* Webfont: HelsinkiGrotesk-Bold */
+@font-face {
+  font-family: HelsinkiGrotesk;
+  font-style: normal;
+  font-weight: $font-weight-bold;
+  src: url('#{$font-cdn-base}/533af26cf28d7660f24c2884d3c27eac.woff') format('woff');
+  text-rendering: optimizelegibility;
+}
+
+/* Webfont: HelsinkiGrotesk-BoldItalic */
+@font-face {
+  font-family: HelsinkiGrotesk;
+  font-style: italic;
+  font-weight: $font-weight-bold;
+  src: url('#{$font-cdn-base}/20d494430c87e15e194932b729d48270.woff') format('woff');
+  text-rendering: optimizelegibility;
+}
+
+/* Webfont: HelsinkiGrotesk-Black */
+@font-face {
+  font-family: HelsinkiGrotesk;
+  font-style: normal;
+  font-weight: $font-weight-black;
+  src: url('#{$font-cdn-base}/a50a1bd245ce63abcc0d1da80ff790d2.woff') format('woff');
+  text-rendering: optimizelegibility;
+}
+
+/* Webfont: HelsinkiGrotesk-BlackItalic */
+@font-face {
+  font-family: HelsinkiGrotesk;
+  font-style: italic;
+  font-weight: $font-weight-black;
+  src: url('#{$font-cdn-base}/62a1781d8b396fbb025b0552cf6304d2.woff') format('woff');
+  text-rendering: optimizelegibility;
+}