sdaia-ui 1.0.1 → 1.0.2

package/src/components/ButtonSplit/ButtonSplit.tsx

@@ -1,344 +0,0 @@
-'use client';
-
-import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
-import { cn } from '../../lib/cn';
-import type { ButtonSplitMenuItem, ButtonSplitProps, ButtonSplitSize } from './ButtonSplit.types';
-import {
-  VARIANT_CLASSES,
-  DISABLED_CLASSES,
-  FOCUS_RING,
-  ICON_SIZE_CLASSES,
-  SPLIT_SIZE_CLASSES,
-  SPLIT_DIVIDER_CLASSES,
-  SPLIT_BORDER_MAIN,
-  SPLIT_BORDER_MENU,
-  SPLIT_CHEVRON_PATH,
-  SPLIT_CHEVRON_VIEWBOX,
-  MENU_PANEL_CLASSES,
-  MENU_ITEM_CLASSES,
-  MENU_ITEM_DESTRUCTIVE_CLASSES,
-  MENU_ITEM_DISABLED_CLASSES,
-} from './ButtonSplit.variants';
-
-/* ── Chevron-down icon ───────────────────────────────────────────
- * arrow-down-01 / Stroke / Rounded — Figma node 4074:5854
- * Fills its container; currentColor inherits the button text colour.
- */
-function ChevronDown({ open }: { open?: boolean }) {
-  return (
-    <svg
-      width="100%"
-      height="100%"
-      viewBox={SPLIT_CHEVRON_VIEWBOX}
-      fill="none"
-      aria-hidden="true"
-      className={cn('motion-expand-rotate', open && 'rotate-180')}
-    >
-      <path
-        d={SPLIT_CHEVRON_PATH}
-        stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-}
-
-/* ── DropdownItem ────────────────────────────────────────────────
- * Renders a single menu item inside the dropdown panel.
- */
-function DropdownItem({
-  item,
-  size,
-  onSelect,
-}: {
-  item: ButtonSplitMenuItem;
-  size: ButtonSplitSize;
-  onSelect: () => void;
-}) {
-  const iconSize = ICON_SIZE_CLASSES[size];
-  const isDestructive = item.destructive && !item.disabled;
-  const itemClass = item.disabled
-    ? MENU_ITEM_DISABLED_CLASSES
-    : isDestructive
-      ? MENU_ITEM_DESTRUCTIVE_CLASSES
-      : MENU_ITEM_CLASSES;
-
-  const handleClick = useCallback(() => {
-    if (!item.disabled) {
-      item.onClick?.();
-      onSelect();
-    }
-  }, [item, onSelect]);
-
-  const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent) => {
-      if ((e.key === 'Enter' || e.key === ' ') && !item.disabled) {
-        e.preventDefault();
-        item.onClick?.();
-        onSelect();
-      }
-    },
-    [item, onSelect],
-  );
-
-  return (
-    <div
-      data-slot="button-split-menu-item"
-      role="menuitem"
-      aria-disabled={item.disabled || undefined}
-      tabIndex={item.disabled ? -1 : 0}
-      onClick={handleClick}
-      onKeyDown={handleKeyDown}
-      className={cn(
-        'flex items-center gap-spacing-md px-spacing-lg py-spacing-sm rounded-[4px] motion-feedback',
-        itemClass,
-        !item.disabled && 'cursor-pointer',
-      )}
-    >
-      {item.icon && (
-        <span
-          data-slot="menu-item-icon"
-          className={cn(
-            'inline-flex items-center justify-center flex-shrink-0',
-            iconSize,
-          )}
-        >
-          {item.icon}
-        </span>
-      )}
-      <span className="text-text-sm font-[400] leading-[20px] whitespace-nowrap">
-        {item.label}
-      </span>
-    </div>
-  );
-}
-
-/* ── ButtonSplit ─────────────────────────────────────────────────
- *
- * A split button: two adjacent interactive sections sharing a visual style,
- * with an optional dropdown menu panel triggered by the chevron section.
- *
- * Start section  — main action: optional leading icon + label text
- * Centre         — 1 px vertical divider (colour varies per style)
- * End section    — dropdown trigger: chevron-down only
- *
- * When `menuItems` is provided, clicking the chevron toggles a floating
- * dropdown panel directly below the component. The panel closes when:
- *   - an item is selected
- *   - the user clicks outside the component
- *   - the Escape key is pressed
- *
- * Figma: Button_Split — node 4092:4002
- *
- * ## Styles (6 — Figma "Style" property):
- *   neutral · primary · secondary-solid · secondary-outline · subtle · transparent
- *   ("Transparence" in Figma is normalised to "transparent" in the API)
- *
- * ## Sizes (3):
- *   sm (Small) · md (Medium) · lg (Large)
- *
- * ## RTL
- *   Pass dir="rtl" to the component. CSS logical properties
- *   (rounded-s-*, rounded-e-*, border-s, border-e) automatically
- *   swap start/end radii and borders. Flex row reversal places the
- *   chevron button on the visual left in RTL.
- *
- * ## Dark mode
- *   Inherits from Button.variants.ts VARIANT_CLASSES dark: classes.
- *   Divider colours have explicit dark: overrides in SPLIT_DIVIDER_CLASSES.
- *
- * ## Accessibility
- *   Each section is an independent <button>. The chevron button carries
- *   aria-haspopup="menu" and aria-expanded (when menuItems present).
- *   The dropdown panel has role="menu". Items are focusable with tab.
- */
-export const ButtonSplit = forwardRef<HTMLDivElement, ButtonSplitProps>(
-  function ButtonSplit(
-    {
-      variant = 'neutral',
-      size = 'md',
-      label,
-      leadingIcon,
-      children,
-      onClick,
-      onMenuClick,
-      menuItems,
-      open: openProp,
-      onOpenChange,
-      menuAriaLabel = 'Open menu',
-      disabled = false,
-      className,
-      dir,
-      mainButtonProps,
-      menuButtonProps,
-    },
-    ref,
-  ) {
-    /* ── Controlled vs uncontrolled open state ─────────────────── */
-    const isControlled = openProp !== undefined;
-    const [internalOpen, setInternalOpen] = useState(false);
-    const isOpen = isControlled ? openProp : internalOpen;
-
-    const setOpen = useCallback(
-      (next: boolean) => {
-        if (!isControlled) setInternalOpen(next);
-        onOpenChange?.(next);
-      },
-      [isControlled, onOpenChange],
-    );
-
-    /* ── Outside-click and Escape handling ──────────────────────── */
-    const wrapperRef = useRef<HTMLDivElement>(null);
-
-    useEffect(() => {
-      if (!isOpen) return;
-
-      function handleClickOutside(event: MouseEvent) {
-        if (wrapperRef.current && !wrapperRef.current.contains(event.target as Node)) {
-          setOpen(false);
-        }
-      }
-
-      function handleKeyDown(event: KeyboardEvent) {
-        if (event.key === 'Escape') {
-          setOpen(false);
-        }
-      }
-
-      document.addEventListener('mousedown', handleClickOutside);
-      document.addEventListener('keydown', handleKeyDown);
-      return () => {
-        document.removeEventListener('mousedown', handleClickOutside);
-        document.removeEventListener('keydown', handleKeyDown);
-      };
-    }, [isOpen, setOpen]);
-
-    /* ── Style resolution ──────────────────────────────────────── */
-    const variantClass = disabled ? DISABLED_CLASSES[variant] : VARIANT_CLASSES[variant];
-    const { mainBtn, menuBtn } = SPLIT_SIZE_CLASSES[size];
-    const iconSize = ICON_SIZE_CLASSES[size];
-
-    /* ── Chevron click ─────────────────────────────────────────── */
-    const handleChevronClick = useCallback(
-      (e: React.MouseEvent<HTMLButtonElement>) => {
-        if (menuItems?.length) {
-          setOpen(!isOpen);
-        }
-        onMenuClick?.(e);
-      },
-      [menuItems, isOpen, setOpen, onMenuClick],
-    );
-
-    /* ── Item selected ─────────────────────────────────────────── */
-    const handleItemSelect = useCallback(() => {
-      setOpen(false);
-    }, [setOpen]);
-
-    /* ── Label resolution ──────────────────────────────────────── */
-    const displayLabel = label ?? children;
-
-    return (
-      <div
-        ref={(node) => {
-          // Merge refs: internal wrapperRef + forwarded ref
-          (wrapperRef as React.MutableRefObject<HTMLDivElement | null>).current = node;
-          if (typeof ref === 'function') ref(node);
-          else if (ref) ref.current = node;
-        }}
-        data-slot="button-split"
-        dir={dir}
-        className={cn('inline-flex items-center rounded-[4px] relative', className)}
-      >
-        {/* ── Main action button ────────────────────────────────── */}
-        <button
-          type="button"
-          data-slot="button-split-main"
-          disabled={disabled}
-          onClick={onClick}
-          className={cn(
-            'inline-flex items-center justify-center font-[500] motion-feedback cursor-pointer',
-            'rounded-s-[8px]',
-            mainBtn,
-            variantClass,
-            SPLIT_BORDER_MAIN[variant],
-            !disabled && FOCUS_RING,
-          )}
-          {...mainButtonProps}
-        >
-          {leadingIcon && (
-            <span
-              data-slot="button-split-leading-icon"
-              className={cn(
-                'inline-flex items-center justify-center flex-shrink-0',
-                iconSize,
-              )}
-            >
-              {leadingIcon}
-            </span>
-          )}
-          <span className="whitespace-nowrap">{displayLabel}</span>
-        </button>
-
-        {/* ── Vertical divider ──────────────────────────────────── */}
-        <div
-          aria-hidden="true"
-          className={cn(
-            'self-stretch w-px shrink-0',
-            SPLIT_DIVIDER_CLASSES[variant],
-          )}
-        />
-
-        {/* ── Menu / chevron button ─────────────────────────────── */}
-        <button
-          type="button"
-          data-slot="button-split-chevron"
-          disabled={disabled}
-          onClick={handleChevronClick}
-          aria-label={menuAriaLabel}
-          aria-haspopup={menuItems?.length ? 'menu' : undefined}
-          aria-expanded={menuItems?.length ? isOpen : undefined}
-          className={cn(
-            'inline-flex items-center justify-center font-[500] motion-feedback cursor-pointer',
-            /* self-stretch ensures the chevron section always fills the full
-             * height of the button group. Without it, the icon-only section
-             * becomes shorter on tablet/mobile because icon tokens scale down
-             * (size-icon-lg: 20px) while the main section's text line-height
-             * keeps the main button taller. */
-            'self-stretch rounded-e-[8px]',
-            menuBtn,
-            variantClass,
-            SPLIT_BORDER_MENU[variant],
-            !disabled && FOCUS_RING,
-          )}
-          {...menuButtonProps}
-        >
-          <span
-            className={cn('inline-flex items-center justify-center flex-shrink-0', iconSize)}
-          >
-            <ChevronDown open={isOpen} />
-          </span>
-        </button>
-
-        {/* ── Dropdown menu panel ───────────────────────────────── */}
-        {menuItems && menuItems.length > 0 && isOpen && (
-          <div
-            data-slot="button-split-menu"
-            role="menu"
-            className={cn(MENU_PANEL_CLASSES)}
-          >
-            {menuItems.map((item) => (
-              <DropdownItem
-                key={item.key}
-                item={item}
-                size={size}
-                onSelect={handleItemSelect}
-              />
-            ))}
-          </div>
-        )}
-      </div>
-    );
-  },
-);

package/src/components/ButtonSplit/ButtonSplit.types.ts

@@ -1,95 +0,0 @@
-import type { ButtonHTMLAttributes, ReactNode } from 'react';
-
-/**
- * Six visual styles — matches Figma "Button_Split" Style property exactly.
- * "Transparence" (Figma typo) is normalised to "transparent" in the API.
- * Maps 1-to-1 to the existing Button variant names.
- */
-export type ButtonSplitVariant =
-  | 'neutral'
-  | 'primary'
-  | 'secondary-solid'
-  | 'secondary-outline'
-  | 'subtle'
-  | 'transparent';
-
-/** Three sizes — maps Figma Large→lg, Medium→md, Small→sm */
-export type ButtonSplitSize = 'sm' | 'md' | 'lg';
-
-/** A single item in the dropdown menu */
-export interface ButtonSplitMenuItem {
-  /** Unique key for the item */
-  key: string;
-  /** Display label */
-  label: string;
-  /** Optional leading icon */
-  icon?: ReactNode;
-  /** When true the item is rendered as disabled */
-  disabled?: boolean;
-  /** When true the item is styled with destructive (danger) colours */
-  destructive?: boolean;
-  /** Called when the item is clicked (and not disabled) */
-  onClick?: () => void;
-}
-
-export interface ButtonSplitProps {
-  /**
-   * Label text for the main action button.
-   * Use `label` for the explicit prop-driven API (preferred).
-   */
-  label?: string;
-  /** Visual style variant. Defaults to 'neutral'. */
-  variant?: ButtonSplitVariant;
-  /** Size tier. Defaults to 'md'. */
-  size?: ButtonSplitSize;
-  /**
-   * Icon displayed before the label in the main action button.
-   * Direction-aware: appears on the logical-start side.
-   */
-  leadingIcon?: ReactNode;
-  /**
-   * Legacy children API — used as label text when `label` is not provided.
-   * @deprecated Prefer the `label` prop for explicit, forward-ref-safe usage.
-   */
-  children?: ReactNode;
-  /**
-   * Click handler for the main action button (start section).
-   * Separate from the dropdown menu button click.
-   */
-  onClick?: ButtonHTMLAttributes<HTMLButtonElement>['onClick'];
-  /**
-   * Click handler for the dropdown/menu chevron button (end section).
-   * Called when the chevron is clicked regardless of `open` / `onOpenChange`.
-   */
-  onMenuClick?: ButtonHTMLAttributes<HTMLButtonElement>['onClick'];
-  /**
-   * Items rendered inside the dropdown menu panel.
-   * When provided, clicking the chevron toggles the panel.
-   */
-  menuItems?: ButtonSplitMenuItem[];
-  /**
-   * Controlled open state of the dropdown panel.
-   * When provided together with `onOpenChange`, the component is fully controlled.
-   */
-  open?: boolean;
-  /**
-   * Called when the open state should change (controlled mode).
-   */
-  onOpenChange?: (open: boolean) => void;
-  /** Accessible label for the chevron/menu button. Defaults to 'Open menu'. */
-  menuAriaLabel?: string;
-  /** Disables both button sections simultaneously. */
-  disabled?: boolean;
-  /** Additional className applied to the outer wrapper. */
-  className?: string;
-  /** Direction override for RTL layout. */
-  dir?: 'ltr' | 'rtl';
-  /**
-   * Extra props forwarded to the main action button element.
-   */
-  mainButtonProps?: Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'disabled'>;
-  /**
-   * Extra props forwarded to the menu/chevron button element.
-   */
-  menuButtonProps?: Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'disabled'>;
-}

package/src/components/ButtonSplit/ButtonSplit.variants.ts

@@ -1,165 +0,0 @@
-import type { ButtonSplitVariant, ButtonSplitSize } from './ButtonSplit.types';
-import {
-  VARIANT_CLASSES,
-  DISABLED_CLASSES,
-  FOCUS_RING,
-  ICON_SIZE_CLASSES,
-} from '../Button/Button.variants';
-
-/**
- * ButtonSplit variants.
- *
- * Styling is derived from Button.variants.ts wherever possible.
- * Split-specific additions: asymmetric border-radius, per-style divider colors,
- * and split per-section border logic for Secondary-Outline.
- *
- * ── Style → Button variant mapping ──────────────────────────────
- * Neutral          →  neutral
- * Primary          →  primary
- * Secondary-Solid  →  secondary-solid
- * Secondary-Outline→  secondary-outline
- * Subtle           →  subtle
- * Transparence     →  transparent   (Figma typo normalised)
- */
-
-/* ── Re-export shared Button tokens used in the component ──────── */
-export { VARIANT_CLASSES, DISABLED_CLASSES, FOCUS_RING, ICON_SIZE_CLASSES };
-
-/* ── Size classes ────────────────────────────────────────────────
- * Each entry maps one size tier to:
- *   mainBtn  — padding + gap + text on the action button section
- *   menuBtn  — padding on the square chevron button section
- */
-export const SPLIT_SIZE_CLASSES: Record<
-  ButtonSplitSize,
-  { mainBtn: string; menuBtn: string }
-> = {
-  lg: {
-    mainBtn: 'px-spacing-xl py-spacing-md gap-spacing-xs text-text-md',
-    menuBtn: 'p-spacing-md',
-  },
-  /*
-   * Medium: Figma specifies py = spacing-sm (6 px).
-   * Our responsive token scales spacing-sm to 8 px at desktop (≥1280 px),
-   * which makes the button 4 px taller than the 32 px Figma target.
-   * Hard-code 6 px to match the spec at all breakpoints.
-   */
-  md: {
-    mainBtn: 'px-spacing-lg py-[6px] gap-spacing-xs text-text-sm',
-    menuBtn: 'p-[6px]',
-  },
-  /*
-   * Small: Figma caps the section height at 24 px (max-h-[24px]).
-   * Without the cap, py-spacing-xs (4 px) + text-xs line-height (18 px)
-   * yields 26 px. max-h-[24px] clamps it to match the Figma spec.
-   */
-  sm: {
-    mainBtn: 'max-h-[24px] px-spacing-md py-spacing-xs gap-spacing-xs text-text-xs',
-    menuBtn: 'p-spacing-xs',
-  },
-};
-
-/* ── Divider color classes (1px vertical separator) ─────────────
- *
- * Figma divider variables:
- *   neutral          → Colors/Neutral/700      #384250    (hardcode — no token)
- *   primary          → Colors/Primary-SA-Flag/500 #25935f (hardcode — no token)
- *   secondary-solid  → Border/border-neutral-secondary #e5e7eb
- *   secondary-outline→ Border/border-neutral-primary   #d2d6db
- *   subtle           → Border/border-neutral-secondary #e5e7eb
- *   transparent      → Border/border-neutral-secondary #e5e7eb
- *
- * Dark mode values derived from existing Button dark palette.
- */
-export const SPLIT_DIVIDER_CLASSES: Record<ButtonSplitVariant, string> = {
-  neutral: 'bg-[rgba(56,66,80,1)] dark:bg-[rgba(210,214,219,1)]',
-  primary: 'bg-[rgba(37,147,95,1)] dark:bg-[rgba(37,147,95,1)]',
-  'secondary-solid': 'bg-[rgba(229,231,235,1)] dark:bg-[rgba(56,66,80,1)]',
-  'secondary-outline': 'bg-[rgba(210,214,219,1)] dark:bg-[rgba(75,85,99,1)]',
-  subtle: 'bg-[rgba(229,231,235,1)] dark:bg-[rgba(56,66,80,1)]',
-  transparent: 'bg-[rgba(229,231,235,1)] dark:bg-[rgba(56,66,80,1)]',
-};
-
-/* ── Border overrides for Secondary-Outline ──────────────────────
- * For secondary-outline, each section has its own 1px border.
- * The inner (divider-adjacent) border is removed; the divider itself
- * provides the 1px visual separation, preventing a 2px doubled gap.
- *
- * All other styles: no border — use VARIANT_CLASSES bg/text only.
- */
-export const SPLIT_BORDER_MAIN: Record<ButtonSplitVariant, string> = {
-  neutral: '',
-  primary: '',
-  'secondary-solid': '',
-  /* border-s = logical start (left in LTR, right in RTL) + top + bottom */
-  'secondary-outline':
-    'border-s border-y border-[rgba(210,214,219,1)] dark:border-[rgba(75,85,99,1)]',
-  subtle: '',
-  transparent: '',
-};
-
-export const SPLIT_BORDER_MENU: Record<ButtonSplitVariant, string> = {
-  neutral: '',
-  primary: '',
-  'secondary-solid': '',
-  /* border-e = logical end (right in LTR, left in RTL) + top + bottom */
-  'secondary-outline':
-    'border-e border-y border-[rgba(210,214,219,1)] dark:border-[rgba(75,85,99,1)]',
-  subtle: '',
-  transparent: '',
-};
-
-/* ── Chevron-down icon ───────────────────────────────────────────
- * arrow-down-01 / Stroke / Rounded — Figma node 4074:5854
- * Re-uses the same path constant as ButtonMenu for consistency.
- * viewBox 0 0 20 20, currentColor stroke, strokeWidth 1.5.
- */
-export const SPLIT_CHEVRON_PATH = 'M5 7.5L10 12.5L15 7.5' as const;
-export const SPLIT_CHEVRON_VIEWBOX = '0 0 20 20' as const;
-
-/* ── Dropdown menu panel ─────────────────────────────────────────
- * Floating panel that appears below the component when open.
- * Uses a min-w so it is at least as wide as a typical button,
- * but grows to fit content.
- *
- * Figma panel tokens:
- *   background: bg-surface-raised (white / dark #1f2a37)
- *   border: border-neutral-primary #d2d6db / dark #4b5563
- *   border-radius: 8px
- *   shadow: medium drop shadow
- */
-export const MENU_PANEL_CLASSES = [
-  'absolute z-50 top-[calc(100%+4px)] start-0',
-  'min-w-[180px] w-max',
-  'flex flex-col p-spacing-xs',
-  'rounded-[8px]',
-  'bg-white dark:bg-[rgba(31,42,55,1)]',
-  'border border-[rgba(210,214,219,1)] dark:border-[rgba(75,85,99,1)]',
-  'shadow-[0px_4px_6px_-2px_rgba(16,24,40,0.05),0px_12px_16px_-4px_rgba(16,24,40,0.1)]',
-].join(' ');
-
-/* ── Dropdown menu item — default state ─────────────────────────── */
-export const MENU_ITEM_CLASSES = [
-  'text-[rgba(22,22,22,1)] dark:text-[rgba(243,244,246,1)]',
-  'hover:bg-[rgba(243,244,246,1)] dark:hover:bg-[rgba(56,66,80,1)]',
-  'active:bg-[rgba(229,231,235,1)] dark:active:bg-[rgba(77,87,97,1)]',
-  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[rgba(22,22,22,1)] focus-visible:ring-offset-1',
-  'dark:focus-visible:ring-[rgba(210,214,219,1)]',
-].join(' ');
-
-/* ── Dropdown menu item — destructive state ─────────────────────── */
-export const MENU_ITEM_DESTRUCTIVE_CLASSES = [
-  'text-[rgba(217,45,32,1)] dark:text-[rgba(253,205,202,1)]',
-  'hover:bg-[rgba(254,243,242,1)] dark:hover:bg-[rgba(60,18,14,1)]',
-  'active:bg-[rgba(254,228,226,1)] dark:active:bg-[rgba(80,24,18,1)]',
-  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[rgba(217,45,32,1)] focus-visible:ring-offset-1',
-].join(' ');
-
-/* ── Dropdown menu item — disabled state ────────────────────────── */
-export const MENU_ITEM_DISABLED_CLASSES = [
-  'text-[rgba(157,164,174,1)] dark:text-[rgba(75,85,99,1)]',
-  'pointer-events-none',
-].join(' ');
-
-/* ── Dropdown menu item icon wrapper ────────────────────────────── */
-export const MENU_ITEM_ICON_CLASSES = 'inline-flex items-center justify-center flex-shrink-0';

package/src/components/ButtonSplit/index.ts

@@ -1,7 +0,0 @@
-export { ButtonSplit } from './ButtonSplit';
-export type {
-  ButtonSplitProps,
-  ButtonSplitMenuItem,
-  ButtonSplitVariant,
-  ButtonSplitSize,
-} from './ButtonSplit.types';

package/src/components/ButtonsWithSdaiaTouch/ButtonHoverPattern.tsx

@@ -1,69 +0,0 @@
-import type { SVGProps } from 'react';
-
-export function ButtonHoverPattern(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      viewBox="0 0 2 2"
-      fill="currentColor"
-      xmlns="http://www.w3.org/2000/svg"
-      aria-hidden="true"
-      focusable="false"
-      {...props}
-    >
-      <path d="M1.80948 0.529785V0.730663L1.6355 0.63025L1.80948 0.529785Z" />
-      <path d="M1.80079 1.24133V1.44216L1.62683 1.34175L1.80079 1.24133Z" />
-      <path d="M1.72437 1.17427L1.55042 1.27473V1.07385L1.72437 1.17427Z" />
-      <path d="M1.83302 0.895996V1.09687L1.65906 0.996461L1.83302 0.895996Z" />
-      <path d="M1.43433 1.43994V1.64082L1.26038 1.54041L1.43433 1.43994Z" />
-      <path d="M1.46342 1.30812L1.23145 1.17425L1.46342 1.04028V1.30812Z" />
-      <path d="M1.46342 1.34163L1.23145 1.4756V1.20776L1.46342 1.34163Z" />
-      <path d="M1.46337 1.00692L1.23145 1.14078V0.873047L1.46337 1.00692Z" />
-      <path d="M1.48155 1.78108L1.30762 1.88154V1.68066L1.48155 1.78108Z" />
-      <path d="M1.20235 1.17435L0.912476 1.0069L1.20235 0.839478V1.17435Z" />
-      <path d="M1.17333 1.54695L0.941406 1.68082V1.41309L1.17333 1.54695Z" />
-      <path d="M1.14427 1.87512L0.970337 1.97554V1.77466L1.14427 1.87512Z" />
-      <path d="M1.77308 1.56465L1.59912 1.66511V1.46423L1.77308 1.56465Z" />
-      <path d="M1.72437 0.83955L1.55042 0.940014V0.739136L1.72437 0.83955Z" />
-      <path d="M1.46342 0.705566V0.973404L1.23145 0.839435L1.46342 0.705566Z" />
-      <path d="M1.14466 1.5929V1.79377L0.970703 1.69331L1.14466 1.5929Z" />
-      <path d="M1.17331 1.51357L0.941406 1.3797L1.17331 1.24573V1.51357Z" />
-      <path d="M0.912476 1.00696L1.20235 1.17441L0.912476 1.34176V1.00696Z" />
-      <path d="M1.7555 0.431346L1.58154 0.53176V0.330933L1.7555 0.431346Z" />
-      <path d="M1.47052 0.138378L1.29651 0.238842V0.0379639L1.47052 0.138378Z" />
-      <path d="M1.46323 0.671883L1.2312 0.805751V0.537964L1.46323 0.671883Z" />
-      <path d="M1.14442 0.368359L0.970459 0.267945L1.14442 0.16748V0.368359Z" />
-      <path d="M1.17309 0.500122V0.767935L0.941162 0.634066L1.17309 0.500122Z" />
-      <path d="M0.912358 0.671997V1.00679L0.622437 0.839421L0.912358 0.671997Z" />
-      <path d="M0.883294 0.600479L0.651367 0.466611L0.883294 0.332642V0.600479Z" />
-      <path d="M0.854403 0.200879L0.68042 0.100465L0.854403 0V0.200879Z" />
-      <path d="M0.593621 0.805776L0.361694 0.671807L0.593621 0.537964V0.805776Z" />
-      <path d="M0.50013 0.152954V0.353833L0.326172 0.253419L0.50013 0.152954Z" />
-      <path d="M1.43475 0.573732L1.26074 0.473267L1.43475 0.372803V0.573732Z" />
-      <path d="M1.14491 0.100465L0.970947 0.200879V0L1.14491 0.100465Z" />
-      <path d="M1.17394 0.466409L0.942017 0.600277V0.332642L1.17394 0.466409Z" />
-      <path d="M1.20296 0.839371L0.913086 1.00679V0.671997L1.20296 0.839371Z" />
-      <path d="M0.855161 0.324535L0.681152 0.424999V0.224121L0.855161 0.324535Z" />
-      <path d="M0.883904 0.634066L0.651978 0.767935V0.500122L0.883904 0.634066Z" />
-      <path d="M0.565097 0.473217L0.391113 0.57363V0.372803L0.565097 0.473217Z" />
-      <path d="M0.191561 0.623974L0.0175781 0.52356L0.191561 0.423096V0.623974Z" />
-      <path d="M0.854673 1.97554L0.680664 1.87512L0.854673 1.77466V1.97554Z" />
-      <path d="M0.912968 1.00696V1.34176L0.623047 1.17431L0.912968 1.00696Z" />
-      <path d="M0.564853 1.69092V1.8918L0.390869 1.79136L0.564853 1.69092Z" />
-      <path d="M0.593865 1.17425L0.361938 1.30812V1.04028L0.593865 1.17425Z" />
-      <path d="M0.593865 0.839536L0.361938 0.973506V0.705566L0.593865 0.839536Z" />
-      <path d="M0.243589 1.50452V1.70534L0.0695801 1.60493L0.243589 1.50452Z" />
-      <path d="M0.274839 0.732056V0.932934L0.10083 0.83252L0.274839 0.732056Z" />
-      <path d="M0.174009 1.01558L0 1.11599V0.915161L0.174009 1.01558Z" />
-      <path d="M0.883345 1.68092L0.651367 1.54706L0.883345 1.41309V1.68092Z" />
-      <path d="M0.912358 1.00693L0.622437 1.17427V0.839478L0.912358 1.00693Z" />
-      <path d="M0.854306 1.70784L0.680298 1.8083V1.60742L0.854306 1.70784Z" />
-      <path d="M0.883268 1.37963L0.651367 1.5136V1.24561L0.883268 1.37963Z" />
-      <path d="M0.564217 1.54036L0.390259 1.64077V1.43994L0.564217 1.54036Z" />
-      <path d="M0.593499 1.20789V1.47565L0.361572 1.34178L0.593499 1.20789Z" />
-      <path d="M0.593499 0.872925V1.14069L0.361572 1.00689L0.593499 0.872925Z" />
-      <path d="M0.274228 1.27473L0.10022 1.17427L0.274228 1.07385V1.27473Z" />
-      <path d="M0.180794 0.67212L0.00683594 0.772534V0.571655L0.180794 0.67212Z" />
-      <path d="M0.190976 1.35384L0.0169678 1.45425V1.2533L0.190976 1.35384Z" />
-    </svg>
-  );
-}