@veracity/vui 0.6.2 → 0.7.0-beta.0

package/cjs/svg/svg.js

@@ -0,0 +1,119 @@
+"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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+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.Svg = exports.SvgBase = void 0;
+const react_1 = __importStar(require("react"));
+const core_1 = require("../core");
+const utils_1 = require("../utils");
+const cache_1 = __importDefault(require("./cache"));
+const helpers_1 = require("./helpers");
+exports.SvgBase = core_1.styled.svgBox(({ pathFill }) => {
+    return (0, core_1.css) `
+		${pathFill !== undefined &&
+        (Array.isArray(pathFill)
+            ? pathFill
+                .map((fill, index) => `
+					& > path:nth-child(${index + 1}) {
+						fill: ${fill};
+					}
+				`)
+                .join()
+            : `
+				& > path {
+					fill: ${pathFill};
+				}
+			`)}
+	`;
+});
+/**
+ * Displays an svg element based on provided children or 'src' prop.
+ * When using src, it loads the content from the given URL and saves in in cache.
+ * Then, renders the svg by parsing loaded content (Review potential for XSS due to innerHTML).
+ */
+exports.Svg = (0, core_1.vui)((props, ref) => {
+    const { children, className, src } = props, rest = __rest(props, ["children", "className", "src"]);
+    const [state, setState] = (0, react_1.useState)((0, helpers_1.initState)());
+    const isMountedRef = (0, react_1.useRef)(false);
+    const srcRef = (0, react_1.useRef)(src);
+    const { content = '', svgAttributes = {} } = state;
+    const innerHTML = !children ? { __html: content } : undefined;
+    (0, react_1.useEffect)(() => {
+        isMountedRef.current = true;
+        return () => {
+            isMountedRef.current = false;
+        };
+    }, []);
+    (0, react_1.useEffect)(() => {
+        srcRef.current = src;
+        function loadSvg(src) {
+            return __awaiter(this, void 0, void 0, function* () {
+                try {
+                    const response = yield cache_1.default.get(src);
+                    const content = (0, helpers_1.getSvgContent)(response);
+                    const svgEl = (0, helpers_1.stringToHTML)(response);
+                    const svgAttributes = (0, helpers_1.getAttributes)(svgEl);
+                    svgAttributes['data-src'] = src !== null && src !== void 0 ? src : '';
+                    // Update state only when requested 'src' and current 'src' are the same
+                    if (srcRef.current === src && isMountedRef.current) {
+                        setState({ content, svgAttributes });
+                    }
+                }
+                catch (error) {
+                    console.error(error); // eslint-disable-line no-console
+                    if (isMountedRef.current) {
+                        setState((0, helpers_1.initState)());
+                    }
+                }
+            });
+        }
+        src && loadSvg(src);
+    }, [src]);
+    return (react_1.default.createElement(exports.SvgBase, Object.assign({ className: (0, utils_1.cs)('vui-svg', className), dangerouslySetInnerHTML: innerHTML, ref: ref, xmlns: "http://www.w3.org/2000/svg" }, svgAttributes, rest), children));
+});
+exports.Svg.displayName = 'Svg';
+exports.default = exports.Svg;

package/cjs/switch/context.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { SwitchContext } from './switch.types';
+declare const SwitchProvider: import("react").Provider<SwitchContext>, useSwitch: () => SwitchContext;
+export { SwitchProvider, useSwitch };

package/cjs/switch/context.js

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

package/cjs/switch/index.js

@@ -0,0 +1,27 @@
+"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("./context"), exports);
+var switch_1 = require("./switch");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(switch_1).default; } });
+__exportStar(require("./switch"), exports);
+__exportStar(require("./switch.types"), exports);
+__exportStar(require("./switchButton"), exports);
+__exportStar(require("./switchLabel"), exports);

package/cjs/switch/switch.js

@@ -0,0 +1,92 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Switch = exports.SwitchBase = void 0;
+const react_1 = __importStar(require("react"));
+const core_1 = require("../core");
+const utils_1 = require("../utils");
+const context_1 = require("./context");
+const switchButton_1 = require("./switchButton");
+const switchLabel_1 = require("./switchLabel");
+exports.SwitchBase = core_1.styled.labelBox `
+	align-items: center;
+	cursor: pointer;
+	display: inline-flex;
+	line-height: normal;
+	width: fit-content;
+
+	&[aria-disabled='true'] {
+		cursor: not-allowed;
+
+		.vui-switchLabel {
+			color: disabled.color;
+		}
+	}
+`;
+/**
+ * Displays a toggle button with supporting text. Allows passing custom elements as side labels and inner labels.
+ * Forwards many relevant props to the innner input element. Exposes some props to the children via context.
+ */
+exports.Switch = (0, core_1.vui)((props, ref) => {
+    var _a;
+    const { button, checked, children, className, colorScheme, defaultChecked, disabled, id, innerLabelOff, innerLabelOn, inputProps, inputRef, labelLeft, labelRight, name, onBlur, onChange, onFocus, required, size, value, variant } = props, rest = __rest(props, ["button", "checked", "children", "className", "colorScheme", "defaultChecked", "disabled", "id", "innerLabelOff", "innerLabelOn", "inputProps", "inputRef", "labelLeft", "labelRight", "name", "onBlur", "onChange", "onFocus", "required", "size", "value", "variant"]);
+    const styles = (0, core_1.useStyleConfig)('Switch', props);
+    const context = (0, react_1.useMemo)(() => (0, utils_1.filterUndefined)({
+        checked,
+        colorScheme,
+        defaultChecked,
+        disabled,
+        name,
+        onBlur,
+        onChange,
+        onFocus,
+        required,
+        size,
+        value,
+        variant
+    }), [checked, colorScheme, defaultChecked, disabled, name, onBlur, onChange, onFocus, required, size, value, variant]);
+    const aliasedProps = (0, utils_1.filterUndefined)({
+        'aria-disabled': disabled
+    });
+    return (react_1.default.createElement(context_1.SwitchProvider, { value: context },
+        react_1.default.createElement(exports.SwitchBase, Object.assign({ className: (0, utils_1.cs)('vui-switch', className), ref: ref }, styles.container, aliasedProps, rest),
+            (0, utils_1.isReactText)(labelLeft) ? react_1.default.createElement(switchLabel_1.SwitchLabel, { mr: 1, text: labelLeft }) : labelLeft, (_a = children !== null && children !== void 0 ? children : button) !== null && _a !== void 0 ? _a : react_1.default.createElement(switchButton_1.SwitchButton, Object.assign({}, { id, innerLabelOff, innerLabelOn, inputProps, inputRef })),
+            (0, utils_1.isReactText)(labelRight) ? react_1.default.createElement(switchLabel_1.SwitchLabel, { ml: 1, text: labelRight }) : labelRight)));
+});
+exports.Switch.displayName = 'Switch';
+exports.Switch.Button = switchButton_1.SwitchButton;
+exports.Switch.Label = switchLabel_1.SwitchLabel;
+exports.default = exports.Switch;

package/cjs/switch/switchButton.js

@@ -0,0 +1,145 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SwitchButton = exports.SwitchButtonBase = void 0;
+const react_1 = __importStar(require("react"));
+const core_1 = require("../core");
+const utils_1 = require("../utils");
+const context_1 = require("./context");
+const SwitchInput = core_1.styled.inputBox `
+	cursor: inherit;
+	height: calc(100% + 10px);
+	left: -5px;
+	margin: 0;
+	opacity: 0;
+	padding: 0;
+	position: absolute;
+	top: -5px;
+	width: calc(100% + 10px);
+	z-index: 1;
+`;
+/** Circular element that moves along the track when toggled. */
+const SwitchThumb = core_1.styled.spanBox `
+	border-radius: round;
+	display: inline-flex;
+	flex-shrink: 0;
+	position: absolute;
+	transition-duration: fast;
+`;
+/** Track element along which the thumb moves when toggled. */
+const SwitchTrack = core_1.styled.spanBox `
+	align-items: center;
+	border-radius: round;
+	display: inline-flex;
+	flex: 1;
+	position: relative;
+	transition-duration: fast;
+`;
+exports.SwitchButtonBase = core_1.styled.spanBox `
+	color: white;
+	cursor: pointer;
+	display: inline-flex;
+	flex-shrink: 0;
+	position: relative;
+
+	&[aria-disabled='true'] {
+		cursor: not-allowed;
+
+		.vui-switchThumb {
+			background-color: disabled.color;
+		}
+
+		.vui-switchTrack {
+			// Using ring instead of border when disabled, because it's easier
+			--x-ring-color: var(--vui-colors-disabled-border);
+			background-color: disabled.bg;
+		}
+	}
+`;
+/**
+ * Controls the logic and visuals of multiple inner parts, such as input, track or thumb elements.
+ * Handles controlled and uncontrolled modes.
+ */
+exports.SwitchButton = (0, core_1.vui)((props, ref) => {
+    const mergedProps = Object.assign(Object.assign({}, (0, context_1.useSwitch)()), props);
+    const _a = (0, core_1.omitThemingProps)(mergedProps), { checked, className, defaultChecked, disabled, id, innerLabelOff, innerLabelOn, inputProps, inputRef, name, onBlur, onChange, onFocus, required, value } = _a, rest = __rest(_a, ["checked", "className", "defaultChecked", "disabled", "id", "innerLabelOff", "innerLabelOn", "inputProps", "inputRef", "name", "onBlur", "onChange", "onFocus", "required", "value"]);
+    const { current: isControlled } = (0, react_1.useRef)(checked !== undefined);
+    const [isChecked, setIsChecked] = (0, react_1.useState)(checked !== null && checked !== void 0 ? checked : defaultChecked);
+    const [isFocused, setIsFocused] = (0, react_1.useState)(false);
+    const styles = (0, core_1.useStyleConfig)('Switch', mergedProps);
+    const _b = styles.button, { thumb: thumbStyles, track: trackStyles } = _b, buttonStyles = __rest(_b, ["thumb", "track"]);
+    (0, react_1.useEffect)(() => {
+        isControlled && setIsChecked(checked);
+    }, [checked, isControlled]);
+    function handleOnBlur(e) {
+        setIsFocused(false);
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+    }
+    function handleOnChange(e) {
+        !isControlled && setIsChecked(e.target.checked);
+        onChange === null || onChange === void 0 ? void 0 : onChange(e);
+    }
+    function handleOnFocus(e) {
+        setIsFocused(true);
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+    }
+    const hDiff = (thumbStyles.h - trackStyles.h) / 2;
+    const thumbOffset = `calc(100% - ${Math.abs(hDiff - thumbStyles.h)}px)`;
+    const labelOffset = `${thumbStyles.h - hDiff + 4}px`;
+    const aliasedProps = (0, utils_1.filterUndefined)({
+        'aria-checked': isChecked ? true : false,
+        'aria-disabled': disabled,
+        'data-focused': isFocused ? true : false
+    });
+    const thumbAliasedProps = (0, utils_1.filterUndefined)({
+        left: isChecked ? thumbOffset : -hDiff,
+        ring: isFocused ? thumbStyles.ring : 0
+    });
+    const trackAliasedProps = (0, utils_1.filterUndefined)({
+        bg: isChecked ? trackStyles.bg : 'grey.50',
+        pl: isChecked ? 1 : labelOffset,
+        pr: isChecked ? labelOffset : 1,
+        ring: !disabled ? (isFocused ? trackStyles.ring : 0) : 1
+    });
+    return (react_1.default.createElement(exports.SwitchButtonBase, Object.assign({ className: (0, utils_1.cs)('vui-switchButton', className), ref: ref }, buttonStyles, aliasedProps, rest),
+        react_1.default.createElement(SwitchInput, Object.assign({ className: "vui-switchInput", onBlur: handleOnBlur, onChange: handleOnChange, onFocus: handleOnFocus, ref: inputRef, type: "checkbox" }, { checked, defaultChecked, disabled, id, name, required, value }, inputProps)),
+        react_1.default.createElement(SwitchTrack, Object.assign({ className: "vui-switchTrack" }, trackStyles, trackAliasedProps),
+            !isChecked && innerLabelOff,
+            react_1.default.createElement(SwitchThumb, Object.assign({ className: "vui-switchThumb" }, thumbStyles, thumbAliasedProps)),
+            isChecked && innerLabelOn)));
+});
+exports.SwitchButton.displayName = 'SwitchButton';
+exports.default = exports.SwitchButton;

package/cjs/switch/switchLabel.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.SwitchLabel = 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 label text within the Switch component. */
+exports.SwitchLabel = (0, core_1.vui)((props, ref) => {
+    const styles = (0, core_1.useStyleConfig)('Switch', Object.assign(Object.assign({}, (0, context_1.useSwitch)()), props));
+    return react_1.default.createElement(t_1.default, Object.assign({ className: "vui-switchLabel", display: "flex", ref: ref }, styles.label, props));
+});
+exports.SwitchLabel.displayName = 'SwitchLabel';
+exports.default = exports.SwitchLabel;

package/cjs/switch/theme.js

@@ -0,0 +1,88 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function sizeLg() {
+    const button = {
+        fontSize: 'md',
+        minW: 50,
+        thumb: {
+            h: 24,
+            w: 24
+        },
+        track: {
+            h: 28
+        }
+    };
+    const label = {
+        size: 'lg'
+    };
+    return { button, label };
+}
+function sizeMd() {
+    const button = {
+        fontSize: 'sm',
+        minW: 42,
+        thumb: {
+            h: 20,
+            w: 20
+        },
+        track: {
+            h: 24
+        }
+    };
+    const label = {
+        size: 'md'
+    };
+    return { button, label };
+}
+function sizeSm() {
+    const button = {
+        fontSize: 'xs',
+        minW: 34,
+        thumb: {
+            h: 16,
+            w: 16
+        },
+        track: {
+            h: 20
+        }
+    };
+    const label = {
+        size: 'sm'
+    };
+    return { button, label };
+}
+function variantContained(props) {
+    const { colorScheme: c } = props;
+    const button = {
+        thumb: {
+            bg: 'white'
+        },
+        track: {
+            bg: `${c}.80`,
+            ring: 3
+        }
+    };
+    return { button };
+}
+const baseStyle = {};
+const defaultProps = {
+    colorScheme: 'blue',
+    size: 'md',
+    variant: 'contained'
+};
+const parts = ['container', 'button', 'label'];
+const sizes = {
+    sm: sizeSm,
+    md: sizeMd,
+    lg: sizeLg
+};
+const variants = {
+    contained: variantContained
+};
+exports.default = {
+    baseStyle,
+    defaultProps,
+    parts,
+    sizes,
+    variants
+};

package/cjs/system/custom.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.wordBreak = exports.maxLines = exports.isTruncated = void 0;
+const styled_components_1 = require("@xstyled/styled-components");
+/** Provides styling to truncate single-line text. */
+exports.isTruncated = (0, styled_components_1.style)({
+    prop: 'isTruncated',
+    cssProperty: function () {
+        return {
+            overflow: 'hidden',
+            'text-overflow': 'ellipsis',
+            'white-space': 'nowrap'
+        };
+    },
+    states: {}
+});
+/** Provides styling to truncate multi-line text. */
+exports.maxLines = (0, styled_components_1.style)({
+    prop: 'maxLines',
+    cssProperty: function (value) {
+        return {
+            display: '-webkit-box',
+            overflow: 'hidden',
+            '-webkit-line-clamp': `${value}`,
+            '-webkit-box-orient': 'vertical'
+        };
+    },
+    states: {}
+});
+exports.wordBreak = (0, styled_components_1.style)({
+    prop: 'wordBreak'
+});

package/cjs/system/index.js

@@ -0,0 +1,31 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./animations"), exports);
+__exportStar(require("./backgrounds"), exports);
+__exportStar(require("./borders"), exports);
+__exportStar(require("./colors"), exports);
+__exportStar(require("./custom"), exports);
+__exportStar(require("./effects"), exports);
+__exportStar(require("./flexboxes"), exports);
+__exportStar(require("./interactivity"), exports);
+__exportStar(require("./layout"), exports);
+__exportStar(require("./sizing"), exports);
+__exportStar(require("./space"), exports);
+__exportStar(require("./system"), exports);
+__exportStar(require("./transforms"), exports);
+__exportStar(require("./transitions"), exports);
+__exportStar(require("./typography"), exports);

package/cjs/system/system.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.system = void 0;
+const styled_components_1 = require("@xstyled/styled-components");
+const custom_1 = require("./custom");
+exports.system = (0, styled_components_1.compose)(styled_components_1.animation, styled_components_1.backgroundColor, styled_components_1.borders, styled_components_1.color, styled_components_1.effects, styled_components_1.flexboxes, styled_components_1.flexboxGrids, styled_components_1.grids, styled_components_1.interactivity, custom_1.isTruncated, styled_components_1.layout, custom_1.maxLines, styled_components_1.sizing, styled_components_1.space, styled_components_1.tables, styled_components_1.transforms, styled_components_1.transitions, styled_components_1.typography, custom_1.wordBreak);
+exports.default = exports.system;

package/cjs/t/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("./t"), exports);
+var t_1 = require("./t");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(t_1).default; } });
+__exportStar(require("./t.types"), exports);

package/cjs/t/t.js

@@ -0,0 +1,39 @@
+"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.T = exports.TBase = void 0;
+const react_1 = __importDefault(require("react"));
+const core_1 = require("../core");
+const utils_1 = require("../utils");
+exports.TBase = core_1.styled.spanBox `
+	transition-duration: fast;
+`;
+/** Displays given text and allows easy styling. */
+exports.T = (0, core_1.vui)((props, ref) => {
+    const _a = (0, core_1.omitThemingProps)(props), { align, casing, centerV, children, className, decoration, text, weight } = _a, rest = __rest(_a, ["align", "casing", "centerV", "children", "className", "decoration", "text", "weight"]);
+    const styles = (0, core_1.useStyleConfig)('T', props);
+    const aliasedProps = (0, utils_1.filterUndefined)({
+        alignItems: centerV ? 'center' : undefined,
+        display: centerV ? 'inline-flex' : undefined,
+        fontWeight: weight,
+        textAlign: align,
+        textDecoration: decoration,
+        textTransform: casing
+    });
+    return (react_1.default.createElement(exports.TBase, Object.assign({ className: (0, utils_1.cs)('vui-t', className), ref: ref }, styles, aliasedProps, rest), children !== null && children !== void 0 ? children : text));
+});
+exports.T.displayName = 'T';
+exports.default = exports.T;

package/cjs/t/theme.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const baseStyle = {};
+const defaultProps = {
+    size: 'md'
+};
+const sizes = {
+    xs: {
+        fontSize: 'xs'
+    },
+    sm: {
+        fontSize: 'sm'
+    },
+    md: {
+        fontSize: 'md'
+    },
+    lg: {
+        fontSize: 'lg'
+    }
+};
+const variants = {};
+exports.default = {
+    baseStyle,
+    defaultProps,
+    sizes,
+    variants
+};