@blenx-dev/core 0.1.0 → 0.2.3

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @blenx-dev/core
 
+## 0.2.3
+
+### Patch Changes
+
+- 0439e3e: Use Icon generator and simplify components
+- Updated dependencies [0439e3e]
+  - @blenx-dev/theme@0.2.3
+
 ## 1.0.0
 
 ### Minor Changes

package/iconify.config.ts

@@ -0,0 +1,23 @@
+// packages/core/iconify.config.ts
+
+export default {
+  collection: "lucide",
+  icons: [
+    "chevron-left",
+    "chevron-right",
+    "chevron-up",
+    "chevron-down",
+    "calendar",
+    "square-check",
+    "search",
+    "check",
+    "x",
+    "folder-open",
+    "loader-circle",
+    "circle-alert",
+    "copy",
+    "list",
+    "ellipsis",
+    "arrow-right",
+  ],
+};

package/package.json

@@ -1,10 +1,14 @@
 {
   "name": "@blenx-dev/core",
-  "version": "0.1.0",
+  "version": "0.2.3",
   "type": "module",
   "sideEffects": false,
   "exports": {
     ".": "./src/index.ts",
+    "./icons": {
+      "types": "./src/icons/index.ts",
+      "default": "./src/icons/index.ts"
+    },
     "./*": "./src/components/*/index.ts",
     "./components": {
       "types": "./src/components/index.ts",
@@ -25,25 +29,31 @@
   "dependencies": {
     "@base-ui/react": "^1.0.0",
     "@phosphor-icons/react": "^2.1.10",
-    "@tanstack/react-table": "^8.21.3",
     "@vanilla-extract/css": "^1.20.1",
     "@vanilla-extract/recipes": "^0.5.7",
     "@vanilla-extract/sprinkles": "^1.6.5",
     "clsx": "^2.1.1",
-    "react-colorful": "^5.7.0",
-    "react-day-picker": "^10.0.1",
     "sonner": "^2.0.5",
     "tailwind-merge": "^3.3.1",
-    "@blenx-dev/theme": "1.0.0"
+    "@blenx-dev/theme": "0.2.3"
   },
   "devDependencies": {
+    "@iconify/json": "^2.2.493",
+    "@iconify/tools": "^5.0.12",
+    "@iconify/types": "^2.0.0",
+    "@iconify/utils": "^3.1.3",
     "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",
-    "changeset": "^0.2.6"
+    "changeset": "^0.2.6",
+    "prettier": "^3.9.3",
+    "tsx": "^4.22.4"
   },
   "peerDependencies": {
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
-    "@blenx-dev/theme": "1.0.0"
+    "@blenx-dev/theme": "0.2.3"
+  },
+  "scripts": {
+    "gen:icons": "tsx scripts/generate-icons.ts"
   }
 }

package/scripts/generate-icons.ts

@@ -0,0 +1,82 @@
+// scripts/generate-icons.ts
+
+import { promises as fs } from "node:fs";
+import path from "node:path";
+
+import config from "../iconify.config";
+type IconCollection = {
+  prefix: string;
+  icons: Record<
+    string,
+    {
+      body: string;
+      width?: number;
+      height?: number;
+    }
+  >;
+};
+
+function pascalCase(name: string) {
+  return name
+    .split(/[-_]/g)
+    .map((x) => x.charAt(0).toUpperCase() + x.slice(1))
+    .join("");
+}
+
+async function main() {
+  const collection = (
+    await import(`@iconify/json/json/${config.collection}.json`, {
+      with: { type: "json" },
+    } as never)
+  ).default as IconCollection;
+
+  const outDir = path.resolve("src/icons");
+
+  await fs.rm(outDir, { recursive: true, force: true });
+  await fs.mkdir(outDir, { recursive: true });
+
+  const exports: string[] = ["export interface IconProps extends React.SVGProps<SVGSVGElement> {}"];
+  const writePromises = [];
+  for (const iconName of config.icons) {
+    const icon = collection.icons[iconName];
+
+    if (!icon) {
+      throw new Error(`Missing icon "${iconName}"`);
+    }
+
+    const component = `${pascalCase(iconName)}Icon`;
+
+    const width = icon.width ?? 24;
+    const height = icon.height ?? 24;
+
+    const source = `import * as React from "react";
+
+interface IconProps extends React.SVGProps<SVGSVGElement> {}
+
+export const ${component} = React.forwardRef<SVGSVGElement, IconProps>(
+  (props, ref) => (
+    <svg
+      ref={ref}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 ${width} ${height}"
+      fill="none"
+      stroke="currentColor"
+      dangerouslySetInnerHTML={{ __html: ${JSON.stringify(icon.body)} }}
+      {...props}
+    />
+  )
+);
+
+${component}.displayName = "${component}";
+`;
+    writePromises.push(fs.writeFile(path.join(outDir, `${component}.tsx`), source, "utf8"));
+
+    exports.push(`export * from "./${component}";`);
+  }
+  await Promise.all(writePromises);
+  await fs.writeFile(path.join(outDir, "index.ts"), exports.join("\n"), "utf8");
+
+  console.log(`Generated ${exports.length} icons`);
+}
+
+main();

package/src/components/Accordion/accordion.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
-import { CaretDownIcon } from "@phosphor-icons/react";
 import clsx from "clsx";
 import {
   root,
@@ -12,6 +11,7 @@ import {
   triggerIcon,
   panel,
 } from "./accordion.css";
+import { ChevronDownIcon } from "../../icons";
 
 type AccordionRootProps = AccordionPrimitive.Root.Props;
 
@@ -54,7 +54,7 @@ type AccordionTriggerProps = AccordionPrimitive.Trigger.Props;
 function AccordionTrigger({ children, className, ...props }: AccordionTriggerProps) {
   return (
     <AccordionPrimitive.Trigger className={clsx(trigger, className)} {...props}>
-      <CaretDownIcon size={16} className={triggerIcon} />
+      <ChevronDownIcon width={16} className={triggerIcon} />
       {children}
     </AccordionPrimitive.Trigger>
   );

package/src/components/Autocomplete/autocomplete.tsx

@@ -1,5 +1,4 @@
 import { Autocomplete as AutocompletePrimitive } from "@base-ui/react/autocomplete";
-import { CaretUpDownIcon } from "@phosphor-icons/react";
 import clsx from "clsx";
 import type React from "react";
 import { Input } from "../Input/input";
@@ -29,6 +28,7 @@ import {
   item,
 } from "./autocomplete.css";
 import { CloseButton } from "../CloseButton";
+import { ChevronUpIcon } from "../../icons";
 
 const Autocomplete: typeof AutocompletePrimitive.Root = AutocompletePrimitive.Root;
 
@@ -106,7 +106,7 @@ function AutocompleteInput({
           data-slot="autocomplete-trigger"
           {...triggerProps}
         >
-          <CaretUpDownIcon size={resolvedSize === "sm" ? 16 : 18} weight="regular" />
+          <ChevronUpIcon width={resolvedSize === "sm" ? 16 : 18} />
         </AutocompletePrimitive.Trigger>
       )}
       {showClear && (

package/src/components/Breadcrumbs/breadcrumbs.tsx

@@ -1,10 +1,10 @@
 "use client";
 
 import { mergeProps, useRender } from "@base-ui/react";
-import { CaretRightIcon, DotsThreeIcon } from "@phosphor-icons/react";
 import clsx from "clsx";
 import type { ComponentPropsWithoutRef } from "react";
 import { root, list, item, link, page, separator, ellipsis, srOnly } from "./breadcrumbs.css";
+import { ChevronRightIcon, EllipsisIcon } from "../../icons";
 
 type NavProps = useRender.ComponentProps<"nav"> & {
   className?: string;
@@ -64,7 +64,7 @@ export function BreadcrumbSeparator({ children, className, style, ...props }: Li
       style={style}
       {...props}
     >
-      {children ?? <CaretRightIcon size={16} />}
+      {children ?? <ChevronRightIcon width={16} />}
     </li>
   );
 }
@@ -72,7 +72,7 @@ export function BreadcrumbSeparator({ children, className, style, ...props }: Li
 export function BreadcrumbEllipsis({ className, style, ...props }: SpanProps) {
   return (
     <span role="presentation" className={clsx(ellipsis, className)} style={style} {...props}>
-      <DotsThreeIcon size={16} />
+      <EllipsisIcon width={16} />
       <span className={srOnly}>More</span>
     </span>
   );

package/src/components/Checkbox/checkbox.tsx

@@ -12,6 +12,7 @@ import {
   indicatorIndeterminate,
   icon,
 } from "./checkbox.css";
+import { SquareCheckIcon } from "../../icons";
 
 type CheckboxGroupProps = CheckboxGroupPrimitive.Props & {
   className?: string;
@@ -66,21 +67,7 @@ function Checkbox({ className, style, ...props }: CheckboxProps) {
                     <path d="M5.252 12h13.496" />
                   </svg>
                 ) : (
-                  <svg
-                    aria-hidden="true"
-                    className={icon}
-                    fill="none"
-                    height="24"
-                    stroke="currentColor"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth="3"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path d="M5.252 12.7 10.2 18.63 18.748 5.37" />
-                  </svg>
+                  <SquareCheckIcon width={24} />
                 )}
               </span>
             )}

package/src/components/CloseButton/close-button.tsx

@@ -1,15 +1,12 @@
+import { XIcon } from "../../icons";
 import { IconButton, type IconButtonProps } from "../IconButton/icon-button";
-import { icon } from "./close-button.css";
 
 export type { IconButtonProps as CloseButtonProps };
 
 export function CloseButton(props: IconButtonProps) {
   return (
     <IconButton {...props}>
-      <svg className={icon} viewBox="0 0 24 24" aria-hidden="true">
-        <line x1="18" y1="6" x2="6" y2="18" />
-        <line x1="6" y1="6" x2="18" y2="18" />
-      </svg>
+      <XIcon width={18} />
     </IconButton>
   );
 }

package/src/components/Combobox/combobox.tsx

@@ -1,5 +1,4 @@
 import { Combobox as ComboboxPrimitive } from "@base-ui/react/combobox";
-import { CaretUpDownIcon, CheckIcon, XIcon } from "@phosphor-icons/react";
 import clsx from "clsx";
 import * as React from "react";
 import { Input } from "../Input/input";
@@ -37,6 +36,7 @@ import {
   chipRemove,
 } from "./combobox.css";
 import { CloseButton } from "../CloseButton";
+import { CheckIcon, ChevronDownIcon, XIcon } from "../../icons";
 
 type InputSize = "sm" | "default" | "lg" | number;
 
@@ -105,7 +105,7 @@ export function ComboboxClear({
       data-slot="combobox-clear"
       {...props}
     >
-      {children ?? <XIcon size={18} weight="regular" />}
+      {children ?? <XIcon width={18} />}
     </ComboboxPrimitive.Clear>
   );
 }
@@ -163,7 +163,7 @@ export function ComboboxInput({
           data-slot="combobox-trigger"
           {...triggerProps}
         >
-          <CaretUpDownIcon size={resolvedSize === "sm" ? 16 : 18} weight="regular" />
+          <ChevronDownIcon width={resolvedSize === "sm" ? 16 : 18} />
         </ComboboxPrimitive.Trigger>
       )}
       {showClear && (
@@ -231,7 +231,7 @@ export function ComboboxItem({
   return (
     <ComboboxPrimitive.Item className={clsx(item, className)} data-slot="combobox-item" {...props}>
       <ComboboxPrimitive.ItemIndicator className={itemIndicator}>
-        <CheckIcon size={16} weight="bold" />
+        <CheckIcon width={16} />
       </ComboboxPrimitive.ItemIndicator>
       <div className={itemContent}>{children}</div>
     </ComboboxPrimitive.Item>
@@ -340,7 +340,7 @@ function ComboboxChipRemove({
       data-slot="combobox-chip-remove"
       {...props}
     >
-      <XIcon size={16} weight="regular" />
+      <XIcon width={16} />
     </ComboboxPrimitive.ChipRemove>
   );
 }

package/src/components/Command/command.tsx

@@ -14,7 +14,6 @@ import {
   useRef,
 } from "react";
 import clsx from "clsx";
-import { MagnifyingGlass } from "@phosphor-icons/react";
 import {
   root,
   inputWrapper,
@@ -29,6 +28,7 @@ import {
   itemDisabled,
   separator,
 } from "./command.css";
+import { SearchIcon } from "../../icons";
 
 interface CommandItemData {
   id: string;
@@ -182,7 +182,7 @@ export function CommandInput({
   return (
     <div className={clsx(inputWrapper, className)} style={style}>
       <span className={inputIcon}>
-        <MagnifyingGlass size={16} weight="regular" />
+        <SearchIcon width={16} />
       </span>
       <input
         className={inputStyle}

package/src/components/CopyButton/copy-button.tsx

@@ -1,6 +1,6 @@
 import { useState, useCallback, type MouseEvent } from "react";
 import { IconButton, type IconButtonProps } from "../IconButton/icon-button";
-import { icon } from "./copy-button.css";
+import { CheckIcon, CopyIcon } from "../../icons";
 
 export type CopyButtonProps = Omit<IconButtonProps, "onClick"> & {
   copyValue?: string;
@@ -26,20 +26,12 @@ export function CopyButton({ copyValue, onClick, ...props }: CopyButtonProps) {
   return (
     <IconButton
       variant="soft"
+      color={copied ? "success" : "secondary"}
       {...props}
       title={copied ? "Copied!" : `Copy ${copyValue ?? ""}`}
       onClick={handleClick}
     >
-      {copied ? (
-        <svg className={icon} viewBox="0 0 24 24" aria-hidden="true">
-          <polyline points="20 6 9 17 4 12" />
-        </svg>
-      ) : (
-        <svg className={icon} viewBox="0 0 24 24" aria-hidden="true">
-          <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
-          <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
-        </svg>
-      )}
+      {copied ? <CheckIcon width={16} /> : <CopyIcon width={16} />}
     </IconButton>
   );
 }

package/src/components/Drawer/drawer.tsx

@@ -5,7 +5,6 @@ import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer";
 import { Radio as RadioPrimitive } from "@base-ui/react/radio";
 import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
 import { useRender } from "@base-ui/react/use-render";
-import { ArrowRightIcon } from "@phosphor-icons/react";
 import clsx from "clsx";
 import type React from "react";
 import { createContext, useContext, useMemo } from "react";
@@ -68,6 +67,7 @@ import {
 import { CloseButton } from "../CloseButton";
 import type { _BaseDivProps } from "../../utils/types";
 import { Box } from "../Box";
+import { ArrowRightIcon, SquareCheckIcon } from "../../icons";
 
 type DrawerPosition = "right" | "left" | "top" | "bottom";
 
@@ -494,20 +494,7 @@ export function DrawerMenuCheckboxItem({
       ) : (
         <>
           <CheckboxPrimitive.Indicator className={menuCheckboxIndicator}>
-            <svg
-              fill="none"
-              height="24"
-              stroke="currentColor"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="2"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <title>fd</title>
-              <path d="M5.252 12.7 10.2 18.63 18.748 5.37" />
-            </svg>
+            <SquareCheckIcon width={16} />
           </CheckboxPrimitive.Indicator>
           <span className={menuCheckboxLabel}>{children}</span>
         </>
@@ -550,20 +537,7 @@ function DrawerMenuRadioItem({
       {...props}
     >
       <RadioPrimitive.Indicator className={menuRadioIndicator}>
-        <svg
-          fill="none"
-          height="24"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="2"
-          viewBox="0 0 24 24"
-          width="24"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <title>fd</title>
-          <path d="M5.252 12.7 10.2 18.63 18.748 5.37" />
-        </svg>
+        <SquareCheckIcon width={16} />
       </RadioPrimitive.Indicator>
       <span className={menuRadioLabel}>{children}</span>
     </RadioPrimitive.Root>

package/src/components/Icon/icon.tsx

@@ -2,11 +2,11 @@ import clsx from "clsx";
 import { iconWrapper } from "./icon.css";
 import { Box, type BoxProps } from "../Box/box";
 
-type IconProps = BoxProps;
+type IconProps = Omit<BoxProps, "fontSize"> & { size?: BoxProps["fontSize"] };
 
-export function Icon({ children, className, style, ...props }: IconProps) {
+export function Icon({ children, className, style, size, ...props }: IconProps) {
   return (
-    <Box className={clsx(iconWrapper, className)} style={style} {...props}>
+    <Box className={clsx(iconWrapper, className)} fontSize={size} style={style} {...props}>
       {children}
     </Box>
   );

package/src/components/Popover/popover.tsx

@@ -5,26 +5,25 @@ import clsx from "clsx";
 import type React from "react";
 import { backdrop, positioner, popup, arrow, arrowFill, title, description } from "./popover.css";
 
-export const PopoverCreateHandle: typeof PopoverPrimitive.createHandle =
-  PopoverPrimitive.createHandle;
+const PopoverCreateHandle: typeof PopoverPrimitive.createHandle = PopoverPrimitive.createHandle;
 
-export function Popover(props: PopoverPrimitive.Root.Props): React.ReactElement {
+function Popover(props: PopoverPrimitive.Root.Props): React.ReactElement {
   return <PopoverPrimitive.Root {...props} />;
 }
 
-export function PopoverTrigger(props: PopoverPrimitive.Trigger.Props): React.ReactElement {
+function PopoverTrigger(props: PopoverPrimitive.Trigger.Props): React.ReactElement {
   return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
 }
 
-export function PopoverClose(props: PopoverPrimitive.Close.Props): React.ReactElement {
+function PopoverClose(props: PopoverPrimitive.Close.Props): React.ReactElement {
   return <PopoverPrimitive.Close data-slot="popover-close" {...props} />;
 }
 
-export function PopoverPortal(props: PopoverPrimitive.Portal.Props): React.ReactElement {
+function PopoverPortal(props: PopoverPrimitive.Portal.Props): React.ReactElement {
   return <PopoverPrimitive.Portal {...props} />;
 }
 
-export function PopoverPositioner({
+function PopoverPositioner({
   sideOffset = 4,
   side = "bottom",
   align = "center",
@@ -48,7 +47,7 @@ export function PopoverPositioner({
   );
 }
 
-export function PopoverPopup({
+function PopoverPopup({
   className,
   style,
   ...props
@@ -70,7 +69,7 @@ export function PopoverPopup({
   );
 }
 
-export function PopoverArrow(props: PopoverPrimitive.Arrow.Props): React.ReactElement {
+function PopoverArrow(props: PopoverPrimitive.Arrow.Props): React.ReactElement {
   return (
     <PopoverPrimitive.Arrow className={arrow} data-slot="popover-arrow" {...props}>
       <div className={arrowFill} />
@@ -78,15 +77,15 @@ export function PopoverArrow(props: PopoverPrimitive.Arrow.Props): React.ReactEl
   );
 }
 
-export function PopoverBackdrop(props: PopoverPrimitive.Backdrop.Props): React.ReactElement {
+function PopoverBackdrop(props: PopoverPrimitive.Backdrop.Props): React.ReactElement {
   return <PopoverPrimitive.Backdrop className={backdrop} data-slot="popover-backdrop" {...props} />;
 }
 
-export function PopoverTitle(props: PopoverPrimitive.Title.Props): React.ReactElement {
+function PopoverTitle(props: PopoverPrimitive.Title.Props): React.ReactElement {
   return <PopoverPrimitive.Title className={title} data-slot="popover-title" {...props} />;
 }
 
-export function PopoverDescription(props: PopoverPrimitive.Description.Props): React.ReactElement {
+function PopoverDescription(props: PopoverPrimitive.Description.Props): React.ReactElement {
   return (
     <PopoverPrimitive.Description
       className={description}
@@ -96,8 +95,6 @@ export function PopoverDescription(props: PopoverPrimitive.Description.Props): R
   );
 }
 
-export const PopoverRoot = Popover;
-
 export const PopoverCompound = {
   Root: Popover,
   Trigger: PopoverTrigger,
@@ -111,3 +108,16 @@ export const PopoverCompound = {
   Description: PopoverDescription,
   createHandle: PopoverCreateHandle,
 };
+export {
+  Popover,
+  PopoverTrigger,
+  PopoverClose,
+  PopoverPortal,
+  PopoverPositioner,
+  PopoverPopup,
+  PopoverArrow,
+  PopoverBackdrop,
+  PopoverTitle,
+  PopoverDescription,
+  PopoverCreateHandle,
+};

package/src/components/Select/select.tsx

@@ -1,5 +1,4 @@
 import { Select as SelectPrimitive } from "@base-ui/react/select";
-import { CaretDownIcon, CaretUpIcon, CheckIcon } from "@phosphor-icons/react";
 import clsx from "clsx";
 import type * as React from "react";
 import { Field, FieldError, FieldLabel } from "../Field/field";
@@ -16,6 +15,7 @@ import {
   triggerLg,
   triggerSm,
 } from "./select.css";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "../../icons";
 
 type SelectSize = "sm" | "default" | "lg";
 
@@ -62,7 +62,7 @@ export function SelectValue({ placeholder, ...props }: SelectPrimitive.Value.Pro
 export function SelectIcon(props: SelectPrimitive.Icon.Props) {
   return (
     <SelectPrimitive.Icon className={iconStyle} {...props}>
-      <CaretDownIcon size={16} />
+      <ChevronDownIcon width={16} />
     </SelectPrimitive.Icon>
   );
 }
@@ -90,7 +90,7 @@ export function SelectItem({
   return (
     <SelectPrimitive.Item className={itemStyle} {...props}>
       <SelectPrimitive.ItemIndicator className={itemIndicator}>
-        <CheckIcon size={14} weight="bold" />
+        <CheckIcon width={14} />
       </SelectPrimitive.ItemIndicator>
       <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
     </SelectPrimitive.Item>
@@ -112,7 +112,7 @@ export function SelectGroupLabel(props: SelectPrimitive.GroupLabel.Props) {
 export function SelectScrollUpArrow(props: SelectPrimitive.ScrollUpArrow.Props) {
   return (
     <SelectPrimitive.ScrollUpArrow className={scrollArrow} {...props}>
-      <CaretUpIcon size={12} />
+      <ChevronUpIcon width={12} />
     </SelectPrimitive.ScrollUpArrow>
   );
 }
@@ -120,7 +120,7 @@ export function SelectScrollUpArrow(props: SelectPrimitive.ScrollUpArrow.Props)
 export function SelectScrollDownArrow(props: SelectPrimitive.ScrollDownArrow.Props) {
   return (
     <SelectPrimitive.ScrollDownArrow className={scrollArrow} {...props}>
-      <CaretDownIcon size={12} />
+      <ChevronDownIcon width={12} />
     </SelectPrimitive.ScrollDownArrow>
   );
 }

package/src/components/Spinner/spinner.tsx

@@ -1,15 +1,13 @@
-import { CircleNotchIcon } from "@phosphor-icons/react";
 import clsx from "clsx";
 import type React from "react";
 import { spinner } from "./spinner.css";
+import { LoaderCircleIcon } from "../../icons";
 
-type Props = Omit<React.ComponentProps<typeof CircleNotchIcon>, "className" | "style"> & {
+type Props = Omit<React.ComponentProps<typeof LoaderCircleIcon>, "className" | "style"> & {
   className?: string;
   style?: React.CSSProperties;
 };
 
 export function Spinner({ className, style, ...props }: Props): React.ReactElement {
-  return (
-    <CircleNotchIcon weight="bold" className={clsx(spinner, className)} style={style} {...props} />
-  );
+  return <LoaderCircleIcon className={clsx(spinner, className)} style={style} {...props} />;
 }