@slimr/css 2.1.11 → 2.1.14

package/README.md

@@ -1,6 +1,18 @@
-# @slimr/css
+# 🪶 @slimr/css [![npm package](https://img.shields.io/npm/v/@slimr/css.svg?style=flat-square)](https://npmjs.org/package/@slimr/css)
 
-A tiny alternative to the popular emotion library
+tiny css-in-js features, inspired by the popular emotion library
+
+Demo: [CodeSandbox](https://codesandbox.io/s/64r9px?file=/src/App.tsx)
+
+Features:
+
+- Much smaller (less bundle size)
+- Less is more: faster, less bugs, no breaking changes
+- Is progressive -- lazy loads styles
+- Css shorthand props like [chakra-ui](https://chakra-ui.com/docs/styled-system/style-props)
+- CSS responsive shorthand props like [chakra-ui](https://chakra-ui.com/docs/styled-system/responsive-styles)
+
+## Context
 
 `@slimr` is a set of slim React (hence '@slimr') libs:
 
@@ -14,63 +26,59 @@ A tiny alternative to the popular emotion library
 - [@slimr/swr](https://www.npmjs.com/package/@slimr/swr) - A React hook for fetching data that supports stale-while-refresh eager rendering
 - [@slimr/util](https://www.npmjs.com/package/@slimr/util) - Framework agnostic Javascript polyfills
 
-Pros:
+## Setup/Install
 
-- Much less bundle size
-- Less is more: faster, less bugs, no breaking changes
-- Is progressive -- lazy loads styles along with component if component is lazy
-- Css shorthand props like [chakra-ui](https://chakra-ui.com/docs/styled-system/style-props):
-  - `m` --> `margin`
-  - `mx` --> `margin-left` and bottom
-  - `py` --> `padding-top` and bottom
-  - More [here](https://github.com/bdombro/slimr/blob/65bf012086760b7e481a4064f3be8aea6a098b91/packages/css/src/index.ts#L73)!
-- CSS Breakpoints shorthand like [chakra-ui](https://chakra-ui.com/docs/styled-system/responsive-styles):
+```bash
+npm i @slimr/css
+```
 
-  ```css
-  margin: [auto, null, inherit];
-  /* Translates to */
-  margin: auto;
-  @media (min-width: 48em) {
-    margin: inherit;
-  }
-  ```
+## API
 
-  - Breakpoints are `[30em, 48em, 62em, 80em, 96em]`
+### addCss
 
-Cons:
+Injects css to the page head
 
-- No SSR support
+- Queues and batches injections for better performance
+- Has local cache to recall prior adds, to reduce duplicates and dom changes
 
-## Setup/Install
+```typescript
+import { addCSs } from '@slimr/css'
+addCss(`.foo { color: green; }`) // queues css for injection
+addCss(`.foo { color: green; }`) // ignored bc duplicate
+addCss(`.foo { background: purplse`) // queues more css
+// the queue will be executed next javascript tick
+```
 
-```bash
-npm i @slimr/css
+### `css` (alias for `createClass`)
+
+Upserts and returns a unique css class for a given css string
+
+- Leverages addCss under the hood, so very performant
+- Supports several css short-hands, inspired by [Chakra-UI's box](https://chakra-ui.com/docs/styled-system/responsive-styles)
+- Supports array values for responsive styles, similar to Chakra-UI's box. More [here](https://github.com/bdombro/slimr/blob/65bf012086760b7e481a4064f3be8aea6a098b91/packages/css/src/index.ts#L73)
+
+```typescript
+import {createClass, css} from '@slimr/css'
+c1 = createClass('c: red;') // queues the create of new css class 's0'
+c2 = createClass('c: red;') // is duplicate so will return 's0'
+c3 = createClass`c: red;` // same
+c4 = css`c: red;` // same
+// c1 = c2 = c3 = c4
+<div className={css`c: red;`} /> // will resolve to 's0' like above
+c5 = css`c: blue;` // queues the create of new css class 's1'
+c6 = css`w: [100%, null, 400px]` // width = 100% on mobile and table, 400px on desktop
 ```
 
-## Usage
-
-```tsx
-// Add some global styles
-addCss`
-  body {
-    color: lightgray;
-  }
-`
-  return (
-    <div
-      className={css`
-        background: white;
-        color: ${on ? 'red' : 'initial'};
-        &:hover {
-          font-weight: bold;
-        }
-        font-size: [20px, null, 16px];
-      `}
-    >
-      Helo css!
-    </div>
-  )
-}
+...and the queue will be executed next javascript tick
+
+### `classJoin`
+
+Joins class names and omits falsey props
+
+```typescript
+import { classJoin } from '@slimr/css'
+classJoin('a', 'b', 'c') // 'a b c'
+classJoin('a', 0, 'b', null, 'c') // 'a b c'
 ```
 
 ## Comparisons

package/cjs/addCss.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Injects css to the page head
+ *
+ * - Lazy: Will not be added until the component mounts, if called from within a component
+ * - Batches dom changes for better performance
+ * - Has local cache to recall prior adds, to reduce duplicates and dom changes
+ *
+ * @param css
+ * css to be injected
+ *
+ * @returns void
+ *
+ * @example
+ * addCss(`.myClass { color: red; }`) // queues css for injection
+ * addCss(`.myClass { color: red; }`) // is duplicate so will not be added
+ * addCss(`.myClass { color: blue; }`) // queues css for injection
+ * // ...and the queue will be executed next javascript tick
+ */
+export declare function addCss(css: string): void;
+export declare namespace addCss {
+    var que: Set<string>;
+    var count: number;
+}

package/cjs/addCss.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addCss = void 0;
+/**
+ * Injects css to the page head
+ *
+ * - Lazy: Will not be added until the component mounts, if called from within a component
+ * - Batches dom changes for better performance
+ * - Has local cache to recall prior adds, to reduce duplicates and dom changes
+ *
+ * @param css
+ * css to be injected
+ *
+ * @returns void
+ *
+ * @example
+ * addCss(`.myClass { color: red; }`) // queues css for injection
+ * addCss(`.myClass { color: red; }`) // is duplicate so will not be added
+ * addCss(`.myClass { color: blue; }`) // queues css for injection
+ * // ...and the queue will be executed next javascript tick
+ */
+function addCss(css) {
+    addCss.que.add(css);
+    setTimeout(() => {
+        const css = [...addCss.que].join('\n');
+        if (css) {
+            addCss.que.clear();
+            const s = document.createElement('style');
+            s.id = `u${addCss.count++}`;
+            s.innerHTML = css;
+            document.head.appendChild(s);
+        }
+    }, 0);
+}
+exports.addCss = addCss;
+addCss.que = new Set();
+addCss.count = 0;
+//# sourceMappingURL=addCss.js.map

package/cjs/addCss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"addCss.js","sourceRoot":"","sources":["../src/addCss.ts"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH,SAAgB,MAAM,CAAC,GAAW;IAChC,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;IACnB,UAAU,CAAC,GAAG,EAAE;QACd,MAAM,GAAG,GAAG,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QACtC,IAAI,GAAG,EAAE;YACP,MAAM,CAAC,GAAG,CAAC,KAAK,EAAE,CAAA;YAClB,MAAM,CAAC,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAA;YACzC,CAAC,CAAC,EAAE,GAAG,IAAI,MAAM,CAAC,KAAK,EAAE,EAAE,CAAA;YAC3B,CAAC,CAAC,SAAS,GAAG,GAAG,CAAA;YACjB,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAA;SAC7B;IACH,CAAC,EAAE,CAAC,CAAC,CAAA;AACP,CAAC;AAZD,wBAYC;AACD,MAAM,CAAC,GAAG,GAAG,IAAI,GAAG,EAAU,CAAA;AAC9B,MAAM,CAAC,KAAK,GAAG,CAAC,CAAA"}

package/cjs/addCss.ts

@@ -0,0 +1,33 @@
+/**
+ * Injects css to the page head
+ *
+ * - Lazy: Will not be added until the component mounts, if called from within a component
+ * - Batches dom changes for better performance
+ * - Has local cache to recall prior adds, to reduce duplicates and dom changes
+ *
+ * @param css
+ * css to be injected
+ *
+ * @returns void
+ *
+ * @example
+ * addCss(`.myClass { color: red; }`) // queues css for injection
+ * addCss(`.myClass { color: red; }`) // is duplicate so will not be added
+ * addCss(`.myClass { color: blue; }`) // queues css for injection
+ * // ...and the queue will be executed next javascript tick
+ */
+export function addCss(css: string) {
+  addCss.que.add(css)
+  setTimeout(() => {
+    const css = [...addCss.que].join('\n')
+    if (css) {
+      addCss.que.clear()
+      const s = document.createElement('style')
+      s.id = `u${addCss.count++}`
+      s.innerHTML = css
+      document.head.appendChild(s)
+    }
+  }, 0)
+}
+addCss.que = new Set<string>()
+addCss.count = 0

package/cjs/createClass.d.ts

@@ -0,0 +1,43 @@
+import { T2SProps } from '@slimr/util';
+/**
+ * Joins class names and omits falsey props
+ *
+ * @param classes
+ * class names to be joined
+ *
+ * @returns a string of joined class names
+ *
+ * @example
+ * ```typescript
+ * classJoin('a', 'b', 'c') // 'a b c'
+ * classJoin('a', 0, 'b', null, 'c') // 'a b c'
+ * ```
+ */
+export declare function classJoin(...classes: (string | 0 | null | undefined)[]): string;
+/**
+ * Upserts and returns a unique css class for a given css string
+ *
+ * @param cssString
+ * string or template string, to be injected. Shorthand props are supported (see Readme).
+ *
+ * @returns a unique class name
+ *
+ * @example
+ * ```typescript
+ * c1 = createClass('c: red;') // queues the create of new css class 's0'
+ * c2 = createClass('c: red;') // is duplicate so will return 's0'
+ * c3 = createClass`c: red;` // same
+ * c4 = css`c: red;` // same
+ * // c1 = c2 = c3 = c4
+ * <div className={css`c: red;`} /> // will resolve to 's0' like above
+ * c5 = css`c: blue;` // queues the create of new css class 's1'
+ * c6 = css`w: [100%, null, 400px]` // width = 100% on mobile and table, 400px on desktop
+ * ```
+ * ...and the queue will be executed next javascript tick
+ */
+export declare function createClass(...p: T2SProps): string;
+export declare namespace createClass {
+    var breakPoints: string[];
+    var count: number;
+    var history: Map<string, string>;
+}

package/cjs/{src/createClass.js → createClass.js}

@@ -1,13 +1,85 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createClass = exports.addCss = exports.t2s = exports.shorthandProps = exports.shorthandPropsMap = exports.classJoin = exports.breakPoints = void 0;
-/** Breakpoints like chakra */
-exports.breakPoints = ['30em', '48em', '62em', '80em', '96em'];
-/** Joins class names and filters out blanks */
+exports.createClass = exports.classJoin = void 0;
+const util_1 = require("@slimr/util");
+const addCss_js_1 = require("./addCss.js");
+const shorthandProps_js_1 = require("./shorthandProps.js");
+/**
+ * Joins class names and omits falsey props
+ *
+ * @param classes
+ * class names to be joined
+ *
+ * @returns a string of joined class names
+ *
+ * @example
+ * ```typescript
+ * classJoin('a', 'b', 'c') // 'a b c'
+ * classJoin('a', 0, 'b', null, 'c') // 'a b c'
+ * ```
+ */
 function classJoin(...classes) {
     return classes.filter(c => c && typeof c === 'string').join(' ');
 }
 exports.classJoin = classJoin;
+/**
+ * Upserts and returns a unique css class for a given css string
+ *
+ * @param cssString
+ * string or template string, to be injected. Shorthand props are supported (see Readme).
+ *
+ * @returns a unique class name
+ *
+ * @example
+ * ```typescript
+ * c1 = createClass('c: red;') // queues the create of new css class 's0'
+ * c2 = createClass('c: red;') // is duplicate so will return 's0'
+ * c3 = createClass`c: red;` // same
+ * c4 = css`c: red;` // same
+ * // c1 = c2 = c3 = c4
+ * <div className={css`c: red;`} /> // will resolve to 's0' like above
+ * c5 = css`c: blue;` // queues the create of new css class 's1'
+ * c6 = css`w: [100%, null, 400px]` // width = 100% on mobile and table, 400px on desktop
+ * ```
+ * ...and the queue will be executed next javascript tick
+ */
+function createClass(...p) {
+    let css = (0, util_1.t2s)(...p);
+    if (!css)
+        return '';
+    let className = createClass.history.get(css);
+    if (!className) {
+        className = 's' + createClass.count++;
+        createClass.history.set(css, className);
+        css = deleteComments(css);
+        css = (0, shorthandProps_js_1.expandShorthands)(css);
+        css = expandArrayValues(css);
+        const qs = findQueries(css);
+        for (const q of qs.reverse()) {
+            css = css.slice(0, q.start) + css.slice(q.end);
+        }
+        css = `.${className}{\n${css}\n}\n`;
+        css += qs
+            .map(q => {
+            if (q.query.startsWith('&')) {
+                return `.${className}${q.query.slice(1)}{\n${q.innerBody}\n}`;
+            }
+            if (q.query.startsWith('@keyframes')) {
+                return q.outerBody;
+            }
+            return `${q.query}{\n.${className}{${q.innerBody}\n}\n}`;
+        })
+            .join('\n');
+        css = trimByLine(css) + '\n\n';
+        (0, addCss_js_1.addCss)(css);
+    }
+    return className;
+}
+exports.createClass = createClass;
+/** Breakpoints like chakra */
+createClass.breakPoints = ['30em', '48em', '62em', '80em', '96em'];
+createClass.count = 0;
+createClass.history = new Map();
 /** delete css comments **/
 function deleteComments(css) {
     return css.replace(/{\/\*[\s\S]*?(?=\*\/})\*\/}/gm, '');
@@ -35,7 +107,7 @@ function expandArrayValues(css) {
                 if (i === 0) {
                     return `${prop}: ${val};`;
                 }
-                return `@media (min-width: ${exports.breakPoints[i - 1]}) { ${prop}: ${val}; }`;
+                return `@media (min-width: ${createClass.breakPoints[i - 1]}) { ${prop}: ${val}; }`;
             })
                 .join('\n');
         }
@@ -43,48 +115,6 @@ function expandArrayValues(css) {
     })
         .join('\n');
 }
-exports.shorthandPropsMap = {
-    ai: 'align-items',
-    b: 'border',
-    br: 'border-radius',
-    bg: 'background',
-    c: 'color',
-    d: 'display',
-    f: 'flex',
-    fd: 'flex-direction',
-    i: 'inset',
-    h: 'height',
-    jc: 'justify-content',
-    m: 'margin',
-    ml: 'margin-left',
-    mr: 'margin-right',
-    mt: 'margin-top',
-    mb: 'margin-bottom',
-    maxW: 'max-width',
-    minW: 'min-width',
-    p: 'padding',
-    pl: 'padding-left',
-    pr: 'padding-right',
-    pt: 'padding-top',
-    pb: 'padding-bottom',
-    pos: 'position',
-    ta: 'text-align',
-    w: 'width',
-    z: 'z-index',
-};
-exports.shorthandProps = [...Object.keys(exports.shorthandPropsMap), 'mx', 'my', 'px', 'py'];
-/** Expand short-hand css props to full */
-function expandProps(css) {
-    css = '\n' + css; // inject a newline to make the regex easier
-    // Handle 'mx', 'my', 'px', 'py'
-    css = css
-        .replace(/([mp])x:([^;]*)/g, '$1l:$2;\n$1r:$2')
-        .replace(/([mp])y:([^;]*);/g, '$1t:$2;\n$1b:$2');
-    Object.entries(exports.shorthandPropsMap).forEach(([k, v]) => {
-        css = css.replace(new RegExp(`([ \n\t;])${k}:`, 'g'), `$1${v}:`);
-    });
-    return css.trim();
-}
 /** Find @keyframes, @media, @container queries in css **/
 function findQueries(css) {
     const queries = [];
@@ -120,95 +150,11 @@ function findQueries(css) {
     return queries;
 }
 /** Trims whitespace for every line */
-function trim(css) {
+function trimByLine(css) {
     return css
         .split('\n')
         .map(l => l.trim())
         .filter(l => l)
         .join('\n');
 }
-/**
- * Assemble a string from a template string array and a list of placeholders.
- *
- * - If the first argument is a string, it is returned as is.
- *
- * i.e.
- * myFoo(...props: TemplateStringProps) => {
- *  const inputStr = t2s(...props);
- * }
- * myFoo`hello ${name}` => 'hello world'
- * myFoo(`hello ${name}`) => 'hello world'
- */
-function t2s(...tsp) {
-    const [s, ...p] = tsp;
-    return typeof s === 'string' ? s : s.map((s, i) => s + (p?.[i] ?? '')).join('');
-}
-exports.t2s = t2s;
-/**
- * Injects css to the page
- *
- * - Batches adds for performance
- *
- * @param css - css to be injected
- * @returns void
- */
-function addCss(css) {
-    addCss.que.add(css);
-    setTimeout(() => {
-        const css = [...addCss.que].join('\n');
-        if (css) {
-            addCss.que.clear();
-            const s = document.createElement('style');
-            s.id = `u${addCss.count++}`;
-            s.innerHTML = css;
-            document.head.appendChild(s);
-        }
-    }, 0);
-}
-exports.addCss = addCss;
-addCss.que = new Set();
-addCss.count = 0;
-/**
- * Injects css and creates unique class names
- *
- * - Skips if already added
- *
- * @param css - string or template string, to be injected
- * @returns a unique class name
- */
-function createClass(...p) {
-    let css = t2s(...p);
-    if (!css)
-        return '';
-    let className = createClass.history.get(css);
-    if (!className) {
-        className = 's' + createClass.count++;
-        createClass.history.set(css, className);
-        css = deleteComments(css);
-        css = expandProps(css);
-        css = expandArrayValues(css);
-        const qs = findQueries(css);
-        for (const q of qs.reverse()) {
-            css = css.slice(0, q.start) + css.slice(q.end);
-        }
-        css = `.${className}{\n${css}\n}\n`;
-        css += qs
-            .map(q => {
-            if (q.query.startsWith('&')) {
-                return `.${className}${q.query.slice(1)}{\n${q.innerBody}\n}`;
-            }
-            if (q.query.startsWith('@keyframes')) {
-                return q.outerBody;
-            }
-            return `${q.query}{\n.${className}{${q.innerBody}\n}\n}`;
-        })
-            .join('\n');
-        css = trim(css) + '\n\n';
-        addCss(css);
-    }
-    return className;
-}
-exports.createClass = createClass;
-createClass.count = 0;
-createClass.history = new Map();
 //# sourceMappingURL=createClass.js.map

package/cjs/createClass.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createClass.js","sourceRoot":"","sources":["../src/createClass.ts"],"names":[],"mappings":";;;AAAA,sCAAyC;AAEzC,2CAAkC;AAClC,2DAAoD;AAEpD;;;;;;;;;;;;;GAaG;AACH,SAAgB,SAAS,CAAC,GAAG,OAA0C;IACrE,OAAO,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,OAAO,CAAC,KAAK,QAAQ,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;AAClE,CAAC;AAFD,8BAEC;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,SAAgB,WAAW,CAAC,GAAG,CAAW;IACxC,IAAI,GAAG,GAAG,IAAA,UAAG,EAAC,GAAG,CAAC,CAAC,CAAA;IACnB,IAAI,CAAC,GAAG;QAAE,OAAO,EAAE,CAAA;IACnB,IAAI,SAAS,GAAG,WAAW,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;IAC5C,IAAI,CAAC,SAAS,EAAE;QACd,SAAS,GAAG,GAAG,GAAG,WAAW,CAAC,KAAK,EAAE,CAAA;QACrC,WAAW,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,EAAE,SAAS,CAAC,CAAA;QAEvC,GAAG,GAAG,cAAc,CAAC,GAAG,CAAC,CAAA;QACzB,GAAG,GAAG,IAAA,oCAAgB,EAAC,GAAG,CAAC,CAAA;QAC3B,GAAG,GAAG,iBAAiB,CAAC,GAAG,CAAC,CAAA;QAC5B,MAAM,EAAE,GAAG,WAAW,CAAC,GAAG,CAAC,CAAA;QAE3B,KAAK,MAAM,CAAC,IAAI,EAAE,CAAC,OAAO,EAAE,EAAE;YAC5B,GAAG,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAA;SAC/C;QAED,GAAG,GAAG,IAAI,SAAS,MAAM,GAAG,OAAO,CAAA;QACnC,GAAG,IAAI,EAAE;aACN,GAAG,CAAC,CAAC,CAAC,EAAE;YACP,IAAI,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE;gBAC3B,OAAO,IAAI,SAAS,GAAG,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,SAAS,KAAK,CAAA;aAC9D;YACD,IAAI,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,EAAE;gBACpC,OAAO,CAAC,CAAC,SAAS,CAAA;aACnB;YACD,OAAO,GAAG,CAAC,CAAC,KAAK,OAAO,SAAS,IAAI,CAAC,CAAC,SAAS,QAAQ,CAAA;QAC1D,CAAC,CAAC;aACD,IAAI,CAAC,IAAI,CAAC,CAAA;QAEb,GAAG,GAAG,UAAU,CAAC,GAAG,CAAC,GAAG,MAAM,CAAA;QAE9B,IAAA,kBAAM,EAAC,GAAG,CAAC,CAAA;KACZ;IACD,OAAO,SAAS,CAAA;AAClB,CAAC;AAnCD,kCAmCC;AACD,8BAA8B;AAC9B,WAAW,CAAC,WAAW,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;AAClE,WAAW,CAAC,KAAK,GAAG,CAAC,CAAA;AACrB,WAAW,CAAC,OAAO,GAAG,IAAI,GAAG,EAAkB,CAAA;AAE/C,2BAA2B;AAC3B,SAAS,cAAc,CAAC,GAAW;IACjC,OAAO,GAAG,CAAC,OAAO,CAAC,+BAA+B,EAAE,EAAE,CAAC,CAAA;AACzD,CAAC;AAED;;;;GAIG;AACH,SAAS,iBAAiB,CAAC,GAAW;IACpC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,GAAG,CAAC;QAAE,OAAO,GAAG,CAAA;IAClC,OAAO,GAAG;SACP,KAAK,CAAC,IAAI,CAAC;SACX,GAAG,CAAC,CAAC,CAAC,EAAE;QACP,6CAA6C;QAC7C,MAAM,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,iCAAiC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAA;QACpF,IAAI,IAAI,EAAE;YACR,OAAO,IAAI;iBACR,KAAK,CAAC,GAAG,CAAC;iBACV,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE;gBACd,GAAG,GAAG,GAAG,CAAC,IAAI,EAAE,CAAA;gBAChB,IAAI,CAAC,GAAG,IAAI,GAAG,KAAK,MAAM,IAAI,GAAG,KAAK,WAAW;oBAAE,OAAO,EAAE,CAAA;gBAC5D,IAAI,CAAC,KAAK,CAAC,EAAE;oBACX,OAAO,GAAG,IAAI,KAAK,GAAG,GAAG,CAAA;iBAC1B;gBACD,OAAO,sBAAsB,WAAW,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,CAAC,OAAO,IAAI,KAAK,GAAG,KAAK,CAAA;YACrF,CAAC,CAAC;iBACD,IAAI,CAAC,IAAI,CAAC,CAAA;SACd;QACD,OAAO,CAAC,CAAA;IACV,CAAC,CAAC;SACD,IAAI,CAAC,IAAI,CAAC,CAAA;AACf,CAAC;AAED,0DAA0D;AAC1D,SAAS,WAAW,CAAC,GAAW;IAC9B,MAAM,OAAO,GAAG,EAAE,CAAA;IAClB,KAAK,MAAM,CAAC,IAAI,GAAG,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;QACtC,IAAI,KAAK,GAAG,EAAE,CAAA;QACd,IAAI,SAAS,GAAG,CAAC,CAAA;QACjB,IAAI,SAAS,GAAG,CAAC,CAAA;QACjB,KAAK,IAAI,CAAC,GAAG,CAAC,CAAC,KAAM,EAAE,CAAC,GAAG,GAAG,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YAC1C,IAAI,GAAG,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE;gBAClB,IAAI,SAAS,KAAK,CAAC,EAAE;oBACnB,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAA;oBACpC,SAAS,GAAG,CAAC,GAAG,CAAC,CAAA;iBAClB;gBACD,SAAS,EAAE,CAAA;aACZ;iBAAM,IAAI,GAAG,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE;gBACzB,SAAS,EAAE,CAAA;gBACX,IAAI,SAAS,KAAK,CAAC,EAAE;oBACnB,OAAO,CAAC,IAAI,CAAC;wBACX,KAAK,EAAE,CAAC,CAAC,KAAK;wBACd,GAAG,EAAE,CAAC,GAAG,CAAC;wBACV,KAAK;wBACL,SAAS,EAAE,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,GAAG,CAAC,CAAC;wBACpC,SAAS,EAAE,GAAG,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC,CAAC;qBACnC,CAAC,CAAA;oBACF,MAAK;iBACN;aACF;SACF;QACD,IAAI,SAAS,KAAK,CAAC;YAAE,OAAO,CAAC,KAAK,CAAC,GAAG,KAAK,iBAAiB,GAAG,GAAG,CAAC,CAAA;KACpE;IACD,OAAO,OAAO,CAAA;AAChB,CAAC;AAED,sCAAsC;AACtC,SAAS,UAAU,CAAC,GAAW;IAC7B,OAAO,GAAG;SACP,KAAK,CAAC,IAAI,CAAC;SACX,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;SAClB,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;SACd,IAAI,CAAC,IAAI,CAAC,CAAA;AACf,CAAC"}