braid-design-system 32.16.0 → 32.16.2

package/dist/lib/components/Inline/Inline.cjs

@@ -0,0 +1,74 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const assert = require("assert");
+const React = require("react");
+const lib_utils_flattenChildren_cjs = require("../../utils/flattenChildren.cjs");
+const lib_components_Box_Box_cjs = require("../Box/Box.cjs");
+const lib_css_negativeMargin_negativeMargin_cjs = require("../../css/negativeMargin/negativeMargin.cjs");
+const lib_utils_collapsibleAlignmentProps_cjs = require("../../utils/collapsibleAlignmentProps.cjs");
+const lib_components_private_buildDataAttributes_cjs = require("../private/buildDataAttributes.cjs");
+const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
+const assert__default = /* @__PURE__ */ _interopDefaultCompat(assert);
+const validInlineComponents = ["div", "span", "ol", "ul"];
+const Inline = ({
+  space = "none",
+  align,
+  alignY,
+  collapseBelow,
+  reverse,
+  component = "div",
+  data,
+  children,
+  ...restProps
+}) => {
+  assert__default.default(
+    validInlineComponents.includes(component),
+    `Invalid Inline component: '${component}'. Should be one of [${validInlineComponents.map((c) => `'${c}'`).join(", ")}]`
+  );
+  const isList = component === "ol" || component === "ul";
+  const inlineItemComponent = isList ? "li" : component;
+  const {
+    collapsibleAlignmentProps,
+    collapsibleAlignmentChildProps,
+    orderChildren
+  } = lib_utils_collapsibleAlignmentProps_cjs.resolveCollapsibleAlignmentProps({
+    align,
+    alignY,
+    collapseBelow,
+    reverse
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    lib_components_Box_Box_cjs.Box,
+    {
+      component: component === "span" ? component : void 0,
+      display: component === "span" ? "block" : void 0,
+      className: lib_css_negativeMargin_negativeMargin_cjs.negativeMargin("top", space),
+      ...lib_components_private_buildDataAttributes_cjs.buildDataAttributes({ data, validateRestProps: restProps }),
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        lib_components_Box_Box_cjs.Box,
+        {
+          component,
+          className: lib_css_negativeMargin_negativeMargin_cjs.negativeMargin("left", space),
+          flexWrap: "wrap",
+          ...collapsibleAlignmentProps,
+          children: React.Children.map(
+            orderChildren(lib_utils_flattenChildren_cjs.flattenChildren(children)),
+            (child) => child !== null && child !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+              lib_components_Box_Box_cjs.Box,
+              {
+                component: inlineItemComponent,
+                minWidth: 0,
+                marginLeft: space,
+                marginTop: space,
+                ...collapsibleAlignmentChildProps,
+                children: child
+              }
+            ) : null
+          )
+        }
+      )
+    }
+  );
+};
+exports.Inline = Inline;
+exports.validInlineComponents = validInlineComponents;

package/dist/lib/components/Inline/Inline.mjs

@@ -0,0 +1,73 @@
+import { jsx } from "react/jsx-runtime";
+import assert from "assert";
+import { Children } from "react";
+import { flattenChildren } from "../../utils/flattenChildren.mjs";
+import { Box } from "../Box/Box.mjs";
+import { negativeMargin } from "../../css/negativeMargin/negativeMargin.mjs";
+import { resolveCollapsibleAlignmentProps } from "../../utils/collapsibleAlignmentProps.mjs";
+import { buildDataAttributes } from "../private/buildDataAttributes.mjs";
+const validInlineComponents = ["div", "span", "ol", "ul"];
+const Inline = ({
+  space = "none",
+  align,
+  alignY,
+  collapseBelow,
+  reverse,
+  component = "div",
+  data,
+  children,
+  ...restProps
+}) => {
+  assert(
+    validInlineComponents.includes(component),
+    `Invalid Inline component: '${component}'. Should be one of [${validInlineComponents.map((c) => `'${c}'`).join(", ")}]`
+  );
+  const isList = component === "ol" || component === "ul";
+  const inlineItemComponent = isList ? "li" : component;
+  const {
+    collapsibleAlignmentProps,
+    collapsibleAlignmentChildProps,
+    orderChildren
+  } = resolveCollapsibleAlignmentProps({
+    align,
+    alignY,
+    collapseBelow,
+    reverse
+  });
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      component: component === "span" ? component : void 0,
+      display: component === "span" ? "block" : void 0,
+      className: negativeMargin("top", space),
+      ...buildDataAttributes({ data, validateRestProps: restProps }),
+      children: /* @__PURE__ */ jsx(
+        Box,
+        {
+          component,
+          className: negativeMargin("left", space),
+          flexWrap: "wrap",
+          ...collapsibleAlignmentProps,
+          children: Children.map(
+            orderChildren(flattenChildren(children)),
+            (child) => child !== null && child !== void 0 ? /* @__PURE__ */ jsx(
+              Box,
+              {
+                component: inlineItemComponent,
+                minWidth: 0,
+                marginLeft: space,
+                marginTop: space,
+                ...collapsibleAlignmentChildProps,
+                children: child
+              }
+            ) : null
+          )
+        }
+      )
+    }
+  );
+};
+export {
+  Inline,
+  validInlineComponents
+};

package/dist/lib/components/Inline/Inline.playroom.cjs

@@ -0,0 +1,21 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const lib_playroom_cleanSpaceValue_cjs = require("../../playroom/cleanSpaceValue.cjs");
+const lib_components_Inline_Inline_cjs = require("./Inline.cjs");
+const Inline = ({
+  space,
+  align,
+  alignY,
+  component,
+  ...restProps
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  lib_components_Inline_Inline_cjs.Inline,
+  {
+    space: lib_playroom_cleanSpaceValue_cjs.cleanSpaceValue(space) || "none",
+    align: typeof align !== "boolean" ? align : void 0,
+    alignY: typeof alignY !== "boolean" ? alignY : void 0,
+    component: component && lib_components_Inline_Inline_cjs.validInlineComponents.indexOf(component) > -1 ? component : void 0,
+    ...restProps
+  }
+);
+exports.Inline = Inline;

package/dist/lib/components/Inline/Inline.playroom.mjs

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import { cleanSpaceValue } from "../../playroom/cleanSpaceValue.mjs";
+import { Inline as Inline$1, validInlineComponents } from "./Inline.mjs";
+const Inline = ({
+  space,
+  align,
+  alignY,
+  component,
+  ...restProps
+}) => /* @__PURE__ */ jsx(
+  Inline$1,
+  {
+    space: cleanSpaceValue(space) || "none",
+    align: typeof align !== "boolean" ? align : void 0,
+    alignY: typeof alignY !== "boolean" ? alignY : void 0,
+    component: component && validInlineComponents.indexOf(component) > -1 ? component : void 0,
+    ...restProps
+  }
+);
+export {
+  Inline
+};

package/dist/lib/components/Link/Link.cjs

@@ -0,0 +1,26 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const clsx = require("clsx");
+const React = require("react");
+const lib_css_atoms_atoms_cjs = require("../../css/atoms/atoms.cjs");
+const lib_components_BraidProvider_BraidProvider_cjs = require("../BraidProvider/BraidProvider.cjs");
+const lib_components_private_buildDataAttributes_cjs = require("../private/buildDataAttributes.cjs");
+const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
+const clsx__default = /* @__PURE__ */ _interopDefaultCompat(clsx);
+const Link = React.forwardRef(
+  ({ href, className, data, ...restProps }, ref) => {
+    const LinkComponent = lib_components_BraidProvider_BraidProvider_cjs.useLinkComponent(ref);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      LinkComponent,
+      {
+        ref,
+        href,
+        className: clsx__default.default(lib_css_atoms_atoms_cjs.atoms({ reset: "a" }), className),
+        ...restProps,
+        ...lib_components_private_buildDataAttributes_cjs.buildDataAttributes({ data, validateRestProps: false })
+      }
+    );
+  }
+);
+Link.displayName = "Link";
+exports.Link = Link;

package/dist/lib/components/Link/Link.mjs

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { forwardRef } from "react";
+import { atoms } from "../../css/atoms/atoms.mjs";
+import { useLinkComponent } from "../BraidProvider/BraidProvider.mjs";
+import { buildDataAttributes } from "../private/buildDataAttributes.mjs";
+const Link = forwardRef(
+  ({ href, className, data, ...restProps }, ref) => {
+    const LinkComponent = useLinkComponent(ref);
+    return /* @__PURE__ */ jsx(
+      LinkComponent,
+      {
+        ref,
+        href,
+        className: clsx(atoms({ reset: "a" }), className),
+        ...restProps,
+        ...buildDataAttributes({ data, validateRestProps: false })
+      }
+    );
+  }
+);
+Link.displayName = "Link";
+export {
+  Link
+};

package/dist/lib/components/Link/Link.playroom.cjs

@@ -0,0 +1,16 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const lib_components_Link_Link_cjs = require("./Link.cjs");
+const Link = React.forwardRef(
+  ({ href, onClick, ...restProps }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    lib_components_Link_Link_cjs.Link,
+    {
+      ref,
+      href: href ?? "",
+      onClick: onClick ? onClick : (event) => event == null ? void 0 : event.preventDefault(),
+      ...restProps
+    }
+  )
+);
+exports.Link = Link;

package/dist/lib/components/Link/Link.playroom.mjs

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Link as Link$1 } from "./Link.mjs";
+const Link = forwardRef(
+  ({ href, onClick, ...restProps }, ref) => /* @__PURE__ */ jsx(
+    Link$1,
+    {
+      ref,
+      href: href ?? "",
+      onClick: onClick ? onClick : (event) => event == null ? void 0 : event.preventDefault(),
+      ...restProps
+    }
+  )
+);
+export {
+  Link
+};

package/dist/lib/components/List/List.cjs

@@ -0,0 +1,134 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const lib_components_Text_Text_cjs = require("../Text/Text.cjs");
+const lib_components_Stack_Stack_cjs = require("../Stack/Stack.cjs");
+const lib_components_Box_Box_cjs = require("../Box/Box.cjs");
+const lib_utils_flattenChildren_cjs = require("../../utils/flattenChildren.cjs");
+const lib_components_private_defaultTextProps_cjs = require("../private/defaultTextProps.cjs");
+const lib_css_lineHeightContainer_css_cjs = require("../../css/lineHeightContainer.css.cjs");
+const lib_components_List_List_css_cjs = require("./List.css.cjs");
+function numberToAlpha(inputNumber) {
+  let returnValue = "";
+  let counter = inputNumber;
+  while (counter > 0) {
+    const t = (counter - 1) % 26;
+    returnValue = String.fromCharCode(97 + t) + returnValue;
+    counter = (counter - t) / 26 | 0;
+  }
+  return returnValue;
+}
+const romanNumerals = {
+  m: 1e3,
+  cm: 900,
+  d: 500,
+  cd: 400,
+  c: 100,
+  xc: 90,
+  l: 50,
+  xl: 40,
+  x: 10,
+  ix: 9,
+  v: 5,
+  iv: 4,
+  i: 1
+};
+function numberToRomanNumerals(inputNumber) {
+  let returnValue = "";
+  let counter = inputNumber;
+  Object.keys(romanNumerals).forEach(
+    (romanNumeral) => {
+      const value = romanNumerals[romanNumeral];
+      while (counter >= value) {
+        returnValue += romanNumeral;
+        counter -= value;
+      }
+    }
+  );
+  return returnValue;
+}
+const CharacterBullet = ({ length = 1, children }) => /* @__PURE__ */ jsxRuntime.jsxs(
+  lib_components_Box_Box_cjs.Box,
+  {
+    display: "inlineBlock",
+    className: [
+      lib_components_List_List_css_cjs.minCharacterWidth[length - 1] ?? lib_components_List_List_css_cjs.minCharacterWidth[lib_components_List_List_css_cjs.minCharacterWidth.length - 1],
+      lib_components_List_List_css_cjs.trimGutter
+    ],
+    children: [
+      children,
+      "."
+    ]
+  }
+);
+const List = ({
+  children,
+  size: sizeProp,
+  tone: toneProp,
+  space = "medium",
+  type = "bullet",
+  start = 1,
+  data,
+  ...restProps
+}) => {
+  const { size, tone } = lib_components_private_defaultTextProps_cjs.useDefaultTextProps({
+    size: sizeProp,
+    tone: toneProp
+  });
+  const listItems = lib_utils_flattenChildren_cjs.flattenChildren(children);
+  const lastNumberLength = type === "number" ? (listItems.length + (start - 1)).toString().length : -1;
+  return /* @__PURE__ */ jsxRuntime.jsx(lib_components_private_defaultTextProps_cjs.DefaultTextPropsProvider, { size, tone, children: /* @__PURE__ */ jsxRuntime.jsx(
+    lib_components_Stack_Stack_cjs.Stack,
+    {
+      component: /^(bullet|icon)$/.test(type) ? "ul" : "ol",
+      space,
+      data,
+      children: React.Children.map(listItems, (listItem, index) => {
+        const resolvedIndex = index + (start - 1);
+        return /* @__PURE__ */ jsxRuntime.jsxs(lib_components_Box_Box_cjs.Box, { display: "flex", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lib_components_Text_Text_cjs.Text, { component: "div", size, tone, children: /* @__PURE__ */ jsxRuntime.jsx(
+            lib_components_Box_Box_cjs.Box,
+            {
+              display: "flex",
+              alignItems: /^(bullet|icon)$/.test(type) ? "center" : void 0,
+              className: lib_css_lineHeightContainer_css_cjs.lineHeightContainer[size],
+              userSelect: "none",
+              "aria-hidden": true,
+              children: (() => {
+                if (type === "number") {
+                  return /* @__PURE__ */ jsxRuntime.jsx(CharacterBullet, { length: lastNumberLength, children: resolvedIndex + 1 });
+                }
+                if (type === "alpha") {
+                  return /* @__PURE__ */ jsxRuntime.jsx(CharacterBullet, { children: numberToAlpha(resolvedIndex + 1) });
+                }
+                if (type === "roman") {
+                  return /* @__PURE__ */ jsxRuntime.jsx(CharacterBullet, { length: 2, children: numberToRomanNumerals(resolvedIndex + 1) });
+                }
+                if (type === "icon" && "icon" in restProps) {
+                  return restProps.icon;
+                }
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  lib_components_Box_Box_cjs.Box,
+                  {
+                    borderRadius: "full",
+                    className: [lib_components_List_List_css_cjs.currentColor, lib_components_List_List_css_cjs.size[size]]
+                  }
+                );
+              })()
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            lib_components_Box_Box_cjs.Box,
+            {
+              minWidth: 0,
+              width: "full",
+              paddingLeft: size === "xsmall" ? "xsmall" : "small",
+              children: listItem
+            }
+          )
+        ] });
+      })
+    }
+  ) });
+};
+exports.List = List;

package/dist/lib/components/List/List.mjs

@@ -0,0 +1,135 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Children } from "react";
+import { Text } from "../Text/Text.mjs";
+import { Stack } from "../Stack/Stack.mjs";
+import { Box } from "../Box/Box.mjs";
+import { flattenChildren } from "../../utils/flattenChildren.mjs";
+import { useDefaultTextProps, DefaultTextPropsProvider } from "../private/defaultTextProps.mjs";
+import { lineHeightContainer } from "../../css/lineHeightContainer.css.mjs";
+import { currentColor, size, minCharacterWidth, trimGutter } from "./List.css.mjs";
+function numberToAlpha(inputNumber) {
+  let returnValue = "";
+  let counter = inputNumber;
+  while (counter > 0) {
+    const t = (counter - 1) % 26;
+    returnValue = String.fromCharCode(97 + t) + returnValue;
+    counter = (counter - t) / 26 | 0;
+  }
+  return returnValue;
+}
+const romanNumerals = {
+  m: 1e3,
+  cm: 900,
+  d: 500,
+  cd: 400,
+  c: 100,
+  xc: 90,
+  l: 50,
+  xl: 40,
+  x: 10,
+  ix: 9,
+  v: 5,
+  iv: 4,
+  i: 1
+};
+function numberToRomanNumerals(inputNumber) {
+  let returnValue = "";
+  let counter = inputNumber;
+  Object.keys(romanNumerals).forEach(
+    (romanNumeral) => {
+      const value = romanNumerals[romanNumeral];
+      while (counter >= value) {
+        returnValue += romanNumeral;
+        counter -= value;
+      }
+    }
+  );
+  return returnValue;
+}
+const CharacterBullet = ({ length = 1, children }) => /* @__PURE__ */ jsxs(
+  Box,
+  {
+    display: "inlineBlock",
+    className: [
+      minCharacterWidth[length - 1] ?? minCharacterWidth[minCharacterWidth.length - 1],
+      trimGutter
+    ],
+    children: [
+      children,
+      "."
+    ]
+  }
+);
+const List = ({
+  children,
+  size: sizeProp,
+  tone: toneProp,
+  space = "medium",
+  type = "bullet",
+  start = 1,
+  data,
+  ...restProps
+}) => {
+  const { size: size$1, tone } = useDefaultTextProps({
+    size: sizeProp,
+    tone: toneProp
+  });
+  const listItems = flattenChildren(children);
+  const lastNumberLength = type === "number" ? (listItems.length + (start - 1)).toString().length : -1;
+  return /* @__PURE__ */ jsx(DefaultTextPropsProvider, { size: size$1, tone, children: /* @__PURE__ */ jsx(
+    Stack,
+    {
+      component: /^(bullet|icon)$/.test(type) ? "ul" : "ol",
+      space,
+      data,
+      children: Children.map(listItems, (listItem, index) => {
+        const resolvedIndex = index + (start - 1);
+        return /* @__PURE__ */ jsxs(Box, { display: "flex", children: [
+          /* @__PURE__ */ jsx(Text, { component: "div", size: size$1, tone, children: /* @__PURE__ */ jsx(
+            Box,
+            {
+              display: "flex",
+              alignItems: /^(bullet|icon)$/.test(type) ? "center" : void 0,
+              className: lineHeightContainer[size$1],
+              userSelect: "none",
+              "aria-hidden": true,
+              children: (() => {
+                if (type === "number") {
+                  return /* @__PURE__ */ jsx(CharacterBullet, { length: lastNumberLength, children: resolvedIndex + 1 });
+                }
+                if (type === "alpha") {
+                  return /* @__PURE__ */ jsx(CharacterBullet, { children: numberToAlpha(resolvedIndex + 1) });
+                }
+                if (type === "roman") {
+                  return /* @__PURE__ */ jsx(CharacterBullet, { length: 2, children: numberToRomanNumerals(resolvedIndex + 1) });
+                }
+                if (type === "icon" && "icon" in restProps) {
+                  return restProps.icon;
+                }
+                return /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    borderRadius: "full",
+                    className: [currentColor, size[size$1]]
+                  }
+                );
+              })()
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              minWidth: 0,
+              width: "full",
+              paddingLeft: size$1 === "xsmall" ? "xsmall" : "small",
+              children: listItem
+            }
+          )
+        ] });
+      })
+    }
+  ) });
+};
+export {
+  List
+};

package/dist/lib/components/List/List.playroom.cjs

@@ -0,0 +1,13 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const lib_playroom_cleanSpaceValue_cjs = require("../../playroom/cleanSpaceValue.cjs");
+const lib_components_List_List_cjs = require("./List.cjs");
+const lib_components_icons_IconClear_IconClear_cjs = require("../icons/IconClear/IconClear.cjs");
+const List = ({ space, ...props }) => {
+  const cleanSpace = lib_playroom_cleanSpaceValue_cjs.cleanSpaceValue(space);
+  if (props.type === "icon" && (!("icon" in props) || !props.icon)) {
+    return /* @__PURE__ */ jsxRuntime.jsx(lib_components_List_List_cjs.List, { ...props, space: cleanSpace, icon: /* @__PURE__ */ jsxRuntime.jsx(lib_components_icons_IconClear_IconClear_cjs.IconClear, {}) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(lib_components_List_List_cjs.List, { space: cleanSpace, ...props });
+};
+exports.List = List;

package/dist/lib/components/List/List.playroom.mjs

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import { cleanSpaceValue } from "../../playroom/cleanSpaceValue.mjs";
+import { List as List$1 } from "./List.mjs";
+import { IconClear } from "../icons/IconClear/IconClear.mjs";
+const List = ({ space, ...props }) => {
+  const cleanSpace = cleanSpaceValue(space);
+  if (props.type === "icon" && (!("icon" in props) || !props.icon)) {
+    return /* @__PURE__ */ jsx(List$1, { ...props, space: cleanSpace, icon: /* @__PURE__ */ jsx(IconClear, {}) });
+  }
+  return /* @__PURE__ */ jsx(List$1, { space: cleanSpace, ...props });
+};
+export {
+  List
+};

package/dist/lib/components/Loader/Loader.cjs

@@ -0,0 +1,48 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const lib_components_Box_Box_cjs = require("../Box/Box.cjs");
+const lib_components_private_buildDataAttributes_cjs = require("../private/buildDataAttributes.cjs");
+const lib_css_atoms_atoms_cjs = require("../../css/atoms/atoms.cjs");
+const lib_components_Loader_Loader_css_cjs = require("./Loader.css.cjs");
+const lib_css_typography_css_cjs = require("../../css/typography.css.cjs");
+const Loader = ({
+  size = "standard",
+  "aria-label": ariaLabel = "Loading",
+  delayVisibility = false,
+  data,
+  ...restProps
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  lib_components_Box_Box_cjs.Box,
+  {
+    display: "flex",
+    alignItems: "center",
+    className: [
+      lib_components_Loader_Loader_css_cjs.rootSize[size],
+      delayVisibility ? lib_components_Loader_Loader_css_cjs.delay : void 0
+    ],
+    "aria-label": ariaLabel,
+    role: "alert",
+    "aria-live": "assertive",
+    ...lib_components_private_buildDataAttributes_cjs.buildDataAttributes({ data, validateRestProps: restProps }),
+    children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        className: [
+          lib_css_atoms_atoms_cjs.atoms({ reset: "svg" }),
+          lib_components_Loader_Loader_css_cjs.size[size],
+          lib_components_Loader_Loader_css_cjs.currentColor,
+          lib_css_typography_css_cjs.tone.neutral
+        ].join(" "),
+        viewBox: "0 0 302 134",
+        "aria-hidden": true,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("circle", { className: lib_components_Loader_Loader_css_cjs.circle, cy: "67", cx: "40", r: "40" }),
+          /* @__PURE__ */ jsxRuntime.jsx("circle", { className: lib_components_Loader_Loader_css_cjs.circle, cy: "67", cx: "150", r: "40" }),
+          /* @__PURE__ */ jsxRuntime.jsx("circle", { className: lib_components_Loader_Loader_css_cjs.circle, cy: "67", cx: "260", r: "40" })
+        ]
+      }
+    )
+  }
+);
+exports.Loader = Loader;