@mozaic-ds/web-components 1.0.0-beta.2 → 1.0.0-beta.3

package/dist/components/header/Header.svelte

@@ -1,195 +0,0 @@
-<svelte:options tag={null} />
-
-<script lang="ts">
-  import { EventHandler } from '../../utilities/EventHandler';
-  import Breadcrumb from '../breadcrumb/Breadcrumb.nested.svelte';
-  import type { BreadcrumbItems } from '../breadcrumb/breadcrumb.types';
-  import Tabs from '../tabs/Tabs.nested.svelte';
-  import type { TabsItems } from '../tabs/tabs.types';
-  import Badge from '../badge/Badge.nested.svelte';
-  import type { BadgeType } from '../badge/badge.types';
-  import type { A11yLabels, HeaderSize } from './Header.types';
-  import {
-    get_current_component,
-    createEventDispatcher,
-  } from 'svelte/internal';
-
-  export let title: string;
-  export let subtitle: string;
-  export let size: HeaderSize = 'm';
-  export let status: string;
-  export let statustype: BadgeType;
-  export let back: boolean | string;
-  export let breadcrumb: string | BreadcrumbItems[];
-  export let tabs: string | TabsItems[];
-  export let noshadow: boolean | string;
-  export let a11ylabels: string | A11yLabels;
-  export let scrollcontainer: HTMLElement;
-  export let nopaddingbreadcrumb: boolean;
-  export let hasicons: boolean;
-  export let hasselector: boolean;
-  export let hideoptions = false;
-
-  const headerAnimationThreshold = 5;
-
-  let eventHandler = new EventHandler(
-    get_current_component(),
-    createEventDispatcher(),
-  );
-  let originalScrollPos = 0;
-  let hasAnimation: boolean;
-  let root: HTMLElement;
-
-  $: parsedBreadcrumb =
-    typeof breadcrumb === 'string'
-      ? (JSON.parse(breadcrumb) as BreadcrumbItems[])
-      : breadcrumb;
-
-  $: parsedTabs =
-    typeof tabs === 'string' ? (JSON.parse(tabs) as TabsItems[]) : tabs;
-
-  $: parsedA11yLabels =
-    typeof a11ylabels === 'string'
-      ? (JSON.parse(a11ylabels) as A11yLabels)
-      : a11ylabels;
-
-  $: hasBack = back && back !== 'false';
-  $: hasNoShadow = noshadow && noshadow !== 'false';
-  $: {
-    hasAnimation = Boolean(scrollcontainer);
-    updateAnimation(scrollcontainer);
-  }
-  $: attributes = { ...$$restProps };
-  $: delete attributes.class;
-  function goBack() {
-    eventHandler.dispatch('on-back-click', {});
-  }
-
-  function updateAnimation(element: HTMLElement) {
-    if (element) {
-      element.removeEventListener('scroll', handleScroll);
-      element.addEventListener('scroll', handleScroll);
-    }
-  }
-
-  function handleScroll() {
-    const currentScrollPos = scrollcontainer.scrollTop;
-    const originHeaderMargin = Number(root.style.marginTop.replace('px', ''));
-
-    if (originalScrollPos > currentScrollPos) {
-      // scroll up
-      if (currentScrollPos < root.offsetHeight) {
-        // scroll while in header zone
-        root.style.marginTop = `${Math.max(
-          -currentScrollPos,
-          originHeaderMargin,
-        )}px`;
-      } else {
-        // scroll while below header zone
-        root.style.marginTop = '0';
-      }
-    } else {
-      // scroll down
-      if (currentScrollPos < root.offsetHeight) {
-        // scroll while in header zone
-
-        root.style.transition = 'none';
-        root.style.marginTop = `${-currentScrollPos}px`;
-      } else {
-        // scroll while below header zone
-        root.style.transition = 'margin-top ease-out 0.4s';
-        root.style.marginTop = `${
-          -root.offsetHeight - headerAnimationThreshold
-        }px`;
-      }
-    }
-
-    originalScrollPos = currentScrollPos;
-  }
-</script>
-
-<div
-  class="mc-header {size ? `mc-header--${size}` : ''}"
-  class:mc-header--no-shadow={hasNoShadow}
-  class:mc-header--animate={hasAnimation}
-  bind:this={root}
-  {...attributes}
->
-  <div class="mc-header__left">
-    {#if breadcrumb}
-      <div class="mc-header__breadcrumb">
-        <Breadcrumb
-          items={JSON.stringify(parsedBreadcrumb)}
-          nopadding={nopaddingbreadcrumb}
-          on:link-clicked={(event) =>
-            eventHandler.dispatch('link-clicked', event.detail)}
-        />
-      </div>
-    {/if}
-
-    {#if hasBack}
-      <button class="mc-header__back" on:click={goBack}>
-        <span class="mc-header__back__label">
-          {parsedA11yLabels?.['back'] || 'Back'}
-        </span>
-      </button>
-    {/if}
-
-    <div class="mc-header__heading">
-      <h1 class="mc-header__heading__title">
-        {title}
-      </h1>
-      {#if subtitle}
-        <div class="mc-header__heading__subtitle">
-          {subtitle}
-        </div>
-      {/if}
-      {#if status}
-        <div class="mc-header__heading__status">
-          <Badge label={status} type={statustype} />
-        </div>
-      {/if}
-    </div>
-  </div>
-  {#if !hideoptions}
-    <div class="mc-header__right">
-      {#if $$slots?.icons || hasicons}
-        <div class="mc-header__icons">
-          <slot name="icons" />
-        </div>
-      {/if}
-      {#if $$slots?.selector || hasselector}
-        <div
-          class:mc-header__selector--show-separator={($$slots?.icons ||
-            hasicons) &&
-            ($$slots?.selector || hasselector)}
-          class="mc-header__selector"
-        >
-          <slot name="selector" />
-        </div>
-      {/if}
-    </div>
-  {/if}
-  {#if parsedTabs && parsedTabs.length > 0}
-    <div class="mc-header__tabs">
-      <Tabs
-        tabs={JSON.stringify(parsedTabs)}
-        stateless={false}
-        selectedtab={undefined}
-        nodivider={true}
-        on:tab-clicked={(event) =>
-          eventHandler.dispatch('tab-clicked', event.detail)}
-      />
-    </div>
-  {/if}
-</div>
-
-<style lang="scss">
-  @import '@mozaic-ds/styles/settings-tools/_all-settings';
-  @import './_c.header';
-
-  :host {
-    display: block;
-    line-height: 0;
-  }
-</style>

package/dist/components/header/Header.types.d.ts

@@ -1,5 +0,0 @@
-export type HeaderSize = 's' | 'm' | 'l' | 'xl';
-export type A11yLabels = {
-    [key in 'back']: string;
-};
-//# sourceMappingURL=Header.types.d.ts.map

package/dist/components/header/Header.types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Header.types.d.ts","sourceRoot":"","sources":["../../../src/components/header/Header.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;AAEhD,MAAM,MAAM,UAAU,GAAG;KACtB,GAAG,IAAI,MAAM,GAAG,MAAM;CACxB,CAAC"}

package/dist/components/header/_c.header.scss

@@ -1,310 +0,0 @@
-@use 'sass:math';
-@import './_s.header';
-
-.mc-header {
-  $parent: get-parent-selector(&);
-
-  $selector-width: magic-unit-rem(16); // 256px
-  $icons-width: magic-unit-rem(2 * 3 + 1.5 * 2); // 3 icons (32px) + 2 gaps ()
-  $gap: magic-unit-rem(1.5); // 24px
-  $features-width: $selector-width + $icons-width + $gap * 2;
-
-  background-color: $color-grey-000;
-  display: flex;
-  flex-wrap: wrap;
-
-  box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.2);
-
-  @include set-font-face();
-  @include set-header-size($header-default-size, $parent);
-
-  &__left {
-    display: flex;
-    flex: 1;
-    flex-wrap: wrap;
-    margin-bottom: $mu100;
-    padding: {
-      top: $mu050;
-      left: $mu200;
-    }
-  }
-
-  &__right {
-    flex: 0;
-    display: flex;
-    margin: {
-      left: $gap;
-      bottom: $mu100;
-    }
-    padding: {
-      top: $mu100;
-      right: $mu200;
-    }
-    height: $mu200;
-    width: $features-width;
-    min-width: $features-width;
-    justify-content: flex-end;
-  }
-
-  &__tabs {
-    width: 100%;
-    position: relative;
-    padding: {
-      left: $mu200;
-      right: $mu200;
-    }
-
-    &::before {
-      content: '';
-      background-color: $color-grey-300;
-      top: 0;
-      right: 0;
-      height: 1px;
-      position: absolute;
-      width: 100%;
-      z-index: 1;
-    }
-  }
-
-  &__breadcrumb {
-    height: $mu300;
-    width: 100%;
-    display: flex;
-    align-items: center;
-  }
-
-  &__back {
-    @include unstyle-button();
-    background-color: transparent;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='2rem' width='2rem' viewBox='0 0 32 32' fill='%23333333'%3E%3Cpath d='M28 15H6.41l6.3-6.29a1 1 0 10-1.42-1.42l-8 8a1.15 1.15 0 00-.21.33 1 1 0 000 .76.93.93 0 00.21.33l8 8a1 1 0 001.42 0 1 1 0 000-1.42L6.41 17H28a1 1 0 000-2z'/%3E%3C/svg%3E");
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: $mu200;
-    color: currentColor;
-    display: inline-block;
-    flex: 0 0 $mu200;
-    margin: {
-      top: $mu050;
-      right: $mu100;
-    }
-    height: $mu200;
-
-    // Don't show the button's label because it has an icon
-    &__label {
-      font-size: 0;
-      height: 1px;
-      overflow: hidden;
-      display: block;
-    }
-  }
-
-  &__heading {
-    display: inline-block;
-    width: calc(100% - 3em);
-
-    &__title {
-      @include set-font-weight('semi-bold');
-
-      color: $color-font-darker;
-      width: 100%;
-      margin: {
-        top: $mu050;
-        bottom: 0;
-      }
-    }
-
-    &__subtitle {
-      @include set-font-weight('regular');
-
-      color: $color-font-darker;
-      display: inline-block;
-      margin: {
-        top: $mu025;
-        bottom: 0;
-      }
-    }
-
-    &__status {
-      @include set-font-weight('regular');
-
-      display: inline-block;
-      margin: {
-        top: $mu025;
-        bottom: 0;
-      }
-    }
-
-    &__subtitle + &__status {
-      margin-left: $mu100;
-    }
-  }
-
-  &__icons {
-    align-items: center;
-    display: flex;
-    flex: 1;
-    justify-content: flex-end;
-    max-width: $icons-width;
-    width: $icons-width;
-  }
-
-  &__selector {
-    align-items: center;
-    display: flex;
-    position: relative;
-    padding-left: 0;
-    margin-left: $gap;
-    max-width: $selector-width;
-    width: $selector-width;
-
-    &--show-separator {
-      padding-left: $gap;
-
-      &::before {
-        content: '';
-        background-color: $color-grey-300;
-        left: 0;
-        height: 100%;
-        position: absolute;
-        width: 1px;
-      }
-    }
-  }
-
-  &--no-shadow {
-    box-shadow: none;
-  }
-
-  &--animate {
-    margin-top: 0px;
-    transition: margin-top ease-out 0.4s;
-    width: 100%;
-  }
-
-  @include set-from-screen('s-large') {
-    &__breadcrumb {
-      margin-left: -$mu125;
-      margin-right: $mu125;
-    }
-    &__left {
-      padding-left: $mu100;
-    }
-
-    &__right {
-      padding-right: $mu100;
-    }
-
-    &__tabs {
-      padding: {
-        left: $mu100;
-        right: $mu100;
-      }
-    }
-  }
-
-  @include set-from-screen('s-xlarge') {
-    &__breadcrumb {
-      margin-left: -magic-unit-rem(1.375, 'true');
-      margin-right: magic-unit-rem(1.375, 'true');
-    }
-  }
-
-  @include set-from-screen('m') {
-    &__breadcrumb {
-      margin-left: -$mu200;
-      margin-right: $mu200;
-    }
-  }
-
-  @include set-from-screen('m-medium') {
-    &__breadcrumb {
-      margin-left: -magic-unit-rem(2.125, 'true');
-      margin-right: magic-unit-rem(2.125, 'true');
-    }
-    &__left {
-      padding-left: $mu200;
-    }
-
-    &__right {
-      padding-right: $mu200;
-    }
-
-    &__tabs {
-      padding: {
-        left: $mu200;
-        right: $mu200;
-      }
-    }
-  }
-
-  @include set-from-screen('l') {
-    &__breadcrumb {
-      margin-left: -$mu300;
-      margin-right: $mu300;
-    }
-    &__left {
-      padding-left: $mu300;
-    }
-
-    &__right {
-      padding-right: $mu300;
-    }
-
-    &__tabs {
-      padding: {
-        left: $mu300;
-        right: $mu300;
-      }
-    }
-  }
-
-  @include set-from-screen('xl') {
-    &__breadcrumb {
-      margin-left: -$mu200;
-      margin-right: $mu200;
-    }
-    &__left {
-      padding-left: $mu200;
-    }
-
-    &__right {
-      padding-right: $mu200;
-    }
-
-    &__tabs {
-      padding: {
-        left: $mu200;
-        right: $mu200;
-      }
-    }
-  }
-
-  @include set-from-screen('xl-medium') {
-    &__breadcrumb {
-      margin-left: -$mu700;
-      margin-right: $mu700;
-    }
-  }
-
-  @include set-from-screen('xl-large') {
-    &__breadcrumb {
-      margin-left: -$mu200;
-      margin-right: $mu200;
-    }
-  }
-
-  @include set-from-screen('xxl') {
-    &__breadcrumb {
-      margin-left: -$mu250;
-      margin-right: $mu250;
-    }
-  }
-
-  @each $size, $props in $header-sizes {
-    &--#{$size} {
-      @if ($size != 'm') {
-        @include set-header-size($props, $parent);
-      }
-    }
-  }
-}

package/dist/components/header/_s.header.scss

@@ -1,28 +0,0 @@
-@use "sass:math";
-
-$header-sizes: (
-  "s": (
-    "font-size": "07"
-  ),
-  "m": (
-    "font-size": "08"
-  ),
-  "l": (
-    "font-size": "09"
-  )
-);
-
-$header-default-size: map-get($header-sizes, "m");
-
-@mixin set-header-size($sizeProps, $parent) {
-  $font-size: map-get($sizeProps, "font-size");
-
-  #{$parent}__back {
-    $height-value: get-token(size, line, $font-size, "m");
-    height: $height-value
-  }
-
-  #{$parent}__heading__title {
-    @include set-font-scale($font-size, "m");
-  }
-}

package/dist/components/hero/Hero.js

@@ -1,2 +0,0 @@
-import{S as e,i as l,a as m,g as t,b as f,f as o,s as i,c as x,e as r,d as n,v as a,n as h,h as d,a5 as s,j as c,k as _,y as g,l as b,m as w,o as y,p,u}from"../../index-c222d0b7.js";function k(e){let l;return{c(){l=r("div"),l.innerHTML="<slot></slot>",d(l,"class","mc-hero__content mt-body-m")},m(e,m){f(e,l,m)},d(e){e&&w(l)}}}function j(e){let l,m,t,o,i,y,p,u,j,v,$,z,L,M,I,C=(e[5]||e[4])&&k(),E=[{class:I="mc-hero "+(e[3]?"mc-hero--center":"")},e[6]],R={};for(let e=0;e<E.length;e+=1)R=x(R,E[e]);return{c(){l=r("div"),m=r("div"),t=r("div"),o=r("div"),i=r("picture"),y=r("img"),j=n(),v=r("div"),$=r("h1"),z=a(e[2]),M=n(),C&&C.c(),this.c=h,d(y,"class","mc-hero__visual"),s(y.src,p=e[0])||d(y,"src",p),d(y,"alt",u=e[1]||""),d(i,"class","mc-hero__cover"),d($,"class",L=`mc-hero__title \n            mt-heading\n            mt-heading--lightest\n            mt-heading--s \n            mt-heading--underline\n            ${e[3]?"mt-heading--center":""}\n            ${e[5]||e[4]?"mc-hero--with-content":""}\n            `),d(v,"class","mc-hero__header"),d(o,"class","mc-hero__main ml-flexy__col"),d(t,"class","ml-flexy ml-flexy--gutter"),d(m,"class","ml-container ml-container--fluid"),c(l,R)},m(e,x){f(e,l,x),_(l,m),_(m,t),_(t,o),_(o,i),_(i,y),_(o,j),_(o,v),_(v,$),_($,z),_(v,M),C&&C.m(v,null)},p(e,[m]){1&m&&!s(y.src,p=e[0])&&d(y,"src",p),2&m&&u!==(u=e[1]||"")&&d(y,"alt",u),4&m&&g(z,e[2]),24&m&&L!==(L=`mc-hero__title \n            mt-heading\n            mt-heading--lightest\n            mt-heading--s \n            mt-heading--underline\n            ${e[3]?"mt-heading--center":""}\n            ${e[5]||e[4]?"mc-hero--with-content":""}\n            `)&&d($,"class",L),e[5]||e[4]?C||(C=k(),C.c(),C.m(v,null)):C&&(C.d(1),C=null),c(l,R=b(E,[8&m&&I!==(I="mc-hero "+(e[3]?"mc-hero--center":""))&&{class:I},64&m&&e[6]]))},i:h,o:h,d(e){e&&w(l),C&&C.d()}}}function v(e,l,m){const t=["image","altImage","title","centered","hascontent"];let f=y(l,t),{$$slots:o={},$$scope:i}=l;const r=p(o);let{image:n}=l,{altImage:a}=l,{title:h}=l,{centered:d=!1}=l,{hascontent:s=!1}=l;const c=!(!r||!Object.keys(r).length);return e.$$set=e=>{l=x(x({},l),u(e)),m(6,f=y(l,t)),"image"in e&&m(0,n=e.image),"altImage"in e&&m(1,a=e.altImage),"title"in e&&m(2,h=e.title),"centered"in e&&m(3,d=e.centered),"hascontent"in e&&m(4,s=e.hascontent)},[n,a,h,d,s,c,f]}class $ extends e{constructor(e){super();const x=document.createElement("style");x.textContent='.mt-body-l{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:1.125rem;line-height:1.5555555556}.mt-body-l--line-height-m{line-height:1.3333333333}.mt-body-l--semi-bold{font-family:"LeroyMerlin", sans-serif;font-weight:600}.mt-body-m{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:1rem;line-height:1.5}.mt-body-m--line-height-m{line-height:1.375}.mt-body-m--semi-bold{font-family:"LeroyMerlin", sans-serif;font-weight:600}.mt-body-s{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:0.875rem;line-height:1.5714285714}.mt-body-s--line-height-m{line-height:1.2857142857}.mt-body-s--semi-bold{font-family:"LeroyMerlin", sans-serif;font-weight:600}.mt-heading{font-family:"LeroyMerlin", sans-serif;font-weight:400;color:#000000;display:block;margin-bottom:2rem}.mt-heading--underline::after{content:"";display:block;height:0.25rem;background-color:#46a610}.mt-heading--line-primary-01-200::after,.mt-heading--line-lightest::after{background-color:#c5e39e}.mt-heading--line-primary-02-200::after{background-color:#cfd2d8}.mt-heading--line-primary-02-600::after{background-color:#494f60}.mt-heading--center{text-align:center}.mt-heading--center.mt-heading--underline::after{margin-left:auto;margin-right:auto}.mt-heading--right{text-align:right}.mt-heading--right.mt-heading--underline::after{margin-left:auto;margin-right:0}.mt-heading--left{text-align:left}.mt-heading--left.mt-heading--underline::after{margin-left:0;margin-right:auto}.mt-heading--s{font-size:1.4375rem;line-height:1.3913043478}.mt-heading--s.mt-heading--underline::after{width:4rem;margin-top:1rem}.mt-heading--s.mt-heading--line-height-xs{line-height:1.0434782609}.mt-heading--m{font-size:1.75rem;line-height:1.2857142857}.mt-heading--m.mt-heading--underline::after{width:4.5rem;margin-top:1rem}.mt-heading--m.mt-heading--line-height-xs{line-height:1}.mt-heading--l{font-size:2.125rem;line-height:1.2941176471}.mt-heading--l.mt-heading--underline::after{width:5rem;margin-top:1.25rem}.mt-heading--l.mt-heading--line-height-xs{line-height:1.0588235294}.mt-heading--lightest{color:#ffffff}.mt-heading--light{font-weight:300}.mt-heading--semi-bold,.mt-heading--underline{font-weight:600}@media screen and (min-width: 680px){.mt-heading--center\\@from-m{text-align:center}.mt-heading--center\\@from-m.mt-heading--underline::after{margin-left:auto;margin-right:auto}.mt-heading--right\\@from-m{text-align:right}.mt-heading--right\\@from-m.mt-heading--underline::after{margin-left:auto;margin-right:0}.mt-heading--left\\@from-m{text-align:left}.mt-heading--left\\@from-m.mt-heading--underline::after{margin-left:0;margin-right:auto}.mt-heading--s{font-size:1.75rem;line-height:1.2857142857}.mt-heading--s.mt-heading--underline::after{width:4.5rem;margin-top:1rem}.mt-heading--s.mt-heading--line-height-xs{line-height:1}.mt-heading--m{font-size:2.125rem;line-height:1.2941176471}.mt-heading--m.mt-heading--underline::after{width:5rem;margin-top:1.25rem}.mt-heading--m.mt-heading--line-height-xs{line-height:1.0588235294}.mt-heading--l{font-size:2.5625rem;line-height:1.3658536585}.mt-heading--l.mt-heading--underline::after{width:5.5rem;margin-top:1.5rem}.mt-heading--l.mt-heading--line-height-xs{line-height:0.9756097561}}@media screen and (min-width: 1024px){.mt-heading--center\\@from-l{text-align:center}.mt-heading--center\\@from-l.mt-heading--underline::after{margin-left:auto;margin-right:auto}.mt-heading--right\\@from-l{text-align:right}.mt-heading--right\\@from-l.mt-heading--underline::after{margin-left:auto;margin-right:0}.mt-heading--left\\@from-l{text-align:left}.mt-heading--left\\@from-l.mt-heading--underline::after{margin-left:0;margin-right:auto}.mt-heading--s{font-size:2.125rem;line-height:1.2941176471}.mt-heading--s.mt-heading--underline::after{width:5rem;margin-top:1.25rem}.mt-heading--s.mt-heading--line-height-xs{line-height:1.0588235294}.mt-heading--m{font-size:2.5625rem;line-height:1.3658536585}.mt-heading--m.mt-heading--underline::after{width:5.5rem;margin-top:1.5rem}.mt-heading--m.mt-heading--line-height-xs{line-height:0.9756097561}.mt-heading--l{font-size:3.0625rem;line-height:1.387755102;margin-bottom:3.5rem}.mt-heading--l.mt-heading--underline::after{width:6rem;margin-top:2rem}.mt-heading--l.mt-heading--line-height-xs{line-height:0.9795918367}}@media screen and (min-width: 1280px){.mt-heading--center\\@from-xl{text-align:center}.mt-heading--center\\@from-xl.mt-heading--underline::after{margin-left:auto;margin-right:auto}.mt-heading--right\\@from-xl{text-align:right}.mt-heading--right\\@from-xl.mt-heading--underline::after{margin-left:auto;margin-right:0}.mt-heading--left\\@from-xl{text-align:left}.mt-heading--left\\@from-xl.mt-heading--underline::after{margin-left:0;margin-right:auto}}@media screen and (min-width: 1920px){.mt-heading--center\\@from-xxl{text-align:center}.mt-heading--center\\@from-xxl.mt-heading--underline::after{margin-left:auto;margin-right:auto}.mt-heading--right\\@from-xxl{text-align:right}.mt-heading--right\\@from-xxl.mt-heading--underline::after{margin-left:auto;margin-right:0}.mt-heading--left\\@from-xxl{text-align:left}.mt-heading--left\\@from-xxl.mt-heading--underline::after{margin-left:0;margin-right:auto}}.mt-hero{font-family:"LeroyMerlin", sans-serif;font-weight:400;font-size:2.125rem;line-height:1.5294117647}.mt-hero--semi-bold{font-family:"LeroyMerlin", sans-serif;font-weight:600}.mt-hero--line-height-s{line-height:1.1764705882}@media screen and (min-width: 680px){.mt-hero{font-size:2.5625rem;line-height:1.4634146341}.mt-hero--line-height-s{line-height:1.1707317073}}@media screen and (min-width: 1024px){.mt-hero{font-size:3.0625rem;line-height:1.4693877551}.mt-hero--line-height-s{line-height:1.1428571429}}@media screen and (min-width: 1440px){.mt-hero{font-size:3.6875rem;line-height:1.4915254237}.mt-hero--line-height-s{line-height:1.1525423729}}.ml-container{-webkit-box-sizing:border-box;box-sizing:border-box;margin-right:auto;margin-left:auto;padding-right:1rem;padding-left:1rem;width:100%}@media screen and (min-width: 680px){.ml-container{padding-right:2rem;padding-left:2rem}}@media screen and (min-width: 1024px){.ml-container{padding-right:3rem;padding-left:3rem;max-width:64rem}}@media screen and (min-width: 1280px){.ml-container{padding-right:2rem;padding-left:2rem;max-width:80rem}}@media screen and (min-width: 1920px){.ml-container{padding-right:2.5rem;padding-left:2.5rem;max-width:120rem}}.ml-container--fluid{max-width:none}@media screen and (min-width: 680px){.ml-container--fluid\\@from-m{max-width:none}}@media screen and (min-width: 1024px){.ml-container--fluid\\@from-l{max-width:none}}@media screen and (min-width: 1280px){.ml-container--fluid\\@from-xl{max-width:none}}@media screen and (min-width: 1920px){.ml-container--fluid\\@from-xxl{max-width:none}}.ml-flexy{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row wrap;flex-flow:row wrap;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.ml-flexy--gutter{margin-right:-0.5rem;margin-left:-0.5rem}.ml-flexy--space-around{-ms-flex-pack:distribute;justify-content:space-around}.ml-flexy--justify-between{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.ml-flexy--justify-evenly{-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly}.ml-flexy--justify-start{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.ml-flexy--justify-center{-webkit-box-pack:center;justify-content:center;-ms-flex-pack:center}.ml-flexy--justify-end{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.ml-flexy--items-stretch{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}.ml-flexy--items-start{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.ml-flexy--items-center{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.ml-flexy--items-end{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.ml-flexy__col{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0}.ml-flexy--gutter>.ml-flexy__col{padding-right:0.5rem;padding-left:0.5rem}.ml-flexy__col--fill{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0}.ml-flexy__col--full{-webkit-box-flex:100%;-ms-flex:100%;flex:100%;max-width:100%}.ml-flexy__col--1of2{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.ml-flexy__col--push-1of2{margin-left:50%}.ml-flexy__col--1of3{-webkit-box-flex:0;-ms-flex:0 0 33.3333333333%;flex:0 0 33.3333333333%;max-width:33.3333333333%}.ml-flexy__col--push-1of3{margin-left:33.3333333333%}.ml-flexy__col--2of3{-webkit-box-flex:0;-ms-flex:0 0 66.6666666667%;flex:0 0 66.6666666667%;max-width:66.6666666667%}.ml-flexy__col--push-2of3{margin-left:66.6666666667%}.ml-flexy__col--1of4{-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.ml-flexy__col--push-1of4{margin-left:25%}.ml-flexy__col--3of4{-webkit-box-flex:0;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.ml-flexy__col--push-3of4{margin-left:75%}.ml-flexy__col--1of6{-webkit-box-flex:0;-ms-flex:0 0 16.6666666667%;flex:0 0 16.6666666667%;max-width:16.6666666667%}.ml-flexy__col--push-1of6{margin-left:16.6666666667%}.ml-flexy__col--5of6{-webkit-box-flex:0;-ms-flex:0 0 83.3333333333%;flex:0 0 83.3333333333%;max-width:83.3333333333%}.ml-flexy__col--push-5of6{margin-left:83.3333333333%}.ml-flexy__col--1of12{-webkit-box-flex:0;-ms-flex:0 0 8.3333333333%;flex:0 0 8.3333333333%;max-width:8.3333333333%}.ml-flexy__col--push-1of12{margin-left:8.3333333333%}.ml-flexy__col--2of12{-webkit-box-flex:0;-ms-flex:0 0 16.6666666667%;flex:0 0 16.6666666667%;max-width:16.6666666667%}.ml-flexy__col--push-2of12{margin-left:16.6666666667%}.ml-flexy__col--3of12{-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.ml-flexy__col--push-3of12{margin-left:25%}.ml-flexy__col--4of12{-webkit-box-flex:0;-ms-flex:0 0 33.3333333333%;flex:0 0 33.3333333333%;max-width:33.3333333333%}.ml-flexy__col--push-4of12{margin-left:33.3333333333%}.ml-flexy__col--5of12{-webkit-box-flex:0;-ms-flex:0 0 41.6666666667%;flex:0 0 41.6666666667%;max-width:41.6666666667%}.ml-flexy__col--push-5of12{margin-left:41.6666666667%}.ml-flexy__col--6of12{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.ml-flexy__col--push-6of12{margin-left:50%}.ml-flexy__col--7of12{-webkit-box-flex:0;-ms-flex:0 0 58.3333333333%;flex:0 0 58.3333333333%;max-width:58.3333333333%}.ml-flexy__col--push-7of12{margin-left:58.3333333333%}.ml-flexy__col--8of12{-webkit-box-flex:0;-ms-flex:0 0 66.6666666667%;flex:0 0 66.6666666667%;max-width:66.6666666667%}.ml-flexy__col--push-8of12{margin-left:66.6666666667%}.ml-flexy__col--9of12{-webkit-box-flex:0;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.ml-flexy__col--push-9of12{margin-left:75%}.ml-flexy__col--10of12{-webkit-box-flex:0;-ms-flex:0 0 83.3333333333%;flex:0 0 83.3333333333%;max-width:83.3333333333%}.ml-flexy__col--push-10of12{margin-left:83.3333333333%}.ml-flexy__col--11of12{-webkit-box-flex:0;-ms-flex:0 0 91.6666666667%;flex:0 0 91.6666666667%;max-width:91.6666666667%}.ml-flexy__col--push-11of12{margin-left:91.6666666667%}.ml-flexy__col--initial{-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto}.ml-flexy__col--grow{-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto;max-width:none}.ml-flexy__col--first{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.ml-flexy__col--last{-webkit-box-ordinal-group:1000;-ms-flex-order:999;order:999}.ml-flexy__col--push--reset{margin-left:auto}@media screen and (min-width: 680px){.ml-flexy--gutter{margin-right:-1rem;margin-left:-1rem}.ml-flexy--space-around\\@from-m{-ms-flex-pack:distribute;justify-content:space-around}.ml-flexy--justify-between\\@from-m{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.ml-flexy--justify-evenly\\@from-m{-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly}.ml-flexy--justify-start\\@from-m{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.ml-flexy--justify-center\\@from-m{-webkit-box-pack:center;justify-content:center;-ms-flex-pack:center}.ml-flexy--justify-end\\@from-m{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.ml-flexy--gutter>.ml-flexy__col{padding-right:1rem;padding-left:1rem}.ml-flexy__col--fill\\@from-m{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0}.ml-flexy__col--full\\@from-m{-webkit-box-flex:100%;-ms-flex:100%;flex:100%;max-width:100%}.ml-flexy__col--1of2\\@from-m{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.ml-flexy__col--push-1of2\\@from-m{margin-left:50%}.ml-flexy__col--1of3\\@from-m{-webkit-box-flex:0;-ms-flex:0 0 33.3333333333%;flex:0 0 33.3333333333%;max-width:33.3333333333%}.ml-flexy__col--push-1of3\\@from-m{margin-left:33.3333333333%}.ml-flexy__col--2of3\\@from-m{-webkit-box-flex:0;-ms-flex:0 0 66.6666666667%;flex:0 0 66.6666666667%;max-width:66.6666666667%}.ml-flexy__col--push-2of3\\@from-m{margin-left:66.6666666667%}.ml-flexy__col--1of4\\@from-m{-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.ml-flexy__col--push-1of4\\@from-m{margin-left:25%}.ml-flexy__col--3of4\\@from-m{-webkit-box-flex:0;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.ml-flexy__col--push-3of4\\@from-m{margin-left:75%}.ml-flexy__col--1of6\\@from-m{-webkit-box-flex:0;-ms-flex:0 0 16.6666666667%;flex:0 0 16.6666666667%;max-width:16.6666666667%}.ml-flexy__col--push-1of6\\@from-m{margin-left:16.6666666667%}.ml-flexy__col--5of6\\@from-m{-webkit-box-flex:0;-ms-flex:0 0 83.3333333333%;flex:0 0 83.3333333333%;max-width:83.3333333333%}.ml-flexy__col--push-5of6\\@from-m{margin-left:83.3333333333%}.ml-flexy__col--1of12\\@from-m{-webkit-box-flex:0;-ms-flex:0 0 8.3333333333%;flex:0 0 8.3333333333%;max-width:8.3333333333%}.ml-flexy__col--push-1of12\\@from-m{margin-left:8.3333333333%}.ml-flexy__col--2of12\\@from-m{-webkit-box-flex:0;-ms-flex:0 0 16.6666666667%;flex:0 0 16.6666666667%;max-width:16.6666666667%}.ml-flexy__col--push-2of12\\@from-m{margin-left:16.6666666667%}.ml-flexy__col--3of12\\@from-m{-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.ml-flexy__col--push-3of12\\@from-m{margin-left:25%}.ml-flexy__col--4of12\\@from-m{-webkit-box-flex:0;-ms-flex:0 0 33.3333333333%;flex:0 0 33.3333333333%;max-width:33.3333333333%}.ml-flexy__col--push-4of12\\@from-m{margin-left:33.3333333333%}.ml-flexy__col--5of12\\@from-m{-webkit-box-flex:0;-ms-flex:0 0 41.6666666667%;flex:0 0 41.6666666667%;max-width:41.6666666667%}.ml-flexy__col--push-5of12\\@from-m{margin-left:41.6666666667%}.ml-flexy__col--6of12\\@from-m{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.ml-flexy__col--push-6of12\\@from-m{margin-left:50%}.ml-flexy__col--7of12\\@from-m{-webkit-box-flex:0;-ms-flex:0 0 58.3333333333%;flex:0 0 58.3333333333%;max-width:58.3333333333%}.ml-flexy__col--push-7of12\\@from-m{margin-left:58.3333333333%}.ml-flexy__col--8of12\\@from-m{-webkit-box-flex:0;-ms-flex:0 0 66.6666666667%;flex:0 0 66.6666666667%;max-width:66.6666666667%}.ml-flexy__col--push-8of12\\@from-m{margin-left:66.6666666667%}.ml-flexy__col--9of12\\@from-m{-webkit-box-flex:0;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.ml-flexy__col--push-9of12\\@from-m{margin-left:75%}.ml-flexy__col--10of12\\@from-m{-webkit-box-flex:0;-ms-flex:0 0 83.3333333333%;flex:0 0 83.3333333333%;max-width:83.3333333333%}.ml-flexy__col--push-10of12\\@from-m{margin-left:83.3333333333%}.ml-flexy__col--11of12\\@from-m{-webkit-box-flex:0;-ms-flex:0 0 91.6666666667%;flex:0 0 91.6666666667%;max-width:91.6666666667%}.ml-flexy__col--push-11of12\\@from-m{margin-left:91.6666666667%}.ml-flexy__col--initial\\@from-m{-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto}.ml-flexy__col--grow\\@from-m{-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto;max-width:none}.ml-flexy__col--first\\@from-m{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.ml-flexy__col--last\\@from-m{-webkit-box-ordinal-group:1000;-ms-flex-order:999;order:999}.ml-flexy__col--push--reset\\@from-m{margin-left:auto}}@media screen and (min-width: 1024px){.ml-flexy--space-around\\@from-l{-ms-flex-pack:distribute;justify-content:space-around}.ml-flexy--justify-between\\@from-l{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.ml-flexy--justify-evenly\\@from-l{-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly}.ml-flexy--justify-start\\@from-l{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.ml-flexy--justify-center\\@from-l{-webkit-box-pack:center;justify-content:center;-ms-flex-pack:center}.ml-flexy--justify-end\\@from-l{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.ml-flexy__col--fill\\@from-l{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0}.ml-flexy__col--full\\@from-l{-webkit-box-flex:100%;-ms-flex:100%;flex:100%;max-width:100%}.ml-flexy__col--1of2\\@from-l{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.ml-flexy__col--push-1of2\\@from-l{margin-left:50%}.ml-flexy__col--1of3\\@from-l{-webkit-box-flex:0;-ms-flex:0 0 33.3333333333%;flex:0 0 33.3333333333%;max-width:33.3333333333%}.ml-flexy__col--push-1of3\\@from-l{margin-left:33.3333333333%}.ml-flexy__col--2of3\\@from-l{-webkit-box-flex:0;-ms-flex:0 0 66.6666666667%;flex:0 0 66.6666666667%;max-width:66.6666666667%}.ml-flexy__col--push-2of3\\@from-l{margin-left:66.6666666667%}.ml-flexy__col--1of4\\@from-l{-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.ml-flexy__col--push-1of4\\@from-l{margin-left:25%}.ml-flexy__col--3of4\\@from-l{-webkit-box-flex:0;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.ml-flexy__col--push-3of4\\@from-l{margin-left:75%}.ml-flexy__col--1of6\\@from-l{-webkit-box-flex:0;-ms-flex:0 0 16.6666666667%;flex:0 0 16.6666666667%;max-width:16.6666666667%}.ml-flexy__col--push-1of6\\@from-l{margin-left:16.6666666667%}.ml-flexy__col--5of6\\@from-l{-webkit-box-flex:0;-ms-flex:0 0 83.3333333333%;flex:0 0 83.3333333333%;max-width:83.3333333333%}.ml-flexy__col--push-5of6\\@from-l{margin-left:83.3333333333%}.ml-flexy__col--1of12\\@from-l{-webkit-box-flex:0;-ms-flex:0 0 8.3333333333%;flex:0 0 8.3333333333%;max-width:8.3333333333%}.ml-flexy__col--push-1of12\\@from-l{margin-left:8.3333333333%}.ml-flexy__col--2of12\\@from-l{-webkit-box-flex:0;-ms-flex:0 0 16.6666666667%;flex:0 0 16.6666666667%;max-width:16.6666666667%}.ml-flexy__col--push-2of12\\@from-l{margin-left:16.6666666667%}.ml-flexy__col--3of12\\@from-l{-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.ml-flexy__col--push-3of12\\@from-l{margin-left:25%}.ml-flexy__col--4of12\\@from-l{-webkit-box-flex:0;-ms-flex:0 0 33.3333333333%;flex:0 0 33.3333333333%;max-width:33.3333333333%}.ml-flexy__col--push-4of12\\@from-l{margin-left:33.3333333333%}.ml-flexy__col--5of12\\@from-l{-webkit-box-flex:0;-ms-flex:0 0 41.6666666667%;flex:0 0 41.6666666667%;max-width:41.6666666667%}.ml-flexy__col--push-5of12\\@from-l{margin-left:41.6666666667%}.ml-flexy__col--6of12\\@from-l{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.ml-flexy__col--push-6of12\\@from-l{margin-left:50%}.ml-flexy__col--7of12\\@from-l{-webkit-box-flex:0;-ms-flex:0 0 58.3333333333%;flex:0 0 58.3333333333%;max-width:58.3333333333%}.ml-flexy__col--push-7of12\\@from-l{margin-left:58.3333333333%}.ml-flexy__col--8of12\\@from-l{-webkit-box-flex:0;-ms-flex:0 0 66.6666666667%;flex:0 0 66.6666666667%;max-width:66.6666666667%}.ml-flexy__col--push-8of12\\@from-l{margin-left:66.6666666667%}.ml-flexy__col--9of12\\@from-l{-webkit-box-flex:0;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.ml-flexy__col--push-9of12\\@from-l{margin-left:75%}.ml-flexy__col--10of12\\@from-l{-webkit-box-flex:0;-ms-flex:0 0 83.3333333333%;flex:0 0 83.3333333333%;max-width:83.3333333333%}.ml-flexy__col--push-10of12\\@from-l{margin-left:83.3333333333%}.ml-flexy__col--11of12\\@from-l{-webkit-box-flex:0;-ms-flex:0 0 91.6666666667%;flex:0 0 91.6666666667%;max-width:91.6666666667%}.ml-flexy__col--push-11of12\\@from-l{margin-left:91.6666666667%}.ml-flexy__col--initial\\@from-l{-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto}.ml-flexy__col--grow\\@from-l{-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto;max-width:none}.ml-flexy__col--first\\@from-l{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.ml-flexy__col--last\\@from-l{-webkit-box-ordinal-group:1000;-ms-flex-order:999;order:999}.ml-flexy__col--push--reset\\@from-l{margin-left:auto}}@media screen and (min-width: 1280px){.ml-flexy--space-around\\@from-xl{-ms-flex-pack:distribute;justify-content:space-around}.ml-flexy--justify-between\\@from-xl{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.ml-flexy--justify-evenly\\@from-xl{-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly}.ml-flexy--justify-start\\@from-xl{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.ml-flexy--justify-center\\@from-xl{-webkit-box-pack:center;justify-content:center;-ms-flex-pack:center}.ml-flexy--justify-end\\@from-xl{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.ml-flexy__col--fill\\@from-xl{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0}.ml-flexy__col--full\\@from-xl{-webkit-box-flex:100%;-ms-flex:100%;flex:100%;max-width:100%}.ml-flexy__col--1of2\\@from-xl{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.ml-flexy__col--push-1of2\\@from-xl{margin-left:50%}.ml-flexy__col--1of3\\@from-xl{-webkit-box-flex:0;-ms-flex:0 0 33.3333333333%;flex:0 0 33.3333333333%;max-width:33.3333333333%}.ml-flexy__col--push-1of3\\@from-xl{margin-left:33.3333333333%}.ml-flexy__col--2of3\\@from-xl{-webkit-box-flex:0;-ms-flex:0 0 66.6666666667%;flex:0 0 66.6666666667%;max-width:66.6666666667%}.ml-flexy__col--push-2of3\\@from-xl{margin-left:66.6666666667%}.ml-flexy__col--1of4\\@from-xl{-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.ml-flexy__col--push-1of4\\@from-xl{margin-left:25%}.ml-flexy__col--3of4\\@from-xl{-webkit-box-flex:0;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.ml-flexy__col--push-3of4\\@from-xl{margin-left:75%}.ml-flexy__col--1of6\\@from-xl{-webkit-box-flex:0;-ms-flex:0 0 16.6666666667%;flex:0 0 16.6666666667%;max-width:16.6666666667%}.ml-flexy__col--push-1of6\\@from-xl{margin-left:16.6666666667%}.ml-flexy__col--5of6\\@from-xl{-webkit-box-flex:0;-ms-flex:0 0 83.3333333333%;flex:0 0 83.3333333333%;max-width:83.3333333333%}.ml-flexy__col--push-5of6\\@from-xl{margin-left:83.3333333333%}.ml-flexy__col--1of12\\@from-xl{-webkit-box-flex:0;-ms-flex:0 0 8.3333333333%;flex:0 0 8.3333333333%;max-width:8.3333333333%}.ml-flexy__col--push-1of12\\@from-xl{margin-left:8.3333333333%}.ml-flexy__col--2of12\\@from-xl{-webkit-box-flex:0;-ms-flex:0 0 16.6666666667%;flex:0 0 16.6666666667%;max-width:16.6666666667%}.ml-flexy__col--push-2of12\\@from-xl{margin-left:16.6666666667%}.ml-flexy__col--3of12\\@from-xl{-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.ml-flexy__col--push-3of12\\@from-xl{margin-left:25%}.ml-flexy__col--4of12\\@from-xl{-webkit-box-flex:0;-ms-flex:0 0 33.3333333333%;flex:0 0 33.3333333333%;max-width:33.3333333333%}.ml-flexy__col--push-4of12\\@from-xl{margin-left:33.3333333333%}.ml-flexy__col--5of12\\@from-xl{-webkit-box-flex:0;-ms-flex:0 0 41.6666666667%;flex:0 0 41.6666666667%;max-width:41.6666666667%}.ml-flexy__col--push-5of12\\@from-xl{margin-left:41.6666666667%}.ml-flexy__col--6of12\\@from-xl{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.ml-flexy__col--push-6of12\\@from-xl{margin-left:50%}.ml-flexy__col--7of12\\@from-xl{-webkit-box-flex:0;-ms-flex:0 0 58.3333333333%;flex:0 0 58.3333333333%;max-width:58.3333333333%}.ml-flexy__col--push-7of12\\@from-xl{margin-left:58.3333333333%}.ml-flexy__col--8of12\\@from-xl{-webkit-box-flex:0;-ms-flex:0 0 66.6666666667%;flex:0 0 66.6666666667%;max-width:66.6666666667%}.ml-flexy__col--push-8of12\\@from-xl{margin-left:66.6666666667%}.ml-flexy__col--9of12\\@from-xl{-webkit-box-flex:0;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.ml-flexy__col--push-9of12\\@from-xl{margin-left:75%}.ml-flexy__col--10of12\\@from-xl{-webkit-box-flex:0;-ms-flex:0 0 83.3333333333%;flex:0 0 83.3333333333%;max-width:83.3333333333%}.ml-flexy__col--push-10of12\\@from-xl{margin-left:83.3333333333%}.ml-flexy__col--11of12\\@from-xl{-webkit-box-flex:0;-ms-flex:0 0 91.6666666667%;flex:0 0 91.6666666667%;max-width:91.6666666667%}.ml-flexy__col--push-11of12\\@from-xl{margin-left:91.6666666667%}.ml-flexy__col--initial\\@from-xl{-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto}.ml-flexy__col--grow\\@from-xl{-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto;max-width:none}.ml-flexy__col--first\\@from-xl{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.ml-flexy__col--last\\@from-xl{-webkit-box-ordinal-group:1000;-ms-flex-order:999;order:999}.ml-flexy__col--push--reset\\@from-xl{margin-left:auto}}@media screen and (min-width: 1920px){.ml-flexy--space-around\\@from-xxl{-ms-flex-pack:distribute;justify-content:space-around}.ml-flexy--justify-between\\@from-xxl{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.ml-flexy--justify-evenly\\@from-xxl{-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly}.ml-flexy--justify-start\\@from-xxl{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.ml-flexy--justify-center\\@from-xxl{-webkit-box-pack:center;justify-content:center;-ms-flex-pack:center}.ml-flexy--justify-end\\@from-xxl{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.ml-flexy__col--fill\\@from-xxl{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0}.ml-flexy__col--full\\@from-xxl{-webkit-box-flex:100%;-ms-flex:100%;flex:100%;max-width:100%}.ml-flexy__col--1of2\\@from-xxl{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.ml-flexy__col--push-1of2\\@from-xxl{margin-left:50%}.ml-flexy__col--1of3\\@from-xxl{-webkit-box-flex:0;-ms-flex:0 0 33.3333333333%;flex:0 0 33.3333333333%;max-width:33.3333333333%}.ml-flexy__col--push-1of3\\@from-xxl{margin-left:33.3333333333%}.ml-flexy__col--2of3\\@from-xxl{-webkit-box-flex:0;-ms-flex:0 0 66.6666666667%;flex:0 0 66.6666666667%;max-width:66.6666666667%}.ml-flexy__col--push-2of3\\@from-xxl{margin-left:66.6666666667%}.ml-flexy__col--1of4\\@from-xxl{-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.ml-flexy__col--push-1of4\\@from-xxl{margin-left:25%}.ml-flexy__col--3of4\\@from-xxl{-webkit-box-flex:0;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.ml-flexy__col--push-3of4\\@from-xxl{margin-left:75%}.ml-flexy__col--1of6\\@from-xxl{-webkit-box-flex:0;-ms-flex:0 0 16.6666666667%;flex:0 0 16.6666666667%;max-width:16.6666666667%}.ml-flexy__col--push-1of6\\@from-xxl{margin-left:16.6666666667%}.ml-flexy__col--5of6\\@from-xxl{-webkit-box-flex:0;-ms-flex:0 0 83.3333333333%;flex:0 0 83.3333333333%;max-width:83.3333333333%}.ml-flexy__col--push-5of6\\@from-xxl{margin-left:83.3333333333%}.ml-flexy__col--1of12\\@from-xxl{-webkit-box-flex:0;-ms-flex:0 0 8.3333333333%;flex:0 0 8.3333333333%;max-width:8.3333333333%}.ml-flexy__col--push-1of12\\@from-xxl{margin-left:8.3333333333%}.ml-flexy__col--2of12\\@from-xxl{-webkit-box-flex:0;-ms-flex:0 0 16.6666666667%;flex:0 0 16.6666666667%;max-width:16.6666666667%}.ml-flexy__col--push-2of12\\@from-xxl{margin-left:16.6666666667%}.ml-flexy__col--3of12\\@from-xxl{-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.ml-flexy__col--push-3of12\\@from-xxl{margin-left:25%}.ml-flexy__col--4of12\\@from-xxl{-webkit-box-flex:0;-ms-flex:0 0 33.3333333333%;flex:0 0 33.3333333333%;max-width:33.3333333333%}.ml-flexy__col--push-4of12\\@from-xxl{margin-left:33.3333333333%}.ml-flexy__col--5of12\\@from-xxl{-webkit-box-flex:0;-ms-flex:0 0 41.6666666667%;flex:0 0 41.6666666667%;max-width:41.6666666667%}.ml-flexy__col--push-5of12\\@from-xxl{margin-left:41.6666666667%}.ml-flexy__col--6of12\\@from-xxl{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.ml-flexy__col--push-6of12\\@from-xxl{margin-left:50%}.ml-flexy__col--7of12\\@from-xxl{-webkit-box-flex:0;-ms-flex:0 0 58.3333333333%;flex:0 0 58.3333333333%;max-width:58.3333333333%}.ml-flexy__col--push-7of12\\@from-xxl{margin-left:58.3333333333%}.ml-flexy__col--8of12\\@from-xxl{-webkit-box-flex:0;-ms-flex:0 0 66.6666666667%;flex:0 0 66.6666666667%;max-width:66.6666666667%}.ml-flexy__col--push-8of12\\@from-xxl{margin-left:66.6666666667%}.ml-flexy__col--9of12\\@from-xxl{-webkit-box-flex:0;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.ml-flexy__col--push-9of12\\@from-xxl{margin-left:75%}.ml-flexy__col--10of12\\@from-xxl{-webkit-box-flex:0;-ms-flex:0 0 83.3333333333%;flex:0 0 83.3333333333%;max-width:83.3333333333%}.ml-flexy__col--push-10of12\\@from-xxl{margin-left:83.3333333333%}.ml-flexy__col--11of12\\@from-xxl{-webkit-box-flex:0;-ms-flex:0 0 91.6666666667%;flex:0 0 91.6666666667%;max-width:91.6666666667%}.ml-flexy__col--push-11of12\\@from-xxl{margin-left:91.6666666667%}.ml-flexy__col--initial\\@from-xxl{-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto}.ml-flexy__col--grow\\@from-xxl{-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto;max-width:none}.ml-flexy__col--first\\@from-xxl{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.ml-flexy__col--last\\@from-xxl{-webkit-box-ordinal-group:1000;-ms-flex-order:999;order:999}.ml-flexy__col--push--reset\\@from-xxl{margin-left:auto}}.mc-hero{position:relative}.mc-hero__main{-webkit-box-flex:100%;-ms-flex:100%;flex:100%;padding-bottom:4.5rem;padding-top:4rem}@media screen and (min-width: 680px){.mc-hero__main{padding-bottom:7rem;padding-top:6rem}}@media screen and (min-width: 1024px){.mc-hero__main{padding-bottom:10rem}}@media screen and (min-width: 1440px){.mc-hero__main{padding-bottom:8rem;padding-top:8rem}}.mc-hero__cover{z-index:-1}.mc-hero__cover,.mc-hero__cover::before{height:100%;left:0;position:absolute;top:0;width:100%}.mc-hero__cover::before{background-color:rgba(25, 25, 25, 0.8);content:"";display:block}.mc-hero__visual{display:block;height:100%;-o-object-fit:cover;object-fit:cover;width:100%}@media screen and (min-width: 1024px){.mc-hero__header{max-width:75%}}@media screen and (min-width: 1280px){.mc-hero__header{max-width:66.6666666667%}}@media(min-width: 1440px) and (max-width: 1919px){.mc-hero__header{max-width:75%}}.mc-hero__title{margin-top:0}.mc-hero__content{color:#ffffff}@media screen and (min-width: 1024px){.mc-hero__content{max-width:83.3333333333%}}@media(min-width: 1280px) and (max-width: 1919px){.mc-hero__content{max-width:75%}}.mc-hero__boxed{-webkit-box-flex:100%;-ms-flex:100%;flex:100%;margin-top:-6rem}@media screen and (min-width: 680px){.mc-hero__boxed{margin-top:-5rem}}@media screen and (min-width: 1024px){.mc-hero__boxed{-webkit-box-flex:0;-ms-flex:0 0 41.6666666667%;flex:0 0 41.6666666667%;max-width:41.6666666667%;margin-top:0}}@media screen and (min-width: 1920px){.mc-hero__boxed{-webkit-box-flex:0;-ms-flex:0 0 33.3333333333%;flex:0 0 33.3333333333%;max-width:33.3333333333%}}.mc-hero--with-content .mc-hero__main{padding-bottom:3rem;padding-top:2.5rem}@media screen and (min-width: 680px){.mc-hero--with-content .mc-hero__main{padding-bottom:5rem;padding-top:3.5rem}}@media screen and (min-width: 1024px){.mc-hero--with-content .mc-hero__main{padding-bottom:6rem;padding-top:5rem}}@media screen and (min-width: 1920px){.mc-hero--with-content .mc-hero__main{padding-bottom:8rem}}@media(min-width: 1440px) and (max-width: 1919px){.mc-hero--with-content .mc-hero__header{max-width:66.6666666667%}}@media screen and (min-width: 1920px){.mc-hero--with-content .mc-hero__header{max-width:58.3333333333%}}.mc-hero--with-boxed *{-webkit-box-sizing:border-box;box-sizing:border-box}@media screen and (min-width: 1024px){.mc-hero--with-boxed{padding-bottom:3rem;padding-top:4rem}}@media screen and (min-width: 1440px){.mc-hero--with-boxed{padding-bottom:4rem}}@media screen and (min-width: 1920px){.mc-hero--with-boxed{padding-bottom:5rem}}.mc-hero--with-boxed .mc-hero__main{padding-bottom:6rem;padding-top:2.5rem;position:relative;-webkit-box-flex:100%;-ms-flex:100%;flex:100%}@media screen and (min-width: 680px){.mc-hero--with-boxed .mc-hero__main{padding-bottom:5rem;padding-top:4rem}}@media screen and (min-width: 1024px){.mc-hero--with-boxed .mc-hero__main{-webkit-box-flex:0;-ms-flex:0 0 58.3333333333%;flex:0 0 58.3333333333%;max-width:58.3333333333%;padding-bottom:0;padding-top:0;position:static}}@media screen and (min-width: 1920px){.mc-hero--with-boxed .mc-hero__main{-webkit-box-flex:0;-ms-flex:0 0 66.6666666667%;flex:0 0 66.6666666667%;max-width:66.6666666667%}}@media(max-width: 679px){.mc-hero--with-boxed .mc-hero__cover{left:-0.5rem;width:calc(100% + 1rem)}}@media(max-width: 1023px){.mc-hero--with-boxed .mc-hero__cover{left:-1rem;width:calc(100% + 2rem)}}.mc-hero--with-boxed .mc-hero__header,.mc-hero--with-boxed .mc-hero__content{max-width:none}.mc-hero--with-boxed .mc-hero__content{margin-bottom:2rem}@media screen and (min-width: 680px){.mc-hero--with-boxed .mc-hero__content{margin-bottom:3rem}}@media screen and (min-width: 1024px){.mc-hero--with-boxed .mc-hero__content{margin-bottom:0}}@media(min-width: 1024px) and (max-width: 1279px){.mc-hero--boxed-l{padding-bottom:0;padding-top:0}.mc-hero--boxed-l .mc-hero__main,.mc-hero--boxed-l .mc-hero__boxed{-webkit-box-flex:100%;-ms-flex:100%;flex:100%;max-width:none}.mc-hero--boxed-l .mc-hero__cover{left:-2rem;width:calc(100% + 4rem)}.mc-hero--boxed-l .mc-hero__main{padding-bottom:7rem;padding-top:4rem;position:relative}.mc-hero--boxed-l .mc-hero__content{margin-bottom:3rem}.mc-hero--boxed-l .mc-hero__boxed{margin-top:-7rem}}.mc-hero--center .mc-hero__header,.mc-hero--center .mc-hero__content{margin-left:auto;margin-right:auto}@media screen and (min-width: 1024px){.mc-hero--center .mc-hero__header{max-width:66.6666666667%}}@media screen and (min-width: 1920px){.mc-hero--center .mc-hero__header{max-width:50%}}.mc-hero--center .mc-hero__content{text-align:center}@media screen and (min-width: 1024px){.mc-hero--center .mc-hero__content{max-width:none}}@media screen and (min-width: 1280px){.mc-hero--center .mc-hero__content{max-width:66.6666666667%}}@media(min-width: 1440px) and (max-width: 1919px){.mc-hero--center .mc-hero__content{max-width:83.3333333333%}}',this.shadowRoot.appendChild(x),l(this,{target:this.shadowRoot,props:{...m(this.attributes),$$slots:t(this)},customElement:!0},v,j,i,{image:0,altImage:1,title:2,centered:3,hascontent:4},null),e&&(e.target&&f(e.target,this,e.anchor),e.props&&(this.$set(e.props),o()))}static get observedAttributes(){return["image","altImage","title","centered","hascontent"]}get image(){return this.$$.ctx[0]}set image(e){this.$$set({image:e}),o()}get altImage(){return this.$$.ctx[1]}set altImage(e){this.$$set({altImage:e}),o()}get title(){return this.$$.ctx[2]}set title(e){this.$$set({title:e}),o()}get centered(){return this.$$.ctx[3]}set centered(e){this.$$set({centered:e}),o()}get hascontent(){return this.$$.ctx[4]}set hascontent(e){this.$$set({hascontent:e}),o()}}export{$ as default};
-//# sourceMappingURL=Hero.js.map

package/dist/components/hero/Hero.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Hero.js","sources":["../../../src/components/hero/Hero.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import type { HeroProps } from './hero.type';\n\n  export let image: HeroProps['image'];\n  export let altImage: HeroProps['altImage'];\n  export let title: HeroProps['title'];\n  export let centered: HeroProps['centered'] = false;\n  export let hascontent = false;\n\n  const hasSlot = !!($$slots && Object.keys($$slots).length);\n</script>\n\n<div class={`mc-hero ${centered ? 'mc-hero--center' : ''}`} {...$$restProps}>\n  <div class=\"ml-container ml-container--fluid\">\n    <div class=\"ml-flexy ml-flexy--gutter\">\n      <div class=\"mc-hero__main ml-flexy__col\">\n        <picture class=\"mc-hero__cover\">\n          <img class=\"mc-hero__visual\" src={image} alt={altImage || ''} />\n        </picture>\n\n        <div class=\"mc-hero__header\">\n          <h1\n            class={`mc-hero__title \n            mt-heading\n            mt-heading--lightest\n            mt-heading--s \n            mt-heading--underline\n            ${centered ? 'mt-heading--center' : ''}\n            ${hasSlot || hascontent ? 'mc-hero--with-content' : ''}\n            `}\n          >\n            {title}\n          </h1>\n          {#if hasSlot || hascontent}\n            <div class=\"mc-hero__content mt-body-m\">\n              <slot />\n            </div>\n          {/if}\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n  @import '@mozaic-ds/styles/typography/_t.all-base-typography';\n  @import '@mozaic-ds/styles/layouts/_l.container';\n  @import '@mozaic-ds/styles/layouts/_l.flexy';\n  @import '@mozaic-ds/styles/components/_c.hero';\n\n  p :global {\n    margin-bottom: 0;\n    margin-top: 0;\n  }\n</style>\n"],"names":["insert","target","div","anchor","if_block","ctx","create_if_block","attr","img","img_src_value","img_alt_value","div4","append","div3","div2","div1","picture","div0","h1","dirty","class","div4_class_value","image","$$props","altImage","title","centered","hascontent","hasSlot","$$slots","Object","keys","length"],"mappings":"8SAoCYA,EAEKC,EAAAC,EAAAC,mEAHFC,GAAAC,MAAWA,EAAU,KAAAC,4BArBbD,EAAQ,GAAG,kBAAoB,KAAUA,EAAW,iKAmB9DA,EAAK,qEAd0BA,EAAK,KAAAE,EAAAC,EAAA,MAAAC,GAAOF,EAAAC,EAAA,MAAAE,EAAAL,MAAY,yMAUtDA,EAAQ,GAAG,qBAAuB,mBAClCA,MAAWA,EAAU,GAAG,wBAA0B,sMAhBhEL,EA8BKC,EAAAU,EAAAR,GA7BHS,EA4BKD,EAAAE,GA3BHD,EA0BKC,EAAAC,GAzBHF,EAwBKE,EAAAC,GAvBHH,EAESG,EAAAC,GADPJ,EAA+DI,EAAAR,UAGjEI,EAkBKG,EAAAE,GAjBHL,EAWIK,EAAAC,0DAf8Bb,EAAK,kBAAO,EAAAc,GAAAT,KAAAA,EAAAL,MAAY,2BAcvDA,EAAK,0KAJJA,EAAQ,GAAG,qBAAuB,mBAClCA,MAAWA,EAAU,GAAG,wBAA0B,oCAKjDA,MAAWA,EAAU,sFArBbA,EAAQ,GAAG,kBAAoB,MAAE,CAAAe,MAAAC,SAAQhB,EAAW,qLAT9DiB,GAAyBC,YACzBC,GAA+BD,SAC/BE,GAAyBF,GACzBG,SAAAA,GAAkC,GAAKH,GACvCI,WAAAA,GAAa,GAAKJ,QAEvBK,KAAaC,IAAWC,OAAOC,KAAKF,GAASG"}