@veracity/vui 0.3.0 → 0.3.2

package/list/listText.js

@@ -16,14 +16,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ListText = void 0;
 var react_1 = __importDefault(require("react"));
-var context_1 = require("./context");
 var core_1 = require("../core");
 var t_1 = __importDefault(require("../t"));
+var context_1 = require("./context");
+/** Displays text within the ListItem. */
 exports.ListText = (0, core_1.vui)(function (props, ref) {
-    var _a;
-    var listProps = (_a = (0, context_1.useList)()) !== null && _a !== void 0 ? _a : {};
-    var mergedProps = __assign(__assign({}, listProps), props);
-    var styles = (0, core_1.useStyleConfig)('List', mergedProps);
+    var styles = (0, core_1.useStyleConfig)('List', __assign(__assign({}, (0, context_1.useList)()), props));
     return react_1.default.createElement(t_1.default, __assign({ className: "vui-listText", fontSize: "inherit", ref: ref }, styles.text, props));
 });
 exports.ListText.displayName = 'ListText';

package/list/theme.d.ts

@@ -3,6 +3,7 @@ declare function variantDefault(props: Dict): {
     item: Dict<any>;
 };
 declare const _default: {
+    baseStyle: {};
     defaultProps: {
         colorScheme: string;
         size: string;

package/list/theme.js

@@ -4,11 +4,13 @@ function variantDefault(props) {
     var c = props.colorScheme;
     var item = {
         activeBg: c + ".30",
-        borderRadius: 'md',
-        hoverBg: c + ".20"
+        hoverBg: c + ".20",
+        selectedBg: c + ".10",
+        px: 2
     };
     return { item: item };
 }
+var baseStyle = {};
 var defaultProps = {
     colorScheme: 'blue',
     size: 'md',
@@ -81,6 +83,7 @@ var variants = {
     }
 };
 exports.default = {
+    baseStyle: baseStyle,
     defaultProps: defaultProps,
     parts: parts,
     sizes: sizes,

package/menu/menu.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { MenuProps } from './menu.types';
+/** Wraps Popover component and exposes some props to the children via context. */
 declare function Menu(props: MenuProps): JSX.Element;
 declare namespace Menu {
     var Button: import("..").VuiComponent<"button", import("..").ButtonProps>;

package/menu/menu.js

@@ -51,6 +51,7 @@ var context_1 = require("./context");
 var menuButton_1 = __importDefault(require("./menuButton"));
 var menuItem_1 = __importDefault(require("./menuItem"));
 var menuList_1 = __importDefault(require("./menuList"));
+/** Wraps Popover component and exposes some props to the children via context. */
 function Menu(props) {
     var _a = props.closeOnSelect, closeOnSelect = _a === void 0 ? true : _a, size = props.size, variant = props.variant, rest = __rest(props, ["closeOnSelect", "size", "variant"]);
     var context = (0, react_1.useMemo)(function () { return (0, utils_1.filterUndefined)({ closeOnSelect: closeOnSelect, size: size, variant: variant }); }, [closeOnSelect, size, variant]);

package/menu/menu.types.d.ts

@@ -3,9 +3,12 @@ import { ListProps } from '../list';
 import { PopoverContentProps, PopoverProps } from '../popover';
 import { ThemingProps } from '../theme';
 export declare type MenuListProps = ListProps & {
+    /** Props object passed to the inner PopoverContent. */
     contentProps?: PopoverContentProps;
+    /** Ref passed to the inner PopoverContent. */
     contentRef?: RefObject<HTMLDivElement>;
 };
 export declare type MenuProps = ThemingProps<'Menu'> & PopoverProps & {
+    /** Content closes when clicking on a list item. */
     closeOnSelect?: boolean;
 };

package/menu/menuButton.d.ts

@@ -1,3 +1,4 @@
 import { ButtonProps } from '../button';
+/** Displays PopoverTrigger as a button. */
 export declare const MenuButton: import("../core").VuiComponent<"button", ButtonProps>;
 export default MenuButton;

package/menu/menuButton.js

@@ -20,11 +20,10 @@ var button_1 = require("../button");
 var core_1 = require("../core");
 var popover_1 = require("../popover");
 var context_1 = require("./context");
+/** Displays PopoverTrigger as a button. */
 exports.MenuButton = (0, core_1.vui)(function (props, ref) {
-    var _a;
-    var menuProps = (_a = (0, context_1.useMenuContext)()) !== null && _a !== void 0 ? _a : {};
-    var styles = (0, core_1.useStyleConfig)('Menu', __assign(__assign({}, menuProps), props));
-    return react_1.default.createElement(popover_1.PopoverTrigger, __assign({ as: button_1.AppButton, className: "vui-menuButton", ref: ref }, styles.button, props));
+    var styles = (0, core_1.useStyleConfig)('Menu', __assign(__assign({}, (0, context_1.useMenuContext)()), props));
+    return react_1.default.createElement(popover_1.PopoverTrigger, __assign({ as: button_1.TextButton, className: "vui-menuButton", ref: ref }, styles.button, props));
 });
 exports.MenuButton.displayName = 'MenuButton';
 exports.default = exports.MenuButton;

package/menu/menuItem.d.ts

@@ -1,3 +1,4 @@
 import { ListItemProps } from '../list';
+/** Displays a list item and by default closes the menu on click. */
 export declare const MenuItem: import("../core").VuiComponent<"li", ListItemProps>;
 export default MenuItem;

package/menu/menuItem.js

@@ -43,10 +43,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MenuItem = void 0;
 var react_1 = __importStar(require("react"));
-var context_1 = require("./context");
 var core_1 = require("../core");
 var list_1 = require("../list");
 var popover_1 = require("../popover");
+var context_1 = require("./context");
+/** Displays a list item and by default closes the menu on click. */
 exports.MenuItem = (0, core_1.vui)(function (props, ref) {
     var _a, _b;
     var onClickProp = props.onClick, rest = __rest(props, ["onClick"]);

package/menu/menuList.d.ts

@@ -1,6 +1,7 @@
 import { VuiComponent } from '../core';
 import List from '../list';
 import { MenuListProps } from './menu.types';
+/** Displays a list of menu items in a popover content element. */
 export declare const MenuList: VuiComponent<"ul", MenuListProps> & {
     Divider: typeof List.Divider;
     Heading: typeof List.Heading;

package/menu/menuList.js

@@ -31,13 +31,12 @@ var core_1 = require("../core");
 var list_1 = __importDefault(require("../list"));
 var popover_1 = require("../popover");
 var context_1 = require("./context");
+/** Displays a list of menu items in a popover content element. */
 exports.MenuList = (0, core_1.vui)(function (props, ref) {
-    var _a;
     var contentProps = props.contentProps, contentRef = props.contentRef, rest = __rest(props, ["contentProps", "contentRef"]);
-    var menuProps = (_a = (0, context_1.useMenuContext)()) !== null && _a !== void 0 ? _a : {};
-    var styles = (0, core_1.useStyleConfig)('Menu', __assign(__assign({}, menuProps), props));
+    var styles = (0, core_1.useStyleConfig)('Menu', __assign(__assign({}, (0, context_1.useMenuContext)()), props));
     return (react_1.default.createElement(popover_1.PopoverContent, __assign({ ref: contentRef }, contentProps),
-        react_1.default.createElement(list_1.default, __assign({ className: "vui-menuList", p: 1, ref: ref, size: "sm" }, styles.list, rest))));
+        react_1.default.createElement(list_1.default, __assign({ className: "vui-menuList", py: 1, ref: ref }, styles.list, rest))));
 });
 exports.MenuList.displayName = 'MenuList';
 exports.MenuList.Divider = list_1.default.Divider;

package/menu/theme.d.ts

@@ -1,7 +1,21 @@
 declare const _default: {
-    defaultProps: {};
+    baseStyle: {};
+    defaultProps: {
+        size: string;
+    };
     parts: string[];
-    sizes: {};
+    sizes: {
+        md: {
+            list: {
+                size: string;
+            };
+        };
+        lg: {
+            list: {
+                size: string;
+            };
+        };
+    };
     variants: {};
 };
 export default _default;

package/menu/theme.js

@@ -1,10 +1,25 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var defaultProps = {};
-var parts = ['container', 'button', 'item', 'list'];
-var sizes = {};
+var baseStyle = {};
+var defaultProps = {
+    size: 'md'
+};
+var parts = ['button', 'item', 'list'];
+var sizes = {
+    md: {
+        list: {
+            size: 'sm'
+        }
+    },
+    lg: {
+        list: {
+            size: 'md'
+        }
+    }
+};
 var variants = {};
 exports.default = {
+    baseStyle: baseStyle,
     defaultProps: defaultProps,
     parts: parts,
     sizes: sizes,

package/notification/index.d.ts

@@ -1,8 +1,8 @@
+export * from './context';
 export * from './notification';
+export { default } from './notification';
 export * from './notification.types';
 export * from './notificationButton';
 export * from './notificationIcon';
 export * from './notificationText';
 export * from './notificationTitle';
-export * from './context';
-export { default } from './notification';

package/notification/index.js

@@ -14,12 +14,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = void 0;
+__exportStar(require("./context"), exports);
 __exportStar(require("./notification"), exports);
+var notification_1 = require("./notification");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(notification_1).default; } });
 __exportStar(require("./notification.types"), exports);
 __exportStar(require("./notificationButton"), exports);
 __exportStar(require("./notificationIcon"), exports);
 __exportStar(require("./notificationText"), exports);
 __exportStar(require("./notificationTitle"), exports);
-__exportStar(require("./context"), exports);
-var notification_1 = require("./notification");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(notification_1).default; } });

package/notification/notification.d.ts

@@ -1,9 +1,13 @@
+import { VuiComponent } from '../core';
 import { NotificationProps } from './notification.types';
 import NotificationButton from './notificationButton';
 import NotificationIcon from './notificationIcon';
 import NotificationText from './notificationText';
 import NotificationTitle from './notificationTitle';
-import { VuiComponent } from '../core';
+/**
+ * Displays informational content, like text and icon with optional action buttons.
+ * Handles multiple states, like info, error or loading.
+ */
 export declare const Notification: VuiComponent<"div", NotificationProps> & {
     Button: typeof NotificationButton;
     Icon: typeof NotificationIcon;

package/notification/notification.js

@@ -10,25 +10,6 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (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)
@@ -45,24 +26,28 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Notification = void 0;
-var react_1 = __importStar(require("react"));
+var react_1 = __importDefault(require("react"));
+var box_1 = __importDefault(require("../box"));
+var core_1 = require("../core");
+var utils_1 = require("../utils");
 var consts_1 = require("./consts");
 var context_1 = require("./context");
 var notificationButton_1 = __importDefault(require("./notificationButton"));
 var notificationIcon_1 = __importDefault(require("./notificationIcon"));
 var notificationText_1 = __importDefault(require("./notificationText"));
 var notificationTitle_1 = __importDefault(require("./notificationTitle"));
-var box_1 = __importDefault(require("../box"));
-var core_1 = require("../core");
-var utils_1 = require("../utils");
+/**
+ * Displays informational content, like text and icon with optional action buttons.
+ * Handles multiple states, like info, error or loading.
+ */
 exports.Notification = (0, core_1.vui)(function (props, ref) {
     var _a, _b, _c;
-    var action = props.action, children = props.children, className = props.className, _d = props.colorScheme, colorSchemeProp = _d === void 0 ? 'blue' : _d, icon = props.icon, onClose = props.onClose, size = props.size, _e = props.status, status = _e === void 0 ? '' : _e, statusMapping = props.statusMapping, text = props.text, title = props.title, variant = props.variant, rest = __rest(props, ["action", "children", "className", "colorScheme", "icon", "onClose", "size", "status", "statusMapping", "text", "title", "variant"]);
+    var action = props.action, children = props.children, className = props.className, _d = props.colorScheme, colorSchemeProp = _d === void 0 ? 'blue' : _d, icon = props.icon, onClose = props.onClose, size = props.size, status = props.status, statusMapping = props.statusMapping, text = props.text, title = props.title, variant = props.variant, rest = __rest(props, ["action", "children", "className", "colorScheme", "icon", "onClose", "size", "status", "statusMapping", "text", "title", "variant"]);
     var statuses = __assign(__assign({}, consts_1.notificationStatusMapping), statusMapping);
-    var _f = ((_a = statuses[status]) !== null && _a !== void 0 ? _a : {}).colorScheme, colorScheme = _f === void 0 ? colorSchemeProp : _f;
+    var _e = ((_a = statuses[status !== null && status !== void 0 ? status : '']) !== null && _a !== void 0 ? _a : {}).colorScheme, colorScheme = _e === void 0 ? colorSchemeProp : _e;
     var styles = (0, core_1.useStyleConfig)('Notification', __assign({ colorScheme: colorScheme }, props));
-    var iconName = (0, utils_1.isString)(icon) ? icon : (_c = (_b = statuses[status]) === null || _b === void 0 ? void 0 : _b.iconProps) === null || _c === void 0 ? void 0 : _c.name;
-    var context = (0, react_1.useMemo)(function () { return (0, utils_1.filterUndefined)({ colorScheme: colorScheme, size: size, status: status, variant: variant }); }, [colorScheme, size, status, variant]);
+    var iconName = (0, utils_1.isString)(icon) ? icon : (_c = (_b = statuses[status !== null && status !== void 0 ? status : '']) === null || _b === void 0 ? void 0 : _b.iconProps) === null || _c === void 0 ? void 0 : _c.name;
+    var context = (0, utils_1.filterUndefined)({ colorScheme: colorScheme, size: size, status: status, variant: variant });
     return (react_1.default.createElement(context_1.NotificationProvider, { value: context },
         react_1.default.createElement(box_1.default, __assign({ borderRadius: "md", className: (0, utils_1.cs)('vui-notification', className), px: 1.5, py: 1, ref: ref, w: "fit-content" }, styles.container, rest),
             iconName ? react_1.default.createElement(notificationIcon_1.default, { name: iconName }) : icon, children !== null && children !== void 0 ? children : (react_1.default.createElement(notificationText_1.default, null,

package/notification/notification.types.d.ts

@@ -3,16 +3,24 @@ import { BoxProps } from '../box';
 import { IconProp, IconProps } from '../icon';
 import { ThemingProps } from '../theme';
 import { AnyElement } from '../utils';
-export interface NotificationProps extends Omit<BoxProps, 'size' | 'variant'>, ThemingProps<'Notification'> {
+export declare type NotificationProps = Omit<BoxProps, 'size' | 'variant'> & ThemingProps<'Notification'> & {
+    /** Socket displaying a button on the right. */
     action?: ReactNode;
+    /** Available theme colors for this component. @default blue */
     colorScheme?: 'blue' | 'green' | 'red' | 'yellow';
+    /** Socket displaying an icon on the left. */
     icon?: IconProp | AnyElement;
+    /** If provided, displays a close button with this function as onClick. */
     onClose?: () => void;
+    /** Modifies Notification style and content based on the given status. */
     status?: NotificationStatus;
+    /** Object definition of styles and content for each status. */
     statusMapping?: NotificationStatusMapping;
+    /** Socket displaying text in the middle. */
     text?: ReactNode;
+    /** Socket displaying title in the middle. */
     title?: ReactNode;
-}
+};
 export declare type NotificationStatus = 'error' | 'info' | 'loading' | 'success' | 'warning';
 export declare type NotificationStatusMapping = Record<string, {
     colorScheme?: NotificationProps['colorScheme'];

package/notification/notificationButton.d.ts

@@ -1,3 +1,4 @@
 import { ButtonProps } from '../button';
+/** Displays an action button within the Notification. */
 export declare const NotificationButton: import("../core").VuiComponent<"button", ButtonProps>;
 export default NotificationButton;

package/notification/notificationButton.js

@@ -16,13 +16,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NotificationButton = void 0;
 var react_1 = __importDefault(require("react"));
-var context_1 = require("./context");
-var core_1 = require("../core");
 var button_1 = __importDefault(require("../button"));
+var core_1 = require("../core");
+var context_1 = require("./context");
+/** Displays an action button within the Notification. */
 exports.NotificationButton = (0, core_1.vui)(function (props, ref) {
-    var _a;
-    var notificationProps = (_a = (0, context_1.useNotification)()) !== null && _a !== void 0 ? _a : {};
-    var mergedProps = __assign(__assign({}, notificationProps), props);
+    var mergedProps = __assign(__assign({}, (0, context_1.useNotification)()), props);
     var styles = (0, core_1.useStyleConfig)('Notification', mergedProps);
     return (react_1.default.createElement(button_1.default, __assign({ className: "vui-notificationButton", colorScheme: mergedProps.colorScheme, ml: 1, mr: -0.5, ref: ref, size: "sm", variant: "text" }, styles.button, props)));
 });

package/notification/notificationIcon.d.ts

@@ -1,3 +1,4 @@
 import { IconProps } from '../icon';
+/** Displays an icon based on the status within the Notification. */
 export declare const NotificationIcon: import("../core").VuiComponent<"svg", IconProps>;
 export default NotificationIcon;

package/notification/notificationIcon.js

@@ -16,17 +16,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NotificationIcon = void 0;
 var react_1 = __importDefault(require("react"));
-var consts_1 = require("./consts");
-var context_1 = require("./context");
 var core_1 = require("../core");
 var icon_1 = __importDefault(require("../icon"));
+var consts_1 = require("./consts");
+var context_1 = require("./context");
+/** Displays an icon based on the status within the Notification. */
 exports.NotificationIcon = (0, core_1.vui)(function (props, ref) {
-    var _a, _b;
-    var notificationProps = (_a = (0, context_1.useNotification)()) !== null && _a !== void 0 ? _a : {};
-    var mergedProps = __assign(__assign({}, notificationProps), props);
+    var _a;
+    var mergedProps = __assign(__assign({}, (0, context_1.useNotification)()), props);
     var styles = (0, core_1.useStyleConfig)('Notification', mergedProps);
-    var _c = mergedProps.status, status = _c === void 0 ? '' : _c;
-    var iconProps = ((_b = consts_1.notificationStatusMapping[status]) !== null && _b !== void 0 ? _b : {}).iconProps;
+    var _b = mergedProps.status, status = _b === void 0 ? '' : _b;
+    var iconProps = ((_a = consts_1.notificationStatusMapping[status]) !== null && _a !== void 0 ? _a : {}).iconProps;
     return (react_1.default.createElement(icon_1.default, __assign({ className: "vui-notificationIcon", mr: 1, my: 0.5, ref: ref, size: "md" }, styles.icon, iconProps, props)));
 });
 exports.NotificationIcon.displayName = 'NotificationIcon';

package/notification/notificationText.d.ts

@@ -1,3 +1,4 @@
 import { TProps } from '../t';
+/** Displays text within the Notification. */
 export declare const NotificationText: import("../core").VuiComponent<"p", TProps>;
 export default NotificationText;

package/notification/notificationText.js

@@ -16,14 +16,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NotificationText = void 0;
 var react_1 = __importDefault(require("react"));
-var context_1 = require("./context");
 var core_1 = require("../core");
 var t_1 = __importDefault(require("../t"));
+var context_1 = require("./context");
+/** Displays text within the Notification. */
 exports.NotificationText = (0, core_1.vui)(function (props, ref) {
-    var _a;
-    var notificationProps = (_a = (0, context_1.useNotification)()) !== null && _a !== void 0 ? _a : {};
-    var mergedProps = __assign(__assign({}, notificationProps), props);
-    var styles = (0, core_1.useStyleConfig)('Notification', mergedProps);
+    var styles = (0, core_1.useStyleConfig)('Notification', __assign(__assign({}, (0, context_1.useNotification)()), props));
     return (react_1.default.createElement(t_1.default, __assign({ className: "vui-notificationText", flex: "1", lineHeight: "24px", minW: 0, py: 0.5, ref: ref }, styles.text, props)));
 });
 exports.NotificationText.displayName = 'NotificationText';

package/notification/notificationTitle.d.ts

@@ -1,3 +1,4 @@
 import { HeadingProps } from '../heading';
+/** Displays a title within the Notification. */
 export declare const NotificationTitle: import("../core").VuiComponent<"h6", HeadingProps>;
 export default NotificationTitle;

package/notification/notificationTitle.js

@@ -16,14 +16,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NotificationTitle = void 0;
 var react_1 = __importDefault(require("react"));
-var context_1 = require("./context");
 var core_1 = require("../core");
 var heading_1 = require("../heading");
+var context_1 = require("./context");
+/** Displays a title within the Notification. */
 exports.NotificationTitle = (0, core_1.vui)(function (props, ref) {
-    var _a;
-    var notificationProps = (_a = (0, context_1.useNotification)()) !== null && _a !== void 0 ? _a : {};
-    var mergedProps = __assign(__assign({}, notificationProps), props);
-    var styles = (0, core_1.useStyleConfig)('Notification', mergedProps);
+    var styles = (0, core_1.useStyleConfig)('Notification', __assign(__assign({}, (0, context_1.useNotification)()), props));
     return react_1.default.createElement(heading_1.H6, __assign({ className: "vui-notificationTitle", display: "inline-flex", ref: ref }, styles.title, props));
 });
 exports.NotificationTitle.displayName = 'NotificationTitle';

package/notification/theme.d.ts

@@ -13,6 +13,7 @@ declare function variantSubtle(props: Dict): {
     };
 };
 declare const _default: {
+    baseStyle: {};
     defaultProps: {
         colorScheme: string;
         variant: string;

package/notification/theme.js

@@ -23,6 +23,7 @@ function variantSubtle(props) {
     }
     return { container: container, button: button };
 }
+var baseStyle = {};
 var defaultProps = {
     colorScheme: 'blue',
     variant: 'subtle'
@@ -33,6 +34,7 @@ var variants = {
     subtle: variantSubtle
 };
 exports.default = {
+    baseStyle: baseStyle,
     defaultProps: defaultProps,
     parts: parts,
     sizes: sizes,

package/p/index.d.ts

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

package/p/index.js

@@ -15,6 +15,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = void 0;
 __exportStar(require("./p"), exports);
-__exportStar(require("./p.types"), exports);
 var p_1 = require("./p");
 Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(p_1).default; } });
+__exportStar(require("./p.types"), exports);

package/p/p.d.ts

@@ -1,5 +1,5 @@
 import { PProps } from './p.types';
-import { SystemProps } from '../system';
-export declare const PBase: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, SystemProps, never>;
+export declare const PBase: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, import("..").SystemProps, never>;
+/** Displays a paragraph of text. */
 export declare const P: import("../core").VuiComponent<"p", PProps>;
 export default P;

package/p/p.js

@@ -31,11 +31,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.P = exports.PBase = void 0;
 var react_1 = __importDefault(require("react"));
-var styled_components_1 = __importDefault(require("styled-components"));
 var core_1 = require("../core");
-var system_1 = require("../system");
 var utils_1 = require("../utils");
-exports.PBase = styled_components_1.default.p.withConfig((0, core_1.forwardPropConfig)(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n"], ["\n\t", "\n"])), system_1.system);
+exports.PBase = core_1.styled.pBox(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\ttransition-duration: fast;\n"], ["\n\ttransition-duration: fast;\n"
+    /** Displays a paragraph of text. */
+])));
+/** Displays a paragraph of text. */
 exports.P = (0, core_1.vui)(function (props, ref) {
     var _a = (0, core_1.omitThemingProps)(props), align = _a.align, casing = _a.casing, children = _a.children, className = _a.className, decoration = _a.decoration, text = _a.text, weight = _a.weight, rest = __rest(_a, ["align", "casing", "children", "className", "decoration", "text", "weight"]);
     var styles = (0, core_1.useStyleConfig)('P', props);
@@ -45,7 +46,7 @@ exports.P = (0, core_1.vui)(function (props, ref) {
         textDecoration: decoration,
         textTransform: casing
     });
-    return (react_1.default.createElement(exports.PBase, __assign({ className: (0, utils_1.cs)('vui-p', className), ref: ref, transitionDuration: "fast" }, styles, aliasedProps, rest), children !== null && children !== void 0 ? children : text));
+    return (react_1.default.createElement(exports.PBase, __assign({ className: (0, utils_1.cs)('vui-p', className), ref: ref }, styles, aliasedProps, rest), children !== null && children !== void 0 ? children : text));
 });
 exports.P.displayName = 'P';
 exports.default = exports.P;

package/p/p.types.d.ts

@@ -1,9 +1,14 @@
 import { SystemProps, TypographyProps } from '../system';
 import { ThemingProps } from '../theme';
-export interface PProps extends SystemProps, ThemingProps<'P'> {
+export declare type PProps = SystemProps & ThemingProps<'P'> & {
+    /** Alias for textAlign prop. @deprecated */
     align?: TypographyProps['textAlign'];
+    /** Alias for textTransform prop. @deprecated */
     casing?: TypographyProps['textTransform'];
+    /** Alias for textDecoration prop. @deprecated */
     decoration?: TypographyProps['textDecoration'];
+    /** Displays given text if no children are provided. */
     text?: number | string;
+    /** Alias for fontWeight prop. @deprecated */
     weight?: TypographyProps['fontWeight'];
-}
+};

package/p/theme.d.ts

@@ -1,4 +1,5 @@
 declare const _default: {
+    baseStyle: {};
     defaultProps: {
         size: string;
     };

package/p/theme.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+var baseStyle = {};
 var defaultProps = {
     size: 'md'
 };
@@ -27,6 +28,7 @@ var sizes = {
 };
 var variants = {};
 exports.default = {
+    baseStyle: baseStyle,
     defaultProps: defaultProps,
     sizes: sizes,
     variants: variants

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "Veracity UI React components library based on Styled Components and @xstyled",
   "main": "index.js",
   "author": "Veracity",

package/panel/index.d.ts

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

package/panel/index.js

@@ -15,6 +15,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = void 0;
 __exportStar(require("./panel"), exports);
-__exportStar(require("./panel.types"), exports);
 var panel_1 = require("./panel");
 Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(panel_1).default; } });
+__exportStar(require("./panel.types"), exports);

package/panel/panel.d.ts

@@ -1,3 +1,7 @@
 import { PanelProps } from './panel.types';
+/**
+ * Displays static or partially interactive content, such as text, images or buttons.
+ * Supports use cases of showing multiple segments of a page, each focusing on different data type or context.
+ */
 export declare const Panel: import("../core").VuiComponent<"div", PanelProps>;
 export default Panel;

package/panel/panel.js

@@ -30,6 +30,10 @@ var react_1 = __importDefault(require("react"));
 var box_1 = __importDefault(require("../box"));
 var core_1 = require("../core");
 var utils_1 = require("../utils");
+/**
+ * Displays static or partially interactive content, such as text, images or buttons.
+ * Supports use cases of showing multiple segments of a page, each focusing on different data type or context.
+ */
 exports.Panel = (0, core_1.vui)(function (props, ref) {
     var _a = (0, core_1.omitThemingProps)(props), className = _a.className, rest = __rest(_a, ["className"]);
     var styles = (0, core_1.useStyleConfig)('Panel', props);