mp-design-system 1.2.10 → 1.2.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mp-design-system",
-  "version": "1.2.10",
+  "version": "1.2.12",
   "description": "",
   "scripts": {
     "dev": "npm-run-all --parallel bundle:*",

package/src/_headers

@@ -1,5 +1,5 @@
 /*
-  Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' polyfill.io; style-src 'self' 'unsafe-inline' fonts.googleapis.com; img-src 'self' data: p3.aprimocdn.net img.youtube.com; font-src 'self' fonts.gstatic.com; frame-src 'self' brand.malvernpanalytical.com www.youtube.com; frame-ancestors 'self' brand.malvernpanalytical.com; object-src 'none'; base-uri 'self'; form-action 'self'; upgrade-insecure-requests; block-all-mixed-content; sandbox allow-forms allow-same-origin allow-scripts;
+  Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' polyfill.io; style-src 'self' 'unsafe-inline' fonts.googleapis.com; img-src 'self' data: p3.aprimocdn.net img.youtube.com; font-src 'self' fonts.gstatic.com; frame-src 'self' brand.malvernpanalytical.com www.youtube.com; frame-ancestors 'self' brand.malvernpanalytical.com; object-src 'none'; base-uri 'self'; form-action 'self'; upgrade-insecure-requests; block-all-mixed-content; sandbox allow-forms allow-same-origin allow-scripts allow-downloads;
   X-Content-Type-Options: nosniff
   X-Frame-Options: SAMEORIGIN
   X-XSS-Protection: 1; mode=block

package/src/_includes/components/card/card.scss

@@ -448,44 +448,6 @@
       }
     }
   }
-
-  &--event-series {
-    box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 20%);
-
-    .c-card__image img {
-      max-height: 252px;
-      aspect-ratio: 2/1;
-      object-fit: cover;
-    }
-
-    .c-card__wrapper,
-    .c-card__primary {
-      height: 100%;
-    }
-
-    .c-card__primary {
-      flex-shrink: 1;
-    }
-
-    .c-card__header > * + * {
-      @include margin('s', 0, 0, 0);
-    }
-
-    .c-card__datetime {
-      font-size: var(--step--1);
-      font-weight: normal;
-    }
-
-    .c-card__title {
-      font-size: var(--step-0);
-    }
-
-    .c-card__footer .u-link,
-    .c-card__footer .u-link svg {
-      color: color('utility-blue', 'step-1');
-      font-size: var(--step--1);
-    }
-  }
 }
 
 .grid-view > .c-card--event.c-card--has-image .c-card__wrapper {

package/src/_includes/components/card/event-series-card.config.js

@@ -0,0 +1,36 @@
+const categories = require('../component/categories');
+
+module.exports = {
+  title: 'Event series card',
+  category: categories.card,
+  component: {
+    name: 'event-series-card',
+    folder: 'card'
+  },
+  preview: 'cards-three',
+  context: {
+    title: 'Part 1 - The theory of X-Ray Fluorescence (XRF)',
+    date: 'Oct 2023',
+    image: {
+      src: '/static/img/range-product-1.jpg',
+      alt: ''
+    },
+    footer: {
+      link: {
+        link: '#',
+        label: 'Watch now',
+        icon: 'play'
+      }
+    }
+  },
+  variants: [],
+  props: [
+    {
+      table: [
+        ['title', 'string'],
+        ['link', 'string'],
+        ['image', 'object', 'Image object']
+      ]
+    }
+  ]
+}

package/src/_includes/components/card/event-series-card.njk

@@ -0,0 +1,45 @@
+{%- from "components/twi/macro.njk" import twi -%}
+
+<article class="mp c-event-series-card" role="article" aria-label="Event series card">
+  <div class="c-event-series-card__body">
+    <header class="c-event-series-card__header u-flow--2xs">
+      <h3 class="c-h c-event-series-card__heading">{{ params.title }}</h3>
+      <time class="c-event-series-card__datetime">
+        <span>{{ params.date }}</span>
+      </time>
+    </header>
+    {% if footer.link | length %}
+      <footer class="c-event-series-card__footer u-flow--2xs">
+        {{ twi({
+          label: footer.link.label,
+          icon: footer.link.icon
+        }) }}
+      </footer>
+    {% endif %}
+  </div>
+  <figure class="c-event-series-card__image">
+    <img src="{{ params.image.src }}" alt="{{ params.image.alt or params.title }}" />
+  </figure>
+</article>
+
+<article class="mp c-event-series-card" role="article" aria-label="Event series card">
+  <div class="c-event-series-card__body">
+    <header class="c-event-series-card__header u-flow--2xs">
+      <h3 class="c-h c-event-series-card__heading">{{ params.title }}</h3>
+      <time class="c-event-series-card__datetime">
+        <span>{{ params.date }}</span>
+      </time>
+    </header>
+    {% if footer.link | length %}
+      <footer class="c-event-series-card__footer u-flow--2xs">
+        {{ twi({
+          label: footer.link.label,
+          icon: footer.link.icon
+        }) }}
+      </footer>
+    {% endif %}
+  </div>
+  <figure class="c-event-series-card__image">
+    <img src="{{ params.image.src }}" alt="{{ params.image.alt or params.title }}" />
+  </figure>
+</article>

package/src/_includes/components/card/event-series-card.scss

@@ -0,0 +1,57 @@
+.c-event-series-card {
+  @extend .u-flow--2xs;
+  display: flex;
+  flex-flow: column;
+  box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 20%);
+    
+  & > * + * {
+    @include margin-top('2xs');
+  }
+
+  &__body {
+    @include padding('s-m');
+    display: flex;
+    flex-flow: column;
+    flex-grow: 1;
+  }
+
+  &__heading {
+
+  }
+
+  &__heading {
+    @extend .c-h;
+    font-size: var(--step-0);
+  }
+
+  &__datetime {
+    font-size: var(--step--1);
+    font-weight: normal;
+  }
+
+  &__footer {
+    @include margin-top('auto');
+    @include padding-top('s');
+    
+    & > * + * {
+      @include margin-top('2xs');
+    }
+
+    .c-twi {
+      color: color('utility-blue', 'step-1');
+      font-size: var(--step--1);
+    }
+  }
+
+  &__image {
+    height: 15.75em;
+    order: -1;
+    aspect-ratio: 2/1;
+
+    img {
+      height: 100%;
+      width: 100%;
+      object-fit: cover;
+    }
+  }
+}

package/src/_includes/components/comparison-table/comparison-table.scss

@@ -52,7 +52,6 @@
       @include space('max-height', '3xl');
       @include margin(0, 'auto');
       object-fit: contain;
-      mix-blend-mode: multiply;
     }
 
     p {

package/src/_includes/components/dynamic-form/dynamic-form.config.js

@@ -0,0 +1,16 @@
+module.exports = {
+  title: 'Dynamic form',
+  component: {
+    name: 'dynamic-form'
+  },
+  context: {
+    label: 'Find the perfect event for you'
+  },
+  props: [
+    {
+      table: [
+        ['label', 'string', 'Label the input']
+      ]
+    }
+  ]
+}

package/src/_includes/components/dynamic-form/dynamic-form.njk

@@ -0,0 +1,319 @@
+<div class="o-grid o-grid--8/3 o-grid--float u-wrap">
+        <div id="dynamicForm" class="u-flow u-margin-bottom-l">
+                <form id="EditProfile" class="mp-dynamicform" action="/en/profile/profile" method="post" name="dynamicForm" novalidate="" prefix="a: MP_DynamicForm" typeof="a:MP_DynamicForm">
+                <input name="__RequestVerificationToken" type="hidden" value="WmF3J04mv0dQrbAgTIQE93-NMZvwyf4gTN1MmOzb6xdHxKNf_y5j5s-fbk-2TxMzJhylnVfkGd_CAC2rj7zMRp8g5BaK4N564AXUw3hcaxVdsNuRPNH-HRs-qRNqVm4UXmQ5T9PkVQvLUBceY_Br7g2">
+                <div class="validation-summary-valid" data-valmsg-summary="true">
+                <ul>
+                        <li style="display:none"></li>
+                </ul>
+                </div>
+                <section class="c-form__section u-flow--m">
+                <h3 class="c-form__section-title" property="a:sectionTitle">About you</h3>
+                <div class="c-form__row ">
+                        <label class="c-label c-label--required" for="FirstName" property="a:label">First name</label>
+                        <input type="text" id="FirstName" class="c-input" name="First name" autocomplete="given-name" placeholder="" required="">
+                </div>
+                <div class="c-form__row ">
+                        <label class="c-label c-label--required" for="LastName" property="a:label">Last name</label>
+                        <input type="text" id="LastName" class="c-input" name="Last name" autocomplete="family-name" placeholder="" required="">
+                </div>
+                <div class="c-form__row ">
+                        <label class="c-label c-label--required" for="Telephone" property="a:label">Telephone</label>
+                        <input type="tel" id="Telephone" class="c-input" name="Telephone" autocomplete="off" placeholder="" required="">
+                </div>
+                <div class="c-form__row  u-disabled">
+                        <label class="c-label c-label--required" for="EmailAddress" property="a:label">Email address</label>
+                        <input type="email" id="EmailAddress" class="c-input" name="Email address" autocomplete="off" placeholder="" required="">
+                        <div class="c-input__description u-margin-top-xs">
+                        <p>To change your email address please contact <a href="">website support</a></p>
+                        </div>
+                </div>
+                </section>
+                <section class="c-form__section u-flow--m">
+                <h3 class="c-form-section__title" property="a:sectionTitle">About your company or institution</h3>
+                <div class="c-form__row ">
+                        <label class="c-label c-label--required" for="Company" property="a:label">Company / institution</label>
+                        <input type="text" id="Company" class="c-input" name="Company" autocomplete="off" placeholder="" required="">
+                </div>
+                <div class="c-form__row ">
+                        <label class="c-label " for="Department" property="a:label">Department</label>
+                        <input type="text" id="Department" class="c-input" name="Department" autocomplete="off" placeholder="">
+                </div>
+                <div class="c-form__row ">
+                        <label class="c-label c-label--required" for="Industry" property="a:label">Industry</label>
+                        <select id="Industry" class="c-input c-input--select" name="Industry" autocomplete="off" required="">
+                        <option value=""></option>
+                        <option value="tcm:50-69567-1024">Academia</option>
+                        <option value="tcm:50-41578-1024">Advanced Manufacturing</option>
+                        <option value="tcm:50-66937-1024">Aerospace</option>
+                        <option value="tcm:50-54762-1024">Agriculture</option>
+                        <option value="tcm:50-3961-1024">Agrochemicals</option>
+                        <option value="tcm:50-3926-1024">Automotive</option>
+                        <option value="tcm:50-11176-1024">Biologics</option>
+                        <option value="tcm:50-41783-1024">Building Materials</option>
+                        <option value="tcm:50-3959-1024">Chemicals</option>
+                        <option value="tcm:50-41782-1024">Chemicals/Coatings</option>
+                        <option value="tcm:50-3976-1024">Electronics/Optics</option>
+                        <option value="tcm:50-6943-1024">Energy/Battery</option>
+                        <option value="tcm:50-3938-1024">Environment</option>
+                        <option value="tcm:50-3939-1024">Food and Beverages</option>
+                        <option value="tcm:50-66938-1024">Government/Institutes</option>
+                        <option value="tcm:50-66939-1024">Manufacturing, Research and Analytical Services</option>
+                        <option value="tcm:50-3944-1024">Metals</option>
+                        <option value="tcm:50-41781-1024">Minerals</option>
+                        <option value="tcm:50-41780-1024">Mining</option>
+                        <option value="tcm:50-3949-1024">Oils, Fuels and Chemicals</option>
+                        <option value="tcm:50-3933-1024">Personal Care Products</option>
+                        <option value="tcm:50-11180-1024">Pharmaceutical</option>
+                        <option value="tcm:50-3958-1024">Polymers</option>
+                        <option value="tcm:50-41784-1024">Power Generation</option>
+                        <option value="tcm:50-3968-1024">Service labs/Integrators</option>
+                        <option value="tcm:50-66946-1024">University</option>
+                        </select>
+                </div>
+                <div class="c-form__row ">
+                        <label class="c-label c-label--required" for="City" property="a:label">City</label>
+                        <input type="text" id="City" class="c-input" name="City" autocomplete="address-level2" placeholder="" required="">
+                </div>
+                <div class="c-form__row ">
+                        <label class="c-label c-label--required" for="Country" property="a:label">Country</label>
+                        <select id="Country" class="c-input c-input--select" name="Country" autocomplete="country" required="">
+                        <option value=""></option>
+                        <option value="tcm:50-4994-1024">United States</option>
+                        <option value="tcm:50-4993-1024">United Kingdom</option>
+                        <option value="tcm:50-4995-1024">Afghanistan</option>
+                        <option value="tcm:50-4996-1024">Albania</option>
+                        <option value="tcm:50-4997-1024">Algeria</option>
+                        <option value="tcm:50-4999-1024">Andorra</option>
+                        <option value="tcm:50-5000-1024">Angola</option>
+                        <option value="tcm:50-5001-1024">Anguilla</option>
+                        <option value="tcm:50-5002-1024">Antarctica</option>
+                        <option value="tcm:50-5003-1024">Antigua and Barbuda</option>
+                        <option value="tcm:50-5004-1024">Argentina</option>
+                        <option value="tcm:50-5005-1024">Armenia</option>
+                        <option value="tcm:50-5006-1024">Aruba</option>
+                        <option value="tcm:50-5007-1024">Australia</option>
+                        <option value="tcm:50-5008-1024">Austria</option>
+                        <option value="tcm:50-5009-1024">Azerbaijan</option>
+                        <option value="tcm:50-5190-1024">Bahamas</option>
+                        <option value="tcm:50-5010-1024">Bahrain</option>
+                        <option value="tcm:50-5011-1024">Bangladesh</option>
+                        <option value="tcm:50-5012-1024">Barbados</option>
+                        <option value="tcm:50-5013-1024">Belarus</option>
+                        <option value="tcm:50-5014-1024">Belgium</option>
+                        <option value="tcm:50-5015-1024">Belize</option>
+                        <option value="tcm:50-5016-1024">Benin</option>
+                        <option value="tcm:50-5017-1024">Bermuda</option>
+                        <option value="tcm:50-5018-1024">Bhutan</option>
+                        <option value="tcm:50-5019-1024">Bolivia</option>
+                        <option value="tcm:50-5020-1024">Bosnia and Herzegovina</option>
+                        <option value="tcm:50-5021-1024">Botswana</option>
+                        <option value="tcm:50-15011-1024">Bouvet Islands</option>
+                        <option value="tcm:50-5022-1024">Brazil</option>
+                        <option value="tcm:50-14999-1024">British Indian Ocean Territory</option>
+                        <option value="tcm:50-5023-1024">British Virgin Islands</option>
+                        <option value="tcm:50-5024-1024">Brunei Darussalam</option>
+                        <option value="tcm:50-5025-1024">Bulgaria</option>
+                        <option value="tcm:50-5026-1024">Burkina Faso</option>
+                        <option value="tcm:50-5027-1024">Burundi</option>
+                        <option value="tcm:50-5028-1024">Cambodia</option>
+                        <option value="tcm:50-5029-1024">Cameroon</option>
+                        <option value="tcm:50-4990-1024">Canada</option>
+                        <option value="tcm:50-5030-1024">Cape Verde</option>
+                        <option value="tcm:50-5031-1024">Cayman Islands</option>
+                        <option value="tcm:50-5032-1024">Central African Republic</option>
+                        <option value="tcm:50-5033-1024">Chad</option>
+                        <option value="tcm:50-5034-1024">Chile</option>
+                        <option value="tcm:50-5035-1024">China</option>
+                        <option value="tcm:50-5036-1024">Christmas Island</option>
+                        <option value="tcm:50-5038-1024">Colombia</option>
+                        <option value="tcm:50-5039-1024">Comoros</option>
+                        <option value="tcm:50-5042-1024">Cook Islands</option>
+                        <option value="tcm:50-5043-1024">Costa Rica</option>
+                        <option value="tcm:50-5044-1024">Cote d'Ivoire</option>
+                        <option value="tcm:50-5045-1024">Croatia</option>
+                        <option value="tcm:50-15007-1024">Cuba</option>
+                        <option value="tcm:50-53469-1024">Curacao</option>
+                        <option value="tcm:50-5046-1024">Cyprus</option>
+                        <option value="tcm:50-5047-1024">Czech Republic</option>
+                        <option value="tcm:50-5041-1024">Democratic Republic of the Congo</option>
+                        <option value="tcm:50-5048-1024">Denmark</option>
+                        <option value="tcm:50-5049-1024">Djibouti</option>
+                        <option value="tcm:50-5050-1024">Dominica</option>
+                        <option value="tcm:50-5051-1024">Dominican Republic</option>
+                        <option value="tcm:50-5133-1024">Dutch Antilles</option>
+                        <option value="tcm:50-5192-1024">East Timor</option>
+                        <option value="tcm:50-5052-1024">Ecuador</option>
+                        <option value="tcm:50-5053-1024">Egypt</option>
+                        <option value="tcm:50-5054-1024">El Salvador</option>
+                        <option value="tcm:50-5055-1024">Equatorial Guinea</option>
+                        <option value="tcm:50-5056-1024">Eritrea</option>
+                        <option value="tcm:50-5057-1024">Estonia</option>
+                        <option value="tcm:50-5058-1024">Ethiopia</option>
+                        <option value="tcm:50-5060-1024">Falkland Islands</option>
+                        <option value="tcm:50-5061-1024">Faroe Islands</option>
+                        <option value="tcm:50-5063-1024">Fiji</option>
+                        <option value="tcm:50-5064-1024">Finland</option>
+                        <option value="tcm:50-4991-1024">France</option>
+                        <option value="tcm:50-5065-1024">French Guyana</option>
+                        <option value="tcm:50-5066-1024">French Polynesia</option>
+                        <option value="tcm:50-53471-1024">French Southern Territory</option>
+                        <option value="tcm:50-5067-1024">Gabon</option>
+                        <option value="tcm:50-5191-1024">Gambia</option>
+                        <option value="tcm:50-5068-1024">Georgia</option>
+                        <option value="tcm:50-5069-1024">Germany</option>
+                        <option value="tcm:50-5070-1024">Ghana</option>
+                        <option value="tcm:50-5071-1024">Gibraltar</option>
+                        <option value="tcm:50-5072-1024">Greece</option>
+                        <option value="tcm:50-5073-1024">Greenland</option>
+                        <option value="tcm:50-5074-1024">Grenada</option>
+                        <option value="tcm:50-5075-1024">Guadeloupe</option>
+                        <option value="tcm:50-5076-1024">Guam</option>
+                        <option value="tcm:50-5077-1024">Guatemala</option>
+                        <option value="tcm:50-5078-1024">Guinea</option>
+                        <option value="tcm:50-5079-1024">Guinea-Bissau</option>
+                        <option value="tcm:50-5080-1024">Guyana</option>
+                        <option value="tcm:50-5081-1024">Haiti</option>
+                        <option value="tcm:50-15012-1024">Heard and McDonald Islands</option>
+                        <option value="tcm:50-5082-1024">Honduras</option>
+                        <option value="tcm:50-5084-1024">Hungary</option>
+                        <option value="tcm:50-5085-1024">Iceland</option>
+                        <option value="tcm:50-5086-1024">India</option>
+                        <option value="tcm:50-5087-1024">Indonesia</option>
+                        <option value="tcm:50-5088-1024">Iraq</option>
+                        <option value="tcm:50-5089-1024">Ireland</option>
+                        <option value="tcm:50-5090-1024">Israel</option>
+                        <option value="tcm:50-5091-1024">Italy</option>
+                        <option value="tcm:50-5092-1024">Jamaica</option>
+                        <option value="tcm:50-5093-1024">Japan</option>
+                        <option value="tcm:50-5094-1024">Jordan</option>
+                        <option value="tcm:50-5095-1024">Kazakhstan</option>
+                        <option value="tcm:50-5096-1024">Kenya</option>
+                        <option value="tcm:50-5097-1024">Kiribati</option>
+                        <option value="tcm:50-53473-1024">Kosovo</option>
+                        <option value="tcm:50-5098-1024">Kuwait</option>
+                        <option value="tcm:50-5099-1024">Kyrgyzstan</option>
+                        <option value="tcm:50-5100-1024">Laos</option>
+                        <option value="tcm:50-5101-1024">Latvia</option>
+                        <option value="tcm:50-5102-1024">Lebanon</option>
+                        <option value="tcm:50-5103-1024">Lesotho</option>
+                        <option value="tcm:50-5104-1024">Liberia</option>
+                        <option value="tcm:50-15014-1024">Libya</option>
+                        <option value="tcm:50-5105-1024">Liechtenstein</option>
+                        <option value="tcm:50-5106-1024">Lithuania</option>
+                        <option value="tcm:50-5107-1024">Luxembourg</option>
+                        <option value="tcm:50-5059-1024">Macedonia</option>
+                        <option value="tcm:50-5109-1024">Madagascar</option>
+                        <option value="tcm:50-5110-1024">Malawi</option>
+                        <option value="tcm:50-5111-1024">Malaysia</option>
+                        <option value="tcm:50-5112-1024">Maldives</option>
+                        <option value="tcm:50-5113-1024">Mali</option>
+                        <option value="tcm:50-5114-1024">Malta</option>
+                        <option value="tcm:50-5115-1024">Marshall Islands</option>
+                        <option value="tcm:50-5116-1024">Martinique</option>
+                        <option value="tcm:50-5117-1024">Mauritania</option>
+                        <option value="tcm:50-5119-1024">Mayotte</option>
+                        <option value="tcm:50-5120-1024">Mexico</option>
+                        <option value="tcm:50-5062-1024">Micronesia</option>
+                        <option value="tcm:50-5122-1024">Monaco</option>
+                        <option value="tcm:50-5123-1024">Mongolia</option>
+                        <option value="tcm:50-53475-1024">Montenegro</option>
+                        <option value="tcm:50-5125-1024">Montserrat</option>
+                        <option value="tcm:50-5126-1024">Morocco</option>
+                        <option value="tcm:50-5127-1024">Mozambique</option>
+                        <option value="tcm:50-5128-1024">Myanmar</option>
+                        <option value="tcm:50-5129-1024">Namibia</option>
+                        <option value="tcm:50-5130-1024">Nauru</option>
+                        <option value="tcm:50-5131-1024">Nepal</option>
+                        <option value="tcm:50-5132-1024">Netherlands</option>
+                        <option value="tcm:50-5134-1024">New Caledonia</option>
+                        <option value="tcm:50-5135-1024">New Zealand</option>
+                        <option value="tcm:50-5136-1024">Nicaragua</option>
+                        <option value="tcm:50-5137-1024">Niger</option>
+                        <option value="tcm:50-5138-1024">Nigeria</option>
+                        <option value="tcm:50-5140-1024">Norfolk Islands</option>
+                        <option value="tcm:50-5141-1024">North Mariana Islands</option>
+                        <option value="tcm:50-5142-1024">Norway</option>
+                        <option value="tcm:50-5143-1024">Oman</option>
+                        <option value="tcm:50-5144-1024">Pakistan</option>
+                        <option value="tcm:50-5145-1024">Palau</option>
+                        <option value="tcm:50-5146-1024">Palestine</option>
+                        <option value="tcm:50-5147-1024">Panama</option>
+                        <option value="tcm:50-5148-1024">Papua New Guinea</option>
+                        <option value="tcm:50-5149-1024">Paraguay</option>
+                        <option value="tcm:50-5150-1024">Peru</option>
+                        <option value="tcm:50-5151-1024">Philippines</option>
+                        <option value="tcm:50-5152-1024">Pitcairn Islands</option>
+                        <option value="tcm:50-5153-1024">Poland</option>
+                        <option value="tcm:50-5154-1024">Portugal</option>
+                        <option value="tcm:50-5155-1024">Puerto Rico</option>
+                        <option value="tcm:50-5156-1024">Qatar</option>
+                        <option value="tcm:50-5157-1024">Reunion</option>
+                        <option value="tcm:50-5158-1024">Romania</option>
+                        <option value="tcm:50-5159-1024">Russian Federation</option>
+                        <option value="tcm:50-5160-1024">Rwanda</option>
+                        <option value="tcm:50-5179-1024">Saint Kitts and Nevis</option>
+                        <option value="tcm:50-5162-1024">Samoa</option>
+                        <option value="tcm:50-5163-1024">San Marino</option>
+                        <option value="tcm:50-5164-1024">Sao Tome and Principe</option>
+                        <option value="tcm:50-5165-1024">Saudi Arabia</option>
+                        <option value="tcm:50-5166-1024">Senegal</option>
+                        <option value="tcm:50-53477-1024">Serbia</option>
+                        <option value="tcm:50-5168-1024">Seychelles</option>
+                        <option value="tcm:50-5169-1024">Sierra Leone</option>
+                        <option value="tcm:50-4992-1024">Singapore</option>
+                        <option value="tcm:50-53479-1024">Sint Maarten</option>
+                        <option value="tcm:50-5170-1024">Slovakia</option>
+                        <option value="tcm:50-5171-1024">Slovenia</option>
+                        <option value="tcm:50-5172-1024">Solomon Islands</option>
+                        <option value="tcm:50-5173-1024">Somalia</option>
+                        <option value="tcm:50-5174-1024">South Africa</option>
+                        <option value="tcm:50-15018-1024">South Georgia and the Southern Sandwich Islands</option>
+                        <option value="tcm:50-5175-1024">South Korea</option>
+                        <option value="tcm:50-5176-1024">Spain</option>
+                        <option value="tcm:50-5177-1024">Sri Lanka</option>
+                        <option value="tcm:50-5180-1024">St. Lucia</option>
+                        <option value="tcm:50-15010-1024">Sudan</option>
+                        <option value="tcm:50-5182-1024">Suriname</option>
+                        <option value="tcm:50-5184-1024">Sweden</option>
+                        <option value="tcm:50-5185-1024">Switzerland</option>
+                        <option value="tcm:50-15008-1024">Syria</option>
+                        <option value="tcm:50-5186-1024">Taiwan</option>
+                        <option value="tcm:50-5187-1024">Tajikistan</option>
+                        <option value="tcm:50-5188-1024">Tanzania</option>
+                        <option value="tcm:50-5189-1024">Thailand</option>
+                        <option value="tcm:50-5193-1024">Togo</option>
+                        <option value="tcm:50-5194-1024">Tokelau Islands</option>
+                        <option value="tcm:50-5195-1024">Tonga</option>
+                        <option value="tcm:50-5196-1024">Trinidad and Tobago</option>
+                        <option value="tcm:50-5197-1024">Tunisia</option>
+                        <option value="tcm:50-5198-1024">Turkey</option>
+                        <option value="tcm:50-5199-1024">Turkmenistan</option>
+                        <option value="tcm:50-5200-1024">Turks and Caicos Islands</option>
+                        <option value="tcm:50-5201-1024">Tuvalu</option>
+                        <option value="tcm:50-5203-1024">Uganda</option>
+                        <option value="tcm:50-5204-1024">Ukraine</option>
+                        <option value="tcm:50-5205-1024">United Arab Emirates</option>
+                        <option value="tcm:50-4993-1024">United Kingdom</option>
+                        <option value="tcm:50-4994-1024">United States</option>
+                        <option value="tcm:50-5206-1024">Uruguay</option>
+                        <option value="tcm:50-5207-1024">Uzbekistan</option>
+                        <option value="tcm:50-5208-1024">Vanuatu</option>
+                        <option value="tcm:50-5210-1024">Venezuela</option>
+                        <option value="tcm:50-5211-1024">Vietnam</option>
+                        <option value="tcm:50-5212-1024">Wallis and Futuna Islands</option>
+                        <option value="tcm:50-5213-1024">Yemen</option>
+                        <option value="tcm:50-5214-1024">Zambia</option>
+                        <option value="tcm:50-5215-1024">Zimbabwe</option>
+                        </select>
+                </div>
+                </section>
+                <div class="c-form__section">
+                <button id="btnSubmit" class="mp c-button c-button--inline">
+                        Model.Submit
+                </button>
+                </div>
+                <input type="hidden" name="FirstClickChannel" value="Direct"><input type="hidden" name="FirstClickLandingUrl" value="localhost/en"><input type="hidden" name="LastClickChannel" value="Direct"><input type="hidden" name="LastClickLandingUrl" value="localhost/en/profile"><input type="hidden" name="#SEOInteractions" value="0"><input type="hidden" name="#DirectInteractions" value="12"><input type="hidden" name="#OtherInteractions" value="0"><input type="hidden" name="#GoogleAdsInteractions" value="0"><input type="hidden" name="#LinkedinAdsInteractions" value="0"><input type="hidden" name="#FacebookAdsInteractions" value="0"><input type="hidden" name="#BingAdsInteraction" value="0"><input type="hidden" name="FirstClickGoogleClientID" value="1232913074.1679323359"><input type="hidden" name="LastClickGoogleClientID" value="1232913074.1679323359">
+                </form>
+                </div>
+</div>

package/src/_includes/components/dynamic-form/dynamic-form.scss

@@ -0,0 +1,77 @@
+.mp-dynamicform {
+  .c-form {
+    &__section {
+      @include padding('l');
+      background: color('petrol', 'step-3');
+
+      &-title {
+        @include step(3);
+      }
+
+      &+ .c-form__section {
+        border-top: 2px solid color('white');
+      }
+    }
+  }
+
+  // .c-label
+  .c-label {
+    
+    &--required::after {
+      content: "*";
+      color: color('red');
+      padding: 0 2px;
+      position: relative;
+      top: -2px;
+    }
+  }
+
+  // .c-input
+  .c-input {
+    &__wrap {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: var(--space-s);
+
+      .c-label {
+        @include margin-bottom(0);
+        flex-basis: 148px;
+
+        &+ * {
+          flex-grow: 1;
+          flex-shrink: 0;
+          flex-basis: 148px;
+        }
+      }
+
+      &--messages {
+        @include margin-top(0);
+        row-gap: 0;
+
+        p {
+          @include margin-top('2xs');
+          @include step(-1);
+        }
+      }
+    }
+
+    &__spacer {
+      height: 0;
+      flex-basis: 148px;
+    }
+
+    &--select {
+      cursor: pointer;
+    }
+  }
+
+  // .c-checkbox
+  // .c-radio
+  .c-checkbox,
+  .c-radio {
+    &+ label {
+      display: inline-block;
+    }
+  }
+}

package/src/_includes/components/dynamic-form/macro.njk

@@ -0,0 +1,5 @@
+{% from "components/component/component.njk" import c %}
+
+{% macro dynamicForm(params) %}
+  {{ c({ name: 'dynamic-form' }, params) }}
+{% endmacro %}

package/src/_includes/components/embed/embed.scss

@@ -1,4 +1,7 @@
 .c-embed {
+  position: relative;
+  z-index: -1;
+
   &__wrapper {
     padding-bottom: 56.625%;
     position: relative;