bestax-migrate 2.27.0 → 2.29.0

package/dist/sources/bulma-classes/html-assets.js

@@ -162,7 +162,7 @@ export function fontAwesomeMessage(asset, quoted) {
     }
     const loads = `the page loads Font Awesome ${major} from \`${quoted}\``;
     if (major <= 4) {
-        return `${loads}, whose classes are \`fa fa-<name>\`, and bestax's \`Icon\` writes \`fas fa-<name>\`, which ${major} doesn't style: ${INSTALL_FONT_AWESOME}, then either import \`css/v4-shims.min.css\` beside it, so the page's ${major} names keep working, or move them to the current names (\`fa-envelope-o\` is \`envelope\` with \`variant="regular"\`)`;
+        return `${loads}, whose classes are \`fa fa-<name>\`: the codemod keeps that \`fa\` on each icon it converts (\`variant="fa"\`), which ${major} styles, but bestax's \`Icon\` given no \`variant\` writes \`fas fa-<name>\`, which ${major} doesn't, so for icons written from here on, ${INSTALL_FONT_AWESOME}, then either import \`css/v4-shims.min.css\` beside it, so the page's ${major} names keep working, or move them to the current names (\`fa-envelope-o\` is \`envelope\` with \`variant="regular"\`)`;
     }
     if (major === 5) {
         return `${loads}: ${ICON_LOADS_NO_FONT} and writes the \`fas fa-<name>\` classes 5 reads, so the \`<link>\` keeps working from the app's index.html; installed from npm, \`@fortawesome/fontawesome-free\` takes 6 or 7 (bestax-bulma's optional peer range is \`${FONT_AWESOME_PEER_RANGE}\`, and an older one fails \`npm install\` with ERESOLVE), which still read the 5 names`;

package/dist/sources/bulma-classes/plan.d.ts

@@ -7,8 +7,13 @@
  * renders exactly the markup the element did. Anything that would change the
  * markup is either left in `className` (a class with no prop here) or refuses
  * the whole element with a TODO (an attribute or tag the component would
- * render differently).
+ * render differently). One exception, on purpose: Font Awesome's own
+ * `<i aria-hidden="true">` alone in a `.icon` that carries nothing assistive
+ * tech reads (the table's `hiddenMovesBeside`) converts to `Icon`, which writes that attribute
+ * on the `.icon` instead (`movesHidden`), since the glyph is hidden either
+ * way.
  */
+import { type Glyph } from './glyph.js';
 export interface ElementFacts {
     tag: string;
     /** The static className, split on whitespace, in order. */
@@ -102,6 +107,26 @@ export interface ElementFacts {
      * The string the element's content renders, when it is one static text.
      */
     text?: string;
+    /**
+     * The classes the element directly around this one renders: its static
+     * ones, or for a bestax component already in the file, its root class and
+     * the flags written out as `true`, so a re-run reads the same. What an
+     * entry that `readsGlyph` reads to point at `Control`'s icon props.
+     */
+    parentTokens?: readonly string[];
+    /**
+     * The nearest <a> or <button> around this element, a bestax component that
+     * renders one included, and what names it: its own `aria-label` or
+     * `aria-labelledby`, written out, text in it outside every icon, or `none`
+     * when nothing does. `label` is left out when it can't be told from here (a
+     * name or content written as an expression, or a component the codemod
+     * doesn't know inside). What an entry that `readsGlyph` reads to say
+     * whether an icon is decoration there.
+     */
+    clickableAround?: {
+        tag: string;
+        label?: 'aria-label' | 'aria-labelledby' | 'text' | 'none';
+    };
 }
 export interface ChildFacts {
     tag: string;
@@ -178,6 +203,20 @@ export interface Conversion {
      * they go, and the element closes itself.
      */
     rendersChildren?: true;
+    /**
+     * The glyph the target renders from props in place of the element's only
+     * child (`Icon`'s `<i>`), written before the props above. The child goes,
+     * as `rendersChildren`, which is set beside it, says.
+     */
+    glyph?: Glyph;
+    /**
+     * That child carried the `aria-hidden` the target writes on the element
+     * (Font Awesome's own `<i aria-hidden="true">`), so it moves up: the one
+     * way a conversion's markup differs from the element's, on purpose, since
+     * the glyph is hidden either way. The render tests compare it with the
+     * attribute moved up, and nothing else.
+     */
+    movesHidden?: true;
     /**
      * The target renders the bare element around this one too: the component
      * takes that element's place, with its `key`.

package/dist/sources/bulma-classes/plan.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"plan.d.ts","sourceRoot":"","sources":["../../../src/sources/bulma-classes/plan.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"plan.d.ts","sourceRoot":"","sources":["../../../src/sources/bulma-classes/plan.ts"],"names":[],"mappings":"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"}

package/dist/sources/bulma-classes/plan.js

@@ -7,10 +7,15 @@
  * renders exactly the markup the element did. Anything that would change the
  * markup is either left in `className` (a class with no prop here) or refuses
  * the whole element with a TODO (an attribute or tag the component would
- * render differently).
+ * render differently). One exception, on purpose: Font Awesome's own
+ * `<i aria-hidden="true">` alone in a `.icon` that carries nothing assistive
+ * tech reads (the table's `hiddenMovesBeside`) converts to `Icon`, which writes that attribute
+ * on the `.icon` instead (`movesHidden`), since the glyph is hidden either
+ * way.
  */
 import { FORWARDS_REF, HELPER_PROPS, HELPER_TOKENS, inTagSet, legacyHint, modifierFor, numberAttrsOf, placedFor, PRECEDENCE, rootFor, WRAPPER_OWN_PROPS, wrapperFor, } from './class-map.js';
-import { readGlyph } from './glyph.js';
+import { glyphProps, readDrawnGlyph, readGlyph, readHiddenGlyph, } from './glyph.js';
+import { aTag } from '../_shared/articles.js';
 import { ruleId } from './rules.js';
 /** The button text `File` renders when it's given none. */
 const DEFAULT_FILE_LABEL = 'Choose a file\u2026';
@@ -125,6 +130,24 @@ export function plan(facts) {
         conversion: null,
         todos: [...todos, { rule: ruleId(kind, token), message }],
     });
+    // ---- The tag, first ------------------------------------------------------
+    // On a tag the target can't render, the tag is the work that comes first:
+    // any other refusal would ask for work (an attribute added or dropped, a
+    // child moved) that a re-run then refuses on the tag anyway.
+    let renders = entry.tag;
+    if (entry.sizeDrivesTag && tag !== 'p') {
+        const size = propsFrom(entry, tokens, tag, root, facts.attributes).writes.get('size');
+        if (size !== undefined)
+            renders = `h${size}`;
+    }
+    let as;
+    if (renders !== tag) {
+        const reachable = entry.as === 'any' || (entry.as?.includes(tag) ?? false);
+        if (!reachable) {
+            return refuse('tag', target, `bestax \`${target}\` renders ${tagsItReaches(entry)}, not ${aTag(tag)}; keep the markup, or change the tag and re-run`);
+        }
+        as = tag;
+    }
     // ---- Refusals: the component would render something else ---------------
     if (facts.hasSpread) {
         return refuse('spread', target, `this element spreads props, which bestax \`${target}\` may read differently than the element did (a spread \`className\` merges with its classes instead of replacing them); convert it to \`${target}\` by hand`);
@@ -227,7 +250,19 @@ export function plan(facts) {
         : naming === 'unsure'
             ? { ...unnamed, ...entry.namedDefaults.defaults }
             : unnamed;
-    const missing = [...Object.entries(defaults), ...written].filter(([name]) => !attributes.has(name));
+    // Font Awesome's own markup hides the <i> rather than the element around
+    // it, and a target that renders the glyph from props writes the same
+    // `aria-hidden` on the element in its place: it moves up, and the glyph is
+    // hidden either way. The one difference in markup a conversion makes, on
+    // purpose; the render tests compare it with the attribute moved up. Only
+    // onto an element that carries nothing assistive tech reads, by name and
+    // whatever the value: an expression may render as anything.
+    const moved = entry.readsGlyph &&
+        defaults['aria-hidden'] === 'true' &&
+        [...attributes.keys()].every(name => movesBeside(entry, name))
+        ? readHiddenGlyph(facts.soleChild)
+        : undefined;
+    const missing = [...Object.entries(defaults), ...written].filter(([name]) => !attributes.has(name) && !(moved && name === 'aria-hidden'));
     const drop = [];
     for (const name of entry.untypedAttrs ?? []) {
         if (!attributes.has(name))
@@ -316,14 +351,17 @@ export function plan(facts) {
     }
     if (missing.length > 0) {
         const list = missing.map(([name, value]) => `\`${name}="${value}"\``);
-        return refuse('defaults', target, `bestax \`${target}\` renders ${list.join(' and ')} when the element does not set ${missing.length === 1 ? 'it' : 'them'}; add ${missing.length === 1 ? 'it' : 'them'} here if that is what you want, then re-run`);
+        const usual = `bestax \`${target}\` renders ${list.join(' and ')} when the element does not set ${missing.length === 1 ? 'it' : 'them'}; add ${missing.length === 1 ? 'it' : 'them'} here if that is what you want, then re-run`;
+        return refuse('defaults', target, entry.readsGlyph && naming === 'unnamed'
+            ? hiddenAdvice(facts, entry, usual)
+            : usual);
     }
     for (const [name, rule] of Object.entries(entry.writesAttr ?? {})) {
         const value = attributes.get(name);
         if (!rule.on.includes(tag) || value === undefined)
             continue;
         if (typeof value !== 'string' || !rule.keeps.includes(value)) {
-            return refuse('attr', name, `bestax \`${target}\` keeps a <${tag}>'s \`${name}\` only as ${orList(rule.keeps)}, and writes \`${name}="${rule.fallback}"\` in place of anything else, so this one converts only ${rule.implicit ? `with no \`${name}\` or as one of those` : 'as one of those, written out'}; keep this element as markup`);
+            return refuse('attr', name, `bestax \`${target}\` keeps ${aTag(tag)}'s \`${name}\` only as ${orList(rule.keeps)}, and writes \`${name}="${rule.fallback}"\` in place of anything else, so this one converts only ${rule.implicit ? `with no \`${name}\` or as one of those` : 'as one of those, written out'}; keep this element as markup`);
         }
     }
     for (const [name, tags] of Object.entries(entry.dropsAttr ?? {})) {
@@ -334,32 +372,16 @@ export function plan(facts) {
             // A `name` on an <a> still names the target of a `#fragment` link.
             const anchored = name === 'name' && tag === 'a';
             return refuse('drops', target, visible
-                ? `bestax \`${target}\` drops \`disabled\` on a <${tag}>, and Bulma styles a disabled \`.${rootLabel(facts.tokens)}\` on any tag, so converting would change how it looks; keep this element as markup`
+                ? `bestax \`${target}\` drops \`disabled\` on ${aTag(tag)}, and Bulma styles a disabled \`.${rootLabel(facts.tokens)}\` on any tag, so converting would change how it looks; keep this element as markup`
                 : anchored
                     ? `bestax \`${target}\` drops \`name\` on an <a>, where it still names the target of a \`#fragment\` link; keep this element as markup, or move the target to an \`id\`, then re-run`
-                    : `bestax \`${target}\` drops \`${name}\` on a <${tag}>, where it does nothing anyway; remove it, then re-run`);
+                    : `bestax \`${target}\` drops \`${name}\` on ${aTag(tag)}, where it does nothing anyway; remove it, then re-run`);
         }
     }
     // ---- Tokens → props ---------------------------------------------------------
     const fromTokens = propsFrom(entry, tokens, tag, root, attributes);
     const { writes, converted } = fromTokens;
     numbers.push(...fromTokens.numbers);
-    // ---- The tag ------------------------------------------------------------
-    let renders = entry.tag;
-    if (entry.sizeDrivesTag && tag !== 'p' && writes.has('size')) {
-        renders = `h${writes.get('size')}`;
-    }
-    let as;
-    if (renders !== tag) {
-        const reachable = entry.as === 'any' || (entry.as?.includes(tag) ?? false);
-        if (!reachable) {
-            if (entry.otherTagsStay?.tags.includes(tag)) {
-                return { conversion: null, todos };
-            }
-            return refuse('tag', target, `bestax \`${target}\` renders ${tagsItReaches(entry)}, not a <${tag}>; keep the markup, or change the tag and re-run`);
-        }
-        as = tag;
-    }
     // Last, since what the children are can change once a refusal leaves
     // them to convert on their own, and a re-run has to find the same reason.
     let icons;
@@ -441,6 +463,8 @@ export function plan(facts) {
     if (entry.classNameReplaces && (rest.length > 0 || conditionalStays)) {
         return refuse('attr', 'className', `bestax \`${target}\` writes a \`className\` it's given in place of \`.${root}\`, so this converts only with no other class; keep it as markup`);
     }
+    // A glyph the target renders from props takes the place of the only child.
+    const glyph = moved ?? (entry.readsGlyph ? readGlyph(facts.soleChild) : undefined);
     return {
         conversion: {
             target,
@@ -449,9 +473,11 @@ export function plan(facts) {
             drop,
             numbers,
             ...(absorbed ? { absorbs: absorbed } : {}),
-            ...(counts || entry.rendersText !== undefined
+            ...(counts || entry.rendersText !== undefined || glyph
                 ? { rendersChildren: true }
                 : {}),
+            ...(glyph ? { glyph } : {}),
+            ...(moved ? { movesHidden: true } : {}),
             ...(parent ? { replacesParent: true } : {}),
             ...(conditional.length > 0 ? { conditional } : {}),
             ...(icons ? { icons } : {}),
@@ -555,6 +581,128 @@ function namingOf(entry, attributes) {
     }
     return given.includes(null) ? 'unsure' : 'unnamed';
 }
+/**
+ * Whether an element may carry `name` and still take Font Awesome's
+ * `aria-hidden` up off its <i>, by the table's `hiddenMovesBeside`, where a
+ * name ending in `*` stands for every attribute it starts.
+ */
+function movesBeside(entry, name) {
+    return (entry.readsGlyph?.hiddenMovesBeside ?? []).some(allowed => allowed.endsWith('*')
+        ? name.startsWith(allowed.slice(0, -1))
+        : name === allowed);
+}
+/**
+ * What to do about an unnamed element whose target hides it with an
+ * `aria-hidden` it doesn't carry, and that renders a glyph from props
+ * (`Icon`), for its `defaults` TODO: from what it holds (Font Awesome's own
+ * `<i aria-hidden>`, the `<svg>` its script draws) and where it sits (a
+ * link or button its label names, or one nothing names). Each says what a
+ * re-run converts it to once the attribute is in place, when that's sure,
+ * and inside a `.control` with icons, the `Control` prop that renders it.
+ * `usual` is the message for anything else.
+ */
+function hiddenAdvice(facts, entry, usual) {
+    const target = entry.target;
+    const sole = facts.soleChild;
+    // Font Awesome's own markup hides the <i>, not the `.icon` around it.
+    const flag = sole?.attributes.get('aria-hidden');
+    const hiddenFont = sole?.tag === 'i' && (flag === 'true' || flag === true);
+    const drawn = readDrawnGlyph(sole);
+    // The element as a re-run would find it, the attribute in place (moved up
+    // off the <i> that carries it): the planner says what that converts to.
+    const attributes = new Map(facts.attributes).set('aria-hidden', 'true');
+    const retry = plan({
+        ...facts,
+        attributes,
+        ...(hiddenFont && {
+            soleChild: {
+                ...sole,
+                attributes: new Map([...sole.attributes].filter(([name]) => name !== 'aria-hidden')),
+            },
+        }),
+    }).conversion;
+    // Only where nothing in it converts on its own, which would change what a
+    // re-run finds: an <i> the glyph takes the place of, or an <svg>.
+    const outcome = retry?.glyph
+        ? `, and this converts to \`${target}\` with ${jsxProps(glyphProps(retry.glyph))}`
+        : retry && sole?.tag === 'svg'
+            ? `, and this converts to \`${target}\` around the <svg> as it is`
+            : '';
+    const hint = controlHint(facts, retry, retry?.glyph ?? drawn);
+    // A bare <i> naming a glyph moves it up by itself, onto an element that
+    // carries nothing else assistive tech reads, so this one carries more.
+    const exposed = readHiddenGlyph(sole)
+        ? [...facts.attributes.keys()].find(name => !movesBeside(entry, name))
+        : undefined;
+    if (exposed) {
+        return `bestax \`${target}\` takes Font Awesome's \`aria-hidden\` up off a bare <i> like this one only onto a \`.icon\` that carries nothing assistive tech reads, and this one carries \`${exposed}\`, which the move would hide, or, beside a \`role\` or \`tabIndex\`, leave with no \`aria-hidden\` at all; if the icon means something, give the \`.icon\` an \`aria-label\` and \`role="img"\`, and if it is decoration, drop \`${exposed}\`, then re-run`;
+    }
+    if (hiddenFont) {
+        // A bare <i> naming a glyph moves it up by itself, so this one isn't.
+        return `bestax \`${target}\` writes \`aria-hidden="true"\` on the \`.icon\`, and takes it from the <i> inside only when that <i> is empty, carries nothing else and names a glyph it renders from props, which this one doesn't; the \`.icon\` holds nothing else, so the attribute hides the same glyph there: move it up onto the \`.icon\`, then re-run${outcome}${hint}`;
+    }
+    if (drawn) {
+        return `this \`.icon\` holds the <svg> Font Awesome's script draws in place of an <i>, and bestax \`${target}\` writes \`aria-hidden="true"\` on the \`.icon\`, which this one doesn't carry; add it, then re-run${outcome}; or write \`${target}\` with ${jsxProps(glyphProps(drawn))} in its place, which renders the <i> the script draws from, and shows only where Font Awesome's stylesheet or script is loaded${hint}`;
+    }
+    const around = facts.clickableAround;
+    const label = around?.label;
+    const tag = around && aTag(around.tag);
+    if (label && label !== 'none') {
+        const by = label === 'text' ? 'its own text' : `its \`${label}\``;
+        return `this \`.icon\` sits in ${tag} that ${by} names, so the icon is decoration there, and bestax \`${target}\` writes \`aria-hidden="true"\` on an icon with no name of its own, which this one doesn't carry; add it, then re-run${outcome}${hint}`;
+    }
+    if (label === 'none' && readGlyph(sole)) {
+        return `nothing names the <${around.tag}> around this \`.icon\`: it has no \`aria-label\` and no text outside its icons, and a font icon's glyph is no name a screen reader can read; give the <${around.tag}> an \`aria-label\` that says what it does, then add \`aria-hidden="true"\` here, which bestax \`${target}\` writes on an icon with no name of its own, and re-run${outcome}${hint}`;
+    }
+    return `${usual}${outcome}${hint}`;
+}
+/**
+ * Inside a `.control` with icons on this element's side, the `Control` prop
+ * that renders the element once it's hidden as `converted` is: given the
+ * glyph, the props its classes write and nothing else, since `Control`
+ * writes the side's own class over any `className` it's given. Empty when
+ * the element carries anything more: another class, an attribute of its own
+ * or a class a condition adds.
+ */
+function controlHint(facts, converted, glyph) {
+    const side = converted?.className === 'is-left'
+        ? 'Left'
+        : converted?.className === 'is-right'
+            ? 'Right'
+            : undefined;
+    const has = `has-icons-${side?.toLowerCase()}`;
+    if (!glyph ||
+        !side ||
+        facts.conditional?.length ||
+        !facts.parentTokens?.includes('control') ||
+        !facts.parentTokens.includes(has) ||
+        facts.attributes.size > 0) {
+        return '';
+    }
+    const object = [...glyphProps(glyph), ...converted.props]
+        .map(([name, value]) => `${name}: ${value === true
+        ? 'true'
+        : converted.numbers.includes(name)
+            ? String(Number(value))
+            : valueText(value)}`)
+        .join(', ');
+    return `; or, since the \`.control\` around it has \`${has}\`, drop this \`.icon\` and give that \`Control\` \`icon${side}={{ ${object} }}\`, which it renders after its children as a \`.icon.is-${side.toLowerCase()}\` around the glyph's <i>, hidden the way \`Icon\` hides it`;
+}
+/** A glyph's props as JSX attributes, for a message. */
+function jsxProps(props) {
+    const text = props
+        .map(([name, value]) => typeof value === 'string'
+        ? `${name}="${value}"`
+        : `${name}={${valueText(value)}}`)
+        .join(' ');
+    return `\`${text}\``;
+}
+/** A prop's value as code, for a message: a list as an array of strings. */
+function valueText(value) {
+    return typeof value === 'string'
+        ? JSON.stringify(value)
+        : `[${value.map(item => JSON.stringify(item)).join(', ')}]`;
+}
 /**
  * The icons a target that `buildsIcons` builds from an element's children:
  * each `.icon` that converts to `Icon` on its own and holds a glyph `Icon`
@@ -583,25 +731,13 @@ function buildIcons(children, target) {
             const loose = [...child.attributes.keys()].some(name => name === 'key' ||
                 name === 'ref' ||
                 (name.includes('-') && !name.startsWith('aria-')));
-            const glyph = readGlyph(child.soleChild);
+            // The `.icon` read its glyph itself when it converted on its own.
+            const glyph = icon.glyph;
             if (!glyph || loose)
                 return { why: shape };
-            const props = [
-                ['library', glyph.library],
-                ['name', glyph.name],
-            ];
-            if (glyph.variant)
-                props.push(['variant', glyph.variant]);
-            const { features } = glyph;
-            if (features) {
-                props.push([
-                    'features',
-                    features.length === 1 ? features[0] : features,
-                ]);
-            }
             icons.push({
                 index,
-                props: [...props, ...icon.props],
+                props: [...glyphProps(glyph), ...icon.props],
                 className: icon.className,
                 drop: icon.drop,
                 numbers: icon.numbers,
@@ -890,7 +1026,7 @@ function planFold(facts, wrapper, todos) {
         todos: [...todos, { rule: ruleId(kind, token), message }],
     });
     if (facts.tag !== entry.tag) {
-        return refuse('tag', target, `bestax ${renders} renders \`.${wrapper}\` on a <${entry.tag}>, not a <${facts.tag}>; keep the markup, or change the tag and re-run`);
+        return refuse('tag', target, `bestax ${renders} renders \`.${wrapper}\` on ${aTag(entry.tag)}, not ${aTag(facts.tag)}; keep the markup, or change the tag and re-run`);
     }
     if (facts.hasSpread) {
         return refuse('spread', target, `this element spreads props, and bestax ${renders} renders \`.${wrapper}\` with none of its own; keep it as markup`);

package/dist/sources/bulma-classes/transform.d.ts

@@ -4,7 +4,8 @@
  * Unlike the library sources there is no import to anchor on: a file is in
  * scope when a lowercase JSX element carries a `className` with a Bulma class
  * `class-map.ts` knows. Each such element goes through `plan()`, which
- * converts it only when the component renders exactly the same markup.
+ * converts it only when the component renders exactly the same markup, but
+ * for the one exception it states (Font Awesome's hidden `<i>`).
  *
  * Passes, in order:
  *   1. the shared stylesheet-import pass (a no-op under the default `keep`)

package/dist/sources/bulma-classes/transform.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"transform.d.ts","sourceRoot":"","sources":["../../../src/sources/bulma-classes/transform.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,KAAK,EAAE,GAAG,EAAW,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE1D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AA26BvD,MAAM,CAAC,OAAO,UAAU,SAAS,CAC/B,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,EACR,OAAO,GAAE,gBAAqB,GAC7B,MAAM,GAAG,SAAS,CA02BpB"}
+{"version":3,"file":"transform.d.ts","sourceRoot":"","sources":["../../../src/sources/bulma-classes/transform.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,KAAK,EAAE,GAAG,EAAW,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE1D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAkiCvD,MAAM,CAAC,OAAO,UAAU,SAAS,CAC/B,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,EACR,OAAO,GAAE,gBAAqB,GAC7B,MAAM,GAAG,SAAS,CAs9BpB"}