@orangesk/orange-design-system 1.11.4 → 1.11.5

package/build/asset-manifest.json

@@ -355,7 +355,7 @@
     "components/static.css.map": "/components/static.css.map",
     "components/static.js.LICENSE.txt": "/components/static.js.LICENSE.txt",
     "components/style.css.map": "/components/style.css.map",
-    "precache-manifest.913f81ea7884d525a4a9f33c70fa85c8.js": "/precache-manifest.913f81ea7884d525a4a9f33c70fa85c8.js",
+    "precache-manifest.eed5109af7551f3d76f53312353d8413.js": "/precache-manifest.eed5109af7551f3d76f53312353d8413.js",
     "service-worker.js": "/service-worker.js"
   },
   "entrypoints": [

package/build/components/Alert/style.css

@@ -1,2 +1,2 @@
-.icon{fill:currentColor;width:1em;height:1em;vertical-align:text-bottom}.icon--small{width:1rem;height:1rem}.icon--medium{width:1.5rem;height:1.5rem}.icon--large{width:2rem;height:2rem}.icon--xlarge{width:2.5rem;height:2.5rem}.icon--xxlarge{width:3rem;height:3rem}.icon--huge{width:3.5rem;height:3.5rem}@media screen and (min-width:768px){.icon--xlarge{width:3rem;height:3rem}.icon--xxlarge{width:4rem;height:4rem}.icon--huge{width:5rem;height:5rem}}.icon--info{color:#527edb}.icon--success{color:#32c832}.icon--warning{color:#fc0}.icon--danger{color:#cd3c14}.icon--orange{color:#ff7900}use{pointer-events:none}.buttons{display:flex;flex-flow:row wrap;max-width:calc(100% - .625rem);margin:-.625rem -.625rem 1.25rem 0}.buttons .btn,.buttons .btn:last-child,.buttons button.link,.buttons button.link:last-child{margin:.625rem .625rem 0 0}@media screen and (max-width:479.98px){.buttons--stack-on-xs{flex-flow:column;max-width:100%;margin:0 0 .625rem}.buttons--stack-on-xs .btn:last-child,.buttons--stack-on-xs .btn:not(:last-child),.buttons--stack-on-xs button.link:last-child,.buttons--stack-on-xs button.link:not(:last-child){margin-right:0;margin-bottom:0}}.alert{display:flex;max-width:36.875rem;margin-bottom:1.25rem;padding:1.125rem;background:#fff;border:2px solid #000}.alert--success{border-color:#32c832}.alert--danger{border-color:#cd3c14}.alert--warning{border-color:#fc0}.alert--info{border-color:#527edb}.alert__icon{margin-right:1.25rem;line-height:1}.alert__content{flex-shrink:1;flex-grow:1;margin-top:.375rem}.alert__content>:last-child{margin-bottom:.3125rem}.alert__title{font-size:1.125rem;line-height:1.1111111111;margin-bottom:.625rem}.alert__title+.btn,.alert__title+.buttons{margin-top:.625rem}.alert--full-width{max-width:100%}
+.icon{fill:currentColor;width:1em;height:1em;vertical-align:text-bottom}.icon--small{width:1rem;height:1rem}.icon--medium{width:1.5rem;height:1.5rem}.icon--large{width:2rem;height:2rem}.icon--xlarge{width:2.5rem;height:2.5rem}.icon--xxlarge{width:3rem;height:3rem}.icon--huge{width:3.5rem;height:3.5rem}@media screen and (min-width:768px){.icon--xlarge{width:3rem;height:3rem}.icon--xxlarge{width:4rem;height:4rem}.icon--huge{width:5rem;height:5rem}}.icon--info{color:#527edb}.icon--success{color:#32c832}.icon--warning{color:#fc0}.icon--danger{color:#cd3c14}.icon--orange{color:#ff7900}use{pointer-events:none}.buttons{display:flex;flex-flow:row wrap;max-width:calc(100% - .625rem);margin:-.625rem -.625rem 1.25rem 0}.buttons .btn,.buttons .btn:last-child,.buttons .link,.buttons .link:last-child{margin:.625rem .625rem 0 0}@media screen and (max-width:479.98px){.buttons--stack-on-xs{flex-flow:column;max-width:100%;margin:0 0 .625rem}.buttons--stack-on-xs .btn:last-child,.buttons--stack-on-xs .btn:not(:last-child),.buttons--stack-on-xs .link:last-child,.buttons--stack-on-xs .link:not(:last-child){margin-right:0;margin-bottom:0}}.alert{display:flex;max-width:36.875rem;margin-bottom:1.25rem;padding:1.125rem;background:#fff;border:2px solid #000}.alert--success{border-color:#32c832}.alert--danger{border-color:#cd3c14}.alert--warning{border-color:#fc0}.alert--info{border-color:#527edb}.alert__icon{margin-right:1.25rem;line-height:1}.alert__content{flex-shrink:1;flex-grow:1;margin-top:.375rem}.alert__content>:last-child{margin-bottom:.3125rem}.alert__title{font-size:1.125rem;line-height:1.1111111111;margin-bottom:.625rem}.alert__title+.btn,.alert__title+.buttons{margin-top:.625rem}.alert--full-width{max-width:100%}
 /*# sourceMappingURL=style.css.map */

package/build/components/Alert/style.css.map

@@ -1 +1 @@
-{"version":3,"sources":["style.scss","mixins.scss","config.scss","../../../styles/tokens/breakpoint.scss","../../../styles/tools/generate.scss"],"names":[],"mappings":"AAIA,MCCE,iBAAA,CACA,SAAA,CACA,UAAA,CACA,0BAAA,CAOM,aACE,UCbF,CDcE,WCdF,CDYA,cACE,YCbF,CDcE,aCdF,CDYA,aACE,UCbF,CDcE,WCdF,CDYA,cACE,YCbF,CDcE,aCdF,CDYA,eACE,UCbF,CDcE,WCdF,CDYA,YACE,YCbF,CDcE,aCdF,CC6BF,oCFjBE,cACE,UCbF,CDcE,WCdF,CDYA,eACE,UCbF,CDcE,WCdF,CDYA,YACE,UCbF,CDcE,WCdF,CAAA,CDuBJ,YACE,aCRG,CDOL,eACE,aCRG,CDOL,eACE,UCRG,CDOL,cACE,aCRG,CDOL,cACE,aCRG,CFTT,IACE,mBAAA,CARF,SCEE,YAAA,CACA,kBAAA,CACA,8BAAA,CACA,kCAAA,CAEA,4FAIE,0BAAA,CE2BA,uCHnCF,sBCcE,gBAAA,CACA,cAAA,CACA,kBAAA,CAEA,kLAIE,cAAA,CACA,eAAA,CAAA,CDzBN,OCGE,YAAA,CGoBE,mBAAA,CAAA,qBAAA,CAAA,gBAAA,CAAA,eAAA,CAAA,qBAAA,CJnBA,gBCKF,oBCCO,CFNL,eCKF,oBCCO,CFNL,gBCKF,iBCCO,CFNL,aCKF,oBCCO,CFDP,aCIA,oBAAA,CACA,aAAA,CDDA,gBCKA,aAAA,CACA,WAAA,CACA,kBAAA,CAEA,4BACE,sBAAA,CDNF,cIME,kBAAA,CAAA,wBAAA,CAAA,qBAAA,CJFF,0CCWA,kBAAA,CDNA,mBACE,cAAA","file":"style.css","sourcesContent":["@use '../../../styles/tools/generate';\n@use './config';\n@use './mixins';\n\n.alert {\n  @include mixins.alert-base();\n\n  @each $name, $color in config.$colors {\n    &--#{$name} {\n      @include mixins.alert-color($color);\n    }\n  }\n\n  &__icon {\n    @include mixins.alert-icon();\n  }\n\n  &__content {\n    @include mixins.alert-content();\n  }\n\n  &__title {\n    @include mixins.alert-title();\n  }\n\n  &__title + .buttons,\n  &__title + .btn {\n    @include mixins.buttons-after-title;\n  }\n\n  &--full-width {\n    max-width: 100%;\n  }\n}\n","@use './../../../styles/tokens/space';\n@use './../../../styles/tokens/breakpoint';\n@use './../../../styles/tools/generate';\n@use './../../../styles/tools/convert';\n@use './config';\n\n@mixin alert-base($config: config.$base) {\n  display: flex;\n\n  @include generate.css-map($config);\n}\n\n@mixin alert-color($color) {\n  border-color: $color;\n}\n\n@mixin alert-icon {\n  margin-right: space.get();\n  line-height: 1;\n}\n\n@mixin alert-content {\n  flex-shrink: 1;\n  flex-grow: 1;\n  margin-top: convert.to-rem(6px);\n\n  > :last-child {\n    margin-bottom: space.get('xsmall');\n  }\n}\n\n@mixin alert-title($config: config.$title) {\n  @include generate.css-map($config);\n}\n\n@mixin buttons-after-title() {\n  margin-top: space.get('small');\n}\n","@use '../../../styles/tokens/space';\n@use '../../../styles/tokens/color';\n@use '../../../styles/tools/convert';\n@use 'sass:math';\n\n$base: (\n  max-width: convert.to-rem(590px),\n  margin-bottom: space.get(),\n  padding: convert.to-rem(18px),\n  // 18px padding + 2px border = medium space\n  background: color.$white,\n  border: 2px solid color.$black,\n);\n\n$colors: (\n  success: color.$success,\n  danger: color.$danger,\n  warning: color.$warning,\n  info: color.$info,\n);\n\n$title: (\n  font-size: convert.to-rem(18px),\n  line-height: math.div(20, 18),\n  margin-bottom: space.get('small'),\n);\n","@use \"sass:list\";\n@use \"sass:meta\";\n@use 'sass:map' as sassmap;\n@use '../tools/map';\n\n$map: (\n  xs: 0,\n  sm: 480px,\n  md: 768px,\n  lg: 992px,\n  xl: 1240px,\n  xxl: 1380px,\n);\n\n@mixin get( $breakpoint, $param: false) {\n  @if (not sassmap.has-key($map, $breakpoint) and $breakpoint != 'default') {\n    @warn 'Breakpoint \"#{$breakpoint}\" is not defined.';\n\n    @debug 'Available breakpoints:'; // stylelint-disable-line at-rule-disallowed-list\n    @debug $map; // stylelint-disable-line at-rule-disallowed-list\n  }\n\n  @if (\n    ($breakpoint == list.nth(sassmap.keys($map), 1) and not $param) or\n    ( not $breakpoint ) or\n    ( $breakpoint == 'default' )\n  ) {\n    @content;\n  } @else if not $param {\n    // no param, just a standard mobile first media query\n    @if sassmap.has-key( $map, $breakpoint ) {\n      // breakpoint is in breakpoint map, let's use stored value\n      @media screen and (min-width: sassmap.get($map, $breakpoint)) { @content; };\n    } @else {\n      // breakpoint is not in breakpoint map, let's use custom value\n      @media screen and (min-width: $breakpoint) { @content; };\n    }\n  } @else if (\n    $param == 'down' and\n    map.next($map, $breakpoint)\n  ) {\n    @media screen and (max-width: map.next($map, $breakpoint) - 0.02px) {\n      @content;\n    }\n  } @else if (\n    $param == 'down' and\n    not sassmap.has-key($map, $breakpoint)\n  ) {\n    @media screen and (max-width: $breakpoint) { @content; };\n  } @else if (\n    $param == 'only' and\n    map.next($map, $breakpoint)\n  ) {\n    @media screen and\n      (min-width: sassmap.get($map, $breakpoint)) and\n      (max-width: map.next($map, $breakpoint) - 0.02px) { @content; };\n  } @else if (\n    sassmap.has-key( $map, $param) and\n    sassmap.has-key( $map, $breakpoint)\n  ) {\n    @media screen and\n      (min-width: sassmap.get($map, $breakpoint)) and\n      (max-width: sassmap.get($map, $param) - 0.02px) { @content; };\n  } @else if (\n    $param == 'downfrom' and\n    sassmap.get($map, $breakpoint) > 0 and\n    $breakpoint != 'xs'\n  ) {\n    @media screen and (max-width: sassmap.get($map, $breakpoint) - 0.02px) {\n      @content;\n    } // -1\n  } @else if (meta.type-of($param) == 'number') {\n    @if sassmap.has-key($map, $breakpoint) {\n      // breakpoint is in breakpoint map\n      @media screen and\n        (min-width: sassmap.get($map, $breakpoint)) and\n        (max-width: $param) { @content; };\n    } @else {\n      // breakpoint is not in breakpoint map, let's use custom value\n      @media screen and (min-width: $breakpoint) and (max-width: $param) { @content; }\n    }\n  } @else if (\n    not ($breakpoint == list.nth(sassmap.keys($map), -1) and $param == 'down') and\n    not ($breakpoint == list.nth(sassmap.keys($map), -1) and $param == 'only') and\n    not ($breakpoint == list.nth(sassmap.keys($map), 1) and $param == 'downfrom')\n  ) {\n    // do nothing on known edge cases. we just dont generate any code.\n    @warn 'Breakpoint is not configured properly #{$breakpoint}, #{$param}';\n  }\n}\n\n@mixin each() {\n  @each $breakpoint, $size in $map {\n    @include get($breakpoint) {\n      @content($breakpoint);\n    }\n  }\n}\n","@use '../tokens/breakpoint';\n@use './map' as *;\n\n/// Get css propeties from map\n///\n/// @param {Map} $map - Map\n/// @param {Arglist} $keys - Keys to fetch\n///\n/// @example\n/// $map: (\n///   background-color: #fff,\n///   color: #000\n/// );\n///\n/// .example {\n///   @include css-map($map);\n///  }\n///\n/// Output:\n/// .example {\n///   background-color: #fff;\n///   color: #000;\n/// }\n@mixin css-map($_map, $keys...) {\n  $map: if($keys, map-deep-get($_map, $keys...), $_map);\n\n  @each $prop, $value in $map {\n    #{$prop}: #{$value};\n  }\n}\n\n/// Get responsive css propeties from map\n///\n/// @param {Map} $map - Map\n/// @param {Arglist} $keys - Keys to fetch\n///\n/// @example\n/// $map: (\n///   default: (\n///     color: red,\n///   ),\n///   xl: (\n///     color: blue,\n///   ),\n/// );\n///\n/// .example {\n///   @include responsive-css-map($map);\n///  }\n///\n/// Output:\n/// .example {\n///   color: red;\n///   @media only screen and (min-width: 1240px) {\n///     color: blue;\n///   }\n/// }\n@mixin responsive-css-map($map) {\n  @each $breakpoint, $props in $map {\n    @include breakpoint.get($breakpoint) {\n      @include css-map($props);\n    }\n  }\n}\n\n/// Get variants of elemnt from map\n///\n/// @param {Map} $map - map\n/// @param {Map} $className - class name of element\n/// @param {Map} $classSuffix - suffix for class name of element\n@mixin variants($map, $className: '', $classSuffix: '') {\n  @each $variant, $props in $map {\n    #{if(&, \"&\", \"\")}#{$className + variant-name($variant) + $classSuffix} {\n      @include css-map($props);\n    }\n  }\n}\n\n/// Get responsive variants of elemnt from map\n///\n/// @param {Map} $map - map\n/// @param {Map} $className - class name of element\n/// @param {Map} $classSuffix - suffix for class name of element\n@mixin responsive-variants($map, $className: '', $classSuffix: '') {\n  @each $breakpoint, $props in $map {\n    @include breakpoint.get($breakpoint) {\n      @include variants($props, $className, $classSuffix);\n    }\n  }\n}\n\n/// Get prefixed variant name\n/// @param {String} $name - Variant name\n/// @return {String} - Return a prefixed variant name or empty string, for default variants\n/// @example scss\n///   variant-name('primary')\n/// // -primary\n///   variant-name('default')\n///\n@function variant-name($name, $prefix: '--', $suffix: '') {\n  @if not $name or $name == default or $name == xs {\n    @return '';\n  }\n\n  @return #{$prefix + $name + $suffix};\n}\n"]}
+{"version":3,"sources":["style.scss","mixins.scss","config.scss","../../../styles/tokens/breakpoint.scss","../../../styles/tools/generate.scss"],"names":[],"mappings":"AAIA,MCCE,iBAAA,CACA,SAAA,CACA,UAAA,CACA,0BAAA,CAOM,aACE,UCbF,CDcE,WCdF,CDYA,cACE,YCbF,CDcE,aCdF,CDYA,aACE,UCbF,CDcE,WCdF,CDYA,cACE,YCbF,CDcE,aCdF,CDYA,eACE,UCbF,CDcE,WCdF,CDYA,YACE,YCbF,CDcE,aCdF,CC6BF,oCFjBE,cACE,UCbF,CDcE,WCdF,CDYA,eACE,UCbF,CDcE,WCdF,CDYA,YACE,UCbF,CDcE,WCdF,CAAA,CDuBJ,YACE,aCRG,CDOL,eACE,aCRG,CDOL,eACE,UCRG,CDOL,cACE,aCRG,CDOL,cACE,aCRG,CFTT,IACE,mBAAA,CARF,SCEE,YAAA,CACA,kBAAA,CACA,8BAAA,CACA,kCAAA,CAEA,gFAIE,0BAAA,CE2BA,uCHnCF,sBCcE,gBAAA,CACA,cAAA,CACA,kBAAA,CAEA,sKAIE,cAAA,CACA,eAAA,CAAA,CDzBN,OCGE,YAAA,CGoBE,mBAAA,CAAA,qBAAA,CAAA,gBAAA,CAAA,eAAA,CAAA,qBAAA,CJnBA,gBCKF,oBCCO,CFNL,eCKF,oBCCO,CFNL,gBCKF,iBCCO,CFNL,aCKF,oBCCO,CFDP,aCIA,oBAAA,CACA,aAAA,CDDA,gBCKA,aAAA,CACA,WAAA,CACA,kBAAA,CAEA,4BACE,sBAAA,CDNF,cIME,kBAAA,CAAA,wBAAA,CAAA,qBAAA,CJFF,0CCWA,kBAAA,CDNA,mBACE,cAAA","file":"style.css","sourcesContent":["@use '../../../styles/tools/generate';\n@use './config';\n@use './mixins';\n\n.alert {\n  @include mixins.alert-base();\n\n  @each $name, $color in config.$colors {\n    &--#{$name} {\n      @include mixins.alert-color($color);\n    }\n  }\n\n  &__icon {\n    @include mixins.alert-icon();\n  }\n\n  &__content {\n    @include mixins.alert-content();\n  }\n\n  &__title {\n    @include mixins.alert-title();\n  }\n\n  &__title + .buttons,\n  &__title + .btn {\n    @include mixins.buttons-after-title;\n  }\n\n  &--full-width {\n    max-width: 100%;\n  }\n}\n","@use './../../../styles/tokens/space';\n@use './../../../styles/tokens/breakpoint';\n@use './../../../styles/tools/generate';\n@use './../../../styles/tools/convert';\n@use './config';\n\n@mixin alert-base($config: config.$base) {\n  display: flex;\n\n  @include generate.css-map($config);\n}\n\n@mixin alert-color($color) {\n  border-color: $color;\n}\n\n@mixin alert-icon {\n  margin-right: space.get();\n  line-height: 1;\n}\n\n@mixin alert-content {\n  flex-shrink: 1;\n  flex-grow: 1;\n  margin-top: convert.to-rem(6px);\n\n  > :last-child {\n    margin-bottom: space.get('xsmall');\n  }\n}\n\n@mixin alert-title($config: config.$title) {\n  @include generate.css-map($config);\n}\n\n@mixin buttons-after-title() {\n  margin-top: space.get('small');\n}\n","@use '../../../styles/tokens/space';\n@use '../../../styles/tokens/color';\n@use '../../../styles/tools/convert';\n@use 'sass:math';\n\n$base: (\n  max-width: convert.to-rem(590px),\n  margin-bottom: space.get(),\n  padding: convert.to-rem(18px),\n  // 18px padding + 2px border = medium space\n  background: color.$white,\n  border: 2px solid color.$black,\n);\n\n$colors: (\n  success: color.$success,\n  danger: color.$danger,\n  warning: color.$warning,\n  info: color.$info,\n);\n\n$title: (\n  font-size: convert.to-rem(18px),\n  line-height: math.div(20, 18),\n  margin-bottom: space.get('small'),\n);\n","@use \"sass:list\";\n@use \"sass:meta\";\n@use 'sass:map' as sassmap;\n@use '../tools/map';\n\n$map: (\n  xs: 0,\n  sm: 480px,\n  md: 768px,\n  lg: 992px,\n  xl: 1240px,\n  xxl: 1380px,\n);\n\n@mixin get( $breakpoint, $param: false) {\n  @if (not sassmap.has-key($map, $breakpoint) and $breakpoint != 'default') {\n    @warn 'Breakpoint \"#{$breakpoint}\" is not defined.';\n\n    @debug 'Available breakpoints:'; // stylelint-disable-line at-rule-disallowed-list\n    @debug $map; // stylelint-disable-line at-rule-disallowed-list\n  }\n\n  @if (\n    ($breakpoint == list.nth(sassmap.keys($map), 1) and not $param) or\n    ( not $breakpoint ) or\n    ( $breakpoint == 'default' )\n  ) {\n    @content;\n  } @else if not $param {\n    // no param, just a standard mobile first media query\n    @if sassmap.has-key( $map, $breakpoint ) {\n      // breakpoint is in breakpoint map, let's use stored value\n      @media screen and (min-width: sassmap.get($map, $breakpoint)) { @content; };\n    } @else {\n      // breakpoint is not in breakpoint map, let's use custom value\n      @media screen and (min-width: $breakpoint) { @content; };\n    }\n  } @else if (\n    $param == 'down' and\n    map.next($map, $breakpoint)\n  ) {\n    @media screen and (max-width: map.next($map, $breakpoint) - 0.02px) {\n      @content;\n    }\n  } @else if (\n    $param == 'down' and\n    not sassmap.has-key($map, $breakpoint)\n  ) {\n    @media screen and (max-width: $breakpoint) { @content; };\n  } @else if (\n    $param == 'only' and\n    map.next($map, $breakpoint)\n  ) {\n    @media screen and\n      (min-width: sassmap.get($map, $breakpoint)) and\n      (max-width: map.next($map, $breakpoint) - 0.02px) { @content; };\n  } @else if (\n    sassmap.has-key( $map, $param) and\n    sassmap.has-key( $map, $breakpoint)\n  ) {\n    @media screen and\n      (min-width: sassmap.get($map, $breakpoint)) and\n      (max-width: sassmap.get($map, $param) - 0.02px) { @content; };\n  } @else if (\n    $param == 'downfrom' and\n    sassmap.get($map, $breakpoint) > 0 and\n    $breakpoint != 'xs'\n  ) {\n    @media screen and (max-width: sassmap.get($map, $breakpoint) - 0.02px) {\n      @content;\n    } // -1\n  } @else if (meta.type-of($param) == 'number') {\n    @if sassmap.has-key($map, $breakpoint) {\n      // breakpoint is in breakpoint map\n      @media screen and\n        (min-width: sassmap.get($map, $breakpoint)) and\n        (max-width: $param) { @content; };\n    } @else {\n      // breakpoint is not in breakpoint map, let's use custom value\n      @media screen and (min-width: $breakpoint) and (max-width: $param) { @content; }\n    }\n  } @else if (\n    not ($breakpoint == list.nth(sassmap.keys($map), -1) and $param == 'down') and\n    not ($breakpoint == list.nth(sassmap.keys($map), -1) and $param == 'only') and\n    not ($breakpoint == list.nth(sassmap.keys($map), 1) and $param == 'downfrom')\n  ) {\n    // do nothing on known edge cases. we just dont generate any code.\n    @warn 'Breakpoint is not configured properly #{$breakpoint}, #{$param}';\n  }\n}\n\n@mixin each() {\n  @each $breakpoint, $size in $map {\n    @include get($breakpoint) {\n      @content($breakpoint);\n    }\n  }\n}\n","@use '../tokens/breakpoint';\n@use './map' as *;\n\n/// Get css propeties from map\n///\n/// @param {Map} $map - Map\n/// @param {Arglist} $keys - Keys to fetch\n///\n/// @example\n/// $map: (\n///   background-color: #fff,\n///   color: #000\n/// );\n///\n/// .example {\n///   @include css-map($map);\n///  }\n///\n/// Output:\n/// .example {\n///   background-color: #fff;\n///   color: #000;\n/// }\n@mixin css-map($_map, $keys...) {\n  $map: if($keys, map-deep-get($_map, $keys...), $_map);\n\n  @each $prop, $value in $map {\n    #{$prop}: #{$value};\n  }\n}\n\n/// Get responsive css propeties from map\n///\n/// @param {Map} $map - Map\n/// @param {Arglist} $keys - Keys to fetch\n///\n/// @example\n/// $map: (\n///   default: (\n///     color: red,\n///   ),\n///   xl: (\n///     color: blue,\n///   ),\n/// );\n///\n/// .example {\n///   @include responsive-css-map($map);\n///  }\n///\n/// Output:\n/// .example {\n///   color: red;\n///   @media only screen and (min-width: 1240px) {\n///     color: blue;\n///   }\n/// }\n@mixin responsive-css-map($map) {\n  @each $breakpoint, $props in $map {\n    @include breakpoint.get($breakpoint) {\n      @include css-map($props);\n    }\n  }\n}\n\n/// Get variants of elemnt from map\n///\n/// @param {Map} $map - map\n/// @param {Map} $className - class name of element\n/// @param {Map} $classSuffix - suffix for class name of element\n@mixin variants($map, $className: '', $classSuffix: '') {\n  @each $variant, $props in $map {\n    #{if(&, \"&\", \"\")}#{$className + variant-name($variant) + $classSuffix} {\n      @include css-map($props);\n    }\n  }\n}\n\n/// Get responsive variants of elemnt from map\n///\n/// @param {Map} $map - map\n/// @param {Map} $className - class name of element\n/// @param {Map} $classSuffix - suffix for class name of element\n@mixin responsive-variants($map, $className: '', $classSuffix: '') {\n  @each $breakpoint, $props in $map {\n    @include breakpoint.get($breakpoint) {\n      @include variants($props, $className, $classSuffix);\n    }\n  }\n}\n\n/// Get prefixed variant name\n/// @param {String} $name - Variant name\n/// @return {String} - Return a prefixed variant name or empty string, for default variants\n/// @example scss\n///   variant-name('primary')\n/// // -primary\n///   variant-name('default')\n///\n@function variant-name($name, $prefix: '--', $suffix: '') {\n  @if not $name or $name == default or $name == xs {\n    @return '';\n  }\n\n  @return #{$prefix + $name + $suffix};\n}\n"]}

package/build/components/Buttons/style.css

@@ -1,2 +1,2 @@
-.buttons{display:flex;flex-flow:row wrap;max-width:calc(100% - .625rem);margin:-.625rem -.625rem 1.25rem 0}.buttons .btn,.buttons .btn:last-child,.buttons button.link,.buttons button.link:last-child{margin:.625rem .625rem 0 0}@media screen and (max-width:479.98px){.buttons--stack-on-xs{flex-flow:column;max-width:100%;margin:0 0 .625rem}.buttons--stack-on-xs .btn:last-child,.buttons--stack-on-xs .btn:not(:last-child),.buttons--stack-on-xs button.link:last-child,.buttons--stack-on-xs button.link:not(:last-child){margin-right:0;margin-bottom:0}}
+.buttons{display:flex;flex-flow:row wrap;max-width:calc(100% - .625rem);margin:-.625rem -.625rem 1.25rem 0}.buttons .btn,.buttons .btn:last-child,.buttons .link,.buttons .link:last-child{margin:.625rem .625rem 0 0}@media screen and (max-width:479.98px){.buttons--stack-on-xs{flex-flow:column;max-width:100%;margin:0 0 .625rem}.buttons--stack-on-xs .btn:last-child,.buttons--stack-on-xs .btn:not(:last-child),.buttons--stack-on-xs .link:last-child,.buttons--stack-on-xs .link:not(:last-child){margin-right:0;margin-bottom:0}}
 /*# sourceMappingURL=style.css.map */

package/build/components/Buttons/style.css.map

@@ -1 +1 @@
-{"version":3,"sources":["style.scss","mixins.scss","../../../styles/tokens/breakpoint.scss"],"names":[],"mappings":"AAGA,SCEE,YAAA,CACA,kBAAA,CACA,8BAAA,CACA,kCAAA,CAEA,4FAIE,0BAAA,CC2BA,uCFnCF,sBCcE,gBAAA,CACA,cAAA,CACA,kBAAA,CAEA,kLAIE,cAAA,CACA,eAAA,CAAA","file":"style.css","sourcesContent":["@use './config';\n@use './mixins';\n\n.buttons {\n  @include mixins.layout;\n\n  &--stack-on-xs {\n    @include mixins.stack-on-xs;\n  }\n}\n","@use '../../../styles/tokens/breakpoint';\n@use '../../../styles/tokens/space';\n@use './config';\n\n@mixin layout($spacing: config.$spacing, $button-selector: '.btn') {\n  display: flex;\n  flex-flow: row wrap;\n  max-width: calc(100% - #{$spacing});\n  margin: ($spacing * -1) ($spacing * -1) space.get() 0;\n\n  #{$button-selector},\n  #{$button-selector}:last-child,\n  button.link,\n  button.link:last-child {\n    margin: $spacing $spacing 0 0;\n  }\n}\n\n@mixin stack-on-xs($spacing: config.$spacing, $button-selector: '.btn') {\n  @include breakpoint.get('xs', 'down') {\n    flex-flow: column;\n    max-width: 100%;\n    margin: 0 0 $spacing 0;\n\n    #{$button-selector}:not(:last-child),\n    #{$button-selector}:last-child,\n    button.link:not(:last-child),\n    button.link:last-child {\n      margin-right: 0;\n      margin-bottom: 0;\n    }\n  }\n}\n","@use \"sass:list\";\n@use \"sass:meta\";\n@use 'sass:map' as sassmap;\n@use '../tools/map';\n\n$map: (\n  xs: 0,\n  sm: 480px,\n  md: 768px,\n  lg: 992px,\n  xl: 1240px,\n  xxl: 1380px,\n);\n\n@mixin get( $breakpoint, $param: false) {\n  @if (not sassmap.has-key($map, $breakpoint) and $breakpoint != 'default') {\n    @warn 'Breakpoint \"#{$breakpoint}\" is not defined.';\n\n    @debug 'Available breakpoints:'; // stylelint-disable-line at-rule-disallowed-list\n    @debug $map; // stylelint-disable-line at-rule-disallowed-list\n  }\n\n  @if (\n    ($breakpoint == list.nth(sassmap.keys($map), 1) and not $param) or\n    ( not $breakpoint ) or\n    ( $breakpoint == 'default' )\n  ) {\n    @content;\n  } @else if not $param {\n    // no param, just a standard mobile first media query\n    @if sassmap.has-key( $map, $breakpoint ) {\n      // breakpoint is in breakpoint map, let's use stored value\n      @media screen and (min-width: sassmap.get($map, $breakpoint)) { @content; };\n    } @else {\n      // breakpoint is not in breakpoint map, let's use custom value\n      @media screen and (min-width: $breakpoint) { @content; };\n    }\n  } @else if (\n    $param == 'down' and\n    map.next($map, $breakpoint)\n  ) {\n    @media screen and (max-width: map.next($map, $breakpoint) - 0.02px) {\n      @content;\n    }\n  } @else if (\n    $param == 'down' and\n    not sassmap.has-key($map, $breakpoint)\n  ) {\n    @media screen and (max-width: $breakpoint) { @content; };\n  } @else if (\n    $param == 'only' and\n    map.next($map, $breakpoint)\n  ) {\n    @media screen and\n      (min-width: sassmap.get($map, $breakpoint)) and\n      (max-width: map.next($map, $breakpoint) - 0.02px) { @content; };\n  } @else if (\n    sassmap.has-key( $map, $param) and\n    sassmap.has-key( $map, $breakpoint)\n  ) {\n    @media screen and\n      (min-width: sassmap.get($map, $breakpoint)) and\n      (max-width: sassmap.get($map, $param) - 0.02px) { @content; };\n  } @else if (\n    $param == 'downfrom' and\n    sassmap.get($map, $breakpoint) > 0 and\n    $breakpoint != 'xs'\n  ) {\n    @media screen and (max-width: sassmap.get($map, $breakpoint) - 0.02px) {\n      @content;\n    } // -1\n  } @else if (meta.type-of($param) == 'number') {\n    @if sassmap.has-key($map, $breakpoint) {\n      // breakpoint is in breakpoint map\n      @media screen and\n        (min-width: sassmap.get($map, $breakpoint)) and\n        (max-width: $param) { @content; };\n    } @else {\n      // breakpoint is not in breakpoint map, let's use custom value\n      @media screen and (min-width: $breakpoint) and (max-width: $param) { @content; }\n    }\n  } @else if (\n    not ($breakpoint == list.nth(sassmap.keys($map), -1) and $param == 'down') and\n    not ($breakpoint == list.nth(sassmap.keys($map), -1) and $param == 'only') and\n    not ($breakpoint == list.nth(sassmap.keys($map), 1) and $param == 'downfrom')\n  ) {\n    // do nothing on known edge cases. we just dont generate any code.\n    @warn 'Breakpoint is not configured properly #{$breakpoint}, #{$param}';\n  }\n}\n\n@mixin each() {\n  @each $breakpoint, $size in $map {\n    @include get($breakpoint) {\n      @content($breakpoint);\n    }\n  }\n}\n"]}
+{"version":3,"sources":["style.scss","mixins.scss","../../../styles/tokens/breakpoint.scss"],"names":[],"mappings":"AAGA,SCEE,YAAA,CACA,kBAAA,CACA,8BAAA,CACA,kCAAA,CAEA,gFAIE,0BAAA,CC2BA,uCFnCF,sBCcE,gBAAA,CACA,cAAA,CACA,kBAAA,CAEA,sKAIE,cAAA,CACA,eAAA,CAAA","file":"style.css","sourcesContent":["@use './config';\n@use './mixins';\n\n.buttons {\n  @include mixins.layout;\n\n  &--stack-on-xs {\n    @include mixins.stack-on-xs;\n  }\n}\n","@use '../../../styles/tokens/breakpoint';\n@use '../../../styles/tokens/space';\n@use './config';\n\n@mixin layout($spacing: config.$spacing, $button-selector: '.btn') {\n  display: flex;\n  flex-flow: row wrap;\n  max-width: calc(100% - #{$spacing});\n  margin: ($spacing * -1) ($spacing * -1) space.get() 0;\n\n  #{$button-selector},\n  #{$button-selector}:last-child,\n  .link,\n  .link:last-child {\n    margin: $spacing $spacing 0 0;\n  }\n}\n\n@mixin stack-on-xs($spacing: config.$spacing, $button-selector: '.btn') {\n  @include breakpoint.get('xs', 'down') {\n    flex-flow: column;\n    max-width: 100%;\n    margin: 0 0 $spacing 0;\n\n    #{$button-selector}:not(:last-child),\n    #{$button-selector}:last-child,\n    .link:not(:last-child),\n    .link:last-child {\n      margin-right: 0;\n      margin-bottom: 0;\n    }\n  }\n}\n","@use \"sass:list\";\n@use \"sass:meta\";\n@use 'sass:map' as sassmap;\n@use '../tools/map';\n\n$map: (\n  xs: 0,\n  sm: 480px,\n  md: 768px,\n  lg: 992px,\n  xl: 1240px,\n  xxl: 1380px,\n);\n\n@mixin get( $breakpoint, $param: false) {\n  @if (not sassmap.has-key($map, $breakpoint) and $breakpoint != 'default') {\n    @warn 'Breakpoint \"#{$breakpoint}\" is not defined.';\n\n    @debug 'Available breakpoints:'; // stylelint-disable-line at-rule-disallowed-list\n    @debug $map; // stylelint-disable-line at-rule-disallowed-list\n  }\n\n  @if (\n    ($breakpoint == list.nth(sassmap.keys($map), 1) and not $param) or\n    ( not $breakpoint ) or\n    ( $breakpoint == 'default' )\n  ) {\n    @content;\n  } @else if not $param {\n    // no param, just a standard mobile first media query\n    @if sassmap.has-key( $map, $breakpoint ) {\n      // breakpoint is in breakpoint map, let's use stored value\n      @media screen and (min-width: sassmap.get($map, $breakpoint)) { @content; };\n    } @else {\n      // breakpoint is not in breakpoint map, let's use custom value\n      @media screen and (min-width: $breakpoint) { @content; };\n    }\n  } @else if (\n    $param == 'down' and\n    map.next($map, $breakpoint)\n  ) {\n    @media screen and (max-width: map.next($map, $breakpoint) - 0.02px) {\n      @content;\n    }\n  } @else if (\n    $param == 'down' and\n    not sassmap.has-key($map, $breakpoint)\n  ) {\n    @media screen and (max-width: $breakpoint) { @content; };\n  } @else if (\n    $param == 'only' and\n    map.next($map, $breakpoint)\n  ) {\n    @media screen and\n      (min-width: sassmap.get($map, $breakpoint)) and\n      (max-width: map.next($map, $breakpoint) - 0.02px) { @content; };\n  } @else if (\n    sassmap.has-key( $map, $param) and\n    sassmap.has-key( $map, $breakpoint)\n  ) {\n    @media screen and\n      (min-width: sassmap.get($map, $breakpoint)) and\n      (max-width: sassmap.get($map, $param) - 0.02px) { @content; };\n  } @else if (\n    $param == 'downfrom' and\n    sassmap.get($map, $breakpoint) > 0 and\n    $breakpoint != 'xs'\n  ) {\n    @media screen and (max-width: sassmap.get($map, $breakpoint) - 0.02px) {\n      @content;\n    } // -1\n  } @else if (meta.type-of($param) == 'number') {\n    @if sassmap.has-key($map, $breakpoint) {\n      // breakpoint is in breakpoint map\n      @media screen and\n        (min-width: sassmap.get($map, $breakpoint)) and\n        (max-width: $param) { @content; };\n    } @else {\n      // breakpoint is not in breakpoint map, let's use custom value\n      @media screen and (min-width: $breakpoint) and (max-width: $param) { @content; }\n    }\n  } @else if (\n    not ($breakpoint == list.nth(sassmap.keys($map), -1) and $param == 'down') and\n    not ($breakpoint == list.nth(sassmap.keys($map), -1) and $param == 'only') and\n    not ($breakpoint == list.nth(sassmap.keys($map), 1) and $param == 'downfrom')\n  ) {\n    // do nothing on known edge cases. we just dont generate any code.\n    @warn 'Breakpoint is not configured properly #{$breakpoint}, #{$param}';\n  }\n}\n\n@mixin each() {\n  @each $breakpoint, $size in $map {\n    @include get($breakpoint) {\n      @content($breakpoint);\n    }\n  }\n}\n"]}

package/build/components/Modal/style.css

@@ -1,2 +1,2 @@
-.icon{fill:currentColor;width:1em;height:1em;vertical-align:text-bottom}.icon--small{width:1rem;height:1rem}.icon--medium{width:1.5rem;height:1.5rem}.icon--large{width:2rem;height:2rem}.icon--xlarge{width:2.5rem;height:2.5rem}.icon--xxlarge{width:3rem;height:3rem}.icon--huge{width:3.5rem;height:3.5rem}@media screen and (min-width:768px){.icon--xlarge{width:3rem;height:3rem}.icon--xxlarge{width:4rem;height:4rem}.icon--huge{width:5rem;height:5rem}}.icon--info{color:#527edb}.icon--success{color:#32c832}.icon--warning{color:#fc0}.icon--danger{color:#cd3c14}.icon--orange{color:#ff7900}use{pointer-events:none}.btn{border:2px solid transparent;font-size:1.125rem;font-weight:700;line-height:1.4;transition-duration:.2s;transition-timing-function:ease-in-out;transition-property:border-color,background-color,color;display:inline-flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;line-height:1.25;vertical-align:initial;cursor:pointer}.btn.is-active,.btn:active{transition-property:none;z-index:2}.btn[aria-disabled=true],.btn[disabled]{cursor:not-allowed}.btn{margin-bottom:1.25rem}.btn:not(:last-of-type){margin-right:.625rem}.btn{min-height:2.5rem;padding:.375rem .9375rem}.btn--small{min-height:1.875rem;padding:.125rem .625rem}.btn--large{min-height:3.125rem;padding:.625rem 1.25rem}.bg-black .btn,.btn--inverse.btn{color:#fff;background-color:initial;border-color:#fff}@media(hover:hover){.bg-black .btn:hover,.btn--inverse.btn:hover{color:#000;background-color:#fff;border-color:transparent;z-index:2}}.bg-black .btn.is-active,.bg-black .btn:active,.btn--inverse.btn.is-active,.btn--inverse.btn:active{color:#fff;background:#f16e00;border-color:transparent;z-index:2}.bg-black .btn[aria-disabled=true],.bg-black .btn[disabled],.btn--inverse.btn[aria-disabled=true],.btn--inverse.btn[disabled]{color:#999;border-color:#999;background-color:initial}.bg-black .btn--primary,.btn--inverse.btn--primary{color:#fff;background-color:#f16e00;border-color:transparent}@media(hover:hover){.bg-black .btn--primary:hover,.btn--inverse.btn--primary:hover{color:#000;background-color:#fff;border-color:transparent;z-index:2}}.bg-black .btn--primary.is-active,.bg-black .btn--primary:active,.btn--inverse.btn--primary.is-active,.btn--inverse.btn--primary:active{color:#fff;background-color:initial;border-color:#fff;z-index:2}.bg-black .btn--primary[aria-disabled=true],.bg-black .btn--primary[disabled],.btn--inverse.btn--primary[aria-disabled=true],.btn--inverse.btn--primary[disabled]{color:#000;background-color:#999;border-color:#999}.bg-black .btn--fill,.btn--inverse.btn--fill{color:#000;background-color:#fff;border-color:transparent}@media(hover:hover){.bg-black .btn--fill:hover,.btn--inverse.btn--fill:hover{color:#fff;background-color:initial;border-color:#fff;z-index:2}}.bg-black .btn--fill.is-active,.bg-black .btn--fill:active,.btn--inverse.btn--fill.is-active,.btn--inverse.btn--fill:active{color:#fff;background-color:#f16e00;border-color:transparent;z-index:2}.bg-black .btn--fill[aria-disabled=true],.bg-black .btn--fill[disabled],.btn--inverse.btn--fill[aria-disabled=true],.btn--inverse.btn--fill[disabled]{color:#000;background-color:#999;border-color:#999}.bg-black .btn--ghost,.btn--inverse.btn--ghost{color:#fff;background-color:initial;border-color:transparent}@media(hover:hover){.bg-black .btn--ghost:hover,.btn--inverse.btn--ghost:hover{color:#fff;background-color:initial;border-color:#666;z-index:2}}.bg-black .btn--ghost.is-active,.bg-black .btn--ghost:active,.btn--inverse.btn--ghost.is-active,.btn--inverse.btn--ghost:active{color:#f16e00;background-color:initial;border-color:#666;z-index:2}.bg-black .btn--ghost[aria-disabled=true],.bg-black .btn--ghost[disabled],.btn--inverse.btn--ghost[aria-disabled=true],.btn--inverse.btn--ghost[disabled]{color:#999;background-color:initial;border-color:transparent}.btn,.btn--default.btn{color:#000;background-color:initial;border-color:#000}@media(hover:hover){.btn--default.btn:hover,.btn:hover{color:#fff;background-color:#000;border-color:transparent;z-index:2}}.btn--default.btn.is-active,.btn--default.btn:active,.btn.is-active,.btn:active{color:#fff;background-color:#f16e00;border-color:transparent;z-index:2}.btn--default.btn[aria-disabled=true],.btn--default.btn[disabled],.btn[aria-disabled=true],.btn[disabled]{color:#666;background-color:initial;border-color:#999}.btn--default.btn--primary,.btn--primary{color:#fff;background-color:#f16e00;border-color:transparent}@media(hover:hover){.btn--default.btn--primary:hover,.btn--primary:hover{z-index:2}}.btn--default.btn--primary.is-active,.btn--default.btn--primary:active,.btn--primary.is-active,.btn--primary:active{color:#000;background-color:initial;border-color:#000;z-index:2}.btn--default.btn--primary[aria-disabled=true],.btn--default.btn--primary[disabled],.btn--primary[aria-disabled=true],.btn--primary[disabled]{color:#fff;background-color:#999;border-color:#999}.btn--default.btn--fill,.btn--fill{color:#fff;background-color:#000;border-color:transparent}@media(hover:hover){.btn--default.btn--fill:hover,.btn--fill:hover{color:#000;background-color:initial;border-color:#000;z-index:2}}.btn--default.btn--fill.is-active,.btn--default.btn--fill:active,.btn--fill.is-active,.btn--fill:active{color:#fff;background-color:#f16e00;border-color:transparent;z-index:2}.btn--default.btn--fill[aria-disabled=true],.btn--default.btn--fill[disabled],.btn--fill[aria-disabled=true],.btn--fill[disabled]{color:#fff;background-color:#999;border-color:#999}.btn--default.btn--ghost,.btn--ghost{color:#000;background-color:initial;border-color:transparent}@media(hover:hover){.btn--default.btn--ghost:hover,.btn--ghost:hover{color:#000;background-color:initial;border-color:#ccc;z-index:2}}.btn--default.btn--ghost.is-active,.btn--default.btn--ghost:active,.btn--ghost.is-active,.btn--ghost:active{color:#f16e00;background-color:initial;border-color:#ccc;z-index:2}.btn--default.btn--ghost[aria-disabled=true],.btn--default.btn--ghost[disabled],.btn--ghost[aria-disabled=true],.btn--ghost[disabled]{color:#666;background-color:initial;border-color:transparent}.btn--square{display:inline-flex;flex:0 0 auto;flex-flow:row;justify-content:center;align-items:center;padding:0;line-height:0}.btn--square.btn{width:2.5rem;height:2.5rem}.btn--square.btn--small{width:1.875rem;height:1.875rem}.btn--square.btn--large{width:3.125rem;height:3.125rem}.btn__icon-left{backface-visibility:hidden;margin-left:-.25em;margin-right:.5em}.btn__icon-right{backface-visibility:hidden;margin-left:.5em;margin-right:-.25em}.btn--large .icon--large{margin-top:-.1875rem;margin-bottom:-.1875rem}.buttons{display:flex;flex-flow:row wrap;max-width:calc(100% - .625rem);margin:-.625rem -.625rem 1.25rem 0}.buttons .btn,.buttons .btn:last-child,.buttons button.link,.buttons button.link:last-child{margin:.625rem .625rem 0 0}@media screen and (max-width:479.98px){.buttons--stack-on-xs{flex-flow:column;max-width:100%;margin:0 0 .625rem}.buttons--stack-on-xs .btn:last-child,.buttons--stack-on-xs .btn:not(:last-child),.buttons--stack-on-xs button.link:last-child,.buttons--stack-on-xs button.link:not(:last-child){margin-right:0;margin-bottom:0}}.modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:999;display:flex;align-items:center;justify-content:center}.modal[aria-hidden=true]{display:none}.modal__overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:rgba(0,0,0,.4);width:0;height:0;z-index:500;opacity:0;transform:scale(1.1);transition:opacity .4s ease 0s,transform .4s ease 0s;backface-visibility:hidden}.modal.is-active .modal__overlay{width:100%!important;height:100%!important;opacity:1;transform:scale(1);transition-delay:0s}.modal__dialog{display:flex;flex-flow:column;overflow:auto;-webkit-overflow-scrolling:touch;height:auto;background-color:#fff;z-index:501;max-height:calc(100% - 1.25rem);width:calc(100% - 1.25rem)}@media screen and (min-width:480px){.modal__dialog{max-height:calc(100% - 2.5rem);width:calc(100% - 2.5rem)}}.modal__dialog{max-width:43.75rem}.modal__dialog--small{max-width:25rem}.modal__dialog--large{max-width:62.5rem}.modal__header{z-index:1000;display:flex;flex-direction:column;justify-content:flex-end;flex-shrink:0;position:sticky;top:0;padding-bottom:.1875rem;background:#fff}.modal__header>:last-child{margin-bottom:0}.modal__dialog--small .modal__header,.modal__dialog .modal__header{padding:1.25rem}@media screen and (min-width:768px){.modal__dialog .modal__header{padding:1.875rem}}.modal__close{position:absolute;top:1.25rem;right:1.25rem;margin-bottom:0!important}@media screen and (max-width:479.98px){.modal__close{top:.625rem;right:.625rem}}.modal__body{width:100%;flex:0 0 auto}.modal__body>:last-child{margin-bottom:0}.modal__dialog--small .modal__body{padding-left:1.25rem;padding-right:1.25rem}.modal__dialog--small .modal__body:not(.modal__body--colorful){padding-bottom:1.25rem}.modal__dialog--small .modal__body:has(+.modal__footer--sticky){padding-bottom:0}.modal__dialog .modal__body{padding-left:1.25rem;padding-right:1.25rem}@media screen and (min-width:768px){.modal__dialog .modal__body{padding-left:1.875rem;padding-right:1.875rem}}.modal__dialog .modal__body:not(.modal__body--colorful){padding-bottom:1.25rem}@media screen and (min-width:768px){.modal__dialog .modal__body:not(.modal__body--colorful){padding-bottom:1.875rem}}.modal__dialog .modal__body:has(+.modal__footer--sticky){padding-bottom:0}@media screen and (min-width:768px){.modal__dialog .modal__body:has(+.modal__footer--sticky){padding-bottom:0}}.modal__dialog--small .modal__body--colorful{padding-top:1.25rem;padding-bottom:1.25rem}.modal__dialog--small .modal__body--colorful+.modal__footer--sticky{margin-top:0}.modal__dialog .modal__body--colorful{padding-top:1.25rem;padding-bottom:1.25rem}@media screen and (min-width:768px){.modal__dialog .modal__body--colorful{padding-top:1.875rem;padding-bottom:1.875rem}}.modal__dialog--large .modal__body--colorful+.modal__footer--sticky,.modal__dialog .modal__body--colorful+.modal__footer--sticky{margin-top:0}.modal__dialog--full-height .modal__body{flex:1 1}@media screen and (max-width:479.98px){.modal__dialog--full-height{height:calc(100% - 2.5rem)}}.modal__footer{width:100%;flex:0 0 auto}.modal__footer>:last-child{margin-bottom:0}.modal__dialog--small .modal__footer,.modal__dialog .modal__footer{padding:0 1.25rem 1.25rem}.modal__body--colorful+.modal__footer{padding:1.25rem!important}@media screen and (min-width:768px){.modal__dialog .modal__footer{padding:0 1.875rem 1.875rem}.modal__body--colorful+.modal__footer{padding:1.875rem!important}}@media screen and (min-height:500px){.modal__footer--sticky{position:sticky;bottom:0;background-color:#fff}}.modal__footer--sticky{padding:1.25rem!important}@media screen and (min-width:768px){.modal__footer--sticky{padding:1.875rem!important}}
+.icon{fill:currentColor;width:1em;height:1em;vertical-align:text-bottom}.icon--small{width:1rem;height:1rem}.icon--medium{width:1.5rem;height:1.5rem}.icon--large{width:2rem;height:2rem}.icon--xlarge{width:2.5rem;height:2.5rem}.icon--xxlarge{width:3rem;height:3rem}.icon--huge{width:3.5rem;height:3.5rem}@media screen and (min-width:768px){.icon--xlarge{width:3rem;height:3rem}.icon--xxlarge{width:4rem;height:4rem}.icon--huge{width:5rem;height:5rem}}.icon--info{color:#527edb}.icon--success{color:#32c832}.icon--warning{color:#fc0}.icon--danger{color:#cd3c14}.icon--orange{color:#ff7900}use{pointer-events:none}.btn{border:2px solid transparent;font-size:1.125rem;font-weight:700;line-height:1.4;transition-duration:.2s;transition-timing-function:ease-in-out;transition-property:border-color,background-color,color;display:inline-flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;line-height:1.25;vertical-align:initial;cursor:pointer}.btn.is-active,.btn:active{transition-property:none;z-index:2}.btn[aria-disabled=true],.btn[disabled]{cursor:not-allowed}.btn{margin-bottom:1.25rem}.btn:not(:last-of-type){margin-right:.625rem}.btn{min-height:2.5rem;padding:.375rem .9375rem}.btn--small{min-height:1.875rem;padding:.125rem .625rem}.btn--large{min-height:3.125rem;padding:.625rem 1.25rem}.bg-black .btn,.btn--inverse.btn{color:#fff;background-color:initial;border-color:#fff}@media(hover:hover){.bg-black .btn:hover,.btn--inverse.btn:hover{color:#000;background-color:#fff;border-color:transparent;z-index:2}}.bg-black .btn.is-active,.bg-black .btn:active,.btn--inverse.btn.is-active,.btn--inverse.btn:active{color:#fff;background:#f16e00;border-color:transparent;z-index:2}.bg-black .btn[aria-disabled=true],.bg-black .btn[disabled],.btn--inverse.btn[aria-disabled=true],.btn--inverse.btn[disabled]{color:#999;border-color:#999;background-color:initial}.bg-black .btn--primary,.btn--inverse.btn--primary{color:#fff;background-color:#f16e00;border-color:transparent}@media(hover:hover){.bg-black .btn--primary:hover,.btn--inverse.btn--primary:hover{color:#000;background-color:#fff;border-color:transparent;z-index:2}}.bg-black .btn--primary.is-active,.bg-black .btn--primary:active,.btn--inverse.btn--primary.is-active,.btn--inverse.btn--primary:active{color:#fff;background-color:initial;border-color:#fff;z-index:2}.bg-black .btn--primary[aria-disabled=true],.bg-black .btn--primary[disabled],.btn--inverse.btn--primary[aria-disabled=true],.btn--inverse.btn--primary[disabled]{color:#000;background-color:#999;border-color:#999}.bg-black .btn--fill,.btn--inverse.btn--fill{color:#000;background-color:#fff;border-color:transparent}@media(hover:hover){.bg-black .btn--fill:hover,.btn--inverse.btn--fill:hover{color:#fff;background-color:initial;border-color:#fff;z-index:2}}.bg-black .btn--fill.is-active,.bg-black .btn--fill:active,.btn--inverse.btn--fill.is-active,.btn--inverse.btn--fill:active{color:#fff;background-color:#f16e00;border-color:transparent;z-index:2}.bg-black .btn--fill[aria-disabled=true],.bg-black .btn--fill[disabled],.btn--inverse.btn--fill[aria-disabled=true],.btn--inverse.btn--fill[disabled]{color:#000;background-color:#999;border-color:#999}.bg-black .btn--ghost,.btn--inverse.btn--ghost{color:#fff;background-color:initial;border-color:transparent}@media(hover:hover){.bg-black .btn--ghost:hover,.btn--inverse.btn--ghost:hover{color:#fff;background-color:initial;border-color:#666;z-index:2}}.bg-black .btn--ghost.is-active,.bg-black .btn--ghost:active,.btn--inverse.btn--ghost.is-active,.btn--inverse.btn--ghost:active{color:#f16e00;background-color:initial;border-color:#666;z-index:2}.bg-black .btn--ghost[aria-disabled=true],.bg-black .btn--ghost[disabled],.btn--inverse.btn--ghost[aria-disabled=true],.btn--inverse.btn--ghost[disabled]{color:#999;background-color:initial;border-color:transparent}.btn,.btn--default.btn{color:#000;background-color:initial;border-color:#000}@media(hover:hover){.btn--default.btn:hover,.btn:hover{color:#fff;background-color:#000;border-color:transparent;z-index:2}}.btn--default.btn.is-active,.btn--default.btn:active,.btn.is-active,.btn:active{color:#fff;background-color:#f16e00;border-color:transparent;z-index:2}.btn--default.btn[aria-disabled=true],.btn--default.btn[disabled],.btn[aria-disabled=true],.btn[disabled]{color:#666;background-color:initial;border-color:#999}.btn--default.btn--primary,.btn--primary{color:#fff;background-color:#f16e00;border-color:transparent}@media(hover:hover){.btn--default.btn--primary:hover,.btn--primary:hover{z-index:2}}.btn--default.btn--primary.is-active,.btn--default.btn--primary:active,.btn--primary.is-active,.btn--primary:active{color:#000;background-color:initial;border-color:#000;z-index:2}.btn--default.btn--primary[aria-disabled=true],.btn--default.btn--primary[disabled],.btn--primary[aria-disabled=true],.btn--primary[disabled]{color:#fff;background-color:#999;border-color:#999}.btn--default.btn--fill,.btn--fill{color:#fff;background-color:#000;border-color:transparent}@media(hover:hover){.btn--default.btn--fill:hover,.btn--fill:hover{color:#000;background-color:initial;border-color:#000;z-index:2}}.btn--default.btn--fill.is-active,.btn--default.btn--fill:active,.btn--fill.is-active,.btn--fill:active{color:#fff;background-color:#f16e00;border-color:transparent;z-index:2}.btn--default.btn--fill[aria-disabled=true],.btn--default.btn--fill[disabled],.btn--fill[aria-disabled=true],.btn--fill[disabled]{color:#fff;background-color:#999;border-color:#999}.btn--default.btn--ghost,.btn--ghost{color:#000;background-color:initial;border-color:transparent}@media(hover:hover){.btn--default.btn--ghost:hover,.btn--ghost:hover{color:#000;background-color:initial;border-color:#ccc;z-index:2}}.btn--default.btn--ghost.is-active,.btn--default.btn--ghost:active,.btn--ghost.is-active,.btn--ghost:active{color:#f16e00;background-color:initial;border-color:#ccc;z-index:2}.btn--default.btn--ghost[aria-disabled=true],.btn--default.btn--ghost[disabled],.btn--ghost[aria-disabled=true],.btn--ghost[disabled]{color:#666;background-color:initial;border-color:transparent}.btn--square{display:inline-flex;flex:0 0 auto;flex-flow:row;justify-content:center;align-items:center;padding:0;line-height:0}.btn--square.btn{width:2.5rem;height:2.5rem}.btn--square.btn--small{width:1.875rem;height:1.875rem}.btn--square.btn--large{width:3.125rem;height:3.125rem}.btn__icon-left{backface-visibility:hidden;margin-left:-.25em;margin-right:.5em}.btn__icon-right{backface-visibility:hidden;margin-left:.5em;margin-right:-.25em}.btn--large .icon--large{margin-top:-.1875rem;margin-bottom:-.1875rem}.buttons{display:flex;flex-flow:row wrap;max-width:calc(100% - .625rem);margin:-.625rem -.625rem 1.25rem 0}.buttons .btn,.buttons .btn:last-child,.buttons .link,.buttons .link:last-child{margin:.625rem .625rem 0 0}@media screen and (max-width:479.98px){.buttons--stack-on-xs{flex-flow:column;max-width:100%;margin:0 0 .625rem}.buttons--stack-on-xs .btn:last-child,.buttons--stack-on-xs .btn:not(:last-child),.buttons--stack-on-xs .link:last-child,.buttons--stack-on-xs .link:not(:last-child){margin-right:0;margin-bottom:0}}.modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:999;display:flex;align-items:center;justify-content:center}.modal[aria-hidden=true]{display:none}.modal__overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:rgba(0,0,0,.4);width:0;height:0;z-index:500;opacity:0;transform:scale(1.1);transition:opacity .4s ease 0s,transform .4s ease 0s;backface-visibility:hidden}.modal.is-active .modal__overlay{width:100%!important;height:100%!important;opacity:1;transform:scale(1);transition-delay:0s}.modal__dialog{display:flex;flex-flow:column;overflow:auto;-webkit-overflow-scrolling:touch;height:auto;background-color:#fff;z-index:501;max-height:calc(100% - 1.25rem);width:calc(100% - 1.25rem)}@media screen and (min-width:480px){.modal__dialog{max-height:calc(100% - 2.5rem);width:calc(100% - 2.5rem)}}.modal__dialog{max-width:43.75rem}.modal__dialog--small{max-width:25rem}.modal__dialog--large{max-width:62.5rem}.modal__header{z-index:1000;display:flex;flex-direction:column;justify-content:flex-end;flex-shrink:0;position:sticky;top:0;padding-bottom:.1875rem;background:#fff}.modal__header>:last-child{margin-bottom:0}.modal__dialog--small .modal__header,.modal__dialog .modal__header{padding:1.25rem}@media screen and (min-width:768px){.modal__dialog .modal__header{padding:1.875rem}}.modal__close{position:absolute;top:1.25rem;right:1.25rem;margin-bottom:0!important}@media screen and (max-width:479.98px){.modal__close{top:.625rem;right:.625rem}}.modal__body{width:100%;flex:0 0 auto}.modal__body>:last-child{margin-bottom:0}.modal__dialog--small .modal__body{padding-left:1.25rem;padding-right:1.25rem}.modal__dialog--small .modal__body:not(.modal__body--colorful){padding-bottom:1.25rem}.modal__dialog--small .modal__body:has(+.modal__footer--sticky){padding-bottom:0}.modal__dialog .modal__body{padding-left:1.25rem;padding-right:1.25rem}@media screen and (min-width:768px){.modal__dialog .modal__body{padding-left:1.875rem;padding-right:1.875rem}}.modal__dialog .modal__body:not(.modal__body--colorful){padding-bottom:1.25rem}@media screen and (min-width:768px){.modal__dialog .modal__body:not(.modal__body--colorful){padding-bottom:1.875rem}}.modal__dialog .modal__body:has(+.modal__footer--sticky){padding-bottom:0}@media screen and (min-width:768px){.modal__dialog .modal__body:has(+.modal__footer--sticky){padding-bottom:0}}.modal__dialog--small .modal__body--colorful{padding-top:1.25rem;padding-bottom:1.25rem}.modal__dialog--small .modal__body--colorful+.modal__footer--sticky{margin-top:0}.modal__dialog .modal__body--colorful{padding-top:1.25rem;padding-bottom:1.25rem}@media screen and (min-width:768px){.modal__dialog .modal__body--colorful{padding-top:1.875rem;padding-bottom:1.875rem}}.modal__dialog--large .modal__body--colorful+.modal__footer--sticky,.modal__dialog .modal__body--colorful+.modal__footer--sticky{margin-top:0}.modal__dialog--full-height .modal__body{flex:1 1}@media screen and (max-width:479.98px){.modal__dialog--full-height{height:calc(100% - 2.5rem)}}.modal__footer{width:100%;flex:0 0 auto}.modal__footer>:last-child{margin-bottom:0}.modal__dialog--small .modal__footer,.modal__dialog .modal__footer{padding:0 1.25rem 1.25rem}.modal__body--colorful+.modal__footer{padding:1.25rem!important}@media screen and (min-width:768px){.modal__dialog .modal__footer{padding:0 1.875rem 1.875rem}.modal__body--colorful+.modal__footer{padding:1.875rem!important}}@media screen and (min-height:500px){.modal__footer--sticky{position:sticky;bottom:0;background-color:#fff}}.modal__footer--sticky{padding:1.25rem!important}@media screen and (min-width:768px){.modal__footer--sticky{padding:1.875rem!important}}
 /*# sourceMappingURL=style.css.map */

package/build/components/Modal/style.css.map

@@ -1 +1 @@
-{"version":3,"sources":["style.scss","mixins.scss","config.scss","../../../styles/tokens/breakpoint.scss","../../../styles/tools/generate.scss","../../../styles/tokens/color.scss"],"names":[],"mappings":"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","file":"style.css","sourcesContent":["@use \"sass:map\";\n@use '../../../styles/tools/generate';\n@use '../../../styles/tokens/breakpoint';\n@use './config';\n@use './mixins';\n\n.modal {\n  @include mixins.position;\n  @include mixins.modal;\n\n  &[aria-hidden='true'] {\n    @include mixins.hide;\n  }\n}\n\n.modal__overlay {\n  @include mixins.position;\n  @include mixins.overlay;\n\n  .modal.is-active & {\n    @include mixins.overlay-active;\n  }\n}\n\n.modal__dialog {\n  @include mixins.dialog;\n\n  @each $size, $props in config.$dialog-sizes {\n    &#{generate.variant-name($size)} {\n      @include mixins.dialog-width($size);\n    }\n  }\n}\n\n.modal__header {\n  @include mixins.header;\n\n  @each $size, $props in config.$spacing {\n    .modal__dialog#{generate.variant-name($size)} & {\n      @include mixins.header-spacing($size);\n    }\n  }\n}\n\n.modal__close {\n  @include mixins.close;\n}\n\n.modal__body {\n  @include mixins.body();\n\n  @each $size, $props in config.$spacing {\n    .modal__dialog#{generate.variant-name($size)} & {\n      @include mixins.body-spacing($size);\n    }\n  }\n\n  &--colorful {\n    @each $size, $props in config.$spacing {\n      .modal__dialog#{generate.variant-name($size)} & {\n        @include mixins.colorful-body($size);\n      }\n    }\n  }\n}\n\n.modal__dialog--full-height .modal__body {\n  flex: 1;\n}\n\n@include breakpoint.get('xs', 'down') {\n  .modal__dialog--full-height {\n    height: calc(100% - 2.5rem);\n  }\n}\n\n.modal__footer {\n  @include mixins.footer-base();\n\n  @each $size, $props in config.$spacing {\n    .modal__dialog#{generate.variant-name($size)} & {\n      @include mixins.footer-spacing($size);\n    }\n  }\n\n  &--sticky {\n    @include mixins.sticky-footer();\n\n    $spacing: map.get(config.$spacing, 'default');\n\n    @each $breakpoint, $space in $spacing {\n      @include breakpoint.get($breakpoint) {\n        padding: $space !important;\n      }\n    }\n  }\n}\n","@use 'sass:map';\n@use '../../../styles/tokens/breakpoint';\n@use '../../../styles/tokens/space';\n@use '../../../styles/tokens/color';\n@use '../../../styles/tools/convert';\n@use '../../../styles/tools/generate';\n@use './config';\n\n@mixin hide {\n  display: none;\n}\n\n@mixin modal {\n  z-index: 999;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n@mixin position {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n}\n\n@mixin overlay($settings: config.$overlay) {\n  @include generate.css-map($settings);\n\n  width: 0;\n  height: 0;\n  z-index: config.$overlay-z-index;\n  opacity: 0;\n  transform: scale(1.1, 1.1);\n  transition:\n    opacity config.$overlay-e,\n    transform config.$overlay-e;\n  backface-visibility: hidden;\n}\n\n@mixin overlay-active {\n  width: 100% !important;\n  height: 100% !important;\n  opacity: 1;\n  transform: scale(1, 1);\n  transition-delay: 0s;\n}\n\n@mixin dialog($settings: config.$dialog, $offset: config.$dialog-offset) {\n  display: flex;\n  flex-flow: column;\n  overflow: auto;\n  -webkit-overflow-scrolling: touch;\n\n  @include generate.css-map($settings);\n\n  @each $breakpoint, $value in $offset {\n    @include breakpoint.get($breakpoint) {\n      max-height: calc(100% - #{$value * 2});\n      width: calc(100% - #{$value * 2});\n    }\n  }\n}\n\n@mixin dialog-width($size, $sizes: config.$dialog-sizes) {\n  $dialog-size: map.get(config.$dialog-sizes, $size);\n\n  max-width: $dialog-size;\n}\n\n@mixin body() {\n  width: 100%;\n  flex: 0 0 auto;\n\n  > *:last-child {\n    margin-bottom: 0;\n  }\n}\n\n@mixin header {\n  z-index: 1000;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  flex-shrink: 0;\n  position: sticky;\n  top: 0;\n  padding-bottom: convert.to-rem(3px); // body starts 10px from close icon edge\n  background: #fff;\n\n  > *:last-child {\n    margin-bottom: 0;\n  }\n}\n\n@mixin close {\n  position: absolute;\n  top: convert.to-rem(20px);\n  right: convert.to-rem(20px);\n  margin-bottom: 0 !important;\n\n  @include breakpoint.get('xs', 'down') {\n    top: convert.to-rem(10px);\n    right: convert.to-rem(10px);\n  }\n}\n\n@mixin header-spacing($size, $sizes: config.$spacing) {\n  $spacing: map.get($sizes, $size);\n\n  @each $breakpoint, $space in $spacing {\n    @include breakpoint.get($breakpoint) {\n      padding: $space;\n    }\n  }\n}\n\n@mixin body-spacing($size, $sizes: config.$spacing) {\n  $spacing: map.get($sizes, $size);\n\n  @each $breakpoint, $space in $spacing {\n    @include breakpoint.get($breakpoint) {\n      padding-left: $space;\n      padding-right: $space;\n    }\n  }\n\n  &:not(.modal__body--colorful) {\n    @each $breakpoint, $space in $spacing {\n      @include breakpoint.get($breakpoint) {\n        padding-bottom: $space;\n      }\n    }\n  }\n\n  &:has(+ .modal__footer--sticky) {\n    @each $breakpoint, $space in $spacing {\n      @include breakpoint.get($breakpoint) {\n        padding-bottom: 0;\n      }\n    }\n  }\n}\n\n@mixin colorful-body(\n  $size,\n  $sizes: config.$spacing,\n  $sticky-footer-selector: '.modal__footer--sticky'\n) {\n  $spacing: map.get($sizes, $size);\n\n  @each $breakpoint, $space in $spacing {\n    @include breakpoint.get($breakpoint) {\n      padding-top: $space;\n      padding-bottom: $space;\n    }\n  }\n\n  + #{$sticky-footer-selector} {\n    margin-top: 0;\n  }\n}\n\n@mixin footer-base() {\n  width: 100%;\n  flex: 0 0 auto;\n\n  > *:last-child {\n    margin-bottom: 0;\n  }\n}\n\n@mixin footer-spacing($size, $sizes: config.$spacing) {\n  $spacing: map.get($sizes, $size);\n\n  @each $breakpoint, $space in $spacing {\n    @include breakpoint.get($breakpoint) {\n      padding-top: 0;\n      padding-right: $space;\n      padding-bottom: $space;\n      padding-left: $space;\n\n      @at-root {\n        .modal__body--colorful + .modal__footer {\n          padding: $space !important;\n        }\n      }\n    }\n  }\n}\n\n@mixin sticky-footer() {\n  @media screen and (min-height: 500px) {\n    position: sticky;\n    bottom: 0;\n    background-color: color.$white;\n  }\n}\n","@use '../../../styles/tokens/space';\n@use '../../../styles/tokens/color';\n@use '../../../styles/tools/convert';\n\n$overlay-bg-color: rgba(0, 0, 0, 0.4) !default;\n$overlay-z-index: 500 !default;\n$overlay-e: 0.4s ease 0s !default;\n\n$overlay: (\n  background-color: $overlay-bg-color,\n);\n\n$dialog-offset: space.get() * 2;\n\n$dialog: (\n  height: auto,\n  background-color: color.$white,\n  z-index: $overlay-z-index + 1,\n);\n\n$dialog-offset: (\n  default: space.get('small'),\n  sm: space.get(),\n);\n\n$dialog-sizes: (\n  default: convert.to-rem(700px),\n  small: convert.to-rem(400px),\n  large: convert.to-rem(1000px),\n);\n\n$spacing: (\n  small: (\n    default: space.get(),\n  ),\n  default: (\n    default: space.get(),\n    md: space.get('large'),\n  ),\n  large: (),\n  // same as default,\n);\n","@use \"sass:list\";\n@use \"sass:meta\";\n@use 'sass:map' as sassmap;\n@use '../tools/map';\n\n$map: (\n  xs: 0,\n  sm: 480px,\n  md: 768px,\n  lg: 992px,\n  xl: 1240px,\n  xxl: 1380px,\n);\n\n@mixin get( $breakpoint, $param: false) {\n  @if (not sassmap.has-key($map, $breakpoint) and $breakpoint != 'default') {\n    @warn 'Breakpoint \"#{$breakpoint}\" is not defined.';\n\n    @debug 'Available breakpoints:'; // stylelint-disable-line at-rule-disallowed-list\n    @debug $map; // stylelint-disable-line at-rule-disallowed-list\n  }\n\n  @if (\n    ($breakpoint == list.nth(sassmap.keys($map), 1) and not $param) or\n    ( not $breakpoint ) or\n    ( $breakpoint == 'default' )\n  ) {\n    @content;\n  } @else if not $param {\n    // no param, just a standard mobile first media query\n    @if sassmap.has-key( $map, $breakpoint ) {\n      // breakpoint is in breakpoint map, let's use stored value\n      @media screen and (min-width: sassmap.get($map, $breakpoint)) { @content; };\n    } @else {\n      // breakpoint is not in breakpoint map, let's use custom value\n      @media screen and (min-width: $breakpoint) { @content; };\n    }\n  } @else if (\n    $param == 'down' and\n    map.next($map, $breakpoint)\n  ) {\n    @media screen and (max-width: map.next($map, $breakpoint) - 0.02px) {\n      @content;\n    }\n  } @else if (\n    $param == 'down' and\n    not sassmap.has-key($map, $breakpoint)\n  ) {\n    @media screen and (max-width: $breakpoint) { @content; };\n  } @else if (\n    $param == 'only' and\n    map.next($map, $breakpoint)\n  ) {\n    @media screen and\n      (min-width: sassmap.get($map, $breakpoint)) and\n      (max-width: map.next($map, $breakpoint) - 0.02px) { @content; };\n  } @else if (\n    sassmap.has-key( $map, $param) and\n    sassmap.has-key( $map, $breakpoint)\n  ) {\n    @media screen and\n      (min-width: sassmap.get($map, $breakpoint)) and\n      (max-width: sassmap.get($map, $param) - 0.02px) { @content; };\n  } @else if (\n    $param == 'downfrom' and\n    sassmap.get($map, $breakpoint) > 0 and\n    $breakpoint != 'xs'\n  ) {\n    @media screen and (max-width: sassmap.get($map, $breakpoint) - 0.02px) {\n      @content;\n    } // -1\n  } @else if (meta.type-of($param) == 'number') {\n    @if sassmap.has-key($map, $breakpoint) {\n      // breakpoint is in breakpoint map\n      @media screen and\n        (min-width: sassmap.get($map, $breakpoint)) and\n        (max-width: $param) { @content; };\n    } @else {\n      // breakpoint is not in breakpoint map, let's use custom value\n      @media screen and (min-width: $breakpoint) and (max-width: $param) { @content; }\n    }\n  } @else if (\n    not ($breakpoint == list.nth(sassmap.keys($map), -1) and $param == 'down') and\n    not ($breakpoint == list.nth(sassmap.keys($map), -1) and $param == 'only') and\n    not ($breakpoint == list.nth(sassmap.keys($map), 1) and $param == 'downfrom')\n  ) {\n    // do nothing on known edge cases. we just dont generate any code.\n    @warn 'Breakpoint is not configured properly #{$breakpoint}, #{$param}';\n  }\n}\n\n@mixin each() {\n  @each $breakpoint, $size in $map {\n    @include get($breakpoint) {\n      @content($breakpoint);\n    }\n  }\n}\n","@use '../tokens/breakpoint';\n@use './map' as *;\n\n/// Get css propeties from map\n///\n/// @param {Map} $map - Map\n/// @param {Arglist} $keys - Keys to fetch\n///\n/// @example\n/// $map: (\n///   background-color: #fff,\n///   color: #000\n/// );\n///\n/// .example {\n///   @include css-map($map);\n///  }\n///\n/// Output:\n/// .example {\n///   background-color: #fff;\n///   color: #000;\n/// }\n@mixin css-map($_map, $keys...) {\n  $map: if($keys, map-deep-get($_map, $keys...), $_map);\n\n  @each $prop, $value in $map {\n    #{$prop}: #{$value};\n  }\n}\n\n/// Get responsive css propeties from map\n///\n/// @param {Map} $map - Map\n/// @param {Arglist} $keys - Keys to fetch\n///\n/// @example\n/// $map: (\n///   default: (\n///     color: red,\n///   ),\n///   xl: (\n///     color: blue,\n///   ),\n/// );\n///\n/// .example {\n///   @include responsive-css-map($map);\n///  }\n///\n/// Output:\n/// .example {\n///   color: red;\n///   @media only screen and (min-width: 1240px) {\n///     color: blue;\n///   }\n/// }\n@mixin responsive-css-map($map) {\n  @each $breakpoint, $props in $map {\n    @include breakpoint.get($breakpoint) {\n      @include css-map($props);\n    }\n  }\n}\n\n/// Get variants of elemnt from map\n///\n/// @param {Map} $map - map\n/// @param {Map} $className - class name of element\n/// @param {Map} $classSuffix - suffix for class name of element\n@mixin variants($map, $className: '', $classSuffix: '') {\n  @each $variant, $props in $map {\n    #{if(&, \"&\", \"\")}#{$className + variant-name($variant) + $classSuffix} {\n      @include css-map($props);\n    }\n  }\n}\n\n/// Get responsive variants of elemnt from map\n///\n/// @param {Map} $map - map\n/// @param {Map} $className - class name of element\n/// @param {Map} $classSuffix - suffix for class name of element\n@mixin responsive-variants($map, $className: '', $classSuffix: '') {\n  @each $breakpoint, $props in $map {\n    @include breakpoint.get($breakpoint) {\n      @include variants($props, $className, $classSuffix);\n    }\n  }\n}\n\n/// Get prefixed variant name\n/// @param {String} $name - Variant name\n/// @return {String} - Return a prefixed variant name or empty string, for default variants\n/// @example scss\n///   variant-name('primary')\n/// // -primary\n///   variant-name('default')\n///\n@function variant-name($name, $prefix: '--', $suffix: '') {\n  @if not $name or $name == default or $name == xs {\n    @return '';\n  }\n\n  @return #{$prefix + $name + $suffix};\n}\n","// core (brand)\n$orange: #ff7900;\n$orange-dark: #f16e00;\n$black: #000;\n$white: #fff;\n\n// supporting color\n$blue: #4bb4e6;\n$green: #50be87;\n$pink: #ffb4e6;\n$violet: #a885d8;\n$yellow: #ffd200;\n$yellow-lighter: #fff6b6;\n$red: #ff4d4d;\n\n// functional\n$gray-300: #eee;\n$gray-400: #ddd;\n$gray-500: #ccc;\n$gray-600: #999;\n$gray-700: #666;\n$gray-800: #595959;\n$gray-900: #333;\n$success: #32c832;\n$danger: #cd3c14;\n$info: #527edb;\n$warning: #fc0;\n"]}
+{"version":3,"sources":["style.scss","mixins.scss","config.scss","../../../styles/tokens/breakpoint.scss","../../../styles/tools/generate.scss","../../../styles/tokens/color.scss"],"names":[],"mappings":"AAIA,MCCE,iBAAA,CACA,SAAA,CACA,UAAA,CACA,0BAAA,CAOM,aACE,UCbF,CDcE,WCdF,CDYA,cACE,YCbF,CDcE,aCdF,CDYA,aACE,UCbF,CDcE,WCdF,CDYA,cACE,YCbF,CDcE,aCdF,CDYA,eACE,UCbF,CDcE,WCdF,CDYA,YACE,YCbF,CDcE,aCdF,CC6BF,oCFjBE,cACE,UCbF,CDcE,WCdF,CDYA,eACE,UCbF,CDcE,WCdF,CDYA,YACE,UCbF,CDcE,WCdF,CAAA,CDuBJ,YACE,aCRG,CDOL,eACE,aCRG,CDOL,eACE,UCRG,CDOL,cACE,aCRG,CDOL,cACE,aCRG,CFTT,IACE,mBAAA,CAPF,KIuBI,4BAAA,CAAA,kBAAA,CAAA,eAAA,CAAA,eAAA,CAAA,uBAAA,CAAA,sCAAA,CAAA,uDAAA,CHdF,mBAAA,CACA,kBAAA,CACA,sBAAA,CACA,iBAAA,CACA,oBAAA,CACA,gBAAA,CACA,sBAAA,CACA,cAAA,CAQA,2BGDE,wBAAA,CHKA,SAAA,CAGF,wCAIE,kBAAA,CDnCJ,KCyCE,qBAAA,CAEA,wBACE,oBAAA,CDrCF,KIgBE,iBAAA,CAAA,wBAAA,CJhBF,YIgBE,mBAAA,CAAA,uBAAA,CJhBF,YIgBE,mBAAA,CAAA,uBAAA,CJRF,iCIQE,UAAA,CAAA,wBAAA,CAAA,iBAAA,CHgCF,oBACE,6CGjCA,UAAA,CAAA,qBAAA,CAAA,wBAAA,CHoCE,SAAA,CAAA,CAIJ,oGGxCE,UAAA,CAAA,kBAAA,CAAA,wBAAA,CH4CA,SAAA,CAGF,8HG/CE,UAAA,CAAA,iBAAA,CAAA,wBAAA,CJRF,mDIQE,UAAA,CAAA,wBAAA,CAAA,wBAAA,CHgCF,oBACE,+DGjCA,UAAA,CAAA,qBAAA,CAAA,wBAAA,CHoCE,SAAA,CAAA,CAIJ,wIGxCE,UAAA,CAAA,wBAAA,CAAA,iBAAA,CH4CA,SAAA,CAGF,kKG/CE,UAAA,CAAA,qBAAA,CAAA,iBAAA,CJRF,6CIQE,UAAA,CAAA,qBAAA,CAAA,wBAAA,CHgCF,oBACE,yDGjCA,UAAA,CAAA,wBAAA,CAAA,iBAAA,CHoCE,SAAA,CAAA,CAIJ,4HGxCE,UAAA,CAAA,wBAAA,CAAA,wBAAA,CH4CA,SAAA,CAGF,sJG/CE,UAAA,CAAA,qBAAA,CAAA,iBAAA,CJRF,+CIQE,UAAA,CAAA,wBAAA,CAAA,wBAAA,CHgCF,oBACE,2DGjCA,UAAA,CAAA,wBAAA,CAAA,iBAAA,CHoCE,SAAA,CAAA,CAIJ,gIGxCE,aAAA,CAAA,wBAAA,CAAA,iBAAA,CH4CA,SAAA,CAGF,0JG/CE,UAAA,CAAA,wBAAA,CAAA,wBAAA,CAAA,uBAAA,UAAA,CAAA,wBAAA,CAAA,iBAAA,CHgCF,oBACE,mCGjCA,UAAA,CAAA,qBAAA,CAAA,wBAAA,CHoCE,SAAA,CAAA,CAIJ,gFGxCE,UAAA,CAAA,wBAAA,CAAA,wBAAA,CH4CA,SAAA,CAGF,0GG/CE,UAAA,CAAA,wBAAA,CAAA,iBAAA,CAAA,yCAAA,UAAA,CAAA,wBAAA,CAAA,wBAAA,CHgCF,oBACE,qDAGE,SAAA,CAAA,CAIJ,oHGxCE,UAAA,CAAA,wBAAA,CAAA,iBAAA,CH4CA,SAAA,CAGF,8IG/CE,UAAA,CAAA,qBAAA,CAAA,iBAAA,CAAA,mCAAA,UAAA,CAAA,qBAAA,CAAA,wBAAA,CHgCF,oBACE,+CGjCA,UAAA,CAAA,wBAAA,CAAA,iBAAA,CHoCE,SAAA,CAAA,CAIJ,wGGxCE,UAAA,CAAA,wBAAA,CAAA,wBAAA,CH4CA,SAAA,CAGF,kIG/CE,UAAA,CAAA,qBAAA,CAAA,iBAAA,CAAA,qCAAA,UAAA,CAAA,wBAAA,CAAA,wBAAA,CHgCF,oBACE,iDGjCA,UAAA,CAAA,wBAAA,CAAA,iBAAA,CHoCE,SAAA,CAAA,CAIJ,4GGxCE,aAAA,CAAA,wBAAA,CAAA,iBAAA,CH4CA,SAAA,CAGF,sIG/CE,UAAA,CAAA,wBAAA,CAAA,wBAAA,CJMJ,aCoDE,mBAAA,CACA,aAAA,CACA,aAAA,CACA,sBAAA,CACA,kBAAA,CACA,SAAA,CACA,aAAA,CDtDE,iBC4DF,YAFO,CAGP,aAHO,CD1DL,wBC4DF,cAFO,CAGP,eAHO,CD1DL,wBC4DF,cAFO,CAGP,eAHO,CDpDT,gBC2DE,0BAAA,CAGE,kBC+IoB,CD9IpB,iBC+IoB,CF1MxB,iBCuDE,0BAAA,CAQE,gBC2IoB,CD1IpB,mBCyIoB,CFrMxB,yBCkEE,oBAAA,CACA,uBAAA,CDnHF,SCEE,YAAA,CACA,kBAAA,CACA,8BAAA,CACA,kCAAA,CAEA,gFAIE,0BAAA,CE2BA,uCHnCF,sBCcE,gBAAA,CACA,cAAA,CACA,kBAAA,CAEA,sKAIE,cAAA,CACA,eAAA,CAAA,CDvBN,OCcE,cAAA,CACA,KAAA,CACA,OAAA,CACA,QAAA,CACA,MAAA,CAXA,WAAA,CACA,YAAA,CACA,kBAAA,CACA,sBAAA,CDNA,yBCDA,YAAA,CDMF,gBCKE,cAAA,CACA,KAAA,CACA,OAAA,CACA,QAAA,CACA,MAAA,CGGE,+BAAA,CHGF,OAAA,CACA,QAAA,CACA,WC3BgB,CD4BhB,SAAA,CACA,oBAAA,CACA,oDACE,CAEF,0BAAA,CDnBA,iCCuBA,oBAAA,CACA,qBAAA,CACA,SAAA,CACA,kBAAA,CACA,mBAAA,CDtBF,eC0BE,YAAA,CACA,gBAAA,CACA,aAAA,CACA,gCAAA,CG1BE,WAAA,CAAA,qBAAA,CAAA,WAAA,CHgCE,+BAAA,CACA,0BAAA,CE5BA,oCHRN,eCmCM,8BAAA,CACA,yBAAA,CAAA,CDhCF,eCwCF,kBAFc,CDtCZ,sBCwCF,eAFc,CDtCZ,sBCwCF,iBAFc,CDhChB,eC+CE,YAAA,CACA,YAAA,CACA,qBAAA,CACA,wBAAA,CACA,aAAA,CACA,eAAA,CACA,KAAA,CACA,uBAAA,CACA,eAAA,CAEA,2BACE,eAAA,CDtDA,mEC2EE,eAJM,CE7EN,oCHMF,8BC2EE,gBAJM,CAAA,CDjEZ,cCqDE,iBAAA,CACA,WAAA,CACA,aAAA,CACA,yBAAA,CE3DE,uCHGJ,cC2DI,WAAA,CACA,aAAA,CAAA,CDxDJ,aCwBE,UAAA,CACA,aAAA,CAEA,yBACE,eAAA,CDxBA,mCCuEE,oBAJM,CAKN,qBALM,CASV,+DAGM,sBAZI,CAiBV,gEAGM,gBAAA,CDvFJ,4BCuEE,oBAJM,CAKN,qBALM,CEvFN,oCHoBF,4BCuEE,qBAJM,CAKN,sBALM,CAAA,CASV,wDAGM,sBAZI,CEvFN,oCFgGJ,wDAGM,uBAZI,CAAA,CAiBV,yDAGM,gBAAA,CE3GF,oCFwGJ,yDAGM,gBAAA,CAAA,CDhFF,6CC+FA,mBAJM,CAKN,sBALM,CASV,oEACE,YAAA,CDrGE,sCC+FA,mBAJM,CAKN,sBALM,CEtHN,oCH2BA,sCC+FA,oBAJM,CAKN,uBALM,CAAA,CASV,iIACE,YAAA,CD9FJ,yCACE,QAAA,CG1BE,uCH8BF,4BACE,0BAAA,CAAA,CAIJ,eCyFE,UAAA,CACA,aAAA,CAEA,2BACE,eAAA,CDzFA,mECqGE,yBAPM,CAUJ,sCACE,yBAAA,CEzJJ,oCHgDF,8BCqGE,2BAPM,CAUJ,sCACE,0BAAA,CAAA,CAQR,qCD5GA,uBC6GE,eAAA,CACA,QAAA,CACA,qBIhMI,CAAA,CLiFN,uBAOM,yBAAA,CG5DF,oCHqDJ,uBAOM,0BAAA,CAAA","file":"style.css","sourcesContent":["@use \"sass:map\";\n@use '../../../styles/tools/generate';\n@use '../../../styles/tokens/breakpoint';\n@use './config';\n@use './mixins';\n\n.modal {\n  @include mixins.position;\n  @include mixins.modal;\n\n  &[aria-hidden='true'] {\n    @include mixins.hide;\n  }\n}\n\n.modal__overlay {\n  @include mixins.position;\n  @include mixins.overlay;\n\n  .modal.is-active & {\n    @include mixins.overlay-active;\n  }\n}\n\n.modal__dialog {\n  @include mixins.dialog;\n\n  @each $size, $props in config.$dialog-sizes {\n    &#{generate.variant-name($size)} {\n      @include mixins.dialog-width($size);\n    }\n  }\n}\n\n.modal__header {\n  @include mixins.header;\n\n  @each $size, $props in config.$spacing {\n    .modal__dialog#{generate.variant-name($size)} & {\n      @include mixins.header-spacing($size);\n    }\n  }\n}\n\n.modal__close {\n  @include mixins.close;\n}\n\n.modal__body {\n  @include mixins.body();\n\n  @each $size, $props in config.$spacing {\n    .modal__dialog#{generate.variant-name($size)} & {\n      @include mixins.body-spacing($size);\n    }\n  }\n\n  &--colorful {\n    @each $size, $props in config.$spacing {\n      .modal__dialog#{generate.variant-name($size)} & {\n        @include mixins.colorful-body($size);\n      }\n    }\n  }\n}\n\n.modal__dialog--full-height .modal__body {\n  flex: 1;\n}\n\n@include breakpoint.get('xs', 'down') {\n  .modal__dialog--full-height {\n    height: calc(100% - 2.5rem);\n  }\n}\n\n.modal__footer {\n  @include mixins.footer-base();\n\n  @each $size, $props in config.$spacing {\n    .modal__dialog#{generate.variant-name($size)} & {\n      @include mixins.footer-spacing($size);\n    }\n  }\n\n  &--sticky {\n    @include mixins.sticky-footer();\n\n    $spacing: map.get(config.$spacing, 'default');\n\n    @each $breakpoint, $space in $spacing {\n      @include breakpoint.get($breakpoint) {\n        padding: $space !important;\n      }\n    }\n  }\n}\n","@use 'sass:map';\n@use '../../../styles/tokens/breakpoint';\n@use '../../../styles/tokens/space';\n@use '../../../styles/tokens/color';\n@use '../../../styles/tools/convert';\n@use '../../../styles/tools/generate';\n@use './config';\n\n@mixin hide {\n  display: none;\n}\n\n@mixin modal {\n  z-index: 999;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n@mixin position {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n}\n\n@mixin overlay($settings: config.$overlay) {\n  @include generate.css-map($settings);\n\n  width: 0;\n  height: 0;\n  z-index: config.$overlay-z-index;\n  opacity: 0;\n  transform: scale(1.1, 1.1);\n  transition:\n    opacity config.$overlay-e,\n    transform config.$overlay-e;\n  backface-visibility: hidden;\n}\n\n@mixin overlay-active {\n  width: 100% !important;\n  height: 100% !important;\n  opacity: 1;\n  transform: scale(1, 1);\n  transition-delay: 0s;\n}\n\n@mixin dialog($settings: config.$dialog, $offset: config.$dialog-offset) {\n  display: flex;\n  flex-flow: column;\n  overflow: auto;\n  -webkit-overflow-scrolling: touch;\n\n  @include generate.css-map($settings);\n\n  @each $breakpoint, $value in $offset {\n    @include breakpoint.get($breakpoint) {\n      max-height: calc(100% - #{$value * 2});\n      width: calc(100% - #{$value * 2});\n    }\n  }\n}\n\n@mixin dialog-width($size, $sizes: config.$dialog-sizes) {\n  $dialog-size: map.get(config.$dialog-sizes, $size);\n\n  max-width: $dialog-size;\n}\n\n@mixin body() {\n  width: 100%;\n  flex: 0 0 auto;\n\n  > *:last-child {\n    margin-bottom: 0;\n  }\n}\n\n@mixin header {\n  z-index: 1000;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  flex-shrink: 0;\n  position: sticky;\n  top: 0;\n  padding-bottom: convert.to-rem(3px); // body starts 10px from close icon edge\n  background: #fff;\n\n  > *:last-child {\n    margin-bottom: 0;\n  }\n}\n\n@mixin close {\n  position: absolute;\n  top: convert.to-rem(20px);\n  right: convert.to-rem(20px);\n  margin-bottom: 0 !important;\n\n  @include breakpoint.get('xs', 'down') {\n    top: convert.to-rem(10px);\n    right: convert.to-rem(10px);\n  }\n}\n\n@mixin header-spacing($size, $sizes: config.$spacing) {\n  $spacing: map.get($sizes, $size);\n\n  @each $breakpoint, $space in $spacing {\n    @include breakpoint.get($breakpoint) {\n      padding: $space;\n    }\n  }\n}\n\n@mixin body-spacing($size, $sizes: config.$spacing) {\n  $spacing: map.get($sizes, $size);\n\n  @each $breakpoint, $space in $spacing {\n    @include breakpoint.get($breakpoint) {\n      padding-left: $space;\n      padding-right: $space;\n    }\n  }\n\n  &:not(.modal__body--colorful) {\n    @each $breakpoint, $space in $spacing {\n      @include breakpoint.get($breakpoint) {\n        padding-bottom: $space;\n      }\n    }\n  }\n\n  &:has(+ .modal__footer--sticky) {\n    @each $breakpoint, $space in $spacing {\n      @include breakpoint.get($breakpoint) {\n        padding-bottom: 0;\n      }\n    }\n  }\n}\n\n@mixin colorful-body(\n  $size,\n  $sizes: config.$spacing,\n  $sticky-footer-selector: '.modal__footer--sticky'\n) {\n  $spacing: map.get($sizes, $size);\n\n  @each $breakpoint, $space in $spacing {\n    @include breakpoint.get($breakpoint) {\n      padding-top: $space;\n      padding-bottom: $space;\n    }\n  }\n\n  + #{$sticky-footer-selector} {\n    margin-top: 0;\n  }\n}\n\n@mixin footer-base() {\n  width: 100%;\n  flex: 0 0 auto;\n\n  > *:last-child {\n    margin-bottom: 0;\n  }\n}\n\n@mixin footer-spacing($size, $sizes: config.$spacing) {\n  $spacing: map.get($sizes, $size);\n\n  @each $breakpoint, $space in $spacing {\n    @include breakpoint.get($breakpoint) {\n      padding-top: 0;\n      padding-right: $space;\n      padding-bottom: $space;\n      padding-left: $space;\n\n      @at-root {\n        .modal__body--colorful + .modal__footer {\n          padding: $space !important;\n        }\n      }\n    }\n  }\n}\n\n@mixin sticky-footer() {\n  @media screen and (min-height: 500px) {\n    position: sticky;\n    bottom: 0;\n    background-color: color.$white;\n  }\n}\n","@use '../../../styles/tokens/space';\n@use '../../../styles/tokens/color';\n@use '../../../styles/tools/convert';\n\n$overlay-bg-color: rgba(0, 0, 0, 0.4) !default;\n$overlay-z-index: 500 !default;\n$overlay-e: 0.4s ease 0s !default;\n\n$overlay: (\n  background-color: $overlay-bg-color,\n);\n\n$dialog-offset: space.get() * 2;\n\n$dialog: (\n  height: auto,\n  background-color: color.$white,\n  z-index: $overlay-z-index + 1,\n);\n\n$dialog-offset: (\n  default: space.get('small'),\n  sm: space.get(),\n);\n\n$dialog-sizes: (\n  default: convert.to-rem(700px),\n  small: convert.to-rem(400px),\n  large: convert.to-rem(1000px),\n);\n\n$spacing: (\n  small: (\n    default: space.get(),\n  ),\n  default: (\n    default: space.get(),\n    md: space.get('large'),\n  ),\n  large: (),\n  // same as default,\n);\n","@use \"sass:list\";\n@use \"sass:meta\";\n@use 'sass:map' as sassmap;\n@use '../tools/map';\n\n$map: (\n  xs: 0,\n  sm: 480px,\n  md: 768px,\n  lg: 992px,\n  xl: 1240px,\n  xxl: 1380px,\n);\n\n@mixin get( $breakpoint, $param: false) {\n  @if (not sassmap.has-key($map, $breakpoint) and $breakpoint != 'default') {\n    @warn 'Breakpoint \"#{$breakpoint}\" is not defined.';\n\n    @debug 'Available breakpoints:'; // stylelint-disable-line at-rule-disallowed-list\n    @debug $map; // stylelint-disable-line at-rule-disallowed-list\n  }\n\n  @if (\n    ($breakpoint == list.nth(sassmap.keys($map), 1) and not $param) or\n    ( not $breakpoint ) or\n    ( $breakpoint == 'default' )\n  ) {\n    @content;\n  } @else if not $param {\n    // no param, just a standard mobile first media query\n    @if sassmap.has-key( $map, $breakpoint ) {\n      // breakpoint is in breakpoint map, let's use stored value\n      @media screen and (min-width: sassmap.get($map, $breakpoint)) { @content; };\n    } @else {\n      // breakpoint is not in breakpoint map, let's use custom value\n      @media screen and (min-width: $breakpoint) { @content; };\n    }\n  } @else if (\n    $param == 'down' and\n    map.next($map, $breakpoint)\n  ) {\n    @media screen and (max-width: map.next($map, $breakpoint) - 0.02px) {\n      @content;\n    }\n  } @else if (\n    $param == 'down' and\n    not sassmap.has-key($map, $breakpoint)\n  ) {\n    @media screen and (max-width: $breakpoint) { @content; };\n  } @else if (\n    $param == 'only' and\n    map.next($map, $breakpoint)\n  ) {\n    @media screen and\n      (min-width: sassmap.get($map, $breakpoint)) and\n      (max-width: map.next($map, $breakpoint) - 0.02px) { @content; };\n  } @else if (\n    sassmap.has-key( $map, $param) and\n    sassmap.has-key( $map, $breakpoint)\n  ) {\n    @media screen and\n      (min-width: sassmap.get($map, $breakpoint)) and\n      (max-width: sassmap.get($map, $param) - 0.02px) { @content; };\n  } @else if (\n    $param == 'downfrom' and\n    sassmap.get($map, $breakpoint) > 0 and\n    $breakpoint != 'xs'\n  ) {\n    @media screen and (max-width: sassmap.get($map, $breakpoint) - 0.02px) {\n      @content;\n    } // -1\n  } @else if (meta.type-of($param) == 'number') {\n    @if sassmap.has-key($map, $breakpoint) {\n      // breakpoint is in breakpoint map\n      @media screen and\n        (min-width: sassmap.get($map, $breakpoint)) and\n        (max-width: $param) { @content; };\n    } @else {\n      // breakpoint is not in breakpoint map, let's use custom value\n      @media screen and (min-width: $breakpoint) and (max-width: $param) { @content; }\n    }\n  } @else if (\n    not ($breakpoint == list.nth(sassmap.keys($map), -1) and $param == 'down') and\n    not ($breakpoint == list.nth(sassmap.keys($map), -1) and $param == 'only') and\n    not ($breakpoint == list.nth(sassmap.keys($map), 1) and $param == 'downfrom')\n  ) {\n    // do nothing on known edge cases. we just dont generate any code.\n    @warn 'Breakpoint is not configured properly #{$breakpoint}, #{$param}';\n  }\n}\n\n@mixin each() {\n  @each $breakpoint, $size in $map {\n    @include get($breakpoint) {\n      @content($breakpoint);\n    }\n  }\n}\n","@use '../tokens/breakpoint';\n@use './map' as *;\n\n/// Get css propeties from map\n///\n/// @param {Map} $map - Map\n/// @param {Arglist} $keys - Keys to fetch\n///\n/// @example\n/// $map: (\n///   background-color: #fff,\n///   color: #000\n/// );\n///\n/// .example {\n///   @include css-map($map);\n///  }\n///\n/// Output:\n/// .example {\n///   background-color: #fff;\n///   color: #000;\n/// }\n@mixin css-map($_map, $keys...) {\n  $map: if($keys, map-deep-get($_map, $keys...), $_map);\n\n  @each $prop, $value in $map {\n    #{$prop}: #{$value};\n  }\n}\n\n/// Get responsive css propeties from map\n///\n/// @param {Map} $map - Map\n/// @param {Arglist} $keys - Keys to fetch\n///\n/// @example\n/// $map: (\n///   default: (\n///     color: red,\n///   ),\n///   xl: (\n///     color: blue,\n///   ),\n/// );\n///\n/// .example {\n///   @include responsive-css-map($map);\n///  }\n///\n/// Output:\n/// .example {\n///   color: red;\n///   @media only screen and (min-width: 1240px) {\n///     color: blue;\n///   }\n/// }\n@mixin responsive-css-map($map) {\n  @each $breakpoint, $props in $map {\n    @include breakpoint.get($breakpoint) {\n      @include css-map($props);\n    }\n  }\n}\n\n/// Get variants of elemnt from map\n///\n/// @param {Map} $map - map\n/// @param {Map} $className - class name of element\n/// @param {Map} $classSuffix - suffix for class name of element\n@mixin variants($map, $className: '', $classSuffix: '') {\n  @each $variant, $props in $map {\n    #{if(&, \"&\", \"\")}#{$className + variant-name($variant) + $classSuffix} {\n      @include css-map($props);\n    }\n  }\n}\n\n/// Get responsive variants of elemnt from map\n///\n/// @param {Map} $map - map\n/// @param {Map} $className - class name of element\n/// @param {Map} $classSuffix - suffix for class name of element\n@mixin responsive-variants($map, $className: '', $classSuffix: '') {\n  @each $breakpoint, $props in $map {\n    @include breakpoint.get($breakpoint) {\n      @include variants($props, $className, $classSuffix);\n    }\n  }\n}\n\n/// Get prefixed variant name\n/// @param {String} $name - Variant name\n/// @return {String} - Return a prefixed variant name or empty string, for default variants\n/// @example scss\n///   variant-name('primary')\n/// // -primary\n///   variant-name('default')\n///\n@function variant-name($name, $prefix: '--', $suffix: '') {\n  @if not $name or $name == default or $name == xs {\n    @return '';\n  }\n\n  @return #{$prefix + $name + $suffix};\n}\n","// core (brand)\n$orange: #ff7900;\n$orange-dark: #f16e00;\n$black: #000;\n$white: #fff;\n\n// supporting color\n$blue: #4bb4e6;\n$green: #50be87;\n$pink: #ffb4e6;\n$violet: #a885d8;\n$yellow: #ffd200;\n$yellow-lighter: #fff6b6;\n$red: #ff4d4d;\n\n// functional\n$gray-300: #eee;\n$gray-400: #ddd;\n$gray-500: #ccc;\n$gray-600: #999;\n$gray-700: #666;\n$gray-800: #595959;\n$gray-900: #333;\n$success: #32c832;\n$danger: #cd3c14;\n$info: #527edb;\n$warning: #fc0;\n"]}