@strapi/design-system 1.19.0-typescript.0 → 2.0.0-beta.0

package/dist/Tooltip/hooks/useTooltipHandlers.js

@@ -1,39 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const React = require('react');
-
-const useTooltipHandlers = (delay) => {
-    const [visible, setVisible] = React.useState(false);
-    const timerRef = React.useRef(null);
-    const clearTimer = () => {
-        if (typeof timerRef.current === 'number') {
-            clearTimeout(timerRef.current);
-            timerRef.current = null;
-        }
-    };
-    React.useEffect(() => {
-        return () => {
-            clearTimer();
-        };
-    }, []);
-    const onFocus = () => {
-        setVisible(true);
-    };
-    const onBlur = () => {
-        setVisible(false);
-    };
-    const onMouseEnter = () => {
-        timerRef.current = setTimeout(() => {
-            setVisible(true);
-        }, delay);
-    };
-    const onMouseLeave = () => {
-        clearTimer();
-        setVisible(false);
-    };
-    return { visible, onFocus, onBlur, onMouseEnter, onMouseLeave };
-};
-
-exports.useTooltipHandlers = useTooltipHandlers;

package/dist/Tooltip/hooks/useTooltipHandlers.mjs

@@ -1,35 +0,0 @@
-import { useState, useRef, useEffect } from 'react';
-
-const useTooltipHandlers = (delay) => {
-    const [visible, setVisible] = useState(false);
-    const timerRef = useRef(null);
-    const clearTimer = () => {
-        if (typeof timerRef.current === 'number') {
-            clearTimeout(timerRef.current);
-            timerRef.current = null;
-        }
-    };
-    useEffect(() => {
-        return () => {
-            clearTimer();
-        };
-    }, []);
-    const onFocus = () => {
-        setVisible(true);
-    };
-    const onBlur = () => {
-        setVisible(false);
-    };
-    const onMouseEnter = () => {
-        timerRef.current = setTimeout(() => {
-            setVisible(true);
-        }, delay);
-    };
-    const onMouseLeave = () => {
-        clearTimer();
-        setVisible(false);
-    };
-    return { visible, onFocus, onBlur, onMouseEnter, onMouseLeave };
-};
-
-export { useTooltipHandlers };

package/dist/Tooltip/hooks/useTooltipLayout.js

@@ -1,25 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const React = require('react');
-const positionTooltip = require('../utils/positionTooltip.js');
-
-const useTooltipLayout = (visible, position) => {
-    const tooltipWrapperRef = React.useRef(null);
-    const toggleSourceRef = React.useRef(null);
-    React.useLayoutEffect(() => {
-        if (visible) {
-            const tooltip = tooltipWrapperRef.current;
-            const toggleSource = toggleSourceRef.current;
-            if (tooltip && toggleSource) {
-                const tooltipPosition = positionTooltip.positionTooltip(tooltip, toggleSource, position);
-                tooltip.style.left = `${tooltipPosition.left}px`;
-                tooltip.style.top = `${tooltipPosition.top}px`;
-            }
-        }
-    }, [position, visible]);
-    return { tooltipWrapperRef, toggleSourceRef };
-};
-
-exports.useTooltipLayout = useTooltipLayout;

package/dist/Tooltip/hooks/useTooltipLayout.mjs

@@ -1,21 +0,0 @@
-import { useRef, useLayoutEffect } from 'react';
-import { positionTooltip } from '../utils/positionTooltip.mjs';
-
-const useTooltipLayout = (visible, position) => {
-    const tooltipWrapperRef = useRef(null);
-    const toggleSourceRef = useRef(null);
-    useLayoutEffect(() => {
-        if (visible) {
-            const tooltip = tooltipWrapperRef.current;
-            const toggleSource = toggleSourceRef.current;
-            if (tooltip && toggleSource) {
-                const tooltipPosition = positionTooltip(tooltip, toggleSource, position);
-                tooltip.style.left = `${tooltipPosition.left}px`;
-                tooltip.style.top = `${tooltipPosition.top}px`;
-            }
-        }
-    }, [position, visible]);
-    return { tooltipWrapperRef, toggleSourceRef };
-};
-
-export { useTooltipLayout };

package/dist/Tooltip/index.js

@@ -1,9 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const Tooltip = require('./Tooltip.js');
-
-
-
-exports.Tooltip = Tooltip.Tooltip;

package/dist/Tooltip/index.mjs

@@ -1 +0,0 @@
-export { Tooltip } from './Tooltip.mjs';

package/dist/Tooltip/utils/__tests__/positionTooltip.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/Tooltip/utils/positionTooltip.js

@@ -1,74 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const SPACE_BETWEEN = 8;
-const positionBottom = (tooltipRect, toggleSourceRect) => {
-    const widthDifference = (tooltipRect.width - toggleSourceRect.width) / 2;
-    const left = toggleSourceRect.left - widthDifference;
-    const top = toggleSourceRect.top + toggleSourceRect.height + SPACE_BETWEEN + window.pageYOffset;
-    return {
-        left,
-        top,
-    };
-};
-const positionRight = (tooltipRect, toggleSourceRect) => {
-    const heightDifference = (tooltipRect.height - toggleSourceRect.height) / 2;
-    const left = toggleSourceRect.left + toggleSourceRect.width + SPACE_BETWEEN;
-    const top = toggleSourceRect.top - heightDifference + window.pageYOffset;
-    return { left, top };
-};
-const positionLeft = (tooltipRect, toggleSourceRect) => {
-    const heightDifference = (tooltipRect.height - toggleSourceRect.height) / 2;
-    const left = toggleSourceRect.left - tooltipRect.width - SPACE_BETWEEN;
-    const top = toggleSourceRect.top - heightDifference + window.pageYOffset;
-    return { left, top };
-};
-const positionTop = (tooltipRect, toggleSourceRect) => {
-    const widthDifference = (tooltipRect.width - toggleSourceRect.width) / 2;
-    let left = toggleSourceRect.left - widthDifference;
-    let top = toggleSourceRect.top - tooltipRect.height - SPACE_BETWEEN + window.pageYOffset;
-    // CONDITIONS TO HANDLE TOOLTIP OVERFLOW OUT OF VIEWPORT
-    // calculate the space between rightside viewport to rightside source element
-    // knowing this space will help calculate if tooltip will overflow right side
-    const rightSpaceDifference = window.innerWidth - toggleSourceRect.right;
-    // calculate rightside pos of tooltip to compare later to window.innerWidth
-    const overflowRight = toggleSourceRect.left + tooltipRect.width - rightSpaceDifference;
-    if (overflowRight > window.innerWidth) {
-        // if tooltip overflow right side of viewport
-        // place tooltip left side from source element
-        left = toggleSourceRect.left - tooltipRect.width - SPACE_BETWEEN;
-        top = toggleSourceRect.top + window.scrollY - toggleSourceRect.height / 2;
-    }
-    else if (left < 0) {
-        // if overflow left
-        // place tooltip right side from source element
-        left = toggleSourceRect.width + toggleSourceRect.left + SPACE_BETWEEN;
-        top = toggleSourceRect.top + window.scrollY - tooltipRect.height / 2 + SPACE_BETWEEN;
-    }
-    else if (top < 0 && left > 0) {
-        // if overflow top but not left
-        // place tooltip below source element
-        top = toggleSourceRect.top + toggleSourceRect.height + SPACE_BETWEEN;
-    }
-    return {
-        left,
-        top,
-    };
-};
-const positionTooltip = (tooltipNode, toggleSourceNode, position) => {
-    const tooltipRect = tooltipNode.getBoundingClientRect();
-    const toggleSourceRect = toggleSourceNode.getBoundingClientRect();
-    if (position === 'bottom') {
-        return positionBottom(tooltipRect, toggleSourceRect);
-    }
-    if (position === 'right') {
-        return positionRight(tooltipRect, toggleSourceRect);
-    }
-    if (position === 'left') {
-        return positionLeft(tooltipRect, toggleSourceRect);
-    }
-    return positionTop(tooltipRect, toggleSourceRect);
-};
-
-exports.positionTooltip = positionTooltip;

package/dist/Tooltip/utils/positionTooltip.mjs

@@ -1,70 +0,0 @@
-const SPACE_BETWEEN = 8;
-const positionBottom = (tooltipRect, toggleSourceRect) => {
-    const widthDifference = (tooltipRect.width - toggleSourceRect.width) / 2;
-    const left = toggleSourceRect.left - widthDifference;
-    const top = toggleSourceRect.top + toggleSourceRect.height + SPACE_BETWEEN + window.pageYOffset;
-    return {
-        left,
-        top,
-    };
-};
-const positionRight = (tooltipRect, toggleSourceRect) => {
-    const heightDifference = (tooltipRect.height - toggleSourceRect.height) / 2;
-    const left = toggleSourceRect.left + toggleSourceRect.width + SPACE_BETWEEN;
-    const top = toggleSourceRect.top - heightDifference + window.pageYOffset;
-    return { left, top };
-};
-const positionLeft = (tooltipRect, toggleSourceRect) => {
-    const heightDifference = (tooltipRect.height - toggleSourceRect.height) / 2;
-    const left = toggleSourceRect.left - tooltipRect.width - SPACE_BETWEEN;
-    const top = toggleSourceRect.top - heightDifference + window.pageYOffset;
-    return { left, top };
-};
-const positionTop = (tooltipRect, toggleSourceRect) => {
-    const widthDifference = (tooltipRect.width - toggleSourceRect.width) / 2;
-    let left = toggleSourceRect.left - widthDifference;
-    let top = toggleSourceRect.top - tooltipRect.height - SPACE_BETWEEN + window.pageYOffset;
-    // CONDITIONS TO HANDLE TOOLTIP OVERFLOW OUT OF VIEWPORT
-    // calculate the space between rightside viewport to rightside source element
-    // knowing this space will help calculate if tooltip will overflow right side
-    const rightSpaceDifference = window.innerWidth - toggleSourceRect.right;
-    // calculate rightside pos of tooltip to compare later to window.innerWidth
-    const overflowRight = toggleSourceRect.left + tooltipRect.width - rightSpaceDifference;
-    if (overflowRight > window.innerWidth) {
-        // if tooltip overflow right side of viewport
-        // place tooltip left side from source element
-        left = toggleSourceRect.left - tooltipRect.width - SPACE_BETWEEN;
-        top = toggleSourceRect.top + window.scrollY - toggleSourceRect.height / 2;
-    }
-    else if (left < 0) {
-        // if overflow left
-        // place tooltip right side from source element
-        left = toggleSourceRect.width + toggleSourceRect.left + SPACE_BETWEEN;
-        top = toggleSourceRect.top + window.scrollY - tooltipRect.height / 2 + SPACE_BETWEEN;
-    }
-    else if (top < 0 && left > 0) {
-        // if overflow top but not left
-        // place tooltip below source element
-        top = toggleSourceRect.top + toggleSourceRect.height + SPACE_BETWEEN;
-    }
-    return {
-        left,
-        top,
-    };
-};
-const positionTooltip = (tooltipNode, toggleSourceNode, position) => {
-    const tooltipRect = tooltipNode.getBoundingClientRect();
-    const toggleSourceRect = toggleSourceNode.getBoundingClientRect();
-    if (position === 'bottom') {
-        return positionBottom(tooltipRect, toggleSourceRect);
-    }
-    if (position === 'right') {
-        return positionRight(tooltipRect, toggleSourceRect);
-    }
-    if (position === 'left') {
-        return positionLeft(tooltipRect, toggleSourceRect);
-    }
-    return positionTop(tooltipRect, toggleSourceRect);
-};
-
-export { positionTooltip };

package/dist/Typography/Typography.js

@@ -1,34 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const styled = require('styled-components');
-const utils = require('./utils.js');
-const theme = require('../helpers/theme.js');
-
-const _interopDefault = e => e && e.__esModule ? e : { default: e };
-
-const styled__default = /*#__PURE__*/_interopDefault(styled);
-
-const transientProps = {
-    fontSize: true,
-    fontWeight: true,
-};
-const Typography = styled__default.default.span.withConfig({
-    shouldForwardProp: (prop, defPropValFN) => !transientProps[prop] && defPropValFN(prop),
-}) `
-  ${utils.variantStyle}
-  ${utils.ellipsisStyle}
-
-  // These properties need to come after {variantStyle}, because they might
-  // overwrite a variant attribute
-  font-weight: ${({ theme: theme$1, fontWeight }) => theme.extractStyleFromTheme(theme$1.fontWeights, fontWeight, undefined)};
-  font-size: ${({ theme: theme$1, fontSize }) => theme.extractStyleFromTheme(theme$1.fontSizes, fontSize, undefined)};
-  line-height: ${({ theme: theme$1, lineHeight }) => theme.extractStyleFromTheme(theme$1.lineHeights, lineHeight, lineHeight)};
-  color: ${({ theme, textColor }) => theme.colors[textColor || 'neutral800']};
-  text-align: ${({ textAlign }) => textAlign};
-  text-decoration: ${({ textDecoration }) => textDecoration};
-  text-transform: ${({ textTransform }) => textTransform};
-`;
-
-exports.Typography = Typography;

package/dist/Typography/Typography.mjs

@@ -1,26 +0,0 @@
-import styled from 'styled-components';
-import { variantStyle, ellipsisStyle } from './utils.mjs';
-import { extractStyleFromTheme } from '../helpers/theme.mjs';
-
-const transientProps = {
-    fontSize: true,
-    fontWeight: true,
-};
-const Typography = styled.span.withConfig({
-    shouldForwardProp: (prop, defPropValFN) => !transientProps[prop] && defPropValFN(prop),
-}) `
-  ${variantStyle}
-  ${ellipsisStyle}
-
-  // These properties need to come after {variantStyle}, because they might
-  // overwrite a variant attribute
-  font-weight: ${({ theme, fontWeight }) => extractStyleFromTheme(theme.fontWeights, fontWeight, undefined)};
-  font-size: ${({ theme, fontSize }) => extractStyleFromTheme(theme.fontSizes, fontSize, undefined)};
-  line-height: ${({ theme, lineHeight }) => extractStyleFromTheme(theme.lineHeights, lineHeight, lineHeight)};
-  color: ${({ theme, textColor }) => theme.colors[textColor || 'neutral800']};
-  text-align: ${({ textAlign }) => textAlign};
-  text-decoration: ${({ textDecoration }) => textDecoration};
-  text-transform: ${({ textTransform }) => textTransform};
-`;
-
-export { Typography };

package/dist/Typography/__tests__/Typography.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/Typography/constants.js

@@ -1,21 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const ALPHA = 'alpha';
-const BETA = 'beta';
-const DELTA = 'delta';
-const EPSILON = 'epsilon';
-const OMEGA = 'omega';
-const PI = 'pi';
-const SIGMA = 'sigma';
-const TEXT_VARIANTS = [ALPHA, BETA, DELTA, EPSILON, OMEGA, PI, SIGMA];
-
-exports.ALPHA = ALPHA;
-exports.BETA = BETA;
-exports.DELTA = DELTA;
-exports.EPSILON = EPSILON;
-exports.OMEGA = OMEGA;
-exports.PI = PI;
-exports.SIGMA = SIGMA;
-exports.TEXT_VARIANTS = TEXT_VARIANTS;

package/dist/Typography/constants.mjs

@@ -1,10 +0,0 @@
-const ALPHA = 'alpha';
-const BETA = 'beta';
-const DELTA = 'delta';
-const EPSILON = 'epsilon';
-const OMEGA = 'omega';
-const PI = 'pi';
-const SIGMA = 'sigma';
-const TEXT_VARIANTS = [ALPHA, BETA, DELTA, EPSILON, OMEGA, PI, SIGMA];
-
-export { ALPHA, BETA, DELTA, EPSILON, OMEGA, PI, SIGMA, TEXT_VARIANTS };

package/dist/Typography/index.js

@@ -1,9 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const Typography = require('./Typography.js');
-
-
-
-exports.Typography = Typography.Typography;

package/dist/Typography/index.mjs

@@ -1 +0,0 @@
-export { Typography } from './Typography.mjs';

package/dist/Typography/utils.js

@@ -1,72 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const constants = require('./constants.js');
-
-const ellipsisStyle = ({ ellipsis = false }) => ellipsis &&
-    `
-    display: block;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  `;
-const variantStyle = ({ variant = constants.OMEGA, theme, }) => {
-    switch (variant) {
-        case constants.ALPHA: {
-            return `
-        font-weight: ${theme.fontWeights.bold};
-        font-size: ${theme.fontSizes[5]};
-        line-height: ${theme.lineHeights[2]};
-      `;
-        }
-        case constants.BETA: {
-            return `
-        font-weight: ${theme.fontWeights.bold};
-        font-size: ${theme.fontSizes[4]};
-        line-height: ${theme.lineHeights[1]};
-      `;
-        }
-        case constants.DELTA: {
-            return `
-        font-weight: ${theme.fontWeights.semiBold};
-        font-size: ${theme.fontSizes[3]};
-        line-height: ${theme.lineHeights[2]};
-      `;
-        }
-        case constants.EPSILON: {
-            return `
-        font-size: ${theme.fontSizes[3]};
-        line-height: ${theme.lineHeights[6]};
-      `;
-        }
-        case constants.OMEGA: {
-            return `
-        font-size: ${theme.fontSizes[2]};
-        line-height: ${theme.lineHeights[4]};
-      `;
-        }
-        case constants.PI: {
-            return `
-        font-size: ${theme.fontSizes[1]};
-        line-height: ${theme.lineHeights[3]};
-      `;
-        }
-        case constants.SIGMA: {
-            return `
-        font-weight: ${theme.fontWeights.bold};
-        font-size: ${theme.fontSizes[0]};
-        line-height: ${theme.lineHeights[5]};
-        text-transform: uppercase;
-      `;
-        }
-        default: {
-            return `
-        font-size: ${theme.fontSizes[2]};
-      `;
-        }
-    }
-};
-
-exports.ellipsisStyle = ellipsisStyle;
-exports.variantStyle = variantStyle;

package/dist/Typography/utils.mjs

@@ -1,67 +0,0 @@
-import { SIGMA, PI, OMEGA, EPSILON, DELTA, BETA, ALPHA } from './constants.mjs';
-
-const ellipsisStyle = ({ ellipsis = false }) => ellipsis &&
-    `
-    display: block;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  `;
-const variantStyle = ({ variant = OMEGA, theme, }) => {
-    switch (variant) {
-        case ALPHA: {
-            return `
-        font-weight: ${theme.fontWeights.bold};
-        font-size: ${theme.fontSizes[5]};
-        line-height: ${theme.lineHeights[2]};
-      `;
-        }
-        case BETA: {
-            return `
-        font-weight: ${theme.fontWeights.bold};
-        font-size: ${theme.fontSizes[4]};
-        line-height: ${theme.lineHeights[1]};
-      `;
-        }
-        case DELTA: {
-            return `
-        font-weight: ${theme.fontWeights.semiBold};
-        font-size: ${theme.fontSizes[3]};
-        line-height: ${theme.lineHeights[2]};
-      `;
-        }
-        case EPSILON: {
-            return `
-        font-size: ${theme.fontSizes[3]};
-        line-height: ${theme.lineHeights[6]};
-      `;
-        }
-        case OMEGA: {
-            return `
-        font-size: ${theme.fontSizes[2]};
-        line-height: ${theme.lineHeights[4]};
-      `;
-        }
-        case PI: {
-            return `
-        font-size: ${theme.fontSizes[1]};
-        line-height: ${theme.lineHeights[3]};
-      `;
-        }
-        case SIGMA: {
-            return `
-        font-weight: ${theme.fontWeights.bold};
-        font-size: ${theme.fontSizes[0]};
-        line-height: ${theme.lineHeights[5]};
-        text-transform: uppercase;
-      `;
-        }
-        default: {
-            return `
-        font-size: ${theme.fontSizes[2]};
-      `;
-        }
-    }
-};
-
-export { ellipsisStyle, variantStyle };

package/dist/VisuallyHidden/VisuallyHidden.js

@@ -1,22 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const styled = require('styled-components');
-
-const _interopDefault = e => e && e.__esModule ? e : { default: e };
-
-const styled__default = /*#__PURE__*/_interopDefault(styled);
-
-const VisuallyHidden = styled__default.default.div `
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-`;
-
-exports.VisuallyHidden = VisuallyHidden;

package/dist/VisuallyHidden/VisuallyHidden.mjs

@@ -1,14 +0,0 @@
-import styled from 'styled-components';
-
-const VisuallyHidden = styled.div `
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-`;
-
-export { VisuallyHidden };

package/dist/VisuallyHidden/index.js

@@ -1,9 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const VisuallyHidden = require('./VisuallyHidden.js');
-
-
-
-exports.VisuallyHidden = VisuallyHidden.VisuallyHidden;

package/dist/VisuallyHidden/index.mjs

@@ -1 +0,0 @@
-export { VisuallyHidden } from './VisuallyHidden.mjs';

package/dist/helpers/__tests__/deprecations.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/helpers/context.js

@@ -1,50 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const React = require('react');
-
-function _interopNamespace(e) {
-    if (e && e.__esModule) return e;
-    const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
-    if (e) {
-        for (const k in e) {
-            if (k !== 'default') {
-                const d = Object.getOwnPropertyDescriptor(e, k);
-                Object.defineProperty(n, k, d.get ? d : {
-                    enumerable: true,
-                    get: () => e[k]
-                });
-            }
-        }
-    }
-    n.default = e;
-    return Object.freeze(n);
-}
-
-const React__namespace = /*#__PURE__*/_interopNamespace(React);
-
-const createContext = (rootComponentName, defaultContext) => {
-    const Context = React__namespace.createContext(defaultContext);
-    function Provider(props) {
-        const { children, ...context } = props;
-        // Only re-memoize when prop values change
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        const value = React__namespace.useMemo(() => context, Object.values(context));
-        return jsxRuntime.jsx(Context.Provider, { value: value, children: children });
-    }
-    function useContext(consumerName) {
-        const context = React__namespace.useContext(Context);
-        if (context)
-            return context;
-        if (defaultContext !== undefined)
-            return defaultContext;
-        // if a defaultContext wasn't specified, it's a required context.
-        throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
-    }
-    Provider.displayName = `${rootComponentName}Provider`;
-    return [Provider, useContext];
-};
-
-exports.createContext = createContext;

package/dist/helpers/context.mjs

@@ -1,26 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import * as React from 'react';
-
-const createContext = (rootComponentName, defaultContext) => {
-    const Context = React.createContext(defaultContext);
-    function Provider(props) {
-        const { children, ...context } = props;
-        // Only re-memoize when prop values change
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        const value = React.useMemo(() => context, Object.values(context));
-        return jsx(Context.Provider, { value: value, children: children });
-    }
-    function useContext(consumerName) {
-        const context = React.useContext(Context);
-        if (context)
-            return context;
-        if (defaultContext !== undefined)
-            return defaultContext;
-        // if a defaultContext wasn't specified, it's a required context.
-        throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
-    }
-    Provider.displayName = `${rootComponentName}Provider`;
-    return [Provider, useContext];
-};
-
-export { createContext };