@cerberus-design/react 0.18.0 → 0.18.2

package/build/legacy/_tsup-dts-rollup.d.cts

@@ -1093,6 +1093,11 @@ declare interface CircularProgressProps extends SVGProps<SVGSVGElement> {
      * The background style of the CircularProgress
      */
     bgStyle?: 'filled' | 'transparent';
+    /**
+     * The size of the CircularProgress
+     * @default '1.1em'
+     */
+    size?: string;
 }
 export { CircularProgressProps }
 export { CircularProgressProps as CircularProgressProps_alias_1 }
@@ -1447,8 +1452,6 @@ declare interface Conditions {
     	"_isDropped": string
     	/** `&:is([data-complete=true])` */
     	"_isComplete": string
-    	/** `&:is(:disabled, [disabled], [data-disabled], [aria-disabled])` */
-    	"_disabled": string
     	/** `&:is([data-readonly])` */
     	"_dataReadOnly": string
     	/** `&:is(:user-invalid, [aria-invalid], [data-invalid])` */
@@ -1457,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])` */
@@ -1537,6 +1542,8 @@ declare interface Conditions {
     	"_focusWithin": string
     	/** `&:is(:focus-visible, [data-focus-visible])` */
     	"_focusVisible": string
+    	/** `&:is(:disabled, [disabled], [data-disabled])` */
+    	"_disabled": string
     	/** `&:is(:active, [data-active])` */
     	"_active": string
     	/** `&:visited` */
@@ -1872,15 +1879,15 @@ declare interface CssProperties extends PropertiesFallback<String_2 | Number_2>,
 
 declare type CssVarKeys = `--${CssVarName}`
 
-declare type CssVarName =  | AnyString
+declare type CssVarName = "font-display" | "font-sans" | "font-mono" | AnyString
 
 declare type CssVarProperties = {
     [key in CssVarKeys]?: CssVarValue
 }
 
-declare type CssVars = `var(--${string})`
+declare type CssVars = "var(--font-display)" | "var(--font-sans)" | "var(--font-mono)"
 
-declare type CssVarValue = ConditionalValue<Token | AnyString | (number & {})>
+declare type CssVarValue = ConditionalValue<Token | CssVars | AnyString | (number & {})>
 
 /**
  * This module provide utility functions for the cta modal.

package/build/legacy/components/CircularProgress.cjs

@@ -1,5 +1,4 @@
 "use strict";
-"use client";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -24,8 +23,7 @@ __export(CircularProgress_exports, {
   CircularProgress: () => CircularProgress
 });
 module.exports = __toCommonJS(CircularProgress_exports);
-var import_patterns = require("styled-system/patterns");
-var import_css = require("styled-system/css");
+var import_recipes = require("styled-system/recipes");
 
 // src/components/Show.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -40,15 +38,31 @@ function Show(props) {
   return null;
 }
 
-// src/components/CircularProgress.tsx
+// src/components/for.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
+function For(props) {
+  var _a;
+  if (!props.each || !props.each.length) {
+    return props.fallback || null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: (_a = props.each) == null ? void 0 : _a.map(props.children) });
+}
+
+// src/components/CircularProgress.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
 function CircularProgress(props) {
+  const { size = "1.1em" } = props;
+  const sizeProps = props.size ? {
+    height: size,
+    width: size
+  } : {};
   const strokeW = 14;
   const radius = `calc(50% * (1 - ${strokeW}/100))`;
   const status = props.syntax ?? "Done";
   const now = props.now >= 100 ? 100 : props.now;
   const bgStyle = props.bgStyle ?? "filled";
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  const styles = (0, import_recipes.circularProgress)();
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "div",
     {
       id: props.id,
@@ -56,39 +70,31 @@ function CircularProgress(props) {
       "aria-valuemin": 0,
       "aria-valuemax": 100,
       "aria-valuenow": now,
-      className: (0, import_patterns.cq)({
-        alignSelf: "stretch",
-        flex: 1,
-        m: "4px",
-        position: "relative"
-      }),
+      className: styles.root,
       role: "progressbar",
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
         "svg",
         {
           "data-complete": now === 100,
-          className: (0, import_css.css)({
-            display: "block",
-            rounded: "full",
-            transition: "all 0.5s ease"
-          }),
+          className: styles.group,
           fill: "none",
           strokeLinecap: "round",
           strokeWidth: strokeW,
           viewBox: "0 0 100 100",
           xmlns: "http://www.w3.org/2000/svg",
+          ...sizeProps,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("title", { children: props.title }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("desc", { children: `${now}% ${status}` }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("linearGradient", { id: "gradient", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("title", { children: props.title }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("desc", { children: `${now}% ${status}` }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("linearGradient", { id: "gradient", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                 "stop",
                 {
                   offset: "0%",
                   stopColor: "var(--cerberus-colors-data-viz-progress-start)"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                 "stop",
                 {
                   offset: "100%",
@@ -96,86 +102,89 @@ function CircularProgress(props) {
                 }
               )
             ] }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Show, { when: bgStyle === "filled", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Show, { when: bgStyle === "filled", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
               "circle",
               {
-                className: (0, import_css.css)({
-                  fill: "page.surface.initial"
-                }),
+                className: styles.base,
                 cx: "50%",
                 cy: "50%",
                 r: `calc(50% * (1 - ${strokeW}/100))`,
                 pathLength: "100"
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
               "circle",
               {
-                className: (0, import_css.css)({
-                  stroke: "page.bg.100"
-                }),
+                className: styles.track,
                 cx: "50%",
                 cy: "50%",
                 r: radius,
                 pathLength: "100"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-              "circle",
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+              Show,
               {
-                "data-complete": now === 100,
-                className: (0, import_css.css)({
-                  stroke: "url(#gradient)",
-                  transition: "stroke-dashoffset, stroke 0.5s ease",
-                  _isComplete: {
-                    stroke: "success.bg.initial"
+                when: now > 0,
+                fallback: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "text",
+                  {
+                    "data-fallback": true,
+                    className: styles.description,
+                    x: "50%",
+                    y: "27%",
+                    dominantBaseline: "middle",
+                    textAnchor: "middle",
+                    textLength: "65%",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(For, { each: status.split(" "), children: (word, idx) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tspan", { x: "50%", dy: "1.2em", children: word }, `${word}:${idx}`) })
                   }
-                }),
-                cx: "50%",
-                cy: "50%",
-                fill: "none",
-                r: radius,
-                pathLength: "100",
-                strokeDasharray: "100",
-                strokeDashoffset: 100 - now,
-                transform: "rotate(-90 50 50)"
+                ),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.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__ */ (0, import_jsx_runtime3.jsxs)("g", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                      "text",
+                      {
+                        className: styles.title,
+                        x: "50%",
+                        y: "47%",
+                        dominantBaseline: "middle",
+                        textAnchor: "middle",
+                        children: [
+                          now,
+                          "%"
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      "text",
+                      {
+                        className: styles.description,
+                        x: "50%",
+                        y: "59%",
+                        dominantBaseline: "middle",
+                        textAnchor: "middle",
+                        children: status
+                      }
+                    )
+                  ] })
+                ]
               }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-                "text",
-                {
-                  className: (0, import_css.css)({
-                    fill: "page.text.initial",
-                    fontFamily: "mono",
-                    textStyle: "1.25rem"
-                  }),
-                  x: "50%",
-                  y: "47%",
-                  dominantBaseline: "middle",
-                  textAnchor: "middle",
-                  children: [
-                    now,
-                    "%"
-                  ]
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                "text",
-                {
-                  className: (0, import_css.css)({
-                    fill: "page.text.100",
-                    fontSize: "0.5rem",
-                    fontWeight: 600
-                  }),
-                  x: "50%",
-                  y: "59%",
-                  dominantBaseline: "middle",
-                  textAnchor: "middle",
-                  children: status
-                }
-              )
-            ] })
+            )
           ]
         }
       )

package/build/legacy/components/CircularProgress.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CircularProgress.tsx","../../../src/components/Show.tsx"],"sourcesContent":["'use client'\n\nimport { cq } from 'styled-system/patterns'\nimport { css } from 'styled-system/css'\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\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 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  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={cq({\n        alignSelf: 'stretch',\n        flex: 1,\n        m: '4px',\n        position: 'relative',\n      })}\n      role=\"progressbar\"\n    >\n      <svg\n        data-complete={now === 100}\n        className={css({\n          display: 'block',\n          rounded: 'full',\n          transition: 'all 0.5s ease',\n        })}\n        fill=\"none\"\n        strokeLinecap=\"round\"\n        strokeWidth={strokeW}\n        viewBox=\"0 0 100 100\"\n        xmlns=\"http://www.w3.org/2000/svg\"\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={css({\n              fill: 'page.surface.initial',\n            })}\n            cx=\"50%\"\n            cy=\"50%\"\n            r={`calc(50% * (1 - ${strokeW}/100))`}\n            pathLength=\"100\"\n          />\n        </Show>\n        <circle\n          className={css({\n            stroke: 'page.bg.100',\n          })}\n          cx=\"50%\"\n          cy=\"50%\"\n          r={radius}\n          pathLength=\"100\"\n        />\n        <circle\n          data-complete={now === 100}\n          className={css({\n            stroke: 'url(#gradient)',\n            transition: 'stroke-dashoffset, stroke 0.5s ease',\n            _isComplete: {\n              stroke: 'success.bg.initial',\n            },\n          })}\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={css({\n              fill: 'page.text.initial',\n              fontFamily: 'mono',\n              textStyle: '1.25rem',\n            })}\n            x=\"50%\"\n            y=\"47%\"\n            dominantBaseline=\"middle\"\n            textAnchor=\"middle\"\n          >\n            {now}%\n          </text>\n          <text\n            className={css({\n              fill: 'page.text.100',\n              fontSize: '0.5rem',\n              fontWeight: 600,\n            })}\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","import { type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps<T> {\n  /**\n   * The condition to render memoized children or the fallback content.\n   */\n  when: T | boolean | null | undefined\n  /**\n   * The children to render when the condition is false.\n   */\n  fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n *   <Dashboard />\n * </Show>\n */\nexport function Show<T>(props: PropsWithChildren<ShowProps<T>>) {\n  const { when, children, fallback } = props\n\n  if (when) {\n    return <>{children}</>\n  }\n\n  if (fallback) {\n    return <>{fallback}</>\n  }\n\n  return null\n}\n"],"mappings":"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","names":["import_jsx_runtime"]}
+{"version":3,"sources":["../../../src/components/CircularProgress.tsx","../../../src/components/Show.tsx","../../../src/components/for.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","import { type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps<T> {\n  /**\n   * The condition to render memoized children or the fallback content.\n   */\n  when: T | boolean | null | undefined\n  /**\n   * The children to render when the condition is false.\n   */\n  fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n *   <Dashboard />\n * </Show>\n */\nexport function Show<T>(props: PropsWithChildren<ShowProps<T>>) {\n  const { when, children, fallback } = props\n\n  if (when) {\n    return <>{children}</>\n  }\n\n  if (fallback) {\n    return <>{fallback}</>\n  }\n\n  return null\n}\n","import type { ReactNode, JSX } from 'react'\n\nexport interface ForProps<T extends readonly unknown[], U extends JSX.Element> {\n  /**\n   * The array to iterate over.\n   */\n  each: T | undefined | null | false\n  /**\n   * The fallback to render when the array is empty.\n   */\n  fallback?: JSX.Element\n  /**\n   * The children to render for each item in the array.\n   */\n  children: (item: T[number], index: number) => U\n}\n\n/**\n * The For component is used to iterate over an array and render a list of\n * components or display a fallback when the array is empty.\n * Inspired by the `<For>` component from SolidJS.\n *\n * @example\n * ```tsx\n * <For each={['a', 'b', 'c']}>\n *   {(item, index) => <div key={index}>{item}</div>}\n * </For>\n * ```\n */\nexport function For<T extends readonly unknown[], U extends JSX.Element>(\n  props: ForProps<T, U>,\n) {\n  if (!props.each || !props.each.length) {\n    return props.fallback || null\n  }\n\n  return <>{props.each?.map(props.children) as ReactNode}</>\n}\n"],"mappings":"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","names":["import_jsx_runtime","import_jsx_runtime"]}