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

package/dist/components/notification/Notification.js

@@ -0,0 +1,2 @@
+import{S as i,i as t,a as e,b as o,f as n,s as a,c as r,e as s,d as c,n as l,h as m,j as d,k as f,l as h,m as g,o as b,q as x,r as w,u as p,T as k,v as u,w as v,y,x as _}from"../../index-c222d0b7.js";import{E as C}from"../../EventHandler-f7ee47ca.js";function E(i){let t,e=i[1],n=i[1]&&z(i);return{c(){n&&n.c(),t=k()},m(i,e){n&&n.m(i,e),o(i,t,e)},p(i,o){i[1]?e?a(e,i[1])?(n.d(1),n=z(i),e=i[1],n.c(),n.m(t.parentNode,t)):n.p(i,o):(n=z(i),e=i[1],n.c(),n.m(t.parentNode,t)):e&&(n.d(1),n=null,e=i[1])},d(i){i&&g(t),n&&n.d(i)}}}function z(i){let t,e;return{c(){t=s(i[1]),e=u(i[0]),v(i[1])(t,{class:"mc-notification__title"})},m(i,n){o(i,t,n),f(t,e)},p(i,t){1&t&&y(e,i[0])},d(i){i&&g(t)}}}function $(i){let t;return{c(){t=s("div"),t.innerHTML='<slot name="footer"></slot>',m(t,"class","mc-notification__footer")},m(i,e){o(i,t,e)},p:l,d(i){i&&g(t)}}}function M(i){let t,e,n;return{c(){t=s("div"),e=s("a"),n=u(i[4]),m(e,"class","mc-notification__link mc-link"),m(e,"href",i[3]),m(t,"class","mc-notification__footer")},m(i,a){o(i,t,a),f(t,e),f(e,n)},p(i,t){16&t&&y(n,i[4]),8&t&&m(e,"href",i[3])},d(i){i&&g(t)}}}function A(i){let t,e,n;return{c(){t=s("button"),m(t,"type","button"),m(t,"class","mc-notification-closable__close"),m(t,"title","Close")},m(a,r){o(a,t,r),e||(n=_(t,"click",i[10]),e=!0)},p:l,d(i){i&&g(t),e=!1,n()}}}function Z(i){let t,e,n,a,b,x,w,p,k=i[0]&&E(i);function u(i,t){return i[3]&&i[4]?M:i[8]?$:void 0}let v=u(i),y=v&&v(i),_=i[6]&&A(i),C=[{class:w=L(i[5],i[7],i[6])+" "+i[11].class},{role:p=i[2]?"alert":"status"},i[9]],z={};for(let i=0;i<C.length;i+=1)z=r(z,C[i]);return{c(){t=s("div"),e=s("div"),k&&k.c(),n=c(),a=s("div"),a.innerHTML="<slot></slot>",b=c(),y&&y.c(),x=c(),_&&_.c(),this.c=l,m(a,"class","mc-notification__message"),m(e,"class","mc-notification__content"),d(t,z)},m(i,r){o(i,t,r),f(t,e),k&&k.m(e,null),f(e,n),f(e,a),f(e,b),y&&y.m(e,null),f(t,x),_&&_.m(t,null)},p(i,[o]){i[0]?k?k.p(i,o):(k=E(i),k.c(),k.m(e,n)):k&&(k.d(1),k=null),v===(v=u(i))&&y?y.p(i,o):(y&&y.d(1),y=v&&v(i),y&&(y.c(),y.m(e,null))),i[6]?_?_.p(i,o):(_=A(i),_.c(),_.m(t,null)):_&&(_.d(1),_=null),d(t,z=h(C,[2272&o&&w!==(w=L(i[5],i[7],i[6])+" "+i[11].class)&&{class:w},4&o&&p!==(p=i[2]?"alert":"status")&&{role:p},512&o&&i[9]]))},i:l,o:l,d(i){i&&g(t),k&&k.d(),y&&y.d(),_&&_.d()}}}function L(i,t,e){const o=["mc-notification"];return i&&o.push(`mc-notification--${i}`),t&&"m"!==t&&o.push(`mc-notification--${t}`),e&&o.push("mc-notification-closable"),o.join(" ")}function B(i,t,e){let o;const n=["title","titletag","alert","href","linkcontent","type","closable","size","hasfooter"];let a=b(t,n),{title:s}=t,{titletag:c="h3"}=t,{alert:l=!1}=t,{href:m}=t,{linkcontent:d}=t,{type:f}=t,{closable:h=!1}=t,{size:g="m"}=t,{hasfooter:k=!1}=t,u=new C(x(),w());return i.$$set=i=>{e(11,t=r(r({},t),p(i))),e(13,a=b(t,n)),"title"in i&&e(0,s=i.title),"titletag"in i&&e(1,c=i.titletag),"alert"in i&&e(2,l=i.alert),"href"in i&&e(3,m=i.href),"linkcontent"in i&&e(4,d=i.linkcontent),"type"in i&&e(5,f=i.type),"closable"in i&&e(6,h=i.closable),"size"in i&&e(7,g=i.size),"hasfooter"in i&&e(8,k=i.hasfooter)},i.$$.update=()=>{e(9,o=Object.assign({},a)),512&i.$$.dirty&&delete o.class},t=p(t),[s,c,l,m,d,f,h,g,k,o,function(i){u.dispatch("close",i)},t]}class V extends i{constructor(i){super();const r=document.createElement("style");r.textContent=".mc-link{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-size:inherit;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;line-height:inherit;text-decoration:underline;-webkit-transition:color ease 200ms;transition:color ease 200ms;gap:0.25rem;color:#000000;position:relative;font-size:1rem;line-height:1.375}.mc-link:focus{outline:none}.mc-link:focus::after{-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-link.is-visited,.mc-link:visited{color:#333333}.mc-link.is-hover,.mc-link:hover{color:#666666}.mc-link.is-active,.mc-link:active{color:#333333}.mc-link.is-disabled{color:#e6e6e6;cursor:not-allowed}.mc-link--s{font-size:0.875rem;line-height:1.2857142857}.mc-link--m{font-size:1rem;line-height:1.375}.mc-link::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:\"\";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease}.mc-link__icon{display:block;height:1rem;fill:currentColor;-ms-flex-negative:0;flex-shrink:0;width:1rem}.mc-link--light{color:#ffffff}.mc-link--light.is-visited,.mc-link--light:visited{color:#cccccc}.mc-link--light.is-hover,.mc-link--light:hover{color:#999999}.mc-link--light.is-active,.mc-link--light:active{color:#cccccc}.mc-link--light.is-disabled{color:#e6e6e6;cursor:not-allowed}.mc-link--primary{color:#188803}.mc-link--primary.is-visited,.mc-link--primary:visited{color:#006902}.mc-link--primary.is-hover,.mc-link--primary:hover{color:#035010}.mc-link--primary.is-active,.mc-link--primary:active{color:#006902}.mc-link--primary.is-disabled{color:#e6e6e6;cursor:not-allowed}.mc-link--primary-02{color:#494f60}.mc-link--primary-02.is-visited,.mc-link--primary-02:visited{color:#343b4c}.mc-link--primary-02.is-hover,.mc-link--primary-02:hover{color:#171b26}.mc-link--primary-02.is-active,.mc-link--primary-02:active{color:#343b4c}.mc-link--primary-02.is-disabled{color:#e6e6e6;cursor:not-allowed}.mc-link--danger{color:#c61112}.mc-link--danger.is-visited,.mc-link--danger:visited{color:#8c0003}.mc-link--danger.is-hover,.mc-link--danger:hover{color:#530000}.mc-link--danger.is-active,.mc-link--danger:active{color:#8c0003}.mc-link--danger.is-disabled{color:#e6e6e6;cursor:not-allowed}@media screen and (min-width: 680px){.mc-link--s\\@from-m{font-size:0.875rem;line-height:1.2857142857}.mc-link--m\\@from-m{font-size:1rem;line-height:1.375}}@media screen and (min-width: 1024px){.mc-link--s\\@from-l{font-size:0.875rem;line-height:1.2857142857}.mc-link--m\\@from-l{font-size:1rem;line-height:1.375}}@media screen and (min-width: 1280px){.mc-link--s\\@from-xl{font-size:0.875rem;line-height:1.2857142857}.mc-link--m\\@from-xl{font-size:1rem;line-height:1.375}}@media screen and (min-width: 1920px){.mc-link--s\\@from-xxl{font-size:0.875rem;line-height:1.2857142857}.mc-link--m\\@from-xxl{font-size:1rem;line-height:1.375}}.mc-notification{font-family:\"LeroyMerlin\", sans-serif;font-weight:400;border-radius:4px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row wrap;flex-flow:row wrap;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;padding:1rem 1.5rem 1.5rem 1rem;background:#daeff7;-webkit-box-shadow:inset 0 0 0 1px #0b96cc;box-shadow:inset 0 0 0 1px #0b96cc;-webkit-box-sizing:border-box;box-sizing:border-box;color:#000000}.mc-notification::before{background-size:2rem;-webkit-box-flex:0;-ms-flex:0 0 2rem;flex:0 0 2rem;height:2rem;margin-right:1rem;width:2rem}.mc-notification .mc-notification__content{padding-top:0.25rem}.mc-notification .mc-notification__title+.mc-notification__message{margin-top:0.5rem}.mc-notification::before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='2rem' width='2rem' viewBox='0 0 32 32' fill='%23007bb4'%3E%3Cpath d='M16,29A13,13,0,1,1,29,16,13,13,0,0,1,16,29ZM16,5A11,11,0,1,0,27,16,11,11,0,0,0,16,5Z'/%3E%3Cpath d='M16,21.7a1,1,0,0,1-1-1V14.87a1,1,0,1,1,2,0V20.7A1,1,0,0,1,16,21.7Z'/%3E%3Ccircle cx='16' cy='11.3' r='1'/%3E%3C/svg%3E\")}.mc-notification::before{background-color:transparent;background-repeat:no-repeat;content:\"\";display:block}.mc-notification__content{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0}.mc-notification__title,.mc-notification__message{margin-bottom:0;margin-top:0}.mc-notification__title{font-family:\"LeroyMerlin\", sans-serif;font-weight:600;font-size:1rem;line-height:1.5}.mc-notification__message{font-size:0.875rem;line-height:1.5714285714}.mc-notification__footer{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin-top:1rem}.mc-notification__link{font-size:0.875rem;line-height:1.2857142857;margin-top:0.5rem}.mc-notification--information{background:#daeff7;-webkit-box-shadow:inset 0 0 0 1px #0b96cc;box-shadow:inset 0 0 0 1px #0b96cc}.mc-notification--information::before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='2rem' width='2rem' viewBox='0 0 32 32' fill='%23007bb4'%3E%3Cpath d='M16,29A13,13,0,1,1,29,16,13,13,0,0,1,16,29ZM16,5A11,11,0,1,0,27,16,11,11,0,0,0,16,5Z'/%3E%3Cpath d='M16,21.7a1,1,0,0,1-1-1V14.87a1,1,0,1,1,2,0V20.7A1,1,0,0,1,16,21.7Z'/%3E%3Ccircle cx='16' cy='11.3' r='1'/%3E%3C/svg%3E\")}.mc-notification--success{background:#ebf5de;-webkit-box-shadow:inset 0 0 0 1px #46a610;box-shadow:inset 0 0 0 1px #46a610}.mc-notification--success::before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='2rem' width='2rem' fill='%23188803' viewBox='0 0 32 32'%3E%3Cpath d='M16,5A11,11,0,1,1,5,16,11,11,0,0,1,16,5m0-2A13,13,0,1,0,29,16,13,13,0,0,0,16,3Z'/%3E%3Cpath d='M14.2,21.45,8.5,16.18a1,1,0,1,1,1.35-1.47l4.28,4,8-8.09a1,1,0,0,1,1.42,0,1,1,0,0,1,0,1.41Z'/%3E%3C/svg%3E\")}.mc-notification--warning{background:#fdf1e8;-webkit-box-shadow:inset 0 0 0 1px #ea7315;box-shadow:inset 0 0 0 1px #ea7315}.mc-notification--warning::before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='2rem' width='2rem' viewBox='0 0 32 32' fill='%23c65200'%3E%3Cpath d='M16,29A13,13,0,1,1,29,16,13,13,0,0,1,16,29ZM16,5A11,11,0,1,0,27,16,11,11,0,0,0,16,5Z'/%3E%3Cpath d='M16,18.13a1,1,0,0,1-1-1V11.3a1,1,0,0,1,2,0v5.83A1,1,0,0,1,16,18.13Z'/%3E%3Ccircle cx='16' cy='20.7' r='1'/%3E%3C/svg%3E\")}.mc-notification--danger{background:#fdeaea;-webkit-box-shadow:inset 0 0 0 1px #ea302d;box-shadow:inset 0 0 0 1px #ea302d}.mc-notification--danger::before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='2rem' width='2rem' viewBox='0 0 32 32' fill='%23c61112'%3E%3Cpath d='M16,3A13,13,0,1,0,29,16,13,13,0,0,0,16,3Zm0,24A11,11,0,1,1,27,16,11,11,0,0,1,16,27Z'/%3E%3Cpath d='M20.71,11.29a1,1,0,0,0-1.42,0L16,14.59l-3.29-3.3a1,1,0,0,0-1.42,1.42L14.59,16l-3.3,3.29a1,1,0,0,0,0,1.42,1,1,0,0,0,1.42,0L16,17.41l3.29,3.3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42L17.41,16l3.3-3.29A1,1,0,0,0,20.71,11.29Z'/%3E%3C/svg%3E\")}.mc-notification--s{padding:0.75rem 0.75rem 1.5rem}.mc-notification--s::before{background-size:1.5rem;-webkit-box-flex:0;-ms-flex:0 0 1.5rem;flex:0 0 1.5rem;height:1.5rem;margin-right:0.5rem;width:1.5rem}.mc-notification--s .mc-notification__content{padding-top:0}.mc-notification--s .mc-notification__title+.mc-notification__message{margin-top:0.25rem}.mc-notification--s::before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1.5rem' width='1.5rem' viewBox='0 0 24 24' fill='%23007bb4'%3E%3Cpath d='M12 22a10 10 0 1110-10 10 10 0 01-10 10zm0-18a8 8 0 108 8 8 8 0 00-8-8z'/%3E%3Cpath d='M12 17a1 1 0 01-1-1v-4.39a1 1 0 012 0V16a1 1 0 01-1 1z'/%3E%3Ccircle cx='12' cy='8' r='1'/%3E%3C/svg%3E\")}.mc-notification--s.mc-notification--success::before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1.5rem' width='1.5rem' viewBox='0 0 24 24' fill='%23188803'%3E%3Cpath d='M12 4a8 8 0 11-8 8 8 8 0 018-8m0-2a10 10 0 1010 10A10 10 0 0012 2z'/%3E%3Cpath d='M10.73 15.75a1 1 0 01-.68-.26l-3-2.74a1 1 0 011.36-1.47l2.25 2.08 4.36-4.42a1 1 0 111.42 1.41l-5 5.1a1 1 0 01-.71.3z'/%3E%3C/svg%3E\")}.mc-notification--s.mc-notification--warning::before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1.5rem' width='1.5rem' viewBox='0 0 24 24' fill='%23c65200'%3E%3Cpath d='M12 2a10 10 0 1010 10A10 10 0 0012 2zm0 18a8 8 0 118-8 8 8 0 01-8 8z'/%3E%3Cpath d='M12 7a1 1 0 00-1 1v4.38a1 1 0 002 0V8a1 1 0 00-1-1z'/%3E%3Ccircle cx='12' cy='16' r='1'/%3E%3C/svg%3E\")}.mc-notification--s.mc-notification--danger::before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1.5rem' width='1.5rem' viewBox='0 0 24 24' fill='%23c61112'%3E%3Cpath d='M12 2a10 10 0 1010 10A10 10 0 0012 2zm0 18a8 8 0 118-8 8 8 0 01-8 8z'/%3E%3Cpath d='M16.21 7.88a1 1 0 00-1.42 0l-2.74 2.74-2.84-2.83a1 1 0 10-1.42 1.42L10.63 12l-2.77 2.79a1 1 0 001.41 1.42l2.78-2.77 2.68 2.68a1 1 0 001.41-1.42L13.46 12l2.75-2.7a1 1 0 000-1.42z'/%3E%3C/svg%3E\")}.mc-notification-closable{position:relative}.mc-notification-closable__close{position:relative;background:transparent url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23000000' viewBox='0 0 16 16'%3E%3Cpath d='M9.41 8l3.3-3.29a1 1 0 10-1.42-1.42L8 6.59l-3.29-3.3a1 1 0 00-1.42 1.42L6.59 8l-3.3 3.29a1 1 0 000 1.42 1 1 0 001.42 0L8 9.41l3.29 3.3a1 1 0 001.42 0 1 1 0 000-1.42z'/%3E%3C/svg%3E\") no-repeat;background-size:1rem;border:0;cursor:pointer;display:block;height:1rem;padding:0;position:absolute;outline:0;right:1rem;top:1rem;width:1rem}.mc-notification-closable__close::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:\"\";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease}.mc-notification-closable__close:focus::after{-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;-webkit-box-shadow:0 0 0 0.125rem #0b96cc;box-shadow:0 0 0 0.125rem #0b96cc}@media screen and (min-width: 1024px){.mc-notification__footer{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}}",this.shadowRoot.appendChild(r),t(this,{target:this.shadowRoot,props:e(this.attributes),customElement:!0},B,Z,a,{title:0,titletag:1,alert:2,href:3,linkcontent:4,type:5,closable:6,size:7,hasfooter:8},null),i&&(i.target&&o(i.target,this,i.anchor),i.props&&(this.$set(i.props),n()))}static get observedAttributes(){return["title","titletag","alert","href","linkcontent","type","closable","size","hasfooter"]}get title(){return this.$$.ctx[0]}set title(i){this.$$set({title:i}),n()}get titletag(){return this.$$.ctx[1]}set titletag(i){this.$$set({titletag:i}),n()}get alert(){return this.$$.ctx[2]}set alert(i){this.$$set({alert:i}),n()}get href(){return this.$$.ctx[3]}set href(i){this.$$set({href:i}),n()}get linkcontent(){return this.$$.ctx[4]}set linkcontent(i){this.$$set({linkcontent:i}),n()}get type(){return this.$$.ctx[5]}set type(i){this.$$set({type:i}),n()}get closable(){return this.$$.ctx[6]}set closable(i){this.$$set({closable:i}),n()}get size(){return this.$$.ctx[7]}set size(i){this.$$set({size:i}),n()}get hasfooter(){return this.$$.ctx[8]}set hasfooter(i){this.$$set({hasfooter:i}),n()}}export{V as default};
+//# sourceMappingURL=Notification.js.map

package/dist/components/notification/Notification.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Notification.js","sources":["../../../src/components/notification/Notification.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import type {\n    NotificationTitleTag,\n    NotificationType,\n    NotificationSize,\n  } from './notification.types';\n  import { EventHandler } from '../../utilities/EventHandler';\n  import {\n    get_current_component,\n    createEventDispatcher,\n  } from 'svelte/internal';\n\n  export let title: string;\n  export let titletag: NotificationTitleTag = 'h3';\n  export let alert = false;\n  export let href: string;\n  export let linkcontent: string;\n  export let type: NotificationType;\n  export let closable = false;\n  export let size: NotificationSize = 'm';\n  export let hasfooter = false;\n\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n\n  let eventHandler = new EventHandler(\n    get_current_component(),\n    createEventDispatcher(),\n  );\n\n  function setClasses(\n    type: NotificationType,\n    size: NotificationSize,\n    closable: boolean,\n  ): string {\n    const classes = ['mc-notification'];\n\n    if (type) {\n      classes.push(`mc-notification--${type}`);\n    }\n\n    if (size && size !== 'm') {\n      classes.push(`mc-notification--${size}`);\n    }\n\n    if (closable) {\n      classes.push('mc-notification-closable');\n    }\n\n    return classes.join(' ');\n  }\n\n  function emitClose(e: CustomEventInit): void {\n    eventHandler.dispatch('close', e);\n  }\n</script>\n\n<div\n  class=\"{setClasses(type, size, closable)} {$$props.class}\"\n  role={alert ? 'alert' : 'status'}\n  {...attributes}\n>\n  <div class=\"mc-notification__content\">\n    {#if title}\n      <svelte:element this={titletag} class=\"mc-notification__title\"\n        >{title}</svelte:element\n      >\n    {/if}\n    <div class=\"mc-notification__message\">\n      <slot />\n    </div>\n    {#if href && linkcontent}\n      <div class=\"mc-notification__footer\">\n        <a class=\"mc-notification__link mc-link\" {href}>{linkcontent}</a>\n      </div>\n    {:else if hasfooter}\n      <div class=\"mc-notification__footer\">\n        <slot name=\"footer\" />\n      </div>\n    {/if}\n  </div>\n  {#if closable}\n    <button\n      type=\"button\"\n      class=\"mc-notification-closable__close\"\n      title=\"Close\"\n      on:click={emitClose}\n    />\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.links';\n  @import '@mozaic-ds/styles/components/_c.notification';\n</style>\n"],"names":["ctx","create_dynamic_element","svelte_element","class","insert","target","anchor","div","append","a","button","create_if_block_3","create_if_block_1","create_if_block_2","create_if_block","setClasses","div2","div1","div0","div2_class_value","role","div2_role_value","type","size","closable","classes","push","join","title","$$props","titletag","alert","href","linkcontent","hasfooter","eventHandler","EventHandler","get_current_component","createEventDispatcher","attributes","Object","assign","$$restProps","e","dispatch"],"mappings":"iRAkE4BA,EAAQ,KAARA,EAAQ,IAAAC,EAAAD,kEAARA,EAAQ,SAARA,EAAQ,qBAARA,EAAQ,iDAARA,EAAQ,kDAARA,EAAQ,mEAARA,EAAQ,QAC1BA,EAAK,MADaA,EAAQ,IAAAE,EAAA,CAAAC,MAAA,mCAA9BC,EAEAC,EAAAH,EAAAI,2BADIN,EAAK,uJAWTI,EAEKC,EAAAE,EAAAD,kFAL8CN,EAAW,iHAD9DI,EAEKC,EAAAE,EAAAD,GADHE,EAAgED,EAAAE,4BAAfT,EAAW,4LAShEI,EAKCC,EAAAK,EAAAJ,qBADWN,EAAS,4EAvBhBA,EAAK,IAAAW,EAAAX,mBAQL,OAAAA,MAAQA,EAAW,GAAAY,EAIdZ,EAAS,GAAAa,gCAMhBb,EAAQ,IAAAc,EAAAd,eAvBLe,EAAWf,EAAM,GAAAA,KAAMA,EAAQ,IAAA,IAAIA,EAAO,IAACG,eAC7CH,EAAK,GAAG,QAAU,UACpBA,EAAU,8QAHhBI,EAgCKC,EAAAW,EAAAV,GA3BHE,EAkBKQ,EAAAC,yBAZHT,EAEKS,EAAAC,yDAPAlB,EAAK,+HAkBPA,EAAQ,sFAvBLe,EAAWf,EAAM,GAAAA,KAAMA,EAAQ,IAAA,IAAIA,EAAO,IAACG,QAAK,CAAAA,MAAAgB,eAClDnB,EAAK,GAAG,QAAU,WAAQ,CAAAoB,KAAAC,UAC5BrB,EAAU,yDA9BL,SAAAe,EACPO,EACAC,EACAC,GAEM,MAAAC,GAAW,0BAEbH,GACFG,EAAQC,KAAI,oBAAqBJ,KAG/BC,GAAiB,MAATA,GACVE,EAAQC,KAAI,oBAAqBH,KAG/BC,GACFC,EAAQC,KAAK,4BAGRD,EAAQE,KAAK,gJArCXC,GAAaC,GACbC,SAAAA,EAAiC,MAAID,GACrCE,MAAAA,GAAQ,GAAKF,QACbG,GAAYH,eACZI,GAAmBJ,QACnBP,GAAsBO,GACtBL,SAAAA,GAAW,GAAKK,GAChBN,KAAAA,EAAyB,KAAGM,GAC5BK,UAAAA,GAAY,GAAKL,EAKxBM,EAAmB,IAAAC,EACrBC,IACAC,2WALCC,EAALC,OAAAC,UAAuBC,2BACXH,EAAWpC,mCA6BZ,SAAUwC,GACjBR,EAAaS,SAAS,QAASD"}

package/dist/components/notification/Notification.svelte

@@ -0,0 +1,98 @@
+<svelte:options tag={null} />
+
+<script lang="ts">
+  import type {
+    NotificationTitleTag,
+    NotificationType,
+    NotificationSize,
+  } from './notification.types';
+  import { EventHandler } from '../../utilities/EventHandler';
+  import {
+    get_current_component,
+    createEventDispatcher,
+  } from 'svelte/internal';
+
+  export let title: string;
+  export let titletag: NotificationTitleTag = 'h3';
+  export let alert = false;
+  export let href: string;
+  export let linkcontent: string;
+  export let type: NotificationType;
+  export let closable = false;
+  export let size: NotificationSize = 'm';
+  export let hasfooter = false;
+
+  $: attributes = { ...$$restProps };
+  $: delete attributes.class;
+
+  let eventHandler = new EventHandler(
+    get_current_component(),
+    createEventDispatcher(),
+  );
+
+  function setClasses(
+    type: NotificationType,
+    size: NotificationSize,
+    closable: boolean,
+  ): string {
+    const classes = ['mc-notification'];
+
+    if (type) {
+      classes.push(`mc-notification--${type}`);
+    }
+
+    if (size && size !== 'm') {
+      classes.push(`mc-notification--${size}`);
+    }
+
+    if (closable) {
+      classes.push('mc-notification-closable');
+    }
+
+    return classes.join(' ');
+  }
+
+  function emitClose(e: CustomEventInit): void {
+    eventHandler.dispatch('close', e);
+  }
+</script>
+
+<div
+  class="{setClasses(type, size, closable)} {$$props.class}"
+  role={alert ? 'alert' : 'status'}
+  {...attributes}
+>
+  <div class="mc-notification__content">
+    {#if title}
+      <svelte:element this={titletag} class="mc-notification__title"
+        >{title}</svelte:element
+      >
+    {/if}
+    <div class="mc-notification__message">
+      <slot />
+    </div>
+    {#if href && linkcontent}
+      <div class="mc-notification__footer">
+        <a class="mc-notification__link mc-link" {href}>{linkcontent}</a>
+      </div>
+    {:else if hasfooter}
+      <div class="mc-notification__footer">
+        <slot name="footer" />
+      </div>
+    {/if}
+  </div>
+  {#if closable}
+    <button
+      type="button"
+      class="mc-notification-closable__close"
+      title="Close"
+      on:click={emitClose}
+    />
+  {/if}
+</div>
+
+<style lang="scss">
+  @import '@mozaic-ds/styles/settings-tools/_all-settings';
+  @import '@mozaic-ds/styles/components/_c.links';
+  @import '@mozaic-ds/styles/components/_c.notification';
+</style>

package/dist/components/notification/notification.types.d.ts

@@ -0,0 +1,14 @@
+export type NotificationTitleTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export type NotificationType = 'information' | 'success' | 'warning' | 'danger';
+export type NotificationSize = 's' | 'm' | undefined;
+export interface NotificationProps extends HTMLElement {
+    title: string;
+    titletag: NotificationTitleTag;
+    alert: boolean;
+    href: string;
+    linkcontent: string;
+    type: NotificationType;
+    closable: boolean;
+    size: NotificationSize;
+}
+//# sourceMappingURL=notification.types.d.ts.map

package/dist/components/notification/notification.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification.types.d.ts","sourceRoot":"","sources":["../../../src/components/notification/notification.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,oBAAoB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC3E,MAAM,MAAM,gBAAgB,GAAG,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAChF,MAAM,MAAM,gBAAgB,GAAG,GAAG,GAAG,GAAG,GAAG,SAAS,CAAC;AACrD,MAAM,WAAW,iBAAkB,SAAQ,WAAW;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,oBAAoB,CAAC;IAC/B,KAAK,EAAE,OAAO,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,gBAAgB,CAAC;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,gBAAgB,CAAC;CACxB"}

package/dist/components/number-badge/NumberBadge.js

@@ -1,4 +1,4 @@
-import{c as g,a as i,b as u,d as o,f,t as v,R as p,m as h,k as z,g as y,h as x,i as k,j as d,r as _}from"../../custom-element.js";var w=f("<div> </div>");const j={hash:"svelte-1m62yzg",code:`/**
+import{c as m,a as u,b as f,d,f as g,t as v,B as p,i as h,k,j as x,l as z,m as c,g as _,r as y}from"../../custom-element.js";var w=g("<div> </div>");const j={hash:"svelte-dov0ok",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-number-badge.svelte-1m62yzg {color:var(--number-badge-color-text-standard, #ffffff);background-color:var(--number-badge-color-background-standard, #464e63);height:1rem;min-width:1rem;padding-inline:0.125rem;font-size:0.625rem;border-radius:1rem;font-weight:600;display:inline-flex;align-items:center;box-sizing:border-box;justify-content:center;}.mc-number-badge--m.svelte-1m62yzg {height:1.5rem;min-width:1.5rem;padding-inline:0.25rem;font-size:0.75rem;}.mc-number-badge--accent.svelte-1m62yzg {color:var(--number-badge-color-text-accent, #ffffff);background-color:var(--number-badge-color-background-accent, #117f03);}.mc-number-badge--danger.svelte-1m62yzg {color:var(--number-badge-color-text-danger, #ffffff);background-color:var(--number-badge-color-background-danger, #c61112);}.mc-number-badge--inverse.svelte-1m62yzg {color:var(--number-badge-color-text-inverse, #464e63);background-color:var(--number-badge-color-background-inverse, #ffffff);}`};function B(m,a){i(a,!0),u(m,j);let s=o(a,"label",7,""),r=o(a,"appearance",7,"standard"),n=o(a,"size",7,"s");function l(e){const c=["mc-number-badge"];return r()&&c.push(`mc-number-badge--${r()}`),n()&&c.push(`mc-number-badge--${n()}`),c.join(" ")}var t=w(),b=y(t,!0);return _(t),v(e=>{h(t,1,e,"svelte-1m62yzg"),z(b,s())},[()=>p(l(r()))]),x(m,t),k({get label(){return s()},set label(e=""){s(e),d()},get appearance(){return r()},set appearance(e="standard"){r(e),d()},get size(){return n()},set size(e="s"){n(e),d()}})}customElements.define("m-number-badge",g(B,{label:{},appearance:{},size:{}},[],[],!0));
+ */.mc-number-badge.svelte-dov0ok {color:var(--number-badge-color-text-standard, #ffffff);background-color:var(--number-badge-color-background-standard, #464e63);height:1rem;min-width:1rem;padding-inline:0.125rem;font-size:var(--font-size-25, 0.625rem);border-radius:var(--radius-l, 1rem);font-weight:var(--font-weight-semi-bold, 600);display:inline-flex;align-items:center;box-sizing:border-box;justify-content:center;line-height:1;}.mc-number-badge--m.svelte-dov0ok {height:1.5rem;min-width:1.5rem;padding-inline:0.25rem;font-size:var(--font-size-50, 0.75rem);}.mc-number-badge--accent.svelte-dov0ok {color:var(--number-badge-color-text-accent, #ffffff);background-color:var(--number-badge-color-background-accent, #117f03);}.mc-number-badge--danger.svelte-dov0ok {color:var(--number-badge-color-text-danger, #ffffff);background-color:var(--number-badge-color-background-danger, #c61112);}.mc-number-badge--inverse.svelte-dov0ok {color:var(--number-badge-color-text-inverse, #464e63);background-color:var(--number-badge-color-background-inverse, #ffffff);}`};function B(l,a){u(a,!0),f(l,j);let o=d(a,"label",7,""),r=d(a,"appearance",7,"standard"),t=d(a,"size",7,"s");function i(e){const s=["mc-number-badge"];return r()&&s.push(`mc-number-badge--${r()}`),t()&&s.push(`mc-number-badge--${t()}`),s.join(" ")}var n=w(),b=_(n,!0);return y(n),v(e=>{h(n,1,e,"svelte-dov0ok"),k(b,o())},[()=>p(i(r()))]),x(l,n),z({get label(){return o()},set label(e=""){o(e),c()},get appearance(){return r()},set appearance(e="standard"){r(e),c()},get size(){return t()},set size(e="s"){t(e),c()}})}customElements.define("m-number-badge",m(B,{label:{},appearance:{},size:{}},[],[],!0));export{B as N};
 //# sourceMappingURL=NumberBadge.js.map

package/dist/components/number-badge/NumberBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberBadge.js","sources":["../../../src/components/number-badge/NumberBadge.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-number-badge' }} />\n\n<script lang=\"ts\">\n  import type { BadgeStyle, BadgeSize } from './number-badge.types';\n  interface Props {\n    label: string;\n    appearance: BadgeStyle;\n    size: BadgeSize;\n  }\n\n  let { label = '', appearance = 'standard', size = 's' }: Props = $props();\n\n  function setClasses(style: BadgeStyle) {\n    const classes = ['mc-number-badge'];\n\n    if (appearance) {\n      classes.push(`mc-number-badge--${appearance}`);\n    }\n\n    if (size) {\n      classes.push(`mc-number-badge--${size}`);\n    }\n\n    return classes.join(' ');\n  }\n</script>\n\n<div class={setClasses(appearance)}>\n  {label}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/number-badge';\n</style>\n"],"names":["label","appearance","size","setClasses","style","classes","$.clsx"],"mappings":";;k+BAUQ,IAAAA,gBAAQ,EAAE,EAAEC,qBAAa,UAAU,EAAEC,eAAO,GAAG,WAE5CC,EAAWC,EAAmB,CAC/B,MAAAC,GAAW,iBAAiB,EAE9B,OAAAJ,EAAU,GACZI,EAAQ,KAAI,oBAAqBJ,EAAU,CAAA,EAAA,EAGzCC,EAAI,GACNG,EAAQ,KAAI,oBAAqBH,EAAI,CAAA,EAAA,EAGhCG,EAAQ,KAAK,GAAG,CACzB,qEAICL,GAAK,IADI,IAAAM,EAAAH,EAAWF,GAAU,CAAA,kDAjBjB,GAAE,yDAAe,WAAU,6CAAS,IAAG"}
+{"version":3,"file":"NumberBadge.js","sources":["../../../src/components/number-badge/NumberBadge.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-number-badge' }} />\n\n<script lang=\"ts\">\n  import type { BadgeStyle, BadgeSize } from './number-badge.types';\n  interface Props {\n    label: string;\n    appearance: BadgeStyle;\n    size: BadgeSize;\n  }\n\n  let { label = '', appearance = 'standard', size = 's' }: Props = $props();\n\n  function setClasses(style: BadgeStyle) {\n    const classes = ['mc-number-badge'];\n\n    if (appearance) {\n      classes.push(`mc-number-badge--${appearance}`);\n    }\n\n    if (size) {\n      classes.push(`mc-number-badge--${size}`);\n    }\n\n    return classes.join(' ');\n  }\n</script>\n\n<div class={setClasses(appearance)}>\n  {label}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/number-badge';\n</style>\n"],"names":["label","appearance","size","setClasses","style","classes","$.clsx"],"mappings":";;ojCAAA,gBAUQ,IAAAA,gBAAQ,EAAE,EAAEC,qBAAa,UAAU,EAAEC,eAAO,GAAG,WAE5CC,EAAWC,EAAmB,CAC/B,MAAAC,GAAW,iBAAiB,EAE9B,OAAAJ,EAAU,GACZI,EAAQ,KAAI,oBAAqBJ,EAAU,CAAA,EAAA,EAGzCC,EAAI,GACNG,EAAQ,KAAI,oBAAqBH,EAAI,CAAA,EAAA,EAGhCG,EAAQ,KAAK,GAAG,CACzB,oEAICL,GAAK,GADI,CAAA,IAAAM,EAAAH,EAAWF,EAAU,CAAA,CAAA,CAAA,iDAjBjB,GAAE,yDAAe,WAAU,6CAAS,IAAG,YAevD"}

package/dist/components/number-badge/NumberBadge.svelte

@@ -38,19 +38,20 @@
   height: 1rem;
   min-width: 1rem;
   padding-inline: 0.125rem;
-  font-size: 0.625rem;
-  border-radius: 1rem;
-  font-weight: 600;
+  font-size: var(--font-size-25, 0.625rem);
+  border-radius: var(--radius-l, 1rem);
+  font-weight: var(--font-weight-semi-bold, 600);
   display: inline-flex;
   align-items: center;
   box-sizing: border-box;
   justify-content: center;
+  line-height: 1;
 }
 .mc-number-badge--m {
   height: 1.5rem;
   min-width: 1.5rem;
   padding-inline: 0.25rem;
-  font-size: 0.75rem;
+  font-size: var(--font-size-50, 0.75rem);
 }
 .mc-number-badge--accent {
   color: var(--number-badge-color-text-accent, #ffffff);

package/dist/components/optionbutton/OptionButton.js

@@ -0,0 +1,2 @@
+import{S as t,i as o,a as e,b as n,f as s,s as i,c,e as a,n as l,j as r,t as p,l as d,m as b,R as u,o as m,q as h,r as f,u as x,d as g,v as w,h as k,k as $,N as y,x as _,y as j,P as v}from"../../index-c222d0b7.js";import{c as E}from"../../EventForward-c4c8cd29.js";import{E as R}from"../../EventHandler-f7ee47ca.js";function C(t,o,e){const n=t.slice();return n[14]=o[e],n}function N(t){let o,e,s,i,c,l,r,d,u,m,h,f,x,E,R=t[14].label+"";function C(){return t[10](t[14])}return{c(){o=a("div"),e=a("input"),d=g(),u=a("label"),m=w(R),f=g(),k(e,"id",s=t[14].id),k(e,"type","radio"),k(e,"class","mc-option-button__input"),k(e,"name",i=t[14].name),e.checked=c=t[14].checked,e.value=l=t[14].id,e.disabled=r=t[14].disabled,k(u,"for",h=t[14].id),k(u,"class","mc-option-button__label"),k(o,"class","mc-option-button"),p(o,"mc-option-button--full",t[14].fullwidth)},m(s,i){n(s,o,i),$(o,e),$(o,d),$(o,u),$(u,m),$(o,f),x||(E=[y(t[6].call(null,e)),_(e,"change",C)],x=!0)},p(n,a){t=n,32&a&&s!==(s=t[14].id)&&k(e,"id",s),32&a&&i!==(i=t[14].name)&&k(e,"name",i),32&a&&c!==(c=t[14].checked)&&(e.checked=c),32&a&&l!==(l=t[14].id)&&(e.value=l),32&a&&r!==(r=t[14].disabled)&&(e.disabled=r),32&a&&R!==(R=t[14].label+"")&&j(m,R),32&a&&h!==(h=t[14].id)&&k(u,"for",h),32&a&&p(o,"mc-option-button--full",t[14].fullwidth)},d(t){t&&b(o),x=!1,v(E)}}}function O(t){let o,e,s,i=t[5],m=[];for(let o=0;o<i.length;o+=1)m[o]=N(C(t,i,o));let h=[{class:e="mc-option-group "+t[4]},t[3],{style:s=`justify-content:${t[0]}; gap:${t[2]}`}],f={};for(let t=0;t<h.length;t+=1)f=c(f,h[t]);return{c(){o=a("div");for(let t=0;t<m.length;t+=1)m[t].c();this.c=l,r(o,f),p(o,"mc-option-group--column",t[1])},m(t,e){n(t,o,e);for(let t=0;t<m.length;t+=1)m[t]&&m[t].m(o,null)},p(t,[n]){if(160&n){let e;for(i=t[5],e=0;e<i.length;e+=1){const s=C(t,i,e);m[e]?m[e].p(s,n):(m[e]=N(s),m[e].c(),m[e].m(o,null))}for(;e<m.length;e+=1)m[e].d(1);m.length=i.length}r(o,f=d(h,[16&n&&e!==(e="mc-option-group "+t[4])&&{class:e},8&n&&t[3],5&n&&s!==(s=`justify-content:${t[0]}; gap:${t[2]}`)&&{style:s}])),p(o,"mc-option-group--column",t[1])},i:l,o:l,d(t){t&&b(o),u(m,t)}}}function S(t,o,e){let n,s,i;const a=["checked","options","justifycontent","column","gap"];let l=m(o,a),{checked:r}=o,{options:p}=o,{justifycontent:d="space-between"}=o,{column:b=!1}=o,{gap:u="1rem"}=o,g=new R(h(),f());const w=E(h());function k(t){t.checked=!t.checked,g.dispatch("change",t)}return t.$$set=t=>{e(13,o=c(c({},o),x(t))),e(12,l=m(o,a)),"checked"in t&&e(8,r=t.checked),"options"in t&&e(9,p=t.options),"justifycontent"in t&&e(0,d=t.justifycontent),"column"in t&&e(1,b=t.column),"gap"in t&&e(2,u=t.gap)},t.$$.update=()=>{512&t.$$.dirty&&e(5,n=p?JSON.parse(p):[]),e(4,s=o.class),e(3,i=Object.assign({},l)),8&t.$$.dirty&&delete i.class},o=x(o),[d,b,u,i,s,n,w,k,r,p,t=>k(t)]}class q extends t{constructor(t){super();const c=document.createElement("style");c.textContent='.mc-option-button{display:-webkit-box;display:-ms-flexbox;display:flex;text-align:center}.mc-option-button__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0;visibility:visible;white-space:nowrap}.mc-option-button__input:hover+.mc-option-button__label{-webkit-box-shadow:0 0 0 2px #333333;box-shadow:0 0 0 2px #333333}.mc-option-button__input:checked+.mc-option-button__label{border-color:#46a610;-webkit-box-shadow:0 0 0 0.25rem #ebf5de;box-shadow:0 0 0 0.25rem #ebf5de}.mc-option-button__input:focus+.mc-option-button__label::after{-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-option-button__input:disabled+.mc-option-button__label{cursor:not-allowed;background-color:#cccccc;color:#666666;-webkit-box-shadow:none;box-shadow:none}.mc-option-button__label{font-family:"LeroyMerlin", sans-serif;font-weight:600;position:relative;padding:1.5625rem 2rem;border-radius:4px;-webkit-box-shadow:0 0 0 1px #b3b3b3;box-shadow:0 0 0 1px #b3b3b3;border:2px solid transparent;cursor:pointer;position:relative}.mc-option-button__label::after{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;border-radius:6px;top:-0.25rem;right:-0.25rem;bottom:-0.25rem;left:-0.25rem}.mc-option-button--full .mc-option-button__label{width:100%}.mc-option-group{display:-webkit-box;display:-ms-flexbox;display:flex}.mc-option-group--column{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}',this.shadowRoot.appendChild(c),o(this,{target:this.shadowRoot,props:e(this.attributes),customElement:!0},S,O,i,{checked:8,options:9,justifycontent:0,column:1,gap:2},null),t&&(t.target&&n(t.target,this,t.anchor),t.props&&(this.$set(t.props),s()))}static get observedAttributes(){return["checked","options","justifycontent","column","gap"]}get checked(){return this.$$.ctx[8]}set checked(t){this.$$set({checked:t}),s()}get options(){return this.$$.ctx[9]}set options(t){this.$$set({options:t}),s()}get justifycontent(){return this.$$.ctx[0]}set justifycontent(t){this.$$set({justifycontent:t}),s()}get column(){return this.$$.ctx[1]}set column(t){this.$$set({column:t}),s()}get gap(){return this.$$.ctx[2]}set gap(t){this.$$set({gap:t}),s()}}export{q as default};
+//# sourceMappingURL=OptionButton.js.map

package/dist/components/optionbutton/OptionButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OptionButton.js","sources":["../../../src/components/optionbutton/OptionButton.svelte"],"sourcesContent":["<svelte:options tag=\"\" />\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 { createEventForwarder } from '../../utilities/EventForward';\n  import { EventHandler } from '../../utilities/EventHandler';\n  import type { OptionItems } from './optionbutton.types';\n  export let checked: boolean;\n  export let options: string;\n  export let justifycontent = 'space-between';\n  export let column = false;\n  export let gap = '1rem';\n  $: parsedOptions = options ? (JSON.parse(options) as OptionItems[]) : [];\n  $: userClass = $$props.class;\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n\n  let eventHandler = new EventHandler(\n    get_current_component(),\n    createEventDispatcher(),\n  );\n  const forwardEvents = createEventForwarder(get_current_component());\n\n  function handleChange(option: OptionItems): void {\n    option.checked = !option.checked;\n    eventHandler.dispatch('change', option);\n  }\n</script>\n\n<div\n  class=\"mc-option-group {userClass}\"\n  class:mc-option-group--column={column}\n  {...attributes}\n  style={`justify-content:${justifycontent}; gap:${gap}`}\n>\n  {#each parsedOptions as option}\n    <div\n      class=\"mc-option-button\"\n      class:mc-option-button--full={option.fullwidth}\n    >\n      <input\n        use:forwardEvents\n        id={option.id}\n        type=\"radio\"\n        class=\"mc-option-button__input\"\n        name={option.name}\n        checked={option.checked}\n        value={option.id}\n        disabled={option.disabled}\n        on:change={() => handleChange(option)}\n      />\n      <label for={option.id} class=\"mc-option-button__label\">\n        {option.label}\n      </label>\n    </div>\n  {/each}\n</div>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n  @import '@mozaic-ds/styles/components/c.option-button';\n\n  .mc-option-group {\n    display: flex;\n\n    &--column {\n      flex-direction: column;\n    }\n  }\n</style>\n"],"names":["t1_value","ctx","label","attr","input","input_id_value","id","input_name_value","name","checked","input_checked_value","value","input_value_value","disabled","input_disabled_value","label_for_value","toggle_class","div","fullwidth","insert","target","anchor","append","dirty","set_data","t1","length","i","style","div_style_value","class","div_class_value","$$props","options","justifycontent","column","gap","eventHandler","EventHandler","get_current_component","createEventDispatcher","forwardEvents","createEventForwarder","handleChange","option","dispatch","$$invalidate","parsedOptions","JSON","parse","userClass","attributes","Object","assign","$$restProps"],"mappings":"kaAsDSA,EAAAC,MAAOC,MAAK,uGAVTC,EAAAC,EAAA,KAAAC,EAAAJ,MAAOK,+DAGLH,EAAAC,EAAA,OAAAG,EAAAN,MAAOO,MACJJ,EAAAK,QAAAC,EAAAT,MAAOQ,QACTL,EAAAO,MAAAC,EAAAX,MAAOK,GACJF,EAAAS,SAAAC,EAAAb,MAAOY,SAGPV,EAAAD,EAAA,MAAAa,EAAAd,MAAOK,2EAbWU,EAAAC,EAAA,yBAAAhB,MAAOiB,mBAFvCC,EAkBKC,EAAAH,EAAAI,GAdHC,EAUCL,EAAAb,UACDkB,EAEOL,EAAAf,gFAXD,GAAAqB,GAAAlB,KAAAA,EAAAJ,MAAOK,iBAGL,GAAAiB,GAAAhB,KAAAA,EAAAN,MAAOO,qBACJ,GAAAe,GAAAb,KAAAA,EAAAT,MAAOQ,wBACT,GAAAc,GAAAX,KAAAA,EAAAX,MAAOK,iBACJ,GAAAiB,GAAAT,KAAAA,EAAAb,MAAOY,0BAIhB,GAAAU,GAAAvB,KAAAA,EAAAC,MAAOC,MAAK,KAAAsB,EAAAC,EAAAzB,GADH,GAAAuB,GAAAR,KAAAA,EAAAd,MAAOK,wBAbWU,EAAAC,EAAA,yBAAAhB,MAAOiB,+DAHlCjB,EAAa,wBAAlByB,OAAIC,GAAA,sDALkB1B,EAAS,IAE7BA,EAAU,IACY2B,MAAAC,EAAA,mBAAA5B,aAAuBA,EAAG,6JAFrBA,EAAM,YAFvCkB,EA2BKC,EAAAH,EAAAI,oFArBIpB,EAAa,WAAlByB,OAAIC,GAAA,EAAA,iHAAJD,kDALsBzB,EAAS,KAAA,CAAA6B,MAAAC,QAE7B9B,EAAU,GACY,EAAAsB,GAAAM,KAAAA,EAAA,mBAAA5B,aAAuBA,EAAG,OAAA,CAAA2B,MAAAC,oCAFrB5B,EAAM,mJAxB1BQ,GAAgBuB,WAChBC,GAAeD,GACfE,eAAAA,EAAiB,iBAAeF,GAChCG,OAAAA,GAAS,GAAKH,GACdI,IAAAA,EAAM,QAAMJ,EAMnBK,EAAmB,IAAAC,EACrBC,IACAC,WAEIC,EAAgBC,EAAqBH,KAElC,SAAAI,EAAaC,GACpBA,EAAOnC,SAAWmC,EAAOnC,QACzB4B,EAAaQ,SAAS,SAAUD,mQAbjCE,EAAA,EAAEC,EAAgBd,EAAWe,KAAKC,MAAMhB,GAAO,IAC7Ca,EAAA,EAAAI,EAAYlB,EAAQF,WACpBqB,EAALC,OAAAC,UAAuBC,yBACXH,EAAWrB,mCAkCEc,GAAAD,EAAaC"}

package/dist/components/optionbutton/OptionButton.svelte

@@ -0,0 +1,72 @@
+<svelte:options tag="" />
+
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+  // @ts-ignore Need to use internal Svelte function
+  import { get_current_component } from 'svelte/internal';
+  import { createEventForwarder } from '../../utilities/EventForward';
+  import { EventHandler } from '../../utilities/EventHandler';
+  import type { OptionItems } from './optionbutton.types';
+  export let checked: boolean;
+  export let options: string;
+  export let justifycontent = 'space-between';
+  export let column = false;
+  export let gap = '1rem';
+  $: parsedOptions = options ? (JSON.parse(options) as OptionItems[]) : [];
+  $: userClass = $$props.class;
+  $: attributes = { ...$$restProps };
+  $: delete attributes.class;
+
+  let eventHandler = new EventHandler(
+    get_current_component(),
+    createEventDispatcher(),
+  );
+  const forwardEvents = createEventForwarder(get_current_component());
+
+  function handleChange(option: OptionItems): void {
+    option.checked = !option.checked;
+    eventHandler.dispatch('change', option);
+  }
+</script>
+
+<div
+  class="mc-option-group {userClass}"
+  class:mc-option-group--column={column}
+  {...attributes}
+  style={`justify-content:${justifycontent}; gap:${gap}`}
+>
+  {#each parsedOptions as option}
+    <div
+      class="mc-option-button"
+      class:mc-option-button--full={option.fullwidth}
+    >
+      <input
+        use:forwardEvents
+        id={option.id}
+        type="radio"
+        class="mc-option-button__input"
+        name={option.name}
+        checked={option.checked}
+        value={option.id}
+        disabled={option.disabled}
+        on:change={() => handleChange(option)}
+      />
+      <label for={option.id} class="mc-option-button__label">
+        {option.label}
+      </label>
+    </div>
+  {/each}
+</div>
+
+<style lang="scss">
+  @import '@mozaic-ds/styles/settings-tools/_all-settings';
+  @import '@mozaic-ds/styles/components/c.option-button';
+
+  .mc-option-group {
+    display: flex;
+
+    &--column {
+      flex-direction: column;
+    }
+  }
+</style>

package/dist/components/optionbutton/optionbutton.types.d.ts

@@ -0,0 +1,10 @@
+export interface OptionItems {
+    name: string | undefined;
+    id: string | undefined;
+    for: string | undefined;
+    label: string | undefined;
+    disabled?: boolean;
+    fullwidth?: boolean;
+    checked?: boolean;
+}
+//# sourceMappingURL=optionbutton.types.d.ts.map

package/dist/components/optionbutton/optionbutton.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"optionbutton.types.d.ts","sourceRoot":"","sources":["../../../src/components/optionbutton/optionbutton.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IACzB,EAAE,EAAE,MAAM,GAAG,SAAS,CAAC;IACvB,GAAG,EAAE,MAAM,GAAG,SAAS,CAAC;IACxB,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}

package/dist/components/overlay/Overlay.js

@@ -1,4 +1,4 @@
-import{c as m,a as u,b as f,d as v,f as y,g as n,t as p,m as g,h,i as _,j as d,r as b}from"../../custom-element.js";import{s as k}from"../../slot.js";import{s as x}from"../../attributes.js";var j=y('<div><div role="dialog" tabindex="-1"><!></div></div>');const w={hash:"svelte-11rk7lh",code:`/**
+import{c as y,a as m,b as u,d as v,f,g as n,t as p,i as g,j as _,l as h,m as d,r as b}from"../../custom-element.js";import{s as x}from"../../slot.js";import{s as q}from"../../attributes.js";var k=f('<div><div role="dialog" tabindex="-1"><!></div></div>');const z={hash:"svelte-1q5sy97",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-overlay.svelte-11rk7lh {background-color:var(--overlay-color-background, rgba(0, 0, 0, 0.5));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-11rk7lh {opacity:1;pointer-events:all;transition:opacity 0.4s ease, visibility 0ms;visibility:visible;}`};function z(r,i){u(i,!0),f(r,w);let l=v(i,"isvisible",7,!1),a=v(i,"dialoglabel",7);var s=j();let o;var t=n(s),c=n(t);return k(c,i,"default",{}),b(t),b(s),p(e=>{o=g(s,1,"mc-overlay svelte-11rk7lh",null,o,e),x(t,"aria-labelledby",a())},[()=>({"is-visible":l()})]),h(r,s),_({get isvisible(){return l()},set isvisible(e=!1){l(e),d()},get dialoglabel(){return a()},set dialoglabel(e){a(e),d()}})}customElements.define("m-overlay",m(z,{isvisible:{},dialoglabel:{}},["default"],[],!0));
+ */.mc-overlay.svelte-1q5sy97 {background-color:var(--overlay-color-background, rgba(0, 0, 0, 0.5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity 0.4s ease, visibility 0ms 0.4s;z-index:var(--overlay-z-index, 2);}.mc-overlay.is-visible.svelte-1q5sy97 {opacity:1;pointer-events:all;transition:opacity 0.4s ease, visibility 0ms;visibility:visible;}`};function O(o,s){m(s,!0),u(o,z);let a=v(s,"isvisible",7,!1),l=v(s,"dialoglabel",7);var i=k();let r;var t=n(i),c=n(t);return x(c,s,"default",{}),b(t),b(i),p(e=>{r=g(i,1,"mc-overlay svelte-1q5sy97",null,r,e),q(t,"aria-labelledby",l())},[()=>({"is-visible":a()})]),_(o,i),h({get isvisible(){return a()},set isvisible(e=!1){a(e),d()},get dialoglabel(){return l()},set dialoglabel(e){l(e),d()}})}customElements.define("m-overlay",y(O,{isvisible:{},dialoglabel:{}},["default"],[],!0));export{O};
 //# sourceMappingURL=Overlay.js.map

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

@@ -1 +1 @@
-{"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":";;uZAQQ,IAAAA,oBAAY,EAAK,EAAEC,EAAWC,EAAAC,EAAA,cAAA,CAAA,mJAIcF,GAAW,uBADrBD,EAAS,GAAA,yDAH/B,GAAK"}
+{"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":";;qYAAA,gBAQQ,IAAAA,oBAAY,EAAK,EAAEC,EAAWC,EAAAC,EAAA,cAAA,CAAA,mJAIcF,GAAW,uBADrBD,EAAS,GAAA,yDAH/B,GAAK,uEACzB"}

package/dist/components/overlay/Overlay.svelte

@@ -1,56 +1,15 @@
-<svelte:options customElement="m-overlay" />
+<svelte:options tag={null} />
 
 <script lang="ts">
-  interface Props {
-    isvisible?: boolean;
-    dialoglabel: string;
-  }
-
-  let { isvisible = false, dialoglabel }: Props = $props();
+  export let visible = false;
 </script>
 
-<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 />
-  </div>
+<div class="mc-overlay" class:is-visible={visible} {...$$restProps}>
+  <!-- @slot Use this slot to insert a centered content inside the overlay -->
+  <slot />
 </div>
 
-<style>/**
- * Do not edit directly, this file was auto-generated.
- */
-.mc-overlay {
-  background-color: var(--overlay-color-background, rgba(0, 0, 0, 0.5));
-  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 {
-  opacity: 1;
-  pointer-events: all;
-  transition: opacity 0.4s ease, visibility 0ms;
-  visibility: visible;
-}
-
-.mc-overlay-loader {
-  background-color: var(--overlay-color-background, rgba(0, 0, 0, 0.5));
-  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 {
-  opacity: 1;
-  pointer-events: all;
-  transition: opacity 0.4s ease, visibility 0ms;
-  visibility: visible;
-}</style>
+<style lang="scss">
+  @import '@mozaic-ds/styles/settings-tools/all-settings';
+  @import '@mozaic-ds/styles/components/c.overlay';
+</style>

package/dist/components/overlay/OverlayLoader.js

@@ -1,8 +1,8 @@
-import{c as b,a as y,b as g,d as o,f as p,g as v,t as u,m as k,h,i as x,j as n,r as c}from"../../custom-element.js";import{s as _}from"../../attributes.js";import{L}from"../loader/Loader.js";import"../../if.js";var j=p('<div><div role="dialog" tabindex="-1" class="svelte-fklr0f"><!></div></div>');const z={hash:"svelte-fklr0f",code:`/**
+import{c as g,a as y,b,d as o,f as p,g as f,t as u,i as h,j as x,l as k,m as n,r as c}from"../../custom-element.js";import{s as _}from"../../attributes.js";import{L as z}from"../loader/Loader.js";import"../../if.js";var L=p('<div><div role="dialog" tabindex="-1" class="svelte-1aiffgv"><!></div></div>');const j={hash:"svelte-1aiffgv",code:`/**
  * Do not edit directly, this file was auto-generated.
  */
 
-@keyframes svelte-fklr0f-rotate-loader {
+@keyframes svelte-1aiffgv-rotate-loader {
   0% {
     transform: rotate(0deg);
   }
@@ -10,7 +10,7 @@ import{c as b,a as y,b as g,d as o,f as p,g as v,t as u,m as k,h,i as x,j as n,r
     transform: rotate(270deg);
   }
 }
-@keyframes svelte-fklr0f-animate-dash-loader {
+@keyframes svelte-1aiffgv-animate-dash-loader {
   0% {
     stroke-dasharray: 1, 200;
     stroke-dashoffset: 0;
@@ -23,5 +23,5 @@ import{c as b,a as y,b as g,d as o,f as p,g as v,t as u,m as k,h,i as x,j as n,r
     stroke-dasharray: 89, 200;
     stroke-dashoffset: -124px;
   }
-}.mc-overlay-loader.svelte-fklr0f {background-color:var(--overlay-color-background, rgba(0, 0, 0, 0.5));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-fklr0f {opacity:1;pointer-events:all;transition:opacity 0.4s ease, visibility 0ms;visibility:visible;}`};function w(d,t){y(t,!0),g(d,z);let a=o(t,"isvisible",7,!1),r=o(t,"text",7),i=o(t,"dialoglabel",7);var s=j();let f;var l=v(s),m=v(l);return L(m,{size:"l",theme:"inverse",get text(){return r()}}),c(l),c(s),u(e=>{f=k(s,1,"mc-overlay-loader svelte-fklr0f",null,f,e),_(l,"aria-labelledby",i())},[()=>({"is-visible":a()})]),h(d,s),x({get isvisible(){return a()},set isvisible(e=!1){a(e),n()},get text(){return r()},set text(e){r(e),n()},get dialoglabel(){return i()},set dialoglabel(e){i(e),n()}})}customElements.define("m-overlay-loader",b(w,{isvisible:{},text:{},dialoglabel:{}},[],[],!0));
+}.mc-overlay-loader.svelte-1aiffgv {background-color:var(--overlay-color-background, rgba(0, 0, 0, 0.5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity 0.4s ease, visibility 0ms 0.4s;z-index:var(--overlay-z-index, 2);align-items:center;display:flex;justify-content:center;}.mc-overlay-loader.is-visible.svelte-1aiffgv {opacity:1;pointer-events:all;transition:opacity 0.4s ease, visibility 0ms;visibility:visible;}`};function w(d,t){y(t,!0),b(d,j);let s=o(t,"isvisible",7,!1),i=o(t,"text",7),r=o(t,"dialoglabel",7);var a=L();let v;var l=f(a),m=f(l);return z(m,{size:"l",theme:"inverse",get text(){return i()}}),c(l),c(a),u(e=>{v=h(a,1,"mc-overlay-loader svelte-1aiffgv",null,v,e),_(l,"aria-labelledby",r())},[()=>({"is-visible":s()})]),x(d,a),k({get isvisible(){return s()},set isvisible(e=!1){s(e),n()},get text(){return i()},set text(e){i(e),n()},get dialoglabel(){return r()},set dialoglabel(e){r(e),n()}})}customElements.define("m-overlay-loader",g(w,{isvisible:{},text:{},dialoglabel:{}},[],[],!0));
 //# sourceMappingURL=OverlayLoader.js.map

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

@@ -1 +1 @@
-{"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":";;;;;;;;;;;;;;;;;;;;;;;;;ucAUQ,IAAAA,oBAAY,EAAK,EAAEC,EAAIC,EAAAC,EAAA,OAAA,CAAA,EAAEC,EAAWF,EAAAC,EAAA,cAAA,CAAA,4LAIQC,GAAW,uBADdJ,EAAS,GAAA,yDAHtC,GAAK"}
+{"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":";;;;;;;;;;;;;;;;;;;;;;;;;wcAAA,gBAUQ,IAAAA,oBAAY,EAAK,EAAEC,EAAIC,EAAAC,EAAA,OAAA,CAAA,EAAEC,EAAWF,EAAAC,EAAA,cAAA,CAAA,6LAIQC,GAAW,uBADdJ,EAAS,GAAA,yDAHtC,GAAK,oHACzB"}

package/dist/components/overlay/OverlayLoader.svelte

@@ -51,7 +51,7 @@
   animation: animate-dash-loader 2s ease-in-out infinite;
 }
 .mc-loader__text {
-  font-size: 1rem;
+  font-size: var(--font-size-150, 1rem);
   color: currentcolor;
 }
 .mc-loader:not(.mc-loader--text-visible) .mc-loader__text {
@@ -122,13 +122,12 @@
 }
 .mc-overlay {
   background-color: var(--overlay-color-background, rgba(0, 0, 0, 0.5));
-  filter: blur(1px);
   inset: 0;
   opacity: 0;
   position: fixed;
   pointer-events: none;
   transition: opacity 0.4s ease, visibility 0ms 0.4s;
-  z-index: 1999999998;
+  z-index: var(--overlay-z-index, 2);
 }
 .mc-overlay.is-visible {
   opacity: 1;
@@ -144,7 +143,7 @@
   position: fixed;
   pointer-events: none;
   transition: opacity 0.4s ease, visibility 0ms 0.4s;
-  z-index: 1999999998;
+  z-index: var(--overlay-z-index, 2);
   align-items: center;
   display: flex;
   justify-content: center;

package/dist/components/overlayloader/OverlayLoader.svelte

@@ -0,0 +1,32 @@
+<svelte:options tag={null} />
+
+<script lang="ts">
+  export let visible = false;
+  export let text: string;
+</script>
+
+<div class="mc-overlay-loader" class:is-visible={visible}>
+  <div class="mc-loader mc-loader--l mc-loader--light">
+    <span class="mc-loader__spinner">
+      <svg
+        class="mc-loader__icon"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 64 64"
+      >
+        <circle class="mc-loader__path" cx="50%" cy="50%" r="19" />
+      </svg>
+    </span>
+
+    {#if text}
+      <span class="mc-loader__text">
+        {text}
+      </span>
+    {/if}
+  </div>
+</div>
+
+<style lang="scss">
+  @import '@mozaic-ds/styles/settings-tools/all-settings';
+  @import '@mozaic-ds/styles/components/c.loader';
+  @import '@mozaic-ds/styles/components/c.overlay';
+</style>

package/dist/components/pagination/Pagination.js

@@ -0,0 +1,14 @@
+import{c as I,a as O,d as i,A as U,t as _,j as h,l as S,m as o,i as V,B as W,u as oe,b as ne,C as y,e as de,f as z,s as J,g as N,r as w,h as l,y as k,k as K,$ as B}from"../../custom-element.js";import{i as M}from"../../if.js";import{e as ce,i as ue}from"../../each.js";import{s as x,c as X,e as ge,d as ve}from"../../attributes.js";import"../../legacy.js";import{B as Q}from"../button/Button.js";import{I as T}from"../button/IconButton.js";import"../../slot.js";import"../loader/Loader.js";var fe=U('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M14.207 6.293a1 1 0 0 1 0 1.414L9.914 12l4.293 4.293a1 1 0 0 1-1.414 1.414l-5-5a1 1 0 0 1 0-1.414l5-5a1 1 0 0 1 1.414 0"></path></svg>');function j(m,t){O(t,!1);let c=i(t,"id",12,void 0),u=i(t,"style",12,void 0),d=i(t,"className",12,void 0),g=i(t,"fill",12,void 0),v=i(t,"size",12,"1.5rem");var n=fe();return _(()=>{x(n,"id",c()),X(n,u()),V(n,0,W(d())),x(n,"fill",g())}),h(m,n),S({get id(){return c()},set id(a){c(a),o()},get style(){return u()},set style(a){u(a),o()},get className(){return d()},set className(a){d(a),o()},get fill(){return g()},set fill(a){g(a),o()},get size(){return v()},set size(a){v(a),o()}})}customElements.define("chevron-left-24",I(j,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));var me=U('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path fill-rule="evenodd" d="M9.793 6.293a1 1 0 0 1 1.414 0l5 5a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414-1.414L14.086 12 9.793 7.707a1 1 0 0 1 0-1.414"></path></svg>');function A(m,t){O(t,!1);let c=i(t,"id",12,void 0),u=i(t,"style",12,void 0),d=i(t,"className",12,void 0),g=i(t,"fill",12,void 0),v=i(t,"size",12,"1.5rem");var n=me();return _(()=>{x(n,"id",c()),X(n,u()),V(n,0,W(d())),x(n,"fill",g())}),h(m,n),S({get id(){return c()},set id(a){c(a),o()},get style(){return u()},set style(a){u(a),o()},get className(){return d()},set className(a){d(a),o()},get fill(){return g()},set fill(a){g(a),o()},get size(){return v()},set size(a){v(a),o()}})}customElements.define("chevron-right-24",I(A,{id:{},style:{},className:{},fill:{},size:{}},[],[],!1));function pe(m,t){const c=Number(m.target.value);t(c)}var be=z("<option> </option>"),he=z('<div class="mc-pagination__field"><select class="mc-select mc-pagination__select svelte-1xgspvt"></select></div>'),xe=z('<span class="mc-pagination__label svelte-1xgspvt" aria-current="page"> </span>'),we=z('<nav class="mc-pagination svelte-1xgspvt" aria-label="pagination"><!> <!> <!></nav>');const _e={hash:"svelte-1xgspvt",code:`/**
+ * Do not edit directly, this file was auto-generated.
+ */.mc-pagination.svelte-1xgspvt {align-items:center;display:flex;justify-content:center;gap:0.5rem;}.mc-pagination__label.svelte-1xgspvt {clip-path:inset(100%);clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px;}
+
+/* stylelint-disable string-no-newline */.mc-select.svelte-1xgspvt {appearance:none;font-family:inherit;transition:box-shadow 200ms ease;font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);height:3rem;padding:0 3rem 0 0.75rem;background-position:right 1rem center;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-interactive, %23000000)' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E");border:var(--border-s, 1px) solid var(--forms-color-border-default, #666666);border-radius:var(--radius-s, 0.25rem);display:block;width:100%;color:var(--forms-color-text-default, #000000);background-color:var(--forms-color-background-default, #ffffff);text-overflow:ellipsis;background-repeat:no-repeat;background-size:1rem;}.mc-select.svelte-1xgspvt:hover {border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-s, 1px) var(--forms-color-border-hover, #4d4d4d);}.mc-select.svelte-1xgspvt: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-select.svelte-1xgspvt:disabled {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='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E");background-color:var(--forms-color-background-disabled, #d9d9d9);border-color:transparent;cursor:not-allowed;box-shadow:none;color:var(--forms-color-text-disabled, #737373);}
+
+/* stylelint-enable string-no-newline */`};function ye(m,t){O(t,!0),ne(m,_e);let c=i(t,"id",7),u=i(t,"value",15,1),d=i(t,"total",7,10),g=i(t,"compact",7,!1),v=i(t,"selectLabel",7,"Page selector"),n=i(t,"pagelabel",7,"of"),a=i(t,"prefixlabel",7,"Page"),f=y(de(Number(u())));const P=y(()=>l(f)<=1),L=y(()=>l(f)>=d()),Y=y(()=>Array.from({length:d()},(e,s)=>s+1));function D(){l(P)()||B(f,Number(l(f))-1)}function F(){l(L)()||B(f,Number(l(f))+1)}var C=we(),R=N(C);{var Z=e=>{{let s=k(()=>l(P)());Q(e,{iconOnly:!0,"aria-label":"Previous page",get disabled(){return l(s)},onclick:D,children:(r,p)=>{j(r,{})},$$slots:{default:!0}})}},$=e=>{{let s=k(()=>l(P)());T(e,{outlined:!0,"aria-label":"Previous page",get disabled(){return l(s)},onclick:D,$$slots:{icon:(r,p)=>{j(r,{slot:"icon"})}}})}};M(R,e=>{g()?e($,!1):e(Z)})}var q=J(R,2);{var ee=e=>{var s=he(),r=N(s);r.__change=[pe,u],ce(r,21,()=>l(Y)(),ue,(p,E)=>{var b=be(),re=N(b);w(b);var G={};_((ie,H)=>{ge(b,ie),K(re,`${a()??""}
+            ${l(E)??""}
+            ${n()??""}
+            ${d()??""}`),G!==(G=H)&&(b.value=(b.__value=H)??"")},[()=>Number(l(E))==Number(l(f)),()=>Number(l(E))]),h(p,b)}),w(r),w(s),_(()=>{x(r,"id",c()),x(r,"aria-label",v()),r.disabled=d()<=1}),ve(r,()=>l(f),p=>B(f,p)),h(e,s)},te=e=>{var s=xe(),r=N(s);w(s),_(()=>K(r,`${a()??""}
+      ${u()??""}
+      ${n()??""}
+      ${d()??""}`)),h(e,s)};M(q,e=>{g()?e(te,!1):e(ee)})}var ae=J(q,2);{var le=e=>{{let s=k(()=>l(L)());Q(e,{iconOnly:!0,"aria-label":"Next page",get disabled(){return l(s)},onclick:F,children:(r,p)=>{A(r,{})},$$slots:{default:!0}})}},se=e=>{{let s=k(()=>l(L)());T(e,{outlined:!0,"aria-label":"Next page",get disabled(){return l(s)},onclick:F,$$slots:{icon:(r,p)=>{A(r,{slot:"icon"})}}})}};M(ae,e=>{g()?e(se,!1):e(le)})}return w(C),h(m,C),S({get id(){return c()},set id(e){c(e),o()},get value(){return u()},set value(e=1){u(e),o()},get total(){return d()},set total(e=10){d(e),o()},get compact(){return g()},set compact(e=!1){g(e),o()},get selectLabel(){return v()},set selectLabel(e="Page selector"){v(e),o()},get pagelabel(){return n()},set pagelabel(e="of"){n(e),o()},get prefixlabel(){return a()},set prefixlabel(e="Page"){a(e),o()}})}oe(["change"]);customElements.define("m-pagination",I(ye,{id:{},value:{},total:{},compact:{},selectLabel:{},pagelabel:{},prefixlabel:{}},[],[],!0));
+//# sourceMappingURL=Pagination.js.map

package/dist/components/pagination/Pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.js","sources":["../../../node_modules/@mozaic-ds/icons-svelte/dist/components/ChevronLeft24/ChevronLeft24.svelte","../../../node_modules/@mozaic-ds/icons-svelte/dist/components/ChevronRight24/ChevronRight24.svelte","../../../src/components/pagination/Pagination.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'chevron-left-24', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"1.5rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\"><path fill-rule=\"evenodd\" d=\"M14.207 6.293a1 1 0 0 1 0 1.414L9.914 12l4.293 4.293a1 1 0 0 1-1.414 1.414l-5-5a1 1 0 0 1 0-1.414l5-5a1 1 0 0 1 1.414 0\"/></svg>","<svelte:options customElement={{ tag: 'chevron-right-24', shadow: 'none' }} />\n<script>\n  export let id = undefined;\n  export let style = undefined;\n  export let className = undefined;\n  export let fill = undefined;\n  export let size = \"1.5rem\";\n</script>\n\n<svg aria-hidden=\"true\" id={id}  style={style} class={className} fill={fill} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\"><path fill-rule=\"evenodd\" d=\"M9.793 6.293a1 1 0 0 1 1.414 0l5 5a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414-1.414L14.086 12 9.793 7.707a1 1 0 0 1 0-1.414\"/></svg>","<svelte:options\n  customElement={{\n    tag: 'm-pagination',\n  }}\n/>\n\n<script lang=\"ts\">\n  import ChevronLeft24 from '@mozaic-ds/icons-svelte/svelte/ChevronLeft24/ChevronLeft24.svelte';\n  import ChevronRight24 from '@mozaic-ds/icons-svelte/svelte/ChevronRight24/ChevronRight24.svelte';\n  import Button from '../button/Button.svelte';\n  import IconButton from '../button/IconButton.svelte';\n\n  interface Props {\n    id: string;\n    value?: number;\n    total?: number;\n    compact?: boolean;\n    selectLabel?: string;\n    pagelabel?: string;\n    prefixlabel?: string;\n    [key: string]: any;\n  }\n\n  let {\n    id,\n    value = $bindable(1),\n    total = 10,\n    compact = false,\n    selectLabel = 'Page selector',\n    pagelabel = 'of',\n    prefixlabel = 'Page',\n    ...events\n  }: Props = $props();\n\n  let selected = $state(Number(value));\n\n  const isFirstPage = $state(() => selected <= 1);\n  const isLastPage = $state(() => selected >= total);\n\n  const pages = $state(() => Array.from({ length: total }, (_, i) => i + 1));\n\n  function previous() {\n    if (!isFirstPage()) {\n      selected = Number(selected) - 1;\n    }\n  }\n\n  function next() {\n    if (!isLastPage()) {\n      selected = Number(selected) + 1;\n    }\n  }\n\n  function onSelectChange(event: Event) {\n    const selected = Number((event.target as HTMLSelectElement).value);\n    value = selected;\n  }\n</script>\n\n<nav class=\"mc-pagination\" aria-label=\"pagination\">\n  {#if !compact}\n    <Button\n      iconOnly\n      aria-label=\"Previous page\"\n      disabled={isFirstPage()}\n      onclick={previous}\n    >\n      <ChevronLeft24 />\n    </Button>\n  {:else}\n    <IconButton\n      outlined\n      aria-label=\"Previous page\"\n      disabled={isFirstPage()}\n      onclick={previous}\n    >\n      <ChevronLeft24 slot=\"icon\" />\n    </IconButton>\n  {/if}\n\n  {#if !compact}\n    <div class=\"mc-pagination__field\">\n      <select\n        {id}\n        class=\"mc-select mc-pagination__select\"\n        aria-label={selectLabel}\n        disabled={total <= 1}\n        bind:value={selected}\n        onchange={onSelectChange}\n      >\n        {#each pages() as page}\n          <option\n            value={Number(page)}\n            selected={Number(page) == Number(selected)}\n          >\n            {prefixlabel}\n            {page}\n            {pagelabel}\n            {total}\n          </option>\n        {/each}\n      </select>\n    </div>\n  {:else}\n    <span class=\"mc-pagination__label\" aria-current=\"page\">\n      {prefixlabel}\n      {value}\n      {pagelabel}\n      {total}\n    </span>\n  {/if}\n\n  {#if !compact}\n    <Button\n      iconOnly\n      aria-label=\"Next page\"\n      disabled={isLastPage()}\n      onclick={next}\n    >\n      <ChevronRight24 />\n    </Button>\n  {:else}\n    <IconButton\n      outlined\n      aria-label=\"Next page\"\n      disabled={isLastPage()}\n      onclick={next}\n    >\n      <ChevronRight24 slot=\"icon\" />\n    </IconButton>\n  {/if}\n</nav>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/pagination';\n  @use '@mozaic-ds/styles/components/select';\n</style>\n"],"names":["id","style","className","fill","size","onSelectChange","event","value","selected","$.prop","$$props","total","compact","selectLabel","pagelabel","prefixlabel","$.state","$.proxy","isFirstPage","$.get","isLastPage","pages","_","i","previous","$.set","next","$$render","alternate","consequent","$.each","select","page","$.bind_select_value","$$value","alternate_1","consequent_1","alternate_2","consequent_2"],"mappings":"mxBAAA,SAEa,IAAAA,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,oCAGAJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,wPAF3E,+YCPA,SAEa,IAAAH,cAAK,MAAS,EACdC,iBAAQ,MAAS,EACjBC,qBAAY,MAAS,EACrBC,gBAAO,MAAS,EAChBC,gBAAO,QAAQ,oCAGAJ,GAAE,MAAUC,GAAK,UAASC,EAAS,CAAA,CAAA,aAAQC,GAAI,wPAF3E,gHC8CWE,GAAeC,EAAcC,EAAA,CAC9B,MAAAC,EAAW,OAAQF,EAAM,OAA6B,KAAK,EACjEC,EAAQC,CAAQ,CAClB;;;;;;2DAxDF,sBAwBIR,EAAES,EAAAC,EAAA,KAAA,CAAA,EACFH,iBAAkB,CAAC,EACnBI,gBAAQ,EAAE,EACVC,kBAAU,EAAK,EACfC,sBAAc,eAAe,EAC7BC,oBAAY,IAAI,EAChBC,sBAAc,MAAM,EAIlBP,EAAQQ,EAAAC,GAAU,OAAOV,EAAK,CAAA,CAAA,CAAA,QAE5BW,EAAWF,EAAA,IAAAG,EAAgBX,CAAQ,GAAI,CAAC,EACxCY,EAAUJ,EAAA,IAAAG,EAAgBX,CAAQ,GAAIG,GAAK,EAE3CU,EAAqBL,EAAA,IAAA,MAAM,MAAO,OAAQL,EAAK,CAAA,EAAA,CAAKW,EAAGC,IAAMA,EAAI,CAAC,CAAA,EAE/D,SAAAC,GAAW,CACbL,EAAAD,CAAW,KACdO,EAAAjB,EAAW,OAAOW,EAAAX,CAAQ,GAAI,CAAC,CAEnC,CAES,SAAAkB,GAAO,CACTP,EAAAC,CAAU,KACbK,EAAAjB,EAAW,OAAOW,EAAAX,CAAQ,GAAI,CAAC,CAEnC,6CAacU,CAAW,EAAA,CAAA,oFACZM,0EAQCN,CAAW,EAAA,CAAA,oFACZM,yDAdPZ,EAAO,EAAAe,EAAAC,EAAA,EAAA,EAAAD,EAAAE,CAAA,2DA4BGxB,GAAcE,CAAA,EAEjBuB,GAAAC,EAAA,GAAA,IAAAZ,EAAAE,CAAK,UAAMW,IAAI,8DAKjBjB,EAAW,GAAA,EAAA;AAAA,gBACXiB,CAAI,GAAA,EAAA;AAAA,cACJlB,EAAS,GAAA,EAAA;AAAA,cACTH,EAAK,GAAA,EAAA,EAAA,2CALI,IAAA,OAAOQ,EAAAa,CAAI,CAAK,GAAA,SAAOxB,CAAQ,CAAA,EADlC,IAAA,SAAOwB,CAAI,CAAA,6DAPVnB,GAAW,EACbkB,EAAA,SAAApB,EAAK,GAAI,IACPsB,GAAAF,EAAA,IAAAZ,EAAAX,CAAQ,OAARA,EAAQ0B,CAAA,CAAA,qDAkBrBnB,EAAW,GAAA,EAAA;AAAA,QACXR,EAAK,GAAA,EAAA;AAAA,QACLO,EAAS,GAAA,EAAA;AAAA,QACTH,EAAK,GAAA,EAAA,EAAA,CAAA,kBA5BJC,EAAO,EAAAe,EAAAQ,GAAA,EAAA,EAAAR,EAAAS,EAAA,6CAoCChB,CAAU,EAAA,CAAA,gFACXM,2EAQCN,CAAU,EAAA,CAAA,gFACXM,0DAdPd,EAAO,EAAAe,EAAAU,GAAA,EAAA,EAAAV,EAAAW,EAAA,uGAvFO,EAAC,+CACX,GAAE,mDACA,GAAK,2DACD,gBAAe,uDACjB,KAAI,2DACF,OAAM,YA2BxB","x_google_ignoreList":[0,1]}