update Spinner component

src/components/button/overrides.tsx

@@ -65,9 +65,7 @@ export const getButtonOverrides = (
       },
     },
     LoadingSpinner: {
-      component: ({ $disabled }) => (
-        <Spinner kind={getSpinnerKind(kind, $disabled)} size={spinnerSize[size]} animation />
-      ),
+      component: ({ $disabled }) => <Spinner kind={getSpinnerKind(kind, $disabled)} size={spinnerSize[size]} />,
     },
     LoadingSpinnerContainer: {
       style: {

src/components/input/Input.tsx

@@ -3,7 +3,6 @@ import { Input as BaseInput, InputProps as BaseInputProps, Input as InputType }
 import { getInputOverrides } from "./overrides";
 import { INPUT_KIND, INPUT_SIZE } from "./types";
 import { Spinner, SPINNER_SIZE } from "../spinner";
-import { useStyletron } from "baseui";
 import { spinnerStyles } from "./styles";
 import { getMergedOverrides } from "../../shared/utils/getMergedOverrides";
 
@@ -23,16 +22,14 @@ const Input = forwardRef<InputType, InputProps>(
     { isLoading, endEnhancer, size = INPUT_SIZE.medium, kind = INPUT_KIND.primary, overrides: baseOverrides, ...props },
     ref
   ) => {
-    const [css] = useStyletron();
-
     const inputOverrides = getInputOverrides(size, kind);
     const overrides = getMergedOverrides(inputOverrides, baseOverrides);
 
     const EndEnhancer =
       endEnhancer || isLoading ? (
         <>
           {endEnhancer}
-          {isLoading && <Spinner animation className={css(spinnerStyles)} size={spinnerSize[size]} />}
+          {isLoading && <Spinner $style={spinnerStyles} size={spinnerSize[size]} />}
         </>
       ) : null;
 

src/components/select/ui/SelectSpinner.tsx

@@ -12,7 +12,7 @@ const spinnerSize = {
 };
 
 const SelectSpinner: FC<SelectSpinnerProps> = ({ size }) => {
-  return <Spinner animation size={spinnerSize[size]} />;
+  return <Spinner size={spinnerSize[size]} />;
 };
 
 export default memo(SelectSpinner);

src/components/spinner/Spinner.stories.mdx

@@ -31,13 +31,7 @@ export const Template = ({ ...args }) => {
   <Story name="XLarge" args={{ size: SPINNER_SIZE.xLarge }}>
     {Template.bind({})}
   </Story>
-  <Story name="Animated" args={{ size: SPINNER_SIZE.xLarge, animation: true }}>
-    {Template.bind({})}
-  </Story>
-  <Story name="With Label" args={{ label: "Uploading...", animation: true }}>
-    {Template.bind({})}
-  </Story>
-  <Story name="With kind" args={{ label: "Uploading...", animation: true, kind: SPINNER_KIND.dark }}>
+  <Story name="With kind" args={{ kind: SPINNER_KIND.dark }}>
     {Template.bind({})}
   </Story>
 </Canvas>
@@ -58,10 +52,6 @@ To use, import the component `Spinner` from `@nilfoundation/ui-kit`.
         <Spinner />
         // With size
         <Spinner size={SPINNER_SIZE.large} />
-        // With animation
-        <Spinner animation />
-        // With label
-        <Spinner animation label="Uploading..." />
         // With kind
         <Spinner animation label="Uploading..." kind={SPINNER_KIND.dark} />
   `}

src/components/spinner/Spinner.test.tsx

@@ -1,31 +1,30 @@
-import { screen } from "@testing-library/react";
 import Spinner from "./Spinner";
 import { SPINNER_SIZE } from "./types";
 import { render } from "../../test-utils/render";
 import { createComponentSSRTest } from "../../test-utils/createComponentSSRTest";
 
 describe("Spinner", () => {
   it("renders without crashing", () => {
-    render(<Spinner size={SPINNER_SIZE.medium} animation={true} />);
+    render(<Spinner size={SPINNER_SIZE.medium} />);
 
-    const spinnerElement = screen.getByRole("status");
+    const spinnerElement = document.getElementsByTagName("i")[0];
     expect(spinnerElement).toBeInTheDocument();
   });
 
-  it("handles custom size and animation", () => {
-    const { rerender } = render(<Spinner size={SPINNER_SIZE.medium} animation={true} />);
+  it("handles custom size", () => {
+    const { rerender } = render(<Spinner size={SPINNER_SIZE.medium} />);
 
-    let spinnerElement = screen.getByRole("status");
+    let spinnerElement = document.getElementsByTagName("i")[0];
     expect(spinnerElement).toBeInTheDocument();
 
-    rerender(<Spinner size={SPINNER_SIZE.large} animation={false} />);
+    rerender(<Spinner size={SPINNER_SIZE.large} />);
 
-    spinnerElement = screen.getByRole("status");
+    spinnerElement = document.getElementsByTagName("i")[0];
     expect(spinnerElement).toBeInTheDocument();
   });
 
   it("renders ssr without crashing", () => {
-    createComponentSSRTest(<Spinner size={SPINNER_SIZE.medium} animation={true} />);
+    createComponentSSRTest(<Spinner size={SPINNER_SIZE.medium} />);
   });
 
   // Add more tests as needed

src/components/spinner/Spinner.tsx

@@ -1,42 +1,50 @@
-import React, { memo } from "react";
-import SpinnerIcon from "./ui/SpinnerIcon";
-import SpinnerBlock from "./ui/SpinnerBlock";
+import { FC } from "react";
 import { SPINNER_KIND, SPINNER_SIZE } from "./types";
-import SpinnerLabel from "./ui/SpinnerLabel";
+import { Spinner as BaseSpinner } from "baseui/spinner";
+import { StyleObject, withStyle } from "styletron-react";
+import { COLORS } from "../../shared";
+import { expandProperty } from "inline-style-expand-shorthand";
 
 export type SpinnerProps = {
   size?: SPINNER_SIZE;
-  label?: React.ReactNode;
-  animation?: boolean;
-  className?: string;
   kind?: SPINNER_KIND;
+  $style?: StyleObject;
 };
 
 const spinnerIconSize = {
-  [SPINNER_SIZE.xSmall]: "12",
-  [SPINNER_SIZE.small]: "16",
-  [SPINNER_SIZE.medium]: "20",
-  [SPINNER_SIZE.large]: "24",
-  [SPINNER_SIZE.xLarge]: "32",
+  [SPINNER_SIZE.xSmall]: "12px",
+  [SPINNER_SIZE.small]: "16px",
+  [SPINNER_SIZE.medium]: "20px",
+  [SPINNER_SIZE.large]: "24px",
+  [SPINNER_SIZE.xLarge]: "32px",
 };
 
-const Spinner: React.FC<SpinnerProps> = ({
-  size = SPINNER_SIZE.medium,
-  kind = SPINNER_KIND.light,
-  animation,
-  label,
-  ...props
-}) => {
-  return (
-    <SpinnerBlock {...props}>
-      <SpinnerIcon animation={animation} kind={kind} size={spinnerIconSize[size]} />
-      {label && (
-        <SpinnerLabel kind={kind} size={size}>
-          {label}
-        </SpinnerLabel>
-      )}
-    </SpinnerBlock>
-  );
+const getSpinnerStylesByKind = (kind: SPINNER_KIND) => {
+  switch (kind) {
+    case SPINNER_KIND.dark:
+      return {
+        ...expandProperty("borderColor", COLORS.gray500),
+        borderTopColor: COLORS.gray800,
+      };
+    case SPINNER_KIND.light:
+      return {
+        ...expandProperty("borderColor", COLORS.gray600),
+        borderTopColor: COLORS.gray100,
+      };
+  }
 };
 
-export default memo(Spinner);
+const Spinner: FC<SpinnerProps> = ({ size = SPINNER_SIZE.medium, kind = SPINNER_KIND.light, $style }) => {
+  const style = {
+    width: spinnerIconSize[size],
+    height: spinnerIconSize[size],
+    ...getSpinnerStylesByKind(kind),
+    ...$style,
+  } satisfies StyleObject;
+
+  const StyledElement = withStyle(BaseSpinner, style);
+
+  return <StyledElement />;
+};
+
+export default Spinner;