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

package/dist/components/radar/Radar.svelte

@@ -0,0 +1,384 @@
+<svelte:options tag={null} />
+
+<script lang="ts">
+  // @ts-nocheck
+  import { onMount } from 'svelte';
+
+  import {
+    select,
+    scaleLinear,
+    Selection,
+    line,
+    symbolTriangle,
+    symbolCircle,
+    symbol,
+    symbolSquare,
+    symbolDiamond,
+    symbolStar,
+  } from 'd3';
+  import type { RadarData } from './radar.types';
+  import { EventHandler } from '../../utilities/EventHandler';
+  export let data: string = '';
+  $: parsedData = data ? (JSON.parse(data) as RadarData[]) : [];
+  export let backgroundcolor = '#fff';
+  export let delay = 500;
+  export let sides = 5;
+  export let levels = 10;
+  export let valuemax = 20;
+  export let scalemax = 20;
+  export let hasgrades = false;
+  // Interne variable
+  const symbolPath = [
+    symbol(symbolSquare),
+    symbol(symbolCircle),
+    symbol(symbolTriangle),
+    symbol(symbolDiamond),
+    symbol(symbolStar),
+  ];
+
+  const colors = ['#605F9D', '#00919F', '#758992', '#0B96CC'];
+
+  let chart: HTMLDivElement;
+  let svg: Selection<SVGGElement, any, any, any>;
+
+  let hasMounted = false;
+  let eventHandler = new EventHandler(
+    get_current_component(),
+    createEventDispatcher(),
+  );
+
+  let tooltipData = {
+    left: '0px',
+    top: '0px',
+    text: [],
+    title: '',
+    show: false,
+  };
+
+  let size = Math.min(window.innerWidth, window.innerHeight, 400);
+  let offset = Math.PI;
+  let polyangle = (Math.PI * 2) / sides;
+  let r = 0.8 * size;
+  let radius = r / 2;
+  let center = {
+    x: size / 2,
+    y: size / 2,
+  };
+
+  $: dataset = data ? (JSON.parse(data) as RadarData[]) : ([] as RadarData[]);
+  $: scale = scaleLinear().domain([0, scalemax]).range([0, radius]);
+  // Interne methods
+  const getPoint = (length: number, angle: number) => {
+    const point = {
+      x: center.x + length * Math.sin(offset - angle),
+      y: center.y + length * Math.cos(offset - angle),
+    };
+    return point;
+  };
+
+  const graduations = (levels: number): Array<number | string> => {
+    const grades = [];
+    const step = valuemax / levels;
+    for (let i = 0; i <= levels; i++) {
+      const num = step * i;
+      if (Number.isInteger(step)) {
+        grades.push(Number(num));
+      } else {
+        grades.push(num.toFixed(2));
+      }
+    }
+    return grades;
+  };
+
+  const getPath = (points: Array<any>, parent: any) => {
+    const lineGenerator = line()
+      .x((d) => d.x)
+      .y((d) => d.y);
+
+    parent.append('path').attr('d', lineGenerator(points));
+  };
+
+  const getAxis = (ticks: Array<number | string>, levels: number) => {
+    const radarLines = svg.append('g').attr('class', 'radar-lines');
+    const point = getPoint(radius, 0);
+    getPath([center, point], radarLines);
+
+    const gradeLabel = svg.append('g').attr('class', 'ticks');
+
+    ticks.forEach((grade, i) => {
+      const r = (i / levels) * radius;
+      const p = getPoint(r, 0);
+      const points = [
+        p,
+        {
+          ...p,
+          x: p.x - 10,
+        },
+      ];
+      getPath(points, radarLines);
+      if (hasgrades) {
+        getText(grade, p, true, gradeLabel);
+      }
+    });
+  };
+
+  const getLevels = (levels: number, sides: number) => {
+    for (let level = 1; level <= levels; level++) {
+      const hyp = (level / levels) * radius;
+
+      const points = [];
+      for (let vertex = 0; vertex < sides; vertex++) {
+        const angle = vertex * polyangle;
+
+        points.push(getPoint(hyp, angle));
+      }
+      const svgLevel = svg
+        .append('g')
+        .style('fill', 'none')
+        .attr('stroke', '#CCCCCC');
+      getPath([...points, points[0]], svgLevel);
+    }
+  };
+
+  const getLines = (sides: number) => {
+    for (let vertex = 1, i = 0; vertex <= sides; vertex++, i++) {
+      const svgLine = svg.append('g').attr('stroke', '#ccc');
+      const angle = vertex * polyangle;
+      const formatdata = () => {
+        const tooltipData = dataset.map((elem: RadarData, dataIndex) => {
+          let elemPrincipal = elem[vertex];
+          if (dataset[0][vertex].name === elemPrincipal.name) {
+            return {
+              name: `Serie ${dataIndex + 1}`,
+              value: elemPrincipal.value,
+            };
+          }
+          return undefined;
+        });
+        return tooltipData;
+      };
+
+      svgLine.on('mouseover', (_e: MouseEvent) => {
+        svgLine.attr('stroke-dasharray', '4');
+        svgLine.attr('stroke-width', '4px');
+        tooltipData = {
+          left: _e.pageX + 10 + 'px',
+          title: dataset[0][i + 1].name,
+          top: _e.pageY - 25 + 'px',
+          text: formatdata(),
+          show: true,
+        };
+      });
+
+      svgLine.on('mouseout', (_e: MouseEvent) => {
+        svgLine.attr('stroke-dasharray', 0);
+        svgLine.attr('stroke-width', '1px');
+        tooltipData = {
+          left: _e.pageX + 10 + 'px',
+          top: _e.pageY - 25 + 'px',
+          show: false,
+          text: [],
+          title: '',
+        };
+      });
+
+      svgLine.on('click', (_e, chartEvent) => {
+        eventHandler.dispatch('serie-clicked', chartEvent);
+      });
+      const point = getPoint(radius, angle);
+      getPath([center, point], svgLine);
+    }
+  };
+
+  const getSymbols = (points, colors, index) => {
+    svg
+      .selectAll()
+      .data(points)
+      .enter()
+      .append('path')
+      .attr('fill', '#FFF')
+      .attr('stroke', colors[index])
+      .attr('stroke-width', '2px')
+      .attr('d', symbolPath[index].size(50))
+      .attr('opacity', 0.4)
+      .attr('transform', (d) => `translate(${d.x},${d.y})`);
+  };
+
+  const getData = (dataset, side, index) => {
+    let points = [];
+    dataset.forEach((d, i) => {
+      const len = scale(d.value);
+      const theta = i * ((2 * Math.PI) / side);
+
+      points.push({
+        ...getPoint(len, theta),
+        value: 'hihihi',
+      });
+    });
+
+    const group = svg
+      .append('g')
+      .attr('stroke', colors[index])
+      .attr('stroke-width', '1.5px')
+      .attr('fill-opacity', '0.2')
+      .attr('fill', colors[index]);
+
+    group.on('mousemove', (_e: MouseEvent) => {
+      tooltipData = {
+        left: _e.pageX + 10 + 'px',
+        title: `Serie-${index}`,
+        top: _e.pageY - 25 + 'px',
+        text: dataset,
+        show: true,
+      };
+      group.attr('fill-opacity', '0.6');
+    });
+
+    group.on('mouseout', (_e: MouseEvent) => {
+      tooltipData = {
+        left: '0px',
+        top: '0px',
+        text: [],
+        title: '',
+        show: false,
+      };
+      group.attr('fill-opacity', '0.2');
+    });
+
+    getPath([...points, points[0]], group);
+    getSymbols(points, colors, index);
+  };
+
+  const getText = (text, point, isAxis, group) => {
+    if (isAxis) {
+      // Add rect background
+      group
+        .append('text')
+        .attr('x', point.x)
+        .attr('y', point.y)
+        .html(text)
+        .style('text-anchor', 'middle')
+        .attr('fill', '#3A3936')
+        .style('font-size', '11px');
+    } else {
+      group
+        .append('text')
+        .attr('x', point.x)
+        .attr('y', point.y)
+        .html(text)
+        .style('text-anchor', 'middle')
+        .attr('fill', '#3A3936')
+        .style('font-size', '12px');
+    }
+  };
+
+  const drawLabels = (dataset, sides: number) => {
+    const groupL = svg.append('g').attr('class', 'labels');
+    for (let vertex = 0; vertex < sides; vertex++) {
+      const angle = vertex * polyangle;
+      const label = dataset[vertex].name;
+      const point = getPoint(0.9 * (size / 2), angle);
+      getText(label, point, false, groupL);
+    }
+  };
+
+  $: if (data.length > 0 && hasMounted) {
+    svg = select(chart)
+      .append('svg')
+      .attr('width', size)
+      .attr('height', size)
+      .append('g');
+
+    renderChart();
+  }
+
+  const renderChart = () => {
+    const ticks = graduations(levels);
+    getLevels(levels, sides);
+    getAxis(ticks, levels);
+    getLines(sides);
+    dataset.forEach((dataValue, index) => {
+      getData(dataValue, sides, index);
+      drawLabels(dataValue, sides);
+    });
+
+    setTimeout(() => {
+      updateChart(parsedData);
+    }, delay * parsedData.length);
+  };
+
+  function updateChart(data: RadarData[]) {
+    getLines(sides);
+    data.forEach((dataValue, index) => {
+      getData(dataValue, sides, index);
+      drawLabels(dataValue, sides);
+    });
+  }
+
+  onMount(() => (hasMounted = true));
+</script>
+
+<div
+  bind:this={chart}
+  class="chart"
+  style="background-color: {backgroundcolor};"
+>
+  {#if tooltipData.show}
+    <div
+      class="chart__tooltip"
+      style="left: {tooltipData.left}; top: {tooltipData.top};"
+    >
+      <span><b>{tooltipData.title}</b></span>
+      <div>
+        {#each tooltipData.text as data}
+          {#if data.customtooltip}
+            <div class="chart__list">
+              <span class="chart__elem">{data.customtooltip}</span>
+            </div>
+          {:else}
+            <div class="chart__list">
+              <span class="chart__legend">{data.name}</span>
+              <span class="chart__elem">{data.value}</span>
+            </div>
+          {/if}
+        {/each}
+      </div>
+    </div>
+  {/if}
+</div>
+
+<style lang="scss">
+  @import '@mozaic-ds/styles/settings-tools/_all-settings';
+  @import '@mozaic-ds/styles/typography/_t.headings';
+
+  .chart {
+    display: flex;
+    flex-wrap: wrap;
+    background-color: $color-grey-000;
+    justify-content: center;
+    align-items: center;
+
+    &__tooltip {
+      position: absolute;
+      width: auto;
+      height: auto;
+      background-color: white;
+      border: 1px solid #000;
+      border-radius: 4px;
+      min-width: 152px;
+      color: grey;
+
+      padding: magic-unit-rem(0.25) magic-unit-rem(0.5);
+    }
+
+    &__list {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+    }
+  }
+
+  .chart circle {
+    cursor: pointer;
+  }
+</style>

package/dist/components/radio/Radio.js

@@ -1,4 +1,4 @@
-import{c as g,a as y,b as q,d as o,f as w,w as x,g as h,t as E,h as j,i as z,j as t,s as C,r as b,k as D}from"../../custom-element.js";import{b as F,r as R,s as S}from"../../attributes.js";import{c as A}from"../../custom-element-forward-events.js";var B=w('<div class="mc-radio svelte-1uytqvh"><input/> <label class="mc-radio__label svelte-1uytqvh"> </label></div>');const G={hash:"svelte-1uytqvh",code:`/**
+import{c as k,a as w,b as x,d as o,f as y,x as E,g as v,s as j,t as z,j as C,l as D,m as a,r as _,k as F}from"../../custom-element.js";import{b as R,r as S,s as q}from"../../attributes.js";import{c as A}from"../../custom-element-forward-events.js";var B=y('<div class="mc-radio svelte-16bf77d"><input/> <label class="mc-radio__label svelte-16bf77d"> </label></div>');const G={hash:"svelte-16bf77d",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-radio.svelte-1uytqvh {align-items:center;display:flex;gap:0.5rem;padding:0.375rem;}.mc-radio__label.svelte-1uytqvh {font-size:1rem;line-height:1.3;color:var(--forms-color-text-default, #000000);cursor:pointer;}.mc-radio__input.svelte-1uytqvh {appearance:none;margin:0;cursor:pointer;flex-shrink:0;transition:box-shadow 200ms ease;background-color:var(--forms-color-background-default, #ffffff);border:0.125rem solid var(--forms-color-border-default, #666666);border-radius:100%;transition:all ease 200ms;height:1.25rem;width:1.25rem;position:relative;}.mc-radio__input.svelte-1uytqvh::before {border-radius:100%;content:"";display:block;height:0.5rem;left:50%;position:absolute;top:50%;transform:translate(-50%, -50%);width:0.5rem;}.mc-radio__input.svelte-1uytqvh:hover {border-color:var(--forms-color-border-hover, #4d4d4d);}.mc-radio__input.svelte-1uytqvh:focus-visible {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-radio__input.svelte-1uytqvh:checked {background-color:var(--forms-color-background-checked, #117f03);}.mc-radio__input.svelte-1uytqvh:checked::before {background-color:var(--forms-color-background-default, #ffffff);}.mc-radio__input.svelte-1uytqvh:checked, .mc-radio__input.svelte-1uytqvh:disabled {border-color:transparent;}.mc-radio__input.svelte-1uytqvh:disabled {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;}.mc-radio__input.svelte-1uytqvh:disabled:checked::before {background-color:var(--forms-color-icon-disabled, #737373);}.mc-radio__input.svelte-1uytqvh:disabled + .mc-radio__label:where(.svelte-1uytqvh) {color:var(--forms-color-text-disabled, #737373);cursor:not-allowed;}.mc-radio__input.svelte-1uytqvh:not(:disabled):checked:hover {background-color:var(--forms-color-background-checked-hover, #006902);}.mc-radio__input.is-invalid.svelte-1uytqvh:not(:checked) {border-color:var(--forms-color-border-invalid, #ea302d);}.mc-radio__input.is-invalid.svelte-1uytqvh:not(:checked):hover {border-color:var(--forms-color-border-invalid-hover, #c61112);}`};function H(m,r){y(r,!0),q(m,G);let a=o(r,"id",7,""),s=o(r,"name",7,""),i=o(r,"checked",7,!1),l=o(r,"disabled",7,!1),d=o(r,"isinvalid",7,!1),c=o(r,"label",7,""),_=x(r,["$$slots","$$events","$$legacy","$$host","id","name","checked","disabled","isinvalid","label"]);function p(e){const f=["mc-radio__input"];return e&&f.push("is-invalid"),f.join(" ")}var n=B(),u=h(n);R(u),F(u,e=>({id:a(),type:"radio",class:e,name:s(),checked:i(),disabled:l(),..._}),[()=>p(d())],"svelte-1uytqvh");var v=C(u,2),k=h(v,!0);return b(v),b(n),E(()=>{S(v,"for",a()),D(k,c())}),j(m,n),z({get id(){return a()},set id(e=""){a(e),t()},get name(){return s()},set name(e=""){s(e),t()},get checked(){return i()},set checked(e=!1){i(e),t()},get disabled(){return l()},set disabled(e=!1){l(e),t()},get isinvalid(){return d()},set isinvalid(e=!1){d(e),t()},get label(){return c()},set label(e=""){c(e),t()}})}customElements.define("m-radio",g(H,{id:{},name:{},checked:{},disabled:{},isinvalid:{},label:{}},[],[],!0,A));
+ */.mc-radio.svelte-16bf77d {align-items:center;display:flex;gap:0.5rem;padding:0.375rem;}.mc-radio__label.svelte-16bf77d {font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);color:var(--forms-color-text-default, #000000);cursor:pointer;}.mc-radio__input.svelte-16bf77d {appearance:none;margin:0;cursor:pointer;flex-shrink:0;transition:box-shadow 200ms ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-m, 0.125rem) solid var(--forms-color-border-default, #666666);border-radius:100%;transition:all ease 200ms;height:1.25rem;width:1.25rem;position:relative;}.mc-radio__input.svelte-16bf77d::before {border-radius:var(--radius-full, 100%);content:"";display:block;height:0.5rem;left:50%;position:absolute;top:50%;transform:translate(-50%, -50%);width:0.5rem;}.mc-radio__input.svelte-16bf77d:hover {border-color:var(--forms-color-border-hover, #4d4d4d);}.mc-radio__input.svelte-16bf77d:focus-visible {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-radio__input.svelte-16bf77d:checked {background-color:var(--forms-color-background-checked, #117f03);}.mc-radio__input.svelte-16bf77d:checked::before {background-color:var(--forms-color-background-default, #ffffff);}.mc-radio__input.svelte-16bf77d:checked, .mc-radio__input.svelte-16bf77d:disabled {border-color:transparent;}.mc-radio__input.svelte-16bf77d:disabled {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;}.mc-radio__input.svelte-16bf77d:disabled:checked::before {background-color:var(--forms-color-icon-disabled, #737373);}.mc-radio__input.svelte-16bf77d:disabled + .mc-radio__label:where(.svelte-16bf77d) {color:var(--forms-color-text-disabled, #737373);cursor:not-allowed;}.mc-radio__input.svelte-16bf77d:not(:disabled):checked:hover {background-color:var(--forms-color-background-checked-hover, #006902);}.mc-radio__input.is-invalid.svelte-16bf77d:not(:checked) {border-color:var(--forms-color-border-invalid, #ea302d);}.mc-radio__input.is-invalid.svelte-16bf77d:not(:checked):hover {border-color:var(--forms-color-border-invalid-hover, #c61112);}`};function H(m,r){w(r,!0),x(m,G);let d=o(r,"id",7,""),t=o(r,"name",7,""),s=o(r,"checked",7,!1),i=o(r,"disabled",7,!1),l=o(r,"isinvalid",7,!1),c=o(r,"label",7,""),h=E(r,["$$slots","$$events","$$legacy","$$host","id","name","checked","disabled","isinvalid","label"]);function p(e){const u=["mc-radio__input"];return e&&u.push("is-invalid"),u.join(" ")}var n=B(),f=v(n);S(f),R(f,e=>({id:d(),type:"radio",class:e,name:t(),checked:s(),disabled:i(),...h}),[()=>p(l())],void 0,"svelte-16bf77d");var b=j(f,2),g=v(b,!0);return _(b),_(n),z(()=>{q(b,"for",d()),F(g,c())}),C(m,n),D({get id(){return d()},set id(e=""){d(e),a()},get name(){return t()},set name(e=""){t(e),a()},get checked(){return s()},set checked(e=!1){s(e),a()},get disabled(){return i()},set disabled(e=!1){i(e),a()},get isinvalid(){return l()},set isinvalid(e=!1){l(e),a()},get label(){return c()},set label(e=""){c(e),a()}})}customElements.define("m-radio",k(H,{id:{},name:{},checked:{},disabled:{},isinvalid:{},label:{}},[],[],!0,A));
 //# sourceMappingURL=Radio.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sources":["../../../src/components/radio/Radio.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-radio',\n    extend: customElementForwardEvents,\n  }}\n/>\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n  let {\n    id = '',\n    name = '',\n    checked = false,\n    disabled = false,\n    isinvalid = false,\n    label = '',\n    ...events\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    {...events}\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","events","$.rest_props","$$props","getClasses","isInvalid","classes","customElementForwardEvents"],"mappings":";;wsEAUI,IAAAA,aAAK,EAAE,EACPC,eAAO,EAAE,EACTC,kBAAU,EAAK,EACfC,mBAAW,EAAK,EAChBC,oBAAY,EAAK,EACjBC,gBAAQ,EAAE,EACPC,EAAAC,EAAAC,EAAA,0GAGIC,EAAWC,EAA4B,CACxC,MAAAC,GAAW,iBAAiB,EAC9B,OAAAD,GACFC,EAAQ,KAAK,YAAY,EAEpBA,EAAQ,KAAK,GAAG,CACzB,iGAYML,IAJG,CAAA,IAAAG,EAAWL,EAAS,CAAA,CAAA,6EAMjBJ,GAAE,MAA2BK,GAAK,4CA7BvC,GAAE,6CACA,GAAE,mDACC,GAAK,qDACJ,GAAK,uDACJ,GAAK,+CACT,GAAE,uHAZFO"}
+{"version":3,"file":"Radio.js","sources":["../../../src/components/radio/Radio.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-radio',\n    extend: customElementForwardEvents,\n  }}\n/>\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n  let {\n    id = '',\n    name = '',\n    checked = false,\n    disabled = false,\n    isinvalid = false,\n    label = '',\n    ...events\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    {...events}\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","events","$.rest_props","$$props","getClasses","isInvalid","classes","customElementForwardEvents"],"mappings":";;ywEAAA,gBAUI,IAAAA,aAAK,EAAE,EACPC,eAAO,EAAE,EACTC,kBAAU,EAAK,EACfC,mBAAW,EAAK,EAChBC,oBAAY,EAAK,EACjBC,gBAAQ,EAAE,EACPC,EAAAC,EAAAC,EAAA,0GAGIC,EAAWC,EAA4B,CACxC,MAAAC,GAAW,iBAAiB,EAC9B,OAAAD,GACFC,EAAQ,KAAK,YAAY,EAEpBA,EAAQ,KAAK,GAAG,CACzB,iGAYML,IAJG,CAAA,IAAAG,EAAWL,EAAS,CAAA,CAAA,oFAMjBJ,GAAE,MAA2BK,GAAK,4CA7BvC,GAAE,6CACA,GAAE,mDACC,GAAK,qDACJ,GAAK,uDACJ,GAAK,+CACT,GAAE,YAWd,2GAvBYO"}

package/dist/components/radio/Radio.svelte

@@ -1,21 +1,21 @@
-<svelte:options
-  customElement={{
-    tag: 'm-radio',
-    extend: customElementForwardEvents,
-  }}
-/>
+<svelte:options tag={null} />
 
 <script lang="ts">
-  import { customElementForwardEvents } from '../../utils';
-  let {
-    id = '',
-    name = '',
-    checked = false,
-    disabled = false,
-    isinvalid = false,
-    label = '',
-    ...events
-  } = $props();
+  import { get_current_component } from 'svelte/internal';
+  import { createEventForwarder } from '../../utilities/EventForward';
+
+  export let id: string;
+  export let name: string;
+  export let checked: boolean;
+  export let disabled = false;
+  export let isinvalid = false;
+  export let label: string;
+
+  const forwardEvents = createEventForwarder(get_current_component());
+
+  $: userClass = $$props.class;
+  $: attributes = { ...$$restProps };
+  $: delete attributes.class;
 
   function getClasses(isInvalid: boolean): string {
     const classes = ['mc-radio__input'];
@@ -26,94 +26,23 @@
   }
 </script>
 
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<div class="mc-radio">
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div class="mc-radio {userClass}" on:click>
   <input
+    use:forwardEvents
     {id}
     type="radio"
     class={getClasses(isinvalid)}
+    aria-invalid={isinvalid}
     {name}
     {checked}
     {disabled}
-    {...events}
+    {...attributes}
   />
   <label for={id} class="mc-radio__label">{label}</label>
 </div>
 
-<style>/**
- * Do not edit directly, this file was auto-generated.
- */
-.mc-radio {
-  align-items: center;
-  display: flex;
-  gap: 0.5rem;
-  padding: 0.375rem;
-}
-.mc-radio__label {
-  font-size: 1rem;
-  line-height: 1.3;
-  color: var(--forms-color-text-default, #000000);
-  cursor: pointer;
-}
-.mc-radio__input {
-  appearance: none;
-  margin: 0;
-  cursor: pointer;
-  flex-shrink: 0;
-  transition: box-shadow 200ms ease;
-  background-color: var(--forms-color-background-default, #ffffff);
-  border: 0.125rem solid var(--forms-color-border-default, #666666);
-  border-radius: 100%;
-  transition: all ease 200ms;
-  height: 1.25rem;
-  width: 1.25rem;
-  position: relative;
-}
-.mc-radio__input::before {
-  border-radius: 100%;
-  content: "";
-  display: block;
-  height: 0.5rem;
-  left: 50%;
-  position: absolute;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  width: 0.5rem;
-}
-.mc-radio__input:hover {
-  border-color: var(--forms-color-border-hover, #4d4d4d);
-}
-.mc-radio__input:focus-visible {
-  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
-  outline: 0.125rem solid transparent;
-  outline-offset: 0.125rem;
-}
-.mc-radio__input:checked {
-  background-color: var(--forms-color-background-checked, #117f03);
-}
-.mc-radio__input:checked::before {
-  background-color: var(--forms-color-background-default, #ffffff);
-}
-.mc-radio__input:checked, .mc-radio__input:disabled {
-  border-color: transparent;
-}
-.mc-radio__input:disabled {
-  background-color: var(--forms-color-background-disabled, #d9d9d9);
-  cursor: not-allowed;
-}
-.mc-radio__input:disabled:checked::before {
-  background-color: var(--forms-color-icon-disabled, #737373);
-}
-.mc-radio__input:disabled + .mc-radio__label {
-  color: var(--forms-color-text-disabled, #737373);
-  cursor: not-allowed;
-}
-.mc-radio__input:not(:disabled):checked:hover {
-  background-color: var(--forms-color-background-checked-hover, #006902);
-}
-.mc-radio__input.is-invalid:not(:checked) {
-  border-color: var(--forms-color-border-invalid, #ea302d);
-}
-.mc-radio__input.is-invalid:not(:checked):hover {
-  border-color: var(--forms-color-border-invalid-hover, #c61112);
-}</style>
+<style lang="scss">
+  @import '@mozaic-ds/styles/settings-tools/_all-settings';
+  @import '@mozaic-ds/styles/components/c.radio';
+</style>

package/dist/components/radiogroup/RadioGroup.js

@@ -1,8 +1,8 @@
-import{q as H,c as I,a as J,b as K,d,S as L,e as M,f as S,t as E,h as z,i as N,j as t,g as s,s as D,r as c,k as F,m as G,l,W as R}from"../../custom-element.js";import{i as O}from"../../if.js";import{e as P}from"../../each.js";import{r as Q,s as m}from"../../attributes.js";import{b as T}from"../../input.js";import{c as U}from"../../custom-element-forward-events.js";var X=S('<legend class="mc-field__legend svelte-ydce3c"> </legend>'),Y=(u,i,f)=>i(l(f).value),Z=S('<div class="mc-radio mc-field__item svelte-ydce3c"><input type="radio"/> <label class="mc-radio__label svelte-ydce3c"> </label></div>'),$=S('<div class="radio-group-container"><fieldset class="mc-field mc-field--group svelte-ydce3c"><!> <div></div></fieldset></div>');const ee={hash:"svelte-ydce3c",code:`/**
+import{u as I,c as J,a as K,b as L,d as i,C as M,e as N,f as C,s as G,g as c,t as z,j as E,l as O,m as l,r as a,i as R,h as t,k as S,$ as V}from"../../custom-element.js";import{i as P}from"../../if.js";import{e as Q}from"../../each.js";import{r as T,s as u}from"../../attributes.js";import{b as U}from"../../input.js";import{c as W}from"../../custom-element-forward-events.js";var X=C('<legend class="mc-field__legend svelte-od5t2d"> </legend>'),Y=(f,d,m)=>d(t(m).value),Z=C('<div class="mc-radio mc-field__item svelte-od5t2d"><input type="radio"/> <label class="mc-radio__label svelte-od5t2d"> </label></div>'),$=C('<div class="radio-group-container"><fieldset class="mc-field mc-field--group svelte-od5t2d"><!> <div></div></fieldset></div>');const ee={hash:"svelte-od5t2d",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-radio.svelte-ydce3c {align-items:center;display:flex;gap:0.5rem;padding:0.375rem;}.mc-radio__label.svelte-ydce3c {font-size:1rem;line-height:1.3;color:var(--forms-color-text-default, #000000);cursor:pointer;}.mc-radio__input.svelte-ydce3c {appearance:none;margin:0;cursor:pointer;flex-shrink:0;transition:box-shadow 200ms ease;background-color:var(--forms-color-background-default, #ffffff);border:0.125rem solid var(--forms-color-border-default, #666666);border-radius:100%;transition:all ease 200ms;height:1.25rem;width:1.25rem;position:relative;}.mc-radio__input.svelte-ydce3c::before {border-radius:100%;content:"";display:block;height:0.5rem;left:50%;position:absolute;top:50%;transform:translate(-50%, -50%);width:0.5rem;}.mc-radio__input.svelte-ydce3c:hover {border-color:var(--forms-color-border-hover, #4d4d4d);}.mc-radio__input.svelte-ydce3c:focus-visible {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-radio__input.svelte-ydce3c:checked {background-color:var(--forms-color-background-checked, #117f03);}.mc-radio__input.svelte-ydce3c:checked::before {background-color:var(--forms-color-background-default, #ffffff);}.mc-radio__input.svelte-ydce3c:checked, .mc-radio__input.svelte-ydce3c:disabled {border-color:transparent;}.mc-radio__input.svelte-ydce3c:disabled {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;}.mc-radio__input.svelte-ydce3c:disabled:checked::before {background-color:var(--forms-color-icon-disabled, #737373);}.mc-radio__input.svelte-ydce3c:disabled + .mc-radio__label:where(.svelte-ydce3c) {color:var(--forms-color-text-disabled, #737373);cursor:not-allowed;}.mc-radio__input.svelte-ydce3c:not(:disabled):checked:hover {background-color:var(--forms-color-background-checked-hover, #006902);}.mc-radio__input.is-invalid.svelte-ydce3c:not(:checked) {border-color:var(--forms-color-border-invalid, #ea302d);}.mc-radio__input.is-invalid.svelte-ydce3c:not(:checked):hover {border-color:var(--forms-color-border-invalid-hover, #c61112);}
+ */.mc-radio.svelte-od5t2d {align-items:center;display:flex;gap:0.5rem;padding:0.375rem;}.mc-radio__label.svelte-od5t2d {font-size:var(--font-size-150, 1rem);line-height:var(--line-height-s, 1.3);color:var(--forms-color-text-default, #000000);cursor:pointer;}.mc-radio__input.svelte-od5t2d {appearance:none;margin:0;cursor:pointer;flex-shrink:0;transition:box-shadow 200ms ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-m, 0.125rem) solid var(--forms-color-border-default, #666666);border-radius:100%;transition:all ease 200ms;height:1.25rem;width:1.25rem;position:relative;}.mc-radio__input.svelte-od5t2d::before {border-radius:var(--radius-full, 100%);content:"";display:block;height:0.5rem;left:50%;position:absolute;top:50%;transform:translate(-50%, -50%);width:0.5rem;}.mc-radio__input.svelte-od5t2d:hover {border-color:var(--forms-color-border-hover, #4d4d4d);}.mc-radio__input.svelte-od5t2d:focus-visible {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-radio__input.svelte-od5t2d:checked {background-color:var(--forms-color-background-checked, #117f03);}.mc-radio__input.svelte-od5t2d:checked::before {background-color:var(--forms-color-background-default, #ffffff);}.mc-radio__input.svelte-od5t2d:checked, .mc-radio__input.svelte-od5t2d:disabled {border-color:transparent;}.mc-radio__input.svelte-od5t2d:disabled {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;}.mc-radio__input.svelte-od5t2d:disabled:checked::before {background-color:var(--forms-color-icon-disabled, #737373);}.mc-radio__input.svelte-od5t2d:disabled + .mc-radio__label:where(.svelte-od5t2d) {color:var(--forms-color-text-disabled, #737373);cursor:not-allowed;}.mc-radio__input.svelte-od5t2d:not(:disabled):checked:hover {background-color:var(--forms-color-background-checked-hover, #006902);}.mc-radio__input.is-invalid.svelte-od5t2d:not(:checked) {border-color:var(--forms-color-border-invalid, #ea302d);}.mc-radio__input.is-invalid.svelte-od5t2d:not(:checked):hover {border-color:var(--forms-color-border-invalid-hover, #c61112);}
 
-/* stylelint-disable string-no-newline */ .mc-field__legend.svelte-ydce3c {font-size:0.875rem;line-height:1.3;font-weight:400;color:var(--field-color-label, #000000);}.mc-field__legend.svelte-ydce3c {padding-inline:0;}.mc-field__content.svelte-ydce3c {margin-top:0.5rem;}.mc-field--group.svelte-ydce3c {border-width:0;margin-inline:0;padding:0;}.mc-field--group.svelte-ydce3c .mc-field__content:where(.svelte-ydce3c) {display:flex;flex-direction:column;flex-shrink:0;gap:0.25rem;}.mc-field--group.svelte-ydce3c .mc-field__content:where(.svelte-ydce3c):where(.mc-field__content--inline:where(.svelte-ydce3c)) {flex-flow:row wrap;gap:0.25rem 1rem;}
+/* stylelint-disable string-no-newline */ .mc-field__legend.svelte-od5t2d {font-size:var(--font-size-100, 0.875rem);line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-regular, 400);color:var(--field-color-label, #000000);}.mc-field__legend.svelte-od5t2d {padding-inline:0;}.mc-field__content.svelte-od5t2d {margin-top:0.5rem;}.mc-field--group.svelte-od5t2d {border-width:0;margin-inline:0;padding:0;}.mc-field--group.svelte-od5t2d .mc-field__content:where(.svelte-od5t2d) {display:flex;flex-direction:column;flex-shrink:0;gap:0.25rem;}.mc-field--group.svelte-od5t2d .mc-field__content:where(.svelte-od5t2d):where(.mc-field__content--inline:where(.svelte-od5t2d)) {flex-flow:row wrap;gap:0.25rem 1rem;}
 
-/* stylelint-enable string-no-newline */`};function re(u,i){J(i,!0),K(u,ee);const f=[];let _=d(i,"id",7),g=d(i,"selectedvalue",7),b=d(i,"options",7),a=d(i,"legend",7),p=d(i,"inline",7),h=d(i,"isinvalid",7,!1),y=L(M(g()));function V(e){R(y,e,!0)}var v=$(),j=s(v),q=s(j);{var W=e=>{var r=X(),n=s(r,!0);c(r),E(()=>F(n,a())),z(e,r)};O(q,e=>{a()&&a().length&&e(W)})}var k=D(q,2);return P(k,21,b,e=>e.id,(e,r)=>{var n=Z(),o=s(n);Q(o);let A;var C;o.__change=[Y,V,r];var w=D(o,2),B=s(w,!0);c(w),c(n),E(x=>{A=G(o,1,"mc-radio__input svelte-ydce3c",null,A,x),m(o,"id",l(r).id),m(o,"name",l(r).name),C!==(C=l(r).value)&&(o.value=(o.__value=l(r).value)??""),o.disabled=l(r).disabled,m(w,"for",l(r).id),F(B,l(r).label)},[()=>({"is-invalid":h()})]),T(f,[],o,()=>(l(r).value,l(y)),x=>R(y,x)),z(e,n)}),c(k),c(j),c(v),E(()=>{m(v,"id",_()),G(k,1,`mc-field__content ${p()?"mc-field__content--inline":""}`,"svelte-ydce3c")}),z(u,v),N({get id(){return _()},set id(e){_(e),t()},get selectedvalue(){return g()},set selectedvalue(e){g(e),t()},get options(){return b()},set options(e){b(e),t()},get legend(){return a()},set legend(e){a(e),t()},get inline(){return p()},set inline(e){p(e),t()},get isinvalid(){return h()},set isinvalid(e=!1){h(e),t()}})}H(["change"]);customElements.define("m-radio-group",I(re,{options:{attribute:"options",type:"Array"},id:{},selectedvalue:{},legend:{},inline:{},isinvalid:{}},[],[],!0,U));
+/* stylelint-enable string-no-newline */`};function oe(f,d){K(d,!0),L(f,ee);const m=[];let _=i(d,"id",7),g=i(d,"selectedvalue",7),b=i(d,"options",7),n=i(d,"legend",7),h=i(d,"inline",7),p=i(d,"isinvalid",7,!1),k=M(N(g()));function q(e){V(k,e,!0)}var v=$(),j=c(v),A=c(j);{var B=e=>{var o=X(),s=c(o,!0);a(o),z(()=>S(s,n())),E(e,o)};P(A,e=>{n()&&n().length&&e(B)})}var w=G(A,2);return Q(w,21,b,e=>e.id,(e,o)=>{var s=Z(),r=c(s);T(r);let D;r.__change=[Y,q,o];var F,x=G(r,2),H=c(x,!0);a(x),a(s),z(y=>{D=R(r,1,"mc-radio__input svelte-od5t2d",null,D,y),u(r,"id",t(o).id),u(r,"name",t(o).name),r.disabled=t(o).disabled,F!==(F=t(o).value)&&(r.value=(r.__value=t(o).value)??""),u(x,"for",t(o).id),S(H,t(o).label)},[()=>({"is-invalid":p()})]),U(m,[],r,()=>(t(o).value,t(k)),y=>V(k,y)),E(e,s)}),a(w),a(j),a(v),z(()=>{u(v,"id",_()),R(w,1,`mc-field__content ${h()?"mc-field__content--inline":""}`,"svelte-od5t2d")}),E(f,v),O({get id(){return _()},set id(e){_(e),l()},get selectedvalue(){return g()},set selectedvalue(e){g(e),l()},get options(){return b()},set options(e){b(e),l()},get legend(){return n()},set legend(e){n(e),l()},get inline(){return h()},set inline(e){h(e),l()},get isinvalid(){return p()},set isinvalid(e=!1){p(e),l()}})}I(["change"]);customElements.define("m-radio-group",J(oe,{options:{attribute:"options",type:"Array"},id:{},selectedvalue:{},legend:{},inline:{},isinvalid:{}},[],[],!0,W));
 //# sourceMappingURL=RadioGroup.js.map

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

@@ -1 +1 @@
-{"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    extend: customElementForwardEvents,\n  }}\n/>\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\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  }\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","customElementForwardEvents"],"mappings":"+bA2D4BA,EAAQC,EAACC,CAAG,EAAC,KAAK;;;;;;2FAnC1CC,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,EAAgBC,EAAK,EAAA,CACvB,uEAOOJ,EAAM,CAAA,CAAA,kBAFNA,EAAM,GAAIA,EAAM,EAAC,QAAMM,EAAAC,CAAA,iBAOnBC,OAAAA,EAAAC,EAAA,GAAAV,EAAWL,GAAKA,EAAI,MAATA,IAAG,+IAMXgB,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,QAAK,IACNiB,EAAA,SAAAlB,EAAAC,CAAG,EAAC,SAGJgB,EAAAG,EAAA,MAAApB,EAAAC,CAAG,EAAC,EAAE,EAA2BoB,EAAAC,EAAAtB,EAAAC,CAAG,EAAC,KAAK,uBARlCQ,EAAS,GAAA,iBAIpBT,EAAAC,CAAG,EAAC,QADCS,CAAa,QAAbA,EAAaa,CAAA,2EATFf,EAAM,EAAG,4BAA8B,EAAE,GAAA,eAAA,uTAlB5D,GAAK,oLAvBTgB"}
+{"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    extend: customElementForwardEvents,\n  }}\n/>\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\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  }\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","customElementForwardEvents"],"mappings":"ycA2D4BA,EAAQC,EAACC,CAAG,EAAC,KAAK;;;;;;2DA3D9C,gCAwBIC,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,EAAgBC,EAAK,EAAA,CACvB,uEAOOJ,EAAM,CAAA,CAAA,kBAFNA,EAAM,GAAIA,EAAM,EAAC,QAAMM,EAAAC,CAAA,iBAOnBC,OAAAA,EAAAC,EAAA,GAAAV,EAAWL,GAAKA,EAAI,MAATA,IAAG,2IAMXgB,EAAAC,EAAA,KAAAlB,EAAAC,CAAG,EAAC,EAAE,EACJgB,EAAAC,EAAA,OAAAlB,EAAAC,CAAG,EAAC,IAAI,EAGJiB,EAAA,SAAAlB,EAAAC,CAAG,EAAC,SADPkB,KAAAA,EAAAnB,EAAAC,CAAG,EAAC,SAAJiB,EAAA,OAAAA,EAAA,QAAAlB,EAAAC,CAAG,EAAC,QAAK,IAINgB,EAAAG,EAAA,MAAApB,EAAAC,CAAG,EAAC,EAAE,EAA2BoB,EAAAC,EAAAtB,EAAAC,CAAG,EAAC,KAAK,uBARlCQ,EAAS,GAAA,iBAIpBT,EAAAC,CAAG,EAAC,QADCS,CAAa,QAAbA,EAAaa,CAAA,2EATFf,EAAM,EAAG,4BAA8B,EAAE,GAAA,eAAA,uTAlB5D,GAAK,YAQrB,wKA/BYgB"}