@onesy/ui-react 1.0.59 → 1.0.63

package/NavigationItem/NavigationItem.js

@@ -1,294 +0,0 @@
-"use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
-const utils_1 = require("@onesy/utils");
-const style_react_1 = require("@onesy/style-react");
-const Type_1 = __importDefault(require("../Type"));
-const Fade_1 = __importDefault(require("../Fade"));
-const Line_1 = __importDefault(require("../Line"));
-const Tooltip_1 = __importDefault(require("../Tooltip"));
-const Transition_1 = __importDefault(require("../Transition"));
-const utils_2 = require("../utils");
-const useStyle = (0, style_react_1.style)(theme => ({
-    root: {
-        display: 'inline-flex',
-        justifyContent: 'center',
-        flex: '1 1 auto',
-        userSelect: 'none',
-        cursor: 'pointer',
-        padding: `${theme.methods.space.value(1.5, 'px')} 0 ${theme.methods.space.value(2, 'px')}`,
-        minHeight: '80px',
-    },
-    vertical: {
-        flex: '0 0 auto',
-        padding: '0px',
-        minHeight: '52px',
-        width: '100%'
-    },
-    iconWrapper: {
-        position: 'absolute',
-        top: '0',
-        height: '32px',
-        width: '64px'
-    },
-    iconWrapper_center: {
-        top: '50%',
-        transform: 'translateY(-50%)',
-        transition: theme.methods.transitions.make(['top', 'transform']),
-    },
-    iconWrapper_center_selected: {
-        top: '0',
-        transform: 'translateY(0)'
-    },
-    icon: {
-        lineHeight: '0'
-    },
-    labelWrapper: {
-        position: 'absolute',
-        bottom: '0'
-    },
-    label: {
-        position: 'absolute',
-        bottom: '0'
-    },
-    indicator: {
-        position: 'absolute',
-        inset: '0',
-        width: '100%',
-        height: '100%',
-        borderRadius: theme.methods.shape.radius.value(40, 'px'),
-        opacity: '0',
-        transform: 'scaleX(0.74)',
-        transition: theme.methods.transitions.make(['opacity', 'transform']),
-        pointerEvents: 'none',
-        background: 'currentColor',
-    },
-    indicator_enter: {
-        opacity: '0',
-        transform: 'scaleX(0.74)',
-    },
-    indicator_entering: {
-        opacity: '1',
-        transform: 'scaleX(1)'
-    },
-    indicator_entered: {
-        opacity: '1',
-        transform: 'scaleX(1)'
-    },
-    indicator_exit: {
-        opacity: '1',
-        transform: 'scaleX(1)'
-    },
-    indicator_exiting: {
-        opacity: '0',
-        transform: 'scaleX(1)',
-        transition: theme.methods.transitions.make(['opacity', 'transform'], { duration: 0 })
-    },
-    indicator_exited: {
-        opacity: '0',
-        transform: 'scaleX(0.74)'
-    },
-    indicator_hover: { opacity: theme.palette.visual_contrast.default.opacity.hover },
-    indicator_selected: { opacity: theme.palette.visual_contrast.default.opacity.selected },
-    indicator_focus: { opacity: theme.palette.visual_contrast.default.opacity.focus },
-    indicator_pressed: { opacity: theme.palette.visual_contrast.default.opacity.press },
-    disabled: {
-        opacity: theme.palette.visual_contrast.default.opacity.disabled,
-        pointerEvents: 'none',
-        cursor: 'default'
-    }
-}), { name: 'onesy-NavigationItem' });
-const NavigationItem = react_1.default.forwardRef((props_, ref) => {
-    var _a;
-    const theme = (0, style_react_1.useOnesyTheme)();
-    const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyNavigationItem) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
-    const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
-    const Type = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Type) || Type_1.default; }, [theme]);
-    const Fade = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Fade) || Fade_1.default; }, [theme]);
-    const Tooltip = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Tooltip) || Tooltip_1.default; }, [theme]);
-    const Transition = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Transition) || Transition_1.default; }, [theme]);
-    const { tonal = true, color = 'primary', version = 'regular', value, vertical, name, label, icon, iconSelected, selected, disabled, IconWrapperComponent = 'span', onFocus: onFocus_, onBlur: onBlur_, onKeyDown: onKeyDown_, onMouseDown: onMouseDown_, onMouseEnter: onMouseEnter_, onMouseLeave: onMouseLeave_, onTouchStart: onTouchStart_, TooltipProps, IconWrapperProps, className, style, children: children_ } = props, other = __rest(props, ["tonal", "color", "version", "value", "vertical", "name", "label", "icon", "iconSelected", "selected", "disabled", "IconWrapperComponent", "onFocus", "onBlur", "onKeyDown", "onMouseDown", "onMouseEnter", "onMouseLeave", "onTouchStart", "TooltipProps", "IconWrapperProps", "className", "style", "children"]);
-    const { classes } = useStyle();
-    const [focus, setFocus] = react_1.default.useState(false);
-    const [hover, setHover] = react_1.default.useState(false);
-    const [mouseDown, setMouseDown] = react_1.default.useState(false);
-    const refs = {
-        root: react_1.default.useRef(undefined),
-        props: react_1.default.useRef(undefined),
-        hover: react_1.default.useRef(undefined)
-    };
-    const styles = {
-        root: {},
-        icon: {},
-        label: {},
-        indicator: {}
-    };
-    refs.props.current = props;
-    refs.hover.current = hover;
-    react_1.default.useEffect(() => {
-        var _a;
-        const onMouseUp = () => {
-            if (!refs.props.current.disabled) {
-                setMouseDown(false);
-                setFocus(false);
-            }
-        };
-        const rootDocument = (0, utils_1.isEnvironment)('browser') ? (((_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) || window.document) : undefined;
-        rootDocument.addEventListener('mouseup', onMouseUp);
-        return () => {
-            rootDocument.removeEventListener('mouseup', onMouseUp);
-        };
-    }, []);
-    react_1.default.useEffect(() => {
-        if (!selected) {
-            if (refs.hover.current)
-                setHover(false);
-        }
-    }, [selected]);
-    const onKeyDown = react_1.default.useCallback((event) => {
-        if (!disabled) {
-            if (event.key === 'Enter') {
-                if ((0, utils_1.is)('function', props.onClick))
-                    props.onClick(event);
-            }
-        }
-        if ((0, utils_1.is)('function', onKeyDown_))
-            onKeyDown_(event);
-    }, []);
-    const onFocus = react_1.default.useCallback((event) => {
-        if (!disabled)
-            setFocus(true);
-        if ((0, utils_1.is)('function', onFocus_))
-            onFocus_(event);
-    }, []);
-    const onBlur = react_1.default.useCallback((event) => {
-        if (!disabled)
-            setFocus(false);
-        if ((0, utils_1.is)('function', onBlur_))
-            onBlur_(event);
-    }, []);
-    const onTouchStart = react_1.default.useCallback((event) => {
-        if (!disabled)
-            setMouseDown(true);
-        if ((0, utils_1.is)('function', onTouchStart))
-            onTouchStart(event);
-    }, []);
-    const onMouseDown = react_1.default.useCallback((event) => {
-        if (!disabled)
-            setMouseDown(true);
-        if ((0, utils_1.is)('function', onMouseDown_))
-            onMouseDown_(event);
-    }, []);
-    const onMouseEnter = react_1.default.useCallback((event) => {
-        if (!disabled)
-            setHover(true);
-        if ((0, utils_1.is)('function', onMouseEnter_))
-            onMouseEnter_(event);
-    }, []);
-    const onMouseLeave = react_1.default.useCallback((event) => {
-        if (!refs.props.current.disabled)
-            setHover(false);
-        if ((0, utils_1.is)('function', onMouseLeave_))
-            onMouseLeave_(event);
-    }, []);
-    let palette;
-    if (!theme.palette.color[color] && !['themed', 'inverted', 'default', 'inherit'].includes(color)) {
-        palette = theme.methods.color(color);
-    }
-    if (!tonal) {
-        let background = (_a = theme.palette.color[color]) === null || _a === void 0 ? void 0 : _a.main;
-        if (color === 'default')
-            background = theme.palette.background.default.primary;
-        styles.icon.color = styles.label.color = styles.indicator.color = theme.methods.palette.color.text((palette === null || palette === void 0 ? void 0 : palette.main) || background, true, 'light');
-    }
-    else {
-        styles.indicator.color = (palette === null || palette === void 0 ? void 0 : palette.main) || (color === 'default' ? theme.palette.text.default.primary : theme.palette.color[color].main);
-        styles.icon.color = styles.label.color = theme.methods.palette.color.value(color, 5, true, palette);
-    }
-    const LabelWrapper = version === 'auto' ? Fade : react_1.default.Fragment;
-    const LabelWrapperProps = {};
-    if (version === 'auto') {
-        LabelWrapperProps.in = selected;
-        LabelWrapperProps.className = (0, style_react_1.classNames)([
-            (0, utils_2.staticClassName)('NavigationItem', theme) && [
-                'onesy-NavigationItem-label'
-            ],
-            classes.labelWrapper
-        ]);
-    }
-    const Icon = (selected && iconSelected) || icon;
-    return ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ label: label || value, position: 'top', alignment: 'center', longPress: true, touch: false, hover: false, focus: false }, TooltipProps, { children: (0, jsx_runtime_1.jsx)("span", Object.assign({ tabIndex: !disabled ? 0 : undefined, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, onTouchStart: onTouchStart, onMouseDown: onMouseDown, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, className: (0, style_react_1.classNames)([
-                (0, utils_2.staticClassName)('NavigationItem', theme) && [
-                    'onesy-NavigationItem-root',
-                    selected && 'onesy-NavigationItem-selected',
-                    hover && `onesy-NavigationItem-hover`,
-                    mouseDown && `onesy-NavigationItem-mouse-down`,
-                    focus && `onesy-NavigationItem-focus`,
-                    disabled && `onesy-NavigationItem-disabled`
-                ],
-                className,
-                classes.root,
-                vertical && classes.vertical,
-                disabled && classes.disabled
-            ]), style: Object.assign(Object.assign({}, style), styles.root) }, other, { children: (0, jsx_runtime_1.jsxs)(Line, Object.assign({ ref: item => {
-                    if (ref) {
-                        if ((0, utils_1.is)('function', ref))
-                            ref(item);
-                        else
-                            ref.current = item;
-                    }
-                    refs.root.current = item;
-                }, direction: 'column', align: 'center', justify: 'center', gap: 0.5, className: (0, style_react_1.classNames)([
-                    (0, utils_2.staticClassName)('NavigationItem', theme) && [
-                        'onesy-NavigationItem-item'
-                    ],
-                    classes.item
-                ]) }, { children: [Icon && ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ Component: 'span', align: 'center', justify: 'center', className: (0, style_react_1.classNames)([
-                            (0, utils_2.staticClassName)('NavigationItem', theme) && [
-                                'onesy-NavigationItem-icon-wrapper'
-                            ],
-                            classes.iconWrapper,
-                            ['none', 'auto'].includes(version) && classes.iconWrapper_center,
-                            ['auto'].includes(version) && selected && classes.iconWrapper_center_selected
-                        ]) }, { children: [(0, jsx_runtime_1.jsx)(Transition, Object.assign({ in: hover || focus || selected }, { children: (status) => ((0, jsx_runtime_1.jsx)("span", { className: (0, style_react_1.classNames)([
-                                        (0, utils_2.staticClassName)('NavigationItem', theme) && [
-                                            'onesy-NavigationItem-indicator'
-                                        ],
-                                        classes.indicator,
-                                        classes[`indicator_${status}`],
-                                        selected && classes.indicator_selected,
-                                        hover && classes.indicator_hover,
-                                        focus && classes.indicator_focus,
-                                        mouseDown && classes.indicator_pressed
-                                    ]), style: styles.indicator })) })), (0, jsx_runtime_1.jsx)(IconWrapperComponent, Object.assign({}, IconWrapperProps, { className: (0, style_react_1.classNames)([
-                                    (0, utils_2.staticClassName)('NavigationItem', theme) && [
-                                        'onesy-NavigationItem-icon'
-                                    ],
-                                    IconWrapperProps === null || IconWrapperProps === void 0 ? void 0 : IconWrapperProps.className,
-                                    classes.icon
-                                ]) }, { children: react_1.default.cloneElement(Icon, {
-                                    style: Object.assign(Object.assign({}, Icon.props.style), styles.icon)
-                                }) }))] }))), ['regular', 'auto'].includes(version) && ((0, jsx_runtime_1.jsx)(LabelWrapper, Object.assign({}, LabelWrapperProps, { children: (0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3', className: (0, style_react_1.classNames)([
-                                (0, utils_2.staticClassName)('NavigationItem', theme) && [
-                                    'onesy-NavigationItem-label'
-                                ],
-                                classes.label
-                            ]), style: styles.label }, { children: name !== undefined ? name : label })) })))] })) })) })));
-});
-NavigationItem.displayName = 'onesy-NavigationItem';
-exports.default = NavigationItem;

package/NotFound/NotFound.d.ts

@@ -1,16 +0,0 @@
-import React from 'react';
-import { ISection } from '../Section/Section';
-export type INotFound = ISection & {
-    name?: any;
-    href?: string;
-    to?: string;
-    link?: string;
-    start?: any;
-    end?: any;
-    renderButton?: (props: any) => any;
-    fullHeight?: any;
-    ButtonProps?: any;
-    TypeProps?: any;
-};
-declare const NotFound: React.FC<INotFound>;
-export default NotFound;

package/NotFound/NotFound.js

@@ -1,68 +0,0 @@
-"use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
-const react_router_dom_1 = require("react-router-dom");
-const utils_1 = require("@onesy/utils");
-const style_react_1 = require("@onesy/style-react");
-const Section_1 = __importDefault(require("../Section"));
-const Type_1 = __importDefault(require("../Type"));
-const Button_1 = __importDefault(require("../Button"));
-const utils_2 = require("../utils");
-const useStyle = (0, style_react_1.style)(theme => ({
-    root: {},
-    fullHeight: {
-        height: '100vh'
-    }
-}), { name: 'onesy-NotFound' });
-const NotFound = react_1.default.forwardRef((props_, ref) => {
-    const theme = (0, style_react_1.useOnesyTheme)();
-    const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyNotFound) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
-    const Section = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Section) || Section_1.default; }, [theme]);
-    const Type = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Type) || Type_1.default; }, [theme]);
-    const Button = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Button) || Button_1.default; }, [theme]);
-    const { name = 'Page not found 🫠', to = '/', link = '', renderButton, fullHeight, start, end, ButtonProps, TypeProps, className } = props, other = __rest(props, ["name", "to", "link", "renderButton", "fullHeight", "start", "end", "ButtonProps", "TypeProps", "className"]);
-    const { classes } = useStyle();
-    const navigate = (0, utils_1.isEnvironment)('browser') && (0, react_router_dom_1.useNavigate)();
-    const onTo = react_1.default.useCallback(() => {
-        if (link)
-            window.open(link, 'blank');
-        else
-            navigate(to);
-    }, [to, link]);
-    return ((0, jsx_runtime_1.jsxs)(Section, Object.assign({ ref: ref, flex: true, fullWidth: true, align: 'center', justify: 'center', className: (0, style_react_1.classNames)([
-            (0, utils_2.staticClassName)('NotFound', theme) && [
-                `onesy-NotFound-root`
-            ],
-            className,
-            classes.root,
-            fullHeight && classes.fullHeight
-        ]) }, other, { children: [start, (0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'h3', align: 'center' }, TypeProps, { className: (0, style_react_1.classNames)([
-                    (0, utils_2.staticClassName)('NotFound', theme) && [
-                        `onesy-NotFound-type`
-                    ],
-                    TypeProps === null || TypeProps === void 0 ? void 0 : TypeProps.className
-                ]) }, { children: name })), (0, utils_1.is)('function', renderButton) ? renderButton({}) : ((0, jsx_runtime_1.jsx)(Button, Object.assign({ color: 'default', version: 'outlined', size: 'small', onClick: onTo }, ButtonProps, { className: (0, style_react_1.classNames)([
-                    (0, utils_2.staticClassName)('NotFound', theme) && [
-                        `onesy-NotFound-button`
-                    ],
-                    ButtonProps === null || ButtonProps === void 0 ? void 0 : ButtonProps.className,
-                    classes.button
-                ]) }, { children: "Back" }))), end] })));
-});
-NotFound.displayName = 'onesy-NotFound';
-exports.default = NotFound;

package/Page/Page.js

@@ -1,70 +0,0 @@
-"use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
-const react_router_dom_1 = require("react-router-dom");
-const utils_1 = require("@onesy/utils");
-const style_react_1 = require("@onesy/style-react");
-const IconMaterialArrowBackW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialArrowBackW100"));
-const IconMaterialArrowForwardW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialArrowForwardW100"));
-const IconButton_1 = __importDefault(require("../IconButton"));
-const Line_1 = __importDefault(require("../Line"));
-const Tooltip_1 = __importDefault(require("../Tooltip"));
-const Type_1 = __importDefault(require("../Type"));
-const utils_2 = require("../utils");
-const useStyle = (0, style_react_1.style)(theme => ({
-    root: {
-        position: 'relative',
-        height: '100%',
-        maxWidth: '1024px',
-        padding: theme.methods.space.value(3, 'px'),
-        '& .onesy-overflow-y': {
-            height: '0px',
-            flex: '1 1 auto',
-            overflowX: 'hidden',
-            overflowY: 'auto'
-        }
-    },
-    name: {
-        maxWidth: '440px'
-    }
-}), { name: 'onesy' });
-const Page = react_1.default.forwardRef((props_, ref) => {
-    const theme = (0, style_react_1.useOnesyTheme)();
-    const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyPage) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
-    const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
-    const IconButton = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.IconButton) || IconButton_1.default; }, [theme]);
-    const Tooltip = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Tooltip) || Tooltip_1.default; }, [theme]);
-    const Type = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Type) || Type_1.default; }, [theme]);
-    const { back, forward, noHeader, name, IconBack = IconMaterialArrowBackW100_1.default, IconForward = IconMaterialArrowForwardW100_1.default, Component = Line, className, children } = props, other = __rest(props, ["back", "forward", "noHeader", "name", "IconBack", "IconForward", "Component", "className", "children"]);
-    const { classes } = useStyle();
-    const navigate = (0, utils_1.isEnvironment)('browser') && (0, react_router_dom_1.useNavigate)();
-    const IconButtonProps = {
-        color: 'inherit'
-    };
-    const navigation = (back || forward) && ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ direction: 'row', align: 'center', justify: 'space-between', fullWidth: true }, { children: [back ? ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: ((back === null || back === void 0 ? void 0 : back.name) !== undefined ? back.name : back === null || back === void 0 ? void 0 : back.label) || 'Back' }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: () => navigate(back === null || back === void 0 ? void 0 : back.to) }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconBack, {}) })) }))) : (0, jsx_runtime_1.jsx)("span", {}), forward ? ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: ((forward === null || forward === void 0 ? void 0 : forward.name) !== undefined ? forward.name : forward === null || forward === void 0 ? void 0 : forward.label) || 'Forward' }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: () => navigate(forward === null || forward === void 0 ? void 0 : forward.to) }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconForward, {}) })) }))) : (0, jsx_runtime_1.jsx)("span", {})] })));
-    const header = !noHeader && (navigation || name) && ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 2, direction: 'column', fullWidth: true }, { children: [navigation, (0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 0, direction: 'row', align: 'center', justify: 'center', fullWidth: true }, { children: (0, utils_1.is)('string', name) ? ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 't1', color: 'inherit', align: 'center', className: classes.name }, { children: name }))) : name }))] })));
-    return ((0, jsx_runtime_1.jsxs)(Component, Object.assign({ ref: ref, gap: 4, direction: 'column', justify: 'unset', align: 'unset', fullWidth: true, flex: true, className: (0, style_react_1.classNames)([
-            (0, utils_2.staticClassName)('Page', theme) && [
-                'onesy-Page-root'
-            ],
-            className,
-            classes.root
-        ]) }, other, { children: [header, (0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 0, direction: 'column', justify: 'unset', align: 'unset', fullWidth: true, flex: true }, { children: children }))] })));
-});
-Page.displayName = 'onesy-Page';
-exports.default = Page;