@veracity/vui 0.0.1 → 0.0.3

package/checkbox/checkbox.js

@@ -0,0 +1,111 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    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)
+        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 __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Checkbox = exports.CheckboxControl = exports.CheckboxBase = exports.CheckboxInput = void 0;
+var styled_components_1 = require("@xstyled/styled-components");
+var react_1 = __importStar(require("react"));
+var styled_components_2 = __importDefault(require("styled-components"));
+var context_1 = require("./context");
+var core_1 = require("../core");
+var icon_1 = __importDefault(require("../icon"));
+var t_1 = __importDefault(require("../t"));
+var utils_1 = require("../utils");
+var checkboxGenerator = styled_components_1.compose(styled_components_1.backgroundColor, styled_components_1.color, styled_components_1.flexboxes, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions);
+var controlGenerator = styled_components_1.compose(styled_components_1.borders, styled_components_1.backgroundColor, styled_components_1.color, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions);
+exports.CheckboxInput = styled_components_2.default.input(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tcursor: inherit;\n\theight: 100%;\n\tleft: 0;\n\tmargin: 0;\n\topacity: 0;\n\tpadding: 0;\n\tposition: absolute;\n\ttop: 0;\n\twidth: 100%;\n\tz-index: 1;\n"], ["\n\tcursor: inherit;\n\theight: 100%;\n\tleft: 0;\n\tmargin: 0;\n\topacity: 0;\n\tpadding: 0;\n\tposition: absolute;\n\ttop: 0;\n\twidth: 100%;\n\tz-index: 1;\n"])));
+exports.CheckboxBase = styled_components_2.default.label.withConfig({
+    shouldForwardProp: core_1.shouldForwardProp(checkboxGenerator.meta.props)
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\talign-items: center;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\ttransition: all 0s ease-in-out;\n\twidth: fit-content;\n\n\t:hover .vui-checkboxControl {\n\t\tcolor: ", ";\n\t}\n\n\t&.disabled {\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\n\t\t.vui-checkboxControl {\n\t\t\tcolor: var(--vui-colors-disabled-font);\n\t\t}\n\t}\n\n\t", "\n"], ["\n\talign-items: center;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\ttransition: all 0s ease-in-out;\n\twidth: fit-content;\n\n\t:hover .vui-checkboxControl {\n\t\tcolor: ", ";\n\t}\n\n\t&.disabled {\n\t\tcolor: var(--vui-colors-disabled-font);\n\t\tcursor: not-allowed;\n\n\t\t.vui-checkboxControl {\n\t\t\tcolor: var(--vui-colors-disabled-font);\n\t\t}\n\t}\n\n\t", "\n"])), function (p) { return core_1.th('colors', p.controlHoverColor)(p); }, checkboxGenerator);
+exports.CheckboxControl = styled_components_2.default.span.withConfig({
+    shouldForwardProp: core_1.shouldForwardProp(controlGenerator.meta.props)
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tposition: relative;\n\n\t", "\n"], ["\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\tposition: relative;\n\n\t", "\n"])), controlGenerator);
+exports.Checkbox = core_1.forwardRef(function (props, ref) {
+    var checkboxGroupProps = context_1.useCheckboxGroup();
+    var mergedProps = __assign(__assign({}, checkboxGroupProps), props);
+    var _a = core_1.omitThemingProps(mergedProps), checked = _a.checked, children = _a.children, className = _a.className, defaultChecked = _a.defaultChecked, disabled = _a.disabled, _b = _a.icon, iconProp = _b === void 0 ? 'cuiCheckboxUnselected' : _b, _c = _a.iconChecked, iconChecked = _c === void 0 ? 'cuiCheckboxSelected' : _c, _d = _a.iconIndeterminate, iconIndeterminate = _d === void 0 ? 'cuiCheckboxIndeterminate' : _d, inputProps = _a.inputProps, inputRef = _a.inputRef, isIndeterminate = _a.isIndeterminate, label = _a.label, name = _a.name, onChange = _a.onChange, required = _a.required, value = _a.value, rest = __rest(_a, ["checked", "children", "className", "defaultChecked", "disabled", "icon", "iconChecked", "iconIndeterminate", "inputProps", "inputRef", "isIndeterminate", "label", "name", "onChange", "required", "value"]);
+    var _e = __read(react_1.useState(defaultChecked), 2), isChecked = _e[0], setIsChecked = _e[1];
+    var styles = core_1.useStyleConfig('Checkbox', mergedProps);
+    var _f = styles.control, controlColor = _f.color, hoverColor = _f.hoverColor, controlStyles = __rest(_f, ["color", "hoverColor"]);
+    react_1.useEffect(function () {
+        checked !== undefined && setIsChecked(checked);
+    }, [checked]);
+    var isFilled = isChecked || isIndeterminate;
+    var icon = isIndeterminate ? iconIndeterminate : isChecked ? iconChecked : iconProp;
+    var controlMr = children || label ? 1 : 0;
+    var color = isFilled ? controlColor : 'grey.50';
+    var controlHoverColor = isFilled ? hoverColor : 'grey.90';
+    function handleOnChange(e) {
+        setIsChecked(e.target.checked);
+        onChange === null || onChange === void 0 ? void 0 : onChange(e);
+    }
+    return (react_1.default.createElement(exports.CheckboxBase, __assign({ className: utils_1.cs('vui-checkbox', disabled && 'disabled', className), controlHoverColor: controlHoverColor, ref: ref }, styles.container, rest),
+        react_1.default.createElement(exports.CheckboxControl, __assign({ borderRadius: "sm", className: "vui-checkboxControl", color: color, focusWithinRing: 3, mr: controlMr, transitionDuration: "fast" }, controlStyles),
+            react_1.default.createElement(exports.CheckboxInput, __assign({ className: "vui-checkboxInput", onChange: handleOnChange, ref: inputRef, type: "checkbox" }, { checked: checked, defaultChecked: defaultChecked, disabled: disabled, name: name, required: required, value: value }, inputProps)),
+            react_1.default.createElement(icon_1.default, { h: "100%", icon: icon, w: "100%" })), children !== null && children !== void 0 ? children : (label && (react_1.default.createElement(t_1.default, __assign({ className: "vui-checkboxLabel" }, styles.label), label)))));
+});
+exports.Checkbox.displayName = 'Checkbox';
+exports.default = exports.Checkbox;
+var templateObject_1, templateObject_2, templateObject_3;

package/checkbox/checkbox.types.d.ts

@@ -0,0 +1,25 @@
+import { HTMLAttributes } from 'react';
+import { IconProp } from '../icon';
+import { BackgroundColorProps, BordersProps, FlexboxesProps, SizingProps, SpaceProps, TransitionsProps } from '../system';
+import { ThemingProps } from '../theme';
+export interface CheckboxProps extends Omit<HTMLAttributes<HTMLLabelElement>, 'onChange'>, CheckboxStyleProps, ThemingProps<'Checkbox'> {
+    checked?: boolean;
+    colorScheme?: 'blue' | 'prussian';
+    disabled?: boolean;
+    icon?: IconProp;
+    iconChecked?: IconProp;
+    iconIndeterminate?: IconProp;
+    inputProps?: HTMLAttributes<HTMLInputElement>;
+    inputRef?: React.MutableRefObject<HTMLInputElement | null> | null;
+    isIndeterminate?: boolean;
+    label?: string;
+    name?: string;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    required?: boolean;
+    value?: number | string;
+}
+export interface CheckboxControlStyleProps extends BackgroundColorProps, BordersProps, SizingProps, SpaceProps, TransitionsProps {
+}
+export interface CheckboxStyleProps extends BackgroundColorProps, FlexboxesProps, SizingProps, SpaceProps, TransitionsProps {
+    controlHoverColor?: string;
+}

package/checkbox/checkbox.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/checkbox/checkboxGroup.d.ts

@@ -0,0 +1,6 @@
+import { CheckboxGroupProps, CheckboxGroupStyleProps } from './checkboxGroup.types';
+export declare const CheckboxGroupBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    [x: string]: {};
+} & CheckboxGroupStyleProps, never>;
+export declare const CheckboxGroup: import("styled-components").StyledComponent<"div", never, CheckboxGroupProps, never>;
+export default CheckboxGroup;

package/checkbox/checkboxGroup.js

@@ -0,0 +1,80 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    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)
+        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.CheckboxGroup = exports.CheckboxGroupBase = void 0;
+var styled_components_1 = require("@xstyled/styled-components");
+var react_1 = __importStar(require("react"));
+var styled_components_2 = __importDefault(require("styled-components"));
+var context_1 = require("./context");
+var core_1 = require("../core");
+var utils_1 = require("../utils");
+var generator = styled_components_1.compose(styled_components_1.flexboxes, styled_components_1.sizing, styled_components_1.space);
+exports.CheckboxGroupBase = styled_components_2.default.div.withConfig({
+    shouldForwardProp: core_1.shouldForwardProp(generator.meta.props)
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: flex;\n\tflex-direction: column;\n\n\t", "\n"], ["\n\tdisplay: flex;\n\tflex-direction: column;\n\n\t", "\n"])), generator);
+exports.CheckboxGroup = core_1.forwardRef(function (props, ref) {
+    var className = props.className, colorScheme = props.colorScheme, disabled = props.disabled, name = props.name, onChange = props.onChange, row = props.row, size = props.size, variant = props.variant, rest = __rest(props, ["className", "colorScheme", "disabled", "name", "onChange", "row", "size", "variant"]);
+    var context = react_1.useMemo(function () { return utils_1.filterUndefined({ colorScheme: colorScheme, disabled: disabled, name: name, onChange: onChange, size: size, variant: variant }); }, [
+        colorScheme,
+        disabled,
+        name,
+        onChange,
+        size,
+        variant
+    ]);
+    var aliasedProps = utils_1.filterUndefined({
+        flexDirection: row ? 'row' : undefined
+    });
+    return (react_1.default.createElement(context_1.CheckboxGroupProvider, { value: context },
+        react_1.default.createElement(exports.CheckboxGroupBase, __assign({ className: utils_1.cs('vui-checkboxGroup', className), ref: ref }, aliasedProps, rest))));
+});
+exports.CheckboxGroup.displayName = 'CheckboxGroup';
+exports.default = exports.CheckboxGroup;
+var templateObject_1;

package/checkbox/checkboxGroup.types.d.ts

@@ -0,0 +1,12 @@
+import { HTMLAttributes } from 'react';
+import { FlexboxesProps, SizingProps, SpaceProps } from '../system';
+import { ThemingProps } from '../theme';
+export interface CheckboxGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'>, CheckboxGroupStyleProps, ThemingProps<'Checkbox'> {
+    colorScheme?: 'blue' | 'prussian';
+    disabled?: boolean;
+    name?: string;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    row?: boolean;
+}
+export interface CheckboxGroupStyleProps extends FlexboxesProps, SizingProps, SpaceProps {
+}

package/checkbox/checkboxGroup.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/checkbox/context.d.ts

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

package/checkbox/context.js

@@ -0,0 +1,23 @@
+"use strict";
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCheckboxGroup = exports.CheckboxGroupProvider = void 0;
+var core_1 = require("../core");
+var _a = __read(core_1.createContext({ isOptional: true }), 2), CheckboxGroupProvider = _a[0], useCheckboxGroup = _a[1];
+exports.CheckboxGroupProvider = CheckboxGroupProvider;
+exports.useCheckboxGroup = useCheckboxGroup;

package/checkbox/index.d.ts

@@ -0,0 +1,6 @@
+export * from './checkbox';
+export * from './checkbox.types';
+export * from './checkboxGroup';
+export * from './checkboxGroup.types';
+export * from './context';
+export { default } from './checkbox';

package/checkbox/index.js

@@ -0,0 +1,23 @@
+"use strict";
+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 __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("./checkbox"), exports);
+__exportStar(require("./checkbox.types"), exports);
+__exportStar(require("./checkboxGroup"), exports);
+__exportStar(require("./checkboxGroup.types"), exports);
+__exportStar(require("./context"), exports);
+var checkbox_1 = require("./checkbox");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(checkbox_1).default; } });

package/checkbox/theme.d.ts

@@ -0,0 +1,49 @@
+import { Dict } from '../utils';
+declare function variantDefault(props: Dict): {
+    control: {
+        color: string;
+        hoverColor: string;
+    };
+};
+declare const _default: {
+    defaultProps: {
+        colorScheme: string;
+        size: string;
+        variant: string;
+    };
+    parts: string[];
+    sizes: {
+        sm: {
+            control: {
+                h: number;
+                w: number;
+            };
+            label: {
+                size: string;
+            };
+        };
+        md: {
+            control: {
+                h: number;
+                w: number;
+            };
+            label: {
+                lineHeight: number;
+                size: string;
+            };
+        };
+        lg: {
+            control: {
+                h: number;
+                w: number;
+            };
+            label: {
+                size: string;
+            };
+        };
+    };
+    variants: {
+        default: typeof variantDefault;
+    };
+};
+export default _default;

package/checkbox/theme.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function variantDefault(props) {
+    var c = props.colorScheme;
+    var controlStyles = {
+        color: c + ".80",
+        hoverColor: c + ".90"
+    };
+    return {
+        control: controlStyles
+    };
+}
+var defaultProps = {
+    colorScheme: 'blue',
+    size: 'md',
+    variant: 'default'
+};
+var parts = ['container', 'control', 'label'];
+var sizes = {
+    sm: {
+        control: {
+            h: 16,
+            w: 16
+        },
+        label: {
+            size: 'sm'
+        }
+    },
+    md: {
+        control: {
+            h: 20,
+            w: 20
+        },
+        label: {
+            lineHeight: 1.2,
+            size: 'md'
+        }
+    },
+    lg: {
+        control: {
+            h: 24,
+            w: 24
+        },
+        label: {
+            size: 'lg'
+        }
+    }
+};
+var variants = {
+    default: variantDefault
+};
+exports.default = {
+    defaultProps: defaultProps,
+    parts: parts,
+    sizes: sizes,
+    variants: variants
+};

package/controlLabel/controlLabel.d.ts

@@ -0,0 +1,6 @@
+import { ControlLabelProps, ControlLabelStyleProps } from './controlLabel.types';
+export declare const BaseControlLabel: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {
+    [x: string]: {};
+} & ControlLabelStyleProps, never>;
+export declare const ControlLabel: import("styled-components").StyledComponent<"label", never, ControlLabelProps, never>;
+export default ControlLabel;

package/controlLabel/controlLabel.js

@@ -0,0 +1,55 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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.ControlLabel = exports.BaseControlLabel = void 0;
+var styled_components_1 = require("@xstyled/styled-components");
+var react_1 = __importDefault(require("react"));
+var styled_components_2 = __importDefault(require("styled-components"));
+var core_1 = require("../core");
+var t_1 = __importDefault(require("../t"));
+var utils_1 = require("../utils");
+var generator = styled_components_1.compose(styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions, styled_components_1.typography);
+exports.BaseControlLabel = styled_components_2.default.label.withConfig({
+    shouldForwardProp: core_1.shouldForwardProp(generator.meta.props)
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\talign-items: center;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\ttransition: all 0s ease-in-out;\n\twidth: fit-content;\n\n\t&.disabled {\n\t\tcursor: not-allowed;\n\t}\n\n\t", "\n"], ["\n\talign-items: center;\n\tcursor: pointer;\n\tdisplay: inline-flex;\n\ttransition: all 0s ease-in-out;\n\twidth: fit-content;\n\n\t&.disabled {\n\t\tcursor: not-allowed;\n\t}\n\n\t", "\n"])), generator);
+exports.ControlLabel = core_1.forwardRef(function (props, ref) {
+    var children = props.children, className = props.className, control = props.control, disabled = props.disabled, label = props.label, _a = props.size, size = _a === void 0 ? 'md' : _a, rest = __rest(props, ["children", "className", "control", "disabled", "label", "size"]);
+    var styles = core_1.useStyleConfig('ControlLabel', props);
+    var color = disabled ? 'grey.50' : '';
+    var controlProps = { disabled: disabled, size: size };
+    var aliasedProps = utils_1.filterUndefined({});
+    return (react_1.default.createElement(exports.BaseControlLabel, __assign({ className: utils_1.cs('vui-controlLabel', className, disabled && 'disabled'), color: color, ref: ref, transitionDuration: "fast" }, styles, aliasedProps, rest), children ? (children) : (react_1.default.createElement(react_1.default.Fragment, null,
+        control && react_1.default.cloneElement(control, controlProps),
+        react_1.default.createElement(t_1.default, { ml: 1, size: size }, label)))));
+});
+exports.ControlLabel.displayName = 'ControlLabel';
+exports.default = exports.ControlLabel;
+var templateObject_1;

package/controlLabel/controlLabel.types.d.ts

@@ -0,0 +1,10 @@
+import React, { HTMLAttributes } from 'react';
+import { SizingProps, SpaceProps, TransitionsProps, TypographyProps } from '../system';
+import { ThemingProps } from '../theme';
+export interface ControlLabelProps extends Omit<HTMLAttributes<HTMLLabelElement>, 'color'>, ControlLabelStyleProps, ThemingProps<'ControlLabel'> {
+    control?: React.ReactElement;
+    disabled?: boolean;
+    label?: string;
+}
+export interface ControlLabelStyleProps extends SizingProps, SpaceProps, TransitionsProps, TypographyProps {
+}

package/controlLabel/controlLabel.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/controlLabel/index.d.ts

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

package/controlLabel/index.js

@@ -0,0 +1,20 @@
+"use strict";
+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 __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("./controlLabel"), exports);
+__exportStar(require("./controlLabel.types"), exports);
+var controlLabel_1 = require("./controlLabel");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(controlLabel_1).default; } });

package/controlLabel/theme.d.ts

@@ -0,0 +1,11 @@
+declare const _default: {
+    defaultProps: {
+        size: string;
+    };
+    sizes: {
+        sm: {};
+        md: {};
+    };
+    variants: {};
+};
+export default _default;

package/controlLabel/theme.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var defaultProps = {
+    size: 'md'
+};
+var sizes = {
+    sm: {},
+    md: {}
+};
+var variants = {};
+exports.default = {
+    defaultProps: defaultProps,
+    sizes: sizes,
+    variants: variants
+};

package/core/globalStyle.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("styled-components").GlobalStyleComponent<object, import("styled-components").DefaultTheme>;
+declare const _default: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;
 export default _default;

package/core/globalStyle.js

@@ -4,7 +4,8 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var styled_components_1 = require("@xstyled/styled-components");
+var styled_components_1 = require("styled-components");
 var styles_1 = require("../styles");
-exports.default = styled_components_1.createGlobalStyle(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n\n\thtml {\n\t\tbox-sizing: border-box;\n\t}\n\n\t*, *:before, *:after {\n\t\tbox-sizing: inherit;\n\t}\n\n\t* {\n\t\t--x-shadow: 0 0 0 0 #fff;\n\t}\n\n\tbody {\n\t\tbackground-color: blue.10;\n\t\tcolor: prussian.80;\n\t\tfont-family: avenir;\n\t\tfont-size: md;\n\t}\n\n\ta {\n\t\ttext-decoration: none;\n\t}\n\n\t@keyframes fadeDown {\n\t\t", "\n\t}\n\n\t@keyframes fadeIn {\n\t\t", "\n\t}\n\n\t@keyframes fadeLeft {\n\t\t", "\n\t}\n\n\t@keyframes fadeOut {\n\t\t", "\n\t}\n\n\t@keyframes fadeRight {\n\t\t", "\n\t}\n\n\t@keyframes fadeUp {\n\t\t", "\n\t}\n\n\t@keyframes spin {\n\t\t", "\n\t}\n"], ["\n\t", "\n\n\thtml {\n\t\tbox-sizing: border-box;\n\t}\n\n\t*, *:before, *:after {\n\t\tbox-sizing: inherit;\n\t}\n\n\t* {\n\t\t--x-shadow: 0 0 0 0 #fff;\n\t}\n\n\tbody {\n\t\tbackground-color: blue.10;\n\t\tcolor: prussian.80;\n\t\tfont-family: avenir;\n\t\tfont-size: md;\n\t}\n\n\ta {\n\t\ttext-decoration: none;\n\t}\n\n\t@keyframes fadeDown {\n\t\t", "\n\t}\n\n\t@keyframes fadeIn {\n\t\t", "\n\t}\n\n\t@keyframes fadeLeft {\n\t\t", "\n\t}\n\n\t@keyframes fadeOut {\n\t\t", "\n\t}\n\n\t@keyframes fadeRight {\n\t\t", "\n\t}\n\n\t@keyframes fadeUp {\n\t\t", "\n\t}\n\n\t@keyframes spin {\n\t\t", "\n\t}\n"])), styles_1.fonts, styles_1.fadeDown, styles_1.fadeIn, styles_1.fadeLeft, styles_1.fadeOut, styles_1.fadeRight, styles_1.fadeUp, styles_1.spin);
+var utils_1 = require("./utils");
+exports.default = styled_components_1.createGlobalStyle(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n\n\t:root {\n\t\t", "\n\n\t\t--vui-colors-disabled-bg: var(--vui-colors-grey-20);\n\t\t--vui-colors-disabled-border: var(--vui-colors-grey-50);\n\t\t--vui-colors-disabled-font: var(--vui-colors-grey-50);\n\t}\n\n\thtml {\n\t\tbox-sizing: border-box;\n\t}\n\n\t*, *:before, *:after {\n\t\tbox-sizing: inherit;\n\t}\n\n\t* {\n\t\t--x-ring-color: var(--vui-colors-blue-50);\n\t\t--x-shadow: 0 0 0 0 #fff;\n\t}\n\n\tbody {\n\t\tcolor: var(--vui-colors-prussian-80);\n\t\tfont-family: var(--vui-fonts-avenir);\n\t\tfont-size: var(--vui-fontSizes-md);\n\t}\n\n\ta {\n\t\ttext-decoration: none;\n\t}\n\n\t@keyframes fadeDown {\n\t\t", "\n\t}\n\n\t@keyframes fadeIn {\n\t\t", "\n\t}\n\n\t@keyframes fadeLeft {\n\t\t", "\n\t}\n\n\t@keyframes fadeOut {\n\t\t", "\n\t}\n\n\t@keyframes fadeRight {\n\t\t", "\n\t}\n\n\t@keyframes fadeUp {\n\t\t", "\n\t}\n\n\t@keyframes spin {\n\t\t", "\n\t}\n"], ["\n\t", "\n\n\t:root {\n\t\t", "\n\n\t\t--vui-colors-disabled-bg: var(--vui-colors-grey-20);\n\t\t--vui-colors-disabled-border: var(--vui-colors-grey-50);\n\t\t--vui-colors-disabled-font: var(--vui-colors-grey-50);\n\t}\n\n\thtml {\n\t\tbox-sizing: border-box;\n\t}\n\n\t*, *:before, *:after {\n\t\tbox-sizing: inherit;\n\t}\n\n\t* {\n\t\t--x-ring-color: var(--vui-colors-blue-50);\n\t\t--x-shadow: 0 0 0 0 #fff;\n\t}\n\n\tbody {\n\t\tcolor: var(--vui-colors-prussian-80);\n\t\tfont-family: var(--vui-fonts-avenir);\n\t\tfont-size: var(--vui-fontSizes-md);\n\t}\n\n\ta {\n\t\ttext-decoration: none;\n\t}\n\n\t@keyframes fadeDown {\n\t\t", "\n\t}\n\n\t@keyframes fadeIn {\n\t\t", "\n\t}\n\n\t@keyframes fadeLeft {\n\t\t", "\n\t}\n\n\t@keyframes fadeOut {\n\t\t", "\n\t}\n\n\t@keyframes fadeRight {\n\t\t", "\n\t}\n\n\t@keyframes fadeUp {\n\t\t", "\n\t}\n\n\t@keyframes spin {\n\t\t", "\n\t}\n"])), styles_1.fontFaces, utils_1.generateCSSVariables, styles_1.fadeDown, styles_1.fadeIn, styles_1.fadeLeft, styles_1.fadeOut, styles_1.fadeRight, styles_1.fadeUp, styles_1.spin);
 var templateObject_1;

package/core/types.d.ts

@@ -1,7 +1,11 @@
 import React from 'react';
 export declare type As = React.ElementType;
 export interface CreateContextOptions {
+    /** Message displayed when context is used outside of the provider */
     errorMessage?: string;
+    /** Accessing context outside of provider won't throw error */
+    isOptional?: boolean;
+    /** Name of the context */
     name?: string;
 }
 export declare type CreateContextReturn<T> = [React.Provider<T>, () => T];

package/core/utils.d.ts

@@ -11,15 +11,20 @@ export declare function extendTheme(overrides: ThemeOverrides): VuiTheme;
 export declare function forwardRef<Props extends object, Component extends As>(component: React.ForwardRefRenderFunction<Component, PropsOf<Component> & Props & {
     as?: As;
 }>): StyledComponent<Component, never, Props, never>;
+export declare function generateCSSVariables(): string;
 /** Removes specific theming keys from the given props. */
-export declare function omitThemingProps<T extends ThemingProps>(props: T): Omit<T, "size" | "variant">;
+export declare function omitThemingProps<T extends ThemingProps>(props: T): Omit<T, "variant" | "size">;
 /**
  * Custom validator to prevent certain props from reaching the HTML element.
  * @param props - list of props to filter out
  */
 export declare function shouldForwardProp(props: string[]): (prop: string | number, defaultValidatorFn: (prop: string | number) => boolean) => boolean;
-/** Attemps to access a theme property at the given path. */
-export declare function th(path: string | string[]): (props: StyledProps<unknown>) => Dict<any> | undefined;
+/**
+ * Gets a value from the theme for a given path.
+ * @param themeKey - any top level property of the theme, e.g. 'colors'
+ * @param path - path to a nested value of a given theme property, e.g. 'grey.50'
+ */
+export declare function th(themeKey: keyof VuiTheme | (string & {}), path?: string | number): ({ theme }: StyledProps<unknown>) => string;
 /**
  * Retrieves and merges size and variant styling from theme configuration.
  * @param component - name of any component configured in the theme