@veracity/vui 1.8.0 → 1.9.0-beta.0

package/dist/cjs/sidemenu/sidemenuItem.js

@@ -0,0 +1,67 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidemenuItem = void 0;
+const react_1 = __importStar(require("react"));
+const react_router_dom_1 = require("react-router-dom");
+const box_1 = __importDefault(require("../box"));
+const button_1 = __importDefault(require("../button"));
+const core_1 = require("../core");
+const icon_1 = __importDefault(require("../icon"));
+const t_1 = __importDefault(require("../t"));
+const utils_1 = require("../utils");
+const context_1 = require("./context");
+/** A menu item. */
+const SidemenuItem = (props) => {
+    const _a = (0, core_1.omitThemingProps)(props), { className, children, icon, iconSize = 'md', isActive, onClick, path, title } = _a, rest = __rest(_a, ["className", "children", "icon", "iconSize", "isActive", "onClick", "path", "title"]);
+    const [displayChildren, setDisplayChildren] = (0, react_1.useState)(true);
+    const { isExpandedInternal } = (0, context_1.useSidemenuContext)();
+    const innerContent = isExpandedInternal ? (react_1.default.createElement(box_1.default, { px: 2, py: 1, w: "100%", whiteSpace: "pre" },
+        react_1.default.createElement(icon_1.default, { ml: iconSize === 'sm' ? '4px' : 0, name: icon, size: iconSize }),
+        react_1.default.createElement(t_1.default, { ml: 2 }, title))) : (react_1.default.createElement(box_1.default, { px: 2, py: 1, w: "100%" },
+        react_1.default.createElement(icon_1.default, { ml: iconSize === 'sm' ? '4px' : 0, name: icon, size: iconSize })));
+    const pathProps = path ? { as: react_router_dom_1.Link, to: path } : {};
+    return (react_1.default.createElement(box_1.default, { flexDirection: "column", w: "100%" },
+        react_1.default.createElement(button_1.default, Object.assign({ border: "none", borderLeft: "3px solid black", borderLeftColor: isActive ? 'blue.80' : 'transparent', borderRadius: 0, className: (0, utils_1.cs)('vui-sidemenu-item', className), h: "auto", justifyContent: "space-between", onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(), p: 0, variant: "text", w: "100%" }, pathProps, rest),
+            innerContent,
+            !!children && isExpandedInternal && (react_1.default.createElement(button_1.default, { icon: displayChildren ? 'falChevronUp' : 'falChevronDown', mr: 1, onClick: () => setDisplayChildren(!displayChildren), size: "xs", variant: "text" }))),
+        !!children && displayChildren && (react_1.default.createElement(box_1.default, { flexDirection: "column", justifyContent: "start", w: "100%" }, children))));
+};
+exports.SidemenuItem = SidemenuItem;
+exports.default = exports.SidemenuItem;

package/dist/cjs/sidemenu/sidemenuTop.d.ts

@@ -0,0 +1,5 @@
+import { SidemenuTopProps } from './sidemenu.types';
+/** Top container. */
+export declare const SidemenuTop: (props: SidemenuTopProps) => JSX.Element | null;
+export default SidemenuTop;
+//# sourceMappingURL=sidemenuTop.d.ts.map

package/dist/cjs/sidemenu/sidemenuTop.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidemenuTop.d.ts","sourceRoot":"","sources":["../../../src/sidemenu/sidemenuTop.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AAEnD,qBAAqB;AACrB,eAAO,MAAM,WAAW,UAAW,gBAAgB,uBAalD,CAAA;AAED,eAAe,WAAW,CAAA"}

package/dist/cjs/sidemenu/sidemenuTop.js

@@ -0,0 +1,34 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidemenuTop = void 0;
+const react_1 = __importDefault(require("react"));
+const box_1 = require("../box");
+const core_1 = require("../core");
+const utils_1 = require("../utils");
+const context_1 = require("./context");
+/** Top container. */
+const SidemenuTop = (props) => {
+    const _a = (0, core_1.omitThemingProps)(props), { className, leftSlot, rightSlot } = _a, rest = __rest(_a, ["className", "leftSlot", "rightSlot"]);
+    const { isExpandedInternal } = (0, context_1.useSidemenuContext)();
+    if (!leftSlot && !rightSlot)
+        return null;
+    return (react_1.default.createElement(box_1.Box, Object.assign({ borderBottom: "1px solid lightgray", className: (0, utils_1.cs)('vui-sidemenu-top', className), mb: 1, w: "100%" }, rest),
+        !!leftSlot && leftSlot,
+        !!rightSlot && isExpandedInternal && rightSlot));
+};
+exports.SidemenuTop = SidemenuTop;
+exports.default = exports.SidemenuTop;

package/dist/cjs/sidemenu/theme.d.ts

@@ -0,0 +1,8 @@
+declare const _default: {
+    baseStyle: {};
+    defaultProps: {};
+    sizes: {};
+    variants: {};
+};
+export default _default;
+//# sourceMappingURL=theme.d.ts.map

package/dist/cjs/sidemenu/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/sidemenu/theme.ts"],"names":[],"mappings":";;;;;;AAQA,wBAKC"}

package/dist/cjs/sidemenu/theme.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const baseStyle = {};
+const defaultProps = {};
+const sizes = {};
+const variants = {};
+exports.default = {
+    baseStyle,
+    defaultProps,
+    sizes,
+    variants
+};

package/dist/cjs/textarea/consts.d.ts

@@ -0,0 +1,4 @@
+export declare const greyLightColor = "grey.10";
+export declare const greyColor = "grey.80";
+export declare const redColor = "red.80";
+//# sourceMappingURL=consts.d.ts.map

package/dist/cjs/textarea/consts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"consts.d.ts","sourceRoot":"","sources":["../../../src/textarea/consts.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc,YAAY,CAAA;AACvC,eAAO,MAAM,SAAS,YAAY,CAAA;AAClC,eAAO,MAAM,QAAQ,WAAW,CAAA"}

package/dist/cjs/textarea/consts.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.redColor = exports.greyColor = exports.greyLightColor = void 0;
+exports.greyLightColor = 'grey.10';
+exports.greyColor = 'grey.80';
+exports.redColor = 'red.80';

package/dist/cjs/textarea/textarea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../src/textarea/textarea.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAwBhD,eAAO,MAAM,YAAY,+HAKxB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ,sDAmFnB,CAAA;AAEF,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../src/textarea/textarea.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAwBhD,eAAO,MAAM,YAAY,+HAKxB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ,sDAmGnB,CAAA;AAEF,eAAe,QAAQ,CAAA"}

package/dist/cjs/textarea/textarea.js

@@ -42,6 +42,7 @@ const react_1 = __importStar(require("react"));
 const core_1 = require("../core");
 const t_1 = __importDefault(require("../t"));
 const utils_1 = require("../utils");
+const consts_1 = require("./consts");
 const helpers_1 = require("./helpers");
 const TextareaTextarea = core_1.styled.textareaBox `
   border-radius: md;
@@ -75,13 +76,15 @@ exports.TextareaBase = core_1.styled.divBox `
  * Forwards many relevant props to the inner textarea. Exposes some props to the children via context.
  */
 exports.Textarea = (0, core_1.vui)((props, ref) => {
-    const [count, setCount] = (0, react_1.useState)((0, helpers_1.getInitialCount)(props));
     const _a = (0, core_1.omitThemingProps)(props), { autoFocus, className, colorScheme: colorSchemeProp, cols, defaultValue, disabled, id, isInvalid, maxLength, name, onBlur, onChange: onChangeProp, onFocus, placeholder, readOnly, required, resize = 'none', rows, showCount, textareaProps = {}, textareaRef, value } = _a, rest = __rest(_a, ["autoFocus", "className", "colorScheme", "cols", "defaultValue", "disabled", "id", "isInvalid", "maxLength", "name", "onBlur", "onChange", "onFocus", "placeholder", "readOnly", "required", "resize", "rows", "showCount", "textareaProps", "textareaRef", "value"]);
+    const [count, setCount] = (0, react_1.useState)((0, helpers_1.getInitialCount)(props));
+    const [valueInternal, setValueInternal] = (0, react_1.useState)(defaultValue);
     const colorProps = (0, utils_1.filterUndefined)({
         colorScheme: colorSchemeProp !== null && colorSchemeProp !== void 0 ? colorSchemeProp : (isInvalid ? 'red' : undefined)
     });
     const styles = (0, core_1.useStyleConfig)('Textarea', Object.assign(Object.assign({}, colorProps), props));
     function onChange(e) {
+        setValueInternal(e.target.value);
         setCount(e.target.value.length);
         onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(e);
     }
@@ -90,10 +93,15 @@ exports.Textarea = (0, core_1.vui)((props, ref) => {
     });
     const textareaAliasedProps = (0, utils_1.filterUndefined)({
         'aria-disabled': disabled,
-        bg: readOnly ? 'grey.20' : undefined,
+        bg: readOnly ? consts_1.greyLightColor : undefined,
         focusBorderColor: !readOnly ? 'transparent' : undefined,
         focusRing: readOnly ? 0 : undefined
     });
+    (0, react_1.useEffect)(() => {
+        var _a;
+        setValueInternal(value);
+        setCount(((_a = `${value}`) === null || _a === void 0 ? void 0 : _a.length) ? `${value}`.length : 0);
+    }, [value]);
     return (react_1.default.createElement(exports.TextareaBase, Object.assign({ className: (0, utils_1.cs)('vui-textarea', className), ref: ref }, styles.container, aliasedProps, rest),
         react_1.default.createElement(TextareaTextarea, Object.assign({ className: "vui-textareaTextarea", ref: textareaRef }, {
             autoFocus,
@@ -110,12 +118,11 @@ exports.Textarea = (0, core_1.vui)((props, ref) => {
             readOnly,
             required,
             resize,
-            rows,
-            value
-        }, styles.textarea, textareaAliasedProps, textareaProps)),
-        showCount && (react_1.default.createElement(t_1.default, { className: "vui-textareaCount", color: "grey.80", position: "absolute", right: 0, size: "sm", top: "calc(100% + 1px)" },
+            rows
+        }, { value: valueInternal }, styles.textarea, textareaAliasedProps, textareaProps)),
+        showCount && (react_1.default.createElement(t_1.default, { className: "vui-textareaCount", color: maxLength && count > maxLength ? consts_1.redColor : consts_1.greyColor, position: "absolute", right: 0, size: "sm", top: "calc(100% + 1px)" },
             count,
-            " / ",
-            maxLength))));
+            " ",
+            maxLength ? `/ ${maxLength}` : null))));
 });
 exports.default = exports.Textarea;

package/dist/cjs/theme/components.d.ts

@@ -274,6 +274,12 @@ declare const _default: {
         sizes: {};
         variants: {};
     };
+    DragAndDrop: {
+        baseStyle: {};
+        defaultProps: {};
+        sizes: {};
+        variants: {};
+    };
     Footer: {
         baseStyle: {};
         defaultProps: {};
@@ -906,6 +912,12 @@ declare const _default: {
             };
         };
     };
+    Sidemenu: {
+        baseStyle: {};
+        defaultProps: {};
+        sizes: {};
+        variants: {};
+    };
     Skeleton: {
         baseStyle: {};
         defaultProps: {

package/dist/cjs/theme/components.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../src/theme/components.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCA,wBAsCC"}
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../src/theme/components.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCA,wBAwCC"}

package/dist/cjs/theme/components.js

@@ -12,34 +12,36 @@ const theme_6 = __importDefault(require("../card/theme"));
 const theme_7 = __importDefault(require("../checkbox/theme"));
 const theme_8 = __importDefault(require("../dialog/theme"));
 const theme_9 = __importDefault(require("../divider/theme"));
-const theme_10 = __importDefault(require("../footer/theme"));
-const theme_11 = __importDefault(require("../grid/theme"));
-const theme_12 = __importDefault(require("../header/theme"));
-const theme_13 = __importDefault(require("../heading/theme"));
-const theme_14 = __importDefault(require("../icon/theme"));
-const theme_15 = __importDefault(require("../image/theme"));
-const theme_16 = __importDefault(require("../input/theme"));
-const theme_17 = __importDefault(require("../link/theme"));
-const theme_18 = __importDefault(require("../list/theme"));
-const theme_19 = __importDefault(require("../menu/theme"));
-const theme_20 = __importDefault(require("../message/theme"));
-const theme_21 = __importDefault(require("../modal/theme"));
-const theme_22 = __importDefault(require("../notification/theme"));
-const theme_23 = __importDefault(require("../p/theme"));
-const theme_24 = __importDefault(require("../pagination/theme"));
-const theme_25 = __importDefault(require("../panel/theme"));
-const theme_26 = __importDefault(require("../popover/theme"));
-const theme_27 = __importDefault(require("../progress/theme"));
-const theme_28 = __importDefault(require("../radio/theme"));
-const theme_29 = __importDefault(require("../select/theme"));
-const theme_30 = __importDefault(require("../skeleton/theme"));
-const theme_31 = __importDefault(require("../spinner/theme"));
-const theme_32 = __importDefault(require("../switch/theme"));
-const theme_33 = __importDefault(require("../t/theme"));
-const theme_34 = __importDefault(require("../table/theme"));
-const theme_35 = __importDefault(require("../tabs/theme"));
-const theme_36 = __importDefault(require("../tag/theme"));
-const theme_37 = __importDefault(require("../textarea/theme"));
+const theme_10 = __importDefault(require("../dragAndDrop/theme"));
+const theme_11 = __importDefault(require("../footer/theme"));
+const theme_12 = __importDefault(require("../grid/theme"));
+const theme_13 = __importDefault(require("../header/theme"));
+const theme_14 = __importDefault(require("../heading/theme"));
+const theme_15 = __importDefault(require("../icon/theme"));
+const theme_16 = __importDefault(require("../image/theme"));
+const theme_17 = __importDefault(require("../input/theme"));
+const theme_18 = __importDefault(require("../link/theme"));
+const theme_19 = __importDefault(require("../list/theme"));
+const theme_20 = __importDefault(require("../menu/theme"));
+const theme_21 = __importDefault(require("../message/theme"));
+const theme_22 = __importDefault(require("../modal/theme"));
+const theme_23 = __importDefault(require("../notification/theme"));
+const theme_24 = __importDefault(require("../p/theme"));
+const theme_25 = __importDefault(require("../pagination/theme"));
+const theme_26 = __importDefault(require("../panel/theme"));
+const theme_27 = __importDefault(require("../popover/theme"));
+const theme_28 = __importDefault(require("../progress/theme"));
+const theme_29 = __importDefault(require("../radio/theme"));
+const theme_30 = __importDefault(require("../select/theme"));
+const theme_31 = __importDefault(require("../sidemenu/theme"));
+const theme_32 = __importDefault(require("../skeleton/theme"));
+const theme_33 = __importDefault(require("../spinner/theme"));
+const theme_34 = __importDefault(require("../switch/theme"));
+const theme_35 = __importDefault(require("../t/theme"));
+const theme_36 = __importDefault(require("../table/theme"));
+const theme_37 = __importDefault(require("../tabs/theme"));
+const theme_38 = __importDefault(require("../tag/theme"));
+const theme_39 = __importDefault(require("../textarea/theme"));
 exports.default = {
     Accordion: theme_1.default,
     Avatar: theme_2.default,
@@ -50,32 +52,34 @@ exports.default = {
     Checkbox: theme_7.default,
     Dialog: theme_8.default,
     Divider: theme_9.default,
-    Footer: theme_10.default,
-    Grid: theme_11.default,
-    Header: theme_12.default,
-    Heading: theme_13.default,
-    Icon: theme_14.default,
-    Image: theme_15.default,
-    Input: theme_16.default,
-    Link: theme_17.default,
-    List: theme_18.default,
-    Menu: theme_19.default,
-    Message: theme_20.default,
-    Modal: theme_21.default,
-    Notification: theme_22.default,
-    P: theme_23.default,
-    Pagination: theme_24.default,
-    Panel: theme_25.default,
-    Progress: theme_27.default,
-    Popover: theme_26.default,
-    Radio: theme_28.default,
-    Select: theme_29.default,
-    Skeleton: theme_30.default,
-    Spinner: theme_31.default,
-    Switch: theme_32.default,
-    T: theme_33.default,
-    Table: theme_34.default,
-    Tabs: theme_35.default,
-    Tag: theme_36.default,
-    Textarea: theme_37.default
+    DragAndDrop: theme_10.default,
+    Footer: theme_11.default,
+    Grid: theme_12.default,
+    Header: theme_13.default,
+    Heading: theme_14.default,
+    Icon: theme_15.default,
+    Image: theme_16.default,
+    Input: theme_17.default,
+    Link: theme_18.default,
+    List: theme_19.default,
+    Menu: theme_20.default,
+    Message: theme_21.default,
+    Modal: theme_22.default,
+    Notification: theme_23.default,
+    P: theme_24.default,
+    Pagination: theme_25.default,
+    Panel: theme_26.default,
+    Progress: theme_28.default,
+    Popover: theme_27.default,
+    Radio: theme_29.default,
+    Select: theme_30.default,
+    Sidemenu: theme_31.default,
+    Skeleton: theme_32.default,
+    Spinner: theme_33.default,
+    Switch: theme_34.default,
+    T: theme_35.default,
+    Table: theme_36.default,
+    Tabs: theme_37.default,
+    Tag: theme_38.default,
+    Textarea: theme_39.default
 };

package/dist/cjs/theme/defaultTheme.d.ts

@@ -471,6 +471,12 @@ declare const defaultTheme: {
             sizes: {};
             variants: {};
         };
+        DragAndDrop: {
+            baseStyle: {};
+            defaultProps: {};
+            sizes: {};
+            variants: {};
+        };
         Footer: {
             baseStyle: {};
             defaultProps: {};
@@ -1103,6 +1109,12 @@ declare const defaultTheme: {
                 };
             };
         };
+        Sidemenu: {
+            baseStyle: {};
+            defaultProps: {};
+            sizes: {};
+            variants: {};
+        };
         Skeleton: {
             baseStyle: {};
             defaultProps: {

package/dist/cjs/theme/defaultTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"defaultTheme.d.ts","sourceRoot":"","sources":["../../../src/theme/defaultTheme.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGjB,CAAA;AAED,eAAe,YAAY,CAAA"}
+{"version":3,"file":"defaultTheme.d.ts","sourceRoot":"","sources":["../../../src/theme/defaultTheme.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGjB,CAAA;AAED,eAAe,YAAY,CAAA"}

package/dist/cjs/toast/toast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../src/toast/toast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,eAAO,MAAM,YAAY,MAAM,CAAA;;AAyB/B,wBAAkC"}
+{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../src/toast/toast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,eAAO,MAAM,YAAY,MAAM,CAAA;;AA8B/B,wBAAkC"}

package/dist/cjs/toast/toast.js

@@ -10,8 +10,11 @@ const core_1 = require("../core");
 const theme_1 = require("../theme");
 exports.toasterWidth = 420;
 const Toaster = () => {
-    var _a, _b;
+    var _a, _b, _c;
     const { toasts } = (0, core_1.useVuiContext)();
-    return (react_1.default.createElement(box_1.Box, { bottom: "1rem", display: "block", maxW: { md: exports.toasterWidth, sm: exports.toasterWidth, xs: '100%' }, minW: { md: exports.toasterWidth, sm: exports.toasterWidth, xs: '100%' }, p: { md: '16px', sm: '4px', xs: '2px' }, position: "fixed", right: { md: '1rem', sm: 0, xs: 0 }, zIndex: theme_1.zIndices.toast }, (_b = (_a = toasts === null || toasts === void 0 ? void 0 : toasts.list) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.call(_a, (toast) => (react_1.default.createElement("div", { id: `toast_${toast.id}`, key: toast.id }, toast.component)))));
+    const padding = ((_a = toasts === null || toasts === void 0 ? void 0 : toasts.list) === null || _a === void 0 ? void 0 : _a.length) ? { md: '16px', sm: '4px', xs: '2px' } : 0;
+    const right = { md: '1rem', sm: 0, xs: 0 };
+    const width = { md: exports.toasterWidth, sm: exports.toasterWidth, xs: '100%' };
+    return (react_1.default.createElement(box_1.Box, { bottom: "1rem", className: "vui-toaster", display: "block", maxW: width, minW: width, p: padding, position: "fixed", right: right, zIndex: theme_1.zIndices.toast }, (_c = (_b = toasts === null || toasts === void 0 ? void 0 : toasts.list) === null || _b === void 0 ? void 0 : _b.map) === null || _c === void 0 ? void 0 : _c.call(_b, (toast) => (react_1.default.createElement(core_1.v.div, { id: `toast_${toast.id}`, key: toast.id }, toast.component)))));
 };
 exports.default = react_1.default.memo(Toaster);

package/dist/esm/accordion/accordion.types.d.ts

@@ -8,6 +8,7 @@ export declare type AccordionProps = SystemProps & ThemingProps<'Accordion'> & {
     orientation?: AccordionOrientation;
     /** Hover color for the item title @default "blue.10" */
     itemTitleHoverBg?: string;
+    /** Collection of Accordion items */
     items?: AccordionItemProps[];
 };
 export declare type AccordionItemId = string | number;

package/dist/esm/accordion/accordion.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.types.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordion.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,oBAAY,oBAAoB,GAAG,UAAU,GAAG,YAAY,CAAA;AAE5D,oBAAY,cAAc,GAAG,WAAW,GACtC,YAAY,CAAC,WAAW,CAAC,GAAG;IAC1B,qDAAqD;IACrD,WAAW,CAAC,EAAE,oBAAoB,CAAA;IAClC,wDAAwD;IACxD,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,KAAK,CAAC,EAAE,kBAAkB,EAAE,CAAA;CAC7B,CAAA;AAEH,oBAAY,eAAe,GAAG,MAAM,GAAG,MAAM,CAAA;AAE7C,oBAAY,sBAAsB,GAAG;IACnC,EAAE,EAAE,eAAe,CAAA;IACnB,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,oBAAY,kBAAkB,GAAG,aAAa,GAAG;IAC/C,gBAAgB;IAChB,EAAE,EAAE,eAAe,CAAA;IACnB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc;IACd,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,yCAAyC;IACzC,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC3B,sBAAsB;IACtB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,wDAAwD;IACxD,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,YAAY;IACZ,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,IAAI,CAAA;CACnD,CAAA;AAED,oBAAY,uBAAuB,GAAG;IACpC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,WAAW,CAAC,EAAE,oBAAoB,CAAA;CACnC,CAAA"}
+{"version":3,"file":"accordion.types.d.ts","sourceRoot":"","sources":["../../../src/accordion/accordion.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,oBAAY,oBAAoB,GAAG,UAAU,GAAG,YAAY,CAAA;AAE5D,oBAAY,cAAc,GAAG,WAAW,GACtC,YAAY,CAAC,WAAW,CAAC,GAAG;IAC1B,qDAAqD;IACrD,WAAW,CAAC,EAAE,oBAAoB,CAAA;IAClC,wDAAwD;IACxD,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,oCAAoC;IACpC,KAAK,CAAC,EAAE,kBAAkB,EAAE,CAAA;CAC7B,CAAA;AAEH,oBAAY,eAAe,GAAG,MAAM,GAAG,MAAM,CAAA;AAE7C,oBAAY,sBAAsB,GAAG;IACnC,EAAE,EAAE,eAAe,CAAA;IACnB,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,oBAAY,kBAAkB,GAAG,aAAa,GAAG;IAC/C,gBAAgB;IAChB,EAAE,EAAE,eAAe,CAAA;IACnB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc;IACd,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,yCAAyC;IACzC,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC3B,sBAAsB;IACtB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,wDAAwD;IACxD,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,YAAY;IACZ,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,IAAI,CAAA;CACnD,CAAA;AAED,oBAAY,uBAAuB,GAAG;IACpC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,WAAW,CAAC,EAAE,oBAAoB,CAAA;CACnC,CAAA"}

package/dist/esm/button/button.d.ts

@@ -5,6 +5,7 @@ import ButtonIcon from './buttonIcon';
 import ButtonText from './buttonText';
 export declare const ButtonBase: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, import("..").AnimationProps & import("..").BackgroundColorProps & import("..").BorderProps & import("..").BorderTopProps & import("..").BorderRightProps & import("..").BorderBottomProps & import("..").BorderLeftProps & import("..").BorderColorProps & import("..").BorderTopColorProps & import("..").BorderRightColorProps & import("..").BorderBottomColorProps & import("..").BorderLeftColorProps & import("..").BorderWidthProps & import("..").BorderTopWidthProps & import("..").BorderRightWidthProps & import("..").BorderBottomWidthProps & import("..").BorderLeftWidthProps & import("..").BorderStyleProps & import("..").BorderRadiusProps & import("..").OutlineProps & import("..").OutlineColorProps & import("..").OutlineWidthProps & import("..").OutlineStyleProps & import("..").DivideXProps & import("..").DivideYProps & import("..").DivideXReverseProps & import("..").DivideYReverseProps & import("..").DivideColorProps & import("..").DivideStyleProps & import("..").RingProps & import("..").RingColorProps & import("..").OpacityProps & import("..").BoxShadowProps & import("..").TextShadowProps & import("..").DisplayProps & import("..").AlignItemsProps & import("..").AlignContentProps & import("..").JustifyContentProps & import("..").JustifyItemsProps & import("..").FlexWrapProps & import("..").FlexGrowProps & import("..").FlexShrinkProps & import("..").FlexBasisProps & import("..").FlexDirectionProps & import("..").FlexProps & import("..").JustifySelfProps & import("..").AlignSelfProps & import("..").OrderProps & import("../system/flexboxGrids").RowProps & import("../system/flexboxGrids").ColProps & import("../system/grids").GapProps & import("../system/grids").ColumnGapProps & import("../system/grids").RowGapProps & import("../system/grids").GridColumnProps & import("../system/grids").GridRowProps & import("../system/grids").GridAutoFlowProps & import("../system/grids").GridAutoColumnsProps & import("../system/grids").GridAutoRowsProps & import("../system/grids").GridTemplateColumnsProps & import("../system/grids").GridTemplateRowsProps & import("../system/grids").GridTemplateAreasProps & import("../system/grids").GridAreaProps & import("..").AppearanceProps & import("..").CursorProps & import("..").PointerEventsProps & import("..").ResizeProps & import("..").UserSelectProps & import("..").IsTruncatedProps & import("..").FloatProps & import("..").BoxSizingProps & import("..").OverflowProps & import("..").OverflowXProps & import("..").OverflowYProps & import("..").PositionProps & import("..").ZIndexProps & import("..").TopProps & import("..").RightProps & import("..").BottomProps & import("..").LeftProps & import("..").VisibilityProps & import("..").OverscrollBehaviorProps & import("..").ObjectFitProps & import("..").MaxLinesProps & import("..").WidthProps & import("..").HeightProps & import("..").MaxWidthProps & import("..").MaxHeightProps & import("..").MinWidthProps & import("..").MinHeightProps & import("..").MarginProps & import("..").MarginTopProps & import("..").MarginRightProps & import("..").MarginBottomProps & import("..").MarginLeftProps & import("..").MarginXProps & import("..").MarginYProps & import("..").PaddingProps & import("..").PaddingTopProps & import("..").PaddingRightProps & import("..").PaddingBottomProps & import("..").PaddingLeftProps & import("..").PaddingXProps & import("..").PaddingYProps & import("..").SpaceXProps & import("..").SpaceYProps & import("..").SpaceXReverseProps & import("..").SpaceYReverseProps & import("../system/tables").BorderCollapseProps & import("../system/tables").TableLayoutProps & import("..").TransformProps & import("..").TransformOriginProps & import("..").TranslateXProps & import("..").TranslateYProps & import("..").RotateProps & import("..").SkewXProps & import("..").SkewYProps & import("..").ScaleProps & import("..").ScaleXProps & import("..").ScaleYProps & import("..").TransitionProps & import("..").TransitionPropertyProps & import("..").TransitionDurationProps & import("..").TransitionTimingFunctionProps & import("..").TransitionDelayProps & import("..").FontFamilyProps & import("..").FontSizeProps & import("..").FontStyleProps & import("..").FontWeightProps & import("..").LineHeightProps & import("..").ColorProps & import("..").TextTransformProps & import("..").TextDecorationProps & import("..").TextAlignProps & import("..").VerticalAlignProps & import("..").LetterSpacingProps & import("..").WhiteSpaceProps & import("..").TextOverflowProps & import("..").ListStyleTypeProps & import("..").ListStylePositionProps & import("..").WordBreakProps & import("..").ThemingProps<"Button"> & {
     colorScheme?: import("./button.types").ButtonColorScheme | undefined;
+    dropDownIcon?: import("..").IconProp | undefined;
     icon?: JSX.Element | import("..").IconProp | undefined;
     iconLeft?: JSX.Element | import("..").IconProp | undefined;
     iconRight?: JSX.Element | import("..").IconProp | undefined;

package/dist/esm/button/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAA;AAGtC,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAEnE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,UAAU,MAAM,cAAc,CAAA;AACrC,OAAO,UAAU,MAAM,cAAc,CAAA;AAiBrC,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;SAoBtB,CAAA;AACD;;;;;;GAMG;AACH,eAAO,MAAM,MAAM;UAqHX,iBAAiB;UACjB,iBAAiB;CACxB,CAAA;AAKD,eAAe,MAAM,CAAA"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAA;AAGtC,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAEnE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,UAAU,MAAM,cAAc,CAAA;AACrC,OAAO,UAAU,MAAM,cAAc,CAAA;AAiBrC,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;SAoBtB,CAAA;AACD;;;;;;GAMG;AACH,eAAO,MAAM,MAAM;UAsHX,iBAAiB;UACjB,iBAAiB;CACxB,CAAA;AAKD,eAAe,MAAM,CAAA"}

package/dist/esm/button/button.js

@@ -48,7 +48,7 @@ export const ButtonBase = styled.buttonBox `
 export const Button = vui((props, ref) => {
     const buttonGroupProps = useButtonGroupContext();
     const mergedProps = { ...buttonGroupProps, ...props };
-    const { borderWidth: borderWidthProp, children, className, colorScheme: colorSchemeProp, disabled, icon, iconLeft, iconRight, isActive, isDropDown, isElevated, isFullWidth, isLoading, // eslint-disable-line
+    const { borderWidth: borderWidthProp, children, className, colorScheme: colorSchemeProp, disabled, dropDownIcon = 'falAngleDown', icon, iconLeft, iconRight, isActive, isDropDown, isElevated, isFullWidth, isLoading, // eslint-disable-line
     isRound, isSplit, isTruncated, size, state = props.isLoading ? 'loading' : '', stateMapping, text, variant, ...rest } = mergedProps;
     const hasState = Boolean(state) && state !== 'idle';
     const states = { ...buttonStateMapping, ...stateMapping };
@@ -98,7 +98,7 @@ export const Button = vui((props, ref) => {
                     isString(iconLeft) ? React.createElement(ButtonIcon, { mr: isDropDown ? 0 : iconLeftMr, name: iconLeft }) : iconLeft,
                     children ?? (isReactText(text) ? React.createElement(ButtonText, { ...{ isTruncated, text } }) : text),
                     isString(iconRight) ? React.createElement(ButtonIcon, { ml: iconRightMl, name: iconRight }) : iconRight)),
-                isDropDown && React.createElement(ButtonIcon, { name: "falAngleDown" })))));
+                isDropDown && React.createElement(ButtonIcon, { name: dropDownIcon })))));
 });
 Button.Icon = ButtonIcon;
 Button.Text = ButtonText;

package/dist/esm/button/button.types.d.ts

@@ -7,6 +7,8 @@ export declare type ButtonColorScheme = 'blue' | 'green' | 'pink' | 'prussian' |
 export declare type ButtonProps = SystemProps & ThemingProps<'Button'> & {
     /** Available theme colors for this component. @default prussian */
     colorScheme?: ButtonColorScheme;
+    /** Icon for the drop-down element. @default falAngleDown */
+    dropDownIcon?: IconProp;
     /** Icon that replaces any other content. */
     icon?: IconProp | JSX.Element;
     /** Socket displaying icon on the left side. */

package/dist/esm/button/button.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.types.d.ts","sourceRoot":"","sources":["../../../src/button/button.types.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAEpC,oBAAY,iBAAiB,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,KAAK,CAAA;AAE9E,oBAAY,WAAW,GAAG,WAAW,GACnC,YAAY,CAAC,QAAQ,CAAC,GAAG;IACvB,mEAAmE;IACnE,WAAW,CAAC,EAAE,iBAAiB,CAAA;IAC/B,4CAA4C;IAC5C,IAAI,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAA;IAC7B,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAA;IACjC,gDAAgD;IAChD,SAAS,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAA;IAClC,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,qEAAqE;IACrE,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,yCAAyC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,yDAAyD;IACzD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,kEAAkE;IAClE,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,8DAA8D;IAC9D,YAAY,CAAC,EAAE,kBAAkB,CAAA;IACjC,sDAAsD;IACtD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB,CAAA;AACH,oBAAY,WAAW,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAA;AAE9E,oBAAY,kBAAkB,GAAG,MAAM,CACrC,MAAM,EACN,WAAW,GAAG;IAAE,WAAW,EAAE,WAAW,CAAC,aAAa,CAAC,CAAC;IAAC,SAAS,EAAE,SAAS,CAAA;CAAE,CAChF,CAAA;AAED,wDAAwD;AACxD,oBAAY,eAAe,GAAG,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,WAAW,GAAG,MAAM,CAAC,CAAA"}
+{"version":3,"file":"button.types.d.ts","sourceRoot":"","sources":["../../../src/button/button.types.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAEpC,oBAAY,iBAAiB,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,KAAK,CAAA;AAE9E,oBAAY,WAAW,GAAG,WAAW,GACnC,YAAY,CAAC,QAAQ,CAAC,GAAG;IACvB,mEAAmE;IACnE,WAAW,CAAC,EAAE,iBAAiB,CAAA;IAC/B,4DAA4D;IAC5D,YAAY,CAAC,EAAE,QAAQ,CAAA;IACvB,4CAA4C;IAC5C,IAAI,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAA;IAC7B,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAA;IACjC,gDAAgD;IAChD,SAAS,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAA;IAClC,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,qEAAqE;IACrE,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,yCAAyC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,yDAAyD;IACzD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,kEAAkE;IAClE,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,8DAA8D;IAC9D,YAAY,CAAC,EAAE,kBAAkB,CAAA;IACjC,sDAAsD;IACtD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB,CAAA;AACH,oBAAY,WAAW,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAA;AAE9E,oBAAY,kBAAkB,GAAG,MAAM,CACrC,MAAM,EACN,WAAW,GAAG;IAAE,WAAW,EAAE,WAAW,CAAC,aAAa,CAAC,CAAC;IAAC,SAAS,EAAE,SAAS,CAAA;CAAE,CAChF,CAAA;AAED,wDAAwD;AACxD,oBAAY,eAAe,GAAG,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,WAAW,GAAG,MAAM,CAAC,CAAA"}

package/dist/esm/dragAndDrop/dragAndDrop.d.ts

@@ -0,0 +1,5 @@
+import { DragAndDropProps } from './dragAndDrop.types';
+/** [Beta] Prepares uploading files by selecting or dragging. */
+export declare const DragAndDrop: import("../core").VuiComponent<"label", DragAndDropProps>;
+export default DragAndDrop;
+//# sourceMappingURL=dragAndDrop.d.ts.map

package/dist/esm/dragAndDrop/dragAndDrop.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dragAndDrop.d.ts","sourceRoot":"","sources":["../../../src/dragAndDrop/dragAndDrop.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAatD,gEAAgE;AAChE,eAAO,MAAM,WAAW,2DA8DtB,CAAA;AAEF,eAAe,WAAW,CAAA"}

package/dist/esm/dragAndDrop/dragAndDrop.js

@@ -0,0 +1,42 @@
+import React, { useRef } from 'react';
+import { omitThemingProps, styled, useStyleConfig, v, vui } from '../core';
+import Icon from '../icon';
+import T from '../t';
+import { cs } from '../utils';
+const defaultIcon = 'falCloudUpload';
+const defaultText = 'Click or drag files to this area';
+const DragAndDropBase = styled.labelBox `
+  display: flex;
+  min-width: 0;
+  transition-duration: normal;
+  justify-content: center;
+`;
+/** [Beta] Prepares uploading files by selecting or dragging. */
+export const DragAndDrop = vui((props, ref) => {
+    const { accept, icon = defaultIcon, className, onFilesAdded, multiple = true, text = defaultText, children, disabled, ...rest } = omitThemingProps(props);
+    const fileInput = useRef(null);
+    const styles = useStyleConfig('DragAndDrop', props);
+    const processFiles = (files) => Array.from(files).map(file => file);
+    const handleFileInput = (e) => {
+        e.preventDefault();
+        if (disabled)
+            return undefined;
+        const files = processFiles(e?.currentTarget?.files);
+        if (files?.length)
+            onFilesAdded?.(files);
+    };
+    const handleDrop = (e) => {
+        e.preventDefault();
+        if (disabled)
+            return undefined;
+        const files = e.dataTransfer?.files ? processFiles(e.dataTransfer.files) : [];
+        if (files?.length)
+            onFilesAdded?.(files);
+    };
+    return (React.createElement(DragAndDropBase, { bg: disabled ? 'grey.20' : 'blue.20', className: cs('vui-drag-and-drop', className), cursor: disabled ? 'not-allowed' : 'pointer', onDragEnter: e => e.preventDefault(), onDragOver: e => e.preventDefault(), onDrop: e => handleDrop(e), p: 5, pointerEvents: disabled ? 'none' : 'auto', ref: ref, ...styles, ...rest },
+        children || (React.createElement(T, { color: disabled ? 'grey.50' : 'auto', display: "flex" },
+            React.createElement(Icon, { mr: 1, name: icon }),
+            text)),
+        React.createElement(v.input, { accept: accept, className: "vui-drag-and-drop-hidden-input", display: "none", multiple: multiple, onChange: handleFileInput, ref: fileInput, type: "file" })));
+});
+export default DragAndDrop;

package/dist/esm/dragAndDrop/dragAndDrop.types.d.ts

@@ -0,0 +1,18 @@
+import { BoxProps } from '../box';
+import { IconProp } from '../icon';
+import { ThemingProps } from '../theme';
+export declare type DragAndDropProps = BoxProps & ThemingProps<'DragAndDrop'> & {
+    /** A string that defines the file types the file input should accept. This string is a comma-separated list of [unique file type specifiers](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers). */
+    accept?: string;
+    /** Disabled. @default `false` */
+    disabled?: boolean;
+    /** The message icon. @default `falCloudUpload` */
+    icon?: IconProp;
+    /** Allows to select multiple files when the drop zone is clicked.. @default `true` */
+    multiple?: boolean;
+    /** The message text. @default `Click or drag files to this area` */
+    text?: string;
+    /** Drop or file select callback */
+    onFilesAdded?: (files: File[]) => void;
+};
+//# sourceMappingURL=dragAndDrop.types.d.ts.map

package/dist/esm/dragAndDrop/dragAndDrop.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dragAndDrop.types.d.ts","sourceRoot":"","sources":["../../../src/dragAndDrop/dragAndDrop.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,oBAAY,gBAAgB,GAAG,QAAQ,GACrC,YAAY,CAAC,aAAa,CAAC,GAAG;IAC5B,mPAAmP;IACnP,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kDAAkD;IAClD,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,sFAAsF;IACtF,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,oEAAoE;IACpE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,mCAAmC;IACnC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAA;CACvC,CAAA"}

package/dist/esm/dragAndDrop/dragAndDrop.types.js

@@ -0,0 +1 @@
+export {};