@baishuyun/ai-design 1.0.2 → 1.0.4

package/src/components/field-checker.tsx

@@ -0,0 +1,182 @@
+import { memo, useEffect, useRef, useState } from 'react';
+import { FieldType, ValueOf } from '@baishuyun/types';
+import { FieldTypeNameMap } from '../const/ui';
+import { ToolUIPart } from 'ai';
+import { FieldsTools, Option } from '@baishuyun/agents';
+import LineChecker from './line-checker';
+import { OptionItem } from './option-item';
+import { FieldIcon } from './field-icon';
+
+type Field = ValueOf<Pick<ToolUIPart<FieldsTools>, 'output'>>;
+
+export interface FieldCheckerProps {
+  field: ValueOf<Pick<ToolUIPart<FieldsTools>, 'output'>>;
+  isSubField?: boolean;
+  disabled?: boolean;
+  icon?: React.ReactNode;
+  onChange?: (checked: boolean, field: Field, parentFieldName?: string, index?: number) => void;
+  value?: unknown;
+  checked?: boolean;
+  streaming?: boolean;
+  confirmed?: boolean;
+  onLoaded?: (field: Field) => void;
+}
+
+export const FieldChecker = memo(
+  ({
+    field,
+    disabled,
+    isSubField,
+    onChange,
+    onLoaded,
+    icon,
+    value,
+    checked,
+    streaming,
+    confirmed,
+  }: FieldCheckerProps) => {
+    const { widget, label } = field;
+    if (!widget) {
+      return null;
+    }
+
+    const { type } = widget;
+
+    const t = type as FieldType;
+
+    if (!FieldTypeNameMap.hasOwnProperty(type)) {
+      return null;
+    }
+
+    const typeDesc = FieldTypeNameMap[t] || FieldTypeNameMap.unknown;
+
+    const isSubForm = type === 'subform';
+
+    const items = isSubForm ? [] : (widget.items as Option[]) || [];
+
+    // --- subform sub-field state management ---
+    const subFields = isSubForm ? (widget.items as Field[]) : [];
+    const [subCheckedMap, setSubCheckedMap] = useState<Record<number, boolean>>(() => {
+      const result: Record<number, boolean> = {};
+      subFields.forEach((_, i) => {
+        result[i] = true;
+      });
+      return result;
+    });
+
+    // When parent checked prop changes from outside, sync all sub-fields
+    const prevChecked = useRef(checked);
+    useEffect(() => {
+      if (isSubForm && checked !== prevChecked.current) {
+        prevChecked.current = checked;
+        if (checked !== undefined) {
+          const result: Record<number, boolean> = {};
+          subFields.forEach((_, i) => {
+            result[i] = checked;
+          });
+          setSubCheckedMap(result);
+        }
+      }
+    }, [checked, isSubForm, subFields.length]);
+
+    const handleSubFieldChange = (subChecked: boolean, subField: Field, index: number) => {
+      setSubCheckedMap((prev) => {
+        const next = { ...prev, [index]: subChecked };
+        // If all sub-fields are now unchecked, uncheck the parent subform
+        const allChecked = Object.values(next).every(Boolean);
+        if (allChecked) {
+          onChange?.(true, field);
+        }
+
+        const allUnchecked = Object.values(next).every((v) => v === false);
+        if (allUnchecked) {
+          onChange?.(false, field);
+        }
+
+        return next;
+      });
+      onChange?.(subChecked, subField, field.widget.widgetName, index);
+    };
+    // --- end subform state management ---
+
+    useEffect(() => {
+      onLoaded?.(field);
+    }, []);
+
+    const handleCheck = (newChecked: boolean) => {
+      onChange?.(newChecked, field);
+    };
+
+    const extraPadding = isSubField ? 'pl-[38px]' : '';
+
+    // 表单填充
+    if (value) {
+      return (
+        <LineChecker
+          title={label}
+          disabled={disabled}
+          checked={checked}
+          defaultChecked={true}
+          onCheckedChange={handleCheck}
+          icon={icon}
+          className={extraPadding}
+          shortDesc={value as string}
+        />
+      );
+    }
+
+    return (
+      <>
+        <LineChecker
+          streaming={streaming}
+          confirmed={confirmed}
+          title={label}
+          disabled={disabled}
+          checked={checked}
+          defaultChecked={true}
+          onCheckedChange={handleCheck}
+          icon={icon}
+          shortDesc={typeDesc}
+          className={extraPadding}
+          extra={
+            items.length ? (
+              <>
+                {items.map(({ value, text, color }) => (
+                  <OptionItem key={value} color={color ? 'white' : undefined} bgColor={color}>
+                    {text}
+                  </OptionItem>
+                ))}
+              </>
+            ) : null
+          }
+        />
+        {isSubForm
+          ? subFields.map((subField: Field, index: number) => (
+              <FieldChecker
+                confirmed={confirmed}
+                streaming={streaming}
+                key={subField.label}
+                isSubField={true}
+                disabled={disabled}
+                checked={subCheckedMap[index]}
+                field={subField}
+                icon={<FieldIcon type={subField.widget?.type} />}
+                onChange={(subChecked) => {
+                  handleSubFieldChange(subChecked, subField, index);
+                }}
+              />
+            ))
+          : null}
+      </>
+    );
+  },
+  (p1, p2) => {
+    return (
+      p1.field?.label === p2.field?.label &&
+      p1.disabled === p2.disabled &&
+      p1.checked === p2.checked &&
+      p1.confirmed === p2.confirmed &&
+      p1.streaming === p2.streaming
+    );
+  }
+);

package/src/components/field-icon.tsx

@@ -0,0 +1,13 @@
+import { FIELD_ICON_CODE_MAP } from '../const/ui';
+import { FieldType } from '@baishuyun/types';
+import { FontIcon } from './font-icon';
+import { FormulasIcon } from './bs-icons';
+
+export const FieldIcon = ({ type }: { type: FieldType }) => {
+  const code = FIELD_ICON_CODE_MAP[type] || 'unknown';
+  if (type === 'formula') {
+    return <FormulasIcon />;
+  }
+
+  return <FontIcon code={code} />;
+};

package/src/components/field-value-checker.tsx

@@ -0,0 +1,118 @@
+import { memo, useEffect } from 'react';
+import { FieldType, ValueOf } from '@baishuyun/types';
+import { FieldTypeNameMap } from '../const/ui';
+import { ToolUIPart } from 'ai';
+import { FieldsTools } from '@baishuyun/agents';
+import { isSubformFieldEqual, toHumanReadable } from '../lib/utils';
+import { SubformFieldsValueChecker } from './subform-fields-value-checker';
+import LineChecker from './line-checker';
+
+type Field = ValueOf<Pick<ToolUIPart<FieldsTools>, 'output'>>;
+
+export interface FieldValueCheckerProps {
+  field: ValueOf<Pick<ToolUIPart<FieldsTools>, 'output'>>;
+  isSubField?: boolean;
+  disabled?: boolean;
+  readonly?: boolean;
+  onChange?: (checked: boolean, field: Field, parentFieldName?: string, index?: number) => void;
+  onLoaded?: (field: Field) => void;
+  streaming?: boolean;
+}
+
+export const FieldValueChecker = memo(
+  ({
+    field,
+    disabled,
+    isSubField,
+    readonly,
+    streaming,
+    onChange,
+    onLoaded,
+  }: FieldValueCheckerProps) => {
+    const { widget, label } = field;
+    if (!widget) {
+      return null;
+    }
+
+    const { type, value: v } = widget;
+
+    const t = type as FieldType;
+
+    const value = toHumanReadable(v, t);
+
+    if (!FieldTypeNameMap.hasOwnProperty(type)) {
+      return null;
+    }
+
+    const isSubForm = type === 'subform';
+
+    useEffect(() => {
+      onLoaded?.(field);
+    }, []);
+
+    const handleCheck = (checked: boolean) => {
+      onChange?.(checked, field);
+    };
+
+    const extraPadding = isSubField ? 'pl-6' : '';
+
+    return (
+      <>
+        <LineChecker
+          streaming={streaming}
+          title={label}
+          disabled={disabled}
+          defaultChecked={true}
+          onCheckedChange={handleCheck}
+          className={extraPadding}
+          readonly={readonly}
+          shortDesc={isSubForm ? '' : (value as string)}
+        />
+        {isSubForm && (
+          <SubformFieldsValueChecker
+            readonly={readonly}
+            subformField={field}
+            onChange={(detail) => {
+              onChange?.(detail.checked, detail.field, detail.parentFieldName, detail.row);
+            }}
+            streaming={streaming}
+          />
+        )}
+      </>
+    );
+  },
+  (p1, p2) => {
+    // 标签一致
+    const isLabelEqual = p1.field?.label === p2.field?.label;
+    if (!isLabelEqual) {
+      return false;
+    }
+
+    // id 一致
+    const isFieldNameEqual = p1.field?.widget?.widgetName === p2.field?.widget?.widgetName;
+    if (!isFieldNameEqual) {
+      return false;
+    }
+
+    // 禁用状态一致
+    const isDisabledEqual = p1.disabled === p2.disabled;
+    if (!isDisabledEqual) {
+      return false;
+    }
+
+    // 只读状态一致
+    const isReadonlyEqual = p1.readonly === p2.readonly;
+    if (!isReadonlyEqual) {
+      return false;
+    }
+
+    // 流式状态一致
+    const isStreamingEqual = p1.streaming === p2.streaming;
+    if (!isStreamingEqual) {
+      return false;
+    }
+
+    // 进一步比较子表单下的字段
+    return isSubformFieldEqual(p1?.field, p2?.field);
+  }
+);

package/src/components/font-icon.tsx

@@ -1,17 +1,63 @@
+import { getIconUnicode } from "@baishuyun/ai-feat-utils";
+
+function getFormIconClass(icon: number): string {
+  const isNew = icon >= 25;
+  const newStr = isNew ? '-new' : '';
+  return `node-icon icon-bsy-form${newStr} icon${newStr}-bsy-form-${icon}`;
+}
+
+export const AppIcon = ({
+  name
+}: {
+  name: number | string;
+}) => {
+  return (
+    <div className={"imgbg-bsy-app imgbg-bsy-app-" + name}/>
+  );
+}
+
 export const FontIcon = ({
   code,
+  name,
   className,
   style,
+  color,
 }: {
-  code: string;
+  code?: string;
+  name?: number;
   className?: string;
   style?: React.CSSProperties;
+  color?: string;
 }) => {
+  if (!code && !name) {
+    return null;
+  }
+
+  if (code) {
+    return (
+      <i
+        className={`sdk-icon ${className || ''}`}
+        style={{ ...style, color }}
+        dangerouslySetInnerHTML={{ __html: code }}
+      />
+    );
+  }
+
+  const iconCode = code || getIconUnicode(name?.toString() || '');
+  if (!iconCode) {
+    return (
+      <i
+        className={getFormIconClass(name!)}
+        style={{ fontSize: 16, lineHeight: 1 }}
+      />
+    )
+  }
+
   return (
     <i
       className={`sdk-icon ${className || ''}`}
-      style={style}
-      dangerouslySetInnerHTML={{ __html: code }}
+      style={{ ...style, color }}
+      dangerouslySetInnerHTML={{ __html: iconCode }}
     />
   );
 };

package/src/components/icon-card.tsx

@@ -0,0 +1,67 @@
+import { ReactNode } from 'react';
+import { cn } from '../lib/utils';
+import { transCls } from '../const/ui';
+
+export interface IconCardProps {
+  icon: ReactNode;
+  iconBgColor: string;
+  title: string;
+  description: string;
+  height?: number;
+  selected?: boolean;
+  badge?: string;
+  onClick: () => void;
+}
+
+export const IconCard = ({
+  icon,
+  iconBgColor,
+  title,
+  description,
+  height,
+  selected,
+  badge,
+  onClick,
+}: IconCardProps) => {
+  return (
+    <div
+      className={cn(
+        'flex flex-col p-[10px] rounded-[4px] cursor-pointer',
+        'border',
+        {
+          'bg-[#EFF0F6] border-[#EFF0F6]': selected,
+          'bg-white border-[#E0E0E0]': !selected,
+        },
+        transCls
+      )}
+      style={{ height }}
+      onClick={onClick}
+    >
+      <div className="flex items-start gap-[12px] w-full">
+        <div
+          className="shrink-0 size-[42px] rounded-[23px] flex items-center justify-center p-[7px]"
+          style={{ backgroundColor: iconBgColor }}
+        >
+          <div className="size-[28px] flex items-center justify-center">
+            {icon}
+          </div>
+        </div>
+        <div className="flex flex-col gap-[6px] min-w-0 flex-1">
+          <div className="flex items-center justify-between w-full">
+            <p className="text-[14px] font-bold text-[#030303] truncate">
+              {title}
+            </p>
+            {badge && (
+              <span className="shrink-0 bg-[#4ACCC1] text-white text-[12px] leading-[normal] px-[6px] h-[20px] rounded-[4px] flex items-center justify-center ml-[8px]">
+                {badge}
+              </span>
+            )}
+          </div>
+          <p className="text-[12px] text-[#999] w-full">
+            {description}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/icons/calendar-icon.tsx

@@ -0,0 +1,5 @@
+export const CalendarIcon = ({ className }: { className?: string }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none" className={className}>
+  <path d="M4.396 3.383H4.576C4.846 3.383 4.95 2.993 4.95 2.723V0.569C4.95 0.299 4.815 0 4.546 0H4.366C4.096 0 3.978 0.299 3.978 0.569V2.813C3.978 2.993 4.128 3.383 4.396 3.383ZM9.322 3.383H9.5C9.77 3.383 9.89 2.993 9.89 2.723V0.569C9.89 0.299 9.783 0 9.516 0H9.335C9.066 0 8.933 0.299 8.933 0.569V2.813C8.933 2.993 9.142 3.383 9.322 3.383ZM12.147 0.971053L10.5 0.971V1.924L12.147 1.92405C12.685 1.92405 13.135 2.45405 13.135 2.99305V3.89105H0.928V2.99305C0.928 2.45505 1.378 1.92505 1.917 1.92505L3.5 1.925V0.972L2.005 0.972053C0.928 0.972053 0 2.09505 0 3.08205V11.7911C0 12.7791 0.905053 14 1.98305 14H12.2131C13.2011 14 14 12.8681 14 11.7911V3.08305C13.912 2.09605 13.224 0.973053 12.146 0.973053V0.970053L12.147 0.971053ZM13.084 11.7011C13.084 12.3291 12.7541 13.044 12.1241 13.044H1.98505C1.44705 13.044 0.959 12.3291 0.959 11.7911V4.78805H13.088V11.7001H13.086L13.084 11.7011ZM8.63004 5.94605C8.96004 5.94605 9.17804 6.34705 9.07204 6.71005L9.03904 6.80005L6.69705 11.9791C6.57005 12.2561 6.28405 12.3561 6.05705 12.2021C5.85705 12.0641 5.77005 11.7721 5.84205 11.5151L5.87705 11.4191L7.83205 7.09705H5.35005C5.12005 7.09705 4.92805 6.89505 4.88905 6.62605L4.88105 6.52205C4.88105 6.24005 5.04705 6.00505 5.26505 5.95605L5.34905 5.94705L8.63004 5.94605ZM8.5 0.972V1.924H5.43V0.972H8.502H8.5Z" fill="#666666"/>
+</svg>
+);

package/src/components/icons/clear-all-icon.tsx

@@ -0,0 +1,5 @@
+export const ClearAllIcon = ({ className }: { className?: string }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none" className={className}>
+    <path d="M7 0C7.91925 -1.93718e-08 8.8295 0.18106 9.67878 0.532843C10.5281 0.884626 11.2997 1.40024 11.9497 2.05025C12.5998 2.70026 13.1154 3.47194 13.4672 4.32122C13.8189 5.17049 14 6.08075 14 7C14 7.91925 13.8189 8.8295 13.4672 9.67878C13.1154 10.5281 12.5998 11.2997 11.9497 11.9497C11.2997 12.5998 10.5281 13.1154 9.67878 13.4672C8.8295 13.8189 7.91925 14 7 14C3.13372 14 1.39103e-08 10.8658 0 7C0 3.13372 3.13372 1.39103e-08 7 0ZM10.1495 3.85C10.0301 3.7308 9.86825 3.66386 9.69953 3.66386C9.53081 3.66386 9.36898 3.7308 9.24956 3.85L7 6.10058L4.74993 3.85C4.6295 3.73566 4.46918 3.67288 4.30313 3.67503C4.13708 3.67718 3.97844 3.7441 3.86102 3.86153C3.7436 3.97895 3.67668 4.13759 3.67452 4.30364C3.67237 4.46968 3.73515 4.63001 3.84949 4.75044L6.10109 7L3.85 9.24956C3.73566 9.36999 3.67288 9.53031 3.67503 9.69636C3.67718 9.86241 3.7441 10.021 3.86153 10.1385C3.97895 10.2559 4.13759 10.3228 4.30364 10.325C4.46969 10.3271 4.63001 10.2643 4.75044 10.15L7 7.8984L9.24956 10.1495C9.37027 10.2621 9.52995 10.3234 9.69497 10.3205C9.85999 10.3177 10.0175 10.2509 10.1342 10.1342C10.2509 10.0175 10.3178 9.86008 10.3208 9.69507C10.3237 9.53005 10.2625 9.37033 10.15 9.24956L7.8984 7L10.1495 4.74993C10.2688 4.63049 10.3359 4.46856 10.3359 4.29971C10.3359 4.13086 10.2688 3.96892 10.1495 3.84949V3.85Z" fill="#666666"/>
+  </svg>
+);

package/src/components/icons/empty-table-icon.tsx

@@ -0,0 +1,104 @@
+export const EmptyTableIcon = () => (
+  <svg width="226" height="140" viewBox="0 0 226 140" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_27318_12913" style={{maskType: 'alpha'}} maskUnits="userSpaceOnUse" x="2" y="104" width="224" height="26">
+<rect x="2" y="104" width="224" height="26" fill="white"/>
+</mask>
+<g mask="url(#mask0_27318_12913)">
+<ellipse cx="114" cy="125.388" rx="112" ry="21.3877" fill="url(#paint0_linear_27318_12913)"/>
+</g>
+<ellipse cx="180.5" cy="88" rx="9.5" ry="13" fill="url(#paint1_linear_27318_12913)"/>
+<path d="M180.174 115.619V76.75L181.313 115.619H180.174Z" fill="#D5DDF4"/>
+<path d="M180.335 98.452L174.316 92.9456L180.335 96.6705V98.452Z" fill="#D5DDF4"/>
+<path d="M183.263 87.1152L180.335 90.3543V91.488L183.263 87.1152Z" fill="#D5DDF4"/>
+<path d="M180.361 114.658L151.396 115.619H180.361V114.658Z" fill="url(#paint2_linear_27318_12913)"/>
+<ellipse cx="57.0939" cy="96.3957" rx="5.5" ry="7" transform="rotate(-4.32208 57.0939 96.3957)" fill="url(#paint3_linear_27318_12913)"/>
+<path d="M57.9574 110.568L56.5527 91.9824L56.609 110.429L57.9574 110.568Z" fill="#D5DDF4"/>
+<path d="M57.2532 102.29L59.9123 99.4604L57.1893 101.444L57.2532 102.29Z" fill="#D5DDF4"/>
+<path d="M55.4569 97.0143L56.9627 98.4465L57.0034 98.9846L55.4569 97.0143Z" fill="#D5DDF4"/>
+<path d="M57.7578 109.621L25.897 112.752L57.8303 110.58L57.7578 109.621Z" fill="url(#paint4_linear_27318_12913)"/>
+<g filter="url(#filter0_f_27318_12913)">
+<ellipse cx="114" cy="105" rx="32" ry="3" fill="#D9E3FF"/>
+</g>
+<path d="M100.076 41.8107C99.8672 41.319 99.9595 40.8175 100.317 40.4996C101.071 39.8294 102.543 40.2799 102.984 41.3161L108.731 54.7977C109.054 55.5548 108.657 56.2807 107.846 56.418C107.036 56.5551 106.119 56.053 105.798 55.2965L100.076 41.8107Z" fill="#90ACF8"/>
+<path d="M100.076 41.8107C99.8672 41.319 99.9595 40.8175 100.317 40.4996C101.071 39.8294 102.543 40.2799 102.984 41.3161L108.731 54.7977C109.054 55.5548 108.657 56.2807 107.846 56.418C107.036 56.5551 106.119 56.053 105.798 55.2965L100.076 41.8107Z" fill="#90ACF8" fillOpacity="0.2"/>
+<path d="M128.076 41.8107C127.867 41.319 127.96 40.8175 128.317 40.4996C129.071 39.8294 130.543 40.2799 130.984 41.3161L136.731 54.7977C137.054 55.5548 136.657 56.2807 135.846 56.418C135.036 56.5551 134.119 56.053 133.798 55.2965L128.076 41.8107Z" fill="#90ACF8"/>
+<path d="M128.076 41.8107C127.867 41.319 127.96 40.8175 128.317 40.4996C129.071 39.8294 130.543 40.2799 130.984 41.3161L136.731 54.7977C137.054 55.5548 136.657 56.2807 135.846 56.418C135.036 56.5551 134.119 56.053 133.798 55.2965L128.076 41.8107Z" fill="#90ACF8" fillOpacity="0.2"/>
+<rect x="83" y="49.0039" width="62" height="56" rx="6" fill="#A1BCFF"/>
+<path d="M83 55.0039C83 51.6902 85.6863 49.0039 89 49.0039H139C142.314 49.0039 145 51.6902 145 55.0039V99.0039C145 102.318 142.314 105.004 139 105.004H89C85.6863 105.004 83 102.318 83 99.0039V55.0039Z" fill="#6590F8" fillOpacity="0.2"/>
+<rect x="85" y="51.0039" width="58" height="52" rx="6" fill="white"/>
+<mask id="mask1_27318_12913" style={{maskType: 'alpha'}} maskUnits="userSpaceOnUse" x="85" y="51" width="58" height="53">
+<rect x="85" y="51.0039" width="58" height="52" rx="6" fill="white"/>
+</mask>
+<g mask="url(#mask1_27318_12913)">
+<g filter="url(#filter4_f_27318_12913)">
+<circle cx="94.5" cy="50.5039" r="22.5" fill="#B9FAFF"/>
+</g>
+</g>
+<path d="M99.2387 41.3748C99.5599 40.6177 100.478 40.1151 101.289 40.2524C102.1 40.3896 102.496 41.1146 102.175 41.8717L96.5177 55.2053C96.1965 55.9624 95.2787 56.4649 94.4678 56.3277C93.6569 56.1905 93.2599 55.4655 93.5811 54.7084L99.2387 41.3748Z" fill="#90ACF8"/>
+<path d="M99.2387 41.3748C99.5599 40.6177 100.478 40.1151 101.289 40.2524C102.1 40.3896 102.496 41.1146 102.175 41.8717L96.5177 55.2053C96.1965 55.9624 95.2787 56.4649 94.4678 56.3277C93.6569 56.1905 93.2599 55.4655 93.5811 54.7084L99.2387 41.3748Z" fill="#90ACF8" fillOpacity="0.2"/>
+<path d="M127.239 41.3748C127.56 40.6177 128.478 40.1151 129.289 40.2524C130.1 40.3896 130.496 41.1146 130.175 41.8717L124.518 55.2053C124.196 55.9624 123.279 56.4649 122.468 56.3277C121.657 56.1905 121.26 55.4655 121.581 54.7084L127.239 41.3748Z" fill="#90ACF8"/>
+<path d="M127.239 41.3748C127.56 40.6177 128.478 40.1151 129.289 40.2524C130.1 40.3896 130.496 41.1146 130.175 41.8717L124.518 55.2053C124.196 55.9624 123.279 56.4649 122.468 56.3277C121.657 56.1905 121.26 55.4655 121.581 54.7084L127.239 41.3748Z" fill="#90ACF8" fillOpacity="0.2"/>
+<path d="M93 72C95.5455 72 122.061 72 135 72" stroke="#CEDCF6" strokeWidth="0.5"/>
+<path d="M93 78C95.5455 78 122.061 78 135 78" stroke="#CEDCF6" strokeWidth="0.5"/>
+<path d="M93 84C95.5455 84 122.061 84 135 84" stroke="#CEDCF6" strokeWidth="0.5"/>
+<path d="M93 90C95.5455 90 122.061 90 135 90" stroke="#CEDCF6" strokeWidth="0.5"/>
+<path d="M93 65C93 63.8954 93.8954 63 95 63H133C134.105 63 135 63.8954 135 65V67H93V65Z" fill="#90ACF8"/>
+<path d="M81.1403 34.5888C79.9314 33.9913 77.705 34.2123 77.705 34.2123C77.705 34.2123 78.8677 36.5458 80.2271 37.3255C81.4631 38.0345 83.8153 38.0059 83.8153 38.0059C83.8153 38.0059 82.6624 35.3412 81.1403 34.5888Z" fill="url(#paint5_linear_27318_12913)"/>
+<path d="M87.2808 35.0187C87.3779 34.2182 86.8061 33.009 86.8061 33.009C86.8061 33.009 85.7135 34.1317 85.5431 35.0534C85.3882 35.8916 85.876 37.2102 85.876 37.2102C85.876 37.2102 87.1586 36.0266 87.2808 35.0187Z" fill="url(#paint6_linear_27318_12913)"/>
+<path d="M153.928 47.3664C156.181 46.1202 158.244 42.3936 158.244 42.3936C158.244 42.3936 153.297 41.6869 150.592 42.9715C148.133 44.1394 145.63 47.8547 145.63 47.8547C145.63 47.8547 151.09 48.9356 153.928 47.3664Z" fill="url(#paint7_linear_27318_12913)"/>
+<path fillRule="evenodd" clipRule="evenodd" d="M153.637 76.3923L155.699 72.8501L157.686 76.4173L153.637 76.3923ZM153.367 88.8968L153.492 76.9325L157.821 76.9591L157.696 88.9234L153.367 88.8968ZM157.667 91.6253C157.661 92.2343 157.202 92.7251 156.642 92.7217L154.342 92.7084C153.782 92.7049 153.333 92.2083 153.339 91.5994L153.362 89.4388L157.691 89.4654L157.667 91.6253Z" fill="url(#paint8_linear_27318_12913)"/>
+<path fillRule="evenodd" clipRule="evenodd" d="M153.637 76.3923L155.699 72.8501L157.686 76.4173L153.637 76.3923ZM153.367 88.8968L153.492 76.9325L157.821 76.9591L157.696 88.9234L153.367 88.8968ZM157.667 91.6253C157.661 92.2343 157.202 92.7251 156.642 92.7217L154.342 92.7084C153.782 92.7049 153.333 92.2083 153.339 91.5994L153.362 89.4388L157.691 89.4654L157.667 91.6253Z" fill="url(#paint9_linear_27318_12913)" fillOpacity="0.2"/>
+<defs>
+<filter id="filter0_f_27318_12913" x="78" y="98" width="72" height="14" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
+<feFlood floodOpacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="2" result="effect1_foregroundBlur_27318_12913"/>
+</filter>
+<filter id="filter4_f_27318_12913" x="8" y="-35.9961" width="173" height="173" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
+<feFlood floodOpacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="32" result="effect1_foregroundBlur_27318_12913"/>
+</filter>
+<linearGradient id="paint0_linear_27318_12913" x1="114" y1="104" x2="114" y2="125.628" gradientUnits="userSpaceOnUse">
+<stop stopColor="#E6EEFF"/>
+<stop offset="1" stopColor="white" stopOpacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_27318_12913" x1="180.5" y1="75" x2="180.5" y2="101" gradientUnits="userSpaceOnUse">
+<stop stopColor="#E7EFFF"/>
+<stop offset="1" stopColor="#F3F7FD"/>
+</linearGradient>
+<linearGradient id="paint2_linear_27318_12913" x1="180.361" y1="115.139" x2="151.396" y2="115.139" gradientUnits="userSpaceOnUse">
+<stop stopColor="#D5DDF4"/>
+<stop offset="1" stopColor="#EDF2FF"/>
+</linearGradient>
+<linearGradient id="paint3_linear_27318_12913" x1="57.0939" y1="89.3957" x2="57.0939" y2="103.396" gradientUnits="userSpaceOnUse">
+<stop stopColor="#E7EFFF"/>
+<stop offset="1" stopColor="#F3F7FD"/>
+</linearGradient>
+<linearGradient id="paint4_linear_27318_12913" x1="57.5801" y1="109.876" x2="25.8608" y2="112.273" gradientUnits="userSpaceOnUse">
+<stop stopColor="#D5DDF4"/>
+<stop offset="1" stopColor="#EDF2FF"/>
+</linearGradient>
+<linearGradient id="paint5_linear_27318_12913" x1="80.3215" y1="37.4237" x2="81.2554" y2="34.6" gradientUnits="userSpaceOnUse">
+<stop stopColor="#DBE6FF"/>
+<stop offset="1" stopColor="#F1F5FF"/>
+</linearGradient>
+<linearGradient id="paint6_linear_27318_12913" x1="85.5063" y1="35.1263" x2="87.2977" y2="35.0905" gradientUnits="userSpaceOnUse">
+<stop stopColor="#DBE6FF"/>
+<stop offset="1" stopColor="#F1F5FF"/>
+</linearGradient>
+<linearGradient id="paint7_linear_27318_12913" x1="150.335" y1="43.013" x2="153.754" y2="47.5582" gradientUnits="userSpaceOnUse">
+<stop stopColor="#DBE6FF"/>
+<stop offset="1" stopColor="#F1F5FF"/>
+</linearGradient>
+<linearGradient id="paint8_linear_27318_12913" x1="151.15" y1="98.5161" x2="150.2" y2="78.1749" gradientUnits="userSpaceOnUse">
+<stop stopColor="#6893F9"/>
+<stop offset="1" stopColor="#92B3FD"/>
+</linearGradient>
+<linearGradient id="paint9_linear_27318_12913" x1="151.15" y1="98.5161" x2="150.2" y2="78.1749" gradientUnits="userSpaceOnUse">
+<stop stopColor="#6893F9"/>
+<stop offset="1" stopColor="#92B3FD"/>
+</linearGradient>
+</defs>
+</svg>
+);

package/src/components/icons/grids-icon.tsx

@@ -0,0 +1,5 @@
+export const GridsIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+    <path d="M6.5 8.5C7.05228 8.5 7.5 8.94772 7.5 9.5V14C7.5 14.5177 7.10667 14.9438 6.60254 14.9951L6.5 15H2L1.89746 14.9951C1.42703 14.9472 1.05278 14.573 1.00488 14.1025L1 14V9.5C1 8.94772 1.44772 8.5 2 8.5H6.5ZM14 8.5C14.5523 8.5 15 8.94772 15 9.5V14C15 14.5177 14.6067 14.9438 14.1025 14.9951L14 15H9.5L9.39746 14.9951C8.92703 14.9472 8.55278 14.573 8.50488 14.1025L8.5 14V9.5C8.5 8.94772 8.94772 8.5 9.5 8.5H14ZM9.5 14H14V9.5H9.5V14ZM2 14H6.5V9.5H2V14ZM6.5 1C7.05228 1 7.5 1.44772 7.5 2V6.5C7.5 7.01768 7.10667 7.44379 6.60254 7.49512L6.5 7.5H2L1.89746 7.49512C1.42703 7.44722 1.05278 7.07297 1.00488 6.60254L1 6.5V2C1 1.44772 1.44772 1 2 1H6.5ZM14 1C14.5523 1 15 1.44772 15 2V6.5C15 7.01768 14.6067 7.44379 14.1025 7.49512L14 7.5H9.5L9.39746 7.49512C8.92703 7.44722 8.55278 7.07297 8.50488 6.60254L8.5 6.5V2C8.5 1.44772 8.94772 1 9.5 1H14ZM2 6.5H6.5V2H2V6.5ZM9.5 6.5H14V2H9.5V6.5Z" fill="#666666"/>
+  </svg>
+);