@veracity/vui 0.0.7 → 0.0.9

package/core/utils.js

@@ -41,30 +41,14 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     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.useStyleConfig = exports.th = exports.shouldForwardProp = exports.omitThemingProps = exports.generateCSSVariables = exports.forwardRef = exports.forwardPropConfig = exports.extendTheme = exports.createContext = void 0;
+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_1 = require("styled-components");
-var styles_1 = require("../styles");
+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. */
@@ -82,9 +66,9 @@ function createContext(options) {
     return [Context.Provider, useContext];
 }
 exports.createContext = createContext;
-/** Merges provided theme overrides with default VUI theme */
-function extendTheme(overrides) {
-    return utils_1.mergeWith(theme_1.default, overrides);
+/** Merges provided theme extensions and overrides with default VUI theme */
+function extendTheme(extensions) {
+    return utils_1.mergeWith(theme_1.default, extensions);
 }
 exports.extendTheme = extendTheme;
 /**
@@ -101,35 +85,21 @@ function forwardPropConfig(generator) {
     };
 }
 exports.forwardPropConfig = forwardPropConfig;
-/** Custom implementation of forwardRef, including polymorphic 'as' type based on StyledComponent. */
-function forwardRef(component) {
-    return react_1.default.forwardRef(component);
-}
-exports.forwardRef = forwardRef;
-/** Recursively maps through all theme styles and generates a set of CSS properties */
-function generateCSSVariables() {
-    function computeStyle(name, value) {
-        if (!utils_1.isObj(value))
-            return name + ": " + (typeof value === 'string' ? value : value + "px") + ";\n";
-        return Object.entries(value).reduce(function (str, _a) {
-            var _b = __read(_a, 2), key = _b[0], value = _b[1];
-            return (str += computeStyle(name + "-" + key, value));
-        }, '');
-    }
-    var styles = {
-        animations: styles_1.animations,
-        colors: styles_1.colors,
-        durations: styles_1.durations,
-        fonts: styles_1.fonts,
-        fontSizes: styles_1.fontSizes,
-        fontWeights: styles_1.fontWeights,
-        radii: styles_1.radii,
-        screens: styles_1.screens,
-        shadows: styles_1.shadows
-    };
-    return computeStyle('--vui', styles);
-}
-exports.generateCSSVariables = generateCSSVariables;
+/** 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
@@ -148,20 +118,36 @@ function shouldForwardProp(props) {
     };
 }
 exports.shouldForwardProp = shouldForwardProp;
-/**
- * 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'
- */
-function th(themeKey, path) {
-    return function (_a) {
-        var _b;
-        var theme = _a.theme;
-        var value = (_b = utils_1.get(theme, themeKey + "." + path)) !== null && _b !== void 0 ? _b : path;
-        return typeof value === 'string' ? value : value + 'px';
-    };
-}
+/** 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
@@ -170,7 +156,7 @@ exports.th = th;
 function useStyleConfig(component, props) {
     var _a;
     if (props === void 0) { props = {}; }
-    var theme = styled_components_1.useTheme();
+    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;
@@ -192,3 +178,32 @@ function useStyleConfig(component, props) {
     }, [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.js

@@ -4,9 +4,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
-var styled_components_1 = require("@xstyled/styled-components");
-var resetCSS_1 = __importDefault(require("./resetCSS"));
+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;

package/divider/divider.js

@@ -37,7 +37,7 @@ var core_1 = require("../core");
 var utils_1 = require("../utils");
 var generator = styled_components_1.compose(styled_components_1.borders, styled_components_1.sizing, styled_components_1.space);
 exports.DividerBase = styled_components_2.default.hr.withConfig(core_1.forwardPropConfig(generator))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n"], ["\n\t", "\n"])), generator);
-exports.Divider = core_1.forwardRef(function (props, ref) {
+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);

package/heading/heading.js

@@ -38,8 +38,8 @@ var system_1 = require("../system");
 var utils_1 = require("../utils");
 var generator = styled_components_1.compose(system_1.isTruncated, system_1.maxLines, styled_components_1.sizing, styled_components_1.space, styled_components_1.transitions, styled_components_1.typography);
 exports.HeadingBase = styled_components_2.default.h2.withConfig(core_1.forwardPropConfig(generator))(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t", "\n"], ["\n\t", "\n"])), generator);
-exports.Heading = core_1.forwardRef(function (props, ref) {
-    var _a = core_1.omitThemingProps(props), align = _a.align, casing = _a.casing, className = _a.className, decoration = _a.decoration, weight = _a.weight, rest = __rest(_a, ["align", "casing", "className", "decoration", "weight"]);
+exports.Heading = core_1.vui(function (props, ref) {
+    var _a = core_1.omitThemingProps(props), align = _a.align, casing = _a.casing, children = _a.children, className = _a.className, decoration = _a.decoration, text = _a.text, weight = _a.weight, rest = __rest(_a, ["align", "casing", "children", "className", "decoration", "text", "weight"]);
     var styles = core_1.useStyleConfig('Heading', props);
     var hClassName = props.size ? "vui-" + props.size : '';
     var aliasedProps = utils_1.filterUndefined({
@@ -48,7 +48,7 @@ exports.Heading = core_1.forwardRef(function (props, ref) {
         textDecoration: decoration,
         textTransform: casing
     });
-    return (react_1.default.createElement(exports.HeadingBase, __assign({ className: utils_1.cs('vui-heading', hClassName, className), fontWeight: "demi", ref: ref, transitionDuration: "fast" }, styles, aliasedProps, rest)));
+    return (react_1.default.createElement(exports.HeadingBase, __assign({ className: utils_1.cs('vui-heading', hClassName, className), fontWeight: "demi", ref: ref, transitionDuration: "fast" }, styles, aliasedProps, rest), children !== null && children !== void 0 ? children : text));
 });
 exports.Heading.displayName = 'Heading';
 exports.default = exports.Heading;

package/heading/heading.types.d.ts

@@ -4,6 +4,7 @@ export interface HeadingProps extends HeadingStyleProps, ThemingProps<'Heading'>
     align?: TypographyProps['textAlign'];
     casing?: TypographyProps['textTransform'];
     decoration?: TypographyProps['textDecoration'];
+    text?: number | string;
     weight?: TypographyProps['fontWeight'];
 }
 export interface HeadingStyleProps extends IsTruncatedProps, MaxLinesProps, SizingProps, SpaceProps, TransitionsProps, TypographyProps {

package/heading/headings.d.ts

@@ -1,9 +1,7 @@
 import { HeadingProps } from './heading.types';
-declare type HProps = Omit<HeadingProps, 'size'>;
-export declare const H1: import("../core").VuiComponent<"h1", HProps>;
-export declare const H2: import("../core").VuiComponent<"h2", HProps>;
-export declare const H3: import("../core").VuiComponent<"h3", HProps>;
-export declare const H4: import("../core").VuiComponent<"h4", HProps>;
-export declare const H5: import("../core").VuiComponent<"h5", HProps>;
-export declare const H6: import("../core").VuiComponent<"h6", HProps>;
-export {};
+export declare const H1: import("../core").VuiComponent<"h1", HeadingProps>;
+export declare const H2: import("../core").VuiComponent<"h2", HeadingProps>;
+export declare const H3: import("../core").VuiComponent<"h3", HeadingProps>;
+export declare const H4: import("../core").VuiComponent<"h4", HeadingProps>;
+export declare const H5: import("../core").VuiComponent<"h5", HeadingProps>;
+export declare const H6: import("../core").VuiComponent<"h6", HeadingProps>;

package/heading/headings.js

@@ -18,9 +18,9 @@ exports.H6 = exports.H5 = exports.H4 = exports.H3 = exports.H2 = exports.H1 = vo
 var react_1 = __importDefault(require("react"));
 var heading_1 = __importDefault(require("./heading"));
 var core_1 = require("../core");
-exports.H1 = core_1.forwardRef(function (props, ref) { return react_1.default.createElement(heading_1.default, __assign({ ref: ref, size: "h1" }, props)); });
-exports.H2 = core_1.forwardRef(function (props, ref) { return react_1.default.createElement(heading_1.default, __assign({ ref: ref, size: "h2" }, props)); });
-exports.H3 = core_1.forwardRef(function (props, ref) { return react_1.default.createElement(heading_1.default, __assign({ ref: ref, size: "h3" }, props)); });
-exports.H4 = core_1.forwardRef(function (props, ref) { return react_1.default.createElement(heading_1.default, __assign({ ref: ref, size: "h4" }, props)); });
-exports.H5 = core_1.forwardRef(function (props, ref) { return react_1.default.createElement(heading_1.default, __assign({ ref: ref, size: "h5" }, props)); });
-exports.H6 = core_1.forwardRef(function (props, ref) { return react_1.default.createElement(heading_1.default, __assign({ ref: ref, size: "h6" }, props)); });
+exports.H1 = core_1.vui(function (props, ref) { return react_1.default.createElement(heading_1.default, __assign({ ref: ref, size: "h1" }, props)); });
+exports.H2 = core_1.vui(function (props, ref) { return react_1.default.createElement(heading_1.default, __assign({ ref: ref, size: "h2" }, props)); });
+exports.H3 = core_1.vui(function (props, ref) { return react_1.default.createElement(heading_1.default, __assign({ ref: ref, size: "h3" }, props)); });
+exports.H4 = core_1.vui(function (props, ref) { return react_1.default.createElement(heading_1.default, __assign({ ref: ref, size: "h4" }, props)); });
+exports.H5 = core_1.vui(function (props, ref) { return react_1.default.createElement(heading_1.default, __assign({ ref: ref, size: "h5" }, props)); });
+exports.H6 = core_1.vui(function (props, ref) { return react_1.default.createElement(heading_1.default, __assign({ ref: ref, size: "h6" }, props)); });

package/icon/helpers.d.ts

@@ -1,14 +1,8 @@
-import { IconProps } from './icon.types';
+import { GetIconDetailsResult, IconProp } from './icon.types';
 /**
- * If given icon is an icon definition, return an object with properties needed
- * to render a custom SVG. 'viewBox' for SVG element, 'd' for path element.
+ * Returns an object with either 'src' or 'customIcon', depending on whether the provided icon is:
+ * - string and in not library: 	CDN url
+ * - string and in library: 			icon definition object
+ * - not string: 									icon definition object
  */
-export declare function getCustomIcon(icon: IconProps['icon']): {
-    d: string[];
-    name: string;
-    pathProps: any[];
-    svgProps: import("..").Dict<any>;
-    viewBox: string;
-} | undefined;
-/** If given icon is a string, return its CDN url. */
-export declare function getIconSrc(icon: IconProps['icon']): string | undefined;
+export declare function getIconDetails(icon?: IconProp): GetIconDetailsResult;

package/icon/helpers.js

@@ -1,4 +1,15 @@
 "use strict";
+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 __read = (this && this.__read) || function (o, n) {
     var m = typeof Symbol === "function" && o[Symbol.iterator];
     if (!m) return o;
@@ -16,31 +27,37 @@ var __read = (this && this.__read) || function (o, n) {
     return ar;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getIconSrc = exports.getCustomIcon = void 0;
+exports.getIconDetails = void 0;
 var core_1 = require("../core");
+var icons_1 = require("../icons");
 /**
- * If given icon is an icon definition, return an object with properties needed
- * to render a custom SVG. 'viewBox' for SVG element, 'd' for path element.
+ * Returns an object with either 'src' or 'customIcon', depending on whether the provided icon is:
+ * - string and in not library: 	CDN url
+ * - string and in library: 			icon definition object
+ * - not string: 									icon definition object
  */
-function getCustomIcon(icon) {
-    if (!icon || typeof icon === 'string')
-        return;
-    var _a = icon, details = _a.details, _b = _a.name, name = _b === void 0 ? '' : _b, _c = _a.pathProps, pathProps = _c === void 0 ? [] : _c, _d = _a.svgProps, svgProps = _d === void 0 ? {} : _d;
-    var _e = __read(details, 5), width = _e[0], height = _e[1], d = _e[4];
-    return {
+function getIconDetails(icon) {
+    if (!icon)
+        return {};
+    // Compute CDN url if icon is a string and not in library cache
+    if (typeof icon === 'string' && !icons_1.library.has(icon)) {
+        var prefix = icon.slice(0, 3);
+        return {
+            src: core_1.cdnUrl + "/common/icons/ui/" + prefix + "/" + icon + ".svg"
+        };
+    }
+    // If icon is a string, get its definition from library, else icon itself is a definition obj
+    var iconDefinition = (typeof icon === 'string' ? icons_1.library.get(icon) : icon);
+    var details = iconDefinition.details, _a = iconDefinition.name, name = _a === void 0 ? '' : _a, _b = iconDefinition.pathProps, pathProps = _b === void 0 ? [] : _b, _c = iconDefinition.svgProps, svgProps = _c === void 0 ? {} : _c;
+    var _d = __read(details, 5), width = _d[0], height = _d[1], d = _d[4];
+    var viewBox = "0 0 " + width + " " + height;
+    var customIcon = {
         d: Array.isArray(d) ? d : [d],
-        name: name,
         pathProps: Array.isArray(pathProps) ? pathProps : [pathProps],
-        svgProps: svgProps,
-        viewBox: "0 0 " + width + " " + height
+        svgProps: __assign({ 'data-name': name, viewBox: viewBox }, svgProps)
+    };
+    return {
+        customIcon: customIcon
     };
 }
-exports.getCustomIcon = getCustomIcon;
-/** If given icon is a string, return its CDN url. */
-function getIconSrc(icon) {
-    if (!icon || typeof icon !== 'string')
-        return;
-    var prefix = icon.slice(0, 3);
-    return core_1.cdnUrl + "/common/icons/ui/" + prefix + "/" + icon + ".svg";
-}
-exports.getIconSrc = getIconSrc;
+exports.getIconDetails = getIconDetails;

package/icon/icon.d.ts

@@ -1,3 +1,3 @@
 import { IconProps } from './icon.types';
-declare const Icon: import("../core").VuiComponent<"svg", IconProps>;
+export declare const Icon: import("../core").VuiComponent<"svg", IconProps>;
 export default Icon;

package/icon/icon.js

@@ -25,25 +25,23 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Icon = void 0;
 var react_1 = __importDefault(require("react"));
 var helpers_1 = require("./helpers");
 var core_1 = require("../core");
 var svg_1 = require("../svg");
 var utils_1 = require("../utils");
-var Icon = core_1.forwardRef(function (props, ref) {
+exports.Icon = core_1.vui(function (props, ref) {
     var _a = core_1.omitThemingProps(props), className = _a.className, icon = _a.icon, rotate = _a.rotate, scale = _a.scale, rest = __rest(_a, ["className", "icon", "rotate", "scale"]);
     var styles = core_1.useStyleConfig('Icon', props);
-    var customIcon = helpers_1.getCustomIcon(icon);
-    var customIconProps = customIcon
-        ? __assign({ 'data-name': customIcon.name, viewBox: customIcon.viewBox }, customIcon.svgProps) : {};
+    var _b = helpers_1.getIconDetails(icon), customIcon = _b.customIcon, src = _b.src;
     var scaledSize = scale ? 16 * scale : undefined;
-    var src = helpers_1.getIconSrc(icon);
     var aliasedProps = utils_1.filterUndefined({
         h: scaledSize,
         transform: rotate !== undefined ? "rotate(" + rotate + "deg)" : undefined,
         w: scaledSize
     });
-    return (react_1.default.createElement(svg_1.Svg, __assign({ className: utils_1.cs('vui-icon', className), display: "inline-flex", flexShrink: 0, ref: ref, src: src }, styles, customIconProps, aliasedProps, rest), customIcon === null || customIcon === void 0 ? void 0 : customIcon.d.map(function (d, i) { return (react_1.default.createElement("path", __assign({ d: d, fill: "currentColor", key: i }, customIcon.pathProps[i]))); })));
+    return (react_1.default.createElement(svg_1.Svg, __assign({ className: utils_1.cs('vui-icon', className), display: "inline-flex", flexShrink: 0, ref: ref, src: src }, styles, customIcon === null || customIcon === void 0 ? void 0 : customIcon.svgProps, aliasedProps, rest), customIcon === null || customIcon === void 0 ? void 0 : customIcon.d.map(function (d, i) { return (react_1.default.createElement("path", __assign({ d: d, fill: "currentColor", key: i }, customIcon.pathProps[i]))); })));
 });
-Icon.displayName = 'Icon';
-exports.default = Icon;
+exports.Icon.displayName = 'Icon';
+exports.default = exports.Icon;

package/icon/icon.types.d.ts

@@ -1,22 +1,18 @@
-import { DefaultIcon } from './icons/types';
-import { SvgProps } from '../svg';
+/// <reference types="react" />
+import { PropsOf } from '../core';
+import { IconDefinition, VuiIcon } from '../icons';
+import Svg, { SvgProps } from '../svg';
 import { ThemingProps } from '../theme';
-import { AnyString, Dict } from '../utils';
-export interface IconDefinition {
-    details: IconDetails;
-    name?: string;
-    pathProps?: Dict | Dict[];
-    svgProps?: Dict;
+import { AnyString } from '../utils';
+export interface GetIconDetailsResult {
+    customIcon?: {
+        d: string[];
+        pathProps: React.SVGProps<SVGPathElement>[];
+        svgProps: PropsOf<typeof Svg>;
+    };
+    src?: string;
 }
-export declare type IconDetails = [
-    number,
-    number,
-    string[],
-    string,
-    // unicode
-    string | string[]
-];
-export declare type IconProp = DefaultIcon | IconDefinition | AnyString;
+export declare type IconProp = VuiIcon | IconDefinition | AnyString;
 export interface IconProps extends SvgProps, ThemingProps<'Icon'> {
     icon?: IconProp;
     rotate?: number;

package/icon/index.d.ts

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

package/icon/index.js

@@ -13,9 +13,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = exports.Icon = void 0;
+exports.default = void 0;
+__exportStar(require("./icon"), exports);
 __exportStar(require("./icon.types"), exports);
 var icon_1 = require("./icon");
-Object.defineProperty(exports, "Icon", { enumerable: true, get: function () { return __importDefault(icon_1).default; } });
-var icon_2 = require("./icon");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(icon_2).default; } });
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(icon_1).default; } });

package/icons/baseIcons/cui/cuiCheckboxIndeterminate.d.ts

@@ -0,0 +1,3 @@
+import { IconDefinition } from '../../types';
+declare const _default: IconDefinition;
+export default _default;

package/icons/baseIcons/cui/cuiCheckboxSelected.d.ts

@@ -0,0 +1,3 @@
+import { IconDefinition } from '../../types';
+declare const _default: IconDefinition;
+export default _default;

package/icons/baseIcons/cui/cuiCheckboxUnselected.d.ts

@@ -0,0 +1,3 @@
+import { IconDefinition } from '../../types';
+declare const _default: IconDefinition;
+export default _default;

package/icons/baseIcons/cui/cuiRadioSelected.d.ts

@@ -0,0 +1,3 @@
+import { IconDefinition } from '../../types';
+declare const _default: IconDefinition;
+export default _default;

package/icons/baseIcons/cui/cuiRadioUnselected.d.ts

@@ -0,0 +1,3 @@
+import { IconDefinition } from '../../types';
+declare const _default: IconDefinition;
+export default _default;

package/icons/baseIcons/cul/culCovid.d.ts

@@ -0,0 +1,3 @@
+import { IconDefinition } from '../../types';
+declare const _default: IconDefinition;
+export default _default;

package/icons/baseIcons/cul/culDeepSearch.d.ts

@@ -0,0 +1,3 @@
+import { IconDefinition } from '../../types';
+declare const _default: IconDefinition;
+export default _default;

package/icons/baseIcons/cul/culDotsMenu.d.ts

@@ -0,0 +1,3 @@
+import { IconDefinition } from '../../types';
+declare const _default: IconDefinition;
+export default _default;

package/icons/baseIcons/cul/culGlobePlus.d.ts

@@ -0,0 +1,3 @@
+import { IconDefinition } from '../../types';
+declare const _default: IconDefinition;
+export default _default;

package/icons/baseIcons/cul/culListDense.d.ts

@@ -0,0 +1,3 @@
+import { IconDefinition } from '../../types';
+declare const _default: IconDefinition;
+export default _default;

package/icons/baseIcons/cul/culMapMarkerStar.d.ts

@@ -0,0 +1,3 @@
+import { IconDefinition } from '../../types';
+declare const _default: IconDefinition;
+export default _default;

package/icons/baseIcons/cul/culPlusThin.d.ts

@@ -0,0 +1,3 @@
+import { IconDefinition } from '../../types';
+declare const _default: IconDefinition;
+export default _default;

package/icons/baseIcons/cul/culScreenshot.d.ts

@@ -0,0 +1,3 @@
+import { IconDefinition } from '../../types';
+declare const _default: IconDefinition;
+export default _default;

package/icons/baseIcons/cul/culScreenshotAlt.d.ts

@@ -0,0 +1,3 @@
+import { IconDefinition } from '../../types';
+declare const _default: IconDefinition;
+export default _default;

package/icons/baseIcons/cul/culShortcut.d.ts

@@ -0,0 +1,3 @@
+import { IconDefinition } from '../../types';
+declare const _default: IconDefinition;
+export default _default;

package/icons/baseIcons/cul/culTimesThin.d.ts

@@ -0,0 +1,3 @@
+import { IconDefinition } from '../../types';
+declare const _default: IconDefinition;
+export default _default;

package/icons/baseIcons/cul/culTransformer.d.ts

@@ -0,0 +1,3 @@
+import { IconDefinition } from '../../types';
+declare const _default: IconDefinition;
+export default _default;

package/icons/baseIcons/cul/culUserTransfer.d.ts

@@ -0,0 +1,3 @@
+import { IconDefinition } from '../../types';
+declare const _default: IconDefinition;
+export default _default;

package/icons/baseIcons/cul/culVessel.d.ts

@@ -0,0 +1,3 @@
+import { IconDefinition } from '../../types';
+declare const _default: IconDefinition;
+export default _default;

package/icons/baseIcons/cul/culVesselGroup.d.ts

@@ -0,0 +1,3 @@
+import { IconDefinition } from '../../types';
+declare const _default: IconDefinition;
+export default _default;

package/icons/baseIcons/cus/cusCheckboxSelected.d.ts

@@ -0,0 +1,3 @@
+import { IconDefinition } from '../../types';
+declare const _default: IconDefinition;
+export default _default;

package/icons/baseIcons/cus/cusDotFull.d.ts

@@ -0,0 +1,3 @@
+import { IconDefinition } from '../../types';
+declare const _default: IconDefinition;
+export default _default;

package/icons/baseIcons/cus/cusDotFullAlt.d.ts

@@ -0,0 +1,3 @@
+import { IconDefinition } from '../../types';
+declare const _default: IconDefinition;
+export default _default;

package/icons/baseIcons/cus/cusDotsMenu.d.ts

@@ -0,0 +1,3 @@
+import { IconDefinition } from '../../types';
+declare const _default: IconDefinition;
+export default _default;

package/icons/baseIcons/cus/cusRadio.d.ts

@@ -0,0 +1,3 @@
+import { IconDefinition } from '../../types';
+declare const _default: IconDefinition;
+export default _default;

package/icons/baseIcons/cus/cusSquareMinus.d.ts

@@ -0,0 +1,3 @@
+import { IconDefinition } from '../../types';
+declare const _default: IconDefinition;
+export default _default;

package/icons/baseIcons/cus/cusTransformer.d.ts

@@ -0,0 +1,3 @@
+import { IconDefinition } from '../../types';
+declare const _default: IconDefinition;
+export default _default;

package/icons/baseIcons/cus/cusVessel.d.ts

@@ -0,0 +1,3 @@
+import { IconDefinition } from '../../types';
+declare const _default: IconDefinition;
+export default _default;

package/icons/baseIcons/fab/fabApplePay.d.ts

@@ -0,0 +1,3 @@
+import { IconDefinition } from '../../types';
+declare const _default: IconDefinition;
+export default _default;