@veracity/vui 0.0.13 → 0.0.15

package/core/utils.js

@@ -1,209 +1,209 @@
-"use strict";
-/* eslint-disable @typescript-eslint/ban-types */
-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.vui = exports.useUp = exports.useTheme = exports.useTh = exports.useStyleConfig = exports.useMedia = exports.useDown = exports.useBetween = exports.th = exports.shouldForwardProp = exports.omitThemingProps = exports.mediaUp = exports.mediaDown = exports.mediaBetween = exports.forwardPropConfig = exports.extendTheme = exports.createContext = void 0;
-var styled_components_1 = require("@xstyled/styled-components");
-var react_1 = __importStar(require("react"));
-var styled_components_2 = require("styled-components");
-var theme_1 = __importDefault(require("../theme"));
-var utils_1 = require("../utils");
-/** Generic function to create new Context and context access hook. */
-function createContext(options) {
-    if (options === void 0) { options = {}; }
-    var _a = options.errorMessage, errorMessage = _a === void 0 ? 'Context can only be accessed by components wrapped with the Provider.' : _a, isOptional = options.isOptional, name = options.name;
-    var Context = react_1.default.createContext(undefined);
-    Context.displayName = name;
-    function useContext() {
-        var context = react_1.default.useContext(Context);
-        if (!isOptional && context === undefined)
-            throw new Error(errorMessage);
-        return context;
-    }
-    return [Context.Provider, useContext];
-}
-exports.createContext = createContext;
-/** Merges provided theme extensions and overrides with default VUI theme */
-function extendTheme(extensions) {
-    return utils_1.mergeWith(theme_1.default, extensions);
-}
-exports.extendTheme = extendTheme;
-/**
- * Provides configuration to the 'styled' function, which filters out xstyled system props
- * Return type is cast to {} in order to avoid messing up styled component's actual props definition.
- */
-function forwardPropConfig(generator) {
-    return {
-        shouldForwardProp: function (prop, defaultValidatorFn) {
-            if (typeof prop === 'string' && generator.meta.props.includes(prop))
-                return false;
-            return defaultValidatorFn(prop);
-        }
-    };
-}
-exports.forwardPropConfig = forwardPropConfig;
-/** Returns CSS media string with appropriate min-width and max-width values */
-var mediaBetween = function (minWidth, maxWidth) { return function (props) {
-    return "@media (min-width: " + th.screen(minWidth)(props) + ") and (max-width: " + th.screen(maxWidth)(props) + ")";
-}; };
-exports.mediaBetween = mediaBetween;
-/** Returns CSS media string with appropriate max-width value */
-var mediaDown = function (width) { return function (props) {
-    return "@media (max-width: " + th.screen(width)(props) + ")";
-}; };
-exports.mediaDown = mediaDown;
-/** Returns CSS media string with appropriate min-width value */
-var mediaUp = function (width) { return function (props) {
-    return "@media (min-width: " + th.screen(width)(props) + ")";
-}; };
-exports.mediaUp = mediaUp;
-/** Removes specific theming keys from the given props. */
-function omitThemingProps(props) {
-    var size = props.size, variant = props.variant, rest = __rest(props, ["size", "variant"]); // eslint-disable-line @typescript-eslint/no-unused-vars
-    return rest;
-}
-exports.omitThemingProps = omitThemingProps;
-/**
- * Custom validator to prevent certain props from reaching the HTML element.
- * @param props - list of props to filter out
- */
-function shouldForwardProp(props) {
-    return function (prop, defaultValidatorFn) {
-        if (props.includes(prop.toString()))
-            return false;
-        return defaultValidatorFn(prop);
-    };
-}
-exports.shouldForwardProp = shouldForwardProp;
-/** Re-export of xstyled 'th' with custom typing and screen getter */
-var th = styled_components_1.th;
-exports.th = th;
-th.screen = styled_components_1.themeGetter({
-    name: 'screen',
-    key: 'screens',
-    compose: styled_components_1.getPx
-});
-/** Returns true of current viewport width is between provided min and max widths */
-function useBetween(minWidth, maxWidth) {
-    var isDown = useDown(maxWidth);
-    var isUp = useUp(minWidth);
-    return isDown && isUp;
-}
-exports.useBetween = useBetween;
-/** Returns true of current viewport width is smaller than provided width */
-function useDown(width) {
-    var _a = useMedia(width), value = _a.value, viewportWidth = _a.viewportWidth;
-    return viewportWidth !== null && value !== null && viewportWidth < value;
-}
-exports.useDown = useDown;
-/** Returns viewport width and provided screen width as a number  */
-function useMedia(width) {
-    var theme = useTheme();
-    var viewportWidth = styled_components_1.useViewportWidth();
-    var valueString = th.screen(width)({ theme: theme });
-    var value = Number(valueString.replace('px', ''));
-    return { value: value, viewportWidth: viewportWidth };
-}
-exports.useMedia = useMedia;
-/**
- * Retrieves and merges size and variant styling from theme configuration.
- * @param component - name of any component configured in the theme
- * @param props - props object of the given component
- */
-function useStyleConfig(component, props) {
-    var _a;
-    if (props === void 0) { props = {}; }
-    var theme = useTheme();
-    var _b = (_a = theme.components[component]) !== null && _a !== void 0 ? _a : {}, defaultProps = _b.defaultProps, _c = _b.parts, parts = _c === void 0 ? [] : _c, sizes = _b.sizes, variants = _b.variants;
-    var mergedProps = __assign(__assign({}, defaultProps), props);
-    var colorScheme = mergedProps.colorScheme, size = mergedProps.size, variant = mergedProps.variant;
-    return react_1.useMemo(function () {
-        var _a, _b;
-        var sizeStyles = utils_1.runIfFn((_a = sizes === null || sizes === void 0 ? void 0 : sizes[size]) !== null && _a !== void 0 ? _a : {}, mergedProps);
-        var variantStyles = utils_1.runIfFn((_b = variants === null || variants === void 0 ? void 0 : variants[variant]) !== null && _b !== void 0 ? _b : {}, mergedProps);
-        var styles = {};
-        if (parts.length > 0) {
-            parts.forEach(function (part) {
-                var _a, _b;
-                styles[part] = __assign(__assign({}, ((_a = sizeStyles[part]) !== null && _a !== void 0 ? _a : {})), ((_b = variantStyles[part]) !== null && _b !== void 0 ? _b : {}));
-            });
-        }
-        else {
-            styles = __assign(__assign({}, sizeStyles), variantStyles);
-        }
-        return styles;
-    }, [colorScheme, size, variant]);
-}
-exports.useStyleConfig = useStyleConfig;
-/** Returns theme value at the given path */
-function useTh(path, defaultValue) {
-    var theme = useTheme();
-    return th(path, defaultValue)({ theme: theme });
-}
-exports.useTh = useTh;
-/** Returns the theme object with extensions */
-function useTheme() {
-    return styled_components_2.useTheme();
-}
-exports.useTheme = useTheme;
-/** Returns true of current viewport width is larger or equal to provided width */
-function useUp(width) {
-    var _a = useMedia(width), value = _a.value, viewportWidth = _a.viewportWidth;
-    return viewportWidth !== null && value !== null && viewportWidth >= value;
-}
-exports.useUp = useUp;
-/**
- * Component creation utility, which combines forwardRef, memo and ensures correct typing with all props included.
- * Config object allows toggling memoization and providing custom 'areEqual' function.
- */
-function vui(component, config) {
-    var _a = config !== null && config !== void 0 ? config : {}, memoCompare = _a.memoCompare, _b = _a.isMemo, isMemo = _b === void 0 ? true : _b;
-    if (isMemo) {
-        return react_1.default.memo(react_1.default.forwardRef(component), memoCompare);
-    }
-    return react_1.default.forwardRef(component);
-}
-exports.vui = vui;
+"use strict";
+/* eslint-disable @typescript-eslint/ban-types */
+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.vui = exports.useUp = exports.useTheme = exports.useTh = exports.useStyleConfig = exports.useMedia = exports.useDown = exports.useBetween = exports.th = exports.shouldForwardProp = exports.omitThemingProps = exports.mediaUp = exports.mediaDown = exports.mediaBetween = exports.forwardPropConfig = exports.extendTheme = exports.createContext = void 0;
+var styled_components_1 = require("@xstyled/styled-components");
+var react_1 = __importStar(require("react"));
+var styled_components_2 = require("styled-components");
+var theme_1 = __importDefault(require("../theme"));
+var utils_1 = require("../utils");
+/** Generic function to create new Context and context access hook. */
+function createContext(options) {
+    if (options === void 0) { options = {}; }
+    var _a = options.errorMessage, errorMessage = _a === void 0 ? 'Context can only be accessed by components wrapped with the Provider.' : _a, isOptional = options.isOptional, name = options.name;
+    var Context = react_1.default.createContext(undefined);
+    Context.displayName = name;
+    function useContext() {
+        var context = react_1.default.useContext(Context);
+        if (!isOptional && context === undefined)
+            throw new Error(errorMessage);
+        return context;
+    }
+    return [Context.Provider, useContext];
+}
+exports.createContext = createContext;
+/** Merges provided theme extensions and overrides with default VUI theme */
+function extendTheme(extensions) {
+    return utils_1.mergeWith(theme_1.default, extensions);
+}
+exports.extendTheme = extendTheme;
+/**
+ * Provides configuration to the 'styled' function, which filters out xstyled system props
+ * Return type is cast to {} in order to avoid messing up styled component's actual props definition.
+ */
+function forwardPropConfig(generator) {
+    return {
+        shouldForwardProp: function (prop, defaultValidatorFn) {
+            if (typeof prop === 'string' && generator.meta.props.includes(prop))
+                return false;
+            return defaultValidatorFn(prop);
+        }
+    };
+}
+exports.forwardPropConfig = forwardPropConfig;
+/** Returns CSS media string with appropriate min-width and max-width values */
+var mediaBetween = function (minWidth, maxWidth) { return function (props) {
+    return "@media (min-width: " + th.screen(minWidth)(props) + ") and (max-width: " + th.screen(maxWidth)(props) + ")";
+}; };
+exports.mediaBetween = mediaBetween;
+/** Returns CSS media string with appropriate max-width value */
+var mediaDown = function (width) { return function (props) {
+    return "@media (max-width: " + th.screen(width)(props) + ")";
+}; };
+exports.mediaDown = mediaDown;
+/** Returns CSS media string with appropriate min-width value */
+var mediaUp = function (width) { return function (props) {
+    return "@media (min-width: " + th.screen(width)(props) + ")";
+}; };
+exports.mediaUp = mediaUp;
+/** Removes specific theming keys from the given props. */
+function omitThemingProps(props) {
+    var size = props.size, variant = props.variant, rest = __rest(props, ["size", "variant"]); // eslint-disable-line @typescript-eslint/no-unused-vars
+    return rest;
+}
+exports.omitThemingProps = omitThemingProps;
+/**
+ * Custom validator to prevent certain props from reaching the HTML element.
+ * @param props - list of props to filter out
+ */
+function shouldForwardProp(props) {
+    return function (prop, defaultValidatorFn) {
+        if (props.includes(prop.toString()))
+            return false;
+        return defaultValidatorFn(prop);
+    };
+}
+exports.shouldForwardProp = shouldForwardProp;
+/** Re-export of xstyled 'th' with custom typing and screen getter */
+var th = styled_components_1.th;
+exports.th = th;
+th.screen = styled_components_1.themeGetter({
+    name: 'screen',
+    key: 'screens',
+    compose: styled_components_1.getPx
+});
+/** Returns true of current viewport width is between provided min and max widths */
+function useBetween(minWidth, maxWidth) {
+    var isDown = useDown(maxWidth);
+    var isUp = useUp(minWidth);
+    return isDown && isUp;
+}
+exports.useBetween = useBetween;
+/** Returns true of current viewport width is smaller than provided width */
+function useDown(width) {
+    var _a = useMedia(width), value = _a.value, viewportWidth = _a.viewportWidth;
+    return viewportWidth !== null && value !== null && viewportWidth < value;
+}
+exports.useDown = useDown;
+/** Returns viewport width and provided screen width as a number  */
+function useMedia(width) {
+    var theme = useTheme();
+    var viewportWidth = styled_components_1.useViewportWidth();
+    var valueString = th.screen(width)({ theme: theme });
+    var value = Number(valueString.replace('px', ''));
+    return { value: value, viewportWidth: viewportWidth };
+}
+exports.useMedia = useMedia;
+/**
+ * Retrieves and merges size and variant styling from theme configuration.
+ * @param component - name of any component configured in the theme
+ * @param props - props object of the given component
+ */
+function useStyleConfig(component, props) {
+    var _a;
+    if (props === void 0) { props = {}; }
+    var theme = useTheme();
+    var _b = (_a = theme.components[component]) !== null && _a !== void 0 ? _a : {}, defaultProps = _b.defaultProps, _c = _b.parts, parts = _c === void 0 ? [] : _c, sizes = _b.sizes, variants = _b.variants;
+    var mergedProps = __assign(__assign({}, defaultProps), props);
+    var colorScheme = mergedProps.colorScheme, size = mergedProps.size, variant = mergedProps.variant;
+    return react_1.useMemo(function () {
+        var _a, _b;
+        var sizeStyles = utils_1.runIfFn((_a = sizes === null || sizes === void 0 ? void 0 : sizes[size]) !== null && _a !== void 0 ? _a : {}, mergedProps);
+        var variantStyles = utils_1.runIfFn((_b = variants === null || variants === void 0 ? void 0 : variants[variant]) !== null && _b !== void 0 ? _b : {}, mergedProps);
+        var styles = {};
+        if (parts.length > 0) {
+            parts.forEach(function (part) {
+                var _a, _b;
+                styles[part] = __assign(__assign({}, ((_a = sizeStyles[part]) !== null && _a !== void 0 ? _a : {})), ((_b = variantStyles[part]) !== null && _b !== void 0 ? _b : {}));
+            });
+        }
+        else {
+            styles = __assign(__assign({}, sizeStyles), variantStyles);
+        }
+        return styles;
+    }, [colorScheme, size, variant]);
+}
+exports.useStyleConfig = useStyleConfig;
+/** Returns theme value at the given path */
+function useTh(path, defaultValue) {
+    var theme = useTheme();
+    return th(path, defaultValue)({ theme: theme });
+}
+exports.useTh = useTh;
+/** Returns the theme object with extensions */
+function useTheme() {
+    return styled_components_2.useTheme();
+}
+exports.useTheme = useTheme;
+/** Returns true of current viewport width is larger or equal to provided width */
+function useUp(width) {
+    var _a = useMedia(width), value = _a.value, viewportWidth = _a.viewportWidth;
+    return viewportWidth !== null && value !== null && viewportWidth >= value;
+}
+exports.useUp = useUp;
+/**
+ * Component creation utility, which combines forwardRef, memo and ensures correct typing with all props included.
+ * Config object allows toggling memoization and providing custom 'areEqual' function.
+ */
+function vui(component, config) {
+    var _a = config !== null && config !== void 0 ? config : {}, memoCompare = _a.memoCompare, _b = _a.isMemo, isMemo = _b === void 0 ? true : _b;
+    if (isMemo) {
+        return react_1.default.memo(react_1.default.forwardRef(component), memoCompare);
+    }
+    return react_1.default.forwardRef(component);
+}
+exports.vui = vui;

package/core/vuiProvider.d.ts

@@ -1,9 +1,9 @@
-import { FC } from 'react';
-import { VuiTheme } from '../theme';
-interface VuiProviderProps {
-    globalStyle?: boolean;
-    resetCSS?: boolean;
-    theme?: VuiTheme;
-}
-declare const VuiProvider: FC<VuiProviderProps>;
-export default VuiProvider;
+import { FC } from 'react';
+import { VuiTheme } from '../theme';
+interface VuiProviderProps {
+    globalStyle?: boolean;
+    resetCSS?: boolean;
+    theme?: VuiTheme;
+}
+declare const VuiProvider: FC<VuiProviderProps>;
+export default VuiProvider;

package/core/vuiProvider.js

@@ -1,18 +1,18 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var styled_components_1 = require("styled-components");
-var globalStyle_1 = __importDefault(require("./globalStyle"));
-var resetCSS_1 = __importDefault(require("./resetCSS"));
-var theme_1 = __importDefault(require("../theme"));
-var VuiProvider = function (_a) {
-    var children = _a.children, _b = _a.globalStyle, globalStyle = _b === void 0 ? true : _b, _c = _a.resetCSS, resetCSS = _c === void 0 ? true : _c, _d = _a.theme, theme = _d === void 0 ? theme_1.default : _d;
-    return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme },
-        resetCSS && react_1.default.createElement(resetCSS_1.default, null),
-        globalStyle && react_1.default.createElement(globalStyle_1.default, null),
-        children));
-};
-exports.default = VuiProvider;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = require("styled-components");
+var globalStyle_1 = __importDefault(require("./globalStyle"));
+var resetCSS_1 = __importDefault(require("./resetCSS"));
+var theme_1 = __importDefault(require("../theme"));
+var VuiProvider = function (_a) {
+    var children = _a.children, _b = _a.globalStyle, globalStyle = _b === void 0 ? true : _b, _c = _a.resetCSS, resetCSS = _c === void 0 ? true : _c, _d = _a.theme, theme = _d === void 0 ? theme_1.default : _d;
+    return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme },
+        resetCSS && react_1.default.createElement(resetCSS_1.default, null),
+        globalStyle && react_1.default.createElement(globalStyle_1.default, null),
+        children));
+};
+exports.default = VuiProvider;

package/divider/divider.d.ts

@@ -1,5 +1,5 @@
-import { DividerProps } from './divider.types';
-import { SystemProps } from '../system';
-export declare const DividerBase: import("styled-components").StyledComponent<"hr", import("styled-components").DefaultTheme, SystemProps, never>;
-export declare const Divider: import("../core").VuiComponent<"hr", DividerProps>;
-export default Divider;
+import { DividerProps } from './divider.types';
+import { SystemProps } from '../system';
+export declare const DividerBase: import("styled-components").StyledComponent<"hr", import("styled-components").DefaultTheme, SystemProps, never>;
+export declare const Divider: import("../core").VuiComponent<"hr", DividerProps>;
+export default Divider;

package/divider/divider.js

@@ -1,53 +1,53 @@
-"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.Divider = exports.DividerBase = void 0;
-var react_1 = __importDefault(require("react"));
-var styled_components_1 = __importDefault(require("styled-components"));
-var core_1 = require("../core");
-var system_1 = require("../system");
-var utils_1 = require("../utils");
-exports.DividerBase = styled_components_1.default.hr.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n"], ["\n\t", "\n"])), system_1.system);
-exports.Divider = core_1.vui(function (props, ref) {
-    var _a;
-    var _b = core_1.omitThemingProps(props), className = _b.className, isVertical = _b.isVertical, width = _b.width, rest = __rest(_b, ["className", "isVertical", "width"]);
-    var styles = core_1.useStyleConfig('Divider', props);
-    var borderSide = isVertical ? 'Right' : 'Bottom';
-    var borderWidth = "border" + borderSide + "Width";
-    var height = isVertical ? '100%' : '';
-    var aliasedProps = utils_1.filterUndefined((_a = {},
-        _a[borderWidth] = width !== null && width !== void 0 ? width : 1,
-        _a));
-    return (react_1.default.createElement(exports.DividerBase, __assign({ borderColor: "grey.30", className: utils_1.cs('vui-divider', className), h: height, ref: ref }, styles, aliasedProps, rest)));
-});
-exports.Divider.displayName = 'Divider';
-exports.default = exports.Divider;
-var templateObject_1;
+"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.Divider = exports.DividerBase = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var core_1 = require("../core");
+var system_1 = require("../system");
+var utils_1 = require("../utils");
+exports.DividerBase = styled_components_1.default.hr.withConfig(core_1.forwardPropConfig(system_1.system))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n"], ["\n\t", "\n"])), system_1.system);
+exports.Divider = core_1.vui(function (props, ref) {
+    var _a;
+    var _b = core_1.omitThemingProps(props), className = _b.className, isVertical = _b.isVertical, width = _b.width, rest = __rest(_b, ["className", "isVertical", "width"]);
+    var styles = core_1.useStyleConfig('Divider', props);
+    var borderSide = isVertical ? 'Right' : 'Bottom';
+    var borderWidth = "border" + borderSide + "Width";
+    var height = isVertical ? '100%' : '';
+    var aliasedProps = utils_1.filterUndefined((_a = {},
+        _a[borderWidth] = width !== null && width !== void 0 ? width : 1,
+        _a));
+    return (react_1.default.createElement(exports.DividerBase, __assign({ borderColor: "grey.30", className: utils_1.cs('vui-divider', className), h: height, ref: ref }, styles, aliasedProps, rest)));
+});
+exports.Divider.displayName = 'Divider';
+exports.default = exports.Divider;
+var templateObject_1;

package/divider/divider.types.d.ts

@@ -1,7 +1,7 @@
-import { BordersProps, SystemProps } from '../system';
-import { ThemingProps } from '../theme';
-export interface DividerProps extends SystemProps, ThemingProps<'Divider'> {
-    className?: string;
-    isVertical?: boolean;
-    width?: BordersProps['borderWidth'];
-}
+import { BordersProps, SystemProps } from '../system';
+import { ThemingProps } from '../theme';
+export interface DividerProps extends SystemProps, ThemingProps<'Divider'> {
+    className?: string;
+    isVertical?: boolean;
+    width?: BordersProps['borderWidth'];
+}

package/divider/divider.types.js

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

package/divider/index.d.ts

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