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

package/dist/components/chart/StackedBarChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackedBarChart.js","sources":["../../../node_modules/d3-shape/src/offset/none.js","../../../node_modules/d3-shape/src/order/none.js","../../../node_modules/d3-shape/src/stack.js","../../../src/components/chart/StackedBarChart.svelte"],"sourcesContent":["export default function(series, order) {\n  if (!((n = series.length) > 1)) return;\n  for (var i = 1, j, s0, s1 = series[order[0]], n, m = s1.length; i < n; ++i) {\n    s0 = s1, s1 = series[order[i]];\n    for (j = 0; j < m; ++j) {\n      s1[j][1] += s1[j][0] = isNaN(s0[j][1]) ? s0[j][0] : s0[j][1];\n    }\n  }\n}\n","export default function(series) {\n  var n = series.length, o = new Array(n);\n  while (--n >= 0) o[n] = n;\n  return o;\n}\n","import array from \"./array.js\";\nimport constant from \"./constant.js\";\nimport offsetNone from \"./offset/none.js\";\nimport orderNone from \"./order/none.js\";\n\nfunction stackValue(d, key) {\n  return d[key];\n}\n\nfunction stackSeries(key) {\n  const series = [];\n  series.key = key;\n  return series;\n}\n\nexport default function() {\n  var keys = constant([]),\n      order = orderNone,\n      offset = offsetNone,\n      value = stackValue;\n\n  function stack(data) {\n    var sz = Array.from(keys.apply(this, arguments), stackSeries),\n        i, n = sz.length, j = -1,\n        oz;\n\n    for (const d of data) {\n      for (i = 0, ++j; i < n; ++i) {\n        (sz[i][j] = [0, +value(d, sz[i].key, j, data)]).data = d;\n      }\n    }\n\n    for (i = 0, oz = array(order(sz)); i < n; ++i) {\n      sz[oz[i]].index = i;\n    }\n\n    offset(sz, oz);\n    return sz;\n  }\n\n  stack.keys = function(_) {\n    return arguments.length ? (keys = typeof _ === \"function\" ? _ : constant(Array.from(_)), stack) : keys;\n  };\n\n  stack.value = function(_) {\n    return arguments.length ? (value = typeof _ === \"function\" ? _ : constant(+_), stack) : value;\n  };\n\n  stack.order = function(_) {\n    return arguments.length ? (order = _ == null ? orderNone : typeof _ === \"function\" ? _ : constant(Array.from(_)), stack) : order;\n  };\n\n  stack.offset = function(_) {\n    return arguments.length ? (offset = _ == null ? offsetNone : _, stack) : offset;\n  };\n\n  return stack;\n}\n","<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import {\n    select,\n    scaleBand,\n    scaleLinear,\n    axisBottom,\n    axisLeft,\n    Selection,\n    ScaleBand,\n    ScaleLinear,\n    NumberValue,\n    stack,\n    Series,\n  } from 'd3';\n  import { onMount } from 'svelte';\n  import type { StackedBarData, BarMargin } from './bar-chart.types';\n  import { EventHandler } from '../../utilities/EventHandler';\n  import {\n    get_current_component,\n    createEventDispatcher,\n  } from 'svelte/internal';\n\n  type StackedData = Series<\n    {\n      [key: string]: number;\n    },\n    string\n  >;\n\n  export let data = '';\n  $: parsedData = data ? (JSON.parse(data) as StackedBarData[]) : [];\n  $: groups = parsedData.map((d: StackedBarData) => d.group);\n  $: subgroups = parsedData[0]\n    ? Object.keys(parsedData[0]).filter((d: string) => d !== 'group')\n    : [];\n\n  export let chartheight = '300';\n  $: height = parseInt(chartheight, 10);\n\n  export let backgroundcolor = '#fff';\n  export let scalemax = 50;\n  export let ticknumbers = 4;\n  export let tickleftformat: (d: NumberValue, i: number) => string = (d) =>\n    `${Number(d)}`;\n  export let tickbottomformat: (d: NumberValue, i: number) => string = (d) =>\n    `${Number(d)}`;\n\n  export let margins: string;\n  export let svgs: string;\n  $: parsedSvgs = svgs ? (JSON.parse(svgs) as SVGElement[]) : [];\n\n  export let colors: string;\n  let parsedColor: Record<string, string>;\n  $: parsedColor = colors ? (JSON.parse(colors) as Record<string, string>) : {};\n\n  let _data: string;\n  let chart: HTMLDivElement;\n  let svg: Selection<SVGGElement, any, any, any>;\n  let hasMounted = false;\n  let tooltipData = { show: false, text: '', top: 0, left: 0, width: 0 };\n  let eventHandler = new EventHandler(\n    get_current_component(),\n    createEventDispatcher(),\n  );\n\n  $: if (data.length > 0 && hasMounted) {\n    if (!_data) {\n      render();\n      _data = data;\n    } else if (data !== _data) {\n      update();\n      _data = data;\n    }\n  }\n\n  function getParsedMargins(margins: string): BarMargin {\n    if (margins) return JSON.parse(margins) as BarMargin;\n    else\n      return {\n        top: 10,\n        right: 40,\n        bottom: 20,\n        left: 60,\n        xAxis: 20,\n      } as BarMargin;\n  }\n\n  function getChartWidth() {\n    let chartWidth = select(chart).style('width');\n    if (chartWidth === '' || !chartWidth) {\n      chartWidth = `${window.innerWidth / 2}`;\n    }\n    return parseInt(chartWidth);\n  }\n\n  function getAxes(width: number) {\n    const x = scaleBand()\n      .domain(groups)\n      .range([\n        0,\n        width -\n          (getParsedMargins(margins).left / 2 +\n            getParsedMargins(margins).right / 2),\n      ])\n      .padding(0.2);\n    const y = scaleLinear().domain([0, scalemax]).range([height, 0]);\n    return { x, y };\n  }\n\n  function addRectandles(\n    x: ScaleBand<string>,\n    y: ScaleLinear<number, number, never>,\n  ) {\n    const stackedData = stack().keys(subgroups)(parsedData);\n\n    svg\n      .append('g')\n      .selectAll('g')\n      .data(stackedData)\n      .enter()\n      .append('g')\n      .attr('fill', (d: StackedData) => parsedColor[d.key] || 'black')\n      .attr('class', 'bar')\n      .selectAll('rect')\n      .data((d) => d)\n      .enter()\n      .append('rect')\n      .attr('x', (d) => x(d.data.group.toString())!)\n      .attr('y', (d) => y(d[1]))\n      .attr('width', x.bandwidth())\n      .attr('height', (d) => y(d[0]) - y(d[1]))\n      .style('cursor', 'pointer')\n      .on('mouseout', (_e: MouseEvent, chartEvent) => {\n        const others = svg.selectAll('rect').filter(function (arc) {\n          return arc != chartEvent;\n        });\n        others.style('opacity', 1);\n        tooltipData.show = false;\n      })\n      .on('mouseover', (e: MouseEvent, chartEvent: any) => {\n        const others = svg.selectAll('rect').filter(function (arc) {\n          return arc != chartEvent;\n        });\n        others.style('opacity', 0.7);\n        const { left, top, width } = (\n          e.target as HTMLElement\n        ).getBoundingClientRect();\n        tooltipData = {\n          show: true,\n          text: chartEvent.data.customtooltip\n            ? chartEvent.data.customtooltip\n            : `${chartEvent[1] - chartEvent[0]}`,\n          left: left,\n          top: top - 50,\n          width,\n        };\n      })\n      .on('click', (_e: MouseEvent, chartEvent) => {\n        eventHandler.dispatch('bar-clicked', chartEvent);\n      });\n  }\n\n  function updateAxes(\n    x: ScaleBand<string>,\n    y: ScaleLinear<number, number, never>,\n  ) {\n    svg\n      .select('.x-axis')\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call\n      .call((axisBottom(x) as any).tickFormat(tickbottomformat));\n    svg\n      .select('.y-axis')\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call\n      .call((axisLeft(y) as any).ticks(ticknumbers).tickFormat(tickleftformat));\n\n    const width = getChartWidth();\n    svg\n      .selectAll('.y-axis .tick line')\n      .attr('stroke', '#EEEDEA')\n      .attr('stroke-width', '1px')\n      .attr('x2', width);\n  }\n\n  function render() {\n    const width = getChartWidth();\n    const { x, y } = getAxes(width);\n\n    svg = select<HTMLElement, any>(chart)\n      .append('svg')\n      .attr('width', width)\n      .attr(\n        'height',\n        Number(height) +\n          Number(getParsedMargins(margins).top) +\n          Number(getParsedMargins(margins).bottom) +\n          Number(getParsedMargins(margins).xAxis),\n      )\n      .attr('id', 'svg-chart')\n      .append('g')\n      .attr(\n        'transform',\n        `translate(${\n          getParsedMargins(margins).left / 2 +\n          getParsedMargins(margins).right / 2\n        },${getParsedMargins(margins).top})`,\n      );\n\n    svg\n      .append('g')\n      .attr(\n        'transform',\n        `translate(0, ${\n          Number(height) + Number(getParsedMargins(margins).xAxis)\n        })`,\n      )\n      .call(axisBottom(x))\n      .attr('class', 'x-axis')\n      .attr('stroke-width', '0');\n\n    svg\n      .append('g')\n      .call(axisLeft(y).ticks(ticknumbers).tickFormat(tickleftformat))\n      .attr('class', 'y-axis')\n      .attr('stroke-width', '0');\n\n    addRectandles(x, y);\n  }\n\n  function update() {\n    const width = getChartWidth();\n    chart.querySelector('#svg-chart')?.setAttribute('width', `${width}px`);\n\n    const { x, y } = getAxes(width);\n    updateAxes(x, y);\n    svg.selectAll('.bar').remove();\n    addRectandles(x, y);\n  }\n\n  function resize() {\n    if (_data) {\n      const width = getChartWidth();\n      chart.querySelector('#svg-chart')?.setAttribute('width', `${width}px`);\n\n      const { x, y } = getAxes(width);\n      updateAxes(x, y);\n\n      const stackedData = stack().keys(subgroups)(parsedData);\n      svg\n        .selectAll('.bar')\n        .data(stackedData)\n        .selectAll('rect')\n        .data((d) => d)\n        .attr('x', (d) => x(d.data.group.toString())!)\n        .attr('y', (d) => y(d[1]))\n        .attr('width', x.bandwidth())\n        .attr('height', (d) => y(d[0]) - y(d[1]));\n    }\n  }\n\n  onMount(() => {\n    const resizeObserver = new ResizeObserver(resize);\n    resizeObserver.observe(chart);\n    hasMounted = true;\n  });\n</script>\n\n<div bind:this={chart} style=\"background-color: {backgroundcolor};\" />\n\n{#if tooltipData.show}\n  <div\n    class=\"tooltip\"\n    style={`top: ${tooltipData.top}px; left: ${tooltipData.left}px; width: ${tooltipData.width}px;`}\n  >\n    {tooltipData.text}\n  </div>\n{/if}\n\n<div class=\"legend\">\n  {#each subgroups as subgroup}\n    <div class=\"legend__item\">\n      <svg class=\"legend__box\">\n        <rect x=\"0\" y=\"0\" width=\"24\" height=\"16\" fill={parsedColor[subgroup]} />\n      </svg>\n      <span class=\"legend__title\">{subgroup}</span>\n    </div>\n  {/each}\n</div>\n\n<div style=\"height: 0; width: 0;\" class=\"pattern\">\n  {#each parsedSvgs as svg}\n    {@html svg}\n  {/each}\n</div>\n<text />\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n\n  .legend {\n    margin-top: magic-unit-rem(1);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding: 0 magic-unit-rem(1.5);\n    height: 100%;\n    color: $color-grey-999;\n    gap: magic-unit-rem(1);\n    &__item {\n      display: flex;\n      justify-content: center;\n      font-size: $size-font-04;\n      align-items: center;\n    }\n    &__title {\n      white-space: nowrap;\n      margin: 0;\n    }\n    &__box {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      margin-right: magic-unit-rem(0.25);\n      height: 16px;\n      width: 24px;\n    }\n  }\n\n  .tooltip {\n    height: auto;\n    background-color: $color-grey-700;\n    border-radius: 4px;\n    color: $color-grey-000;\n    text-align: center;\n    padding: magic-unit-rem(0.5) 0;\n    position: absolute;\n  }\n\n  .pattern {\n    z-index: -1;\n    position: relative;\n  }\n\n  text {\n    font-family: 'LeroyMerlin', sans-serif;\n    font-size: $size-font-04;\n    color: $color-grey-700;\n  }\n</style>\n"],"names":["none$1","series","order","n","length","j","s0","i","s1","m","isNaN","none","o","Array","stackValue","d","key","stackSeries","stack","keys","constant","orderNone","offset","offsetNone","value","data","oz","sz","from","apply","this","arguments","array","index","_","t_value","ctx","text","top","left","width","insert","target","div","anchor","dirty","set_data","t","attr","rect","rect_fill_value","append","svg_1","span","t1","t1_value","html_tag","p","raw_value","if_block","show","create_if_block","div0","div1","div2","text_1","getParsedMargins","margins","JSON","parse","right","bottom","xAxis","parsedColor","_data","chart","svg","$$props","chartheight","backgroundcolor","scalemax","ticknumbers","tickleftformat","Number","tickbottomformat","svgs","colors","hasMounted","tooltipData","eventHandler","EventHandler","get_current_component","createEventDispatcher","getChartWidth","chartWidth","select","style","window","innerWidth","parseInt","getAxes","x","scaleBand","domain","groups","range","padding","y","scaleLinear","height","addRectandles","stackedData","subgroups","parsedData","selectAll","enter","group","toString","bandwidth","on","_e","chartEvent","filter","arc","e","getBoundingClientRect","customtooltip","dispatch","updateAxes","call","axisBottom","tickFormat","axisLeft","ticks","resize","_a","querySelector","setAttribute","onMount","ResizeObserver","observe","$$invalidate","map","Object","parsedSvgs","remove","update","render","$$value"],"mappings":"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"}

package/dist/components/chart/bar-chart.types.d.ts

@@ -0,0 +1,26 @@
+export type BarData = {
+    group: string;
+} & {
+    [key: string]: {
+        value: string;
+        customtooltip: string;
+    };
+};
+export type StackedBarData = {
+    group: string;
+} & {
+    [key: string]: number;
+};
+export type BarKeyValue = {
+    key: string;
+    value: string;
+    customtooltip: string;
+};
+export interface BarMargin {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+    xAxis: number;
+}
+//# sourceMappingURL=bar-chart.types.d.ts.map

package/dist/components/chart/bar-chart.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bar-chart.types.d.ts","sourceRoot":"","sources":["../../../src/components/chart/bar-chart.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,OAAO,GAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,GAAG;IACxC,CAAC,GAAG,EAAE,MAAM,GAAG;QACb,KAAK,EAAE,MAAM,CAAC;QACd,aAAa,EAAE,MAAM,CAAC;KACvB,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,GAAG;IAC/C,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,WAAW,SAAS;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf"}

package/dist/components/chart/donut.types.d.ts

@@ -0,0 +1,13 @@
+import type { PieArcDatum } from 'd3';
+export type DonutData = {
+    name: string;
+    total: number;
+    patternId: string;
+    checked?: boolean;
+    customTooltip?: string;
+};
+export type LegendPosition = 'top' | 'right' | 'bottom' | 'left' | undefined;
+export interface ChartContext extends Element {
+    _current: PieArcDatum<DonutData>;
+}
+//# sourceMappingURL=donut.types.d.ts.map

package/dist/components/chart/donut.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"donut.types.d.ts","sourceRoot":"","sources":["../../../src/components/chart/donut.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,IAAI,CAAC;AAEtC,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;AAE7E,MAAM,WAAW,YAAa,SAAQ,OAAO;IAC3C,QAAQ,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;CAClC"}

package/dist/components/chart/grouped-bar-chart.types.d.ts

@@ -0,0 +1,25 @@
+export type GroupedBarData = {
+    group: string;
+} & {
+    [key: string]: {
+        scalePosition: 'right' | 'left';
+        color: string;
+        value: string;
+        customtooltip: string;
+    };
+};
+export type GroupedBarKeyValue = {
+    key: string;
+    value: string;
+    scalePosition?: 'right' | 'left';
+    color?: string;
+    customtooltip: string;
+};
+export interface BarMargin {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+    xAxis: number;
+}
+//# sourceMappingURL=grouped-bar-chart.types.d.ts.map

package/dist/components/chart/grouped-bar-chart.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grouped-bar-chart.types.d.ts","sourceRoot":"","sources":["../../../src/components/chart/grouped-bar-chart.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,GAAG;IAC/C,CAAC,GAAG,EAAE,MAAM,GAAG;QACb,aAAa,EAAE,OAAO,GAAG,MAAM,CAAC;QAChC,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;QACd,aAAa,EAAE,MAAM,CAAC;KACvB,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,WAAW,SAAS;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf"}

package/dist/components/chart/line-chart.types.d.ts

@@ -0,0 +1,14 @@
+export type LinePoint = {
+    time: string | Date;
+    value: string;
+    customtooltip: string;
+};
+export type SymbolType = 'circle' | 'square' | 'triangle';
+export type LineData = {
+    points: LinePoint[];
+    color: string;
+    title: string;
+    symbol: SymbolType;
+    strokeDasharray?: number;
+};
+//# sourceMappingURL=line-chart.types.d.ts.map

package/dist/components/chart/line-chart.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"line-chart.types.d.ts","sourceRoot":"","sources":["../../../src/components/chart/line-chart.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,UAAU,CAAC;AAE1D,MAAM,MAAM,QAAQ,GAAG;IACrB,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,UAAU,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC"}

package/dist/components/chart/radar.types.d.ts

@@ -0,0 +1,10 @@
+import type { PieArcDatum } from 'd3';
+export type RadarData = {
+    name: string;
+    total: number;
+};
+export type LegendPosition = 'top' | 'right' | 'bottom' | 'left' | undefined;
+export interface ChartContext extends Element {
+    _current: PieArcDatum<RadarData>;
+}
+//# sourceMappingURL=radar.types.d.ts.map

package/dist/components/chart/radar.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radar.types.d.ts","sourceRoot":"","sources":["../../../src/components/chart/radar.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,IAAI,CAAC;AAEtC,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;AAE7E,MAAM,WAAW,YAAa,SAAQ,OAAO;IAC3C,QAAQ,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;CAClC"}

package/dist/components/checkbox/Checkbox.js

@@ -1,10 +1,10 @@
-import{c as y,p as z,a as B,b as M,d as t,f as w,s as H,g as k,t as _,m as j,h as x,i as D,j as o,r as p,k as F}from"../../custom-element.js";import{i as S}from"../../if.js";import{s as n,r as A}from"../../attributes.js";import{c as G}from"../../input.js";import{c as I}from"../../custom-element-forward-events.js";var J=w('<label class="mc-checkbox__label svelte-14qag3h"> </label>'),K=w('<div class="mc-checkbox svelte-14qag3h"><input type="checkbox"/> <!></div>');const L={hash:"svelte-14qag3h",code:`/**
+import{c as y,p as z,a as B,b as M,d as r,f as p,s as H,g as k,t as w,i as D,j as _,l as F,m as t,r as x,k as S}from"../../custom-element.js";import{i as q}from"../../if.js";import{s as c,r as A}from"../../attributes.js";import{c as G}from"../../input.js";import{c as I}from"../../custom-element-forward-events.js";var J=p('<label class="mc-checkbox__label svelte-wnjaih"> </label>'),K=p('<div class="mc-checkbox svelte-wnjaih"><input type="checkbox"/> <!></div>');const L={hash:"svelte-wnjaih",code:`/**
  * Do not edit directly, this file was auto-generated.
  */
-/* stylelint-disable string-no-newline */.mc-checkbox.svelte-14qag3h {align-items:center;display:flex;gap:0.5rem;padding:0.375rem;}.mc-checkbox__label.svelte-14qag3h {font-size:1rem;line-height:1.3;color:var(--forms-color-text-default, #000000);cursor:pointer;}.mc-checkbox__input.svelte-14qag3h {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:0.25rem;transition:all ease 200ms;height:1.25rem;width:1.25rem;}.mc-checkbox__input.svelte-14qag3h:hover {border-color:var(--forms-color-border-hover, #4d4d4d);}.mc-checkbox__input.svelte-14qag3h:focus-visible {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-checkbox__input.svelte-14qag3h:checked {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-inverse, %23ffffff)' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E");}.mc-checkbox__input.svelte-14qag3h:indeterminate {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-inverse, %23ffffff)' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E");}.mc-checkbox__input.svelte-14qag3h:checked, .mc-checkbox__input.svelte-14qag3h:indeterminate {background-color:var(--forms-color-background-checked, #117f03);background-size:1rem 1rem;background-position:center;}.mc-checkbox__input.svelte-14qag3h:checked, .mc-checkbox__input.svelte-14qag3h:indeterminate, .mc-checkbox__input.svelte-14qag3h:disabled {border-color:transparent;}.mc-checkbox__input.svelte-14qag3h:disabled {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;}.mc-checkbox__input.svelte-14qag3h:disabled:checked {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-disabled, %23737373)' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E");}.mc-checkbox__input.svelte-14qag3h:disabled:indeterminate {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-disabled, %23737373)' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E");}.mc-checkbox__input.svelte-14qag3h:disabled + .mc-checkbox__label:where(.svelte-14qag3h) {color:var(--forms-color-text-disabled, #737373);cursor:not-allowed;}.mc-checkbox__input.svelte-14qag3h:not(:disabled):checked:hover, .mc-checkbox__input.svelte-14qag3h:not(:disabled):indeterminate:hover {background-color:var(--forms-color-background-checked-hover, #006902);}.mc-checkbox__input.is-invalid.svelte-14qag3h:not(:checked):not(:indeterminate) {border-color:var(--forms-color-border-invalid, #ea302d);}.mc-checkbox__input.is-invalid.svelte-14qag3h:not(:checked):not(:indeterminate):hover {border-color:var(--forms-color-border-invalid-hover, #c61112);}
+/* stylelint-disable string-no-newline */.mc-checkbox.svelte-wnjaih {align-items:center;display:flex;gap:0.5rem;padding:0.375rem;}.mc-checkbox__label.svelte-wnjaih {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-checkbox__input.svelte-wnjaih {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:var(--forms-radius-border, 0.25rem);transition:all ease 200ms;height:1.25rem;width:1.25rem;}.mc-checkbox__input.svelte-wnjaih:hover {border-color:var(--forms-color-border-hover, #4d4d4d);}.mc-checkbox__input.svelte-wnjaih:focus-visible {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-checkbox__input.svelte-wnjaih:checked {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-inverse, %23ffffff)' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E");}.mc-checkbox__input.svelte-wnjaih:indeterminate {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-inverse, %23ffffff)' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E");}.mc-checkbox__input.svelte-wnjaih:checked, .mc-checkbox__input.svelte-wnjaih:indeterminate {background-color:var(--forms-color-background-checked, #117f03);background-size:1rem 1rem;background-position:center;}.mc-checkbox__input.svelte-wnjaih:checked, .mc-checkbox__input.svelte-wnjaih:indeterminate, .mc-checkbox__input.svelte-wnjaih:disabled {border-color:transparent;}.mc-checkbox__input.svelte-wnjaih:disabled {background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;}.mc-checkbox__input.svelte-wnjaih:disabled:checked {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-disabled, %23737373)' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E");}.mc-checkbox__input.svelte-wnjaih:disabled:indeterminate {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-disabled, %23737373)' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E");}.mc-checkbox__input.svelte-wnjaih:disabled + .mc-checkbox__label:where(.svelte-wnjaih) {color:var(--forms-color-text-disabled, #737373);cursor:not-allowed;}.mc-checkbox__input.svelte-wnjaih:not(:disabled):checked:hover, .mc-checkbox__input.svelte-wnjaih:not(:disabled):indeterminate:hover {background-color:var(--forms-color-background-checked-hover, #006902);}.mc-checkbox__input.is-invalid.svelte-wnjaih:not(:checked, :indeterminate) {border-color:var(--forms-color-border-invalid, #ea302d);}.mc-checkbox__input.is-invalid.svelte-wnjaih:not(:checked, :indeterminate):hover {border-color:var(--forms-color-border-invalid-hover, #c61112);}
 
 /* stylelint-enable string-no-newline */
 /* stylelint-disable string-no-newline */
 
-/* stylelint-enable string-no-newline */`};function N(g,r){const u=z();B(r,!0),M(g,L);let d=t(r,"name",7,"checkbox"),i=t(r,"id",7,u),l=t(r,"label",7),m=t(r,"indeterminate",7,!1),h=t(r,"disabled",7,!1),c=t(r,"isinvalid",7,!1),v=t(r,"checked",15,!1);var b=K(),a=k(b);A(a);let f;var q=H(a,2);{var E=e=>{var s=J(),C=k(s,!0);p(s),_(()=>{n(s,"for",i()),F(C,l())}),x(e,s)};S(q,e=>{l()&&e(E)})}return p(b),_(e=>{n(a,"id",i()),f=j(a,1,"mc-checkbox__input svelte-14qag3h",null,f,e),n(a,"aria-invalid",c()),n(a,"name",d()),a.disabled=h(),a.indeterminate=m()},[()=>({"is-invalid":c()})]),G(a,v),x(g,b),D({get name(){return d()},set name(e="checkbox"){d(e),o()},get id(){return i()},set id(e=u){i(e),o()},get label(){return l()},set label(e){l(e),o()},get indeterminate(){return m()},set indeterminate(e=!1){m(e),o()},get disabled(){return h()},set disabled(e=!1){h(e),o()},get isinvalid(){return c()},set isinvalid(e=!1){c(e),o()},get checked(){return v()},set checked(e=!1){v(e),o()}})}customElements.define("m-checkbox",y(N,{name:{},id:{},label:{},indeterminate:{},disabled:{},isinvalid:{},checked:{}},[],[],!0,I));
+/* stylelint-enable string-no-newline */`};function N(u,i){const f=z();B(i,!0),M(u,L);let d=r(i,"name",7,"checkbox"),o=r(i,"id",7,f),n=r(i,"label",7),m=r(i,"indeterminate",7,!1),h=r(i,"disabled",7,!1),l=r(i,"isinvalid",7,!1),v=r(i,"checked",15,!1);var b=K(),a=k(b);A(a);let g;var j=H(a,2);{var E=e=>{var s=J(),C=k(s,!0);x(s),w(()=>{c(s,"for",o()),S(C,n())}),_(e,s)};q(j,e=>{n()&&e(E)})}return x(b),w(e=>{c(a,"id",o()),g=D(a,1,"mc-checkbox__input svelte-wnjaih",null,g,e),c(a,"aria-invalid",l()),c(a,"name",d()),a.disabled=h(),a.indeterminate=m()},[()=>({"is-invalid":l()})]),G(a,v),_(u,b),F({get name(){return d()},set name(e="checkbox"){d(e),t()},get id(){return o()},set id(e=f){o(e),t()},get label(){return n()},set label(e){n(e),t()},get indeterminate(){return m()},set indeterminate(e=!1){m(e),t()},get disabled(){return h()},set disabled(e=!1){h(e),t()},get isinvalid(){return l()},set isinvalid(e=!1){l(e),t()},get checked(){return v()},set checked(e=!1){v(e),t()}})}customElements.define("m-checkbox",y(N,{name:{},id:{},label:{},indeterminate:{},disabled:{},isinvalid:{},checked:{}},[],[],!0,I));
 //# sourceMappingURL=Checkbox.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../src/components/checkbox/Checkbox.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-checkbox',\n    extend: customElementForwardEvents,\n  }}\n/>\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n\n  interface Props {\n    name: string;\n    label?: string;\n    id?: string;\n    checked?: boolean;\n    indeterminate?: boolean;\n    disabled?: boolean;\n    isinvalid?: boolean;\n  }\n\n  const uid = $props.id();\n  let {\n    name = 'checkbox',\n    id = uid,\n    label,\n    indeterminate = false,\n    disabled = false,\n    isinvalid = false,\n    checked = $bindable(false),\n  }: Props = $props();\n</script>\n\n<div class=\"mc-checkbox\">\n  <input\n    {id}\n    type=\"checkbox\"\n    class=\"mc-checkbox__input\"\n    class:is-invalid={isinvalid}\n    aria-invalid={isinvalid}\n    {name}\n    {disabled}\n    {indeterminate}\n    bind:checked\n  />\n  {#if label}\n    <label for={id} class=\"mc-checkbox__label\">{label}</label>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/checkbox';\n  @use '@mozaic-ds/styles/components/field';\n</style>\n"],"names":["uid","$.props_id","name","id","label","$.prop","$$props","indeterminate","disabled","isinvalid","checked","$$render","consequent","customElementForwardEvents"],"mappings":";;;;;;;;iEAoBQA,EAAGC,EAAA,iBAEP,IAAAC,eAAO,UAAU,EACjBC,aAAKH,CAAG,EACRI,EAAKC,EAAAC,EAAA,QAAA,CAAA,EACLC,wBAAgB,EAAK,EACrBC,mBAAW,EAAK,EAChBC,oBAAY,EAAK,EACjBC,mBAAoB,EAAK,gGAiBbP,GAAE,MAA8BC,GAAK,oBAD9CA,EAAK,GAAAO,EAAAC,CAAA,6GANMH,GAAS,0EADLA,EAAS,GAAA,sDAfpB,WAAU,yCACZT,EAAG,8GAEQ,GAAK,qDACV,GAAK,uDACJ,GAAK,mDACG,GAAK,2IAzBjBa"}
+{"version":3,"file":"Checkbox.js","sources":["../../../src/components/checkbox/Checkbox.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-checkbox',\n    extend: customElementForwardEvents,\n  }}\n/>\n\n<script lang=\"ts\">\n  import { customElementForwardEvents } from '../../utils';\n\n  interface Props {\n    name: string;\n    label?: string;\n    id?: string;\n    checked?: boolean;\n    indeterminate?: boolean;\n    disabled?: boolean;\n    isinvalid?: boolean;\n  }\n\n  const uid = $props.id();\n  let {\n    name = 'checkbox',\n    id = uid,\n    label,\n    indeterminate = false,\n    disabled = false,\n    isinvalid = false,\n    checked = $bindable(false),\n  }: Props = $props();\n</script>\n\n<div class=\"mc-checkbox\">\n  <input\n    {id}\n    type=\"checkbox\"\n    class=\"mc-checkbox__input\"\n    class:is-invalid={isinvalid}\n    aria-invalid={isinvalid}\n    {name}\n    {disabled}\n    {indeterminate}\n    bind:checked\n  />\n  {#if label}\n    <label for={id} class=\"mc-checkbox__label\">{label}</label>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/checkbox';\n  @use '@mozaic-ds/styles/components/field';\n</style>\n"],"names":["uid","$.props_id","name","id","label","$.prop","$$props","indeterminate","disabled","isinvalid","checked","$$render","consequent","customElementForwardEvents"],"mappings":";;;;;;;;0DAAA,OAoBQA,EAAGC,EAAA,iBAEP,IAAAC,eAAO,UAAU,EACjBC,aAAKH,CAAG,EACRI,EAAKC,EAAAC,EAAA,QAAA,CAAA,EACLC,wBAAgB,EAAK,EACrBC,mBAAW,EAAK,EAChBC,oBAAY,EAAK,EACjBC,mBAAoB,EAAK,gGAiBbP,GAAE,MAA8BC,GAAK,oBAD9CA,EAAK,GAAAO,EAAAC,CAAA,4GANMH,GAAS,0EADLA,EAAS,GAAA,sDAfpB,WAAU,yCACZT,EAAG,8GAEQ,GAAK,qDACV,GAAK,uDACJ,GAAK,mDACG,GAAK,YAE7B,+HA3BYa"}

package/dist/components/checkbox/Checkbox.svelte

@@ -1,193 +1,56 @@
-<svelte:options
-  customElement={{
-    tag: 'm-checkbox',
-    extend: customElementForwardEvents,
-  }}
-/>
+<svelte:options tag={null} />
 
 <script lang="ts">
-  import { customElementForwardEvents } from '../../utils';
+  import {
+    get_current_component,
+    createEventDispatcher,
+  } from 'svelte/internal';
+  import { EventHandler } from '../../utilities/EventHandler';
+  import { createEventForwarder } from '../../utilities/EventForward';
+  export let name: string;
+  export let checked: boolean;
+  export let indeterminate: boolean;
+  export let disabled = false;
+  export let isinvalid = false;
+  export let label: string;
 
-  interface Props {
-    name: string;
-    label?: string;
-    id?: string;
-    checked?: boolean;
-    indeterminate?: boolean;
-    disabled?: boolean;
-    isinvalid?: boolean;
-  }
+  const forwardEvents = createEventForwarder(get_current_component());
+
+  $: isChecked = checked ? true : false;
+  $: userClass = $$props.class;
+  $: attributes = { ...$$restProps };
+  $: delete attributes.class;
+  let eventHandler = new EventHandler(
+    get_current_component(),
+    createEventDispatcher(),
+  );
 
-  const uid = $props.id();
-  let {
-    name = 'checkbox',
-    id = uid,
-    label,
-    indeterminate = false,
-    disabled = false,
-    isinvalid = false,
-    checked = $bindable(false),
-  }: Props = $props();
+  function handleChange(): void {
+    isChecked = !isChecked;
+    eventHandler.dispatch('change', isChecked);
+  }
 </script>
 
-<div class="mc-checkbox">
+<div class="mc-checkbox {userClass}" {...attributes}>
   <input
-    {id}
+    use:forwardEvents
+    id={name}
     type="checkbox"
-    class="mc-checkbox__input"
-    class:is-invalid={isinvalid}
+    class="mc-checkbox__input {isinvalid ? ' is-invalid' : ''}"
     aria-invalid={isinvalid}
     {name}
+    {checked}
     {disabled}
     {indeterminate}
-    bind:checked
+    on:change|stopPropagation={handleChange}
   />
   {#if label}
-    <label for={id} class="mc-checkbox__label">{label}</label>
+    <label for={name} class="mc-checkbox__label">{label}</label>
   {/if}
 </div>
 
-<style>/**
- * Do not edit directly, this file was auto-generated.
- */
-/* stylelint-disable string-no-newline */
-.mc-checkbox {
-  align-items: center;
-  display: flex;
-  gap: 0.5rem;
-  padding: 0.375rem;
-}
-.mc-checkbox__label {
-  font-size: 1rem;
-  line-height: 1.3;
-  color: var(--forms-color-text-default, #000000);
-  cursor: pointer;
-}
-.mc-checkbox__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: 0.25rem;
-  transition: all ease 200ms;
-  height: 1.25rem;
-  width: 1.25rem;
-}
-.mc-checkbox__input:hover {
-  border-color: var(--forms-color-border-hover, #4d4d4d);
-}
-.mc-checkbox__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-checkbox__input:checked {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-inverse, %23ffffff)' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E");
-}
-.mc-checkbox__input:indeterminate {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-inverse, %23ffffff)' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E");
-}
-.mc-checkbox__input:checked, .mc-checkbox__input:indeterminate {
-  background-color: var(--forms-color-background-checked, #117f03);
-  background-size: 1rem 1rem;
-  background-position: center;
-}
-.mc-checkbox__input:checked, .mc-checkbox__input:indeterminate, .mc-checkbox__input:disabled {
-  border-color: transparent;
-}
-.mc-checkbox__input:disabled {
-  background-color: var(--forms-color-background-disabled, #d9d9d9);
-  cursor: not-allowed;
-}
-.mc-checkbox__input:disabled:checked {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-disabled, %23737373)' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E");
-}
-.mc-checkbox__input:disabled:indeterminate {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-disabled, %23737373)' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E");
-}
-.mc-checkbox__input:disabled + .mc-checkbox__label {
-  color: var(--forms-color-text-disabled, #737373);
-  cursor: not-allowed;
-}
-.mc-checkbox__input:not(:disabled):checked:hover, .mc-checkbox__input:not(:disabled):indeterminate:hover {
-  background-color: var(--forms-color-background-checked-hover, #006902);
-}
-.mc-checkbox__input.is-invalid:not(:checked):not(:indeterminate) {
-  border-color: var(--forms-color-border-invalid, #ea302d);
-}
-.mc-checkbox__input.is-invalid:not(:checked):not(:indeterminate):hover {
-  border-color: var(--forms-color-border-invalid-hover, #c61112);
-}
-
-/* stylelint-enable string-no-newline */
-/* stylelint-disable string-no-newline */
-.mc-field__label, .mc-field__legend {
-  font-size: 0.875rem;
-  line-height: 1.3;
-  font-weight: 400;
-  color: var(--field-color-label, #000000);
-}
-.mc-field__legend {
-  padding-inline: 0;
-}
-.mc-field__requirement, .mc-field__help {
-  font-size: 0.75rem;
-  line-height: 1.5;
-  font-weight: 400;
-  vertical-align: top;
-  color: var(--field-color-requirement, #666666);
-}
-.mc-field__help {
-  display: block;
-  margin-top: 0.125rem;
-}
-.mc-field__content {
-  margin-top: 0.5rem;
-}
-.mc-field__validation-message {
-  font-size: 0.875rem;
-  line-height: 1.5;
-  display: inline-flex;
-  gap: 0.25rem;
-  margin-top: 0.25rem;
-}
-.mc-field__validation-message.is-valid::before, .mc-field__validation-message.is-invalid::before {
-  content: "";
-  height: 1.25rem;
-  width: 1.25rem;
-}
-.mc-field__validation-message.is-valid {
-  color: var(--field-color-validation-valid, #117f03);
-}
-.mc-field__validation-message.is-valid::before {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-valid, %23117f03)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M3.25 10c0-3.72792 3.02208-6.75 6.75-6.75 3.7279 0 6.75 3.02208 6.75 6.75 0 3.7279-3.0221 6.75-6.75 6.75-3.72792 0-6.75-3.0221-6.75-6.75ZM10 1.75c-4.55635 0-8.25 3.69365-8.25 8.25 0 4.5563 3.69365 8.25 8.25 8.25 4.5563 0 8.25-3.6937 8.25-8.25 0-4.55635-3.6937-8.25-8.25-8.25Zm4.2803 6.697c.2929-.2929.2929-.76777 0-1.06066-.2929-.2929-.7677-.2929-1.0606 0L9.16667 11.4393 7.197 9.46967c-.2929-.29289-.76777-.29289-1.06066 0-.2929.29289-.2929.76773 0 1.06063l2.5 2.5c.29289.2929.76776.2929 1.06066 0l4.5833-4.5833Z'/%3E%3C/svg%3E");
-}
-.mc-field__validation-message.is-invalid {
-  color: var(--field-color-validation-invalid, #c61112);
-}
-.mc-field__validation-message.is-invalid::before {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.25rem' width='1.25rem' fill='var(--field-color-validation-invalid, %23c61112)' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 3.25c-3.72792 0-6.75 3.02208-6.75 6.75 0 3.7279 3.02208 6.75 6.75 6.75 3.7279 0 6.75-3.0221 6.75-6.75 0-3.72792-3.0221-6.75-6.75-6.75ZM1.75 10c0-4.55635 3.69365-8.25 8.25-8.25 4.5563 0 8.25 3.69365 8.25 8.25 0 4.5563-3.6937 8.25-8.25 8.25-4.55635 0-8.25-3.6937-8.25-8.25ZM10 5.91667c.4142 0 .75.33578.75.75v4.16663c0 .4142-.3358.75-.75.75-.41421 0-.75-.3358-.75-.75V6.66667c0-.41422.33579-.75.75-.75Zm0 8.25003c.4602 0 .8333-.3731.8333-.8334 0-.4602-.3731-.8333-.8333-.8333-.46024 0-.83333.3731-.83333.8333 0 .4603.37309.8334.83333.8334Z'/%3E%3C/svg%3E");
-}
-.mc-field__validation-message.is-loading {
-  color: var(--field-color-validation-loading, #666666);
-}
-.mc-field--group {
-  border-width: 0;
-  margin-inline: 0;
-  padding: 0;
-}
-.mc-field--group .mc-field__content {
-  display: flex;
-  flex-direction: column;
-  flex-shrink: 0;
-  gap: 0.25rem;
-}
-.mc-field--group .mc-field__content:where(.mc-field__content--inline) {
-  flex-flow: row wrap;
-  gap: 0.25rem 1rem;
-}
-
-/* stylelint-enable string-no-newline */</style>
+<style lang="scss">
+  @import '@mozaic-ds/styles/settings-tools/_all-settings';
+  @import '@mozaic-ds/styles/components/c.checkbox';
+  @import '@mozaic-ds/styles/components/c.fields';
+</style>