@jorilindell/hds-core 4.10.1

package/lib/components/fieldset/fieldset.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/fieldset/fieldset.css%23sass","../../../src/components/fieldset/fieldset.css"],"names":[],"mappings":"AAAA;EACE,sBAAA;EACA,kBAAA;EACA,kBAAA;EACA,kCAAA;EAEA,2BAAA;EACA,sBAAA;EACA,sEAAA;ACAF;;ADGA;ECAA,iBAAA;EDGE;;;GAAA;EAIA,UAAA;ACDF;;ADIA;EACE,+CAAA;ECDF,kBAAA;EDGE,qBAAA;ACDF;;ADIA;EACE,4CAAA;ECDF,cAAA;AACA","file":"fieldset.css","sourcesContent":[".hds-fieldset {\n  --border-style: 0 none;\n  --padding-top: 4px;\n  --padding-sides: 0;\n  --padding-bottom: var(--spacing-s);\n\n  border: var(--border-style);\n  box-sizing: border-box;\n  padding: var(--padding-top) var(--padding-sides) var(--padding-bottom);\n}\n\n.hds-fieldset-legend {\n  font-weight: bold;\n\n  /* Normalize.css rule\n  * Remove the padding so developers are not caught out when they zero out\n  * `fieldset` elements in all browsers.\n  */\n  padding: 0;\n}\n\n.hds-fieldset--border {\n  --border-style: 2px inset var(--color-black-90);\n  --padding-top: 2px;\n  --padding-sides: 12px;\n}\n\n.hds-fieldset--border > .hds-fieldset-legend {\n  margin-left: calc(var(--padding-sides) / -2);\n  padding: 0 6px;\n}\n",".hds-fieldset {\n  --border-style: 0 none;\n  --padding-top: 4px;\n  --padding-sides: 0;\n  --padding-bottom: var(--spacing-s);\n\n  border: var(--border-style);\n  box-sizing: border-box;\n  padding: var(--padding-top) var(--padding-sides) var(--padding-bottom);\n}\n\n.hds-fieldset-legend {\n  font-weight: bold;\n\n  /* Normalize.css rule\n  * Remove the padding so developers are not caught out when they zero out\n  * `fieldset` elements in all browsers.\n  */\n  padding: 0;\n}\n\n.hds-fieldset--border {\n  --border-style: 2px inset var(--color-black-90);\n  --padding-top: 2px;\n  --padding-sides: 12px;\n}\n\n.hds-fieldset--border > .hds-fieldset-legend {\n  margin-left: calc(var(--padding-sides) / -2);\n  padding: 0 6px;\n}\n"]}

package/lib/components/fieldset/fieldset.min.css

@@ -0,0 +1 @@
+.hds-fieldset{--border-style:0 none;--padding-top:4px;--padding-sides:0;--padding-bottom:var(--spacing-s);border:var(--border-style);box-sizing:border-box;padding:var(--padding-top) var(--padding-sides) var(--padding-bottom)}.hds-fieldset-legend{font-weight:700;padding:0}.hds-fieldset--border{--border-style:2px inset var(--color-black-90);--padding-top:2px;--padding-sides:12px}.hds-fieldset--border>.hds-fieldset-legend{margin-left:calc(var(--padding-sides) / -2);padding:0 6px}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/fieldset/fieldset.css%23sass","../../../src/components/fieldset/fieldset.css"],"names":[],"mappings":"AAAA,cACE,qBAAA,CACA,iBAAA,CACA,iBAAA,CACA,iCAAA,CAEA,0BAAA,CACA,qBAAA,CACA,qECAF,CDGA,qBCAA,eAAA,CDOE,SCDF,CDIA,sBACE,8CAAA,CCDF,iBAAA,CDGE,oBCDF,CDIA,2CACE,2CAAA,CCDF,aACA","file":"fieldset.min.css","sourcesContent":[".hds-fieldset {\n  --border-style: 0 none;\n  --padding-top: 4px;\n  --padding-sides: 0;\n  --padding-bottom: var(--spacing-s);\n\n  border: var(--border-style);\n  box-sizing: border-box;\n  padding: var(--padding-top) var(--padding-sides) var(--padding-bottom);\n}\n\n.hds-fieldset-legend {\n  font-weight: bold;\n\n  /* Normalize.css rule\n  * Remove the padding so developers are not caught out when they zero out\n  * `fieldset` elements in all browsers.\n  */\n  padding: 0;\n}\n\n.hds-fieldset--border {\n  --border-style: 2px inset var(--color-black-90);\n  --padding-top: 2px;\n  --padding-sides: 12px;\n}\n\n.hds-fieldset--border > .hds-fieldset-legend {\n  margin-left: calc(var(--padding-sides) / -2);\n  padding: 0 6px;\n}\n",".hds-fieldset {\n  --border-style: 0 none;\n  --padding-top: 4px;\n  --padding-sides: 0;\n  --padding-bottom: var(--spacing-s);\n\n  border: var(--border-style);\n  box-sizing: border-box;\n  padding: var(--padding-top) var(--padding-sides) var(--padding-bottom);\n}\n\n.hds-fieldset-legend {\n  font-weight: bold;\n\n  /* Normalize.css rule\n  * Remove the padding so developers are not caught out when they zero out\n  * `fieldset` elements in all browsers.\n  */\n  padding: 0;\n}\n\n.hds-fieldset--border {\n  --border-style: 2px inset var(--color-black-90);\n  --padding-top: 2px;\n  --padding-sides: 12px;\n}\n\n.hds-fieldset--border > .hds-fieldset-legend {\n  margin-left: calc(var(--padding-sides) / -2);\n  padding: 0 6px;\n}\n"]}

package/lib/components/hero/hero.css

@@ -0,0 +1,408 @@
+.hds-hero {
+  --arrow-icon-color: var(--color);
+  --arrow-icon-size: 128px;
+  --background-color: var(--color-white);
+  --color: var(--color-black-90);
+  --diagonal-koros-position: 45%;
+  --horizontal-padding-large: var(--spacing-layout-xs);
+  --horizontal-padding-medium: var(--spacing-layout-xs);
+  --horizontal-padding-small: var(--spacing-layout-2-xs);
+  --horizontal-padding-x-large: var(--spacing-layout-xs);
+  --image-position: bottom right;
+  --koros-color: var(--color-white);
+  --bottom-koros-color: var(--koros-color);
+  --koros-height: 85px;
+  --padding-horizontal: var(--horizontal-padding-small);
+  --padding-vertical: var(--spacing-xl);
+  --z-index: 1;
+  --bottom-background-color: transparent;
+  --information-padding-top: 0;
+  --information-color: inherit;
+  background-color: var(--background-color);
+  color: var(--color);
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  z-index: var(--z-index);
+}
+
+.hds-hero__bottom-container {
+  background-color: var(--bottom-background-color);
+  width: 100%;
+}
+
+.hds-hero__bottom-content-aligner {
+  display: flex;
+  justify-content: space-between;
+  margin: 0 auto;
+  max-width: var(--container-width-xl);
+  position: relative;
+  width: 100%;
+  z-index: calc(var(--z-index) + 1);
+}
+
+.hds-hero__arrow-icon-container {
+  display: flex;
+  position: relative;
+  z-index: calc(var(--z-index) + 1);
+}
+
+.hds-hero--arrow-icon {
+  --icon-size: var(--arrow-icon-size) !important;
+  color: var(--arrow-icon-color);
+  /* the following is magic to calculate a proper margins (icon has empty space in it that is taken into account)  */
+  margin-left: calc(var(--padding-horizontal) - var(--arrow-icon-size) / 4);
+  margin-top: calc(0px - var(--arrow-icon-size) / 6.4 - var(--spacing-layout-xs));
+}
+
+.hds-hero__information-container {
+  display: flex;
+  flex-grow: 1;
+  justify-content: flex-end;
+  padding-top: var(--information-padding-top);
+}
+
+.hds-hero__information-container span {
+  color: var(--information-color);
+  padding: var(--spacing-2-xs) var(--spacing-s);
+}
+
+.hds-hero__title {
+  font-size: var(--fontsize-heading-xl-mobile);
+  font-weight: normal;
+  letter-spacing: -1px;
+  line-height: var(--lineheight-s);
+  margin: 0 0 var(--spacing-s) 0;
+}
+
+.hds-hero__text {
+  font-size: var(--fontsize-body-l);
+  margin: 0 0 var(--spacing-s) 0;
+}
+
+.hds-hero__text:last-of-type {
+  margin: 0 0 var(--spacing-l) 0;
+}
+
+.hds-hero__container {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: var(--container-width-xl);
+}
+
+.hds-hero__content {
+  display: flex;
+  padding: var(--padding-vertical) var(--padding-horizontal);
+}
+
+.hds-hero__content--single-column,
+.hds-hero__content--two-columns {
+  display: flex;
+  flex-direction: column;
+}
+
+.hds-hero__content--two-columns {
+  align-items: center;
+}
+
+.hds-hero__content--two-columns__image-container {
+  display: none;
+}
+
+.hds-hero__card {
+  display: block;
+  max-width: var(--container-width-xl);
+}
+
+.hds-hero__koros-container,
+.hds-hero__koros-container--overflow-bottom,
+.hds-hero__koros-container--inward-koros {
+  height: var(--koros-height);
+  inset: 0;
+  overflow: hidden;
+  position: absolute;
+  z-index: 1;
+}
+
+.hds-hero__koros-container--inward-koros {
+  position: relative;
+}
+
+.hds-hero__koros-container--overflow-bottom {
+  bottom: calc(-1 * var(--koros-height));
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  top: auto;
+}
+
+.hds-hero__koros-container > div {
+  bottom: 0;
+  height: 100%;
+  position: absolute;
+  width: 100%;
+}
+
+.hds-hero__card--centered-content {
+  text-align: center;
+  width: 100%;
+}
+
+.hds-hero__image {
+  display: block;
+  width: 100%;
+}
+
+.hds-hero__koros-and-image-container {
+  display: block;
+  position: relative;
+}
+
+.hds-hero__image-below-koros {
+  display: block;
+}
+
+.hds-hero__image-below-koros .hds-hero__image {
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  -o-object-position: var(--image-position);
+     object-position: var(--image-position);
+}
+
+.hds-hero--with-background__container {
+  position: relative;
+}
+
+.hds-hero--with-background__background {
+  position: relative;
+  width: 100%;
+}
+
+.hds-hero--with-background__background .hds-hero__image {
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  -o-object-position: var(--image-position);
+     object-position: var(--image-position);
+}
+
+.hds-hero--with-background__content-columns {
+  display: flex;
+  margin: 0 auto;
+  max-width: var(--container-width-xl);
+}
+
+.hds-hero--with-background__empty-column {
+  display: none;
+}
+
+.hds-hero--background-image .hds-hero__content {
+  padding: 0;
+}
+
+.hds-hero--background-image .hds-hero__card {
+  background-color: var(--background-color);
+  padding: var(--padding-vertical) var(--padding-horizontal);
+}
+
+.hds-hero--background-image__koros {
+  bottom: 0;
+  height: var(--koros-height);
+  overflow: hidden;
+  position: absolute;
+  width: 100%;
+  --koros-color: var(--top-koros-color);
+}
+
+.hds-hero--diagonal-koros .hds-hero--with-background__container {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  position: relative;
+  z-index: 1;
+}
+
+.hds-hero--diagonal-koros .hds-hero__content {
+  box-sizing: border-box;
+  display: block;
+  padding: 0;
+  width: 100%;
+  z-index: 2;
+}
+
+.hds-hero--diagonal-koros .hds-hero__card {
+  background-color: var(--background-color);
+  padding: var(--padding-vertical) var(--padding-horizontal);
+}
+
+.hds-hero--diagonal-koros__koros-and-background {
+  height: var(--koros-height);
+  position: absolute;
+  transform: rotate(180deg);
+  width: 100%;
+}
+
+.hds-hero--diagonal-koros__koros-aligner {
+  position: relative;
+  z-index: 1;
+}
+
+.hds-hero--diagonal-koros__koros-and-background .hds-hero__koros-container {
+  height: 100%;
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+
+.hds-hero--with-background__background,
+.hds-hero__image-below-koros {
+  height: 300px;
+}
+
+@media only screen and (min-width: 768px) {
+  .hds-hero {
+    --padding-horizontal: var(--horizontal-padding-medium);
+    --padding-vertical: var(--spacing-layout-m);
+    --arrow-icon-size: 164px;
+  }
+  .hds-hero--with-background__background,
+  .hds-hero__image-below-koros {
+    height: 400px;
+  }
+  .hds-hero__information-container span {
+    padding-bottom: var(--spacing-xs);
+    padding-right: var(--spacing-m);
+    padding-top: var(--spacing-xs);
+  }
+}
+
+@media only screen and (min-width: 992px) {
+  .hds-hero {
+    --padding-horizontal: var(--horizontal-padding-large);
+    --padding-vertical: var(--spacing-layout-xl);
+  }
+  .hds-hero__text {
+    font-size: var(--fontsize-body-xl);
+  }
+  .hds-hero--image-left .hds-hero__image-below-koros,
+  .hds-hero--image-right .hds-hero__image-below-koros {
+    display: none;
+  }
+  .hds-hero--image-left .hds-hero__information-container,
+  .hds-hero--image-right .hds-hero__information-container {
+    --information-padding-top: var(--koros-height);
+  }
+  .hds-hero__content--two-columns {
+    flex-direction: row;
+  }
+  .hds-hero__content--two-columns > * {
+    width: 50%;
+  }
+  .hds-hero__content--two-columns > *:first-child {
+    margin-right: var(--spacing-xl);
+  }
+  .hds-hero__content--two-columns > *:last-child {
+    margin-left: var(--spacing-xl);
+  }
+  .hds-hero__content--two-columns__image-container {
+    display: block;
+  }
+  .hds-hero--background-image .hds-hero--with-background__container {
+    padding: var(--padding-vertical) var(--padding-horizontal);
+  }
+  .hds-hero--background-image .hds-hero__content {
+    --padding-vertical: var(--spacing-2-xl);
+    display: flex;
+    flex-direction: row;
+    margin: 0 auto;
+    max-width: var(--container-width-xl);
+  }
+  .hds-hero--background-image .hds-hero__card {
+    width: 50%;
+  }
+  .hds-hero--with-background__background {
+    height: auto;
+    inset: 0;
+    position: absolute;
+    width: auto;
+    z-index: -1;
+  }
+  .hds-hero--with-background__empty-column {
+    display: block;
+    width: 45%;
+  }
+  .hds-hero--diagonal-koros .hds-hero__content {
+    background-color: transparent;
+    padding: var(--padding-vertical) 0;
+  }
+  .hds-hero--diagonal-koros .hds-hero__card {
+    background: none;
+    padding: 0 var(--padding-horizontal);
+    width: 55%;
+  }
+  .hds-hero--diagonal-koros__koros-aligner {
+    bottom: 0;
+    max-width: var(--container-width-xl);
+    position: absolute;
+    right: var(--diagonal-koros-position);
+    top: 0;
+    width: 100%;
+    z-index: 1;
+  }
+  .hds-hero--diagonal-koros__koros-and-background {
+    display: block;
+    height: 100%;
+    inset: 0;
+    overflow: visible;
+    position: absolute;
+    transform: rotate(135deg);
+    transform-origin: center;
+    width: 150%;
+  }
+  .hds-hero--diagonal-koros__koros-and-background:after {
+    background-color: var(--koros-color);
+    content: "";
+    display: block;
+    height: 1500px;
+    left: 0;
+    position: absolute;
+    top: 50px;
+    width: 150%;
+  }
+  .hds-hero--diagonal-koros__koros-and-background .hds-hero__koros-container {
+    height: 100%;
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    z-index: 1;
+  }
+  .hds-hero--background-image__koros {
+    --koros-color: var(--bottom-koros-color);
+  }
+  .hds-hero__title {
+    font-size: var(--fontsize-heading-xl);
+  }
+}
+
+@media only screen and (min-width: 1248px) {
+  .hds-hero {
+    --padding-horizontal: var(--horizontal-padding-x-large);
+  }
+  .hds-hero__title {
+    font-size: var(--fontsize-heading-xxl);
+    letter-spacing: -1.2px;
+    line-height: var(--lineheight-s);
+  }
+  .hds-hero--diagonal-koros .hds-hero__text {
+    padding-right: var(--spacing-l);
+  }
+  .hds-hero__content--two-columns > *:first-child {
+    margin-right: var(--spacing-2-xl);
+  }
+  .hds-hero__content--two-columns > *:last-child {
+    margin-left: var(--spacing-2-xl);
+  }
+}

package/lib/components/hero/hero.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/hero/hero.css%23sass","../../../src/components/hero/hero.css"],"names":[],"mappings":"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","file":"hero.css","sourcesContent":[".hds-hero {\n  --arrow-icon-color: var(--color);\n  --arrow-icon-size: 128px;\n  --background-color: var(--color-white);\n  --color: var(--color-black-90);\n  --diagonal-koros-position: 45%;\n  --horizontal-padding-large: var(--spacing-layout-xs);\n  --horizontal-padding-medium: var(--spacing-layout-xs);\n  --horizontal-padding-small: var(--spacing-layout-2-xs);\n  --horizontal-padding-x-large: var(--spacing-layout-xs);\n  --image-position: bottom right;\n  --koros-color: var(--color-white);\n  --bottom-koros-color: var(--koros-color);\n  --koros-height: 85px;\n  --padding-horizontal: var(--horizontal-padding-small);\n  --padding-vertical: var(--spacing-xl);\n  --z-index: 1;\n  --bottom-background-color: transparent;\n  --information-padding-top: 0;\n  --information-color: inherit;\n\n  background-color: var(--background-color);\n  color: var(--color);\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  z-index: var(--z-index);\n}\n\n.hds-hero__bottom-container {\n  background-color: var(--bottom-background-color);\n  width: 100%;\n}\n\n.hds-hero__bottom-content-aligner {\n  display: flex;\n  justify-content: space-between;\n  margin: 0 auto;\n  max-width: var(--container-width-xl);\n  position: relative;\n  width: 100%;\n  z-index: calc(var(--z-index) + 1);\n}\n\n.hds-hero__arrow-icon-container {\n  display: flex;\n  position: relative;\n  z-index: calc(var(--z-index) + 1);\n}\n\n.hds-hero--arrow-icon {\n  --icon-size: var(--arrow-icon-size) !important;\n\n  color: var(--arrow-icon-color);\n\n  /* the following is magic to calculate a proper margins (icon has empty space in it that is taken into account)  */\n  margin-left: calc(var(--padding-horizontal) - (var(--arrow-icon-size) / 4));\n  margin-top: calc(0px - var(--arrow-icon-size) / (128 / 20) - var(--spacing-layout-xs));\n}\n\n.hds-hero__information-container {\n  display: flex;\n  flex-grow: 1;\n  justify-content: flex-end;\n  padding-top: var(--information-padding-top);\n}\n\n.hds-hero__information-container span {\n  color: var(--information-color);\n  padding: var(--spacing-2-xs) var(--spacing-s);\n}\n\n.hds-hero__title {\n  font-size: var(--fontsize-heading-xl-mobile);\n  font-weight: normal;\n  letter-spacing: -1px;\n  line-height: var(--lineheight-s);\n  margin: 0 0 var(--spacing-s) 0;\n}\n\n.hds-hero__text {\n  font-size: var(--fontsize-body-l);\n  margin: 0 0 var(--spacing-s) 0;\n}\n\n.hds-hero__text:last-of-type {\n  margin: 0 0 var(--spacing-l) 0;\n}\n\n.hds-hero__container {\n  margin-left: auto;\n  margin-right: auto;\n  max-width: var(--container-width-xl);\n}\n\n.hds-hero__content {\n  display: flex;\n  padding: var(--padding-vertical) var(--padding-horizontal);\n}\n\n.hds-hero__content--single-column,\n.hds-hero__content--two-columns {\n  display: flex;\n  flex-direction: column;\n}\n\n.hds-hero__content--two-columns {\n  align-items: center;\n}\n\n.hds-hero__content--two-columns__image-container {\n  display: none;\n}\n\n.hds-hero__card {\n  display: block;\n  max-width: var(--container-width-xl);\n}\n\n.hds-hero__koros-container,\n.hds-hero__koros-container--overflow-bottom,\n.hds-hero__koros-container--inward-koros {\n  height: var(--koros-height);\n  inset: 0;\n  overflow: hidden;\n  position: absolute;\n  z-index: 1;\n}\n\n.hds-hero__koros-container--inward-koros {\n  position: relative;\n}\n\n.hds-hero__koros-container--overflow-bottom {\n  bottom: calc(-1 * var(--koros-height));\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  top: auto;\n}\n\n.hds-hero__koros-container > div {\n  bottom: 0;\n  height: 100%;\n  position: absolute;\n  width: 100%;\n}\n\n.hds-hero__card--centered-content {\n  text-align: center;\n  width: 100%;\n}\n\n.hds-hero__image {\n  display: block;\n  width: 100%;\n}\n\n.hds-hero__koros-and-image-container {\n  display: block;\n  position: relative;\n}\n\n.hds-hero__image-below-koros {\n  display: block;\n}\n\n.hds-hero__image-below-koros .hds-hero__image {\n  height: 100%;\n  object-fit: cover;\n  object-position: var(--image-position);\n}\n\n.hds-hero--with-background__container {\n  position: relative;\n}\n\n.hds-hero--with-background__background {\n  position: relative;\n  width: 100%;\n}\n\n.hds-hero--with-background__background .hds-hero__image {\n  height: 100%;\n  object-fit: cover;\n  object-position: var(--image-position);\n}\n\n.hds-hero--with-background__content-columns {\n  display: flex;\n  margin: 0 auto;\n  max-width: var(--container-width-xl);\n}\n\n.hds-hero--with-background__empty-column {\n  display: none;\n}\n\n.hds-hero--background-image .hds-hero__content {\n  padding: 0;\n}\n\n.hds-hero--background-image .hds-hero__card {\n  background-color: var(--background-color);\n  padding: var(--padding-vertical) var(--padding-horizontal);\n}\n\n.hds-hero--background-image__koros {\n  bottom: 0;\n  height: var(--koros-height);\n  overflow: hidden;\n  position: absolute;\n  width: 100%;\n\n  --koros-color: var(--top-koros-color);\n}\n\n.hds-hero--diagonal-koros .hds-hero--with-background__container {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  position: relative;\n  z-index: 1;\n}\n\n.hds-hero--diagonal-koros .hds-hero__content {\n  box-sizing: border-box;\n  display: block;\n  padding: 0;\n  width: 100%;\n  z-index: 2;\n}\n\n.hds-hero--diagonal-koros .hds-hero__card {\n  background-color: var(--background-color);\n  padding: var(--padding-vertical) var(--padding-horizontal);\n}\n\n.hds-hero--diagonal-koros__koros-and-background {\n  height: var(--koros-height);\n  position: absolute;\n  transform: rotate(180deg);\n  width: 100%;\n}\n\n.hds-hero--diagonal-koros__koros-aligner {\n  position: relative;\n  z-index: 1;\n}\n\n.hds-hero--diagonal-koros__koros-and-background .hds-hero__koros-container {\n  height: 100%;\n  overflow: hidden;\n  position: absolute;\n  top: 0;\n  width: 100%;\n}\n\n.hds-hero--with-background__background,\n.hds-hero__image-below-koros {\n  height: 300px;\n}\n\n@media only screen and (min-width: 768px) {\n  .hds-hero {\n    --padding-horizontal: var(--horizontal-padding-medium);\n    --padding-vertical: var(--spacing-layout-m);\n    --arrow-icon-size: 164px;\n  }\n\n  .hds-hero--with-background__background,\n  .hds-hero__image-below-koros {\n    height: 400px;\n  }\n\n  .hds-hero__information-container span {\n    padding-bottom: var(--spacing-xs);\n    padding-right: var(--spacing-m);\n    padding-top: var(--spacing-xs);\n  }\n}\n\n@media only screen and (min-width: 992px) {\n  .hds-hero {\n    --padding-horizontal: var(--horizontal-padding-large);\n    --padding-vertical: var(--spacing-layout-xl);\n  }\n\n  .hds-hero__text {\n    font-size: var(--fontsize-body-xl);\n  }\n\n  .hds-hero--image-left .hds-hero__image-below-koros,\n  .hds-hero--image-right .hds-hero__image-below-koros {\n    display: none;\n  }\n\n  .hds-hero--image-left .hds-hero__information-container,\n  .hds-hero--image-right .hds-hero__information-container {\n    --information-padding-top: var(--koros-height);\n  }\n\n  .hds-hero__content--two-columns {\n    flex-direction: row;\n  }\n\n  .hds-hero__content--two-columns > * {\n    width: 50%;\n  }\n\n  .hds-hero__content--two-columns > *:first-child {\n    margin-right: var(--spacing-xl);\n  }\n\n  .hds-hero__content--two-columns > *:last-child {\n    margin-left: var(--spacing-xl);\n  }\n\n  .hds-hero__content--two-columns__image-container {\n    display: block;\n  }\n\n  .hds-hero--background-image .hds-hero--with-background__container {\n    padding: var(--padding-vertical) var(--padding-horizontal);\n  }\n\n  .hds-hero--background-image .hds-hero__content {\n    --padding-vertical: var(--spacing-2-xl);\n\n    display: flex;\n    flex-direction: row;\n    margin: 0 auto;\n    max-width: var(--container-width-xl);\n  }\n\n  .hds-hero--background-image .hds-hero__card {\n    width: 50%;\n  }\n\n  .hds-hero--with-background__background {\n    height: auto;\n    inset: 0;\n    position: absolute;\n    width: auto;\n    z-index: -1;\n  }\n\n  .hds-hero--with-background__empty-column {\n    display: block;\n    width: 45%;\n  }\n\n  .hds-hero--diagonal-koros .hds-hero__content {\n    background-color: transparent;\n    padding: var(--padding-vertical) 0;\n  }\n\n  .hds-hero--diagonal-koros .hds-hero__card {\n    background: none;\n    padding: 0 var(--padding-horizontal);\n    width: 55%;\n  }\n\n  .hds-hero--diagonal-koros__koros-aligner {\n    bottom: 0;\n    max-width: var(--container-width-xl);\n    position: absolute;\n    right: var(--diagonal-koros-position);\n    top: 0;\n    width: 100%;\n    z-index: 1;\n  }\n\n  .hds-hero--diagonal-koros__koros-and-background {\n    display: block;\n    height: 100%;\n    inset: 0;\n    overflow: visible;\n    position: absolute;\n    transform: rotate(135deg);\n    transform-origin: center;\n    width: 150%;\n  }\n\n  .hds-hero--diagonal-koros__koros-and-background:after {\n    background-color: var(--koros-color);\n    content: '';\n    display: block;\n    height: 1500px;\n    left: 0;\n    position: absolute;\n    top: 50px;\n    width: 150%;\n  }\n\n  .hds-hero--diagonal-koros__koros-and-background .hds-hero__koros-container {\n    height: 100%;\n    overflow: hidden;\n    position: absolute;\n    top: 0;\n    width: 100%;\n    z-index: 1;\n  }\n\n  .hds-hero--background-image__koros {\n    --koros-color: var(--bottom-koros-color);\n  }\n\n  .hds-hero__title {\n    font-size: var(--fontsize-heading-xl);\n  }\n}\n\n@media only screen and (min-width: 1248px) {\n  .hds-hero {\n    --padding-horizontal: var(--horizontal-padding-x-large);\n  }\n\n  .hds-hero__title {\n    font-size: var(--fontsize-heading-xxl);\n    letter-spacing: -1.2px;\n    line-height: var(--lineheight-s);\n  }\n\n  .hds-hero--diagonal-koros .hds-hero__text {\n    padding-right: var(--spacing-l);\n  }\n\n  .hds-hero__content--two-columns > *:first-child {\n    margin-right: var(--spacing-2-xl);\n  }\n\n  .hds-hero__content--two-columns > *:last-child {\n    margin-left: var(--spacing-2-xl);\n  }\n}\n",".hds-hero {\n  --arrow-icon-color: var(--color);\n  --arrow-icon-size: 128px;\n  --background-color: var(--color-white);\n  --color: var(--color-black-90);\n  --diagonal-koros-position: 45%;\n  --horizontal-padding-large: var(--spacing-layout-xs);\n  --horizontal-padding-medium: var(--spacing-layout-xs);\n  --horizontal-padding-small: var(--spacing-layout-2-xs);\n  --horizontal-padding-x-large: var(--spacing-layout-xs);\n  --image-position: bottom right;\n  --koros-color: var(--color-white);\n  --bottom-koros-color: var(--koros-color);\n  --koros-height: 85px;\n  --padding-horizontal: var(--horizontal-padding-small);\n  --padding-vertical: var(--spacing-xl);\n  --z-index: 1;\n  --bottom-background-color: transparent;\n  --information-padding-top: 0;\n  --information-color: inherit;\n\n  background-color: var(--background-color);\n  color: var(--color);\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  z-index: var(--z-index);\n}\n\n.hds-hero__bottom-container {\n  background-color: var(--bottom-background-color);\n  width: 100%;\n}\n\n.hds-hero__bottom-content-aligner {\n  display: flex;\n  justify-content: space-between;\n  margin: 0 auto;\n  max-width: var(--container-width-xl);\n  position: relative;\n  width: 100%;\n  z-index: calc(var(--z-index) + 1);\n}\n\n.hds-hero__arrow-icon-container {\n  display: flex;\n  position: relative;\n  z-index: calc(var(--z-index) + 1);\n}\n\n.hds-hero--arrow-icon {\n  --icon-size: var(--arrow-icon-size) !important;\n\n  color: var(--arrow-icon-color);\n\n  /* the following is magic to calculate a proper margins (icon has empty space in it that is taken into account)  */\n  margin-left: calc(var(--padding-horizontal) - (var(--arrow-icon-size) / 4));\n  margin-top: calc(0px - var(--arrow-icon-size) / (128 / 20) - var(--spacing-layout-xs));\n}\n\n.hds-hero__information-container {\n  display: flex;\n  flex-grow: 1;\n  justify-content: flex-end;\n  padding-top: var(--information-padding-top);\n}\n\n.hds-hero__information-container span {\n  color: var(--information-color);\n  padding: var(--spacing-2-xs) var(--spacing-s);\n}\n\n.hds-hero__title {\n  font-size: var(--fontsize-heading-xl-mobile);\n  font-weight: normal;\n  letter-spacing: -1px;\n  line-height: var(--lineheight-s);\n  margin: 0 0 var(--spacing-s) 0;\n}\n\n.hds-hero__text {\n  font-size: var(--fontsize-body-l);\n  margin: 0 0 var(--spacing-s) 0;\n}\n\n.hds-hero__text:last-of-type {\n  margin: 0 0 var(--spacing-l) 0;\n}\n\n.hds-hero__container {\n  margin-left: auto;\n  margin-right: auto;\n  max-width: var(--container-width-xl);\n}\n\n.hds-hero__content {\n  display: flex;\n  padding: var(--padding-vertical) var(--padding-horizontal);\n}\n\n.hds-hero__content--single-column,\n.hds-hero__content--two-columns {\n  display: flex;\n  flex-direction: column;\n}\n\n.hds-hero__content--two-columns {\n  align-items: center;\n}\n\n.hds-hero__content--two-columns__image-container {\n  display: none;\n}\n\n.hds-hero__card {\n  display: block;\n  max-width: var(--container-width-xl);\n}\n\n.hds-hero__koros-container,\n.hds-hero__koros-container--overflow-bottom,\n.hds-hero__koros-container--inward-koros {\n  height: var(--koros-height);\n  inset: 0;\n  overflow: hidden;\n  position: absolute;\n  z-index: 1;\n}\n\n.hds-hero__koros-container--inward-koros {\n  position: relative;\n}\n\n.hds-hero__koros-container--overflow-bottom {\n  bottom: calc(-1 * var(--koros-height));\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  top: auto;\n}\n\n.hds-hero__koros-container > div {\n  bottom: 0;\n  height: 100%;\n  position: absolute;\n  width: 100%;\n}\n\n.hds-hero__card--centered-content {\n  text-align: center;\n  width: 100%;\n}\n\n.hds-hero__image {\n  display: block;\n  width: 100%;\n}\n\n.hds-hero__koros-and-image-container {\n  display: block;\n  position: relative;\n}\n\n.hds-hero__image-below-koros {\n  display: block;\n}\n\n.hds-hero__image-below-koros .hds-hero__image {\n  height: 100%;\n  object-fit: cover;\n  object-position: var(--image-position);\n}\n\n.hds-hero--with-background__container {\n  position: relative;\n}\n\n.hds-hero--with-background__background {\n  position: relative;\n  width: 100%;\n}\n\n.hds-hero--with-background__background .hds-hero__image {\n  height: 100%;\n  object-fit: cover;\n  object-position: var(--image-position);\n}\n\n.hds-hero--with-background__content-columns {\n  display: flex;\n  margin: 0 auto;\n  max-width: var(--container-width-xl);\n}\n\n.hds-hero--with-background__empty-column {\n  display: none;\n}\n\n.hds-hero--background-image .hds-hero__content {\n  padding: 0;\n}\n\n.hds-hero--background-image .hds-hero__card {\n  background-color: var(--background-color);\n  padding: var(--padding-vertical) var(--padding-horizontal);\n}\n\n.hds-hero--background-image__koros {\n  bottom: 0;\n  height: var(--koros-height);\n  overflow: hidden;\n  position: absolute;\n  width: 100%;\n\n  --koros-color: var(--top-koros-color);\n}\n\n.hds-hero--diagonal-koros .hds-hero--with-background__container {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  position: relative;\n  z-index: 1;\n}\n\n.hds-hero--diagonal-koros .hds-hero__content {\n  box-sizing: border-box;\n  display: block;\n  padding: 0;\n  width: 100%;\n  z-index: 2;\n}\n\n.hds-hero--diagonal-koros .hds-hero__card {\n  background-color: var(--background-color);\n  padding: var(--padding-vertical) var(--padding-horizontal);\n}\n\n.hds-hero--diagonal-koros__koros-and-background {\n  height: var(--koros-height);\n  position: absolute;\n  transform: rotate(180deg);\n  width: 100%;\n}\n\n.hds-hero--diagonal-koros__koros-aligner {\n  position: relative;\n  z-index: 1;\n}\n\n.hds-hero--diagonal-koros__koros-and-background .hds-hero__koros-container {\n  height: 100%;\n  overflow: hidden;\n  position: absolute;\n  top: 0;\n  width: 100%;\n}\n\n.hds-hero--with-background__background,\n.hds-hero__image-below-koros {\n  height: 300px;\n}\n\n@media only screen and (min-width: 768px) {\n  .hds-hero {\n    --padding-horizontal: var(--horizontal-padding-medium);\n    --padding-vertical: var(--spacing-layout-m);\n    --arrow-icon-size: 164px;\n  }\n\n  .hds-hero--with-background__background,\n  .hds-hero__image-below-koros {\n    height: 400px;\n  }\n\n  .hds-hero__information-container span {\n    padding-bottom: var(--spacing-xs);\n    padding-right: var(--spacing-m);\n    padding-top: var(--spacing-xs);\n  }\n}\n\n@media only screen and (min-width: 992px) {\n  .hds-hero {\n    --padding-horizontal: var(--horizontal-padding-large);\n    --padding-vertical: var(--spacing-layout-xl);\n  }\n\n  .hds-hero__text {\n    font-size: var(--fontsize-body-xl);\n  }\n\n  .hds-hero--image-left .hds-hero__image-below-koros,\n  .hds-hero--image-right .hds-hero__image-below-koros {\n    display: none;\n  }\n\n  .hds-hero--image-left .hds-hero__information-container,\n  .hds-hero--image-right .hds-hero__information-container {\n    --information-padding-top: var(--koros-height);\n  }\n\n  .hds-hero__content--two-columns {\n    flex-direction: row;\n  }\n\n  .hds-hero__content--two-columns > * {\n    width: 50%;\n  }\n\n  .hds-hero__content--two-columns > *:first-child {\n    margin-right: var(--spacing-xl);\n  }\n\n  .hds-hero__content--two-columns > *:last-child {\n    margin-left: var(--spacing-xl);\n  }\n\n  .hds-hero__content--two-columns__image-container {\n    display: block;\n  }\n\n  .hds-hero--background-image .hds-hero--with-background__container {\n    padding: var(--padding-vertical) var(--padding-horizontal);\n  }\n\n  .hds-hero--background-image .hds-hero__content {\n    --padding-vertical: var(--spacing-2-xl);\n\n    display: flex;\n    flex-direction: row;\n    margin: 0 auto;\n    max-width: var(--container-width-xl);\n  }\n\n  .hds-hero--background-image .hds-hero__card {\n    width: 50%;\n  }\n\n  .hds-hero--with-background__background {\n    height: auto;\n    inset: 0;\n    position: absolute;\n    width: auto;\n    z-index: -1;\n  }\n\n  .hds-hero--with-background__empty-column {\n    display: block;\n    width: 45%;\n  }\n\n  .hds-hero--diagonal-koros .hds-hero__content {\n    background-color: transparent;\n    padding: var(--padding-vertical) 0;\n  }\n\n  .hds-hero--diagonal-koros .hds-hero__card {\n    background: none;\n    padding: 0 var(--padding-horizontal);\n    width: 55%;\n  }\n\n  .hds-hero--diagonal-koros__koros-aligner {\n    bottom: 0;\n    max-width: var(--container-width-xl);\n    position: absolute;\n    right: var(--diagonal-koros-position);\n    top: 0;\n    width: 100%;\n    z-index: 1;\n  }\n\n  .hds-hero--diagonal-koros__koros-and-background {\n    display: block;\n    height: 100%;\n    inset: 0;\n    overflow: visible;\n    position: absolute;\n    transform: rotate(135deg);\n    transform-origin: center;\n    width: 150%;\n  }\n\n  .hds-hero--diagonal-koros__koros-and-background:after {\n    background-color: var(--koros-color);\n    content: '';\n    display: block;\n    height: 1500px;\n    left: 0;\n    position: absolute;\n    top: 50px;\n    width: 150%;\n  }\n\n  .hds-hero--diagonal-koros__koros-and-background .hds-hero__koros-container {\n    height: 100%;\n    overflow: hidden;\n    position: absolute;\n    top: 0;\n    width: 100%;\n    z-index: 1;\n  }\n\n  .hds-hero--background-image__koros {\n    --koros-color: var(--bottom-koros-color);\n  }\n\n  .hds-hero__title {\n    font-size: var(--fontsize-heading-xl);\n  }\n}\n\n@media only screen and (min-width: 1248px) {\n  .hds-hero {\n    --padding-horizontal: var(--horizontal-padding-x-large);\n  }\n\n  .hds-hero__title {\n    font-size: var(--fontsize-heading-xxl);\n    letter-spacing: -1.2px;\n    line-height: var(--lineheight-s);\n  }\n\n  .hds-hero--diagonal-koros .hds-hero__text {\n    padding-right: var(--spacing-l);\n  }\n\n  .hds-hero__content--two-columns > *:first-child {\n    margin-right: var(--spacing-2-xl);\n  }\n\n  .hds-hero__content--two-columns > *:last-child {\n    margin-left: var(--spacing-2-xl);\n  }\n}\n"]}

package/lib/components/hero/hero.min.css

@@ -0,0 +1 @@
+.hds-hero{--arrow-icon-color:var(--color);--arrow-icon-size:128px;--background-color:var(--color-white);--color:var(--color-black-90);--diagonal-koros-position:45%;--horizontal-padding-large:var(--spacing-layout-xs);--horizontal-padding-medium:var(--spacing-layout-xs);--horizontal-padding-small:var(--spacing-layout-2-xs);--horizontal-padding-x-large:var(--spacing-layout-xs);--image-position:bottom right;--koros-color:var(--color-white);--bottom-koros-color:var(--koros-color);--koros-height:85px;--padding-horizontal:var(--horizontal-padding-small);--padding-vertical:var(--spacing-xl);--z-index:1;--bottom-background-color:transparent;--information-padding-top:0;--information-color:inherit;background-color:var(--background-color);color:var(--color);display:flex;flex-direction:column;position:relative;z-index:var(--z-index)}.hds-hero__bottom-container{background-color:var(--bottom-background-color);width:100%}.hds-hero__bottom-content-aligner{justify-content:space-between;margin:0 auto;max-width:var(--container-width-xl);width:100%}.hds-hero__arrow-icon-container,.hds-hero__bottom-content-aligner{display:flex;position:relative;z-index:calc(var(--z-index) + 1)}.hds-hero--arrow-icon{--icon-size:var(--arrow-icon-size)!important;color:var(--arrow-icon-color);margin-left:calc(var(--padding-horizontal) - var(--arrow-icon-size) / 4);margin-top:calc(0px - var(--arrow-icon-size) / 6.4 - var(--spacing-layout-xs))}.hds-hero__information-container{display:flex;flex-grow:1;justify-content:flex-end;padding-top:var(--information-padding-top)}.hds-hero__information-container span{color:var(--information-color);padding:var(--spacing-2-xs) var(--spacing-s)}.hds-hero__title{font-size:var(--fontsize-heading-xl-mobile);font-weight:400;letter-spacing:-1px;line-height:var(--lineheight-s);margin:0 0 var(--spacing-s) 0}.hds-hero__text{font-size:var(--fontsize-body-l);margin:0 0 var(--spacing-s) 0}.hds-hero__text:last-of-type{margin:0 0 var(--spacing-l) 0}.hds-hero__container{margin-left:auto;margin-right:auto;max-width:var(--container-width-xl)}.hds-hero__content{display:flex;padding:var(--padding-vertical) var(--padding-horizontal)}.hds-hero__content--single-column,.hds-hero__content--two-columns{display:flex;flex-direction:column}.hds-hero__content--two-columns{align-items:center}.hds-hero__content--two-columns__image-container{display:none}.hds-hero__card{display:block;max-width:var(--container-width-xl)}.hds-hero__koros-container,.hds-hero__koros-container--inward-koros,.hds-hero__koros-container--overflow-bottom{height:var(--koros-height);inset:0;overflow:hidden;position:absolute;z-index:1}.hds-hero__koros-container--inward-koros{position:relative}.hds-hero__koros-container--overflow-bottom{bottom:calc(-1 * var(--koros-height));display:flex;flex-direction:column;justify-content:flex-end;top:auto}.hds-hero__koros-container>div{bottom:0;height:100%;position:absolute;width:100%}.hds-hero__card--centered-content{text-align:center;width:100%}.hds-hero__image{display:block;width:100%}.hds-hero__koros-and-image-container{display:block;position:relative}.hds-hero__image-below-koros{display:block}.hds-hero__image-below-koros .hds-hero__image{height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:var(--image-position);object-position:var(--image-position)}.hds-hero--with-background__container{position:relative}.hds-hero--with-background__background{position:relative;width:100%}.hds-hero--with-background__background .hds-hero__image{height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:var(--image-position);object-position:var(--image-position)}.hds-hero--with-background__content-columns{display:flex;margin:0 auto;max-width:var(--container-width-xl)}.hds-hero--with-background__empty-column{display:none}.hds-hero--background-image .hds-hero__content{padding:0}.hds-hero--background-image .hds-hero__card{background-color:var(--background-color);padding:var(--padding-vertical) var(--padding-horizontal)}.hds-hero--background-image__koros{bottom:0;height:var(--koros-height);overflow:hidden;position:absolute;width:100%;--koros-color:var(--top-koros-color)}.hds-hero--diagonal-koros .hds-hero--with-background__container{display:flex;flex-direction:column;overflow:hidden;position:relative;z-index:1}.hds-hero--diagonal-koros .hds-hero__content{box-sizing:border-box;display:block;padding:0;width:100%;z-index:2}.hds-hero--diagonal-koros .hds-hero__card{background-color:var(--background-color);padding:var(--padding-vertical) var(--padding-horizontal)}.hds-hero--diagonal-koros__koros-and-background{height:var(--koros-height);position:absolute;transform:rotate(180deg);width:100%}.hds-hero--diagonal-koros__koros-aligner{position:relative;z-index:1}.hds-hero--diagonal-koros__koros-and-background .hds-hero__koros-container{height:100%;overflow:hidden;position:absolute;top:0;width:100%}.hds-hero--with-background__background,.hds-hero__image-below-koros{height:300px}@media only screen and (min-width:768px){.hds-hero{--padding-horizontal:var(--horizontal-padding-medium);--padding-vertical:var(--spacing-layout-m);--arrow-icon-size:164px}.hds-hero--with-background__background,.hds-hero__image-below-koros{height:400px}.hds-hero__information-container span{padding-bottom:var(--spacing-xs);padding-right:var(--spacing-m);padding-top:var(--spacing-xs)}}@media only screen and (min-width:992px){.hds-hero{--padding-horizontal:var(--horizontal-padding-large);--padding-vertical:var(--spacing-layout-xl)}.hds-hero__text{font-size:var(--fontsize-body-xl)}.hds-hero--image-left .hds-hero__image-below-koros,.hds-hero--image-right .hds-hero__image-below-koros{display:none}.hds-hero--image-left .hds-hero__information-container,.hds-hero--image-right .hds-hero__information-container{--information-padding-top:var(--koros-height)}.hds-hero__content--two-columns{flex-direction:row}.hds-hero__content--two-columns>*{width:50%}.hds-hero__content--two-columns>:first-child{margin-right:var(--spacing-xl)}.hds-hero__content--two-columns>:last-child{margin-left:var(--spacing-xl)}.hds-hero__content--two-columns__image-container{display:block}.hds-hero--background-image .hds-hero--with-background__container{padding:var(--padding-vertical) var(--padding-horizontal)}.hds-hero--background-image .hds-hero__content{--padding-vertical:var(--spacing-2-xl);display:flex;flex-direction:row;margin:0 auto;max-width:var(--container-width-xl)}.hds-hero--background-image .hds-hero__card{width:50%}.hds-hero--with-background__background{height:auto;inset:0;position:absolute;width:auto;z-index:-1}.hds-hero--with-background__empty-column{display:block;width:45%}.hds-hero--diagonal-koros .hds-hero__content{background-color:transparent;padding:var(--padding-vertical) 0}.hds-hero--diagonal-koros .hds-hero__card{background:none;padding:0 var(--padding-horizontal);width:55%}.hds-hero--diagonal-koros__koros-aligner{bottom:0;max-width:var(--container-width-xl);position:absolute;right:var(--diagonal-koros-position);top:0;width:100%;z-index:1}.hds-hero--diagonal-koros__koros-and-background{display:block;height:100%;inset:0;overflow:visible;position:absolute;transform:rotate(135deg);transform-origin:center;width:150%}.hds-hero--diagonal-koros__koros-and-background:after{background-color:var(--koros-color);content:"";display:block;height:1500px;left:0;position:absolute;top:50px;width:150%}.hds-hero--diagonal-koros__koros-and-background .hds-hero__koros-container{height:100%;overflow:hidden;position:absolute;top:0;width:100%;z-index:1}.hds-hero--background-image__koros{--koros-color:var(--bottom-koros-color)}.hds-hero__title{font-size:var(--fontsize-heading-xl)}}@media only screen and (min-width:1248px){.hds-hero{--padding-horizontal:var(--horizontal-padding-x-large)}.hds-hero__title{font-size:var(--fontsize-heading-xxl);letter-spacing:-1.2px;line-height:var(--lineheight-s)}.hds-hero--diagonal-koros .hds-hero__text{padding-right:var(--spacing-l)}.hds-hero__content--two-columns>:first-child{margin-right:var(--spacing-2-xl)}.hds-hero__content--two-columns>:last-child{margin-left:var(--spacing-2-xl)}}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/hero/hero.css%23sass","../../../src/components/hero/hero.css"],"names":[],"mappings":"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","file":"hero.min.css","sourcesContent":[".hds-hero {\n  --arrow-icon-color: var(--color);\n  --arrow-icon-size: 128px;\n  --background-color: var(--color-white);\n  --color: var(--color-black-90);\n  --diagonal-koros-position: 45%;\n  --horizontal-padding-large: var(--spacing-layout-xs);\n  --horizontal-padding-medium: var(--spacing-layout-xs);\n  --horizontal-padding-small: var(--spacing-layout-2-xs);\n  --horizontal-padding-x-large: var(--spacing-layout-xs);\n  --image-position: bottom right;\n  --koros-color: var(--color-white);\n  --bottom-koros-color: var(--koros-color);\n  --koros-height: 85px;\n  --padding-horizontal: var(--horizontal-padding-small);\n  --padding-vertical: var(--spacing-xl);\n  --z-index: 1;\n  --bottom-background-color: transparent;\n  --information-padding-top: 0;\n  --information-color: inherit;\n\n  background-color: var(--background-color);\n  color: var(--color);\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  z-index: var(--z-index);\n}\n\n.hds-hero__bottom-container {\n  background-color: var(--bottom-background-color);\n  width: 100%;\n}\n\n.hds-hero__bottom-content-aligner {\n  display: flex;\n  justify-content: space-between;\n  margin: 0 auto;\n  max-width: var(--container-width-xl);\n  position: relative;\n  width: 100%;\n  z-index: calc(var(--z-index) + 1);\n}\n\n.hds-hero__arrow-icon-container {\n  display: flex;\n  position: relative;\n  z-index: calc(var(--z-index) + 1);\n}\n\n.hds-hero--arrow-icon {\n  --icon-size: var(--arrow-icon-size) !important;\n\n  color: var(--arrow-icon-color);\n\n  /* the following is magic to calculate a proper margins (icon has empty space in it that is taken into account)  */\n  margin-left: calc(var(--padding-horizontal) - (var(--arrow-icon-size) / 4));\n  margin-top: calc(0px - var(--arrow-icon-size) / (128 / 20) - var(--spacing-layout-xs));\n}\n\n.hds-hero__information-container {\n  display: flex;\n  flex-grow: 1;\n  justify-content: flex-end;\n  padding-top: var(--information-padding-top);\n}\n\n.hds-hero__information-container span {\n  color: var(--information-color);\n  padding: var(--spacing-2-xs) var(--spacing-s);\n}\n\n.hds-hero__title {\n  font-size: var(--fontsize-heading-xl-mobile);\n  font-weight: normal;\n  letter-spacing: -1px;\n  line-height: var(--lineheight-s);\n  margin: 0 0 var(--spacing-s) 0;\n}\n\n.hds-hero__text {\n  font-size: var(--fontsize-body-l);\n  margin: 0 0 var(--spacing-s) 0;\n}\n\n.hds-hero__text:last-of-type {\n  margin: 0 0 var(--spacing-l) 0;\n}\n\n.hds-hero__container {\n  margin-left: auto;\n  margin-right: auto;\n  max-width: var(--container-width-xl);\n}\n\n.hds-hero__content {\n  display: flex;\n  padding: var(--padding-vertical) var(--padding-horizontal);\n}\n\n.hds-hero__content--single-column,\n.hds-hero__content--two-columns {\n  display: flex;\n  flex-direction: column;\n}\n\n.hds-hero__content--two-columns {\n  align-items: center;\n}\n\n.hds-hero__content--two-columns__image-container {\n  display: none;\n}\n\n.hds-hero__card {\n  display: block;\n  max-width: var(--container-width-xl);\n}\n\n.hds-hero__koros-container,\n.hds-hero__koros-container--overflow-bottom,\n.hds-hero__koros-container--inward-koros {\n  height: var(--koros-height);\n  inset: 0;\n  overflow: hidden;\n  position: absolute;\n  z-index: 1;\n}\n\n.hds-hero__koros-container--inward-koros {\n  position: relative;\n}\n\n.hds-hero__koros-container--overflow-bottom {\n  bottom: calc(-1 * var(--koros-height));\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  top: auto;\n}\n\n.hds-hero__koros-container > div {\n  bottom: 0;\n  height: 100%;\n  position: absolute;\n  width: 100%;\n}\n\n.hds-hero__card--centered-content {\n  text-align: center;\n  width: 100%;\n}\n\n.hds-hero__image {\n  display: block;\n  width: 100%;\n}\n\n.hds-hero__koros-and-image-container {\n  display: block;\n  position: relative;\n}\n\n.hds-hero__image-below-koros {\n  display: block;\n}\n\n.hds-hero__image-below-koros .hds-hero__image {\n  height: 100%;\n  object-fit: cover;\n  object-position: var(--image-position);\n}\n\n.hds-hero--with-background__container {\n  position: relative;\n}\n\n.hds-hero--with-background__background {\n  position: relative;\n  width: 100%;\n}\n\n.hds-hero--with-background__background .hds-hero__image {\n  height: 100%;\n  object-fit: cover;\n  object-position: var(--image-position);\n}\n\n.hds-hero--with-background__content-columns {\n  display: flex;\n  margin: 0 auto;\n  max-width: var(--container-width-xl);\n}\n\n.hds-hero--with-background__empty-column {\n  display: none;\n}\n\n.hds-hero--background-image .hds-hero__content {\n  padding: 0;\n}\n\n.hds-hero--background-image .hds-hero__card {\n  background-color: var(--background-color);\n  padding: var(--padding-vertical) var(--padding-horizontal);\n}\n\n.hds-hero--background-image__koros {\n  bottom: 0;\n  height: var(--koros-height);\n  overflow: hidden;\n  position: absolute;\n  width: 100%;\n\n  --koros-color: var(--top-koros-color);\n}\n\n.hds-hero--diagonal-koros .hds-hero--with-background__container {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  position: relative;\n  z-index: 1;\n}\n\n.hds-hero--diagonal-koros .hds-hero__content {\n  box-sizing: border-box;\n  display: block;\n  padding: 0;\n  width: 100%;\n  z-index: 2;\n}\n\n.hds-hero--diagonal-koros .hds-hero__card {\n  background-color: var(--background-color);\n  padding: var(--padding-vertical) var(--padding-horizontal);\n}\n\n.hds-hero--diagonal-koros__koros-and-background {\n  height: var(--koros-height);\n  position: absolute;\n  transform: rotate(180deg);\n  width: 100%;\n}\n\n.hds-hero--diagonal-koros__koros-aligner {\n  position: relative;\n  z-index: 1;\n}\n\n.hds-hero--diagonal-koros__koros-and-background .hds-hero__koros-container {\n  height: 100%;\n  overflow: hidden;\n  position: absolute;\n  top: 0;\n  width: 100%;\n}\n\n.hds-hero--with-background__background,\n.hds-hero__image-below-koros {\n  height: 300px;\n}\n\n@media only screen and (min-width: 768px) {\n  .hds-hero {\n    --padding-horizontal: var(--horizontal-padding-medium);\n    --padding-vertical: var(--spacing-layout-m);\n    --arrow-icon-size: 164px;\n  }\n\n  .hds-hero--with-background__background,\n  .hds-hero__image-below-koros {\n    height: 400px;\n  }\n\n  .hds-hero__information-container span {\n    padding-bottom: var(--spacing-xs);\n    padding-right: var(--spacing-m);\n    padding-top: var(--spacing-xs);\n  }\n}\n\n@media only screen and (min-width: 992px) {\n  .hds-hero {\n    --padding-horizontal: var(--horizontal-padding-large);\n    --padding-vertical: var(--spacing-layout-xl);\n  }\n\n  .hds-hero__text {\n    font-size: var(--fontsize-body-xl);\n  }\n\n  .hds-hero--image-left .hds-hero__image-below-koros,\n  .hds-hero--image-right .hds-hero__image-below-koros {\n    display: none;\n  }\n\n  .hds-hero--image-left .hds-hero__information-container,\n  .hds-hero--image-right .hds-hero__information-container {\n    --information-padding-top: var(--koros-height);\n  }\n\n  .hds-hero__content--two-columns {\n    flex-direction: row;\n  }\n\n  .hds-hero__content--two-columns > * {\n    width: 50%;\n  }\n\n  .hds-hero__content--two-columns > *:first-child {\n    margin-right: var(--spacing-xl);\n  }\n\n  .hds-hero__content--two-columns > *:last-child {\n    margin-left: var(--spacing-xl);\n  }\n\n  .hds-hero__content--two-columns__image-container {\n    display: block;\n  }\n\n  .hds-hero--background-image .hds-hero--with-background__container {\n    padding: var(--padding-vertical) var(--padding-horizontal);\n  }\n\n  .hds-hero--background-image .hds-hero__content {\n    --padding-vertical: var(--spacing-2-xl);\n\n    display: flex;\n    flex-direction: row;\n    margin: 0 auto;\n    max-width: var(--container-width-xl);\n  }\n\n  .hds-hero--background-image .hds-hero__card {\n    width: 50%;\n  }\n\n  .hds-hero--with-background__background {\n    height: auto;\n    inset: 0;\n    position: absolute;\n    width: auto;\n    z-index: -1;\n  }\n\n  .hds-hero--with-background__empty-column {\n    display: block;\n    width: 45%;\n  }\n\n  .hds-hero--diagonal-koros .hds-hero__content {\n    background-color: transparent;\n    padding: var(--padding-vertical) 0;\n  }\n\n  .hds-hero--diagonal-koros .hds-hero__card {\n    background: none;\n    padding: 0 var(--padding-horizontal);\n    width: 55%;\n  }\n\n  .hds-hero--diagonal-koros__koros-aligner {\n    bottom: 0;\n    max-width: var(--container-width-xl);\n    position: absolute;\n    right: var(--diagonal-koros-position);\n    top: 0;\n    width: 100%;\n    z-index: 1;\n  }\n\n  .hds-hero--diagonal-koros__koros-and-background {\n    display: block;\n    height: 100%;\n    inset: 0;\n    overflow: visible;\n    position: absolute;\n    transform: rotate(135deg);\n    transform-origin: center;\n    width: 150%;\n  }\n\n  .hds-hero--diagonal-koros__koros-and-background:after {\n    background-color: var(--koros-color);\n    content: '';\n    display: block;\n    height: 1500px;\n    left: 0;\n    position: absolute;\n    top: 50px;\n    width: 150%;\n  }\n\n  .hds-hero--diagonal-koros__koros-and-background .hds-hero__koros-container {\n    height: 100%;\n    overflow: hidden;\n    position: absolute;\n    top: 0;\n    width: 100%;\n    z-index: 1;\n  }\n\n  .hds-hero--background-image__koros {\n    --koros-color: var(--bottom-koros-color);\n  }\n\n  .hds-hero__title {\n    font-size: var(--fontsize-heading-xl);\n  }\n}\n\n@media only screen and (min-width: 1248px) {\n  .hds-hero {\n    --padding-horizontal: var(--horizontal-padding-x-large);\n  }\n\n  .hds-hero__title {\n    font-size: var(--fontsize-heading-xxl);\n    letter-spacing: -1.2px;\n    line-height: var(--lineheight-s);\n  }\n\n  .hds-hero--diagonal-koros .hds-hero__text {\n    padding-right: var(--spacing-l);\n  }\n\n  .hds-hero__content--two-columns > *:first-child {\n    margin-right: var(--spacing-2-xl);\n  }\n\n  .hds-hero__content--two-columns > *:last-child {\n    margin-left: var(--spacing-2-xl);\n  }\n}\n",".hds-hero {\n  --arrow-icon-color: var(--color);\n  --arrow-icon-size: 128px;\n  --background-color: var(--color-white);\n  --color: var(--color-black-90);\n  --diagonal-koros-position: 45%;\n  --horizontal-padding-large: var(--spacing-layout-xs);\n  --horizontal-padding-medium: var(--spacing-layout-xs);\n  --horizontal-padding-small: var(--spacing-layout-2-xs);\n  --horizontal-padding-x-large: var(--spacing-layout-xs);\n  --image-position: bottom right;\n  --koros-color: var(--color-white);\n  --bottom-koros-color: var(--koros-color);\n  --koros-height: 85px;\n  --padding-horizontal: var(--horizontal-padding-small);\n  --padding-vertical: var(--spacing-xl);\n  --z-index: 1;\n  --bottom-background-color: transparent;\n  --information-padding-top: 0;\n  --information-color: inherit;\n\n  background-color: var(--background-color);\n  color: var(--color);\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  z-index: var(--z-index);\n}\n\n.hds-hero__bottom-container {\n  background-color: var(--bottom-background-color);\n  width: 100%;\n}\n\n.hds-hero__bottom-content-aligner {\n  display: flex;\n  justify-content: space-between;\n  margin: 0 auto;\n  max-width: var(--container-width-xl);\n  position: relative;\n  width: 100%;\n  z-index: calc(var(--z-index) + 1);\n}\n\n.hds-hero__arrow-icon-container {\n  display: flex;\n  position: relative;\n  z-index: calc(var(--z-index) + 1);\n}\n\n.hds-hero--arrow-icon {\n  --icon-size: var(--arrow-icon-size) !important;\n\n  color: var(--arrow-icon-color);\n\n  /* the following is magic to calculate a proper margins (icon has empty space in it that is taken into account)  */\n  margin-left: calc(var(--padding-horizontal) - (var(--arrow-icon-size) / 4));\n  margin-top: calc(0px - var(--arrow-icon-size) / (128 / 20) - var(--spacing-layout-xs));\n}\n\n.hds-hero__information-container {\n  display: flex;\n  flex-grow: 1;\n  justify-content: flex-end;\n  padding-top: var(--information-padding-top);\n}\n\n.hds-hero__information-container span {\n  color: var(--information-color);\n  padding: var(--spacing-2-xs) var(--spacing-s);\n}\n\n.hds-hero__title {\n  font-size: var(--fontsize-heading-xl-mobile);\n  font-weight: normal;\n  letter-spacing: -1px;\n  line-height: var(--lineheight-s);\n  margin: 0 0 var(--spacing-s) 0;\n}\n\n.hds-hero__text {\n  font-size: var(--fontsize-body-l);\n  margin: 0 0 var(--spacing-s) 0;\n}\n\n.hds-hero__text:last-of-type {\n  margin: 0 0 var(--spacing-l) 0;\n}\n\n.hds-hero__container {\n  margin-left: auto;\n  margin-right: auto;\n  max-width: var(--container-width-xl);\n}\n\n.hds-hero__content {\n  display: flex;\n  padding: var(--padding-vertical) var(--padding-horizontal);\n}\n\n.hds-hero__content--single-column,\n.hds-hero__content--two-columns {\n  display: flex;\n  flex-direction: column;\n}\n\n.hds-hero__content--two-columns {\n  align-items: center;\n}\n\n.hds-hero__content--two-columns__image-container {\n  display: none;\n}\n\n.hds-hero__card {\n  display: block;\n  max-width: var(--container-width-xl);\n}\n\n.hds-hero__koros-container,\n.hds-hero__koros-container--overflow-bottom,\n.hds-hero__koros-container--inward-koros {\n  height: var(--koros-height);\n  inset: 0;\n  overflow: hidden;\n  position: absolute;\n  z-index: 1;\n}\n\n.hds-hero__koros-container--inward-koros {\n  position: relative;\n}\n\n.hds-hero__koros-container--overflow-bottom {\n  bottom: calc(-1 * var(--koros-height));\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  top: auto;\n}\n\n.hds-hero__koros-container > div {\n  bottom: 0;\n  height: 100%;\n  position: absolute;\n  width: 100%;\n}\n\n.hds-hero__card--centered-content {\n  text-align: center;\n  width: 100%;\n}\n\n.hds-hero__image {\n  display: block;\n  width: 100%;\n}\n\n.hds-hero__koros-and-image-container {\n  display: block;\n  position: relative;\n}\n\n.hds-hero__image-below-koros {\n  display: block;\n}\n\n.hds-hero__image-below-koros .hds-hero__image {\n  height: 100%;\n  object-fit: cover;\n  object-position: var(--image-position);\n}\n\n.hds-hero--with-background__container {\n  position: relative;\n}\n\n.hds-hero--with-background__background {\n  position: relative;\n  width: 100%;\n}\n\n.hds-hero--with-background__background .hds-hero__image {\n  height: 100%;\n  object-fit: cover;\n  object-position: var(--image-position);\n}\n\n.hds-hero--with-background__content-columns {\n  display: flex;\n  margin: 0 auto;\n  max-width: var(--container-width-xl);\n}\n\n.hds-hero--with-background__empty-column {\n  display: none;\n}\n\n.hds-hero--background-image .hds-hero__content {\n  padding: 0;\n}\n\n.hds-hero--background-image .hds-hero__card {\n  background-color: var(--background-color);\n  padding: var(--padding-vertical) var(--padding-horizontal);\n}\n\n.hds-hero--background-image__koros {\n  bottom: 0;\n  height: var(--koros-height);\n  overflow: hidden;\n  position: absolute;\n  width: 100%;\n\n  --koros-color: var(--top-koros-color);\n}\n\n.hds-hero--diagonal-koros .hds-hero--with-background__container {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  position: relative;\n  z-index: 1;\n}\n\n.hds-hero--diagonal-koros .hds-hero__content {\n  box-sizing: border-box;\n  display: block;\n  padding: 0;\n  width: 100%;\n  z-index: 2;\n}\n\n.hds-hero--diagonal-koros .hds-hero__card {\n  background-color: var(--background-color);\n  padding: var(--padding-vertical) var(--padding-horizontal);\n}\n\n.hds-hero--diagonal-koros__koros-and-background {\n  height: var(--koros-height);\n  position: absolute;\n  transform: rotate(180deg);\n  width: 100%;\n}\n\n.hds-hero--diagonal-koros__koros-aligner {\n  position: relative;\n  z-index: 1;\n}\n\n.hds-hero--diagonal-koros__koros-and-background .hds-hero__koros-container {\n  height: 100%;\n  overflow: hidden;\n  position: absolute;\n  top: 0;\n  width: 100%;\n}\n\n.hds-hero--with-background__background,\n.hds-hero__image-below-koros {\n  height: 300px;\n}\n\n@media only screen and (min-width: 768px) {\n  .hds-hero {\n    --padding-horizontal: var(--horizontal-padding-medium);\n    --padding-vertical: var(--spacing-layout-m);\n    --arrow-icon-size: 164px;\n  }\n\n  .hds-hero--with-background__background,\n  .hds-hero__image-below-koros {\n    height: 400px;\n  }\n\n  .hds-hero__information-container span {\n    padding-bottom: var(--spacing-xs);\n    padding-right: var(--spacing-m);\n    padding-top: var(--spacing-xs);\n  }\n}\n\n@media only screen and (min-width: 992px) {\n  .hds-hero {\n    --padding-horizontal: var(--horizontal-padding-large);\n    --padding-vertical: var(--spacing-layout-xl);\n  }\n\n  .hds-hero__text {\n    font-size: var(--fontsize-body-xl);\n  }\n\n  .hds-hero--image-left .hds-hero__image-below-koros,\n  .hds-hero--image-right .hds-hero__image-below-koros {\n    display: none;\n  }\n\n  .hds-hero--image-left .hds-hero__information-container,\n  .hds-hero--image-right .hds-hero__information-container {\n    --information-padding-top: var(--koros-height);\n  }\n\n  .hds-hero__content--two-columns {\n    flex-direction: row;\n  }\n\n  .hds-hero__content--two-columns > * {\n    width: 50%;\n  }\n\n  .hds-hero__content--two-columns > *:first-child {\n    margin-right: var(--spacing-xl);\n  }\n\n  .hds-hero__content--two-columns > *:last-child {\n    margin-left: var(--spacing-xl);\n  }\n\n  .hds-hero__content--two-columns__image-container {\n    display: block;\n  }\n\n  .hds-hero--background-image .hds-hero--with-background__container {\n    padding: var(--padding-vertical) var(--padding-horizontal);\n  }\n\n  .hds-hero--background-image .hds-hero__content {\n    --padding-vertical: var(--spacing-2-xl);\n\n    display: flex;\n    flex-direction: row;\n    margin: 0 auto;\n    max-width: var(--container-width-xl);\n  }\n\n  .hds-hero--background-image .hds-hero__card {\n    width: 50%;\n  }\n\n  .hds-hero--with-background__background {\n    height: auto;\n    inset: 0;\n    position: absolute;\n    width: auto;\n    z-index: -1;\n  }\n\n  .hds-hero--with-background__empty-column {\n    display: block;\n    width: 45%;\n  }\n\n  .hds-hero--diagonal-koros .hds-hero__content {\n    background-color: transparent;\n    padding: var(--padding-vertical) 0;\n  }\n\n  .hds-hero--diagonal-koros .hds-hero__card {\n    background: none;\n    padding: 0 var(--padding-horizontal);\n    width: 55%;\n  }\n\n  .hds-hero--diagonal-koros__koros-aligner {\n    bottom: 0;\n    max-width: var(--container-width-xl);\n    position: absolute;\n    right: var(--diagonal-koros-position);\n    top: 0;\n    width: 100%;\n    z-index: 1;\n  }\n\n  .hds-hero--diagonal-koros__koros-and-background {\n    display: block;\n    height: 100%;\n    inset: 0;\n    overflow: visible;\n    position: absolute;\n    transform: rotate(135deg);\n    transform-origin: center;\n    width: 150%;\n  }\n\n  .hds-hero--diagonal-koros__koros-and-background:after {\n    background-color: var(--koros-color);\n    content: '';\n    display: block;\n    height: 1500px;\n    left: 0;\n    position: absolute;\n    top: 50px;\n    width: 150%;\n  }\n\n  .hds-hero--diagonal-koros__koros-and-background .hds-hero__koros-container {\n    height: 100%;\n    overflow: hidden;\n    position: absolute;\n    top: 0;\n    width: 100%;\n    z-index: 1;\n  }\n\n  .hds-hero--background-image__koros {\n    --koros-color: var(--bottom-koros-color);\n  }\n\n  .hds-hero__title {\n    font-size: var(--fontsize-heading-xl);\n  }\n}\n\n@media only screen and (min-width: 1248px) {\n  .hds-hero {\n    --padding-horizontal: var(--horizontal-padding-x-large);\n  }\n\n  .hds-hero__title {\n    font-size: var(--fontsize-heading-xxl);\n    letter-spacing: -1.2px;\n    line-height: var(--lineheight-s);\n  }\n\n  .hds-hero--diagonal-koros .hds-hero__text {\n    padding-right: var(--spacing-l);\n  }\n\n  .hds-hero__content--two-columns > *:first-child {\n    margin-right: var(--spacing-2-xl);\n  }\n\n  .hds-hero__content--two-columns > *:last-child {\n    margin-left: var(--spacing-2-xl);\n  }\n}\n"]}

package/lib/components/highlight/highlight.css

@@ -0,0 +1,62 @@
+.hds-highlight {
+  --accent-line-color: var(--color-bus);
+  --text-color: var(--color-black-90);
+  --size-width-s: 264px;
+  --size-width-m: 536px;
+  --size-width-l: 680px;
+  --width: var(--size-width-m);
+  --margin: var(--spacing-m) 0;
+  border-left: 8px solid var(--accent-line-color);
+  color: var(--text-color);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin: var(--margin);
+  max-width: 100%;
+  padding: 0;
+  padding-left: var(--spacing-s);
+  grid-row-gap: var(--spacing-m);
+  row-gap: var(--spacing-m);
+  width: var(--width);
+}
+
+.hds-blockquote {
+  margin: 0;
+  padding: 0;
+}
+
+.hds-highlight__text {
+  color: var(--text-color);
+  font-size: var(--fontsize-heading-m);
+  letter-spacing: -0.2px;
+  line-height: var(--lineheight-m);
+  margin: 0;
+  padding: 0;
+}
+
+.hds-highlight--small {
+  --margin: var(--spacing-s) 0;
+  --width: var(--size-width-s);
+}
+
+.hds-highlight--large {
+  --margin: var(--spacing-l) 0;
+  --width: var(--size-width-l);
+}
+
+.hds-highlight--large .hds-highlight__text {
+  font-size: var(--fontsize-heading-l);
+  letter-spacing: -0.4px;
+  line-height: var(--lineheight-l);
+}
+
+.hds-highlight__quote:before,
+.hds-highlight__quote:after {
+  content: '"';
+  display: inline;
+}
+
+.hds-highlight__reference {
+  font-size: var(--fontsize-heading-xs);
+  line-height: var(--lineheight-m);
+}

package/lib/components/highlight/highlight.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/highlight/highlight.css%23sass","../../../src/components/highlight/highlight.css"],"names":[],"mappings":"AAAA;EACE,qCAAA;EACA,mCAAA;EACA,qBAAA;EACA,qBAAA;EACA,qBAAA;EACA,4BAAA;EACA,4BAAA;EAEA,+CAAA;EACA,wBAAA;EACA,aAAA;EACA,sBAAA;EACA,uBAAA;EACA,qBAAA;EACA,eAAA;EACA,UAAA;EACA,8BAAA;EACA,8BAAA;EAAA,yBAAA;EACA,mBAAA;ACAF;;ADGA;ECAA,SAAA;EDEE,UAAA;ACAF;;ADGA;ECAA,wBAAA;EDEE,oCAAA;EACA,sBAAA;EACA,gCAAA;EACA,SAAA;EACA,UAAA;ACAF;;ADGA;ECAA,4BAAA;EDEE,4BAAA;ACAF;;ADGA;ECAA,4BAAA;EDEE,4BAAA;ACAF;;ADGA;ECAA,oCAAA;EDEE,sBAAA;EACA,gCAAA;ACAF;;ADGA;;EAEE,YAAA;EACA,eAAA;ACAF;;ADGA;ECAA,qCAAA;EDEE,gCAAA;ACAF","file":"highlight.css","sourcesContent":[".hds-highlight {\n  --accent-line-color: var(--color-bus);\n  --text-color: var(--color-black-90);\n  --size-width-s: 264px;\n  --size-width-m: 536px;\n  --size-width-l: 680px;\n  --width: var(--size-width-m);\n  --margin: var(--spacing-m) 0;\n\n  border-left: 8px solid var(--accent-line-color);\n  color: var(--text-color);\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  margin: var(--margin);\n  max-width: 100%;\n  padding: 0;\n  padding-left: var(--spacing-s);\n  row-gap: var(--spacing-m);\n  width: var(--width);\n}\n\n.hds-blockquote {\n  margin: 0;\n  padding: 0;\n}\n\n.hds-highlight__text {\n  color: var(--text-color);\n  font-size: var(--fontsize-heading-m);\n  letter-spacing: -0.2px;\n  line-height: var(--lineheight-m);\n  margin: 0;\n  padding: 0;\n}\n\n.hds-highlight--small {\n  --margin: var(--spacing-s) 0;\n  --width: var(--size-width-s);\n}\n\n.hds-highlight--large {\n  --margin: var(--spacing-l) 0;\n  --width: var(--size-width-l);\n}\n\n.hds-highlight--large .hds-highlight__text {\n  font-size: var(--fontsize-heading-l);\n  letter-spacing: -0.4px;\n  line-height: var(--lineheight-l);\n}\n\n.hds-highlight__quote:before,\n.hds-highlight__quote:after {\n  content: '\"';\n  display: inline;\n}\n\n.hds-highlight__reference {\n  font-size: var(--fontsize-heading-xs);\n  line-height: var(--lineheight-m);\n}\n",".hds-highlight {\n  --accent-line-color: var(--color-bus);\n  --text-color: var(--color-black-90);\n  --size-width-s: 264px;\n  --size-width-m: 536px;\n  --size-width-l: 680px;\n  --width: var(--size-width-m);\n  --margin: var(--spacing-m) 0;\n\n  border-left: 8px solid var(--accent-line-color);\n  color: var(--text-color);\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  margin: var(--margin);\n  max-width: 100%;\n  padding: 0;\n  padding-left: var(--spacing-s);\n  row-gap: var(--spacing-m);\n  width: var(--width);\n}\n\n.hds-blockquote {\n  margin: 0;\n  padding: 0;\n}\n\n.hds-highlight__text {\n  color: var(--text-color);\n  font-size: var(--fontsize-heading-m);\n  letter-spacing: -0.2px;\n  line-height: var(--lineheight-m);\n  margin: 0;\n  padding: 0;\n}\n\n.hds-highlight--small {\n  --margin: var(--spacing-s) 0;\n  --width: var(--size-width-s);\n}\n\n.hds-highlight--large {\n  --margin: var(--spacing-l) 0;\n  --width: var(--size-width-l);\n}\n\n.hds-highlight--large .hds-highlight__text {\n  font-size: var(--fontsize-heading-l);\n  letter-spacing: -0.4px;\n  line-height: var(--lineheight-l);\n}\n\n.hds-highlight__quote:before,\n.hds-highlight__quote:after {\n  content: '\"';\n  display: inline;\n}\n\n.hds-highlight__reference {\n  font-size: var(--fontsize-heading-xs);\n  line-height: var(--lineheight-m);\n}\n"]}

package/lib/components/highlight/highlight.min.css

@@ -0,0 +1 @@
+.hds-highlight{--accent-line-color:var(--color-bus);--text-color:var(--color-black-90);--size-width-s:264px;--size-width-m:536px;--size-width-l:680px;--width:var(--size-width-m);--margin:var(--spacing-m) 0;border-left:8px solid var(--accent-line-color);color:var(--text-color);display:flex;flex-direction:column;justify-content:center;margin:var(--margin);max-width:100%;padding:0;padding-left:var(--spacing-s);grid-row-gap:var(--spacing-m);row-gap:var(--spacing-m);width:var(--width)}.hds-blockquote{margin:0;padding:0}.hds-highlight__text{color:var(--text-color);font-size:var(--fontsize-heading-m);letter-spacing:-.2px;line-height:var(--lineheight-m);margin:0;padding:0}.hds-highlight--small{--margin:var(--spacing-s) 0;--width:var(--size-width-s)}.hds-highlight--large{--margin:var(--spacing-l) 0;--width:var(--size-width-l)}.hds-highlight--large .hds-highlight__text{font-size:var(--fontsize-heading-l);letter-spacing:-.4px;line-height:var(--lineheight-l)}.hds-highlight__quote:after,.hds-highlight__quote:before{content:'"';display:inline}.hds-highlight__reference{font-size:var(--fontsize-heading-xs);line-height:var(--lineheight-m)}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/highlight/highlight.css%23sass","../../../src/components/highlight/highlight.css"],"names":[],"mappings":"AAAA,eACE,oCAAA,CACA,kCAAA,CACA,oBAAA,CACA,oBAAA,CACA,oBAAA,CACA,2BAAA,CACA,2BAAA,CAEA,8CAAA,CACA,uBAAA,CACA,YAAA,CACA,qBAAA,CACA,sBAAA,CACA,oBAAA,CACA,cAAA,CACA,SAAA,CACA,6BAAA,CACA,6BAAA,CAAA,wBAAA,CACA,kBCAF,CDGA,gBCAA,QAAA,CDEE,SCAF,CDGA,qBCAA,uBAAA,CDEE,mCAAA,CACA,oBAAA,CACA,+BAAA,CACA,QAAA,CACA,SCAF,CDGA,sBCAA,2BAAA,CDEE,2BCAF,CDGA,sBCAA,2BAAA,CDEE,2BCAF,CDGA,2CCAA,mCAAA,CDEE,oBAAA,CACA,+BCAF,CDGA,yDAEE,WAAA,CACA,cCAF,CDGA,0BCAA,oCAAA,CDEE,+BCAF","file":"highlight.min.css","sourcesContent":[".hds-highlight {\n  --accent-line-color: var(--color-bus);\n  --text-color: var(--color-black-90);\n  --size-width-s: 264px;\n  --size-width-m: 536px;\n  --size-width-l: 680px;\n  --width: var(--size-width-m);\n  --margin: var(--spacing-m) 0;\n\n  border-left: 8px solid var(--accent-line-color);\n  color: var(--text-color);\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  margin: var(--margin);\n  max-width: 100%;\n  padding: 0;\n  padding-left: var(--spacing-s);\n  row-gap: var(--spacing-m);\n  width: var(--width);\n}\n\n.hds-blockquote {\n  margin: 0;\n  padding: 0;\n}\n\n.hds-highlight__text {\n  color: var(--text-color);\n  font-size: var(--fontsize-heading-m);\n  letter-spacing: -0.2px;\n  line-height: var(--lineheight-m);\n  margin: 0;\n  padding: 0;\n}\n\n.hds-highlight--small {\n  --margin: var(--spacing-s) 0;\n  --width: var(--size-width-s);\n}\n\n.hds-highlight--large {\n  --margin: var(--spacing-l) 0;\n  --width: var(--size-width-l);\n}\n\n.hds-highlight--large .hds-highlight__text {\n  font-size: var(--fontsize-heading-l);\n  letter-spacing: -0.4px;\n  line-height: var(--lineheight-l);\n}\n\n.hds-highlight__quote:before,\n.hds-highlight__quote:after {\n  content: '\"';\n  display: inline;\n}\n\n.hds-highlight__reference {\n  font-size: var(--fontsize-heading-xs);\n  line-height: var(--lineheight-m);\n}\n",".hds-highlight {\n  --accent-line-color: var(--color-bus);\n  --text-color: var(--color-black-90);\n  --size-width-s: 264px;\n  --size-width-m: 536px;\n  --size-width-l: 680px;\n  --width: var(--size-width-m);\n  --margin: var(--spacing-m) 0;\n\n  border-left: 8px solid var(--accent-line-color);\n  color: var(--text-color);\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  margin: var(--margin);\n  max-width: 100%;\n  padding: 0;\n  padding-left: var(--spacing-s);\n  row-gap: var(--spacing-m);\n  width: var(--width);\n}\n\n.hds-blockquote {\n  margin: 0;\n  padding: 0;\n}\n\n.hds-highlight__text {\n  color: var(--text-color);\n  font-size: var(--fontsize-heading-m);\n  letter-spacing: -0.2px;\n  line-height: var(--lineheight-m);\n  margin: 0;\n  padding: 0;\n}\n\n.hds-highlight--small {\n  --margin: var(--spacing-s) 0;\n  --width: var(--size-width-s);\n}\n\n.hds-highlight--large {\n  --margin: var(--spacing-l) 0;\n  --width: var(--size-width-l);\n}\n\n.hds-highlight--large .hds-highlight__text {\n  font-size: var(--fontsize-heading-l);\n  letter-spacing: -0.4px;\n  line-height: var(--lineheight-l);\n}\n\n.hds-highlight__quote:before,\n.hds-highlight__quote:after {\n  content: '\"';\n  display: inline;\n}\n\n.hds-highlight__reference {\n  font-size: var(--fontsize-heading-xs);\n  line-height: var(--lineheight-m);\n}\n"]}