@examplary/ui 1.56.0 → 1.58.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (105) hide show
  1. package/dist/components/ai/ai-icon.js +2 -25
  2. package/dist/components/ai/ai-prompt-suggestion.js +3 -26
  3. package/dist/components/brand/tick-icon.js +2 -25
  4. package/dist/components/chat/chat-input.js +8 -31
  5. package/dist/components/chat/chat-typing-indicator.js +2 -2
  6. package/dist/components/chat/chat-view.js +6 -34
  7. package/dist/components/loading/ai-spinner.js +2 -13
  8. package/dist/components/loading/tick-loader.js +39 -104
  9. package/dist/components/print/answer-box.js +2 -25
  10. package/dist/components/question-types/fetch-component.js +65 -106
  11. package/dist/components/question-types/format-question-type.d.ts +41 -41
  12. package/dist/components/question-types/format-question-type.js +36 -37
  13. package/dist/components/rich-text/minimal-rich-text-field.d.ts +2 -2
  14. package/dist/components/rich-text/minimal-rich-text-field.js +47 -85
  15. package/dist/components/rich-text/rich-text-display.js +15 -33
  16. package/dist/components/rich-text/rich-text-field.js +2 -25
  17. package/dist/components/rich-text/rich-text-toolbar.d.ts +3 -2
  18. package/dist/components/rich-text/rich-text-toolbar.js +5 -6
  19. package/dist/components/rich-text/tiptap/collaboration-caret.js +24 -34
  20. package/dist/components/rich-text/tiptap/comments/comment-bubble.d.ts +1 -1
  21. package/dist/components/rich-text/tiptap/comments/comment-bubble.js +36 -41
  22. package/dist/components/rich-text/tiptap/content-reference.js +6 -7
  23. package/dist/components/rich-text/tiptap/crop-page-clipping-modal.d.ts +3 -3
  24. package/dist/components/rich-text/tiptap/crop-page-clipping-modal.js +20 -25
  25. package/dist/components/rich-text/tiptap/extensions.d.ts +2 -2
  26. package/dist/components/rich-text/tiptap/extensions.js +6 -16
  27. package/dist/components/rich-text/tiptap/file-attachment.js +9 -11
  28. package/dist/components/rich-text/tiptap/file-handler.d.ts +2 -2
  29. package/dist/components/rich-text/tiptap/file-handler.js +110 -185
  30. package/dist/components/rich-text/tiptap/image.js +18 -23
  31. package/dist/components/rich-text/tiptap/mathematics-component.js +25 -30
  32. package/dist/components/rich-text/tiptap/mathematics.js +56 -82
  33. package/dist/components/rich-text/tiptap/page-clipping.js +3 -4
  34. package/dist/components/rich-text/tiptap/png-scanner.js +63 -108
  35. package/dist/components/rich-text/tiptap/rich-text-formatting-menu.d.ts +1 -1
  36. package/dist/components/rich-text/tiptap/rich-text-formatting-menu.js +31 -46
  37. package/dist/components/ui/alert.d.ts +3 -3
  38. package/dist/components/ui/alert.js +7 -32
  39. package/dist/components/ui/avatar.js +18 -14
  40. package/dist/components/ui/badge.d.ts +3 -3
  41. package/dist/components/ui/badge.js +4 -27
  42. package/dist/components/ui/button.d.ts +4 -4
  43. package/dist/components/ui/button.js +4 -27
  44. package/dist/components/ui/card.js +6 -46
  45. package/dist/components/ui/checkbox.js +1 -26
  46. package/dist/components/ui/color-picker.js +11 -22
  47. package/dist/components/ui/command-palette.d.ts +2 -2
  48. package/dist/components/ui/command-palette.js +38 -72
  49. package/dist/components/ui/command.js +18 -49
  50. package/dist/components/ui/comments.js +37 -107
  51. package/dist/components/ui/context-menu.js +30 -67
  52. package/dist/components/ui/dialog.js +15 -61
  53. package/dist/components/ui/dropdown.js +17 -64
  54. package/dist/components/ui/floating-menu.js +2 -25
  55. package/dist/components/ui/floating-resizable.d.ts +5 -0
  56. package/dist/components/ui/floating-resizable.js +24 -0
  57. package/dist/components/ui/help-icon.js +1 -2
  58. package/dist/components/ui/icon-picker.js +50 -130
  59. package/dist/components/ui/index.d.ts +1 -0
  60. package/dist/components/ui/index.js +1 -0
  61. package/dist/components/ui/input.js +2 -25
  62. package/dist/components/ui/label.d.ts +1 -1
  63. package/dist/components/ui/label.js +2 -27
  64. package/dist/components/ui/popover.d.ts +2 -2
  65. package/dist/components/ui/popover.js +4 -32
  66. package/dist/components/ui/progress-bar.js +2 -3
  67. package/dist/components/ui/radio-group.js +4 -28
  68. package/dist/components/ui/resizable.d.ts +6 -9
  69. package/dist/components/ui/resizable.js +13 -60
  70. package/dist/components/ui/select.js +12 -55
  71. package/dist/components/ui/separator.js +1 -26
  72. package/dist/components/ui/sheet.d.ts +3 -3
  73. package/dist/components/ui/sheet.js +11 -51
  74. package/dist/components/ui/skeleton.js +2 -25
  75. package/dist/components/ui/slider.js +7 -32
  76. package/dist/components/ui/sortable.d.ts +1 -1
  77. package/dist/components/ui/sortable.js +131 -155
  78. package/dist/components/ui/switch.d.ts +3 -3
  79. package/dist/components/ui/switch.js +3 -28
  80. package/dist/components/ui/table.js +8 -54
  81. package/dist/components/ui/tabs.js +8 -34
  82. package/dist/components/ui/text-selection-menu.d.ts +1 -1
  83. package/dist/components/ui/text-selection-menu.js +19 -25
  84. package/dist/components/ui/textarea.js +7 -30
  85. package/dist/components/ui/tooltip.js +4 -29
  86. package/dist/components/web-components/content-reference.js +81 -106
  87. package/dist/components/web-components/file-attachment.js +9 -30
  88. package/dist/components/web-components/index.js +1 -1
  89. package/dist/components/web-components/inline-comment-reply.js +3 -24
  90. package/dist/components/web-components/inline-comment.js +3 -24
  91. package/dist/components/web-components/inline-math.js +14 -36
  92. package/dist/components/web-components/page-clipping.js +13 -34
  93. package/dist/lib/compose-refs.js +10 -18
  94. package/dist/lib/use-spin-loop.js +19 -69
  95. package/dist/src/global.css +2 -2
  96. package/dist/utils.js +1 -5
  97. package/package.json +5 -4
  98. package/dist/components/rich-text/tiptap/comments/comment-reply.d.ts +0 -21
  99. package/dist/components/rich-text/tiptap/comments/comment-reply.js +0 -230
  100. package/dist/components/rich-text/tiptap/comments/comment.d.ts +0 -22
  101. package/dist/components/rich-text/tiptap/comments/comment.js +0 -198
  102. package/dist/components/rich-text/tiptap/comments/helpers.d.ts +0 -19
  103. package/dist/components/rich-text/tiptap/comments/helpers.js +0 -95
  104. package/dist/components/rich-text/tiptap/comments/types.d.ts +0 -29
  105. package/dist/components/rich-text/tiptap/comments/types.js +0 -1
@@ -1,38 +1,14 @@
1
1
  "use client";
2
- var __assign = (this && this.__assign) || function () {
3
- __assign = Object.assign || function(t) {
4
- for (var s, i = 1, n = arguments.length; i < n; i++) {
5
- s = arguments[i];
6
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
- t[p] = s[p];
8
- }
9
- return t;
10
- };
11
- return __assign.apply(this, arguments);
12
- };
13
- var __rest = (this && this.__rest) || function (s, e) {
14
- var t = {};
15
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
16
- t[p] = s[p];
17
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
18
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
19
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
20
- t[p[i]] = s[p[i]];
21
- }
22
- return t;
23
- };
24
2
  import { jsx as _jsx } from "react/jsx-runtime";
25
3
  import * as React from "react";
26
4
  import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
27
5
  import { cn } from "../../utils";
28
- var RadioGroup = React.forwardRef(function (_a, ref) {
29
- var className = _a.className, props = __rest(_a, ["className"]);
30
- return (_jsx(RadioGroupPrimitive.Root, __assign({ className: cn("grid gap-2", className) }, props, { ref: ref })));
6
+ const RadioGroup = React.forwardRef(({ className, ...props }, ref) => {
7
+ return (_jsx(RadioGroupPrimitive.Root, { className: cn("grid gap-2", className), ...props, ref: ref }));
31
8
  });
32
9
  RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
33
- var RadioGroupItem = React.forwardRef(function (_a, ref) {
34
- var className = _a.className, props = __rest(_a, ["className"]);
35
- return (_jsx(RadioGroupPrimitive.Item, __assign({ ref: ref, className: cn("aspect-square size-5 flex-shrink-0 flex items-center justify-center rounded-full", "border-2 border-border-accent data-[state=checked]:border-current", "ring-offset-white focus:outline-none focus-visible:ring-2 focus-visible:ring-black/10 disabled:cursor-not-allowed disabled:border-accent disabled:text-accent", className) }, props, { children: _jsx(RadioGroupPrimitive.Indicator, { asChild: true, children: _jsx("div", { className: "size-3 rounded-full aspect-square flex-shrink-0 bg-current text-current" }) }) })));
10
+ const RadioGroupItem = React.forwardRef(({ className, ...props }, ref) => {
11
+ return (_jsx(RadioGroupPrimitive.Item, { ref: ref, className: cn("aspect-square size-5 flex-shrink-0 flex items-center justify-center rounded-full", "border-2 border-border-accent data-[state=checked]:border-current", "ring-offset-white focus:outline-none focus-visible:ring-2 focus-visible:ring-black/10 disabled:cursor-not-allowed disabled:border-accent disabled:text-accent", className), ...props, children: _jsx(RadioGroupPrimitive.Indicator, { asChild: true, children: _jsx("div", { className: "size-3 rounded-full aspect-square flex-shrink-0 bg-current text-current" }) }) }));
36
12
  });
37
13
  RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
38
14
  export { RadioGroup, RadioGroupItem };
@@ -1,10 +1,7 @@
1
1
  import * as ResizablePrimitive from "react-resizable-panels";
2
- declare const ResizablePanelGroup: ({ className, ...props }: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => import("react/jsx-runtime").JSX.Element;
3
- declare const ResizablePanel: ({ onResize, ...props }: React.ComponentProps<typeof ResizablePrimitive.Panel>) => import("react/jsx-runtime").JSX.Element;
4
- declare const FloatingResizablePanel: ({ onResize, floatClassName, children, ...props }: React.ComponentProps<typeof ResizablePrimitive.Panel> & {
5
- floatClassName?: string;
6
- }) => import("react/jsx-runtime").JSX.Element;
7
- declare const ResizableHandle: ({ withHandle, className, ...props }: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
8
- withHandle?: boolean;
9
- }) => import("react/jsx-runtime").JSX.Element;
10
- export { ResizablePanelGroup, ResizablePanel, ResizableHandle, FloatingResizablePanel, };
2
+ declare function ResizablePanelGroup({ className, ...props }: ResizablePrimitive.GroupProps): import("react/jsx-runtime").JSX.Element;
3
+ declare function ResizablePanel({ onResize, ...props }: ResizablePrimitive.PanelProps & {
4
+ onResize?: (size: number, prevSize: number | string | undefined) => void;
5
+ }): import("react/jsx-runtime").JSX.Element;
6
+ declare function ResizableHandle({ className, ...props }: React.ComponentProps<typeof ResizablePrimitive.Separator>): import("react/jsx-runtime").JSX.Element;
7
+ export { ResizablePanelGroup, ResizablePanel, ResizableHandle };
@@ -1,64 +1,17 @@
1
1
  "use client";
2
- var __assign = (this && this.__assign) || function () {
3
- __assign = Object.assign || function(t) {
4
- for (var s, i = 1, n = arguments.length; i < n; i++) {
5
- s = arguments[i];
6
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
- t[p] = s[p];
8
- }
9
- return t;
10
- };
11
- return __assign.apply(this, arguments);
12
- };
13
- var __rest = (this && this.__rest) || function (s, e) {
14
- var t = {};
15
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
16
- t[p] = s[p];
17
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
18
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
19
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
20
- t[p[i]] = s[p[i]];
21
- }
22
- return t;
23
- };
24
2
  import { jsx as _jsx } from "react/jsx-runtime";
25
- import { useRef, useState, useEffect } from "react";
26
3
  import * as ResizablePrimitive from "react-resizable-panels";
27
- import { GripVerticalIcon } from "lucide-react";
28
4
  import { cn } from "../../utils";
29
- var ResizablePanelGroup = function (_a) {
30
- var className = _a.className, props = __rest(_a, ["className"]);
31
- return (_jsx(ResizablePrimitive.PanelGroup, __assign({ className: cn("flex h-full w-full font-base data-[panel-group-direction=vertical]:flex-col", className) }, props)));
32
- };
33
- var ResizablePanel = function (_a) {
34
- var onResize = _a.onResize, props = __rest(_a, ["onResize"]);
35
- return (_jsx(ResizablePrimitive.Panel, __assign({ onResize: function (size, prevSize) {
36
- setTimeout(function () { return window.dispatchEvent(new Event("resize")); }, 1);
37
- onResize === null || onResize === void 0 ? void 0 : onResize(size, prevSize);
38
- } }, props)));
39
- };
40
- var FloatingResizablePanel = function (_a) {
41
- var onResize = _a.onResize, _b = _a.floatClassName, floatClassName = _b === void 0 ? "" : _b, children = _a.children, props = __rest(_a, ["onResize", "floatClassName", "children"]);
42
- var ref = useRef(null);
43
- var _c = useState("auto"), width = _c[0], setWidth = _c[1];
44
- var updateSize = function () {
45
- if (ref.current) {
46
- var rect = ref.current.getBoundingClientRect();
47
- setWidth(rect.width);
48
- }
49
- };
50
- useEffect(function () {
51
- updateSize();
52
- window.addEventListener("resize", updateSize);
53
- return function () { return window.removeEventListener("resize", updateSize); };
54
- }, []);
55
- return (_jsx(ResizablePrimitive.Panel, __assign({ onResize: function (size, prevSize) {
56
- setTimeout(function () { return window.dispatchEvent(new Event("resize")); }, 1);
57
- onResize === null || onResize === void 0 ? void 0 : onResize(size, prevSize);
58
- } }, props, { children: _jsx("div", { ref: ref, className: "h-full", children: _jsx("div", { className: cn("fixed top-36 bottom-20 overflow-auto", floatClassName), style: { width: width }, children: children }) }) })));
59
- };
60
- var ResizableHandle = function (_a) {
61
- var withHandle = _a.withHandle, className = _a.className, props = __rest(_a, ["withHandle", "className"]);
62
- return (_jsx(ResizablePrimitive.PanelResizeHandle, __assign({ className: cn("relative flex w-0.5 items-center justify-center bg-border dark:bg-darkBorder after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-black focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-0.5 data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90", "z-10 cursor-col-resize mt-2 w-6 mx-4 bg-transparent relative hidden lg:block opacity-0 transition hover:opacity-100 after:absolute after:inset-0 after:w-px after:bg-border after:left-1/2", className) }, props, { children: withHandle && (_jsx("div", { className: "z-10 flex h-4 w-3 items-center justify-center rounded-sm bg-border dark:bg-darkBorder", children: _jsx(GripVerticalIcon, { className: "h-2.5 w-2.5" }) })) })));
63
- };
64
- export { ResizablePanelGroup, ResizablePanel, ResizableHandle, FloatingResizablePanel, };
5
+ function ResizablePanelGroup({ className, ...props }) {
6
+ return (_jsx(ResizablePrimitive.Group, { "data-slot": "resizable-panel-group", className: cn("block! h-full w-full md:flex! aria-[orientation=vertical]:flex-col", className), ...props }));
7
+ }
8
+ function ResizablePanel({ onResize, ...props }) {
9
+ return (_jsx(ResizablePrimitive.Panel, { "data-slot": "resizable-panel", ...props, onResize: (size, prevSize) => {
10
+ setTimeout(() => window.dispatchEvent(new Event("resize")), 1);
11
+ onResize?.(size.inPixels, prevSize);
12
+ } }));
13
+ }
14
+ function ResizableHandle({ className, ...props }) {
15
+ return (_jsx(ResizablePrimitive.Separator, { "data-slot": "resizable-handle", className: cn("relative flex w-8 z-10 items-center justify-center ring-offset-background after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90 group", className), ...props, children: _jsx("div", { className: "z-10 flex absolute inset-y-3 left-[1/2] -translate-x-1/2 w-px items-center justify-center bg-transparent group-hover:bg-border transition" }) }));
16
+ }
17
+ export { ResizablePanelGroup, ResizablePanel, ResizableHandle };
@@ -1,70 +1,27 @@
1
1
  "use client";
2
- var __assign = (this && this.__assign) || function () {
3
- __assign = Object.assign || function(t) {
4
- for (var s, i = 1, n = arguments.length; i < n; i++) {
5
- s = arguments[i];
6
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
- t[p] = s[p];
8
- }
9
- return t;
10
- };
11
- return __assign.apply(this, arguments);
12
- };
13
- var __rest = (this && this.__rest) || function (s, e) {
14
- var t = {};
15
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
16
- t[p] = s[p];
17
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
18
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
19
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
20
- t[p[i]] = s[p[i]];
21
- }
22
- return t;
23
- };
24
2
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
25
3
  import * as React from "react";
26
4
  import * as SelectPrimitive from "@radix-ui/react-select";
27
5
  import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
28
6
  import { cn } from "../../utils";
29
- var Select = SelectPrimitive.Root;
30
- var SelectGroup = SelectPrimitive.Group;
31
- var SelectValue = SelectPrimitive.Value;
32
- var SelectTrigger = React.forwardRef(function (_a, ref) {
33
- var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);
34
- return (_jsxs(SelectPrimitive.Trigger, __assign({ ref: ref, className: cn("flex h-10 w-full items-center gap-0.5 bg-white justify-between rounded-4xl border border-border px-4 py-2 text-sm font-base ring-offset-white data-[placeholder]:text-zinc-500 placeholder:text-zinc-500 focus:outline-none focus:ring-2 focus:ring-black/10 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", className) }, props, { children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDownIcon, { className: "h-4 w-4" }) })] })));
35
- });
7
+ const Select = SelectPrimitive.Root;
8
+ const SelectGroup = SelectPrimitive.Group;
9
+ const SelectValue = SelectPrimitive.Value;
10
+ const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Trigger, { ref: ref, className: cn("flex h-10 w-full items-center gap-0.5 bg-white justify-between rounded-4xl border border-border px-4 py-2 text-sm font-base ring-offset-white data-[placeholder]:text-zinc-500 placeholder:text-zinc-500 focus:outline-none focus:ring-2 focus:ring-black/10 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDownIcon, { className: "h-4 w-4" }) })] })));
36
11
  SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
37
- var SelectScrollUpButton = React.forwardRef(function (_a, ref) {
38
- var className = _a.className, props = __rest(_a, ["className"]);
39
- return (_jsx(SelectPrimitive.ScrollUpButton, __assign({ ref: ref, className: cn("flex cursor-default text-mtext items-center justify-center py-1", className) }, props, { children: _jsx(ChevronUpIcon, { className: "h-4 w-4" }) })));
40
- });
12
+ const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.ScrollUpButton, { ref: ref, className: cn("flex cursor-default text-mtext items-center justify-center py-1", className), ...props, children: _jsx(ChevronUpIcon, { className: "h-4 w-4" }) })));
41
13
  SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
42
- var SelectScrollDownButton = React.forwardRef(function (_a, ref) {
43
- var className = _a.className, props = __rest(_a, ["className"]);
44
- return (_jsx(SelectPrimitive.ScrollDownButton, __assign({ ref: ref, className: cn("flex cursor-default text-mtext items-center justify-center py-1 font-base", className) }, props, { children: _jsx(ChevronDownIcon, { className: "h-4 w-4" }) })));
45
- });
14
+ const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.ScrollDownButton, { ref: ref, className: cn("flex cursor-default text-mtext items-center justify-center py-1 font-base", className), ...props, children: _jsx(ChevronDownIcon, { className: "h-4 w-4" }) })));
46
15
  SelectScrollDownButton.displayName =
47
16
  SelectPrimitive.ScrollDownButton.displayName;
48
- var SelectContent = React.forwardRef(function (_a, ref) {
49
- var className = _a.className, children = _a.children, _b = _a.position, position = _b === void 0 ? "popper" : _b, props = __rest(_a, ["className", "children", "position"]);
50
- return (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, __assign({ ref: ref, className: cn("relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-xl border border-border-accent bg-white font-base text-mtext data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", position === "popper" &&
51
- "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className), position: position }, props, { children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.Viewport, { className: cn("p-1", position === "popper" &&
52
- "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"), children: children }), _jsx(SelectScrollDownButton, {})] })) }));
53
- });
17
+ const SelectContent = React.forwardRef(({ className, children, position = "popper", ...props }, ref) => (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { ref: ref, className: cn("relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-xl border border-border-accent bg-white font-base text-mtext data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", position === "popper" &&
18
+ "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className), position: position, ...props, children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.Viewport, { className: cn("p-1", position === "popper" &&
19
+ "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"), children: children }), _jsx(SelectScrollDownButton, {})] }) })));
54
20
  SelectContent.displayName = SelectPrimitive.Content.displayName;
55
- var SelectLabel = React.forwardRef(function (_a, ref) {
56
- var className = _a.className, props = __rest(_a, ["className"]);
57
- return (_jsx(SelectPrimitive.Label, __assign({ ref: ref, className: cn("border-2 border-transparent py-1.5 pl-8 pr-2 text-sm font-medium text-mtext/80", className) }, props)));
58
- });
21
+ const SelectLabel = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.Label, { ref: ref, className: cn("border-2 border-transparent py-1.5 pl-8 pr-2 text-sm font-medium text-mtext/80", className), ...props })));
59
22
  SelectLabel.displayName = SelectPrimitive.Label.displayName;
60
- var SelectItem = React.forwardRef(function (_a, ref) {
61
- var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);
62
- return (_jsxs(SelectPrimitive.Item, __assign({ ref: ref, className: cn("relative flex w-full text-mtext cursor-default select-none items-center rounded-lg py-1.5 pl-8 pr-2 text-sm font-base outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent", className) }, props, { children: [_jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(CheckIcon, { className: "h-4 w-4" }) }) }), _jsx(SelectPrimitive.ItemText, { children: children })] })));
63
- });
23
+ const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Item, { ref: ref, className: cn("relative flex w-full text-mtext cursor-default select-none items-center rounded-lg py-1.5 pl-8 pr-2 text-sm font-base outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent", className), ...props, children: [_jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(CheckIcon, { className: "h-4 w-4" }) }) }), _jsx(SelectPrimitive.ItemText, { children: children })] })));
64
24
  SelectItem.displayName = SelectPrimitive.Item.displayName;
65
- var SelectSeparator = React.forwardRef(function (_a, ref) {
66
- var className = _a.className, props = __rest(_a, ["className"]);
67
- return (_jsx(SelectPrimitive.Separator, __assign({ ref: ref, className: cn("-mx-1 my-1 h-px bg-border", className) }, props)));
68
- });
25
+ const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.Separator, { ref: ref, className: cn("-mx-1 my-1 h-px bg-border", className), ...props })));
69
26
  SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
70
27
  export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, };
@@ -1,33 +1,8 @@
1
1
  "use client";
2
- var __assign = (this && this.__assign) || function () {
3
- __assign = Object.assign || function(t) {
4
- for (var s, i = 1, n = arguments.length; i < n; i++) {
5
- s = arguments[i];
6
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
- t[p] = s[p];
8
- }
9
- return t;
10
- };
11
- return __assign.apply(this, arguments);
12
- };
13
- var __rest = (this && this.__rest) || function (s, e) {
14
- var t = {};
15
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
16
- t[p] = s[p];
17
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
18
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
19
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
20
- t[p[i]] = s[p[i]];
21
- }
22
- return t;
23
- };
24
2
  import { jsx as _jsx } from "react/jsx-runtime";
25
3
  import * as React from "react";
26
4
  import * as SeparatorPrimitive from "@radix-ui/react-separator";
27
5
  import { cn } from "../../utils";
28
- var Separator = React.forwardRef(function (_a, ref) {
29
- var className = _a.className, _b = _a.orientation, orientation = _b === void 0 ? "horizontal" : _b, _c = _a.decorative, decorative = _c === void 0 ? true : _c, props = __rest(_a, ["className", "orientation", "decorative"]);
30
- return (_jsx(SeparatorPrimitive.Root, __assign({ ref: ref, decorative: decorative, orientation: orientation, className: cn("shrink-0 bg-neutral-200 dark:bg-neutral-800", orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]", className) }, props)));
31
- });
6
+ const Separator = React.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (_jsx(SeparatorPrimitive.Root, { ref: ref, decorative: decorative, orientation: orientation, className: cn("shrink-0 bg-neutral-200 dark:bg-neutral-800", orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]", className), ...props })));
32
7
  Separator.displayName = SeparatorPrimitive.Root.displayName;
33
8
  export { Separator };
@@ -6,9 +6,9 @@ declare const SheetTrigger: React.ForwardRefExoticComponent<SheetPrimitive.Dialo
6
6
  declare const SheetClose: React.ForwardRefExoticComponent<SheetPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
7
7
  declare const SheetPortal: React.FC<SheetPrimitive.DialogPortalProps>;
8
8
  declare const SheetOverlay: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
9
- declare const sheetVariants: (props?: {
10
- side?: "top" | "right" | "bottom" | "left";
11
- } & import("class-variance-authority/types").ClassProp) => string;
9
+ declare const sheetVariants: (props?: ({
10
+ side?: "top" | "right" | "bottom" | "left" | null | undefined;
11
+ } & import("class-variance-authority/types").ClassProp) | undefined) => string;
12
12
  interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>, VariantProps<typeof sheetVariants> {
13
13
  }
14
14
  declare const SheetContent: React.ForwardRefExoticComponent<SheetContentProps & React.RefAttributes<HTMLDivElement>>;
@@ -1,42 +1,17 @@
1
1
  "use client";
2
- var __assign = (this && this.__assign) || function () {
3
- __assign = Object.assign || function(t) {
4
- for (var s, i = 1, n = arguments.length; i < n; i++) {
5
- s = arguments[i];
6
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
- t[p] = s[p];
8
- }
9
- return t;
10
- };
11
- return __assign.apply(this, arguments);
12
- };
13
- var __rest = (this && this.__rest) || function (s, e) {
14
- var t = {};
15
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
16
- t[p] = s[p];
17
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
18
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
19
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
20
- t[p[i]] = s[p[i]];
21
- }
22
- return t;
23
- };
24
2
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
25
3
  import * as React from "react";
26
4
  import * as SheetPrimitive from "@radix-ui/react-dialog";
27
5
  import { cva } from "class-variance-authority";
28
6
  import { XIcon } from "lucide-react";
29
7
  import { cn } from "../../utils";
30
- var Sheet = SheetPrimitive.Root;
31
- var SheetTrigger = SheetPrimitive.Trigger;
32
- var SheetClose = SheetPrimitive.Close;
33
- var SheetPortal = SheetPrimitive.Portal;
34
- var SheetOverlay = React.forwardRef(function (_a, ref) {
35
- var className = _a.className, props = __rest(_a, ["className"]);
36
- return (_jsx(SheetPrimitive.Overlay, __assign({ className: cn("fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className) }, props, { ref: ref })));
37
- });
8
+ const Sheet = SheetPrimitive.Root;
9
+ const SheetTrigger = SheetPrimitive.Trigger;
10
+ const SheetClose = SheetPrimitive.Close;
11
+ const SheetPortal = SheetPrimitive.Portal;
12
+ const SheetOverlay = React.forwardRef(({ className, ...props }, ref) => (_jsx(SheetPrimitive.Overlay, { className: cn("fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className), ...props, ref: ref })));
38
13
  SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
39
- var sheetVariants = cva("fixed z-50 gap-4 bg-white p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 dark:bg-neutral-950", {
14
+ const sheetVariants = cva("fixed z-50 gap-4 bg-white p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 dark:bg-neutral-950", {
40
15
  variants: {
41
16
  side: {
42
17
  top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
@@ -49,29 +24,14 @@ var sheetVariants = cva("fixed z-50 gap-4 bg-white p-6 shadow-lg transition ease
49
24
  side: "right",
50
25
  },
51
26
  });
52
- var SheetContent = React.forwardRef(function (_a, ref) {
53
- var _b = _a.side, side = _b === void 0 ? "right" : _b, className = _a.className, children = _a.children, props = __rest(_a, ["side", "className", "children"]);
54
- return (_jsxs(SheetPortal, { children: [_jsx(SheetOverlay, {}), _jsxs(SheetPrimitive.Content, __assign({ ref: ref, className: cn(sheetVariants({ side: side }), className) }, props, { children: [children, _jsxs(SheetPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-neutral-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-neutral-100 dark:ring-offset-neutral-950 dark:focus:ring-neutral-300 dark:data-[state=open]:bg-neutral-800", children: [_jsx(XIcon, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: "Close" })] })] }))] }));
55
- });
27
+ const SheetContent = React.forwardRef(({ side = "right", className, children, ...props }, ref) => (_jsxs(SheetPortal, { children: [_jsx(SheetOverlay, {}), _jsxs(SheetPrimitive.Content, { ref: ref, className: cn(sheetVariants({ side }), className), ...props, children: [children, _jsxs(SheetPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-neutral-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-neutral-100 dark:ring-offset-neutral-950 dark:focus:ring-neutral-300 dark:data-[state=open]:bg-neutral-800", children: [_jsx(XIcon, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: "Close" })] })] })] })));
56
28
  SheetContent.displayName = SheetPrimitive.Content.displayName;
57
- var SheetHeader = function (_a) {
58
- var className = _a.className, props = __rest(_a, ["className"]);
59
- return (_jsx("div", __assign({ className: cn("flex flex-col space-y-2 text-center sm:text-left", className) }, props)));
60
- };
29
+ const SheetHeader = ({ className, ...props }) => (_jsx("div", { className: cn("flex flex-col space-y-2 text-center sm:text-left", className), ...props }));
61
30
  SheetHeader.displayName = "SheetHeader";
62
- var SheetFooter = function (_a) {
63
- var className = _a.className, props = __rest(_a, ["className"]);
64
- return (_jsx("div", __assign({ className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className) }, props)));
65
- };
31
+ const SheetFooter = ({ className, ...props }) => (_jsx("div", { className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className), ...props }));
66
32
  SheetFooter.displayName = "SheetFooter";
67
- var SheetTitle = React.forwardRef(function (_a, ref) {
68
- var className = _a.className, props = __rest(_a, ["className"]);
69
- return (_jsx(SheetPrimitive.Title, __assign({ ref: ref, className: cn("text-lg font-semibold text-neutral-950 dark:text-neutral-50", className) }, props)));
70
- });
33
+ const SheetTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx(SheetPrimitive.Title, { ref: ref, className: cn("text-lg font-semibold text-neutral-950 dark:text-neutral-50", className), ...props })));
71
34
  SheetTitle.displayName = SheetPrimitive.Title.displayName;
72
- var SheetDescription = React.forwardRef(function (_a, ref) {
73
- var className = _a.className, props = __rest(_a, ["className"]);
74
- return (_jsx(SheetPrimitive.Description, __assign({ ref: ref, className: cn("text-sm text-neutral-500 dark:text-neutral-400", className) }, props)));
75
- });
35
+ const SheetDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx(SheetPrimitive.Description, { ref: ref, className: cn("text-sm text-neutral-500 dark:text-neutral-400", className), ...props })));
76
36
  SheetDescription.displayName = SheetPrimitive.Description.displayName;
77
37
  export { Sheet, SheetPortal, SheetOverlay, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, };
@@ -1,29 +1,6 @@
1
- var __assign = (this && this.__assign) || function () {
2
- __assign = Object.assign || function(t) {
3
- for (var s, i = 1, n = arguments.length; i < n; i++) {
4
- s = arguments[i];
5
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
- t[p] = s[p];
7
- }
8
- return t;
9
- };
10
- return __assign.apply(this, arguments);
11
- };
12
- var __rest = (this && this.__rest) || function (s, e) {
13
- var t = {};
14
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
15
- t[p] = s[p];
16
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
17
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
18
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
19
- t[p[i]] = s[p[i]];
20
- }
21
- return t;
22
- };
23
1
  import { jsx as _jsx } from "react/jsx-runtime";
24
2
  import { cn } from "../../utils";
25
- function Skeleton(_a) {
26
- var className = _a.className, props = __rest(_a, ["className"]);
27
- return (_jsx("div", __assign({ className: cn("bg-nav rounded-xl bg-linear-to-r from-nav-1 via-nav-2 to-nav-1 bg-size-[200%_100%] animate-pulse animate-shimmer opacity-50", className) }, props)));
3
+ function Skeleton({ className, ...props }) {
4
+ return (_jsx("div", { className: cn("bg-nav rounded-xl bg-linear-to-r from-nav-1 via-nav-2 to-nav-1 bg-size-[200%_100%] animate-pulse animate-shimmer opacity-50", className), ...props }));
28
5
  }
29
6
  export { Skeleton };
@@ -1,39 +1,14 @@
1
1
  "use client";
2
- var __assign = (this && this.__assign) || function () {
3
- __assign = Object.assign || function(t) {
4
- for (var s, i = 1, n = arguments.length; i < n; i++) {
5
- s = arguments[i];
6
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
- t[p] = s[p];
8
- }
9
- return t;
10
- };
11
- return __assign.apply(this, arguments);
12
- };
13
- var __rest = (this && this.__rest) || function (s, e) {
14
- var t = {};
15
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
16
- t[p] = s[p];
17
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
18
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
19
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
20
- t[p[i]] = s[p[i]];
21
- }
22
- return t;
23
- };
24
2
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
25
3
  import * as React from "react";
26
4
  import * as SliderPrimitive from "@radix-ui/react-slider";
27
5
  import { cn } from "../../utils";
28
- function Slider(_a) {
29
- var className = _a.className, defaultValue = _a.defaultValue, value = _a.value, _b = _a.min, min = _b === void 0 ? 0 : _b, _c = _a.max, max = _c === void 0 ? 100 : _c, _d = _a.thumbClassName, thumbClassName = _d === void 0 ? "" : _d, props = __rest(_a, ["className", "defaultValue", "value", "min", "max", "thumbClassName"]);
30
- var _values = React.useMemo(function () {
31
- return Array.isArray(value)
32
- ? value
33
- : Array.isArray(defaultValue)
34
- ? defaultValue
35
- : [min, max];
36
- }, [value, defaultValue, min, max]);
37
- return (_jsxs(SliderPrimitive.Root, __assign({ "data-slot": "slider", defaultValue: defaultValue, value: value, min: min, max: max, className: cn("relative flex w-full touch-none select-none items-center data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col", className) }, props, { children: [_jsx(SliderPrimitive.Track, { "data-slot": "slider-track", className: "relative w-full grow overflow-hidden rounded-full bg-nav/75 data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-3" }), Array.from({ length: _values.length }, function (_, index) { return (_jsx(SliderPrimitive.Thumb, { "data-slot": "slider-thumb", className: cn("block size-5 rounded-full border border-black bg-white ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", thumbClassName) }, index)); })] })));
6
+ function Slider({ className, defaultValue, value, min = 0, max = 100, thumbClassName = "", ...props }) {
7
+ const _values = React.useMemo(() => Array.isArray(value)
8
+ ? value
9
+ : Array.isArray(defaultValue)
10
+ ? defaultValue
11
+ : [min, max], [value, defaultValue, min, max]);
12
+ return (_jsxs(SliderPrimitive.Root, { "data-slot": "slider", defaultValue: defaultValue, value: value, min: min, max: max, className: cn("relative flex w-full touch-none select-none items-center data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col", className), ...props, children: [_jsx(SliderPrimitive.Track, { "data-slot": "slider-track", className: "relative w-full grow overflow-hidden rounded-full bg-nav/75 data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-3" }), Array.from({ length: _values.length }, (_, index) => (_jsx(SliderPrimitive.Thumb, { "data-slot": "slider-thumb", className: cn("block size-5 rounded-full border border-black bg-white ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", thumbClassName) }, index)))] }));
38
13
  }
39
14
  export { Slider };
@@ -44,5 +44,5 @@ interface SortableOverlayProps extends Omit<React.ComponentProps<typeof DragOver
44
44
  value: UniqueIdentifier;
45
45
  }) => React.ReactNode) | React.ReactNode;
46
46
  }
47
- declare function SortableOverlay(props: SortableOverlayProps): React.ReactPortal;
47
+ declare function SortableOverlay(props: SortableOverlayProps): React.ReactPortal | null;
48
48
  export { Sortable, SortableContent, SortableItem, SortableItemHandle, SortableOverlay, type SortableProps, };