@veracity/vui 0.0.1 → 0.0.3

package/radio/radioGroup.js

@@ -0,0 +1,99 @@
+"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.RadioGroup = exports.RadioGroupBase = 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.RadioGroupBase = 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.RadioGroup = core_1.forwardRef(function (props, ref) {
+    var className = props.className, colorScheme = props.colorScheme, _a = props.defaultValue, defaultValue = _a === void 0 ? '' : _a, disabled = props.disabled, name = props.name, onChange = props.onChange, row = props.row, size = props.size, valueProp = props.value, variant = props.variant, rest = __rest(props, ["className", "colorScheme", "defaultValue", "disabled", "name", "onChange", "row", "size", "value", "variant"]);
+    var isControlled = react_1.useRef(valueProp !== undefined).current;
+    var _b = __read(react_1.useState(defaultValue), 2), valueState = _b[0], setValueState = _b[1];
+    var value = isControlled ? valueProp : valueState;
+    var handleOnChange = react_1.useCallback(function (e) {
+        setValue(e.target.value);
+        onChange === null || onChange === void 0 ? void 0 : onChange(e);
+    }, [onChange]);
+    var setValue = react_1.useCallback(function (value) {
+        !isControlled && setValueState(value);
+    }, []);
+    var context = react_1.useMemo(function () { return utils_1.filterUndefined({ colorScheme: colorScheme, disabled: disabled, name: name, onChange: handleOnChange, size: size, value: value, variant: variant }); }, [colorScheme, disabled, name, handleOnChange, size, value, variant]);
+    var aliasedProps = utils_1.filterUndefined({
+        flexDirection: row ? 'row' : undefined
+    });
+    return (react_1.default.createElement(context_1.RadioGroupProvider, { value: context },
+        react_1.default.createElement(exports.RadioGroupBase, __assign({ className: utils_1.cs('vui-radioGroup', className), ref: ref }, aliasedProps, rest))));
+});
+exports.RadioGroup.displayName = 'RadioGroup';
+exports.default = exports.RadioGroup;
+var templateObject_1;

package/radio/radioGroup.types.d.ts

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

package/radio/radioGroup.types.js

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

package/radio/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/radio/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/skeleton/skeleton.d.ts

@@ -1,5 +1,5 @@
 import { SkeletonProps, SkeletonStyleProps } from './skeleton.types';
-export declare const BaseSkeleton: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+export declare const SkeletonBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     [x: string]: {};
 } & SkeletonStyleProps, never>;
 export declare const Skeleton: import("styled-components").StyledComponent<"div", never, SkeletonProps, never>;

package/skeleton/skeleton.js

@@ -48,15 +48,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Skeleton = exports.BaseSkeleton = void 0;
+exports.Skeleton = exports.SkeletonBase = void 0;
 var styled_components_1 = require("@xstyled/styled-components");
 var react_1 = __importDefault(require("react"));
 var styled_components_2 = __importStar(require("styled-components"));
 var core_1 = require("../core");
 var utils_1 = require("../utils");
-var generator = styled_components_1.compose(styled_components_1.backgroundColor, styled_components_1.borderRadius, styled_components_1.sizing, styled_components_1.space);
+var generator = styled_components_1.compose(styled_components_1.backgroundColor, styled_components_1.borderRadius, styled_components_1.flexboxes, styled_components_1.sizing, styled_components_1.space);
 var pulse = styled_components_2.keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  0% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n  }\n  100% {\n    opacity: 1;\n  }\n"], ["\n  0% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n  }\n  100% {\n    opacity: 1;\n  }\n"])));
-exports.BaseSkeleton = styled_components_2.default.div.withConfig({
+exports.SkeletonBase = styled_components_2.default.div.withConfig({
     shouldForwardProp: core_1.shouldForwardProp(generator.meta.props)
 })(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\tanimation: ", " 1.5s ease-in-out 0.5s infinite;\n\n\t", "\n"], ["\n\tanimation: ", " 1.5s ease-in-out 0.5s infinite;\n\n\t", "\n"])), pulse, generator);
 exports.Skeleton = core_1.forwardRef(function (props, ref) {
@@ -66,7 +66,7 @@ exports.Skeleton = core_1.forwardRef(function (props, ref) {
     var aliasedProps = utils_1.filterUndefined({
         w: props.variant === 'circle' ? styles.h : undefined
     });
-    return (react_1.default.createElement(react_1.default.Fragment, null, arr.map(function (_, i) { return (react_1.default.createElement(exports.BaseSkeleton, __assign({ bg: "blue.20", className: utils_1.cs('vui-skeleton', className), key: i, ref: ref }, styles, aliasedProps, rest))); })));
+    return (react_1.default.createElement(react_1.default.Fragment, null, arr.map(function (_, i) { return (react_1.default.createElement(exports.SkeletonBase, __assign({ bg: "blue.20", className: utils_1.cs('vui-skeleton', className), key: i, ref: ref }, styles, aliasedProps, rest))); })));
 });
 exports.Skeleton.displayName = 'Skeleton';
 exports.default = exports.Skeleton;

package/skeleton/skeleton.types.d.ts

@@ -1,9 +1,9 @@
 import { HTMLAttributes } from 'react';
-import { BackgroundColorProps, BorderRadiusProps, SizingProps, SpaceProps } from '../system';
+import { BackgroundColorProps, BorderRadiusProps, FlexboxesProps, SizingProps, SpaceProps } from '../system';
 import { ThemingProps } from '../theme';
 export interface SkeletonProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'>, SkeletonStyleProps, ThemingProps<'Skeleton'> {
     colorScheme?: 'blue' | 'grey';
     repeat?: number;
 }
-export interface SkeletonStyleProps extends BackgroundColorProps, BorderRadiusProps, SizingProps, SpaceProps {
+export interface SkeletonStyleProps extends BackgroundColorProps, BorderRadiusProps, FlexboxesProps, SizingProps, SpaceProps {
 }

package/styles/animations.d.ts

@@ -5,3 +5,13 @@ export declare const fadeOut = "\n\tfrom { opacity: 1; }\n\tto { opacity: 0; }\n
 export declare const fadeRight = "\n\tfrom { opacity: 0; transform: translateX(-20px) }\n\tto { opacity: 1; transform: translateX(0) }\n";
 export declare const fadeUp = "\n\tfrom { opacity: 0; transform: translateY(20px) }\n\tto { opacity: 1; transform: translateY(0) }\n";
 export declare const spin = "\n\tfrom { transform: rotate(0deg); }\n\tto { transform: rotate(360deg); }\n";
+declare const _default: {
+    fadeDown: string;
+    fadeIn: string;
+    fadeLeft: string;
+    fadeOut: string;
+    fadeRight: string;
+    fadeUp: string;
+    spin: string;
+};
+export default _default;

package/styles/animations.js

@@ -8,3 +8,12 @@ exports.fadeOut = "\n\tfrom { opacity: 1; }\n\tto { opacity: 0; }\n";
 exports.fadeRight = "\n\tfrom { opacity: 0; transform: translateX(-20px) }\n\tto { opacity: 1; transform: translateX(0) }\n";
 exports.fadeUp = "\n\tfrom { opacity: 0; transform: translateY(20px) }\n\tto { opacity: 1; transform: translateY(0) }\n";
 exports.spin = "\n\tfrom { transform: rotate(0deg); }\n\tto { transform: rotate(360deg); }\n";
+exports.default = {
+    fadeDown: 'fadeDown 0.3s ease-in-out',
+    fadeIn: 'fadeIn 0.3s ease-in-out',
+    fadeLeft: 'fadeLeft 0.3s ease-in-out',
+    fadeOut: 'fadeOut 0.3s ease-in-out',
+    fadeRight: 'fadeRight 0.3s ease-in-out',
+    fadeUp: 'fadeUp 0.3s ease-in-out',
+    spin: 'spin 1s linear infinite'
+};

package/styles/colors.d.ts

@@ -0,0 +1,171 @@
+export declare const blue: {
+    10: string;
+    20: string;
+    30: string;
+    40: string;
+    50: string;
+    60: string;
+    70: string;
+    80: string;
+    90: string;
+    100: string;
+};
+export declare const green: {
+    10: string;
+    20: string;
+    30: string;
+    40: string;
+    50: string;
+    60: string;
+    70: string;
+    80: string;
+    90: string;
+    100: string;
+};
+export declare const grey: {
+    10: string;
+    20: string;
+    30: string;
+    40: string;
+    50: string;
+    60: string;
+    70: string;
+    80: string;
+    90: string;
+    100: string;
+};
+export declare const pink: {
+    10: string;
+    20: string;
+    30: string;
+    40: string;
+    50: string;
+    60: string;
+    70: string;
+    80: string;
+    90: string;
+    100: string;
+};
+export declare const prussian: {
+    10: string;
+    20: string;
+    30: string;
+    40: string;
+    50: string;
+    60: string;
+    70: string;
+    80: string;
+    90: string;
+    100: string;
+};
+export declare const red: {
+    10: string;
+    20: string;
+    30: string;
+    40: string;
+    50: string;
+    60: string;
+    70: string;
+    80: string;
+    90: string;
+    100: string;
+};
+export declare const yellow: {
+    10: string;
+    20: string;
+    30: string;
+    40: string;
+    50: string;
+    60: string;
+    70: string;
+    80: string;
+    90: string;
+    100: string;
+};
+declare const _default: {
+    blue: {
+        10: string;
+        20: string;
+        30: string;
+        40: string;
+        50: string;
+        60: string;
+        70: string;
+        80: string;
+        90: string;
+        100: string;
+    };
+    green: {
+        10: string;
+        20: string;
+        30: string;
+        40: string;
+        50: string;
+        60: string;
+        70: string;
+        80: string;
+        90: string;
+        100: string;
+    };
+    grey: {
+        10: string;
+        20: string;
+        30: string;
+        40: string;
+        50: string;
+        60: string;
+        70: string;
+        80: string;
+        90: string;
+        100: string;
+    };
+    pink: {
+        10: string;
+        20: string;
+        30: string;
+        40: string;
+        50: string;
+        60: string;
+        70: string;
+        80: string;
+        90: string;
+        100: string;
+    };
+    prussian: {
+        10: string;
+        20: string;
+        30: string;
+        40: string;
+        50: string;
+        60: string;
+        70: string;
+        80: string;
+        90: string;
+        100: string;
+    };
+    red: {
+        10: string;
+        20: string;
+        30: string;
+        40: string;
+        50: string;
+        60: string;
+        70: string;
+        80: string;
+        90: string;
+        100: string;
+    };
+    yellow: {
+        10: string;
+        20: string;
+        30: string;
+        40: string;
+        50: string;
+        60: string;
+        70: string;
+        80: string;
+        90: string;
+        100: string;
+    };
+};
+export default _default;

package/styles/colors.js

@@ -0,0 +1,96 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.yellow = exports.red = exports.prussian = exports.pink = exports.grey = exports.green = exports.blue = void 0;
+exports.blue = {
+    10: '#f6fbff',
+    20: '#e2f1ff',
+    30: '#c2e1fe',
+    40: '#a1cef9',
+    50: '#77baf9',
+    60: '#48a1f3',
+    70: '#1e86e5',
+    80: '#0067c5',
+    90: '#075094',
+    100: '#003f79'
+};
+exports.green = {
+    10: '#efffed',
+    20: '#d8ffd3',
+    30: '#bdfbb6',
+    40: '#9df291',
+    50: '#82db77',
+    60: '#68c35e',
+    70: '#4ea344',
+    80: '#36842d',
+    90: '#276121',
+    100: '#024019'
+};
+exports.grey = {
+    10: '#f7f8f9',
+    20: '#f1f3f5',
+    30: '#e1e6e9',
+    40: '#c3ccd3',
+    50: '#a5b3bd',
+    60: '#8799a7',
+    70: '#768b9c',
+    80: '#698091',
+    90: '#586c7a',
+    100: '#465663'
+};
+exports.pink = {
+    10: '#fff3fd',
+    20: '#ffddf9',
+    30: '#ffbdf3',
+    40: '#ff8eea',
+    50: '#ff55df',
+    60: '#ff0ed2',
+    70: '#ee00c1',
+    80: '#da00b1',
+    90: '#a00082',
+    100: '#72005c'
+};
+exports.prussian = {
+    10: '#eff3f5',
+    20: '#c5dce8',
+    30: '#91bbcf',
+    40: '#5690ac',
+    50: '#32718e',
+    60: '#0d5071',
+    70: '#003b57',
+    80: '#002a3e',
+    90: '#001620',
+    100: '#000b11'
+};
+exports.red = {
+    10: '#fff1f1',
+    20: '#ffe4e4',
+    30: '#ffc8c8',
+    40: '#faa7ab',
+    50: '#fb7b81',
+    60: '#f64d55',
+    70: '#e84148',
+    80: '#d6383f',
+    90: '#b62f3a',
+    100: '#962730'
+};
+exports.yellow = {
+    10: '#fffde7',
+    20: '#fff8bd',
+    30: '#ffed7a',
+    40: '#ffe43a',
+    50: '#ffd600',
+    60: '#fec600',
+    70: '#f4b40d',
+    80: '#e29c13',
+    90: '#b67b08',
+    100: '#83591a'
+};
+exports.default = {
+    blue: exports.blue,
+    green: exports.green,
+    grey: exports.grey,
+    pink: exports.pink,
+    prussian: exports.prussian,
+    red: exports.red,
+    yellow: exports.yellow
+};

package/styles/durations.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    instant: string;
+    fast: string;
+    normal: string;
+    slow: string;
+};
+export default _default;

package/styles/durations.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    instant: '100ms',
+    fast: '200ms',
+    normal: '300ms',
+    slow: '400ms'
+};

package/styles/fontFaces.d.ts

@@ -0,0 +1,2 @@
+declare const _default: string;
+export default _default;

package/styles/fontFaces.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var core_1 = require("../core");
+exports.default = "\n\t@font-face {\n\t\tfont-family: 'Avenir Next';\n\t\tsrc: url('" + core_1.cdnUrl + "/common/fonts/avenir-regular-lat-ext.woff');\n\t\tfont-weight: 400;\n\t}\n\n\t@font-face {\n\t\tfont-family: 'Avenir Next';\n\t\tsrc: url('" + core_1.cdnUrl + "/common/fonts/avenir-medium-lat-ext.woff');\n\t\tfont-weight: 500;\n\t}\n\n\t@font-face {\n\t\tfont-family: 'Avenir Next';\n\t\tsrc: url('" + core_1.cdnUrl + "/common/fonts/avenir-demi-lat-ext.woff');\n\t\tfont-weight: 600;\n\t}\n\n\t@font-face {\n\t\tfont-family: 'Avenir Next';\n\t\tsrc: url('" + core_1.cdnUrl + "/common/fonts/avenir-bold-lat-ext.woff');\n\t\tfont-weight: 700;\n\t}\n";

package/styles/fontSizes.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+};
+export default _default;

package/styles/fontSizes.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    xs: 12,
+    sm: 14,
+    md: 16,
+    lg: 18
+};

package/styles/fontWeights.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    regular: string;
+    medium: string;
+    demi: string;
+    bold: string;
+};
+export default _default;

package/styles/fontWeights.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    regular: '400',
+    medium: '500',
+    demi: '600',
+    bold: '700'
+};

package/styles/fonts.d.ts

@@ -1,2 +1,4 @@
-declare const fonts: string;
-export default fonts;
+declare const _default: {
+    avenir: string;
+};
+export default _default;

package/styles/fonts.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var core_1 = require("../core");
-var fonts = "\n\t@font-face {\n\t\tfont-family: 'Avenir Next';\n\t\tsrc: url('" + core_1.cdnUrl + "/common/fonts/avenir-regular-lat-ext.woff');\n\t\tfont-weight: 400;\n\t}\n\n\t@font-face {\n\t\tfont-family: 'Avenir Next';\n\t\tsrc: url('" + core_1.cdnUrl + "/common/fonts/avenir-medium-lat-ext.woff');\n\t\tfont-weight: 500;\n\t}\n\n\t@font-face {\n\t\tfont-family: 'Avenir Next';\n\t\tsrc: url('" + core_1.cdnUrl + "/common/fonts/avenir-demi-lat-ext.woff');\n\t\tfont-weight: 600;\n\t}\n\n\t@font-face {\n\t\tfont-family: 'Avenir Next';\n\t\tsrc: url('" + core_1.cdnUrl + "/common/fonts/avenir-bold-lat-ext.woff');\n\t\tfont-weight: 700;\n\t}\n";
-exports.default = fonts;
+exports.default = {
+    avenir: "'Avenir Next', Verdana, Geneva, Tahoma, sans-serif"
+};

package/styles/index.d.ts

@@ -1,3 +1,13 @@
 export * from './animations';
+export * from './colors';
 export * from './helpers';
+export { default as animations } from './animations';
+export { default as colors } from './colors';
+export { default as durations } from './durations';
+export { default as fontFaces } from './fontFaces';
 export { default as fonts } from './fonts';
+export { default as fontSizes } from './fontSizes';
+export { default as fontWeights } from './fontWeights';
+export { default as radii } from './radii';
+export { default as screens } from './screens';
+export { default as shadows } from './shadows';