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

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

@@ -1 +0,0 @@
-{"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oYAUQ,IAAAA,oBAAY,EAAK,EAAEC,EAAIC,EAAAC,EAAA,OAAA,CAAA,EAAEC,EAAWF,EAAAC,EAAA,cAAA,CAAA,kLAGKH,EAAS,EAAA,wBACNI,GAAW,0DAJ3C,GAAK"}

package/dist/components/overlayloader/OverlayLoader.svelte

@@ -1,23 +0,0 @@
-<svelte:options customElement="m-overlay-loader" />
-
-<script lang="ts">
-  import Loader from '../loader/Loader.svelte';
-  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}>
-  <div role="dialog" tabindex="-1" aria-labelledby={dialoglabel}>
-    <Loader size="l" theme="inverse" {text} />
-  </div>
-</div>
-
-<style lang="scss">
-  @use '@mozaic-ds/styles/components/loader';
-  @use '@mozaic-ds/styles/components/overlay';
-</style>

package/dist/components/quantityselector/QuantitySelector.d.ts

@@ -1,4 +0,0 @@
-export {}
-import _default from './QuantitySelector.svelte'
-export default _default
-export {}

package/dist/components/quantityselector/QuantitySelector.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"QuantitySelector.js","sources":["../../../src/components/quantityselector/QuantitySelector.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-qty-selector',\n    shadow: 'none',\n  }}\n/>\n\n<script lang=\"ts\">\n  interface Props {\n    id?: string | undefined;\n    quantity?: number;\n    min?: number;\n    max?: number;\n    small?: boolean;\n    decrementlabel?: string;\n    inputarialabel?: string;\n    incrementlabel?: string;\n    disabled?: boolean;\n    name?: string;\n    step?: number;\n    [key: string]: any;\n  }\n\n  let {\n    id = undefined,\n    quantity = $bindable(1),\n    min = 1,\n    max = 100,\n    small = false,\n    decrementlabel = 'Decrement',\n    inputarialabel = 'Quantity Selector',\n    incrementlabel = 'Increment',\n    disabled = false,\n    name = 'quantity-selector-input',\n    step = 1,\n    increment,\n    decrement,\n    inputqty,\n  }: Props = $props();\n\n  function handleValue(): void {\n    if (quantity > max) {\n      quantity = max;\n    }\n    if (quantity < min) {\n      quantity = min;\n    }\n    inputqty(quantity);\n  }\n\n  function handleDecrement(): void {\n    if (quantity - Number(step) > min) {\n      quantity = quantity - Number(step);\n    }\n    decrement(quantity);\n  }\n\n  function handleIncrement(): void {\n    if (quantity + Number(step) < max) {\n      quantity = quantity + Number(step);\n    }\n    increment(quantity);\n  }\n</script>\n\n<div class=\"mc-quantity-selector\" class:mc-quantity-selector--s={small}>\n  <input\n    type=\"number\"\n    {id}\n    {name}\n    bind:value={quantity}\n    oninput={handleValue}\n    class=\"mc-quantity-selector__control\"\n    aria-label={inputarialabel}\n    aria-valuemin={min}\n    aria-valuemax={max}\n    aria-valuenow={quantity}\n    spellcheck=\"false\"\n    {disabled}\n  />\n  <button\n    type=\"button\"\n    aria-controls={id}\n    class=\"mc-quantity-selector__button mc-quantity-selector__button--increase\"\n    tabindex=\"-1\"\n    onclick={handleIncrement}\n    disabled={quantity === max || disabled}\n  >\n    <span class=\"mc-quantity-selector__icon\">\n      <ui-more-24></ui-more-24>\n    </span>\n    <span class=\"mc-quantity-selector__label\">{decrementlabel}</span>\n  </button>\n  <button\n    type=\"button\"\n    aria-controls={id}\n    class=\"mc-quantity-selector__button mc-quantity-selector__button--decrease\"\n    tabindex=\"-1\"\n    onclick={handleDecrement}\n    disabled={quantity === min || disabled}\n  >\n    <span class=\"mc-quantity-selector__icon\">\n      <ui-less-24></ui-less-24>\n    </span>\n    <span class=\"mc-quantity-selector__label\">{incrementlabel}</span>\n  </button>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/quantity-selector';\n</style>\n"],"names":["handleValue","_","quantity","max","min","inputqty","handleDecrement","__1","step","decrement","handleIncrement","__2","increment","id","small","decrementlabel","inputarialabel","incrementlabel","disabled","name","$.prop","$$props"],"mappings":"gOAwCW,SAAAA,EAAoBC,EAAAC,EAAAC,EAAAC,EAAAC,EAAA,CACvBH,EAAQ,EAAGC,KACbD,EAAWC,EAAG,CAAA,EAEZD,EAAQ,EAAGE,KACbF,EAAWE,EAAG,CAAA,EAEhBC,EAAQ,EAACH,GAAQ,CACnB,CAES,SAAAI,EAAwBC,EAAAL,EAAAM,EAAAJ,EAAAK,EAAA,CAC3BP,IAAW,OAAOM,EAAI,CAAA,EAAIJ,EAAG,GAC/BF,EAAWA,EAAW,EAAA,OAAOM,EAAI,CAAA,CAAA,EAEnCC,EAAS,EAACP,GAAQ,CACpB,CAES,SAAAQ,EAAwBC,EAAAT,EAAAM,EAAAL,EAAAS,EAAA,CAC3BV,IAAW,OAAOM,EAAI,CAAA,EAAIL,EAAG,GAC/BD,EAAWA,EAAW,EAAA,OAAOM,EAAI,CAAA,CAAA,EAEnCI,EAAS,EAACV,GAAQ,CACpB;;;;;u+FAtCE,IAAAW,aAAK,MAAS,EACdX,oBAAqB,CAAC,EACtBE,cAAM,CAAC,EACPD,cAAM,GAAG,EACTW,gBAAQ,EAAK,EACbC,yBAAiB,WAAW,EAC5BC,yBAAiB,mBAAmB,EACpCC,yBAAiB,WAAW,EAC5BC,mBAAW,EAAK,EAChBC,eAAO,yBAAyB,EAChCX,eAAO,CAAC,EACRI,EAASQ,EAAAC,EAAA,YAAA,CAAA,EACTZ,EAASW,EAAAC,EAAA,YAAA,CAAA,EACThB,EAAQe,EAAAC,EAAA,WAAA,CAAA,6CAkCCrB,EAAWE,EAAAC,EAAAC,EAAAC,CAAA,0BAcXK,kHAaAJ,4LAjCoDQ,EAAK,EAAA,iDAQtDE,GAAc,sBACXZ,GAAG,sBACHD,GAAG,sBACHD,GAAQ,qCAMRW,GAAE,aAIPX,EAAQ,IAAKC,EAAG,GAAIe,EAAQ,MAKKH,GAAc,sBAI1CF,GAAE,aAIPX,EAAQ,IAAKE,EAAG,GAAIc,EAAQ,MAKKD,GAAc,QAlC7Cf,CAAQ,0CA9Cf,OAAS,qDACO,EAAC,2CAChB,EAAC,2CACD,IAAG,+CACD,GAAK,iEACI,YAAW,iEACX,oBAAmB,iEACnB,YAAW,qDACjB,GAAK,6CACT,0BAAyB,6CACzB,EAAC"}

package/dist/components/quantityselector/QuantitySelector.svelte

@@ -1,111 +0,0 @@
-<svelte:options
-  customElement={{
-    tag: 'm-qty-selector',
-    shadow: 'none',
-  }}
-/>
-
-<script lang="ts">
-  interface Props {
-    id?: string | undefined;
-    quantity?: number;
-    min?: number;
-    max?: number;
-    small?: boolean;
-    decrementlabel?: string;
-    inputarialabel?: string;
-    incrementlabel?: string;
-    disabled?: boolean;
-    name?: string;
-    step?: number;
-    [key: string]: any;
-  }
-
-  let {
-    id = undefined,
-    quantity = $bindable(1),
-    min = 1,
-    max = 100,
-    small = false,
-    decrementlabel = 'Decrement',
-    inputarialabel = 'Quantity Selector',
-    incrementlabel = 'Increment',
-    disabled = false,
-    name = 'quantity-selector-input',
-    step = 1,
-    increment,
-    decrement,
-    inputqty,
-  }: Props = $props();
-
-  function handleValue(): void {
-    if (quantity > max) {
-      quantity = max;
-    }
-    if (quantity < min) {
-      quantity = min;
-    }
-    inputqty(quantity);
-  }
-
-  function handleDecrement(): void {
-    if (quantity - Number(step) > min) {
-      quantity = quantity - Number(step);
-    }
-    decrement(quantity);
-  }
-
-  function handleIncrement(): void {
-    if (quantity + Number(step) < max) {
-      quantity = quantity + Number(step);
-    }
-    increment(quantity);
-  }
-</script>
-
-<div class="mc-quantity-selector" class:mc-quantity-selector--s={small}>
-  <input
-    type="number"
-    {id}
-    {name}
-    bind:value={quantity}
-    oninput={handleValue}
-    class="mc-quantity-selector__control"
-    aria-label={inputarialabel}
-    aria-valuemin={min}
-    aria-valuemax={max}
-    aria-valuenow={quantity}
-    spellcheck="false"
-    {disabled}
-  />
-  <button
-    type="button"
-    aria-controls={id}
-    class="mc-quantity-selector__button mc-quantity-selector__button--increase"
-    tabindex="-1"
-    onclick={handleIncrement}
-    disabled={quantity === max || disabled}
-  >
-    <span class="mc-quantity-selector__icon">
-      <ui-more-24></ui-more-24>
-    </span>
-    <span class="mc-quantity-selector__label">{decrementlabel}</span>
-  </button>
-  <button
-    type="button"
-    aria-controls={id}
-    class="mc-quantity-selector__button mc-quantity-selector__button--decrease"
-    tabindex="-1"
-    onclick={handleDecrement}
-    disabled={quantity === min || disabled}
-  >
-    <span class="mc-quantity-selector__icon">
-      <ui-less-24></ui-less-24>
-    </span>
-    <span class="mc-quantity-selector__label">{incrementlabel}</span>
-  </button>
-</div>
-
-<style lang="scss">
-  @use '@mozaic-ds/styles/components/quantity-selector';
-</style>

package/dist/components/radio/Radio.d.ts

@@ -1,4 +0,0 @@
-export {}
-import _default from './Radio.svelte'
-export default _default
-export {}

package/dist/components/radio/Radio.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Radio.js","sources":["../../../src/components/radio/Radio.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-radio' }} />\n\n<script lang=\"ts\">\n  let {\n    id = '',\n    name = '',\n    checked = false,\n    disabled = false,\n    isinvalid = false,\n    label = '',\n  } = $props();\n\n  function getClasses(isInvalid: boolean): string {\n    const classes = ['mc-radio__input'];\n    if (isInvalid) {\n      classes.push('is-invalid');\n    }\n    return classes.join(' ');\n  }\n</script>\n\n<!-- svelte-ignore a11y_click_events_have_key_events -->\n<div class=\"mc-radio\">\n  <input\n    {id}\n    type=\"radio\"\n    class={getClasses(isinvalid)}\n    {name}\n    {checked}\n    {disabled}\n  />\n  <label for={id} class=\"mc-radio__label\">{label}</label>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/radio';\n</style>\n"],"names":["id","name","checked","disabled","isinvalid","label","getClasses","isInvalid","classes"],"mappings":";;yqEAII,IAAAA,aAAK,EAAE,EACPC,eAAO,EAAE,EACTC,kBAAU,EAAK,EACfC,mBAAW,EAAK,EAChBC,oBAAY,EAAK,EACjBC,gBAAQ,EAAE,WAGHC,EAAWC,EAA4B,CACxC,MAAAC,GAAW,iBAAiB,EAC9B,OAAAD,GACFC,EAAQ,KAAK,YAAY,EAEpBA,EAAQ,KAAK,GAAG,CACzB,kKAaYR,GAAE,MAA2BK,GAAK,GALrC,CAAA,IAAAC,EAAWF,GAAS,CAAA,2CAtBtB,GAAE,6CACA,GAAE,mDACC,GAAK,qDACJ,GAAK,uDACJ,GAAK,+CACT,GAAE"}

package/dist/components/radio/Radio.svelte

@@ -1,37 +0,0 @@
-<svelte:options customElement={{ tag: 'm-radio' }} />
-
-<script lang="ts">
-  let {
-    id = '',
-    name = '',
-    checked = false,
-    disabled = false,
-    isinvalid = false,
-    label = '',
-  } = $props();
-
-  function getClasses(isInvalid: boolean): string {
-    const classes = ['mc-radio__input'];
-    if (isInvalid) {
-      classes.push('is-invalid');
-    }
-    return classes.join(' ');
-  }
-</script>
-
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<div class="mc-radio">
-  <input
-    {id}
-    type="radio"
-    class={getClasses(isinvalid)}
-    {name}
-    {checked}
-    {disabled}
-  />
-  <label for={id} class="mc-radio__label">{label}</label>
-</div>
-
-<style lang="scss">
-  @use '@mozaic-ds/styles/components/radio';
-</style>

package/dist/components/radiogroup/RadioGroup.d.ts

@@ -1,4 +0,0 @@
-export {}
-import _default from './RadioGroup.svelte'
-export default _default
-export {}

package/dist/components/radiogroup/RadioGroup.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"RadioGroup.js","sources":["../../../src/components/radiogroup/RadioGroup.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-radio-group',\n    props: {\n      options: { type: 'Array', attribute: 'options' },\n    },\n    shadow: 'none',\n  }}\n/>\n\n<script lang=\"ts\">\n  import type { RadioGroupOption } from './radioGroup.types';\n\n  interface Props {\n    id: string;\n    selectedvalue: string;\n    options: Array<RadioGroupOption>;\n    legend: string;\n    inline: boolean;\n    isinvalid?: boolean;\n  }\n\n  let {\n    id,\n    selectedvalue,\n    options,\n    legend,\n    inline,\n    isinvalid = false,\n  }: Props = $props();\n\n  let selectedValue: string | undefined = $state(selectedvalue);\n\n  function onChange(value: string) {\n    selectedValue = value;\n    // dispatch('change', selectedValue);\n  }\n</script>\n\n<div {id} class=\"radio-group-container\">\n  <fieldset class=\"mc-field mc-field--group\">\n    {#if legend && legend.length}\n      <legend class=\"mc-field__legend\">\n        {legend}\n      </legend>\n    {/if}\n\n    <div class=\"mc-field__content {inline ? 'mc-field__content--inline' : ''}\">\n      {#each options as opt (opt.id)}\n        <div class=\"mc-radio mc-field__item\">\n          <input\n            type=\"radio\"\n            class=\"mc-radio__input\"\n            class:is-invalid={isinvalid}\n            id={opt.id}\n            name={opt.name}\n            bind:group={selectedValue}\n            value={opt.value}\n            disabled={opt.disabled}\n            onchange={() => onChange(opt.value)}\n          />\n          <label for={opt.id} class=\"mc-radio__label\">{opt.label}</label>\n        </div>\n      {/each}\n    </div>\n  </fieldset>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/radio';\n  @use '@mozaic-ds/styles/components/field';\n</style>\n"],"names":["onChange","$.get","opt","id","$.prop","$$props","selectedvalue","options","legend","inline","isinvalid","selectedValue","value","$.set","$$render","consequent","$.each","div_1","$.set_attribute","input","input_value","label","$.set_text","text_1","$$value"],"mappings":"8YA2D4BA,EAAQC,EAACC,CAAG,EAAC,KAAK;;;;;;0FApC1CC,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,EAAaF,EAAAC,EAAA,gBAAA,CAAA,EACbE,EAAOH,EAAAC,EAAA,UAAA,CAAA,EACPG,EAAMJ,EAAAC,EAAA,SAAA,CAAA,EACNI,EAAML,EAAAC,EAAA,SAAA,CAAA,EACNK,oBAAY,EAAK,EAGfC,MAA2CL,EAAa,CAAA,CAAA,WAEnDN,EAASY,EAAe,CAC/BC,EAAAF,IAAgBC,CAAK,CAAA,CAEvB,uEAOOJ,EAAM,CAAA,CAAA,kBAFNA,EAAM,GAAIA,EAAM,EAAC,QAAMM,EAAAC,CAAA,iBAOnBC,OAAAA,EAAAC,EAAA,GAAAV,EAAWL,GAAKA,EAAI,MAATA,IAAG,2JAKGQ,EAAS,EAAA,EACvBQ,EAAAC,EAAA,KAAAlB,EAAAC,CAAG,EAAC,EAAE,EACJgB,EAAAC,EAAA,OAAAlB,EAAAC,CAAG,EAAC,IAAI,EAEPkB,KAAAA,EAAAnB,EAAAC,CAAG,EAAC,SAAJiB,EAAA,OAAAA,EAAA,QAAAlB,EAAAC,CAAG,EAAC,QAAJ,KAAA,GAAAD,EAAAC,CAAG,EAAC,OACDiB,EAAA,SAAAlB,EAAAC,CAAG,EAAC,SAGJgB,EAAAG,EAAA,MAAApB,EAAAC,CAAG,EAAC,EAAE,EAA2BoB,EAAAC,EAAAtB,EAAAC,CAAG,EAAC,KAAK,kBAJ7CD,EAAAC,CAAG,EAAC,QADCS,CAAa,QAAbA,EAAaa,CAAA,4EATFf,IAAS,4BAA8B,KAAE,EAAA,GAAA,eAAA,uTAnB5D,GAAK"}

package/dist/components/radiogroup/RadioGroup.svelte

@@ -1,72 +0,0 @@
-<svelte:options
-  customElement={{
-    tag: 'm-radio-group',
-    props: {
-      options: { type: 'Array', attribute: 'options' },
-    },
-    shadow: 'none',
-  }}
-/>
-
-<script lang="ts">
-  import type { RadioGroupOption } from './radioGroup.types';
-
-  interface Props {
-    id: string;
-    selectedvalue: string;
-    options: Array<RadioGroupOption>;
-    legend: string;
-    inline: boolean;
-    isinvalid?: boolean;
-  }
-
-  let {
-    id,
-    selectedvalue,
-    options,
-    legend,
-    inline,
-    isinvalid = false,
-  }: Props = $props();
-
-  let selectedValue: string | undefined = $state(selectedvalue);
-
-  function onChange(value: string) {
-    selectedValue = value;
-    // dispatch('change', selectedValue);
-  }
-</script>
-
-<div {id} class="radio-group-container">
-  <fieldset class="mc-field mc-field--group">
-    {#if legend && legend.length}
-      <legend class="mc-field__legend">
-        {legend}
-      </legend>
-    {/if}
-
-    <div class="mc-field__content {inline ? 'mc-field__content--inline' : ''}">
-      {#each options as opt (opt.id)}
-        <div class="mc-radio mc-field__item">
-          <input
-            type="radio"
-            class="mc-radio__input"
-            class:is-invalid={isinvalid}
-            id={opt.id}
-            name={opt.name}
-            bind:group={selectedValue}
-            value={opt.value}
-            disabled={opt.disabled}
-            onchange={() => onChange(opt.value)}
-          />
-          <label for={opt.id} class="mc-radio__label">{opt.label}</label>
-        </div>
-      {/each}
-    </div>
-  </fieldset>
-</div>
-
-<style lang="scss">
-  @use '@mozaic-ds/styles/components/radio';
-  @use '@mozaic-ds/styles/components/field';
-</style>

package/dist/components/select/Select.d.ts

@@ -1,4 +0,0 @@
-export {}
-import _default from './Select.svelte'
-export default _default
-export {}

package/dist/components/select/Select.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Select.js","sources":["../../../node_modules/svelte/src/internal/client/dom/elements/bindings/select.js","../../../src/components/select/Select.svelte"],"sourcesContent":["import { effect } from '../../../reactivity/effects.js';\nimport { listen_to_event_and_reset_event } from './shared.js';\nimport { untrack } from '../../../runtime.js';\nimport { is } from '../../../proxy.js';\n\n/**\n * Selects the correct option(s) (depending on whether this is a multiple select)\n * @template V\n * @param {HTMLSelectElement} select\n * @param {V} value\n * @param {boolean} [mounting]\n */\nexport function select_option(select, value, mounting) {\n\tif (select.multiple) {\n\t\treturn select_options(select, value);\n\t}\n\n\tfor (var option of select.options) {\n\t\tvar option_value = get_option_value(option);\n\t\tif (is(option_value, value)) {\n\t\t\toption.selected = true;\n\t\t\treturn;\n\t\t}\n\t}\n\n\tif (!mounting || value !== undefined) {\n\t\tselect.selectedIndex = -1; // no option should be selected\n\t}\n}\n\n/**\n * Selects the correct option(s) if `value` is given,\n * and then sets up a mutation observer to sync the\n * current selection to the dom when it changes. Such\n * changes could for example occur when options are\n * inside an `#each` block.\n * @template V\n * @param {HTMLSelectElement} select\n * @param {() => V} [get_value]\n */\nexport function init_select(select, get_value) {\n\tlet mounting = true;\n\teffect(() => {\n\t\tif (get_value) {\n\t\t\tselect_option(select, untrack(get_value), mounting);\n\t\t}\n\t\tmounting = false;\n\n\t\tvar observer = new MutationObserver(() => {\n\t\t\t// @ts-ignore\n\t\t\tvar value = select.__value;\n\t\t\tselect_option(select, value);\n\t\t\t// Deliberately don't update the potential binding value,\n\t\t\t// the model should be preserved unless explicitly changed\n\t\t});\n\n\t\tobserver.observe(select, {\n\t\t\t// Listen to option element changes\n\t\t\tchildList: true,\n\t\t\tsubtree: true, // because of <optgroup>\n\t\t\t// Listen to option element value attribute changes\n\t\t\t// (doesn't get notified of select value changes,\n\t\t\t// because that property is not reflected as an attribute)\n\t\t\tattributes: true,\n\t\t\tattributeFilter: ['value']\n\t\t});\n\n\t\treturn () => {\n\t\t\tobserver.disconnect();\n\t\t};\n\t});\n}\n\n/**\n * @param {HTMLSelectElement} select\n * @param {() => unknown} get\n * @param {(value: unknown) => void} set\n * @returns {void}\n */\nexport function bind_select_value(select, get, set = get) {\n\tvar mounting = true;\n\n\tlisten_to_event_and_reset_event(select, 'change', (is_reset) => {\n\t\tvar query = is_reset ? '[selected]' : ':checked';\n\t\t/** @type {unknown} */\n\t\tvar value;\n\n\t\tif (select.multiple) {\n\t\t\tvalue = [].map.call(select.querySelectorAll(query), get_option_value);\n\t\t} else {\n\t\t\t/** @type {HTMLOptionElement | null} */\n\t\t\tvar selected_option =\n\t\t\t\tselect.querySelector(query) ??\n\t\t\t\t// will fall back to first non-disabled option if no option is selected\n\t\t\t\tselect.querySelector('option:not([disabled])');\n\t\t\tvalue = selected_option && get_option_value(selected_option);\n\t\t}\n\n\t\tset(value);\n\t});\n\n\t// Needs to be an effect, not a render_effect, so that in case of each loops the logic runs after the each block has updated\n\teffect(() => {\n\t\tvar value = get();\n\t\tselect_option(select, value, mounting);\n\n\t\t// Mounting and value undefined -> take selection from dom\n\t\tif (mounting && value === undefined) {\n\t\t\t/** @type {HTMLOptionElement | null} */\n\t\t\tvar selected_option = select.querySelector(':checked');\n\t\t\tif (selected_option !== null) {\n\t\t\t\tvalue = get_option_value(selected_option);\n\t\t\t\tset(value);\n\t\t\t}\n\t\t}\n\n\t\t// @ts-ignore\n\t\tselect.__value = value;\n\t\tmounting = false;\n\t});\n\n\t// don't pass get_value, we already initialize it in the effect above\n\tinit_select(select);\n}\n\n/**\n * @template V\n * @param {HTMLSelectElement} select\n * @param {V} value\n */\nfunction select_options(select, value) {\n\tfor (var option of select.options) {\n\t\t// @ts-ignore\n\t\toption.selected = ~value.indexOf(get_option_value(option));\n\t}\n}\n\n/** @param {HTMLOptionElement} option */\nfunction get_option_value(option) {\n\t// __value only exists if the <option> has a value attribute\n\tif ('__value' in option) {\n\t\treturn option.__value;\n\t} else {\n\t\treturn option.value;\n\t}\n}\n","<svelte:options\n  customElement={{\n    tag: 'm-select',\n    props: {\n      options: { type: 'Array', attribute: 'options' },\n    },\n    shadow: 'none',\n  }}\n/>\n\n<script lang=\"ts\">\n  import { createEventDispatcher } from 'svelte';\n\n  import type { SelectOption, SelectSize } from './select.types';\n\n  interface Props {\n    id: string;\n    name: string;\n    valueselected?: string;\n    placeholder: string;\n    size?: SelectSize;\n    isinvalid?: boolean;\n    disabled?: boolean;\n    options: Array<SelectOption>;\n    [key: string]: any;\n  }\n\n  let {\n    id,\n    valueselected = '',\n    placeholder,\n    size = 'm',\n    isinvalid = false,\n    disabled = false,\n    options,\n  }: Props = $props();\n  let valueSelected = $state(valueselected);\n\n  function setClasses(isinvalid: boolean, size: SelectSize): string {\n    const classes = ['mc-select'];\n\n    if (isinvalid) {\n      classes.push('is-invalid');\n    }\n    if (size) {\n      classes.push(`mc-select--${size}`);\n    }\n\n    return classes.join(' ');\n  }\n</script>\n\n<!-- svelte-ignore a11y_no_onchange -->\n<select\n  {id}\n  class={setClasses(isinvalid, size)}\n  {disabled}\n  bind:value={valueSelected}\n>\n  {#if placeholder}\n    <option value=\"\" disabled selected>\n      -- {placeholder} --\n    </option>\n  {/if}\n\n  {#each options as opt}\n    <option disabled={opt.disabled} value={opt.value}>\n      {opt.text}\n    </option>\n  {/each}\n</select>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/select';\n</style>\n"],"names":["select_option","select","value","mounting","select_options","option","option_value","get_option_value","is","init_select","get_value","effect","observer","bind_select_value","get","set","listen_to_event_and_reset_event","is_reset","query","selected_option","id","$.prop","$$props","valueselected","placeholder","size","isinvalid","disabled","options","valueSelected","setClasses","classes","$$render","consequent","$.each","node_1","opt","option_1","$.get","option_1_value","$.set_text","text_1","$.bind_select_value","$$value"],"mappings":"2SAYO,SAASA,EAAcC,EAAQC,EAAOC,EAAU,CACtD,GAAIF,EAAO,SACV,OAAOG,EAAeH,EAAQC,CAAK,EAGpC,QAASG,KAAUJ,EAAO,QAAS,CAClC,IAAIK,EAAeC,EAAiBF,CAAM,EAC1C,GAAIG,EAAGF,EAAcJ,CAAK,EAAG,CAC5BG,EAAO,SAAW,GAClB,MACH,CACA,EAEK,CAACF,GAAYD,IAAU,UAC1BD,EAAO,cAAgB,GAEzB,CAYO,SAASQ,EAAYR,EAAQS,EAAW,CAE9CC,EAAO,IAAM,CAMZ,IAAIC,EAAW,IAAI,iBAAiB,IAAM,CAEzC,IAAIV,EAAQD,EAAO,QACnBD,EAAcC,EAAQC,CAAK,CAG9B,CAAG,EAED,OAAAU,EAAS,QAAQX,EAAQ,CAExB,UAAW,GACX,QAAS,GAIT,WAAY,GACZ,gBAAiB,CAAC,OAAO,CAC5B,CAAG,EAEM,IAAM,CACZW,EAAS,WAAY,CACrB,CACH,CAAE,CACF,CAQO,SAASC,EAAkBZ,EAAQa,EAAKC,EAAMD,EAAK,CACzD,IAAIX,EAAW,GAEfa,EAAgCf,EAAQ,SAAWgB,GAAa,CAC/D,IAAIC,EAAQD,EAAW,aAAe,WAElCf,EAEJ,GAAID,EAAO,SACVC,EAAQ,CAAA,EAAG,IAAI,KAAKD,EAAO,iBAAiBiB,CAAK,EAAGX,CAAgB,MAC9D,CAEN,IAAIY,EACHlB,EAAO,cAAciB,CAAK,GAE1BjB,EAAO,cAAc,wBAAwB,EAC9CC,EAAQiB,GAAmBZ,EAAiBY,CAAe,CAC9D,CAEEJ,EAAIb,CAAK,CACX,CAAE,EAGDS,EAAO,IAAM,CACZ,IAAIT,EAAQY,EAAK,EAIjB,GAHAd,EAAcC,EAAQC,EAAOC,CAAQ,EAGjCA,GAAYD,IAAU,OAAW,CAEpC,IAAIiB,EAAkBlB,EAAO,cAAc,UAAU,EACjDkB,IAAoB,OACvBjB,EAAQK,EAAiBY,CAAe,EACxCJ,EAAIb,CAAK,EAEb,CAGED,EAAO,QAAUC,EACjBC,EAAW,EACb,CAAE,EAGDM,EAAYR,CAAM,CACnB,CAOA,SAASG,EAAeH,EAAQC,EAAO,CACtC,QAASG,KAAUJ,EAAO,QAEzBI,EAAO,SAAW,CAACH,EAAM,QAAQK,EAAiBF,CAAM,CAAC,CAE3D,CAGA,SAASE,EAAiBF,EAAQ,CAEjC,MAAI,YAAaA,EACTA,EAAO,QAEPA,EAAO,KAEhB;;;;;gFCrHIe,EAAEC,EAAAC,EAAA,KAAA,CAAA,EACFC,wBAAgB,EAAE,EAClBC,EAAWH,EAAAC,EAAA,cAAA,CAAA,EACXG,eAAO,GAAG,EACVC,oBAAY,EAAK,EACjBC,mBAAW,EAAK,EAChBC,EAAOP,EAAAC,EAAA,UAAA,CAAA,EAELO,MAAuBN,EAAa,CAAA,CAAA,EAE/B,SAAAO,EAAWJ,EAAoBD,EAA0B,CAC1D,MAAAM,GAAW,WAAW,EAExB,OAAAL,GACFK,EAAQ,KAAK,YAAY,EAEvBN,GACFM,EAAQ,KAAI,cAAeN,CAAI,EAAA,EAG1BM,EAAQ,KAAK,GAAG,CACzB,yGAYQP,KAAW,EAAA,KAAA,CAAA,kBAFdA,EAAW,GAAAQ,EAAAC,CAAA,eAMTC,OAAAA,EAAAC,EAAA,GAAAP,OAAWQ,IAAG,sCACDC,EAAA,SAAAC,EAAAF,CAAG,EAAC,SAAiBG,KAAAA,EAAAD,EAAAF,CAAG,EAAC,SAAJC,EAAA,OAAAA,EAAA,QAAAC,EAAAF,CAAG,EAAC,QAAJ,KAAA,GAAAE,EAAAF,CAAG,EAAC,OACxCI,EAAAC,EAAAH,EAAAF,CAAG,EAAC,IAAI,sFAZNN,EAAWJ,EAAS,EAAED,EAAI,CAAA,IAErBiB,EAAAzC,EAAA,IAAAqC,EAAAT,CAAa,OAAbA,EAAac,CAAA,CAAA,yGA5BP,GAAE,wGAEX,IAAG,uDACE,GAAK,qDACN,GAAK","x_google_ignoreList":[0]}

package/dist/components/select/Select.svelte

@@ -1,75 +0,0 @@
-<svelte:options
-  customElement={{
-    tag: 'm-select',
-    props: {
-      options: { type: 'Array', attribute: 'options' },
-    },
-    shadow: 'none',
-  }}
-/>
-
-<script lang="ts">
-  import { createEventDispatcher } from 'svelte';
-
-  import type { SelectOption, SelectSize } from './select.types';
-
-  interface Props {
-    id: string;
-    name: string;
-    valueselected?: string;
-    placeholder: string;
-    size?: SelectSize;
-    isinvalid?: boolean;
-    disabled?: boolean;
-    options: Array<SelectOption>;
-    [key: string]: any;
-  }
-
-  let {
-    id,
-    valueselected = '',
-    placeholder,
-    size = 'm',
-    isinvalid = false,
-    disabled = false,
-    options,
-  }: Props = $props();
-  let valueSelected = $state(valueselected);
-
-  function setClasses(isinvalid: boolean, size: SelectSize): string {
-    const classes = ['mc-select'];
-
-    if (isinvalid) {
-      classes.push('is-invalid');
-    }
-    if (size) {
-      classes.push(`mc-select--${size}`);
-    }
-
-    return classes.join(' ');
-  }
-</script>
-
-<!-- svelte-ignore a11y_no_onchange -->
-<select
-  {id}
-  class={setClasses(isinvalid, size)}
-  {disabled}
-  bind:value={valueSelected}
->
-  {#if placeholder}
-    <option value="" disabled selected>
-      -- {placeholder} --
-    </option>
-  {/if}
-
-  {#each options as opt}
-    <option disabled={opt.disabled} value={opt.value}>
-      {opt.text}
-    </option>
-  {/each}
-</select>
-
-<style lang="scss">
-  @use '@mozaic-ds/styles/components/select';
-</style>

package/dist/components/statusbadge/StatusBadge.d.ts

@@ -1,4 +0,0 @@
-export {}
-import _default from './StatusBadge.svelte'
-export default _default
-export {}

package/dist/components/statusbadge/StatusBadge.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"StatusBadge.js","sources":["../../../src/components/statusbadge/StatusBadge.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-status-badge' }} />\n\n<script lang=\"ts\">\n  import type { BadgeStyle } from './badge.types';\n  import StatusDot from './StatusDot.svelte';\n\n  interface Props {\n    style: BadgeStyle;\n  }\n\n  let { style }: Props = $props();\n</script>\n\n<div class=\"mc-status-badge {style ? `mc-status-badge--${style}` : ''}\">\n  <StatusDot {style} size=\"m\" />\n  <span class=\"mc-status-badge__label\"><slot /></span>\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/status-badge';\n  @use '@mozaic-ds/styles/components/status-dot';\n</style>\n"],"names":["style","$.prop","$$props"],"mappings":";;mrDAUQA,EAAKC,EAAAC,EAAA,QAAA,CAAA,oJAGgBF,EAAK,EAAA,oBAAuBA,EAAK,CAAA,GAAK,KAAE,EAAA,GAAA,gBAAA,CAAA"}

package/dist/components/statusbadge/StatusBadge.svelte

@@ -1,22 +0,0 @@
-<svelte:options customElement={{ tag: 'm-status-badge' }} />
-
-<script lang="ts">
-  import type { BadgeStyle } from './badge.types';
-  import StatusDot from './StatusDot.svelte';
-
-  interface Props {
-    style: BadgeStyle;
-  }
-
-  let { style }: Props = $props();
-</script>
-
-<div class="mc-status-badge {style ? `mc-status-badge--${style}` : ''}">
-  <StatusDot {style} size="m" />
-  <span class="mc-status-badge__label"><slot /></span>
-</div>
-
-<style lang="scss">
-  @use '@mozaic-ds/styles/components/status-badge';
-  @use '@mozaic-ds/styles/components/status-dot';
-</style>

package/dist/components/statusbadge/StatusDot.d.ts

@@ -1,4 +0,0 @@
-export {}
-import _default from './StatusDot.svelte'
-export default _default
-export {}

package/dist/components/statusbadge/StatusDot.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"StatusDot.js","sources":["../../../src/components/statusbadge/StatusDot.svelte"],"sourcesContent":["<svelte:options customElement={{ tag: 'm-status-dot', shadow: 'none' }} />\n\n<script lang=\"ts\">\n  import type { BadgeStyle, BadgeSize } from './badge.types';\n\n  interface Props {\n    style: BadgeStyle;\n    size: BadgeSize;\n  }\n\n  let { style, size }: Props = $props();\n</script>\n\n<div\n  class=\"mc-status-dot {size ? `mc-status-dot--${size}` : ''}  {style\n    ? `mc-status-dot--${style}`\n    : ''}\"\n></div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/status-dot';\n</style>\n"],"names":["style","$.prop","$$props","size"],"mappings":";;8vBAUQA,EAAKC,EAAAC,EAAA,QAAA,CAAA,EAAEC,EAAIF,EAAAC,EAAA,OAAA,CAAA,iDAIKC,EAAI,EAAA,kBAAqBA,EAAI,CAAK,GAAA,aAAMH,EACxC,EAAA,kBAAAA,MAClB,KAAE,EAAA,GAAA,eAAA,CAAA"}

package/dist/components/statusdot/StatusDot.svelte

@@ -1,22 +0,0 @@
-<svelte:options customElement={{ tag: 'm-status-dot', shadow: 'none' }} />
-
-<script lang="ts">
-  import type { BadgeStyle, BadgeSize } from './badge.types';
-
-  interface Props {
-    style: BadgeStyle;
-    size: BadgeSize;
-  }
-
-  let { style, size }: Props = $props();
-</script>
-
-<div
-  class="mc-status-dot {size ? `mc-status-dot--${size}` : ''}  {style
-    ? `mc-status-dot--${style}`
-    : ''}"
-></div>
-
-<style lang="scss">
-  @use '@mozaic-ds/styles/components/status-dot';
-</style>

package/dist/components/textarea/Textarea.d.ts

@@ -1,4 +0,0 @@
-export {}
-import _default from './Textarea.svelte'
-export default _default
-export {}

package/dist/components/textarea/Textarea.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Textarea.js","sources":["../../../src/components/textarea/Textarea.svelte"],"sourcesContent":["<svelte:options customElement=\"m-textarea\" />\n\n<script lang=\"ts\">\n  import { createEventDispatcher } from 'svelte';\n\n  interface Props {\n    name: string;\n    value: string;\n    placeholder: string;\n    rows?: number;\n    isinvalid: boolean;\n    disabled?: boolean;\n    minlength: number;\n    maxlength: number;\n    readonly: boolean;\n  }\n\n  let {\n    name,\n    value = $bindable(),\n    placeholder,\n    rows = 2,\n    isinvalid,\n    disabled = false,\n    minlength,\n    maxlength,\n    readonly,\n  }: Props = $props();\n\n  const dispatch = createEventDispatcher();\n\n  function onInput(e: Event) {\n    let value = (e.target as HTMLInputElement).value;\n    dispatch('on-input', value);\n  }\n</script>\n\n<textarea\n  bind:value\n  class=\"mc-textarea\"\n  class:is-invalid={isinvalid}\n  aria-invalid={isinvalid}\n  {name}\n  id={name}\n  {placeholder}\n  {rows}\n  {disabled}\n  {minlength}\n  {maxlength}\n  {readonly}\n  spellcheck=\"false\"\n  oninput={onInput}\n></textarea>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/field';\n  @use '@mozaic-ds/styles/components/textarea';\n</style>\n"],"names":["name","$.prop","$$props","value","placeholder","rows","isinvalid","disabled","minlength","maxlength","readonly","dispatch","createEventDispatcher","onInput"],"mappings":";;;;;snDAkBIA,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJC,EAAKF,EAAAC,EAAA,QAAA,EAAA,EACLE,EAAWH,EAAAC,EAAA,cAAA,CAAA,EACXG,eAAO,CAAC,EACRC,EAASL,EAAAC,EAAA,YAAA,CAAA,EACTK,mBAAW,EAAK,EAChBC,EAASP,EAAAC,EAAA,YAAA,CAAA,EACTO,EAASR,EAAAC,EAAA,YAAA,CAAA,EACTQ,EAAQT,EAAAC,EAAA,WAAA,CAAA,EAGJ,MAAAS,EAAWC,EAAqB,WAE7BC,EAAQ,EAAU,CACrB,IAAAV,EAAS,EAAE,OAA4B,MAC3CQ,EAAS,WAAYR,CAAK,CAC5B,uCAiBSU,mEAXSP,EAAS,EAAA,qBACbA,GAAS,2BAEnBN,GAAI,6TAtBC,EAAC,4GAEG,GAAK"}

package/dist/components/textarea/Textarea.svelte

@@ -1,58 +0,0 @@
-<svelte:options customElement="m-textarea" />
-
-<script lang="ts">
-  import { createEventDispatcher } from 'svelte';
-
-  interface Props {
-    name: string;
-    value: string;
-    placeholder: string;
-    rows?: number;
-    isinvalid: boolean;
-    disabled?: boolean;
-    minlength: number;
-    maxlength: number;
-    readonly: boolean;
-  }
-
-  let {
-    name,
-    value = $bindable(),
-    placeholder,
-    rows = 2,
-    isinvalid,
-    disabled = false,
-    minlength,
-    maxlength,
-    readonly,
-  }: Props = $props();
-
-  const dispatch = createEventDispatcher();
-
-  function onInput(e: Event) {
-    let value = (e.target as HTMLInputElement).value;
-    dispatch('on-input', value);
-  }
-</script>
-
-<textarea
-  bind:value
-  class="mc-textarea"
-  class:is-invalid={isinvalid}
-  aria-invalid={isinvalid}
-  {name}
-  id={name}
-  {placeholder}
-  {rows}
-  {disabled}
-  {minlength}
-  {maxlength}
-  {readonly}
-  spellcheck="false"
-  oninput={onInput}
-></textarea>
-
-<style lang="scss">
-  @use '@mozaic-ds/styles/components/field';
-  @use '@mozaic-ds/styles/components/textarea';
-</style>

package/dist/components/textinput/Textinput.d.ts

@@ -1,4 +0,0 @@
-export {}
-import _default from './Textinput.svelte'
-export default _default
-export {}

package/dist/components/textinput/Textinput.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Textinput.js","sources":["../../../node_modules/svelte/src/internal/client/dom/elements/actions.js","../../../src/components/textinput/Textinput.svelte"],"sourcesContent":["/** @import { ActionPayload } from '#client' */\nimport { effect, render_effect } from '../../reactivity/effects.js';\nimport { safe_not_equal } from '../../reactivity/equality.js';\nimport { deep_read_state, untrack } from '../../runtime.js';\n\n/**\n * @template P\n * @param {Element} dom\n * @param {(dom: Element, value?: P) => ActionPayload<P>} action\n * @param {() => P} [get_value]\n * @returns {void}\n */\nexport function action(dom, action, get_value) {\n\teffect(() => {\n\t\tvar payload = untrack(() => action(dom, get_value?.()) || {});\n\n\t\tif (get_value && payload?.update) {\n\t\t\tvar inited = false;\n\t\t\t/** @type {P} */\n\t\t\tvar prev = /** @type {any} */ ({}); // initialize with something so it's never equal on first run\n\n\t\t\trender_effect(() => {\n\t\t\t\tvar value = get_value();\n\n\t\t\t\t// Action's update method is coarse-grained, i.e. when anything in the passed value changes, update.\n\t\t\t\t// This works in legacy mode because of mutable_source being updated as a whole, but when using $state\n\t\t\t\t// together with actions and mutation, it wouldn't notice the change without a deep read.\n\t\t\t\tdeep_read_state(value);\n\n\t\t\t\tif (inited && safe_not_equal(prev, value)) {\n\t\t\t\t\tprev = value;\n\t\t\t\t\t/** @type {Function} */ (payload.update)(value);\n\t\t\t\t}\n\t\t\t});\n\n\t\t\tinited = true;\n\t\t}\n\n\t\tif (payload?.destroy) {\n\t\t\treturn () => /** @type {Function} */ (payload.destroy)();\n\t\t}\n\t});\n}\n","<svelte:options customElement=\"m-textinput\" />\n\n<script lang=\"ts\">\n  import type { TextInputSize, TextInputType } from './textinput.types';\n\n  interface Props {\n    name: string;\n    value: string;\n    placeholder: string;\n    inputtype?: TextInputType;\n    isvalid: boolean;\n    isinvalid: boolean;\n    disabled?: boolean;\n    size?: TextInputSize;\n    iconname: string;\n    rightalign: boolean;\n    min: string;\n    max: string;\n    minlength: number;\n    maxlength: number;\n    required?: boolean;\n    clearlabel?: string;\n    isclearable?: boolean;\n  }\n\n  let {\n    name,\n    value,\n    placeholder,\n    inputtype = 'text',\n    isvalid,\n    isinvalid,\n    disabled = false,\n    size = 'm',\n    iconname,\n    rightalign,\n    min,\n    max,\n    minlength,\n    maxlength,\n    required = false,\n    clearlabel = 'Clear content',\n    isclearable = false,\n    ...events\n  }: Props = $props();\n\n  let inputType = $derived(inputtype);\n  let displayClear = $derived(isclearable && value ? true : false);\n\n  function getClasses(\n    isValid: boolean,\n    isInvalid: boolean,\n    size: TextInputSize,\n    iconname: string,\n  ): string {\n    const classes = ['mc-text-input', 'mc-field__input'];\n\n    if (isValid) {\n      classes.push('is-valid');\n    }\n\n    if (isInvalid) {\n      classes.push('is-invalid');\n    }\n\n    if (size === 's') {\n      classes.push('mc-text-input--s');\n    }\n\n    if (iconname) {\n      classes.push('mc-left-icon-input__input');\n    }\n\n    if (rightalign) {\n      classes.push('right-align');\n    }\n\n    return classes.join(' ');\n  }\n\n  const setType = (node: any) => {\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n    node.type = inputType;\n  };\n\n  function resetValue() {\n    console.log(value);\n    value = '';\n  }\n</script>\n\n<div class=\"{getClasses(isvalid, isinvalid, size, iconname)} \">\n  {#if $$slots.icon}\n    <span class=\"mc-text-input__icon\">\n      <slot name=\"icon\" />\n    </span>\n  {/if}\n  <input\n    bind:value\n    use:setType\n    class=\"mc-text-input__control\"\n    aria-invalid={isinvalid}\n    {name}\n    id={name}\n    {placeholder}\n    {disabled}\n    {min}\n    {max}\n    {minlength}\n    {maxlength}\n    spellcheck=\"false\"\n    {required}\n    {...events}\n  />\n  <!-- Control options -->\n  {#if displayClear}\n    <div class=\"mc-controls-options js-control-options\">\n      <!-- Clear Button -->\n      <button\n        type=\"button\"\n        class=\"mc-controls-options__button\"\n        onclick={resetValue}\n      >\n        <svg class=\"mc-controls-options__icon\" aria-hidden=\"true\">\n          <path\n            fill-rule=\"evenodd\"\n            d=\"M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2ZM8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z\"\n          />\n        </svg>\n        <span class=\"mc-controls-options__label\">{clearlabel}</span>\n      </button>\n    </div>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/controls-options';\n  @use '@mozaic-ds/styles/components/text-input';\n\n  .right-align {\n    text-align: right;\n  }\n</style>\n"],"names":["action","dom","get_value","effect","payload","untrack","resetValue","_","value","name","$.prop","$$props","placeholder","inputtype","isvalid","isinvalid","disabled","size","iconname","rightalign","min","max","minlength","maxlength","required","clearlabel","isclearable","events","$.rest_props","inputType","displayClear","getClasses","isValid","isInvalid","classes","setType","node","$.get","$$slots","$$render","consequent","consequent_1"],"mappings":"qVAYO,SAASA,GAAOC,EAAKD,EAAQE,EAAW,CAC9CC,EAAO,IAAM,CACZ,IAAIC,EAAUC,EAAQ,IAAML,EAAOC,EAAKC,GAAA,YAAAA,GAAa,GAAK,EAAE,EAwB5D,GAAIE,GAAA,MAAAA,EAAS,QACZ,MAAO,IAA+BA,EAAQ,QAAU,CAE3D,CAAE,CACF,CC2CW,SAAAE,GAAaC,EAAAC,EAAA,CACpB,QAAQ,IAAIA,GAAK,EACjBA,EAAQ,EAAE,CACZ;;;;;;;;;8IA9DEC,EAAIC,EAAAC,EAAA,OAAA,CAAA,EACJH,EAAKE,EAAAC,EAAA,QAAA,CAAA,EACLC,EAAWF,EAAAC,EAAA,cAAA,CAAA,EACXE,oBAAY,MAAM,EAClBC,EAAOJ,EAAAC,EAAA,UAAA,CAAA,EACPI,EAASL,EAAAC,EAAA,YAAA,CAAA,EACTK,mBAAW,EAAK,EAChBC,eAAO,GAAG,EACVC,EAAQR,EAAAC,EAAA,WAAA,CAAA,EACRQ,EAAUT,EAAAC,EAAA,aAAA,CAAA,EACVS,EAAGV,EAAAC,EAAA,MAAA,CAAA,EACHU,EAAGX,EAAAC,EAAA,MAAA,CAAA,EACHW,EAASZ,EAAAC,EAAA,YAAA,CAAA,EACTY,EAASb,EAAAC,EAAA,YAAA,CAAA,EACTa,mBAAW,EAAK,EAChBC,qBAAa,eAAe,EAC5BC,sBAAc,EAAK,EAChBC,EAAAC,GAAAjB,EAAA,+NAGDkB,IAAqBhB,CAAS,EAC9BiB,QAAwB,GAAAJ,EAAW,GAAIlB,EAAQ,EAAY,WAEtDuB,EACPC,EACAC,EACAhB,EACAC,EACQ,OACFgB,EAAO,CAAI,gBAAiB,iBAAiB,EAE/C,OAAAF,GACFE,EAAQ,KAAK,UAAU,EAGrBD,GACFC,EAAQ,KAAK,YAAY,EAGvBjB,IAAS,KACXiB,EAAQ,KAAK,kBAAkB,EAG7BhB,GACFgB,EAAQ,KAAK,2BAA2B,EAGtCf,EAAU,GACZe,EAAQ,KAAK,aAAa,EAGrBA,EAAQ,KAAK,GAAG,CACzB,OAEMC,EAAWC,GAAc,CAE7BA,EAAK,KAAIC,EAAGR,CAAS,CACtB,wFASIS,EAAQ,MAAIC,EAAAC,CAAA,8HA6BFlC,GAAUE,CAAA,sDAQuBiB,EAAU,CAAA,CAAA,oBAdrDK,CAAY,GAAAS,EAAAE,CAAA,mHAdD1B,EAAS,cAEnBN,EAAI,8GASJkB,uBArBK,IAAAI,EAAWjB,EAAO,EAAEC,EAAS,EAAEE,IAAMC,EAAQ,CAAA,iNA9D1C,OAAM,+JAGP,GAAK,6CACT,IAAG,uWAOC,GAAK,yDACH,gBAAe,2DACd,GAAK","x_google_ignoreList":[0]}