@mozaic-ds/web-components 1.0.0-alpha.4 → 1.0.0-alpha.5

package/dist/checkbox/Checkbox.svelte

@@ -0,0 +1,199 @@
+<svelte:options
+  customElement={{
+    tag: 'm-checkbox',
+  }}
+/>
+
+<script lang="ts">
+  interface Props {
+    name: string;
+    id: string;
+    checked: boolean;
+    indeterminate: boolean;
+    disabled?: boolean;
+    isinvalid?: boolean;
+    label: string;
+    ischecked: boolean;
+  }
+
+  let {
+    name = 'checkbox',
+    id,
+    indeterminate,
+    disabled = false,
+    isinvalid = false,
+    label,
+    ischecked,
+    ...events
+  }: Props = $props();
+
+  let isChecked = $state(ischecked);
+</script>
+
+<div class="mc-checkbox">
+  <input
+    {id}
+    type="checkbox"
+    class="mc-checkbox__input"
+    class:is-invalid={isinvalid}
+    aria-invalid={isinvalid}
+    {name}
+    {disabled}
+    {indeterminate}
+    bind:checked={isChecked}
+    {...events}
+  />
+  {#if label}
+    <label for={name} class="mc-checkbox__label">{label}</label>
+  {/if}
+</div>
+
+<style>/**
+ * Do not edit directly, this file was auto-generated.
+ */
+/* stylelint-disable string-no-newline */
+.mc-checkbox {
+  align-items: center;
+  display: flex;
+  gap: 0.5rem;
+}
+.mc-checkbox__label {
+  font-size: 1rem;
+  line-height: 1.3;
+  color: var(--forms-color-text-default, #000000);
+  cursor: pointer;
+}
+.mc-checkbox__input {
+  appearance: none;
+  margin: 0;
+  cursor: pointer;
+  transition: box-shadow 200ms ease;
+  background-color: var(--forms-color-background-default, #ffffff);
+  border: 0.125rem solid var(--forms-color-border-default, #666666);
+  border-radius: 0.25rem;
+  transition: all ease 200ms;
+  height: 1.25rem;
+  width: 1.25rem;
+}
+.mc-checkbox__input:hover {
+  border-color: var(--forms-color-border-hover, #4d4d4d);
+}
+.mc-checkbox__input:focus-visible {
+  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
+  outline: 0.125rem solid transparent;
+  outline-offset: 0.125rem;
+}
+.mc-checkbox__input:checked {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-inverse, %23ffffff)' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E");
+}
+.mc-checkbox__input:indeterminate {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-inverse, %23ffffff)' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E");
+}
+.mc-checkbox__input:checked, .mc-checkbox__input:indeterminate {
+  background-color: var(--forms-color-background-checked, #117f03);
+  background-size: 1rem 1rem;
+  background-position: center;
+}
+.mc-checkbox__input:checked, .mc-checkbox__input:indeterminate, .mc-checkbox__input:disabled {
+  border-color: transparent;
+}
+.mc-checkbox__input:disabled {
+  background-color: var(--forms-color-background-disabled, #d9d9d9);
+  cursor: not-allowed;
+}
+.mc-checkbox__input:disabled:checked {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-disabled, %23737373)' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E");
+}
+.mc-checkbox__input:disabled:indeterminate {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-disabled, %23737373)' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E");
+}
+.mc-checkbox__input:disabled + .mc-checkbox__label {
+  color: var(--forms-color-text-disabled, #737373);
+  cursor: not-allowed;
+}
+.mc-checkbox__input:not(:disabled):checked:hover, .mc-checkbox__input:not(:disabled):indeterminate:hover {
+  background-color: var(--forms-color-background-checked-hover, #006902);
+}
+.mc-checkbox__input.is-invalid:not(:checked):not(:indeterminate) {
+  border-color: var(--forms-color-border-invalid, #ea302d);
+}
+.mc-checkbox__input.is-invalid:not(:checked):not(:indeterminate):hover {
+  border-color: var(--forms-color-border-invalid-hover, #c61112);
+}
+
+/* stylelint-enable string-no-newline */
+/* stylelint-disable string-no-newline */
+.mc-field__label, .mc-field__legend {
+  font-size: 0.875rem;
+  line-height: 1.3;
+  font-weight: 400;
+  color: var(--field-color-label, #000000);
+}
+.mc-field__legend {
+  padding-left: 0;
+  padding-right: 0;
+}
+.mc-field__legend + .mc-field__container, .mc-field__help + .mc-field__container {
+  margin-top: 0.5rem;
+}
+.mc-field__requirement, .mc-field__help {
+  font-size: 0.75rem;
+  line-height: 1.5;
+  font-weight: 400;
+  vertical-align: top;
+  color: var(--field-color-requirement, #666666);
+}
+.mc-field__help {
+  display: block;
+  margin-top: 0.125rem;
+}
+.mc-field__content {
+  margin-top: 0.5rem;
+}
+.mc-field__container--inline, .mc-field__element--inline {
+  display: flex;
+  flex-wrap: wrap;
+}
+.mc-field__container--inline__item:not(:last-child), .mc-field__element--inline__item:not(:last-child) {
+  margin-bottom: 0.25rem;
+  margin-right: 1rem;
+}
+.mc-field__item {
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+}
+.mc-field__item:not(:last-child) {
+  margin-bottom: 0.25rem;
+}
+.mc-field__validation-message {
+  font-size: 0.875rem;
+  line-height: 1.5;
+  display: inline-flex;
+  gap: 0.25rem;
+  margin-top: 0.25rem;
+}
+.mc-field__validation-message::before {
+  content: "";
+  height: 1.25rem;
+  width: 1.25rem;
+}
+.mc-field__validation-message.is-valid {
+  color: var(--field-color-validation-valid, #117f03);
+}
+.mc-field__validation-message.is-valid::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-valid, %23117f03)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E");
+}
+.mc-field__validation-message.is-invalid {
+  color: var(--field-color-validation-invalid, #c61112);
+}
+.mc-field__validation-message.is-invalid::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-invalid, %23c61112)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E");
+}
+.mc-field--group {
+  border: none;
+  margin-left: 0;
+  margin-right: 0;
+  padding: 0;
+}
+
+/* stylelint-enable string-no-newline */</style>

package/dist/checkbox/Checkbox.svelte.d.ts

@@ -0,0 +1,14 @@
+interface Props {
+    name: string;
+    id: string;
+    checked: boolean;
+    indeterminate: boolean;
+    disabled?: boolean;
+    isinvalid?: boolean;
+    label: string;
+    ischecked: boolean;
+}
+declare const Checkbox: import("svelte").Component<Props, {}, "">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;
+//# sourceMappingURL=Checkbox.svelte.d.ts.map

package/dist/checkbox/Checkbox.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.svelte.d.ts","sourceRoot":"","sources":["../../src/components/checkbox/Checkbox.svelte.ts"],"names":[],"mappings":"AAGE,UAAU,KAAK;IACb,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;CACpB;AAiCH,QAAA,MAAM,QAAQ,2CAAsC,CAAC;AACrD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/{components/checkboxgroup → checkboxgroup}/checkboxGroup.js

@@ -1,4 +1,4 @@
-import{d as q,c as F,p as I,a as J,b as s,z as K,A as L,t as f,s as A,e as d,f as h,g as u,h as N,i as v,r as i,j as H,m as r,k as O,C as P}from"../../custom-element.js";import{i as V}from"../../if.js";import{e as Q}from"../../each.js";import{r as R,s as m,a as T}from"../../attributes.js";import{a as U}from"../../input.js";function W(p,n,_){n()(r(_))}var X=f('<legend class="mc-field__legend svelte-1vlbnyp"> </legend>'),Y=f('<label class="mc-checkbox__label svelte-1vlbnyp"> </label>'),Z=f('<div class="mc-checkbox mc-field__item svelte-1vlbnyp"><input type="checkbox"> <!></div>'),$=f('<div class="checkbox-group-container"><fieldset class="mc-field mc-field--group svelte-1vlbnyp"><!> <div class="mc-field__container svelte-1vlbnyp"></div></fieldset></div>');const ee={hash:"svelte-1vlbnyp",code:`/**
+import{d as q,c as F,p as I,a as J,b as s,z as K,A as L,t as f,s as A,e as d,f as h,g as u,h as N,i as v,r as i,j as H,m as r,k as O,C as P}from"../custom-element.js";import{i as V}from"../if.js";import{e as Q}from"../each.js";import{r as R,s as m,a as T}from"../attributes.js";import{a as U}from"../input.js";function W(p,n,_){n()(r(_))}var X=f('<legend class="mc-field__legend svelte-1vlbnyp"> </legend>'),Y=f('<label class="mc-checkbox__label svelte-1vlbnyp"> </label>'),Z=f('<div class="mc-checkbox mc-field__item svelte-1vlbnyp"><input type="checkbox"> <!></div>'),$=f('<div class="checkbox-group-container"><fieldset class="mc-field mc-field--group svelte-1vlbnyp"><!> <div class="mc-field__container svelte-1vlbnyp"></div></fieldset></div>');const ee={hash:"svelte-1vlbnyp",code:`/**
  * Do not edit directly, this file was auto-generated.
  */
 /* stylelint-disable string-no-newline */.mc-checkbox.svelte-1vlbnyp {align-items:center;display:flex;gap:0.5rem;}.mc-checkbox__label.svelte-1vlbnyp {font-size:1rem;line-height:1.3;color:var(--forms-color-text-default, #000000);cursor:pointer;}.mc-checkbox__input.svelte-1vlbnyp {appearance:none;margin:0;cursor:pointer;transition:box-shadow 200ms ease;background-color:var(--forms-color-background-default, #ffffff);border:0.125rem solid var(--forms-color-border-default, #666666);border-radius:0.25rem;transition:all ease 200ms;height:1.25rem;width:1.25rem;}.mc-checkbox__input.svelte-1vlbnyp:hover {border-color:var(--forms-color-border-hover, #4d4d4d);}.mc-checkbox__input.svelte-1vlbnyp:focus-visible {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-checkbox__input.svelte-1vlbnyp:checked {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-inverse, %23ffffff)' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E");}.mc-checkbox__input.svelte-1vlbnyp:indeterminate {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-inverse, %23ffffff)' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E");}.mc-checkbox__input.svelte-1vlbnyp:checked, .mc-checkbox__input.svelte-1vlbnyp:indeterminate {background-color:var(--forms-color-background-checked, #117f03);background-size:1rem 1rem;background-position:center;}.mc-checkbox__input.svelte-1vlbnyp:checked, .mc-checkbox__input.svelte-1vlbnyp:indeterminate, .mc-checkbox__input.svelte-1vlbnyp:disabled {border-color:transparent;}.mc-checkbox__input.svelte-1vlbnyp:disabled {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;}.mc-checkbox__input.svelte-1vlbnyp:disabled:checked {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-disabled, %23737373)' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E");}.mc-checkbox__input.svelte-1vlbnyp:disabled:indeterminate {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-disabled, %23737373)' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E");}.mc-checkbox__input.svelte-1vlbnyp:disabled + .mc-checkbox__label:where(.svelte-1vlbnyp) {color:var(--forms-color-text-disabled, #737373);cursor:not-allowed;}.mc-checkbox__input.svelte-1vlbnyp:not(:disabled):checked:hover, .mc-checkbox__input.svelte-1vlbnyp:not(:disabled):indeterminate:hover {background-color:var(--forms-color-background-checked-hover, #006902);}.mc-checkbox__input.is-invalid.svelte-1vlbnyp:not(:checked):not(:indeterminate) {border-color:var(--forms-color-border-invalid, #ea302d);}.mc-checkbox__input.is-invalid.svelte-1vlbnyp:not(:checked):not(:indeterminate):hover {border-color:var(--forms-color-border-invalid-hover, #c61112);}

package/dist/checkboxgroup/checkboxGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkboxGroup.js","sources":["../../src/components/checkboxgroup/checkboxGroup.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-checkbox-group',\n    props: {\n      options: { reflect: true, type: 'Array', attribute: 'options' },\n    },\n    shadow: 'none',\n  }}\n/>\n\n<script lang=\"ts\">\n  import type { CheckboxGroupOption } from './checkboxgroup.types';\n\n  interface Props {\n    id: string;\n    options: Array<CheckboxGroupOption>;\n    legend: string;\n    selected: Array<String>;\n  }\n\n  let { id, options, legend, selected, onchange }: Props = $props();\n  let selectedValues = $state(selected);\n  function selectValue() {\n    onchange(selectedValues);\n  }\n</script>\n\n<div class=\"checkbox-group-container\" {id}>\n  <fieldset class=\"mc-field mc-field--group\">\n    {#if legend && legend.length}\n      <legend class=\"mc-field__legend\">\n        {legend}\n      </legend>\n    {/if}\n    <div class=\"mc-field__container\">\n      {#each options as opt (opt.id)}\n        <div class=\"mc-checkbox mc-field__item\">\n          <input\n            type=\"checkbox\"\n            class=\"mc-checkbox__input {opt.isinvalid ? ' is-invalid' : ''}\"\n            id={opt.id}\n            name={opt.name}\n            checked={opt.checked}\n            disabled={opt.disabled}\n            indeterminate={opt.indeterminate}\n            aria-invalid={opt.isinvalid}\n            bind:group={selectedValues}\n            value={opt.name}\n            onchange={selectValue}\n          />\n          {#if opt.label}\n            <label for={opt.id} class=\"mc-checkbox__label\">{opt.label}</label>\n          {/if}\n        </div>\n      {/each}\n    </div>\n  </fieldset>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/checkbox';\n  @use '@mozaic-ds/styles/components/field';\n</style>\n"],"names":["selectValue","_","onchange","selectedValues","id","$.prop","$$props","options","legend","selected","$$render","consequent","$.each","div_1","opt","$.set_attribute","label","$.get","$.set_text","text_1","consequent_1","$.set_class","input","$.set_checked","input_value","$$value"],"mappings":"sTAsBW,SAAAA,EAAcC,EAAAC,EAAAC,EAAA,CACrBD,MAASC,CAAc,CAAA,CACzB;;;;;;;;2FAJMC,EAAEC,EAAAC,EAAA,KAAA,CAAA,EAAEC,EAAOF,EAAAC,EAAA,UAAA,CAAA,EAAEE,EAAMH,EAAAC,EAAA,SAAA,CAAA,EAAEG,EAAQJ,EAAAC,EAAA,WAAA,CAAA,EAAEJ,EAAQG,EAAAC,EAAA,WAAA,CAAA,EACzCH,MAAwBM,EAAQ,CAAA,CAAA,wEAU7BD,EAAM,CAAA,CAAA,kBAFNA,EAAM,GAAIA,EAAM,EAAC,QAAME,EAAAC,CAAA,iBAMnBC,OAAAA,EAAAC,EAAA,GAAAN,EAAWO,GAAKA,EAAI,MAATA,IAAG,yCAaLd,EAAWE,EAAAC,CAAA,0DAGTY,EAAAC,EAAA,MAAAC,EAAAH,CAAG,EAAC,EAAE,EAA8BI,EAAAC,EAAAF,EAAAH,CAAG,EAAC,KAAK,oBADtDG,EAAAH,CAAG,EAAC,OAAKJ,EAAAU,CAAA,gBAXeC,EAAAC,EAAA,EAAA,uBAAAL,EAAAH,CAAG,EAAC,UAAY,cAAgB,KAAE,EAAA,GAAA,gBAAA,EACzDC,EAAAO,EAAA,KAAAL,EAAAH,CAAG,EAAC,EAAE,EACJC,EAAAO,EAAA,OAAAL,EAAAH,CAAG,EAAC,IAAI,EACLS,EAAAD,EAAAL,EAAAH,CAAG,EAAC,OAAO,EACVQ,EAAA,SAAAL,EAAAH,CAAG,EAAC,SACCQ,EAAA,cAAAL,EAAAH,CAAG,EAAC,cACLC,EAAAO,EAAA,eAAAL,EAAAH,CAAG,EAAC,SAAS,EAEpBU,KAAAA,EAAAP,EAAAH,CAAG,EAAC,QAAJQ,EAAA,OAAAA,EAAA,QAAAL,EAAAH,CAAG,EAAC,OAAJ,KAAA,GAAAG,EAAAH,CAAG,EAAC,sBAAJG,EAAAH,CAAG,EAAC,OADCX,CAAc,QAAdA,EAAcsB,CAAA"}

package/dist/checkboxgroup/checkboxGroup.svelte

@@ -0,0 +1,208 @@
+<svelte:options
+  customElement={{
+    tag: 'm-checkbox-group',
+    props: {
+      options: { reflect: true, type: 'Array', attribute: 'options' },
+    },
+    shadow: 'none',
+  }}
+/>
+
+<script lang="ts">
+  import type { CheckboxGroupOption } from './checkboxgroup.types';
+
+  interface Props {
+    id: string;
+    options: Array<CheckboxGroupOption>;
+    legend: string;
+    selected: Array<String>;
+  }
+
+  let { id, options, legend, selected, onchange }: Props = $props();
+  let selectedValues = $state(selected);
+  function selectValue() {
+    onchange(selectedValues);
+  }
+</script>
+
+<div class="checkbox-group-container" {id}>
+  <fieldset class="mc-field mc-field--group">
+    {#if legend && legend.length}
+      <legend class="mc-field__legend">
+        {legend}
+      </legend>
+    {/if}
+    <div class="mc-field__container">
+      {#each options as opt (opt.id)}
+        <div class="mc-checkbox mc-field__item">
+          <input
+            type="checkbox"
+            class="mc-checkbox__input {opt.isinvalid ? ' is-invalid' : ''}"
+            id={opt.id}
+            name={opt.name}
+            checked={opt.checked}
+            disabled={opt.disabled}
+            indeterminate={opt.indeterminate}
+            aria-invalid={opt.isinvalid}
+            bind:group={selectedValues}
+            value={opt.name}
+            onchange={selectValue}
+          />
+          {#if opt.label}
+            <label for={opt.id} class="mc-checkbox__label">{opt.label}</label>
+          {/if}
+        </div>
+      {/each}
+    </div>
+  </fieldset>
+</div>
+
+<style>/**
+ * Do not edit directly, this file was auto-generated.
+ */
+/* stylelint-disable string-no-newline */
+.mc-checkbox {
+  align-items: center;
+  display: flex;
+  gap: 0.5rem;
+}
+.mc-checkbox__label {
+  font-size: 1rem;
+  line-height: 1.3;
+  color: var(--forms-color-text-default, #000000);
+  cursor: pointer;
+}
+.mc-checkbox__input {
+  appearance: none;
+  margin: 0;
+  cursor: pointer;
+  transition: box-shadow 200ms ease;
+  background-color: var(--forms-color-background-default, #ffffff);
+  border: 0.125rem solid var(--forms-color-border-default, #666666);
+  border-radius: 0.25rem;
+  transition: all ease 200ms;
+  height: 1.25rem;
+  width: 1.25rem;
+}
+.mc-checkbox__input:hover {
+  border-color: var(--forms-color-border-hover, #4d4d4d);
+}
+.mc-checkbox__input:focus-visible {
+  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
+  outline: 0.125rem solid transparent;
+  outline-offset: 0.125rem;
+}
+.mc-checkbox__input:checked {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-inverse, %23ffffff)' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E");
+}
+.mc-checkbox__input:indeterminate {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-inverse, %23ffffff)' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E");
+}
+.mc-checkbox__input:checked, .mc-checkbox__input:indeterminate {
+  background-color: var(--forms-color-background-checked, #117f03);
+  background-size: 1rem 1rem;
+  background-position: center;
+}
+.mc-checkbox__input:checked, .mc-checkbox__input:indeterminate, .mc-checkbox__input:disabled {
+  border-color: transparent;
+}
+.mc-checkbox__input:disabled {
+  background-color: var(--forms-color-background-disabled, #d9d9d9);
+  cursor: not-allowed;
+}
+.mc-checkbox__input:disabled:checked {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-disabled, %23737373)' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E");
+}
+.mc-checkbox__input:disabled:indeterminate {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-disabled, %23737373)' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E");
+}
+.mc-checkbox__input:disabled + .mc-checkbox__label {
+  color: var(--forms-color-text-disabled, #737373);
+  cursor: not-allowed;
+}
+.mc-checkbox__input:not(:disabled):checked:hover, .mc-checkbox__input:not(:disabled):indeterminate:hover {
+  background-color: var(--forms-color-background-checked-hover, #006902);
+}
+.mc-checkbox__input.is-invalid:not(:checked):not(:indeterminate) {
+  border-color: var(--forms-color-border-invalid, #ea302d);
+}
+.mc-checkbox__input.is-invalid:not(:checked):not(:indeterminate):hover {
+  border-color: var(--forms-color-border-invalid-hover, #c61112);
+}
+
+/* stylelint-enable string-no-newline */
+/* stylelint-disable string-no-newline */
+.mc-field__label, .mc-field__legend {
+  font-size: 0.875rem;
+  line-height: 1.3;
+  font-weight: 400;
+  color: var(--field-color-label, #000000);
+}
+.mc-field__legend {
+  padding-left: 0;
+  padding-right: 0;
+}
+.mc-field__legend + .mc-field__container, .mc-field__help + .mc-field__container {
+  margin-top: 0.5rem;
+}
+.mc-field__requirement, .mc-field__help {
+  font-size: 0.75rem;
+  line-height: 1.5;
+  font-weight: 400;
+  vertical-align: top;
+  color: var(--field-color-requirement, #666666);
+}
+.mc-field__help {
+  display: block;
+  margin-top: 0.125rem;
+}
+.mc-field__content {
+  margin-top: 0.5rem;
+}
+.mc-field__container--inline, .mc-field__element--inline {
+  display: flex;
+  flex-wrap: wrap;
+}
+.mc-field__container--inline__item:not(:last-child), .mc-field__element--inline__item:not(:last-child) {
+  margin-bottom: 0.25rem;
+  margin-right: 1rem;
+}
+.mc-field__item {
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+}
+.mc-field__item:not(:last-child) {
+  margin-bottom: 0.25rem;
+}
+.mc-field__validation-message {
+  font-size: 0.875rem;
+  line-height: 1.5;
+  display: inline-flex;
+  gap: 0.25rem;
+  margin-top: 0.25rem;
+}
+.mc-field__validation-message::before {
+  content: "";
+  height: 1.25rem;
+  width: 1.25rem;
+}
+.mc-field__validation-message.is-valid {
+  color: var(--field-color-validation-valid, #117f03);
+}
+.mc-field__validation-message.is-valid::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-valid, %23117f03)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E");
+}
+.mc-field__validation-message.is-invalid {
+  color: var(--field-color-validation-invalid, #c61112);
+}
+.mc-field__validation-message.is-invalid::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-invalid, %23c61112)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E");
+}
+.mc-field--group {
+  border: none;
+  margin-left: 0;
+  margin-right: 0;
+  padding: 0;
+}
+
+/* stylelint-enable string-no-newline */</style>

package/dist/checkboxgroup/checkboxGroup.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { CheckboxGroupOption } from './checkboxgroup.types';
+interface Props {
+    id: string;
+    options: Array<CheckboxGroupOption>;
+    legend: string;
+    selected: Array<String>;
+}
+declare const CheckboxGroup: import("svelte").Component<Props, {}, "">;
+type CheckboxGroup = ReturnType<typeof CheckboxGroup>;
+export default CheckboxGroup;
+//# sourceMappingURL=checkboxGroup.svelte.d.ts.map

package/dist/checkboxgroup/checkboxGroup.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkboxGroup.svelte.d.ts","sourceRoot":"","sources":["../../src/components/checkboxgroup/checkboxGroup.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAG/D,UAAU,KAAK;IACb,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,KAAK,CAAC,mBAAmB,CAAC,CAAC;IACpC,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;CACzB;AA4CH,QAAA,MAAM,aAAa,2CAAsC,CAAC;AAC1D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/checkboxgroup/checkboxgroup.types.d.ts

@@ -0,0 +1,11 @@
+export interface CheckboxGroupOption {
+    id: string | undefined;
+    name?: string | undefined;
+    label?: string;
+    value: string;
+    disabled?: boolean | undefined;
+    checked?: boolean | undefined;
+    indeterminate?: boolean | undefined;
+    isinvalid?: boolean | undefined;
+}
+//# sourceMappingURL=checkboxgroup.types.d.ts.map

package/dist/checkboxgroup/checkboxgroup.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkboxgroup.types.d.ts","sourceRoot":"","sources":["../../src/components/checkboxgroup/checkboxgroup.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,mBAAmB;IAClC,EAAE,EAAE,MAAM,GAAG,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,aAAa,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACpC,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CACjC"}

package/dist/checkboxgroup/checkboxgroup.types.js

@@ -0,0 +1 @@
+export {};

package/dist/{components/field → field}/Field.js

@@ -1,4 +1,4 @@
-import{c as A,p as G,a as H,b as t,t as u,s as f,e as d,f as _,g as p,h as I,i as a,r,j as h,k as J}from"../../custom-element.js";import{i as Z}from"../../if.js";import{a as K}from"../../slot.js";import{s as C}from"../../attributes.js";var N=u('<span class="mc-field__requirement svelte-dg1po7" aria-hidden="true"> </span>'),O=u('<span class="mc-field__help svelte-dg1po7"> </span>'),P=u("<span> </span>"),Q=u('<div class="mc-field"><label class="mc-field__label svelte-dg1po7"> <!></label> <!> <div class="mc-field__content svelte-dg1po7"><!></div> <!></div>');const R={hash:"svelte-dg1po7",code:`/**
+import{c as A,p as G,a as H,b as t,t as u,s as f,e as d,f as _,g as p,h as I,i as a,r,j as h,k as J}from"../custom-element.js";import{i as Z}from"../if.js";import{a as K}from"../slot.js";import{s as C}from"../attributes.js";var N=u('<span class="mc-field__requirement svelte-dg1po7" aria-hidden="true"> </span>'),O=u('<span class="mc-field__help svelte-dg1po7"> </span>'),P=u("<span> </span>"),Q=u('<div class="mc-field"><label class="mc-field__label svelte-dg1po7"> <!></label> <!> <div class="mc-field__content svelte-dg1po7"><!></div> <!></div>');const R={hash:"svelte-dg1po7",code:`/**
  * Do not edit directly, this file was auto-generated.
  */
 /* stylelint-disable string-no-newline */.mc-field__label.svelte-dg1po7 {font-size:0.875rem;line-height:1.3;font-weight:400;color:var(--field-color-label, #000000);}.mc-field__requirement.svelte-dg1po7, .mc-field__help.svelte-dg1po7 {font-size:0.75rem;line-height:1.5;font-weight:400;vertical-align:top;color:var(--field-color-requirement, #666666);}.mc-field__help.svelte-dg1po7 {display:block;margin-top:0.125rem;}.mc-field__content.svelte-dg1po7 {margin-top:0.5rem;}.mc-field__validation-message.svelte-dg1po7 {font-size:0.875rem;line-height:1.5;display:inline-flex;gap:0.25rem;margin-top:0.25rem;}.mc-field__validation-message.svelte-dg1po7::before {content:"";height:1.25rem;width:1.25rem;}.mc-field__validation-message.is-valid.svelte-dg1po7 {color:var(--field-color-validation-valid, #117f03);}.mc-field__validation-message.is-valid.svelte-dg1po7::before {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-valid, %23117f03)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E");}.mc-field__validation-message.is-invalid.svelte-dg1po7 {color:var(--field-color-validation-invalid, #c61112);}.mc-field__validation-message.is-invalid.svelte-dg1po7::before {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-invalid, %23c61112)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E");}

package/dist/field/Field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field.js","sources":["../../src/components/field/Field.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-field',\n    shadow: 'none',\n  }}\n/>\n\n<script lang=\"ts\">\n  interface Props {\n    id: string;\n    label: string;\n    requirementtext: string;\n    helpid: string;\n    helptext: string;\n    messageid: string;\n    message: string;\n    isinvalid?: boolean;\n    isvalid?: boolean;\n    [key: string]: any;\n  }\n\n  let {\n    id,\n    label,\n    requirementtext,\n    helpid,\n    helptext,\n    messageid,\n    message,\n    isinvalid = false,\n    isvalid = false,\n  }: Props = $props();\n</script>\n\n<div class=\"mc-field\">\n  <label for={id} class=\"mc-field__label\">\n    {label}\n    {#if requirementtext}\n      <span class=\"mc-field__requirement\" aria-hidden=\"true\">\n        {requirementtext}\n      </span>\n    {/if}\n  </label>\n  {#if helpid && helptext}\n    <span id={helpid} class=\"mc-field__help\">\n      {helptext}\n    </span>\n  {/if}\n  <div class=\"mc-field__content\">\n    <slot />\n  </div>\n  {#if isinvalid || isvalid}\n    <span\n      id={messageid}\n      class=\"mc-field__validation-message\"\n      class:is-valid={isvalid}\n      class:is-invalid={isinvalid}\n    >\n      {message}\n    </span>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/field';\n</style>\n"],"names":["id","$.prop","$$props","label","requirementtext","helpid","helptext","messageid","message","isinvalid","isvalid","$$render","consequent","consequent_1","consequent_2"],"mappings":";;;;;8EAsBIA,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAKF,EAAAC,EAAA,QAAA,CAAA,EACLE,EAAeH,EAAAC,EAAA,kBAAA,CAAA,EACfG,EAAMJ,EAAAC,EAAA,SAAA,CAAA,EACNI,EAAQL,EAAAC,EAAA,WAAA,CAAA,EACRK,EAASN,EAAAC,EAAA,YAAA,CAAA,EACTM,EAAOP,EAAAC,EAAA,UAAA,CAAA,EACPO,oBAAY,EAAK,EACjBC,kBAAU,EAAK,+EASVN,EAAe,CAAA,CAAA,kBAFfA,EAAe,GAAAO,EAAAC,CAAA,0EAOVP,GAAM,MACbC,GAAQ,oBAFRD,EAAM,GAAIC,KAAQK,EAAAE,CAAA,4HAUfN,GAAS,0EAEGG,EAAO,eACLD,EAAS,QAE1BD,GAAO,qBAPPC,EAAS,GAAIC,MAAOC,EAAAG,CAAA,iCAhBbd,GAAE,SACXG,EAAK,GAAA,EAAA,GAAA,qaAPM,GAAK,mDACP,GAAK"}

package/dist/field/Field.svelte

@@ -0,0 +1,141 @@
+<svelte:options
+  customElement={{
+    tag: 'm-field',
+    shadow: 'none',
+  }}
+/>
+
+<script lang="ts">
+  interface Props {
+    id: string;
+    label: string;
+    requirementtext: string;
+    helpid: string;
+    helptext: string;
+    messageid: string;
+    message: string;
+    isinvalid?: boolean;
+    isvalid?: boolean;
+    [key: string]: any;
+  }
+
+  let {
+    id,
+    label,
+    requirementtext,
+    helpid,
+    helptext,
+    messageid,
+    message,
+    isinvalid = false,
+    isvalid = false,
+  }: Props = $props();
+</script>
+
+<div class="mc-field">
+  <label for={id} class="mc-field__label">
+    {label}
+    {#if requirementtext}
+      <span class="mc-field__requirement" aria-hidden="true">
+        {requirementtext}
+      </span>
+    {/if}
+  </label>
+  {#if helpid && helptext}
+    <span id={helpid} class="mc-field__help">
+      {helptext}
+    </span>
+  {/if}
+  <div class="mc-field__content">
+    <slot />
+  </div>
+  {#if isinvalid || isvalid}
+    <span
+      id={messageid}
+      class="mc-field__validation-message"
+      class:is-valid={isvalid}
+      class:is-invalid={isinvalid}
+    >
+      {message}
+    </span>
+  {/if}
+</div>
+
+<style>/**
+ * Do not edit directly, this file was auto-generated.
+ */
+/* stylelint-disable string-no-newline */
+.mc-field__label, .mc-field__legend {
+  font-size: 0.875rem;
+  line-height: 1.3;
+  font-weight: 400;
+  color: var(--field-color-label, #000000);
+}
+.mc-field__legend {
+  padding-left: 0;
+  padding-right: 0;
+}
+.mc-field__legend + .mc-field__container, .mc-field__help + .mc-field__container {
+  margin-top: 0.5rem;
+}
+.mc-field__requirement, .mc-field__help {
+  font-size: 0.75rem;
+  line-height: 1.5;
+  font-weight: 400;
+  vertical-align: top;
+  color: var(--field-color-requirement, #666666);
+}
+.mc-field__help {
+  display: block;
+  margin-top: 0.125rem;
+}
+.mc-field__content {
+  margin-top: 0.5rem;
+}
+.mc-field__container--inline, .mc-field__element--inline {
+  display: flex;
+  flex-wrap: wrap;
+}
+.mc-field__container--inline__item:not(:last-child), .mc-field__element--inline__item:not(:last-child) {
+  margin-bottom: 0.25rem;
+  margin-right: 1rem;
+}
+.mc-field__item {
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+}
+.mc-field__item:not(:last-child) {
+  margin-bottom: 0.25rem;
+}
+.mc-field__validation-message {
+  font-size: 0.875rem;
+  line-height: 1.5;
+  display: inline-flex;
+  gap: 0.25rem;
+  margin-top: 0.25rem;
+}
+.mc-field__validation-message::before {
+  content: "";
+  height: 1.25rem;
+  width: 1.25rem;
+}
+.mc-field__validation-message.is-valid {
+  color: var(--field-color-validation-valid, #117f03);
+}
+.mc-field__validation-message.is-valid::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-valid, %23117f03)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E");
+}
+.mc-field__validation-message.is-invalid {
+  color: var(--field-color-validation-invalid, #c61112);
+}
+.mc-field__validation-message.is-invalid::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-invalid, %23c61112)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E");
+}
+.mc-field--group {
+  border: none;
+  margin-left: 0;
+  margin-right: 0;
+  padding: 0;
+}
+
+/* stylelint-enable string-no-newline */</style>