@peerbots/core 0.2.6 → 1.0.0

package/src/ui/Anchor.stories.tsx

@@ -1,25 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Anchor } from "./Anchor";
-
-const meta = {
-  title: "UI/Anchor",
-  component: Anchor,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  argTypes: {
-    href: { control: "text" },
-    children: { control: "text" },
-  },
-} satisfies Meta<typeof Anchor>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    href: "https://peerbots.org",
-    children: "Visit Peerbots",
-  },
-};

package/src/ui/Anchor.tsx

@@ -1,32 +0,0 @@
-import * as React from "react";
-import { Link } from "react-router-dom";
-import { cn } from "./utils";
-
-export type AnchorProps = React.AnchorHTMLAttributes<HTMLAnchorElement>;
-
-const Anchor = React.forwardRef<HTMLAnchorElement, AnchorProps>(
-  ({ className, href, target, ...props }, ref) => {
-    const isInternal = href && !href.startsWith("http") && !target;
-    const commonClass = cn(
-      "pb:font-medium pb:text-teal-700 pb:underline pb:underline-offset-4 pb:hover:text-teal-900 pb:cursor-pointer",
-      className,
-    );
-
-    if (isInternal) {
-      return <Link to={href} ref={ref} className={commonClass} {...props} />;
-    } else {
-      return (
-        <a
-          href={href}
-          target={target}
-          ref={ref}
-          className={commonClass}
-          {...props}
-        />
-      );
-    }
-  },
-);
-Anchor.displayName = "Anchor";
-
-export { Anchor };

package/src/ui/Button.stories.tsx

@@ -1,108 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Button } from "./Button";
-import { Icon } from "./Icon";
-import { Heading } from "./Typography";
-
-const meta: Meta<typeof Button> = {
-  title: "UI/Button",
-  component: Button,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  argTypes: {
-    variant: {
-      control: "select",
-      options: ["primary", "secondary", "danger", "ghost", "ghostly-danger"],
-    },
-    size: {
-      control: "select",
-      options: ["sm", "md", "lg"],
-    },
-    disabled: { control: "boolean" },
-    isLoading: { control: "boolean" },
-    onClick: { action: "clicked" },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Button>;
-
-export const Default: Story = {
-  args: {
-    children: "Button",
-    variant: "primary",
-  },
-};
-
-export const Variations: Story = {
-  render: () => (
-    <div className="pb:flex pb:flex-col pb:gap-8">
-      <div className="pb:space-y-4">
-        <Heading level={4} className="pb:text-sm pb:font-medium pb:text-black pb:italic">
-          Variants
-        </Heading>
-        <div className="pb:flex pb:flex-wrap pb:gap-4 pb:items-center">
-          <Button variant="primary">Primary</Button>
-          <Button variant="secondary">Secondary</Button>
-          <Button variant="danger">Danger</Button>
-          <Button variant="ghost">Ghost</Button>
-          <Button variant="ghostly-danger">Ghostly Danger</Button>
-        </div>
-      </div>
-
-      <div className="pb:space-y-4">
-        <Heading level={4} className="pb:text-sm pb:font-medium pb:text-black pb:italic">
-          Sizes
-        </Heading>
-        <div className="pb:flex pb:flex-wrap pb:gap-4 pb:items-end">
-          <Button size="sm">Small</Button>
-          <Button size="md">Medium</Button>
-          <Button size="lg">Large</Button>
-        </div>
-      </div>
-
-      <div className="pb:space-y-4">
-        <Heading level={4} className="pb:text-sm pb:font-medium pb:text-black pb:italic">
-          States
-        </Heading>
-        <div className="pb:flex pb:flex-wrap pb:gap-4 pb:items-center">
-          <Button isLoading>Loading</Button>
-          <Button disabled>Disabled</Button>
-        </div>
-      </div>
-
-      <div className="pb:space-y-4">
-        <Heading level={4} className="pb:text-sm pb:font-medium pb:text-black pb:italic">
-          With Icons
-        </Heading>
-        <div className="pb:flex pb:flex-wrap pb:gap-4 pb:items-center">
-          <Button leftIcon={<Icon name="cloudArrowUp" />}>Upload</Button>
-          <Button variant="secondary" rightIcon={<Icon name="chevronRight" />}>
-            Next
-          </Button>
-        </div>
-      </div>
-
-      <div className="pb:space-y-4">
-        <Heading level={4} className="pb:text-sm pb:font-medium pb:text-black pb:italic">
-          Icon Only
-        </Heading>
-        <div className="pb:flex pb:flex-wrap pb:gap-4 pb:items-center">
-          <Button size="sm">
-            <Icon name="plus" />
-          </Button>
-          <Button size="md">
-            <Icon name="plus" />
-          </Button>
-          <Button size="lg">
-            <Icon name="plus" />
-          </Button>
-          <Button variant="ghost" size="sm" aria-label="Close">
-            <Icon name="close" />
-          </Button>
-        </div>
-      </div>
-    </div>
-  ),
-};

package/src/ui/Button.tsx

@@ -1,121 +0,0 @@
-import { Button as BaseButton } from "@base-ui/react";
-import React from "react";
-import { cn } from "./utils";
-
-export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: "primary" | "secondary" | "danger" | "ghost" | "ghostly-danger";
-  size?: "sm" | "md" | "lg";
-  isLoading?: boolean;
-  leftIcon?: React.ReactNode;
-  rightIcon?: React.ReactNode;
-  render?: BaseButton.Props["render"];
-  nativeButton?: boolean;
-  isIconOnly?: boolean;
-}
-
-export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  (
-    {
-      className,
-      variant = "primary",
-      size = "md",
-      isLoading = false,
-      leftIcon,
-      rightIcon,
-      children,
-      disabled,
-      render,
-      nativeButton,
-      isIconOnly,
-      ...props
-    },
-    ref,
-  ) => {
-    const isActuallyIconOnly =
-      isIconOnly || (!children && (!!leftIcon || !!rightIcon));
-
-    const variants = {
-      primary:
-        "pb:bg-primary pb:hover:bg-dark-primary pb:text-gray-900 pb:shadow-sm pb:border pb:border-transparent pb:font-bold pb:disabled:bg-gray-400 pb:disabled:hover:bg-gray-300",
-      secondary:
-        "pb:bg-gray-100 pb:hover:bg-gray-200 pb:text-gray-800 pb:border pb:border-gray-200 pb:border pb:font-normal pb:disabled:bg-gray-400 pb:disabled:hover:bg-gray-300",
-      danger:
-        "pb:bg-danger pb:hover:opacity-80 pb:text-gray-900 pb:shadow-sm pb:border pb:border-transparent pb:font-bold pb:disabled:bg-gray-400 pb:disabled:hover:bg-gray-300",
-      ghost:
-        "pb:bg-transparent pb:hover:bg-gray-100 pb:text-gray-700 pb:hover:text-gray-900 pb:font-medium",
-      "ghostly-danger":
-        "pb:bg-transparent pb:hover:bg-danger/10 pb:text-red-700 pb:border pb:border-red-700 pb:font-medium pb:disabled:border-gray-400 pb:disabled:text-gray-400",
-    };
-
-    const sizes = {
-      sm: isActuallyIconOnly ? "pb:p-1 pb:text-xs" : "pb:px-2 pb:py-1 pb:text-xs",
-      md: isActuallyIconOnly ? "pb:p-2 pb:text-sm" : "pb:px-4 pb:py-2 pb:text-sm",
-      lg: isActuallyIconOnly ? "pb:p-3 pb:text-base" : "pb:px-6 pb:py-3 pb:text-base",
-    };
-
-    return (
-      <BaseButton
-        ref={ref}
-        render={render}
-        nativeButton={nativeButton}
-        className={cn(
-          "pb:inline-flex pb:items-center pb:justify-center pb:rounded-md pb:transition-colors pb:focus:outline-none pb:focus:ring-2 pb:focus:ring-primary pb:focus:ring-offset-2 pb:disabled:cursor-not-allowed pb:cursor-pointer",
-          variants[variant],
-          sizes[size],
-          className,
-        )}
-        disabled={disabled || isLoading}
-        {...props}
-      >
-        {isLoading && (
-          <svg
-            className={cn(
-              "pb:animate-spin pb:h-4 pb:w-4",
-              !isActuallyIconOnly && "pb:mr-2 pb:-ml-1",
-            )}
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-          >
-            <circle
-              className="pb:opacity-25"
-              cx="12"
-              cy="12"
-              r="10"
-              stroke="currentColor"
-              strokeWidth="4"
-            ></circle>
-            <path
-              className="pb:opacity-75"
-              fill="currentColor"
-              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-            ></path>
-          </svg>
-        )}
-        {!isLoading && leftIcon && (
-          <span
-            className={cn(
-              "pb:inline-flex pb:items-center pb:justify-center",
-              !isActuallyIconOnly && "pb:mr-2 pb:-ml-1",
-            )}
-          >
-            {leftIcon}
-          </span>
-        )}
-        {children}
-        {!isLoading && rightIcon && (
-          <span
-            className={cn(
-              "pb:inline-flex pb:items-center pb:justify-center",
-              !isActuallyIconOnly && "pb:ml-2 pb:-mr-1",
-            )}
-          >
-            {rightIcon}
-          </span>
-        )}
-      </BaseButton>
-    );
-  },
-);
-
-Button.displayName = "Button";

package/src/ui/Collapsible.stories.tsx

@@ -1,91 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Collapsible } from "./Collapsible";
-import { Heading } from "./Typography";
-import React from "react";
-
-const meta: Meta<typeof Collapsible> = {
-  title: "UI/Collapsible",
-  component: Collapsible,
-  tags: ["autodocs"],
-};
-
-export default meta;
-type Story = StoryObj<typeof Collapsible>;
-
-export const Default: Story = {
-  args: {
-    title: "Click to expand",
-    children: (
-      <div className="pb:p-4 pb:bg-gray-50 pb:rounded-md">
-        This is the collapsible content. It can contain any elements.
-      </div>
-    ),
-  },
-};
-
-export const Variations: Story = {
-  render: () => (
-    <div className="pb:flex pb:flex-col pb:gap-8 pb:p-4">
-      <div className="pb:space-y-4">
-        <Heading level={4} className="pb:text-sm pb:font-medium pb:text-black pb:uppercase">
-          States & Styling
-        </Heading>
-        <div className="pb:space-y-4">
-          <Collapsible title="Initially Open" defaultOpen={true}>
-            <div className="pb:p-4 pb:bg-gray-50 pb:rounded-md">
-              This content is visible by default.
-            </div>
-          </Collapsible>
-          <Collapsible
-            title={<span className="pb:font-bold pb:text-primary">Styled Title</span>}
-            className="pb:border pb:border-gray-200 pb:rounded-lg pb:overflow-hidden"
-          >
-            <div className="pb:p-4">Custom styled wrapper and title.</div>
-          </Collapsible>
-        </div>
-      </div>
-
-      <div className="pb:space-y-4">
-        <Heading level={4} className="pb:text-sm pb:font-medium pb:text-black pb:uppercase">
-          Variants
-        </Heading>
-        <div className="pb:space-y-4">
-          <Collapsible title="Secondary (Default)" variant="secondary">
-            <div className="pb:p-4 pb:bg-gray-50 pb:rounded-md">
-              Secondary variant content.
-            </div>
-          </Collapsible>
-          <Collapsible title="Ghost" variant="ghost">
-            <div className="pb:p-4 pb:bg-gray-50 pb:rounded-md">
-              Ghost variant content.
-            </div>
-          </Collapsible>
-          <Collapsible title="Primary" variant="primary">
-            <div className="pb:p-4 pb:bg-gray-50 pb:rounded-md">
-              Primary variant content.
-            </div>
-          </Collapsible>
-        </div>
-      </div>
-
-      <div className="pb:space-y-4">
-        <Heading level={4} className="pb:text-sm pb:font-medium pb:text-black pb:uppercase">
-          Sizes
-        </Heading>
-        <div className="pb:space-y-4">
-          <Collapsible title="Small" size="sm">
-            <div className="pb:p-4 pb:bg-gray-50 pb:rounded-md">Small size content.</div>
-          </Collapsible>
-          <Collapsible title="Medium (Default)" size="md">
-            <div className="pb:p-4 pb:bg-gray-50 pb:rounded-md">
-              Medium size content.
-            </div>
-          </Collapsible>
-          <Collapsible title="Large" size="lg">
-            <div className="pb:p-4 pb:bg-gray-50 pb:rounded-md">Large size content.</div>
-          </Collapsible>
-        </div>
-      </div>
-    </div>
-  ),
-};

package/src/ui/Collapsible.tsx

@@ -1,52 +0,0 @@
-import React, { useState } from "react";
-import { cn } from "./utils";
-import { Button, ButtonProps } from "./Button";
-import { Icon } from "./Icon";
-
-export interface CollapsibleProps {
-  title: React.ReactNode;
-  children: React.ReactNode;
-  /** The variant of the trigger button */
-  variant?: ButtonProps["variant"];
-  /** The size of the trigger button */
-  size?: ButtonProps["size"];
-  defaultOpen?: boolean;
-  className?: string;
-}
-
-export function Collapsible({
-  title,
-  children,
-  variant = "secondary",
-  size = "md",
-  defaultOpen = false,
-  className,
-}: CollapsibleProps) {
-  const [isOpen, setIsOpen] = useState(defaultOpen);
-
-  return (
-    <div className={cn("w-full", className)}>
-      <Button
-        variant={variant}
-        size={size}
-        className="pb:w-full pb:justify-between pb:font-medium"
-        onClick={() => setIsOpen(!isOpen)}
-        aria-expanded={isOpen}
-        rightIcon={
-          <Icon className="pb:h-5 pb:w-5 pb:text-gray-600" strokeWidth="2.5">
-            {isOpen ? (
-              <path d="M4.5 15.75l7.5-7.5 7.5 7.5" />
-            ) : (
-              <path d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
-            )}
-          </Icon>
-        }
-      >
-        <span>{title}</span>
-      </Button>
-      {isOpen && (
-        <div className="pb:px-4 pb:pt-4 pb:pb-2 pb:text-sm pb:text-gray-500">{children}</div>
-      )}
-    </div>
-  );
-}

package/src/ui/Colors.stories.tsx

@@ -1,67 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-
-const meta: Meta = {
-  title: "UI/Colors",
-  tags: ["autodocs"],
-};
-
-export default meta;
-
-export const Variations: StoryObj = {
-  render: () => (
-    <div className="pb:flex pb:flex-col pb:gap-8 pb:p-4 pb:bg-white">
-      <div>
-        <h3 className="pb:text-sm pb:font-medium pb:text-black pb:uppercase pb:tracking-wider pb:border-b pb:pb-1 pb:mb-4">
-          Theme Colors
-        </h3>
-        <div className="pb:grid pb:grid-cols-2 pb:md:grid-cols-3 pb:lg:grid-cols-5 pb:gap-4">
-          <ColorItem name="Primary" variable="var(--pb-color-primary)" />
-          <ColorItem name="Secondary" variable="var(--pb-color-secondary)" />
-          <ColorItem name="Accent" variable="var(--pb-color-accent)" />
-          <ColorItem name="Danger" variable="var(--pb-color-danger)" />
-          <ColorItem name="Light BG" variable="var(--pb-color-light-bg)" />
-        </div>
-      </div>
-
-      <div>
-        <h3 className="pb:text-sm pb:font-medium pb:text-black pb:uppercase pb:tracking-wider pb:border-b pb:pb-1 pb:mb-4">
-          Extended Accent Colors
-        </h3>
-        <div className="pb:grid pb:grid-cols-2 pb:md:grid-cols-3 pb:lg:grid-cols-4 pb:gap-4">
-          <ColorItem name="Accent HC" variable="var(--pb-color-accent-hc)" />
-          <ColorItem name="Accent Two" variable="var(--pb-color-accent-two)" />
-          <ColorItem
-            name="Accent Two HC"
-            variable="var(--pb-color-accent-two-hc)"
-          />
-          <ColorItem name="Accent Three" variable="var(--pb-color-accent-three)" />
-        </div>
-      </div>
-
-      <div>
-        <h3 className="pb:text-sm pb:font-medium pb:text-black pb:uppercase pb:tracking-wider pb:border-b pb:pb-1 pb:mb-4">
-          UI Elements
-        </h3>
-        <div className="pb:grid pb:grid-cols-2 pb:md:grid-cols-3 pb:lg:grid-cols-4 pb:gap-4">
-          <ColorItem name="Sidebar BG" variable="var(--pb-sidebar-bg)" />
-          <ColorItem name="Dark Primary" variable="var(--pb-color-dark-primary)" />
-        </div>
-      </div>
-    </div>
-  ),
-};
-
-function ColorItem({ name, variable }: { name: string; variable: string }) {
-  return (
-    <div className="pb:flex pb:flex-col pb:gap-2">
-      <div
-        className="pb:h-20 pb:w-full pb:rounded-md pb:shadow-inner pb:border pb:border-gray-100"
-        style={{ backgroundColor: variable }}
-      />
-      <div className="pb:flex pb:flex-col">
-        <span className="pb:text-sm pb:font-bold pb:text-gray-900">{name}</span>
-        <code className="pb:text-xs pb:text-gray-500">{variable}</code>
-      </div>
-    </div>
-  );
-}

package/src/ui/Popover.tsx

@@ -1,42 +0,0 @@
-import React from "react";
-import { Popover as BasePopover } from "@base-ui/react";
-import { cn } from "./utils";
-
-export interface PopoverProps {
-  trigger: React.ReactNode;
-  children: React.ReactNode;
-  side?: "top" | "right" | "bottom" | "left";
-  align?: "start" | "center" | "end";
-  className?: string;
-  open?: boolean;
-  onOpenChange?: (open: boolean) => void;
-}
-
-export function Popover({
-  trigger,
-  children,
-  side = "bottom",
-  align = "center",
-  className,
-  open,
-  onOpenChange,
-}: PopoverProps) {
-  return (
-    <BasePopover.Root open={open} onOpenChange={onOpenChange}>
-      <BasePopover.Trigger>{trigger}</BasePopover.Trigger>
-      <BasePopover.Portal>
-        <BasePopover.Positioner side={side} align={align} sideOffset={5}>
-          <BasePopover.Popup
-            className={cn(
-              "pb:z-50 pb:w-72 pb:rounded-md pb:border pb:bg-white pb:p-4 pb:shadow-md pb:outline-none pb:data-[state=open]:animate-in pb:data-[state=closed]:animate-out pb:data-[state=closed]:fade-out-0 pb:data-[state=open]:fade-in-0 pb:data-[state=closed]:zoom-out-95 pb:data-[state=open]:zoom-in-95",
-              className,
-            )}
-          >
-            {children}
-            <BasePopover.Arrow className="pb:fill-white pb:stroke-gray-200" />
-          </BasePopover.Popup>
-        </BasePopover.Positioner>
-      </BasePopover.Portal>
-    </BasePopover.Root>
-  );
-}

package/src/ui/Skeleton.stories.tsx

@@ -1,43 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { Skeleton } from "./Skeleton";
-
-const meta: Meta<typeof Skeleton> = {
-  title: "UI/Skeleton",
-  component: Skeleton,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "centered",
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Skeleton>;
-
-export const Default: Story = {
-  args: {
-    className: "w-[250px] h-4",
-  },
-};
-
-export const Variations: Story = {
-  render: () => (
-    <div className="pb:flex pb:flex-col pb:space-y-3">
-      {/* Circle Skeleton */}
-      <Skeleton className="pb:h-12 pb:w-12 pb:rounded-full" />
-
-      {/* Rectangular Skeletons */}
-      <div className="pb:space-y-2">
-        <Skeleton className="pb:h-4 pb:w-[250px]" />
-        <Skeleton className="pb:h-4 pb:w-[200px]" />
-      </div>
-
-      <div className="pb:flex pb:items-center pb:space-x-4 pb:mt-6">
-        <Skeleton className="pb:h-12 pb:w-12 pb:rounded-full" />
-        <div className="pb:space-y-2">
-          <Skeleton className="pb:h-4 pb:w-[250px]" />
-          <Skeleton className="pb:h-4 pb:w-[200px]" />
-        </div>
-      </div>
-    </div>
-  ),
-};

package/src/ui/SliderWithNumberField.stories.tsx

@@ -1,101 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import SliderWithNumberField from "./SliderWithNumberField";
-import React, { useState } from "react";
-import { Heading, Text } from "./Typography";
-
-const meta: Meta<typeof SliderWithNumberField> = {
-  title: "UI/SliderWithNumberField",
-  component: SliderWithNumberField,
-  argTypes: {
-    onChange: { action: "changed" },
-    min: { control: { type: "number" } },
-    max: { control: { type: "number" } },
-    step: { control: { type: "number" } },
-    disabled: { control: "boolean" },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof SliderWithNumberField>;
-
-const InteractiveSliderWithNumberField = (
-  props: React.ComponentProps<typeof SliderWithNumberField>,
-) => {
-  const [value, setValue] = useState(props.value || props.defaultValue || 0);
-  return (
-    <SliderWithNumberField
-      {...props}
-      value={value}
-      onChange={(v) => {
-        setValue(v);
-        props.onChange?.(v as number, new Event("change")); // Match signature
-      }}
-    />
-  );
-};
-
-export const Default: Story = {
-  args: {
-    min: 0,
-    max: 100,
-    defaultValue: 50,
-  },
-  render: (args) => (
-    <div className="pb:w-80 pb:p-4">
-      <InteractiveSliderWithNumberField
-        {...(args as React.ComponentProps<typeof SliderWithNumberField>)}
-      />
-    </div>
-  ),
-};
-
-export const Variations: Story = {
-  render: () => (
-    <div className="pb:flex pb:flex-col pb:gap-12 pb:p-4">
-      <div className="pb:space-y-4">
-        <Heading level={4} className="pb:text-sm pb:font-medium pb:text-black pb:uppercase">
-          Responsive Layouts
-        </Heading>
-        <div className="pb:space-y-8 pb:max-w-lg">
-          <div className="pb:space-y-2">
-            <Text variant="small" className="pb:font-bold pb:underline">
-              Flexible (Full width of container)
-            </Text>
-            <InteractiveSliderWithNumberField defaultValue={50} />
-          </div>
-
-          <div className="pb:space-y-2 pb:w-64 pb:border-l pb:border-r pb:border-dotted pb:px-2 pb:bg-gray-50 pb:py-4">
-            <Text variant="small" className="pb:font-bold pb:underline">
-              Narrow Container (w-64)
-            </Text>
-            <InteractiveSliderWithNumberField defaultValue={50} />
-          </div>
-
-          <div className="pb:space-y-2 pb:w-48 pb:border-l pb:border-r pb:border-dotted pb:px-2 pb:bg-gray-50 pb:py-4">
-            <Text variant="small" className="pb:font-bold pb:underline">
-              Very Narrow (w-48) - Wraps
-            </Text>
-            <InteractiveSliderWithNumberField defaultValue={50} />
-          </div>
-        </div>
-      </div>
-
-      <div className="pb:space-y-4">
-        <Heading level={4} className="pb:text-sm pb:font-medium pb:text-black pb:uppercase">
-          Configuration
-        </Heading>
-        <div className="pb:space-y-4 pb:max-w-sm">
-          <div className="pb:space-y-1">
-            <Text variant="small">Custom Step (0.5)</Text>
-            <InteractiveSliderWithNumberField
-              step={0.5}
-              defaultValue={2.5}
-              min={0}
-              max={10}
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  ),
-};