sdaia-ui 1.0.1

package/src/components/ButtonSplit/ButtonSplit.tsx

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

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

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

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

package/src/components/ButtonsWithSdaiaTouch/ButtonHoverPattern.tsx

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