@baishuyun/ai-design 1.0.3 → 1.0.5

package/src/components/bs-entry-select/entry-item.tsx

@@ -17,7 +17,7 @@ export function EntryItem({
   return (
     <div
       className={cn(
-        'flex items-center justify-between h-[34px] px-[10px] cursor-pointer rounded-[4px]',
+        'flex items-center justify-between h-[34px] px-[10px] cursor-pointer rounded-[4px] shrink-0',
         getDepthPadding(depth),
         'hover:bg-[#EFF0F6]',
         isSelected && 'bg-[#EFF0F6]',

package/src/components/bs-entry-select/entry-popover.tsx

@@ -1,6 +1,6 @@
 import { cn } from '../../lib/utils';
 import { transCls } from '../../const/ui';
-import { SearchInput } from './search-input';
+import { SearchInput } from '../agent-helper/search-input';
 import { TreeItemNode } from './tree-item-node';
 import { AppGroupFolder } from './app-group-folder';
 import { OtherAppSection } from './other-app-section';
@@ -44,7 +44,7 @@ export function EntryPopover({
     >
       <SearchInput value={searchQuery} onChange={onSearchChange} />
 
-      <div className="flex flex-col gap-[4px] max-h-[400px] overflow-y-auto">
+      <div className="flex flex-col gap-0 max-h-[400px] overflow-y-auto">
         {hasCurrentApp && (
           <AppGroupFolder label="当前应用表单" searchQuery={searchQuery}>
             {currentAppTree.length > 0 ? (

package/src/components/bs-entry-select/search-input.tsx

@@ -1,32 +1,5 @@
-export function SearchInput({
-  value,
-  onChange,
-}: {
-  value: string;
-  onChange: (v: string) => void;
-}) {
-  return (
-    <div className="flex items-center gap-[6px] border border-[#E0E0E0] rounded-[4px] h-[30px] px-[10px] py-[5px]">
-      <svg
-        width="16"
-        height="16"
-        viewBox="0 0 16 16"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        className="text-[#999999] shrink-0"
-      >
-        <circle cx="7" cy="7" r="4.5" />
-        <path d="M10.5 10.5L14 14" />
-      </svg>
-      <input
-        type="text"
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
-        placeholder="输入表单名称来搜索"
-        className="flex-1 outline-none text-[14px] placeholder:text-[#999999] bg-transparent min-w-0 text-[#030303]"
-      />
-    </div>
-  );
-}
+import { SearchInput as BaseSearch, type SearchInputProps} from '../agent-helper/search-input';
+
+export type { SearchInputProps };
+
+export const SearchInput = (props: SearchInputProps) => <BaseSearch {...props} placeholder="搜索表单或字段"  />;

package/src/components/bs-icons.tsx

@@ -199,6 +199,12 @@ export const ExportIcon = () => (
   </svg>
 );
 
+export const AddIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+    <path d="M14.3994 7.46839H8.53343V1.60139C8.5341 1.53113 8.52074 1.46144 8.49413 1.3964C8.46751 1.33137 8.42819 1.2723 8.37846 1.22266C8.32872 1.17302 8.26958 1.1338 8.2045 1.10731C8.13941 1.08082 8.06969 1.06759 7.99943 1.06839C7.92925 1.06773 7.85964 1.08106 7.79467 1.10761C7.7297 1.13415 7.67068 1.17339 7.62105 1.22302C7.57143 1.27264 7.53219 1.33167 7.50564 1.39664C7.47909 1.4616 7.46576 1.53121 7.46643 1.60139V7.46839H1.59943C1.52925 7.46773 1.45964 7.48106 1.39467 7.50761C1.3297 7.53415 1.27068 7.57339 1.22105 7.62302C1.17143 7.67264 1.13219 7.73167 1.10564 7.79664C1.07909 7.8616 1.06576 7.93121 1.06643 8.00139C1.06643 8.30039 1.30143 8.53439 1.59943 8.53439H7.46643V14.4014C7.46643 14.7004 7.70143 14.9344 7.99943 14.9344C8.06962 14.9349 8.13922 14.9215 8.20418 14.8949C8.26914 14.8683 8.32818 14.8291 8.37785 14.7795C8.42753 14.7299 8.46687 14.671 8.49358 14.6061C8.52028 14.5412 8.53383 14.4716 8.53343 14.4014V8.53439H14.3994C14.4697 8.53519 14.5394 8.52196 14.6045 8.49547C14.6696 8.46898 14.7287 8.42977 14.7785 8.38013C14.8282 8.33049 14.8675 8.27142 14.8941 8.20639C14.9207 8.14135 14.9341 8.07166 14.9334 8.00139C14.9338 7.9312 14.9203 7.86163 14.8936 7.79672C14.8669 7.73181 14.8275 7.67285 14.7779 7.62326C14.7282 7.57367 14.6691 7.53445 14.6042 7.50786C14.5392 7.48128 14.4696 7.46786 14.3994 7.46839Z" fill="currentColor" />
+  </svg>
+)
+
 export const TrashIcon = () => (
   // <FontIcon code="&#xe85f;"></FontIcon>
   <svg
@@ -395,6 +401,64 @@ export const SubformIcon = () => (
   </svg>
 );
 
+export const EmptyCardIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="180" height="124" viewBox="0 0 180 124" fill="none">
+  <path d="M75.9984 98.2004C75.9984 87.2651 67.1337 78.4004 56.1984 78.4004C45.2632 78.4004 36.3984 87.2651 36.3984 98.2004" fill="url(#paint0_linear_27318_10700)"/>
+  <path d="M138.078 40.1919L137.393 39.9491L137.195 39.7526L133.041 35.5946L127.48 30.0312C125.052 32.612 123.701 36.0221 123.703 39.5652C123.716 47.263 129.94 53.4841 137.635 53.5009C143.527 53.5009 148.561 49.8384 150.598 44.6708L146.53 43.2176L138.078 40.1919Z" fill="#B9D5FF"/>
+  <path d="M136.642 36.1227L134.723 34.2024L127.547 27.0297C130.017 24.7044 133.252 23.3634 136.642 23.2598V36.1227Z" fill="#DEEBFF"/>
+  <path d="M138.406 24.6512C145.897 24.8974 151.882 31.0302 151.898 38.5767C151.898 40.0703 151.662 41.5042 151.229 42.8524L138.406 38.266V24.6512Z" fill="#2EBDE4"/>
+  <path d="M91.12 52.3008H90.88C89.296 52.3008 88 50.8048 88 48.9837V43.6179C88 41.7967 89.296 40.3008 90.88 40.3008H91.12C92.704 40.3008 94 41.7967 94 43.6179V49.0162C94 50.8374 92.704 52.3008 91.12 52.3008Z" fill="#1973FF"/>
+  <path d="M124.518 45.1609C123.718 44.3609 122.598 43.8809 121.438 43.8809H60.4381C59.2781 43.8809 58.1581 44.3209 57.3581 45.1609C56.5581 45.9609 56.0781 47.0809 56.0781 48.2409V87.4409C56.0781 88.6009 56.5181 89.7209 57.3581 90.5209C58.1581 91.3209 59.2781 91.8009 60.4381 91.8009H88.0381V94.7209H88.1181L75.7581 102.481C75.1581 102.961 74.7981 103.681 74.7181 104.441C74.6381 105.201 74.8781 105.961 75.3581 106.561C75.8381 107.161 76.5581 107.521 77.3181 107.601C78.0781 107.681 78.8381 107.401 79.4381 106.921L91.2381 99.5209L102.718 106.961C103.918 108.001 105.758 107.881 106.838 106.681C107.878 105.481 107.758 103.641 106.558 102.561L94.1581 94.4809C94.0781 94.4009 93.9581 94.3209 93.8781 94.2409V91.7609H121.478C122.638 91.7609 123.758 91.3209 124.558 90.4809C125.358 89.6809 125.838 88.5609 125.838 87.4009V48.2409C125.798 47.0809 125.318 46.0009 124.518 45.1609Z" fill="url(#paint1_linear_27318_10700)"/>
+  <path d="M82.6 77.9206C82.6 79.4406 81.32 80.7206 79.8 80.7206C78.28 80.7206 77 79.4406 77 77.9206V64.4406C77 62.9206 78.28 61.6406 79.8 61.6406C81.32 61.6406 82.6 62.9206 82.6 64.4406V77.9206Z" fill="#91BCFF"/>
+  <path d="M93.6 77.9205C93.6 79.4405 92.32 80.7205 90.8 80.7205C89.28 80.7205 88 79.4405 88 77.9205V56.3605C88 54.8005 89.28 53.5605 90.8 53.5605C92.32 53.5605 93.6 54.8005 93.6 56.3605V77.9205Z" fill="#91BCFF"/>
+  <path d="M104.6 77.9207C104.6 79.4407 103.32 80.7207 101.8 80.7207C100.28 80.7207 99 79.4407 99 77.9207V72.5207C99 71.0007 100.28 69.7207 101.8 69.7207C103.32 69.7207 104.6 71.0007 104.6 72.5207V77.9207Z" fill="#91BCFF"/>
+  <path d="M88.0383 91.7998V94.7198H88.1183L75.7583 102.48C75.1583 102.96 74.7983 103.68 74.7183 104.44C74.6383 105.2 74.8783 105.96 75.3583 106.56C75.8383 107.16 76.5583 107.52 77.3183 107.6C78.0783 107.68 78.8383 107.4 79.4383 106.92L91.2383 99.5198L102.718 106.96C103.918 108 105.758 107.88 106.838 106.68C107.878 105.48 107.758 103.64 106.558 102.56L94.1583 94.4798C94.0783 94.3998 93.9583 94.3198 93.8783 94.2398V91.7598L88.0383 91.7998Z" fill="#0265FF"/>
+  <path d="M164.797 98.1992C164.797 76.6601 147.336 59.1992 125.797 59.1992C104.258 59.1992 86.7969 76.6601 86.7969 98.1992" fill="url(#paint2_linear_27318_10700)"/>
+  <path d="M146.798 84.5859C147.698 86.3859 138.398 99.8859 138.398 104.386C138.398 108.886 141.698 106.786 145.598 106.786C149.498 106.786 153.398 110.086 152.798 102.286C152.198 94.4859 145.898 82.7859 146.798 84.5859Z" fill="url(#paint3_linear_27318_10700)" fill-opacity="0.2"/>
+  <path d="M145.598 100.486L144.998 104.686L142.898 103.786L144.998 106.486L144.698 111.886H146.798L146.198 104.086L148.298 101.386L145.898 103.186L145.598 100.486Z" fill="#0265FF"/>
+  <path d="M54.9969 98.292C55.4469 99.192 50.7969 105.942 50.7969 108.192C50.7969 110.442 52.4469 109.392 54.3969 109.392C56.3469 109.392 58.2969 111.042 57.9969 107.142C57.6969 103.242 54.5469 97.392 54.9969 98.292Z" fill="url(#paint4_linear_27318_10700)" fill-opacity="0.2"/>
+  <path d="M54.3969 106.242L54.0969 108.342L53.0469 107.892L54.0969 109.242L53.9469 111.942H54.9969L54.6969 108.042L55.7469 106.692L54.5469 107.592L54.3969 106.242Z" fill="#0265FF"/>
+  <path d="M36.1 98.2456C36.325 98.6956 34 102.071 34 103.196C34 104.321 34.825 103.796 35.8 103.796C36.775 103.796 37.75 104.621 37.6 102.671C37.45 100.721 35.875 97.7956 36.1 98.2456Z" fill="url(#paint5_linear_27318_10700)" fill-opacity="0.2"/>
+  <path d="M35.8 102.221L35.65 103.271L35.125 103.046L35.65 103.721L35.575 105.071H36.1L35.95 103.121L36.475 102.446L35.875 102.896L35.8 102.221Z" fill="#0265FF"/>
+  <path d="M48.8069 16C48.8069 19.7647 48.041 22.5882 46.5091 24.4706C44.9772 26.3529 41.6069 27.2941 36.3984 27.2941C41.1396 27.5294 44.3567 28.3137 46.0495 29.6471C47.7423 30.9805 48.6615 34.4314 48.8069 40C48.8069 34.6667 49.4197 31.2157 50.6452 29.6471C51.8708 28.0784 54.3218 27.1373 57.9984 26.8235C54.1075 26.5139 51.6075 25.706 50.4984 24.4C49.3893 23.094 48.8255 20.294 48.8069 16Z" fill="url(#paint6_linear_27318_10700)" fill-opacity="0.2"/>
+  <path d="M19.2043 59.1992C19.2043 61.0816 18.8213 62.4933 18.0553 63.4345C17.2894 64.3757 15.6043 64.8463 13 64.8463C15.3706 64.9639 16.9791 65.3561 17.8255 66.0227C18.672 66.6894 19.1315 68.4149 19.2043 71.1992C19.2043 68.5325 19.5106 66.8071 20.1234 66.0227C20.7362 65.2384 21.9617 64.7678 23.8 64.611C21.9035 64.4797 20.678 64.0875 20.1234 63.4345C19.5689 62.7815 19.2625 61.3697 19.2043 59.1992Z" fill="url(#paint7_linear_27318_10700)" fill-opacity="0.2"/>
+  <defs>
+    <linearGradient id="paint0_linear_27318_10700" x1="56.1984" y1="78.4004" x2="56.1984" y2="98.2004" gradientUnits="userSpaceOnUse">
+      <stop offset="0.495192" stop-color="#0265FF" stop-opacity="0.1"/>
+      <stop offset="1" stop-color="white" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="paint1_linear_27318_10700" x1="90.4981" y1="18.0009" x2="90.4981" y2="97.0009" gradientUnits="userSpaceOnUse">
+      <stop stop-color="white" stop-opacity="0"/>
+      <stop offset="1" stop-color="#0265FF" stop-opacity="0.3"/>
+    </linearGradient>
+    <linearGradient id="paint2_linear_27318_10700" x1="125.797" y1="59.1992" x2="125.797" y2="98.1992" gradientUnits="userSpaceOnUse">
+      <stop offset="0.495192" stop-color="#0265FF" stop-opacity="0.1"/>
+      <stop offset="1" stop-color="white" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="paint3_linear_27318_10700" x1="145.629" y1="84.4004" x2="145.629" y2="107.479" gradientUnits="userSpaceOnUse">
+      <stop stop-color="white"/>
+      <stop offset="1" stop-color="#0265FF"/>
+    </linearGradient>
+    <linearGradient id="paint4_linear_27318_10700" x1="54.4122" y1="98.1992" x2="54.4122" y2="109.739" gradientUnits="userSpaceOnUse">
+      <stop stop-color="white"/>
+      <stop offset="1" stop-color="#0265FF"/>
+    </linearGradient>
+    <linearGradient id="paint5_linear_27318_10700" x1="35.8077" y1="98.1992" x2="35.8077" y2="103.969" gradientUnits="userSpaceOnUse">
+      <stop stop-color="white"/>
+      <stop offset="1" stop-color="#0265FF"/>
+    </linearGradient>
+    <linearGradient id="paint6_linear_27318_10700" x1="1419.09" y1="2416" x2="1419.09" y2="16" gradientUnits="userSpaceOnUse">
+      <stop stop-color="white"/>
+      <stop offset="1" stop-color="#0265FF"/>
+    </linearGradient>
+    <linearGradient id="paint7_linear_27318_10700" x1="704.346" y1="1259.2" x2="704.346" y2="59.1992" gradientUnits="userSpaceOnUse">
+      <stop stop-color="white"/>
+      <stop offset="1" stop-color="#0265FF"/>
+    </linearGradient>
+  </defs>
+</svg>
+)
+
 export const MultilineTextIcon = () => (
   <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
     <path
@@ -404,6 +468,14 @@ export const MultilineTextIcon = () => (
   </svg>
 );
 
+export const FormFieldIcon = ({
+  size = 28
+}) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 28 28" fill="none">
+    <path d="M18.3749 24.5282H9.62489C9.51177 24.5263 9.39944 24.5473 9.29468 24.59C9.18992 24.6328 9.09492 24.6963 9.01541 24.7768C8.93591 24.8573 8.87356 24.953 8.83213 25.0583C8.7907 25.1636 8.77106 25.2762 8.77439 25.3892C8.77439 25.881 9.13839 26.2502 9.62489 26.2502H18.3749C18.8614 26.2502 19.2254 25.8827 19.2254 25.3892C19.229 25.2761 19.2095 25.1634 19.1682 25.058C19.1268 24.9526 19.0645 24.8567 18.9849 24.7762C18.9054 24.6957 18.8103 24.6322 18.7054 24.5895C18.6005 24.5469 18.4881 24.5261 18.3749 24.5282ZM25.6304 1.75195H2.36775C2.01425 1.75195 1.75 2.11945 1.75 2.6112C1.75 3.10295 2.01425 3.4722 2.36775 3.4722H25.6304C25.9839 3.4722 26.2499 3.1047 26.2499 2.6112C26.2201 2.11945 25.9541 1.75195 25.6304 1.75195ZM14.7629 22.199V3.3112C14.7629 2.9577 14.3954 2.69345 13.9019 2.69345C13.4101 2.69345 13.0409 2.9577 13.0409 3.3112V22.199C13.0409 22.5525 13.4101 22.8185 13.9019 22.8185C14.3954 22.7887 14.7629 22.5227 14.7629 22.199Z" fill="#4D609F"/>
+  </svg>
+)
+
 export const DatetimeIcon = () => (
   <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
     <path
@@ -667,6 +739,12 @@ export const StopIcon = () => (
   </svg>
 );
 
+export const SearchIcon = ({ className }: { className?: string }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" className={className}>
+    <path d="M14.8985 13.9522L12.2795 11.2492C13.1525 10.1142 13.6755 8.80619 13.6755 7.23519C13.6755 3.74519 10.7965 0.867188 7.30645 0.867188C3.81745 0.866188 0.939453 3.74519 0.939453 7.23419C0.939453 10.7242 3.81845 13.6042 7.30745 13.6042C8.79045 13.6042 10.1875 13.0802 11.3215 12.2072L13.9385 14.8242C14.0255 14.9992 14.1995 14.9992 14.3745 14.9992C14.5362 14.9958 14.6912 14.9335 14.8105 14.8242C15.0725 14.6502 15.0725 14.2142 14.8985 13.9522ZM2.24845 7.32219C2.24951 5.98052 2.78296 4.6941 3.73166 3.7454C4.68037 2.79669 5.96678 2.26325 7.30845 2.26219C8.65012 2.26325 9.93654 2.79669 10.8852 3.7454C11.8339 4.6941 12.3674 5.98052 12.3685 7.32219C12.3674 8.66386 11.8339 9.95027 10.8852 10.899C9.93654 11.8477 8.65012 12.3811 7.30845 12.3822C5.96678 12.3811 4.68037 11.8477 3.73166 10.899C2.78296 9.95027 2.24951 8.66386 2.24845 7.32219Z" fill="currentColor"/>
+  </svg>
+);
+
 export const EditIcon = () => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
@@ -1233,4 +1311,51 @@ export const HExpandIcon = () => (
   <path d="M16.573 12.8547C16.5097 12.7918 16.4594 12.7171 16.4251 12.6347C16.3908 12.5523 16.3731 12.4639 16.3731 12.3747C16.3731 12.2855 16.3908 12.1971 16.4251 12.1147C16.4594 12.0323 16.5097 11.9576 16.573 11.8947L17.6705 10.8072H12.5393C12.359 10.8053 12.1867 10.7332 12.0588 10.6062C11.9309 10.4792 11.8575 10.3074 11.8543 10.1272C11.8543 9.7597 12.1605 9.45595 12.5393 9.4472L17.6618 9.45595L16.573 8.37595C16.5099 8.31311 16.4597 8.23841 16.4256 8.15615C16.3914 8.07388 16.3738 7.98567 16.3738 7.89658C16.3738 7.80749 16.3914 7.71927 16.4256 7.63701C16.4597 7.55474 16.5099 7.48004 16.573 7.4172C16.7022 7.29062 16.8759 7.21973 17.0568 7.21973C17.2376 7.21973 17.4113 7.29062 17.5405 7.4172L19.7993 9.6547C19.8626 9.71756 19.9129 9.79234 19.9472 9.87472C19.9815 9.9571 19.9992 10.0455 19.9992 10.1347C19.9992 10.2239 19.9815 10.3123 19.9472 10.3947C19.9129 10.4771 19.8626 10.5518 19.7993 10.6147L17.5405 12.8547C17.4113 12.9813 17.2376 13.0522 17.0568 13.0522C16.8759 13.0522 16.7022 12.9813 16.573 12.8547ZM2.32802 10.8072L3.42552 11.8947C3.48886 11.9576 3.53913 12.0323 3.57344 12.1147C3.60775 12.1971 3.62541 12.2855 3.62541 12.3747C3.62541 12.4639 3.60775 12.5523 3.57344 12.6347C3.53913 12.7171 3.48886 12.7918 3.42552 12.8547C3.29631 12.9813 3.12264 13.0522 2.94177 13.0522C2.76089 13.0522 2.58722 12.9813 2.45802 12.8547L0.199266 10.6147C0.136112 10.5519 0.085997 10.4772 0.0518005 10.3949C0.017604 10.3126 0 10.2244 0 10.1353C0 10.0462 0.017604 9.95802 0.0518005 9.87576C0.085997 9.79349 0.136112 9.71879 0.199266 9.65595L2.45802 7.4172C2.58722 7.29062 2.76089 7.21973 2.94177 7.21973C3.12264 7.21973 3.29631 7.29062 3.42552 7.4172C3.48867 7.48004 3.53879 7.55474 3.57298 7.63701C3.60718 7.71927 3.62478 7.80749 3.62478 7.89658C3.62478 7.98567 3.60718 8.07388 3.57298 8.15615C3.53879 8.23841 3.48867 8.31311 3.42552 8.37595L2.33677 9.45595H7.44927C7.82052 9.45595 8.12677 9.7597 8.13552 10.136C8.13194 10.3161 8.05826 10.4878 7.93013 10.6146C7.80199 10.7413 7.62949 10.8131 7.44927 10.8147L2.32677 10.8072H2.32802Z" fill="black" fill-opacity="0.2"/>
   <path d="M16.573 12.8547C16.5097 12.7918 16.4594 12.7171 16.4251 12.6347C16.3908 12.5523 16.3731 12.4639 16.3731 12.3747C16.3731 12.2855 16.3908 12.1971 16.4251 12.1147C16.4594 12.0323 16.5097 11.9576 16.573 11.8947L17.6705 10.8072H12.5393C12.359 10.8053 12.1867 10.7332 12.0588 10.6062C11.9309 10.4792 11.8575 10.3074 11.8543 10.1272C11.8543 9.7597 12.1605 9.45595 12.5393 9.4472L17.6618 9.45595L16.573 8.37595C16.5099 8.31311 16.4597 8.23841 16.4256 8.15615C16.3914 8.07388 16.3738 7.98567 16.3738 7.89658C16.3738 7.80749 16.3914 7.71927 16.4256 7.63701C16.4597 7.55474 16.5099 7.48004 16.573 7.4172C16.7022 7.29062 16.8759 7.21973 17.0568 7.21973C17.2376 7.21973 17.4113 7.29062 17.5405 7.4172L19.7993 9.6547C19.8626 9.71756 19.9129 9.79234 19.9472 9.87472C19.9815 9.9571 19.9992 10.0455 19.9992 10.1347C19.9992 10.2239 19.9815 10.3123 19.9472 10.3947C19.9129 10.4771 19.8626 10.5518 19.7993 10.6147L17.5405 12.8547C17.4113 12.9813 17.2376 13.0522 17.0568 13.0522C16.8759 13.0522 16.7022 12.9813 16.573 12.8547ZM2.32802 10.8072L3.42552 11.8947C3.48886 11.9576 3.53913 12.0323 3.57344 12.1147C3.60775 12.1971 3.62541 12.2855 3.62541 12.3747C3.62541 12.4639 3.60775 12.5523 3.57344 12.6347C3.53913 12.7171 3.48886 12.7918 3.42552 12.8547C3.29631 12.9813 3.12264 13.0522 2.94177 13.0522C2.76089 13.0522 2.58722 12.9813 2.45802 12.8547L0.199266 10.6147C0.136112 10.5519 0.085997 10.4772 0.0518005 10.3949C0.017604 10.3126 0 10.2244 0 10.1353C0 10.0462 0.017604 9.95802 0.0518005 9.87576C0.085997 9.79349 0.136112 9.71879 0.199266 9.65595L2.45802 7.4172C2.58722 7.29062 2.76089 7.21973 2.94177 7.21973C3.12264 7.21973 3.29631 7.29062 3.42552 7.4172C3.48867 7.48004 3.53879 7.55474 3.57298 7.63701C3.60718 7.71927 3.62478 7.80749 3.62478 7.89658C3.62478 7.98567 3.60718 8.07388 3.57298 8.15615C3.53879 8.23841 3.48867 8.31311 3.42552 8.37595L2.33677 9.45595H7.44927C7.82052 9.45595 8.12677 9.7597 8.13552 10.136C8.13194 10.3161 8.05826 10.4878 7.93013 10.6146C7.80199 10.7413 7.62949 10.8131 7.44927 10.8147L2.32677 10.8072H2.32802Z" fill="black" fill-opacity="0.2"/>
 </svg>
-)
+)
+
+export const CommonTypeIcon = ({
+  fill = 'currentColor',
+  size = 28,
+}) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 28 28" fill={fill}>
+  <path d="M25.0691 7.13125L14.5254 1.00625C14.2629 0.83125 13.9129 0.83125 13.6066 1.00625L2.97539 7.0875C2.74781 7.23922 2.58599 7.4896 2.51846 7.7531C2.4979 7.83332 2.49414 7.91656 2.49414 7.99937V20.0813C2.49414 20.3875 2.66914 20.6938 2.93164 20.8687L13.4754 26.9937C13.6066 27.0813 13.7816 27.125 13.9566 27.125C14.1316 27.125 14.2629 27.0813 14.3941 26.9937L24.9816 20.9125C25.2441 20.7375 25.4191 20.4312 25.4629 20.125L25.5066 7.91875C25.5066 7.6125 25.3316 7.30625 25.0691 7.13125ZM23.6293 18.5919C23.6269 19.2159 23.2923 19.7914 22.7513 20.1023L14.834 24.6521C14.2912 24.964 13.6231 24.9622 13.082 24.6474L5.20553 20.0647C4.66481 19.7501 4.33315 19.1708 4.33561 18.5452L4.37144 9.40814C4.37388 8.78412 4.70844 8.20861 5.24949 7.89769L13.1668 3.34793C13.7096 3.03601 14.3777 3.0378 14.9188 3.35263L22.7953 7.93531C23.336 8.2499 23.6676 8.82921 23.6652 9.45478L23.6293 18.5919Z" fill="#4ACCC1"/>
+  <path d="M8.35656 9.88664C7.91906 9.62414 7.35031 9.75539 7.08781 10.1929C6.82531 10.6304 6.95656 11.1991 7.39406 11.4616L13.0816 14.9616L13.1691 20.2116C13.1691 20.6929 13.6066 21.1304 14.0878 21.1304C14.6128 21.1304 15.0066 20.6929 15.0066 20.2116L14.8753 15.0054L20.6066 11.4616C21.0441 11.1991 21.1753 10.6304 20.9128 10.1929C20.6503 9.75539 20.0816 9.62414 19.6441 9.88664L14.0003 13.3866L8.35656 9.88664Z" fill="#4ACCC1"/>
+</svg>
+);
+
+export const FlowNodeTypeIcon = ({
+  size = 28,
+}) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 28 28" fill="none">
+    <path d="M22.3125 23.625C22.1398 23.6248 21.9688 23.5905 21.8094 23.5242C21.6499 23.4579 21.505 23.3609 21.3831 23.2386C21.2611 23.1163 21.1644 22.9712 21.0986 22.8115C21.0327 22.6519 20.9989 22.4808 20.9991 22.3081C20.9994 22.1354 21.0336 21.9645 21.0999 21.805C21.1662 21.6455 21.2633 21.5007 21.3856 21.3787C21.5078 21.2567 21.6529 21.1601 21.8126 21.0942C21.9722 21.0283 22.1433 20.9945 22.316 20.9947C22.6648 20.9952 22.9991 21.1342 23.2454 21.3812C23.4917 21.6281 23.6298 21.9628 23.6294 22.3116C23.6289 22.6604 23.4899 22.9947 23.2429 23.241C22.996 23.4874 22.6613 23.6255 22.3125 23.625ZM14 12.6875C14.3481 12.6875 14.6819 12.8258 14.9281 13.0719C15.1742 13.3181 15.3125 13.6519 15.3125 14C15.3125 14.3481 15.1742 14.6819 14.9281 14.9281C14.6819 15.1742 14.3481 15.3125 14 15.3125C13.6519 15.3125 13.3181 15.1742 13.0719 14.9281C12.8258 14.6819 12.6875 14.3481 12.6875 14C12.6875 13.6519 12.8258 13.3181 13.0719 13.0719C13.3181 12.8258 13.6519 12.6875 14 12.6875ZM5.6875 7C5.51491 6.99977 5.34406 6.96555 5.18469 6.89929C5.02533 6.83303 4.88057 6.73603 4.7587 6.61383C4.51256 6.36703 4.37454 6.03256 4.375 5.684C4.37546 5.33544 4.51437 5.00134 4.76117 4.7552C5.00797 4.50906 5.34244 4.37104 5.691 4.3715C6.03956 4.37196 6.37366 4.51087 6.6198 4.75767C6.86594 5.00447 7.00396 5.33894 7.0035 5.6875C7.00304 6.03606 6.86413 6.37016 6.61733 6.6163C6.37053 6.86244 6.03606 7.00046 5.6875 7ZM22.3125 19.25C20.7725 19.25 19.495 20.3927 19.2815 21.875H9.352C8.49643 21.8741 7.67617 21.5338 7.07119 20.9288C6.46621 20.3238 6.12593 19.5036 6.125 18.648V17.9918C6.125 16.2137 7.57225 14.7665 9.352 14.7665H11.0337C11.205 15.4231 11.589 16.0046 12.1256 16.4199C12.6623 16.8353 13.3214 17.0613 14 17.0625C15.4245 17.0625 16.625 16.0842 16.9662 14.7665H18.648C19.9676 14.7651 21.2327 14.2403 22.1657 13.3072C23.0988 12.3742 23.6236 11.1091 23.625 9.7895C23.6236 8.46994 23.0988 7.20483 22.1657 6.27176C21.2327 5.3387 19.9676 4.81389 18.648 4.8125H8.6205C8.43141 4.18122 8.04407 3.62761 7.51582 3.23362C6.98757 2.83964 6.34649 2.62624 5.6875 2.625C3.99875 2.625 2.625 3.99875 2.625 5.6875C2.625 7.37625 3.99875 8.75 5.6875 8.75C7.07175 8.75 8.24425 7.826 8.62225 6.5625H18.6497C19.2866 6.56512 19.9085 6.75595 20.4373 7.11099C20.966 7.46603 21.3781 7.96944 21.6215 8.55795C21.865 9.14647 21.9291 9.79382 21.8058 10.4187C21.6824 11.0435 21.3771 11.6179 20.9282 12.0697C20.3245 12.6753 19.5037 13.0148 18.648 13.0165H16.898C16.6919 12.4111 16.3018 11.8853 15.7822 11.5126C15.2626 11.1398 14.6395 10.9388 14 10.9375C12.656 10.9375 11.5115 11.809 11.1003 13.0165H9.35025C8.0316 13.0184 6.76747 13.5429 5.83488 14.4751C4.90229 15.4074 4.37731 16.6714 4.375 17.99V18.6462C4.37593 19.9661 4.90053 21.2317 5.83365 22.1651C6.76676 23.0986 8.03214 23.6236 9.352 23.625H19.5457C20.0392 24.6575 21.0928 25.375 22.3125 25.375C24.0012 25.375 25.375 24.0012 25.375 22.3125C25.375 20.6238 24.0012 19.25 22.3125 19.25Z" fill="#FF9921"/>
+  </svg>
+);
+
+export const ScheduleTypeIcon = ({
+  size = 28,
+}) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 28 28" fill="none">
+  <path d="M14 1.75C17.2489 1.75 20.3647 3.04062 22.6621 5.33794C24.9594 7.63526 26.25 10.7511 26.25 14C26.25 17.2489 24.9594 20.3647 22.6621 22.6621C20.3647 24.9594 17.2489 26.25 14 26.25C10.7511 26.25 7.63526 24.9594 5.33794 22.6621C3.04062 20.3647 1.75 17.2489 1.75 14C1.75 10.7511 3.04062 7.63526 5.33794 5.33794C7.63526 3.04062 10.7511 1.75 14 1.75ZM14 3.5C12.6211 3.5 11.2557 3.77159 9.98182 4.29926C8.70791 4.82694 7.55039 5.60036 6.57538 6.57538C5.60036 7.55039 4.82694 8.70791 4.29926 9.98182C3.77159 11.2557 3.5 12.6211 3.5 14C3.5 15.3789 3.77159 16.7443 4.29926 18.0182C4.82694 19.2921 5.60036 20.4496 6.57538 21.4246C7.55039 22.3996 8.70791 23.1731 9.98182 23.7007C11.2557 24.2284 12.6211 24.5 14 24.5C16.7848 24.5 19.4555 23.3938 21.4246 21.4246C23.3938 19.4555 24.5 16.7848 24.5 14C24.5 11.2152 23.3938 8.54451 21.4246 6.57538C19.4555 4.60625 16.7848 3.5 14 3.5ZM13.125 7C13.3298 6.99993 13.5281 7.0717 13.6855 7.20281C13.8428 7.33391 13.9491 7.51605 13.986 7.7175L14 7.875V14H19.25C19.4548 13.9999 19.6531 14.0717 19.8105 14.2028C19.9678 14.3339 20.0741 14.5161 20.111 14.7175L20.125 14.875C20.1251 15.0798 20.0533 15.2781 19.9222 15.4355C19.7911 15.5928 19.6089 15.6991 19.4075 15.736L19.25 15.75H13.125C12.9202 15.7501 12.7219 15.6783 12.5645 15.5472C12.4072 15.4161 12.3009 15.2339 12.264 15.0325L12.25 14.875V7.875C12.25 7.64294 12.3422 7.42038 12.5063 7.25628C12.6704 7.09219 12.8929 7 13.125 7Z" fill="#F06648"/>
+</svg>
+);
+
+export const FormTypeIcon = ({
+  size = 28,
+}) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 28 28" fill="none">
+  <path d="M16.954 1.75L24.5 8.35275V23.625C24.5 24.3212 24.2234 24.9889 23.7312 25.4812C23.2389 25.9734 22.5712 26.25 21.875 26.25H6.125C5.42881 26.25 4.76113 25.9734 4.26884 25.4812C3.77656 24.9889 3.5 24.3212 3.5 23.625V4.375C3.5 3.67881 3.77656 3.01113 4.26884 2.51884C4.76113 2.02656 5.42881 1.75 6.125 1.75H16.954ZM14.875 3.5H6.125C5.89294 3.5 5.67038 3.59219 5.50628 3.75628C5.34219 3.92038 5.25 4.14294 5.25 4.375V23.625C5.25 23.8571 5.34219 24.0796 5.50628 24.2437C5.67038 24.4078 5.89294 24.5 6.125 24.5H21.875C22.1071 24.5 22.3296 24.4078 22.4937 24.2437C22.6578 24.0796 22.75 23.8571 22.75 23.625V10.5H17.5C16.8475 10.5 16.2183 10.2569 15.7353 9.81817C15.2522 9.37944 14.9499 8.77653 14.8872 8.127L14.875 7.875V3.5ZM19.25 18.375C19.4687 18.3746 19.6795 18.4561 19.8411 18.6034C20.0027 18.7507 20.1033 18.9532 20.123 19.1709C20.1428 19.3887 20.0803 19.606 19.9479 19.78C19.8154 19.9539 19.6227 20.072 19.4075 20.111L19.25 20.125H8.75C8.53134 20.1254 8.32046 20.0439 8.15888 19.8966C7.9973 19.7493 7.89673 19.5468 7.87697 19.3291C7.85721 19.1113 7.9197 18.894 8.05213 18.72C8.18457 18.5461 8.37734 18.428 8.5925 18.389L8.75 18.375H19.25ZM19.25 14C19.4687 13.9996 19.6795 14.0811 19.8411 14.2284C20.0027 14.3757 20.1033 14.5782 20.123 14.7959C20.1428 15.0137 20.0803 15.231 19.9479 15.405C19.8154 15.5789 19.6227 15.697 19.4075 15.736L19.25 15.75H8.75C8.53134 15.7504 8.32046 15.6689 8.15888 15.5216C7.9973 15.3743 7.89673 15.1718 7.87697 14.9541C7.85721 14.7363 7.9197 14.519 8.05213 14.345C8.18457 14.1711 8.37734 14.053 8.5925 14.014L8.75 14H19.25ZM16.625 3.78875V7.875C16.6249 8.07979 16.6967 8.27813 16.8278 8.43545C16.9589 8.59278 17.1411 8.69914 17.3425 8.736L17.5 8.75H22.2968L16.625 3.78875Z" fill="#0265FF"/>
+</svg>
+)
+
+export const GoToFormIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+  >
+    <path d="M14.625 6.36445V6.26445C14.625 6.23945 14.625 6.23945 14.6 6.21445C14.6 6.18945 14.6 6.18945 14.575 6.16445C14.575 6.13945 14.55 6.13945 14.55 6.11445C14.55 6.08945 14.525 6.08945 14.525 6.06445C14.525 6.06445 14.525 6.03945 14.5 6.03945L9.975 0.514453L9.95 0.489453C9.95 0.464453 9.925 0.464453 9.9 0.439453C9.9 0.439453 9.875 0.414453 9.85 0.414453C9.825 0.414453 9.825 0.389453 9.8 0.389453C9.775 0.389453 9.775 0.364453 9.75 0.364453C9.725 0.364453 9.725 0.339453 9.7 0.339453C9.675 0.339453 9.675 0.339453 9.65 0.314453H2.675C1.95 0.314453 1.375 0.939453 1.375 1.73945V8.28945C1.375 8.58945 1.6 8.81445 1.9 8.81445C2.2 8.81445 2.425 8.58945 2.425 8.28945V1.73945C2.425 1.51445 2.55 1.36445 2.675 1.36445H9.05V5.43945C9.05 6.23945 9.65 6.88945 10.4 6.88945H13.6V13.8395C13.6 14.0645 13.475 14.2645 13.3 14.2645H2.725C2.575 14.2645 2.425 14.0645 2.425 13.8395V12.8895C2.425 12.5895 2.2 12.3645 1.9 12.3645C1.6 12.3645 1.375 12.5895 1.375 12.8895V13.8395C1.375 14.6395 1.975 15.2895 2.725 15.2895H13.3C14.05 15.2895 14.65 14.6395 14.65 13.8395L14.625 6.36445ZM10.1 5.43945V2.31445L13 5.86445H10.375C10.225 5.86445 10.1 5.66445 10.1 5.43945Z" />
+    <path d="M1.42585 10.5887C1.42585 10.8887 1.65085 11.1137 1.95085 11.1137H8.30085L7.07585 12.3387C6.87585 12.5387 6.87585 12.8637 7.07585 13.0887C7.17585 13.1887 7.30085 13.2387 7.45085 13.2387C7.60085 13.2387 7.72585 13.1887 7.82585 13.0887L9.95085 10.9637C10.0508 10.8637 10.1008 10.7137 10.1008 10.5637C10.1008 10.4137 10.0508 10.2637 9.95085 10.1637L7.82585 8.03867C7.62585 7.83867 7.30085 7.83867 7.07585 8.03867C6.87585 8.23867 6.87585 8.56367 7.07585 8.78867L8.37585 10.0887H1.95085C1.88287 10.0842 1.81471 10.0939 1.75068 10.1172C1.68664 10.1404 1.62811 10.1766 1.57878 10.2236C1.52945 10.2706 1.4904 10.3273 1.46407 10.3901C1.43775 10.453 1.42474 10.5206 1.42585 10.5887Z" />
+  </svg>
+);

package/src/components/check-card.tsx

@@ -0,0 +1,77 @@
+import { useRef, useState } from 'react';
+import { cn } from '../lib/utils';
+import { SquareChecker, type SquareCheckerProps } from './square-checker';
+
+export interface CheckCardProps extends SquareCheckerProps {
+  title: string;
+  description?: string;
+}
+
+export const CheckCard = ({
+  defaultChecked = false,
+  checked: controlledChecked,
+  onCheckedChange,
+  title,
+  description,
+  disabled = false,
+  className,
+}: CheckCardProps) => {
+  const [internalChecked, setInternalChecked] = useState<boolean>(!!defaultChecked);
+
+  const isControlled = controlledChecked !== undefined;
+  const isChecked = isControlled ? !!controlledChecked : internalChecked;
+
+  const isCheckedRef = useRef(isChecked);
+  isCheckedRef.current = isChecked;
+
+  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    // if the target is not the card itself (e.g. clicking on a link inside the card), do not toggle
+    if (e.target !== e.currentTarget) {
+      return;
+    }
+
+    if (disabled) return;
+
+    const newChecked = !isCheckedRef.current;
+
+
+    if (!isControlled) {
+      setInternalChecked(newChecked);
+    }
+    onCheckedChange?.(newChecked);
+  };
+
+  return (
+    <div
+      role="button"
+      tabIndex={disabled ? -1 : 0}
+      aria-checked={isChecked}
+      aria-disabled={disabled}
+      onClick={handleClick}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          handleClick(e as unknown as React.MouseEvent<HTMLDivElement>);
+        }
+      }}
+      className={cn(
+        'flex flex-col gap-[6px] p-[10px] rounded-[4px] cursor-pointer select-none bg-white',
+        'border',
+        isChecked ? 'border-[#0265FF]' : 'border-[#E0E0E0]',
+        disabled && 'cursor-not-allowed opacity-50',
+        className
+      )}
+    >
+      <div className="inline-flex items-center gap-[6px] pointer-events-none">
+          <SquareChecker
+            checked={isChecked}
+            disabled={disabled}
+          />
+        <span className="text-[#121111] text-[14px]">{title}</span>
+      </div>
+      {description != null && (
+        <p className="text-[#666] text-[12px] pl-[22px] pointer-events-none">{description}</p>
+      )}
+    </div>
+  );
+};

package/src/components/date-range-picker.tsx

@@ -0,0 +1,91 @@
+import { useState, useCallback } from 'react';
+import { format } from 'date-fns';
+import { cn } from '../lib/utils';
+import { CalendarIcon } from './icons/calendar-icon';
+import { Popover, PopoverTrigger, PopoverContent } from './ui/popover';
+import { Calendar } from './ui/calendar';
+import type { DateRange } from 'react-day-picker';
+
+export interface DateRangePickerProps {
+  value?: DateRange;
+  onChange?: (range: DateRange | undefined) => void;
+  className?: string;
+}
+
+export function DateRangePicker({
+  value,
+  onChange,
+  className,
+}: DateRangePickerProps) {
+  const [open, setOpen] = useState(false);
+
+  const handleSelect = useCallback(
+    (range: DateRange | undefined) => {
+      onChange?.(range);
+      if (range?.from && range?.to) {
+        setOpen(false);
+      }
+    },
+    [onChange]
+  );
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <div
+          className={cn(
+            'flex items-center h-[34px] rounded-[4px] bg-white border border-[#e0e0e0] pl-[2px] pr-[10px] py-[2px] cursor-pointer',
+            'hover:border-[#0265FF]',
+            open && 'border-[#0265FF]',
+            className
+          )}
+        >
+          <div className="flex flex-1 items-center min-w-0">
+            <div className="flex-1 flex items-center justify-center h-[30px] px-[10px] py-[7px] rounded-[4px] min-w-0">
+              <span
+                className={cn(
+                  'flex-1 text-[14px] leading-[normal] truncate',
+                  value?.from
+                    ? 'text-[#030303]'
+                    : 'text-[#999999]'
+                )}
+              >
+                {value?.from
+                  ? format(value.from, 'yyyy-MM-dd')
+                  : '开始日期'}
+              </span>
+            </div>
+            <div className="shrink-0 flex items-center justify-center w-[12px] h-[30px]">
+              <span className="text-[14px] text-[#030303] whitespace-nowrap leading-[normal]">
+                ~
+              </span>
+            </div>
+            <div className="flex-1 flex items-center justify-center h-[30px] px-[10px] py-[7px] rounded-[4px] min-w-0">
+              <span
+                className={cn(
+                  'flex-1 text-[14px] leading-[normal] truncate',
+                  value?.to
+                    ? 'text-[#030303]'
+                    : 'text-[#999999]'
+                )}
+              >
+                {value?.to
+                  ? format(value.to, 'yyyy-MM-dd')
+                  : '结束日期'}
+              </span>
+            </div>
+          </div>
+          <CalendarIcon className="shrink-0 size-[16px] text-[#999999]" />
+        </div>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0" align="start">
+        <Calendar
+          mode="range"
+          selected={value}
+          onSelect={handleSelect}
+          numberOfMonths={2}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+}

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>
+);