@veracity/vui 0.6.1 → 0.7.0-beta.0

package/cjs/avatar/avatar.js

@@ -0,0 +1,58 @@
+"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.Avatar = exports.AvatarBase = void 0;
+const react_1 = __importDefault(require("react"));
+const core_1 = require("../core");
+const icon_1 = __importDefault(require("../icon"));
+const image_1 = __importDefault(require("../image"));
+const utils_1 = require("../utils");
+const helpers_1 = require("./helpers");
+exports.AvatarBase = core_1.styled.spanBox `
+	align-items: center;
+	display: inline-flex;
+	flex-shrink: 0;
+	font-weight: medium;
+	justify-content: center;
+	line-height: normal;
+	outline: none;
+	overflow: hidden;
+	transition-duration: fast;
+
+	&:focus {
+		border-color: transparent;
+	}
+`;
+/** Displays user data, such as name initials or profile image. */
+exports.Avatar = (0, core_1.vui)((props, ref) => {
+    const _a = (0, core_1.omitThemingProps)(props), { children, className, getInitials = helpers_1.defaultGetInitials, icon, isInteractive = props.onClick !== undefined, isSquare, name = '', src } = _a, rest = __rest(_a, ["children", "className", "getInitials", "icon", "isInteractive", "isSquare", "name", "src"]);
+    const _b = (0, core_1.useStyleConfig)('Avatar', props), { activeBg, h, hoverBg, iconSize } = _b, styles = __rest(_b, ["activeBg", "h", "hoverBg", "iconSize"]);
+    const borderRadius = isSquare ? 'lg' : '50%';
+    const initials = getInitials(name);
+    const interactiveProps = isInteractive
+        ? {
+            cursor: 'pointer',
+            hoverBg,
+            activeBg,
+            focusRing: 3,
+            tabIndex: 0,
+            userSelect: 'none'
+        }
+        : {};
+    return (react_1.default.createElement(exports.AvatarBase, Object.assign({ borderRadius: borderRadius, className: (0, utils_1.cs)('vui-avatar', className), h: h, ref: ref, w: h }, styles, interactiveProps, rest), children ? (children) : src ? (react_1.default.createElement(image_1.default, Object.assign({}, { borderRadius, src }))) : icon ? (react_1.default.createElement(icon_1.default, { name: icon, size: iconSize })) : initials ? (initials) : null));
+});
+exports.Avatar.displayName = 'Avatar';
+exports.default = exports.Avatar;

package/cjs/avatar/helpers.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultGetInitials = void 0;
+/** Gets initials from the name for the Avatar. */
+function defaultGetInitials(name = '') {
+    const [first = '', last = ''] = name.split(' ');
+    return `${first.charAt(0)}${last.charAt(0)}`.toUpperCase();
+}
+exports.defaultGetInitials = defaultGetInitials;

package/cjs/avatar/index.js

@@ -0,0 +1,24 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+__exportStar(require("./avatar"), exports);
+var avatar_1 = require("./avatar");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(avatar_1).default; } });
+__exportStar(require("./avatar.types"), exports);

package/cjs/avatar/theme.js

@@ -0,0 +1,88 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function variantSolid(props) {
+    const { colorScheme: c } = props;
+    const styles = {
+        hoverBg: `${c}.90`,
+        activeBg: `${c}.100`,
+        bg: `${c}.80`,
+        color: 'white'
+    };
+    // Special cases
+    if (c === 'prussian') {
+        styles.activeBg = 'prussian.50';
+        styles.hoverBg = 'prussian.60';
+    }
+    if (c === 'yellow') {
+        styles.hoverBg = `${c}.80`;
+        styles.activeBg = `${c}.90`;
+        styles.bg = `${c}.70`;
+    }
+    return styles;
+}
+function variantSubtle(props) {
+    const { colorScheme: c } = props;
+    const colors = {
+        hoverBg: `${c}.30`,
+        activeBg: `${c}.40`,
+        bg: `${c}.20`,
+        color: `${c}.80`
+    };
+    // Special cases
+    if (c === 'green') {
+        colors.color = `${c}.90`;
+    }
+    if (c === 'grey') {
+        colors.color = `prussian.80`;
+    }
+    if (c === 'red') {
+        colors.color = `${c}.90`;
+    }
+    if (c === 'yellow') {
+        colors.color = `${c}.100`;
+    }
+    return colors;
+}
+const baseStyle = {};
+const defaultProps = {
+    colorScheme: 'blue',
+    size: 'md',
+    variant: 'subtle'
+};
+const sizes = {
+    xs: {
+        fontSize: 'xs',
+        h: 24,
+        iconSize: 'xs'
+    },
+    sm: {
+        fontSize: 'sm',
+        h: 32,
+        iconSize: 'sm'
+    },
+    md: {
+        fontSize: 'md',
+        h: 40,
+        iconSize: 'md'
+    },
+    lg: {
+        fontSize: 'lg',
+        h: 48,
+        iconSize: 'lg'
+    },
+    xl: {
+        fontSize: 'lg',
+        h: 64,
+        iconSize: 'lg'
+    }
+};
+const variants = {
+    solid: variantSolid,
+    subtle: variantSubtle
+};
+exports.default = {
+    baseStyle,
+    defaultProps,
+    sizes,
+    variants
+};

package/cjs/box/box.js

@@ -0,0 +1,45 @@
+"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.Box = exports.BoxBase = void 0;
+const react_1 = __importDefault(require("react"));
+const core_1 = require("../core");
+const utils_1 = require("../utils");
+exports.BoxBase = core_1.styled.divBox `
+	display: flex;
+	min-width: 0;
+	transition-duration: normal;
+`;
+/** Organizes content layout into columns or rows with easy centering. */
+exports.Box = (0, core_1.vui)((props, ref) => {
+    const _a = (0, core_1.omitThemingProps)(props), { align, center, centerH, centerV, className, column, direction, hoverShadow, justify, radius, shadow, wrap } = _a, rest = __rest(_a, ["align", "center", "centerH", "centerV", "className", "column", "direction", "hoverShadow", "justify", "radius", "shadow", "wrap"]);
+    const styles = (0, core_1.useStyleConfig)('Box', props);
+    const alignItems = center || (column ? centerH : centerV) ? 'center' : undefined;
+    const flexDirection = column ? 'column' : undefined;
+    const justifyContent = center || (column ? centerV : centerH) ? 'center' : undefined;
+    const aliasedProps = (0, utils_1.filterUndefined)({
+        alignItems: align !== null && align !== void 0 ? align : alignItems,
+        borderRadius: radius,
+        boxShadow: shadow,
+        flexDirection: direction !== null && direction !== void 0 ? direction : flexDirection,
+        flexWrap: wrap ? 'wrap' : undefined,
+        hoverBoxShadow: hoverShadow,
+        justifyContent: justify !== null && justify !== void 0 ? justify : justifyContent
+    });
+    return react_1.default.createElement(exports.BoxBase, Object.assign({ className: (0, utils_1.cs)('vui-box', className), ref: ref }, styles, aliasedProps, rest));
+});
+exports.Box.displayName = 'Box';
+exports.default = exports.Box;

package/cjs/box/index.js

@@ -0,0 +1,24 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+__exportStar(require("./box"), exports);
+var box_1 = require("./box");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(box_1).default; } });
+__exportStar(require("./box.types"), exports);

package/cjs/box/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/cjs/button/button.js

@@ -0,0 +1,139 @@
+"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.Button = exports.ButtonBase = void 0;
+const react_1 = __importStar(require("react"));
+const context_1 = require("../buttonGroup/context");
+const core_1 = require("../core");
+const utils_1 = require("../utils");
+const buttonIcon_1 = __importDefault(require("./buttonIcon"));
+const buttonText_1 = __importDefault(require("./buttonText"));
+const consts_1 = require("./consts");
+const context_2 = require("./context");
+const ContentWrapper = core_1.styled.span `
+	visibility: hidden;
+`;
+const StateWrapper = core_1.styled.span `
+	bottom: 0;
+	display: flex;
+	left: 0;
+	position: absolute;
+	right: 0;
+	top: 0;
+`;
+exports.ButtonBase = core_1.styled.buttonBox `
+	align-items: center;
+	border-radius: md;
+	display: inline-flex;
+	flex-shrink: 0;
+	font-weight: medium;
+	justify-content: center;
+	line-height: normal;
+	overflow: hidden;
+	position: relative;
+	transition-duration: fast;
+	user-select: none;
+	width: fit-content;
+
+	&:focus,
+	&:focus:hover {
+		border-color: transparent;
+		outline: none;
+		z-index: 1;
+	}
+
+	&[aria-disabled='true'],
+	&[aria-disabled='true']:hover {
+		background-color: disabled.bg;
+		border-color: ${p => (p.variant === 'outlined' ? core_1.th.color('disabled.border') : core_1.th.color('disabled.bg'))};
+		color: disabled.color;
+		cursor: not-allowed;
+	}
+`;
+/**
+ * Triggers given actions on click. Supports multiple states, sizes and variant.
+ * Comes with additional props for extra behavior, like loading, disabled or elevated.
+ * Exposes some props to the children via context.
+ */
+exports.Button = (0, core_1.vui)((props, ref) => {
+    var _a, _b, _c, _d;
+    const buttonGroupProps = (0, context_1.useButtonGroup)();
+    const mergedProps = Object.assign(Object.assign({}, buttonGroupProps), props);
+    const { borderWidth: borderWidthProp, children, className, colorScheme: colorSchemeProp, disabled, icon, iconLeft, iconRight, isElevated, isFullWidth, isLoading, // eslint-disable-line
+    isRound, isSplit, isTruncated, size, state = props.isLoading ? 'loading' : '', stateMapping, text, variant } = mergedProps, rest = __rest(mergedProps, ["borderWidth", "children", "className", "colorScheme", "disabled", "icon", "iconLeft", "iconRight", "isElevated", "isFullWidth", "isLoading", "isRound", "isSplit", "isTruncated", "size", "state", "stateMapping", "text", "variant"]);
+    const hasState = Boolean(state) && state !== 'idle';
+    const states = Object.assign(Object.assign({}, consts_1.buttonStateMapping), stateMapping);
+    const _e = (_a = states[state]) !== null && _a !== void 0 ? _a : {}, { iconProps: stateIconProps } = _e, stateProps = __rest(_e, ["iconProps"]);
+    const colorScheme = (0, utils_1.filterUndefined)({
+        colorScheme: (_c = (_b = states[state]) === null || _b === void 0 ? void 0 : _b.colorScheme) !== null && _c !== void 0 ? _c : colorSchemeProp
+    });
+    const styles = (0, core_1.useStyleConfig)('Button', Object.assign(Object.assign({}, mergedProps), colorScheme));
+    const _f = styles.container, { borderWidth, h, spaceX = 0 } = _f, buttonStyles = __rest(_f, ["borderWidth", "h", "spaceX"]);
+    const context = (0, react_1.useMemo)(() => (0, utils_1.filterUndefined)({ colorScheme, disabled, size, variant }), [colorScheme, disabled, size, variant]);
+    const Content = hasState ? ContentWrapper : react_1.default.Fragment;
+    // Apply more space for text and less space for icons
+    const border = (_d = borderWidthProp !== null && borderWidthProp !== void 0 ? borderWidthProp : borderWidth) !== null && _d !== void 0 ? _d : 0;
+    const spaceXItem = spaceX - border;
+    const spaceXText = spaceX * 2 - border;
+    const iconLeftMr = spaceXItem + 1 + 'px';
+    const iconRightMl = isSplit ? 'auto' : spaceXItem + 1 + 'px';
+    const pl = (icon || iconLeft ? spaceXItem : spaceXText) + 'px';
+    const pr = (icon || iconRight ? spaceXItem : spaceXText) + 'px';
+    const aliasedProps = (0, utils_1.filterUndefined)({
+        'aria-disabled': disabled,
+        borderRadius: isRound ? h / 2 : undefined,
+        boxShadow: isElevated ? '2' : undefined,
+        minW: icon ? 0 : undefined,
+        pointerEvents: hasState ? 'none' : undefined,
+        w: isFullWidth ? '100%' : undefined
+    });
+    return (react_1.default.createElement(context_2.ButtonProvider, { value: context },
+        react_1.default.createElement(exports.ButtonBase, Object.assign({ borderWidth: border, className: (0, utils_1.cs)('vui-button', className), disabled: disabled, focusRing: 3, h: h, pl: pl, pr: pr, ref: ref, type: "button", variant: variant }, buttonStyles, aliasedProps, rest),
+            hasState && (react_1.default.createElement(StateWrapper, Object.assign({ onClick: e => e.stopPropagation() }, stateProps),
+                react_1.default.createElement(buttonIcon_1.default, Object.assign({ m: "auto" }, stateIconProps)))),
+            react_1.default.createElement(Content, null,
+                (0, utils_1.isString)(icon) ? react_1.default.createElement(buttonIcon_1.default, { name: icon }) : icon,
+                !icon && (react_1.default.createElement(react_1.default.Fragment, null,
+                    (0, utils_1.isString)(iconLeft) ? react_1.default.createElement(buttonIcon_1.default, { mr: iconLeftMr, name: iconLeft }) : iconLeft, children !== null && children !== void 0 ? children : ((0, utils_1.isReactText)(text) ? react_1.default.createElement(buttonText_1.default, Object.assign({}, { isTruncated, text })) : text),
+                    (0, utils_1.isString)(iconRight) ? react_1.default.createElement(buttonIcon_1.default, { ml: iconRightMl, name: iconRight }) : iconRight))))));
+});
+exports.Button.displayName = 'Button';
+exports.Button.Icon = buttonIcon_1.default;
+exports.Button.Text = buttonText_1.default;
+exports.default = exports.Button;

package/cjs/button/buttonIcon.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const core_1 = require("../core");
+const icon_1 = __importDefault(require("../icon"));
+const context_1 = require("./context");
+/** Displays an icon within the Button. */
+exports.ButtonIcon = (0, core_1.vui)((props, ref) => {
+    const styles = (0, core_1.useStyleConfig)('Button', Object.assign(Object.assign({}, (0, context_1.useButton)()), props));
+    return react_1.default.createElement(icon_1.default, Object.assign({ className: "vui-buttonIcon", ref: ref }, styles.icon, props));
+});
+exports.ButtonIcon.displayName = 'ButtonIcon';
+exports.default = exports.ButtonIcon;

package/cjs/button/buttonText.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonText = void 0;
+const react_1 = __importDefault(require("react"));
+const core_1 = require("../core");
+const t_1 = __importDefault(require("../t"));
+const context_1 = require("./context");
+/** Displays the text label of the button. */
+exports.ButtonText = (0, core_1.vui)((props, ref) => {
+    const styles = (0, core_1.useStyleConfig)('Button', Object.assign(Object.assign({}, (0, context_1.useButton)()), props));
+    return react_1.default.createElement(t_1.default, Object.assign({ className: "vui-buttonText", fontSize: "inherit", ref: ref }, styles.text, props));
+});
+exports.ButtonText.displayName = 'ButtonText';
+exports.default = exports.ButtonText;

package/cjs/button/buttons.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextButton = exports.LineButton = exports.IconButton = exports.DangerButton = exports.CTAButton = exports.CloseButton = exports.BackButton = exports.AppButton = void 0;
+const react_1 = __importDefault(require("react"));
+const core_1 = require("../core");
+const button_1 = __importDefault(require("./button"));
+exports.AppButton = (0, core_1.vui)((props, ref) => (react_1.default.createElement(button_1.default, Object.assign({ colorScheme: "blue", ref: ref, variant: "solid" }, props))));
+exports.BackButton = (0, core_1.vui)((props, ref) => (react_1.default.createElement(exports.IconButton, Object.assign({ colorScheme: "blue", icon: "falArrowLeft", ref: ref, variant: "text" }, props))));
+exports.CloseButton = (0, core_1.vui)((props, ref) => (react_1.default.createElement(exports.IconButton, Object.assign({ colorScheme: "blue", icon: "falTimes", ref: ref, variant: "text" }, props))));
+exports.CTAButton = (0, core_1.vui)((props, ref) => (react_1.default.createElement(button_1.default, Object.assign({ colorScheme: "green", ref: ref, variant: "solid" }, props))));
+exports.DangerButton = (0, core_1.vui)((props, ref) => (react_1.default.createElement(button_1.default, Object.assign({ colorScheme: "red", ref: ref, variant: "solid" }, props))));
+exports.IconButton = (0, core_1.vui)((props, ref) => (react_1.default.createElement(button_1.default, Object.assign({ colorScheme: "blue", ref: ref, variant: "text" }, props))));
+exports.LineButton = (0, core_1.vui)((props, ref) => (react_1.default.createElement(button_1.default, Object.assign({ colorScheme: "blue", ref: ref, variant: "outlined" }, props))));
+exports.TextButton = (0, core_1.vui)((props, ref) => (react_1.default.createElement(button_1.default, Object.assign({ colorScheme: "blue", ref: ref, variant: "text" }, props))));

package/cjs/button/context.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { Dict } from '../utils';
+declare const ButtonProvider: import("react").Provider<Dict<any>>, useButton: () => Dict<any>;
+export { ButtonProvider, useButton };

package/cjs/button/context.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useButton = exports.ButtonProvider = void 0;
+const utils_1 = require("../utils");
+const [ButtonProvider, useButton] = (0, utils_1.createContext)({ isOptional: true });
+exports.ButtonProvider = ButtonProvider;
+exports.useButton = useButton;

package/cjs/button/index.js

@@ -0,0 +1,28 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+__exportStar(require("./button"), exports);
+var button_1 = require("./button");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(button_1).default; } });
+__exportStar(require("./button.types"), exports);
+__exportStar(require("./buttonIcon"), exports);
+__exportStar(require("./buttons"), exports);
+__exportStar(require("./buttonText"), exports);
+__exportStar(require("./context"), exports);

package/cjs/button/theme.js

@@ -0,0 +1,138 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function variantOutlined(props) {
+    var _a;
+    const { colorScheme: c } = props;
+    const container = Object.assign(Object.assign({}, (_a = variantText(props)) === null || _a === void 0 ? void 0 : _a.container), { borderColor: `${c}.80`, hoverBorderColor: `${c}.80`, focusRing: 3 });
+    return { container };
+}
+function variantSolid(props) {
+    const { colorScheme: c } = props;
+    const container = {
+        hoverBg: `${c}.90`,
+        hoverBorderColor: `${c}.90`,
+        activeBg: `${c}.100`,
+        bg: `${c}.80`,
+        borderColor: `${c}.80`,
+        borderWidth: 1,
+        color: 'white'
+    };
+    // Special cases
+    if (c === 'prussian') {
+        container.activeBg = 'prussian.50';
+        container.hoverBg = 'prussian.60';
+        container.hoverBorderColor = 'prussian.60';
+    }
+    return { container };
+}
+function variantSubtle(props) {
+    const { colorScheme: c } = props;
+    const container = {
+        hoverBg: `${c}.30`,
+        hoverBorderColor: `${c}.30`,
+        activeBg: `${c}.40`,
+        bg: `${c}.20`,
+        borderColor: `${c}.20`,
+        borderWidth: 1,
+        color: `${c}.90`
+    };
+    // Special cases
+    if (c === 'prussian') {
+        container.activeBg = 'blue.40';
+        container.hoverBg = 'blue.30';
+        container.hoverBorderColor = 'blue.30';
+        container.bg = 'blue.20';
+        container.borderColor = 'blue.20';
+    }
+    return { container };
+}
+function variantText(props) {
+    const { colorScheme: c } = props;
+    const container = {
+        hoverBg: `${c}.20`,
+        hoverBorderColor: `${c}.20`,
+        activeBg: `${c}.30`,
+        bg: 'transparent',
+        borderColor: 'transparent',
+        borderWidth: 1,
+        color: `${c}.80`,
+        focusRing: 2
+    };
+    // Special cases
+    if (c === 'prussian') {
+        container.activeBg = 'blue.30';
+        container.hoverBg = 'blue.20';
+        container.hoverBorderColor = 'blue.20';
+    }
+    return { container };
+}
+const baseStyle = {};
+const defaultProps = {
+    colorScheme: 'prussian',
+    size: 'md',
+    variant: 'solid'
+};
+const parts = ['container', 'icon', 'text'];
+const sizes = {
+    xs: {
+        container: {
+            fontSize: 'sm',
+            h: 24,
+            minW: 48,
+            spaceX: 4
+        },
+        icon: {
+            size: 'xs'
+        },
+        text: {}
+    },
+    sm: {
+        container: {
+            fontSize: 'sm',
+            h: 32,
+            minW: 64,
+            spaceX: 6
+        },
+        icon: {
+            size: 'sm'
+        },
+        text: {}
+    },
+    md: {
+        container: {
+            fontSize: 'md',
+            h: 40,
+            minW: 80,
+            spaceX: 8
+        },
+        icon: {
+            size: 'md'
+        },
+        text: {}
+    },
+    lg: {
+        container: {
+            fontSize: 'lg',
+            h: 48,
+            minW: 96,
+            spaceX: 10
+        },
+        icon: {
+            size: 'lg'
+        },
+        text: {}
+    }
+};
+const variants = {
+    outlined: variantOutlined,
+    solid: variantSolid,
+    subtle: variantSubtle,
+    text: variantText
+};
+exports.default = {
+    baseStyle,
+    defaultProps,
+    parts,
+    sizes,
+    variants
+};