@veracity/vui 1.8.0 → 1.9.0-beta.0

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

@@ -0,0 +1,4 @@
+export * from './dragAndDrop';
+export { default } from './dragAndDrop';
+export * from './dragAndDrop.types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/dragAndDrop/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA;AAC7B,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,cAAc,qBAAqB,CAAA"}

package/dist/esm/dragAndDrop/index.js

@@ -0,0 +1,3 @@
+export * from './dragAndDrop';
+export { default } from './dragAndDrop';
+export * from './dragAndDrop.types';

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

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

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

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

package/dist/esm/dragAndDrop/theme.js

@@ -0,0 +1,10 @@
+const baseStyle = {};
+const defaultProps = {};
+const sizes = {};
+const variants = {};
+export default {
+    baseStyle,
+    defaultProps,
+    sizes,
+    variants
+};

package/dist/esm/index.d.ts

@@ -11,6 +11,7 @@ export * from './copyToClipboard';
 export * from './core';
 export * from './dialog';
 export * from './divider';
+export * from './dragAndDrop';
 export * from './footer';
 export * from './grid';
 export * from './header';
@@ -34,6 +35,7 @@ export * from './portal';
 export * from './progress';
 export * from './radio';
 export * from './select';
+export * from './sidemenu';
 export * from './skeleton';
 export * from './spinner';
 export * from './svg';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,qBAAqB,CAAA;AACnC,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,mBAAmB,CAAA;AACjC,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,KAAK,CAAA;AACnB,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA;AACzB,cAAc,OAAO,CAAA;AACrB,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,KAAK,CAAA;AACnB,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,OAAO,CAAA;AACrB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,qBAAqB,CAAA;AACnC,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,mBAAmB,CAAA;AACjC,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,KAAK,CAAA;AACnB,cAAc,cAAc,CAAA;AAC5B,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,CAAA;AAC1B,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA;AACzB,cAAc,OAAO,CAAA;AACrB,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,KAAK,CAAA;AACnB,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,OAAO,CAAA;AACrB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA"}

package/dist/esm/index.js

@@ -11,6 +11,7 @@ export * from './copyToClipboard';
 export * from './core';
 export * from './dialog';
 export * from './divider';
+export * from './dragAndDrop';
 export * from './footer';
 export * from './grid';
 export * from './header';
@@ -34,6 +35,7 @@ export * from './portal';
 export * from './progress';
 export * from './radio';
 export * from './select';
+export * from './sidemenu';
 export * from './skeleton';
 export * from './spinner';
 export * from './svg';

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

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/input/input.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAMnE,OAAO,QAAQ,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,SAAS,MAAM,aAAa,CAAA;AACnC,OAAO,UAAU,MAAM,cAAc,CAAA;AAErC,eAAO,MAAM,SAAS,+HAiBrB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,KAAK;UAwHV,gBAAgB;WACf,iBAAiB;cACd,eAAe;CAC1B,CAAA;AAMD,eAAe,KAAK,CAAA"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/input/input.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAMnE,OAAO,QAAQ,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,SAAS,MAAM,aAAa,CAAA;AACnC,OAAO,UAAU,MAAM,cAAc,CAAA;AAErC,eAAO,MAAM,SAAS,+HAiBrB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,KAAK;UA+HV,gBAAgB;WACf,iBAAiB;cACd,eAAe;CAC1B,CAAA;AAMD,eAAe,KAAK,CAAA"}

package/dist/esm/input/input.js

@@ -1,8 +1,8 @@
-import React, { useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { styled, useStyleConfig, vui } from '../core';
 import { T } from '../t';
 import { cs, filterUndefined, isString } from '../utils';
-import { greyColor, greyLightColor, inputStateMapping } from './consts';
+import { greyColor, greyLightColor, inputStateMapping, redColor } from './consts';
 import { InputProvider } from './context';
 import { getInitialCount } from './helpers';
 import HelpText from './helpText';
@@ -32,15 +32,17 @@ export const InputBase = styled.divBox `
  * Exposes some props to the children via context.
  */
 export const Input = vui((props, ref) => {
-    const [count, setCount] = useState(getInitialCount(props));
     const { autoComplete, autoFocus, children, className, colorScheme, defaultValue, disabled, errorText, iconLeft, iconRight, id, input, inputProps, inputRef, isInvalid, itemLeft, itemRight, helpText, max, maxLength, min, name, onBlur, onChange: onChangeProp, onFocus, pattern, placeholder, readOnly, required, showCount, size, state = '', stateMapping, step, type = 'text', value, variant, ...rest } = props;
+    const [count, setCount] = useState(getInitialCount(props));
+    const [valueInternal, setValueInternal] = useState(defaultValue);
     const states = { ...inputStateMapping, ...stateMapping };
     const computedColorScheme = filterUndefined({
-        colorScheme: colorScheme ?? (isInvalid ? 'red' : undefined) ?? states[state]?.colorScheme
+        colorScheme: colorScheme ?? (isInvalid ? redColor : undefined) ?? states[state]?.colorScheme
     });
     const styles = useStyleConfig('Input', { ...computedColorScheme, ...props });
     const context = useMemo(() => filterUndefined({ colorScheme, disabled, size, variant }), [colorScheme, disabled, size, variant]);
     function onChange(e) {
+        setValueInternal(e.target.value);
         setCount(e.target.value.length);
         onChangeProp?.(e);
     }
@@ -50,6 +52,10 @@ export const Input = vui((props, ref) => {
         focusWithinBorderColor: !readOnly ? 'transparent' : undefined,
         focusWithinRingColor: readOnly ? 'transparent' : undefined
     });
+    useEffect(() => {
+        setValueInternal(value);
+        setCount(`${value}`?.length ? `${value}`.length : 0);
+    }, [value]);
     return (React.createElement(InputProvider, { value: context },
         React.createElement(InputBase, { className: cs('vui-input', className), ref: ref, ...styles.container, ...aliasedProps, ...rest },
             itemLeft,
@@ -72,16 +78,15 @@ export const Input = vui((props, ref) => {
                     readOnly,
                     required,
                     step,
-                    type,
-                    value
-                }, ...inputProps })),
+                    type
+                }, value: valueInternal, ...inputProps })),
             isString(iconRight) ? React.createElement(InputIcon, { mr: 1, name: iconRight }) : iconRight,
             itemRight,
             state && React.createElement(InputIcon, { mr: 1, ...states[state]?.iconProps }),
-            showCount && (React.createElement(T, { className: "vui-inputCount", color: greyColor, position: "absolute", right: 0, size: "sm", top: "calc(100% + 1px)" },
+            showCount && (React.createElement(T, { className: "vui-inputCount", color: maxLength && count > maxLength ? redColor : greyColor, position: "absolute", right: 0, size: "sm", top: "calc(100% + 1px)" },
                 count,
-                " / ",
-                maxLength))),
+                " ",
+                maxLength ? `/ ${maxLength}` : null))),
         !!helpText && React.createElement(HelpText, null, helpText),
         !!errorText && React.createElement(HelpText, { isError: true }, errorText)));
 });

package/dist/esm/sidemenu/context.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { Dict } from '../utils';
+declare const SidemenuProvider: import("react").Provider<Dict<any>>, useSidemenuContext: () => Dict<any>;
+export { SidemenuProvider, useSidemenuContext };
+//# sourceMappingURL=context.d.ts.map

package/dist/esm/sidemenu/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/sidemenu/context.ts"],"names":[],"mappings":";AAAA,OAAO,EAAiB,IAAI,EAAE,MAAM,UAAU,CAAA;AAE9C,QAAA,MAAO,gBAAgB,uCAAE,kBAAkB,iBAA6C,CAAA;AAExF,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,CAAA"}

package/dist/esm/sidemenu/context.js

@@ -0,0 +1,3 @@
+import { createContext } from '../utils';
+const [SidemenuProvider, useSidemenuContext] = createContext({ isOptional: true });
+export { SidemenuProvider, useSidemenuContext };

package/dist/esm/sidemenu/index.d.ts

@@ -0,0 +1,6 @@
+export * from './sidemenu';
+export * from './sidemenuItem';
+export * from './sidemenuTop';
+export { default } from './sidemenu';
+export * from './sidemenu.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/sidemenu/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/sidemenu/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA;AAC1B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,eAAe,CAAA;AAC7B,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AACpC,cAAc,kBAAkB,CAAA"}

package/dist/esm/sidemenu/index.js

@@ -0,0 +1,5 @@
+export * from './sidemenu';
+export * from './sidemenuItem';
+export * from './sidemenuTop';
+export { default } from './sidemenu';
+export * from './sidemenu.types';

package/dist/esm/sidemenu/sidemenu.d.ts

@@ -0,0 +1,12 @@
+import { VuiComponent } from '../core';
+import { SidemenuProps } from './sidemenu.types';
+import SidemenuItem from './sidemenuItem';
+import SidemenuTop from './sidemenuTop';
+export declare const SidemenuBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("..").SystemProps, never>;
+/** [Beta] A collapsible side menu for navigation. */
+export declare const Sidemenu: VuiComponent<"div", SidemenuProps> & {
+    Top: typeof SidemenuTop;
+    Item: typeof SidemenuItem;
+};
+export default Sidemenu;
+//# sourceMappingURL=sidemenu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sidemenu.d.ts","sourceRoot":"","sources":["../../../src/sidemenu/sidemenu.tsx"],"names":[],"mappings":"AAIA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAInE,OAAO,EAAqB,aAAa,EAAE,MAAM,kBAAkB,CAAA;AACnE,OAAO,YAAY,MAAM,gBAAgB,CAAA;AACzC,OAAO,WAAW,MAAM,eAAe,CAAA;AAEvC,eAAO,MAAM,YAAY,+HAMxB,CAAA;AAED,qDAAqD;AACrD,eAAO,MAAM,QAAQ;SAqCd,kBAAkB;UACjB,mBAAmB;CAC1B,CAAA;AAKD,eAAe,QAAQ,CAAA"}

package/dist/esm/sidemenu/sidemenu.js

@@ -0,0 +1,44 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import Box from '../box';
+import Button from '../button';
+import { styled, useStyleConfig, vui } from '../core';
+import Icon from '../icon';
+import { cs, filterUndefined } from '../utils';
+import { SidemenuProvider } from './context';
+import SidemenuItem from './sidemenuItem';
+import SidemenuTop from './sidemenuTop';
+export const SidemenuBase = styled.divBox `
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  transition-duration: normal;
+  overflow: hidden;
+`;
+/** [Beta] A collapsible side menu for navigation. */
+export const Sidemenu = vui((props, ref) => {
+    const { children, className, items, isExpanded = false, width = 280, ...rest } = props;
+    const styles = useStyleConfig('Sidemenu', props);
+    const [isExpandedInternal, setIsExpandedInternal] = useState(isExpanded);
+    const context = useMemo(() => filterUndefined({ isExpandedInternal }), [isExpandedInternal]);
+    const aliasedProps = filterUndefined({});
+    useEffect(() => {
+        setIsExpandedInternal(isExpanded);
+    }, [isExpanded]);
+    const toggle = () => {
+        setIsExpandedInternal(!isExpandedInternal);
+    };
+    const w = isExpandedInternal ? width : 64;
+    const icon = isExpandedInternal ? 'falArrowLeft' : 'falArrowRight';
+    const iconRight = isExpandedInternal ? 16 : 34;
+    return (React.createElement(SidemenuProvider, { value: context },
+        React.createElement(SidemenuBase, { className: cs('vui-sidemenu', className), ref: ref, w: w, ...styles, ...aliasedProps, ...rest },
+            React.createElement(Box, { flexDirection: "column", flexGrow: 1, w: "100%" }, items
+                ? items?.map?.((item, key) => React.createElement(SidemenuItem, { key: key, ...item }))
+                : children),
+            React.createElement(Box, { borderTop: "1px solid lightgray", className: "vui-sidemenu-bottom", mt: 2, w: "100%" },
+                React.createElement(Button, { borderRadius: 0, onClick: toggle, variant: "text", w: "100%" },
+                    React.createElement(Icon, { name: icon, position: "absolute", right: iconRight }))))));
+});
+Sidemenu.Top = SidemenuTop;
+Sidemenu.Item = SidemenuItem;
+export default Sidemenu;

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

@@ -0,0 +1,41 @@
+import { ReactNode } from 'react';
+import { BoxProps } from '../box';
+import { IconProp } from '../icon';
+import { SystemProps } from '../system';
+import { ThemingProps } from '../theme';
+export declare type SidemenuOrientation = 'vertical' | 'horizontal';
+export declare type SidemenuProps = SystemProps & ThemingProps<'Sidemenu'> & {
+    /** Collection of menu items  */
+    items?: SidemenuItemProps[];
+    /** Whether the menu is expanded @default false  */
+    isExpanded?: boolean;
+    /** With of the container when the side menu is expanded @default 280  */
+    width?: number;
+};
+export declare type SidemenuItemProps = BoxProps & {
+    /** Custom class name */
+    className?: string;
+    /** Children */
+    children?: ReactNode;
+    /** Custom class name */
+    icon: IconProp;
+    /** Icon size @default md  */
+    iconSize?: 'md' | 'sm';
+    /** Whether the item is active */
+    isActive?: boolean;
+    /** Path */
+    path?: string;
+    /** On click callback */
+    onClick?: () => void;
+    /** Title */
+    title: string;
+};
+export declare type SidemenuTopProps = BoxProps & {
+    /** Custom class name */
+    className?: string;
+    /** Left slod (always visible) */
+    leftSlot?: ReactNode;
+    /** Right slod (hiden if the sidemenu is collapsed) */
+    rightSlot?: ReactNode;
+};
+//# sourceMappingURL=sidemenu.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sidemenu.types.d.ts","sourceRoot":"","sources":["../../../src/sidemenu/sidemenu.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,oBAAY,mBAAmB,GAAG,UAAU,GAAG,YAAY,CAAA;AAE3D,oBAAY,aAAa,GAAG,WAAW,GACrC,YAAY,CAAC,UAAU,CAAC,GAAG;IACzB,gCAAgC;IAChC,KAAK,CAAC,EAAE,iBAAiB,EAAE,CAAA;IAC3B,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,yEAAyE;IACzE,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAEH,oBAAY,iBAAiB,GAAG,QAAQ,GAAG;IACzC,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe;IACf,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,wBAAwB;IACxB,IAAI,EAAE,QAAQ,CAAA;IACd,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IACtB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW;IACX,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,wBAAwB;IACxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,YAAY;IACZ,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,oBAAY,gBAAgB,GAAG,QAAQ,GAAG;IACxC,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,sDAAsD;IACtD,SAAS,CAAC,EAAE,SAAS,CAAA;CACtB,CAAA"}

package/dist/esm/sidemenu/sidemenu.types.js

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

package/dist/esm/sidemenu/sidemenuItem.d.ts

@@ -0,0 +1,5 @@
+import { SidemenuItemProps } from './sidemenu.types';
+/** A menu item. */
+export declare const SidemenuItem: (props: SidemenuItemProps) => JSX.Element;
+export default SidemenuItem;
+//# sourceMappingURL=sidemenuItem.d.ts.map

package/dist/esm/sidemenu/sidemenuItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidemenuItem.d.ts","sourceRoot":"","sources":["../../../src/sidemenu/sidemenuItem.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAEpD,mBAAmB;AACnB,eAAO,MAAM,YAAY,UAAW,iBAAiB,gBAiEpD,CAAA;AAED,eAAe,YAAY,CAAA"}

package/dist/esm/sidemenu/sidemenuItem.js

@@ -0,0 +1,26 @@
+import React, { useState } from 'react';
+import { Link as RouterLink } from 'react-router-dom';
+import Box from '../box';
+import Button from '../button';
+import { omitThemingProps } from '../core';
+import Icon from '../icon';
+import T from '../t';
+import { cs } from '../utils';
+import { useSidemenuContext } from './context';
+/** A menu item. */
+export const SidemenuItem = (props) => {
+    const { className, children, icon, iconSize = 'md', isActive, onClick, path, title, ...rest } = omitThemingProps(props);
+    const [displayChildren, setDisplayChildren] = useState(true);
+    const { isExpandedInternal } = useSidemenuContext();
+    const innerContent = isExpandedInternal ? (React.createElement(Box, { px: 2, py: 1, w: "100%", whiteSpace: "pre" },
+        React.createElement(Icon, { ml: iconSize === 'sm' ? '4px' : 0, name: icon, size: iconSize }),
+        React.createElement(T, { ml: 2 }, title))) : (React.createElement(Box, { px: 2, py: 1, w: "100%" },
+        React.createElement(Icon, { ml: iconSize === 'sm' ? '4px' : 0, name: icon, size: iconSize })));
+    const pathProps = path ? { as: RouterLink, to: path } : {};
+    return (React.createElement(Box, { flexDirection: "column", w: "100%" },
+        React.createElement(Button, { border: "none", borderLeft: "3px solid black", borderLeftColor: isActive ? 'blue.80' : 'transparent', borderRadius: 0, className: cs('vui-sidemenu-item', className), h: "auto", justifyContent: "space-between", onClick: () => onClick?.(), p: 0, variant: "text", w: "100%", ...pathProps, ...rest },
+            innerContent,
+            !!children && isExpandedInternal && (React.createElement(Button, { icon: displayChildren ? 'falChevronUp' : 'falChevronDown', mr: 1, onClick: () => setDisplayChildren(!displayChildren), size: "xs", variant: "text" }))),
+        !!children && displayChildren && (React.createElement(Box, { flexDirection: "column", justifyContent: "start", w: "100%" }, children))));
+};
+export default SidemenuItem;

package/dist/esm/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/esm/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/esm/sidemenu/sidemenuTop.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Box } from '../box';
+import { omitThemingProps } from '../core';
+import { cs } from '../utils';
+import { useSidemenuContext } from './context';
+/** Top container. */
+export const SidemenuTop = (props) => {
+    const { className, leftSlot, rightSlot, ...rest } = omitThemingProps(props);
+    const { isExpandedInternal } = useSidemenuContext();
+    if (!leftSlot && !rightSlot)
+        return null;
+    return (React.createElement(Box, { borderBottom: "1px solid lightgray", className: cs('vui-sidemenu-top', className), mb: 1, w: "100%", ...rest },
+        !!leftSlot && leftSlot,
+        !!rightSlot && isExpandedInternal && rightSlot));
+};
+export default SidemenuTop;

package/dist/esm/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/esm/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/esm/sidemenu/theme.js

@@ -0,0 +1,10 @@
+const baseStyle = {};
+const defaultProps = {};
+const sizes = {};
+const variants = {};
+export default {
+    baseStyle,
+    defaultProps,
+    sizes,
+    variants
+};

package/dist/esm/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/esm/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/esm/textarea/consts.js

@@ -0,0 +1,3 @@
+export const greyLightColor = 'grey.10';
+export const greyColor = 'grey.80';
+export const redColor = 'red.80';

package/dist/esm/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/esm/textarea/textarea.js

@@ -1,7 +1,8 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { omitThemingProps, styled, useStyleConfig, vui } from '../core';
 import T from '../t';
 import { cs, filterUndefined } from '../utils';
+import { greyColor, greyLightColor, redColor } from './consts';
 import { getInitialCount } from './helpers';
 const TextareaTextarea = styled.textareaBox `
   border-radius: md;
@@ -35,13 +36,15 @@ export const TextareaBase = styled.divBox `
  * Forwards many relevant props to the inner textarea. Exposes some props to the children via context.
  */
 export const Textarea = vui((props, ref) => {
-    const [count, setCount] = useState(getInitialCount(props));
     const { 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, ...rest } = omitThemingProps(props);
+    const [count, setCount] = useState(getInitialCount(props));
+    const [valueInternal, setValueInternal] = useState(defaultValue);
     const colorProps = filterUndefined({
         colorScheme: colorSchemeProp ?? (isInvalid ? 'red' : undefined)
     });
     const styles = useStyleConfig('Textarea', { ...colorProps, ...props });
     function onChange(e) {
+        setValueInternal(e.target.value);
         setCount(e.target.value.length);
         onChangeProp?.(e);
     }
@@ -50,10 +53,14 @@ export const Textarea = vui((props, ref) => {
     });
     const textareaAliasedProps = filterUndefined({
         'aria-disabled': disabled,
-        bg: readOnly ? 'grey.20' : undefined,
+        bg: readOnly ? greyLightColor : undefined,
         focusBorderColor: !readOnly ? 'transparent' : undefined,
         focusRing: readOnly ? 0 : undefined
     });
+    useEffect(() => {
+        setValueInternal(value);
+        setCount(`${value}`?.length ? `${value}`.length : 0);
+    }, [value]);
     return (React.createElement(TextareaBase, { className: cs('vui-textarea', className), ref: ref, ...styles.container, ...aliasedProps, ...rest },
         React.createElement(TextareaTextarea, { className: "vui-textareaTextarea", ref: textareaRef, ...{
                 autoFocus,
@@ -70,12 +77,11 @@ export const Textarea = vui((props, ref) => {
                 readOnly,
                 required,
                 resize,
-                rows,
-                value
-            }, ...styles.textarea, ...textareaAliasedProps, ...textareaProps }),
-        showCount && (React.createElement(T, { 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.createElement(T, { className: "vui-textareaCount", color: maxLength && count > maxLength ? redColor : greyColor, position: "absolute", right: 0, size: "sm", top: "calc(100% + 1px)" },
             count,
-            " / ",
-            maxLength))));
+            " ",
+            maxLength ? `/ ${maxLength}` : null))));
 });
 export default Textarea;

package/dist/esm/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/esm/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/esm/theme/components.js

@@ -7,6 +7,7 @@ import Card from '../card/theme';
 import Checkbox from '../checkbox/theme';
 import Dialog from '../dialog/theme';
 import Divider from '../divider/theme';
+import DragAndDrop from '../dragAndDrop/theme';
 import Footer from '../footer/theme';
 import Grid from '../grid/theme';
 import Header from '../header/theme';
@@ -27,6 +28,7 @@ import Popover from '../popover/theme';
 import Progress from '../progress/theme';
 import Radio from '../radio/theme';
 import Select from '../select/theme';
+import Sidemenu from '../sidemenu/theme';
 import Skeleton from '../skeleton/theme';
 import Spinner from '../spinner/theme';
 import Switch from '../switch/theme';
@@ -45,6 +47,7 @@ export default {
     Checkbox,
     Dialog,
     Divider,
+    DragAndDrop,
     Footer,
     Grid,
     Header,
@@ -65,6 +68,7 @@ export default {
     Popover,
     Radio,
     Select,
+    Sidemenu,
     Skeleton,
     Spinner,
     Switch,

package/dist/esm/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/esm/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/esm/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/esm/toast/toast.js

@@ -1,10 +1,13 @@
 import React from 'react';
 import { Box } from '../box';
-import { useVuiContext } from '../core';
+import { useVuiContext, v } from '../core';
 import { zIndices } from '../theme';
 export const toasterWidth = 420;
 const Toaster = () => {
     const { toasts } = useVuiContext();
-    return (React.createElement(Box, { bottom: "1rem", display: "block", maxW: { md: toasterWidth, sm: toasterWidth, xs: '100%' }, minW: { md: toasterWidth, sm: toasterWidth, xs: '100%' }, p: { md: '16px', sm: '4px', xs: '2px' }, position: "fixed", right: { md: '1rem', sm: 0, xs: 0 }, zIndex: zIndices.toast }, toasts?.list?.map?.((toast) => (React.createElement("div", { id: `toast_${toast.id}`, key: toast.id }, toast.component)))));
+    const padding = toasts?.list?.length ? { md: '16px', sm: '4px', xs: '2px' } : 0;
+    const right = { md: '1rem', sm: 0, xs: 0 };
+    const width = { md: toasterWidth, sm: toasterWidth, xs: '100%' };
+    return (React.createElement(Box, { bottom: "1rem", className: "vui-toaster", display: "block", maxW: width, minW: width, p: padding, position: "fixed", right: right, zIndex: zIndices.toast }, toasts?.list?.map?.((toast) => (React.createElement(v.div, { id: `toast_${toast.id}`, key: toast.id }, toast.component)))));
 };
 export default React.memo(Toaster);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "1.8.0",
+  "version": "1.9.0-beta.0",
   "description": "Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.",
   "module": "./dist/esm/index.js",
   "main": "./dist/cjs/index.js",

package/src/accordion/accordion.types.ts

@@ -12,6 +12,7 @@ export type AccordionProps = SystemProps &
     orientation?: AccordionOrientation
     /** Hover color for the item title @default "blue.10" */
     itemTitleHoverBg?: string
+    /** Collection of Accordion items */
     items?: AccordionItemProps[]
   }