@cerberus-design/react 0.18.1 → 0.18.2

package/build/modern/_tsup-dts-rollup.d.ts

@@ -1460,6 +1460,8 @@ declare interface Conditions {
     	"_groupInvalid": string
     	/** `.group:is([data-checked="true"] &, [aria-checked="true"]) &` */
     	"_groupChecked": string
+    	/** `&:is(:not([disabled]), [data-disabled=false])` */
+    	"_notDisabled": string
     	/** `&:is([data-today=true], [data-date=today])` */
     	"_today": string
     	/** `&:is([data-past-day=true], [data-date=past])` */

package/build/modern/{chunk-URJ6JHLG.js → chunk-A5UXCB4L.js}

@@ -15,15 +15,15 @@ import {
   DialogHeading,
   DialogProvider
 } from "./chunk-SSR3CWJZ.js";
-import {
-  For
-} from "./chunk-I5RGBB57.js";
 import {
   Avatar
 } from "./chunk-CF4TCMJI.js";
 import {
   useCerberusContext
 } from "./chunk-GITT5645.js";
+import {
+  For
+} from "./chunk-I5RGBB57.js";
 import {
   Show
 } from "./chunk-VEAC4I3F.js";
@@ -114,4 +114,4 @@ export {
   CTAModal,
   useCTAModal
 };
-//# sourceMappingURL=chunk-URJ6JHLG.js.map
+//# sourceMappingURL=chunk-A5UXCB4L.js.map

package/build/modern/{chunk-IE2HWT3I.js → chunk-PRV3HAK3.js}

@@ -1,3 +1,6 @@
+import {
+  For
+} from "./chunk-I5RGBB57.js";
 import {
   Show
 } from "./chunk-VEAC4I3F.js";
@@ -77,48 +80,69 @@ function CircularProgress(props) {
                 pathLength: "100"
               }
             ),
-            /* @__PURE__ */ jsx(
-              "circle",
+            /* @__PURE__ */ jsxs(
+              Show,
               {
-                "data-complete": now === 100,
-                className: styles.path,
-                cx: "50%",
-                cy: "50%",
-                fill: "none",
-                r: radius,
-                pathLength: "100",
-                strokeDasharray: "100",
-                strokeDashoffset: 100 - now,
-                transform: "rotate(-90 50 50)"
+                when: now > 0,
+                fallback: /* @__PURE__ */ jsx(
+                  "text",
+                  {
+                    "data-fallback": true,
+                    className: styles.description,
+                    x: "50%",
+                    y: "27%",
+                    dominantBaseline: "middle",
+                    textAnchor: "middle",
+                    textLength: "65%",
+                    children: /* @__PURE__ */ jsx(For, { each: status.split(" "), children: (word, idx) => /* @__PURE__ */ jsx("tspan", { x: "50%", dy: "1.2em", children: word }, `${word}:${idx}`) })
+                  }
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "circle",
+                    {
+                      "data-complete": now === 100,
+                      className: styles.path,
+                      cx: "50%",
+                      cy: "50%",
+                      fill: "none",
+                      r: radius,
+                      pathLength: "100",
+                      strokeDasharray: "100",
+                      strokeDashoffset: 100 - now,
+                      transform: "rotate(-90 50 50)"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("g", { children: [
+                    /* @__PURE__ */ jsxs(
+                      "text",
+                      {
+                        className: styles.title,
+                        x: "50%",
+                        y: "47%",
+                        dominantBaseline: "middle",
+                        textAnchor: "middle",
+                        children: [
+                          now,
+                          "%"
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "text",
+                      {
+                        className: styles.description,
+                        x: "50%",
+                        y: "59%",
+                        dominantBaseline: "middle",
+                        textAnchor: "middle",
+                        children: status
+                      }
+                    )
+                  ] })
+                ]
               }
-            ),
-            /* @__PURE__ */ jsxs("g", { children: [
-              /* @__PURE__ */ jsxs(
-                "text",
-                {
-                  className: styles.title,
-                  x: "50%",
-                  y: "47%",
-                  dominantBaseline: "middle",
-                  textAnchor: "middle",
-                  children: [
-                    now,
-                    "%"
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "text",
-                {
-                  className: styles.description,
-                  x: "50%",
-                  y: "59%",
-                  dominantBaseline: "middle",
-                  textAnchor: "middle",
-                  children: status
-                }
-              )
-            ] })
+            )
           ]
         }
       )
@@ -129,4 +153,4 @@ function CircularProgress(props) {
 export {
   CircularProgress
 };
-//# sourceMappingURL=chunk-IE2HWT3I.js.map
+//# sourceMappingURL=chunk-PRV3HAK3.js.map

package/build/modern/chunk-PRV3HAK3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/CircularProgress.tsx"],"sourcesContent":["import { circularProgress } from 'styled-system/recipes'\nimport type { SVGProps } from 'react'\nimport { Show } from './Show'\nimport { For } from './for'\n\n/**\n * This module contains the CircularProgress component.\n * @module\n */\n\nexport interface CircularProgressProps extends SVGProps<SVGSVGElement> {\n  /**\n   * A unique identifier for the progress bar. Required for accessibility.\n   */\n  id: string\n  /**\n   * A description label for the progress bar. Required for accessibility.\n   */\n  label: string\n  /**\n   * The current value of the CircularProgress\n   */\n  now: number\n  /**\n   * The title of the CircularProgress for a11y\n   */\n  title: string\n  /**\n   * What is shown below the now value (default: 'Done')\n   */\n  syntax?: string\n  /**\n   * The background style of the CircularProgress\n   */\n  bgStyle?: 'filled' | 'transparent'\n  /**\n   * The size of the CircularProgress\n   * @default '1.1em'\n   */\n  size?: string\n}\n\n/**\n * The CircularProgress component is used to display a loading indicator.\n * @param props - SVG element attributes\n * @param props.now - The current value of the CircularProgress\n * @param props.title - The title of the CircularProgress for a11y\n * @param props.label - What is shown below the now value (default: 'Done')\n * @see https://cerberus.digitalu.design/react/progress-indicators\n * @example\n * ```tsx\n * <CircularProgress now={24} title=\"Course completion\" label=\"done\" />\n * ```\n */\nexport function CircularProgress(props: CircularProgressProps) {\n  const { size = '1.1em' } = props\n  const sizeProps = props.size\n    ? {\n        height: size,\n        width: size,\n      }\n    : {}\n\n  const strokeW: number = 14\n  const radius = `calc(50% * (1 - ${strokeW}/100))`\n  const status: string = props.syntax ?? 'Done'\n  const now: number = props.now >= 100 ? 100 : props.now\n  const bgStyle: string = props.bgStyle ?? 'filled'\n\n  const styles = circularProgress()\n\n  return (\n    <div\n      id={props.id}\n      aria-label={props.label}\n      aria-valuemin={0}\n      aria-valuemax={100}\n      aria-valuenow={now}\n      className={styles.root}\n      role=\"progressbar\"\n    >\n      <svg\n        data-complete={now === 100}\n        className={styles.group}\n        fill=\"none\"\n        strokeLinecap=\"round\"\n        strokeWidth={strokeW}\n        viewBox=\"0 0 100 100\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        {...sizeProps}\n      >\n        <title>{props.title}</title>\n        <desc>{`${now}% ${status}`}</desc>\n\n        <defs>\n          <linearGradient id=\"gradient\">\n            <stop\n              offset=\"0%\"\n              stopColor=\"var(--cerberus-colors-data-viz-progress-start)\"\n            />\n            <stop\n              offset=\"100%\"\n              stopColor=\"var(--cerberus-colors-data-viz-progress-end)\"\n            />\n          </linearGradient>\n        </defs>\n\n        <Show when={bgStyle === 'filled'}>\n          <circle\n            className={styles.base}\n            cx=\"50%\"\n            cy=\"50%\"\n            r={`calc(50% * (1 - ${strokeW}/100))`}\n            pathLength=\"100\"\n          />\n        </Show>\n\n        <circle\n          className={styles.track}\n          cx=\"50%\"\n          cy=\"50%\"\n          r={radius}\n          pathLength=\"100\"\n        />\n\n        <Show\n          when={now > 0}\n          fallback={\n            <text\n              data-fallback\n              className={styles.description}\n              x=\"50%\"\n              y=\"27%\"\n              dominantBaseline=\"middle\"\n              textAnchor=\"middle\"\n              textLength=\"65%\"\n            >\n              <For each={status.split(' ')}>\n                {(word, idx) => (\n                  <tspan key={`${word}:${idx}`} x=\"50%\" dy=\"1.2em\">\n                    {word}\n                  </tspan>\n                )}\n              </For>\n            </text>\n          }\n        >\n          <circle\n            data-complete={now === 100}\n            className={styles.path}\n            cx=\"50%\"\n            cy=\"50%\"\n            fill=\"none\"\n            r={radius}\n            pathLength=\"100\"\n            strokeDasharray=\"100\"\n            strokeDashoffset={100 - now}\n            transform=\"rotate(-90 50 50)\"\n          />\n          <g>\n            <text\n              className={styles.title}\n              x=\"50%\"\n              y=\"47%\"\n              dominantBaseline=\"middle\"\n              textAnchor=\"middle\"\n            >\n              {now}%\n            </text>\n            <text\n              className={styles.description}\n              x=\"50%\"\n              y=\"59%\"\n              dominantBaseline=\"middle\"\n              textAnchor=\"middle\"\n            >\n              {status}\n            </text>\n          </g>\n        </Show>\n      </svg>\n    </div>\n  )\n}\n"],"mappings":"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","names":[]}

package/build/modern/components/CircularProgress.js

@@ -1,6 +1,7 @@
 import {
   CircularProgress
-} from "../chunk-IE2HWT3I.js";
+} from "../chunk-PRV3HAK3.js";
+import "../chunk-I5RGBB57.js";
 import "../chunk-VEAC4I3F.js";
 export {
   CircularProgress

package/build/modern/components/cta-dialog/index.js

@@ -2,7 +2,7 @@ import "../../chunk-IKDXADLX.js";
 import {
   CTAModal,
   useCTAModal
-} from "../../chunk-URJ6JHLG.js";
+} from "../../chunk-A5UXCB4L.js";
 import "../../chunk-4LSTU6WU.js";
 import "../../chunk-QD3WAARV.js";
 import {
@@ -14,7 +14,6 @@ import "../../chunk-Z2KBUTCO.js";
 import "../../chunk-V6EAWUCQ.js";
 import "../../chunk-SSR3CWJZ.js";
 import "../../chunk-GB7W3YNU.js";
-import "../../chunk-I5RGBB57.js";
 import "../../chunk-CF4TCMJI.js";
 import "../../chunk-IUF74GEL.js";
 import "../../chunk-UGFSACHC.js";
@@ -24,6 +23,7 @@ import "../../chunk-GITT5645.js";
 import "../../chunk-UH6XSYYD.js";
 import "../../chunk-53YVHIGJ.js";
 import "../../chunk-AUI74W7J.js";
+import "../../chunk-I5RGBB57.js";
 import "../../chunk-VEAC4I3F.js";
 export {
   CTAModal,

package/build/modern/components/cta-dialog/provider.js

@@ -2,7 +2,7 @@
 import {
   CTAModal,
   useCTAModal
-} from "../../chunk-URJ6JHLG.js";
+} from "../../chunk-A5UXCB4L.js";
 import "../../chunk-4LSTU6WU.js";
 import "../../chunk-QD3WAARV.js";
 import "../../chunk-DJOYRUNT.js";
@@ -11,7 +11,6 @@ import "../../chunk-Z2KBUTCO.js";
 import "../../chunk-V6EAWUCQ.js";
 import "../../chunk-SSR3CWJZ.js";
 import "../../chunk-GB7W3YNU.js";
-import "../../chunk-I5RGBB57.js";
 import "../../chunk-CF4TCMJI.js";
 import "../../chunk-IUF74GEL.js";
 import "../../chunk-UGFSACHC.js";
@@ -21,6 +20,7 @@ import "../../chunk-GITT5645.js";
 import "../../chunk-UH6XSYYD.js";
 import "../../chunk-53YVHIGJ.js";
 import "../../chunk-AUI74W7J.js";
+import "../../chunk-I5RGBB57.js";
 import "../../chunk-VEAC4I3F.js";
 export {
   CTAModal,

package/build/modern/index.js

@@ -169,7 +169,7 @@ import "./chunk-IKDXADLX.js";
 import {
   CTAModal,
   useCTAModal
-} from "./chunk-URJ6JHLG.js";
+} from "./chunk-A5UXCB4L.js";
 import "./chunk-4LSTU6WU.js";
 import "./chunk-QD3WAARV.js";
 import {
@@ -385,9 +385,6 @@ import {
 import {
   Tooltip
 } from "./chunk-L2EGF5AV.js";
-import {
-  For
-} from "./chunk-I5RGBB57.js";
 import {
   makeSystemConfig
 } from "./chunk-KDDPAJMR.js";
@@ -481,7 +478,10 @@ import {
 import "./chunk-VV2G62UD.js";
 import {
   CircularProgress
-} from "./chunk-IE2HWT3I.js";
+} from "./chunk-PRV3HAK3.js";
+import {
+  For
+} from "./chunk-I5RGBB57.js";
 import {
   Droppable
 } from "./chunk-TKI2CKHH.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerberus-design/react",
-  "version": "0.18.1",
+  "version": "0.18.2",
   "description": "The Cerberus Design React component library.",
   "browserslist": "> 0.25%, not dead",
   "sideEffects": false,
@@ -19,13 +19,13 @@
   "devDependencies": {
     "@microsoft/api-extractor": "^7.46.2",
     "@pandacss/dev": "^0.53.2",
-    "@types/react": "^19.0.10",
+    "@types/react": "^19.0.12",
     "@types/react-dom": "^19.0.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "tsup": "^8.4.0",
     "@cerberus-design/configs": "0.0.0",
-    "@cerberus-design/panda-preset": "0.18.1"
+    "@cerberus-design/panda-preset": "0.18.2"
   },
   "publishConfig": {
     "access": "public"

package/src/components/CircularProgress.tsx

@@ -1,6 +1,7 @@
 import { circularProgress } from 'styled-system/recipes'
 import type { SVGProps } from 'react'
 import { Show } from './Show'
+import { For } from './for'
 
 /**
  * This module contains the CircularProgress component.
@@ -90,6 +91,7 @@ export function CircularProgress(props: CircularProgressProps) {
       >
         <title>{props.title}</title>
         <desc>{`${now}% ${status}`}</desc>
+
         <defs>
           <linearGradient id="gradient">
             <stop
@@ -121,39 +123,61 @@ export function CircularProgress(props: CircularProgressProps) {
           pathLength="100"
         />
 
-        <circle
-          data-complete={now === 100}
-          className={styles.path}
-          cx="50%"
-          cy="50%"
-          fill="none"
-          r={radius}
-          pathLength="100"
-          strokeDasharray="100"
-          strokeDashoffset={100 - now}
-          transform="rotate(-90 50 50)"
-        />
-
-        <g>
-          <text
-            className={styles.title}
-            x="50%"
-            y="47%"
-            dominantBaseline="middle"
-            textAnchor="middle"
-          >
-            {now}%
-          </text>
-          <text
-            className={styles.description}
-            x="50%"
-            y="59%"
-            dominantBaseline="middle"
-            textAnchor="middle"
-          >
-            {status}
-          </text>
-        </g>
+        <Show
+          when={now > 0}
+          fallback={
+            <text
+              data-fallback
+              className={styles.description}
+              x="50%"
+              y="27%"
+              dominantBaseline="middle"
+              textAnchor="middle"
+              textLength="65%"
+            >
+              <For each={status.split(' ')}>
+                {(word, idx) => (
+                  <tspan key={`${word}:${idx}`} x="50%" dy="1.2em">
+                    {word}
+                  </tspan>
+                )}
+              </For>
+            </text>
+          }
+        >
+          <circle
+            data-complete={now === 100}
+            className={styles.path}
+            cx="50%"
+            cy="50%"
+            fill="none"
+            r={radius}
+            pathLength="100"
+            strokeDasharray="100"
+            strokeDashoffset={100 - now}
+            transform="rotate(-90 50 50)"
+          />
+          <g>
+            <text
+              className={styles.title}
+              x="50%"
+              y="47%"
+              dominantBaseline="middle"
+              textAnchor="middle"
+            >
+              {now}%
+            </text>
+            <text
+              className={styles.description}
+              x="50%"
+              y="59%"
+              dominantBaseline="middle"
+              textAnchor="middle"
+            >
+              {status}
+            </text>
+          </g>
+        </Show>
       </svg>
     </div>
   )

package/build/modern/chunk-IE2HWT3I.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/CircularProgress.tsx"],"sourcesContent":["import { circularProgress } from 'styled-system/recipes'\nimport type { SVGProps } from 'react'\nimport { Show } from './Show'\n\n/**\n * This module contains the CircularProgress component.\n * @module\n */\n\nexport interface CircularProgressProps extends SVGProps<SVGSVGElement> {\n  /**\n   * A unique identifier for the progress bar. Required for accessibility.\n   */\n  id: string\n  /**\n   * A description label for the progress bar. Required for accessibility.\n   */\n  label: string\n  /**\n   * The current value of the CircularProgress\n   */\n  now: number\n  /**\n   * The title of the CircularProgress for a11y\n   */\n  title: string\n  /**\n   * What is shown below the now value (default: 'Done')\n   */\n  syntax?: string\n  /**\n   * The background style of the CircularProgress\n   */\n  bgStyle?: 'filled' | 'transparent'\n  /**\n   * The size of the CircularProgress\n   * @default '1.1em'\n   */\n  size?: string\n}\n\n/**\n * The CircularProgress component is used to display a loading indicator.\n * @param props - SVG element attributes\n * @param props.now - The current value of the CircularProgress\n * @param props.title - The title of the CircularProgress for a11y\n * @param props.label - What is shown below the now value (default: 'Done')\n * @see https://cerberus.digitalu.design/react/progress-indicators\n * @example\n * ```tsx\n * <CircularProgress now={24} title=\"Course completion\" label=\"done\" />\n * ```\n */\nexport function CircularProgress(props: CircularProgressProps) {\n  const { size = '1.1em' } = props\n  const sizeProps = props.size\n    ? {\n        height: size,\n        width: size,\n      }\n    : {}\n\n  const strokeW: number = 14\n  const radius = `calc(50% * (1 - ${strokeW}/100))`\n  const status: string = props.syntax ?? 'Done'\n  const now: number = props.now >= 100 ? 100 : props.now\n  const bgStyle: string = props.bgStyle ?? 'filled'\n\n  const styles = circularProgress()\n\n  return (\n    <div\n      id={props.id}\n      aria-label={props.label}\n      aria-valuemin={0}\n      aria-valuemax={100}\n      aria-valuenow={now}\n      className={styles.root}\n      role=\"progressbar\"\n    >\n      <svg\n        data-complete={now === 100}\n        className={styles.group}\n        fill=\"none\"\n        strokeLinecap=\"round\"\n        strokeWidth={strokeW}\n        viewBox=\"0 0 100 100\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        {...sizeProps}\n      >\n        <title>{props.title}</title>\n        <desc>{`${now}% ${status}`}</desc>\n        <defs>\n          <linearGradient id=\"gradient\">\n            <stop\n              offset=\"0%\"\n              stopColor=\"var(--cerberus-colors-data-viz-progress-start)\"\n            />\n            <stop\n              offset=\"100%\"\n              stopColor=\"var(--cerberus-colors-data-viz-progress-end)\"\n            />\n          </linearGradient>\n        </defs>\n\n        <Show when={bgStyle === 'filled'}>\n          <circle\n            className={styles.base}\n            cx=\"50%\"\n            cy=\"50%\"\n            r={`calc(50% * (1 - ${strokeW}/100))`}\n            pathLength=\"100\"\n          />\n        </Show>\n\n        <circle\n          className={styles.track}\n          cx=\"50%\"\n          cy=\"50%\"\n          r={radius}\n          pathLength=\"100\"\n        />\n\n        <circle\n          data-complete={now === 100}\n          className={styles.path}\n          cx=\"50%\"\n          cy=\"50%\"\n          fill=\"none\"\n          r={radius}\n          pathLength=\"100\"\n          strokeDasharray=\"100\"\n          strokeDashoffset={100 - now}\n          transform=\"rotate(-90 50 50)\"\n        />\n\n        <g>\n          <text\n            className={styles.title}\n            x=\"50%\"\n            y=\"47%\"\n            dominantBaseline=\"middle\"\n            textAnchor=\"middle\"\n          >\n            {now}%\n          </text>\n          <text\n            className={styles.description}\n            x=\"50%\"\n            y=\"59%\"\n            dominantBaseline=\"middle\"\n            textAnchor=\"middle\"\n          >\n            {status}\n          </text>\n        </g>\n      </svg>\n    </div>\n  )\n}\n"],"mappings":";;;;;AAAA,SAAS,wBAAwB;AA0FzB,cAGE,YAHF;AArCD,SAAS,iBAAiB,OAA8B;AAC7D,QAAM,EAAE,OAAO,QAAQ,IAAI;AAC3B,QAAM,YAAY,MAAM,OACpB;AAAA,IACE,QAAQ;AAAA,IACR,OAAO;AAAA,EACT,IACA,CAAC;AAEL,QAAM,UAAkB;AACxB,QAAM,SAAS,mBAAmB,OAAO;AACzC,QAAM,SAAiB,MAAM,UAAU;AACvC,QAAM,MAAc,MAAM,OAAO,MAAM,MAAM,MAAM;AACnD,QAAM,UAAkB,MAAM,WAAW;AAEzC,QAAM,SAAS,iBAAiB;AAEhC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI,MAAM;AAAA,MACV,cAAY,MAAM;AAAA,MAClB,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,WAAW,OAAO;AAAA,MAClB,MAAK;AAAA,MAEL;AAAA,QAAC;AAAA;AAAA,UACC,iBAAe,QAAQ;AAAA,UACvB,WAAW,OAAO;AAAA,UAClB,MAAK;AAAA,UACL,eAAc;AAAA,UACd,aAAa;AAAA,UACb,SAAQ;AAAA,UACR,OAAM;AAAA,UACL,GAAG;AAAA,UAEJ;AAAA,gCAAC,WAAO,gBAAM,OAAM;AAAA,YACpB,oBAAC,UAAM,aAAG,GAAG,KAAK,MAAM,IAAG;AAAA,YAC3B,oBAAC,UACC,+BAAC,oBAAe,IAAG,YACjB;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,QAAO;AAAA,kBACP,WAAU;AAAA;AAAA,cACZ;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC,QAAO;AAAA,kBACP,WAAU;AAAA;AAAA,cACZ;AAAA,eACF,GACF;AAAA,YAEA,oBAAC,QAAK,MAAM,YAAY,UACtB;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW,OAAO;AAAA,gBAClB,IAAG;AAAA,gBACH,IAAG;AAAA,gBACH,GAAG,mBAAmB,OAAO;AAAA,gBAC7B,YAAW;AAAA;AAAA,YACb,GACF;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW,OAAO;AAAA,gBAClB,IAAG;AAAA,gBACH,IAAG;AAAA,gBACH,GAAG;AAAA,gBACH,YAAW;AAAA;AAAA,YACb;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACC,iBAAe,QAAQ;AAAA,gBACvB,WAAW,OAAO;AAAA,gBAClB,IAAG;AAAA,gBACH,IAAG;AAAA,gBACH,MAAK;AAAA,gBACL,GAAG;AAAA,gBACH,YAAW;AAAA,gBACX,iBAAgB;AAAA,gBAChB,kBAAkB,MAAM;AAAA,gBACxB,WAAU;AAAA;AAAA,YACZ;AAAA,YAEA,qBAAC,OACC;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAW,OAAO;AAAA,kBAClB,GAAE;AAAA,kBACF,GAAE;AAAA,kBACF,kBAAiB;AAAA,kBACjB,YAAW;AAAA,kBAEV;AAAA;AAAA,oBAAI;AAAA;AAAA;AAAA,cACP;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAW,OAAO;AAAA,kBAClB,GAAE;AAAA,kBACF,GAAE;AAAA,kBACF,kBAAiB;AAAA,kBACjB,YAAW;AAAA,kBAEV;AAAA;AAAA,cACH;AAAA,eACF;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;","names":[]}