@webiny/admin-ui 0.0.0-unstable.7be00a75a9 → 0.0.0-unstable.7c2def32a7

package/Widget/components/Icon.d.ts

@@ -1,21 +1,22 @@
 import * as React from "react";
 import type { IconProps as IconComponentProps } from "../../Icon/index.js";
 type IconProps = IconComponentProps;
-export declare const Icon: ((props: IconProps) => React.JSX.Element) & {
-    original: (props: IconProps) => React.JSX.Element;
+declare const IconBase: (props: IconProps) => React.JSX.Element;
+export declare const Icon: typeof IconBase & {
+    original: typeof IconBase;
     originalName: string;
     displayName: string;
 } & {
-    original: ((props: IconProps) => React.JSX.Element) & {
-        original: (props: IconProps) => React.JSX.Element;
+    original: typeof IconBase & {
+        original: typeof IconBase;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<((props: IconProps) => React.JSX.Element) & {
-        original: (props: IconProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<typeof IconBase & {
+        original: typeof IconBase;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/Widget/components/WidgetAction.d.ts

@@ -1,21 +1,23 @@
 import * as React from "react";
 import { ButtonProps } from "../../Button/index.js";
-export declare const WidgetAction: ((props: ButtonProps) => React.JSX.Element) & {
-    original: (props: ButtonProps) => React.JSX.Element;
+declare const WidgetActionBase: (props: ButtonProps) => React.JSX.Element;
+export declare const WidgetAction: typeof WidgetActionBase & {
+    original: typeof WidgetActionBase;
     originalName: string;
     displayName: string;
 } & {
-    original: ((props: ButtonProps) => React.JSX.Element) & {
-        original: (props: ButtonProps) => React.JSX.Element;
+    original: typeof WidgetActionBase & {
+        original: typeof WidgetActionBase;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: ButtonProps) => React.JSX.Element) & {
-        original: (props: ButtonProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof WidgetActionBase & {
+        original: typeof WidgetActionBase;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;
 };
+export {};

package/Widget/components/WidgetContent.d.ts

@@ -2,15 +2,15 @@ import * as React from "react";
 import { type VariantProps } from "../../utils.js";
 declare const widgetContentVariants: (props?: ({
     variant?: "accent" | "base" | "light" | null | undefined;
-    elevation?: "sm" | "md" | "none" | "lg" | null | undefined;
+    elevation?: "lg" | "md" | "none" | "sm" | null | undefined;
     outline?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface WidgetContentProps extends VariantProps<typeof widgetContentVariants> {
     className?: string;
     children: React.ReactNode;
 }
-declare const WidgetContent: {
-    ({ children }: WidgetContentProps): React.JSX.Element;
-    displayName: string;
-};
+declare function WidgetContent({ children }: WidgetContentProps): React.JSX.Element;
+declare namespace WidgetContent {
+    var displayName: string;
+}
 export { WidgetContent };

package/exports/admin/ui.d.ts

@@ -3,6 +3,7 @@ export { Accordion } from "../../Accordion/index.js";
 export { Alert } from "../../Alert/index.js";
 export { AutoComplete } from "../../AutoComplete/index.js";
 export { Avatar } from "../../Avatar/index.js";
+export { BetaBadge } from "../../BetaBadge/BetaBadge.js";
 export { Button, CopyButton, IconButton } from "../../Button/index.js";
 export { Card } from "../../Card/index.js";
 export { Checkbox } from "../../Checkbox/index.js";
@@ -16,7 +17,9 @@ export { Dialog } from "../../Dialog/index.js";
 export { Drawer } from "../../Drawer/index.js";
 export { DropdownMenu } from "../../DropdownMenu/index.js";
 export { DynamicFieldset } from "../../DynamicFieldset/index.js";
+export { EmptyState } from "../../EmptyState/index.js";
 export { FilePicker } from "../../FilePicker/index.js";
+export { FillViewportHeight, FillViewportWidth, FillViewport } from "../../FillViewport/index.js";
 export { Grid } from "../../Grid/index.js";
 export { HeaderBar } from "../../HeaderBar/index.js";
 export { Heading } from "../../Heading/index.js";

package/exports/admin/ui.js

@@ -3,6 +3,7 @@ export { Accordion } from "../../Accordion/index.js";
 export { Alert } from "../../Alert/index.js";
 export { AutoComplete } from "../../AutoComplete/index.js";
 export { Avatar } from "../../Avatar/index.js";
+export { BetaBadge } from "../../BetaBadge/BetaBadge.js";
 export { Button, CopyButton, IconButton } from "../../Button/index.js";
 export { Card } from "../../Card/index.js";
 export { Checkbox } from "../../Checkbox/index.js";
@@ -16,7 +17,9 @@ export { Dialog } from "../../Dialog/index.js";
 export { Drawer } from "../../Drawer/index.js";
 export { DropdownMenu } from "../../DropdownMenu/index.js";
 export { DynamicFieldset } from "../../DynamicFieldset/index.js";
+export { EmptyState } from "../../EmptyState/index.js";
 export { FilePicker } from "../../FilePicker/index.js";
+export { FillViewport, FillViewportHeight, FillViewportWidth } from "../../FillViewport/index.js";
 export { Grid } from "../../Grid/index.js";
 export { HeaderBar } from "../../HeaderBar/index.js";
 export { Heading } from "../../Heading/index.js";

package/hooks/index.d.ts

@@ -1 +1,2 @@
 export * from "./useDisclosure.js";
+export * from "./useEscapeScrollLock.js";

package/hooks/index.js

@@ -1 +1,2 @@
 export * from "./useDisclosure.js";
+export * from "./useEscapeScrollLock.js";

package/hooks/useEscapeScrollLock.d.ts

@@ -0,0 +1,13 @@
+/**
+ * A modal `Dialog` locks scrolling by preventing every `wheel` and `touchmove` event that lands
+ * outside of its content. The listener sits on `document`, so layers that are portaled to
+ * `document.body` - popovers and the lists they render - count as "outside" and stop scrolling
+ * while the dialog is open.
+ *
+ * Stopping those events on the layer itself keeps them away from the `document` listener: the
+ * browser scrolls the layer as it normally would, and the lock still holds everywhere else.
+ *
+ * Attach the returned callback ref to the element whose subtree must remain scrollable. It has to
+ * be a callback ref, because layers like the popover mount their element after the first render.
+ */
+export declare const useEscapeScrollLock: <T extends HTMLElement>() => (element: T | null) => void;

package/hooks/useEscapeScrollLock.js

@@ -0,0 +1,21 @@
+import { useCallback, useRef } from "react";
+const useEscapeScrollLock = ()=>{
+    const detach = useRef(null);
+    return useCallback((element)=>{
+        if (detach.current) {
+            detach.current();
+            detach.current = null;
+        }
+        if (!element) return;
+        const stopPropagation = (event)=>event.stopPropagation();
+        element.addEventListener("wheel", stopPropagation);
+        element.addEventListener("touchmove", stopPropagation);
+        detach.current = ()=>{
+            element.removeEventListener("wheel", stopPropagation);
+            element.removeEventListener("touchmove", stopPropagation);
+        };
+    }, []);
+};
+export { useEscapeScrollLock };
+
+//# sourceMappingURL=useEscapeScrollLock.js.map

package/hooks/useEscapeScrollLock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks/useEscapeScrollLock.js","sources":["../../src/hooks/useEscapeScrollLock.ts"],"sourcesContent":["import { useCallback, useRef } from \"react\";\n\n/**\n * A modal `Dialog` locks scrolling by preventing every `wheel` and `touchmove` event that lands\n * outside of its content. The listener sits on `document`, so layers that are portaled to\n * `document.body` - popovers and the lists they render - count as \"outside\" and stop scrolling\n * while the dialog is open.\n *\n * Stopping those events on the layer itself keeps them away from the `document` listener: the\n * browser scrolls the layer as it normally would, and the lock still holds everywhere else.\n *\n * Attach the returned callback ref to the element whose subtree must remain scrollable. It has to\n * be a callback ref, because layers like the popover mount their element after the first render.\n */\nexport const useEscapeScrollLock = <T extends HTMLElement>() => {\n    const detach = useRef<(() => void) | null>(null);\n\n    return useCallback((element: T | null) => {\n        if (detach.current) {\n            detach.current();\n            detach.current = null;\n        }\n\n        if (!element) {\n            return;\n        }\n\n        const stopPropagation = (event: Event) => event.stopPropagation();\n\n        element.addEventListener(\"wheel\", stopPropagation);\n        element.addEventListener(\"touchmove\", stopPropagation);\n\n        detach.current = () => {\n            element.removeEventListener(\"wheel\", stopPropagation);\n            element.removeEventListener(\"touchmove\", stopPropagation);\n        };\n    }, []);\n};\n"],"names":["useEscapeScrollLock","detach","useRef","useCallback","element","stopPropagation","event"],"mappings":";AAcO,MAAMA,sBAAsB;IAC/B,MAAMC,SAASC,OAA4B;IAE3C,OAAOC,YAAY,CAACC;QAChB,IAAIH,OAAO,OAAO,EAAE;YAChBA,OAAO,OAAO;YACdA,OAAO,OAAO,GAAG;QACrB;QAEA,IAAI,CAACG,SACD;QAGJ,MAAMC,kBAAkB,CAACC,QAAiBA,MAAM,eAAe;QAE/DF,QAAQ,gBAAgB,CAAC,SAASC;QAClCD,QAAQ,gBAAgB,CAAC,aAAaC;QAEtCJ,OAAO,OAAO,GAAG;YACbG,QAAQ,mBAAmB,CAAC,SAASC;YACrCD,QAAQ,mBAAmB,CAAC,aAAaC;QAC7C;IACJ,GAAG,EAAE;AACT"}

package/index.d.ts

@@ -2,6 +2,8 @@ export * from "./Accordion/index.js";
 export * from "./Alert/index.js";
 export * from "./AutoComplete/index.js";
 export * from "./Avatar/index.js";
+export * from "./BetaBadge/BetaBadge.js";
+export * from "./Breadcrumbs/index.js";
 export * from "./Button/index.js";
 export * from "./Card/index.js";
 export * from "./Checkbox/index.js";
@@ -10,6 +12,7 @@ export * from "./CodeEditor/index.js";
 export * from "./ColorPicker/index.js";
 export * from "./Calendar/index.js";
 export * from "./DataList/index.js";
+export * from "./DragCursor/index.js";
 export * from "./DataTable/index.js";
 export * from "./DatePicker/index.js";
 export * from "./DelayedOnChange/index.js";
@@ -17,7 +20,10 @@ export * from "./Dialog/index.js";
 export * from "./Drawer/index.js";
 export * from "./DropdownMenu/index.js";
 export * from "./DynamicFieldset/index.js";
+export * from "./EditableTitle/index.js";
+export * from "./EmptyState/index.js";
 export * from "./FilePicker/index.js";
+export * from "./FillViewport/index.js";
 export * from "./FormComponent/index.js";
 export * from "./Grid/index.js";
 export * from "./HeaderBar/index.js";
@@ -26,6 +32,7 @@ export * from "./Heading/index.js";
 export * from "./Icon/index.js";
 export * from "./IconPicker/index.js";
 export * from "./Image/index.js";
+export * from "./ImageEditor/index.js";
 export * from "./Input/index.js";
 export * from "./Label/index.js";
 export * from "./Link/index.js";
@@ -54,6 +61,7 @@ export * from "./Table/index.js";
 export * from "./Tabs/index.js";
 export * from "./Tag/index.js";
 export * from "./Tags/index.js";
+export * from "./Markdown/index.js";
 export * from "./Text/index.js";
 export * from "./Textarea/index.js";
 export * from "./Toggle/index.js";

package/index.js

@@ -2,6 +2,8 @@ export * from "./Accordion/index.js";
 export * from "./Alert/index.js";
 export * from "./AutoComplete/index.js";
 export * from "./Avatar/index.js";
+export * from "./BetaBadge/BetaBadge.js";
+export * from "./Breadcrumbs/index.js";
 export * from "./Button/index.js";
 export * from "./Card/index.js";
 export * from "./Checkbox/index.js";
@@ -10,6 +12,7 @@ export * from "./CodeEditor/index.js";
 export * from "./ColorPicker/index.js";
 export * from "./Calendar/index.js";
 export * from "./DataList/index.js";
+export * from "./DragCursor/index.js";
 export * from "./DataTable/index.js";
 export * from "./DatePicker/index.js";
 export * from "./DelayedOnChange/index.js";
@@ -17,7 +20,10 @@ export * from "./Dialog/index.js";
 export * from "./Drawer/index.js";
 export * from "./DropdownMenu/index.js";
 export * from "./DynamicFieldset/index.js";
+export * from "./EditableTitle/index.js";
+export * from "./EmptyState/index.js";
 export * from "./FilePicker/index.js";
+export * from "./FillViewport/index.js";
 export * from "./FormComponent/index.js";
 export * from "./Grid/index.js";
 export * from "./HeaderBar/index.js";
@@ -25,6 +31,7 @@ export * from "./Heading/index.js";
 export * from "./Icon/index.js";
 export * from "./IconPicker/index.js";
 export * from "./Image/index.js";
+export * from "./ImageEditor/index.js";
 export * from "./Input/index.js";
 export * from "./Label/index.js";
 export * from "./Link/index.js";
@@ -53,6 +60,7 @@ export * from "./Table/index.js";
 export * from "./Tabs/index.js";
 export * from "./Tag/index.js";
 export * from "./Tags/index.js";
+export * from "./Markdown/index.js";
 export * from "./Text/index.js";
 export * from "./Textarea/index.js";
 export * from "./Toggle/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webiny/admin-ui",
-	"version": "0.0.0-unstable.7be00a75a9",
+	"version": "0.0.0-unstable.7c2def32a7",
 	"type": "module",
 	"exports": {
 		".": "./index.js",
@@ -13,61 +13,59 @@
 	"description": "The UI component library for Webiny's Admin app.",
 	"license": "MIT",
 	"dependencies": {
-		"@fortawesome/fontawesome-svg-core": "7.2.0",
-		"@fortawesome/react-fontawesome": "3.3.1",
+		"@fortawesome/fontawesome-svg-core": "7.3.1",
+		"@fortawesome/react-fontawesome": "3.5.0",
 		"@minoru/react-dnd-treeview": "3.5.4",
 		"@monaco-editor/react": "4.7.0",
-		"@radix-ui/react-scroll-area": "1.2.10",
-		"@tanstack/react-table": "8.21.3",
-		"@webiny/icons": "0.0.0-unstable.7be00a75a9",
-		"@webiny/react-composition": "0.0.0-unstable.7be00a75a9",
-		"@webiny/utils": "0.0.0-unstable.7be00a75a9",
+		"@radix-ui/react-scroll-area": "1.2.18",
+		"@tanstack/react-table": "9.1.2",
+		"@webiny/icons": "0.0.0-unstable.7c2def32a7",
+		"@webiny/react-composition": "0.0.0-unstable.7c2def32a7",
+		"@webiny/utils": "0.0.0-unstable.7c2def32a7",
 		"bytes": "3.1.2",
 		"class-variance-authority": "0.7.1",
 		"clsx": "2.1.1",
 		"cmdk": "1.1.1",
-		"date-fns": "4.2.1",
+		"date-fns": "4.4.0",
 		"lodash": "4.18.1",
-		"minimatch": "10.2.5",
-		"mobx": "6.15.3",
+		"minimatch": "10.2.6",
+		"mobx": "7.0.3",
 		"monaco-editor": "0.53.0",
-		"radix-ui": "1.4.3",
+		"radix-ui": "1.6.7",
 		"react": "18.3.1",
 		"react-color": "2.19.3",
 		"react-custom-scrollbars": "4.2.1",
 		"react-day-picker": "10.0.1",
 		"react-dnd": "16.0.1",
 		"react-virtualized": "9.22.6",
-		"sonner": "2.0.7",
-		"tailwind-merge": "2.6.1",
-		"tailwindcss": "4.3.0",
+		"sonner": "2.0.8",
+		"tailwind-merge": "3.6.0",
+		"tailwindcss": "4.3.3",
 		"tw-animate-css": "1.4.0",
-		"type-fest": "5.6.0"
+		"type-fest": "5.8.0"
 	},
 	"devDependencies": {
-		"@fortawesome/free-solid-svg-icons": "7.2.0",
-		"@storybook/addon-a11y": "10.4.0",
-		"@storybook/addon-docs": "10.4.0",
-		"@storybook/addon-webpack5-compiler-swc": "4.0.3",
-		"@storybook/react-webpack5": "10.4.0",
-		"@svgr/webpack": "8.1.0",
-		"@tailwindcss/postcss": "4.3.0",
-		"@types/react": "18.3.29",
+		"@fortawesome/free-solid-svg-icons": "7.3.1",
+		"@rsbuild/core": "2.1.13",
+		"@rsbuild/plugin-svgr": "2.0.5",
+		"@storybook/addon-a11y": "10.5.10",
+		"@storybook/addon-docs": "10.5.10",
+		"@storybook/react": "10.5.10",
+		"@tailwindcss/postcss": "4.3.3",
+		"@types/react": "18.3.31",
 		"@types/react-color": "3.0.13",
 		"@types/react-custom-scrollbars": "4.0.13",
 		"@types/react-virtualized": "9.22.3",
-		"@webiny/build-tools": "0.0.0-unstable.7be00a75a9",
-		"@webiny/project": "0.0.0-unstable.7be00a75a9",
-		"chalk": "5.6.2",
-		"css-loader": "7.1.4",
-		"file-loader": "6.2.0",
-		"oxfmt": "0.51.0",
-		"postcss-loader": "8.2.1",
+		"@webiny/build-tools": "0.0.0-unstable.7c2def32a7",
+		"@webiny/project": "0.0.0-unstable.7c2def32a7",
+		"chalk": "6.0.0",
+		"oxfmt": "0.64.0",
 		"rimraf": "6.1.3",
-		"sass": "1.99.0",
-		"storybook": "10.4.0",
-		"typescript": "6.0.3",
-		"vitest": "4.1.7"
+		"sass": "1.103.1",
+		"storybook": "10.5.10",
+		"storybook-react-rsbuild": "3.4.2",
+		"typescript": "7.0.2",
+		"vitest": "4.1.11"
 	},
 	"publishConfig": {
 		"access": "public"

package/theme.css

@@ -86,6 +86,7 @@
   --color-primary-strong: var(--color-primary-700);
   --color-primary-subtle: var(--color-primary-100);
   --color-primary-xstrong: var(--color-primary-900);
+  --color-primary-light: var(--color-primary-200);
 
   --color-secondary: var(--color-success-500);
   --color-secondary-disabled: var(--color-success-400);
@@ -231,6 +232,9 @@
   --spacing-sidebar-collapsed: 44px;
   --spacing-sidebar-expanded: 256px;
   --spacing-header: 45px;
+  --spacing-banner: 32px;
+  --wb-spacing-toolbar: 329px;
+  --wb-spacing-sidebar: 329px;
   --spacing-main-content: calc(100vh - var(--spacing-header));
 
   /* With TW4, `leading-none` maps to `--spacing-none`, which is 0px. So, we
@@ -340,6 +344,17 @@
       background-color: var(--color-neutral-muted);
     }
   }
+
+  --animate-skeleton-pulse-light: skeleton-pulse-light 1400ms ease-in-out infinite;
+  @keyframes skeleton-pulse-light {
+    0%,
+    100% {
+      background-color: var(--color-neutral-subtle);
+    }
+    50% {
+      background-color: var(--color-neutral-disabled);
+    }
+  }
 }
 
 @utility container {
@@ -352,6 +367,43 @@
   @apply bg-neutral-light;
 }
 
+@utility fill-checker {
+  background-image: repeating-conic-gradient(
+    var(--color-neutral-dimmed) 0% 25%,
+    transparent 0% 50%
+  );
+  background-size: 16px 16px;
+  @apply bg-white;
+}
+
+/*
+ * A Select hides its scrollbar and offers scroll buttons instead, which leaves a long list looking
+ * like it ends where it is cut off. These rules bring the scrollbar back, shaped like the thumb
+ * `ScrollArea` draws, so the two kinds of dropdown read the same. Radix injects the rules that hide
+ * it when the list opens, hence `!important`.
+ */
+[data-radix-select-viewport] {
+  /* Back to the initial value, both to undo Radix and because Chrome drops the rules below when
+     `scrollbar-width` or `scrollbar-color` say anything else. */
+  scrollbar-width: auto !important;
+}
+
+[data-radix-select-viewport]::-webkit-scrollbar {
+  display: block !important;
+  width: 10px;
+}
+
+[data-radix-select-viewport]::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+[data-radix-select-viewport]::-webkit-scrollbar-thumb {
+  background-color: color-mix(in oklab, var(--color-neutral-strong) 70%, transparent);
+  background-clip: content-box;
+  border: 2px solid transparent;
+  border-radius: calc(infinity * 1px);
+}
+
 @layer base {
   a {
     @apply text-accent-primary hover:underline focus-visible:outline-none focus-visible:ring-lg focus-visible:ring-primary-dimmed rounded-xs;

package/utils.js

@@ -2,15 +2,13 @@ import react from "react";
 import { clsx } from "clsx";
 import { generateId } from "@webiny/utils/generateId.js";
 import { extendTailwindMerge } from "tailwind-merge";
+const BORDER_WIDTHS = [
+    "sm",
+    "md",
+    "none"
+];
 const twMerge = extendTailwindMerge({
     override: {
-        theme: {
-            borderWidth: [
-                "sm",
-                "md",
-                "none"
-            ]
-        },
         classGroups: {
             "border-color": [
                 "border-transparent",
@@ -27,6 +25,7 @@ const twMerge = extendTailwindMerge({
                 "border-neutral-black",
                 "border-neutral-dark",
                 "border-neutral-dimmed",
+                "border-neutral-dimmed-darker",
                 "border-neutral-muted",
                 "border-neutral-strong",
                 "border-neutral-subtle",
@@ -72,39 +71,59 @@ const twMerge = extendTailwindMerge({
         }
     },
     extend: {
-        theme: {
-            padding: [
-                "lg",
-                "md",
-                "md-extra",
-                "none",
-                "sm",
-                "sm-extra",
-                "sm-plus",
-                "xl",
-                "xs",
-                "xs-plus",
-                "xxl",
-                "xxs"
+        classGroups: {
+            "border-w": [
+                {
+                    border: BORDER_WIDTHS
+                }
             ],
-            margin: [
-                "lg",
-                "md",
-                "md-plus",
-                "none",
-                "sm",
-                "sm-extra",
-                "sm-plus",
-                "xl",
-                "xs",
-                "xs-plus",
-                "xxl",
-                "xxs"
+            "border-w-x": [
+                {
+                    "border-x": BORDER_WIDTHS
+                }
+            ],
+            "border-w-y": [
+                {
+                    "border-y": BORDER_WIDTHS
+                }
             ],
+            "border-w-t": [
+                {
+                    "border-t": BORDER_WIDTHS
+                }
+            ],
+            "border-w-r": [
+                {
+                    "border-r": BORDER_WIDTHS
+                }
+            ],
+            "border-w-b": [
+                {
+                    "border-b": BORDER_WIDTHS
+                }
+            ],
+            "border-w-l": [
+                {
+                    "border-l": BORDER_WIDTHS
+                }
+            ],
+            "border-w-s": [
+                {
+                    "border-s": BORDER_WIDTHS
+                }
+            ],
+            "border-w-e": [
+                {
+                    "border-e": BORDER_WIDTHS
+                }
+            ]
+        },
+        theme: {
             spacing: [
                 "3xl",
                 "lg",
                 "md",
+                "md-extra",
                 "md-plus",
                 "none",
                 "sm",

package/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../src/utils.tsx"],"sourcesContent":["import React from \"react\";\nimport { clsx, type ClassValue } from \"clsx\";\nimport { generateId as baseGenerateId } from \"@webiny/utils/generateId.js\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nexport { makeDecoratable } from \"@webiny/react-composition\";\n\nconst twMerge = extendTailwindMerge({\n    override: {\n        theme: {\n            borderWidth: [\"sm\", \"md\", \"none\"]\n        },\n        classGroups: {\n            \"border-color\": [\n                \"border-transparent\",\n                \"border-white\",\n                \"border-accent\",\n                \"border-accent-default\",\n                \"border-accent-dimmed\",\n                \"border-accent-subtle\",\n                \"border-destructive\",\n                \"border-destructive-default\",\n                \"border-destructive-subtle\",\n                \"border-neutral\",\n                \"border-neutral-base\",\n                \"border-neutral-black\",\n                \"border-neutral-dark\",\n                \"border-neutral-dimmed\",\n                \"border-neutral-muted\",\n                \"border-neutral-strong\",\n                \"border-neutral-subtle\",\n                \"border-success\",\n                \"border-success-default\",\n                \"border-success-subtle\"\n            ],\n            \"border-style\": [\"border-solid\", \"border-dashed\", \"border-dotted\"],\n            \"ring-color\": [\n                \"ring-primary\",\n                \"ring-primary-dimmed\",\n                \"ring-primary-strong\",\n                \"ring-primary-subtle\",\n                \"ring-success\",\n                \"ring-success-dimmed\",\n                \"ring-success-strong\",\n                \"ring-success-subtle\"\n            ],\n            \"ring-w\": [\"ring-sm\", \"ring-md\", \"ring-lg\"],\n            \"font-size\": [\n                \"text-h1\",\n                \"text-h2\",\n                \"text-h3\",\n                \"text-h4\",\n                \"text-h5\",\n                \"text-h6\",\n                \"text-sm\",\n                \"text-md\",\n                \"text-lg\",\n                \"text-xl\",\n                \"text-xxl\",\n                \"text-3xl\",\n                \"text-4xl\"\n            ]\n        }\n    },\n    extend: {\n        theme: {\n            padding: [\n                \"lg\",\n                \"md\",\n                \"md-extra\",\n                \"none\",\n                \"sm\",\n                \"sm-extra\",\n                \"sm-plus\",\n                \"xl\",\n                \"xs\",\n                \"xs-plus\",\n                \"xxl\",\n                \"xxs\"\n            ],\n            margin: [\n                \"lg\",\n                \"md\",\n                \"md-plus\",\n                \"none\",\n                \"sm\",\n                \"sm-extra\",\n                \"sm-plus\",\n                \"xl\",\n                \"xs\",\n                \"xs-plus\",\n                \"xxl\",\n                \"xxs\"\n            ],\n            spacing: [\n                \"3xl\",\n                \"lg\",\n                \"md\",\n                \"md-plus\",\n                \"none\",\n                \"sm\",\n                \"sm-extra\",\n                \"sm-plus\",\n                \"xl\",\n                \"xs\",\n                \"xs-plus\",\n                \"xxl\",\n                \"xxs\",\n                \"sidebar-collapsed\",\n                \"sidebar-expanded\"\n            ]\n        }\n    }\n});\n\nexport function cn(...inputs: ClassValue[]) {\n    return twMerge(clsx(inputs));\n}\n\nexport const generateId = (initialId?: string) => {\n    if (initialId) {\n        return initialId;\n    }\n    return \"\" + baseGenerateId(4);\n};\n\nexport const withStaticProps = <TComponent extends React.ComponentType<any>, TProps>(\n    component: TComponent,\n    props: TProps\n) => {\n    return Object.assign(component, props) as TComponent & TProps;\n};\n\nexport function createComponentPropsProvider<TProps extends Record<string, any>>() {\n    const PropsContext = React.createContext<TProps>({} as TProps);\n\n    type PropsProviderProps = {\n        props: TProps;\n        children: React.ReactNode;\n    };\n\n    const PropsProvider: React.ComponentType<PropsProviderProps> = ({\n        props,\n        children\n    }: PropsProviderProps) => {\n        return <PropsContext.Provider value={props}>{children}</PropsContext.Provider>;\n    };\n\n    const useProps = () => {\n        return React.useContext(PropsContext);\n    };\n\n    return [PropsProvider, useProps] as const;\n}\n\nexport function omit<T extends object, K extends keyof T>(obj: T, keys: K[]): Omit<T, K> {\n    const result = { ...obj };\n    keys.forEach(key => delete result[key]);\n    return result;\n}\n\nexport { cva, type VariantProps };\n"],"names":["twMerge","extendTailwindMerge","cn","inputs","clsx","generateId","initialId","baseGenerateId","withStaticProps","component","props","Object","createComponentPropsProvider","PropsContext","React","PropsProvider","children","useProps","omit","obj","keys","result","key"],"mappings":";;;;AAOA,MAAMA,UAAUC,oBAAoB;IAChC,UAAU;QACN,OAAO;YACH,aAAa;gBAAC;gBAAM;gBAAM;aAAO;QACrC;QACA,aAAa;YACT,gBAAgB;gBACZ;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;aACH;YACD,gBAAgB;gBAAC;gBAAgB;gBAAiB;aAAgB;YAClE,cAAc;gBACV;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;aACH;YACD,UAAU;gBAAC;gBAAW;gBAAW;aAAU;YAC3C,aAAa;gBACT;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;aACH;QACL;IACJ;IACA,QAAQ;QACJ,OAAO;YACH,SAAS;gBACL;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;aACH;YACD,QAAQ;gBACJ;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;aACH;YACD,SAAS;gBACL;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;aACH;QACL;IACJ;AACJ;AAEO,SAASC,GAAG,GAAGC,MAAoB;IACtC,OAAOH,QAAQI,KAAKD;AACxB;AAEO,MAAME,mBAAa,CAACC;IACvB,IAAIA,WACA,OAAOA;IAEX,OAAO,KAAKC,WAAe;AAC/B;AAEO,MAAMC,kBAAkB,CAC3BC,WACAC,QAEOC,OAAO,MAAM,CAACF,WAAWC;AAG7B,SAASE;IACZ,MAAMC,eAAe,WAAfA,GAAeC,MAAAA,aAAmB,CAAS,CAAC;IAOlD,MAAMC,gBAAyD,CAAC,EAC5DL,KAAK,EACLM,QAAQ,EACS,GACV,WAAP,GAAO,oBAACH,aAAa,QAAQ;YAAC,OAAOH;WAAQM;IAGjD,MAAMC,WAAW,IACNH,MAAAA,UAAgB,CAACD;IAG5B,OAAO;QAACE;QAAeE;KAAS;AACpC;AAEO,SAASC,KAA0CC,GAAM,EAAEC,IAAS;IACvE,MAAMC,SAAS;QAAE,GAAGF,GAAG;IAAC;IACxBC,KAAK,OAAO,CAACE,CAAAA,MAAO,OAAOD,MAAM,CAACC,IAAI;IACtC,OAAOD;AACX"}
+{"version":3,"file":"utils.js","sources":["../src/utils.tsx"],"sourcesContent":["import React from \"react\";\nimport { clsx, type ClassValue } from \"clsx\";\nimport { generateId as baseGenerateId } from \"@webiny/utils/generateId.js\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nexport { makeDecoratable } from \"@webiny/react-composition\";\n\nconst BORDER_WIDTHS = [\"sm\", \"md\", \"none\"];\n\nconst twMerge = extendTailwindMerge({\n    override: {\n        classGroups: {\n            \"border-color\": [\n                \"border-transparent\",\n                \"border-white\",\n                \"border-accent\",\n                \"border-accent-default\",\n                \"border-accent-dimmed\",\n                \"border-accent-subtle\",\n                \"border-destructive\",\n                \"border-destructive-default\",\n                \"border-destructive-subtle\",\n                \"border-neutral\",\n                \"border-neutral-base\",\n                \"border-neutral-black\",\n                \"border-neutral-dark\",\n                \"border-neutral-dimmed\",\n                \"border-neutral-dimmed-darker\",\n                \"border-neutral-muted\",\n                \"border-neutral-strong\",\n                \"border-neutral-subtle\",\n                \"border-success\",\n                \"border-success-default\",\n                \"border-success-subtle\"\n            ],\n            \"border-style\": [\"border-solid\", \"border-dashed\", \"border-dotted\"],\n            \"ring-color\": [\n                \"ring-primary\",\n                \"ring-primary-dimmed\",\n                \"ring-primary-strong\",\n                \"ring-primary-subtle\",\n                \"ring-success\",\n                \"ring-success-dimmed\",\n                \"ring-success-strong\",\n                \"ring-success-subtle\"\n            ],\n            \"ring-w\": [\"ring-sm\", \"ring-md\", \"ring-lg\"],\n            \"font-size\": [\n                \"text-h1\",\n                \"text-h2\",\n                \"text-h3\",\n                \"text-h4\",\n                \"text-h5\",\n                \"text-h6\",\n                \"text-sm\",\n                \"text-md\",\n                \"text-lg\",\n                \"text-xl\",\n                \"text-xxl\",\n                \"text-3xl\",\n                \"text-4xl\"\n            ]\n        }\n    },\n    extend: {\n        classGroups: {\n            \"border-w\": [{ border: BORDER_WIDTHS }],\n            \"border-w-x\": [{ \"border-x\": BORDER_WIDTHS }],\n            \"border-w-y\": [{ \"border-y\": BORDER_WIDTHS }],\n            \"border-w-t\": [{ \"border-t\": BORDER_WIDTHS }],\n            \"border-w-r\": [{ \"border-r\": BORDER_WIDTHS }],\n            \"border-w-b\": [{ \"border-b\": BORDER_WIDTHS }],\n            \"border-w-l\": [{ \"border-l\": BORDER_WIDTHS }],\n            \"border-w-s\": [{ \"border-s\": BORDER_WIDTHS }],\n            \"border-w-e\": [{ \"border-e\": BORDER_WIDTHS }]\n        },\n        theme: {\n            spacing: [\n                \"3xl\",\n                \"lg\",\n                \"md\",\n                \"md-extra\",\n                \"md-plus\",\n                \"none\",\n                \"sm\",\n                \"sm-extra\",\n                \"sm-plus\",\n                \"xl\",\n                \"xs\",\n                \"xs-plus\",\n                \"xxl\",\n                \"xxs\",\n                \"sidebar-collapsed\",\n                \"sidebar-expanded\"\n            ]\n        }\n    }\n});\n\nexport function cn(...inputs: ClassValue[]) {\n    return twMerge(clsx(inputs));\n}\n\nexport const generateId = (initialId?: string) => {\n    if (initialId) {\n        return initialId;\n    }\n    return \"\" + baseGenerateId(4);\n};\n\nexport const withStaticProps = <TComponent extends React.ComponentType<any>, TProps>(\n    component: TComponent,\n    props: TProps\n) => {\n    return Object.assign(component, props) as TComponent & TProps;\n};\n\nexport function createComponentPropsProvider<TProps extends Record<string, any>>() {\n    const PropsContext = React.createContext<TProps>({} as TProps);\n\n    type PropsProviderProps = {\n        props: TProps;\n        children: React.ReactNode;\n    };\n\n    const PropsProvider: React.ComponentType<PropsProviderProps> = ({\n        props,\n        children\n    }: PropsProviderProps) => {\n        return <PropsContext.Provider value={props}>{children}</PropsContext.Provider>;\n    };\n\n    const useProps = () => {\n        return React.useContext(PropsContext);\n    };\n\n    return [PropsProvider, useProps] as const;\n}\n\nexport function omit<T extends object, K extends keyof T>(obj: T, keys: K[]): Omit<T, K> {\n    const result = { ...obj };\n    keys.forEach(key => delete result[key]);\n    return result;\n}\n\nexport { cva, type VariantProps };\n"],"names":["BORDER_WIDTHS","twMerge","extendTailwindMerge","cn","inputs","clsx","generateId","initialId","baseGenerateId","withStaticProps","component","props","Object","createComponentPropsProvider","PropsContext","React","PropsProvider","children","useProps","omit","obj","keys","result","key"],"mappings":";;;;AAOA,MAAMA,gBAAgB;IAAC;IAAM;IAAM;CAAO;AAE1C,MAAMC,UAAUC,oBAAoB;IAChC,UAAU;QACN,aAAa;YACT,gBAAgB;gBACZ;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;aACH;YACD,gBAAgB;gBAAC;gBAAgB;gBAAiB;aAAgB;YAClE,cAAc;gBACV;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;aACH;YACD,UAAU;gBAAC;gBAAW;gBAAW;aAAU;YAC3C,aAAa;gBACT;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;aACH;QACL;IACJ;IACA,QAAQ;QACJ,aAAa;YACT,YAAY;gBAAC;oBAAE,QAAQF;gBAAc;aAAE;YACvC,cAAc;gBAAC;oBAAE,YAAYA;gBAAc;aAAE;YAC7C,cAAc;gBAAC;oBAAE,YAAYA;gBAAc;aAAE;YAC7C,cAAc;gBAAC;oBAAE,YAAYA;gBAAc;aAAE;YAC7C,cAAc;gBAAC;oBAAE,YAAYA;gBAAc;aAAE;YAC7C,cAAc;gBAAC;oBAAE,YAAYA;gBAAc;aAAE;YAC7C,cAAc;gBAAC;oBAAE,YAAYA;gBAAc;aAAE;YAC7C,cAAc;gBAAC;oBAAE,YAAYA;gBAAc;aAAE;YAC7C,cAAc;gBAAC;oBAAE,YAAYA;gBAAc;aAAE;QACjD;QACA,OAAO;YACH,SAAS;gBACL;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;gBACA;aACH;QACL;IACJ;AACJ;AAEO,SAASG,GAAG,GAAGC,MAAoB;IACtC,OAAOH,QAAQI,KAAKD;AACxB;AAEO,MAAME,mBAAa,CAACC;IACvB,IAAIA,WACA,OAAOA;IAEX,OAAO,KAAKC,WAAe;AAC/B;AAEO,MAAMC,kBAAkB,CAC3BC,WACAC,QAEOC,OAAO,MAAM,CAACF,WAAWC;AAG7B,SAASE;IACZ,MAAMC,eAAe,WAAfA,GAAeC,MAAAA,aAAmB,CAAS,CAAC;IAOlD,MAAMC,gBAAyD,CAAC,EAC5DL,KAAK,EACLM,QAAQ,EACS,GACV,WAAP,GAAO,oBAACH,aAAa,QAAQ;YAAC,OAAOH;WAAQM;IAGjD,MAAMC,WAAW,IACNH,MAAAA,UAAgB,CAACD;IAG5B,OAAO;QAACE;QAAeE;KAAS;AACpC;AAEO,SAASC,KAA0CC,GAAM,EAAEC,IAAS;IACvE,MAAMC,SAAS;QAAE,GAAGF,GAAG;IAAC;IACxBC,KAAK,OAAO,CAACE,CAAAA,MAAO,OAAOD,MAAM,CAACC,IAAI;IACtC,OAAOD;AACX"}