@itwin/itwinui-react 5.0.0-alpha.10 → 5.0.0-alpha.12

package/dist/bricks/Icon.js

@@ -2,10 +2,21 @@ import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import cx from "classnames";
 import { Role } from "@ariakit/react/role";
-import { forwardRef } from "./~utils.js";
+import {
+  forwardRef,
+  getOwnerDocument,
+  parseDOM
+} from "./~utils.js";
+import {
+  HtmlSanitizerContext,
+  spriteSheetId,
+  useRootNode
+} from "./Root.internal.js";
+import { useLatestRef, useSafeContext } from "./~hooks.js";
 const Icon = forwardRef((props, forwardedRef) => {
-  const { href, size, alt, ...rest } = props;
+  const { href: hrefProp, size, alt, ...rest } = props;
   const isDecorative = !alt;
+  const hrefBase = useNormalizedHrefBase(hrefProp);
   return /* @__PURE__ */ jsx(
     Role.svg,
     {
@@ -16,19 +27,81 @@ const Icon = forwardRef((props, forwardedRef) => {
       "data-kiwi-size": size,
       className: cx("\u{1F95D}-icon", props.className),
       ref: forwardedRef,
-      children: href ? /* @__PURE__ */ jsx("use", { href: toIconHref(href, size) }) : null
+      children: hrefBase ? /* @__PURE__ */ jsx("use", { href: toIconHref(hrefBase, size) }) : null
     }
   );
 });
-function toIconHref(href, size) {
-  const separator = href.includes("#") ? "--" : "#";
+function toIconHref(hrefBase, size) {
+  const separator = hrefBase.includes("#") ? "--" : "#";
   const suffix = toIconId(size);
-  return `${href}${separator}${suffix}`;
+  return `${hrefBase}${separator}${suffix}`;
 }
 function toIconId(size) {
   if (size === "large") return "icon-large";
   return "icon";
 }
+function useNormalizedHrefBase(rawHref) {
+  const generatedId = React.useId();
+  const sanitizeHtml = useLatestRef(useSafeContext(HtmlSanitizerContext));
+  const rootNode = useRootNode();
+  const inlineHref = React.useRef(void 0);
+  const getClientSnapshot = () => {
+    const ownerDocument = getOwnerDocument(rootNode);
+    if (!rawHref || !ownerDocument) return void 0;
+    if (isHttpProtocol(rawHref, ownerDocument)) return rawHref;
+    return inlineHref.current;
+  };
+  const subscribe = React.useCallback(
+    (notify) => {
+      const ownerDocument = getOwnerDocument(rootNode);
+      const spriteSheet = ownerDocument?.getElementById(spriteSheetId);
+      if (!rawHref || !ownerDocument || !spriteSheet) return () => {
+      };
+      if (isHttpProtocol(rawHref, ownerDocument)) return () => {
+      };
+      const cache = spriteSheet[Symbol.for("\u{1F95D}")]?.icons;
+      if (!cache) return () => {
+      };
+      const prefix = `\u{1F95D}${generatedId}`;
+      if (cache.has(rawHref)) {
+        inlineHref.current = cache.get(rawHref);
+        notify();
+        return () => {
+        };
+      }
+      const abortController = new AbortController();
+      const { signal } = abortController;
+      (async () => {
+        const response = await fetch(rawHref, { signal });
+        if (!response.ok) throw new Error(`Failed to fetch ${rawHref}`);
+        const fetchedSvgString = sanitizeHtml.current(await response.text());
+        const parsedSvgContent = parseDOM(fetchedSvgString, {
+          ownerDocument
+        });
+        const symbols = parsedSvgContent.querySelectorAll("symbol");
+        for (const symbol of symbols) {
+          symbol.id = `${prefix}--${symbol.id}`;
+          if (ownerDocument.getElementById(symbol.id)) continue;
+          spriteSheet.appendChild(symbol.cloneNode(true));
+        }
+        inlineHref.current = `#${prefix}`;
+        cache.set(rawHref, inlineHref.current);
+        if (!signal.aborted) notify();
+      })();
+      return () => abortController.abort();
+    },
+    [rawHref, rootNode, sanitizeHtml, generatedId]
+  );
+  return React.useSyncExternalStore(
+    subscribe,
+    getClientSnapshot,
+    () => rawHref
+  );
+}
+function isHttpProtocol(url, ownerDocument) {
+  const { protocol } = new URL(url, ownerDocument.baseURI);
+  return ["http:", "https:"].includes(protocol);
+}
 const DisclosureArrow = forwardRef(
   (props, forwardedRef) => {
     const { direction = "down", ...rest } = props;
@@ -112,9 +185,71 @@ const Dismiss = forwardRef(
     );
   }
 );
+const StatusWarning = forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(
+      Icon,
+      {
+        ...props,
+        render: /* @__PURE__ */ jsx(
+          Role.svg,
+          {
+            width: "16",
+            height: "16",
+            fill: "currentColor",
+            viewBox: "0 0 16 16",
+            render: props.render,
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                fill: "currentColor",
+                fillRule: "evenodd",
+                d: "M8.354 2.06a.5.5 0 0 0-.708 0L2.061 7.647a.5.5 0 0 0 0 .707l5.585 5.586a.5.5 0 0 0 .708 0l5.585-5.586a.5.5 0 0 0 0-.707L8.354 2.061Zm-1.415-.707a1.5 1.5 0 0 1 2.122 0l5.585 5.586a1.5 1.5 0 0 1 0 2.122l-5.585 5.585a1.5 1.5 0 0 1-2.122 0L1.354 9.061a1.5 1.5 0 0 1 0-2.122l5.585-5.586ZM8.75 10.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM8.5 8.5v-3a.5.5 0 0 0-1 0v3a.5.5 0 0 0 1 0Z",
+                clipRule: "evenodd"
+              }
+            )
+          }
+        ),
+        ref: forwardedRef
+      }
+    );
+  }
+);
+const MoreHorizontal = forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(
+      Icon,
+      {
+        ...props,
+        render: /* @__PURE__ */ jsx(
+          Role.svg,
+          {
+            width: "16",
+            height: "16",
+            viewBox: "0 0 16 16",
+            fill: "none",
+            render: props.render,
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                fill: "currentColor",
+                fillRule: "evenodd",
+                d: "M3 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm6-1a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm5 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z",
+                clipRule: "evenodd"
+              }
+            )
+          }
+        ),
+        ref: forwardedRef
+      }
+    );
+  }
+);
 export {
   Checkmark,
   DisclosureArrow,
   Dismiss,
-  Icon
+  Icon,
+  MoreHorizontal,
+  StatusWarning
 };

package/dist/bricks/Label.d.ts

@@ -2,24 +2,17 @@ import { type BaseProps } from "./~utils.js";
 interface LabelProps extends BaseProps<"label"> {
 }
 /**
- * A styled wrapper over the HTML `<label>` element, used for labelling form controls.
+ * A styled wrapper over the HTML `<label>` element, used for labelling form
+ * controls.
  *
- * Can be used standalone:
-
+ * Example usage:
  * ```tsx
  * <Label htmlFor="my-input">Label</Label>
  * <TextBox.Input id="my-input" />
  * ```
  *
- * Or within a `Field` component to automatically manage ID associations:
- *
- * ```tsx
- * <Field>
- *   <Label>Label</Label>
- *   <TextBox.Input />
- * </Field>
- * ```
- *
+ * See `Field.Label` for convenient usage with form controls (e.g. automatic
+ * association with adjacent form control).
  */
 export declare const Label: import("react").ForwardRefExoticComponent<LabelProps & import("react").RefAttributes<HTMLElement | HTMLLabelElement>>;
 export {};

package/dist/bricks/Label.js

@@ -2,19 +2,13 @@ import { jsx } from "react/jsx-runtime";
 import cx from "classnames";
 import { Role } from "@ariakit/react/role";
 import { forwardRef } from "./~utils.js";
-import { FieldLabel } from "./Field.js";
 const Label = forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsx(
-    FieldLabel,
+    Role.label,
     {
-      render: /* @__PURE__ */ jsx(
-        Role.label,
-        {
-          ...props,
-          className: cx("\u{1F95D}-label", props.className),
-          ref: forwardedRef
-        }
-      )
+      ...props,
+      className: cx("\u{1F95D}-label", props.className),
+      ref: forwardedRef
     }
   );
 });

package/dist/bricks/Radio.d.ts

@@ -7,13 +7,22 @@ interface RadioProps extends InputBaseProps, RadioOwnProps {
 /**
  * A styled radio input element, typically used for selecting a single option from a list.
  *
- * Works well with the `Field` and `Label` components.
+ * Use with the `Field` components to automatically handle ID associations for
+ * labels and descriptions:
+ * ```tsx
+ * <Field.Root>
+ *   <Field.Label>Choose one</Field.Label>
+ *   <Field.Control render={<Radio />} />
+ * </Field.Root>
+ * ```
  *
+ * Without the `Field` components you will need to manually associate labels,
+ * descriptions, etc.:
  * ```tsx
- * <Field>
- *   <Label>Choose one</Label>
- *   <Radio />
- * </Field>
+ * <Radio id="editor-vim" name="editor" value="vim" />
+ * <Label htmlFor="editor-vim">Vim</Label>
+ * <Radio id="editor-emacs" name="editor" value="emacs" />
+ * <Label htmlFor="editor-emacs">Emacs</Label>
  * ```
  *
  * Underneath, it's an HTML radio input, i.e. `<input type="radio">`, so it supports the same props,

package/dist/bricks/Radio.js

@@ -3,24 +3,17 @@ import cx from "classnames";
 import {
   Radio as AkRadio
 } from "@ariakit/react/radio";
-import { FieldControl } from "./Field.js";
 import { forwardRef } from "./~utils.js";
+import { useFieldControlType } from "./Field.internal.js";
 const Radio = forwardRef((props, forwardedRef) => {
-  const { id, ...rest } = props;
+  useFieldControlType("checkable");
   return /* @__PURE__ */ jsx(
-    FieldControl,
+    AkRadio,
     {
-      type: "checkable",
-      id,
-      render: /* @__PURE__ */ jsx(
-        AkRadio,
-        {
-          accessibleWhenDisabled: true,
-          ...rest,
-          className: cx("\u{1F95D}-checkbox", "\u{1F95D}-radio", props.className),
-          ref: forwardedRef
-        }
-      )
+      accessibleWhenDisabled: true,
+      ...props,
+      className: cx("\u{1F95D}-checkbox", "\u{1F95D}-radio", props.className),
+      ref: forwardedRef
     }
   );
 });

package/dist/bricks/Root.d.ts

@@ -17,6 +17,18 @@ interface RootProps extends BaseProps {
      * The density to use for all components under the Root.
      */
     density: "dense";
+    /**
+     * An HTML sanitizer function that will be used across all components wherever DOM elements
+     * are created from HTML strings.
+     *
+     * When this prop is not passed, sanitization will be skipped.
+     *
+     * Example:
+     * ```tsx
+     * unstablized_htmlSanitizer={DOMPurify.sanitize}
+     * ```
+     */
+    unstable_htmlSanitizer?: (html: string) => string;
 }
 /**
  * Component to be used at the root of your application. It ensures that kiwi styles and fonts are loaded

package/dist/bricks/Root.internal.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+export declare const RootNodeContext: React.Context<Document | ShadowRoot | null>;
+/** Returns the closest [rootNode](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode). */
+export declare function useRootNode(): Document | ShadowRoot | null | undefined;
+export declare const spriteSheetId = "\uD83E\uDD5D-inline-sprites";
+export declare const HtmlSanitizerContext: React.Context<((html: string) => string) | undefined>;

package/dist/bricks/Root.internal.js

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { useIsClient } from "./~hooks.js";
+const RootNodeContext = React.createContext(null);
+function useRootNode() {
+  const maybeRootNode = React.useContext(RootNodeContext);
+  const isClient = useIsClient();
+  if (!isClient) return void 0;
+  return maybeRootNode;
+}
+const spriteSheetId = "\u{1F95D}-inline-sprites";
+const HtmlSanitizerContext = React.createContext(void 0);
+export {
+  HtmlSanitizerContext,
+  RootNodeContext,
+  spriteSheetId,
+  useRootNode
+};

package/dist/bricks/Root.js

@@ -6,15 +6,33 @@ import { PortalContext } from "@ariakit/react/portal";
 import cx from "classnames";
 import foundationsCss from "../foundations/styles.css.js";
 import bricksCss from "./styles.css.js";
-import { forwardRef, isBrowser } from "./~utils.js";
-import { useIsClient, useMergedRefs } from "./~hooks.js";
+import {
+  forwardRef,
+  getOwnerDocument,
+  identity,
+  isBrowser,
+  isDocument
+} from "./~utils.js";
+import { useLayoutEffect, useMergedRefs } from "./~hooks.js";
+import {
+  HtmlSanitizerContext,
+  RootNodeContext,
+  spriteSheetId,
+  useRootNode
+} from "./Root.internal.js";
 const css = foundationsCss + bricksCss;
 const Root = forwardRef((props, forwardedRef) => {
-  const { children, synchronizeColorScheme = false, ...rest } = props;
+  const {
+    children,
+    synchronizeColorScheme = false,
+    unstable_htmlSanitizer = identity,
+    ...rest
+  } = props;
   const [portalContainer, setPortalContainer] = React.useState(null);
   return /* @__PURE__ */ jsxs(RootInternal, { ...rest, ref: forwardedRef, children: [
     /* @__PURE__ */ jsx(Styles, {}),
     /* @__PURE__ */ jsx(Fonts, {}),
+    /* @__PURE__ */ jsx(InlineSpriteSheet, {}),
     synchronizeColorScheme ? /* @__PURE__ */ jsx(SynchronizeColorScheme, { colorScheme: props.colorScheme }) : null,
     /* @__PURE__ */ jsx(
       PortalContainer,
@@ -24,13 +42,9 @@ const Root = forwardRef((props, forwardedRef) => {
         ref: setPortalContainer
       }
     ),
-    /* @__PURE__ */ jsx(PortalContext.Provider, { value: portalContainer, children })
+    /* @__PURE__ */ jsx(PortalContext.Provider, { value: portalContainer, children: /* @__PURE__ */ jsx(HtmlSanitizerContext.Provider, { value: unstable_htmlSanitizer, children }) })
   ] });
 });
-const RootNodeContext = React.createContext(null);
-function useRootNode() {
-  return React.useContext(RootNodeContext);
-}
 const RootInternal = forwardRef(
   (props, forwardedRef) => {
     const { children, colorScheme, density, ...rest } = props;
@@ -71,10 +85,9 @@ function SynchronizeColorScheme({
   return null;
 }
 const PortalContainer = forwardRef((props, forwardedRef) => {
-  const isClient = useIsClient();
   const rootNode = useRootNode();
-  if (!isClient) return null;
-  const destination = rootNode && isDocument(rootNode) ? rootNode.body : rootNode;
+  if (!rootNode) return null;
+  const destination = isDocument(rootNode) ? rootNode.body : rootNode;
   if (!destination) return null;
   return ReactDOM.createPortal(
     /* @__PURE__ */ jsx(
@@ -94,35 +107,46 @@ function Styles() {
   const rootNode = useRootNode();
   useLayoutEffect(() => {
     if (!rootNode) return;
-    loadStyles(rootNode, { css });
+    const { cleanup } = loadStyles(rootNode, { css });
+    return cleanup;
   }, [rootNode]);
   return null;
 }
-const styleSheets = /* @__PURE__ */ new WeakMap();
-function loadStyles(rootNode, { css: css2 }) {
+const styleSheets = new Map(
+  Object.entries({ default: /* @__PURE__ */ new WeakMap() })
+);
+function loadStyles(rootNode, { css: css2, key = "default" }) {
+  let cleanup = () => {
+  };
   const loaded = (() => {
     if (!isBrowser) return false;
     const ownerDocument = getOwnerDocument(rootNode);
     const _window = getWindow(rootNode);
     if (!ownerDocument || !_window) return false;
-    if (!supportsAdoptedStylesheets && !rootNode.querySelector("style[data-kiwi]")) {
+    if (!supportsAdoptedStylesheets && !rootNode.querySelector(`style[data-kiwi="${key}"]`)) {
       const styleElement = ownerDocument.createElement("style");
-      styleElement.dataset.kiwi = "true";
+      styleElement.dataset.kiwi = key;
       styleElement.textContent = css2;
       (rootNode.head || rootNode).appendChild(styleElement);
+      cleanup = () => styleElement.remove();
       return true;
     }
-    const styleSheet = styleSheets.get(_window) || new _window.CSSStyleSheet();
-    if (!styleSheets.has(_window)) {
-      styleSheets.set(_window, styleSheet);
+    const styleSheet = styleSheets.get(key)?.get(_window) || new _window.CSSStyleSheet();
+    if (!styleSheets.get(key)?.has(_window)) {
+      styleSheets.get(key)?.set(_window, styleSheet);
     }
     styleSheet.replaceSync(css2);
     if (!rootNode.adoptedStyleSheets.includes(styleSheet)) {
       rootNode.adoptedStyleSheets.push(styleSheet);
+      cleanup = () => {
+        rootNode.adoptedStyleSheets = rootNode.adoptedStyleSheets.filter(
+          (sheet) => sheet !== styleSheet
+        );
+      };
     }
     return true;
   })();
-  return { loaded };
+  return { loaded, cleanup };
 }
 function Fonts() {
   const rootNode = useRootNode();
@@ -132,6 +156,35 @@ function Fonts() {
   }, [rootNode]);
   return null;
 }
+function InlineSpriteSheet() {
+  const rootNode = useRootNode();
+  React.useEffect(
+    function maybeCreateSpriteSheet() {
+      const ownerDocument = getOwnerDocument(rootNode);
+      if (!ownerDocument) return;
+      const spriteSheet = ownerDocument?.getElementById(spriteSheetId);
+      if (spriteSheet) return;
+      const svg = ownerDocument.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "svg"
+      );
+      svg.id = spriteSheetId;
+      svg.style.display = "none";
+      Object.defineProperty(svg, Symbol.for("\u{1F95D}"), {
+        value: { icons: /* @__PURE__ */ new Map() }
+        // Map of icon URLs that have already been inlined.
+      });
+      ownerDocument.body.appendChild(svg);
+      return () => {
+        if (svg.isConnected) {
+          ownerDocument.body.removeChild(svg);
+        }
+      };
+    },
+    [rootNode]
+  );
+  return null;
+}
 function loadFonts(rootNode) {
   const ownerWindow = getWindow(rootNode);
   if (!ownerWindow || Array.from(ownerWindow.document.fonts).some(
@@ -160,17 +213,10 @@ const supportsAdoptedStylesheets = isBrowser && "adoptedStyleSheets" in Document
 function isShadow(node) {
   return node instanceof ShadowRoot || node?.nodeType === Node.DOCUMENT_FRAGMENT_NODE && !!node?.host;
 }
-function isDocument(node) {
-  return node?.nodeType === Node.DOCUMENT_NODE;
-}
-function getOwnerDocument(node) {
-  return (isDocument(node) ? node : node.ownerDocument) || null;
-}
 function getWindow(node) {
   const ownerDocument = getOwnerDocument(node);
   return ownerDocument?.defaultView || null;
 }
-const useLayoutEffect = isBrowser ? React.useLayoutEffect : React.useEffect;
 export {
   Root
 };

package/dist/bricks/Select.d.ts

@@ -3,20 +3,37 @@ import { type FocusableProps } from "./~utils.js";
 /**
  * Compound component for a select element, which allows the user to select a value from a list of options.
  *
- * Works well with the `Field` and `Label` components.
+ * Use with the `Field` components to automatically handle ID associations for
+ * labels and descriptions:
+ * ```tsx
+ * <Field.Root>
+ *   <Field.Label>Fruit</Field.Label>
+ *   <Field.Control
+ *     render={(controlProps) => (
+ *       <Select.Root>
+ *         <Select.HtmlSelect name="fruit" {...controlProps}>
+ *           <option value="kiwi">Kiwi</option>
+ *           <option value="mango">Mango</option>
+ *           <option value="papaya">Papaya</option>
+ *         </Select.HtmlSelect>
+ *       </Select.Root>
+ *     )}
+ *   />
+ * </Field.Root>
+ * ```
  *
- * Example usage:
+ * Without the `Field` components you will need to manually associate labels,
+ * descriptions, etc.:
  * ```tsx
- * <Field>
- *   <Label>Select an option</Label>
- *   <Select.Root>
- *     <Select.HtmlSelect>
- *       <option value="1">Option 1</option>
- *       <option value="2">Option 2</option>
- *       <option value="3">Option 3</option>
- *     </Select.HtmlSelect>
- *   </Select.Root>
- * </Field>
+ * <Label htmlFor="fruit">Fruit</Label>
+ * <Description id="fruit-description">Something to include in a fruit salad.</Description>
+ * <Select.Root>
+ *   <Select.HtmlSelect id="fruit" aria-labelledby="fruit-description">
+ *     <option value="kiwi">Kiwi</option>
+ *     <option value="mango">Mango</option>
+ *     <option value="papaya">Papaya</option>
+ *   </Select.HtmlSelect>
+ * </Select.Root>
  * ```
  */
 declare const SelectRoot: React.ForwardRefExoticComponent<Pick<import("@ariakit/react/role").RoleProps, "render"> & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "render"> & React.RefAttributes<HTMLElement | HTMLDivElement>>;

package/dist/bricks/Select.js

@@ -7,11 +7,12 @@ import {
   isBrowser
 } from "./~utils.js";
 import { DisclosureArrow } from "./Icon.js";
-import { FieldControl } from "./Field.js";
+import { useFieldControlType } from "./Field.internal.js";
 const supportsHas = isBrowser && CSS?.supports?.("selector(:has(+ *))");
 const HtmlSelectContext = React.createContext(() => {
 });
 const SelectRoot = forwardRef((props, forwardedRef) => {
+  useFieldControlType("textlike");
   const [isHtmlSelect, setIsHtmlSelect] = React.useState(false);
   return /* @__PURE__ */ jsx(HtmlSelectContext.Provider, { value: setIsHtmlSelect, children: /* @__PURE__ */ jsx(
     Role.div,
@@ -25,7 +26,7 @@ const SelectRoot = forwardRef((props, forwardedRef) => {
 });
 const HtmlSelect = forwardRef(
   (props, forwardedRef) => {
-    const { id, variant = "solid", ...rest } = props;
+    const { variant = "solid", ...rest } = props;
     const setIsHtmlSelect = React.useContext(HtmlSelectContext);
     React.useEffect(
       function updateContext() {
@@ -35,20 +36,13 @@ const HtmlSelect = forwardRef(
     );
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
-        FieldControl,
+        Role.select,
         {
-          type: "textlike",
-          id,
-          render: /* @__PURE__ */ jsx(
-            Role.select,
-            {
-              ...rest,
-              className: cx("\u{1F95D}-button", "\u{1F95D}-select", props.className),
-              "data-kiwi-tone": "neutral",
-              "data-kiwi-variant": variant,
-              ref: forwardedRef
-            }
-          )
+          ...rest,
+          className: cx("\u{1F95D}-button", "\u{1F95D}-select", props.className),
+          "data-kiwi-tone": "neutral",
+          "data-kiwi-variant": variant,
+          ref: forwardedRef
         }
       ),
       /* @__PURE__ */ jsx(DisclosureArrow, { className: "\u{1F95D}-select-arrow" })

package/dist/bricks/Spinner.js

@@ -17,17 +17,32 @@ const Spinner = forwardRef(
         ...rest,
         "data-kiwi-size": size,
         "data-kiwi-tone": tone,
+        "data-kiwi-variant": "indeterminate",
         className: cx("\u{1F95D}-spinner", props.className),
         ref: forwardedRef,
         children: [
-          /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", className: "\u{1F95D}-spinner-svg", viewBox: "0 0 16 16", children: /* @__PURE__ */ jsx(
-            "path",
-            {
-              stroke: "currentColor",
-              strokeLinecap: "round",
-              d: "M9.5 1.674a6.503 6.503 0 0 1 0 12.652m-3-12.652a6.503 6.503 0 0 0 0 12.652"
-            }
-          ) }),
+          /* @__PURE__ */ jsxs("svg", { "aria-hidden": "true", className: "\u{1F95D}-spinner-svg", viewBox: "0 0 16 16", children: [
+            /* @__PURE__ */ jsx(
+              "circle",
+              {
+                pathLength: "100",
+                className: "\u{1F95D}-spinner-svg-track",
+                cx: "8",
+                cy: "8",
+                r: "6.5"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "circle",
+              {
+                pathLength: "100",
+                className: "\u{1F95D}-spinner-svg-fill",
+                cx: "8",
+                cy: "8",
+                r: "6.5"
+              }
+            )
+          ] }),
           /* @__PURE__ */ jsx(VisuallyHidden, { children: alt })
         ]
       }