@vitus-labs/rocketstories 0.54.0 → 0.57.0-alpha.1

package/lib/vitus-labs-rocketstories.js

@@ -13,51 +13,86 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var hoistNonReactStatics__default = /*#__PURE__*/_interopDefaultLegacy(hoistNonReactStatics);
 
+const PSEUDO_KEYS = ['hover', 'active', 'focus', 'pressed'];
+const THEME_MODES = {
+    light: true,
+    dark: true,
+};
+const THEME_MODES_INVERSED = {
+    dark: 'light',
+    light: 'dark',
+};
+const CONFIG_KEYS = [
+    'provider',
+    'consumer',
+    'DEBUG',
+    'name',
+    'component',
+    'inversed',
+    'passProps',
+    'styled',
+];
+const STYLING_KEYS = ['theme', 'attrs', 'styles'];
+const STATIC_KEYS = [...STYLING_KEYS, 'compose'];
+const ALL_RESERVED_KEYS = [
+    ...Object.keys(THEME_MODES),
+    ...CONFIG_KEYS,
+    ...STATIC_KEYS,
+];
+
+const context$1 = React.createContext({});
+const useLocalContext = (consumer) => {
+    const ctx = consumer ? React.useContext(context$1) : {};
+    const result = consumer ? consumer((callback) => callback(ctx)) : {};
+    return { pseudo: {}, ...result };
+};
+const LocalProvider = context$1.Provider;
+
 const handleEvent = (e) => {
     e.preventDefault();
     e.stopPropagation();
 };
-const usePseudoState = (props) => {
+const usePseudoState = ({ onBlur, onFocus, onMouseDown, onMouseEnter, onMouseLeave, onMouseUp, }) => {
     const [hover, setHover] = React.useState(false);
     const [focus, setFocus] = React.useState(false);
     const [pressed, setPressed] = React.useState(false);
-    const onMouseEnter = React.useCallback((e) => {
+    const handleOnMouseEnter = React.useCallback((e) => {
         handleEvent(e);
         setHover(true);
-        if (props.onMouseEnter)
-            props.onMouseEnter(e);
-    }, [props.onMouseEnter]);
-    const onMouseLeave = React.useCallback((e) => {
+        if (onMouseEnter)
+            onMouseEnter(e);
+    }, [onMouseEnter]);
+    const handleOnMouseLeave = React.useCallback((e) => {
         handleEvent(e);
         setHover(false);
         setPressed(false);
-        if (props.onMouseLeave)
-            props.onMouseLeave(e);
-    }, [props.onMouseLeave]);
-    const onMouseDown = React.useCallback((e) => {
+        if (onMouseLeave)
+            onMouseLeave(e);
+    }, [onMouseLeave]);
+    const handleOnMouseDown = React.useCallback((e) => {
         handleEvent(e);
         setPressed(true);
-        if (props.onMouseDown)
-            props.onMouseDown(e);
-    }, [props.onMouseDown]);
-    const onMouseUp = React.useCallback((e) => {
+        if (onMouseDown)
+            onMouseDown(e);
+    }, [onMouseDown]);
+    const handleOnMouseUp = React.useCallback((e) => {
         handleEvent(e);
         setPressed(false);
-        if (props.onMouseUp)
-            props.onMouseUp(e);
-    }, [props.onMouseUp]);
-    const onFocus = React.useCallback((e) => {
+        if (onMouseUp)
+            onMouseUp(e);
+    }, [onMouseUp]);
+    const handleOnFocus = React.useCallback((e) => {
         handleEvent(e);
         setFocus(true);
-        if (props.onFocus)
-            props.onFocus(e);
-    }, [props.onFocus]);
-    const onBlur = React.useCallback((e) => {
+        if (onFocus)
+            onFocus(e);
+    }, [onFocus]);
+    const handleOnBlur = React.useCallback((e) => {
         handleEvent(e);
         setFocus(false);
-        if (props.onBlur)
-            props.onBlur(e);
-    }, [props.onBlur]);
+        if (onBlur)
+            onBlur(e);
+    }, [onBlur]);
     return {
         state: {
             hover,
@@ -65,206 +100,69 @@ const usePseudoState = (props) => {
             pressed,
         },
         events: {
-            onMouseEnter,
-            onMouseLeave,
-            onMouseDown,
-            onMouseUp,
-            onFocus,
-            onBlur,
+            onMouseEnter: handleOnMouseEnter,
+            onMouseLeave: handleOnMouseLeave,
+            onMouseDown: handleOnMouseDown,
+            onMouseUp: handleOnMouseUp,
+            onFocus: handleOnFocus,
+            onBlur: handleOnBlur,
         },
     };
 };
 
-/* eslint-disable import/prefer-default-export */
-const chainOptions = (opts, defaultOpts = []) => {
-    const result = [...defaultOpts];
-    if (typeof opts === 'function')
-        result.push(opts);
-    else if (typeof opts === 'object')
-        result.push(() => opts);
-    return result;
-};
-const removeNullableValues = (obj) => Object.entries(obj)
-    .filter(([, v]) => v != null && v !== false)
-    .reduce((acc, [k, v]) => ({ ...acc, [k]: v }), {});
-
-const isValidKey = (value) => value !== undefined && value !== null && value !== false;
-const isMultiKey = (value) => {
-    if (typeof value === 'object')
-        return [true, core.get(value, 'propName')];
-    return [false, value];
-};
-const calculateDimensionsMap = ({ themes, useBooleans, }) => {
-    const result = { keysMap: {}, keywords: {} };
-    if (core.isEmpty(themes))
-        return result;
-    return Object.entries(themes).reduce((accumulator, [key, value]) => {
-        const { keysMap, keywords } = accumulator;
-        keywords[key] = true;
-        Object.entries(value).forEach(([itemKey, itemValue]) => {
-            if (!isValidKey(itemValue))
-                return;
-            if (useBooleans) {
-                keywords[itemKey] = true;
-            }
-            core.set(keysMap, [key, itemKey], true);
-        });
-        return accumulator;
-    }, result);
-};
-const getKeys = (obj) => Object.keys(obj);
-const getValues = (obj) => Object.values(obj);
-const getDimensionsValues = (obj) => getValues(obj).map((item) => {
-    if (typeof item === 'object') {
-        return item.propName;
-    }
-    return item;
-});
-const getMultipleDimensions = (obj) => getValues(obj).reduce((accumulator, value) => {
-    if (typeof value === 'object') {
-        // eslint-disable-next-line no-param-reassign
-        if (value.multi === true)
-            accumulator[value.propName] = true;
-    }
-    return accumulator;
-}, {});
-
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// --------------------------------------------------------
-// theme mode callback
-// --------------------------------------------------------
-const themeModeCb = (...params) => (mode) => {
-    if (!mode || mode === 'light')
-        return params[0];
-    return params[1];
-};
-const calculateDimensionThemes = (theme, options, cb) => {
-    const result = {};
-    if (core.isEmpty(options.dimensions))
-        return result;
-    return Object.entries(options.dimensions).reduce((accumulator, [key, value]) => {
-        const [, dimension] = isMultiKey(value);
-        const helper = options[key];
-        if (Array.isArray(helper) && helper.length > 0) {
-            const finalDimensionThemes = calculateChainOptions$1(helper, [
-                theme,
-                cb,
-                core.config.css,
-            ]);
-            // eslint-disable-next-line no-param-reassign
-            accumulator[dimension] = removeNullableValues(finalDimensionThemes);
-        }
-        return accumulator;
-    }, result);
-};
-const calculateChainOptions$1 = (options, args) => {
-    const result = {};
-    if (core.isEmpty(options))
-        return result;
-    return options.reduce((acc, item) => core.merge(acc, item(...args)), result);
-    // using this does not allow overriding themes properly
-    // return removeAllEmptyValues(helper)
-};
-const calculateTheme = ({ rocketstate, themes, baseTheme, }) => {
-    // generate final theme which will be passed to styled component
-    let finalTheme = { ...baseTheme };
-    Object.entries(rocketstate).forEach(([key, value]) => {
-        const keyTheme = themes[key];
-        if (Array.isArray(value)) {
-            value.forEach((item) => {
-                finalTheme = core.merge({}, finalTheme, keyTheme[item]);
-            });
-        }
-        else {
-            finalTheme = core.merge({}, finalTheme, keyTheme[value]);
-        }
-    });
-    return finalTheme;
-};
-const calculateThemeMode = (themes, variant) => {
-    const callback = themeModeCb().toString();
-    const isModeCallback = (value) => value.toString() === callback;
-    const result = {};
-    Object.entries(themes).forEach(([key, value]) => {
-        if (typeof value === 'object' && value !== null) {
-            result[key] = calculateThemeMode(value, variant);
-        }
-        else if (typeof value === 'function' && isModeCallback(value)) {
-            result[key] = value(variant);
-        }
-        else {
-            result[key] = value;
-        }
-    });
-    return result;
-};
-
-const useTheme = ({ theme, options, cb }) => {
-    const themes = calculateDimensionThemes(theme, options, cb);
-    const { keysMap, keywords } = calculateDimensionsMap({
-        themes,
-        useBooleans: options.useBooleans,
-    });
-    // eslint-disable-next-line no-underscore-dangle
-    const __ROCKETSTYLE__ = {
-        dimensions: keysMap,
-        reservedPropNames: keywords,
-        baseTheme: calculateChainOptions$1(options.theme, [theme, cb, core.config.css]),
-        themes,
-    };
-    return __ROCKETSTYLE__;
+const useRocketstyleRef = ({ $rocketstyleRef, ref }) => {
+    const internalRef = React.useRef(null);
+    React.useImperativeHandle($rocketstyleRef, () => internalRef.current);
+    React.useImperativeHandle(ref, () => internalRef.current);
+    return internalRef;
 };
 
-const PSEUDO_KEYS = ['hover', 'active', 'focus', 'pressed'];
-const THEME_MODES = {
-    light: true,
-    dark: true,
-};
-const THEME_MODES_INVERSED = {
-    dark: 'light',
-    light: 'dark',
-};
-const CONFIG_KEYS = [
-    'provider',
-    'consumer',
-    'DEBUG',
-    'name',
-    'component',
-    'inversed',
-    'passProps',
-    'styled',
-];
-const STYLING_KEYS = ['theme', 'attrs', 'styles'];
-const STATIC_KEYS = [...STYLING_KEYS, 'compose'];
-const ALL_RESERVED_KEYS = [
-    ...Object.keys(THEME_MODES),
-    ...CONFIG_KEYS,
-    ...STATIC_KEYS,
-];
-
-const useThemeOptions = ({ inversed }) => {
-    const { theme, mode: ctxMode, isDark: ctxDark } = React.useContext(core.context);
+const useThemeAttrs = ({ inversed }) => {
+    const { theme, mode: ctxMode = 'light', isDark: ctxDark, } = React.useContext(core.context) || {};
     const mode = inversed ? THEME_MODES_INVERSED[ctxMode] : ctxMode;
     const isDark = inversed ? !ctxDark : ctxDark;
     const isLight = !isDark;
     return { theme, mode, isDark, isLight };
 };
 
-const pickStyledProps = (props, keywords) => {
-    const result = {};
-    Object.entries(props).forEach(([key, value]) => {
-        if (keywords[key])
-            result[key] = value;
+const RocketStyleProviderComponent = (WrappedComponent) => React.forwardRef(({ onMouseEnter, onMouseLeave, onMouseUp, onMouseDown, onFocus, onBlur, $rocketstate, ...props }, ref) => {
+    // pseudo hook to detect states hover / pressed / focus
+    const pseudo = usePseudoState({
+        onMouseEnter,
+        onMouseLeave,
+        onMouseUp,
+        onMouseDown,
+        onFocus,
+        onBlur,
     });
-    return result;
-};
+    const updatedState = React.useMemo(() => ({
+        ...$rocketstate,
+        pseudo: { ...$rocketstate.pseudo, ...pseudo.state },
+    }), [$rocketstate, pseudo]);
+    return (React__default["default"].createElement(LocalProvider, { value: updatedState },
+        React__default["default"].createElement(WrappedComponent, { ...props, ...pseudo.events, ref: ref, "$rocketstate": updatedState })));
+});
+
+class ThemeManager {
+    baseTheme = new WeakMap();
+    dimensionsThemes = new WeakMap();
+    modeBaseTheme = { light: new WeakMap(), dark: new WeakMap() };
+    modeDimensionTheme = { light: new WeakMap(), dark: new WeakMap() };
+}
+
+/* eslint-disable no-param-reassign */
+const pickStyledAttrs = (props, keywords) => Object.keys(props).reduce((acc, key) => {
+    if (keywords[key])
+        acc[key] = props[key];
+    return acc;
+}, {});
 const calculateChainOptions = (options) => (args) => {
     const result = {};
     if (core.isEmpty(options))
         return result;
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
-    return options.reduce((acc, item) => Object.assign(acc, item(...args)), result);
+    return options.reduce((acc, item) => Object.assign(acc, item(...args)), {});
 };
 const calculateStylingAttrs = ({ useBooleans, multiKeys }) => ({ props, dimensions }) => {
     const result = {};
@@ -325,14 +223,14 @@ const rocketStyleHOC = ({ inversed, attrs }) => {
     // --------------------------------------------------
     const _calculateChainOptions = calculateChainOptions(attrs);
     const Enhanced = (WrappedComponent) => React.forwardRef((props, ref) => {
-        const { theme, mode, isDark, isLight } = useThemeOptions({
+        const { theme, mode, isDark, isLight } = useThemeAttrs({
             inversed,
         });
         const calculatedAttrs = _calculateChainOptions([
             props,
             theme,
             {
-                renderContent: core.renderContent,
+                render: core.render,
                 mode,
                 isDark,
                 isLight,
@@ -343,61 +241,178 @@ const rocketStyleHOC = ({ inversed, attrs }) => {
     return Enhanced;
 };
 
-var localContext = React.createContext({});
-
-const RocketStyleProviderComponent = (WrappedComponent) => React.forwardRef(({ onMouseEnter, onMouseLeave, onMouseUp, onMouseDown, onFocus, onBlur, $rocketstate, ...props }, ref) => {
-    // pseudo hook to detect states hover / pressed / focus
-    const pseudo = usePseudoState({
-        onMouseEnter,
-        onMouseLeave,
-        onMouseUp,
-        onMouseDown,
-        onFocus,
-        onBlur,
+const createStaticsChainingEnhancers = ({ context, dimensionKeys, func, options, }) => {
+    const keys = [...dimensionKeys, ...STATIC_KEYS];
+    keys.forEach((item) => {
+        // eslint-disable-next-line no-param-reassign
+        context[item] = (props) => func({ [item]: props }, options);
     });
-    const updatedState = React.useMemo(() => ({
-        ...$rocketstate,
-        pseudo: { ...$rocketstate.pseudo, ...pseudo.state },
-    }), [$rocketstate, pseudo]);
-    return (React__default["default"].createElement(localContext.Provider, { value: updatedState },
-        React__default["default"].createElement(WrappedComponent, { ...props, ...pseudo.events, ref: ref, "$rocketstate": updatedState })));
-});
-
-const calculateStyles = (styles, css) => {
-    if (!styles)
-        return [];
-    return styles.map((item) => item(css));
+};
+const createStaticsEnhancers = ({ context, options, }) => {
+    if (!core.isEmpty(options)) {
+        Object.assign(context, options);
+    }
 };
 
-/* eslint-disable no-underscore-dangle */
-const orOptions = (keys, opts, defaultOpts) => keys.reduce((acc, item) => ({ ...acc, [item]: opts[item] || defaultOpts[item] }), {});
-const chainReservedOptions = (keys, opts, defaultOpts) => keys.reduce((acc, item) => ({
-    ...acc,
-    [item]: chainOptions(opts[item], defaultOpts[item]),
-}), {});
+/* eslint-disable import/prefer-default-export */
+const removeNullableValues = (obj) => Object.entries(obj)
+    .filter(([, v]) => v != null && v !== false)
+    .reduce((acc, [k, v]) => ({ ...acc, [k]: v }), {});
 // --------------------------------------------------------
-// helpers for create statics chainin methods on component
+// Remove All Empty Values
 // --------------------------------------------------------
-const createStaticsChainingEnhancers = ({ context, dimensionKeys, func, opts, }) => {
-    dimensionKeys.forEach((item) => {
-        // eslint-disable-next-line no-param-reassign
-        context[item] = (props) => func({ [item]: props }, opts);
-    });
+// type RemoveAllEmptyValues = (obj: Record<string, any>) => Record<string, any>
+// export const removeAllEmptyValues: RemoveAllEmptyValues = (obj) =>
+//   Object.entries(obj)
+//     .filter(([, v]) => v != null)
+//     .reduce(
+//       (acc, [k, v]) => ({
+//         ...acc,
+//         [k]: typeof v === 'object' ? removeAllEmptyValues(v) : v,
+//       }),
+//       {}
+//     )
+
+const isValidKey = (value) => value !== undefined && value !== null && value !== false;
+const isMultiKey = (value) => {
+    if (typeof value === 'object' && value !== null)
+        return [true, core.get(value, 'propName')];
+    return [false, value];
+};
+const getDimensionsMap = ({ themes, useBooleans }) => {
+    const result = {
+        keysMap: {},
+        keywords: {},
+    };
+    if (core.isEmpty(themes))
+        return result;
+    return Object.entries(themes).reduce((accumulator, [key, value]) => {
+        const { keysMap, keywords } = accumulator;
+        keywords[key] = true;
+        Object.entries(value).forEach(([itemKey, itemValue]) => {
+            if (!isValidKey(itemValue))
+                return;
+            if (useBooleans) {
+                keywords[itemKey] = true;
+            }
+            core.set(keysMap, [key, itemKey], true);
+        });
+        return accumulator;
+    }, result);
 };
+const getKeys = (obj) => Object.keys(obj);
+const getValues = (obj) => Object.values(obj);
+const getDimensionsValues = (obj) => getValues(obj).map((item) => {
+    if (typeof item === 'object') {
+        return item.propName;
+    }
+    return item;
+});
+const getMultipleDimensions = (obj) => getValues(obj).reduce((accumulator, value) => {
+    if (typeof value === 'object') {
+        // eslint-disable-next-line no-param-reassign
+        if (value.multi === true)
+            accumulator[value.propName] = true;
+    }
+    return accumulator;
+}, {});
+
+/* eslint-disable no-param-reassign */
 // --------------------------------------------------------
-// helpers for create statics on component
+// Theme Mode Callback
 // --------------------------------------------------------
-const createStaticsEnhancers = ({ context, opts }) => {
-    if (!core.isEmpty(opts)) {
-        Object.assign(context, opts);
+const themeModeCallback = (light, dark) => (mode) => {
+    if (!mode || mode === 'light')
+        return light;
+    return dark;
+};
+themeModeCallback.isMode = true;
+const isModeCallback = (value) => typeof value === 'function' && value.isMode;
+const getThemeFromChain = (options, theme) => {
+    const result = {};
+    if (!options || core.isEmpty(options))
+        return result;
+    return options.reduce((acc, item) => core.merge(acc, item(theme, themeModeCallback, core.config.css)), result);
+};
+const getDimensionThemes = (theme, options) => {
+    const result = {};
+    if (core.isEmpty(options.dimensions))
+        return result;
+    return Object.entries(options.dimensions).reduce((acc, [key, value]) => {
+        const [, dimension] = isMultiKey(value);
+        const helper = options[key];
+        if (Array.isArray(helper) && helper.length > 0) {
+            const finalDimensionThemes = getThemeFromChain(helper, theme);
+            // eslint-disable-next-line no-param-reassign
+            acc[dimension] = removeNullableValues(finalDimensionThemes);
+        }
+        return acc;
+    }, result);
+};
+const getTheme$1 = ({ rocketstate, themes, baseTheme }) => {
+    // generate final theme which will be passed to styled component
+    let finalTheme = { ...baseTheme };
+    Object.entries(rocketstate).forEach(([key, value]) => {
+        const keyTheme = themes[key];
+        if (Array.isArray(value)) {
+            value.forEach((item) => {
+                finalTheme = core.merge({}, finalTheme, keyTheme[item]);
+            });
+        }
+        else {
+            finalTheme = core.merge({}, finalTheme, keyTheme[value]);
+        }
+    });
+    return finalTheme;
+};
+const getThemeByMode = (object, mode) => Object.keys(object).reduce((acc, key) => {
+    const value = object[key];
+    if (typeof value === 'object' && value !== null) {
+        acc[key] = getThemeByMode(value, mode);
+    }
+    else if (isModeCallback(value)) {
+        acc[key] = value(mode);
+    }
+    else {
+        acc[key] = value;
     }
+    return acc;
+}, {});
+
+const chainOptions = (opts, defaultOpts = []) => {
+    const result = [...defaultOpts];
+    if (typeof opts === 'function')
+        result.push(opts);
+    else if (typeof opts === 'object')
+        result.push(() => opts);
+    return result;
 };
-const cloneAndEnhance = (opts, defaultOpts) => styleComponent({
+const chainOrOptions = (keys, opts, defaultOpts) => keys.reduce((acc, item) => ({ ...acc, [item]: opts[item] || defaultOpts[item] }), {});
+const chainReservedKeyOptions = (keys, opts, defaultOpts) => keys.reduce((acc, item) => ({
+    ...acc,
+    [item]: chainOptions(opts[item], defaultOpts[item]),
+}), {});
+
+const calculateHocsFuncs = (options = {}) => Object.values(options)
+    .filter((item) => typeof item === 'function')
+    .reverse();
+
+/* eslint-disable import/prefer-default-export */
+const calculateStyles = (styles) => {
+    if (!styles)
+        return [];
+    return styles.map((item) => item(core.config.css));
+};
+
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+const cloneAndEnhance = (opts, defaultOpts) => 
+// @ts-ignore
+rocketComponent({
     ...defaultOpts,
     statics: { ...defaultOpts.statics, ...opts.statics },
     compose: { ...defaultOpts.compose, ...opts.compose },
-    ...orOptions(CONFIG_KEYS, opts, defaultOpts),
-    ...chainReservedOptions([...defaultOpts.dimensionKeys, ...STYLING_KEYS], opts, defaultOpts),
+    ...chainOrOptions(CONFIG_KEYS, opts, defaultOpts),
+    ...chainReservedKeyOptions([...defaultOpts.dimensionKeys, ...STYLING_KEYS], opts, defaultOpts),
 });
 // --------------------------------------------------------
 // styleComponent
@@ -406,7 +421,8 @@ const cloneAndEnhance = (opts, defaultOpts) => styleComponent({
 // assigned, so it can be even rendered as a valid component
 // or styles can be extended via its statics
 // --------------------------------------------------------
-const styleComponent = (options) => {
+// @ts-ignore
+const rocketComponent = (options) => {
     const { component, styles } = options;
     const { styled } = core.config;
     // const _calculateChainOptions = calculateChainOptions(options.attrs)
@@ -416,112 +432,149 @@ const styleComponent = (options) => {
     });
     const componentName = options.name || options.component.displayName || options.component.name;
     // create styled component with all options.styles if available
-    const STYLED_COMPONENT = component.IS_ROCKETSTYLE || options.styled === false
+    const STYLED_COMPONENT = component.IS_ROCKETSTYLE || options.styled !== true
         ? component
         : styled(component) `
-          ${calculateStyles(styles, core.config.css)};
+          ${calculateStyles(styles)};
         `;
     // --------------------------------------------------------
-    // final component to be rendered
+    // COMPONENT - Final component to be rendered
     // --------------------------------------------------------
     const RenderComponent = options.provider
         ? RocketStyleProviderComponent(STYLED_COMPONENT)
         : STYLED_COMPONENT;
     // --------------------------------------------------------
-    // hocs
+    // THEME - Cahed & Calculated theme(s)
     // --------------------------------------------------------
-    const calculateHocsFuncs = Object.values(options.compose || {})
-        .filter((item) => typeof item === 'function')
-        .reverse();
-    const hocsFuncs = [rocketStyleHOC(options), ...calculateHocsFuncs];
+    const ThemeManager$1 = new ThemeManager();
+    // --------------------------------------------------------
+    // COMPOSE - high-order components
+    // --------------------------------------------------------
+    const hocsFuncs = [
+        rocketStyleHOC(options),
+        ...calculateHocsFuncs(options.compose),
+    ];
     // --------------------------------------------------------
     // ENHANCED COMPONENT (returned component)
     // --------------------------------------------------------
     // .attrs() chaining option is calculated in HOC and passed as props already
-    const EnhancedComponent = React.forwardRef(({ $rocketstyleRef, // it's forwarded from HOC which is always on top of hocs
+    const EnhancedComponent = React.forwardRef(({ $rocketstyleRef, // it's forwarded from HOC which is always on top of all hocs
     ...props }, ref) => {
         // --------------------------------------------------
         // handle refs
         // (1) one is passed from inner HOC - $rocketstyleRef
         // (2) second one is used to be used directly (e.g. inside hocs)
         // --------------------------------------------------
-        const internalRef = React.useRef(null);
-        if ($rocketstyleRef)
-            React.useImperativeHandle($rocketstyleRef, () => internalRef.current, [
-                $rocketstyleRef,
-            ]);
-        if (ref)
-            React.useImperativeHandle(ref, () => internalRef.current, [ref]);
+        const internalRef = useRocketstyleRef({ $rocketstyleRef, ref });
         // --------------------------------------------------
         // hover - focus - pressed state passed via context from parent component
         // --------------------------------------------------
-        const rocketstyleCtx = options.consumer ? React.useContext(localContext) : {};
+        const localCtx = useLocalContext(options.consumer);
         // --------------------------------------------------
         // general theme and theme mode dark / light passed in context
         // --------------------------------------------------
-        const { theme, mode } = useThemeOptions(options);
+        const { theme, mode } = useThemeAttrs(options);
         // --------------------------------------------------
-        // calculate themes for all possible styling dimensions
-        // .theme(...) + defined dimensions like .states(...), .sizes(...)
+        // calculate themes for all defined styling dimensions
+        // .theme(...) + defined dimensions like .states(...), .sizes(...), etc.
         // --------------------------------------------------
-        const __ROCKETSTYLE__ = React.useMemo(() => useTheme({
-            theme,
-            options,
-            cb: themeModeCb,
-        }), 
-        // recalculate this only when theme changes
+        // --------------------------------------------------
+        // BASE / DEFAULT THEME Object
+        // --------------------------------------------------
+        const baseTheme = React.useMemo(() => {
+            const helper = ThemeManager$1.baseTheme;
+            if (!helper.has(theme)) {
+                helper.set(theme, getThemeFromChain(options.theme, theme));
+            }
+            return helper.get(theme);
+        }, 
+        // recalculate this only when theme mode changes dark / light
+        [theme]);
+        // --------------------------------------------------
+        // DIMENSION(S) THEMES Object
+        // --------------------------------------------------
+        const themes = React.useMemo(() => {
+            const helper = ThemeManager$1.dimensionsThemes;
+            if (!helper.has(theme)) {
+                helper.set(theme, getDimensionThemes(theme, options));
+            }
+            return helper.get(theme);
+        }, 
+        // recalculate this only when theme object changes
         [theme]);
-        const { reservedPropNames, themes: rocketThemes, dimensions, baseTheme: rocketBaseTheme, } = __ROCKETSTYLE__;
-        const { baseTheme, themes } = React.useMemo(() => calculateThemeMode({ themes: rocketThemes, baseTheme: rocketBaseTheme }, mode), 
+        // --------------------------------------------------
+        // BASE / DEFAULT MODE THEME Object
+        // --------------------------------------------------
+        const currentModeBaseTheme = React.useMemo(() => {
+            const helper = ThemeManager$1.modeBaseTheme[mode];
+            if (!helper.has(baseTheme)) {
+                helper.set(baseTheme, getThemeByMode(baseTheme, mode));
+            }
+            return helper.get(baseTheme);
+        }, 
+        // recalculate this only when theme mode changes dark / light
+        [mode, baseTheme]);
+        // --------------------------------------------------
+        // DIMENSION(S) MODE THEMES Object
+        // --------------------------------------------------
+        const currentModeThemes = React.useMemo(() => {
+            const helper = ThemeManager$1.modeDimensionTheme[mode];
+            if (!helper.has(themes)) {
+                helper.set(themes, getThemeByMode(themes, mode));
+            }
+            return helper.get(themes);
+        }, 
         // recalculate this only when theme mode changes dark / light
-        [mode]);
+        [mode, themes]);
         // --------------------------------------------------
         // calculate reserved Keys defined in dimensions as styling keys
         // there is no need to calculate this each time - keys are based on
         // dimensions definitions
         // --------------------------------------------------
-        const RESERVED_STYLING_PROPS_KEYS = React.useMemo(() => Object.keys(reservedPropNames), []);
+        const { keysMap: dimensions, keywords: reservedPropNames } = React.useMemo(() => getDimensionsMap({
+            themes,
+            useBooleans: options.useBooleans,
+        }), [themes]);
+        const RESERVED_STYLING_PROPS_KEYS = React.useMemo(() => Object.keys(reservedPropNames), [reservedPropNames]);
         // --------------------------------------------------
         // get final props which are (latest has the highest priority):
         // (1) merged styling from context,
         // (2) `attrs` chaining method, and from
         // (3) passing them directly to component
         // --------------------------------------------------
-        const { pseudo = {}, ...mergeProps } = {
-            ...(options.consumer
-                ? options.consumer((callback) => callback(rocketstyleCtx))
-                : {}),
+        const { pseudo, ...mergeProps } = {
+            ...localCtx,
             ...props,
         };
         // --------------------------------------------------
+        // pseudo rocket state
+        // calculate final component pseudo state including pseudo state
+        // from props and override by pseudo props from context
+        // --------------------------------------------------
+        const pseudoRocketstate = {
+            ...pseudo,
+            ...core.pick(props, PSEUDO_KEYS),
+        };
+        // --------------------------------------------------
         // rocketstate
         // calculate final component state including pseudo state
         // passed as $rocketstate prop
         // --------------------------------------------------
         const rocketstate = _calculateStylingAttrs({
-            props: pickStyledProps(mergeProps, reservedPropNames),
+            props: pickStyledAttrs(mergeProps, reservedPropNames),
             dimensions,
         });
-        // --------------------------------------------------
-        // pseudo state
-        // calculate final component pseudo state including pseudo state
-        // from props and override by pseudo props from context
-        // --------------------------------------------------
-        const finalPseudo = {
-            ...core.pick(props, PSEUDO_KEYS),
-            ...pseudo,
-        };
-        const finalRocketstate = { ...rocketstate, pseudo: finalPseudo };
+        const finalRocketstate = { ...rocketstate, pseudo: pseudoRocketstate };
         // --------------------------------------------------
         // rocketstyle
         // calculated (based on styling props) final theme which will be passed
         // to our styled component
         // passed as $rocketstyle prop
         // --------------------------------------------------
-        const rocketstyle = calculateTheme({
+        const rocketstyle = getTheme$1({
             rocketstate,
-            themes,
-            baseTheme,
+            themes: currentModeThemes,
+            baseTheme: currentModeBaseTheme,
         });
         // --------------------------------------------------
         // final props
@@ -559,9 +612,9 @@ const styleComponent = (options) => {
     // ------------------------------------------------------
     createStaticsChainingEnhancers({
         context: RocketComponent,
-        dimensionKeys: [...options.dimensionKeys, ...STATIC_KEYS],
+        dimensionKeys: options.dimensionKeys,
         func: cloneAndEnhance,
-        opts: options,
+        options,
     });
     // ------------------------------------------------------
     RocketComponent.IS_ROCKETSTYLE = true;
@@ -573,34 +626,37 @@ const styleComponent = (options) => {
     // ------------------------------------------------------
     createStaticsEnhancers({
         context: RocketComponent.is,
-        opts: options.statics,
+        options: options.statics,
     });
+    // @ts-ignore
     RocketComponent.config = (opts = {}) => {
         const result = core.pick(opts, CONFIG_KEYS);
         return cloneAndEnhance(result, options);
     };
-    RocketComponent.statics = (opts = {}) => cloneAndEnhance({ statics: opts }, options);
+    RocketComponent.statics = (opts) => cloneAndEnhance({ statics: opts }, options);
     RocketComponent.getStaticDimensions = (theme) => {
-        const themes = useTheme({ theme, options, cb: themeModeCb });
+        const themes = getDimensionThemes(theme, options);
+        const { keysMap, keywords } = getDimensionsMap({
+            themes,
+            useBooleans: options.useBooleans,
+        });
         return {
-            dimensions: themes.dimensions,
+            dimensions: keysMap,
+            keywords,
             useBooleans: options.useBooleans,
             multiKeys: options.multiKeys,
         };
     };
-    RocketComponent.getDefaultAttrs = (props, theme, mode) => {
-        const result = calculateChainOptions(options.attrs)([
-            props,
-            theme,
-            {
-                renderContent: core.renderContent,
-                mode,
-                isDark: mode === 'light',
-                isLight: mode === 'dark',
-            },
-        ]);
-        return result;
-    };
+    RocketComponent.getDefaultAttrs = (props, theme, mode) => calculateChainOptions(options.attrs)([
+        props,
+        theme,
+        {
+            render: core.render,
+            mode,
+            isDark: mode === 'light',
+            isLight: mode === 'dark',
+        },
+    ]);
     return RocketComponent;
 };
 
@@ -614,8 +670,8 @@ const DEFAULT_DIMENSIONS = {
     },
 };
 
-/* eslint-disable @typescript-eslint/ban-types */
-const rocketstyle$1 = () => ({ dimensions = DEFAULT_DIMENSIONS, useBooleans = true } = {}) => ({ name, component }) => {
+// @ts-nocheck
+const rocketstyle$1 = ({ dimensions = DEFAULT_DIMENSIONS, useBooleans = true } = {}) => ({ name, component }) => {
     // --------------------------------------------------------
     // handle ERRORS in development mode
     // --------------------------------------------------------
@@ -642,7 +698,7 @@ const rocketstyle$1 = () => ({ dimensions = DEFAULT_DIMENSIONS, useBooleans = tr
             throw Error(JSON.stringify(errors));
         }
     }
-    return styleComponent({
+    return rocketComponent({
         name,
         component,
         useBooleans,
@@ -650,6 +706,7 @@ const rocketstyle$1 = () => ({ dimensions = DEFAULT_DIMENSIONS, useBooleans = tr
         dimensionKeys: getKeys(dimensions),
         dimensionValues: getDimensionsValues(dimensions),
         multiKeys: getMultipleDimensions(dimensions),
+        styled: true,
     });
 };
 
@@ -657,8 +714,7 @@ const isRocketComponent = (component) => {
     if (component &&
         typeof component === 'object' &&
         component !== null &&
-        // eslint-disable-next-line dot-notation
-        component['IS_ROCKETSTYLE'] === true) {
+        Object.prototype.hasOwnProperty.call(component, 'IS_ROCKETSTYLE')) {
         return true;
     }
     return false;
@@ -671,7 +727,7 @@ const Wrapper = core.config.styled.div `
 const component$2 = () => React__default["default"].createElement(Wrapper, null, "Nothing here");
 component$2.displayName = '@vitus-labs/rocketstories/Empty';
 
-var element$1 = rocketstyle$1()()({
+var element$1 = rocketstyle$1()({
     component: elements.Element,
     name: 'element',
 })
@@ -1358,7 +1414,7 @@ const disableDimensionControls = (dimensions, dimensionName) => {
 const context = React.createContext({});
 const useContext = () => React.useContext(context);
 const ContextProvider = context.Provider;
-const Provider = ({ children, ...props }) => (React__default["default"].createElement(ContextProvider, { value: props }, children));
+const Provider = ({ children, ...props }) => React__default["default"].createElement(ContextProvider, { value: props }, children);
 
 const component$1 = ({ title, ...props }) => {
     const { component } = useContext();
@@ -1661,7 +1717,7 @@ const createRocketStories = (options) => {
     };
 };
 
-const init = ({ decorators = [], storyOptions = {} }) => (component) => rocketstories(component, { decorators, storyOptions });
+const init = ({ decorators = [], storyOptions = {}, ...rest }) => (component) => rocketstories(component, { decorators, storyOptions, ...rest });
 //@ts-ignore
 const rocketstories = (component, options = {}) => {
     const { decorators = [], storyOptions = {} } = options;