@shipfox/react-ui 0.15.0 → 0.16.0

package/src/components/form/form.tsx

@@ -1,154 +0,0 @@
-import {Slot} from '@radix-ui/react-slot';
-import {Label} from 'components/label';
-import type {ComponentProps} from 'react';
-import * as React from 'react';
-import type {ControllerProps, FieldPath, FieldValues} from 'react-hook-form';
-import {Controller, FormProvider, useFormContext} from 'react-hook-form';
-import {cn} from 'utils/cn';
-
-const Form = FormProvider;
-
-type FormFieldContextValue<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> = {
-  name: TName;
-};
-
-type FormItemContextValue = {
-  id: string;
-};
-
-const FormFieldContext = React.createContext<FormFieldContextValue | null>(null);
-
-const FormItemContext = React.createContext<FormItemContextValue | null>(null);
-
-const FormField = <
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
->({
-  ...props
-}: ControllerProps<TFieldValues, TName>) => {
-  return (
-    <FormFieldContext.Provider value={{name: props.name}}>
-      <Controller {...props} />
-    </FormFieldContext.Provider>
-  );
-};
-
-const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext);
-  const itemContext = React.useContext(FormItemContext);
-  const {getFieldState, formState} = useFormContext();
-
-  if (!fieldContext) {
-    throw new Error('useFormField should be used within <FormField>');
-  }
-
-  if (!itemContext) {
-    throw new Error('useFormField should be used within <FormItem>');
-  }
-
-  const fieldState = getFieldState(fieldContext.name, formState);
-  const {id} = itemContext;
-
-  return {
-    id,
-    name: fieldContext.name,
-    formItemId: `${id}-form-item`,
-    formDescriptionId: `${id}-form-item-description`,
-    formMessageId: `${id}-form-item-message`,
-    ...fieldState,
-  };
-};
-
-const FormItem = React.forwardRef<HTMLDivElement, ComponentProps<'div'>>(
-  ({className, ...props}, ref) => {
-    const id = React.useId();
-
-    return (
-      <FormItemContext.Provider value={{id}}>
-        <div ref={ref} className={className} {...props} />
-      </FormItemContext.Provider>
-    );
-  },
-);
-FormItem.displayName = 'FormItem';
-
-const FormLabel = React.forwardRef<React.ElementRef<typeof Label>, ComponentProps<typeof Label>>(
-  ({className, ...props}, ref) => {
-    const {error, formItemId} = useFormField();
-
-    return (
-      <Label
-        ref={ref}
-        className={cn(error && 'text-foreground-error', className)}
-        htmlFor={formItemId}
-        {...props}
-      />
-    );
-  },
-);
-FormLabel.displayName = 'FormLabel';
-
-const FormControl = React.forwardRef<React.ElementRef<typeof Slot>, ComponentProps<typeof Slot>>(
-  ({...props}, ref) => {
-    const {error, formItemId, formDescriptionId, formMessageId} = useFormField();
-
-    return (
-      <Slot
-        ref={ref}
-        id={formItemId}
-        aria-describedby={error ? formMessageId : formDescriptionId}
-        aria-invalid={!!error}
-        {...props}
-      />
-    );
-  },
-);
-FormControl.displayName = 'FormControl';
-
-const FormDescription = React.forwardRef<HTMLParagraphElement, ComponentProps<'p'>>(
-  ({className, ...props}, ref) => {
-    const {error, formDescriptionId} = useFormField();
-
-    if (error) {
-      return null;
-    }
-
-    return (
-      <p
-        ref={ref}
-        id={formDescriptionId}
-        className={cn('text-sm text-foreground-neutral-muted', className)}
-        {...props}
-      />
-    );
-  },
-);
-FormDescription.displayName = 'FormDescription';
-
-const FormMessage = React.forwardRef<HTMLParagraphElement, ComponentProps<'p'>>(
-  ({className, children, ...props}, ref) => {
-    const {error, formMessageId} = useFormField();
-    const body = error ? String(error?.message ?? '') : children;
-
-    if (!body) {
-      return null;
-    }
-
-    return (
-      <p
-        ref={ref}
-        id={formMessageId}
-        className={cn('text-sm font-medium text-foreground-highlight-error', className)}
-        {...props}
-      >
-        {body}
-      </p>
-    );
-  },
-);
-FormMessage.displayName = 'FormMessage';
-
-export {Form, FormField, FormItem, FormLabel, FormControl, FormDescription, FormMessage};

package/src/components/form/index.ts

@@ -1 +0,0 @@
-export * from './form';

package/src/components/icon/custom/badge.tsx

@@ -1,17 +0,0 @@
-import type {RemixiconComponentType} from '@remixicon/react';
-import type {ComponentProps} from 'react';
-
-export function BadgeIcon(_props: ComponentProps<RemixiconComponentType>) {
-  return (
-    <svg
-      width="18"
-      height="18"
-      viewBox="0 0 18 18"
-      fill="currentColor"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <title>Badge</title>
-      <path d="M17.533 9.00013C17.533 7.83 16.9271 6.7452 15.9703 6.11266C16.1996 4.9884 15.8604 3.79266 15.0338 2.966C14.2071 2.13933 13.0103 1.80013 11.8871 2.02946C11.2535 1.07266 10.1698 0.466797 8.99964 0.466797C7.82951 0.466797 6.74471 1.07266 6.11218 2.02946C4.98471 1.79693 3.79218 2.13933 2.96551 2.966C2.13778 3.79373 1.79964 4.9884 2.02898 6.11266C1.07218 6.7452 0.466309 7.82893 0.466309 9.00013C0.466309 10.1713 1.07218 11.254 2.02898 11.8876C1.79964 13.0119 2.13778 14.2065 2.96551 15.0343C3.79218 15.862 4.98684 16.1991 6.11218 15.9708C6.74471 16.9276 7.82844 17.5335 8.99964 17.5335C10.1708 17.5335 11.2535 16.9276 11.8871 15.9708C13.0082 16.2001 14.206 15.8609 15.0338 15.0343C15.8615 14.2076 16.1996 13.0119 15.9703 11.8876C16.9271 11.2551 17.533 10.1703 17.533 9.00013ZM13.0988 6.55533L8.56551 12.422C8.42044 12.6097 8.19964 12.7239 7.96284 12.7324C7.95218 12.7324 7.94258 12.7324 7.93298 12.7324C7.70684 12.7324 7.49031 12.6364 7.33778 12.4679L4.93778 9.8012C4.64231 9.47266 4.66898 8.96706 4.99751 8.67053C5.32711 8.37613 5.83164 8.40173 6.12818 8.73026L7.88604 10.6844L11.8338 5.57613C12.1036 5.22626 12.6071 5.16226 12.9559 5.43213C13.3058 5.702 13.3698 6.2044 13.0999 6.55426L13.0988 6.55533Z" />
-    </svg>
-  );
-}

package/src/components/icon/custom/check-circle-solid.tsx

@@ -1,24 +0,0 @@
-import type {RemixiconComponentType} from '@remixicon/react';
-import type {ComponentProps} from 'react';
-
-export function CheckCircleSolidIcon(_props: ComponentProps<RemixiconComponentType>) {
-  return (
-    <svg
-      width="19"
-      height="19"
-      viewBox="0 0 19 19"
-      fill="currentColor"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <title>Check Circle Solid</title>
-      <g clipPath="url(#clip0_6552_160761)">
-        <path d="M9.19984 0.664062C4.49477 0.664062 0.666504 4.49233 0.666504 9.1974C0.666504 13.9025 4.49477 17.7307 9.19984 17.7307C13.9049 17.7307 17.7332 13.9025 17.7332 9.1974C17.7332 4.49233 13.9049 0.664062 9.19984 0.664062ZM13.299 6.7526L8.7657 12.6193C8.62064 12.807 8.39984 12.9211 8.16304 12.9297C8.15237 12.9297 8.14277 12.9297 8.13317 12.9297C7.90704 12.9297 7.6905 12.8337 7.53797 12.6651L5.13797 9.99846C4.8425 9.66993 4.86917 9.16433 5.1977 8.86779C5.5273 8.5734 6.03077 8.599 6.32837 8.92753L8.08624 10.8817L12.034 5.7734C12.3038 5.42353 12.8073 5.35953 13.1561 5.6294C13.506 5.89926 13.57 6.40166 13.3001 6.75153L13.299 6.7526Z" />
-      </g>
-      <defs>
-        <clipPath id="clip0_6552_160761">
-          <rect width="18" height="18" fill="white" transform="translate(0.200195 0.199219)" />
-        </clipPath>
-      </defs>
-    </svg>
-  );
-}

package/src/components/icon/custom/circle-dotted-line.tsx

@@ -1,17 +0,0 @@
-import type {RemixiconComponentType} from '@remixicon/react';
-import type {ComponentProps} from 'react';
-
-export function CircleDottedLineIcon(_props: ComponentProps<RemixiconComponentType>) {
-  return (
-    <svg
-      width="25"
-      height="24"
-      viewBox="0 0 25 24"
-      fill="currentColor"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <title>Circle Dotted Line</title>
-      <path d="M7.17235 18.3086C7.46415 17.8702 8.05551 17.7513 8.49369 18.043C9.2707 18.5608 10.1526 18.9325 11.0991 19.117C11.616 19.2177 11.9539 19.7187 11.8533 20.236C11.7526 20.7531 11.2519 21.0906 10.7352 20.9901C9.53488 20.7561 8.41811 20.2857 7.43693 19.6318C6.99881 19.3397 6.88057 18.7472 7.17235 18.3086ZM16.5055 18.043C16.9438 17.7509 17.5358 17.87 17.8277 18.3086C18.1195 18.7472 18.0006 19.3398 17.5623 19.6318C16.5812 20.2856 15.465 20.7561 14.2648 20.9901C13.7481 21.0907 13.2474 20.7531 13.1467 20.236C13.0461 19.7187 13.384 19.2177 13.9009 19.117C14.8473 18.9325 15.7286 18.5607 16.5055 18.043ZM4.27439 12.6194C4.79159 12.5204 5.29128 12.8604 5.39013 13.3781C5.57468 14.3443 5.95069 15.2417 6.4787 16.0309C6.77163 16.4687 6.65463 17.0617 6.21723 17.3549C5.7797 17.6482 5.18731 17.5304 4.89433 17.0924C4.22698 16.0949 3.75068 14.9592 3.51712 13.7361C3.41829 13.2185 3.75732 12.7184 4.27439 12.6194ZM19.6099 13.3781C19.7087 12.8604 20.2084 12.5204 20.7256 12.6194C21.2426 12.7184 21.5817 13.2185 21.4829 13.7361C21.2493 14.9591 20.773 16.0949 20.1057 17.0924C19.8127 17.5304 19.2203 17.6482 18.7828 17.3549C18.3453 17.0617 18.2283 16.4688 18.5213 16.0309C19.0493 15.2417 19.4253 14.3443 19.6099 13.3781ZM4.89433 6.92474C5.18738 6.4871 5.77981 6.36987 6.21723 6.66304C6.65462 6.95631 6.77164 7.54924 6.4787 7.9871C5.95069 8.77632 5.57467 9.67363 5.39013 10.6399C5.29128 11.1575 4.79159 11.4975 4.27439 11.3986C3.75731 11.2996 3.41829 10.7995 3.51712 10.2819C3.75069 9.05872 4.2269 7.92235 4.89433 6.92474ZM18.7828 6.66304C19.2202 6.36987 19.8126 6.48706 20.1057 6.92474C20.7731 7.92235 21.2493 9.05871 21.4829 10.2819C21.5817 10.7994 21.2426 11.2995 20.7256 11.3986C20.2084 11.4975 19.7087 11.1575 19.6099 10.6399C19.4253 9.67364 19.0493 8.77632 18.5213 7.9871C18.2284 7.54922 18.3453 6.95629 18.7828 6.66304ZM10.7352 3.02556C11.252 2.92503 11.7527 3.26243 11.8533 3.77961C11.9539 4.29692 11.616 4.79792 11.0991 4.89866C10.1526 5.08317 9.27069 5.4541 8.49369 5.97188C8.05553 6.26382 7.46424 6.14542 7.17235 5.70707C6.88059 5.26849 6.99888 4.67594 7.43693 4.38379C8.41811 3.72993 9.53488 3.25952 10.7352 3.02556ZM13.1467 3.77961C13.2474 3.2624 13.748 2.92494 14.2648 3.02556C15.4651 3.25951 16.5811 3.72997 17.5623 4.38379C18.0006 4.67587 18.1195 5.26839 17.8277 5.70707C17.5358 6.14551 16.9437 6.2639 16.5055 5.97188C15.7287 5.45425 14.8472 5.08315 13.9009 4.89866C13.384 4.79792 13.0461 4.29692 13.1467 3.77961Z" />
-    </svg>
-  );
-}

package/src/components/icon/custom/component-fill.tsx

@@ -1,17 +0,0 @@
-import type {RemixiconComponentType} from '@remixicon/react';
-import type {ComponentProps} from 'react';
-
-export function ComponentFillIcon(_props: ComponentProps<RemixiconComponentType>) {
-  return (
-    <svg
-      width="25"
-      height="24"
-      viewBox="0 0 25 24"
-      fill="currentColor"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <title>Component Fill</title>
-      <path d="M16.6277 17.1584L13.0159 20.7702C12.8791 20.9071 12.6989 20.9894 12.5151 20.999C12.3313 21.0087 12.1588 20.945 12.0357 20.8218L8.32124 17.1074L12.4489 12.9797L16.6277 17.1584ZM11.5203 12.0511L7.39263 16.1788L3.67817 12.4643C3.55503 12.3412 3.49129 12.1687 3.50096 11.9849C3.51064 11.8011 3.59294 11.6209 3.72976 11.4841L7.34155 7.87231L11.5203 12.0511ZM16.6788 6.89263L12.5521 11.0193L8.37334 6.84052L11.9841 3.22976C12.1209 3.09294 12.3011 3.01064 12.4849 3.00096C12.6687 2.99129 12.8412 3.05503 12.9643 3.17817L16.6788 6.89263ZM21.3218 11.5357C21.445 11.6588 21.5087 11.8313 21.499 12.0151C21.4894 12.1989 21.4071 12.3791 21.2702 12.5159L17.6595 16.1267L13.4807 11.9479L17.6074 7.82124L21.3218 11.5357Z" />
-    </svg>
-  );
-}

package/src/components/icon/custom/component-line.tsx

@@ -1,17 +0,0 @@
-import type {RemixiconComponentType} from '@remixicon/react';
-import type {ComponentProps} from 'react';
-
-export function ComponentLineIcon(_props: ComponentProps<RemixiconComponentType>) {
-  return (
-    <svg
-      width="25"
-      height="24"
-      viewBox="0 0 25 24"
-      fill="currentColor"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <title>Component Line</title>
-      <path d="M20.7217 12.1353C20.8449 12.2584 20.9086 12.4309 20.8989 12.6147C20.8893 12.7985 20.807 12.9787 20.6701 13.1155L12.4158 21.3698C12.279 21.5067 12.0988 21.589 11.915 21.5986C11.7312 21.6083 11.5587 21.5446 11.4356 21.4214L3.07807 13.0639C2.95493 12.9408 2.89119 12.7683 2.90086 12.5845C2.91054 12.4007 2.99284 12.2205 3.12966 12.0837L11.384 3.82937C11.5208 3.69255 11.701 3.61024 11.8848 3.60057C12.0686 3.59089 12.2411 3.65464 12.3642 3.77778L20.7217 12.1353ZM10.9197 12.6512L7.66955 9.40105L4.57417 12.4964L7.82432 15.7466L10.9197 12.6512ZM15.0985 16.83L11.8483 13.5798L8.75293 16.6752L12.0031 19.9253L15.0985 16.83ZM15.0469 8.52403L11.7967 5.27388L8.70134 8.36926L11.9515 11.6194L15.0469 8.52403ZM19.2256 12.7028L15.9755 9.45264L12.8801 12.548L16.1303 15.7982L19.2256 12.7028Z" />
-    </svg>
-  );
-}

package/src/components/icon/custom/ellipse-mini-solid.tsx

@@ -1,17 +0,0 @@
-import type {RemixiconComponentType} from '@remixicon/react';
-import type {ComponentProps} from 'react';
-
-export function EllipseMiniSolidIcon(_props: ComponentProps<RemixiconComponentType>) {
-  return (
-    <svg
-      width="25"
-      height="24"
-      viewBox="0 0 25 24"
-      fill="currentColor"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <title>Ellipse Mini Solid</title>
-      <circle cx="12.2" cy="12.2" r="3.2" />
-    </svg>
-  );
-}

package/src/components/icon/custom/index.ts

@@ -1,14 +0,0 @@
-export * from './badge';
-export * from './check-circle-solid';
-export * from './circle-dotted-line';
-export * from './component-fill';
-export * from './component-line';
-export * from './ellipse-mini-solid';
-export * from './info-tooltip-fill';
-export * from './resize';
-export * from './shipfox-logo';
-export * from './slack-logo';
-export * from './spinner';
-export * from './stripe-logo';
-export * from './thunder';
-export * from './x-circle-solid';

package/src/components/icon/custom/info-tooltip-fill.tsx

@@ -1,21 +0,0 @@
-import type {RemixiconComponentType} from '@remixicon/react';
-import type {ComponentProps} from 'react';
-
-export function InfoTooltipFillIcon(_props: ComponentProps<RemixiconComponentType>) {
-  return (
-    <svg
-      width="25"
-      height="24"
-      viewBox="0 0 25 24"
-      fill="currentColor"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <title>Info Tooltip Fill</title>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M12.5 21C17.4706 21 21.5 16.9706 21.5 12C21.5 7.02944 17.4706 3 12.5 3C7.52944 3 3.5 7.02944 3.5 12C3.5 16.9706 7.52944 21 12.5 21ZM14.1068 16.6204L14.2505 16.0329C14.1761 16.0678 14.0562 16.1077 13.8917 16.1532C13.7268 16.1986 13.5784 16.2217 13.448 16.2217C13.1701 16.2217 12.9745 16.1762 12.8609 16.0847C12.7482 15.9931 12.692 15.8209 12.692 15.5687C12.692 15.4688 12.7089 15.3198 12.7444 15.1248C12.7788 14.9286 12.8183 14.7542 12.8623 14.6016L13.3988 12.7021C13.4514 12.5278 13.4874 12.3362 13.5068 12.127C13.5266 11.9183 13.5358 11.7723 13.5358 11.6894C13.5358 11.2888 13.3954 10.9638 13.1145 10.7131C12.8337 10.4625 12.4337 10.3372 11.9153 10.3372C11.6269 10.3372 11.3219 10.3885 10.9992 10.4909C10.6764 10.593 10.339 10.7161 9.98606 10.8598L9.84198 11.4478C9.94716 11.4089 10.0724 11.367 10.219 11.3237C10.3649 11.2805 10.5081 11.2582 10.6474 11.2582C10.9318 11.2582 11.1233 11.3067 11.2237 11.4022C11.3241 11.498 11.3745 11.6684 11.3745 11.9119C11.3745 12.0466 11.3586 12.1962 11.3255 12.3588C11.2929 12.5225 11.2521 12.6955 11.2042 12.8781L10.6654 14.7852C10.6174 14.9856 10.5824 15.1649 10.5604 15.3241C10.5385 15.4832 10.528 15.6392 10.528 15.791C10.528 16.1829 10.6728 16.506 10.9624 16.761C11.2519 17.015 11.6579 17.1429 12.1799 17.1429C12.5198 17.1429 12.8181 17.0984 13.0748 17.0091C13.3313 16.92 13.6757 16.7905 14.1068 16.6204ZM14.0112 8.90429C14.2619 8.67189 14.3866 8.38926 14.3866 8.05831C14.3866 7.72811 14.2621 7.44491 14.0112 7.20957C13.7612 6.97486 13.4599 6.85714 13.1075 6.85714C12.7541 6.85714 12.4515 6.97459 12.1991 7.20957C11.9467 7.44491 11.8203 7.72801 11.8203 8.05831C11.8203 8.38926 11.9467 8.6718 12.1991 8.90429C12.452 9.13752 12.754 9.25423 13.1075 9.25423C13.46 9.25423 13.7612 9.13752 14.0112 8.90429Z"
-      />
-    </svg>
-  );
-}

package/src/components/icon/custom/resize.tsx

@@ -1,17 +0,0 @@
-import type {RemixiconComponentType} from '@remixicon/react';
-import type {ComponentProps} from 'react';
-
-export function ResizeIcon(_props: ComponentProps<RemixiconComponentType>) {
-  return (
-    <svg
-      width="25"
-      height="24"
-      viewBox="0 0 25 24"
-      fill="currentColor"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <title>Resize</title>
-      <path d="M20.7425 13.4539C21.2111 12.9854 21.9711 12.9855 22.4398 13.4539C22.9084 13.9226 22.9084 14.6826 22.4398 15.1512L15.6517 21.9393C15.1831 22.4079 14.4231 22.4079 13.9544 21.9393C13.486 21.4706 13.4859 20.7106 13.9544 20.242L20.7425 13.4539ZM19.3363 5.25961C19.8048 4.79102 20.5649 4.79112 21.0335 5.25961C21.5022 5.72823 21.5022 6.48824 21.0335 6.95687L7.45736 20.533C6.98873 21.0017 6.22872 21.0017 5.76009 20.533C5.2916 20.0644 5.29151 19.3044 5.76009 18.8358L19.3363 5.25961Z" />
-    </svg>
-  );
-}

package/src/components/icon/custom/shipfox-logo.tsx

@@ -1,20 +0,0 @@
-import type {RemixiconComponentType} from '@remixicon/react';
-import type {ComponentProps} from 'react';
-
-type ShipfoxLogoProps = ComponentProps<RemixiconComponentType> & {
-  color?: string;
-};
-
-export function ShipfoxLogo({color = '#FF4B00', ...props}: ShipfoxLogoProps) {
-  return (
-    <svg viewBox="0 0 88 88" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <title>Shipfox Logo</title>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M17.9759 32.3751L39.0987 74.1549C41.1536 78.2196 46.847 78.2196 48.902 74.1549L70.0247 32.3751L81.2835 38.122C84.6511 39.8409 85.3794 44.4228 82.7171 47.1406L47.9008 82.684C45.7466 84.8831 42.254 84.8831 40.0999 82.684L5.28351 47.1406C2.62124 44.4227 3.34957 39.8409 6.7171 38.122L17.9759 32.3751ZM44.0003 19.0912L73.0051 4.28593C77.7786 1.84936 82.8214 7.06388 80.3737 11.9054L70.0247 32.3751L44.0003 19.0912ZM44.0003 19.0912L14.9955 4.28593C10.2221 1.84936 5.17926 7.06388 7.62699 11.9054L17.9759 32.3751L44.0003 19.0912Z"
-        fill={color}
-      />
-    </svg>
-  );
-}

package/src/components/icon/custom/slack-logo.tsx

@@ -1,35 +0,0 @@
-import type {RemixiconComponentType} from '@remixicon/react';
-import type {ComponentProps} from 'react';
-
-type SlackLogoProps = ComponentProps<RemixiconComponentType>;
-
-export function SlackLogo(props: SlackLogoProps) {
-  return (
-    <svg
-      viewBox="0 0 28 28"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      aria-hidden="true"
-      focusable="false"
-      {...props}
-    >
-      <title>Slack Logo</title>
-      <path
-        d="M6.66988 17.376C6.66988 18.8336 5.4918 20.0117 4.03416 20.0117C2.57653 20.0117 1.39844 18.8336 1.39844 17.376C1.39844 15.9183 2.57653 14.7402 4.03416 14.7402H6.66988V17.376ZM7.98775 17.376C7.98775 15.9183 9.16583 14.7402 10.6235 14.7402C12.0811 14.7402 13.2592 15.9183 13.2592 17.376V23.9653C13.2592 25.4229 12.0811 26.601 10.6235 26.601C9.16583 26.601 7.98775 25.4229 7.98775 23.9653V17.376Z"
-        fill="#E01E5A"
-      />
-      <path
-        d="M10.6279 6.66102C9.17271 6.66102 7.99661 5.48492 7.99661 4.02973C7.99661 2.57455 9.17271 1.39844 10.6279 1.39844C12.0831 1.39844 13.2592 2.57455 13.2592 4.02973V6.66102H10.6279ZM10.6279 7.99661C12.0831 7.99661 13.2592 9.17271 13.2592 10.6279C13.2592 12.0831 12.0831 13.2592 10.6279 13.2592H4.02973C2.57455 13.2592 1.39844 12.0831 1.39844 10.6279C1.39844 9.17271 2.57455 7.99661 4.02973 7.99661H10.6279Z"
-        fill="#36C5F0"
-      />
-      <path
-        d="M21.3295 10.6279C21.3295 9.17271 22.5076 7.99661 23.9653 7.99661C25.4229 7.99661 26.601 9.17271 26.601 10.6279C26.601 12.0831 25.4229 13.2592 23.9653 13.2592H21.3295V10.6279ZM20.0117 10.6279C20.0117 12.0831 18.8336 13.2592 17.376 13.2592C15.9183 13.2592 14.7402 12.0831 14.7402 10.6279V4.02973C14.7402 2.57455 15.9183 1.39844 17.376 1.39844C18.8336 1.39844 20.0117 2.57455 20.0117 4.02973V10.6279Z"
-        fill="#2EB67D"
-      />
-      <path
-        d="M17.3715 21.3295C18.8267 21.3295 20.0028 22.5076 20.0028 23.9653C20.0028 25.4229 18.8267 26.601 17.3715 26.601C15.9163 26.601 14.7402 25.4229 14.7402 23.9653V21.3295H17.3715ZM17.3715 20.0117C15.9163 20.0117 14.7402 18.8336 14.7402 17.376C14.7402 15.9183 15.9163 14.7402 17.3715 14.7402H23.9697C25.4249 14.7402 26.601 15.9183 26.601 17.376C26.601 18.8336 25.4249 20.0117 23.9697 20.0117H17.3715Z"
-        fill="#ECB22E"
-      />
-    </svg>
-  );
-}

package/src/components/icon/custom/spinner.tsx

@@ -1,144 +0,0 @@
-import type {RemixiconComponentType} from '@remixicon/react';
-import {motion, type SVGMotionProps, type Variants} from 'framer-motion';
-import type {ComponentProps} from 'react';
-import {cn} from 'utils/cn';
-
-const SEGMENT_COUNT = 8;
-const DURATION = 1.2;
-const BASE_OPACITY = 0;
-
-const CLOCKWISE_ORDER = [1, 8, 4, 6, 2, 7, 3, 5];
-
-const segmentVariants: Record<string, Variants> = {};
-
-for (let i = 0; i < SEGMENT_COUNT; i++) {
-  const segmentIndex = CLOCKWISE_ORDER[i];
-  const delay = (i * DURATION) / SEGMENT_COUNT;
-
-  segmentVariants[`segment${segmentIndex}`] = {
-    initial: {opacity: BASE_OPACITY},
-    animate: {
-      opacity: [BASE_OPACITY, 1, BASE_OPACITY],
-      transition: {
-        duration: DURATION,
-        ease: 'easeInOut',
-        repeat: Infinity,
-        repeatType: 'loop',
-        delay,
-        times: [0, 0.5, 1],
-      },
-    },
-  };
-}
-
-export function SpinnerIcon(props: ComponentProps<RemixiconComponentType>) {
-  const {className, size, ...restProps} = props;
-
-  const iconSize = size ?? 24;
-
-  const svgProps: SVGMotionProps<SVGSVGElement> = {
-    width: typeof iconSize === 'number' ? String(iconSize) : iconSize,
-    height: typeof iconSize === 'number' ? String(iconSize) : iconSize,
-    viewBox: '0 0 24 24',
-    fill: 'none',
-    xmlns: 'http://www.w3.org/2000/svg',
-    className: cn(className),
-    initial: 'initial',
-    animate: 'animate',
-    ...(restProps as SVGMotionProps<SVGSVGElement>),
-  };
-  return (
-    <motion.svg {...svgProps}>
-      <title>Spinner</title>
-      <motion.path
-        d="M10.583 1.91667C10.583 1.41041 10.9934 1 11.4997 1C12.0059 1 12.4163 1.41041 12.4163 1.91667V5.58333C12.4163 6.08959 12.0059 6.5 11.4997 6.5C10.9934 6.5 10.583 6.08959 10.583 5.58333V1.91667Z"
-        fill="currentColor"
-        stroke="currentColor"
-        style={{fill: 'currentColor', fillOpacity: 1, stroke: 'currentColor', strokeOpacity: 1}}
-        strokeWidth="0.916667"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        variants={segmentVariants.segment1}
-      />
-      <motion.rect
-        x="10.583"
-        y="17.5"
-        width="1.83333"
-        height="5.5"
-        rx="0.916667"
-        fill="currentColor"
-        stroke="currentColor"
-        style={{fill: 'currentColor', fillOpacity: 1, stroke: 'currentColor', strokeOpacity: 1}}
-        strokeWidth="0.916667"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        variants={segmentVariants.segment2}
-      />
-      <motion.path
-        d="M1.41667 12.918C0.910406 12.918 0.5 12.5076 0.5 12.0013C0.5 11.495 0.910405 11.0846 1.41667 11.0846L5.08333 11.0846C5.58959 11.0846 6 11.495 6 12.0013C6 12.5076 5.58959 12.918 5.08333 12.918L1.41667 12.918Z"
-        fill="currentColor"
-        stroke="currentColor"
-        style={{fill: 'currentColor', fillOpacity: 1, stroke: 'currentColor', strokeOpacity: 1}}
-        strokeWidth="0.916667"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        variants={segmentVariants.segment3}
-      />
-      <motion.path
-        d="M17.9167 12.918C17.4104 12.918 17 12.5076 17 12.0013C17 11.495 17.4104 11.0846 17.9167 11.0846L21.5833 11.0846C22.0896 11.0846 22.5 11.495 22.5 12.0013C22.5 12.5076 22.0896 12.918 21.5833 12.918L17.9167 12.918Z"
-        fill="currentColor"
-        stroke="currentColor"
-        style={{fill: 'currentColor', fillOpacity: 1, stroke: 'currentColor', strokeOpacity: 1}}
-        strokeWidth="0.916667"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        variants={segmentVariants.segment4}
-      />
-      <motion.path
-        d="M3.7224 5.52123C3.36442 5.16325 3.36442 4.58285 3.7224 4.22487C4.08038 3.86689 4.66078 3.86688 5.01876 4.22487L7.61149 6.81759C7.96947 7.17557 7.96947 7.75597 7.61149 8.11395C7.25351 8.47193 6.67311 8.47193 6.31512 8.11395L3.7224 5.52123Z"
-        fill="currentColor"
-        stroke="currentColor"
-        style={{fill: 'currentColor', fillOpacity: 1, stroke: 'currentColor', strokeOpacity: 1}}
-        strokeWidth="0.916667"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        variants={segmentVariants.segment5}
-      />
-      <motion.rect
-        x="14.7412"
-        y="16.5391"
-        width="1.83333"
-        height="5.5"
-        rx="0.916667"
-        transform="rotate(-45 14.7412 16.5391)"
-        fill="currentColor"
-        stroke="currentColor"
-        style={{fill: 'currentColor', fillOpacity: 1, stroke: 'currentColor', strokeOpacity: 1}}
-        strokeWidth="0.916667"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        variants={segmentVariants.segment6}
-      />
-      <motion.path
-        d="M5.0183 19.7796C4.66032 20.1375 4.07992 20.1375 3.72194 19.7796C3.36396 19.4216 3.36396 18.8412 3.72194 18.4832L6.31466 15.8905C6.67264 15.5325 7.25304 15.5325 7.61102 15.8905C7.969 16.2484 7.969 16.8288 7.61102 17.1868L5.0183 19.7796Z"
-        fill="currentColor"
-        stroke="currentColor"
-        style={{fill: 'currentColor', fillOpacity: 1, stroke: 'currentColor', strokeOpacity: 1}}
-        strokeWidth="0.916667"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        variants={segmentVariants.segment7}
-      />
-      <motion.path
-        d="M16.6853 8.11354C16.3273 8.47152 15.7469 8.47152 15.3889 8.11354C15.0309 7.75556 15.0309 7.17516 15.3889 6.81718L17.9817 4.22445C18.3396 3.86647 18.92 3.86647 19.278 4.22445C19.636 4.58243 19.636 5.16283 19.278 5.52081L16.6853 8.11354Z"
-        fill="currentColor"
-        stroke="currentColor"
-        style={{fill: 'currentColor', fillOpacity: 1, stroke: 'currentColor', strokeOpacity: 1}}
-        strokeWidth="0.916667"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        variants={segmentVariants.segment8}
-      />
-    </motion.svg>
-  );
-}

package/src/components/icon/custom/stripe-logo.tsx

@@ -1,27 +0,0 @@
-import type {RemixiconComponentType} from '@remixicon/react';
-import type {ComponentProps} from 'react';
-
-type StripeLogoProps = ComponentProps<RemixiconComponentType> & {
-  color?: string;
-};
-
-export function StripeLogo({color = '#6772E5', ...props}: StripeLogoProps) {
-  return (
-    <svg
-      viewBox="0 0 28 28"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      aria-hidden="true"
-      focusable="false"
-      {...props}
-    >
-      <title>Stripe Logo</title>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M12.3115 9.17663C12.3115 8.15771 13.1593 7.76352 14.5293 7.76352C16.7967 7.81251 19.0215 8.38821 21.0281 9.44512V3.29438C18.959 2.48126 16.7523 2.07592 14.5293 2.10068C9.24873 2.10068 5.70703 4.86665 5.70703 9.48529C5.70703 16.7115 15.63 15.5379 15.63 18.6526C15.63 19.8709 14.5888 20.2487 13.1236 20.2487C10.9631 20.2487 8.17253 19.3547 5.9837 18.1647V24.3958C8.23725 25.3764 10.6668 25.888 13.1244 25.8997C18.5514 25.8997 22.2925 23.2185 22.2925 18.5195C22.2925 10.7206 12.3115 12.1137 12.3115 9.17812V9.17663Z"
-        fill={color}
-      />
-    </svg>
-  );
-}

package/src/components/icon/custom/thunder.tsx

@@ -1,17 +0,0 @@
-import type {RemixiconComponentType} from '@remixicon/react';
-import type {ComponentProps} from 'react';
-
-export function ThunderIcon(_props: ComponentProps<RemixiconComponentType>) {
-  return (
-    <svg
-      width="25"
-      height="24"
-      viewBox="0 0 25 24"
-      fill="currentColor"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <title>Thunder</title>
-      <path d="M14.2707 10.1872H19.5832L10.729 22V13.8219H5.4165L14.2707 2V10.1872Z" />
-    </svg>
-  );
-}

package/src/components/icon/custom/x-circle-solid.tsx

@@ -1,24 +0,0 @@
-import type {RemixiconComponentType} from '@remixicon/react';
-import type {ComponentProps} from 'react';
-
-export function XCircleSolidIcon(_props: ComponentProps<RemixiconComponentType>) {
-  return (
-    <svg
-      width="19"
-      height="18"
-      viewBox="0 0 19 18"
-      fill="currentColor"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <title>X Circle Solid</title>
-      <g clipPath="url(#clip0_6552_160759)">
-        <path d="M9.49964 0.464844C4.79458 0.464844 0.966309 4.29311 0.966309 8.99818C0.966309 13.7032 4.79458 17.5315 9.49964 17.5315C14.2047 17.5315 18.033 13.7032 18.033 8.99818C18.033 4.29311 14.2047 0.464844 9.49964 0.464844ZM12.9983 11.3662C13.3108 11.6787 13.3108 12.1854 12.9983 12.4979C12.8426 12.6536 12.6378 12.7326 12.433 12.7326C12.2282 12.7326 12.0234 12.6547 11.8676 12.4979L9.49964 10.1299L7.13164 12.4979C6.97591 12.6536 6.77111 12.7326 6.56631 12.7326C6.36151 12.7326 6.15671 12.6547 6.00097 12.4979C5.68844 12.1854 5.68844 11.6787 6.00097 11.3662L8.36897 8.99818L6.00097 6.63018C5.68844 6.31764 5.68844 5.81098 6.00097 5.49844C6.31351 5.18591 6.82018 5.18591 7.13271 5.49844L9.50071 7.86644L11.8687 5.49844C12.1812 5.18591 12.6879 5.18591 13.0004 5.49844C13.313 5.81098 13.313 6.31764 13.0004 6.63018L10.6324 8.99818L13.0004 11.3662H12.9983Z" />
-      </g>
-      <defs>
-        <clipPath id="clip0_6552_160759">
-          <rect width="18" height="18" fill="white" transform="translate(0.5)" />
-        </clipPath>
-      </defs>
-    </svg>
-  );
-}

package/src/components/icon/icon.stories.tsx

@@ -1,31 +0,0 @@
-import type {Meta, StoryObj} from '@storybook/react';
-import {Code} from 'components/typography';
-import {Icon, iconNames} from './icon';
-
-const meta = {
-  title: 'Components/Icon',
-  component: Icon,
-} satisfies Meta<typeof Icon>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Gallery: Story = {
-  args: {name: 'google'},
-  render: (args) => (
-    <div className="flex flex-col gap-16">
-      <div className="grid grid-cols-8 gap-16">
-        {iconNames.toSorted().map((name) => (
-          <div key={name} className="flex flex-col items-center gap-4">
-            <div className="flex items-center justify-center w-20 h-20">
-              <Icon {...args} name={name} />
-            </div>
-            <Code variant="label" className="text-foreground-neutral-subtle">
-              {name}
-            </Code>
-          </div>
-        ))}
-      </div>
-    </div>
-  ),
-};