@qoretechnologies/reqore 0.78.6-pr.715.g3e70b13 → 0.78.6-pr.715.g4e6c5cf

package/dist/helpers/hoveringPointer.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.watchHoverGate = exports.HOVER_GATE_POINTER_EVENTS = exports.useHoverGate = exports.createHoverGate = exports.isHoveringPointer = void 0;
+var react_1 = require("react");
+/**
+ * The pointer can hover: a mouse, or a pen held above the screen. A finger cannot.
+ *
+ * A tap is followed by the mouse events a browser emulates for pages written for a mouse - `mouseover`,
+ * `mouseenter`, `mousemove`, `mousedown`, `mouseup`, `click` - at the tap, with nothing in them to tell them
+ * from a mouse's. Whatever opened on `mouseenter` therefore opened at a tap too, and stayed open until the
+ * next tap elsewhere: a hover tooltip, a panel's floating actions, a rail's labels.
+ *
+ * Asked of each event, not of the device (`isHoverCapable` asks about the device's primary pointer): a touch
+ * laptop's mouse hovers, and so does a mouse plugged into a tablet, whose screen is still a finger's. A pen
+ * hovers while it is held above the screen (`buttons` 0); pressed to it, it is drawing.
+ *
+ * Only what cannot hover is turned away: a finger, and a pen pressed to the screen. A pointer the event does
+ * not name (`pointerType` '' - which the specification allows where the type cannot be told, and which
+ * user-event sends under jsdom - or none at all) is taken for one that hovers, as a `mouseenter` no pointer
+ * event came before is. Taken for one that does not, it closed every tooltip a consumer's test opened with
+ * `userEvent.hover` (qorus-ide: MiniBarChart, IncompleteCasesStrip, valueControlAndChips).
+ */
+var isHoveringPointer = function (_a) {
+    var pointerType = _a.pointerType, buttons = _a.buttons;
+    return pointerType !== 'touch' && !(pointerType === 'pen' && buttons !== 0);
+};
+exports.isHoveringPointer = isHoveringPointer;
+var createHoverGate = function () {
+    var noted;
+    return {
+        notePointer: function (_a) {
+            var pointerType = _a.pointerType, buttons = _a.buttons;
+            noted = { pointerType: pointerType, buttons: buttons };
+        },
+        isHover: function () {
+            var pointer = noted;
+            noted = undefined;
+            return !pointer || (0, exports.isHoveringPointer)(pointer);
+        },
+    };
+};
+exports.createHoverGate = createHoverGate;
+/** A hover gate for the life of a component: see `createHoverGate`. */
+var useHoverGate = function () { return (0, react_1.useMemo)(exports.createHoverGate, []); };
+exports.useHoverGate = useHoverGate;
+/** The pointer events a hover gate notes on an element: those a browser sends before its mouse events. */
+exports.HOVER_GATE_POINTER_EVENTS = [
+    'pointerenter',
+    'pointerover',
+    'pointerdown',
+    'pointermove',
+    'pointerup',
+];
+/**
+ * Notes, on `target`, the pointer behind the mouse events that come next (see `createHoverGate`). Returns
+ * what stops it. Capture phase, so a pointer event a child stops from bubbling is noted too.
+ */
+var watchHoverGate = function (target, gate) {
+    var note = function (event) { return gate.notePointer(event); };
+    exports.HOVER_GATE_POINTER_EVENTS.forEach(function (type) { return target.addEventListener(type, note, true); });
+    return function () {
+        return exports.HOVER_GATE_POINTER_EVENTS.forEach(function (type) { return target.removeEventListener(type, note, true); });
+    };
+};
+exports.watchHoverGate = watchHoverGate;
+//# sourceMappingURL=hoveringPointer.js.map

package/dist/helpers/hoveringPointer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hoveringPointer.js","sourceRoot":"","sources":["../../src/helpers/hoveringPointer.ts"],"names":[],"mappings":";;;AAAA,+BAAgC;AAQhC;;;;;;;;;;;;;;;;;GAiBG;AACI,IAAM,iBAAiB,GAAG,UAAC,EAAqD;QAAnD,WAAW,iBAAA,EAAE,OAAO,aAAA;IACtD,OAAA,WAAW,KAAK,OAAO,IAAI,CAAC,CAAC,WAAW,KAAK,KAAK,IAAI,OAAO,KAAK,CAAC,CAAC;AAApE,CAAoE,CAAC;AAD1D,QAAA,iBAAiB,qBACyC;AAsBhE,IAAM,eAAe,GAAG;IAC7B,IAAI,KAA8C,CAAC;IACnD,OAAO;QACL,WAAW,EAAE,UAAC,EAAwB;gBAAtB,WAAW,iBAAA,EAAE,OAAO,aAAA;YAClC,KAAK,GAAG,EAAE,WAAW,aAAA,EAAE,OAAO,SAAA,EAAE,CAAC;QACnC,CAAC;QACD,OAAO,EAAE;YACP,IAAM,OAAO,GAAG,KAAK,CAAC;YACtB,KAAK,GAAG,SAAS,CAAC;YAClB,OAAO,CAAC,OAAO,IAAI,IAAA,yBAAiB,EAAC,OAAO,CAAC,CAAC;QAChD,CAAC;KACF,CAAC;AACJ,CAAC,CAAC;AAZW,QAAA,eAAe,mBAY1B;AAEF,uEAAuE;AAChE,IAAM,YAAY,GAAG,cAAwB,OAAA,IAAA,eAAO,EAAC,uBAAe,EAAE,EAAE,CAAC,EAA5B,CAA4B,CAAC;AAApE,QAAA,YAAY,gBAAwD;AAEjF,0GAA0G;AAC7F,QAAA,yBAAyB,GAAG;IACvC,cAAc;IACd,aAAa;IACb,aAAa;IACb,aAAa;IACb,WAAW;CACH,CAAC;AAEX;;;GAGG;AACI,IAAM,cAAc,GAAG,UAAC,MAAmB,EAAE,IAAsB;IACxE,IAAM,IAAI,GAAG,UAAC,KAAY,IAAK,OAAA,IAAI,CAAC,WAAW,CAAC,KAAqB,CAAC,EAAvC,CAAuC,CAAC;IACvE,iCAAyB,CAAC,OAAO,CAAC,UAAC,IAAI,IAAK,OAAA,MAAM,CAAC,gBAAgB,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,EAAzC,CAAyC,CAAC,CAAC;IACvF,OAAO;QACL,OAAA,iCAAyB,CAAC,OAAO,CAAC,UAAC,IAAI,IAAK,OAAA,MAAM,CAAC,mBAAmB,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,EAA5C,CAA4C,CAAC;IAAzF,CAAyF,CAAC;AAC9F,CAAC,CAAC;AALW,QAAA,cAAc,kBAKzB"}

package/dist/helpers/styled.d.ts

@@ -1,4 +1,5 @@
-import type { ComponentType } from 'react';
+import type { ComponentType, JSX } from 'react';
+import baseStyled from 'styled-components';
 /**
  * The default prop validator styled-components hands to `shouldForwardProp`. It answers
  * "is this a real HTML attribute?" — it knows nothing about the element being rendered.
@@ -11,32 +12,17 @@ export type TReqoreStyledPropValidator = (prop: string | number | symbol) => boo
  */
 export type TReqoreStyledTarget = string | ComponentType<any>;
 /**
- * Builds a `shouldForwardProp` predicate for `styled(...).withConfig({ ... })` that keeps the
- * named props out of the rendered element while leaving every other prop alone.
- *
- * Reqore layout flags (`fill`, `wrap`, ...) are meaningful to a parent — a `ReqoreControlGroup`
- * propagates `fill` through polymorphic children, a `ReqoreTable` threads `wrap` into rows and
- * cells — but they are not valid HTML attributes. Without this filter React renders them as
- * boolean attributes and logs a "received `true` for a non-boolean attribute" warning.
- *
- * IMPORTANT — why the target type is checked. Supplying `shouldForwardProp` *replaces*
- * styled-components' built-in rule outright; it does not layer on top of it. That built-in rule
- * is `isTargetTag ? isPropValid(prop) : true` — a DOM tag only receives real HTML attributes,
- * but a **component** target receives everything, because a component's props are its own API
- * and `isPropValid` knows nothing about them. Chaining `defaultValidatorFn` unconditionally
- * therefore strips a component's entire prop surface: `styled(ReqoreIcon)` silently lost
- * `icon` / `wrapperElement` / `wrapperSize` (the input clear button rendered as an empty span),
- * `styled(StyledEffect) as={Resizable}` lost re-resizable's `enable` / size / handle config, and
- * `ReqoreTextarea as={Editable}` lost Slate's `renderElement` / `renderLeaf` / `decorate`. Each
- * was previously patched with a bespoke per-call-site allow-list; mirroring the built-in rule
- * here fixes all of them at the source, so `styled(SomeComponent)` keeps working like plain
- * styled-components while the explicitly-omitted props still never reach the DOM.
- *
- * @example
- * const StyledPanel = styled(StyledEffect).withConfig({
- *   shouldForwardProp: omitStyleProps('fill'),
- * })<IStyledPanel>`...`;
+ * Reqore prop names that are ALSO an HTML attribute — of some elements. `isPropValid`, which
+ * styled-components uses to filter a DOM tag's props, only asks whether a name is an attribute
+ * anywhere, so `size='normal'` (a Reqore size) reached every `div` and `span` it was handed to as
+ * `size="normal"`, a checkbox's `checked` reached its `div`, a table cell's `selected` and
+ * `disabled` theirs, and so on. Each name maps to the elements it is an attribute of; on any
+ * other HTML element it is a styling prop and stays back. A name with no elements is not an
+ * attribute of any HTML element (only of SVG ones, or of nothing current).
  */
+export declare const REQORE_AMBIGUOUS_PROP_ELEMENTS: Readonly<Record<string, readonly (keyof JSX.IntrinsicElements)[]>>;
+/** Whether `prop` is an attribute of the element `tag`, as far as Reqore's names go. */
+export declare const isReqoreElementAttribute: (prop: string | number | symbol, tag: string) => boolean;
 export declare const omitStyleProps: (...propsToOmit: string[]) => (prop: string | number | symbol, defaultValidatorFn: TReqoreStyledPropValidator, elementToBeCreated?: TReqoreStyledTarget) => boolean;
 /**
  * The props `ReqoreControlGroup` clones onto every child that is a component (see the group's
@@ -46,4 +32,31 @@ export declare const omitStyleProps: (...propsToOmit: string[]) => (prop: string
  * them: `shouldForwardProp: omitStyleProps(...REQORE_CONTROL_GROUP_CHILD_PROPS)`.
  */
 export declare const REQORE_CONTROL_GROUP_CHILD_PROPS: string[];
+/**
+ * The props of a styled component's prop interface `TProps` that only style it: every key that
+ * is not one of `TTargetProps` — the attributes and props of what the component renders.
+ *
+ * `as`, `forwardedAs` and transient (`$`-prefixed) props are left out: styled-components consumes
+ * those itself and never forwards them.
+ */
+export type TReqoreStylePropKeys<TProps, TTargetProps> = Exclude<Extract<keyof TProps, string>, keyof TTargetProps | 'as' | 'forwardedAs' | `$${string}`>;
+/**
+ * Lists a component's styling props for `omitStyleProps`, from a record the compiler checks
+ * against the component's prop interface.
+ *
+ * A hand-written omit list goes stale: a prop added to the interface later reaches the rendered
+ * element until someone remembers the list (ReqoreButton rendered `as` a router link handed its
+ * `fluid`, `compact`, `maxWidth`, ... to the link, which wrote them onto its `<a>`; a resizable,
+ * transparent ReqorePanel handed re-resizable `transparent`). Typed as
+ * `Record<TReqoreStylePropKeys<...>, true>`, the record must name every such prop and nothing
+ * else, so a new prop that is not added fails the build instead of leaking.
+ *
+ * @example
+ * const BUTTON_STYLE_PROPS = listReqoreStyleProps<
+ *   TReqoreStylePropKeys<IReqoreButtonStyle, React.ButtonHTMLAttributes<HTMLButtonElement>>
+ * >({ fluid: true, compact: true, ... });
+ */
+export declare const listReqoreStyleProps: <TKeys extends string>(props: Record<TKeys, true>) => TKeys[];
+declare const reqoreStyled: typeof baseStyled;
+export default reqoreStyled;
 //# sourceMappingURL=styled.d.ts.map

package/dist/helpers/styled.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../../src/helpers/styled.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C;;;GAGG;AACH,MAAM,MAAM,0BAA0B,GAAG,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,KAAK,OAAO,CAAC;AAErF;;;;GAIG;AACH,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC;AAE9D;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,cAAc,GAAI,GAAG,aAAa,MAAM,EAAE,MAInD,MAAM,MAAM,GAAG,MAAM,GAAG,MAAM,EAC9B,oBAAoB,0BAA0B,EAC9C,qBAAqB,mBAAmB,KACvC,OAQJ,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,gCAAgC,UA0B5C,CAAC"}
+{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../../src/helpers/styled.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,UAAU,MAAM,mBAAmB,CAAC;AAE3C;;;GAGG;AACH,MAAM,MAAM,0BAA0B,GAAG,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,KAAK,OAAO,CAAC;AAErF;;;;GAIG;AACH,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC;AA0D9D;;;;;;;;GAQG;AACH,eAAO,MAAM,8BAA8B,EAAE,QAAQ,CACnD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,MAAM,GAAG,CAAC,iBAAiB,CAAC,EAAE,CAAC,CA4CzD,CAAC;AAaF,wFAAwF;AACxF,eAAO,MAAM,wBAAwB,GAAI,MAAM,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,KAAK,MAAM,KAAG,OAQtF,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,GAAG,aAAa,MAAM,EAAE,MAInD,MAAM,MAAM,GAAG,MAAM,GAAG,MAAM,EAC9B,oBAAoB,0BAA0B,EAC9C,qBAAqB,mBAAmB,KACvC,OAqBJ,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,gCAAgC,UA0B5C,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,MAAM,oBAAoB,CAAC,MAAM,EAAE,YAAY,IAAI,OAAO,CAC9D,OAAO,CAAC,MAAM,MAAM,EAAE,MAAM,CAAC,EAC7B,MAAM,YAAY,GAAG,IAAI,GAAG,aAAa,GAAG,IAAI,MAAM,EAAE,CACzD,CAAC;AAEF;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,oBAAoB,GAAI,KAAK,SAAS,MAAM,EAAE,OAAO,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,KAAG,KAAK,EAC9D,CAAC;AAgBhC,QAAA,MAAM,YAAY,EAGZ,OAAO,UAAU,CAAC;AAExB,eAAe,YAAY,CAAC"}

package/dist/helpers/styled.js

@@ -1,6 +1,10 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.REQORE_CONTROL_GROUP_CHILD_PROPS = exports.omitStyleProps = void 0;
+exports.listReqoreStyleProps = exports.REQORE_CONTROL_GROUP_CHILD_PROPS = exports.omitStyleProps = exports.isReqoreElementAttribute = exports.REQORE_AMBIGUOUS_PROP_ELEMENTS = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
 /**
  * Builds a `shouldForwardProp` predicate for `styled(...).withConfig({ ... })` that keeps the
  * named props out of the rendered element while leaving every other prop alone.
@@ -28,6 +32,106 @@ exports.REQORE_CONTROL_GROUP_CHILD_PROPS = exports.omitStyleProps = void 0;
  *   shouldForwardProp: omitStyleProps('fill'),
  * })<IStyledPanel>`...`;
  */
+/** The SVG elements: their presentation attributes (`fill`, `opacity`, `width`, ...) are real. */
+var SVG_TAGS = new Set([
+    'svg',
+    'g',
+    'path',
+    'circle',
+    'ellipse',
+    'line',
+    'polyline',
+    'polygon',
+    'rect',
+    'text',
+    'tspan',
+    'textPath',
+    'defs',
+    'symbol',
+    'use',
+    'image',
+    'marker',
+    'mask',
+    'pattern',
+    'clipPath',
+    'linearGradient',
+    'radialGradient',
+    'stop',
+    'foreignObject',
+    'filter',
+]);
+/**
+ * Reqore prop names that are ALSO an HTML attribute — of some elements. `isPropValid`, which
+ * styled-components uses to filter a DOM tag's props, only asks whether a name is an attribute
+ * anywhere, so `size='normal'` (a Reqore size) reached every `div` and `span` it was handed to as
+ * `size="normal"`, a checkbox's `checked` reached its `div`, a table cell's `selected` and
+ * `disabled` theirs, and so on. Each name maps to the elements it is an attribute of; on any
+ * other HTML element it is a styling prop and stays back. A name with no elements is not an
+ * attribute of any HTML element (only of SVG ones, or of nothing current).
+ */
+exports.REQORE_AMBIGUOUS_PROP_ELEMENTS = {
+    size: ['input', 'select'],
+    width: ['img', 'canvas', 'video', 'iframe', 'input', 'embed', 'object', 'col', 'colgroup'],
+    height: ['img', 'canvas', 'video', 'iframe', 'input', 'embed', 'object'],
+    wrap: ['textarea'],
+    color: [],
+    fill: [],
+    opacity: [],
+    direction: [],
+    offset: [],
+    spacing: [],
+    disabled: ['button', 'input', 'select', 'textarea', 'option', 'optgroup', 'fieldset'],
+    readOnly: ['input', 'textarea'],
+    checked: ['input'],
+    selected: ['option'],
+    placeholder: ['input', 'textarea'],
+    label: ['track', 'option', 'optgroup'],
+    type: [
+        'input',
+        'button',
+        'ol',
+        'li',
+        'a',
+        'source',
+        'embed',
+        'object',
+        'script',
+        'style',
+        'link',
+    ],
+    value: [
+        'input',
+        'button',
+        'select',
+        'textarea',
+        'option',
+        'li',
+        'meter',
+        'progress',
+        'param',
+        'data',
+        'output',
+    ],
+};
+/**
+ * The state attributes a component's omit list may name for its default element but that are
+ * the element's own when it is rendered `as` an element that has them (see `omitStyleProps`).
+ */
+var REQORE_ELEMENT_STATE_PROPS = new Set([
+    'disabled',
+    'readOnly',
+    'checked',
+    'selected',
+]);
+/** Whether `prop` is an attribute of the element `tag`, as far as Reqore's names go. */
+var isReqoreElementAttribute = function (prop, tag) {
+    if (typeof prop !== 'string' || SVG_TAGS.has(tag)) {
+        return true;
+    }
+    var elements = exports.REQORE_AMBIGUOUS_PROP_ELEMENTS[prop];
+    return !elements || elements.includes(tag);
+};
+exports.isReqoreElementAttribute = isReqoreElementAttribute;
 var omitStyleProps = function () {
     var propsToOmit = [];
     for (var _i = 0; _i < arguments.length; _i++) {
@@ -36,10 +140,19 @@ var omitStyleProps = function () {
     var omitted = new Set(propsToOmit);
     return function (prop, defaultValidatorFn, elementToBeCreated) {
         if (omitted.has(prop)) {
-            return false;
+            // A component's omit list is built against its default element. Given `as` another tag
+            // that has the state attribute — `<ReqorePanel as='fieldset' disabled>`, `<ReqoreTag
+            // as='button' disabled>` — the attribute is that element's, so it goes through.
+            return (typeof elementToBeCreated === 'string' &&
+                REQORE_ELEMENT_STATE_PROPS.has(prop) &&
+                defaultValidatorFn(prop) &&
+                exports.REQORE_AMBIGUOUS_PROP_ELEMENTS[prop].includes(elementToBeCreated));
         }
-        // Mirror styled-components' own default so only the omitted props change behaviour.
-        return typeof elementToBeCreated === 'string' ? defaultValidatorFn(prop) : true;
+        // Mirror styled-components' own default — a component gets everything, a DOM tag what is an
+        // HTML attribute — except that a DOM tag only gets an attribute of ITS element.
+        return typeof elementToBeCreated === 'string'
+            ? defaultValidatorFn(prop) && (0, exports.isReqoreElementAttribute)(prop, elementToBeCreated)
+            : true;
     };
 };
 exports.omitStyleProps = omitStyleProps;
@@ -77,4 +190,43 @@ exports.REQORE_CONTROL_GROUP_CHILD_PROPS = [
     'isMasterGroupRounded',
     'rounded',
 ];
+/**
+ * Lists a component's styling props for `omitStyleProps`, from a record the compiler checks
+ * against the component's prop interface.
+ *
+ * A hand-written omit list goes stale: a prop added to the interface later reaches the rendered
+ * element until someone remembers the list (ReqoreButton rendered `as` a router link handed its
+ * `fluid`, `compact`, `maxWidth`, ... to the link, which wrote them onto its `<a>`; a resizable,
+ * transparent ReqorePanel handed re-resizable `transparent`). Typed as
+ * `Record<TReqoreStylePropKeys<...>, true>`, the record must name every such prop and nothing
+ * else, so a new prop that is not added fails the build instead of leaking.
+ *
+ * @example
+ * const BUTTON_STYLE_PROPS = listReqoreStyleProps<
+ *   TReqoreStylePropKeys<IReqoreButtonStyle, React.ButtonHTMLAttributes<HTMLButtonElement>>
+ * >({ fluid: true, compact: true, ... });
+ */
+var listReqoreStyleProps = function (props) {
+    return Object.keys(props);
+};
+exports.listReqoreStyleProps = listReqoreStyleProps;
+/**
+ * Reqore's `styled`: styled-components' own, except that every styled component it makes filters
+ * its props with `omitStyleProps()` — so a DOM element only receives the attributes of ITS
+ * element (see `REQORE_AMBIGUOUS_PROP_ELEMENTS`), whether or not its author remembered to filter.
+ *
+ * Every Reqore source file imports `styled` from here (an ESLint rule forbids the default import
+ * of `styled-components`). A styled component's own `.withConfig({ shouldForwardProp })`
+ * replaces this filter, and is built with `omitStyleProps`, which includes it.
+ */
+var withReqoreProps = function (construct) {
+    return typeof (construct === null || construct === void 0 ? void 0 : construct.withConfig) === 'function'
+        ? construct.withConfig({ shouldForwardProp: (0, exports.omitStyleProps)() })
+        : construct;
+};
+var reqoreStyled = new Proxy(styled_components_1.default, {
+    apply: function (target, thisArg, args) { return withReqoreProps(Reflect.apply(target, thisArg, args)); },
+    get: function (target, key, receiver) { return withReqoreProps(Reflect.get(target, key, receiver)); },
+});
+exports.default = reqoreStyled;
 //# sourceMappingURL=styled.js.map

package/dist/helpers/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sourceRoot":"","sources":["../../src/helpers/styled.ts"],"names":[],"mappings":";;;AAeA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACI,IAAM,cAAc,GAAG;IAAC,qBAAwB;SAAxB,UAAwB,EAAxB,qBAAwB,EAAxB,IAAwB;QAAxB,gCAAwB;;IACrD,IAAM,OAAO,GAAG,IAAI,GAAG,CAA2B,WAAW,CAAC,CAAC;IAE/D,OAAO,UACL,IAA8B,EAC9B,kBAA8C,EAC9C,kBAAwC;QAExC,IAAI,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC;YACtB,OAAO,KAAK,CAAC;QACf,CAAC;QAED,oFAAoF;QACpF,OAAO,OAAO,kBAAkB,KAAK,QAAQ,CAAC,CAAC,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAClF,CAAC,CAAC;AACJ,CAAC,CAAC;AAfW,QAAA,cAAc,kBAezB;AAEF;;;;;;GAMG;AACU,QAAA,gCAAgC,GAAG;IAC9C,aAAa;IACb,MAAM;IACN,OAAO;IACP,MAAM;IACN,OAAO;IACP,QAAQ;IACR,SAAS;IACT,MAAM;IACN,cAAc;IACd,OAAO;IACP,qBAAqB;IACrB,SAAS;IACT,eAAe;IACf,SAAS;IACT,SAAS;IACT,cAAc;IACd,oBAAoB;IACpB,oBAAoB;IACpB,uBAAuB;IACvB,QAAQ;IACR,aAAa;IACb,oBAAoB;IACpB,mBAAmB;IACnB,sBAAsB;IACtB,SAAS;CACV,CAAC"}
+{"version":3,"file":"styled.js","sourceRoot":"","sources":["../../src/helpers/styled.ts"],"names":[],"mappings":"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"}

package/dist/helpers/typeScale.d.ts

@@ -0,0 +1,25 @@
+/**
+ * The px a `size` renders its text at, as the theme decides it.
+ *
+ * `theme.typeScale` names the sizes an app wants at its own px; everything it leaves out is
+ * Reqore's own table (`TEXT_FROM_SIZE`, `CONTROL_TEXT_FROM_SIZE`, `TAG_TEXT_FROM_SIZE`). Every
+ * component reads its text size through one of these three, so a theme decides the type scale
+ * of the whole app in one place, and a theme without `typeScale` renders exactly as before.
+ */
+import { TSizes } from '../constants/sizes';
+import { IReqoreTheme } from '../constants/theme';
+type TReqoreTypeScaleTheme = Pick<IReqoreTheme, 'typeScale'> | undefined;
+/**
+ * px for running text at `size`: paragraphs, spans, links, table cells, panel / accordion /
+ * callout / bubble / notification / data view text, and `effect.textSize` given as a size name.
+ */
+export declare const getTextSize: (theme: TReqoreTypeScaleTheme, size: TSizes) => number;
+/**
+ * px for a control's text at `size`: buttons, inputs, textareas, tabs, checkboxes, the segmented
+ * control, progress labels and a tag's actions.
+ */
+export declare const getControlTextSize: (theme: TReqoreTypeScaleTheme, size: TSizes) => number;
+/** px for a tag's, a badge's or a keyboard key's text at `size`. */
+export declare const getTagTextSize: (theme: TReqoreTypeScaleTheme, size: TSizes) => number;
+export {};
+//# sourceMappingURL=typeScale.d.ts.map

package/dist/helpers/typeScale.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typeScale.d.ts","sourceRoot":"","sources":["../../src/helpers/typeScale.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAIL,MAAM,EACP,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAElD,KAAK,qBAAqB,GAAG,IAAI,CAAC,YAAY,EAAE,WAAW,CAAC,GAAG,SAAS,CAAC;AAEzE;;;GAGG;AACH,eAAO,MAAM,WAAW,GAAI,OAAO,qBAAqB,EAAE,MAAM,MAAM,KAAG,MACjB,CAAC;AAEzD;;;GAGG;AACH,eAAO,MAAM,kBAAkB,GAAI,OAAO,qBAAqB,EAAE,MAAM,MAAM,KAAG,MACb,CAAC;AAEpE,oEAAoE;AACpE,eAAO,MAAM,cAAc,GAAI,OAAO,qBAAqB,EAAE,MAAM,MAAM,KAAG,MACjB,CAAC"}

package/dist/helpers/typeScale.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTagTextSize = exports.getControlTextSize = exports.getTextSize = void 0;
+/**
+ * The px a `size` renders its text at, as the theme decides it.
+ *
+ * `theme.typeScale` names the sizes an app wants at its own px; everything it leaves out is
+ * Reqore's own table (`TEXT_FROM_SIZE`, `CONTROL_TEXT_FROM_SIZE`, `TAG_TEXT_FROM_SIZE`). Every
+ * component reads its text size through one of these three, so a theme decides the type scale
+ * of the whole app in one place, and a theme without `typeScale` renders exactly as before.
+ */
+var sizes_1 = require("../constants/sizes");
+/**
+ * px for running text at `size`: paragraphs, spans, links, table cells, panel / accordion /
+ * callout / bubble / notification / data view text, and `effect.textSize` given as a size name.
+ */
+var getTextSize = function (theme, size) { var _a, _b, _c; return (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.typeScale) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b[size]) !== null && _c !== void 0 ? _c : sizes_1.TEXT_FROM_SIZE[size]; };
+exports.getTextSize = getTextSize;
+/**
+ * px for a control's text at `size`: buttons, inputs, textareas, tabs, checkboxes, the segmented
+ * control, progress labels and a tag's actions.
+ */
+var getControlTextSize = function (theme, size) { var _a, _b, _c; return (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.typeScale) === null || _a === void 0 ? void 0 : _a.control) === null || _b === void 0 ? void 0 : _b[size]) !== null && _c !== void 0 ? _c : sizes_1.CONTROL_TEXT_FROM_SIZE[size]; };
+exports.getControlTextSize = getControlTextSize;
+/** px for a tag's, a badge's or a keyboard key's text at `size`. */
+var getTagTextSize = function (theme, size) { var _a, _b, _c; return (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.typeScale) === null || _a === void 0 ? void 0 : _a.tag) === null || _b === void 0 ? void 0 : _b[size]) !== null && _c !== void 0 ? _c : sizes_1.TAG_TEXT_FROM_SIZE[size]; };
+exports.getTagTextSize = getTagTextSize;
+//# sourceMappingURL=typeScale.js.map

package/dist/helpers/typeScale.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"typeScale.js","sourceRoot":"","sources":["../../src/helpers/typeScale.ts"],"names":[],"mappings":";;;AAAA;;;;;;;GAOG;AACH,4CAK4B;AAK5B;;;GAGG;AACI,IAAM,WAAW,GAAG,UAAC,KAA4B,EAAE,IAAY,oBACpE,OAAA,MAAA,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,SAAS,0CAAE,IAAI,0CAAG,IAAI,CAAC,mCAAI,sBAAc,CAAC,IAAI,CAAC,CAAA,EAAA,CAAC;AAD5C,QAAA,WAAW,eACiC;AAEzD;;;GAGG;AACI,IAAM,kBAAkB,GAAG,UAAC,KAA4B,EAAE,IAAY,oBAC3E,OAAA,MAAA,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,SAAS,0CAAE,OAAO,0CAAG,IAAI,CAAC,mCAAI,8BAAsB,CAAC,IAAI,CAAC,CAAA,EAAA,CAAC;AADvD,QAAA,kBAAkB,sBACqC;AAEpE,oEAAoE;AAC7D,IAAM,cAAc,GAAG,UAAC,KAA4B,EAAE,IAAY,oBACvE,OAAA,MAAA,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,SAAS,0CAAE,GAAG,0CAAG,IAAI,CAAC,mCAAI,0BAAkB,CAAC,IAAI,CAAC,CAAA,EAAA,CAAC;AAD/C,QAAA,cAAc,kBACiC"}

package/dist/hooks/useCloneThroughFragments.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useCloneThroughFragments.d.ts","sourceRoot":"","sources":["../../src/hooks/useCloneThroughFragments.ts"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAEpD,eAAO,MAAM,wBAAwB,GACnC,aAAa,CACX,KAAK,EAAE,MAAM,CAAC,MAAM,GAAG,MAAM,EAAE,GAAG,CAAC,EACnC,UAAU,EAAE,MAAM,EAClB,SAAS,EAAE,MAAM,EACjB,SAAS,EAAE,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,KAClC,MAAM,CAAC,MAAM,GAAG,MAAM,EAAE,GAAG,CAAC,EACjC,OAAO,GAAG,EAAE;sBAIyB,KAAK,CAAC,SAAS,KAAG,KAAK,CAAC,SAAS;CA0BvE,CAAC"}
+{"version":3,"file":"useCloneThroughFragments.d.ts","sourceRoot":"","sources":["../../src/hooks/useCloneThroughFragments.ts"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAEpD,eAAO,MAAM,wBAAwB,GACnC,aAAa,CACX,KAAK,EAAE,MAAM,CAAC,MAAM,GAAG,MAAM,EAAE,GAAG,CAAC,EACnC,UAAU,EAAE,MAAM,EAClB,SAAS,EAAE,MAAM,EACjB,SAAS,EAAE,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,KAClC,MAAM,CAAC,MAAM,GAAG,MAAM,EAAE,GAAG,CAAC,EACjC,OAAO,GAAG,EAAE;sBAEyB,KAAK,CAAC,SAAS,KAAG,KAAK,CAAC,SAAS;CAsDvE,CAAC"}

package/dist/hooks/useCloneThroughFragments.js

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -36,26 +47,48 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCloneThroughFragments = void 0;
 var react_1 = __importStar(require("react"));
 var useCloneThroughFragments = function (propsMapper, deps) {
-    var realIndex = 0;
     var clone = (0, react_1.useCallback)(function (children) {
-        return react_1.default.Children.map(children, function (child, reactIndex) {
-            if (child && react_1.default.isValidElement(child)) {
-                if (child.type === react_1.default.Fragment) {
-                    return clone(child.props.children);
+        /* Counted per call, from the first child: the clone is kept between renders (`deps`), and a count kept with
+           it went on from where the last render left it - a group re-rendering by itself numbered its first child
+           the fourth. */
+        var realIndex = 0;
+        var cloneLevel = function (nodes) {
+            /* The keys given at this level of the children. A child keeps its own key, so React keeps it
+               (and its state) when another is added before it; a key given again is made unique (`#1`,
+               `#2`, ...), as the place a control group joined to every key used to make it. Children keyed
+               by what they say (a label, a name) can repeat it, and two children with one key are one to
+               React: it warns, and on an update drops or repeats one of them. A fragment's children are
+               keyed under the fragment, so each level counts its own. */
+            var given = new Map();
+            return react_1.default.Children.map(nodes, function (child, reactIndex) {
+                var _a;
+                if (child && react_1.default.isValidElement(child)) {
+                    if (child.type === react_1.default.Fragment) {
+                        return cloneLevel(child.props.children);
+                    }
+                    var props = propsMapper(child.props, reactIndex, realIndex, child.type);
+                    /*
+                     * Because of the way React.Children.map works, we have to
+                     * manually decrement the index for every child that is `null`
+                     * because react maps through null children and returns them in `Count`
+                     * We filter these children out in the `realChildCount` variable,
+                     * but the index is still incremented
+                     * */
+                    realIndex = realIndex + 1;
+                    // a key the mapper set (a control group's `reactKey`) is the caller's to keep unique
+                    if ((props === null || props === void 0 ? void 0 : props.key) === undefined && child.key !== null) {
+                        var times = (_a = given.get(child.key)) !== null && _a !== void 0 ? _a : 0;
+                        given.set(child.key, times + 1);
+                        if (times > 0) {
+                            return react_1.default.cloneElement(child, __assign(__assign({}, props), { key: "".concat(child.key, "#").concat(times) }));
+                        }
+                    }
+                    return react_1.default.cloneElement(child, props);
                 }
-                var props = propsMapper(child.props, reactIndex, realIndex, child.type);
-                /*
-                 * Because of the way React.Children.map works, we have to
-                 * manually decrement the index for every child that is `null`
-                 * because react maps through null children and returns them in `Count`
-                 * We filter these children out in the `realChildCount` variable,
-                 * but the index is still incremented
-                 * */
-                realIndex = realIndex + 1;
-                return react_1.default.cloneElement(child, props);
-            }
-            return child;
-        });
+                return child;
+            });
+        };
+        return cloneLevel(children);
     }, deps);
     return (0, react_1.useMemo)(function () { return ({ clone: clone }); }, [clone]);
 };

package/dist/hooks/useCloneThroughFragments.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCloneThroughFragments.js","sourceRoot":"","sources":["../../src/hooks/useCloneThroughFragments.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAoD;AAE7C,IAAM,wBAAwB,GAAG,UACtC,WAKiC,EACjC,IAAY;IAEZ,IAAI,SAAS,GAAG,CAAC,CAAC;IAElB,IAAM,KAAK,GAAG,IAAA,mBAAW,EAAC,UAAC,QAAyB;QAClD,OAAO,eAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAC,KAAK,EAAE,UAAU;YACpD,IAAI,KAAK,IAAI,eAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,CAAC;gBACzC,IAAI,KAAK,CAAC,IAAI,KAAK,eAAK,CAAC,QAAQ,EAAE,CAAC;oBAClC,OAAO,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;gBACrC,CAAC;gBAED,IAAM,KAAK,GAAG,WAAW,CAAC,KAAK,CAAC,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;gBAE1E;;;;;;qBAMK;gBACL,SAAS,GAAG,SAAS,GAAG,CAAC,CAAC;gBAE1B,OAAO,eAAK,CAAC,YAAY,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;YAC1C,CAAC;YAED,OAAO,KAAK,CAAC;QACf,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,IAAI,CAAC,CAAC;IAET,OAAO,IAAA,eAAO,EAAC,cAAM,OAAA,CAAC,EAAE,KAAK,OAAA,EAAE,CAAC,EAAX,CAAW,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;AAC7C,CAAC,CAAC;AArCW,QAAA,wBAAwB,4BAqCnC"}
+{"version":3,"file":"useCloneThroughFragments.js","sourceRoot":"","sources":["../../src/hooks/useCloneThroughFragments.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAoD;AAE7C,IAAM,wBAAwB,GAAG,UACtC,WAKiC,EACjC,IAAY;IAEZ,IAAM,KAAK,GAAG,IAAA,mBAAW,EAAC,UAAC,QAAyB;QAClD;;yBAEiB;QACjB,IAAI,SAAS,GAAG,CAAC,CAAC;QAElB,IAAM,UAAU,GAAG,UAAC,KAAsB;YACxC;;;;;yEAK6D;YAC7D,IAAM,KAAK,GAAG,IAAI,GAAG,EAAqB,CAAC;YAE3C,OAAO,eAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,EAAE,UAAC,KAAK,EAAE,UAAU;;gBACjD,IAAI,KAAK,IAAI,eAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,CAAC;oBACzC,IAAI,KAAK,CAAC,IAAI,KAAK,eAAK,CAAC,QAAQ,EAAE,CAAC;wBAClC,OAAO,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;oBAC1C,CAAC;oBAED,IAAM,KAAK,GAAG,WAAW,CAAC,KAAK,CAAC,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;oBAE1E;;;;;;yBAMK;oBACL,SAAS,GAAG,SAAS,GAAG,CAAC,CAAC;oBAE1B,qFAAqF;oBACrF,IAAI,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,GAAG,MAAK,SAAS,IAAI,KAAK,CAAC,GAAG,KAAK,IAAI,EAAE,CAAC;wBACnD,IAAM,KAAK,GAAG,MAAA,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,mCAAI,CAAC,CAAC;wBAExC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC;wBAEhC,IAAI,KAAK,GAAG,CAAC,EAAE,CAAC;4BACd,OAAO,eAAK,CAAC,YAAY,CAAC,KAAK,wBAAO,KAAK,KAAE,GAAG,EAAE,UAAG,KAAK,CAAC,GAAG,cAAI,KAAK,CAAE,IAAG,CAAC;wBAC/E,CAAC;oBACH,CAAC;oBAED,OAAO,eAAK,CAAC,YAAY,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;gBAC1C,CAAC;gBAED,OAAO,KAAK,CAAC;YACf,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;QAEF,OAAO,UAAU,CAAC,QAAQ,CAAC,CAAC;IAC9B,CAAC,EAAE,IAAI,CAAC,CAAC;IAET,OAAO,IAAA,eAAO,EAAC,cAAM,OAAA,CAAC,EAAE,KAAK,OAAA,EAAE,CAAC,EAAX,CAAW,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;AAC7C,CAAC,CAAC;AA/DW,QAAA,wBAAwB,4BA+DnC"}

package/dist/hooks/useDragToScroll.d.ts

@@ -0,0 +1,58 @@
+import { RefObject } from 'react';
+/**
+ * How far the pointer must travel before a press becomes a drag.
+ *
+ * Zero would make every click a one-pixel drag and swallow it; too large and the
+ * row feels stuck before it moves. Four pixels is the usual hysteresis for
+ * distinguishing a click from a drag.
+ */
+export declare const DRAG_TO_SCROLL_THRESHOLD = 4;
+/**
+ * Elements a drag must never start on.
+ *
+ * Deliberately NOT "anything interactive". The surfaces this is built for are made
+ * OF interactive things - a rail of clickable KPI tiles, a table header of sort
+ * buttons - so excluding buttons would leave nowhere to grab and the feature would
+ * do nothing. Their clicks are protected instead by suppressing the click that
+ * follows a real drag, which is what makes press-and-release still activate a
+ * tile while press-and-pull scrolls past it.
+ *
+ * What IS excluded is text entry, where a press-and-move already means
+ * "select within this value" and there is no other way to ask for it, and anything
+ * marked `reqore-no-drag-scroll`: a grab handle of its own (a column's resize handle),
+ * where a press-and-move already means something else.
+ */
+export declare const NON_DRAGGABLE = "input, textarea, select, [contenteditable=\"\"], [contenteditable=\"true\"], .reqore-no-drag-scroll";
+export interface IUseDragToScrollOptions {
+    /** What scrolls sideways. */
+    scrollRef: RefObject<HTMLElement>;
+    /**
+     * Where the gesture is taken, when that is not the scroller itself: a table's
+     * header, which is scrolled with its body but is not a scroller of its own.
+     */
+    handleRef?: RefObject<HTMLElement>;
+    /** Mouse and pen: press and pull sideways to scroll. */
+    mouse?: boolean;
+    /**
+     * Touch: a sideways swipe on the handle scrolls the scroller. Only for a handle
+     * the browser cannot pan by itself (it does not overflow-scroll); on a real
+     * scroller touch already pans natively, and taking it over would replace that.
+     * The handle's own CSS must leave sideways panning to the page script
+     * (`touch-action: pan-y`), or the browser cancels the pointer before it moves.
+     */
+    touch?: boolean;
+    /** Set on the handle while a drag is engaged. */
+    draggingClass?: string;
+}
+/**
+ * Press and pull a sideways-scrolling surface to scroll it.
+ *
+ * `ReqoreTable`'s (`dragToScroll`, and its header's touch swipes). It binds to the
+ * elements themselves, not through handlers spread in render, because a table's body
+ * appears after mount and its header scrolls a body that is another element. The other
+ * drags in the library - a sheet, a modal, a toast, a tier stack, `ReqoreFadeScroller`'s
+ * `dragToScroll` - share `usePointerDrag`; a fix to the gesture belongs in both (a
+ * finger's implicit capture, for one).
+ */
+export declare const useDragToScroll: ({ scrollRef, handleRef, mouse, touch, draggingClass, }: IUseDragToScrollOptions) => void;
+//# sourceMappingURL=useDragToScroll.d.ts.map

package/dist/hooks/useDragToScroll.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDragToScroll.d.ts","sourceRoot":"","sources":["../../src/hooks/useDragToScroll.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAqB,MAAM,OAAO,CAAC;AAErD;;;;;;GAMG;AACH,eAAO,MAAM,wBAAwB,IAAI,CAAC;AAE1C;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,aAAa,wGACyE,CAAC;AAEpG,MAAM,WAAW,uBAAuB;IACtC,6BAA6B;IAC7B,SAAS,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IAClC;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IACnC,wDAAwD;IACxD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,iDAAiD;IACjD,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,eAAe,GAAI,wDAM7B,uBAAuB,SA+CzB,CAAC"}