@jorilindell/hds-core 4.10.1

package/lib/components/button/button.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/button/_button-mixin.scss","../../../src/utils/_bem.scss","../../../src/components/button/button.scss"],"names":[],"mappings":"AAwIA,YAAA;AAEA,kBAAA;AAaA,cAAA;AAEA,kBAAA;AAcA,kBAAA;AAcA,UAAA;AAWA,YAAA;AAEA,YAAA;AAaA,WAAA;AAaA,WAAA;AAEA,SAAA;AA4BA,UAAA;ACtKM;EDjFJ,mBAAA;EACA,0BAAA;EACA,sCAAA;EACA,gBAAA;EACA,oCAAA;EACA,oHAAA;EACA,iDAAA;EAGA;;GAAA;EAGA,iEAAA;EACA,+GAAA;EACA,qHAAA;EACA,uHAAA;EACA,0GAAA;EACA,uCAAA;EACA,0EAAA;EACA,gFAAA;EACA,kFAAA;EACA,6EAAA;EACA,8EAAA;EACA,mGAAA;EACA,yGAAA;EACA,2GAAA;EACA,sHAAA;EACA,uEAAA;EACA,wDAAA;EAEA,mBAAA;EACA,kDAAA;EACA,8DAAA;EACA,gBAAA;EAGA,sBAAA;EACA,qCAAA;EACA,oCAAA;EAAA,oCAAA;OAAA,+BAAA;EACA,8BAAA;EACA,oBAAA;EACA,oBAAA;EACA,eAAA;EACA,gBAAA;EACA,aAAA;EACA,yBAAA;EAAA,uBAAA;EAAA,gCAAA;EACA,gCAAA;EACA,SAAA;EACA,2BAAA;EACA,0BAAA;EACA,aAAA;EACA,mBAAA;EACA,gBAAA;EACA,uBAAA;EACA,uBAAA;EACA,kBAAA;EACA,kBAAA;EACA,qBAAA;EACA,oBAAA;EACA,mBAAA;EAEA,kDAAA;AEOF;AFNE;EACE,oCAAA;AEQJ;AFLE;EACE,mCAAA;AEOJ;AFJE;EAKE,0BAAA;AEEJ;AFCE,4BAAA,UAAA;EACE,wDAAA;EACA,gDAAA;EACA,kCAAA;EACA,6EAAA;AECJ;AFEE,oBAAA,UAAA;EACE,wDAAA;EACA,gDAAA;EACA,kCAAA;AEAJ;AFGE,qBAAA,WAAA;EACE,yDAAA;EACA,iDAAA;EACA,mCAAA;EACA,6EAAA;AEDJ;AFIE,uBAAA,aAAA;EACE,qBAAA;EAEA,2DAAA;EACA,mDAAA;EACA,qCAAA;EACA,aAAA;AEHJ;AFmNI;EACE,0BAAA;AEhNN;AFmOQ;EA/NN,cAAA;EACA,iCAAA;EACA,gCAAA;EAEA,oBAAA;AEDF;AFEE;EACE,mCAAA;AEAJ;AFGE,qDAAA,kBAAA;EACE,oCAAA;AEDJ;ADsCM;EDhCJ,gBAAA;EACA,sCAAA;EACA,uCAAA;AEFF;ADgCM;ED1BJ,WAAA;AEFF;AD4BM;EDlBJ,oCAAA;EACA,+CAAA;EACA,0CAAA;EACA,kDAAA;EACA,2BAAA;EACA,2BAAA;EACA,oCAAA;EACA,gDAAA;AENF;ADiBM;EDHJ,+BAAA;EACA,gDAAA;EACA,qCAAA;EACA,wCAAA;EACA,gCAAA;EACA,8CAAA;EACA,yBAAA;EACA,uCAAA;EACA,gDAAA;AEVF;ADKM;EDWJ,+BAAA;EACA,gDAAA;EACA,qCAAA;EACA,wCAAA;EACA,2BAAA;EACA,oCAAA;EACA,yBAAA;EACA,uCAAA;EACA,gDAAA;AEZF;ADPM;EDyBJ,+BAAA;EACA,wCAAA;EACA,2BAAA;EACA,oCAAA;EACA,8BAAA;EACA,uCAAA;AEdF;ADhBM;EDsCJ,wCAAA;EACA,mDAAA;EACA,8CAAA;EACA,oCAAA;EACA,+CAAA;EACA,0CAAA;EACA,2BAAA;EACA,gDAAA;AElBF;AD3BM;EDmDJ,sCAAA;EACA,iDAAA;EACA,4CAAA;EACA,kCAAA;EACA,6CAAA;EACA,wCAAA;EACA,2BAAA;EACA,gDAAA;AEpBF;ADZM;EDwCJ,6CAAA;EACA,wDAAA;EACA,mDAAA;EACA,yCAAA;EACA,oDAAA;EACA,+CAAA;EACA,2BAAA;AExBF;ADtBM;EDkDJ,+BAAA;EACA,yDAAA;EACA,qCAAA;EACA,yCAAA;EACA,kCAAA;AExBF;AD9BM;ED0DJ,+BAAA;EACA,yDAAA;EACA,qCAAA;EACA,2BAAA;EACA,kCAAA;AExBF;ADtCM;EDoEJ,sCAAA;EACA,4CAAA;EACA,4CAAA;EACA,kCAAA;EACA,wCAAA;EACA,wCAAA;EACA,2BAAA;EACA,iCAAA;EACA,iCAAA;AE1BF;ADlDM;EDgFJ,+BAAA;EACA,8CAAA;EACA,qCAAA;EACA,kCAAA;EACA,wCAAA;EACA,wCAAA;EACA,2BAAA;EACA,iCAAA;EACA,iCAAA;AE1BF;AD9DM;ED4FJ,+BAAA;EACA,8CAAA;EACA,qCAAA;EACA,2BAAA;EACA,iCAAA;EACA,2BAAA;EACA,iCAAA;EACA,iCAAA;AE1BF","file":"button.css","sourcesContent":["@use '../../utils/bem' as BemUtil;\n\n@mixin base {\n  --border-width: 2px;\n  --outline-width-focus: 3px;\n  --padding-horizontal: var(--spacing-l);\n  --min-size: 56px;\n  --padding-vertical: var(--spacing-s);\n  --padding: calc(var(--padding-vertical) - var(--border-width)) calc(var(--padding-horizontal) - var(--border-width));\n  --icon-reposition: calc(-1 * var(--spacing-2-xs));\n\n\n  /* logics, always falls back to previous (upper) if not given ->\n  (no) active color -> (no) hover color -> (no) focus color -> default color\n  */\n  --computed-background-color: var(--background-color, transparent);\n  --computed-background-color-focus: var(--background-color-focus, var(--computed-background-color, transparent));\n  --computed-background-color-hover: var(--background-color-hover, var(--computed-background-color-focus, transparent));\n  --computed-background-color-active: var(--background-color-active, var(--computed-background-color-hover, transparent));\n  --computed-background-color-disabled: var(--background-color-disabled, var(--color-black-20, transparent));\n  --computed-color: var(--color, inherit);\n  --computed-color-focus: var(--color-focus, var(--computed-color, inherit));\n  --computed-color-hover: var(--color-hover, var(--computed-color-focus, inherit));\n  --computed-color-active: var(--color-active, var(--computed-color-hover, inherit));\n  --computed-color-disabled: var(--color-disabled, var(--color-white, inherit));\n  --computed-border-color: var(--border-color, var(--computed-background-color));\n  --computed-border-color-focus: var(--border-color-focus, var(--computed-border-color, transparent));\n  --computed-border-color-hover: var(--border-color-hover, var(--computed-border-color-focus, transparent));\n  --computed-border-color-active: var(--border-color-active, var(--computed-border-color-hover, transparent));\n  --computed-border-color-disabled: var(--border-color-disabled, var(--computed-background-color-disabled, transparent));\n  --computed-outline-color-focus: var(--outline-color-focus, transparent);\n  --computed-icon-size: var(--icon-size, var(--spacing-m));\n\n  align-items: center;\n  background-color: var(--computed-background-color);\n  border: var(--border-width) solid var(--computed-border-color);\n  border-radius: 0;\n  -moz-box-sizing: border-box;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  color: var(--computed-color, inherit);\n  column-gap: var(--spacing-2-xs);\n  cursor: var(--cursor, pointer);\n  display: inline-flex;\n  font-family: inherit;\n  font-size: 100%;\n  font-weight: 500;\n  hyphens: auto;\n  place-content: flex-start center;\n  line-height: var(--lineheight-l);\n  margin: 0;\n  min-height: var(--min-size);\n  min-width: var(--min-size);\n  outline: none;\n  outline-offset: 2px;\n  overflow: hidden;\n  overflow-wrap: anywhere;\n  padding: var(--padding);\n  position: relative;\n  text-align: center;\n  text-decoration: none;\n  text-transform: none;\n  vertical-align: top;\n\n  /* repositioning the icons, after & before usage */\n  &:after {\n    margin-right: var(--icon-reposition);\n  }\n\n  &:before {\n    margin-left: var(--icon-reposition);\n  }\n\n  &,\n  &[type=\"button\"],\n  &[type=\"reset\"],\n  &[type=\"submit\"]\n  {\n    -webkit-appearance: button;\n  }\n\n  &:focus-visible { /* focus */\n    background-color: var(--computed-background-color-focus);\n    border-color: var(--computed-border-color-focus);\n    color: var(--computed-color-focus);\n    outline: var(--outline-width-focus) solid var(--computed-outline-color-focus);\n  }\n\n  &:hover { /* hover */\n    background-color: var(--computed-background-color-hover);\n    border-color: var(--computed-border-color-hover);\n    color: var(--computed-color-hover);\n  }\n\n  &:active { /* active */\n    background-color: var(--computed-background-color-active);\n    border-color: var(--computed-border-color-active);\n    color: var(--computed-color-active);\n    outline: var(--outline-width-focus) solid var(--computed-outline-color-focus);\n  }\n\n  &:disabled { /* disabled */\n    --cursor: not-allowed;\n\n    background-color: var(--computed-background-color-disabled);\n    border-color: var(--computed-border-color-disabled);\n    color: var(--computed-color-disabled);\n    outline: none;\n  }\n}\n\n@mixin icon {\n  flex-shrink: 0;\n  height: var(--computed-icon-size);\n  width: var(--computed-icon-size);\n\n  /* start-side icon */\n  &:first-child:not(:last-child) {\n    margin-left: var(--icon-reposition);\n  }\n\n  &:last-child:not(:first-child) { /* end-side icon */\n    margin-right: var(--icon-reposition);\n  }\n}\n\n@mixin small {\n  --min-size: 44px;\n  --padding-horizontal: var(--spacing-m);\n  --padding-vertical: var(--spacing-2-xs);\n}\n\n@mixin fullwidth {\n  width: 100%;\n}\n\n/* PRIMARY */\n\n/* default (bus) */\n\n@mixin primary {\n  --background-color: var(--color-bus);\n  --background-color-hover: var(--color-bus-dark);\n  --background-color-focus: var(--color-bus);\n  --background-color-disabled: var(--color-black-20);\n  --border-color: transparent;\n  --color: var(--color-white);\n  --color-disabled: var(--color-white);\n  --outline-color-focus: var(--color-coat-of-arms);\n}\n\n/* SECONDARY */\n\n/* default (bus) */\n\n@mixin secondary {\n  --background-color: transparent;\n  --background-color-hover: var(--color-bus-light);\n  --background-color-focus: transparent;\n  --background-color-disabled: transparent;\n  --border-color: var(--color-bus);\n  --border-color-disabled: var(--color-disabled);\n  --color: var(--color-bus);\n  --color-disabled: var(--color-black-40);\n  --outline-color-focus: var(--color-coat-of-arms);\n}\n\n/* SUPPLEMENTARY */\n\n@mixin supplementary {\n  --background-color: transparent;\n  --background-color-hover: var(--color-bus-light);\n  --background-color-focus: transparent;\n  --background-color-disabled: transparent;\n  --border-color: transparent;\n  --border-color-disabled: transparent;\n  --color: var(--color-bus);\n  --color-disabled: var(--color-black-40);\n  --outline-color-focus: var(--color-coat-of-arms);\n}\n\n/* CLEAR */\n\n@mixin clear {\n  --background-color: transparent;\n  --background-color-disabled: transparent;\n  --border-color: transparent;\n  --border-color-disabled: transparent;\n  --color: var(--color-black-90);\n  --color-disabled: var(--color-black-90);\n}\n\n/* UTILITY */\n\n/* success */\n\n@mixin success {\n  --background-color: var(--color-success);\n  --background-color-hover: var(--color-success-dark);\n  --background-color-focus: var(--color-success);\n  --border-color: var(--color-success);\n  --border-color-hover: var(--color-success-dark);\n  --border-color-focus: var(--color-success);\n  --color: var(--color-white);\n  --outline-color-focus: var(--color-coat-of-arms);\n}\n\n/* danger */\n\n@mixin danger {\n  --background-color: var(--color-error);\n  --background-color-hover: var(--color-error-dark);\n  --background-color-focus: var(--color-error);\n  --border-color: var(--color-error);\n  --border-color-hover: var(--color-error-dark);\n  --border-color-focus: var(--color-error);\n  --color: var(--color-white);\n  --outline-color-focus: var(--color-coat-of-arms);\n}\n\n/* THEMES */\n\n/* coat */\n\n@mixin primaryThemeCoat {\n  --background-color: var(--color-coat-of-arms);\n  --background-color-hover: var(--color-coat-of-arms-dark);\n  --background-color-focus: var(--color-coat-of-arms);\n  --border-color: var(--color-coat-of-arms);\n  --border-color-hover: var(--color-coat-of-arms-dark);\n  --border-color-focus: var(--color-coat-of-arms);\n  --color: var(--color-white);\n}\n\n@mixin secondaryThemeCoat {\n  --background-color: transparent;\n  --background-color-hover: var(--color-coat-of-arms-light);\n  --background-color-focus: transparent;\n  --border-color: var(--color-coat-of-arms);\n  --color: var(--color-coat-of-arms);\n}\n\n@mixin supplementaryThemeCoat {\n  --background-color: transparent;\n  --background-color-hover: var(--color-coat-of-arms-light);\n  --background-color-focus: transparent;\n  --border-color: transparent;\n  --color: var(--color-coat-of-arms);\n}\n\n/* black */\n\n@mixin primaryThemeBlack {\n  --background-color: var(--color-black);\n  --background-color-hover: var(--color-black);\n  --background-color-focus: var(--color-black);\n  --border-color: var(--color-black);\n  --border-color-hover: var(--color-black);\n  --border-color-focus: var(--color-black);\n  --color: var(--color-white);\n  --color-hover: var(--color-white);\n  --color-focus: var(--color-white);\n}\n\n@mixin secondaryThemeBlack {\n  --background-color: transparent;\n  --background-color-hover: var(--color-black-5);\n  --background-color-focus: transparent;\n  --border-color: var(--color-black);\n  --border-color-hover: var(--color-black);\n  --border-color-focus: var(--color-black);\n  --color: var(--color-black);\n  --color-hover: var(--color-black);\n  --color-focus: var(--color-black);\n}\n\n@mixin supplementaryThemeBlack {\n  --background-color: transparent;\n  --background-color-hover: var(--color-black-5);\n  --background-color-focus: transparent;\n  --border-color: transparent;\n  --border-color-hover: transparent;\n  --color: var(--color-black);\n  --color-hover: var(--color-black);\n  --color-focus: var(--color-black);\n}\n\n@mixin button(\n  $all: true,\n  $base: false,\n  $icon: false,\n  $small: false,\n  $fullwidth: false,\n  $primary: false,\n  $secondary: false,\n  $supplementary: false,\n  $clear: false,\n  $success: false,\n  $danger: false,\n  $themeCoat: false,\n  $themeBlack: false,\n  $override: null,\n  $react: false\n) {\n  $className: 'button';\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    button.#{$className} {\n      -webkit-appearance: button;\n    }\n  }\n\n  @if $all or $icon {\n    @if $react {\n      @include BemUtil.unscopedElement($className, 'icon', true) {\n        @include icon;\n      }\n    } @else {\n      $buttonClass: $className;\n      $iconClass: 'icon';\n\n      @if not($override) {\n        $buttonClass: #{'hds-' + $buttonClass};\n        $iconClass: #{'hds-' + $iconClass};\n      }\n\n      @at-root {\n        .#{$buttonClass} .#{$iconClass} {\n          @include icon;\n        }\n      }\n    }\n  }\n\n  @if $all or $small {\n    @include BemUtil.unscopedModifier($className, 'small', $react) {\n      @include small;\n    }\n  }\n\n  @if $all or $fullwidth {\n    @include BemUtil.unscopedModifier($className, 'fullwidth', $react) {\n      @include fullwidth;\n    }\n  }\n\n  @if $all or $primary {\n    @include BemUtil.unscopedModifier($className, 'primary', $react) {\n      @include primary;\n    }\n  }\n\n  @if $all or $secondary {\n    @include BemUtil.unscopedModifier($className, 'secondary', $react) {\n      @include secondary;\n    }\n  }\n\n  @if $all or $supplementary {\n    @include BemUtil.unscopedModifier($className, 'supplementary', $react) {\n      @include supplementary;\n    }\n  }\n\n  @if $all or $clear {\n    @include BemUtil.unscopedModifier($className, 'clear', $react) {\n      @include clear;\n    }\n  }\n\n  @if $all or $success {\n    @include BemUtil.unscopedModifier($className, 'success', $react) {\n      @include success;\n    }\n  }\n\n  @if $all or $danger {\n    @include BemUtil.unscopedModifier($className, 'danger', $react) {\n      @include danger;\n    }\n  }\n\n  @if $all or ($themeCoat and $primary) {\n    @include BemUtil.unscopedModifierWithTheme($className, 'primary', 'theme-coat', $react) {\n      @include primaryThemeCoat;\n    }\n  }\n\n  @if $all or ($themeCoat and $secondary) {\n    @include BemUtil.unscopedModifierWithTheme($className, 'secondary', 'theme-coat', $react) {\n      @include secondaryThemeCoat;\n    }\n  }\n\n  @if $all or ($themeCoat and $supplementary) {\n    @include BemUtil.unscopedModifierWithTheme($className, 'supplementary', 'theme-coat', $react) {\n      @include supplementaryThemeCoat;\n    }\n  }\n\n  @if $all or ($themeBlack and $primary) {\n    @include BemUtil.unscopedModifierWithTheme($className, 'primary', 'theme-black', $react) {\n      @include primaryThemeBlack;\n    }\n  }\n\n  @if $all or ($themeBlack and $secondary) {\n    @include BemUtil.unscopedModifierWithTheme($className, 'secondary', 'theme-black', $react) {\n      @include secondaryThemeBlack;\n    }\n  }\n\n  @if $all or ($themeBlack and $supplementary) {\n    @include BemUtil.unscopedModifierWithTheme($className, 'supplementary', 'theme-black', $react) {\n      @include supplementaryThemeBlack;\n    }\n  }\n}","@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 './button-mixin' as *;\n@include button;\n"]}

package/lib/components/button/button.min.css

@@ -0,0 +1 @@
+.hds-button{--border-width:2px;--outline-width-focus:3px;--padding-horizontal:var(--spacing-l);--min-size:56px;--padding-vertical:var(--spacing-s);--padding:calc(var(--padding-vertical) - var(--border-width)) calc(var(--padding-horizontal) - var(--border-width));--icon-reposition:calc(-1 * var(--spacing-2-xs));--computed-background-color:var(--background-color,transparent);--computed-background-color-focus:var(--background-color-focus,var(--computed-background-color,transparent));--computed-background-color-hover:var(--background-color-hover,var(--computed-background-color-focus,transparent));--computed-background-color-active:var(--background-color-active,var(--computed-background-color-hover,transparent));--computed-background-color-disabled:var(--background-color-disabled,var(--color-black-20,transparent));--computed-color:var(--color,inherit);--computed-color-focus:var(--color-focus,var(--computed-color,inherit));--computed-color-hover:var(--color-hover,var(--computed-color-focus,inherit));--computed-color-active:var(--color-active,var(--computed-color-hover,inherit));--computed-color-disabled:var(--color-disabled,var(--color-white,inherit));--computed-border-color:var(--border-color,var(--computed-background-color));--computed-border-color-focus:var(--border-color-focus,var(--computed-border-color,transparent));--computed-border-color-hover:var(--border-color-hover,var(--computed-border-color-focus,transparent));--computed-border-color-active:var(--border-color-active,var(--computed-border-color-hover,transparent));--computed-border-color-disabled:var(--border-color-disabled,var(--computed-background-color-disabled,transparent));--computed-outline-color-focus:var(--outline-color-focus,transparent);--computed-icon-size:var(--icon-size,var(--spacing-m));align-items:center;background-color:var(--computed-background-color);border:var(--border-width) solid var(--computed-border-color);border-radius:0;box-sizing:border-box;color:var(--computed-color,inherit);grid-column-gap:var(--spacing-2-xs);-moz-column-gap:var(--spacing-2-xs);column-gap:var(--spacing-2-xs);cursor:var(--cursor,pointer);display:inline-flex;font-family:inherit;font-size:100%;font-weight:500;hyphens:auto;align-content:flex-start;justify-content:center;place-content:flex-start center;line-height:var(--lineheight-l);margin:0;min-height:var(--min-size);min-width:var(--min-size);outline:none;outline-offset:2px;overflow:hidden;overflow-wrap:anywhere;padding:var(--padding);position:relative;text-align:center;text-decoration:none;text-transform:none;vertical-align:top}.hds-button:after{margin-right:var(--icon-reposition)}.hds-button:before{margin-left:var(--icon-reposition)}.hds-button,.hds-button[type=button],.hds-button[type=reset],.hds-button[type=submit]{-webkit-appearance:button}.hds-button:focus-visible{background-color:var(--computed-background-color-focus);border-color:var(--computed-border-color-focus);color:var(--computed-color-focus);outline:var(--outline-width-focus) solid var(--computed-outline-color-focus)}.hds-button:hover{background-color:var(--computed-background-color-hover);border-color:var(--computed-border-color-hover);color:var(--computed-color-hover)}.hds-button:active{background-color:var(--computed-background-color-active);border-color:var(--computed-border-color-active);color:var(--computed-color-active);outline:var(--outline-width-focus) solid var(--computed-outline-color-focus)}.hds-button:disabled{--cursor:not-allowed;background-color:var(--computed-background-color-disabled);border-color:var(--computed-border-color-disabled);color:var(--computed-color-disabled);outline:none}button.button{-webkit-appearance:button}.hds-button .hds-icon{flex-shrink:0;height:var(--computed-icon-size);width:var(--computed-icon-size)}.hds-button .hds-icon:first-child:not(:last-child){margin-left:var(--icon-reposition)}.hds-button .hds-icon:last-child:not(:first-child){margin-right:var(--icon-reposition)}.hds-button--small{--min-size:44px;--padding-horizontal:var(--spacing-m);--padding-vertical:var(--spacing-2-xs)}.hds-button--fullwidth{width:100%}.hds-button--primary{--background-color:var(--color-bus);--background-color-hover:var(--color-bus-dark);--background-color-focus:var(--color-bus);--background-color-disabled:var(--color-black-20);--border-color:transparent;--color:var(--color-white);--color-disabled:var(--color-white);--outline-color-focus:var(--color-coat-of-arms)}.hds-button--secondary{--border-color:var(--color-bus);--border-color-disabled:var(--color-disabled)}.hds-button--secondary,.hds-button--supplementary{--background-color:transparent;--background-color-hover:var(--color-bus-light);--background-color-focus:transparent;--background-color-disabled:transparent;--color:var(--color-bus);--color-disabled:var(--color-black-40);--outline-color-focus:var(--color-coat-of-arms)}.hds-button--clear,.hds-button--supplementary{--border-color:transparent;--border-color-disabled:transparent}.hds-button--clear{--background-color:transparent;--background-color-disabled:transparent;--color:var(--color-black-90);--color-disabled:var(--color-black-90)}.hds-button--success{--background-color:var(--color-success);--background-color-hover:var(--color-success-dark);--background-color-focus:var(--color-success);--border-color:var(--color-success);--border-color-hover:var(--color-success-dark);--border-color-focus:var(--color-success)}.hds-button--danger,.hds-button--success{--color:var(--color-white);--outline-color-focus:var(--color-coat-of-arms)}.hds-button--danger{--background-color:var(--color-error);--background-color-hover:var(--color-error-dark);--background-color-focus:var(--color-error);--border-color:var(--color-error);--border-color-hover:var(--color-error-dark);--border-color-focus:var(--color-error)}.hds-button--primary.hds-button--theme-coat{--background-color:var(--color-coat-of-arms);--background-color-hover:var(--color-coat-of-arms-dark);--background-color-focus:var(--color-coat-of-arms);--border-color:var(--color-coat-of-arms);--border-color-hover:var(--color-coat-of-arms-dark);--border-color-focus:var(--color-coat-of-arms);--color:var(--color-white)}.hds-button--secondary.hds-button--theme-coat{--border-color:var(--color-coat-of-arms)}.hds-button--secondary.hds-button--theme-coat,.hds-button--supplementary.hds-button--theme-coat{--background-color:transparent;--background-color-hover:var(--color-coat-of-arms-light);--background-color-focus:transparent;--color:var(--color-coat-of-arms)}.hds-button--supplementary.hds-button--theme-coat{--border-color:transparent}.hds-button--primary.hds-button--theme-black{--background-color:var(--color-black);--background-color-hover:var(--color-black);--background-color-focus:var(--color-black);--border-color:var(--color-black);--border-color-hover:var(--color-black);--border-color-focus:var(--color-black);--color:var(--color-white);--color-hover:var(--color-white);--color-focus:var(--color-white)}.hds-button--secondary.hds-button--theme-black{--border-color:var(--color-black);--border-color-hover:var(--color-black);--border-color-focus:var(--color-black)}.hds-button--secondary.hds-button--theme-black,.hds-button--supplementary.hds-button--theme-black{--background-color:transparent;--background-color-hover:var(--color-black-5);--background-color-focus:transparent;--color:var(--color-black);--color-hover:var(--color-black);--color-focus:var(--color-black)}.hds-button--supplementary.hds-button--theme-black{--border-color:transparent;--border-color-hover:transparent}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/_bem.scss","../../../src/components/button/_button-mixin.scss","../../../src/components/button/button.scss"],"names":[],"mappings":"AAoFM,YCjFJ,kBAAA,CACA,yBAAA,CACA,qCAAA,CACA,eAAA,CACA,mCAAA,CACA,mHAAA,CACA,gDAAA,CAMA,+DAAA,CACA,4GAAA,CACA,kHAAA,CACA,oHAAA,CACA,uGAAA,CACA,qCAAA,CACA,uEAAA,CACA,6EAAA,CACA,+EAAA,CACA,0EAAA,CACA,4EAAA,CACA,gGAAA,CACA,sGAAA,CACA,wGAAA,CACA,mHAAA,CACA,qEAAA,CACA,sDAAA,CAEA,kBAAA,CACA,iDAAA,CACA,6DAAA,CACA,eAAA,CAGA,qBAAA,CACA,mCAAA,CACA,mCAAA,CAAA,mCAAA,CAAA,8BAAA,CACA,4BAAA,CACA,mBAAA,CACA,mBAAA,CACA,cAAA,CACA,eAAA,CACA,YAAA,CACA,wBAAA,CAAA,sBAAA,CAAA,+BAAA,CACA,+BAAA,CACA,QAAA,CACA,0BAAA,CACA,yBAAA,CACA,YAAA,CACA,kBAAA,CACA,eAAA,CACA,sBAAA,CACA,sBAAA,CACA,iBAAA,CACA,iBAAA,CACA,oBAAA,CACA,mBAAA,CACA,kBCSF,CDNE,kBACE,mCCQJ,CDLE,mBACE,kCCOJ,CDJE,sFAKE,yBCEJ,CDCE,0BACE,uDAAA,CACA,+CAAA,CACA,iCAAA,CACA,4ECCJ,CDEE,kBACE,uDAAA,CACA,+CAAA,CACA,iCCAJ,CDGE,mBACE,wDAAA,CACA,gDAAA,CACA,kCAAA,CACA,4ECDJ,CDIE,qBACE,oBAAA,CAEA,0DAAA,CACA,kDAAA,CACA,oCAAA,CACA,YCHJ,CDmNI,cACE,yBChNN,CDmOQ,sBA/NN,aAAA,CACA,gCAAA,CACA,+BCCF,CDEE,mDACE,kCCAJ,CDGE,mDACE,mCCDJ,CFsCM,mBChCJ,eAAA,CACA,qCAAA,CACA,sCCFF,CFgCM,uBC1BJ,UCFF,CF4BM,qBClBJ,mCAAA,CACA,8CAAA,CACA,yCAAA,CACA,iDAAA,CACA,0BAAA,CACA,0BAAA,CACA,mCAAA,CACA,+CCNF,CFiBM,uBCCJ,+BAAA,CACA,6CCPF,CFKM,kDCHJ,8BAAA,CACA,+CAAA,CACA,oCAAA,CACA,uCAAA,CAGA,wBAAA,CACA,sCAAA,CACA,+CCEF,CFPM,8CCeJ,0BAAA,CACA,mCCAF,CFhBM,mBCyBJ,8BAAA,CACA,uCAAA,CAGA,6BAAA,CACA,sCCdF,CFhBM,qBCsCJ,uCAAA,CACA,kDAAA,CACA,6CAAA,CACA,mCAAA,CACA,8CAAA,CACA,yCChBF,CF3BM,yCC4CJ,0BAAA,CACA,+CCPF,CFtCM,oBCmDJ,qCAAA,CACA,gDAAA,CACA,2CAAA,CACA,iCAAA,CACA,4CAAA,CACA,uCClBF,CFZM,4CCwCJ,4CAAA,CACA,uDAAA,CACA,kDAAA,CACA,wCAAA,CACA,mDAAA,CACA,8CAAA,CACA,0BCxBF,CFtBM,8CCqDJ,wCCvBF,CF9BM,gGCkDJ,8BAAA,CACA,wDAAA,CACA,oCAAA,CAEA,iCChBF,CFtCM,kDC6DJ,0BCvBF,CFtCM,6CCoEJ,qCAAA,CACA,2CAAA,CACA,2CAAA,CACA,iCAAA,CACA,uCAAA,CACA,uCAAA,CACA,0BAAA,CACA,gCAAA,CACA,gCC1BF,CFlDM,+CCmFJ,iCAAA,CACA,uCAAA,CACA,uCCvBF,CF9DM,kGCgFJ,8BAAA,CACA,6CAAA,CACA,oCAAA,CAIA,0BAAA,CACA,gCAAA,CACA,gCCfF,CFzEM,mDC+FJ,0BAAA,CACA,gCCvBF","file":"button.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 '../../utils/bem' as BemUtil;\n\n@mixin base {\n  --border-width: 2px;\n  --outline-width-focus: 3px;\n  --padding-horizontal: var(--spacing-l);\n  --min-size: 56px;\n  --padding-vertical: var(--spacing-s);\n  --padding: calc(var(--padding-vertical) - var(--border-width)) calc(var(--padding-horizontal) - var(--border-width));\n  --icon-reposition: calc(-1 * var(--spacing-2-xs));\n\n\n  /* logics, always falls back to previous (upper) if not given ->\n  (no) active color -> (no) hover color -> (no) focus color -> default color\n  */\n  --computed-background-color: var(--background-color, transparent);\n  --computed-background-color-focus: var(--background-color-focus, var(--computed-background-color, transparent));\n  --computed-background-color-hover: var(--background-color-hover, var(--computed-background-color-focus, transparent));\n  --computed-background-color-active: var(--background-color-active, var(--computed-background-color-hover, transparent));\n  --computed-background-color-disabled: var(--background-color-disabled, var(--color-black-20, transparent));\n  --computed-color: var(--color, inherit);\n  --computed-color-focus: var(--color-focus, var(--computed-color, inherit));\n  --computed-color-hover: var(--color-hover, var(--computed-color-focus, inherit));\n  --computed-color-active: var(--color-active, var(--computed-color-hover, inherit));\n  --computed-color-disabled: var(--color-disabled, var(--color-white, inherit));\n  --computed-border-color: var(--border-color, var(--computed-background-color));\n  --computed-border-color-focus: var(--border-color-focus, var(--computed-border-color, transparent));\n  --computed-border-color-hover: var(--border-color-hover, var(--computed-border-color-focus, transparent));\n  --computed-border-color-active: var(--border-color-active, var(--computed-border-color-hover, transparent));\n  --computed-border-color-disabled: var(--border-color-disabled, var(--computed-background-color-disabled, transparent));\n  --computed-outline-color-focus: var(--outline-color-focus, transparent);\n  --computed-icon-size: var(--icon-size, var(--spacing-m));\n\n  align-items: center;\n  background-color: var(--computed-background-color);\n  border: var(--border-width) solid var(--computed-border-color);\n  border-radius: 0;\n  -moz-box-sizing: border-box;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  color: var(--computed-color, inherit);\n  column-gap: var(--spacing-2-xs);\n  cursor: var(--cursor, pointer);\n  display: inline-flex;\n  font-family: inherit;\n  font-size: 100%;\n  font-weight: 500;\n  hyphens: auto;\n  place-content: flex-start center;\n  line-height: var(--lineheight-l);\n  margin: 0;\n  min-height: var(--min-size);\n  min-width: var(--min-size);\n  outline: none;\n  outline-offset: 2px;\n  overflow: hidden;\n  overflow-wrap: anywhere;\n  padding: var(--padding);\n  position: relative;\n  text-align: center;\n  text-decoration: none;\n  text-transform: none;\n  vertical-align: top;\n\n  /* repositioning the icons, after & before usage */\n  &:after {\n    margin-right: var(--icon-reposition);\n  }\n\n  &:before {\n    margin-left: var(--icon-reposition);\n  }\n\n  &,\n  &[type=\"button\"],\n  &[type=\"reset\"],\n  &[type=\"submit\"]\n  {\n    -webkit-appearance: button;\n  }\n\n  &:focus-visible { /* focus */\n    background-color: var(--computed-background-color-focus);\n    border-color: var(--computed-border-color-focus);\n    color: var(--computed-color-focus);\n    outline: var(--outline-width-focus) solid var(--computed-outline-color-focus);\n  }\n\n  &:hover { /* hover */\n    background-color: var(--computed-background-color-hover);\n    border-color: var(--computed-border-color-hover);\n    color: var(--computed-color-hover);\n  }\n\n  &:active { /* active */\n    background-color: var(--computed-background-color-active);\n    border-color: var(--computed-border-color-active);\n    color: var(--computed-color-active);\n    outline: var(--outline-width-focus) solid var(--computed-outline-color-focus);\n  }\n\n  &:disabled { /* disabled */\n    --cursor: not-allowed;\n\n    background-color: var(--computed-background-color-disabled);\n    border-color: var(--computed-border-color-disabled);\n    color: var(--computed-color-disabled);\n    outline: none;\n  }\n}\n\n@mixin icon {\n  flex-shrink: 0;\n  height: var(--computed-icon-size);\n  width: var(--computed-icon-size);\n\n  /* start-side icon */\n  &:first-child:not(:last-child) {\n    margin-left: var(--icon-reposition);\n  }\n\n  &:last-child:not(:first-child) { /* end-side icon */\n    margin-right: var(--icon-reposition);\n  }\n}\n\n@mixin small {\n  --min-size: 44px;\n  --padding-horizontal: var(--spacing-m);\n  --padding-vertical: var(--spacing-2-xs);\n}\n\n@mixin fullwidth {\n  width: 100%;\n}\n\n/* PRIMARY */\n\n/* default (bus) */\n\n@mixin primary {\n  --background-color: var(--color-bus);\n  --background-color-hover: var(--color-bus-dark);\n  --background-color-focus: var(--color-bus);\n  --background-color-disabled: var(--color-black-20);\n  --border-color: transparent;\n  --color: var(--color-white);\n  --color-disabled: var(--color-white);\n  --outline-color-focus: var(--color-coat-of-arms);\n}\n\n/* SECONDARY */\n\n/* default (bus) */\n\n@mixin secondary {\n  --background-color: transparent;\n  --background-color-hover: var(--color-bus-light);\n  --background-color-focus: transparent;\n  --background-color-disabled: transparent;\n  --border-color: var(--color-bus);\n  --border-color-disabled: var(--color-disabled);\n  --color: var(--color-bus);\n  --color-disabled: var(--color-black-40);\n  --outline-color-focus: var(--color-coat-of-arms);\n}\n\n/* SUPPLEMENTARY */\n\n@mixin supplementary {\n  --background-color: transparent;\n  --background-color-hover: var(--color-bus-light);\n  --background-color-focus: transparent;\n  --background-color-disabled: transparent;\n  --border-color: transparent;\n  --border-color-disabled: transparent;\n  --color: var(--color-bus);\n  --color-disabled: var(--color-black-40);\n  --outline-color-focus: var(--color-coat-of-arms);\n}\n\n/* CLEAR */\n\n@mixin clear {\n  --background-color: transparent;\n  --background-color-disabled: transparent;\n  --border-color: transparent;\n  --border-color-disabled: transparent;\n  --color: var(--color-black-90);\n  --color-disabled: var(--color-black-90);\n}\n\n/* UTILITY */\n\n/* success */\n\n@mixin success {\n  --background-color: var(--color-success);\n  --background-color-hover: var(--color-success-dark);\n  --background-color-focus: var(--color-success);\n  --border-color: var(--color-success);\n  --border-color-hover: var(--color-success-dark);\n  --border-color-focus: var(--color-success);\n  --color: var(--color-white);\n  --outline-color-focus: var(--color-coat-of-arms);\n}\n\n/* danger */\n\n@mixin danger {\n  --background-color: var(--color-error);\n  --background-color-hover: var(--color-error-dark);\n  --background-color-focus: var(--color-error);\n  --border-color: var(--color-error);\n  --border-color-hover: var(--color-error-dark);\n  --border-color-focus: var(--color-error);\n  --color: var(--color-white);\n  --outline-color-focus: var(--color-coat-of-arms);\n}\n\n/* THEMES */\n\n/* coat */\n\n@mixin primaryThemeCoat {\n  --background-color: var(--color-coat-of-arms);\n  --background-color-hover: var(--color-coat-of-arms-dark);\n  --background-color-focus: var(--color-coat-of-arms);\n  --border-color: var(--color-coat-of-arms);\n  --border-color-hover: var(--color-coat-of-arms-dark);\n  --border-color-focus: var(--color-coat-of-arms);\n  --color: var(--color-white);\n}\n\n@mixin secondaryThemeCoat {\n  --background-color: transparent;\n  --background-color-hover: var(--color-coat-of-arms-light);\n  --background-color-focus: transparent;\n  --border-color: var(--color-coat-of-arms);\n  --color: var(--color-coat-of-arms);\n}\n\n@mixin supplementaryThemeCoat {\n  --background-color: transparent;\n  --background-color-hover: var(--color-coat-of-arms-light);\n  --background-color-focus: transparent;\n  --border-color: transparent;\n  --color: var(--color-coat-of-arms);\n}\n\n/* black */\n\n@mixin primaryThemeBlack {\n  --background-color: var(--color-black);\n  --background-color-hover: var(--color-black);\n  --background-color-focus: var(--color-black);\n  --border-color: var(--color-black);\n  --border-color-hover: var(--color-black);\n  --border-color-focus: var(--color-black);\n  --color: var(--color-white);\n  --color-hover: var(--color-white);\n  --color-focus: var(--color-white);\n}\n\n@mixin secondaryThemeBlack {\n  --background-color: transparent;\n  --background-color-hover: var(--color-black-5);\n  --background-color-focus: transparent;\n  --border-color: var(--color-black);\n  --border-color-hover: var(--color-black);\n  --border-color-focus: var(--color-black);\n  --color: var(--color-black);\n  --color-hover: var(--color-black);\n  --color-focus: var(--color-black);\n}\n\n@mixin supplementaryThemeBlack {\n  --background-color: transparent;\n  --background-color-hover: var(--color-black-5);\n  --background-color-focus: transparent;\n  --border-color: transparent;\n  --border-color-hover: transparent;\n  --color: var(--color-black);\n  --color-hover: var(--color-black);\n  --color-focus: var(--color-black);\n}\n\n@mixin button(\n  $all: true,\n  $base: false,\n  $icon: false,\n  $small: false,\n  $fullwidth: false,\n  $primary: false,\n  $secondary: false,\n  $supplementary: false,\n  $clear: false,\n  $success: false,\n  $danger: false,\n  $themeCoat: false,\n  $themeBlack: false,\n  $override: null,\n  $react: false\n) {\n  $className: 'button';\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    button.#{$className} {\n      -webkit-appearance: button;\n    }\n  }\n\n  @if $all or $icon {\n    @if $react {\n      @include BemUtil.unscopedElement($className, 'icon', true) {\n        @include icon;\n      }\n    } @else {\n      $buttonClass: $className;\n      $iconClass: 'icon';\n\n      @if not($override) {\n        $buttonClass: #{'hds-' + $buttonClass};\n        $iconClass: #{'hds-' + $iconClass};\n      }\n\n      @at-root {\n        .#{$buttonClass} .#{$iconClass} {\n          @include icon;\n        }\n      }\n    }\n  }\n\n  @if $all or $small {\n    @include BemUtil.unscopedModifier($className, 'small', $react) {\n      @include small;\n    }\n  }\n\n  @if $all or $fullwidth {\n    @include BemUtil.unscopedModifier($className, 'fullwidth', $react) {\n      @include fullwidth;\n    }\n  }\n\n  @if $all or $primary {\n    @include BemUtil.unscopedModifier($className, 'primary', $react) {\n      @include primary;\n    }\n  }\n\n  @if $all or $secondary {\n    @include BemUtil.unscopedModifier($className, 'secondary', $react) {\n      @include secondary;\n    }\n  }\n\n  @if $all or $supplementary {\n    @include BemUtil.unscopedModifier($className, 'supplementary', $react) {\n      @include supplementary;\n    }\n  }\n\n  @if $all or $clear {\n    @include BemUtil.unscopedModifier($className, 'clear', $react) {\n      @include clear;\n    }\n  }\n\n  @if $all or $success {\n    @include BemUtil.unscopedModifier($className, 'success', $react) {\n      @include success;\n    }\n  }\n\n  @if $all or $danger {\n    @include BemUtil.unscopedModifier($className, 'danger', $react) {\n      @include danger;\n    }\n  }\n\n  @if $all or ($themeCoat and $primary) {\n    @include BemUtil.unscopedModifierWithTheme($className, 'primary', 'theme-coat', $react) {\n      @include primaryThemeCoat;\n    }\n  }\n\n  @if $all or ($themeCoat and $secondary) {\n    @include BemUtil.unscopedModifierWithTheme($className, 'secondary', 'theme-coat', $react) {\n      @include secondaryThemeCoat;\n    }\n  }\n\n  @if $all or ($themeCoat and $supplementary) {\n    @include BemUtil.unscopedModifierWithTheme($className, 'supplementary', 'theme-coat', $react) {\n      @include supplementaryThemeCoat;\n    }\n  }\n\n  @if $all or ($themeBlack and $primary) {\n    @include BemUtil.unscopedModifierWithTheme($className, 'primary', 'theme-black', $react) {\n      @include primaryThemeBlack;\n    }\n  }\n\n  @if $all or ($themeBlack and $secondary) {\n    @include BemUtil.unscopedModifierWithTheme($className, 'secondary', 'theme-black', $react) {\n      @include secondaryThemeBlack;\n    }\n  }\n\n  @if $all or ($themeBlack and $supplementary) {\n    @include BemUtil.unscopedModifierWithTheme($className, 'supplementary', 'theme-black', $react) {\n      @include supplementaryThemeBlack;\n    }\n  }\n}","@use './button-mixin' as *;\n@include button;\n"]}

package/lib/components/card/card.css

@@ -0,0 +1,43 @@
+.hds-card {
+  --background-color: var(--color-white);
+  --border-color: var(--color-black-90);
+  --color: var(--color-black-90);
+  --border-width: 2px;
+  --padding-horizontal: var(--spacing-l);
+  --padding-vertical: var(--spacing-m);
+  background-color: var(--background-color);
+  color: var(--color);
+  padding: var(--padding-vertical) var(--padding-horizontal);
+}
+
+/* WITH BORDER */
+
+.hds-card--border {
+  border: var(--border-width) solid var(--border-color);
+}
+
+/* WITH BOX-SHADOW */
+
+.hds-card--box-shadow {
+  box-shadow: var(--box-shadow-m);
+}
+
+/* BODY */
+
+.hds-card__body {
+  display: grid;
+  grid-gap: var(--spacing-s);
+  gap: var(--spacing-s);
+  margin-bottom: var(--spacing-l);
+}
+
+.hds-card__body:last-child {
+  margin-bottom: 0;
+}
+
+/* BODY TEXT */
+
+.hds-card__text {
+  font-size: var(--fontsize-body-m);
+  line-height: var(--lineheight-l);
+}

package/lib/components/card/card.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/card/card.css%23sass","../../../src/components/card/card.css"],"names":[],"mappings":"AAAA;EACE,sCAAA;EACA,qCAAA;EACA,8BAAA;EACA,mBAAA;EACA,sCAAA;EACA,oCAAA;EAEA,yCAAA;EACA,mBAAA;EACA,0DAAA;ACAF;;ADGA,gBAAA;;AACA;ECAA,qDAAA;AACA;;ADGA,oBAAA;;AACA;ECAA,+BAAA;AACA;;ADGA,SAAA;;AACA;ECAA,aAAA;EDEE,0BAAA;EAAA,qBAAA;EACA,+BAAA;ACAF;;ADGA;ECAA,gBAAA;AACA;;ADGA,cAAA;;AACA;ECAA,iCAAA;EDEE,gCAAA;ACAF","file":"card.css","sourcesContent":[".hds-card {\n  --background-color: var(--color-white);\n  --border-color: var(--color-black-90);\n  --color: var(--color-black-90);\n  --border-width: 2px;\n  --padding-horizontal: var(--spacing-l);\n  --padding-vertical: var(--spacing-m);\n\n  background-color: var(--background-color);\n  color: var(--color);\n  padding: var(--padding-vertical) var(--padding-horizontal);\n}\n\n/* WITH BORDER */\n.hds-card--border {\n  border: var(--border-width) solid var(--border-color);\n}\n\n/* WITH BOX-SHADOW */\n.hds-card--box-shadow {\n  box-shadow: var(--box-shadow-m);\n}\n\n/* BODY */\n.hds-card__body {\n  display: grid;\n  gap: var(--spacing-s);\n  margin-bottom: var(--spacing-l);\n}\n\n.hds-card__body:last-child {\n  margin-bottom: 0;\n}\n\n/* BODY TEXT */\n.hds-card__text {\n  font-size: var(--fontsize-body-m);\n  line-height: var(--lineheight-l);\n}\n",".hds-card {\n  --background-color: var(--color-white);\n  --border-color: var(--color-black-90);\n  --color: var(--color-black-90);\n  --border-width: 2px;\n  --padding-horizontal: var(--spacing-l);\n  --padding-vertical: var(--spacing-m);\n\n  background-color: var(--background-color);\n  color: var(--color);\n  padding: var(--padding-vertical) var(--padding-horizontal);\n}\n\n/* WITH BORDER */\n.hds-card--border {\n  border: var(--border-width) solid var(--border-color);\n}\n\n/* WITH BOX-SHADOW */\n.hds-card--box-shadow {\n  box-shadow: var(--box-shadow-m);\n}\n\n/* BODY */\n.hds-card__body {\n  display: grid;\n  gap: var(--spacing-s);\n  margin-bottom: var(--spacing-l);\n}\n\n.hds-card__body:last-child {\n  margin-bottom: 0;\n}\n\n/* BODY TEXT */\n.hds-card__text {\n  font-size: var(--fontsize-body-m);\n  line-height: var(--lineheight-l);\n}\n"]}

package/lib/components/card/card.min.css

@@ -0,0 +1 @@
+.hds-card{--background-color:var(--color-white);--border-color:var(--color-black-90);--color:var(--color-black-90);--border-width:2px;--padding-horizontal:var(--spacing-l);--padding-vertical:var(--spacing-m);background-color:var(--background-color);color:var(--color);padding:var(--padding-vertical) var(--padding-horizontal)}.hds-card--border{border:var(--border-width) solid var(--border-color)}.hds-card--box-shadow{box-shadow:var(--box-shadow-m)}.hds-card__body{display:grid;grid-gap:var(--spacing-s);gap:var(--spacing-s);margin-bottom:var(--spacing-l)}.hds-card__body:last-child{margin-bottom:0}.hds-card__text{font-size:var(--fontsize-body-m);line-height:var(--lineheight-l)}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/card/card.css%23sass","../../../src/components/card/card.css"],"names":[],"mappings":"AAAA,UACE,qCAAA,CACA,oCAAA,CACA,6BAAA,CACA,kBAAA,CACA,qCAAA,CACA,mCAAA,CAEA,wCAAA,CACA,kBAAA,CACA,yDCAF,CDIA,kBCAA,oDACA,CDIA,sBCAA,8BACA,CDIA,gBCAA,YAAA,CDEE,yBAAA,CAAA,oBAAA,CACA,8BCAF,CDGA,2BCAA,eACA,CDIA,gBCAA,gCAAA,CDEE,+BCAF","file":"card.min.css","sourcesContent":[".hds-card {\n  --background-color: var(--color-white);\n  --border-color: var(--color-black-90);\n  --color: var(--color-black-90);\n  --border-width: 2px;\n  --padding-horizontal: var(--spacing-l);\n  --padding-vertical: var(--spacing-m);\n\n  background-color: var(--background-color);\n  color: var(--color);\n  padding: var(--padding-vertical) var(--padding-horizontal);\n}\n\n/* WITH BORDER */\n.hds-card--border {\n  border: var(--border-width) solid var(--border-color);\n}\n\n/* WITH BOX-SHADOW */\n.hds-card--box-shadow {\n  box-shadow: var(--box-shadow-m);\n}\n\n/* BODY */\n.hds-card__body {\n  display: grid;\n  gap: var(--spacing-s);\n  margin-bottom: var(--spacing-l);\n}\n\n.hds-card__body:last-child {\n  margin-bottom: 0;\n}\n\n/* BODY TEXT */\n.hds-card__text {\n  font-size: var(--fontsize-body-m);\n  line-height: var(--lineheight-l);\n}\n",".hds-card {\n  --background-color: var(--color-white);\n  --border-color: var(--color-black-90);\n  --color: var(--color-black-90);\n  --border-width: 2px;\n  --padding-horizontal: var(--spacing-l);\n  --padding-vertical: var(--spacing-m);\n\n  background-color: var(--background-color);\n  color: var(--color);\n  padding: var(--padding-vertical) var(--padding-horizontal);\n}\n\n/* WITH BORDER */\n.hds-card--border {\n  border: var(--border-width) solid var(--border-color);\n}\n\n/* WITH BOX-SHADOW */\n.hds-card--box-shadow {\n  box-shadow: var(--box-shadow-m);\n}\n\n/* BODY */\n.hds-card__body {\n  display: grid;\n  gap: var(--spacing-s);\n  margin-bottom: var(--spacing-l);\n}\n\n.hds-card__body:last-child {\n  margin-bottom: 0;\n}\n\n/* BODY TEXT */\n.hds-card__text {\n  font-size: var(--fontsize-body-m);\n  line-height: var(--lineheight-l);\n}\n"]}

package/lib/components/checkbox/_checkbox-mixin.scss

@@ -0,0 +1,331 @@
+@use '../../utils/bem' as BemUtil;
+
+@mixin base {
+  --size: 24px;
+
+  // icon size relative to the checkbox size (--size)
+  --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;
+
+  &,
+  & *,
+  & *:before,
+  & *:after {
+    box-sizing: border-box;
+  }
+
+  /* stylelint-disable no-descending-specificity */
+  &:not(:first-of-type) {
+    margin-top: var(--spacing-2-xs);
+  }
+}
+
+@mixin input {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  cursor: pointer;
+
+  // Normalize.css rules
+  // Change the font styles in all browsers.
+  font-family: inherit; // 1
+  font-size: 100%; // 1
+  height: var(--size);
+  left: 0;
+
+  // Normalize.css rules
+  // 1. Change the font styles in all browsers.
+  // 2. Remove the margin in Firefox and Safari.
+  line-height: 1.15; // 1
+  margin: 0; // 2
+  outline: none;
+  position: absolute;
+  top: 0;
+  width: var(--size);
+
+  &:before {
+    // checkbox icon
+    background-color: var(--icon-color-unselected);
+    content: '';
+    height: var(--size);
+    left: 0;
+    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-position: center;
+    mask-repeat: no-repeat;
+    mask-size: calc(var(--size) * var(--icon-scale));
+    position: absolute;
+    top: 0;
+    transform: scale(0.6);
+    width: var(--size);
+    z-index: 1;
+  }
+}
+
+@mixin inputCustom {
+  // CUSTOM CHECKBOX
+
+  // checkbox icon - selected
+  &:checked:before {
+    background-color: var(--icon-color-selected);
+    transform: scale(1);
+  }
+
+  // checkbox icon - indeterminated
+  &:not(:checked):indeterminate:before {
+    background-color: var(--icon-color-selected);
+    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);
+  }
+
+  // background - selected or indeterminated
+  &:checked + label:after,
+  &:indeterminate + label:after {
+    background-color: var(--background-selected);
+    border-color: var(--border-color-selected);
+  }
+
+  // background
+  &:disabled + label:after {
+    background-color: var(--background-disabled);
+    border-color: var(--border-color-disabled);
+  }
+
+  // background - unselected - focus
+  &:not(:disabled):focus + label:after {
+    border-color: var(--border-color-unselected-focus);
+  }
+
+  // background - unselected - hover
+  &:not(:disabled):hover + label:after,
+  &:not(:disabled):hover:focus + label:after {
+    border-color: var(--border-color-unselected-hover);
+  }
+
+  // background - selected - focus
+  &:not(:disabled):checked:focus + label:after,
+  &:not(:disabled):indeterminate:focus + label:after {
+    border-color: var(--border-color-selected-focus);
+  }
+
+  // background - selected - hover
+  &:not(:disabled):checked:hover + label:after,
+  &:not(:disabled):indeterminate:hover + label:after,
+  &:not(:disabled):checked:hover:focus + label:after,
+  &:not(:disabled):indeterminate:hover:focus + label:after {
+    background-color: var(--background-hover);
+    border-color: var(--border-color-selected-hover);
+  }
+}
+
+@mixin inputDisabled {
+  &:disabled + label {
+    color: var(--label-color-disabled);
+  }
+
+  &:checked:disabled:before {
+    background-color: var(--icon-color-disabled);
+  }
+
+  &:disabled,
+  &:disabled + label {
+    cursor: not-allowed;
+  }
+}
+
+@mixin inputTransitions {
+  // checkbox transitions
+  &:hover:before,
+  &:focus:before,
+  &:hover + label:after,
+  &:focus + label:after {
+    transition: 85ms ease-out;
+    transition-property: background-color, border-color, transform;
+  }
+
+  &: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;
+  }
+}
+
+
+@mixin 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;
+
+  &:before,
+  &:after {
+    content: "";
+    left: 0;
+    position: absolute;
+    top: 0;
+  }
+
+  // focus outline
+  &:before {
+    height: var(--size);
+    width: var(--size);
+  }
+
+  // background
+  &:after {
+    background-color: var(--background-unselected);
+    border: var(--border-width) solid var(--border-color-unselected);
+    height: var(--size);
+    width: var(--size);
+  }
+}
+
+@mixin noLabel {
+  & {
+    padding-left: var(--size);
+  }
+}
+
+@mixin 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;
+
+  &: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);
+  }
+}
+
+@mixin checkbox(
+  $all: true,
+  $base: false,
+  $input: false,
+  $label: false,
+  $noLabel: false,
+  $error-text: false,
+  $override: null,
+  $react: false
+) {
+  $className: 'checkbox';
+
+  @if $override {
+    $className: $override;
+  }
+
+  @if $all or $base {
+    @include BemUtil.block($className, if($override, true, false), $react) {
+      @include base;
+    }
+  }
+
+  @if $all or $input {
+    @if $react {
+      @include BemUtil.unscopedElement($className, 'input', true) {
+        @include input;
+        @include inputDisabled;
+        @include inputTransitions;
+        @include inputCustom;
+      }
+    } @else {
+      @include BemUtil.block($className, if($override, true, false), false) {
+        & #{&} {
+          @include BemUtil.element('input') {
+            @include input;
+            @include inputDisabled;
+            @include inputTransitions;
+            @include inputCustom;
+          }
+        }
+      }
+    }
+  }
+
+  @if $all or $label {
+    @if $react {
+      @include BemUtil.unscopedElement($className, 'label', true) {
+        @include label;
+      }
+    } @else {
+      @include BemUtil.block($className, if($override, true, false), false) {
+        & #{&} {
+          @include BemUtil.element('label') {
+            @include label;
+          }
+        }
+      }
+    }
+  }
+
+  @if $all or $noLabel {
+    @if $react {
+      @include BemUtil.unscopedElement($className, 'label', true) {
+        @include noLabel;
+      }
+    } @else {
+      @include BemUtil.unscopedElement($className, 'label') {
+        & #{&}--hidden {
+          @include noLabel;
+        }
+      }
+    }
+  }
+
+  @if $all or $error-text {
+    @if $react {
+      @include BemUtil.unscopedElement($className, 'error-text', true) {
+        @include error-text;
+      }
+    } @else {
+      @include BemUtil.block($className, if($override, true, false), false) {
+        & #{&} {
+          @include BemUtil.element('error-text') {
+            @include error-text;
+          }
+        }
+      }
+    }
+  }
+
+}