@mozaic-ds/web-components 0.28.1 → 1.0.0-alpha.0

package/public/components/carousel/Carousel.svelte

@@ -1,4 +1,4 @@
-<svelte:options tag={null} />
+<svelte:options customElement="" />
 
 <script lang="ts">
   import type {
@@ -7,15 +7,13 @@
     CarouselOptions,
     CarouselTitleTag,
   } from './carousel.types';
-  import Link from '../link/Link.nested.svelte';
-  import CarouselCard from './CarouselCard.nested.svelte';
-  import Button from '../button/Button.nested.svelte';
+  import Link from '../link/Link.svelte';
+  import CarouselCard from './CarouselCard.svelte';
+  import Button from '../button/Button.svelte';
   import { EventHandler } from '../../utilities/EventHandler';
-  import { onMount } from 'svelte';
-  import {
-    get_current_component,
-    createEventDispatcher,
-  } from 'svelte/internal';
+  import { onMount, createEventDispatcher } from 'svelte';
+  // @ts-ignore Need to use internal Svelte function
+  import { get_current_component } from 'svelte/internal';
 
   export let title: string;
   export let titletag: CarouselTitleTag = 'h1';
@@ -252,7 +250,7 @@
       <div class="mc-carousel__subtitle">
         <Link
           href="#layer"
-          iconname="navigation-arrow-arrow--right-24px"
+          iconname="ui-chevron-right-24"
           iconposition="right"
           label={subtitlelink}
           on:click={handleClickLink}
@@ -272,7 +270,7 @@
         size="s"
         bordered={true}
         iconmode="only"
-        iconname="navigation-arrow-arrow--left-32px"
+        iconname="ui-chevron-left-32"
         aria-label="Previous page"
         disabled={isScrollBeginning}
         on:click={previousCards}
@@ -286,7 +284,7 @@
         bordered={true}
         disabled={isScrollEnd}
         iconmode="only"
-        iconname="navigation-arrow-arrow--right-32px"
+        iconname="ui-chevron-right-32"
         aria-label="Next Page"
         on:click={nextCards}
         label="Next"

package/public/components/checkbox/Checkbox.js

@@ -1,2 +1,2 @@
-import{S as e,i,a as c,b as t,f as n,s as o,c as a,e as r,d as s,n as d,h as l,j as m,k as h,N as b,x as p,Q as f,l as u,m as k,P as _,o as x,q as g,r as v,u as w,v as $,y}from"../../index-c222d0b7.js";import{E}from"../../EventHandler-f7ee47ca.js";import{c as C}from"../../EventForward-c4c8cd29.js";function z(e){let i,c;return{c(){i=r("label"),c=$(e[5]),l(i,"for",e[0]),l(i,"class","mc-checkbox__label")},m(e,n){t(e,i,n),h(i,c)},p(e,t){32&t&&y(c,e[5]),1&t&&l(i,"for",e[0])},d(e){e&&k(i)}}}function j(e){let i,c,n,o,x,g,v,w=e[5]&&z(e),$=[{class:x="mc-checkbox "+e[7]},e[6]],y={};for(let e=0;e<$.length;e+=1)y=a(y,$[e]);return{c(){i=r("div"),c=r("input"),o=s(),w&&w.c(),this.c=d,l(c,"id",e[0]),l(c,"type","checkbox"),l(c,"class",n="mc-checkbox__input "+(e[4]?" is-invalid":"")),l(c,"aria-invalid",e[4]),l(c,"name",e[0]),c.checked=e[1],c.disabled=e[3],c.indeterminate=e[2],m(i,y)},m(n,a){t(n,i,a),h(i,c),h(i,o),w&&w.m(i,null),g||(v=[b(e[8].call(null,c)),p(c,"change",f(e[9]))],g=!0)},p(e,[t]){1&t&&l(c,"id",e[0]),16&t&&n!==(n="mc-checkbox__input "+(e[4]?" is-invalid":""))&&l(c,"class",n),16&t&&l(c,"aria-invalid",e[4]),1&t&&l(c,"name",e[0]),2&t&&(c.checked=e[1]),8&t&&(c.disabled=e[3]),4&t&&(c.indeterminate=e[2]),e[5]?w?w.p(e,t):(w=z(e),w.c(),w.m(i,null)):w&&(w.d(1),w=null),m(i,y=u($,[128&t&&x!==(x="mc-checkbox "+e[7])&&{class:x},64&t&&e[6]]))},i:d,o:d,d(e){e&&k(i),w&&w.d(),g=!1,_(v)}}}function M(e,i,c){let t,n,o;const r=["name","checked","indeterminate","disabled","isinvalid","label"];let s=x(i,r),{name:d}=i,{checked:l}=i,{indeterminate:m}=i,{disabled:h=!1}=i,{isinvalid:b=!1}=i,{label:p}=i;const f=C(g());let u=new E(g(),v());return e.$$set=e=>{c(13,i=a(a({},i),w(e))),c(12,s=x(i,r)),"name"in e&&c(0,d=e.name),"checked"in e&&c(1,l=e.checked),"indeterminate"in e&&c(2,m=e.indeterminate),"disabled"in e&&c(3,h=e.disabled),"isinvalid"in e&&c(4,b=e.isinvalid),"label"in e&&c(5,p=e.label)},e.$$.update=()=>{2&e.$$.dirty&&(t=!!l),c(7,n=i.class),c(6,o=Object.assign({},s)),64&e.$$.dirty&&delete o.class},i=w(i),[d,l,m,h,b,p,o,n,f,function(){t=!t,u.dispatch("change",t)}]}class B extends e{constructor(e){super();const a=document.createElement("style");a.textContent="@charset \"UTF-8\";.mc-checkbox{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex}.mc-checkbox__label{font-size:1rem;line-height:1.125;cursor:pointer;margin-left:0.5rem;color:#000000}.mc-checkbox__input{font-family:\"LeroyMerlin\", sans-serif;font-weight:400;-webkit-box-sizing:border-box;box-sizing:border-box;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;margin:0;-webkit-box-shadow:none;box-shadow:none;border:none;min-width:20px;min-height:20px;width:1.25rem;height:1.25rem;border-radius:4px;border:2px solid #666666;background-color:#ffffff;position:relative;-webkit-transition:all 200ms ease;transition:all 200ms ease;cursor:pointer}.mc-checkbox__input[type=number]::-webkit-inner-spin-button,.mc-checkbox__input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}.mc-checkbox__input[type=number]{-moz-appearance:textfield}.mc-checkbox__input[type=search]::-webkit-search-decoration:hover,.mc-checkbox__input[type=search]::-webkit-search-cancel-button:hover{cursor:pointer}.mc-checkbox__input::-ms-check{background-color:#ffffff;border:2px solid #666666;border-radius:4px;color:#ffffff}.mc-checkbox__input.is-hover,.mc-checkbox__input:hover{border-color:#191919}.mc-checkbox__input.is-hover::-ms-check,.mc-checkbox__input:hover::-ms-check{border-color:#191919}.mc-checkbox__input.is-focus,.mc-checkbox__input:focus{-webkit-box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc;box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc}.mc-checkbox__input.is-focus::-ms-check,.mc-checkbox__input:focus::-ms-check{box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc}.mc-checkbox__input:checked,.mc-checkbox__input:indeterminate{background-color:#46a610;border-color:#46a610;background-size:1rem 1rem}.mc-checkbox__input:checked{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%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\");background-position:center center}.mc-checkbox__input:checked::-ms-check{background-color:#46a610;border-color:#46a610}.mc-checkbox__input:checked:hover:not(:disabled){border-color:#035010}.mc-checkbox__input:checked:hover:not(:disabled)::-ms-check{border-color:#035010}.mc-checkbox__input:indeterminate{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%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:disabled{background-color:#e6e6e6;border-color:#e6e6e6;cursor:not-allowed}.mc-checkbox__input:disabled::-ms-check{background-color:#e6e6e6;border-color:#e6e6e6}.mc-checkbox__input:disabled:checked{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23999999' 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' height='1rem' width='1rem' fill='%23999999' 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:#808080}.mc-checkbox__input.is-invalid{border-color:#c61112}.mc-checkbox__input.is-invalid::-ms-check{border-color:#c61112}.mc-checkbox__input.is-invalid.is-hover,.mc-checkbox__input.is-invalid:hover{border-color:#530000}.mc-checkbox__input.is-invalid.is-hover::-ms-check,.mc-checkbox__input.is-invalid:hover::-ms-check{border-color:#530000}.mc-field__label,.mc-field__legend{font-size:0.875rem;line-height:1.2857142857;font-weight:400;color:#333333}.mc-field__legend{padding-left:0;padding-right:0}.mc-field__requirement,.mc-field__help{font-size:0.75rem;line-height:1.3333333333;font-weight:400;color:#666666}.mc-field__requirement::before{content:\" - \"}.mc-field__help{display:block;margin-top:0.125rem}@media screen and (min-width: 769px){.mc-field__container--inline,.mc-field__element--inline{display:-webkit-box;display:-ms-flexbox;display:flex}}@media screen and (min-width: 769px){}@media screen and (min-width: 1024px){}.mc-field__item:not(:last-child){margin-bottom:1rem}.mc-field__error-message{font-size:0.875rem;line-height:1.2857142857;color:#c61112;display:inline-block;margin-top:0.25rem}.mc-field--group{border:none;margin-left:0;margin-right:0;padding:0}",this.shadowRoot.appendChild(a),i(this,{target:this.shadowRoot,props:c(this.attributes),customElement:!0},M,j,o,{name:0,checked:1,indeterminate:2,disabled:3,isinvalid:4,label:5},null),e&&(e.target&&t(e.target,this,e.anchor),e.props&&(this.$set(e.props),n()))}static get observedAttributes(){return["name","checked","indeterminate","disabled","isinvalid","label"]}get name(){return this.$$.ctx[0]}set name(e){this.$$set({name:e}),n()}get checked(){return this.$$.ctx[1]}set checked(e){this.$$set({checked:e}),n()}get indeterminate(){return this.$$.ctx[2]}set indeterminate(e){this.$$set({indeterminate:e}),n()}get disabled(){return this.$$.ctx[3]}set disabled(e){this.$$set({disabled:e}),n()}get isinvalid(){return this.$$.ctx[4]}set isinvalid(e){this.$$set({isinvalid:e}),n()}get label(){return this.$$.ctx[5]}set label(e){this.$$set({label:e}),n()}}export{B as default};
+import{c as e,S as i,i as t,f as l,s as c,a,p as s,e as r,b as d,d as n,t as o,E as m,g as v,h as u,I as h,L as f,Q as g,y as b,m as y,M as _,n as j,K as p,P as x,q as k,F as w,G as $}from"../../index-c0bfe08f.js";import{g as E}from"../../spread-ed04f539.js";import{E as C}from"../../EventHandler-f7ee47ca.js";import{c as M}from"../../EventForward-bb916157.js";function z(e){a(e,"svelte-yjc0u3",".mc-checkbox.svelte-yjc0u3.svelte-yjc0u3{align-items:center;display:flex;gap:0.5rem}.mc-checkbox__label.svelte-yjc0u3.svelte-yjc0u3{font-size:1rem;line-height:1.3;color:var(--forms-color-text-default, #000000);cursor:pointer}.mc-checkbox__input.svelte-yjc0u3.svelte-yjc0u3{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-yjc0u3.svelte-yjc0u3:hover{border-color:var(--forms-color-border-hover, #4d4d4d)}.mc-checkbox__input.svelte-yjc0u3.svelte-yjc0u3: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-yjc0u3.svelte-yjc0u3: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-yjc0u3.svelte-yjc0u3: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-yjc0u3.svelte-yjc0u3:checked,.mc-checkbox__input.svelte-yjc0u3.svelte-yjc0u3:indeterminate{background-color:var(--forms-color-background-checked, #117f03);background-size:1rem 1rem;background-position:center}.mc-checkbox__input.svelte-yjc0u3.svelte-yjc0u3:checked,.mc-checkbox__input.svelte-yjc0u3.svelte-yjc0u3:indeterminate,.mc-checkbox__input.svelte-yjc0u3.svelte-yjc0u3:disabled{border-color:transparent}.mc-checkbox__input.svelte-yjc0u3.svelte-yjc0u3:disabled{background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed}.mc-checkbox__input.svelte-yjc0u3.svelte-yjc0u3: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-yjc0u3.svelte-yjc0u3: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-yjc0u3:disabled+.mc-checkbox__label.svelte-yjc0u3{color:var(--forms-color-text-disabled, #737373);cursor:not-allowed}.mc-checkbox__input.svelte-yjc0u3.svelte-yjc0u3:not(:disabled):checked:hover,.mc-checkbox__input.svelte-yjc0u3.svelte-yjc0u3:not(:disabled):indeterminate:hover{background-color:var(--forms-color-background-checked-hover, #006902)}.mc-checkbox__input.is-invalid.svelte-yjc0u3.svelte-yjc0u3:not(:checked):not(:indeterminate){border-color:var(--forms-color-border-invalid, #ea302d)}.mc-checkbox__input.is-invalid.svelte-yjc0u3.svelte-yjc0u3:not(:checked):not(:indeterminate):hover{border-color:var(--forms-color-border-invalid-hover, #c61112)}.mc-field__label.svelte-yjc0u3.svelte-yjc0u3,.mc-field__legend.svelte-yjc0u3.svelte-yjc0u3{font-size:0.875rem;line-height:1.3;font-weight:400;color:var(--field-color-label, #000000)}.mc-field__legend.svelte-yjc0u3.svelte-yjc0u3{padding-left:0;padding-right:0}.mc-field__requirement.svelte-yjc0u3.svelte-yjc0u3,.mc-field__help.svelte-yjc0u3.svelte-yjc0u3{font-size:0.75rem;line-height:1.5;font-weight:400;vertical-align:top;color:var(--field-color-requirement, #666666)}.mc-field__help.svelte-yjc0u3.svelte-yjc0u3{display:block;margin-top:0.125rem}.mc-field__content.svelte-yjc0u3.svelte-yjc0u3{margin-top:0.5rem}@media screen and (min-width: 769px){.mc-field__content__container--inline.svelte-yjc0u3.svelte-yjc0u3,.mc-field__content__element--inline.svelte-yjc0u3.svelte-yjc0u3{display:flex;flex-wrap:wrap}}@media screen and (min-width: 769px){.mc-field__content__container--inline__item.svelte-yjc0u3.svelte-yjc0u3:not(:last-child),.mc-field__content__element--inline__item.svelte-yjc0u3.svelte-yjc0u3:not(:last-child){margin-bottom:0.25rem;margin-right:1rem}}.mc-field__item.svelte-yjc0u3.svelte-yjc0u3{padding-top:0.375rem;padding-bottom:0.375rem}.mc-field__item.svelte-yjc0u3.svelte-yjc0u3:not(:last-child){margin-bottom:0.25rem}.mc-field__validation-message.svelte-yjc0u3.svelte-yjc0u3{font-size:0.875rem;line-height:1.5;display:inline-flex;gap:0.25rem;margin-top:0.25rem}.mc-field__validation-message.svelte-yjc0u3.svelte-yjc0u3::before{content:\"\";height:1.25rem;width:1.25rem}.mc-field__validation-message.is-valid.svelte-yjc0u3.svelte-yjc0u3{color:var(--field-color-validation-valid, #117f03)}.mc-field__validation-message.is-valid.svelte-yjc0u3.svelte-yjc0u3::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-yjc0u3.svelte-yjc0u3{color:var(--field-color-validation-invalid, #c61112)}.mc-field__validation-message.is-invalid.svelte-yjc0u3.svelte-yjc0u3::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.svelte-yjc0u3.svelte-yjc0u3{border:none;margin-left:0;margin-right:0;padding:0}")}function B(e){let i,t;return{c(){i=r("label"),t=w(e[6]),n(i,"for",e[0]),n(i,"class","mc-checkbox__label svelte-yjc0u3")},m(e,l){v(e,i,l),u(i,t)},p(e,l){64&l&&$(t,e[6]),1&l&&n(i,"for",e[0])},d(e){e&&y(i)}}}function Z(e){let i,t,l,c,a,j,p=e[6]&&B(e),x=[{class:c="mc-checkbox "+e[8]},e[7]],k={};for(let e=0;e<x.length;e+=1)k=s(k,x[e]);return{c(){i=r("div"),t=r("input"),l=d(),p&&p.c(),n(t,"id",e[1]),n(t,"type","checkbox"),n(t,"class","mc-checkbox__input svelte-yjc0u3"),n(t,"aria-invalid",e[5]),n(t,"name",e[0]),t.checked=e[2],t.disabled=e[4],t.indeterminate=e[3],o(t,"is-invalid",e[5]),m(i,k),o(i,"svelte-yjc0u3",!0)},m(c,s){v(c,i,s),u(i,t),u(i,l),p&&p.m(i,null),a||(j=[h(e[9].call(null,t)),f(t,"change",g(e[10]))],a=!0)},p(e,[l]){2&l&&n(t,"id",e[1]),32&l&&n(t,"aria-invalid",e[5]),1&l&&n(t,"name",e[0]),4&l&&(t.checked=e[2]),16&l&&(t.disabled=e[4]),8&l&&(t.indeterminate=e[3]),32&l&&o(t,"is-invalid",e[5]),e[6]?p?p.p(e,l):(p=B(e),p.c(),p.m(i,null)):p&&(p.d(1),p=null),m(i,k=E(x,[256&l&&c!==(c="mc-checkbox "+e[8])&&{class:c},128&l&&e[7]])),o(i,"svelte-yjc0u3",!0)},i:b,o:b,d(e){e&&y(i),p&&p.d(),a=!1,_(j)}}}function q(e,i,t){let l,c,a;const r=["name","id","checked","indeterminate","disabled","isinvalid","label"];let d=j(i,r),{name:n}=i,{id:o}=i,{checked:m}=i,{indeterminate:v}=i,{disabled:u=!1}=i,{isinvalid:h=!1}=i,{label:f}=i;const g=M(p());let b=new C(p(),x());return e.$$set=e=>{t(14,i=s(s({},i),k(e))),t(13,d=j(i,r)),"name"in e&&t(0,n=e.name),"id"in e&&t(1,o=e.id),"checked"in e&&t(2,m=e.checked),"indeterminate"in e&&t(3,v=e.indeterminate),"disabled"in e&&t(4,u=e.disabled),"isinvalid"in e&&t(5,h=e.isinvalid),"label"in e&&t(6,f=e.label)},e.$$.update=()=>{4&e.$$.dirty&&(l=!!m),t(8,c=i.class),t(7,a=Object.assign({},d)),128&e.$$.dirty&&delete a.class},i=k(i),[n,o,m,v,u,h,f,a,c,g,function(){l=!l,b.dispatch("change",l)}]}class H extends i{constructor(e){super(),t(this,e,q,Z,c,{name:0,id:1,checked:2,indeterminate:3,disabled:4,isinvalid:5,label:6},z)}get name(){return this.$$.ctx[0]}set name(e){this.$$set({name:e}),l()}get id(){return this.$$.ctx[1]}set id(e){this.$$set({id:e}),l()}get checked(){return this.$$.ctx[2]}set checked(e){this.$$set({checked:e}),l()}get indeterminate(){return this.$$.ctx[3]}set indeterminate(e){this.$$set({indeterminate:e}),l()}get disabled(){return this.$$.ctx[4]}set disabled(e){this.$$set({disabled:e}),l()}get isinvalid(){return this.$$.ctx[5]}set isinvalid(e){this.$$set({isinvalid:e}),l()}get label(){return this.$$.ctx[6]}set label(e){this.$$set({label:e}),l()}}e(H,{name:{},id:{},checked:{},indeterminate:{},disabled:{type:"Boolean"},isinvalid:{type:"Boolean"},label:{}},[],[],!0);export{H as default};
 //# sourceMappingURL=Checkbox.js.map

package/public/components/checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../src/components/checkbox/Checkbox.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import {\n    get_current_component,\n    createEventDispatcher,\n  } from 'svelte/internal';\n  import { EventHandler } from '../../utilities/EventHandler';\n  import { createEventForwarder } from '../../utilities/EventForward';\n  export let name: string;\n  export let checked: boolean;\n  export let indeterminate: boolean;\n  export let disabled = false;\n  export let isinvalid = false;\n  export let label: string;\n\n  const forwardEvents = createEventForwarder(get_current_component());\n\n  $: isChecked = checked ? true : false;\n  $: userClass = $$props.class;\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n  let eventHandler = new EventHandler(\n    get_current_component(),\n    createEventDispatcher(),\n  );\n\n  function handleChange(): void {\n    isChecked = !isChecked;\n    eventHandler.dispatch('change', isChecked);\n  }\n</script>\n\n<div class=\"mc-checkbox {userClass}\" {...attributes}>\n  <input\n    use:forwardEvents\n    id={name}\n    type=\"checkbox\"\n    class=\"mc-checkbox__input {isinvalid ? ' is-invalid' : ''}\"\n    aria-invalid={isinvalid}\n    {name}\n    {checked}\n    {disabled}\n    {indeterminate}\n    on:change|stopPropagation={handleChange}\n  />\n  {#if label}\n    <label for={name} class=\"mc-checkbox__label\">{label}</label>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n  @import '@mozaic-ds/styles/components/c.checkbox';\n  @import '@mozaic-ds/styles/components/c.fields';\n</style>\n"],"names":["ctx","insert","target","label_1","anchor","create_if_block","div","append","input","class","div_class_value","name","$$props","checked","indeterminate","disabled","isinvalid","label","forwardEvents","createEventForwarder","get_current_component","eventHandler","EventHandler","createEventDispatcher","isChecked","$$invalidate","userClass","attributes","Object","assign","$$restProps","dispatch"],"mappings":"6VA+CkDA,EAAK,cAAvCA,EAAI,8CAAhBC,EAA2DC,EAAAC,EAAAC,4BAAbJ,EAAK,mBAAvCA,EAAI,sDADbA,EAAK,IAAAK,EAAAL,8BAbaA,EAAS,IAAOA,EAAU,qHAG3CA,EAAI,gEAEmBA,EAAS,GAAG,cAAgB,wBACzCA,EAAS,wFAN3BC,EAgBKC,EAAAI,EAAAF,GAfHG,EAWCD,EAAAE,oEAD4BR,EAAY,oCARnCA,EAAI,wCAEmBA,EAAS,GAAG,cAAgB,8CACzCA,EAAS,mGAOpBA,EAAK,oGAbaA,EAAS,KAAA,CAAAS,MAAAC,SAAOV,EAAU,0KAxBtCW,GAAYC,WACZC,GAAgBD,iBAChBE,GAAsBF,GACtBG,SAAAA,GAAW,GAAKH,GAChBI,UAAAA,GAAY,GAAKJ,SACjBK,GAAaL,QAElBM,EAAgBC,EAAqBC,KAMvC,IAAAC,EAAmB,IAAAC,EACrBF,IACAG,wSANCC,IAAYX,GACZY,EAAA,EAAAC,EAAYd,EAAQH,WACpBkB,EAALC,OAAAC,UAAuBC,0BACXH,EAAWlB,4CAOnBe,GAAaA,EACbH,EAAaU,SAAS,SAAUP"}
+{"version":3,"file":"Checkbox.js","sources":["../../../src/components/checkbox/Checkbox.svelte"],"sourcesContent":["<svelte:options customElement=\"\" />\n\n<script lang=\"ts\">\n  import { createEventDispatcher } from 'svelte';\n  // @ts-ignore Need to use internal Svelte function\n  import { get_current_component } from 'svelte/internal';\n  import { EventHandler } from '../../utilities/EventHandler';\n  import { createEventForwarder } from '../../utilities/EventForward';\n  export let name: string;\n  export let id: string;\n  export let checked: boolean;\n  export let indeterminate: boolean;\n  export let disabled = false;\n  export let isinvalid = false;\n  export let label: string;\n\n  const forwardEvents = createEventForwarder(get_current_component());\n\n  $: isChecked = checked ? true : false;\n  $: userClass = $$props.class;\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n  let eventHandler = new EventHandler(\n    get_current_component(),\n    createEventDispatcher(),\n  );\n\n  function handleChange(): void {\n    isChecked = !isChecked;\n    eventHandler.dispatch('change', isChecked);\n  }\n</script>\n\n<div class=\"mc-checkbox {userClass}\" {...attributes}>\n  <input\n    use:forwardEvents\n    {id}\n    type=\"checkbox\"\n    class=\"mc-checkbox__input\"\n    class:is-invalid={isinvalid}\n    aria-invalid={isinvalid}\n    {name}\n    {checked}\n    {disabled}\n    {indeterminate}\n    on:change|stopPropagation={handleChange}\n  />\n  {#if label}\n    <label for={name} class=\"mc-checkbox__label\">{label}</label>\n  {/if}\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":["ctx","insert","target","label_1","anchor","create_if_block","div","append","input","class","div_class_value","name","$$props","id","checked","indeterminate","disabled","isinvalid","label","forwardEvents","createEventForwarder","get_current_component","eventHandler","EventHandler","createEventDispatcher","isChecked","$$invalidate","userClass","attributes","Object","assign","$$restProps","dispatch"],"mappings":"2+OAgDkDA,EAAK,cAAvCA,EAAI,4DAAhBC,EAA2DC,EAAAC,EAAAC,4BAAbJ,EAAK,mBAAvCA,EAAI,oDADbA,EAAK,IAAAK,EAAAL,8BAdaA,EAAS,IAAOA,EAAU,4MAOjCA,EAAS,0FADLA,EAAS,2CAN/BC,EAiBKC,EAAAI,EAAAF,GAhBHG,EAYCD,EAAAE,oEAD4BR,EAAY,oEALzBA,EAAS,2HADLA,EAAS,IAQxBA,EAAK,oGAdaA,EAAS,KAAA,CAAAS,MAAAC,UAAOV,EAAU,uMAzBtCW,GAAYC,MACZC,GAAUD,WACVE,GAAgBF,iBAChBG,GAAsBH,GACtBI,SAAAA,GAAW,GAAKJ,GAChBK,UAAAA,GAAY,GAAKL,SACjBM,GAAaN,QAElBO,EAAgBC,EAAqBC,KAMvC,IAAAC,EAAmB,IAAAC,EACrBF,IACAG,8TANCC,IAAYX,GACZY,EAAA,EAAAC,EAAYf,EAAQH,OACtBiB,EAAA,EAAEE,EAAUC,OAAAC,OAAA,CAAA,EAAQC,2BACXH,EAAWnB,8CAOnBgB,GAAaA,EACbH,EAAaU,SAAS,SAAUP"}

package/public/components/checkbox/Checkbox.svelte

@@ -1,13 +1,13 @@
-<svelte:options tag={null} />
+<svelte:options customElement="" />
 
 <script lang="ts">
-  import {
-    get_current_component,
-    createEventDispatcher,
-  } from 'svelte/internal';
+  import { createEventDispatcher } from 'svelte';
+  // @ts-ignore Need to use internal Svelte function
+  import { get_current_component } from 'svelte/internal';
   import { EventHandler } from '../../utilities/EventHandler';
   import { createEventForwarder } from '../../utilities/EventForward';
   export let name: string;
+  export let id: string;
   export let checked: boolean;
   export let indeterminate: boolean;
   export let disabled = false;
@@ -34,9 +34,10 @@
 <div class="mc-checkbox {userClass}" {...attributes}>
   <input
     use:forwardEvents
-    id={name}
+    {id}
     type="checkbox"
-    class="mc-checkbox__input {isinvalid ? ' is-invalid' : ''}"
+    class="mc-checkbox__input"
+    class:is-invalid={isinvalid}
     aria-invalid={isinvalid}
     {name}
     {checked}
@@ -50,7 +51,6 @@
 </div>
 
 <style lang="scss">
-  @import '@mozaic-ds/styles/settings-tools/_all-settings';
-  @import '@mozaic-ds/styles/components/c.checkbox';
-  @import '@mozaic-ds/styles/components/c.fields';
+  @use '@mozaic-ds/styles/components/checkbox';
+  @use '@mozaic-ds/styles/components/field';
 </style>

package/public/components/checkboxgroup/checkboxGroup.js

@@ -1,2 +1,2 @@
-import{S as e,i,a as c,b as t,f as n,s as o,c as r,e as l,d as a,n as s,h as d,j as m,k as h,a7 as b,l as p,m as _,o as f,q as g,r as u,a6 as k,u as x,v,y as w,x as y,a8 as $}from"../../index-c222d0b7.js";import{E}from"../../EventHandler-f7ee47ca.js";function C(e,i,c){const t=e.slice();return t[10]=i[c],t}function z(e){let i,c;return{c(){i=l("legend"),c=v(e[1]),d(i,"class","mc-field__legend")},m(e,n){t(e,i,n),h(i,c)},p(e,i){2&i&&w(c,e[1])},d(e){e&&_(i)}}}function j(e){let i,c,n,o=e[10].label+"";return{c(){i=l("label"),c=v(o),d(i,"for",n=e[10].id),d(i,"class","mc-checkbox__label")},m(e,n){t(e,i,n),h(i,c)},p(e,t){8&t&&o!==(o=e[10].label+"")&&w(c,o),8&t&&n!==(n=e[10].id)&&d(i,"for",n)},d(e){e&&_(i)}}}function M(e,i){let c,n,o,r,s,m,b,p,f,g,u,k,x,v;function w(){return i[7](i[10])}let $=i[10].label&&j(i);return{key:e,first:null,c(){c=l("div"),n=l("input"),g=a(),$&&$.c(),u=a(),d(n,"type","checkbox"),d(n,"class",o="mc-checkbox__input "+(i[10].isinvalid?" is-invalid":"")),d(n,"id",r=i[10].id),d(n,"name",s=i[10].name),n.checked=m=i[10].checked,n.disabled=b=i[10].disabled,n.indeterminate=p=i[10].indeterminate,d(n,"aria-invalid",f=i[10].isinvalid),d(c,"class",k="mc-checkbox mc-field__item "+i[5].class),this.first=c},m(e,i){t(e,c,i),h(c,n),h(c,g),$&&$.m(c,null),h(c,u),x||(v=y(n,"click",w),x=!0)},p(e,t){i=e,8&t&&o!==(o="mc-checkbox__input "+(i[10].isinvalid?" is-invalid":""))&&d(n,"class",o),8&t&&r!==(r=i[10].id)&&d(n,"id",r),8&t&&s!==(s=i[10].name)&&d(n,"name",s),8&t&&m!==(m=i[10].checked)&&(n.checked=m),8&t&&b!==(b=i[10].disabled)&&(n.disabled=b),8&t&&p!==(p=i[10].indeterminate)&&(n.indeterminate=p),8&t&&f!==(f=i[10].isinvalid)&&d(n,"aria-invalid",f),i[10].label?$?$.p(i,t):($=j(i),$.c(),$.m(c,u)):$&&($.d(1),$=null),32&t&&k!==(k="mc-checkbox mc-field__item "+i[5].class)&&d(c,"class",k)},d(e){e&&_(c),$&&$.d(),x=!1,v()}}}function B(e){let i,c,n,o,f=[],g=new Map,u=e[1]&&e[1].length&&z(e),k=e[3];const x=e=>e[10].id;for(let i=0;i<k.length;i+=1){let c=C(e,k,i),t=x(c);g.set(t,f[i]=M(t,c))}let v=[{id:e[0]},{class:"checkbox-group-container"},e[2]],w={};for(let e=0;e<v.length;e+=1)w=r(w,v[e]);return{c(){i=l("div"),c=l("fieldset"),u&&u.c(),n=a(),o=l("div");for(let e=0;e<f.length;e+=1)f[e].c();this.c=s,d(o,"class","mc-field__container"),d(c,"class","mc-field mc-field--group"),m(i,w)},m(e,r){t(e,i,r),h(i,c),u&&u.m(c,null),h(c,n),h(c,o);for(let e=0;e<f.length;e+=1)f[e]&&f[e].m(o,null)},p(e,[t]){e[1]&&e[1].length?u?u.p(e,t):(u=z(e),u.c(),u.m(c,n)):u&&(u.d(1),u=null),56&t&&(k=e[3],f=b(f,t,x,1,e,k,g,o,$,M,null,C)),m(i,w=p(v,[1&t&&{id:e[0]},{class:"checkbox-group-container"},4&t&&e[2]]))},i:s,o:s,d(e){e&&_(i),u&&u.d();for(let e=0;e<f.length;e+=1)f[e].d()}}}function O(e,i,c){let t,n;const o=["id","options","legend"];let l=f(i,o),{id:a}=i,{options:s}=i,{legend:d}=i,m=new E(g(),u());function h(e){t&&t.length&&(c(3,t=t.map((i=>{const c=i.value===e?!i.checked:i.checked;return Object.assign(Object.assign({},i),{checked:c})}))),m.dispatch("change",e))}k((()=>{h("")}));return e.$$set=e=>{c(5,i=r(r({},i),x(e))),c(9,l=f(i,o)),"id"in e&&c(0,a=e.id),"options"in e&&c(6,s=e.options),"legend"in e&&c(1,d=e.legend)},e.$$.update=()=>{64&e.$$.dirty&&c(3,t=s?JSON.parse(s):[]),c(2,n=Object.assign({},l)),4&e.$$.dirty&&delete n.class},i=x(i),[a,d,n,t,h,i,s,e=>h(e.value)]}class q extends e{constructor(e){super();const r=document.createElement("style");r.textContent="@charset \"UTF-8\";.mc-checkbox{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex}.mc-checkbox__label{font-size:1rem;line-height:1.125;cursor:pointer;margin-left:0.5rem;color:#000000}.mc-checkbox__input{font-family:\"LeroyMerlin\", sans-serif;font-weight:400;-webkit-box-sizing:border-box;box-sizing:border-box;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;margin:0;-webkit-box-shadow:none;box-shadow:none;border:none;min-width:20px;min-height:20px;width:1.25rem;height:1.25rem;border-radius:4px;border:2px solid #666666;background-color:#ffffff;position:relative;-webkit-transition:all 200ms ease;transition:all 200ms ease;cursor:pointer}.mc-checkbox__input[type=number]::-webkit-inner-spin-button,.mc-checkbox__input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}.mc-checkbox__input[type=number]{-moz-appearance:textfield}.mc-checkbox__input[type=search]::-webkit-search-decoration:hover,.mc-checkbox__input[type=search]::-webkit-search-cancel-button:hover{cursor:pointer}.mc-checkbox__input::-ms-check{background-color:#ffffff;border:2px solid #666666;border-radius:4px;color:#ffffff}.mc-checkbox__input.is-hover,.mc-checkbox__input:hover{border-color:#191919}.mc-checkbox__input.is-hover::-ms-check,.mc-checkbox__input:hover::-ms-check{border-color:#191919}.mc-checkbox__input.is-focus,.mc-checkbox__input:focus{-webkit-box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc;box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc}.mc-checkbox__input.is-focus::-ms-check,.mc-checkbox__input:focus::-ms-check{box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #0b96cc}.mc-checkbox__input:checked,.mc-checkbox__input:indeterminate{background-color:#46a610;border-color:#46a610;background-size:1rem 1rem}.mc-checkbox__input:checked{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%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\");background-position:center center}.mc-checkbox__input:checked::-ms-check{background-color:#46a610;border-color:#46a610}.mc-checkbox__input:checked:hover:not(:disabled){border-color:#035010}.mc-checkbox__input:checked:hover:not(:disabled)::-ms-check{border-color:#035010}.mc-checkbox__input:indeterminate{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%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:disabled{background-color:#e6e6e6;border-color:#e6e6e6;cursor:not-allowed}.mc-checkbox__input:disabled::-ms-check{background-color:#e6e6e6;border-color:#e6e6e6}.mc-checkbox__input:disabled:checked{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23999999' 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' height='1rem' width='1rem' fill='%23999999' 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:#808080}.mc-checkbox__input.is-invalid{border-color:#c61112}.mc-checkbox__input.is-invalid::-ms-check{border-color:#c61112}.mc-checkbox__input.is-invalid.is-hover,.mc-checkbox__input.is-invalid:hover{border-color:#530000}.mc-checkbox__input.is-invalid.is-hover::-ms-check,.mc-checkbox__input.is-invalid:hover::-ms-check{border-color:#530000}.mc-field__label,.mc-field__legend{font-size:0.875rem;line-height:1.2857142857;font-weight:400;color:#333333}.mc-field__legend{padding-left:0;padding-right:0}.mc-field__legend+.mc-field__container,.mc-field__help+.mc-field__container{margin-top:1rem}.mc-field__requirement,.mc-field__help{font-size:0.75rem;line-height:1.3333333333;font-weight:400;color:#666666}.mc-field__requirement::before{content:\" - \"}.mc-field__help{display:block;margin-top:0.125rem}.mc-field .mc-field__input,.mc-field .mc-field__element{margin-top:0.5rem}@media screen and (min-width: 769px){.mc-field__container--inline,.mc-field__element--inline{display:-webkit-box;display:-ms-flexbox;display:flex}}@media screen and (min-width: 769px){.mc-field__container--inline .mc-field__item:not(:last-child),.mc-field__element--inline .mc-field__item:not(:last-child){margin-bottom:0;margin-right:1rem}}@media screen and (min-width: 1024px){.mc-field__container--inline .mc-field__item:not(:last-child),.mc-field__element--inline .mc-field__item:not(:last-child){margin-right:2rem}}.mc-field__item:not(:last-child){margin-bottom:1rem}.mc-field__error-message{font-size:0.875rem;line-height:1.2857142857;color:#c61112;display:inline-block;margin-top:0.25rem}.mc-field--group{border:none;margin-left:0;margin-right:0;padding:0}.mc-field--group .mc-field__error-message{margin-top:0.5rem}",this.shadowRoot.appendChild(r),i(this,{target:this.shadowRoot,props:c(this.attributes),customElement:!0},O,B,o,{id:0,options:6,legend:1},null),e&&(e.target&&t(e.target,this,e.anchor),e.props&&(this.$set(e.props),n()))}static get observedAttributes(){return["id","options","legend"]}get id(){return this.$$.ctx[0]}set id(e){this.$$set({id:e}),n()}get options(){return this.$$.ctx[6]}set options(e){this.$$set({options:e}),n()}get legend(){return this.$$.ctx[1]}set legend(e){this.$$set({legend:e}),n()}}export{q as default};
+import{c as e,S as c,i as l,f as t,s as i,a as s,p as o,e as r,b as a,d as n,E as d,t as m,g as u,h as v,y as f,m as h,n as g,K as _,P as y,R as j,q as b,F as p,G as k,L as x}from"../../index-c0bfe08f.js";import{e as w,u as E,d as $}from"../../each-45e2db5c.js";import{g as C}from"../../spread-ed04f539.js";import{E as M}from"../../EventHandler-f7ee47ca.js";function z(e){s(e,"svelte-yjc0u3",".mc-checkbox.svelte-yjc0u3.svelte-yjc0u3{align-items:center;display:flex;gap:0.5rem}.mc-checkbox__label.svelte-yjc0u3.svelte-yjc0u3{font-size:1rem;line-height:1.3;color:var(--forms-color-text-default, #000000);cursor:pointer}.mc-checkbox__input.svelte-yjc0u3.svelte-yjc0u3{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-yjc0u3.svelte-yjc0u3:hover{border-color:var(--forms-color-border-hover, #4d4d4d)}.mc-checkbox__input.svelte-yjc0u3.svelte-yjc0u3: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-yjc0u3.svelte-yjc0u3: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-yjc0u3.svelte-yjc0u3: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-yjc0u3.svelte-yjc0u3:checked,.mc-checkbox__input.svelte-yjc0u3.svelte-yjc0u3:indeterminate{background-color:var(--forms-color-background-checked, #117f03);background-size:1rem 1rem;background-position:center}.mc-checkbox__input.svelte-yjc0u3.svelte-yjc0u3:checked,.mc-checkbox__input.svelte-yjc0u3.svelte-yjc0u3:indeterminate,.mc-checkbox__input.svelte-yjc0u3.svelte-yjc0u3:disabled{border-color:transparent}.mc-checkbox__input.svelte-yjc0u3.svelte-yjc0u3:disabled{background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed}.mc-checkbox__input.svelte-yjc0u3.svelte-yjc0u3: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-yjc0u3.svelte-yjc0u3: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-yjc0u3:disabled+.mc-checkbox__label.svelte-yjc0u3{color:var(--forms-color-text-disabled, #737373);cursor:not-allowed}.mc-checkbox__input.svelte-yjc0u3.svelte-yjc0u3:not(:disabled):checked:hover,.mc-checkbox__input.svelte-yjc0u3.svelte-yjc0u3:not(:disabled):indeterminate:hover{background-color:var(--forms-color-background-checked-hover, #006902)}.mc-checkbox__input.is-invalid.svelte-yjc0u3.svelte-yjc0u3:not(:checked):not(:indeterminate){border-color:var(--forms-color-border-invalid, #ea302d)}.mc-checkbox__input.is-invalid.svelte-yjc0u3.svelte-yjc0u3:not(:checked):not(:indeterminate):hover{border-color:var(--forms-color-border-invalid-hover, #c61112)}.mc-field__label.svelte-yjc0u3.svelte-yjc0u3,.mc-field__legend.svelte-yjc0u3.svelte-yjc0u3{font-size:0.875rem;line-height:1.3;font-weight:400;color:var(--field-color-label, #000000)}.mc-field__legend.svelte-yjc0u3.svelte-yjc0u3{padding-left:0;padding-right:0}.mc-field__legend.svelte-yjc0u3+.mc-field__container.svelte-yjc0u3,.mc-field__help.svelte-yjc0u3+.mc-field__container.svelte-yjc0u3{margin-top:0.5rem}.mc-field__requirement.svelte-yjc0u3.svelte-yjc0u3,.mc-field__help.svelte-yjc0u3.svelte-yjc0u3{font-size:0.75rem;line-height:1.5;font-weight:400;vertical-align:top;color:var(--field-color-requirement, #666666)}.mc-field__help.svelte-yjc0u3.svelte-yjc0u3{display:block;margin-top:0.125rem}.mc-field__content.svelte-yjc0u3.svelte-yjc0u3{margin-top:0.5rem}@media screen and (min-width: 769px){.mc-field__content__container--inline.svelte-yjc0u3.svelte-yjc0u3,.mc-field__content__element--inline.svelte-yjc0u3.svelte-yjc0u3{display:flex;flex-wrap:wrap}}@media screen and (min-width: 769px){.mc-field__content__container--inline__item.svelte-yjc0u3.svelte-yjc0u3:not(:last-child),.mc-field__content__element--inline__item.svelte-yjc0u3.svelte-yjc0u3:not(:last-child){margin-bottom:0.25rem;margin-right:1rem}}.mc-field__item.svelte-yjc0u3.svelte-yjc0u3{padding-top:0.375rem;padding-bottom:0.375rem}.mc-field__item.svelte-yjc0u3.svelte-yjc0u3:not(:last-child){margin-bottom:0.25rem}.mc-field__validation-message.svelte-yjc0u3.svelte-yjc0u3{font-size:0.875rem;line-height:1.5;display:inline-flex;gap:0.25rem;margin-top:0.25rem}.mc-field__validation-message.svelte-yjc0u3.svelte-yjc0u3::before{content:\"\";height:1.25rem;width:1.25rem}.mc-field__validation-message.is-valid.svelte-yjc0u3.svelte-yjc0u3{color:var(--field-color-validation-valid, #117f03)}.mc-field__validation-message.is-valid.svelte-yjc0u3.svelte-yjc0u3::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-yjc0u3.svelte-yjc0u3{color:var(--field-color-validation-invalid, #c61112)}.mc-field__validation-message.is-invalid.svelte-yjc0u3.svelte-yjc0u3::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.svelte-yjc0u3.svelte-yjc0u3{border:none;margin-left:0;margin-right:0;padding:0}")}function Z(e,c,l){const t=e.slice();return t[10]=c[l],t}function B(e){let c,l;return{c(){c=r("legend"),l=p(e[1]),n(c,"class","mc-field__legend svelte-yjc0u3")},m(e,t){u(e,c,t),v(c,l)},p(e,c){2&c&&k(l,e[1])},d(e){e&&h(c)}}}function O(e){let c,l,t,i=e[10].label+"";return{c(){c=r("label"),l=p(i),n(c,"for",t=e[10].id),n(c,"class","mc-checkbox__label svelte-yjc0u3")},m(e,t){u(e,c,t),v(c,l)},p(e,s){8&s&&i!==(i=e[10].label+"")&&k(l,i),8&s&&t!==(t=e[10].id)&&n(c,"for",t)},d(e){e&&h(c)}}}function q(e,c){let l,t,i,s,o,d,m,f,g,_,y,j,b,p;function k(){return c[7](c[10])}let w=c[10].label&&O(c);return{key:e,first:null,c(){l=r("div"),t=r("input"),_=a(),w&&w.c(),y=a(),n(t,"type","checkbox"),n(t,"class",i="mc-checkbox__input "+(c[10].isinvalid?" is-invalid":"")+" svelte-yjc0u3"),n(t,"id",s=c[10].id),n(t,"name",o=c[10].name),t.checked=d=c[10].checked,t.disabled=m=c[10].disabled,t.indeterminate=f=c[10].indeterminate,n(t,"aria-invalid",g=c[10].isinvalid),n(l,"class",j="mc-checkbox mc-field__item "+c[5].class+" svelte-yjc0u3"),this.first=l},m(e,c){u(e,l,c),v(l,t),v(l,_),w&&w.m(l,null),v(l,y),b||(p=x(t,"click",k),b=!0)},p(e,r){c=e,8&r&&i!==(i="mc-checkbox__input "+(c[10].isinvalid?" is-invalid":"")+" svelte-yjc0u3")&&n(t,"class",i),8&r&&s!==(s=c[10].id)&&n(t,"id",s),8&r&&o!==(o=c[10].name)&&n(t,"name",o),8&r&&d!==(d=c[10].checked)&&(t.checked=d),8&r&&m!==(m=c[10].disabled)&&(t.disabled=m),8&r&&f!==(f=c[10].indeterminate)&&(t.indeterminate=f),8&r&&g!==(g=c[10].isinvalid)&&n(t,"aria-invalid",g),c[10].label?w?w.p(c,r):(w=O(c),w.c(),w.m(l,y)):w&&(w.d(1),w=null),32&r&&j!==(j="mc-checkbox mc-field__item "+c[5].class+" svelte-yjc0u3")&&n(l,"class",j)},d(e){e&&h(l),w&&w.d(),b=!1,p()}}}function H(e){let c,l,t,i,s=[],g=new Map,_=e[1]&&e[1].length&&B(e),y=w(e[3]);const j=e=>e[10].id;for(let c=0;c<y.length;c+=1){let l=Z(e,y,c),t=j(l);g.set(t,s[c]=q(t,l))}let b=[{id:e[0]},{class:"checkbox-group-container"},e[2]],p={};for(let e=0;e<b.length;e+=1)p=o(p,b[e]);return{c(){c=r("div"),l=r("fieldset"),_&&_.c(),t=a(),i=r("div");for(let e=0;e<s.length;e+=1)s[e].c();n(i,"class","mc-field__container svelte-yjc0u3"),n(l,"class","mc-field mc-field--group svelte-yjc0u3"),d(c,p),m(c,"svelte-yjc0u3",!0)},m(e,o){u(e,c,o),v(c,l),_&&_.m(l,null),v(l,t),v(l,i);for(let e=0;e<s.length;e+=1)s[e]&&s[e].m(i,null)},p(e,[o]){e[1]&&e[1].length?_?_.p(e,o):(_=B(e),_.c(),_.m(l,t)):_&&(_.d(1),_=null),56&o&&(y=w(e[3]),s=E(s,o,j,1,e,y,g,i,$,q,null,Z)),d(c,p=C(b,[1&o&&{id:e[0]},{class:"checkbox-group-container"},4&o&&e[2]])),m(c,"svelte-yjc0u3",!0)},i:f,o:f,d(e){e&&h(c),_&&_.d();for(let e=0;e<s.length;e+=1)s[e].d()}}}function L(e,c,l){let t,i;const s=["id","options","legend"];let r=g(c,s),{id:a}=c,{options:n}=c,{legend:d}=c,m=new M(_(),y());function u(e){t&&t.length&&(l(3,t=t.map((c=>{const l=c.value===e?!c.checked:c.checked;return Object.assign(Object.assign({},c),{checked:l})}))),m.dispatch("change",e))}j((()=>{u("")}));return e.$$set=e=>{l(5,c=o(o({},c),b(e))),l(9,r=g(c,s)),"id"in e&&l(0,a=e.id),"options"in e&&l(6,n=e.options),"legend"in e&&l(1,d=e.legend)},e.$$.update=()=>{64&e.$$.dirty&&l(3,t=n?JSON.parse(n):[]),l(2,i=Object.assign({},r)),4&e.$$.dirty&&delete i.class},c=b(c),[a,d,i,t,u,c,n,e=>u(e.value)]}class S extends c{constructor(e){super(),l(this,e,L,H,i,{id:0,options:6,legend:1},z)}get id(){return this.$$.ctx[0]}set id(e){this.$$set({id:e}),t()}get options(){return this.$$.ctx[6]}set options(e){this.$$set({options:e}),t()}get legend(){return this.$$.ctx[1]}set legend(e){this.$$set({legend:e}),t()}}e(S,{id:{},options:{},legend:{}},[],[],!0);export{S as default};
 //# sourceMappingURL=checkboxGroup.js.map

package/public/components/checkboxgroup/checkboxGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkboxGroup.js","sources":["../../../src/components/checkboxgroup/checkboxGroup.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import {\n    get_current_component,\n    onMount,\n    createEventDispatcher,\n  } from 'svelte/internal';\n  import { EventHandler } from '../../utilities/EventHandler';\n  import type { CheckboxGroupOption } from './checkboxgroup.types';\n\n  export let id: string;\n  export let options: string;\n  export let legend: string;\n  let eventHandler = new EventHandler(\n    get_current_component(),\n    createEventDispatcher(),\n  );\n\n  $: parsedOptions = options\n    ? (JSON.parse(options) as CheckboxGroupOption[])\n    : [];\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n\n  function selectValue(value?: string) {\n    if (!parsedOptions || !parsedOptions.length) {\n      return;\n    }\n    parsedOptions = parsedOptions.map((opt) => {\n      const checked = opt.value === value ? !opt.checked : opt.checked;\n      return { ...opt, checked };\n    });\n    eventHandler.dispatch('change', value);\n  }\n\n  onMount(() => {\n    selectValue('');\n  });\n</script>\n\n<div {id} class=\"checkbox-group-container\" {...attributes}>\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 parsedOptions as opt (opt.id)}\n        <div class=\"mc-checkbox mc-field__item {$$props.class}\">\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            on:click={() => selectValue(opt.value)}\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  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n  @import '@mozaic-ds/styles/components/c.checkbox';\n  @import '@mozaic-ds/styles/components/c.fields';\n</style>\n"],"names":["ctx","insert","target","legend_1","anchor","t_value","label","attr","label_for_value","id","dirty","set_data","t","if_block","create_if_block","input","input_class_value","isinvalid","input_id_value","input_name_value","name","checked","input_checked_value","disabled","input_disabled_value","indeterminate","input_indeterminate_value","input_aria_invalid_value","div","div_class_value","class","append","length","create_if_block_1","get_key","i","div1","fieldset","div0","$$props","options","legend","eventHandler","EventHandler","get_current_component","createEventDispatcher","selectValue","value","parsedOptions","$$invalidate","map","opt","Object","assign","dispatch","onMount","JSON","parse","attributes","$$restProps"],"mappings":"sWA6CSA,EAAM,4CADTC,EAEQC,EAAAC,EAAAC,2BADLJ,EAAM,4CAkB6CK,EAAAL,MAAIM,MAAK,kCAA7CC,EAAAD,EAAA,MAAAE,EAAAR,MAAIS,8CAAhBR,EAAiEC,EAAAI,EAAAF,kBAAjB,EAAAM,GAAAL,KAAAA,EAAAL,MAAIM,MAAK,KAAAK,EAAAC,EAAAP,GAA7C,EAAAK,GAAAF,KAAAA,EAAAR,MAAIS,kHADb,IAAAI,EAAAb,MAAIM,OAAKQ,EAAAd,mGATeO,EAAAQ,EAAA,QAAAC,EAAA,uBAAAhB,EAAI,IAAAiB,UAAY,cAAgB,KACvDV,EAAAQ,EAAA,KAAAG,EAAAlB,MAAIS,IACFF,EAAAQ,EAAA,OAAAI,EAAAnB,MAAIoB,MACDL,EAAAM,QAAAC,EAAAtB,MAAIqB,QACHN,EAAAQ,SAAAC,EAAAxB,MAAIuB,SACCR,EAAAU,cAAAC,EAAA1B,MAAIyB,cACLlB,EAAAQ,EAAA,eAAAY,EAAA3B,MAAIiB,WATkBV,EAAAqB,EAAA,QAAAC,EAAA,8BAAA7B,KAAQ8B,4BAAhD7B,EAeKC,EAAA0B,EAAAxB,GAdH2B,EAUCH,EAAAb,uEAR4B,EAAAL,GAAAM,KAAAA,EAAA,uBAAAhB,EAAI,IAAAiB,UAAY,cAAgB,qBACvD,EAAAP,GAAAQ,KAAAA,EAAAlB,MAAIS,iBACF,EAAAC,GAAAS,KAAAA,EAAAnB,MAAIoB,qBACD,EAAAV,GAAAY,KAAAA,EAAAtB,MAAIqB,wBACH,EAAAX,GAAAc,KAAAA,EAAAxB,MAAIuB,0BACC,EAAAb,GAAAgB,KAAAA,EAAA1B,MAAIyB,oCACL,EAAAf,GAAAiB,KAAAA,EAAA3B,MAAIiB,kCAGfjB,MAAIM,4DAZ6B,GAAAI,GAAAmB,KAAAA,EAAA,8BAAA7B,KAAQ8B,oGAP/C9B,EAAM,IAAIA,EAAM,GAACgC,QAAMC,EAAAjC,KAMnBA,EAAa,GAAS,MAAAkC,EAAAlC,GAAAA,MAAIS,mBAA/BuB,OAAIG,GAAA,EAAA,gGARmCnC,EAAU,yPAAzDC,EA4BKC,EAAAkC,EAAAhC,GA3BH2B,EA0BUK,EAAAC,yBApBRN,EAmBKM,EAAAC,8DAxBAtC,EAAM,IAAIA,EAAM,GAACgC,sEAMbhC,EAAa,sGARqBA,EAAU,yJA9B5CS,GAAU8B,WACVC,GAAeD,UACfE,GAAcF,EACrBG,EAAmB,IAAAC,EACrBC,IACAC,KASO,SAAAC,EAAYC,GACdC,GAAkBA,EAAchB,SAGrCiB,EAAA,EAAAD,EAAgBA,EAAcE,KAAKC,IAC3B,MAAA9B,EAAU8B,EAAIJ,QAAUA,GAASI,EAAI9B,QAAU8B,EAAI9B,eAC/D+B,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EAAkBF,GAAG,CAAE9B,WAAO,KAE1BqB,EAAaY,SAAS,SAAUP,IAGlCQ,GAAO,KACLT,EAAY,GAAE,iLAlBfG,EAAA,EAAED,EAAgBR,EACdgB,KAAKC,MAAMjB,GAAO,QAEpBkB,EAALN,OAAAC,UAAuBM,yBACXD,EAAW5B,gCAqCKgB,EAAYK,EAAIJ"}
+{"version":3,"file":"checkboxGroup.js","sources":["../../../src/components/checkboxgroup/checkboxGroup.svelte"],"sourcesContent":["<svelte:options customElement=\"\" />\n\n<script lang=\"ts\">\n  import { createEventDispatcher, onMount } from 'svelte';\n  // @ts-ignore Need to use internal Svelte function\n  import { get_current_component } from 'svelte/internal';\n  import { EventHandler } from '../../utilities/EventHandler';\n  import type { CheckboxGroupOption } from './checkboxgroup.types';\n\n  export let id: string;\n  export let options: string;\n  export let legend: string;\n  let eventHandler = new EventHandler(\n    get_current_component(),\n    createEventDispatcher(),\n  );\n\n  $: parsedOptions = options\n    ? (JSON.parse(options) as CheckboxGroupOption[])\n    : [];\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n\n  function selectValue(value?: string) {\n    if (!parsedOptions || !parsedOptions.length) {\n      return;\n    }\n    parsedOptions = parsedOptions.map((opt) => {\n      const checked = opt.value === value ? !opt.checked : opt.checked;\n      return { ...opt, checked };\n    });\n    eventHandler.dispatch('change', value);\n  }\n\n  onMount(() => {\n    selectValue('');\n  });\n</script>\n\n<div {id} class=\"checkbox-group-container\" {...attributes}>\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 parsedOptions as opt (opt.id)}\n        <div class=\"mc-checkbox mc-field__item {$$props.class}\">\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            on:click={() => selectValue(opt.value)}\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":["ctx","insert","target","legend_1","anchor","t_value","label","attr","label_for_value","id","dirty","set_data","t","if_block","create_if_block","input","input_class_value","isinvalid","input_id_value","input_name_value","name","checked","input_checked_value","disabled","input_disabled_value","indeterminate","input_indeterminate_value","input_aria_invalid_value","div","div_class_value","class","append","length","create_if_block_1","get_key","i","div1","fieldset","div0","$$props","options","legend","eventHandler","EventHandler","get_current_component","createEventDispatcher","selectValue","value","parsedOptions","$$invalidate","map","opt","Object","assign","dispatch","onMount","JSON","parse","attributes","$$restProps"],"mappings":"urPA2CSA,EAAM,0DADTC,EAEQC,EAAAC,EAAAC,2BADLJ,EAAM,4CAkB6CK,EAAAL,MAAIM,MAAK,kCAA7CC,EAAAD,EAAA,MAAAE,EAAAR,MAAIS,4DAAhBR,EAAiEC,EAAAI,EAAAF,kBAAjB,EAAAM,GAAAL,KAAAA,EAAAL,MAAIM,MAAK,KAAAK,EAAAC,EAAAP,GAA7C,EAAAK,GAAAF,KAAAA,EAAAR,MAAIS,kHADb,IAAAI,EAAAb,MAAIM,OAAKQ,EAAAd,mGATeO,EAAAQ,EAAA,QAAAC,EAAA,uBAAAhB,EAAI,IAAAiB,UAAY,cAAgB,IAAE,kBACzDV,EAAAQ,EAAA,KAAAG,EAAAlB,MAAIS,IACFF,EAAAQ,EAAA,OAAAI,EAAAnB,MAAIoB,MACDL,EAAAM,QAAAC,EAAAtB,MAAIqB,QACHN,EAAAQ,SAAAC,EAAAxB,MAAIuB,SACCR,EAAAU,cAAAC,EAAA1B,MAAIyB,cACLlB,EAAAQ,EAAA,eAAAY,EAAA3B,MAAIiB,WATkBV,EAAAqB,EAAA,QAAAC,EAAA,8BAAA7B,KAAQ8B,MAAK,uCAArD7B,EAeKC,EAAA0B,EAAAxB,GAdH2B,EAUCH,EAAAb,uEAR4B,EAAAL,GAAAM,KAAAA,EAAA,uBAAAhB,EAAI,IAAAiB,UAAY,cAAgB,IAAE,kCACzD,EAAAP,GAAAQ,KAAAA,EAAAlB,MAAIS,iBACF,EAAAC,GAAAS,KAAAA,EAAAnB,MAAIoB,qBACD,EAAAV,GAAAY,KAAAA,EAAAtB,MAAIqB,wBACH,EAAAX,GAAAc,KAAAA,EAAAxB,MAAIuB,0BACC,EAAAb,GAAAgB,KAAAA,EAAA1B,MAAIyB,oCACL,EAAAf,GAAAiB,KAAAA,EAAA3B,MAAIiB,kCAGfjB,MAAIM,4DAZ6B,GAAAI,GAAAmB,KAAAA,EAAA,8BAAA7B,KAAQ8B,MAAK,+GAPpD9B,EAAM,IAAIA,EAAM,GAACgC,QAAMC,EAAAjC,OAMnBA,EAAa,IAAS,MAAAkC,EAAAlC,GAAAA,MAAIS,mBAA/BuB,OAAIG,GAAA,EAAA,gGARmCnC,EAAU,oSAAzDC,EA4BKC,EAAAkC,EAAAhC,GA3BH2B,EA0BUK,EAAAC,yBApBRN,EAmBKM,EAAAC,8DAxBAtC,EAAM,IAAIA,EAAM,GAACgC,wEAMbhC,EAAa,uGARqBA,EAAU,iLA9B5CS,GAAU8B,WACVC,GAAeD,UACfE,GAAcF,EACrBG,EAAmB,IAAAC,EACrBC,IACAC,KASO,SAAAC,EAAYC,GACdC,GAAkBA,EAAchB,SAGrCiB,EAAA,EAAAD,EAAgBA,EAAcE,KAAKC,IAC3B,MAAA9B,EAAU8B,EAAIJ,QAAUA,GAASI,EAAI9B,QAAU8B,EAAI9B,eACzD+B,OAAYC,OAAAD,OAAAC,OAAA,CAAA,EAAAF,IAAK9B,WAAO,KAE1BqB,EAAaY,SAAS,SAAUP,IAGlCQ,GAAO,KACLT,EAAY,GAAE,iLAlBfG,EAAA,EAAED,EAAgBR,EACdgB,KAAKC,MAAMjB,GAAO,IAEtBS,EAAA,EAAES,EAAUN,OAAAC,OAAA,CAAA,EAAQM,yBACXD,EAAW5B,gCAqCKgB,EAAYK,EAAIJ"}

package/public/components/checkboxgroup/checkboxGroup.svelte

@@ -1,11 +1,9 @@
-<svelte:options tag={null} />
+<svelte:options customElement="" />
 
 <script lang="ts">
-  import {
-    get_current_component,
-    onMount,
-    createEventDispatcher,
-  } from 'svelte/internal';
+  import { createEventDispatcher, onMount } from 'svelte';
+  // @ts-ignore Need to use internal Svelte function
+  import { get_current_component } from 'svelte/internal';
   import { EventHandler } from '../../utilities/EventHandler';
   import type { CheckboxGroupOption } from './checkboxgroup.types';
 
@@ -70,7 +68,6 @@
 </div>
 
 <style lang="scss">
-  @import '@mozaic-ds/styles/settings-tools/_all-settings';
-  @import '@mozaic-ds/styles/components/c.checkbox';
-  @import '@mozaic-ds/styles/components/c.fields';
+  @use '@mozaic-ds/styles/components/checkbox';
+  @use '@mozaic-ds/styles/components/field';
 </style>

package/public/components/datatable/DataTable.svelte

@@ -1,4 +1,4 @@
-<svelte:options tag={null} />
+<svelte:options customElement="" />
 
 <script lang="ts">
   import {
@@ -21,6 +21,9 @@
   import DefaultSelectionLabel from './datatable-default-selection-label.nested.svelte';
   import DefaultFilterTags from './datatable-default-filter-tags.nested.svelte';
   import DataTableFooter from './datatable-default-footer.nested.svelte';
+  import { createEventDispatcher } from 'svelte';
+  // @ts-ignore Need to use internal Svelte function
+  import { get_current_component } from 'svelte/internal';
 
   import type {
     HeadData,
@@ -31,82 +34,57 @@
     BodyData,
   } from './datatable.types';
 
-  import ControlCircleLess24 from './../../../public/icons/ControlCircleLess24.js';
-  if (!customElements.get('navigation-control-circle--less-24px')) {
-    customElements.define(
-      'navigation-control-circle--less-24px',
-      ControlCircleLess24 as any,
-    );
+  import LessCircle24 from '@mozaic-ds/icons-svelte/dist/custom-elements/LessCircle24/LessCircle24.js';
+  if (!customElements.get('ui-less-circle-24')) {
+    customElements.define('ui-less-circle-24', LessCircle24.element);
   }
 
-  import ControlCircleMore24 from './../../../public/icons/ControlCircleMore24.js';
-  if (!customElements.get('navigation-control-circle--more-24px')) {
-    customElements.define(
-      'navigation-control-circle--more-24px',
-      ControlCircleMore24 as any,
-    );
+  import MoreCircle24 from '@mozaic-ds/icons-svelte/dist/custom-elements/MoreCircle24/MoreCircle24.js';
+  if (!customElements.get('ui-more-circle-24')) {
+    customElements.define('ui-more-circle-24', MoreCircle24.element);
   }
 
-  import DisplaySearch24 from './../../../public/icons/DisplaySearch24.js';
-  if (!customElements.get('navigation-display-search-24px')) {
-    customElements.define(
-      'navigation-display-search-24px',
-      DisplaySearch24 as any,
-    );
+  import Search24 from '@mozaic-ds/icons-svelte/dist/custom-elements/Search24/Search24.js';
+  if (!customElements.get('ui-search-24')) {
+    customElements.define('ui-search-24', Search24.element);
   }
 
-  import DisplayFilter24 from './../../../public/icons/DisplayFilter24.js';
-  if (!customElements.get('navigation-display-filter-24px')) {
-    customElements.define(
-      'navigation-display-filter-24px',
-      DisplayFilter24 as any,
-    );
+  import Filter24 from '@mozaic-ds/icons-svelte/dist/custom-elements/Filter24/Filter24.js';
+  if (!customElements.get('ui-filter-24')) {
+    customElements.define('ui-filter-24', Filter24.element);
   }
 
-  import DisplaySetting24 from './../../../public/icons/DisplaySetting24.js';
-  if (!customElements.get('navigation-display-setting-24px')) {
-    customElements.define(
-      'navigation-display-setting-24px',
-      DisplaySetting24 as any,
-    );
+  import Settings24 from '@mozaic-ds/icons-svelte/dist/custom-elements/Settings24/Settings24.js';
+  if (!customElements.get('ui-settings-24')) {
+    customElements.define('ui-settings-24', Settings24.element);
   }
 
-  import PublishEdit24 from './../../../public/icons/PublishEdit24.js';
-  if (!customElements.get('navigation-publish-edit-24px')) {
-    customElements.define('navigation-publish-edit-24px', PublishEdit24 as any);
+  import Edit24 from '@mozaic-ds/icons-svelte/dist/custom-elements/Edit24/Edit24.js';
+  if (!customElements.get('ui-edit-24')) {
+    customElements.define('ui-edit-24', Edit24.element);
   }
 
-  import DownloadWeb24 from './../../../public/icons/DownloadWeb24.js';
-  if (!customElements.get('media-download-web-24px')) {
-    customElements.define('media-download-web-24px', DownloadWeb24 as any);
+  import Download24 from '@mozaic-ds/icons-svelte/dist/custom-elements/Download24/Download24.js';
+  if (!customElements.get('media-download-24')) {
+    customElements.define('media-download-24', Download24.element);
   }
 
-  import ArrowArrowLeft32 from './../../../public/icons/ArrowArrowLeft32.js';
-  if (!customElements.get('navigation-arrow-arrow--left-32px')) {
-    customElements.define(
-      'navigation-arrow-arrow--left-32px',
-      ArrowArrowLeft32 as any,
-    );
+  import ChevronLeft32 from '@mozaic-ds/icons-svelte/dist/custom-elements/ChevronLeft32/ChevronLeft32.js';
+  if (!customElements.get('ui-chevron-left-32')) {
+    customElements.define('ui-chevron-left-32', ChevronLeft32.element);
   }
 
-  import ArrowArrowRight32 from './../../../public/icons/ArrowArrowRight32.js';
+  import ChevronRight32 from '@mozaic-ds/icons-svelte/dist/custom-elements/ChevronRight32/ChevronRight32.js';
   import { afterUpdate, onMount } from 'svelte';
-  if (!customElements.get('navigation-arrow-arrow--right-32px')) {
-    customElements.define(
-      'navigation-arrow-arrow--right-32px',
-      ArrowArrowRight32 as any,
-    );
+  if (!customElements.get('ui-chevron-right-32')) {
+    customElements.define('ui-chevron-right-32', ChevronRight32.element);
   }
 
-  import DisplayOther24 from './../../../public/icons/DisplayOther24.js';
-  import {
-    get_current_component,
-    createEventDispatcher,
-  } from 'svelte/internal';
-  if (!customElements.get('navigation-display-other-24px')) {
+  import OptionsHorizontal24 from '@mozaic-ds/icons-svelte/dist/custom-elements/OptionsHorizontal24/OptionsHorizontal24.js';
+  if (!customElements.get('ui-options-horizontal-24')) {
     customElements.define(
-      'navigation-display-other-24px',
-      DisplayOther24 as any,
+      'ui-options-horizontal-24',
+      OptionsHorizontal24.element,
     );
   }
 
@@ -135,9 +113,7 @@
     : undefined;
 
   $: items = parsedTableBodyDatas?.bodyDatas ?? [];
-  $: headTitles = parsedTableBodyDatas
-    ? (parsedTableBodyDatas.headDatas as HeadData[])
-    : [];
+  $: headTitles = parsedTableBodyDatas ? parsedTableBodyDatas.headDatas : [];
   $: dataTableId = parsedTableOptions?.dataTableId;
   $: loading = parsedTableOptions?.loading ?? false;
   $: itemsSelection = parsedTableOptions?.itemsSelection ?? false;
@@ -733,9 +709,9 @@
                           >
                           <span class="mc-datatable__btn-icon">
                             {#if item.subRow?.expanded}
-                              <navigation-control-circle--less-24px />
+                              <ui-less-circle-24 />
                             {:else}
-                              <navigation-control-circle--more-24px />
+                              <ui-more-circle-24 />
                             {/if}
                           </span>
                         </button>
@@ -767,7 +743,7 @@
                           on:click={(e) =>
                             handleOptionsClick(item, itemIndex, e)}
                         >
-                          <navigation-display-other-24px />
+                          <ui-options-horizontal-24 />
                         </button>
                       {/if}
                     </td>

package/public/components/datatable/datatable-default-action.nested.svelte

@@ -5,17 +5,14 @@
     keyboardsKeys,
   } from '../../utilities/DataTableUtilities';
 
-  import DisplayMovingBlock24 from './../../../public/icons/DisplayMovingBlock24.js';
+  import Drag24 from '@mozaic-ds/icons-svelte/dist/custom-elements/Drag24/Drag24.js';
   import type { HeadData } from './datatable.types';
-  import {
-    get_current_component,
-    createEventDispatcher,
-  } from 'svelte/internal';
-  if (!customElements.get('navigation-display-movingblock-24px')) {
-    customElements.define(
-      'navigation-display-movingblock-24px',
-      DisplayMovingBlock24 as any,
-    );
+  import { createEventDispatcher } from 'svelte';
+  // @ts-ignore Need to use internal Svelte function
+  import { get_current_component } from 'svelte/internal';
+
+  if (!customElements.get('ui-drag-24')) {
+    customElements.define('ui-drag-24', Drag24.element);
   }
 
   export let e2eAttributeSuffix: string | undefined;
@@ -130,7 +127,7 @@
   {/if}
   <div class="mc-left-icon-input">
     <span class="mc-left-icon-input__icon">
-      <navigation-display-search-24px size="24px" />
+      <ui-search-24 size="24px" />
     </span>
     <input
       type="search"
@@ -161,7 +158,7 @@
     on:click={() => emitEvent('click-filter')}
   >
     <span class="mc-button__icon">
-      <navigation-display-filter-24px size="24px" />
+      <ui-filter-24 size="24px" />
     </span>
     {#if filterLabel}
       <span class="mc-button__label">{filterLabel}</span>
@@ -183,7 +180,7 @@
     }}
   >
     <span class="mc-button__icon">
-      <navigation-display-setting-24px size="24px" />
+      <ui-settings-24 size="24px" />
     </span>
   </button>
 </div>
@@ -193,7 +190,7 @@
     <m-layer
       title={layerTitleSettingsLabel}
       layertitletag="h3"
-      iconname="navigation-display-setting-24px"
+      iconname="ui-settings-24"
       isopen={openLayer}
       on:layer-closed={closeLayerFn}
     >
@@ -216,7 +213,7 @@
               style="top: {mouseYCoordinate + distanceTopGrabbedVsPointer}px; "
             >
               <div class="settings__column-icon-value">
-                <navigation-display-movingblock-24px fill="#666666" />
+                <ui-drag-24 fill="#666666" />
                 <input
                   type="checkbox"
                   class="mc-checkbox__input settings__checkbox-hide-column"
@@ -251,7 +248,7 @@
               }}
             >
               <div class="settings__column-icon-value">
-                <navigation-display-movingblock-24px fill="#666666" />
+                <ui-drag-24 fill="#666666" />
                 <input
                   type="checkbox"
                   class="mc-checkbox__input settings__checkbox-hide-column"

package/public/components/datatable/datatable-default-edtion.nested.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
   import { EventHandler } from '../../utilities/EventHandler';
   import { getDataAttribute } from '../../utilities/DataTableUtilities';
-  import {
-    get_current_component,
-    createEventDispatcher,
-  } from 'svelte/internal';
+  import { createEventDispatcher } from 'svelte';
+  // @ts-ignore Need to use internal Svelte function
+  import { get_current_component } from 'svelte/internal';
 
   export let e2eAttributeSuffix: string | undefined;
   export let dataTableId: string | undefined;
@@ -32,7 +31,7 @@
     on:click={() => emitEvent('click-edit')}
   >
     <span class="mc-button__icon">
-      <navigation-publish-edit-24px size="24px" />
+      <ui-edit-24 size="24px" />
     </span>
   </button>
   {#if !hideDownloadButton}
@@ -43,9 +42,7 @@
       {...getDataAttribute(e2eAttributeSuffix, `${dataTableId}DownloadButton`)}
       on:click={() => emitEvent('click-download')}
     >
-      <span class="mc-button__icon"
-        ><media-download-web-24px size="24px" /></span
-      >
+      <span class="mc-button__icon"><media-download-24 size="24px" /></span>
     </button>
   {/if}
 </div>

package/public/components/datatable/datatable-default-filter-tags.nested.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
   import { EventHandler } from '../../utilities/EventHandler';
   import { getDataAttribute } from '../../utilities/DataTableUtilities';
-  import Tag from '../tag/Tag.nested.svelte';
+  import Tag from '../tag/Tag.svelte';
   import type { Filter } from './datatable.types';
-  import {
-    get_current_component,
-    createEventDispatcher,
-  } from 'svelte/internal';
+  import { createEventDispatcher } from 'svelte';
+  // @ts-ignore Need to use internal Svelte function
+  import { get_current_component } from 'svelte/internal';
 
   export let e2eAttributeSuffix: string | undefined;
   export let dataTableId: string | undefined;

package/public/components/datatable/datatable-default-footer.nested.svelte

@@ -4,10 +4,9 @@
     getPageSelectOptionsArray,
     getDataAttribute,
   } from '../../utilities/DataTableUtilities';
-  import {
-    get_current_component,
-    createEventDispatcher,
-  } from 'svelte/internal';
+  import { createEventDispatcher } from 'svelte';
+  // @ts-ignore Need to use internal Svelte function
+  import { get_current_component } from 'svelte/internal';
 
   export let e2eAttributeSuffix: string | undefined;
   export let dataTableId: string | undefined;
@@ -93,10 +92,7 @@
           `${dataTableId}PreviousPageButton`,
         )}
       >
-        <navigation-arrow-arrow--left-32px
-          class="mc-button__icon"
-          size="100%"
-        />
+        <ui-chevron-left-32 class="mc-button__icon" size="100%" />
       </button>
 
       <div class="mc-pagination__field">
@@ -123,10 +119,7 @@
           `${dataTableId}NextPageButton`,
         )}
       >
-        <navigation-arrow-arrow--right-32px
-          class="mc-button__icon"
-          size="100%"
-        />
+        <ui-chevron-right-32 class="mc-button__icon" size="100%" />
       </button>
     </nav>
   </div>

package/public/components/datatable/datatable-default-selection.nested.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
-  import {
-    get_current_component,
-    createEventDispatcher,
-  } from 'svelte/internal';
+  import { createEventDispatcher } from 'svelte';
+  // @ts-ignore Need to use internal Svelte function
+  import { get_current_component } from 'svelte/internal';
   import { EventHandler } from '../../utilities/EventHandler';
   import type { SelectionParams } from './datatable.types';