@panneau/fields 5.0.0-alpha.2 → 5.0.0-alpha.20

package/README.md

@@ -4,6 +4,7 @@ Controlled field components for the protocol's built-in field types, built on [`
 
 ```bash
 npm install @panneau/fields@^5.0.0-alpha.0 @panneau/ui@^5.0.0-alpha.0 react-aria-components react-intl
+npm install @uppy/core@^6.3.0 @uppy/aws-s3@^6.3.0   # only for @panneau/fields/uppy
 ```
 
 ```tsx
@@ -19,25 +20,40 @@ import { PanneauRoot } from '@panneau/ui';
 
 Every field takes `value`, `onChange`, `onBlur`, `errors`, `disabled`, `readOnly`, `required`, `label` and `description`, plus `className` and `xxxClassName` props for its inner elements. Fields keep no value of their own, and an empty value is `null`.
 
-| Import                      | Components                                   | Value                                          |
-| --------------------------- | -------------------------------------------- | ---------------------------------------------- |
-| `@panneau/fields/text`      | `TextField`                                  | `string`                                       |
-| `@panneau/fields/textarea`  | `TextAreaField`                              | `string`                                       |
-| `@panneau/fields/number`    | `NumberField`                                | `number`                                       |
-| `@panneau/fields/boolean`   | `BooleanField` (checkbox, switch)            | `boolean`                                      |
-| `@panneau/fields/date`      | `DateField`                                  | `'2026-10-15'`                                 |
-| `@panneau/fields/datetime`  | `DateTimeField`                              | `'2026-10-15T13:30:00Z'`, or without an offset |
-| `@panneau/fields/time`      | `TimeField`                                  | `'09:30'`                                      |
-| `@panneau/fields/select`    | `SelectField` (dropdown, radios, checkboxes) | an option's value, or a list with `multiple`   |
-| `@panneau/fields/email`     | `EmailField`                                 | `string`                                       |
-| `@panneau/fields/url`       | `UrlField`                                   | `string`, with `https://` added on blur        |
-| `@panneau/fields/color`     | `ColorField`                                 | `'#1d4ed8'`                                    |
-| `@panneau/fields/slug`      | `SlugField`, `slugify()`                     | `string`, following a `source` until edited    |
-| `@panneau/fields/localized` | `LocalizedField`                             | `{ fr: …, en: … }`                             |
-| `@panneau/fields/group`     | `GroupField`                                 | an object                                      |
-| `@panneau/fields/repeater`  | `RepeaterField` (items or typed blocks)      | a list of objects; blocks have a `type`        |
-| `@panneau/fields/relation`  | `RelationField`, `createRelationSource()`    | `{ id, label }`, or a list with `multiple`     |
-| `@panneau/fields/locales`   | `en`, `fr`                                   | deprecated: use `@panneau/intl`                |
+| Import                      | Components                                   | Value                                                               |
+| --------------------------- | -------------------------------------------- | ------------------------------------------------------------------- |
+| `@panneau/fields/text`      | `TextField`                                  | `string`                                                            |
+| `@panneau/fields/textarea`  | `TextAreaField`                              | `string`                                                            |
+| `@panneau/fields/number`    | `NumberField`                                | `number`                                                            |
+| `@panneau/fields/boolean`   | `BooleanField` (checkbox, switch)            | `boolean`                                                           |
+| `@panneau/fields/date`      | `DateField`                                  | `'2026-10-15'`                                                      |
+| `@panneau/fields/datetime`  | `DateTimeField`                              | `'2026-10-15T13:30:00Z'`, or without an offset                      |
+| `@panneau/fields/time`      | `TimeField`                                  | `'09:30'`                                                           |
+| `@panneau/fields/select`    | `SelectField` (dropdown, radios, checkboxes) | an option's value, or a list with `multiple`                        |
+| `@panneau/fields/email`     | `EmailField`                                 | `string`                                                            |
+| `@panneau/fields/url`       | `UrlField`                                   | `string`, with `https://` added on blur                             |
+| `@panneau/fields/color`     | `ColorField`, `getColorPalette()`            | `'#1d4ed8'`, or a `value` of its `palette`                          |
+| `@panneau/fields/slug`      | `SlugField`, `slugify()`, `sourceText()`     | `string`, following a `source` until edited, checked with `onCheck` |
+| `@panneau/fields/tel`       | `TelField`, `parsePhone()`                   | E.164, `'+15145550199'`; the text until the number is complete      |
+| `@panneau/fields/country`   | `CountryField`, `getCountryName()`           | `'CA'`, ISO 3166-1 alpha-2, or a list with `multiple`               |
+| `@panneau/fields/region`    | `RegionField`, `getRegions()`                | `'QC'`, the region of its country; the text for other countries     |
+| `@panneau/fields/address`   | `AddressField`, `formatAddress()`            | `{ street, unit, city, region, postalCode, country, point }`        |
+| `@panneau/fields/link`      | `LinkField`, `getLinkText()`                 | `{ type, url, page, file, label, newTab }`                          |
+| `@panneau/fields/daterange` | `DateRangeField`, `formatDateRange()`        | `{ start, end }`, days or date-times, either `null` when open       |
+| `@panneau/fields/money`     | `MoneyField`, `formatMoney()`                | `{ amount, currency }`, the amount in minor units (`1250`)          |
+| `@panneau/fields/range`     | `RangeField` (a slider)                      | `number`, `null` until moved                                        |
+| `@panneau/fields/duration`  | `DurationField`, `formatDuration()`          | a whole number of its `unit`, seconds by default                    |
+| `@panneau/fields/json`      | `JsonField`, `parseJson()`                   | an object or an array; the text while it doesn't parse              |
+| `@panneau/fields/tags`      | `TagsField`                                  | a list of strings, free or among suggestions                        |
+| `@panneau/fields/embed`     | `EmbedField`                                 | `{ url, title, thumbnailUrl, … }`, from the backend (below)         |
+| `@panneau/fields/location`  | `LocationField`, `createNominatimSource()`   | `{ lat, lng, address }`, on a map (below)                           |
+| `@panneau/fields/localized` | `LocalizedField`                             | `{ fr: …, en: … }`                                                  |
+| `@panneau/fields/group`     | `GroupField`                                 | an object                                                           |
+| `@panneau/fields/repeater`  | `RepeaterField` (items or typed blocks)      | a list of objects; blocks have a `type`                             |
+| `@panneau/fields/relation`  | `RelationField`, `createRelationSource()`    | `{ id, label }`, or a list with `multiple`                          |
+| `@panneau/fields/file`      | `FileField`                                  | a file, or a list with `multiple` (below)                           |
+| `@panneau/fields/uppy`      | `createUppyUploadSource()`                   | the upload source on Uppy 6 (below)                                 |
+| `@panneau/fields/locales`   | `en`, `fr`                                   | deprecated: use `@panneau/intl`                                     |
 
 ## From a definition
 
@@ -65,10 +81,160 @@ import {
 - **Relations** search a `RelationSource`. `createRelationSource()` makes one from any adapter with a `list()` method, such as the `DataAdapter` of `@panneau/data`. Labels come from the resource's `itemTitle`. Without a source, a relation field shows its references, read-only.
     - **Plain ids.** Values can be ids (`"12"`, `["12", "13"]`), as a product's own API gives them. The field shows their labels once the source's optional `resolve(resource, ids)` gives them (`createRelationSource()` implements it with the adapter's `get()`), and their ids until then. Fields that show the same ids share one request. `useRelationReferences()` does the same for other components.
     - **Creating from the picker.** When the source has `create(resource, text)`, the picker offers "Create “…”" for a text that matches no item, and adds the new item. `createRelationSource(adapter, { create: true })` creates it with the adapter's `create()`, with the text as its `itemTitle` (in every locale when it is localized), on the resources that allow `create`; a function gives other values. A field's `onCreate` prop replaces the source's, and can open a dialog with a full form: it resolves with the new reference, or `null`. `onCreate={null}` turns creating off.
-- **Plugin slot:** a type without an entry, such as `richtext` and `media` until Phase 2, renders a placeholder that names it. A plugin that provides the type replaces it.
+- **Files** upload through the `uploadSource` of the provider (below). Without one, the value holds the files themselves.
+- **Plugin slot:** a type without an entry, such as `richtext` and `media` without their plugins (`@panneau/editor`, `@panneau/media`), renders a placeholder that names it. A plugin that provides the type replaces it.
+
+### Compound fields
+
+A compound field (decision 0065) is a type of a plugin that carries its sub-fields in `fields`: an object of them, or a list with `multiple`. Without its plugin, it renders as a group, or as a repeater. `defineCompoundField()` makes the entry of such a type: `layout` places the rendered sub-fields of one value by name, and `summarize` gives one value as text, for the title of an item and for lists and details.
+
+```tsx
+import { defineCompoundField, restParts } from '@panneau/fields';
+
+export const TeamFieldEntry = defineCompoundField({
+    layout: ({ parts }) => (
+        <div className={styles.row}>
+            {parts.person}
+            {parts.role}
+            {restParts(parts, ['person', 'role'])}
+        </div>
+    ),
+    summarize: (member) => (typeof member.role === 'string' ? member.role : null),
+});
+
+const teamPlugin = { id: 'team', fields: { team: TeamFieldEntry } };
+```
+
+Two are ready to load: `creditsPlugin` (`@panneau/fields/credits`: `person`, `name`, `roles`, `featured`) and `sessionsPlugin` (`@panneau/fields/sessions`: `dates`, `venue`). The definition gives the sub-fields: those a site adds come after.
+
+## Files and uploads
+
+`FileField` (the `file` type) holds files that belong to an item, outside the media library: an attachment, a PDF, a CSV ([decision 0025](../../docs/decisions/0025-presigned-uploads.md)). Its value is a file, or a list of them with `multiple`:
+
+- a **stored file**, `{ name, url, mime, size }`, as items give it: the field shows it with a link;
+- an **uploaded file**, `{ upload, name, mime, size }`, once the browser sent the file to storage: requests send its `upload`;
+- the **`File` itself**, without an upload source: the adapter sends it in `multipart/form-data`.
+
+A new file replaces the file of a single value, and is added to a multiple one. `accept` and `maxSize` (from the field's `accept`, its `accept` rule and its `maxSize` rule) refuse files before they are sent. A read-only field only shows its files.
+
+**Upload sources.** An `UploadSource` makes an uploader for each field, which reports each file's progress and gives its upload once it is done. `createUppyUploadSource()` of `@panneau/fields/uppy` makes one on Uppy 6: files go to S3-compatible storage with URLs that the backend signs, in parts when they are large (they can pause and resume), and each upload is completed with the backend. `@uppy/core` and `@uppy/aws-s3` 6 are optional peer dependencies, only for that entry point: nothing else in the package imports Uppy. Make the source once, and pass it as `uploadSource` to `FieldsProvider`, or to `FormView` of `@panneau/forms`, when the definition announces direct uploads:
+
+```tsx
+import { createUppyUploadSource } from '@panneau/fields/uppy';
+
+const uploadSource =
+    definition.uploads?.mode === 'presigned' && adapter.presignedUploads !== undefined
+        ? createUppyUploadSource(
+              adapter.presignedUploads({ endpoint: definition.uploads.endpoint }),
+          )
+        : null;
+
+<FieldsProvider components={builtInFields} uploadSource={uploadSource}>
+    …
+</FieldsProvider>;
+```
+
+`adapter.presignedUploads()` comes from `@panneau/data`; `createUppyUploadSource()` only needs an object with its `signRequest()` and `complete()` (`PresignedUploadsLike`), so fields don't depend on `@panneau/data`. A field's `uploadSource` prop overrides the provider's, and `null` turns uploads off.
+
+**Building blocks.** `@panneau/fields` also exports what the file field is made of, for other fields that take files (the media field of `@panneau/media`): `useUploads()` (checks files, uploads them through a source, and gives their state), `UploadList` (a progress bar per file, with pause, resume, cancel and retry), `FilePicker` (a button and a drop zone), and `formatSize()`, `matchesMime()`, `getAccept()`, `getMaxSize()`.
 
 ## Messages
 
 Strings go through react-intl, with English defaults. Add the messages of every Panneau package to the app's with `withPanneauMessages()` from [`@panneau/intl`](../intl), or use `fieldsPlugin`, which carries the French messages of every package (`ui`, `fields` and `forms`).
 
 The package layout, scripts and API reports are explained in [`docs/packages.md`](../../docs/packages.md).
+
+## Checking a value
+
+A field with `check` in the definition, such as a `slug`, checks its value with the backend as it is typed ([decision 0032](../../docs/decisions/0032-field-checks-and-slugs.md)). The slug field then shows the URL the backend gives, says when the slug is taken with a free one to use, and is read-only when the backend says the field doesn't apply to the item. Give forms a check source for the item they edit:
+
+```tsx
+import { createFieldCheckSource } from '@panneau/fields';
+
+<FormView form={form} checkSource={createFieldCheckSource(adapter, 'pages', item?.id ?? null)} />;
+```
+
+Without one, fields don't check, and the slug shows its fixed `settings.prefix`.
+
+## Embeds and places
+
+An `embed` field shows the title and the thumbnail of a URL's video, sound or post. It gets them from the backend (`GET /embeds`), through the embed source of the provider; without one, it keeps the URL alone:
+
+```tsx
+import { createEmbedSource } from '@panneau/fields';
+
+<FieldsProvider embedSource={createEmbedSource(adapter)}>…</FieldsProvider>;
+```
+
+`providers` (the `providers` rule of a definition) lists the providers an embed may come from, `['YouTube', 'Vimeo']`: the field names them under its help, and refuses an embed of another provider as soon as its preview comes back ([decision 0058](../../docs/decisions/0058-multiple-countries-embed-providers-color-palettes.md)).
+
+A `tel` field shows the country of the number, its flag and calling code, in a menu at the start of its input, and formats the number as it is typed. Its value is in E.164 once the number is complete, and the text as typed until then, which the `tel` rule refuses. `country` (`settings.country`) is the country of a new number, the region of the user's locale without it. Formats come from `libphonenumber-js`, with its smallest metadata.
+
+With `extension` (`settings.extension`), an input after the number takes the digits of an extension, kept with the number after `;ext=`: `+15145550199;ext=123`. An extension typed or pasted after the number (`ext. 123`, `x123`, `poste 123`) moves to that input when the field is left. To send a number to a service that has no extensions, such as SMS, take the `number` of `splitExtension(value)` ([decision 0057](../../docs/decisions/0057-phone-extensions.md)).
+
+A `duration` field keeps a whole number of its `unit` (`settings.unit`: `seconds` by default, `minutes`, `hours` or `days`), typed in parts from `largestUnit` (hours by default, or `days`) down to `precision` (the unit by default). The largest part has no upper bound; hours stop at 23 below days. `formatDuration(value, { unit, precision, largestUnit })` writes it as lists show it, `2 d 4 h` ([decision 0056](../../docs/decisions/0056-duration-units.md)).
+
+A `country` field picks a country by its name in the user's locale, with its flag; `countries` limits the choices and `preferred` puts some first. A `region` field picks a state, a province or a territory of its `country` (a field's `from`, or `settings.country`): for Argentina, Australia, Brazil, Canada, China, India, Japan, Mexico and the United States, among their regions, named in English or French, and its value is the code without the country (`QC`); for other countries, it is a text ([decision 0047](../../docs/decisions/0047-countries-regions-and-phone-numbers.md)).
+
+```tsx
+<CountryField label="Country" preferred={['CA', 'US']} value={country} onChange={setCountry} />
+<RegionField label="Province" country={country} value={province} onChange={setProvince} />
+<TelField label="Phone" country="CA" value={phone} onChange={setPhone} />
+```
+
+With `multiple`, a `country` field holds several countries, in the order they were chosen: each one shows with its flag and a button that removes it, and the combo box adds another. A `color` field with a `palette` only offers its colors, in a select with their swatches: `value` is what it stores, `color` draws the swatch, and `label` names it ([decision 0058](../../docs/decisions/0058-multiple-countries-embed-providers-color-palettes.md)).
+
+```tsx
+<CountryField multiple label="Countries" value={countries} onChange={setCountries} />
+<ColorField
+    label="Background"
+    palette={[
+        { value: 'white', label: 'White', color: '#ffffff' },
+        { value: 'purple', label: 'Purple', color: '#6b21a8' },
+    ]}
+    value={background}
+    onChange={setBackground}
+/>
+```
+
+An `address` field edits the parts of a postal address: the country first, which sets the labels (_Province_, _State_), the order (the postal code last in Canada and the United States, first elsewhere) and the regions of the others, then the street, the unit, the city, the region and the postal code, normalized for its country when it loses focus (`H2X 1Y4`). `country` is the country of a new address; with one country in `countries`, the field doesn't show it. With the address search of the `FieldsProvider`'s maps, a place found fills every part, when the source gives them (`createNominatimSource()` does); with `point`, a map places the address ([decision 0054](../../docs/decisions/0054-addresses.md)).
+
+A `link` field picks the type of a link, then its URL (`https://…`), its page (searched in the resources of `pages` with the relation source), its email address (`mailto:…`), its phone number (`tel:+…`), its file (with the `media` entry of the fields context), or the text of a type of the site, with a label per locale and whether it opens in a new tab ([decision 0055](../../docs/decisions/0055-links.md)). In a form, the parts of both fields show the errors of their own paths (`address.postalCode`, `link.url`).
+
+```tsx
+<AddressField label="Address" country="CA" preferred={['CA', 'US']} value={address} onChange={setAddress} />
+<LinkField
+    label="Button"
+    types={[{ id: 'page' }, { id: 'url' }, { id: 'email' }]}
+    pages={['pages', 'events']}
+    newTab="external"
+    value={link}
+    onChange={setLink}
+/>
+```
+
+A `daterange` field edits a start and an end in one control, with one calendar for both ([decision 0053](../../docs/decisions/0053-date-ranges-and-money.md)). Its bounds are days (`2026-11-04`, both inclusive), or date-times with `time`, shown in the zone of the value, then `timeZone`, then the browser's, and written in UTC. `allDay` adds an "All day" switch, whose ranges have days as bounds and `allDay: true`; `chooseTimeZone` adds a menu of zones, kept in the value as `timeZone`. A bound left empty is `null`, which the `daterange` rule refuses unless the field's `open` allows it.
+
+A `money` field types an amount in the currency format of the locale, with the digits of its currency in ISO 4217, and keeps it in minor units, without floating point errors: `{ amount: 1250, currency: 'CAD' }` is 12.50 $. `currency` fixes the currency; `currencies` lists those a menu after the amount offers, every currency without either.
+
+```tsx
+<DateRangeField label="Dates" time allDay timeZone="America/Toronto" value={dates} onChange={setDates} />
+<MoneyField label="Price" currency="CAD" min={0} value={price} onChange={setPrice} />
+```
+
+A `location` field places a point on a Leaflet map, loaded when the field is first shown. The tiles are OpenStreetMap's by default. `maps` sets other tiles and an address search, a `GeocodingSource`: `createNominatimSource()` searches OpenStreetMap's Nominatim, whose [usage policy](https://operations.osmfoundation.org/policies/nominatim/) suits small volumes; a product with more uses its own service. Without a geocoding source, the field has no address search, and the latitude and longitude are typed or picked on the map.
+
+```tsx
+import { createNominatimSource } from '@panneau/fields';
+
+<FieldsProvider
+    maps={{
+        tiles: { url: 'https://tiles.example.com/{z}/{x}/{y}.png', attribution: '© Example' },
+        geocoding: createNominatimSource({ email: 'dev@example.com', countryCodes: ['ca'] }),
+    }}
+>
+    …
+</FieldsProvider>;
+```
+
+`<Panneau>` and `createPanneauApp()` give the embed source of their adapter, and take `maps`.

package/dist/address/AddressField.css

@@ -0,0 +1,44 @@
+/* The search, the parts, then the map. */
+.panneau-address-field-address {
+    display: flex;
+    flex-direction: column;
+    gap: var(--panneau-space-3);
+}
+
+/* The parts on a grid of six columns: the street and its unit, then the city, the region and the
+   postal code in the order of the country. */
+.panneau-address-field-parts {
+    display: grid;
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+    gap: var(--panneau-space-3);
+}
+
+.panneau-address-field-part {
+    grid-column: span 2;
+    min-width: 0;
+}
+
+.panneau-address-field-country {
+    grid-column: 1 / -1;
+}
+
+.panneau-address-field-street {
+    grid-column: span 4;
+}
+
+.panneau-address-field-map {
+    display: flex;
+    flex-direction: column;
+    gap: var(--panneau-space-2);
+}
+
+.panneau-address-field-remove {
+    align-self: flex-start;
+}
+
+@media (max-width: 40rem) {
+    .panneau-address-field-part,
+    .panneau-address-field-street {
+        grid-column: 1 / -1;
+    }
+}

package/dist/address/AddressField.d.ts

@@ -0,0 +1,37 @@
+import type { AddressPart, AddressValue } from '@panneau/protocol';
+import type { GeocodingSource, MapTiles } from '../location/types.js';
+import type { FieldEntryProps, FieldProps } from '../shared/types.js';
+export interface AddressFieldProps extends FieldProps<AddressValue> {
+    /** Dot path of the value, the prefix of the paths of its parts. Defaults to `name`. */
+    path?: string;
+    /** The country of a new address (`CA`), set as soon as a part is typed. */
+    country?: string | null;
+    /** The countries the field allows. With one, the field doesn't show the country. */
+    countries?: readonly string[];
+    /** Countries shown first: `['CA', 'US']`. */
+    preferred?: readonly string[];
+    /** The parts a filled address must have, marked as required. */
+    requiredParts?: readonly AddressPart[];
+    /** Adds a map under the parts, and the point of the address to the value. */
+    point?: boolean;
+    /** The address search. Defaults to that of the `FieldsProvider`; without one, there is none. */
+    geocoding?: GeocodingSource | null;
+    /** The tiles of the map. Defaults to those of the `FieldsProvider`, or OpenStreetMap's. */
+    tiles?: MapTiles;
+    /** Zoom of the map on a point. Defaults to 16. */
+    zoom?: number;
+}
+/**
+ * A postal address (decision 0054): the country first, which sets the labels, the order and the
+ * regions of the other parts, then the street, the unit, the city, the region and the postal
+ * code, which is normalized for the country when it loses focus. With an address search, a place
+ * found fills every part; with `point`, a map places the address. Each part shows the errors of
+ * its own path (`address.postalCode`) in a form.
+ */
+export declare function AddressField({ value, onChange, onBlur, path, name, country: countryProp, countries, preferred, requiredParts, point: withPoint, geocoding: geocodingProp, tiles: tilesProp, zoom, label, description, errors, disabled, readOnly, required, className, }: AddressFieldProps): import("react").JSX.Element;
+/**
+ * The `address` type: settings `country`, `countries`, `preferred`, `required` (the parts a
+ * filled address must have) and `point`, over the maps of the `FieldsProvider`.
+ */
+export declare function AddressFieldEntry(props: FieldEntryProps): import("react").JSX.Element;
+//# sourceMappingURL=AddressField.d.ts.map

package/dist/address/AddressField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddressField.d.ts","sourceRoot":"","sources":["../../src/address/AddressField.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAS,MAAM,mBAAmB,CAAC;AAY1E,OAAO,KAAK,EAAmB,eAAe,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAOpF,OAAO,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAKnE,MAAM,WAAW,iBAAkB,SAAQ,UAAU,CAAC,YAAY,CAAC;IAC/D,uFAAuF;IACvF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2EAA2E;IAC3E,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,oFAAoF;IACpF,SAAS,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC9B,6CAA6C;IAC7C,SAAS,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC9B,gEAAgE;IAChE,aAAa,CAAC,EAAE,SAAS,WAAW,EAAE,CAAC;IACvC,6EAA6E;IAC7E,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,gGAAgG;IAChG,SAAS,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IACnC,2FAA2F;IAC3F,KAAK,CAAC,EAAE,QAAQ,CAAC;IACjB,kDAAkD;IAClD,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB;AAcD;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,IAAI,EACJ,OAAO,EAAE,WAAW,EACpB,SAAS,EACT,SAAS,EACT,aAA8C,EAC9C,KAAK,EAAE,SAAiB,EACxB,SAAS,EAAE,aAAa,EACxB,KAAK,EAAE,SAAS,EAChB,IAAS,EACT,KAAK,EACL,WAAW,EACX,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,SAAS,GACZ,EAAE,iBAAiB,+BAuNnB;AAUD;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,eAAe,+BAoBvD"}