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

package/public/components/checkboxgroup/checkboxGroup.svelte

@@ -1,35 +1,35 @@
-<svelte:options customElement="" />
+<svelte:options
+  customElement={{
+    tag: 'm-checkbox-group',
+    props: {
+      options: { reflect: true, type: 'Array', attribute: 'options' },
+    },
+    shadow: 'none',
+  }}
+/>
 
 <script lang="ts">
   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';
 
-  export let id: string;
-  export let options: string;
-  export let legend: string;
-  let eventHandler = new EventHandler(
-    get_current_component(),
-    createEventDispatcher(),
-  );
+  interface Props {
+    id: string;
+    options: Array<CheckboxGroupOption>;
+    legend: string;
+  }
 
-  $: parsedOptions = options
-    ? (JSON.parse(options) as CheckboxGroupOption[])
-    : [];
-  $: attributes = { ...$$restProps };
-  $: delete attributes.class;
+  let { id, options, legend }: Props = $props();
+  let dispatch = createEventDispatcher();
 
   function selectValue(value?: string) {
-    if (!parsedOptions || !parsedOptions.length) {
+    if (!options || !options.length) {
       return;
     }
-    parsedOptions = parsedOptions.map((opt) => {
+    options = options.map((opt) => {
       const checked = opt.value === value ? !opt.checked : opt.checked;
       return { ...opt, checked };
     });
-    eventHandler.dispatch('change', value);
+    dispatch('change', value);
   }
 
   onMount(() => {
@@ -37,7 +37,7 @@
   });
 </script>
 
-<div {id} class="checkbox-group-container" {...attributes}>
+<div class="checkbox-group-container" {id}>
   <fieldset class="mc-field mc-field--group">
     {#if legend && legend.length}
       <legend class="mc-field__legend">
@@ -45,8 +45,8 @@
       </legend>
     {/if}
     <div class="mc-field__container">
-      {#each parsedOptions as opt (opt.id)}
-        <div class="mc-checkbox mc-field__item {$$props.class}">
+      {#each options as opt (opt.id)}
+        <div class="mc-checkbox mc-field__item">
           <input
             type="checkbox"
             class="mc-checkbox__input {opt.isinvalid ? ' is-invalid' : ''}"
@@ -56,7 +56,7 @@
             disabled={opt.disabled}
             indeterminate={opt.indeterminate}
             aria-invalid={opt.isinvalid}
-            on:click={() => selectValue(opt.value)}
+            onchange={() => selectValue(opt.value)}
           />
           {#if opt.label}
             <label for={opt.id} class="mc-checkbox__label">{opt.label}</label>

package/public/components/field/Field.js

@@ -1,2 +1,2 @@
-import{c as e,S as i,i as t,f as l,s,a,z as d,p as n,e as v,F as r,b as m,d as c,E as o,t as p,g as u,h as g,G as h,A as f,B as _,C as $,j as q,k as x,m as b,n as w,q as C}from"../../index-c0bfe08f.js";import{g as E}from"../../spread-ed04f539.js";function Z(e){a(e,"svelte-u2qvvp",".mc-field__label.svelte-u2qvvp,.mc-field__legend.svelte-u2qvvp{font-size:0.875rem;line-height:1.3;font-weight:400;color:var(--field-color-label, #000000)}.mc-field__legend.svelte-u2qvvp{padding-left:0;padding-right:0}.mc-field__requirement.svelte-u2qvvp,.mc-field__help.svelte-u2qvvp{font-size:0.75rem;line-height:1.5;font-weight:400;vertical-align:top;color:var(--field-color-requirement, #666666)}.mc-field__help.svelte-u2qvvp{display:block;margin-top:0.125rem}.mc-field__content.svelte-u2qvvp{margin-top:0.5rem}@media screen and (min-width: 769px){.mc-field__content__container--inline.svelte-u2qvvp,.mc-field__content__element--inline.svelte-u2qvvp{display:flex;flex-wrap:wrap}}@media screen and (min-width: 769px){.mc-field__content__container--inline__item.svelte-u2qvvp:not(:last-child),.mc-field__content__element--inline__item.svelte-u2qvvp:not(:last-child){margin-bottom:0.25rem;margin-right:1rem}}.mc-field__item.svelte-u2qvvp{padding-top:0.375rem;padding-bottom:0.375rem}.mc-field__item.svelte-u2qvvp:not(:last-child){margin-bottom:0.25rem}.mc-field__validation-message.svelte-u2qvvp{font-size:0.875rem;line-height:1.5;display:inline-flex;gap:0.25rem;margin-top:0.25rem}.mc-field__validation-message.svelte-u2qvvp::before{content:\"\";height:1.25rem;width:1.25rem}.mc-field__validation-message.is-valid.svelte-u2qvvp{color:var(--field-color-validation-valid, #117f03)}.mc-field__validation-message.is-valid.svelte-u2qvvp::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-u2qvvp{color:var(--field-color-validation-invalid, #c61112)}.mc-field__validation-message.is-invalid.svelte-u2qvvp::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-u2qvvp{border:none;margin-left:0;margin-right:0;padding:0}")}function y(e){let i,t;return{c(){i=v("span"),t=r(e[2]),c(i,"class","mc-field__requirement svelte-u2qvvp"),c(i,"aria-hidden","true")},m(e,l){u(e,i,l),g(i,t)},p(e,i){4&i&&h(t,e[2])},d(e){e&&b(i)}}}function B(e){let i,t;return{c(){i=v("span"),t=r(e[4]),c(i,"id",e[3]),c(i,"class","mc-field__help svelte-u2qvvp")},m(e,l){u(e,i,l),g(i,t)},p(e,l){16&l&&h(t,e[4]),8&l&&c(i,"id",e[3])},d(e){e&&b(i)}}}function M(e){let i,t;return{c(){i=v("span"),t=r(e[6]),c(i,"id",e[5]),c(i,"class","mc-field__validation-message svelte-u2qvvp"),p(i,"is-valid",e[8]),p(i,"is-invalid",e[7])},m(e,l){u(e,i,l),g(i,t)},p(e,l){64&l&&h(t,e[6]),32&l&&c(i,"id",e[5]),256&l&&p(i,"is-valid",e[8]),128&l&&p(i,"is-invalid",e[7])},d(e){e&&b(i)}}}function j(e){let i,t,l,s,a,w,C,Z,j,k=e[2]&&y(e),z=e[3]&&e[4]&&B(e);const A=e[11].default,F=d(A,e,e[10],null);let G=(e[7]||e[8])&&M(e),L=[{class:"mc-field"},e[9]],O={};for(let e=0;e<L.length;e+=1)O=n(O,L[e]);return{c(){i=v("div"),t=v("label"),l=r(e[1]),s=m(),k&&k.c(),a=m(),z&&z.c(),w=m(),C=v("div"),F&&F.c(),Z=m(),G&&G.c(),c(t,"for",e[0]),c(t,"class","mc-field__label svelte-u2qvvp"),c(C,"class","mc-field__content svelte-u2qvvp"),o(i,O),p(i,"svelte-u2qvvp",!0)},m(e,d){u(e,i,d),g(i,t),g(t,l),g(t,s),k&&k.m(t,null),g(i,a),z&&z.m(i,null),g(i,w),g(i,C),F&&F.m(C,null),g(i,Z),G&&G.m(i,null),j=!0},p(e,[s]){(!j||2&s)&&h(l,e[1]),e[2]?k?k.p(e,s):(k=y(e),k.c(),k.m(t,null)):k&&(k.d(1),k=null),(!j||1&s)&&c(t,"for",e[0]),e[3]&&e[4]?z?z.p(e,s):(z=B(e),z.c(),z.m(i,w)):z&&(z.d(1),z=null),F&&F.p&&(!j||1024&s)&&f(F,A,e,e[10],j?$(A,e[10],s,null):_(e[10]),null),e[7]||e[8]?G?G.p(e,s):(G=M(e),G.c(),G.m(i,null)):G&&(G.d(1),G=null),o(i,O=E(L,[{class:"mc-field"},512&s&&e[9]])),p(i,"svelte-u2qvvp",!0)},i(e){j||(q(F,e),j=!0)},o(e){x(F,e),j=!1},d(e){e&&b(i),k&&k.d(),z&&z.d(),F&&F.d(e),G&&G.d()}}}function k(e,i,t){let l;const s=["id","label","requirementtext","helpid","helptext","messageid","message","isinvalid","isvalid"];let a=w(i,s),{$$slots:d={},$$scope:v}=i,{id:r}=i,{label:m}=i,{requirementtext:c}=i,{helpid:o}=i,{helptext:p}=i,{messageid:u}=i,{message:g}=i,{isinvalid:h=!1}=i,{isvalid:f=!1}=i;return e.$$set=e=>{i=n(n({},i),C(e)),t(12,a=w(i,s)),"id"in e&&t(0,r=e.id),"label"in e&&t(1,m=e.label),"requirementtext"in e&&t(2,c=e.requirementtext),"helpid"in e&&t(3,o=e.helpid),"helptext"in e&&t(4,p=e.helptext),"messageid"in e&&t(5,u=e.messageid),"message"in e&&t(6,g=e.message),"isinvalid"in e&&t(7,h=e.isinvalid),"isvalid"in e&&t(8,f=e.isvalid),"$$scope"in e&&t(10,v=e.$$scope)},e.$$.update=()=>{t(9,l=Object.assign({},a)),512&e.$$.dirty&&delete l.class},[r,m,c,o,p,u,g,h,f,l,v,d]}class z extends i{constructor(e){super(),t(this,e,k,j,s,{id:0,label:1,requirementtext:2,helpid:3,helptext:4,messageid:5,message:6,isinvalid:7,isvalid:8},Z)}get id(){return this.$$.ctx[0]}set id(e){this.$$set({id:e}),l()}get label(){return this.$$.ctx[1]}set label(e){this.$$set({label:e}),l()}get requirementtext(){return this.$$.ctx[2]}set requirementtext(e){this.$$set({requirementtext:e}),l()}get helpid(){return this.$$.ctx[3]}set helpid(e){this.$$set({helpid:e}),l()}get helptext(){return this.$$.ctx[4]}set helptext(e){this.$$set({helptext:e}),l()}get messageid(){return this.$$.ctx[5]}set messageid(e){this.$$set({messageid:e}),l()}get message(){return this.$$.ctx[6]}set message(e){this.$$set({message:e}),l()}get isinvalid(){return this.$$.ctx[7]}set isinvalid(e){this.$$set({isinvalid:e}),l()}get isvalid(){return this.$$.ctx[8]}set isvalid(e){this.$$set({isvalid:e}),l()}}e(z,{id:{},label:{},requirementtext:{},helpid:{},helptext:{},messageid:{},message:{},isinvalid:{type:"Boolean"},isvalid:{type:"Boolean"}},["default"],[],!0);export{z as default};
+import{c as e,p as i,a as l,b as t,t as a,d as s,h as d,i as r,j as n,k as o,g as v,r as m,f as g,s as c}from"../../custom-element-C0xaDU2s.js";import{i as f}from"../../if-B_xe8pYW.js";import{a as p}from"../../slot-DQF0Tqfq.js";import{s as h}from"../../attributes-C2cU7aS9.js";var u=a('<span class="mc-field__requirement svelte-dg1po7" aria-hidden="true"> </span>'),_=a('<span class="mc-field__help svelte-dg1po7"> </span>'),b=a("<span> </span>"),w=a('<div class="mc-field"><label class="mc-field__label svelte-dg1po7"> <!></label> <!> <div class="mc-field__content svelte-dg1po7"><!></div> <!></div>');const x={hash:"svelte-dg1po7",code:"/**\n * Do not edit directly, this file was auto-generated.\n */\n/* 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\");}\n\n/* stylelint-enable string-no-newline */"};function q(e,a){i(a,!0),l(e,x);let q=t(a,"id",7),E=t(a,"label",7),Z=t(a,"requirementtext",7),C=t(a,"helpid",7),j=t(a,"helptext",7),y=t(a,"messageid",7),M=t(a,"message",7),k=t(a,"isinvalid",7,!1),z=t(a,"isvalid",7,!1);var B=w(),D=v(B),L=v(D),V=o(L),$=e=>{var i=u(),l=v(i,!0);m(i),s((()=>g(l,Z()))),d(e,i)};f(V,(e=>{Z()&&e($)})),m(D);var A=o(D,2),F=e=>{var i=_(),l=v(i,!0);m(i),s((()=>{h(i,"id",C()),g(l,j())})),d(e,i)};f(A,(e=>{C()&&j()&&e(F)}));var G=o(A,2),H=v(G);p(H,a,"default",{}),m(G);var I=o(G,2),J=e=>{var i=b();let l;var t=v(i,!0);m(i),s((()=>{h(i,"id",y()),l=c(i,1,"mc-field__validation-message svelte-dg1po7",null,l,{"is-valid":z(),"is-invalid":k()}),g(t,M())})),d(e,i)};return f(I,(e=>{(k()||z())&&e(J)})),m(B),s((()=>{h(D,"for",q()),g(L,`${E()??""} `)})),d(e,B),r({get id(){return q()},set id(e){q(e),n()},get label(){return E()},set label(e){E(e),n()},get requirementtext(){return Z()},set requirementtext(e){Z(e),n()},get helpid(){return C()},set helpid(e){C(e),n()},get helptext(){return j()},set helptext(e){j(e),n()},get messageid(){return y()},set messageid(e){y(e),n()},get message(){return M()},set message(e){M(e),n()},get isinvalid(){return k()},set isinvalid(e=!1){k(e),n()},get isvalid(){return z()},set isvalid(e=!1){z(e),n()}})}customElements.define("m-field",e(q,{id:{},label:{},requirementtext:{},helpid:{},helptext:{},messageid:{},message:{},isinvalid:{},isvalid:{}},["default"],[],!1));export{q as default};
 //# sourceMappingURL=Field.js.map

package/public/components/field/Field.js.map

@@ -1 +1 @@
-{"version":3,"file":"Field.js","sources":["../../../src/components/field/Field.svelte"],"sourcesContent":["<svelte:options customElement=\"\" />\n\n<script lang=\"ts\">\n  export let id: string;\n  export let label: string;\n  export let requirementtext: string;\n  export let helpid: string;\n  export let helptext: string;\n  export let messageid: string;\n  export let message: string;\n  export let isinvalid = false;\n  export let isvalid = false;\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n</script>\n\n<div class=\"mc-field\" {...attributes}>\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":["ctx","insert","target","span","anchor","create_if_block_2","if_block1","create_if_block_1","if_block2","create_if_block","div1","append","label_1","div0","id","$$props","label","requirementtext","helpid","helptext","messageid","message","isinvalid","isvalid","$$invalidate","attributes","Object","assign","$$restProps","class"],"mappings":"whHAqBSA,EAAe,yFADlBC,EAEMC,EAAAC,EAAAC,2BADHJ,EAAe,qEAMjBA,EAAQ,aADDA,EAAM,wDAAhBC,EAEMC,EAAAC,EAAAC,4BADHJ,EAAQ,kBADDA,EAAM,qEAcbA,EAAO,aALJA,EAAS,6EAEGA,EAAO,qBACLA,EAAS,YAJ7BC,EAOMC,EAAAC,EAAAC,4BADHJ,EAAO,mBALJA,EAAS,0BAEGA,EAAO,4BACLA,EAAS,0DAnBxBA,EAAe,IAAAK,EAAAL,GAMjBM,EAAAN,MAAUA,EAAQ,IAAAO,EAAAP,6CAQlB,IAAAQ,GAAAR,MAAaA,EAAO,KAAAS,EAAAT,yBAjBDA,EAAU,wFAE/BA,EAAK,qFADIA,EAAE,uIADhBC,EA2BKC,EAAAQ,EAAAN,GA1BHO,EAOOD,EAAAE,6DAMPD,EAEKD,EAAAG,sEAdFb,EAAK,IACDA,EAAe,iFAFVA,EAAE,IAQTA,MAAUA,EAAQ,gIAQlBA,MAAaA,EAAO,iGAjBDA,EAAU,ySAbvBc,GAAUC,SACVC,GAAaD,mBACbE,GAAuBF,UACvBG,GAAcH,YACdI,GAAgBJ,aAChBK,GAAiBL,WACjBM,GAAeN,GACfO,UAAAA,GAAY,GAAKP,GACjBQ,QAAAA,GAAU,GAAKR,mZACzBS,EAAA,EAAEC,EAAUC,OAAAC,OAAA,CAAA,EAAQC,2BACXH,EAAWI"}
+{"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":"g1GAsBIA,EAAEC,EAAAC,EAAA,KAAA,GACFC,EAAKF,EAAAC,EAAA,QAAA,GACLE,EAAeH,EAAAC,EAAA,kBAAA,GACfG,EAAMJ,EAAAC,EAAA,SAAA,GACNI,EAAQL,EAAAC,EAAA,WAAA,GACRK,EAASN,EAAAC,EAAA,YAAA,GACTM,EAAOP,EAAAC,EAAA,UAAA,GACPO,qBAAY,GACZC,mBAAU,4EASLN,wBAFAA,KAAeO,EAAAC,EAAA,sEAOVP,SACPC,IAAQ,qBAFRD,KAAUC,KAAQK,EAAAE,EAAA,wHAUfN,6EAEYG,iBACED,UAEjBD,IAAO,6BAPPC,KAAaC,MAAOC,EAAAG,EAAA,2BAhBbd,YACTG,KAAK,MAAA,saAPM,sDACF"}

package/public/components/field/Field.svelte

@@ -1,20 +1,38 @@
-<svelte:options customElement="" />
+<svelte:options
+  customElement={{
+    tag: 'm-field',
+    shadow: 'none',
+  }}
+/>
 
 <script lang="ts">
-  export let id: string;
-  export let label: string;
-  export let requirementtext: string;
-  export let helpid: string;
-  export let helptext: string;
-  export let messageid: string;
-  export let message: string;
-  export let isinvalid = false;
-  export let isvalid = false;
-  $: attributes = { ...$$restProps };
-  $: delete attributes.class;
+  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" {...attributes}>
+<div class="mc-field">
   <label for={id} class="mc-field__label">
     {label}
     {#if requirementtext}

package/public/components/iconbutton/IconButton.svelte

@@ -1,20 +1,28 @@
-<svelte:options customElement={{ tag: '', shadow: 'none' }} />
+<svelte:options customElement={{ tag: 'm-icon-button', shadow: 'none' }} />
 
 <script lang="ts">
-  // @ts-ignore Need to use internal Svelte function
-  import { get_current_component } from 'svelte/internal';
   import type { ButtonSize, ButtonStyle, ButtonType } from './button.types';
 
-  export let style: ButtonStyle | undefined = 'standard';
-  export let size: ButtonSize = 'm';
-  export let ghost = false;
-  export let outlined = false;
-  export let iconname: string;
-  export let disabled = false;
-  export let type: ButtonType = 'button';
+  interface Props {
+    style?: ButtonStyle | undefined;
+    size?: ButtonSize;
+    ghost?: boolean;
+    outlined?: boolean;
+    iconname: string;
+    disabled?: boolean;
+    type?: ButtonType;
+    [key: string]: any;
+  }
 
-  $: attributes = { ...$$restProps };
-  $: delete attributes.class;
+  let {
+    style = 'standard',
+    size = 'm',
+    ghost = false,
+    outlined = false,
+    iconname,
+    disabled = false,
+    type = 'button',
+  }: Props = $props();
 
   function generateIconName(size: ButtonSize, iconName: string): string {
     let iconSize: string;

package/public/components/link/Link.js

@@ -1,2 +1,2 @@
-import{c as e,S as t,i as s,f as l,s as i,a as n,z as o,p as a,e as c,b as r,d,E as u,t as m,g as f,h,I as v,L as w,j as p,k as $,l as k,A as g,B as b,C as x,m as _,M as y,n as z,K as j,q as B,w as C,N as E}from"../../index-c0bfe08f.js";import{g as q}from"../../spread-ed04f539.js";import{c as A}from"../../EventForward-bb916157.js";function F(e){n(e,"svelte-1da7u2w",".mc-link.svelte-1da7u2w.svelte-1da7u2w{transition:box-shadow 200ms ease;display:inline-flex;align-items:center;justify-content:center;gap:0.25rem;min-height:1.5rem;text-decoration:none;color:var(--link-color-text-primary, #000000)}.mc-link__label.svelte-1da7u2w.svelte-1da7u2w{font-size:0.875rem;line-height:1.3}.mc-link__icon.svelte-1da7u2w.svelte-1da7u2w{display:block;height:1.25rem;width:1.25rem;flex-shrink:0;fill:currentcolor}.mc-link.svelte-1da7u2w:hover:not(.mc-link--stand-alone, .mc-link--inline) .mc-link__label.svelte-1da7u2w{text-decoration:underline}.mc-link.svelte-1da7u2w.svelte-1da7u2w:focus{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-link--m.svelte-1da7u2w.svelte-1da7u2w{min-height:2rem}.mc-link--m.svelte-1da7u2w .mc-link__label.svelte-1da7u2w{font-size:1rem}.mc-link--secondary.svelte-1da7u2w.svelte-1da7u2w{color:var(--link-color-text-secondary, #666666)}.mc-link--accent.svelte-1da7u2w.svelte-1da7u2w{color:var(--link-color-text-accent, #117f03)}.mc-link--inverse.svelte-1da7u2w.svelte-1da7u2w{--focus-color-mid:var(--focus-color-outline-outer, #000000);--focus-color-outer:var(--focus-color-outline-mid, #ffffff);color:var(--link-color-text-inverse, #ffffff)}.mc-link--stand-alone.svelte-1da7u2w.svelte-1da7u2w{min-height:2rem;font-weight:600}.mc-link--stand-alone.svelte-1da7u2w .mc-link__label.svelte-1da7u2w{border-bottom:1px solid currentColor}.mc-link--stand-alone.svelte-1da7u2w:hover .mc-link__label.svelte-1da7u2w{border-color:transparent}.mc-link--inline.svelte-1da7u2w.svelte-1da7u2w{font-weight:inherit;text-decoration:underline}.mc-link--inline.svelte-1da7u2w .mc-link__label.svelte-1da7u2w{font-size:inherit;line-height:1}.mc-link--inline.svelte-1da7u2w.svelte-1da7u2w:hover{text-decoration:none}")}const I=e=>({}),K=e=>({}),L=e=>({}),M=e=>({});function N(e){let t,s;const l=e[11].icon,i=o(l,e,e[10],M);return{c(){t=c("span"),i&&i.c(),d(t,"class","mc-link__icon svelte-1da7u2w")},m(e,l){f(e,t,l),i&&i.m(t,null),s=!0},p(e,t){i&&i.p&&(!s||1024&t)&&g(i,l,e,e[10],s?x(l,e[10],t,L):b(e[10]),M)},i(e){s||(p(i,e),s=!0)},o(e){$(i,e),s=!1},d(e){e&&_(t),i&&i.d(e)}}}function O(e){let t,s;const l=e[11].icon,i=o(l,e,e[10],K);return{c(){t=c("span"),i&&i.c(),d(t,"class","mc-link__icon svelte-1da7u2w")},m(e,l){f(e,t,l),i&&i.m(t,null),s=!0},p(e,t){i&&i.p&&(!s||1024&t)&&g(i,l,e,e[10],s?x(l,e[10],t,I):b(e[10]),K)},i(e){s||(p(i,e),s=!0)},o(e){$(i,e),s=!1},d(e){e&&_(t),i&&i.d(e)}}}function S(e){let t,s,l,i,n,z,j,B,E="left"===e[6]&&N(e);const A=e[11].default,F=o(A,e,e[10],null);let I="right"===e[6]&&O(e),K=[{href:e[0]},{target:e[1]},{class:n=D(e[2],e[4],e[5])+" "+(e[3]?"is-disabled":"")+" "+e[8]},e[7]],L={};for(let e=0;e<K.length;e+=1)L=a(L,K[e]);return{c(){t=c("a"),E&&E.c(),s=r(),l=c("span"),F&&F.c(),i=r(),I&&I.c(),d(l,"class","mc-link__label svelte-1da7u2w"),u(t,L),m(t,"svelte-1da7u2w",!0)},m(n,o){f(n,t,o),E&&E.m(t,null),h(t,s),h(t,l),F&&F.m(l,null),h(t,i),I&&I.m(t,null),z=!0,j||(B=[v(e[9].call(null,t)),w(t,"click",e[12])],j=!0)},p(e,[l]){"left"===e[6]?E?(E.p(e,l),64&l&&p(E,1)):(E=N(e),E.c(),p(E,1),E.m(t,s)):E&&(C(),$(E,1,1,(()=>{E=null})),k()),F&&F.p&&(!z||1024&l)&&g(F,A,e,e[10],z?x(A,e[10],l,null):b(e[10]),null),"right"===e[6]?I?(I.p(e,l),64&l&&p(I,1)):(I=O(e),I.c(),p(I,1),I.m(t,null)):I&&(C(),$(I,1,1,(()=>{I=null})),k()),u(t,L=q(K,[(!z||1&l)&&{href:e[0]},(!z||2&l)&&{target:e[1]},(!z||316&l&&n!==(n=D(e[2],e[4],e[5])+" "+(e[3]?"is-disabled":"")+" "+e[8]))&&{class:n},128&l&&e[7]])),m(t,"svelte-1da7u2w",!0)},i(e){z||(p(E),p(F,e),p(I),z=!0)},o(e){$(E),$(F,e),$(I),z=!1},d(e){e&&_(t),E&&E.d(),F&&F.d(e),I&&I.d(),j=!1,y(B)}}}function D(e,t,s){const l=["mc-link"];return e&&l.push(`mc-link--${e}`),t&&l.push(`mc-link--${t}`),s?l.push("mc-link--inline"):l.push("mc-link--stand-alone"),l.join(" ")}function G(e,t,s){let l,i;const n=["href","target","style","disabled","size","inline","iconposition"];let o=z(t,n),{$$slots:c={},$$scope:r}=t,{href:d}=t,{target:u}=t,{style:m}=t,{disabled:f=!1}=t,{size:h="m"}=t,{inline:v=!1}=t,{iconposition:w}=t;const p=A(j());return e.$$set=e=>{s(14,t=a(a({},t),B(e))),s(13,o=z(t,n)),"href"in e&&s(0,d=e.href),"target"in e&&s(1,u=e.target),"style"in e&&s(2,m=e.style),"disabled"in e&&s(3,f=e.disabled),"size"in e&&s(4,h=e.size),"inline"in e&&s(5,v=e.inline),"iconposition"in e&&s(6,w=e.iconposition),"$$scope"in e&&s(10,r=e.$$scope)},e.$$.update=()=>{s(8,l=t.class),s(7,i=Object.assign({},o)),128&e.$$.dirty&&delete i.class},t=B(t),[d,u,m,f,h,v,w,i,l,p,r,c,function(t){E.call(this,e,t)}]}class H extends t{constructor(e){super(),s(this,e,G,S,i,{href:0,target:1,style:2,disabled:3,size:4,inline:5,iconposition:6},F)}get href(){return this.$$.ctx[0]}set href(e){this.$$set({href:e}),l()}get target(){return this.$$.ctx[1]}set target(e){this.$$set({target:e}),l()}get style(){return this.$$.ctx[2]}set style(e){this.$$set({style:e}),l()}get disabled(){return this.$$.ctx[3]}set disabled(e){this.$$set({disabled:e}),l()}get size(){return this.$$.ctx[4]}set size(e){this.$$set({size:e}),l()}get inline(){return this.$$.ctx[5]}set inline(e){this.$$set({inline:e}),l()}get iconposition(){return this.$$.ctx[6]}set iconposition(e){this.$$set({iconposition:e}),l()}}e(H,{href:{},target:{},style:{},disabled:{type:"Boolean"},size:{},inline:{type:"Boolean"},iconposition:{}},["icon","default"],[],!0);export{H as default};
+import{R as e,S as t,T as n,U as s,V as l,W as i,M as a,X as o,Y as r,Z as c,_ as u,c as d,$ as f,p as m,a as v,b as h,a0 as k,a1 as w,t as p,g,d as b,a2 as _,a3 as $,a4 as y,h as x,i as j,j as z,k as C,N as D,r as E}from"../../custom-element-C0xaDU2s.js";import{i as M}from"../../if-B_xe8pYW.js";import{a as N}from"../../slot-DQF0Tqfq.js";import{b as O}from"../../attributes-C2cU7aS9.js";function R(e,t){if(e.l.s)for(const t of e.l.s)a(t);t()}function S(e,t){var n=e.$$events?.[t.type],s=c(n)?n.slice():null==n?[]:[n];for(var l of s)l.call(this,t)}u();var T=p('<span class="mc-link__icon svelte-1da7u2w"><!></span>'),U=p('<span class="mc-link__icon svelte-1da7u2w"><!></span>'),V=p('<a><!> <span class="mc-link__label svelte-1da7u2w"><!></span> <!></a>');const W={hash:"svelte-1da7u2w",code:"/**\n * Do not edit directly, this file was auto-generated.\n */.mc-link.svelte-1da7u2w {transition:box-shadow 200ms ease;display:inline-flex;align-items:center;justify-content:center;gap:0.25rem;min-height:1.5rem;text-decoration:none;color:var(--link-color-text-primary, #000000);}.mc-link__label.svelte-1da7u2w {font-size:0.875rem;line-height:1.3;}.mc-link__icon.svelte-1da7u2w {display:block;height:1.25rem;width:1.25rem;flex-shrink:0;fill:currentcolor;}.mc-link.svelte-1da7u2w:hover:not(.mc-link--stand-alone, .mc-link--inline) .mc-link__label:where(.svelte-1da7u2w) {text-decoration:underline;}.mc-link.svelte-1da7u2w:focus {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-link--m.svelte-1da7u2w {min-height:2rem;}.mc-link--m.svelte-1da7u2w .mc-link__label:where(.svelte-1da7u2w) {font-size:1rem;}.mc-link--secondary.svelte-1da7u2w {color:var(--link-color-text-secondary, #666666);}.mc-link--accent.svelte-1da7u2w {color:var(--link-color-text-accent, #117f03);}.mc-link--inverse.svelte-1da7u2w {--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--link-color-text-inverse, #ffffff);}.mc-link--stand-alone.svelte-1da7u2w {min-height:2rem;font-weight:600;}.mc-link--stand-alone.svelte-1da7u2w .mc-link__label:where(.svelte-1da7u2w) {border-bottom:1px solid currentColor;}.mc-link--stand-alone.svelte-1da7u2w:hover .mc-link__label:where(.svelte-1da7u2w) {border-color:transparent;}.mc-link--inline.svelte-1da7u2w {font-weight:inherit;text-decoration:underline;}.mc-link--inline.svelte-1da7u2w .mc-link__label:where(.svelte-1da7u2w) {font-size:inherit;line-height:1;}.mc-link--inline.svelte-1da7u2w:hover {text-decoration:none;}"};function X(c,u){const d=f(u,["children","$$slots","$$events","$$legacy","$$host"]),p=f(d,["href","target","style","disabled","size","inline","iconposition"]);m(u,!1),v(c,W);const X=$(),Y=$();let Z=h(u,"href",12),q=h(u,"target",12),A=h(u,"style",12,void 0),B=h(u,"disabled",12,!1),F=h(u,"size",12,"m"),G=h(u,"inline",12,!1),H=h(u,"iconposition",12,void 0);k((()=>o(d)),(()=>{D(X,d.class)})),k((()=>o(p)),(()=>{D(Y,Object.assign({},p))})),k((()=>a(Y)),(()=>{delete a(Y).class})),w(),function(c=!1){const u=e,d=u.l.u;if(!d)return;let f=()=>o(u.s);if(c){let e=0,t={};const n=r((()=>{let n=!1;const s=u.s;for(const e in s)s[e]!==t[e]&&(t[e]=s[e],n=!0);return n&&e++,e}));f=()=>a(n)}d.b.length&&t((()=>{R(u,f),i(d.b)})),n((()=>{const e=s((()=>d.m.map(l)));return()=>{for(const t of e)"function"==typeof t&&t()}})),d.a.length&&n((()=>{R(u,f),i(d.a)}))}();var I=V();let J;var K=g(I),L=e=>{var t=T(),n=g(t);N(n,u,"icon",{}),E(t),x(e,t)};M(K,(e=>{"left"===H()&&e(L)}));var P=C(K,2),Q=g(P);N(Q,u,"default",{}),E(P);var ee=C(P,2),te=e=>{var t=U(),n=g(t);N(n,u,"icon",{}),E(t),x(e,t)};return M(ee,(e=>{"right"===H()&&e(te)})),E(I),b((e=>J=O(I,J,{href:Z(),target:q(),class:`${e??""} ${(B()?"is-disabled":"")??""} ${a(X)??""}`,...a(Y)},"svelte-1da7u2w")),[()=>function(e,t,n){const s=["mc-link"];return e&&s.push(`mc-link--${e}`),t&&s.push(`mc-link--${t}`),n?s.push("mc-link--inline"):s.push("mc-link--stand-alone"),s.join(" ")}(A(),F(),G())],_),y("click",I,(function(e){S.call(this,u,e)})),x(c,I),j({get href(){return Z()},set href(e){Z(e),z()},get target(){return q()},set target(e){q(e),z()},get style(){return A()},set style(e){A(e),z()},get disabled(){return B()},set disabled(e){B(e),z()},get size(){return F()},set size(e){F(e),z()},get inline(){return G()},set inline(e){G(e),z()},get iconposition(){return H()},set iconposition(e){H(e),z()}})}customElements.define("m-link",d(X,{href:{},target:{},style:{},disabled:{},size:{},inline:{},iconposition:{}},["icon","default"],[],!0));export{X as default};
 //# sourceMappingURL=Link.js.map

package/public/components/link/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","sources":["../../../src/components/link/Link.svelte"],"sourcesContent":["<svelte:options customElement=\"\" />\n\n<script lang=\"ts\">\n  // @ts-ignore Need to use internal Svelte function\n  import { get_current_component } from 'svelte/internal';\n  import type { LinkIconPosition, LinkSize, LinkStyle } from './link.types';\n  import { createEventForwarder } from '../../utilities/EventForward';\n  export let href: string;\n  export let target: string;\n  export let style: LinkStyle = undefined;\n  export let disabled = false;\n  export let size: LinkSize = 'm';\n  export let inline = false;\n  export let iconposition: LinkIconPosition | undefined = undefined;\n\n  const forwardEvents = createEventForwarder(get_current_component());\n\n  $: userClass = $$props.class;\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n\n  function setClasses(\n    style: LinkStyle,\n    size: LinkSize,\n    inline: boolean,\n  ): string {\n    const classes = ['mc-link'];\n\n    if (style) {\n      classes.push(`mc-link--${style}`);\n    }\n    if (size) {\n      classes.push(`mc-link--${size}`);\n    }\n    if (inline) {\n      classes.push('mc-link--inline');\n    } else {\n      classes.push('mc-link--stand-alone');\n    }\n    return classes.join(' ');\n  }\n</script>\n\n<a\n  use:forwardEvents\n  on:click\n  {href}\n  {target}\n  class=\"{setClasses(style, size, inline)} {disabled\n    ? 'is-disabled'\n    : ''} {userClass}\"\n  {...attributes}\n>\n  {#if iconposition === 'left'}\n    <span class=\"mc-link__icon\">\n      <slot name=\"icon\" />\n    </span>\n  {/if}\n  <span class=\"mc-link__label\">\n    <slot />\n  </span>\n  {#if iconposition === 'right'}\n    <span class=\"mc-link__icon\">\n      <slot name=\"icon\" />\n    </span>\n  {/if}\n</a>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/link';\n</style>\n"],"names":["insert","target","span","anchor","if_block0","ctx","create_if_block_1","if_block1","create_if_block","class","a_class_value","setClasses","a","append","current","dirty","style","size","inline","classes","push","join","href","$$props","disabled","iconposition","forwardEvents","createEventForwarder","get_current_component","$$invalidate","userClass","attributes","Object","assign","$$restProps"],"mappings":"s7EAsDIA,EAEMC,EAAAC,EAAAC,iTAMNH,EAEMC,EAAAC,EAAAC,qMAXHC,EAAiB,SAAjBC,MAAuBC,EAAAD,6CAQvB,IAAAE,EAAiB,UAAjBF,MAAwBG,EAAAH,iCAbrBI,MAAAC,EAAAC,EAAWN,EAAO,GAAAA,EAAM,GAAAA,EAAU,IAAA,KAAAA,EAAA,GACtC,cACA,IAAE,IAAGA,EAAS,IACdA,EAAU,6MARhBL,EAuBGC,EAAAW,EAAAT,yBARDU,EAEMD,EAAAV,6GAPgB,SAAjBG,0KAQiB,UAAjBA,mKAbGS,GAAA,IAAAC,GAAAL,KAAAA,EAAAC,EAAWN,EAAO,GAAAA,EAAM,GAAAA,EAAU,IAAA,KAAAA,EAAA,GACtC,cACA,IAAE,IAAGA,EAAS,MAAA,CAAAI,MAAAC,UACdL,EAAU,kJA9BL,SAAAM,EACPK,EACAC,EACAC,GAEM,MAAAC,GAAW,kBAEbH,GACFG,EAAQC,KAAI,YAAaJ,KAEvBC,GACFE,EAAQC,KAAI,YAAaH,KAEvBC,EACFC,EAAQC,KAAK,mBAEbD,EAAQC,KAAK,wBAERD,EAAQE,KAAK,yJAhCXC,GAAYC,UACZtB,GAAcsB,GACdP,MAAAA,GAA4BO,GAC5BC,SAAAA,GAAW,GAAKD,GAChBN,KAAAA,EAAiB,KAAGM,GACpBL,OAAAA,GAAS,GAAKK,GACdE,aAAAA,GAAsDF,QAE3DG,EAAgBC,EAAqBC,0UAExCC,EAAA,EAAAC,EAAYP,EAAQd,OACtBoB,EAAA,EAAEE,EAAUC,OAAAC,OAAA,CAAA,EAAQC,2BACXH,EAAWtB"}
+{"version":3,"file":"Link.js","sources":["../../../node_modules/svelte/src/internal/client/dom/legacy/lifecycle.js","../../../node_modules/svelte/src/internal/client/dom/legacy/misc.js","../../../node_modules/svelte/src/internal/flags/legacy.js","../../../src/components/link/Link.svelte"],"sourcesContent":["/** @import { ComponentContextLegacy } from '#client' */\nimport { run, run_all } from '../../../shared/utils.js';\nimport { component_context } from '../../context.js';\nimport { derived } from '../../reactivity/deriveds.js';\nimport { user_pre_effect, user_effect } from '../../reactivity/effects.js';\nimport { deep_read_state, get, untrack } from '../../runtime.js';\n\n/**\n * Legacy-mode only: Call `onMount` callbacks and set up `beforeUpdate`/`afterUpdate` effects\n * @param {boolean} [immutable]\n */\nexport function init(immutable = false) {\n\tconst context = /** @type {ComponentContextLegacy} */ (component_context);\n\n\tconst callbacks = context.l.u;\n\tif (!callbacks) return;\n\n\tlet props = () => deep_read_state(context.s);\n\n\tif (immutable) {\n\t\tlet version = 0;\n\t\tlet prev = /** @type {Record<string, any>} */ ({});\n\n\t\t// In legacy immutable mode, before/afterUpdate only fire if the object identity of a prop changes\n\t\tconst d = derived(() => {\n\t\t\tlet changed = false;\n\t\t\tconst props = context.s;\n\t\t\tfor (const key in props) {\n\t\t\t\tif (props[key] !== prev[key]) {\n\t\t\t\t\tprev[key] = props[key];\n\t\t\t\t\tchanged = true;\n\t\t\t\t}\n\t\t\t}\n\t\t\tif (changed) version++;\n\t\t\treturn version;\n\t\t});\n\n\t\tprops = () => get(d);\n\t}\n\n\t// beforeUpdate\n\tif (callbacks.b.length) {\n\t\tuser_pre_effect(() => {\n\t\t\tobserve_all(context, props);\n\t\t\trun_all(callbacks.b);\n\t\t});\n\t}\n\n\t// onMount (must run before afterUpdate)\n\tuser_effect(() => {\n\t\tconst fns = untrack(() => callbacks.m.map(run));\n\t\treturn () => {\n\t\t\tfor (const fn of fns) {\n\t\t\t\tif (typeof fn === 'function') {\n\t\t\t\t\tfn();\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\t});\n\n\t// afterUpdate\n\tif (callbacks.a.length) {\n\t\tuser_effect(() => {\n\t\t\tobserve_all(context, props);\n\t\t\trun_all(callbacks.a);\n\t\t});\n\t}\n}\n\n/**\n * Invoke the getter of all signals associated with a component\n * so they can be registered to the effect this function is called in.\n * @param {ComponentContextLegacy} context\n * @param {(() => void)} props\n */\nfunction observe_all(context, props) {\n\tif (context.l.s) {\n\t\tfor (const signal of context.l.s) get(signal);\n\t}\n\n\tprops();\n}\n","import { set, source } from '../../reactivity/sources.js';\nimport { get } from '../../runtime.js';\nimport { is_array } from '../../../shared/utils.js';\n\n/**\n * Under some circumstances, imports may be reactive in legacy mode. In that case,\n * they should be using `reactive_import` as part of the transformation\n * @param {() => any} fn\n */\nexport function reactive_import(fn) {\n\tvar s = source(0);\n\n\treturn function () {\n\t\tif (arguments.length === 1) {\n\t\t\tset(s, get(s) + 1);\n\t\t\treturn arguments[0];\n\t\t} else {\n\t\t\tget(s);\n\t\t\treturn fn();\n\t\t}\n\t};\n}\n\n/**\n * @this {any}\n * @param {Record<string, unknown>} $$props\n * @param {Event} event\n * @returns {void}\n */\nexport function bubble_event($$props, event) {\n\tvar events = /** @type {Record<string, Function[] | Function>} */ ($$props.$$events)?.[\n\t\tevent.type\n\t];\n\n\tvar callbacks = is_array(events) ? events.slice() : events == null ? [] : [events];\n\n\tfor (var fn of callbacks) {\n\t\t// Preserve \"this\" context\n\t\tfn.call(this, event);\n\t}\n}\n\n/**\n * Used to simulate `$on` on a component instance when `compatibility.componentApi === 4`\n * @param {Record<string, any>} $$props\n * @param {string} event_name\n * @param {Function} event_callback\n */\nexport function add_legacy_event_listener($$props, event_name, event_callback) {\n\t$$props.$$events ||= {};\n\t$$props.$$events[event_name] ||= [];\n\t$$props.$$events[event_name].push(event_callback);\n}\n\n/**\n * Used to simulate `$set` on a component instance when `compatibility.componentApi === 4`.\n * Needs component accessors so that it can call the setter of the prop. Therefore doesn't\n * work for updating props in `$$props` or `$$restProps`.\n * @this {Record<string, any>}\n * @param {Record<string, any>} $$new_props\n */\nexport function update_legacy_props($$new_props) {\n\tfor (var key in $$new_props) {\n\t\tif (key in this) {\n\t\t\tthis[key] = $$new_props[key];\n\t\t}\n\t}\n}\n","import { enable_legacy_mode_flag } from './index.js';\n\nenable_legacy_mode_flag();\n","<svelte:options customElement=\"m-link\" />\n\n<script lang=\"ts\">\n  import type { LinkIconPosition, LinkSize, LinkStyle } from './link.types';\n  export let href: string;\n  export let target: string;\n  export let style: LinkStyle = undefined;\n  export let disabled = false;\n  export let size: LinkSize = 'm';\n  export let inline = false;\n  export let iconposition: LinkIconPosition | undefined = undefined;\n\n  $: userClass = $$props.class;\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n\n  function setClasses(\n    style: LinkStyle,\n    size: LinkSize,\n    inline: boolean,\n  ): string {\n    const classes = ['mc-link'];\n\n    if (style) {\n      classes.push(`mc-link--${style}`);\n    }\n    if (size) {\n      classes.push(`mc-link--${size}`);\n    }\n    if (inline) {\n      classes.push('mc-link--inline');\n    } else {\n      classes.push('mc-link--stand-alone');\n    }\n    return classes.join(' ');\n  }\n</script>\n\n<a\n  on:click\n  {href}\n  {target}\n  class=\"{setClasses(style, size, inline)} {disabled\n    ? 'is-disabled'\n    : ''} {userClass}\"\n  {...attributes}\n>\n  {#if iconposition === 'left'}\n    <span class=\"mc-link__icon\">\n      <slot name=\"icon\" />\n    </span>\n  {/if}\n  <span class=\"mc-link__label\">\n    <slot />\n  </span>\n  {#if iconposition === 'right'}\n    <span class=\"mc-link__icon\">\n      <slot name=\"icon\" />\n    </span>\n  {/if}\n</a>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/link';\n</style>\n"],"names":["observe_all","context","props","l","s","signal","get","bubble_event","$$props","event","events","type","callbacks","is_array","slice","fn","call","this","enable_legacy_mode_flag","href","$.prop","target","style","undefined","disabled","size","inline","iconposition","$.set","userClass","class","attributes","$$restProps","$.get","immutable","u","deep_read_state","version","prev","d","derived","changed","key","b","length","user_pre_effect","run_all","user_effect","fns","untrack","m","map","run","a","$$render","consequent","consequent_1","$0","classes","push","join","setClasses"],"mappings":"qYA2EA,SAASA,EAAYC,EAASC,GAC7B,GAAID,EAAQE,EAAEC,EACb,IAAK,MAAMC,KAAUJ,EAAQE,EAAEC,EAAGE,EAAID,GAGvCH,GACD,CCpDO,SAASK,EAAaC,EAASC,GACrC,IAAIC,EAA+DF,EAAgB,WAClFC,EAAME,MAGHC,EAAYC,EAASH,GAAUA,EAAOI,QAAoB,MAAVJ,EAAiB,GAAK,CAACA,GAE3E,IAAK,IAAIK,KAAMH,EAEdG,EAAGC,KAAKC,KAAMR,EAEhB,CCtCAS,qyECEaC,EAAYC,EAAAZ,EAAA,OAAA,IACZa,EAAcD,EAAAZ,EAAA,SAAA,IACdc,sBAAmBC,GACnBC,qBAAW,GACXC,gBAAiB,KACjBC,mBAAS,GACTC,6BAA6CJ,sBAErDK,EAAAC,IAAoBC,MAAK,uBACzBF,EAAAG,mBAAkBC,GAAW,8BACtBC,EAAAF,GAAWD,KAAK,QHHrB,SAAcI,GAAY,GAChC,MAAMjC,EAAiD,EAEjDW,EAAYX,EAAQE,EAAEgC,EAC5B,IAAKvB,EAAW,OAEhB,IAAIV,EAAQ,IAAMkC,EAAgBnC,EAAQG,GAE1C,GAAI8B,EAAW,CACd,IAAIG,EAAU,EACVC,EAA2C,CAAE,EAGjD,MAAMC,EAAIC,GAAQ,KACjB,IAAIC,GAAU,EACd,MAAMvC,EAAQD,EAAQG,EACtB,IAAK,MAAMsC,KAAOxC,EACbA,EAAMwC,KAASJ,EAAKI,KACvBJ,EAAKI,GAAOxC,EAAMwC,GAClBD,GAAU,GAIZ,OADIA,GAASJ,IACNA,CAAO,IAGfnC,EAAQ,IAAMI,EAAIiC,EACpB,CAGK3B,EAAU+B,EAAEC,QACfC,GAAgB,KACf7C,EAAYC,EAASC,GACrB4C,EAAQlC,EAAU+B,EAAE,IAKtBI,GAAY,KACX,MAAMC,EAAMC,GAAQ,IAAMrC,EAAUsC,EAAEC,IAAIC,KAC1C,MAAO,KACN,IAAK,MAAMrC,KAAMiC,EACE,mBAAPjC,GACVA,GAEL,CACG,IAIEH,EAAUyC,EAAET,QACfG,GAAY,KACX/C,EAAYC,EAASC,GACrB4C,EAAQlC,EAAUyC,EAAE,GAGvB,6FGpBwB,SAAjB1B,KAAuB2B,EAAAC,EAAA,sIAQN,UAAjB5B,KAAwB2B,EAAAE,GAAA,4CAba1B,MAAA,GAAA2B,GAAA,OAAAjC,IACtC,cACA,KAAE,MAAAS,EAAGJ,IAAS,UACdE,wBAHI,IA1BC,SACPT,EACAG,EACAC,GAEM,MAAAgC,GAAW,kBAEbpC,GACFoC,EAAQC,KAAI,YAAarC,KAEvBG,GACFiC,EAAQC,KAAI,YAAalC,KAEvBC,EACFgC,EAAQC,KAAK,mBAEbD,EAAQC,KAAK,wBAERD,EAAQE,KAAK,IACtB,CAOQC,CAAWvC,IAAOG,IAAMC","x_google_ignoreList":[0,1,2]}

package/public/components/link/Link.svelte

@@ -1,10 +1,7 @@
-<svelte:options customElement="" />
+<svelte:options customElement="m-link" />
 
 <script lang="ts">
-  // @ts-ignore Need to use internal Svelte function
-  import { get_current_component } from 'svelte/internal';
   import type { LinkIconPosition, LinkSize, LinkStyle } from './link.types';
-  import { createEventForwarder } from '../../utilities/EventForward';
   export let href: string;
   export let target: string;
   export let style: LinkStyle = undefined;
@@ -13,8 +10,6 @@
   export let inline = false;
   export let iconposition: LinkIconPosition | undefined = undefined;
 
-  const forwardEvents = createEventForwarder(get_current_component());
-
   $: userClass = $$props.class;
   $: attributes = { ...$$restProps };
   $: delete attributes.class;
@@ -42,7 +37,6 @@
 </script>
 
 <a
-  use:forwardEvents
   on:click
   {href}
   {target}

package/public/components/loader/Loader.js

@@ -1,2 +1,2 @@
-import{c as e,S as t,i as s,f as r,s as a,a as l,p as o,e as d,D as h,b as c,d as n,E as i,t as p,g as u,h as m,y as k,m as v,n as f,q as _,F as x,G as g}from"../../index-c0bfe08f.js";import{g as w}from"../../spread-ed04f539.js";function $(e){l(e,"svelte-ud0phk",".mc-loader.svelte-ud0phk.svelte-ud0phk{color:var(--loader-color-standard, #464e63);align-items:center;display:inline-flex;flex-direction:column}.mc-loader.svelte-ud0phk .mc-loader__spinner.svelte-ud0phk{height:2rem;width:2rem}.mc-loader.svelte-ud0phk .mc-loader__path.svelte-ud0phk{stroke-width:4}.mc-loader.svelte-ud0phk .mc-loader__path.svelte-ud0phk{stroke:currentColor}.mc-loader__spinner.svelte-ud0phk.svelte-ud0phk:not(:only-child){margin-bottom:1rem}.mc-loader__icon.svelte-ud0phk.svelte-ud0phk{animation:svelte-ud0phk-rotate-loader 2s linear infinite;transform-origin:center}.mc-loader__path.svelte-ud0phk.svelte-ud0phk{fill:none;stroke-dasharray:1, 200;stroke-dashoffset:0;stroke-linecap:round;animation:svelte-ud0phk-animate-dash-loader 2s ease-in-out infinite}.mc-loader__text.svelte-ud0phk.svelte-ud0phk{font-size:1rem;color:currentcolor}.mc-loader.svelte-ud0phk:not(.mc-loader--text-visible) .mc-loader__text.svelte-ud0phk{clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px}.mc-loader--s.svelte-ud0phk .mc-loader__spinner.svelte-ud0phk{height:1.5rem;width:1.5rem}.mc-loader--s.svelte-ud0phk .mc-loader__path.svelte-ud0phk{stroke-width:4}.mc-loader--l.svelte-ud0phk .mc-loader__spinner.svelte-ud0phk{height:4rem;width:4rem}.mc-loader--l.svelte-ud0phk .mc-loader__path.svelte-ud0phk{stroke-width:8}.mc-loader--accent.svelte-ud0phk.svelte-ud0phk{color:var(--loader-color-accent, #117f03)}.mc-loader--accent.svelte-ud0phk .mc-loader__path.svelte-ud0phk{stroke:currentColor}.mc-loader--inverse.svelte-ud0phk.svelte-ud0phk{color:var(--loader-color-inverse, #ffffff)}.mc-loader--inverse.svelte-ud0phk .mc-loader__path.svelte-ud0phk{stroke:currentColor}@keyframes svelte-ud0phk-rotate-loader{0%{transform:rotate(0deg)}100%{transform:rotate(270deg)}}@keyframes svelte-ud0phk-animate-dash-loader{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35px}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124px}}")}function y(e){let t,s;return{c(){t=d("span"),s=x(e[2]),n(t,"class","mc-loader__text svelte-ud0phk")},m(e,r){u(e,t,r),m(t,s)},p(e,t){4&t&&g(s,e[2])},d(e){e&&v(t)}}}function z(e){let t,s,r,a,l,f,_,x,g=e[2]&&y(e),$=[{class:x=b(e[0],e[1])},e[3]],z={};for(let e=0;e<$.length;e+=1)z=o(z,$[e]);return{c(){t=d("div"),s=d("span"),r=h("svg"),a=h("circle"),_=c(),g&&g.c(),n(a,"class","mc-loader__path svelte-ud0phk"),n(a,"cx","50%"),n(a,"cy","50%"),n(a,"r",l=C(e[0])),n(r,"class","mc-loader__icon svelte-ud0phk"),n(r,"xmlns","http://www.w3.org/2000/svg"),n(r,"viewBox",f=j(e[0])),n(s,"class","mc-loader__spinner svelte-ud0phk"),i(t,z),p(t,"svelte-ud0phk",!0)},m(e,l){u(e,t,l),m(t,s),m(s,r),m(r,a),m(t,_),g&&g.m(t,null)},p(e,[s]){1&s&&l!==(l=C(e[0]))&&n(a,"r",l),1&s&&f!==(f=j(e[0]))&&n(r,"viewBox",f),e[2]?g?g.p(e,s):(g=y(e),g.c(),g.m(t,null)):g&&(g.d(1),g=null),i(t,z=w($,[3&s&&x!==(x=b(e[0],e[1]))&&{class:x},8&s&&e[3]])),p(t,"svelte-ud0phk",!0)},i:k,o:k,d(e){e&&v(t),g&&g.d()}}}function b(e,t){const s=["mc-loader"];return e&&s.push(`mc-loader--${e}`),t&&s.push(`mc-loader--${t}`),s.join(" ")}function j(e){let t;switch(e){case"s":t="0 0 24 24";break;case"l":t="0 0 64 64";break;default:t="0 0 32 32"}return t}function C(e){let t;switch(e){case"s":t=6;break;case"l":t=19;break;default:t=9}return t}function B(e,t,s){const r=["size","theme","text"];let a=f(t,r),{size:l}=t,{theme:d}=t,{text:h}=t;return e.$$set=e=>{t=o(o({},t),_(e)),s(3,a=f(t,r)),"size"in e&&s(0,l=e.size),"theme"in e&&s(1,d=e.theme),"text"in e&&s(2,h=e.text)},[l,d,h,a]}class q extends t{constructor(e){super(),s(this,e,B,z,a,{size:0,theme:1,text:2},$)}get size(){return this.$$.ctx[0]}set size(e){this.$$set({size:e}),r()}get theme(){return this.$$.ctx[1]}set theme(e){this.$$set({theme:e}),r()}get text(){return this.$$.ctx[2]}set text(e){this.$$set({text:e}),r()}}e(q,{size:{},theme:{},text:{}},[],[],!0);export{q as default};
+import{c as e,p as t,a as r,b as s,t as a,k as o,g as l,d,s as n,e as h,h as c,i,j as p,r as m,f as u}from"../../custom-element-C0xaDU2s.js";import{i as k}from"../../if-B_xe8pYW.js";import{s as v}from"../../attributes-C2cU7aS9.js";var f=a('<span class="mc-loader__text svelte-ud0phk"> </span>'),_=a('<div><span class="mc-loader__spinner svelte-ud0phk"><svg class="mc-loader__icon svelte-ud0phk" xmlns="http://www.w3.org/2000/svg"><circle class="mc-loader__path svelte-ud0phk" cx="50%" cy="50%"></circle></svg></span> <!></div>');const w={hash:"svelte-ud0phk",code:"/**\n * Do not edit directly, this file was auto-generated.\n */.mc-loader.svelte-ud0phk {color:var(--loader-color-standard, #464e63);align-items:center;display:inline-flex;flex-direction:column;}.mc-loader.svelte-ud0phk .mc-loader__spinner:where(.svelte-ud0phk) {height:2rem;width:2rem;}.mc-loader.svelte-ud0phk .mc-loader__path:where(.svelte-ud0phk) {stroke-width:4;}.mc-loader.svelte-ud0phk .mc-loader__path:where(.svelte-ud0phk) {stroke:currentColor;}.mc-loader__spinner.svelte-ud0phk:not(:only-child) {margin-bottom:1rem;}.mc-loader__icon.svelte-ud0phk {\n  animation: svelte-ud0phk-rotate-loader 2s linear infinite;transform-origin:center;}.mc-loader__path.svelte-ud0phk {fill:none;stroke-dasharray:1, 200;stroke-dashoffset:0;stroke-linecap:round;\n  animation: svelte-ud0phk-animate-dash-loader 2s ease-in-out infinite;}.mc-loader__text.svelte-ud0phk {font-size:1rem;color:currentcolor;}.mc-loader.svelte-ud0phk:not(.mc-loader--text-visible) .mc-loader__text:where(.svelte-ud0phk) {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}.mc-loader--s.svelte-ud0phk .mc-loader__spinner:where(.svelte-ud0phk) {height:1.5rem;width:1.5rem;}.mc-loader--s.svelte-ud0phk .mc-loader__path:where(.svelte-ud0phk) {stroke-width:4;}.mc-loader--l.svelte-ud0phk .mc-loader__spinner:where(.svelte-ud0phk) {height:4rem;width:4rem;}.mc-loader--l.svelte-ud0phk .mc-loader__path:where(.svelte-ud0phk) {stroke-width:8;}.mc-loader--accent.svelte-ud0phk {color:var(--loader-color-accent, #117f03);}.mc-loader--accent.svelte-ud0phk .mc-loader__path:where(.svelte-ud0phk) {stroke:currentColor;}.mc-loader--inverse.svelte-ud0phk {color:var(--loader-color-inverse, #ffffff);}.mc-loader--inverse.svelte-ud0phk .mc-loader__path:where(.svelte-ud0phk) {stroke:currentColor;}\n\n@keyframes svelte-ud0phk-rotate-loader {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(270deg);\n  }\n}\n@keyframes svelte-ud0phk-animate-dash-loader {\n  0% {\n    stroke-dasharray: 1, 200;\n    stroke-dashoffset: 0;\n  }\n  50% {\n    stroke-dasharray: 89, 200;\n    stroke-dashoffset: -35px;\n  }\n  100% {\n    stroke-dasharray: 89, 200;\n    stroke-dashoffset: -124px;\n  }\n}"};function x(e,a){t(a,!0),r(e,w);let x=s(a,"size",7),g=s(a,"theme",7),y=s(a,"text",7);var b=_(),j=l(b),z=l(j),C=l(z);m(z),m(j);var $=o(j,2),B=e=>{var t=f(),r=l(t,!0);m(t),d((()=>u(r,y()))),c(e,t)};return k($,(e=>{y()&&e(B)})),m(b),d(((e,t,r)=>{n(b,1,h(e),"svelte-ud0phk"),v(z,"viewBox",t),v(C,"r",r)}),[()=>function(e,t){const r=["mc-loader"];return e&&r.push(`mc-loader--${e}`),t&&r.push(`mc-loader--${t}`),r.join(" ")}(x(),g()),()=>function(e){let t;switch(e){case"s":t="0 0 24 24";break;case"l":t="0 0 64 64";break;default:t="0 0 32 32"}return t}(x()),()=>function(e){let t;switch(e){case"s":t=6;break;case"l":t=19;break;default:t=9}return t}(x())]),c(e,b),i({get size(){return x()},set size(e){x(e),p()},get theme(){return g()},set theme(e){g(e),p()},get text(){return y()},set text(e){y(e),p()}})}customElements.define("m-loader",e(x,{size:{},theme:{},text:{}},[],[],!0));export{x as default};
 //# sourceMappingURL=Loader.js.map

package/public/components/loader/Loader.js.map

@@ -1 +1 @@
-{"version":3,"file":"Loader.js","sources":["../../../src/components/loader/Loader.svelte"],"sourcesContent":["<svelte:options customElement=\"\" />\n\n<script lang=\"ts\">\n  import type { LoaderSize, LoaderTheme } from './loader.types';\n\n  export let size: LoaderSize;\n  export let theme: LoaderTheme;\n  export let text: string;\n\n  function setClasses(size: LoaderSize, theme: LoaderTheme) {\n    const classes = ['mc-loader'];\n\n    if (size) {\n      classes.push(`mc-loader--${size}`);\n    }\n\n    if (theme) {\n      classes.push(`mc-loader--${theme}`);\n    }\n\n    return classes.join(' ');\n  }\n\n  function setViewBox(size: LoaderSize) {\n    let viewBox: string;\n\n    switch (size) {\n      case 's':\n        viewBox = '0 0 24 24';\n        break;\n      case 'l':\n        viewBox = '0 0 64 64';\n        break;\n      default:\n        viewBox = '0 0 32 32';\n    }\n\n    return viewBox;\n  }\n\n  function setCircleRadius(size: LoaderSize) {\n    let circleRadius: number;\n\n    switch (size) {\n      case 's':\n        circleRadius = 6;\n        break;\n      case 'l':\n        circleRadius = 19;\n        break;\n      default:\n        circleRadius = 9;\n    }\n\n    return circleRadius;\n  }\n</script>\n\n<div class={setClasses(size, theme)} {...$$restProps}>\n  <span class=\"mc-loader__spinner\">\n    <svg\n      class=\"mc-loader__icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox={setViewBox(size)}\n    >\n      <circle\n        class=\"mc-loader__path\"\n        cx=\"50%\"\n        cy=\"50%\"\n        r={setCircleRadius(size)}\n      />\n    </svg>\n  </span>\n\n  {#if text}\n    <span class=\"mc-loader__text\">\n      {text}\n    </span>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/loader';\n</style>\n"],"names":["ctx","insert","target","span","anchor","create_if_block","setClasses","attr","circle","circle_r_value","setCircleRadius","svg","svg_viewBox_value","setViewBox","div","append","dirty","class","div_class_value","size","theme","classes","push","join","viewBox","circleRadius","$$props","text"],"mappings":"ozEA4EOA,EAAI,yDADPC,EAEMC,EAAAC,EAAAC,2BADHJ,EAAI,wDAFJA,EAAI,IAAAK,EAAAL,eAhBCM,EAAWN,EAAI,GAAEA,EAAK,KAAOA,EAAW,wMAWzCO,EAAAC,EAAA,IAAAC,EAAAC,EAAgBV,EAAI,4FANhBO,EAAAI,EAAA,UAAAC,EAAAC,EAAWb,EAAI,4FAL9BC,EAqBKC,EAAAY,EAAAV,GApBHW,EAaMD,EAAAX,GAZJY,EAWKZ,EAAAQ,GANHI,EAKCJ,EAAAH,mCADI,EAAAQ,GAAAP,KAAAA,EAAAC,EAAgBV,EAAI,iBANhB,EAAAgB,GAAAJ,KAAAA,EAAAC,EAAWb,EAAI,uBAWvBA,EAAI,mFAhBCM,EAAWN,EAAI,GAAEA,EAAK,MAAA,CAAAiB,MAAAC,QAAOlB,EAAW,wEAjDzCM,EAAWa,EAAkBC,GAC9B,MAAAC,GAAW,oBAEbF,GACFE,EAAQC,KAAI,cAAeH,KAGzBC,GACFC,EAAQC,KAAI,cAAeF,KAGtBC,EAAQE,KAAK,KAGb,SAAAV,EAAWM,OACdK,SAEIL,OACD,IACHK,EAAU,sBAEP,IACHA,EAAU,0BAGVA,EAAU,mBAGPA,EAGA,SAAAd,EAAgBS,OACnBM,SAEIN,OACD,IACHM,EAAe,YAEZ,IACHA,EAAe,iBAGfA,EAAe,SAGZA,uEAjDEN,GAAgBO,SAChBN,GAAkBM,QAClBC,GAAYD"}
+{"version":3,"file":"Loader.js","sources":["../../../src/components/loader/Loader.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-loader' }} />\n\n<script lang=\"ts\">\n  import type { LoaderSize, LoaderTheme } from './loader.types';\n\n  interface Props {\n    size: LoaderSize;\n    theme: LoaderTheme;\n    text: string;\n  }\n\n  let { size, theme, text }: Props = $props();\n\n  function setClasses(size: LoaderSize, theme: LoaderTheme) {\n    const classes = ['mc-loader'];\n\n    if (size) {\n      classes.push(`mc-loader--${size}`);\n    }\n\n    if (theme) {\n      classes.push(`mc-loader--${theme}`);\n    }\n\n    return classes.join(' ');\n  }\n\n  function setViewBox(size: LoaderSize) {\n    let viewBox: string;\n\n    switch (size) {\n      case 's':\n        viewBox = '0 0 24 24';\n        break;\n      case 'l':\n        viewBox = '0 0 64 64';\n        break;\n      default:\n        viewBox = '0 0 32 32';\n    }\n\n    return viewBox;\n  }\n\n  function setCircleRadius(size: LoaderSize) {\n    let circleRadius: number;\n\n    switch (size) {\n      case 's':\n        circleRadius = 6;\n        break;\n      case 'l':\n        circleRadius = 19;\n        break;\n      default:\n        circleRadius = 9;\n    }\n\n    return circleRadius;\n  }\n</script>\n\n<div class={setClasses(size, theme)}>\n  <span class=\"mc-loader__spinner\">\n    <svg\n      class=\"mc-loader__icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox={setViewBox(size)}\n    >\n      <circle\n        class=\"mc-loader__path\"\n        cx=\"50%\"\n        cy=\"50%\"\n        r={setCircleRadius(size)}\n      />\n    </svg>\n  </span>\n\n  {#if text}\n    <span class=\"mc-loader__text\">\n      {text}\n    </span>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/loader';\n</style>\n"],"names":["size","$.prop","$$props","theme","text","$$render","consequent","classes","push","join","setClasses","viewBox","setViewBox","circleRadius","setCircleRadius"],"mappings":"myFAWQA,EAAIC,EAAAC,EAAA,OAAA,GAAEC,EAAKF,EAAAC,EAAA,QAAA,GAAEE,EAAIH,EAAAC,EAAA,OAAA,mGAqElBE,+BAFAA,KAAIC,EAAAC,EAAA,8FAjEWN,EAAkBG,GAC9B,MAAAI,GAAW,oBAEbP,GACFO,EAAQC,KAAI,cAAeR,KAGzBG,GACFI,EAAQC,KAAI,cAAeL,KAGtBI,EAAQE,KAAK,IACtB,CAqCUC,CAAWV,IAAMG,KAKd,IAxCJ,SAAWH,OACdW,SAEIX,OACD,IACHW,EAAU,sBAEP,IACHA,EAAU,0BAGVA,EAAU,mBAGPA,CACT,CAyBaC,CAAWZ,KAMf,IA7BA,SAAgBA,OACnBa,SAEIb,OACD,IACHa,EAAe,YAEZ,IACHA,EAAe,iBAGfA,EAAe,SAGZA,CACT,CAcSC,CAAgBd"}

package/public/components/loader/Loader.svelte

@@ -1,11 +1,15 @@
-<svelte:options customElement="" />
+<svelte:options customElement={{ tag: 'm-loader' }} />
 
 <script lang="ts">
   import type { LoaderSize, LoaderTheme } from './loader.types';
 
-  export let size: LoaderSize;
-  export let theme: LoaderTheme;
-  export let text: string;
+  interface Props {
+    size: LoaderSize;
+    theme: LoaderTheme;
+    text: string;
+  }
+
+  let { size, theme, text }: Props = $props();
 
   function setClasses(size: LoaderSize, theme: LoaderTheme) {
     const classes = ['mc-loader'];
@@ -56,7 +60,7 @@
   }
 </script>
 
-<div class={setClasses(size, theme)} {...$$restProps}>
+<div class={setClasses(size, theme)}>
   <span class="mc-loader__spinner">
     <svg
       class="mc-loader__icon"

package/public/components/overlay/Overlay.js

@@ -1,2 +1,2 @@
-import{c as s,S as e,i,f as t,s as l,a,z as o,p as b,e as p,d as n,E as x,t as d,g as u,h as v,A as r,B as c,C as y,j as m,k as h,m as j,n as f,q as z}from"../../index-c0bfe08f.js";import{g as $}from"../../spread-ed04f539.js";function g(s){a(s,"svelte-tbzuju",".shadow--top-xs.svelte-tbzuju{box-shadow:0px -3px 5px -2px}.shadow--top-s.svelte-tbzuju{box-shadow:0px -5px 10px -2px}.shadow--top-m.svelte-tbzuju{box-shadow:0px -10px 20px -4px}.shadow--top-l.svelte-tbzuju{box-shadow:0px -20px 40px -8px}.shadow--bottom-xs.svelte-tbzuju{box-shadow:0px 3px 5px -2px}.shadow--bottom-s.svelte-tbzuju{box-shadow:0px 5px 10px -2px}.shadow--bottom-m.svelte-tbzuju{box-shadow:0px 10px 20px -4px}.shadow--bottom-l.svelte-tbzuju{box-shadow:0px 20px 40px -8px}.mc-overlay.svelte-tbzuju{filter:blur(1px);inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity 0.4s ease, visibility 0ms 0.4s;z-index:1999999998}.mc-overlay.is-visible.svelte-tbzuju{opacity:1;pointer-events:all;transition:opacity 0.4s ease, visibility 0ms;visibility:visible}.mc-overlay-loader.svelte-tbzuju{inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity 0.4s ease, visibility 0ms 0.4s;z-index:1999999998;align-items:center;display:flex;justify-content:center}.mc-overlay-loader.is-visible.svelte-tbzuju{opacity:1;pointer-events:all;transition:opacity 0.4s ease, visibility 0ms;visibility:visible}")}function w(s){let e,i,t;const l=s[4].default,a=o(l,s,s[3],null);let f=[{class:"mc-overlay"},s[2]],z={};for(let s=0;s<f.length;s+=1)z=b(z,f[s]);return{c(){e=p("div"),i=p("div"),a&&a.c(),n(i,"role","dialog"),n(i,"tabindex","-1"),n(i,"aria-labelledby",s[1]),x(e,z),d(e,"is-visible",s[0]),d(e,"svelte-tbzuju",!0)},m(s,l){u(s,e,l),v(e,i),a&&a.m(i,null),t=!0},p(s,[o]){a&&a.p&&(!t||8&o)&&r(a,l,s,s[3],t?y(l,s[3],o,null):c(s[3]),null),(!t||2&o)&&n(i,"aria-labelledby",s[1]),x(e,z=$(f,[{class:"mc-overlay"},4&o&&s[2]])),d(e,"is-visible",s[0]),d(e,"svelte-tbzuju",!0)},i(s){t||(m(a,s),t=!0)},o(s){h(a,s),t=!1},d(s){s&&j(e),a&&a.d(s)}}}function B(s,e,i){const t=["isvisible","dialoglabel"];let l=f(e,t),{$$slots:a={},$$scope:o}=e,{isvisible:p=!1}=e,{dialoglabel:n}=e;return s.$$set=s=>{e=b(b({},e),z(s)),i(2,l=f(e,t)),"isvisible"in s&&i(0,p=s.isvisible),"dialoglabel"in s&&i(1,n=s.dialoglabel),"$$scope"in s&&i(3,o=s.$$scope)},[p,n,l,o,a]}class k extends e{constructor(s){super(),i(this,s,B,w,l,{isvisible:0,dialoglabel:1},g)}get isvisible(){return this.$$.ctx[0]}set isvisible(s){this.$$set({isvisible:s}),t()}get dialoglabel(){return this.$$.ctx[1]}set dialoglabel(s){this.$$set({dialoglabel:s}),t()}}s(k,{isvisible:{type:"Boolean"},dialoglabel:{}},["default"],[],!0);export{k as default};
+import{c as e,p as i,a as t,b as s,t as o,g as a,d as n,h as r,i as l,j as d,r as p,s as b}from"../../custom-element-C0xaDU2s.js";import{a as v}from"../../slot-DQF0Tqfq.js";import{s as c}from"../../attributes-C2cU7aS9.js";var m=o('<div><div role="dialog" tabindex="-1"><!></div></div>');const h={hash:"svelte-tbzuju",code:"/**\n * Do not edit directly, this file was auto-generated.\n */\n/**\n * Maps to store shadow properties for top shadows.\n * @type Map\n */\n/**\n * Maps to store shadow properties for bottom shadows.\n * @type Map\n */\n/**\n * Mixin to define the box-shadow properties for a given direction and size.\n *\n * @param {String} $direction - The direction of the shadow ('top' or 'bottom').\n * @param {String} $size - The size of the shadow ('xs', 's', 'm', 'l').\n */\n/**\n * Mixin to generate shadow classes for the specified direction (top or bottom).\n * This mixin iterates over the predefined sizes and creates a CSS class for each size.\n *\n * @param {String} $direction - The direction of the shadow ('top' or 'bottom').\n */.mc-overlay.svelte-tbzuju {filter:blur(1px);inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity 0.4s ease, visibility 0ms 0.4s;z-index:1999999998;}.mc-overlay.is-visible.svelte-tbzuju {opacity:1;pointer-events:all;transition:opacity 0.4s ease, visibility 0ms;visibility:visible;}"};function f(e,o){i(o,!0),t(e,h);let f=s(o,"isvisible",7,!1),u=s(o,"dialoglabel",7);var y=m();let g;var w=a(y),x=a(w);return v(x,o,"default",{}),p(w),p(y),n((()=>{g=b(y,1,"mc-overlay svelte-tbzuju",null,g,{"is-visible":f()}),c(w,"aria-labelledby",u())})),r(e,y),l({get isvisible(){return f()},set isvisible(e=!1){f(e),d()},get dialoglabel(){return u()},set dialoglabel(e){u(e),d()}})}customElements.define("m-overlay",e(f,{isvisible:{},dialoglabel:{}},["default"],[],!0));export{f as default};
 //# sourceMappingURL=Overlay.js.map

package/public/components/overlay/Overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"Overlay.js","sources":["../../../src/components/overlay/Overlay.svelte"],"sourcesContent":["<svelte:options customElement=\"\" />\n\n<script lang=\"ts\">\n  export let isvisible = false;\n  export let dialoglabel: string;\n</script>\n\n<div class=\"mc-overlay\" class:is-visible={isvisible} {...$$restProps}>\n  <div role=\"dialog\" tabindex=\"-1\" aria-labelledby={dialoglabel}>\n    <!-- @slot Use this slot to insert a centered content inside the overlay -->\n    <slot />\n  </div>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/overlay';\n</style>\n"],"names":["ctx","insert","target","div1","anchor","append","div0","isvisible","$$props","dialoglabel"],"mappings":"08CAOyDA,EAAW,2JAChBA,EAAW,4BADrBA,EAAS,oCAAnDC,EAKKC,EAAAC,EAAAC,GAJHC,EAGKF,EAAAG,mIAH6CN,EAAW,yCADNA,EAAW,uBAA1BA,EAAS,8LAJtCO,UAAAA,GAAY,GAAKC,eACjBC,GAAmBD"}
+{"version":3,"file":"Overlay.js","sources":["../../../src/components/overlay/Overlay.svelte"],"sourcesContent":["<svelte:options customElement=\"m-overlay\" />\n\n<script lang=\"ts\">\n  interface Props {\n    isvisible?: boolean;\n    dialoglabel: string;\n  }\n\n  let { isvisible = false, dialoglabel }: Props = $props();\n</script>\n\n<div class=\"mc-overlay\" class:is-visible={isvisible}>\n  <div role=\"dialog\" tabindex=\"-1\" aria-labelledby={dialoglabel}>\n    <!-- @slot Use this slot to insert a centered content inside the overlay -->\n    <slot />\n  </div>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/overlay';\n</style>\n"],"names":["isvisible","dialoglabel","$.prop","$$props"],"mappings":"g3CAQQ,IAAAA,qBAAY,GAAOC,EAAWC,EAAAC,EAAA,cAAA,0IAGIH,4BACUC,IAAW,2DAJ3C"}

package/public/components/overlay/Overlay.svelte

@@ -1,11 +1,15 @@
-<svelte:options customElement="" />
+<svelte:options customElement="m-overlay" />
 
 <script lang="ts">
-  export let isvisible = false;
-  export let dialoglabel: string;
+  interface Props {
+    isvisible?: boolean;
+    dialoglabel: string;
+  }
+
+  let { isvisible = false, dialoglabel }: Props = $props();
 </script>
 
-<div class="mc-overlay" class:is-visible={isvisible} {...$$restProps}>
+<div class="mc-overlay" class:is-visible={isvisible}>
   <div role="dialog" tabindex="-1" aria-labelledby={dialoglabel}>
     <!-- @slot Use this slot to insert a centered content inside the overlay -->
     <slot />

package/public/components/overlay/OverlayLoader.js

@@ -1,2 +1,2 @@
-import{c as e,S as s,i as t,f as i,s as a,a as l,e as o,r,d as n,t as d,g as v,h as b,u as f,j as c,k as m,m as x,v as $}from"../../index-c0bfe08f.js";import p from"../loader/Loader.js";import"../../spread-ed04f539.js";function y(e){l(e,"svelte-ne5o65","@keyframes svelte-ne5o65-rotate-loader{0%{transform:rotate(0deg)}100%{transform:rotate(270deg)}}@keyframes svelte-ne5o65-animate-dash-loader{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35px}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124px}}.mc-overlay-loader.svelte-ne5o65{inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity 0.4s ease, visibility 0ms 0.4s;z-index:1999999998;align-items:center;display:flex;justify-content:center}.mc-overlay-loader.is-visible.svelte-ne5o65{opacity:1;pointer-events:all;transition:opacity 0.4s ease, visibility 0ms;visibility:visible}")}function g(e){let s,t,i,a;return i=new p({props:{size:"l",theme:"inverse",text:e[1]}}),{c(){s=o("div"),t=o("div"),r(i.$$.fragment),n(t,"role","dialog"),n(t,"tabindex","-1"),n(t,"aria-labelledby",e[2]),n(s,"class","mc-overlay-loader svelte-ne5o65"),d(s,"is-visible",e[0])},m(e,l){v(e,s,l),b(s,t),f(i,t,null),a=!0},p(e,[l]){const o={};2&l&&(o.text=e[1]),i.$set(o),(!a||4&l)&&n(t,"aria-labelledby",e[2]),(!a||1&l)&&d(s,"is-visible",e[0])},i(e){a||(c(i.$$.fragment,e),a=!0)},o(e){m(i.$$.fragment,e),a=!1},d(e){e&&x(s),$(i)}}}function h(e,s,t){let{isvisible:i=!1}=s,{text:a}=s,{dialoglabel:l}=s;return e.$$set=e=>{"isvisible"in e&&t(0,i=e.isvisible),"text"in e&&t(1,a=e.text),"dialoglabel"in e&&t(2,l=e.dialoglabel)},[i,a,l]}class u extends s{constructor(e){super(),t(this,e,h,g,a,{isvisible:0,text:1,dialoglabel:2},y)}get isvisible(){return this.$$.ctx[0]}set isvisible(e){this.$$set({isvisible:e}),i()}get text(){return this.$$.ctx[1]}set text(e){this.$$set({text:e}),i()}get dialoglabel(){return this.$$.ctx[2]}set dialoglabel(e){this.$$set({dialoglabel:e}),i()}}e(u,{isvisible:{type:"Boolean"},text:{},dialoglabel:{}},[],[],!0);export{u as default};
+import{c as e,p as t,a as s,b as o,t as i,g as a,d as n,h as r,i as l,j as d,r as p,s as m}from"../../custom-element-C0xaDU2s.js";import{s as v}from"../../attributes-C2cU7aS9.js";import f from"../loader/Loader.js";import"../../if-B_xe8pYW.js";var h=i('<div><div role="dialog" tabindex="-1" class="svelte-ne5o65"><!></div></div>');const c={hash:"svelte-ne5o65",code:"/**\n * Do not edit directly, this file was auto-generated.\n */\n\n@keyframes svelte-ne5o65-rotate-loader {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(270deg);\n  }\n}\n@keyframes svelte-ne5o65-animate-dash-loader {\n  0% {\n    stroke-dasharray: 1, 200;\n    stroke-dashoffset: 0;\n  }\n  50% {\n    stroke-dasharray: 89, 200;\n    stroke-dashoffset: -35px;\n  }\n  100% {\n    stroke-dasharray: 89, 200;\n    stroke-dashoffset: -124px;\n  }\n}\n/**\n * Maps to store shadow properties for top shadows.\n * @type Map\n */\n/**\n * Maps to store shadow properties for bottom shadows.\n * @type Map\n */\n/**\n * Mixin to define the box-shadow properties for a given direction and size.\n *\n * @param {String} $direction - The direction of the shadow ('top' or 'bottom').\n * @param {String} $size - The size of the shadow ('xs', 's', 'm', 'l').\n */\n/**\n * Mixin to generate shadow classes for the specified direction (top or bottom).\n * This mixin iterates over the predefined sizes and creates a CSS class for each size.\n *\n * @param {String} $direction - The direction of the shadow ('top' or 'bottom').\n */.mc-overlay-loader.svelte-ne5o65 {inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity 0.4s ease, visibility 0ms 0.4s;z-index:1999999998;align-items:center;display:flex;justify-content:center;}.mc-overlay-loader.is-visible.svelte-ne5o65 {opacity:1;pointer-events:all;transition:opacity 0.4s ease, visibility 0ms;visibility:visible;}"};function b(e,i){t(i,!0),s(e,c);let b=o(i,"isvisible",7,!1),y=o(i,"text",7),g=o(i,"dialoglabel",7);var x=h();let u;var w=a(x),k=a(w);return f(k,{size:"l",theme:"inverse",get text(){return y()}}),p(w),p(x),n((()=>{u=m(x,1,"mc-overlay-loader svelte-ne5o65",null,u,{"is-visible":b()}),v(w,"aria-labelledby",g())})),r(e,x),l({get isvisible(){return b()},set isvisible(e=!1){b(e),d()},get text(){return y()},set text(e){y(e),d()},get dialoglabel(){return g()},set dialoglabel(e){g(e),d()}})}customElements.define("m-overlay-loader",e(b,{isvisible:{},text:{},dialoglabel:{}},[],[],!0));export{b as default};
 //# sourceMappingURL=OverlayLoader.js.map

package/public/components/overlay/OverlayLoader.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayLoader.js","sources":["../../../src/components/overlay/OverlayLoader.svelte"],"sourcesContent":["<svelte:options customElement=\"\" />\n\n<script lang=\"ts\">\n  import Loader from '../loader/Loader.svelte';\n  export let isvisible = false;\n  export let text: string;\n  export let dialoglabel: string;\n</script>\n\n<div class=\"mc-overlay-loader\" class:is-visible={isvisible}>\n  <div role=\"dialog\" tabindex=\"-1\" aria-labelledby={dialoglabel}>\n    <Loader size=\"l\" theme=\"inverse\" {text} />\n  </div>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/loader';\n  @use '@mozaic-ds/styles/components/overlay';\n</style>\n"],"names":["ctx","insert","target","div1","anchor","append","div0","isvisible","$$props","text","dialoglabel"],"mappings":"wkCAUoDA,EAAW,oEADdA,EAAS,YAA1DC,EAIKC,EAAAC,EAAAC,GAHHC,EAEKF,EAAAG,uGAF6CN,EAAW,gCADdA,EAAS,4GAL7C,IAAAO,UAAAA,GAAY,GAAKC,QACjBC,GAAYD,eACZE,GAAmBF"}
+{"version":3,"file":"OverlayLoader.js","sources":["../../../src/components/overlay/OverlayLoader.svelte"],"sourcesContent":["<svelte:options customElement=\"m-overlay-loader\" />\n\n<script lang=\"ts\">\n  import Loader from '../loader/Loader.svelte';\n  interface Props {\n    isvisible?: boolean;\n    text: string;\n    dialoglabel: string;\n  }\n\n  let { isvisible = false, text, dialoglabel }: Props = $props();\n</script>\n\n<div class=\"mc-overlay-loader\" class:is-visible={isvisible}>\n  <div role=\"dialog\" tabindex=\"-1\" aria-labelledby={dialoglabel}>\n    <Loader size=\"l\" theme=\"inverse\" {text} />\n  </div>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/loader';\n  @use '@mozaic-ds/styles/components/overlay';\n</style>\n"],"names":["isvisible","text","$.prop","$$props","dialoglabel"],"mappings":"82DAUQ,IAAAA,qBAAY,GAAOC,EAAIC,EAAAC,EAAA,OAAA,GAAEC,EAAWF,EAAAC,EAAA,cAAA,oLAGKH,4BACGI,IAAW,2DAJ3C"}

package/public/components/overlayloader/OverlayLoader.svelte

@@ -1,10 +1,14 @@
-<svelte:options customElement="" />
+<svelte:options customElement="m-overlay-loader" />
 
 <script lang="ts">
   import Loader from '../loader/Loader.svelte';
-  export let isvisible = false;
-  export let text: string;
-  export let dialoglabel: string;
+  interface Props {
+    isvisible?: boolean;
+    text: string;
+    dialoglabel: string;
+  }
+
+  let { isvisible = false, text, dialoglabel }: Props = $props();
 </script>
 
 <div class="mc-overlay-loader" class:is-visible={isvisible}>