@shipfox/react-ui 0.2.0 → 0.4.0

package/src/components/code-block/code-copy-button.tsx

@@ -0,0 +1,73 @@
+import {Icon} from 'components/icon';
+import {useCopyToClipboard} from 'hooks/useCopyToClipboard';
+import type {ComponentProps} from 'react';
+import {useEffect, useRef, useState} from 'react';
+import {cn} from 'utils/cn';
+
+type CodeCopyButtonProps = Omit<ComponentProps<'button'>, 'onCopy'> & {
+  content: string;
+  onCopy?: (content: string) => void;
+  onError?: (error: Error) => void;
+  timeout?: number;
+  children?: React.ReactNode;
+};
+
+export function CodeCopyButton({
+  content,
+  onCopy,
+  onError,
+  timeout = 2000,
+  children,
+  className,
+  ...props
+}: CodeCopyButtonProps) {
+  const [isCopied, setIsCopied] = useState(false);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+
+  const {copy} = useCopyToClipboard({
+    text: content,
+    onCopy: () => {
+      setIsCopied(true);
+      onCopy?.(content);
+
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+
+      timeoutRef.current = setTimeout(() => {
+        setIsCopied(false);
+      }, timeout);
+    },
+  });
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  const handleClick = async () => {
+    try {
+      await copy();
+    } catch (error) {
+      onError?.(error instanceof Error ? error : new Error('Failed to copy'));
+    }
+  };
+
+  return (
+    <button
+      type="button"
+      aria-label={isCopied ? 'Copied' : 'Copy to clipboard'}
+      className={cn(
+        'flex shrink-0 cursor-pointer items-center justify-center rounded-6 bg-transparent text-foreground-neutral-muted transition-colors hover:bg-background-components-hover active:bg-background-components-pressed p-4',
+        className,
+      )}
+      onClick={handleClick}
+      {...props}
+    >
+      {children ?? <Icon name={isCopied ? 'check' : 'copy'} className="size-16" />}
+    </button>
+  );
+}

package/src/components/code-block/code-tabs.tsx

@@ -0,0 +1,170 @@
+import * as Tabs from '@radix-ui/react-tabs';
+import {useControllableState} from '@radix-ui/react-use-controllable-state';
+import {CodeContent} from 'components/code-block/code-content';
+import {CodeCopyButton} from 'components/code-block/code-copy-button';
+import {useResolvedTheme} from 'hooks/useResolvedTheme';
+import {useShikiHighlightMultiple} from 'hooks/useShikiHighlight';
+import {useShikiStyleInjection} from 'hooks/useShikiStyleInjection';
+import type {ComponentProps} from 'react';
+import {useMemo} from 'react';
+import {cn} from 'utils/cn';
+
+export type CodeTabsProps = Omit<ComponentProps<typeof Tabs.Root>, 'children'> & {
+  codes: Record<string, string>;
+  lang?: string;
+  themes?: {
+    light: string;
+    dark: string;
+  };
+  copyButton?: boolean;
+  onCopy?: (content: string) => void;
+  syntaxHighlighting?: boolean;
+  lineNumbers?: boolean;
+};
+
+function CodeTabsContent({
+  codes,
+  lang = 'bash',
+  themes = {
+    light: 'vitesse-light',
+    dark: 'vitesse-dark',
+  },
+  copyButton = true,
+  onCopy,
+  syntaxHighlighting = false,
+  lineNumbers = false,
+  activeValue,
+}: {
+  codes: Record<string, string>;
+  lang?: string;
+  themes?: {light: string; dark: string};
+  copyButton?: boolean;
+  onCopy?: (content: string) => void;
+  syntaxHighlighting?: boolean;
+  lineNumbers?: boolean;
+  activeValue: string;
+}) {
+  const resolvedTheme = useResolvedTheme();
+  const codesKeys = useMemo(() => Object.keys(codes), [codes]);
+
+  useShikiStyleInjection(syntaxHighlighting);
+
+  const {highlightedCodes, isLoading} = useShikiHighlightMultiple({
+    codes,
+    lang,
+    themes,
+    resolvedTheme,
+    syntaxHighlighting,
+  });
+
+  const activeCode = codes[activeValue] ?? '';
+
+  return (
+    <>
+      <Tabs.List
+        className={cn(
+          'relative flex w-full flex-row items-center justify-between gap-12 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden bg-background-components-pressed dark:bg-background-contrast-base px-16 py-8',
+          'border-b border-border-contrast-bottom',
+          'after:absolute after:bottom-0 after:left-0 after:right-0 after:h-px',
+          'after:bg-border-neutral-base',
+          'dark:after:bg-border-contrast-top',
+          'after:shadow-separator-inset',
+        )}
+      >
+        <div className="flex flex-row gap-12">
+          {codesKeys.map((code) => (
+            <Tabs.Trigger
+              key={code}
+              value={code}
+              className={cn(
+                'relative px-8 py-4 text-xs leading-20 font-medium text-foreground-neutral-muted transition-colors',
+                'data-[state=active]:text-foreground-neutral-base',
+                'hover:text-foreground-neutral-base',
+                'data-[state=active]:z-10',
+                'data-[state=active]:after:absolute data-[state=active]:after:-bottom-9 data-[state=active]:after:left-0 data-[state=active]:after:right-0',
+                'data-[state=active]:after:h-2 data-[state=active]:after:bg-foreground-neutral-base',
+              )}
+            >
+              {code}
+            </Tabs.Trigger>
+          ))}
+        </div>
+
+        {copyButton && <CodeCopyButton content={activeCode} onCopy={onCopy} className="shrink-0" />}
+      </Tabs.List>
+      <div className="w-full px-4 pb-4 pt-8">
+        {Object.entries(codes).map(([code, rawCode]) => (
+          <Tabs.Content key={code} value={code} className="w-full">
+            <div
+              className={cn(
+                'flex min-h-0 min-w-0 w-full shrink-0 rounded-8 border border-border-contrast-bottom bg-background-neutral-base dark:bg-background-contrast-subtle font-code',
+                '[&_pre]:py-12 [&_pre]:font-code',
+                '[&_pre]:m-0 [&_pre]:px-0 [&_pre]:bg-transparent',
+                '[&_code]:w-full [&_code]:overflow-x-auto [&_code]:bg-transparent [&_code]:font-code [&_code]:text-xs [&_code]:leading-20 [&_code]:text-foreground-neutral-base',
+                lineNumbers &&
+                  '[&_code]:grid [&_code]:[counter-reset:line] [&_code]:[counter-increment:line_0] [&_.line]:before:content-[counter(line)] [&_.line]:before:inline-block [&_.line]:before:[counter-increment:line] [&_.line]:before:w-16 [&_.line]:before:mr-16 [&_.line]:before:text-xs [&_.line]:before:text-right [&_.line]:before:text-foreground-neutral-subtle [&_.line]:before:font-code [&_.line]:before:select-none',
+                '[&_.line]:block [&_.line]:px-12 [&_.line]:w-full [&_.line]:relative [&_.line]:font-code [&_.line]:min-h-[1.25rem]',
+              )}
+            >
+              <CodeContent
+                code={rawCode}
+                highlightedCode={highlightedCodes[code]}
+                isLoading={isLoading}
+                syntaxHighlighting={syntaxHighlighting}
+                lineNumbers={lineNumbers}
+              />
+            </div>
+          </Tabs.Content>
+        ))}
+      </div>
+    </>
+  );
+}
+
+export function CodeTabs({
+  codes,
+  lang = 'bash',
+  themes = {
+    light: 'vitesse-light',
+    dark: 'vitesse-dark',
+  },
+  className,
+  defaultValue,
+  value: controlledValue,
+  onValueChange: controlledOnValueChange,
+  copyButton = true,
+  onCopy,
+  syntaxHighlighting = false,
+  lineNumbers = false,
+  ...props
+}: CodeTabsProps) {
+  const firstKey = useMemo(() => Object.keys(codes)[0] ?? '', [codes]);
+  const [value, onValueChange] = useControllableState({
+    defaultProp: defaultValue ?? firstKey,
+    prop: controlledValue,
+    onChange: controlledOnValueChange,
+  });
+
+  return (
+    <Tabs.Root
+      className={cn(
+        'w-full overflow-hidden rounded-12 bg-background-components-pressed dark:bg-background-contrast-base shadow-button-neutral',
+        className,
+      )}
+      value={value}
+      onValueChange={onValueChange}
+      {...props}
+    >
+      <CodeTabsContent
+        codes={codes}
+        lang={lang}
+        themes={themes}
+        copyButton={copyButton}
+        onCopy={onCopy}
+        syntaxHighlighting={syntaxHighlighting}
+        lineNumbers={lineNumbers}
+        activeValue={value ?? firstKey}
+      />
+    </Tabs.Root>
+  );
+}

package/src/components/code-block/index.ts

@@ -0,0 +1,3 @@
+export * from './code-block';
+export * from './code-block-footer';
+export * from './code-tabs';

package/src/components/dynamic-item/dynamic-item.stories.tsx

@@ -0,0 +1,261 @@
+import type {Meta, StoryObj} from '@storybook/react';
+import {Button} from 'components/button/button';
+import {ItemTitle} from 'components/item';
+import {cn} from 'utils/cn';
+import illustration1 from '../../assets/illustration-1.svg';
+import illustration2 from '../../assets/illustration-2.svg';
+import illustrationBg from '../../assets/illustration-gradient.svg';
+import {Avatar} from '../avatar/avatar';
+import {AvatarGroup, AvatarGroupTooltip} from '../avatar/avatar-group';
+import {Icon} from '../icon/icon';
+import {MovingBorder} from '../moving-border/moving-border';
+import {DynamicItem} from './dynamic-item';
+
+const meta = {
+  title: 'Components/DynamicItem',
+  component: DynamicItem,
+  tags: ['autodocs'],
+} satisfies Meta<typeof DynamicItem>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const OrganizationItem: Story = {
+  args: {},
+  render: () => (
+    <div className="flex flex-col gap-16 w-full max-w-476">
+      <DynamicItem
+        variant="default"
+        leftElement={<Avatar content="logo" logoName="slack" radius="rounded" size="xl" />}
+        title="Slack"
+        description="3 members"
+        rightElement={
+          <AvatarGroup size="md">
+            <Avatar content="image" fallback="John Doe">
+              <AvatarGroupTooltip>John Doe</AvatarGroupTooltip>
+            </Avatar>
+            <Avatar content="image" fallback="Jane Smith">
+              <AvatarGroupTooltip>Jane Smith</AvatarGroupTooltip>
+            </Avatar>
+            <Avatar content="image" fallback="Bob Johnson">
+              <AvatarGroupTooltip>Bob Johnson</AvatarGroupTooltip>
+            </Avatar>
+          </AvatarGroup>
+        }
+      />
+      <DynamicItem
+        variant="default"
+        leftElement={<Avatar content="logo" logoName="stripe" radius="rounded" size="xl" />}
+        title="Stripe"
+        description="2 members"
+        rightElement={
+          <AvatarGroup size="md">
+            <Avatar content="image" fallback="Alice Brown">
+              <AvatarGroupTooltip>Alice Brown</AvatarGroupTooltip>
+            </Avatar>
+            <Avatar content="image" fallback="Carlos Vega">
+              <AvatarGroupTooltip>Carlos Vega</AvatarGroupTooltip>
+            </Avatar>
+          </AvatarGroup>
+        }
+      />
+      <DynamicItem
+        variant="default"
+        leftElement={<Avatar content="logo" logoName="shipfox" radius="rounded" size="xl" />}
+        title="Shipfox"
+        description="9 members"
+        rightElement={
+          <AvatarGroup size="md" maxVisible={4} animateOnHover>
+            <Avatar content="image" fallback="Linda Tran">
+              <AvatarGroupTooltip>Linda Tran</AvatarGroupTooltip>
+            </Avatar>
+            <Avatar content="image" fallback="Michael Chen">
+              <AvatarGroupTooltip>Michael Chen</AvatarGroupTooltip>
+            </Avatar>
+            <Avatar content="image" fallback="Sarah Williams">
+              <AvatarGroupTooltip>Sarah Williams</AvatarGroupTooltip>
+            </Avatar>
+            <Avatar content="image" fallback="David Lee">
+              <AvatarGroupTooltip>David Lee</AvatarGroupTooltip>
+            </Avatar>
+            <Avatar content="image" fallback="Emily Davis">
+              <AvatarGroupTooltip>Emily Davis</AvatarGroupTooltip>
+            </Avatar>
+            <Avatar content="image" fallback="James Wilson">
+              <AvatarGroupTooltip>James Wilson</AvatarGroupTooltip>
+            </Avatar>
+            <Avatar content="image" fallback="Olivia Martinez">
+              <AvatarGroupTooltip>Olivia Martinez</AvatarGroupTooltip>
+            </Avatar>
+            <Avatar content="image" fallback="Noah Anderson">
+              <AvatarGroupTooltip>Noah Anderson</AvatarGroupTooltip>
+            </Avatar>
+            <Avatar content="image" fallback="Sophia Taylor">
+              <AvatarGroupTooltip>Sophia Taylor</AvatarGroupTooltip>
+            </Avatar>
+          </AvatarGroup>
+        }
+      />
+    </div>
+  ),
+};
+
+export const ConnectGithubAccountItem: Story = {
+  args: {},
+  render: () => (
+    <div className="flex flex-col gap-16 w-full max-w-476">
+      <DynamicItem
+        variant="default"
+        leftElement={
+          <div className="relative">
+            <Avatar content="logoPlaceholder" logoName="slack" radius="full" size="lg" />
+            <Avatar
+              content="logoPlaceholder"
+              logoName="github"
+              radius="full"
+              size="2xs"
+              logoClassName="p-0"
+              className="absolute bottom-0 left-27"
+            />
+          </div>
+        }
+        title="Slack"
+        description="Connect Github organization"
+        rightElement={
+          <Button variant="primary" size="sm">
+            Connect
+          </Button>
+        }
+      />
+
+      <DynamicItem
+        variant="default"
+        leftElement={
+          <div className="relative">
+            <Avatar content="logoPlaceholder" logoName="slack" radius="full" size="lg" />
+            <Avatar
+              content="logo"
+              logoName="github"
+              radius="full"
+              size="2xs"
+              logoClassName="p-0"
+              className="absolute bottom-0 left-27"
+            />
+          </div>
+        }
+        title="Slack"
+        description="Personal account (kye-nguyen)"
+        rightElement={
+          <Button variant="primary" size="sm">
+            Change account
+          </Button>
+        }
+      />
+
+      <DynamicItem
+        variant="default"
+        leftElement={
+          <div className="relative">
+            <Avatar content="logoPlaceholder" logoName="slack" radius="full" size="lg" />
+            <Avatar
+              content="logo"
+              logoName="github"
+              radius="full"
+              size="2xs"
+              logoClassName="p-0"
+              className="absolute bottom-0 left-27"
+            />
+          </div>
+        }
+        title="Slack"
+        description="Organization (slack-github)"
+        rightElement={
+          <Button variant="secondary" size="sm">
+            Change account
+          </Button>
+        }
+      />
+    </div>
+  ),
+};
+
+export const WithCustomElementsItem: Story = {
+  args: {},
+  render: () => {
+    return (
+      <div className="flex flex-col gap-16 w-full max-w-672">
+        <DynamicItem
+          variant="default"
+          leftElement={
+            <div className="flex shrink-0 items-center justify-center text-tag-success-icon">
+              <Icon name="checkCircleSolid" size="sm" />
+            </div>
+          }
+          title="Give access to your Github organizations"
+          description="We'll use this permission to sync your organization's."
+          action={
+            <div className="flex gap-8 mx-auto sm:mx-0">
+              <Button variant="primary" size="sm">
+                Github access
+              </Button>
+              <Button variant="transparentMuted" size="sm">
+                Skip for now
+              </Button>
+            </div>
+          }
+          rightElement={
+            <img
+              src={illustration1}
+              alt="illustration-1"
+              className="hidden sm:block absolute overflow-clip right-2 top-1/2 -translate-y-1/2 -translate-x-46 w-fit object-contain"
+            />
+          }
+        />
+        <div className="relative">
+          <img
+            src={illustration2}
+            alt="illustration-2"
+            className="hidden sm:block absolute overflow-clip right-2 top-1/2 -translate-y-1/2 translate-x-8 w-fit object-contain z-50"
+          />
+          <div className={cn('relative overflow-hidden bg-transparent p-1 rounded-8')}>
+            <div className="absolute inset-0" style={{borderRadius: 'calc(0.5rem * 0.96)'}}>
+              <MovingBorder duration={6000} rx="30%" ry="30%">
+                <div className="h-100 w-200 bg-[radial-gradient(#ff9e7a_40%,transparent_60%)]" />
+              </MovingBorder>
+            </div>
+            <div
+              className="relative"
+              style={{
+                borderRadius: 'calc(0.5rem * 0.96)',
+              }}
+            >
+              <DynamicItem
+                variant="default"
+                title={
+                  <div className="flex items-center gap-6">
+                    <span className="flex shrink-0 items-center justify-center text-tag-success-icon w-16 h-16">
+                      <Icon
+                        name="money"
+                        size="sm"
+                        color="var(--foreground-neutral-subtle, #a1a1aa)"
+                      />
+                    </span>
+                    <ItemTitle>6000 free credits/month to run your jobs</ItemTitle>
+                  </div>
+                }
+                description="~500 builds/month. No payment required."
+                rightElement={
+                  <img
+                    src={illustrationBg}
+                    alt="illustration-bg"
+                    className="hidden sm:block absolute overflow-clip right-4 w-fit object-contain scale-105"
+                  />
+                }
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  },
+};

package/src/components/dynamic-item/dynamic-item.tsx

@@ -0,0 +1,68 @@
+import type {ReactNode} from 'react';
+import {cn} from 'utils/cn';
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemMedia,
+  type ItemProps,
+  ItemTitle,
+} from '../item/item';
+
+export type DynamicItemProps = Omit<ItemProps, 'variant' | 'children' | 'title'> & {
+  variant?: 'default' | 'neutral';
+  leftElement?: ReactNode;
+  title?: ReactNode;
+  description?: string;
+  action?: ReactNode;
+  rightElement?: ReactNode;
+  contentClassName?: string;
+};
+
+export function DynamicItem({
+  className,
+  variant = 'default',
+  leftElement,
+  title,
+  description,
+  action,
+  rightElement,
+  contentClassName,
+  ...props
+}: DynamicItemProps) {
+  const hasLeftSide = Boolean(leftElement);
+  const hasRightSide = Boolean(rightElement);
+  const hasContent = Boolean(title || description || action);
+
+  return (
+    <Item variant={variant} className={className} {...props}>
+      <div
+        className={cn(
+          'relative flex flex-col sm:flex-row justify-center items-center gap-16 min-h-64 px-12 py-12',
+          contentClassName,
+        )}
+      >
+        {hasLeftSide && (
+          <ItemMedia className={cn('self-center sm:self-start pt-2')}>{leftElement}</ItemMedia>
+        )}
+
+        {hasContent && (
+          <ItemContent className="text-center sm:text-left">
+            {title && typeof title === 'string' ? <ItemTitle>{title}</ItemTitle> : title}
+            {description && <ItemDescription>{description}</ItemDescription>}
+            {action && (
+              <ItemActions className={cn('mt-8 flex flex-wrap items-center gap-16')}>
+                {action}
+              </ItemActions>
+            )}
+          </ItemContent>
+        )}
+
+        {hasRightSide && (
+          <ItemActions className="self-center sm:ml-auto">{rightElement}</ItemActions>
+        )}
+      </div>
+    </Item>
+  );
+}

package/src/components/dynamic-item/index.ts

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

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

@@ -6,6 +6,9 @@ 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/shipfox-logo.tsx

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1,35 @@
+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/stripe-logo.tsx

@@ -0,0 +1,27 @@
+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>
+  );
+}