@fluentui/web-components 3.0.0-beta.9 → 3.0.0-beta.91

package/dist/esm/radio/radio.styles.js

@@ -1,118 +1,125 @@
 import { css } from '@microsoft/fast-element';
-import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation/utilities.js';
-import { borderRadiusCircular, borderRadiusSmall, colorCompoundBrandForeground1, colorCompoundBrandForeground1Pressed, colorCompoundBrandStrokeHover, colorCompoundBrandStrokePressed, colorNeutralForeground2, colorNeutralForeground3, colorNeutralForegroundDisabled, colorNeutralStrokeAccessible, colorNeutralStrokeAccessibleHover, colorNeutralStrokeAccessiblePressed, colorStrokeFocus1, colorStrokeFocus2, fontFamilyBase, fontSizeBase300, fontWeightRegular, lineHeightBase300, spacingHorizontalS, spacingHorizontalXS, spacingVerticalS, } from '../theme/design-tokens.js';
-/** Radio styles
+import { checkedState, disabledState } from '../styles/states/index.js';
+import { borderRadiusCircular, borderRadiusMedium, colorCompoundBrandBackground, colorCompoundBrandBackgroundHover, colorCompoundBrandBackgroundPressed, colorCompoundBrandStroke, colorNeutralBackground1, colorNeutralBackgroundDisabled, colorNeutralForegroundInverted, colorNeutralStrokeAccessible, colorNeutralStrokeAccessibleHover, colorNeutralStrokeAccessiblePressed, colorNeutralStrokeDisabled, colorStrokeFocus2, colorTransparentStroke, strokeWidthThick, strokeWidthThin, } from '../theme/design-tokens.js';
+import { forcedColorsStylesheetBehavior } from '../utils/behaviors/match-media-stylesheet-behavior.js';
+import { display } from '../utils/display.js';
+/**
+ * Styles for the Radio component
+ *
  * @public
  */
 export const styles = css `
-  ${display('inline-grid')}
+  ${display('inline-flex')}
 
   :host {
-    grid-auto-flow: column;
-    grid-template-columns: max-content;
-    gap: var(${spacingHorizontalXS});
-    align-items: center;
-    height: 32px;
-    cursor: pointer;
-    outline: none;
-    position: relative;
-    user-select: none;
-    color: blue;
-    color: var(--state-color, var(${colorNeutralForeground3}));
-    padding-inline-end: var(${spacingHorizontalS});
-    --control-border-color: var(${colorNeutralStrokeAccessible});
-    --checked-indicator-background-color: var(${colorCompoundBrandForeground1});
-    --state-color: var(${colorNeutralForeground3});
-  }
-  :host([disabled]) {
-    --control-border-color: var(${colorNeutralForegroundDisabled});
-    --checked-indicator-background-color: var(${colorNeutralForegroundDisabled});
-    --state-color: var(${colorNeutralForegroundDisabled});
-  }
-  .label {
-    cursor: pointer;
-    font-family: var(${fontFamilyBase});
-    font-size: var(${fontSizeBase300});
-    font-weight: var(${fontWeightRegular});
-    line-height: var(${lineHeightBase300});
-  }
-  .label__hidden {
-    display: none;
-  }
-  .control {
+    --size: 16px;
+    aspect-ratio: 1;
+    background-color: ${colorNeutralBackground1};
+    border: ${strokeWidthThin} solid ${colorNeutralStrokeAccessible};
+    border-radius: ${borderRadiusCircular};
     box-sizing: border-box;
-    align-items: center;
-    border: 1px solid var(--control-border-color, var(${colorNeutralStrokeAccessible}));
-    border-radius: var(${borderRadiusCircular});
-    display: flex;
-    height: 16px;
-    justify-content: center;
-    margin: var(${spacingVerticalS}) var(${spacingHorizontalS});
     position: relative;
-    width: 16px;
-    justify-self: center;
+    width: var(--size);
   }
-  .checked-indicator {
-    border-radius: var(${borderRadiusCircular});
-    height: 10px;
-    opacity: 0;
-    width: 10px;
-  }
-  :host([aria-checked='false']:hover) .control {
-    color: var(${colorNeutralForeground2});
-  }
-  :host(:focus-visible) {
-    border-radius: var(${borderRadiusSmall});
-    box-shadow: 0 0 0 3px var(${colorStrokeFocus2});
-    outline: 1px solid var(${colorStrokeFocus1});
+
+  :host([size='large']) {
+    --size: 20px;
   }
-  :host(:hover) .control {
-    border-color: var(${colorNeutralStrokeAccessibleHover});
+
+  .checked-indicator {
+    aspect-ratio: 1;
+    border-radius: ${borderRadiusCircular};
+    color: ${colorNeutralForegroundInverted};
+    inset: 0;
+    margin: auto;
+    position: absolute;
+    width: calc(var(--size) * 0.625);
   }
-  :host(:active) .control {
-    border-color: var(${colorNeutralStrokeAccessiblePressed});
+
+  :host(:not([slot='input']))::after {
+    content: '' / '';
+    position: absolute;
+    display: block;
+    inset: -8px;
+    box-sizing: border-box;
+    outline: none;
+    border: ${strokeWidthThick} solid ${colorTransparentStroke};
+    border-radius: ${borderRadiusMedium};
   }
-  :host([aria-checked='true']) .checked-indicator {
-    opacity: 1;
+
+  :host(:not([slot='input']):focus-visible)::after {
+    border-color: ${colorStrokeFocus2};
   }
-  :host([aria-checked='true']) .control {
-    border-color: var(--control-border-color, var(${colorNeutralStrokeAccessible}));
+
+  :host(:hover) {
+    border-color: ${colorNeutralStrokeAccessibleHover};
   }
-  :host([aria-checked='true']) .checked-indicator {
-    background-color: var(--checked-indicator-background-color, var(${colorCompoundBrandForeground1}));
+
+  :host(${checkedState}) {
+    border-color: ${colorCompoundBrandStroke};
   }
-  :host([aria-checked='true']:hover) .control {
-    border-color: var(${colorCompoundBrandStrokeHover});
+
+  :host(${checkedState}) .checked-indicator {
+    background-color: ${colorCompoundBrandBackground};
   }
-  :host([aria-checked='true']:hover) .checked-indicator {
-    background-color: var(${colorCompoundBrandStrokeHover});
+
+  :host(${checkedState}:hover) .checked-indicator {
+    background-color: ${colorCompoundBrandBackgroundHover};
   }
-  :host([aria-checked='true']:active) .control {
-    border-color: var(${colorCompoundBrandStrokePressed});
+
+  :host(:active) {
+    border-color: ${colorNeutralStrokeAccessiblePressed};
   }
-  :host([aria-checked='true']:active) .checked-indicator {
-    background: var(${colorCompoundBrandForeground1Pressed});
+
+  :host(${checkedState}:active) .checked-indicator {
+    background-color: ${colorCompoundBrandBackgroundPressed};
   }
-  :host([disabled]) {
-    color: var(${colorNeutralForegroundDisabled});
-    pointer-events: none;
+
+  :host(:focus-visible) {
+    outline: none;
   }
-  :host([disabled]) .control {
-    pointer-events: none;
-    border-color: var(${colorNeutralForegroundDisabled});
+
+  :host(${disabledState}) {
+    background-color: ${colorNeutralBackgroundDisabled};
+    border-color: ${colorNeutralStrokeDisabled};
   }
-  :host([disabled]) .checked-indicator {
-    background: var(${colorNeutralForegroundDisabled});
+
+  :host(${checkedState}${disabledState}) .checked-indicator {
+    background-color: ${colorNeutralStrokeDisabled};
   }
 `.withBehaviors(forcedColorsStylesheetBehavior(css `
-    :host .control {
-      border-color: InactiveBorder;
+    :host {
+      border-color: FieldText;
+    }
+
+    :host(:not([slot='input']:focus-visible))::after {
+      border-color: Canvas;
+    }
+
+    :host(:not(${disabledState}):hover),
+    :host(:not([slot='input']):focus-visible)::after {
+      border-color: Highlight;
+    }
+
+    .checked-indicator {
+      color: HighlightText;
+    }
+
+    :host(${checkedState}) .checked-indicator {
+      background-color: FieldText;
     }
-    :host([aria-checked='true']) .checked-indicator,
-    :host([aria-checked='true']:active) .checked-indicator,
-    :host([aria-checked='true']:hover) .checked-indicator {
+
+    :host(${checkedState}:not(${disabledState}):hover) .checked-indicator {
       background-color: Highlight;
-      border-color: ActiveBorder;
+    }
+
+    :host(${disabledState}) {
+      border-color: GrayText;
+      color: GrayText;
+    }
+
+    :host(${disabledState}${checkedState}) .checked-indicator {
+      background-color: GrayText;
     }
   `));
 //# sourceMappingURL=radio.styles.js.map

package/dist/esm/radio/radio.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.styles.js","sourceRoot":"","sources":["../../../src/radio/radio.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,8BAA8B,EAAE,MAAM,yCAAyC,CAAC;AAClG,OAAO,EACL,oBAAoB,EACpB,iBAAiB,EACjB,6BAA6B,EAC7B,oCAAoC,EACpC,6BAA6B,EAC7B,+BAA+B,EAC/B,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,iBAAiB,EACjB,iBAAiB,EACjB,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,mBAAmB,EACnB,gBAAgB,GACjB,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;;;eAKX,mBAAmB;;;;;;;;oCAQE,uBAAuB;8BAC7B,kBAAkB;kCACd,4BAA4B;gDACd,6BAA6B;yBACpD,uBAAuB;;;kCAGd,8BAA8B;gDAChB,8BAA8B;yBACrD,8BAA8B;;;;uBAIhC,cAAc;qBAChB,eAAe;uBACb,iBAAiB;uBACjB,iBAAiB;;;;;;;;wDAQgB,4BAA4B;yBAC3D,oBAAoB;;;;kBAI3B,gBAAgB,SAAS,kBAAkB;;;;;;yBAMpC,oBAAoB;;;;;;iBAM5B,uBAAuB;;;yBAGf,iBAAiB;gCACV,iBAAiB;6BACpB,iBAAiB;;;wBAGtB,iCAAiC;;;wBAGjC,mCAAmC;;;;;;oDAMP,4BAA4B;;;sEAGV,6BAA6B;;;wBAG3E,6BAA6B;;;4BAGzB,6BAA6B;;;wBAGjC,+BAA+B;;;sBAGjC,oCAAoC;;;iBAGzC,8BAA8B;;;;;wBAKvB,8BAA8B;;;sBAGhC,8BAA8B;;CAEnD,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;;;;;;GAUjC,CAAC,CACH,CAAC"}
+{"version":3,"file":"radio.styles.js","sourceRoot":"","sources":["../../../src/radio/radio.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EACL,oBAAoB,EACpB,kBAAkB,EAClB,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,wBAAwB,EACxB,uBAAuB,EACvB,8BAA8B,EAC9B,8BAA8B,EAC9B,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,0BAA0B,EAC1B,iBAAiB,EACjB,sBAAsB,EACtB,gBAAgB,EAChB,eAAe,GAChB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,8BAA8B,EAAE,MAAM,uDAAuD,CAAC;AACvG,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;;;wBAKF,uBAAuB;cACjC,eAAe,UAAU,4BAA4B;qBAC9C,oBAAoB;;;;;;;;;;;;qBAYpB,oBAAoB;aAC5B,8BAA8B;;;;;;;;;;;;;;cAc7B,gBAAgB,UAAU,sBAAsB;qBACzC,kBAAkB;;;;oBAInB,iBAAiB;;;;oBAIjB,iCAAiC;;;UAG3C,YAAY;oBACF,wBAAwB;;;UAGlC,YAAY;wBACE,4BAA4B;;;UAG1C,YAAY;wBACE,iCAAiC;;;;oBAIrC,mCAAmC;;;UAG7C,YAAY;wBACE,mCAAmC;;;;;;;UAOjD,aAAa;wBACC,8BAA8B;oBAClC,0BAA0B;;;UAGpC,YAAY,GAAG,aAAa;wBACd,0BAA0B;;CAEjD,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;;;;;iBASnB,aAAa;;;;;;;;;YASlB,YAAY;;;;YAIZ,YAAY,QAAQ,aAAa;;;;YAIjC,aAAa;;;;;YAKb,aAAa,GAAG,YAAY;;;GAGrC,CAAC,CACH,CAAC"}

package/dist/esm/radio/radio.template.js

@@ -1,32 +1,29 @@
-import { html, slotted } from '@microsoft/fast-element';
-import { staticallyCompose, whitespaceFilter } from '../utils/index.js';
+import { html } from '@microsoft/fast-element';
+import { staticallyCompose } from '../utils/index.js';
+const checkedIndicator = html.partial(/* html */ `
+    <span part="checked-indicator" class="checked-indicator" role="presentation"></span>
+`);
+/**
+ * Generates a template for the {@link (Radio:class)} component.
+ *
+ * @param options - Radio configuration options
+ * @public
+ */
 export function radioTemplate(options = {}) {
     return html `
     <template
-      role="radio"
-      aria-checked="${x => x.checked}"
-      aria-required="${x => x.required}"
-      aria-disabled="${x => x.disabled}"
-      @keypress="${(x, c) => x.keypressHandler(c.event)}"
+      @click="${(x, c) => x.clickHandler(c.event)}"
+      @keydown="${(x, c) => x.keydownHandler(c.event)}"
+      @keyup="${(x, c) => x.keyupHandler(c.event)}"
     >
-      <div part="control" class="control">
-        <slot name="checked-indicator"> ${staticallyCompose(options.checkedIndicator)} </slot>
-      </div>
-      <label
-        part="label"
-        class="${x => { var _a; return ['label', !((_a = x.defaultSlottedNodes) === null || _a === void 0 ? void 0 : _a.length) && 'label__hidden'].filter(Boolean).join(' '); }}"
-      >
-        <slot
-          ${slotted({
-        property: 'defaultSlottedNodes',
-        filter: whitespaceFilter,
-    })}
-        ></slot>
-      </label>
+      <slot name="checked-indicator">${staticallyCompose(options.checkedIndicator)}</slot>
     </template>
   `;
 }
-export const template = radioTemplate({
-    checkedIndicator: html `<div part="checked-indicator" class="checked-indicator"></div>`,
-});
+/**
+ * Template for the Radio component
+ *
+ * @public
+ */
+export const template = radioTemplate({ checkedIndicator });
 //# sourceMappingURL=radio.template.js.map

package/dist/esm/radio/radio.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.template.js","sourceRoot":"","sources":["../../../src/radio/radio.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,IAAI,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAC7E,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAGxE,MAAM,UAAU,aAAa,CAAkB,UAAwB,EAAE;IACvE,OAAO,IAAI,CAAG;;;sBAGM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO;uBACb,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;uBACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;mBACnB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,KAAsB,CAAC;;;0CAG9B,iBAAiB,CAAC,OAAO,CAAC,gBAAgB,CAAC;;;;iBAIpE,CAAC,CAAC,EAAE,WAAC,OAAA,CAAC,OAAO,EAAE,CAAC,CAAA,MAAA,CAAC,CAAC,mBAAmB,0CAAE,MAAM,CAAA,IAAI,eAAe,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA,EAAA;;;YAGhG,OAAO,CAAC;QACR,QAAQ,EAAE,qBAAqB;QAC/B,MAAM,EAAE,gBAAgB;KACzB,CAAC;;;;GAIT,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAA+B,aAAa,CAAC;IAChE,gBAAgB,EAAE,IAAI,CAAA,gEAAgE;CACvF,CAAC,CAAC"}
+{"version":3,"file":"radio.template.js","sourceRoot":"","sources":["../../../src/radio/radio.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAItD,MAAM,gBAAgB,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC;;CAEhD,CAAC,CAAC;AAEH;;;;;GAKG;AACH,MAAM,UAAU,aAAa,CAAkB,UAAwB,EAAE;IACvE,OAAO,IAAI,CAAG;;gBAEA,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;kBAC7C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAsB,CAAC;gBACtD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAsB,CAAC;;uCAE3B,iBAAiB,CAAC,OAAO,CAAC,gBAAgB,CAAC;;GAE/E,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAA+B,aAAa,CAAC,EAAE,gBAAgB,EAAE,CAAC,CAAC"}

package/dist/esm/radio-group/index.js

@@ -1,4 +1,5 @@
-export * from './radio-group.js';
+export { RadioGroup } from './radio-group.js';
+export { RadioGroupOrientation } from './radio-group.options.js';
 export { definition as RadioGroupDefinition } from './radio-group.definition.js';
 export { styles as RadioGroupStyles } from './radio-group.styles.js';
 export { template as RadioGroupTemplate } from './radio-group.template.js';

package/dist/esm/radio-group/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/radio-group/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,UAAU,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACjF,OAAO,EAAE,MAAM,IAAI,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,EAAE,QAAQ,IAAI,kBAAkB,EAAE,MAAM,2BAA2B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/radio-group/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,UAAU,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACjF,OAAO,EAAE,MAAM,IAAI,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,EAAE,QAAQ,IAAI,kBAAkB,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/esm/radio-group/radio-group.bench.js

@@ -0,0 +1,21 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { definition as radioDefinition } from '../radio/radio.definition.js';
+import { definition as radioGroupDefinition } from './radio-group.definition.js';
+radioGroupDefinition.define(FluentDesignSystem.registry);
+radioDefinition.define(FluentDesignSystem.registry);
+const itemRenderer = () => {
+    const radioGroup = document.createElement('fluent-radio-group');
+    const radio = document.createElement('fluent-radio');
+    const radio2 = document.createElement('fluent-radio');
+    const radio3 = document.createElement('fluent-radio');
+    radio.appendChild(document.createTextNode('Radio 1'));
+    radio2.appendChild(document.createTextNode('Radio 2'));
+    radio3.appendChild(document.createTextNode('Radio 3'));
+    radioGroup.appendChild(radio);
+    radioGroup.appendChild(radio2);
+    radioGroup.appendChild(radio3);
+    return radioGroup;
+};
+export default itemRenderer;
+export { tests } from '../utils/benchmark-wrapper.js';
+//# sourceMappingURL=radio-group.bench.js.map

package/dist/esm/radio-group/radio-group.bench.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.bench.js","sourceRoot":"","sources":["../../../src/radio-group/radio-group.bench.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,IAAI,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC7E,OAAO,EAAE,UAAU,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAEjF,oBAAoB,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;AACzD,eAAe,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;AAEpD,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;IAChE,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;IACrD,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;IACtD,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;IACtD,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,CAAC;IACtD,MAAM,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,CAAC;IACvD,MAAM,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,CAAC;IAEvD,UAAU,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IAC9B,UAAU,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IAC/B,UAAU,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IAE/B,OAAO,UAAU,CAAC;AACpB,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC"}