@quadrats/react 0.6.7 → 0.7.1

package/components/index.cjs.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var tslib = require('tslib');
 var React = require('react');
 var ReactDOM = require('react-dom');
@@ -10,223 +8,217 @@ var reactTransitionGroup = require('react-transition-group');
 var utils = require('@quadrats/react/utils');
 var configs = require('@quadrats/react/configs');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
-var clsx__default = /*#__PURE__*/_interopDefaultLegacy(clsx);
-
-const svgBaseProps = {
-    width: '1em',
-    height: '1em',
-    'aria-hidden': true,
-    focusable: false,
-};
-const Icon = React.forwardRef((_a, ref) => {
-    var { children, style, icon, size = 1 } = _a, props = tslib.__rest(_a, ["children", "style", "icon", "size"]);
-    if (!icon) {
-        throw new Error('The icon definition is needed.');
-    }
-    const { definition } = icon;
-    const svgProps = Object.assign(Object.assign(Object.assign(Object.assign({}, svgBaseProps), definition.svg), props), { style: Object.assign(Object.assign({}, style), { fontSize: `${size}em` }) });
-    return (React__default.createElement("svg", Object.assign({}, svgProps, { ref: ref }),
-        React__default.createElement("path", Object.assign({}, definition.path))));
+const svgBaseProps = {
+    width: '1em',
+    height: '1em',
+    'aria-hidden': true,
+    focusable: false,
+};
+const Icon = React.forwardRef((_a, ref) => {
+    var { children, style, icon, size = 1 } = _a, props = tslib.__rest(_a, ["children", "style", "icon", "size"]);
+    if (!icon) {
+        throw new Error('The icon definition is needed.');
+    }
+    const { definition } = icon;
+    const svgProps = Object.assign(Object.assign(Object.assign(Object.assign({}, svgBaseProps), definition.svg), props), { style: Object.assign(Object.assign({}, style), { fontSize: `${size}em` }) });
+    return (React.createElement("svg", Object.assign({}, svgProps, { ref: ref }),
+        React.createElement("path", Object.assign({}, definition.path))));
 });
 
-const Portal = ({ getContainer, children }) => {
-    const container = getContainer ? getContainer() : document.body;
-    return ReactDOM__default.createPortal(children, container);
+const Portal = ({ getContainer, children }) => {
+    const container = getContainer ? getContainer() : document.body;
+    return ReactDOM.createPortal(children, container);
 };
 
-const Progress = React.forwardRef(function Progress(props, ref) {
-    const { className, percentage = 0 } = props;
-    const transform = `scaleX(${percentage / 100})`;
-    const style = {
-        transform,
-        msTransform: transform,
-    };
-    return (React__default.createElement("span", { ref: ref, className: clsx__default('qdr-progress', className) },
-        React__default.createElement("span", { className: "qdr-progress__backdrop" }),
-        React__default.createElement("span", { className: "qdr-progress__track", style: style })));
+const Progress = React.forwardRef(function Progress(props, ref) {
+    const { className, percentage = 0 } = props;
+    const transform = `scaleX(${percentage / 100})`;
+    const style = {
+        transform,
+        msTransform: transform,
+    };
+    return (React.createElement("span", { ref: ref, className: clsx('qdr-progress', className) },
+        React.createElement("span", { className: "qdr-progress__backdrop" }),
+        React.createElement("span", { className: "qdr-progress__track", style: style })));
 });
 
-function isContainerAsDocument(container) {
-    return container === document.documentElement || container === document.body;
-}
-function getTargetRect(container, targetEl) {
-    const triggerRect = targetEl.getBoundingClientRect();
-    if (isContainerAsDocument(container)) {
-        return triggerRect;
-    }
-    const containerRect = container.getBoundingClientRect();
-    const { width, height } = triggerRect;
-    const top = triggerRect.top - containerRect.top;
-    const left = triggerRect.left - containerRect.left;
-    return {
-        width,
-        height,
-        top,
-        bottom: top + height,
-        left,
-        right: left + width,
-    };
-}
-function getScrollLeftAndTop(container) {
-    const isAsDocument = isContainerAsDocument(container);
-    return {
-        scrollTop: isAsDocument ? document.documentElement.scrollTop + document.body.scrollTop : container.scrollTop,
-        scrollLeft: isAsDocument ? document.documentElement.scrollLeft + document.body.scrollLeft : container.scrollLeft,
-    };
-}
-function calculatePosition(props, triggerEl, popupEl) {
-    const { placement, getContainer, horizontalOffset, verticalOffset, } = props;
-    const isTop = placement.includes('top');
-    const isBottom = placement.includes('bottom');
-    const isLeft = placement.includes('left');
-    const isRight = placement.includes('right');
-    const container = getContainer();
-    const triggerRect = getTargetRect(container, triggerEl);
-    const { width: popupWidth, height: popupHeight } = popupEl.getBoundingClientRect();
-    let { scrollTop: top, scrollLeft: left } = getScrollLeftAndTop(container);
-    /**
-     * position
-     */
-    if (isLeft) {
-        left += triggerRect.left;
-    }
-    else if (isRight) {
-        left += triggerRect.right - popupWidth;
-    }
-    else {
-        left += triggerRect.left + (triggerRect.width - popupWidth) / 2;
-    }
-    if (isTop) {
-        top += triggerRect.top - popupHeight;
-    }
-    else if (isBottom) {
-        top += triggerRect.bottom;
-    }
-    else {
-        top += triggerRect.top + (triggerRect.height - popupHeight) / 2;
-        left += isLeft ? -popupWidth : popupWidth;
-    }
-    /**
-     * offset
-     */
-    top += isTop ? -verticalOffset : verticalOffset;
-    left += isLeft ? -horizontalOffset : horizontalOffset;
-    return { top, left };
+function isContainerAsDocument(container) {
+    return container === document.documentElement || container === document.body;
+}
+function getTargetRect(container, targetEl) {
+    const triggerRect = targetEl.getBoundingClientRect();
+    if (isContainerAsDocument(container)) {
+        return triggerRect;
+    }
+    const containerRect = container.getBoundingClientRect();
+    const { width, height } = triggerRect;
+    const top = triggerRect.top - containerRect.top;
+    const left = triggerRect.left - containerRect.left;
+    return {
+        width,
+        height,
+        top,
+        bottom: top + height,
+        left,
+        right: left + width,
+    };
+}
+function getScrollLeftAndTop(container) {
+    const isAsDocument = isContainerAsDocument(container);
+    return {
+        scrollTop: isAsDocument ? document.documentElement.scrollTop + document.body.scrollTop : container.scrollTop,
+        scrollLeft: isAsDocument ? document.documentElement.scrollLeft + document.body.scrollLeft : container.scrollLeft,
+    };
+}
+function calculatePosition(props, triggerEl, popupEl) {
+    const { placement, getContainer, horizontalOffset, verticalOffset, } = props;
+    const isTop = placement.includes('top');
+    const isBottom = placement.includes('bottom');
+    const isLeft = placement.includes('left');
+    const isRight = placement.includes('right');
+    const container = getContainer();
+    const triggerRect = getTargetRect(container, triggerEl);
+    const { width: popupWidth, height: popupHeight } = popupEl.getBoundingClientRect();
+    let { scrollTop: top, scrollLeft: left } = getScrollLeftAndTop(container);
+    /**
+     * position
+     */
+    if (isLeft) {
+        left += triggerRect.left;
+    }
+    else if (isRight) {
+        left += triggerRect.right - popupWidth;
+    }
+    else {
+        left += triggerRect.left + (triggerRect.width - popupWidth) / 2;
+    }
+    if (isTop) {
+        top += triggerRect.top - popupHeight;
+    }
+    else if (isBottom) {
+        top += triggerRect.bottom;
+    }
+    else {
+        top += triggerRect.top + (triggerRect.height - popupHeight) / 2;
+        left += isLeft ? -popupWidth : popupWidth;
+    }
+    /**
+     * offset
+     */
+    top += isTop ? -verticalOffset : verticalOffset;
+    left += isLeft ? -horizontalOffset : horizontalOffset;
+    return { top, left };
 }
 
-const clsPrefix = 'qdr-tooltip';
-const defaultTriggers = ['hover'];
-const defaultGetContainer = () => document.body;
-const defaultTransitionClassNames = {
-    enter: `${clsPrefix}__fade--enter`,
-    enterActive: `${clsPrefix}__fade--enter-active`,
-    exit: `${clsPrefix}__fade--exit`,
-    exitActive: `${clsPrefix}__fade--exit-active`,
-};
-/**
- * @todo
- * To implement all placement.
- * Extract Popup from Tooltip.
- */
-function Tooltip({ children, triggers = defaultTriggers, popup, getContainer = defaultGetContainer, placement = 'top', horizontalOffset = 0, verticalOffset = 0, transitionClassNames = defaultTransitionClassNames, mouseEnterDelay = 0, mouseLeaveDelay = 0.1, }) {
-    const { props: themeProps } = React.useContext(configs.ThemeContext);
-    const [visible, setVisible] = React.useState(false);
-    const delayTimer = React.useRef(NaN);
-    const clearDelayTimer = React.useCallback(() => {
-        if (delayTimer.current) {
-            window.clearTimeout(delayTimer.current);
-            delayTimer.current = NaN;
-        }
-    }, []);
-    const delaySetVisible = React.useCallback((setVisibleAction, delay) => {
-        clearDelayTimer();
-        if (delay) {
-            delayTimer.current = window.setTimeout(() => {
-                setVisible(setVisibleAction);
-                clearDelayTimer();
-            }, delay * 1000);
-        }
-        else {
-            setVisible(setVisibleAction);
-        }
-    }, [clearDelayTimer]);
-    const triggerRef = React.useRef(null);
-    const popupRef = React.useRef(null);
-    const [firstPlacement, secondPlacement] = placement.split('-');
-    const child = React.Children.only(children);
-    const triggerProps = {};
-    const popupProps = {};
-    if (triggers.includes('click')) {
-        triggerProps.onClick = (event) => {
-            var _a, _b;
-            delaySetVisible((prevVisible) => !prevVisible, 0);
-            (_b = (_a = child.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, event);
-        };
-    }
-    if (triggers.includes('hover')) {
-        popupProps.onMouseEnter = clearDelayTimer;
-        popupProps.onMouseLeave = (event) => {
-            var _a;
-            if (!(event.relatedTarget instanceof Node && ((_a = popupRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.relatedTarget)))) {
-                delaySetVisible(false, mouseLeaveDelay);
-            }
-        };
-        triggerProps.onMouseEnter = (event) => {
-            var _a, _b;
-            delaySetVisible(true, mouseEnterDelay);
-            (_b = (_a = child.props).onMouseEnter) === null || _b === void 0 ? void 0 : _b.call(_a, event);
-        };
-        triggerProps.onMouseLeave = (event) => {
-            var _a, _b;
-            delaySetVisible(false, mouseLeaveDelay);
-            (_b = (_a = child.props).onMouseLeave) === null || _b === void 0 ? void 0 : _b.call(_a, event);
-        };
-    }
-    const trigger = React.cloneElement(child, Object.assign(Object.assign({}, triggerProps), { ref: utils.composeRefs([triggerRef, child.ref]) }));
-    React.useLayoutEffect(() => {
-        const triggerEl = triggerRef.current;
-        const popupEl = popupRef.current;
-        if (!(visible && triggerEl && popupEl)) {
-            return;
-        }
-        const { top, left } = calculatePosition({
-            placement, getContainer, horizontalOffset, verticalOffset,
-        }, triggerEl, popupEl);
-        popupEl.style.top = `${top}px`;
-        popupEl.style.left = `${left}px`;
-    }, [visible, placement, getContainer, horizontalOffset, verticalOffset]);
-    React.useLayoutEffect(() => {
-        if (!visible) {
-            return;
-        }
-        function clickOutSideHandler(event) {
-            event.preventDefault();
-            const popupEl = popupRef.current;
-            const targetEl = event.target;
-            const targetUnmount = targetEl.offsetParent === null;
-            if (!((popupEl === null || popupEl === void 0 ? void 0 : popupEl.contains(targetEl)) || targetUnmount)) {
-                setVisible(false);
-            }
-        }
-        document.addEventListener('click', clickOutSideHandler);
-        return () => {
-            document.removeEventListener('click', clickOutSideHandler);
-        };
-    }, [visible]);
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(Portal, { getContainer: getContainer },
-            React__default.createElement(reactTransitionGroup.CSSTransition, { in: visible, classNames: transitionClassNames, timeout: 200, unmountOnExit: true },
-                React__default.createElement("div", { className: `${clsPrefix}__mask` },
-                    React__default.createElement("div", Object.assign({ className: clsx__default(themeProps.className, `${clsPrefix}__popup`, `${clsPrefix}__popup--${firstPlacement}`), ref: popupRef, style: themeProps.style }, popupProps),
-                        React__default.createElement("div", { className: clsx__default(`${clsPrefix}__arrow`, `${clsPrefix}__arrow--${firstPlacement}`, {
-                                [`${clsPrefix}__arrow--${placement}`]: secondPlacement,
-                            }) }),
-                        React__default.createElement("div", { className: `${clsPrefix}__content` }, popup))))),
-        trigger));
+const clsPrefix = 'qdr-tooltip';
+const defaultTriggers = ['hover'];
+const defaultGetContainer = () => document.body;
+const defaultTransitionClassNames = {
+    enter: `${clsPrefix}__fade--enter`,
+    enterActive: `${clsPrefix}__fade--enter-active`,
+    exit: `${clsPrefix}__fade--exit`,
+    exitActive: `${clsPrefix}__fade--exit-active`,
+};
+/**
+ * @todo
+ * To implement all placement.
+ * Extract Popup from Tooltip.
+ */
+function Tooltip({ children, triggers = defaultTriggers, popup, getContainer = defaultGetContainer, placement = 'top', horizontalOffset = 0, verticalOffset = 0, transitionClassNames = defaultTransitionClassNames, mouseEnterDelay = 0, mouseLeaveDelay = 0.1, }) {
+    const { props: themeProps } = React.useContext(configs.ThemeContext);
+    const [visible, setVisible] = React.useState(false);
+    const delayTimer = React.useRef(NaN);
+    const clearDelayTimer = React.useCallback(() => {
+        if (delayTimer.current) {
+            window.clearTimeout(delayTimer.current);
+            delayTimer.current = NaN;
+        }
+    }, []);
+    const delaySetVisible = React.useCallback((setVisibleAction, delay) => {
+        clearDelayTimer();
+        if (delay) {
+            delayTimer.current = window.setTimeout(() => {
+                setVisible(setVisibleAction);
+                clearDelayTimer();
+            }, delay * 1000);
+        }
+        else {
+            setVisible(setVisibleAction);
+        }
+    }, [clearDelayTimer]);
+    const triggerRef = React.useRef(null);
+    const popupRef = React.useRef(null);
+    const [firstPlacement, secondPlacement] = placement.split('-');
+    const child = React.Children.only(children);
+    const triggerProps = {};
+    const popupProps = {};
+    if (triggers.includes('click')) {
+        triggerProps.onClick = (event) => {
+            var _a, _b;
+            delaySetVisible(prevVisible => !prevVisible, 0);
+            (_b = (_a = child.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+        };
+    }
+    if (triggers.includes('hover')) {
+        popupProps.onMouseEnter = clearDelayTimer;
+        popupProps.onMouseLeave = (event) => {
+            var _a;
+            if (!(event.relatedTarget instanceof Node && ((_a = popupRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.relatedTarget)))) {
+                delaySetVisible(false, mouseLeaveDelay);
+            }
+        };
+        triggerProps.onMouseEnter = (event) => {
+            var _a, _b;
+            delaySetVisible(true, mouseEnterDelay);
+            (_b = (_a = child.props).onMouseEnter) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+        };
+        triggerProps.onMouseLeave = (event) => {
+            var _a, _b;
+            delaySetVisible(false, mouseLeaveDelay);
+            (_b = (_a = child.props).onMouseLeave) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+        };
+    }
+    const trigger = React.cloneElement(child, Object.assign(Object.assign({}, triggerProps), { ref: utils.composeRefs([triggerRef, child.ref]) }));
+    React.useLayoutEffect(() => {
+        const triggerEl = triggerRef.current;
+        const popupEl = popupRef.current;
+        if (!(visible && triggerEl && popupEl)) {
+            return;
+        }
+        const { top, left } = calculatePosition({
+            placement, getContainer, horizontalOffset, verticalOffset,
+        }, triggerEl, popupEl);
+        popupEl.style.top = `${top}px`;
+        popupEl.style.left = `${left}px`;
+    }, [visible, placement, getContainer, horizontalOffset, verticalOffset]);
+    React.useLayoutEffect(() => {
+        if (!visible) {
+            return;
+        }
+        function clickOutSideHandler(event) {
+            event.preventDefault();
+            const popupEl = popupRef.current;
+            const targetEl = event.target;
+            const targetUnmount = targetEl.offsetParent === null;
+            if (!((popupEl === null || popupEl === void 0 ? void 0 : popupEl.contains(targetEl)) || targetUnmount)) {
+                setVisible(false);
+            }
+        }
+        document.addEventListener('click', clickOutSideHandler);
+        return () => {
+            document.removeEventListener('click', clickOutSideHandler);
+        };
+    }, [visible]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Portal, { getContainer: getContainer },
+            React.createElement(reactTransitionGroup.CSSTransition, { in: visible, classNames: transitionClassNames, timeout: 200, unmountOnExit: true },
+                React.createElement("div", { className: `${clsPrefix}__mask` },
+                    React.createElement("div", Object.assign({ className: clsx(themeProps.className, `${clsPrefix}__popup`, `${clsPrefix}__popup--${firstPlacement}`), ref: popupRef, style: themeProps.style }, popupProps),
+                        React.createElement("div", { className: clsx(`${clsPrefix}__arrow`, `${clsPrefix}__arrow--${firstPlacement}`, {
+                                [`${clsPrefix}__arrow--${placement}`]: secondPlacement,
+                            }) }),
+                        React.createElement("div", { className: `${clsPrefix}__content` }, popup))))),
+        trigger));
 }
 
 exports.Icon = Icon;

package/configs/ConfigsProvider.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { Theme } from '@quadrats/theme';
 import { LocaleDefinition } from '@quadrats/locales';
 import { ThemeContextValue } from './theme';
@@ -14,5 +14,5 @@ export interface ConfigsProviderProps {
      */
     children: ReactNode | ((props: ConfigsProviderRenderProps) => ReactNode);
 }
-declare function ConfigsProvider({ theme, locale, children }: ConfigsProviderProps): JSX.Element;
+declare function ConfigsProvider({ theme, locale, children }: ConfigsProviderProps): React.JSX.Element;
 export default ConfigsProvider;

package/configs/ConfigsProvider.js

@@ -3,13 +3,13 @@ import { enUS } from '@quadrats/locales';
 import { LocaleContext } from './locale.js';
 import { resolveThemeToProps, ThemeContext } from './theme.js';
 
-function ConfigsProvider({ theme, locale = enUS, children }) {
-    const themeContext = useMemo(() => ({
-        props: theme ? resolveThemeToProps(theme) : {},
-        theme,
-    }), [theme]);
-    return (React.createElement(ThemeContext.Provider, { value: themeContext },
-        React.createElement(LocaleContext.Provider, { value: locale }, typeof children === 'function' ? children({ theme: themeContext, locale }) : children)));
+function ConfigsProvider({ theme, locale = enUS, children }) {
+    const themeContext = useMemo(() => ({
+        props: theme ? resolveThemeToProps(theme) : {},
+        theme,
+    }), [theme]);
+    return (React.createElement(ThemeContext.Provider, { value: themeContext },
+        React.createElement(LocaleContext.Provider, { value: locale }, typeof children === 'function' ? children({ theme: themeContext, locale }) : children)));
 }
 
 export { ConfigsProvider as default };

package/configs/index.cjs.js

@@ -1,57 +1,51 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 var locales = require('@quadrats/locales');
 var utils = require('@quadrats/utils');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-const LocaleContext = React.createContext(locales.enUS);
-function useLocale() {
-    return React.useContext(LocaleContext);
+const LocaleContext = React.createContext(locales.enUS);
+function useLocale() {
+    return React.useContext(LocaleContext);
 }
 
-const ThemeContext = React.createContext({
-    props: {},
-});
-/**
- * Add prefix to theme name.
- */
-function addThemeNamePrefix(theme) {
-    return `qdr-theme-${theme || 'qdr'}`;
-}
-function resolveThemeObjectToStyle(theme) {
-    const cssProps = {};
-    for (const name in theme) {
-        cssProps[`--qdr-${utils.convertCamelToKebab(name)}`] = theme[name];
-    }
-    return cssProps;
-}
-function resolveThemeToProps(theme) {
-    const props = {};
-    if (typeof theme === 'string') {
-        props.className = addThemeNamePrefix(theme);
-    }
-    else {
-        props.style = resolveThemeObjectToStyle(theme);
-    }
-    return props;
-}
-function useTheme() {
-    return React.useContext(ThemeContext);
+const ThemeContext = React.createContext({
+    props: {},
+});
+/**
+ * Add prefix to theme name.
+ */
+function addThemeNamePrefix(theme) {
+    return `qdr-theme-${theme || 'qdr'}`;
+}
+function resolveThemeObjectToStyle(theme) {
+    const cssProps = {};
+    for (const name in theme) {
+        cssProps[`--qdr-${utils.convertCamelToKebab(name)}`] = theme[name];
+    }
+    return cssProps;
+}
+function resolveThemeToProps(theme) {
+    const props = {};
+    if (typeof theme === 'string') {
+        props.className = addThemeNamePrefix(theme);
+    }
+    else {
+        props.style = resolveThemeObjectToStyle(theme);
+    }
+    return props;
+}
+function useTheme() {
+    return React.useContext(ThemeContext);
 }
 
-function ConfigsProvider({ theme, locale = locales.enUS, children }) {
-    const themeContext = React.useMemo(() => ({
-        props: theme ? resolveThemeToProps(theme) : {},
-        theme,
-    }), [theme]);
-    return (React__default.createElement(ThemeContext.Provider, { value: themeContext },
-        React__default.createElement(LocaleContext.Provider, { value: locale }, typeof children === 'function' ? children({ theme: themeContext, locale }) : children)));
+function ConfigsProvider({ theme, locale = locales.enUS, children }) {
+    const themeContext = React.useMemo(() => ({
+        props: theme ? resolveThemeToProps(theme) : {},
+        theme,
+    }), [theme]);
+    return (React.createElement(ThemeContext.Provider, { value: themeContext },
+        React.createElement(LocaleContext.Provider, { value: locale }, typeof children === 'function' ? children({ theme: themeContext, locale }) : children)));
 }
 
 exports.ConfigsProvider = ConfigsProvider;

package/configs/locale.js

@@ -1,9 +1,9 @@
 import { createContext, useContext } from 'react';
 import { enUS } from '@quadrats/locales';
 
-const LocaleContext = createContext(enUS);
-function useLocale() {
-    return useContext(LocaleContext);
+const LocaleContext = createContext(enUS);
+function useLocale() {
+    return useContext(LocaleContext);
 }
 
 export { LocaleContext, useLocale };

package/configs/theme.js

@@ -1,34 +1,34 @@
 import { createContext, useContext } from 'react';
 import { convertCamelToKebab } from '@quadrats/utils';
 
-const ThemeContext = createContext({
-    props: {},
-});
-/**
- * Add prefix to theme name.
- */
-function addThemeNamePrefix(theme) {
-    return `qdr-theme-${theme || 'qdr'}`;
-}
-function resolveThemeObjectToStyle(theme) {
-    const cssProps = {};
-    for (const name in theme) {
-        cssProps[`--qdr-${convertCamelToKebab(name)}`] = theme[name];
-    }
-    return cssProps;
-}
-function resolveThemeToProps(theme) {
-    const props = {};
-    if (typeof theme === 'string') {
-        props.className = addThemeNamePrefix(theme);
-    }
-    else {
-        props.style = resolveThemeObjectToStyle(theme);
-    }
-    return props;
-}
-function useTheme() {
-    return useContext(ThemeContext);
+const ThemeContext = createContext({
+    props: {},
+});
+/**
+ * Add prefix to theme name.
+ */
+function addThemeNamePrefix(theme) {
+    return `qdr-theme-${theme || 'qdr'}`;
+}
+function resolveThemeObjectToStyle(theme) {
+    const cssProps = {};
+    for (const name in theme) {
+        cssProps[`--qdr-${convertCamelToKebab(name)}`] = theme[name];
+    }
+    return cssProps;
+}
+function resolveThemeToProps(theme) {
+    const props = {};
+    if (typeof theme === 'string') {
+        props.className = addThemeNamePrefix(theme);
+    }
+    else {
+        props.style = resolveThemeObjectToStyle(theme);
+    }
+    return props;
+}
+function useTheme() {
+    return useContext(ThemeContext);
 }
 
 export { ThemeContext, addThemeNamePrefix, resolveThemeObjectToStyle, resolveThemeToProps, useTheme };

package/core/components/DefaultElement.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { RenderElementProps } from '../typings/renderer';
-declare const DefaultElement: ({ attributes, children }: RenderElementProps) => JSX.Element;
+declare const DefaultElement: ({ attributes, children }: RenderElementProps) => React.JSX.Element;
 export default DefaultElement;