@huin-core/react-slot 1.0.2 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +13 -0
- package/dist/index.d.ts +13 -0
- package/dist/index.js +118 -0
- package/dist/index.js.map +7 -0
- package/dist/index.mjs +85 -0
- package/dist/index.mjs.map +7 -0
- package/package.json +1 -1
package/dist/index.d.mts
ADDED
@@ -0,0 +1,13 @@
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
2
|
+
import * as React from 'react';
|
3
|
+
|
4
|
+
interface SlotProps extends React.HTMLAttributes<HTMLElement> {
|
5
|
+
children?: React.ReactNode;
|
6
|
+
}
|
7
|
+
declare const Slot: React.ForwardRefExoticComponent<SlotProps & React.RefAttributes<HTMLElement>>;
|
8
|
+
declare const Slottable: ({ children }: {
|
9
|
+
children: React.ReactNode;
|
10
|
+
}) => react_jsx_runtime.JSX.Element;
|
11
|
+
declare const Root: React.ForwardRefExoticComponent<SlotProps & React.RefAttributes<HTMLElement>>;
|
12
|
+
|
13
|
+
export { Root, Slot, type SlotProps, Slottable };
|
package/dist/index.d.ts
ADDED
@@ -0,0 +1,13 @@
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
2
|
+
import * as React from 'react';
|
3
|
+
|
4
|
+
interface SlotProps extends React.HTMLAttributes<HTMLElement> {
|
5
|
+
children?: React.ReactNode;
|
6
|
+
}
|
7
|
+
declare const Slot: React.ForwardRefExoticComponent<SlotProps & React.RefAttributes<HTMLElement>>;
|
8
|
+
declare const Slottable: ({ children }: {
|
9
|
+
children: React.ReactNode;
|
10
|
+
}) => react_jsx_runtime.JSX.Element;
|
11
|
+
declare const Root: React.ForwardRefExoticComponent<SlotProps & React.RefAttributes<HTMLElement>>;
|
12
|
+
|
13
|
+
export { Root, Slot, type SlotProps, Slottable };
|
package/dist/index.js
ADDED
@@ -0,0 +1,118 @@
|
|
1
|
+
"use strict";
|
2
|
+
var __create = Object.create;
|
3
|
+
var __defProp = Object.defineProperty;
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
8
|
+
var __export = (target, all) => {
|
9
|
+
for (var name in all)
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
11
|
+
};
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
14
|
+
for (let key of __getOwnPropNames(from))
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
17
|
+
}
|
18
|
+
return to;
|
19
|
+
};
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
26
|
+
mod
|
27
|
+
));
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
29
|
+
|
30
|
+
// packages/react/slot/src/index.ts
|
31
|
+
var src_exports = {};
|
32
|
+
__export(src_exports, {
|
33
|
+
Root: () => Root,
|
34
|
+
Slot: () => Slot,
|
35
|
+
Slottable: () => Slottable
|
36
|
+
});
|
37
|
+
module.exports = __toCommonJS(src_exports);
|
38
|
+
|
39
|
+
// packages/react/slot/src/Slot.tsx
|
40
|
+
var React = __toESM(require("react"));
|
41
|
+
var import_react_compose_refs = require("@huin-core/react-compose-refs");
|
42
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
43
|
+
var Slot = React.forwardRef((props, forwardedRef) => {
|
44
|
+
const { children, ...slotProps } = props;
|
45
|
+
const childrenArray = React.Children.toArray(children);
|
46
|
+
const slottable = childrenArray.find(isSlottable);
|
47
|
+
if (slottable) {
|
48
|
+
const newElement = slottable.props.children;
|
49
|
+
const newChildren = childrenArray.map((child) => {
|
50
|
+
if (child === slottable) {
|
51
|
+
if (React.Children.count(newElement) > 1) return React.Children.only(null);
|
52
|
+
return React.isValidElement(newElement) ? newElement.props.children : null;
|
53
|
+
} else {
|
54
|
+
return child;
|
55
|
+
}
|
56
|
+
});
|
57
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SlotClone, { ...slotProps, ref: forwardedRef, children: React.isValidElement(newElement) ? React.cloneElement(newElement, void 0, newChildren) : null });
|
58
|
+
}
|
59
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SlotClone, { ...slotProps, ref: forwardedRef, children });
|
60
|
+
});
|
61
|
+
Slot.displayName = "Slot";
|
62
|
+
var SlotClone = React.forwardRef((props, forwardedRef) => {
|
63
|
+
const { children, ...slotProps } = props;
|
64
|
+
if (React.isValidElement(children)) {
|
65
|
+
const childrenRef = getElementRef(children);
|
66
|
+
return React.cloneElement(children, {
|
67
|
+
...mergeProps(slotProps, children.props),
|
68
|
+
// @ts-ignore
|
69
|
+
ref: forwardedRef ? (0, import_react_compose_refs.composeRefs)(forwardedRef, childrenRef) : childrenRef
|
70
|
+
});
|
71
|
+
}
|
72
|
+
return React.Children.count(children) > 1 ? React.Children.only(null) : null;
|
73
|
+
});
|
74
|
+
SlotClone.displayName = "SlotClone";
|
75
|
+
var Slottable = ({ children }) => {
|
76
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children });
|
77
|
+
};
|
78
|
+
function isSlottable(child) {
|
79
|
+
return React.isValidElement(child) && child.type === Slottable;
|
80
|
+
}
|
81
|
+
function mergeProps(slotProps, childProps) {
|
82
|
+
const overrideProps = { ...childProps };
|
83
|
+
for (const propName in childProps) {
|
84
|
+
const slotPropValue = slotProps[propName];
|
85
|
+
const childPropValue = childProps[propName];
|
86
|
+
const isHandler = /^on[A-Z]/.test(propName);
|
87
|
+
if (isHandler) {
|
88
|
+
if (slotPropValue && childPropValue) {
|
89
|
+
overrideProps[propName] = (...args) => {
|
90
|
+
childPropValue(...args);
|
91
|
+
slotPropValue(...args);
|
92
|
+
};
|
93
|
+
} else if (slotPropValue) {
|
94
|
+
overrideProps[propName] = slotPropValue;
|
95
|
+
}
|
96
|
+
} else if (propName === "style") {
|
97
|
+
overrideProps[propName] = { ...slotPropValue, ...childPropValue };
|
98
|
+
} else if (propName === "className") {
|
99
|
+
overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
|
100
|
+
}
|
101
|
+
}
|
102
|
+
return { ...slotProps, ...overrideProps };
|
103
|
+
}
|
104
|
+
function getElementRef(element) {
|
105
|
+
let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
|
106
|
+
let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
|
107
|
+
if (mayWarn) {
|
108
|
+
return element.ref;
|
109
|
+
}
|
110
|
+
getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
|
111
|
+
mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
|
112
|
+
if (mayWarn) {
|
113
|
+
return element.props.ref;
|
114
|
+
}
|
115
|
+
return element.props.ref || element.ref;
|
116
|
+
}
|
117
|
+
var Root = Slot;
|
118
|
+
//# sourceMappingURL=index.js.map
|
@@ -0,0 +1,7 @@
|
|
1
|
+
{
|
2
|
+
"version": 3,
|
3
|
+
"sources": ["../src/index.ts", "../src/Slot.tsx"],
|
4
|
+
"sourcesContent": ["export {\n Slot,\n Slottable,\n //\n Root,\n} from './Slot';\nexport type { SlotProps } from './Slot';\n", "import * as React from 'react';\nimport { composeRefs } from '@huin-core/react-compose-refs';\n\n/* -------------------------------------------------------------------------------------------------\n * Slot\n * -----------------------------------------------------------------------------------------------*/\n\ninterface SlotProps extends React.HTMLAttributes<HTMLElement> {\n children?: React.ReactNode;\n}\n\nconst Slot = React.forwardRef<HTMLElement, SlotProps>((props, forwardedRef) => {\n const { children, ...slotProps } = props;\n const childrenArray = React.Children.toArray(children);\n const slottable = childrenArray.find(isSlottable);\n\n if (slottable) {\n // the new element to render is the one passed as a child of `Slottable`\n const newElement = slottable.props.children as React.ReactNode;\n\n const newChildren = childrenArray.map((child) => {\n if (child === slottable) {\n // because the new element will be the one rendered, we are only interested\n // in grabbing its children (`newElement.props.children`)\n if (React.Children.count(newElement) > 1) return React.Children.only(null);\n return React.isValidElement(newElement)\n ? (newElement.props.children as React.ReactNode)\n : null;\n } else {\n return child;\n }\n });\n\n return (\n <SlotClone {...slotProps} ref={forwardedRef}>\n {React.isValidElement(newElement)\n ? React.cloneElement(newElement, undefined, newChildren)\n : null}\n </SlotClone>\n );\n }\n\n return (\n <SlotClone {...slotProps} ref={forwardedRef}>\n {children}\n </SlotClone>\n );\n});\n\nSlot.displayName = 'Slot';\n\n/* -------------------------------------------------------------------------------------------------\n * SlotClone\n * -----------------------------------------------------------------------------------------------*/\n\ninterface SlotCloneProps {\n children: React.ReactNode;\n}\n\nconst SlotClone = React.forwardRef<any, SlotCloneProps>((props, forwardedRef) => {\n const { children, ...slotProps } = props;\n\n if (React.isValidElement(children)) {\n const childrenRef = getElementRef(children);\n return React.cloneElement(children, {\n ...mergeProps(slotProps, children.props),\n // @ts-ignore\n ref: forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef,\n });\n }\n\n return React.Children.count(children) > 1 ? React.Children.only(null) : null;\n});\n\nSlotClone.displayName = 'SlotClone';\n\n/* -------------------------------------------------------------------------------------------------\n * Slottable\n * -----------------------------------------------------------------------------------------------*/\n\nconst Slottable = ({ children }: { children: React.ReactNode }) => {\n return <>{children}</>;\n};\n\n/* ---------------------------------------------------------------------------------------------- */\n\ntype AnyProps = Record<string, any>;\n\nfunction isSlottable(child: React.ReactNode): child is React.ReactElement {\n return React.isValidElement(child) && child.type === Slottable;\n}\n\nfunction mergeProps(slotProps: AnyProps, childProps: AnyProps) {\n // all child props should override\n const overrideProps = { ...childProps };\n\n for (const propName in childProps) {\n const slotPropValue = slotProps[propName];\n const childPropValue = childProps[propName];\n\n const isHandler = /^on[A-Z]/.test(propName);\n if (isHandler) {\n // if the handler exists on both, we compose them\n if (slotPropValue && childPropValue) {\n overrideProps[propName] = (...args: unknown[]) => {\n childPropValue(...args);\n slotPropValue(...args);\n };\n }\n // but if it exists only on the slot, we use only this one\n else if (slotPropValue) {\n overrideProps[propName] = slotPropValue;\n }\n }\n // if it's `style`, we merge them\n else if (propName === 'style') {\n overrideProps[propName] = { ...slotPropValue, ...childPropValue };\n } else if (propName === 'className') {\n overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(' ');\n }\n }\n\n return { ...slotProps, ...overrideProps };\n}\n\n// Before React 19 accessing `element.props.ref` will throw a warning and suggest using `element.ref`\n// After React 19 accessing `element.ref` does the opposite.\n// https://github.com/facebook/react/pull/28348\n//\n// Access the ref using the method that doesn't yield a warning.\nfunction getElementRef(element: React.ReactElement) {\n // React <=18 in DEV\n let getter = Object.getOwnPropertyDescriptor(element.props, 'ref')?.get;\n let mayWarn = getter && 'isReactWarning' in getter && getter.isReactWarning;\n if (mayWarn) {\n return (element as any).ref;\n }\n\n // React 19 in DEV\n getter = Object.getOwnPropertyDescriptor(element, 'ref')?.get;\n mayWarn = getter && 'isReactWarning' in getter && getter.isReactWarning;\n if (mayWarn) {\n return element.props.ref;\n }\n\n // Not DEV\n return element.props.ref || (element as any).ref;\n}\n\nconst Root = Slot;\n\nexport {\n Slot,\n Slottable,\n //\n Root,\n};\nexport type { SlotProps };\n"],
|
5
|
+
"mappings": "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",
|
6
|
+
"names": []
|
7
|
+
}
|
package/dist/index.mjs
ADDED
@@ -0,0 +1,85 @@
|
|
1
|
+
// packages/react/slot/src/Slot.tsx
|
2
|
+
import * as React from "react";
|
3
|
+
import { composeRefs } from "@huin-core/react-compose-refs";
|
4
|
+
import { Fragment, jsx } from "react/jsx-runtime";
|
5
|
+
var Slot = React.forwardRef((props, forwardedRef) => {
|
6
|
+
const { children, ...slotProps } = props;
|
7
|
+
const childrenArray = React.Children.toArray(children);
|
8
|
+
const slottable = childrenArray.find(isSlottable);
|
9
|
+
if (slottable) {
|
10
|
+
const newElement = slottable.props.children;
|
11
|
+
const newChildren = childrenArray.map((child) => {
|
12
|
+
if (child === slottable) {
|
13
|
+
if (React.Children.count(newElement) > 1) return React.Children.only(null);
|
14
|
+
return React.isValidElement(newElement) ? newElement.props.children : null;
|
15
|
+
} else {
|
16
|
+
return child;
|
17
|
+
}
|
18
|
+
});
|
19
|
+
return /* @__PURE__ */ jsx(SlotClone, { ...slotProps, ref: forwardedRef, children: React.isValidElement(newElement) ? React.cloneElement(newElement, void 0, newChildren) : null });
|
20
|
+
}
|
21
|
+
return /* @__PURE__ */ jsx(SlotClone, { ...slotProps, ref: forwardedRef, children });
|
22
|
+
});
|
23
|
+
Slot.displayName = "Slot";
|
24
|
+
var SlotClone = React.forwardRef((props, forwardedRef) => {
|
25
|
+
const { children, ...slotProps } = props;
|
26
|
+
if (React.isValidElement(children)) {
|
27
|
+
const childrenRef = getElementRef(children);
|
28
|
+
return React.cloneElement(children, {
|
29
|
+
...mergeProps(slotProps, children.props),
|
30
|
+
// @ts-ignore
|
31
|
+
ref: forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef
|
32
|
+
});
|
33
|
+
}
|
34
|
+
return React.Children.count(children) > 1 ? React.Children.only(null) : null;
|
35
|
+
});
|
36
|
+
SlotClone.displayName = "SlotClone";
|
37
|
+
var Slottable = ({ children }) => {
|
38
|
+
return /* @__PURE__ */ jsx(Fragment, { children });
|
39
|
+
};
|
40
|
+
function isSlottable(child) {
|
41
|
+
return React.isValidElement(child) && child.type === Slottable;
|
42
|
+
}
|
43
|
+
function mergeProps(slotProps, childProps) {
|
44
|
+
const overrideProps = { ...childProps };
|
45
|
+
for (const propName in childProps) {
|
46
|
+
const slotPropValue = slotProps[propName];
|
47
|
+
const childPropValue = childProps[propName];
|
48
|
+
const isHandler = /^on[A-Z]/.test(propName);
|
49
|
+
if (isHandler) {
|
50
|
+
if (slotPropValue && childPropValue) {
|
51
|
+
overrideProps[propName] = (...args) => {
|
52
|
+
childPropValue(...args);
|
53
|
+
slotPropValue(...args);
|
54
|
+
};
|
55
|
+
} else if (slotPropValue) {
|
56
|
+
overrideProps[propName] = slotPropValue;
|
57
|
+
}
|
58
|
+
} else if (propName === "style") {
|
59
|
+
overrideProps[propName] = { ...slotPropValue, ...childPropValue };
|
60
|
+
} else if (propName === "className") {
|
61
|
+
overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
|
62
|
+
}
|
63
|
+
}
|
64
|
+
return { ...slotProps, ...overrideProps };
|
65
|
+
}
|
66
|
+
function getElementRef(element) {
|
67
|
+
let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
|
68
|
+
let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
|
69
|
+
if (mayWarn) {
|
70
|
+
return element.ref;
|
71
|
+
}
|
72
|
+
getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
|
73
|
+
mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
|
74
|
+
if (mayWarn) {
|
75
|
+
return element.props.ref;
|
76
|
+
}
|
77
|
+
return element.props.ref || element.ref;
|
78
|
+
}
|
79
|
+
var Root = Slot;
|
80
|
+
export {
|
81
|
+
Root,
|
82
|
+
Slot,
|
83
|
+
Slottable
|
84
|
+
};
|
85
|
+
//# sourceMappingURL=index.mjs.map
|
@@ -0,0 +1,7 @@
|
|
1
|
+
{
|
2
|
+
"version": 3,
|
3
|
+
"sources": ["../src/Slot.tsx"],
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nimport { composeRefs } from '@huin-core/react-compose-refs';\n\n/* -------------------------------------------------------------------------------------------------\n * Slot\n * -----------------------------------------------------------------------------------------------*/\n\ninterface SlotProps extends React.HTMLAttributes<HTMLElement> {\n children?: React.ReactNode;\n}\n\nconst Slot = React.forwardRef<HTMLElement, SlotProps>((props, forwardedRef) => {\n const { children, ...slotProps } = props;\n const childrenArray = React.Children.toArray(children);\n const slottable = childrenArray.find(isSlottable);\n\n if (slottable) {\n // the new element to render is the one passed as a child of `Slottable`\n const newElement = slottable.props.children as React.ReactNode;\n\n const newChildren = childrenArray.map((child) => {\n if (child === slottable) {\n // because the new element will be the one rendered, we are only interested\n // in grabbing its children (`newElement.props.children`)\n if (React.Children.count(newElement) > 1) return React.Children.only(null);\n return React.isValidElement(newElement)\n ? (newElement.props.children as React.ReactNode)\n : null;\n } else {\n return child;\n }\n });\n\n return (\n <SlotClone {...slotProps} ref={forwardedRef}>\n {React.isValidElement(newElement)\n ? React.cloneElement(newElement, undefined, newChildren)\n : null}\n </SlotClone>\n );\n }\n\n return (\n <SlotClone {...slotProps} ref={forwardedRef}>\n {children}\n </SlotClone>\n );\n});\n\nSlot.displayName = 'Slot';\n\n/* -------------------------------------------------------------------------------------------------\n * SlotClone\n * -----------------------------------------------------------------------------------------------*/\n\ninterface SlotCloneProps {\n children: React.ReactNode;\n}\n\nconst SlotClone = React.forwardRef<any, SlotCloneProps>((props, forwardedRef) => {\n const { children, ...slotProps } = props;\n\n if (React.isValidElement(children)) {\n const childrenRef = getElementRef(children);\n return React.cloneElement(children, {\n ...mergeProps(slotProps, children.props),\n // @ts-ignore\n ref: forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef,\n });\n }\n\n return React.Children.count(children) > 1 ? React.Children.only(null) : null;\n});\n\nSlotClone.displayName = 'SlotClone';\n\n/* -------------------------------------------------------------------------------------------------\n * Slottable\n * -----------------------------------------------------------------------------------------------*/\n\nconst Slottable = ({ children }: { children: React.ReactNode }) => {\n return <>{children}</>;\n};\n\n/* ---------------------------------------------------------------------------------------------- */\n\ntype AnyProps = Record<string, any>;\n\nfunction isSlottable(child: React.ReactNode): child is React.ReactElement {\n return React.isValidElement(child) && child.type === Slottable;\n}\n\nfunction mergeProps(slotProps: AnyProps, childProps: AnyProps) {\n // all child props should override\n const overrideProps = { ...childProps };\n\n for (const propName in childProps) {\n const slotPropValue = slotProps[propName];\n const childPropValue = childProps[propName];\n\n const isHandler = /^on[A-Z]/.test(propName);\n if (isHandler) {\n // if the handler exists on both, we compose them\n if (slotPropValue && childPropValue) {\n overrideProps[propName] = (...args: unknown[]) => {\n childPropValue(...args);\n slotPropValue(...args);\n };\n }\n // but if it exists only on the slot, we use only this one\n else if (slotPropValue) {\n overrideProps[propName] = slotPropValue;\n }\n }\n // if it's `style`, we merge them\n else if (propName === 'style') {\n overrideProps[propName] = { ...slotPropValue, ...childPropValue };\n } else if (propName === 'className') {\n overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(' ');\n }\n }\n\n return { ...slotProps, ...overrideProps };\n}\n\n// Before React 19 accessing `element.props.ref` will throw a warning and suggest using `element.ref`\n// After React 19 accessing `element.ref` does the opposite.\n// https://github.com/facebook/react/pull/28348\n//\n// Access the ref using the method that doesn't yield a warning.\nfunction getElementRef(element: React.ReactElement) {\n // React <=18 in DEV\n let getter = Object.getOwnPropertyDescriptor(element.props, 'ref')?.get;\n let mayWarn = getter && 'isReactWarning' in getter && getter.isReactWarning;\n if (mayWarn) {\n return (element as any).ref;\n }\n\n // React 19 in DEV\n getter = Object.getOwnPropertyDescriptor(element, 'ref')?.get;\n mayWarn = getter && 'isReactWarning' in getter && getter.isReactWarning;\n if (mayWarn) {\n return element.props.ref;\n }\n\n // Not DEV\n return element.props.ref || (element as any).ref;\n}\n\nconst Root = Slot;\n\nexport {\n Slot,\n Slottable,\n //\n Root,\n};\nexport type { SlotProps };\n"],
|
5
|
+
"mappings": ";AAAA,YAAY,WAAW;AACvB,SAAS,mBAAmB;AAiCtB,SA+CG,UA/CH;AAvBN,IAAM,OAAa,iBAAmC,CAAC,OAAO,iBAAiB;AAC7E,QAAM,EAAE,UAAU,GAAG,UAAU,IAAI;AACnC,QAAM,gBAAsB,eAAS,QAAQ,QAAQ;AACrD,QAAM,YAAY,cAAc,KAAK,WAAW;AAEhD,MAAI,WAAW;AAEb,UAAM,aAAa,UAAU,MAAM;AAEnC,UAAM,cAAc,cAAc,IAAI,CAAC,UAAU;AAC/C,UAAI,UAAU,WAAW;AAGvB,YAAU,eAAS,MAAM,UAAU,IAAI,EAAG,QAAa,eAAS,KAAK,IAAI;AACzE,eAAa,qBAAe,UAAU,IACjC,WAAW,MAAM,WAClB;AAAA,MACN,OAAO;AACL,eAAO;AAAA,MACT;AAAA,IACF,CAAC;AAED,WACE,oBAAC,aAAW,GAAG,WAAW,KAAK,cAC5B,UAAM,qBAAe,UAAU,IACtB,mBAAa,YAAY,QAAW,WAAW,IACrD,MACN;AAAA,EAEJ;AAEA,SACE,oBAAC,aAAW,GAAG,WAAW,KAAK,cAC5B,UACH;AAEJ,CAAC;AAED,KAAK,cAAc;AAUnB,IAAM,YAAkB,iBAAgC,CAAC,OAAO,iBAAiB;AAC/E,QAAM,EAAE,UAAU,GAAG,UAAU,IAAI;AAEnC,MAAU,qBAAe,QAAQ,GAAG;AAClC,UAAM,cAAc,cAAc,QAAQ;AAC1C,WAAa,mBAAa,UAAU;AAAA,MAClC,GAAG,WAAW,WAAW,SAAS,KAAK;AAAA;AAAA,MAEvC,KAAK,eAAe,YAAY,cAAc,WAAW,IAAI;AAAA,IAC/D,CAAC;AAAA,EACH;AAEA,SAAa,eAAS,MAAM,QAAQ,IAAI,IAAU,eAAS,KAAK,IAAI,IAAI;AAC1E,CAAC;AAED,UAAU,cAAc;AAMxB,IAAM,YAAY,CAAC,EAAE,SAAS,MAAqC;AACjE,SAAO,gCAAG,UAAS;AACrB;AAMA,SAAS,YAAY,OAAqD;AACxE,SAAa,qBAAe,KAAK,KAAK,MAAM,SAAS;AACvD;AAEA,SAAS,WAAW,WAAqB,YAAsB;AAE7D,QAAM,gBAAgB,EAAE,GAAG,WAAW;AAEtC,aAAW,YAAY,YAAY;AACjC,UAAM,gBAAgB,UAAU,QAAQ;AACxC,UAAM,iBAAiB,WAAW,QAAQ;AAE1C,UAAM,YAAY,WAAW,KAAK,QAAQ;AAC1C,QAAI,WAAW;AAEb,UAAI,iBAAiB,gBAAgB;AACnC,sBAAc,QAAQ,IAAI,IAAI,SAAoB;AAChD,yBAAe,GAAG,IAAI;AACtB,wBAAc,GAAG,IAAI;AAAA,QACvB;AAAA,MACF,WAES,eAAe;AACtB,sBAAc,QAAQ,IAAI;AAAA,MAC5B;AAAA,IACF,WAES,aAAa,SAAS;AAC7B,oBAAc,QAAQ,IAAI,EAAE,GAAG,eAAe,GAAG,eAAe;AAAA,IAClE,WAAW,aAAa,aAAa;AACnC,oBAAc,QAAQ,IAAI,CAAC,eAAe,cAAc,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,IACpF;AAAA,EACF;AAEA,SAAO,EAAE,GAAG,WAAW,GAAG,cAAc;AAC1C;AAOA,SAAS,cAAc,SAA6B;AAElD,MAAI,SAAS,OAAO,yBAAyB,QAAQ,OAAO,KAAK,GAAG;AACpE,MAAI,UAAU,UAAU,oBAAoB,UAAU,OAAO;AAC7D,MAAI,SAAS;AACX,WAAQ,QAAgB;AAAA,EAC1B;AAGA,WAAS,OAAO,yBAAyB,SAAS,KAAK,GAAG;AAC1D,YAAU,UAAU,oBAAoB,UAAU,OAAO;AACzD,MAAI,SAAS;AACX,WAAO,QAAQ,MAAM;AAAA,EACvB;AAGA,SAAO,QAAQ,MAAM,OAAQ,QAAgB;AAC/C;AAEA,IAAM,OAAO;",
|
6
|
+
"names": []
|
7
|
+
}
|