@povio/ui 0.0.2 → 0.0.3

package/package.json

@@ -1,17 +1,74 @@
 {
   "name": "@povio/ui",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "type": "module",
-  "main": "index.js",
-  "exports": {
-    ".": "./index.ts",
-    "./styles": "./index.css"
-  },
-  "types": "./index.d.ts",
+  "module": "src/index.ts",
+  "types": "src/index.ts",
+  "files": [
+    "src"
+  ],
+  "imports": {
+  "#ui/*": [
+    "./src/*",
+    "./src/*.tsx",
+    "./src/*/index.ts",
+    "./src/*/index.tsx",
+    "./src/*.ts",
+    "./src/*.d.ts"
+  ]
+},
   "homepage": "https://povio.com",
   "license": "UNLICENSED",
   "peerDependencies": {
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0"
-  }
+  "react": "^19.1.0",
+  "react-dom": "^19.1.0"
+},
+  "dependencies": {
+  "@dnd-kit/core": "^6.3.1",
+  "@dnd-kit/modifiers": "^9.0.0",
+  "@dnd-kit/sortable": "^10.0.0",
+  "@dnd-kit/utilities": "^3.2.2",
+  "@hookform/resolvers": "^5.2.2",
+  "@internationalized/date": "^3.10.0",
+  "@react-aria/button": "^3.14.2",
+  "@react-aria/calendar": "^3.9.2",
+  "@react-aria/focus": "^3.21.2",
+  "@react-aria/i18n": "^3.12.13",
+  "@react-aria/utils": "^3.31.0",
+  "@react-stately/calendar": "^3.9.0",
+  "@react-stately/datepicker": "^3.15.2",
+  "@react-types/shared": "^3.32.1",
+  "@tanstack/react-query": "~5.85.9",
+  "@tanstack/react-table": "^8.21.3",
+  "@tiptap/core": "^2.26.3",
+  "@tiptap/extension-color": "^2.26.3",
+  "@tiptap/extension-heading": "^2.26.3",
+  "@tiptap/extension-highlight": "^2.26.3",
+  "@tiptap/extension-link": "^2.26.3",
+  "@tiptap/extension-placeholder": "^2.26.3",
+  "@tiptap/extension-text-align": "^2.26.3",
+  "@tiptap/extension-text-style": "^2.26.3",
+  "@tiptap/extension-underline": "^2.26.3",
+  "@tiptap/pm": "^2.26.3",
+  "@tiptap/react": "^2.26.3",
+  "@tiptap/starter-kit": "^2.26.3",
+  "class-variance-authority": "^0.7.1",
+  "clsx": "^2.1.1",
+  "i18next": "^25.6.0",
+  "loglevel": "^1.9.2",
+  "loglevel-plugin-prefix": "^0.8.4",
+  "luxon": "^3.7.2",
+  "motion": "~12.23.24",
+  "react-aria": "^3.44.0",
+  "react-aria-components": "^1.13.0",
+  "react-hook-form": "^7.65.0",
+  "react-i18next": "^15.7.4",
+  "react-responsive": "^10.0.1",
+  "react-stately": "^3.42.0",
+  "react-toastify": "^11.0.5",
+  "react-use-measure": "^2.1.7",
+  "tailwindcss": "^4.1.15",
+  "tailwindcss-react-aria-components": "^2.0.1",
+  "zod": "^4.1.12"
+}
 }

package/src/assets/icons/AlignCenter.tsx

@@ -0,0 +1,16 @@
+import type { SVGProps } from "react";
+
+export const AlignCenterIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 25 24"
+    className="fill-current"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M4.586 20.5a.73.73 0 0 1-.534-.216.73.73 0 0 1-.216-.534q0-.32.216-.535A.73.73 0 0 1 4.586 19h15.5q.318 0 .534.216a.73.73 0 0 1 .216.534q0 .32-.216.535a.73.73 0 0 1-.534.215zm4-3.875a.73.73 0 0 1-.534-.216.73.73 0 0 1-.216-.534q0-.32.216-.534a.73.73 0 0 1 .534-.216h7.5q.318 0 .534.216a.73.73 0 0 1 .216.534q0 .32-.216.535a.73.73 0 0 1-.534.215zm-4-3.875a.73.73 0 0 1-.534-.216.73.73 0 0 1-.216-.534q0-.32.216-.534a.73.73 0 0 1 .534-.216h15.5q.318 0 .534.216a.73.73 0 0 1 .216.534q0 .32-.216.534a.73.73 0 0 1-.534.216zm4-3.875a.73.73 0 0 1-.534-.216.73.73 0 0 1-.216-.534q0-.32.216-.535a.73.73 0 0 1 .534-.215h7.5q.318 0 .534.216a.73.73 0 0 1 .216.534q0 .32-.216.534a.73.73 0 0 1-.534.216zM4.586 5a.73.73 0 0 1-.534-.216.73.73 0 0 1-.216-.534q0-.32.216-.534a.73.73 0 0 1 .534-.216h15.5q.318 0 .534.216a.73.73 0 0 1 .216.534q0 .32-.216.535a.73.73 0 0 1-.534.215z"
+    />
+  </svg>
+);

package/src/assets/icons/AlignLeft.tsx

@@ -0,0 +1,16 @@
+import type { SVGProps } from "react";
+
+export const AlignLeftIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 25 24"
+    className="fill-current"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M4.586 20.5a.73.73 0 0 1-.534-.216.73.73 0 0 1-.216-.534q0-.32.216-.535A.73.73 0 0 1 4.586 19h15.5q.318 0 .534.216a.73.73 0 0 1 .216.534q0 .32-.216.535a.73.73 0 0 1-.534.215zm0-3.875a.73.73 0 0 1-.534-.216.73.73 0 0 1-.216-.534q0-.32.216-.534a.73.73 0 0 1 .534-.216h9.5q.318 0 .534.216a.73.73 0 0 1 .216.534q0 .32-.216.535a.73.73 0 0 1-.534.215zm0-3.875a.73.73 0 0 1-.534-.216.73.73 0 0 1-.216-.534q0-.32.216-.534a.73.73 0 0 1 .534-.216h15.5q.318 0 .534.216a.73.73 0 0 1 .216.534q0 .32-.216.534a.73.73 0 0 1-.534.216zm0-3.875a.73.73 0 0 1-.534-.216.73.73 0 0 1-.216-.534q0-.32.216-.535a.73.73 0 0 1 .534-.215h9.5q.318 0 .534.216a.73.73 0 0 1 .216.534q0 .32-.216.534a.73.73 0 0 1-.534.216zm0-3.875a.73.73 0 0 1-.534-.216.73.73 0 0 1-.216-.534q0-.32.216-.534a.73.73 0 0 1 .534-.216h15.5q.318 0 .534.216a.73.73 0 0 1 .216.534q0 .32-.216.535a.73.73 0 0 1-.534.215z"
+    />
+  </svg>
+);

package/src/assets/icons/AlignLeftRight.tsx

@@ -0,0 +1,16 @@
+import type { SVGProps } from "react";
+
+export const AlignLeftRightIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 25 24"
+    className="fill-current"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M4.586 20.5a.73.73 0 0 1-.534-.216.73.73 0 0 1-.216-.534q0-.32.216-.535A.73.73 0 0 1 4.586 19h15.5q.318 0 .534.216a.73.73 0 0 1 .216.534q0 .32-.216.535a.73.73 0 0 1-.534.215zm0-3.875a.73.73 0 0 1-.534-.216.73.73 0 0 1-.216-.534q0-.32.216-.534a.73.73 0 0 1 .534-.216h15.5q.318 0 .534.216a.73.73 0 0 1 .216.534q0 .32-.216.535a.73.73 0 0 1-.534.215zm0-3.875a.73.73 0 0 1-.534-.216.73.73 0 0 1-.216-.534q0-.32.216-.534a.73.73 0 0 1 .534-.216h15.5q.318 0 .534.216a.73.73 0 0 1 .216.534q0 .32-.216.534a.73.73 0 0 1-.534.216zm0-3.875a.73.73 0 0 1-.534-.216.73.73 0 0 1-.216-.534q0-.32.216-.535a.73.73 0 0 1 .534-.215h15.5q.318 0 .534.216a.73.73 0 0 1 .216.534q0 .32-.216.534a.73.73 0 0 1-.534.216zm0-3.875a.73.73 0 0 1-.534-.216.73.73 0 0 1-.216-.534q0-.32.216-.534a.73.73 0 0 1 .534-.216h15.5q.318 0 .534.216a.73.73 0 0 1 .216.534q0 .32-.216.535a.73.73 0 0 1-.534.215z"
+    />
+  </svg>
+);

package/src/assets/icons/AlignRight.tsx

@@ -0,0 +1,16 @@
+import type { SVGProps } from "react";
+
+export const AlignRightIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 25 24"
+    className="fill-current"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M4.586 5a.73.73 0 0 1-.534-.216.73.73 0 0 1-.216-.534q0-.32.216-.534a.73.73 0 0 1 .534-.216h15.5q.318 0 .534.216a.73.73 0 0 1 .216.534q0 .32-.216.535a.73.73 0 0 1-.534.215zm6 3.875a.73.73 0 0 1-.534-.216.73.73 0 0 1-.216-.534q0-.32.216-.535a.73.73 0 0 1 .534-.215h9.5q.318 0 .534.216a.73.73 0 0 1 .216.534q0 .32-.216.534a.73.73 0 0 1-.534.216zm-6 3.875a.73.73 0 0 1-.534-.216.73.73 0 0 1-.216-.534q0-.32.216-.534a.73.73 0 0 1 .534-.216h15.5q.318 0 .534.216a.73.73 0 0 1 .216.534q0 .32-.216.534a.73.73 0 0 1-.534.216zm6 3.875a.73.73 0 0 1-.534-.216.73.73 0 0 1-.216-.534q0-.32.216-.534a.73.73 0 0 1 .534-.216h9.5q.318 0 .534.216a.73.73 0 0 1 .216.534q0 .32-.216.535a.73.73 0 0 1-.534.215zm-6 3.875a.73.73 0 0 1-.534-.216.73.73 0 0 1-.216-.534q0-.32.216-.535A.73.73 0 0 1 4.586 19h15.5q.318 0 .534.216a.73.73 0 0 1 .216.534q0 .32-.216.535a.73.73 0 0 1-.534.215z"
+    />
+  </svg>
+);

package/src/assets/icons/ArrowDropDown.tsx

@@ -0,0 +1,16 @@
+import type { SVGProps } from "react";
+
+export const ArrowDropDownIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    className="fill-current"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="m12 15-5-5h10z"
+    />
+  </svg>
+);

package/src/assets/icons/ArrowDropUp.tsx

@@ -0,0 +1,16 @@
+import type { SVGProps } from "react";
+
+export const ArrowDropUpIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    className="fill-current"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="m7 14 5-5 5 5z"
+    />
+  </svg>
+);

package/src/assets/icons/ArrowLeft.tsx

@@ -0,0 +1,16 @@
+import type { SVGProps } from "react";
+
+export const ArrowLeftIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    className="fill-current"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="m14 17-5-5 5-5z"
+    />
+  </svg>
+);

package/src/assets/icons/ArrowRight.tsx

@@ -0,0 +1,16 @@
+import type { SVGProps } from "react";
+
+export const ArrowRightIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    className="fill-current"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M10 17V7l5 5z"
+    />
+  </svg>
+);

package/src/assets/icons/Bold.tsx

@@ -0,0 +1,16 @@
+import type { SVGProps } from "react";
+
+export const BoldIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 25 24"
+    className="fill-current"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M9.016 19q-.669 0-1.137-.468a1.55 1.55 0 0 1-.469-1.137V6.605q0-.667.469-1.137A1.55 1.55 0 0 1 9.016 5h3.531q1.615 0 2.921 1.006 1.305 1.005 1.305 2.708 0 1.185-.572 1.932-.571.746-1.232 1.084.813.28 1.553 1.108t.74 2.23q0 2.026-1.494 2.979-1.495.953-3.01.953zm.666-2.105h2.991q1.248 0 1.764-.693t.516-1.329-.516-1.329-1.813-.693H9.682zm0-6.084h2.741q.963 0 1.527-.55t.564-1.32q0-.816-.596-1.334-.597-.518-1.462-.518H9.682z"
+    />
+  </svg>
+);

package/src/assets/icons/BulletedList.tsx

@@ -0,0 +1,16 @@
+import type { SVGProps } from "react";
+
+export const BulletedListIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 25 24"
+    className="fill-current"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M10.394 18.75a.73.73 0 0 1-.535-.216.73.73 0 0 1-.215-.534q0-.32.215-.535a.73.73 0 0 1 .535-.215h9.692q.318 0 .534.216a.73.73 0 0 1 .216.534q0 .319-.216.534a.73.73 0 0 1-.534.216zm0-6a.73.73 0 0 1-.535-.216.73.73 0 0 1-.215-.534q0-.32.215-.535a.73.73 0 0 1 .535-.215h9.692q.318 0 .534.216a.73.73 0 0 1 .216.534q0 .319-.216.534a.73.73 0 0 1-.534.216zm0-6a.73.73 0 0 1-.535-.216A.73.73 0 0 1 9.644 6q0-.32.215-.535a.73.73 0 0 1 .535-.215h9.692q.318 0 .534.216a.73.73 0 0 1 .216.534q0 .319-.216.534a.73.73 0 0 1-.534.216zM5.499 19.663q-.686 0-1.174-.488A1.6 1.6 0 0 1 3.835 18q0-.687.49-1.175a1.6 1.6 0 0 1 1.174-.489q.687 0 1.175.49.489.487.489 1.174t-.489 1.175a1.6 1.6 0 0 1-1.175.488m0-6q-.686 0-1.174-.488A1.6 1.6 0 0 1 3.835 12q0-.687.49-1.175a1.6 1.6 0 0 1 1.174-.489q.687 0 1.175.49.489.487.489 1.174t-.489 1.175a1.6 1.6 0 0 1-1.175.488m0-6q-.686 0-1.174-.488A1.6 1.6 0 0 1 3.835 6q0-.687.49-1.175a1.6 1.6 0 0 1 1.174-.489q.687 0 1.175.49.489.487.489 1.174t-.489 1.175a1.6 1.6 0 0 1-1.175.488"
+    />
+  </svg>
+);

package/src/assets/icons/Calendar.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+
+export const CalendarIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    className="fill-current"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M17 2a1 1 0 1 0-2 0v1H9V2a1 1 0 0 0-2 0v1H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3h-2zm3 7V6a1 1 0 0 0-1-1h-2v1a1 1 0 1 1-2 0V5H9v1a1 1 0 0 1-2 0V5H5a1 1 0 0 0-1 1v3zM4 11h16v9a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1z"
+      clipRule="evenodd"
+    />
+  </svg>
+);

package/src/assets/icons/Check.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+
+export const CheckIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    className="fill-current"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M20.707 5.293a1 1 0 0 1 0 1.414l-11 11a1 1 0 0 1-1.414 0l-5-5a1 1 0 1 1 1.414-1.414L9 15.586 19.293 5.293a1 1 0 0 1 1.414 0"
+      clipRule="evenodd"
+    />
+  </svg>
+);

package/src/assets/icons/CheckCircle.tsx

@@ -0,0 +1,16 @@
+import type { SVGProps } from "react";
+
+export const CheckCircleIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 25 24"
+    className="fill-current"
+    {...props}
+  >
+    <path
+      fill="#16A34A"
+      d="m11.245 14.146-2.323-2.323a.73.73 0 0 0-.522-.213.7.7 0 0 0-.532.213.72.72 0 0 0-.217.527q0 .31.217.527l2.744 2.744q.27.27.633.271.36 0 .633-.27l5.563-5.564a.73.73 0 0 0 .213-.522.7.7 0 0 0-.213-.532.72.72 0 0 0-.527-.217.72.72 0 0 0-.527.217zm1.42 7.354q-1.97 0-3.704-.748a9.6 9.6 0 0 1-3.017-2.03 9.6 9.6 0 0 1-2.032-3.016 9.25 9.25 0 0 1-.748-3.704q0-1.972.748-3.706a9.6 9.6 0 0 1 2.03-3.016 9.6 9.6 0 0 1 3.016-2.032 9.25 9.25 0 0 1 3.704-.748q1.971 0 3.706.748a9.6 9.6 0 0 1 3.017 2.03 9.6 9.6 0 0 1 2.03 3.016 9.25 9.25 0 0 1 .75 3.704q0 1.972-.749 3.706a9.6 9.6 0 0 1-2.03 3.017 9.6 9.6 0 0 1-3.016 2.03 9.25 9.25 0 0 1-3.704.749"
+    />
+  </svg>
+);

package/src/assets/icons/CheckboxCheckmark.tsx

@@ -0,0 +1,19 @@
+import type { SVGProps } from "react";
+
+export const CheckboxCheckmarkIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 12 9"
+    className="fill-current"
+    {...props}
+  >
+    <path
+      stroke="#F8F8FA"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="M11 1 4.125 8 1 4.818"
+    />
+  </svg>
+);

package/src/assets/icons/CheckboxIndeterminate.tsx

@@ -0,0 +1,19 @@
+import type { SVGProps } from "react";
+
+export const CheckboxIndeterminateIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 10 2"
+    className="fill-current"
+    {...props}
+  >
+    <path
+      stroke="#F8F8FA"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="M9 1H1"
+    />
+  </svg>
+);

package/src/assets/icons/ChevronDown.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+
+export const ChevronDownIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    className="fill-current"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M5.293 8.293a1 1 0 0 1 1.414 0L12 13.586l5.293-5.293a1 1 0 1 1 1.414 1.414l-6 6a1 1 0 0 1-1.414 0l-6-6a1 1 0 0 1 0-1.414"
+      clipRule="evenodd"
+    />
+  </svg>
+);

package/src/assets/icons/ChevronLeft.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+
+export const ChevronLeftIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    className="fill-current"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M15.707 5.293a1 1 0 0 1 0 1.414L10.414 12l5.293 5.293a1 1 0 0 1-1.414 1.414l-6-6a1 1 0 0 1 0-1.414l6-6a1 1 0 0 1 1.414 0"
+      clipRule="evenodd"
+    />
+  </svg>
+);

package/src/assets/icons/ChevronRight.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+
+export const ChevronRightIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    className="fill-current"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M8.293 5.293a1 1 0 0 1 1.414 0l6 6a1 1 0 0 1 0 1.414l-6 6a1 1 0 0 1-1.414-1.414L13.586 12 8.293 6.707a1 1 0 0 1 0-1.414"
+      clipRule="evenodd"
+    />
+  </svg>
+);

package/src/assets/icons/ChevronUp.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+
+export const ChevronUpIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    className="fill-current"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M11.293 8.293a1 1 0 0 1 1.414 0l6 6a1 1 0 0 1-1.414 1.414L12 10.414l-5.293 5.293a1 1 0 0 1-1.414-1.414z"
+      clipRule="evenodd"
+    />
+  </svg>
+);

package/src/assets/icons/ChevronsLeft.tsx

@@ -0,0 +1,24 @@
+import type { SVGProps } from "react";
+
+export const ChevronsLeftIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    className="fill-current"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M11.451 6.24896C11.783 6.5809 11.783 7.1191 11.451 7.45104L7.05208 11.85L11.451 16.249C11.783 16.5809 11.783 17.1191 11.451 17.451C11.1191 17.783 10.5809 17.783 10.249 17.451L5.24896 12.451C4.91701 12.1191 4.91701 11.5809 5.24896 11.249L10.249 6.24896C10.5809 5.91701 11.1191 5.91701 11.451 6.24896Z"
+      fill="currentColor"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M18.451 6.24896C18.783 6.5809 18.783 7.1191 18.451 7.45104L14.0521 11.85L18.451 16.249C18.783 16.5809 18.783 17.1191 18.451 17.451C18.1191 17.783 17.5809 17.783 17.249 17.451L12.249 12.451C11.917 12.1191 11.917 11.5809 12.249 11.249L17.249 6.24896C17.5809 5.91701 18.1191 5.91701 18.451 6.24896Z"
+      fill="currentColor"
+    />
+  </svg>
+);

package/src/assets/icons/ChevronsRight.tsx

@@ -0,0 +1,24 @@
+import type { SVGProps } from "react";
+
+export const ChevronsRightIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    className="fill-current"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M12.249 6.24896C12.5809 5.91701 13.1191 5.91701 13.451 6.24896L18.451 11.249C18.783 11.5809 18.783 12.1191 18.451 12.451L13.451 17.451C13.1191 17.783 12.5809 17.783 12.249 17.451C11.917 17.1191 11.917 16.5809 12.249 16.249L16.6479 11.85L12.249 7.45104C11.917 7.1191 11.917 6.5809 12.249 6.24896Z"
+      fill="currentColor"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M5.24896 6.24896C5.5809 5.91701 6.1191 5.91701 6.45104 6.24896L11.451 11.249C11.783 11.5809 11.783 12.1191 11.451 12.451L6.45104 17.451C6.1191 17.783 5.5809 17.783 5.24896 17.451C4.91701 17.1191 4.91701 16.5809 5.24896 16.249L9.64792 11.85L5.24896 7.45104C4.91701 7.1191 4.91701 6.5809 5.24896 6.24896Z"
+      fill="currentColor"
+    />
+  </svg>
+);

package/src/assets/icons/Clock.tsx

@@ -0,0 +1,16 @@
+import type { SVGProps } from "react";
+
+export const ClockIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    className="fill-current"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="m14.75 15.917 1.167-1.167-3.083-3.083V7.834h-1.667v4.5zM12 20.334a8.1 8.1 0 0 1-3.25-.657 8.4 8.4 0 0 1-2.646-1.78 8.4 8.4 0 0 1-1.78-2.647A8.1 8.1 0 0 1 3.666 12q0-1.729.656-3.25a8.4 8.4 0 0 1 1.781-2.646 8.4 8.4 0 0 1 2.646-1.78A8.1 8.1 0 0 1 12 3.666q1.73 0 3.25.656a8.4 8.4 0 0 1 2.646 1.781 8.4 8.4 0 0 1 1.781 2.646 8.1 8.1 0 0 1 .657 3.25 8.1 8.1 0 0 1-.657 3.25 8.4 8.4 0 0 1-1.78 2.646 8.4 8.4 0 0 1-2.647 1.781 8.1 8.1 0 0 1-3.25.657m0-1.667q2.771 0 4.72-1.948 1.947-1.948 1.947-4.719 0-2.77-1.948-4.718T12 5.334 7.282 7.282 5.334 12t1.948 4.72Q9.229 18.666 12 18.666"
+    />
+  </svg>
+);

package/src/assets/icons/Close.tsx

@@ -0,0 +1,16 @@
+import type { SVGProps } from "react";
+
+export const CloseIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    className="fill-current"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M17.749 7.463a.857.857 0 1 0-1.212-1.212L12 10.788 7.463 6.25a.857.857 0 0 0-1.212 1.212L10.788 12 6.25 16.537a.857.857 0 1 0 1.212 1.212L12 13.212l4.537 4.537a.857.857 0 1 0 1.212-1.212L13.212 12z"
+    />
+  </svg>
+);

package/src/assets/icons/DateTime.tsx

@@ -0,0 +1,20 @@
+import type { SVGProps } from "react";
+
+export const DateTimeIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    className="fill-current"
+    {...props}
+  >
+    <g fill="currentColor">
+      <path d="m18.308 18.852.567-.573-1.518-1.533v-2.291h-.81v2.618zM16.973 21q-1.7 0-2.884-1.186-1.184-1.187-1.184-2.905t1.184-2.904 2.884-1.187q1.68 0 2.853 1.197Q21 15.21 21 16.909t-1.174 2.894T16.973 21" />
+      <path
+        fillRule="evenodd"
+        d="M14.2 3c.402 0 .729.333.729.744v.744h1.457c1.207 0 2.185.999 2.185 2.231v4.7a5.6 5.6 0 0 0-1.457-.235v-.746H5.457v6.694c0 .411.326.744.729.744h5.18c.088.523.247 1.023.465 1.488H6.186c-1.207 0-2.186-1-2.186-2.232V6.72c0-1.232.979-2.231 2.186-2.231h1.457v-.744c0-.411.326-.744.728-.744.403 0 .729.333.729.744v.744h4.371v-.744c0-.411.327-.744.729-.744m2.914 3.719V8.95H5.457V6.72c0-.41.326-.744.729-.744h1.457v.744c0 .41.326.744.728.744a.736.736 0 0 0 .729-.744v-.744h4.371v.744c0 .41.327.744.729.744a.736.736 0 0 0 .729-.744v-.744h1.457c.402 0 .728.333.728.744"
+        clipRule="evenodd"
+      />
+    </g>
+  </svg>
+);

package/src/assets/icons/Drag.tsx

@@ -0,0 +1,16 @@
+import type { SVGProps } from "react";
+
+export const DragIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    className="fill-current"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M9 19.615q-.666 0-1.14-.474A1.56 1.56 0 0 1 7.384 18q0-.666.474-1.14A1.56 1.56 0 0 1 9 16.384q.666 0 1.14.474.475.475.475 1.141t-.474 1.14A1.56 1.56 0 0 1 9 19.616m6 0q-.666 0-1.14-.474A1.56 1.56 0 0 1 13.384 18q0-.666.474-1.14A1.56 1.56 0 0 1 15 16.384q.666 0 1.14.474.475.475.475 1.141t-.474 1.14a1.56 1.56 0 0 1-1.141.475m-6-6q-.666 0-1.14-.474A1.56 1.56 0 0 1 7.384 12q0-.666.474-1.14A1.56 1.56 0 0 1 9 10.384q.666 0 1.14.474.475.475.475 1.141t-.474 1.14A1.56 1.56 0 0 1 9 13.616m6 0q-.666 0-1.14-.474A1.56 1.56 0 0 1 13.384 12q0-.666.474-1.14A1.56 1.56 0 0 1 15 10.384q.666 0 1.14.474.475.475.475 1.141t-.474 1.14a1.56 1.56 0 0 1-1.141.475m-6-6q-.666 0-1.14-.474A1.56 1.56 0 0 1 7.384 6q0-.666.474-1.14A1.56 1.56 0 0 1 9 4.384q.666 0 1.14.474.475.475.475 1.141t-.474 1.14A1.56 1.56 0 0 1 9 7.616m6 0q-.666 0-1.14-.474A1.56 1.56 0 0 1 13.384 6q0-.666.474-1.14A1.56 1.56 0 0 1 15 4.384q.666 0 1.14.474.475.475.475 1.141t-.474 1.14A1.56 1.56 0 0 1 15 7.616"
+    />
+  </svg>
+);

package/src/assets/icons/File.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+
+export const FileIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    className="fill-current"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M12.9 2.1a1 1 0 0 1 .233.03l.009.003a1 1 0 0 1 .12.046q.03.013.054.027a1 1 0 0 1 .143.093q.03.023.058.049l.018.015 6.3 6.301.014.015q.015.014.029.032l.017.018q.017.025.033.048.022.03.042.062.02.035.037.073a.9.9 0 0 1 .093.388l-.001.016V19.2a2.7 2.7 0 0 1-2.7 2.7h-10.8a2.7 2.7 0 0 1-2.7-2.7V4.8a2.7 2.7 0 0 1 2.7-2.7zM6.598 3.9a.9.9 0 0 0-.9.9v14.4a.9.9 0 0 0 .9.9h10.8a.9.9 0 0 0 .9-.9v-9h-5.4a.9.9 0 0 1-.9-.9V3.9zm7.2 4.5h3.227L13.8 5.174z"
+      clipRule="evenodd"
+    />
+  </svg>
+);

package/src/assets/icons/Highlight.tsx

@@ -0,0 +1,16 @@
+import type { SVGProps } from "react";
+
+export const HighlightIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    className="fill-current"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="m14.302 12.145-2.6-2.6-3.942 3.942a.29.29 0 0 0-.087.211q0 .125.087.212l2.161 2.177a.29.29 0 0 0 .212.086.29.29 0 0 0 .211-.086zm-1.53-3.654 2.584 2.584 4.27-4.254a.3.3 0 0 0 .086-.22.3.3 0 0 0-.087-.222l-2.158-2.158a.3.3 0 0 0-.22-.086.3.3 0 0 0-.222.086zm-1.582-.543 4.708 4.708-4.484 4.5q-.543.542-1.274.542-.73 0-1.273-.542l-.096-.096-.404.388q-.246.216-.556.34a1.7 1.7 0 0 1-.642.126H5.071q-.31 0-.43-.276-.117-.276.103-.497l2.07-2.054-.077-.077a1.82 1.82 0 0 1-.558-1.288q-.016-.747.527-1.289zm0 0 4.79-4.79q.543-.542 1.274-.542.73 0 1.273.542l2.177 2.161q.542.543.542 1.273 0 .732-.542 1.273l-4.806 4.791z"
+    />
+  </svg>
+);

package/src/assets/icons/HighlightOn.tsx

@@ -0,0 +1,26 @@
+import type { SVGProps } from "react";
+
+interface Props extends SVGProps<SVGSVGElement> {
+  highlightColor?: string;
+}
+
+export const HighlightOnIcon = ({ highlightColor, ...props }: Props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    className="fill-current"
+    {...props}
+  >
+    <g fill="currentColor">
+      <path
+        d="M14.3021 12.1445L11.7021 9.54447L7.75955 13.4867C7.70188 13.5444 7.67305 13.6149 7.67305 13.6982C7.67305 13.7816 7.70188 13.8521 7.75955 13.91L9.92105 16.0867C9.97888 16.1444 10.0495 16.1732 10.1328 16.1732C10.2161 16.1732 10.2866 16.1444 10.3443 16.0867L14.3021 12.1445ZM12.7711 8.49072L15.3558 11.0752L19.6251 6.82147C19.6827 6.76381 19.7116 6.69006 19.7116 6.60022C19.7116 6.51039 19.6827 6.43664 19.6251 6.37897L17.4673 4.22147C17.4096 4.16381 17.336 4.13497 17.2463 4.13497C17.1565 4.13497 17.0827 4.16381 17.0251 4.22147L12.7711 8.49072ZM11.1903 7.94847L15.8981 12.656L11.4136 17.156C11.0519 17.5175 10.6275 17.6982 10.1403 17.6982C9.65313 17.6982 9.2288 17.5175 8.8673 17.156L8.77105 17.0597L8.3673 17.4482C8.20313 17.5919 8.01755 17.7054 7.81055 17.7887C7.60355 17.8721 7.3898 17.9137 7.1693 17.9137H5.0713C4.86363 17.9137 4.72038 17.8217 4.64155 17.6377C4.56255 17.4537 4.5968 17.2881 4.7443 17.1407L6.81355 15.0867L6.73655 15.01C6.37505 14.6483 6.18913 14.2188 6.1788 13.7215C6.16863 13.224 6.3443 12.7945 6.7058 12.433L11.1903 7.94847ZM11.1903 7.94847L15.9808 3.15797C16.3423 2.79647 16.7666 2.61572 17.2538 2.61572C17.741 2.61572 18.1654 2.79647 18.5271 3.15797L20.7038 5.31947C21.0653 5.68097 21.2461 6.10531 21.2461 6.59247C21.2461 7.07964 21.0653 7.50397 20.7038 7.86547L15.8981 12.656L11.1903 7.94847Z"
+        fill="currentColor"
+      />
+      <path
+        d="M2.84872 23.741C3.02105 23.9135 3.23613 23.9998 3.49397 23.9998H20.686C20.9438 23.9998 21.1589 23.9135 21.3312 23.741C21.5037 23.5687 21.59 23.3537 21.59 23.096V21.1728C21.59 20.9151 21.5037 20.7001 21.3312 20.5278C21.1589 20.3553 20.9438 20.269 20.686 20.269H3.49397C3.23613 20.269 3.02105 20.3553 2.84872 20.5278C2.67622 20.7001 2.58997 20.9151 2.58997 21.1728V23.096C2.58997 23.3537 2.67622 23.5687 2.84872 23.741Z"
+        fill={highlightColor || "black"}
+      />
+    </g>
+  </svg>
+);