npm - @onesy/ui-react - Versions diffs - 1.0.126 → 1.0.128 - Mend

@onesy/ui-react 1.0.126 → 1.0.128

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/BottomAppBar/BottomAppBar.js +17 -155
package/NavigationItem/NavigationItem.d.ts +3 -2
package/NavigationItem/NavigationItem.js +12 -35
package/TextField/TextField.js +8 -5
package/esm/BottomAppBar/BottomAppBar.js +25 -164
package/esm/NavigationItem/NavigationItem.js +14 -35
package/esm/TextField/TextField.js +6 -3
package/esm/index.js +1 -1
package/package.json +1 -1

package/BottomAppBar/BottomAppBar.js CHANGED Viewed

@@ -19,81 +19,27 @@ const react_1 = __importDefault(require("react"));
 const style_react_1 = require("@onesy/style-react");
 const Line_1 = __importDefault(require("../Line"));
 const Surface_1 = __importDefault(require("../Surface"));
-const Transition_1 = __importDefault(require("../Transition"));
 const utils_1 = require("../utils");
 const useStyle = (0, style_react_1.style)(theme => ({
     root: {
+        background: theme.palette.color.primary[theme.palette.light ? 100 : 5],
+        boxShadow: '0px 8px 10px 1px rgb(0 0 0 / 1%), 0px 3px 14px 2px rgb(0 0 0 / 1%), 0px 5px 5px -3px rgb(0 0 0 / 4%)',
+        borderRadius: '500px',
         zIndex: theme.z_index.app_bar,
-        width: '100%',
-        height: '80px',
-        paddingBlock: theme.methods.space.value(1.5, 'px'),
-        paddingInline: `${theme.methods.space.value(0.5, 'px')} ${theme.methods.space.value(2, 'px')}`
+        overflow: 'auto hidden',
+        '&::-webkit-scrollbar': {
+            width: '0px',
+            height: '0px'
+        }
     },
-    size_small: { height: '72px' },
-    size_regular: { height: '80px' },
-    size_large: { height: '88px' },
+    size_small: { padding: '6px 10px' },
+    size_regular: { padding: '12px 20px' },
+    size_large: { padding: '18px 30px' },
     fixed: {
         position: 'fixed',
-        insetInline: '0px',
-        bottom: '0px'
-    },
-    item: {
-        opacity: '0',
-        transform: 'translateY(100%)',
-        transition: theme === null || theme === void 0 ? void 0 : theme.methods.transitions.make(['opacity', 'transform'], { duration: 'rg', timing_function: 'standard' }),
-        '&.enter': {
-            opacity: '0',
-            transform: 'translateY(100%)'
-        },
-        '&.entering': {
-            opacity: '1',
-            transform: 'translateY(0%)'
-        },
-        '&.entered': {
-            opacity: '1',
-            transform: 'translateY(0%)'
-        },
-        '&.exit': {
-            opacity: '1',
-            transform: 'translateY(0%)'
-        },
-        '&.exiting': {
-            opacity: '0',
-            transform: 'translateY(0%)'
-        },
-        '&.exited': {
-            opacity: '0',
-            transform: 'translateY(0%)'
-        }
-    },
-    mainItem: {
-        opacity: '0',
-        transform: 'scale(0.75)',
-        transition: theme === null || theme === void 0 ? void 0 : theme.methods.transitions.make(['opacity', 'transform'], { duration: 'rg', timing_function: 'standard' }),
-        '&.enter': {
-            opacity: '0',
-            transform: 'scale(0.75)'
-        },
-        '&.entering': {
-            opacity: '1',
-            transform: 'scale(1)'
-        },
-        '&.entered': {
-            opacity: '1',
-            transform: 'scale(1)'
-        },
-        '&.exit': {
-            opacity: '1',
-            transform: 'scale(1)'
-        },
-        '&.exiting': {
-            opacity: '0',
-            transform: 'scale(1)'
-        },
-        '&.exited': {
-            opacity: '0',
-            transform: 'scale(1)'
-        }
+        bottom: '12px',
+        left: '50%',
+        transform: 'translateX(-50%)'
     }
 }), { name: 'onesy-BottomAppBar' });
 const BottomAppBar = react_1.default.forwardRef((props_, ref) => {
@@ -101,89 +47,9 @@ const BottomAppBar = react_1.default.forwardRef((props_, ref) => {
     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.onesyBottomAppBar) === 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 Surface = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Surface) || Surface_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', size = 'regular', main: main_, fixed, noTransition, className, children: children_ } = props, other = __rest(props, ["tonal", "color", "size", "main", "fixed", "noTransition", "className", "children"]);
+    const { tonal = true, color = 'default', size = 'regular', fixed = true, className, children, style } = props, other = __rest(props, ["tonal", "color", "size", "fixed", "className", "children", "style"]);
     const { classes } = useStyle();
-    const makeChildren = (values) => {
-        return react_1.default.Children
-            .toArray(values)
-            .map((item, index) => ((0, jsx_runtime_1.jsx)(Transition, Object.assign({ onRemoved: () => {
-                if (index === 0)
-                    reAddChildren();
-            }, removeOnExited: true }, { children: (status) => (react_1.default.cloneElement(item, {
-                className: (0, style_react_1.classNames)([
-                    classes.item,
-                    status
-                ]),
-                elevation: item.props.elevation !== undefined ? item.props.elevation : false,
-                version: item.props.version !== undefined ? item.props.version : 'filled',
-                color: item.props.color !== undefined ? item.props.color : color,
-                tonal: item.props.tonal !== undefined ? item.props.tonal : tonal,
-                style: Object.assign(Object.assign({}, item.props.style), (status.includes('enter') && {
-                    transitionDelay: `${index * 70}ms`
-                }))
-            })) }), index)));
-    };
-    const makeMain = (values) => {
-        return react_1.default.Children
-            .toArray(values)
-            .map((item, index) => ((0, jsx_runtime_1.jsx)(Transition, Object.assign({ onRemoved: () => {
-                if (index === 0)
-                    reAddMain();
-            }, removeOnExited: true }, { children: (status) => {
-                var _a;
-                return (react_1.default.cloneElement(item, {
-                    className: (0, style_react_1.classNames)([
-                        classes.mainItem,
-                        status
-                    ]),
-                    color: item.props.color !== undefined ? item.props.color : color,
-                    tonal: item.props.tonal !== undefined ? item.props.tonal : tonal && ['onesy-Fab'].includes((_a = item.type) === null || _a === void 0 ? void 0 : _a.displayName) ? 'secondary' : tonal
-                }));
-            } }), index)));
-    };
-    const [init, setInit] = react_1.default.useState(false);
-    const [children, setChildren] = react_1.default.useState(() => makeChildren(children_));
-    const [main, setMain] = react_1.default.useState(() => makeMain(main_));
-    const [inProp, setInProp] = react_1.default.useState(true);
-    const refs = {
-        preChildren: react_1.default.useRef(undefined),
-        preMain: react_1.default.useRef(undefined)
-    };
-    react_1.default.useEffect(() => {
-        setInit(true);
-    }, []);
-    const reAddChildren = () => {
-        setChildren(makeChildren(refs.preChildren.current));
-        setInProp(true);
-        refs.preChildren.current = undefined;
-    };
-    const reAddMain = () => {
-        setMain(makeMain(refs.preMain.current));
-        setInProp(true);
-        refs.preMain.current = undefined;
-    };
-    react_1.default.useEffect(() => {
-        if (init) {
-            if (!noTransition) {
-                refs.preChildren.current = children_;
-                setInProp(false);
-            }
-            else
-                setChildren(makeChildren(children_));
-        }
-    }, [react_1.default.Children.toArray(children_).map((item) => item.key).join('')]);
-    react_1.default.useEffect(() => {
-        if (init) {
-            if (!noTransition) {
-                refs.preMain.current = main_;
-                setInProp(false);
-            }
-            else
-                setMain(makeMain(main_));
-        }
-    }, [react_1.default.Children.toArray(main_).map((item) => item.key).join('')]);
-    return ((0, jsx_runtime_1.jsxs)(Surface, Object.assign({ ref: ref, color: color, tonal: tonal, gap: 4, direction: 'row', align: 'center', justify: 'space-between', Component: Line, className: (0, style_react_1.classNames)([
+    return ((0, jsx_runtime_1.jsx)(Surface, Object.assign({ ref: ref, color: color, tonal: tonal, gap: 4, direction: 'row', align: 'center', justify: 'space-between', fullWidth: true, Component: Line, className: (0, style_react_1.classNames)([
             (0, utils_1.staticClassName)('BottomAppBar', theme) && [
                 'onesy-BottomAppBar-root',
                 `onesy-BottomAppBar-size-${size}`
@@ -192,11 +58,7 @@ const BottomAppBar = react_1.default.forwardRef((props_, ref) => {
             classes.root,
             classes[`size_${size}`],
             fixed && classes.fixed
-        ]) }, other, { children: [!!children.length && ((0, jsx_runtime_1.jsx)(Line, Object.assign({ direction: 'row', align: 'center', justify: 'flex-start', gap: 0 }, { children: children.map((item) => (react_1.default.cloneElement(item, {
-                    in: inProp
-                }))) }))), !!main.length && ((0, jsx_runtime_1.jsx)(Line, Object.assign({ direction: 'row', align: 'center', justify: 'flex-end' }, { children: main.map((item) => (react_1.default.cloneElement(item, {
-                    in: inProp
-                }))) })))] })));
+        ]), style: Object.assign({ minWidth: `clamp(100px, ${((children === null || children === void 0 ? void 0 : children.length) || 3) * 110}px, calc(100vw - 24px))` }, style) }, other, { children: children })));
 });
 BottomAppBar.displayName = 'onesy-BottomAppBar';
 exports.default = BottomAppBar;

package/NavigationItem/NavigationItem.d.ts CHANGED Viewed

@@ -5,9 +5,9 @@ export declare type INavigationItemVersion = 'regular' | 'auto';
 export declare type INavigationItem = ITooltip & {
     version?: 'regular' | 'auto';
     value?: any;
-    vertical?: boolean;
     name?: IElement;
-    label?: IElement;
+    nameTooltip?: any;
+    vertical?: boolean;
     icon?: IElement;
     iconSelected?: IElement;
     selected?: boolean;
@@ -21,6 +21,7 @@ export declare type INavigationItem = ITooltip & {
     onMouseLeave?: (event: React.MouseEvent<any>) => any;
     onTouchStart?: (event: React.TouchEvent<any>) => any;
     TooltipProps?: IPropsAny;
+    LabelProps?: IPropsAny;
     IconWrapperProps?: IPropsAny;
 };
 declare const NavigationItem: React.FC<INavigationItem>;

package/NavigationItem/NavigationItem.js CHANGED Viewed

@@ -19,7 +19,6 @@ 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"));
@@ -41,8 +40,7 @@ const useStyle = (0, style_react_1.style)(theme => ({
         width: '100%'
     },
     iconWrapper: {
-        position: 'absolute',
-        top: '0',
+        position: 'relative',
         height: '32px',
         width: '64px'
     },
@@ -58,14 +56,6 @@ const useStyle = (0, style_react_1.style)(theme => ({
     icon: {
         lineHeight: '0'
     },
-    labelWrapper: {
-        position: 'absolute',
-        bottom: '0'
-    },
-    label: {
-        position: 'absolute',
-        bottom: '0'
-    },
     indicator: {
         position: 'absolute',
         inset: '0',
@@ -114,15 +104,14 @@ const useStyle = (0, style_react_1.style)(theme => ({
     }
 }), { name: 'onesy-NavigationItem' });
 const NavigationItem = react_1.default.forwardRef((props_, ref) => {
-    var _a;
+    var _a, _b;
     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 { tonal = true, color = 'primary', version = 'regular', value, name, nameTooltip, vertical, icon, iconSelected, selected, disabled, IconWrapperComponent = 'span', onFocus: onFocus_, onBlur: onBlur_, onKeyDown: onKeyDown_, onMouseDown: onMouseDown_, onMouseEnter: onMouseEnter_, onMouseLeave: onMouseLeave_, onTouchStart: onTouchStart_, TooltipProps, LabelProps, IconWrapperProps, className, style, children: children_ } = props, other = __rest(props, ["tonal", "color", "version", "value", "name", "nameTooltip", "vertical", "icon", "iconSelected", "selected", "disabled", "IconWrapperComponent", "onFocus", "onBlur", "onKeyDown", "onMouseDown", "onMouseEnter", "onMouseLeave", "onTouchStart", "TooltipProps", "LabelProps", "IconWrapperProps", "className", "style", "children"]);
     const { classes } = useStyle();
     const [focus, setFocus] = react_1.default.useState(false);
     const [hover, setHover] = react_1.default.useState(false);
@@ -133,7 +122,6 @@ const NavigationItem = react_1.default.forwardRef((props_, ref) => {
         hover: react_1.default.useRef(undefined)
     };
     const styles = {
-        root: {},
         icon: {},
         label: {},
         indicator: {}
@@ -220,19 +208,8 @@ const NavigationItem = react_1.default.forwardRef((props_, ref) => {
         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({ name: 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)([
+    return ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: (_b = nameTooltip !== null && nameTooltip !== void 0 ? nameTooltip : name) !== null && _b !== void 0 ? _b : 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',
@@ -245,7 +222,7 @@ const NavigationItem = react_1.default.forwardRef((props_, ref) => {
                 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 => {
+            ]), style: Object.assign({}, style) }, other, { children: (0, jsx_runtime_1.jsxs)(Line, Object.assign({ ref: item => {
                     if (ref) {
                         if ((0, utils_1.is)('function', ref))
                             ref(item);
@@ -253,7 +230,7 @@ const NavigationItem = react_1.default.forwardRef((props_, ref) => {
                             ref.current = item;
                     }
                     refs.root.current = item;
-                }, direction: 'column', align: 'center', justify: 'center', gap: 0.5, className: (0, style_react_1.classNames)([
+                }, direction: 'column', align: 'center', justify: 'center', gap: 0.25, className: (0, style_react_1.classNames)([
                     (0, utils_2.staticClassName)('NavigationItem', theme) && [
                         'onesy-NavigationItem-item'
                     ],
@@ -283,12 +260,12 @@ const NavigationItem = react_1.default.forwardRef((props_, ref) => {
                                     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 })) })))] })) })) })));
+                                }) }))] }))), (version === 'regular' || (version === 'auto' && selected)) && ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3' }, LabelProps, { className: (0, style_react_1.classNames)([
+                            (0, utils_2.staticClassName)('NavigationItem', theme) && [
+                                'onesy-NavigationItem-label',
+                                LabelProps === null || LabelProps === void 0 ? void 0 : LabelProps.className
+                            ]
+                        ]), style: Object.assign(Object.assign({}, styles.label), LabelProps === null || LabelProps === void 0 ? void 0 : LabelProps.style) }, { children: name })))] })) })) })));
 });
 NavigationItem.displayName = 'onesy-NavigationItem';
 exports.default = NavigationItem;

package/TextField/TextField.js CHANGED Viewed

@@ -401,7 +401,7 @@ const TextField = react_1.default.forwardRef((props_, ref) => {
     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 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 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 { tonal = true, color = 'primary', version = 'filled', size = 'regular', rootRef, valueDefault, value: value_, onChange, name, label: label_, align, start, startVerticalAlign = 'start', end: end_, endVerticalAlign: endVerticalAlign_ = 'start', placeholder, fullWidth: fullWidth_, helperText, counter, prefix, sufix, noPrefixMargin, noSufixMargin, enabled, autoFocus, autoComplete, type: type_ = 'text', required, optional, optionalText = 'optional', error, multiline, rows: rows_, minRows = 1, maxRows, clear, focus: focus_, footer: footer_, subscription, controlled, minimal, restoreSelection = false, minWidth, readOnly, disabled, onInput: onInput_, onFocus: onFocus_, onBlur: onBlur_, onMouseEnter: onMouseEnter_, onMouseLeave: onMouseLeave_, inputProps = {}, InputWrapperProps = {}, HelperTextProps, IconProps, IconClear = IconMaterialCloseW100_1.default, InputComponent: InputComponent_, WrapperComponent = 'div', Component = 'div', className, style, children,
+    const { tonal = true, color = 'primary', version = 'filled', size = 'regular', rootRef, valueDefault, value: value_, onChange, name, label: label_, align, start, startVerticalAlign: startVerticalAlign_ = 'start', end: end_, endVerticalAlign: endVerticalAlign_ = 'start', placeholder, fullWidth: fullWidth_, helperText, counter, prefix, sufix, noPrefixMargin, noSufixMargin, enabled, autoFocus, autoComplete, type: type_ = 'text', required, optional, optionalText = 'optional', error, multiline, rows: rows_, minRows = 1, maxRows, clear, focus: focus_, footer: footer_, subscription, controlled, minimal, restoreSelection = false, minWidth, readOnly, disabled, onInput: onInput_, onFocus: onFocus_, onBlur: onBlur_, onMouseEnter: onMouseEnter_, onMouseLeave: onMouseLeave_, inputProps = {}, InputWrapperProps = {}, HelperTextProps, IconProps, IconClear = IconMaterialCloseW100_1.default, InputComponent: InputComponent_, WrapperComponent = 'div', Component = 'div', className, style, children,
     // Other
     colorUnchecked } = props, other = __rest(props, ["tonal", "color", "version", "size", "rootRef", "valueDefault", "value", "onChange", "name", "label", "align", "start", "startVerticalAlign", "end", "endVerticalAlign", "placeholder", "fullWidth", "helperText", "counter", "prefix", "sufix", "noPrefixMargin", "noSufixMargin", "enabled", "autoFocus", "autoComplete", "type", "required", "optional", "optionalText", "error", "multiline", "rows", "minRows", "maxRows", "clear", "focus", "footer", "subscription", "controlled", "minimal", "restoreSelection", "minWidth", "readOnly", "disabled", "onInput", "onFocus", "onBlur", "onMouseEnter", "onMouseLeave", "inputProps", "InputWrapperProps", "HelperTextProps", "IconProps", "IconClear", "InputComponent", "WrapperComponent", "Component", "className", "style", "children", "colorUnchecked"]);
     const { classes } = useStyle();
@@ -431,6 +431,7 @@ const TextField = react_1.default.forwardRef((props_, ref) => {
         breakpoints[key] = (0, useMediaQuery_1.default)(theme.breakpoints.media[key], { element: refs.root.current });
     });
     const label = name !== undefined ? name : label_;
+    let startVerticalAlign = startVerticalAlign_;
     let endVerticalAlign = endVerticalAlign_;
     const fullWidth = (0, utils_2.valueBreakpoints)(fullWidth_, undefined, breakpoints, theme);
     const rowValue = () => {
@@ -690,8 +691,6 @@ const TextField = react_1.default.forwardRef((props_, ref) => {
     if (value && clear) {
         const exists = end === null || end === void 0 ? void 0 : end.find(item => item.key === refs.ids.clear);
         if (!exists) {
-            if (props.endVerticalAlign === undefined)
-                endVerticalAlign = 'center';
             end.push((0, jsx_runtime_1.jsx)(IconClear, Object.assign({ color: 'inherit', onClick: onClear }, IconProps, { className: (0, style_react_1.classNames)([
                     IconProps === null || IconProps === void 0 ? void 0 : IconProps.className,
                     classes.clear
@@ -699,10 +698,14 @@ const TextField = react_1.default.forwardRef((props_, ref) => {
         }
     }
     if (value && isTypePassword) {
-        if (!multiline && props.endVerticalAlign === undefined)
-            endVerticalAlign = version === 'text' ? 'end' : 'center';
         end.unshift((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: visible ? l('Hide password') : l('View password'), color: 'inverted' }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onToggleVisible, color: 'default', size: size === 'large' ? 'regular' : 'small' }, { children: visible ? (0, jsx_runtime_1.jsx)(IconMaterialPassword2OffW100_1.default, Object.assign({}, iconProps)) : (0, jsx_runtime_1.jsx)(IconMaterialPassword2W100_1.default, Object.assign({}, iconProps)) })) })));
     }
+    if (!multiline) {
+        if (props.startVerticalAlign === undefined)
+            startVerticalAlign = version === 'text' ? 'end' : 'center';
+        if (props.endVerticalAlign === undefined)
+            endVerticalAlign = version === 'text' ? 'end' : 'center';
+    }
     const valueWithData = value !== undefined && String(value);
     return ((0, jsx_runtime_1.jsxs)(Wrapper, Object.assign({}, WrapperProps, { children: [(0, jsx_runtime_1.jsxs)(Component, Object.assign({ onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onTouchStart: onMouseEnter, onTouchEnd: onMouseLeave, role: 'textbox', "aria-multiline": multiline, "aria-labelledby": refs.ids.label }, ComponentProps, { className: (0, style_react_1.classNames)([
                     (0, utils_2.staticClassName)('TextField', theme) && [

package/esm/BottomAppBar/BottomAppBar.js CHANGED Viewed

@@ -1,100 +1,40 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-const _excluded = ["tonal", "color", "size", "main", "fixed", "noTransition", "className", "children"];
+const _excluded = ["tonal", "color", "size", "fixed", "className", "children", "style"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
 import LineElement from '../Line';
 import SurfaceElement from '../Surface';
-import TransitionElement from '../Transition';
 import { staticClassName } from '../utils';
 const useStyle = styleMethod(theme => ({
   root: {
+    background: theme.palette.color.primary[theme.palette.light ? 100 : 5],
+    boxShadow: '0px 8px 10px 1px rgb(0 0 0 / 1%), 0px 3px 14px 2px rgb(0 0 0 / 1%), 0px 5px 5px -3px rgb(0 0 0 / 4%)',
+    borderRadius: '500px',
     zIndex: theme.z_index.app_bar,
-    width: '100%',
-    height: '80px',
-    paddingBlock: theme.methods.space.value(1.5, 'px'),
-    paddingInline: `${theme.methods.space.value(0.5, 'px')} ${theme.methods.space.value(2, 'px')}`
+    overflow: 'auto hidden',
+    '&::-webkit-scrollbar': {
+      width: '0px',
+      height: '0px'
+    }
   },
   size_small: {
-    height: '72px'
+    padding: '6px 10px'
   },
   size_regular: {
-    height: '80px'
+    padding: '12px 20px'
   },
   size_large: {
-    height: '88px'
+    padding: '18px 30px'
   },
   fixed: {
     position: 'fixed',
-    insetInline: '0px',
-    bottom: '0px'
-  },
-  item: {
-    opacity: '0',
-    transform: 'translateY(100%)',
-    transition: theme?.methods.transitions.make(['opacity', 'transform'], {
-      duration: 'rg',
-      timing_function: 'standard'
-    }),
-    '&.enter': {
-      opacity: '0',
-      transform: 'translateY(100%)'
-    },
-    '&.entering': {
-      opacity: '1',
-      transform: 'translateY(0%)'
-    },
-    '&.entered': {
-      opacity: '1',
-      transform: 'translateY(0%)'
-    },
-    '&.exit': {
-      opacity: '1',
-      transform: 'translateY(0%)'
-    },
-    '&.exiting': {
-      opacity: '0',
-      transform: 'translateY(0%)'
-    },
-    '&.exited': {
-      opacity: '0',
-      transform: 'translateY(0%)'
-    }
-  },
-  mainItem: {
-    opacity: '0',
-    transform: 'scale(0.75)',
-    transition: theme?.methods.transitions.make(['opacity', 'transform'], {
-      duration: 'rg',
-      timing_function: 'standard'
-    }),
-    '&.enter': {
-      opacity: '0',
-      transform: 'scale(0.75)'
-    },
-    '&.entering': {
-      opacity: '1',
-      transform: 'scale(1)'
-    },
-    '&.entered': {
-      opacity: '1',
-      transform: 'scale(1)'
-    },
-    '&.exit': {
-      opacity: '1',
-      transform: 'scale(1)'
-    },
-    '&.exiting': {
-      opacity: '0',
-      transform: 'scale(1)'
-    },
-    '&.exited': {
-      opacity: '0',
-      transform: 'scale(1)'
-    }
+    bottom: '12px',
+    left: '50%',
+    transform: 'translateX(-50%)'
   }
 }), {
   name: 'onesy-BottomAppBar'
@@ -104,89 +44,19 @@ const BottomAppBar = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyBottomAppBar?.props?.default), props_), [props_]);
   const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
   const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
-  const Transition = React.useMemo(() => theme?.elements?.Transition || TransitionElement, [theme]);
   const {
       tonal = true,
-      color = 'primary',
+      color = 'default',
       size = 'regular',
-      main: main_,
-      fixed,
-      noTransition,
+      fixed = true,
       className,
-      children: children_
+      children,
+      style
     } = props,
     other = _objectWithoutProperties(props, _excluded);
   const {
     classes
   } = useStyle();
-  const makeChildren = values => {
-    return React.Children.toArray(values).map((item, index) => /*#__PURE__*/React.createElement(Transition, {
-      key: index,
-      onRemoved: () => {
-        if (index === 0) reAddChildren();
-      },
-      removeOnExited: true
-    }, status => (/*#__PURE__*/React.cloneElement(item, {
-      className: classNames([classes.item, status]),
-      elevation: item.props.elevation !== undefined ? item.props.elevation : false,
-      version: item.props.version !== undefined ? item.props.version : 'filled',
-      color: item.props.color !== undefined ? item.props.color : color,
-      tonal: item.props.tonal !== undefined ? item.props.tonal : tonal,
-      style: _objectSpread(_objectSpread({}, item.props.style), status.includes('enter') && {
-        transitionDelay: `${index * 70}ms`
-      })
-    }))));
-  };
-  const makeMain = values => {
-    return React.Children.toArray(values).map((item, index) => /*#__PURE__*/React.createElement(Transition, {
-      key: index,
-      onRemoved: () => {
-        if (index === 0) reAddMain();
-      },
-      removeOnExited: true
-    }, status => (/*#__PURE__*/React.cloneElement(item, {
-      className: classNames([classes.mainItem, status]),
-      color: item.props.color !== undefined ? item.props.color : color,
-      tonal: item.props.tonal !== undefined ? item.props.tonal : tonal && ['onesy-Fab'].includes(item.type?.displayName) ? 'secondary' : tonal
-    }))));
-  };
-  const [init, setInit] = React.useState(false);
-  const [children, setChildren] = React.useState(() => makeChildren(children_));
-  const [main, setMain] = React.useState(() => makeMain(main_));
-  const [inProp, setInProp] = React.useState(true);
-  const refs = {
-    preChildren: React.useRef(undefined),
-    preMain: React.useRef(undefined)
-  };
-  React.useEffect(() => {
-    setInit(true);
-  }, []);
-  const reAddChildren = () => {
-    setChildren(makeChildren(refs.preChildren.current));
-    setInProp(true);
-    refs.preChildren.current = undefined;
-  };
-  const reAddMain = () => {
-    setMain(makeMain(refs.preMain.current));
-    setInProp(true);
-    refs.preMain.current = undefined;
-  };
-  React.useEffect(() => {
-    if (init) {
-      if (!noTransition) {
-        refs.preChildren.current = children_;
-        setInProp(false);
-      } else setChildren(makeChildren(children_));
-    }
-  }, [React.Children.toArray(children_).map(item => item.key).join('')]);
-  React.useEffect(() => {
-    if (init) {
-      if (!noTransition) {
-        refs.preMain.current = main_;
-        setInProp(false);
-      } else setMain(makeMain(main_));
-    }
-  }, [React.Children.toArray(main_).map(item => item.key).join('')]);
   return /*#__PURE__*/React.createElement(Surface, _extends({
     ref: ref,
     color: color,
@@ -195,22 +65,13 @@ const BottomAppBar = /*#__PURE__*/React.forwardRef((props_, ref) => {
     direction: "row",
     align: "center",
     justify: "space-between",
+    fullWidth: true,
     Component: Line,
-    className: classNames([staticClassName('BottomAppBar', theme) && ['onesy-BottomAppBar-root', `onesy-BottomAppBar-size-${size}`], className, classes.root, classes[`size_${size}`], fixed && classes.fixed])
-  }, other), !!children.length && /*#__PURE__*/React.createElement(Line, {
-    direction: "row",
-    align: "center",
-    justify: "flex-start",
-    gap: 0
-  }, children.map(item => (/*#__PURE__*/React.cloneElement(item, {
-    in: inProp
-  })))), !!main.length && /*#__PURE__*/React.createElement(Line, {
-    direction: "row",
-    align: "center",
-    justify: "flex-end"
-  }, main.map(item => (/*#__PURE__*/React.cloneElement(item, {
-    in: inProp
-  })))));
+    className: classNames([staticClassName('BottomAppBar', theme) && ['onesy-BottomAppBar-root', `onesy-BottomAppBar-size-${size}`], className, classes.root, classes[`size_${size}`], fixed && classes.fixed]),
+    style: _objectSpread({
+      minWidth: `clamp(100px, ${(children?.length || 3) * 110}px, calc(100vw - 24px))`
+    }, style)
+  }, other), children);
 });
 BottomAppBar.displayName = 'onesy-BottomAppBar';
 export default BottomAppBar;

package/esm/NavigationItem/NavigationItem.js CHANGED Viewed

@@ -1,14 +1,13 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-const _excluded = ["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 _excluded = ["tonal", "color", "version", "value", "name", "nameTooltip", "vertical", "icon", "iconSelected", "selected", "disabled", "IconWrapperComponent", "onFocus", "onBlur", "onKeyDown", "onMouseDown", "onMouseEnter", "onMouseLeave", "onTouchStart", "TooltipProps", "LabelProps", "IconWrapperProps", "className", "style", "children"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
 import { is, isEnvironment } from '@onesy/utils';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
 import TypeElement from '../Type';
-import FadeElement from '../Fade';
 import LineElement from '../Line';
 import TooltipElement from '../Tooltip';
 import TransitionElement from '../Transition';
@@ -30,8 +29,7 @@ const useStyle = styleMethod(theme => ({
     width: '100%'
   },
   iconWrapper: {
-    position: 'absolute',
-    top: '0',
+    position: 'relative',
     height: '32px',
     width: '64px'
   },
@@ -47,14 +45,6 @@ const useStyle = styleMethod(theme => ({
   icon: {
     lineHeight: '0'
   },
-  labelWrapper: {
-    position: 'absolute',
-    bottom: '0'
-  },
-  label: {
-    position: 'absolute',
-    bottom: '0'
-  },
   indicator: {
     position: 'absolute',
     inset: '0',
@@ -114,17 +104,11 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-NavigationItem'
 });
-// To do
-// Long press label in tooltip
 const NavigationItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
   const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyNavigationItem?.props?.default), props_), [props_]);
   const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
   const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
-  const Fade = React.useMemo(() => theme?.elements?.Fade || FadeElement, [theme]);
   const Tooltip = React.useMemo(() => theme?.elements?.Tooltip || TooltipElement, [theme]);
   const Transition = React.useMemo(() => theme?.elements?.Transition || TransitionElement, [theme]);
   const {
@@ -132,9 +116,9 @@ const NavigationItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
       color = 'primary',
       version = 'regular',
       value,
-      vertical,
       name,
-      label,
+      nameTooltip,
+      vertical,
       icon,
       iconSelected,
       selected,
@@ -148,6 +132,7 @@ const NavigationItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
       onMouseLeave: onMouseLeave_,
       onTouchStart: onTouchStart_,
       TooltipProps,
+      LabelProps,
       IconWrapperProps,
       className,
       style,
@@ -166,7 +151,6 @@ const NavigationItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
     hover: React.useRef(undefined)
   };
   const styles = {
-    root: {},
     icon: {},
     label: {},
     indicator: {}
@@ -235,15 +219,9 @@ const NavigationItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
     styles.indicator.color = 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.Fragment;
-  const LabelWrapperProps = {};
-  if (version === 'auto') {
-    LabelWrapperProps.in = selected;
-    LabelWrapperProps.className = classNames([staticClassName('NavigationItem', theme) && ['onesy-NavigationItem-label'], classes.labelWrapper]);
-  }
   const Icon = selected && iconSelected || icon;
   return /*#__PURE__*/React.createElement(Tooltip, _extends({
-    name: label || value,
+    name: nameTooltip ?? name ?? value,
     position: "top",
     alignment: "center",
     longPress: true,
@@ -260,7 +238,7 @@ const NavigationItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,
     className: classNames([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: _objectSpread(_objectSpread({}, style), styles.root)
+    style: _objectSpread({}, style)
   }, other), /*#__PURE__*/React.createElement(Line, {
     ref: item => {
       if (ref) {
@@ -271,7 +249,7 @@ const NavigationItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
     direction: "column",
     align: "center",
     justify: "center",
-    gap: 0.5,
+    gap: 0.25,
     className: classNames([staticClassName('NavigationItem', theme) && ['onesy-NavigationItem-item'], classes.item])
   }, Icon && /*#__PURE__*/React.createElement(Line, {
     Component: "span",
@@ -287,11 +265,12 @@ const NavigationItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
     className: classNames([staticClassName('NavigationItem', theme) && ['onesy-NavigationItem-icon'], IconWrapperProps?.className, classes.icon])
   }), /*#__PURE__*/React.cloneElement(Icon, {
     style: _objectSpread(_objectSpread({}, Icon.props.style), styles.icon)
-  }))), ['regular', 'auto'].includes(version) && /*#__PURE__*/React.createElement(LabelWrapper, LabelWrapperProps, /*#__PURE__*/React.createElement(Type, {
-    version: "b3",
-    className: classNames([staticClassName('NavigationItem', theme) && ['onesy-NavigationItem-label'], classes.label]),
-    style: styles.label
-  }, name !== undefined ? name : label)))));
+  }))), (version === 'regular' || version === 'auto' && selected) && /*#__PURE__*/React.createElement(Type, _extends({
+    version: "b3"
+  }, LabelProps, {
+    className: classNames([staticClassName('NavigationItem', theme) && ['onesy-NavigationItem-label', LabelProps?.className]]),
+    style: _objectSpread(_objectSpread({}, styles.label), LabelProps?.style)
+  }), name))));
 });
 NavigationItem.displayName = 'onesy-NavigationItem';
 export default NavigationItem;

package/esm/TextField/TextField.js CHANGED Viewed

@@ -496,7 +496,7 @@ const TextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
       label: label_,
       align,
       start,
-      startVerticalAlign = 'start',
+      startVerticalAlign: startVerticalAlign_ = 'start',
       end: end_,
       endVerticalAlign: endVerticalAlign_ = 'start',
       placeholder,
@@ -579,6 +579,7 @@ const TextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
     });
   });
   const label = name !== undefined ? name : label_;
+  let startVerticalAlign = startVerticalAlign_;
   let endVerticalAlign = endVerticalAlign_;
   const fullWidth = valueBreakpoints(fullWidth_, undefined, breakpoints, theme);
   const rowValue = () => {
@@ -808,7 +809,6 @@ const TextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
   if (value && clear) {
     const exists = end?.find(item => item.key === refs.ids.clear);
     if (!exists) {
-      if (props.endVerticalAlign === undefined) endVerticalAlign = 'center';
       end.push(/*#__PURE__*/React.createElement(IconClear, _extends({
         key: refs.ids.clear,
         color: "inherit",
@@ -819,7 +819,6 @@ const TextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
     }
   }
   if (value && isTypePassword) {
-    if (!multiline && props.endVerticalAlign === undefined) endVerticalAlign = version === 'text' ? 'end' : 'center';
     end.unshift(/*#__PURE__*/React.createElement(Tooltip, {
       name: visible ? l('Hide password') : l('View password'),
       color: "inverted"
@@ -829,6 +828,10 @@ const TextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
       size: size === 'large' ? 'regular' : 'small'
     }, visible ? /*#__PURE__*/React.createElement(IconMaterialPassword2Off, iconProps) : /*#__PURE__*/React.createElement(IconMaterialPassword2, iconProps))));
   }
+  if (!multiline) {
+    if (props.startVerticalAlign === undefined) startVerticalAlign = version === 'text' ? 'end' : 'center';
+    if (props.endVerticalAlign === undefined) endVerticalAlign = version === 'text' ? 'end' : 'center';
+  }
   const valueWithData = value !== undefined && String(value);
   return /*#__PURE__*/React.createElement(Wrapper, WrapperProps, /*#__PURE__*/React.createElement(Component, _extends({
     onMouseEnter: onMouseEnter,

package/esm/index.js CHANGED Viewed

@@ -1,4 +1,4 @@
-/** @license UiReact v1.0.125
+/** @license UiReact v1.0.127
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@onesy/ui-react",
-  "version": "1.0.126",
+  "version": "1.0.128",
   "description": "UI for React",
   "repository": "https://github.com/onesy-me/onesy.git",
   "author": "Lazar Erić <lazareric1@proton.me>",