@webiny/admin-ui 6.0.0-alpha.4 → 6.0.0-rc.0

package/index.js

@@ -1,61 +1,64 @@
-export * from "./Accordion";
-export * from "./Alert";
-export * from "./AutoComplete";
-export * from "./Avatar";
-export * from "./Button";
-export * from "./Card";
-export * from "./Checkbox";
-export * from "./CheckboxGroup";
-export * from "./CodeEditor";
-export * from "./ColorPicker";
-export * from "./DataList";
-export * from "./DataTable";
-export * from "./DelayedOnChange";
-export * from "./Dialog";
-export * from "./Drawer";
-export * from "./DropdownMenu";
-export * from "./DynamicFieldset";
-export * from "./FilePicker";
-export * from "./FormComponent";
-export * from "./Grid";
-export * from "./HeaderBar";
-export * from "./HeaderBar";
-export * from "./Heading";
-export * from "./Icon";
-export * from "./IconPicker";
-export * from "./Image";
-export * from "./Input";
-export * from "./Label";
-export * from "./Link";
-export * from "./List";
-export * from "./Loader";
-export * from "./MultiAutoComplete";
-export * from "./MultiFilePicker";
-export * from "./Portal";
-export * from "./Popover";
-export * from "./ProgressBar";
-export * from "./Providers";
-export * from "./RadioGroup";
-export * from "./RangeSlider";
-export * from "./RichTextEditor";
-export * from "./Scrollbar";
-export * from "./Select";
-export * from "./Separator";
-export * from "./Sidebar";
-export * from "./Skeleton";
-export * from "./Slider";
-export * from "./SteppedProgress";
-export * from "./Switch";
-export * from "./Table";
-export * from "./Tabs";
-export * from "./Tag";
-export * from "./Tags";
-export * from "./Text";
-export * from "./Textarea";
-export * from "./TimeAgo";
-export * from "./Toast";
-export * from "./Tooltip";
-export * from "./Tree";
-export * from "./utils";
+export * from "./Accordion/index.js";
+export * from "./Alert/index.js";
+export * from "./AutoComplete/index.js";
+export * from "./Avatar/index.js";
+export * from "./Button/index.js";
+export * from "./Card/index.js";
+export * from "./Checkbox/index.js";
+export * from "./CheckboxGroup/index.js";
+export * from "./CodeEditor/index.js";
+export * from "./ColorPicker/index.js";
+export * from "./DataList/index.js";
+export * from "./DataTable/index.js";
+export * from "./DelayedOnChange/index.js";
+export * from "./Dialog/index.js";
+export * from "./Drawer/index.js";
+export * from "./DropdownMenu/index.js";
+export * from "./DynamicFieldset/index.js";
+export * from "./FilePicker/index.js";
+export * from "./FormComponent/index.js";
+export * from "./Grid/index.js";
+export * from "./HeaderBar/index.js";
+export * from "./HeaderBar/index.js";
+export * from "./Heading/index.js";
+export * from "./Icon/index.js";
+export * from "./IconPicker/index.js";
+export * from "./Image/index.js";
+export * from "./Input/index.js";
+export * from "./Label/index.js";
+export * from "./Link/index.js";
+export * from "./List/index.js";
+export * from "./Loader/index.js";
+export * from "./MultiAutoComplete/index.js";
+export * from "./MultiFilePicker/index.js";
+export * from "./Portal/index.js";
+export * from "./Popover/index.js";
+export * from "./ProgressBar/index.js";
+export * from "./AdminUiProvider/index.js";
+export * from "./RadioGroup/index.js";
+export * from "./RangeSlider/index.js";
+export * from "./Scrollbar/index.js";
+export * from "./ScrollArea/index.js";
+export * from "./SegmentedControl/index.js";
+export * from "./Select/index.js";
+export * from "./Separator/index.js";
+export * from "./Sidebar/index.js";
+export * from "./Skeleton/index.js";
+export * from "./Slider/index.js";
+export * from "./SteppedProgress/index.js";
+export * from "./Switch/index.js";
+export * from "./Table/index.js";
+export * from "./Tabs/index.js";
+export * from "./Tag/index.js";
+export * from "./Tags/index.js";
+export * from "./Text/index.js";
+export * from "./Textarea/index.js";
+export * from "./TimeAgo/index.js";
+export * from "./Toast/index.js";
+export * from "./Tooltip/index.js";
+export * from "./Tree/index.js";
+export * from "./Widget/index.js";
+export * from "./utils.js";
+export * from "./hooks/index.js";
 
 //# sourceMappingURL=index.js.map

package/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Accordion\";\nexport * from \"./Alert\";\nexport * from \"./AutoComplete\";\nexport * from \"./Avatar\";\nexport * from \"./Button\";\nexport * from \"./Card\";\nexport * from \"./Checkbox\";\nexport * from \"./CheckboxGroup\";\nexport * from \"./CodeEditor\";\nexport * from \"./ColorPicker\";\nexport * from \"./DataList\";\nexport * from \"./DataTable\";\nexport * from \"./DelayedOnChange\";\nexport * from \"./Dialog\";\nexport * from \"./Drawer\";\nexport * from \"./DropdownMenu\";\nexport * from \"./DynamicFieldset\";\nexport * from \"./FilePicker\";\nexport * from \"./FormComponent\";\nexport * from \"./Grid\";\nexport * from \"./HeaderBar\";\nexport * from \"./HeaderBar\";\nexport * from \"./Heading\";\nexport * from \"./Icon\";\nexport * from \"./IconPicker\";\nexport * from \"./Image\";\nexport * from \"./Input\";\nexport * from \"./Label\";\nexport * from \"./Link\";\nexport * from \"./List\";\nexport * from \"./Loader\";\nexport * from \"./MultiAutoComplete\";\nexport * from \"./MultiFilePicker\";\nexport * from \"./Portal\";\nexport * from \"./Popover\";\nexport * from \"./ProgressBar\";\nexport * from \"./Providers\";\nexport * from \"./RadioGroup\";\nexport * from \"./RangeSlider\";\nexport * from \"./RichTextEditor\";\nexport * from \"./Scrollbar\";\nexport * from \"./Select\";\nexport * from \"./Separator\";\nexport * from \"./Sidebar\";\nexport * from \"./Skeleton\";\nexport * from \"./Slider\";\nexport * from \"./SteppedProgress\";\nexport * from \"./Switch\";\nexport * from \"./Table\";\nexport * from \"./Tabs\";\nexport * from \"./Tag\";\nexport * from \"./Tags\";\nexport * from \"./Text\";\nexport * from \"./Textarea\";\nexport * from \"./TimeAgo\";\nexport * from \"./Toast\";\nexport * from \"./Tooltip\";\nexport * from \"./Tree\";\nexport * from \"./utils\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","ignoreList":[]}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Accordion/index.js\";\nexport * from \"./Alert/index.js\";\nexport * from \"./AutoComplete/index.js\";\nexport * from \"./Avatar/index.js\";\nexport * from \"./Button/index.js\";\nexport * from \"./Card/index.js\";\nexport * from \"./Checkbox/index.js\";\nexport * from \"./CheckboxGroup/index.js\";\nexport * from \"./CodeEditor/index.js\";\nexport * from \"./ColorPicker/index.js\";\nexport * from \"./DataList/index.js\";\nexport * from \"./DataTable/index.js\";\nexport * from \"./DelayedOnChange/index.js\";\nexport * from \"./Dialog/index.js\";\nexport * from \"./Drawer/index.js\";\nexport * from \"./DropdownMenu/index.js\";\nexport * from \"./DynamicFieldset/index.js\";\nexport * from \"./FilePicker/index.js\";\nexport * from \"./FormComponent/index.js\";\nexport * from \"./Grid/index.js\";\nexport * from \"./HeaderBar/index.js\";\nexport * from \"./HeaderBar/index.js\";\nexport * from \"./Heading/index.js\";\nexport * from \"./Icon/index.js\";\nexport * from \"./IconPicker/index.js\";\nexport * from \"./Image/index.js\";\nexport * from \"./Input/index.js\";\nexport * from \"./Label/index.js\";\nexport * from \"./Link/index.js\";\nexport * from \"./List/index.js\";\nexport * from \"./Loader/index.js\";\nexport * from \"./MultiAutoComplete/index.js\";\nexport * from \"./MultiFilePicker/index.js\";\nexport * from \"./Portal/index.js\";\nexport * from \"./Popover/index.js\";\nexport * from \"./ProgressBar/index.js\";\nexport * from \"./AdminUiProvider/index.js\";\nexport * from \"./RadioGroup/index.js\";\nexport * from \"./RangeSlider/index.js\";\nexport * from \"./Scrollbar/index.js\";\nexport * from \"./ScrollArea/index.js\";\nexport * from \"./SegmentedControl/index.js\";\nexport * from \"./Select/index.js\";\nexport * from \"./Separator/index.js\";\nexport * from \"./Sidebar/index.js\";\nexport * from \"./Skeleton/index.js\";\nexport * from \"./Slider/index.js\";\nexport * from \"./SteppedProgress/index.js\";\nexport * from \"./Switch/index.js\";\nexport * from \"./Table/index.js\";\nexport * from \"./Tabs/index.js\";\nexport * from \"./Tag/index.js\";\nexport * from \"./Tags/index.js\";\nexport * from \"./Text/index.js\";\nexport * from \"./Textarea/index.js\";\nexport * from \"./TimeAgo/index.js\";\nexport * from \"./Toast/index.js\";\nexport * from \"./Tooltip/index.js\";\nexport * from \"./Tree/index.js\";\nexport * from \"./Widget/index.js\";\nexport * from \"./utils.js\";\nexport * from \"./hooks/index.js\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","ignoreList":[]}

package/package.json

@@ -1,6 +1,7 @@
 {
 	"name": "@webiny/admin-ui",
-	"version": "6.0.0-alpha.4",
+	"version": "6.0.0-rc.0",
+	"type": "module",
 	"main": "index.js",
 	"repository": {
 		"type": "git",
@@ -9,68 +10,67 @@
 	"description": "The UI component library for Webiny's Admin app.",
 	"license": "MIT",
 	"dependencies": {
-		"@editorjs/editorjs": "2.26.5",
 		"@fortawesome/fontawesome-svg-core": "1.3.0",
 		"@fortawesome/react-fontawesome": "0.1.19",
-		"@minoru/react-dnd-treeview": "3.5.2",
-		"@tanstack/react-table": "8.20.6",
-		"@webiny/icons": "6.0.0-alpha.4",
-		"@webiny/react-composition": "6.0.0-alpha.4",
-		"@webiny/react-router": "6.0.0-alpha.4",
-		"@webiny/utils": "6.0.0-alpha.4",
-		"ace-builds": "1.37.5",
+		"@minoru/react-dnd-treeview": "3.5.3",
+		"@monaco-editor/react": "4.7.0",
+		"@radix-ui/react-scroll-area": "1.2.10",
+		"@tanstack/react-table": "8.21.3",
+		"@webiny/icons": "6.0.0-rc.0",
+		"@webiny/react-composition": "6.0.0-rc.0",
+		"@webiny/utils": "6.0.0-rc.0",
 		"bytes": "3.1.2",
 		"class-variance-authority": "0.7.1",
 		"clsx": "2.1.1",
-		"cmdk": "1.0.4",
-		"lodash": "4.17.21",
-		"minimatch": "5.1.6",
-		"mobx": "6.9.0",
-		"radix-ui": "1.4.2",
+		"cmdk": "1.1.1",
+		"lodash": "4.17.23",
+		"minimatch": "10.2.2",
+		"mobx": "6.15.0",
+		"monaco-editor": "0.53.0",
+		"radix-ui": "1.4.3",
 		"react": "18.2.0",
-		"react-ace": "13.0.0",
 		"react-color": "2.19.3",
 		"react-custom-scrollbars": "4.2.1",
 		"react-dnd": "16.0.1",
-		"react-virtualized": "9.22.5",
-		"sonner": "2.0.1",
-		"tailwind-merge": "2.6.0",
-		"tailwindcss": "3.4.17",
-		"tailwindcss-animate": "1.0.7",
-		"timeago-react": "3.0.6"
+		"react-virtualized": "9.22.6",
+		"sonner": "2.0.7",
+		"tailwind-merge": "2.6.1",
+		"tailwindcss": "4.2.0",
+		"timeago-react": "3.0.7",
+		"tw-animate-css": "1.4.0",
+		"type-fest": "5.4.4"
 	},
 	"devDependencies": {
-		"@fortawesome/free-solid-svg-icons": "6.2.1",
-		"@storybook/addon-a11y": "7.6.20",
-		"@storybook/addon-essentials": "7.6.20",
-		"@storybook/react": "7.6.20",
-		"@storybook/react-webpack5": "7.6.20",
-		"@storybook/theming": "7.6.20",
+		"@fortawesome/free-solid-svg-icons": "6.7.2",
+		"@storybook/addon-a11y": "9.1.19",
+		"@storybook/addon-docs": "9.1.19",
+		"@storybook/addon-webpack5-compiler-babel": "3.0.6",
+		"@storybook/react-webpack5": "9.1.19",
 		"@svgr/webpack": "6.5.1",
+		"@tailwindcss/postcss": "4.2.0",
 		"@types/react": "18.2.79",
-		"@types/react-color": "2.17.11",
-		"@types/react-custom-scrollbars": "4.0.10",
-		"@types/react-virtualized": "9.22.0",
-		"@webiny/cli": "6.0.0-alpha.4",
-		"@webiny/project-utils": "6.0.0-alpha.4",
+		"@types/react-color": "2.17.12",
+		"@types/react-custom-scrollbars": "4.0.13",
+		"@types/react-virtualized": "9.22.3",
+		"@webiny/build-tools": "6.0.0-rc.0",
+		"@webiny/project": "6.0.0-rc.0",
 		"chalk": "4.1.2",
-		"css-loader": "6.10.0",
+		"css-loader": "7.1.4",
+		"eslint-plugin-storybook": "10.2.10",
 		"file-loader": "6.2.0",
-		"postcss-loader": "6.2.1",
-		"prettier": "2.8.8",
-		"rimraf": "6.0.1",
-		"sass": "1.44.0",
-		"storybook": "7.6.20",
-		"tailwindcss": "3.4.17",
-		"typescript": "5.3.3"
+		"postcss-loader": "8.2.1",
+		"prettier": "3.6.2",
+		"rimraf": "6.1.3",
+		"sass": "1.97.3",
+		"storybook": "9.1.19",
+		"typescript": "5.9.3",
+		"vitest": "4.0.18"
 	},
 	"publishConfig": {
 		"access": "public",
 		"directory": "dist"
 	},
 	"scripts": {
-		"build": "yarn webiny run build",
-		"watch": "yarn webiny run watch",
 		"storybook": "storybook dev -p 6006",
 		"storybook-docs": "storybook dev --docs -p 6007",
 		"build-storybook": "storybook build --docs"
@@ -78,9 +78,11 @@
 	"adio": {
 		"ignore": {
 			"dependencies": [
-				"react-dom"
+				"react-dom",
+				"tailwindcss",
+				"tw-animate-css"
 			]
 		}
 	},
-	"gitHead": "eb196ccd2f32296e10f7add6dd7220d4e3abece4"
+	"gitHead": "0f2aa699f4642e550ab62c96fcd050e8d02345c9"
 }

package/theme.css

@@ -0,0 +1,367 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap");
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@theme {
+  /* Color. */
+  --color-warning-900: hsl(45 96.6% 11.6%);
+  --color-warning-800: hsl(45 98.2% 21.6%);
+  --color-warning-700: hsl(45 100% 37.3%);
+  --color-warning-600: hsl(45 100% 42.5%);
+  --color-warning-500: hsl(45 95.7% 63.7%);
+  --color-warning-400: hsl(45 95.7% 63.7%);
+  --color-warning-300: hsl(45 95.1% 75.9%);
+  --color-warning-200: hsl(45 96.9% 87.5%);
+  --color-warning-100: hsl(43 100% 96.5%);
+
+  --color-success-900: hsl(160 100% 14.5%);
+  --color-success-800: hsl(160 100% 19.6%);
+  --color-success-700: hsl(165 100% 28.6%);
+  --color-success-600: hsl(168 100% 34.7%);
+  --color-success-500: hsl(170 100% 37.5%);
+  --color-success-400: hsl(169 59.8% 64.9%);
+  --color-success-300: hsl(168 58.1% 79.4%);
+  --color-success-200: hsl(170 57.1% 91.8%);
+  --color-success-100: hsl(168 50% 96.1%);
+  --color-secondary-900: hsl(160 100% 14.5%);
+  --color-secondary-800: hsl(160 100% 19.6%);
+  --color-secondary-700: hsl(165 100% 28.6%);
+  --color-secondary-600: hsl(168 100% 34.7%);
+  --color-secondary-500: hsl(170 100% 37.5%);
+  --color-secondary-400: hsl(169 59.8% 64.9%);
+  --color-secondary-300: hsl(168 58.1% 79.4%);
+  --color-secondary-200: hsl(170 57.1% 91.8%);
+  --color-secondary-100: hsl(168 50% 96.1%);
+  --color-primary-900: hsl(14 100% 25.5%);
+  --color-primary-800: hsl(14 100% 32.2%);
+  --color-primary-700: hsl(14 94.1% 40%);
+  --color-primary-600: hsl(14 81.4% 48.4%);
+  --color-primary-500: hsl(15 95.6% 55.9%);
+  --color-primary-400: hsl(15 100% 63.5%);
+  --color-primary-300: hsl(14 94.7% 77.8%);
+  --color-primary-200: hsl(15 94.2% 86.5%);
+  --color-primary-100: hsl(5 100% 97.5%);
+  --color-neutral-900: hsl(214 12.3% 11.2%);
+  --color-neutral-800: hsl(215 11.1% 21.2%);
+  --color-neutral-700: hsl(213 10.1% 38.8%);
+  --color-neutral-600: hsl(215 9.6% 51%);
+  --color-neutral-500: hsl(218 10.7% 65.3%);
+  --color-neutral-50: hsl(180 11.1% 98.2%);
+  --color-neutral-400: hsl(219 12.1% 77.3%);
+  --color-neutral-300: hsl(225 16.7% 90.6%);
+  --color-neutral-200: hsl(220 11.1% 94.7%);
+  --color-neutral-100: hsl(210 14.3% 97.3%);
+  --color-neutral-0: hsl(0 0% 100%);
+  --color-destructive-900: hsl(359 81.6% 17.1%);
+  --color-destructive-800: hsl(0 83.6% 21.6%);
+  --color-destructive-700: hsl(359 72.8% 28.8%);
+  --color-destructive-600: hsl(0 76.4% 38.2%);
+  --color-destructive-500: hsl(0 71% 48.6%);
+  --color-destructive-400: hsl(0 66.3% 62.7%);
+  --color-destructive-300: hsl(1 83.2% 76.7%);
+  --color-destructive-200: hsl(0 96.4% 89.2%);
+  --color-destructive-100: hsl(0 100% 96.9%);
+
+  /* Background color. */
+  --color-destructive: var(--color-destructive-500);
+  --color-destructive-disabled: var(--color-destructive-300);
+  --color-destructive-muted: var(--color-destructive-400);
+  --color-destructive-strong: var(--color-destructive-600);
+  --color-destructive-subtle: var(--color-destructive-100);
+  --color-destructive-xstrong: var(--color-destructive-800);
+
+  --color-neutral-base: var(--color-neutral-0);
+  --color-neutral-dark: var(--color-neutral-900);
+  --color-neutral-dimmed: var(--color-neutral-200);
+  --color-neutral-disabled: var(--color-neutral-200);
+  --color-neutral-light: var(--color-neutral-100);
+  --color-neutral-muted: var(--color-neutral-300);
+  --color-neutral-strong: var(--color-neutral-400);
+  --color-neutral-subtle: var(--color-neutral-50);
+  --color-neutral-xstrong: var(--color-neutral-700);
+
+  --color-primary: var(--color-primary-500);
+  --color-primary-disabled: var(--color-primary-300);
+  --color-primary-muted: var(--color-primary-300);
+  --color-primary-strong: var(--color-primary-700);
+  --color-primary-subtle: var(--color-primary-100);
+  --color-primary-xstrong: var(--color-primary-900);
+
+  --color-secondary: var(--color-success-500);
+  --color-secondary-disabled: var(--color-success-400);
+  --color-secondary-muted: var(--color-success-400);
+  --color-secondary-strong: var(--color-success-700);
+  --color-secondary-subtle: var(--color-success-200);
+  --color-secondary-xstrong: var(--color-success-900);
+
+  --color-success: var(--color-success-500);
+  --color-success-disabled: var(--color-success-300);
+  --color-success-muted: var(--color-success-400);
+  --color-success-strong: var(--color-secondary-700);
+  --color-success-subtle: var(--color-success-200);
+  --color-success-xstrong: var(--color-secondary-900);
+
+  --color-warning: var(--color-warning-500);
+  --color-warning-disabled: var(--color-warning-200);
+  --color-warning-muted: var(--color-warning-300);
+  --color-warning-strong: var(--color-warning-700);
+  --color-warning-subtle: var(--color-warning-100);
+  --color-warning-xstrong: var(--color-warning-800);
+
+  /* Border color. */
+  --border-color-accent-default: var(--color-primary-500);
+  --border-color-accent-dimmed: var(--color-primary-200);
+  --border-color-accent-subtle: var(--color-primary-100);
+
+  --border-color-destructive-default: var(--color-destructive-500);
+  --border-color-destructive-subtle: var(--color-destructive-100);
+
+  --border-color-neutral-base: var(--color-neutral-0);
+  --border-color-neutral-black: var(--color-neutral-900);
+  --border-color-neutral-dark: var(--color-neutral-600);
+  --border-color-neutral-dimmed: var(--color-neutral-200);
+  --border-color-neutral-dimmed-darker: var(--color-neutral-300);
+  --border-color-neutral-muted: var(--color-neutral-400);
+  --border-color-neutral-strong: var(--color-neutral-500);
+  --border-color-neutral-subtle: var(--color-neutral-100);
+
+  --border-color-success-default: var(--color-success-500);
+  --border-color-success-subtle: var(--color-success-200);
+
+  /* Border radius. */
+  --radius-3Xl: 36px;
+  --radius-lg: 8px;
+  --radius-md: 6px;
+  --radius-sm: 4px;
+  --radius-xl: 16px;
+  --radius-xs: 2px;
+  --radius-xxl: 24px;
+
+  /* Border width. */
+  --border-width-md: 2px;
+  --border-width-none: 0px;
+  --border-width-sm: 1px;
+
+  /* Fill. */
+  --fill-accent-default: var(--color-primary-500);
+
+  --fill-destructive: var(--color-destructive-500);
+
+  --fill-neutral-base: var(--color-neutral-0);
+  --fill-neutral-dark: var(--color-neutral-800);
+  --fill-neutral-disabled: var(--color-neutral-400);
+  --fill-neutral-strong: var(--color-neutral-500);
+  --fill-neutral-xstrong: var(--color-neutral-700);
+
+  --fill-success: var(--color-success-500);
+
+  --fill-warning: var(--color-warning-500);
+
+  /* Font. */
+  --font-sans: "Inter", sans-serif;
+
+  /* Font weight. */
+  --font-weight-regular: 400;
+  --font-weight-semibold: 600;
+
+  /* Margin. */
+  --margin-lg: 24px;
+  --margin-md: 16px;
+  --margin-md-plus: 20px;
+  --margin-none: 0px;
+  --margin-sm: 8px;
+  --margin-sm-extra: 12px;
+  --margin-sm-plus: 10px;
+  --margin-xl: 32px;
+  --margin-xs: 4px;
+  --margin-xs-plus: 6px;
+  --margin-xxl: 48px;
+  --margin-xxs: 2px;
+
+  /* Ring color */
+  --ring-color-primary-dimmed: var(--color-primary-200);
+  --ring-color-primary-strong: var(--color-primary-500);
+  --ring-color-primary-subtle: var(--color-primary-100);
+
+  --ring-color-success-dimmed: var(--color-success-200);
+  --ring-color-success-strong: var(--color-success-500);
+  --ring-color-success-subtle: var(--color-success-100);
+
+  /* Ring width */
+  --ring-width-lg: 4px;
+  --ring-width-md: 2px;
+  --ring-width-sm: 1px;
+
+  /* Padding. */
+  --padding-lg: 24px;
+  --padding-md: 16px;
+  --padding-md-extra: 20px;
+  --padding-none: 0px;
+  --padding-sm: 8px;
+  --padding-sm-extra: 12px;
+  --padding-sm-plus: 10px;
+  --padding-xl: 32px;
+  --padding-xs: 4px;
+  --padding-xs-plus: 6px;
+  --padding-xxl: 48px;
+  --padding-xxs: 2px;
+
+  /* Shadow. */
+  --shadow-flat: 0 0px 0px rgba(0, 0, 0, 0.06);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.04), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.03), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
+  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  --shadow-xl: 0 24px 24px rgba(0, 0, 0, 0.06);
+  --shadow-xxl: 0 48px 48px rgba(0, 0, 0, 0.06);
+
+  /* Spacing. */
+  --spacing-3xl: 64px;
+  --spacing-lg: 24px;
+  --spacing-md: 16px;
+  --spacing-md-plus: 20px;
+  --spacing-none: 0px;
+  --spacing-sm: 8px;
+  --spacing-sm-extra: 12px;
+  --spacing-sm-plus: 10px;
+  --spacing-xl: 32px;
+  --spacing-xs: 4px;
+  --spacing-xs-plus: 6px;
+  --spacing-xxl: 48px;
+  --spacing-xxs: 2px;
+  --spacing-sidebar-collapsed: 44px;
+  --spacing-sidebar-expanded: 256px;
+  --spacing-header: 45px;
+  --spacing-main-content: calc(100vh - var(--spacing-header));
+
+  /* With TW4, `leading-none` maps to `--spacing-none`, which is 0px. So, we
+     need to redefine it here to be 1 to avoid issues with line-height. */
+  --leading-none: 1;
+
+  /* Text color. */
+  --text-color-accent-muted: var(--color-primary-300);
+  --text-color-accent-primary: var(--color-primary-500);
+  --text-color-accent-subtle: var(--color-primary-100);
+
+  --text-color-destructive-muted: var(--color-destructive-300);
+  --text-color-destructive-primary: var(--color-destructive-500);
+  --text-color-destructive-subtle: var(--color-destructive-100);
+
+  --text-color-neutral-dimmed: var(--color-neutral-400);
+  --text-color-neutral-disabled: var(--color-neutral-400);
+  --text-color-neutral-light: var(--color-neutral-0);
+  --text-color-neutral-muted: var(--color-neutral-500);
+  --text-color-neutral-primary: var(--color-neutral-900);
+  --text-color-neutral-strong: var(--color-neutral-700);
+
+  --text-color-success-muted: var(--color-success-400);
+  --text-color-success-primary: var(--color-success-500);
+  --text-color-success-subtle: var(--color-success-200);
+
+  /* Text sizes. */
+  --text-sm: 12px;
+  --text-sm--line-height: 16px;
+  --text-sm--letter-spacing: initial;
+  --text-sm--font-weight: normal;
+  --text-md: 14px;
+  --text-md--line-height: 20px;
+  --text-md--letter-spacing: initial;
+  --text-md--font-weight: normal;
+  --text-lg: 16px;
+  --text-lg--line-height: 24px;
+  --text-lg--letter-spacing: initial;
+  --text-lg--font-weight: normal;
+  --text-xl: 20px;
+  --text-xl--line-height: 32px;
+  --text-xl--letter-spacing: initial;
+  --text-xl--font-weight: normal;
+  --text-xxl: 30px;
+  --text-xxl--line-height: 38px;
+  --text-xxl--letter-spacing: initial;
+  --text-xxl--font-weight: normal;
+  --text-3xl: 36px;
+  --text-3xl--line-height: 44px;
+  --text-3xl--letter-spacing: initial;
+  --text-3xl--font-weight: normal;
+  --text-4xl: 48px;
+  --text-4xl--line-height: 60px;
+  --text-4xl--letter-spacing: initial;
+  --text-4xl--font-weight: normal;
+  --text-h1: var(--text-4xl);
+  --text-h1--line-height: var(--text-4xl--line-height);
+  --text-h1--letter-spacing: var(--text-4xl--letter-spacing);
+  --text-h1--font-weight: var(--font-weight-semibold);
+  --text-h2: var(--text-3xl);
+  --text-h2--line-height: var(--text-3xl--line-height);
+  --text-h2--letter-spacing: var(--text-3xl--letter-spacing);
+  --text-h2--font-weight: var(--font-weight-semibold);
+  --text-h3: var(--text-xxl);
+  --text-h3--line-height: var(--text-xxl--line-height);
+  --text-h3--letter-spacing: var(--text-xxl--letter-spacing);
+  --text-h3--font-weight: var(--font-weight-semibold);
+  --text-h4: var(--text-xl);
+  --text-h4--line-height: var(--text-xl--line-height);
+  --text-h4--letter-spacing: initial;
+  --text-h4--font-weight: var(--font-weight-semibold);
+  --text-h5: var(--text-lg);
+  --text-h5--line-height: var(--text-lg--line-height);
+  --text-h5--letter-spacing: initial;
+  --text-h5--font-weight: var(--font-weight-semibold);
+  --text-h6: var(--text-md);
+  --text-h6--line-height: var(--text-md--line-height);
+  --text-h6--letter-spacing: initial;
+  --text-h6--font-weight: var(--font-weight-semibold);
+
+  /* Z-Index. */
+  --z-index-negative: -1;
+  --z-index-base: 1;
+  --z-index-base-overwrite: 10;
+  --z-index-header: 50;
+  --z-index-sidebar: 100;
+  --z-index-overlay-backdrop: 120;
+  --z-index-overlay: 125;
+  --z-index-drawer-backdrop: 145;
+  --z-index-drawer: 150;
+  --z-index-dialog-backdrop: 170;
+  --z-index-dialog: 175;
+  --z-index-popover: 200;
+  --z-index-dropdown: 250;
+  --z-index-tooltip: 300;
+  --z-index-toast: 350;
+  --z-index-progress-bar: 400;
+
+  /* Animation. */
+  --animate-skeleton-pulse: skeleton-pulse 1400ms ease-in-out infinite;
+  @keyframes skeleton-pulse {
+    0%,
+    100% {
+      background-color: var(--color-neutral-dimmed);
+    }
+    50% {
+      background-color: var(--color-neutral-muted);
+    }
+  }
+}
+
+@utility container {
+  @apply pr-xxl pl-xxl mx-auto w-full;
+}
+
+@layer base {
+  a {
+    @apply text-accent-primary hover:underline focus-visible:outline-none focus-visible:ring-lg focus-visible:ring-primary-dimmed rounded-xs;
+  }
+
+  body {
+    @apply font-sans antialiased text-md text-neutral-primary;
+  }
+
+  b,
+  strong {
+    @apply font-semibold;
+  }
+
+  i,
+  em {
+    @apply italic;
+  }
+}

package/utils.d.ts

@@ -1,8 +1,13 @@
-import type React from "react";
+import React from "react";
 import { type ClassValue } from "clsx";
 import { cva, type VariantProps } from "class-variance-authority";
 export { makeDecoratable } from "@webiny/react-composition";
 export declare function cn(...inputs: ClassValue[]): string;
 export declare const generateId: (initialId?: string) => string;
 export declare const withStaticProps: <TComponent extends React.ComponentType<any>, TProps>(component: TComponent, props: TProps) => TComponent & TProps;
+export declare function createComponentPropsProvider<TProps extends Record<string, any>>(): readonly [React.FunctionComponent<{
+    props: TProps;
+    children: React.ReactNode;
+}>, () => TProps];
+export declare function omit<T extends object, K extends keyof T>(obj: T, keys: K[]): Omit<T, K>;
 export { cva, type VariantProps };