@onesy/ui-react 1.0.129 → 1.0.131

package/ListItem/ListItem.js

@@ -1,365 +1,391 @@
 "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 Surface_1 = __importDefault(require("../Surface"));
-const Interaction_1 = __importDefault(require("../Interaction"));
-const Type_1 = __importDefault(require("../Type"));
-const utils_2 = require("../utils");
-const useStyle = (0, style_react_1.style)(theme => {
-    const overflow = {
-        width: '100%',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis'
-    };
-    return {
-        wrapper: {},
-        wrapper_fullWidth: {
-            width: '100%'
-        },
-        root: {
-            // Reset
-            margin: '0',
-            padding: '0',
-            '-webkit-appearance': 'none',
-            appearance: 'none',
-            border: 'none',
-            textDecoration: 'none',
-            color: 'inherit',
-            boxSizing: 'border-box',
-            position: 'relative',
-            display: 'inline-flex',
-            width: '100%'
-        },
-        shape_round_position_both: {
-            borderRadius: theme.methods.shape.radius.value(40, 'px')
-        },
-        shape_round_position_start: {
-            borderEndStartRadius: theme.methods.shape.radius.value(40, 'px'),
-            borderStartStartRadius: theme.methods.shape.radius.value(40, 'px')
-        },
-        shape_round_position_end: {
-            borderStartEndRadius: theme.methods.shape.radius.value(40, 'px'),
-            borderEndEndRadius: theme.methods.shape.radius.value(40, 'px')
-        },
-        shape_round_position_none: {
-            borderRadius: '0'
-        },
-        button: {
-            cursor: 'pointer',
-            userSelect: 'none'
-        },
-        size_small: {
-            padding: `${theme.methods.space.value(1, 'px')} ${theme.methods.space.value(1.5, 'px')}`,
-            minHeight: '24px'
-        },
-        size_regular: {
-            padding: `${theme.methods.space.value(2, 'px')} ${theme.methods.space.value(2, 'px')}`,
-            minHeight: '40px'
-        },
-        size_large: {
-            padding: `${theme.methods.space.value(3, 'px')} ${theme.methods.space.value(2.5, 'px')}`,
-            minHeight: '56px'
-        },
-        menuItem_size_small: {
-            padding: `${theme.methods.space.value(0.5, 'px')} ${theme.methods.space.value(1.5, 'px')}`
-        },
-        menuItem_size_regular: {
-            padding: `${theme.methods.space.value(0.75, 'px')} ${theme.methods.space.value(2, 'px')}`
-        },
-        menuItem_size_large: {
-            padding: `${theme.methods.space.value(1, 'px')} ${theme.methods.space.value(2.5, 'px')}`
-        },
-        inset_size_small: {
-            paddingInlineStart: `${(56 + theme.methods.space.value('rg')) * 0.75}px`
-        },
-        inset_size_regular: {
-            paddingInlineStart: `${56 + theme.methods.space.value('rg')}px`
-        },
-        inset_size_large: {
-            paddingInlineStart: `${(56 + theme.methods.space.value('rg')) * 1.25}px`
-        },
-        menuItem_inset_size_small: {
-            paddingInlineStart: theme.methods.space.value(7, 'px')
-        },
-        menuItem_inset_size_regular: {
-            paddingInlineStart: theme.methods.space.value(7, 'px')
-        },
-        menuItem_inset_size_large: {
-            paddingInlineStart: theme.methods.space.value(7, 'px')
-        },
-        middle: {
-            position: 'relative',
-            display: 'inline-flex',
-            flex: '1 1 auto',
-            width: '100%',
-            flexDirection: 'column',
-            // Fix for white-space: nowrap & flex: 1 1 auto
-            minWidth: '0',
-            alignSelf: 'center'
-        },
-        menuItem_middle: {
-            marginInlineEnd: '44px'
-        },
-        text: Object.assign(Object.assign({}, overflow), { whiteSpace: 'pre-wrap', textAlign: 'start' }),
-        text_primary: {
-            opacity: '1'
-        },
-        text_primary_weight: {
-            fontWeight: '500'
-        },
-        text_secondary: {
-            opacity: theme.palette.visual_contrast.default.opacity.primary
-        },
-        text_tertiary: {
-            opacity: theme.palette.visual_contrast.default.opacity.secondary
-        },
-        aside: {
-            position: 'relative',
-            display: 'inline-flex',
-            flex: '0 0 auto',
-            alignSelf: 'flex-start'
-        },
-        align_start: {
-            alignSelf: 'flex-start'
-        },
-        align_center: {
-            alignSelf: 'center'
-        },
-        align_end: {
-            alignSelf: 'flex-end'
-        },
-        start_icon: {
-            paddingInline: `0 ${theme.methods.space.value(1.5, 'px')}`
-        },
-        start_button: {
-            paddingInline: `0 ${theme.methods.space.value(1.5, 'px')}`
-        },
-        start_switch: {
-            paddingInline: `0 ${theme.methods.space.value(1.5, 'px')}`
-        },
-        menuItem_start_icon_size_small: {
-            paddingInlineEnd: theme.methods.space.value(1.5, 'px')
-        },
-        menuItem_start_icon_size_regular: {
-            paddingInlineEnd: theme.methods.space.value(2, 'px')
-        },
-        menuItem_start_icon_size_large: {
-            paddingInlineEnd: theme.methods.space.value(2.5, 'px')
-        },
-        menuItem_start_button_size_small: {
-            paddingInlineEnd: theme.methods.space.value(1.5, 'px')
-        },
-        menuItem_start_button_size_regular: {
-            paddingInlineEnd: theme.methods.space.value(2, 'px')
-        },
-        menuItem_start_button_size_large: {
-            paddingInlineEnd: theme.methods.space.value(2.5, 'px')
-        },
-        menuItem_start_switch_size_small: {
-            paddingInlineEnd: theme.methods.space.value(1.5, 'px')
-        },
-        menuItem_start_switch_size_regular: {
-            paddingInlineEnd: theme.methods.space.value(2, 'px')
-        },
-        menuItem_start_switch_size_large: {
-            paddingInlineEnd: theme.methods.space.value(2.5, 'px')
-        },
-        end_icon: {
-            paddingInlineStart: theme.methods.space.value(1.5, 'px'),
-            paddingInlineEnd: theme.methods.space.value(1, 'px')
-        },
-        end_button: {
-            paddingInlineStart: theme.methods.space.value(1.5, 'px'),
-            paddingInlineEnd: '0'
-        },
-        end_switch: {
-            paddingInlineStart: theme.methods.space.value(1.5, 'px'),
-            paddingInlineEnd: '0'
-        },
-        menuItem_end_icon: {
-            paddingInlineStart: theme.methods.space.value(1.5, 'px')
-        },
-        menuItem_end_button: {
-            paddingInlineStart: theme.methods.space.value(1.5, 'px')
-        },
-        menuItem_end_switch: {
-            paddingInlineStart: theme.methods.space.value(1.5, 'px')
-        },
-        middle_disabled: {
-            opacity: theme.palette.visual_contrast.default.opacity.disabled
-        },
-        noPadding: {
-            padding: '0px'
-        },
-        noBackground: {
-            '&.onesy-Surface-root': {
-                background: 'none'
-            }
-        },
-        disabled: {
-            pointerEvents: 'none',
-            userSelect: 'none',
-            cursor: 'default'
-        }
-    };
-}, { name: 'onesy-ListItem' });
-const ListItem = react_1.default.forwardRef((props_, ref) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
-    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.onesyListItem) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
-    const Interaction = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Interaction) || Interaction_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 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 { tonal = true, color = 'default', colorSelected = props.color, inset, primary = props.children, secondary, tertiary, preselected, selected, start, startAlign = 'center', end, endAlign = 'center', size = 'regular', noPadding, href, button, shape = 'round', shapePosition = 'none', menuItem, footer, tabIndex, interaction, fullWidth = true, noOutline, noBackground, disabled, onClick, onFocus, onBlur, onMouseEnter, onMouseLeave, onClose: onClose_, RootComponent: RootComponent_ = 'div', WrapperProps, RootProps, InteractionProps, PrimaryProps, SecondaryProps, TertiaryProps, MainProps, AsideProps, AsideStartProps, AsideEndProps, Component = 'li', className, style, children } = props, other = __rest(props, ["tonal", "color", "colorSelected", "inset", "primary", "secondary", "tertiary", "preselected", "selected", "start", "startAlign", "end", "endAlign", "size", "noPadding", "href", "button", "shape", "shapePosition", "menuItem", "footer", "tabIndex", "interaction", "fullWidth", "noOutline", "noBackground", "disabled", "onClick", "onFocus", "onBlur", "onMouseEnter", "onMouseLeave", "onClose", "RootComponent", "WrapperProps", "RootProps", "InteractionProps", "PrimaryProps", "SecondaryProps", "TertiaryProps", "MainProps", "AsideProps", "AsideStartProps", "AsideEndProps", "Component", "className", "style", "children"]);
-    const { classes } = useStyle();
-    const refs = {
-        root: react_1.default.useRef(undefined),
-        props: react_1.default.useRef(undefined),
-        ids: {
-            primary: react_1.default.useId(),
-            secondary: react_1.default.useId()
-        }
-    };
-    refs.props.current = props;
-    const styles = {
-        root: {},
-        icon: { color: 'default' },
-        wrapper: {},
-        primary: {},
-        secondary: {},
-        tertiary: {}
-    };
-    let RootComponent = RootComponent_;
-    if (href)
-        RootComponent = 'a';
-    const colorToUse = selected ? colorSelected : color;
-    return ((0, jsx_runtime_1.jsxs)(Surface, Object.assign({ ref: item => {
-            if (ref) {
-                if ((0, utils_1.is)('function', ref))
-                    ref(item);
-                else if (ref === null || ref === void 0 ? void 0 : ref.current)
-                    ref.current = item;
-            }
-            refs.root.current = item;
-        }, tonal: tonal, color: colorToUse, tabIndex: tabIndex !== undefined ? tabIndex : (button && !disabled) ? 0 : undefined, "aria-labelledby": refs.ids.primary, "aria-describedby": refs.ids.secondary, "aria-selected": selected, Component: Component }, WrapperProps, { className: (0, style_react_1.classNames)([
-            (0, utils_2.staticClassName)('ListItem', theme) && [
-                'onesy-ListItem-wrapper'
-            ],
-            WrapperProps === null || WrapperProps === void 0 ? void 0 : WrapperProps.className,
-            className,
-            classes.wrapper,
-            fullWidth && classes.wrapper_fullWidth,
-            noBackground && classes.noBackground
-        ]), noOutline: noOutline, style: Object.assign(Object.assign({}, styles.wrapper), WrapperProps === null || WrapperProps === void 0 ? void 0 : WrapperProps.style) }, other, { children: [(0, jsx_runtime_1.jsxs)(RootComponent, Object.assign({ href: href, onClick: onClick, onFocus: onFocus, onBlur: onBlur, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, RootProps, { className: (0, style_react_1.classNames)([
-                    (0, utils_2.staticClassName)('ListItem', theme) && [
-                        'onesy-ListItem-root',
-                        `onesy-ListItem-size-${size}`,
-                        preselected && `onesy-ListItem-preselected`,
-                        selected && `onesy-ListItem-selected`,
-                        disabled && `onesy-ListItem-disabled`,
-                        inset && !start && `onesy-ListItem-inset`
-                    ],
-                    RootProps === null || RootProps === void 0 ? void 0 : RootProps.className,
-                    classes.root,
-                    !menuItem && classes[`size_${size}`],
-                    classes[`shape_${shape}_position_${shapePosition}`],
-                    inset && !start && classes[`inset_size_${size}`],
-                    menuItem && [
-                        classes[`menuItem_size_${size}`],
-                        inset && classes[`menuItem_inset_size_${size}`]
-                    ],
-                    (href || button) && classes.button,
-                    noPadding && classes.noPadding,
-                    disabled && classes.disabled
-                ]), style: Object.assign(Object.assign({}, style), styles.root), disabled: disabled }, { children: [(href || button || interaction) && ((0, jsx_runtime_1.jsx)(Interaction, Object.assign({ border: false, preselected: (InteractionProps === null || InteractionProps === void 0 ? void 0 : InteractionProps.focus) || preselected || undefined, selected: selected, disabled: disabled }, InteractionProps))), start && ((0, jsx_runtime_1.jsx)("span", Object.assign({}, AsideProps, AsideStartProps, { className: (0, style_react_1.classNames)([
-                            (0, utils_2.staticClassName)('ListItem', theme) && [
-                                'onesy-ListItem-aside',
-                                'onesy-ListItem-start',
-                                `onesy-ListItem-start-${['onesy-Avatar', 'onesy-IconButton', 'onesy-Checkbox', 'onesy-Radio'].includes((_a = start === null || start === void 0 ? void 0 : start.type) === null || _a === void 0 ? void 0 : _a.displayName) ? 'button' : ['onesy-Switch'].includes((_b = start === null || start === void 0 ? void 0 : start.type) === null || _b === void 0 ? void 0 : _b.displayName) ? 'switch' : 'icon'}`
-                            ],
-                            AsideProps === null || AsideProps === void 0 ? void 0 : AsideProps.className,
-                            AsideStartProps === null || AsideStartProps === void 0 ? void 0 : AsideStartProps.className,
-                            classes.aside,
-                            classes.start,
-                            classes[`align_${startAlign}`],
-                            classes[`${menuItem ? 'menuItem_' : ''}start_${['onesy-Avatar', 'onesy-IconButton', 'onesy-Checkbox', 'onesy-Radio'].includes((_c = start === null || start === void 0 ? void 0 : start.type) === null || _c === void 0 ? void 0 : _c.displayName) ? 'button' : ['onesy-Switch'].includes((_d = start === null || start === void 0 ? void 0 : start.type) === null || _d === void 0 ? void 0 : _d.displayName) ? 'switch' : 'icon'}`],
-                            classes[`${menuItem ? 'menuItem_' : ''}start_${['onesy-Avatar', 'onesy-IconButton', 'onesy-Checkbox', 'onesy-Radio'].includes((_e = start === null || start === void 0 ? void 0 : start.type) === null || _e === void 0 ? void 0 : _e.displayName) ? 'button' : ['onesy-Switch'].includes((_f = start === null || start === void 0 ? void 0 : start.type) === null || _f === void 0 ? void 0 : _f.displayName) ? 'switch' : 'icon'}_size_${size}`]
-                        ]) }, { children: (0, utils_1.is)('string', start) ? start : react_1.default.cloneElement(start, {
-                            color: ((_g = start.props) === null || _g === void 0 ? void 0 : _g.color) || 'inherit',
-                            size: ((_h = start.props) === null || _h === void 0 ? void 0 : _h.size) !== undefined ? (_j = start.props) === null || _j === void 0 ? void 0 : _j.size : ['onesy-Switch'].includes((_k = start === null || start === void 0 ? void 0 : start.type) === null || _k === void 0 ? void 0 : _k.displayName) ? 'small' : 'regular',
-                            disabled
-                        }) }))), (0, jsx_runtime_1.jsxs)("span", Object.assign({}, MainProps, { className: (0, style_react_1.classNames)([
-                            (0, utils_2.staticClassName)('ListItem', theme) && [
-                                'onesy-ListItem-middle'
-                            ],
-                            MainProps === null || MainProps === void 0 ? void 0 : MainProps.className,
-                            classes.middle,
-                            menuItem && classes.menuItem_middle,
-                            disabled && classes.middle_disabled
-                        ]) }, { children: [primary !== undefined && ((0, utils_1.is)('simple', primary) ? ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b2', id: refs.ids.primary }, PrimaryProps, { className: (0, style_react_1.classNames)([
-                                    (0, utils_2.staticClassName)('ListItem', theme) && [
-                                        'onesy-ListItem-text',
-                                        'onesy-ListItem-text-primary'
-                                    ],
-                                    PrimaryProps === null || PrimaryProps === void 0 ? void 0 : PrimaryProps.className,
-                                    classes.text,
-                                    classes.text_primary,
-                                    !menuItem && classes.text_primary_weight
-                                ]), style: Object.assign(Object.assign({}, styles.primary), PrimaryProps === null || PrimaryProps === void 0 ? void 0 : PrimaryProps.style) }, { children: primary }))) : react_1.default.cloneElement(primary, {
-                                id: refs.ids.primary
-                            })), secondary !== undefined && ((0, utils_1.is)('simple', secondary) ? ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b2', id: refs.ids.secondary }, SecondaryProps, { className: (0, style_react_1.classNames)([
-                                    (0, utils_2.staticClassName)('ListItem', theme) && [
-                                        'onesy-ListItem-text',
-                                        'onesy-ListItem-text-secondary'
-                                    ],
-                                    SecondaryProps === null || SecondaryProps === void 0 ? void 0 : SecondaryProps.className,
-                                    classes.text,
-                                    classes.text_secondary
-                                ]), style: Object.assign(Object.assign({}, styles.secondary), SecondaryProps === null || SecondaryProps === void 0 ? void 0 : SecondaryProps.style) }, { children: secondary }))) : react_1.default.cloneElement(secondary, {
-                                id: refs.ids.secondary
-                            })), tertiary !== undefined && ((0, utils_1.is)('simple', tertiary) ? ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b2' }, TertiaryProps, { className: (0, style_react_1.classNames)([
-                                    (0, utils_2.staticClassName)('ListItem', theme) && [
-                                        'onesy-ListItem-text',
-                                        'onesy-ListItem-text-tertiary'
-                                    ],
-                                    TertiaryProps === null || TertiaryProps === void 0 ? void 0 : TertiaryProps.className,
-                                    classes.text,
-                                    classes.text_tertiary
-                                ]), style: Object.assign(Object.assign({}, styles.tertiary), TertiaryProps === null || TertiaryProps === void 0 ? void 0 : TertiaryProps.style) }, { children: tertiary }))) : tertiary)] })), end && ((0, jsx_runtime_1.jsx)("span", Object.assign({}, AsideProps, AsideEndProps, { className: (0, style_react_1.classNames)([
-                            (0, utils_2.staticClassName)('ListItem', theme) && [
-                                'onesy-ListItem-aside',
-                                'onesy-ListItem-end',
-                                `onesy-ListItem-end-${['onesy-Avatar', 'onesy-IconButton', 'onesy-Checkbox', 'onesy-Radio'].includes((_l = end === null || end === void 0 ? void 0 : end.type) === null || _l === void 0 ? void 0 : _l.displayName) ? 'button' : ['onesy-Switch'].includes((_m = end === null || end === void 0 ? void 0 : end.type) === null || _m === void 0 ? void 0 : _m.displayName) ? 'switch' : 'icon'}`
-                            ],
-                            AsideProps === null || AsideProps === void 0 ? void 0 : AsideProps.className,
-                            AsideEndProps === null || AsideEndProps === void 0 ? void 0 : AsideEndProps.classname,
-                            classes.aside,
-                            classes.end,
-                            classes[`align_${endAlign}`],
-                            classes[`${menuItem ? 'menuItem_' : ''}end_${['onesy-Avatar', 'onesy-IconButton', 'onesy-Checkbox', 'onesy-Radio'].includes((_o = end === null || end === void 0 ? void 0 : end.type) === null || _o === void 0 ? void 0 : _o.displayName) ? 'button' : ['onesy-Switch'].includes((_p = end === null || end === void 0 ? void 0 : end.type) === null || _p === void 0 ? void 0 : _p.displayName) ? 'switch' : 'icon'}`],
-                            classes[`${menuItem ? 'menuItem_' : ''}end_${['onesy-Avatar', 'onesy-IconButton', 'onesy-Checkbox', 'onesy-Radio'].includes((_q = end === null || end === void 0 ? void 0 : end.type) === null || _q === void 0 ? void 0 : _q.displayName) ? 'button' : ['onesy-Switch'].includes((_r = end === null || end === void 0 ? void 0 : end.type) === null || _r === void 0 ? void 0 : _r.displayName) ? 'switch' : 'icon'}_size_${size}`]
-                        ]) }, { children: (0, utils_1.is)('string', end) ? end : react_1.default.cloneElement(end, {
-                            color: ((_s = end.props) === null || _s === void 0 ? void 0 : _s.color) || 'inherit',
-                            size: ((_t = end.props) === null || _t === void 0 ? void 0 : _t.size) !== undefined ? (_u = end.props) === null || _u === void 0 ? void 0 : _u.size : ['onesy-Switch'].includes((_v = end === null || end === void 0 ? void 0 : end.type) === null || _v === void 0 ? void 0 : _v.displayName) ? 'small' : 'regular',
-                            disabled
-                        }) })))] })), footer] })));
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _utils = require("@onesy/utils");
+var _styleReact = require("@onesy/style-react");
+var _Surface = _interopRequireDefault(require("../Surface"));
+var _Interaction = _interopRequireDefault(require("../Interaction"));
+var _Type = _interopRequireDefault(require("../Type"));
+var _utils2 = require("../utils");
+const _excluded = ["tonal", "color", "colorSelected", "inset", "primary", "secondary", "tertiary", "preselected", "selected", "start", "startAlign", "end", "endAlign", "size", "noPadding", "href", "button", "shape", "shapePosition", "menuItem", "footer", "tabIndex", "interaction", "fullWidth", "noOutline", "noBackground", "disabled", "onClick", "onFocus", "onBlur", "onMouseEnter", "onMouseLeave", "onClose", "RootComponent", "WrapperProps", "RootProps", "InteractionProps", "PrimaryProps", "SecondaryProps", "TertiaryProps", "MainProps", "AsideProps", "AsideStartProps", "AsideEndProps", "Component", "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) { (0, _defineProperty2.default)(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; }
+const useStyle = (0, _styleReact.style)(theme => {
+  const overflow = {
+    width: '100%',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis'
+  };
+  return {
+    wrapper: {},
+    wrapper_fullWidth: {
+      width: '100%'
+    },
+    root: {
+      // Reset
+      margin: '0',
+      padding: '0',
+      '-webkit-appearance': 'none',
+      appearance: 'none',
+      border: 'none',
+      textDecoration: 'none',
+      color: 'inherit',
+      boxSizing: 'border-box',
+      position: 'relative',
+      display: 'inline-flex',
+      width: '100%'
+    },
+    shape_round_position_both: {
+      borderRadius: theme.methods.shape.radius.value(40, 'px')
+    },
+    shape_round_position_start: {
+      borderEndStartRadius: theme.methods.shape.radius.value(40, 'px'),
+      borderStartStartRadius: theme.methods.shape.radius.value(40, 'px')
+    },
+    shape_round_position_end: {
+      borderStartEndRadius: theme.methods.shape.radius.value(40, 'px'),
+      borderEndEndRadius: theme.methods.shape.radius.value(40, 'px')
+    },
+    shape_round_position_none: {
+      borderRadius: '0'
+    },
+    button: {
+      cursor: 'pointer',
+      userSelect: 'none'
+    },
+    size_small: {
+      padding: `${theme.methods.space.value(1, 'px')} ${theme.methods.space.value(1.5, 'px')}`,
+      minHeight: '24px'
+    },
+    size_regular: {
+      padding: `${theme.methods.space.value(2, 'px')} ${theme.methods.space.value(2, 'px')}`,
+      minHeight: '40px'
+    },
+    size_large: {
+      padding: `${theme.methods.space.value(3, 'px')} ${theme.methods.space.value(2.5, 'px')}`,
+      minHeight: '56px'
+    },
+    menuItem_size_small: {
+      padding: `${theme.methods.space.value(0.5, 'px')} ${theme.methods.space.value(1.5, 'px')}`
+    },
+    menuItem_size_regular: {
+      padding: `${theme.methods.space.value(0.75, 'px')} ${theme.methods.space.value(2, 'px')}`
+    },
+    menuItem_size_large: {
+      padding: `${theme.methods.space.value(1, 'px')} ${theme.methods.space.value(2.5, 'px')}`
+    },
+    inset_size_small: {
+      paddingInlineStart: `${(56 + theme.methods.space.value('rg')) * 0.75}px`
+    },
+    inset_size_regular: {
+      paddingInlineStart: `${56 + theme.methods.space.value('rg')}px`
+    },
+    inset_size_large: {
+      paddingInlineStart: `${(56 + theme.methods.space.value('rg')) * 1.25}px`
+    },
+    menuItem_inset_size_small: {
+      paddingInlineStart: theme.methods.space.value(7, 'px')
+    },
+    menuItem_inset_size_regular: {
+      paddingInlineStart: theme.methods.space.value(7, 'px')
+    },
+    menuItem_inset_size_large: {
+      paddingInlineStart: theme.methods.space.value(7, 'px')
+    },
+    middle: {
+      position: 'relative',
+      display: 'inline-flex',
+      flex: '1 1 auto',
+      width: '100%',
+      flexDirection: 'column',
+      // Fix for white-space: nowrap & flex: 1 1 auto
+      minWidth: '0',
+      alignSelf: 'center'
+    },
+    menuItem_middle: {
+      marginInlineEnd: '44px'
+    },
+    text: _objectSpread(_objectSpread({}, overflow), {}, {
+      whiteSpace: 'pre-wrap',
+      textAlign: 'start'
+    }),
+    text_primary: {
+      opacity: '1'
+    },
+    text_primary_weight: {
+      fontWeight: '500'
+    },
+    text_secondary: {
+      opacity: theme.palette.visual_contrast.default.opacity.primary
+    },
+    text_tertiary: {
+      opacity: theme.palette.visual_contrast.default.opacity.secondary
+    },
+    aside: {
+      position: 'relative',
+      display: 'inline-flex',
+      flex: '0 0 auto',
+      alignSelf: 'flex-start'
+    },
+    align_start: {
+      alignSelf: 'flex-start'
+    },
+    align_center: {
+      alignSelf: 'center'
+    },
+    align_end: {
+      alignSelf: 'flex-end'
+    },
+    start_icon: {
+      paddingInline: `0 ${theme.methods.space.value(1.5, 'px')}`
+    },
+    start_button: {
+      paddingInline: `0 ${theme.methods.space.value(1.5, 'px')}`
+    },
+    start_switch: {
+      paddingInline: `0 ${theme.methods.space.value(1.5, 'px')}`
+    },
+    menuItem_start_icon_size_small: {
+      paddingInlineEnd: theme.methods.space.value(1.5, 'px')
+    },
+    menuItem_start_icon_size_regular: {
+      paddingInlineEnd: theme.methods.space.value(2, 'px')
+    },
+    menuItem_start_icon_size_large: {
+      paddingInlineEnd: theme.methods.space.value(2.5, 'px')
+    },
+    menuItem_start_button_size_small: {
+      paddingInlineEnd: theme.methods.space.value(1.5, 'px')
+    },
+    menuItem_start_button_size_regular: {
+      paddingInlineEnd: theme.methods.space.value(2, 'px')
+    },
+    menuItem_start_button_size_large: {
+      paddingInlineEnd: theme.methods.space.value(2.5, 'px')
+    },
+    menuItem_start_switch_size_small: {
+      paddingInlineEnd: theme.methods.space.value(1.5, 'px')
+    },
+    menuItem_start_switch_size_regular: {
+      paddingInlineEnd: theme.methods.space.value(2, 'px')
+    },
+    menuItem_start_switch_size_large: {
+      paddingInlineEnd: theme.methods.space.value(2.5, 'px')
+    },
+    end_icon: {
+      paddingInlineStart: theme.methods.space.value(1.5, 'px'),
+      paddingInlineEnd: theme.methods.space.value(1, 'px')
+    },
+    end_button: {
+      paddingInlineStart: theme.methods.space.value(1.5, 'px'),
+      paddingInlineEnd: '0'
+    },
+    end_switch: {
+      paddingInlineStart: theme.methods.space.value(1.5, 'px'),
+      paddingInlineEnd: '0'
+    },
+    menuItem_end_icon: {
+      paddingInlineStart: theme.methods.space.value(1.5, 'px')
+    },
+    menuItem_end_button: {
+      paddingInlineStart: theme.methods.space.value(1.5, 'px')
+    },
+    menuItem_end_switch: {
+      paddingInlineStart: theme.methods.space.value(1.5, 'px')
+    },
+    middle_disabled: {
+      opacity: theme.palette.visual_contrast.default.opacity.disabled
+    },
+    noPadding: {
+      padding: '0px'
+    },
+    noBackground: {
+      '&.onesy-Surface-root': {
+        background: 'none'
+      }
+    },
+    disabled: {
+      pointerEvents: 'none',
+      userSelect: 'none',
+      cursor: 'default'
+    }
+  };
+}, {
+  name: 'onesy-ListItem'
+});
+const ListItem = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _type, _type2, _type3, _type4, _type5, _type6, _props, _props2, _props3, _type7, _type8, _type9, _type10, _type11, _type12, _type13, _props4, _props5, _props6, _type14;
+  const theme = (0, _styleReact.useOnesyTheme)();
+  const props = _react.default.useMemo(() => {
+    var _theme$ui, _theme$ui2;
+    return _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyListItem) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  }, [props_]);
+  const Interaction = _react.default.useMemo(() => {
+    var _theme$elements;
+    return (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Interaction) || _Interaction.default;
+  }, [theme]);
+  const Surface = _react.default.useMemo(() => {
+    var _theme$elements2;
+    return (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Surface) || _Surface.default;
+  }, [theme]);
+  const Type = _react.default.useMemo(() => {
+    var _theme$elements3;
+    return (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Type) || _Type.default;
+  }, [theme]);
+  const {
+      tonal = true,
+      color = 'default',
+      colorSelected = props.color,
+      inset,
+      primary = props.children,
+      secondary,
+      tertiary,
+      preselected,
+      selected,
+      start,
+      startAlign = 'center',
+      end,
+      endAlign = 'center',
+      size = 'regular',
+      noPadding,
+      href,
+      button,
+      shape = 'round',
+      shapePosition = 'none',
+      menuItem,
+      footer,
+      tabIndex,
+      interaction,
+      fullWidth = true,
+      noOutline,
+      noBackground,
+      disabled,
+      onClick,
+      onFocus,
+      onBlur,
+      onMouseEnter,
+      onMouseLeave,
+      onClose: onClose_,
+      RootComponent: RootComponent_ = 'div',
+      WrapperProps,
+      RootProps,
+      InteractionProps,
+      PrimaryProps,
+      SecondaryProps,
+      TertiaryProps,
+      MainProps,
+      AsideProps,
+      AsideStartProps,
+      AsideEndProps,
+      Component = 'li',
+      className,
+      style,
+      children
+    } = props,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const refs = {
+    root: _react.default.useRef(undefined),
+    props: _react.default.useRef(undefined),
+    ids: {
+      primary: _react.default.useId(),
+      secondary: _react.default.useId()
+    }
+  };
+  refs.props.current = props;
+  const styles = {
+    root: {},
+    icon: {
+      color: 'default'
+    },
+    wrapper: {},
+    primary: {},
+    secondary: {},
+    tertiary: {}
+  };
+  let RootComponent = RootComponent_;
+  if (href) RootComponent = 'a';
+  const colorToUse = selected ? colorSelected : color;
+  return /*#__PURE__*/_react.default.createElement(Surface, (0, _extends2.default)({
+    ref: item => {
+      if (ref) {
+        if ((0, _utils.is)('function', ref)) ref(item);else if (ref !== null && ref !== void 0 && ref.current) ref.current = item;
+      }
+      refs.root.current = item;
+    },
+    tonal: tonal,
+    color: colorToUse,
+    tabIndex: tabIndex !== undefined ? tabIndex : button && !disabled ? 0 : undefined,
+    "aria-labelledby": refs.ids.primary,
+    "aria-describedby": refs.ids.secondary,
+    "aria-selected": selected,
+    Component: Component
+  }, WrapperProps, {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ListItem', theme) && ['onesy-ListItem-wrapper'], WrapperProps === null || WrapperProps === void 0 ? void 0 : WrapperProps.className, className, classes.wrapper, fullWidth && classes.wrapper_fullWidth, noBackground && classes.noBackground]),
+    noOutline: noOutline,
+    style: _objectSpread(_objectSpread({}, styles.wrapper), WrapperProps === null || WrapperProps === void 0 ? void 0 : WrapperProps.style)
+  }, other), /*#__PURE__*/_react.default.createElement(RootComponent, (0, _extends2.default)({
+    href: href,
+    onClick: onClick,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave
+  }, RootProps, {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ListItem', theme) && ['onesy-ListItem-root', `onesy-ListItem-size-${size}`, preselected && `onesy-ListItem-preselected`, selected && `onesy-ListItem-selected`, disabled && `onesy-ListItem-disabled`, inset && !start && `onesy-ListItem-inset`], RootProps === null || RootProps === void 0 ? void 0 : RootProps.className, classes.root, !menuItem && classes[`size_${size}`], classes[`shape_${shape}_position_${shapePosition}`], inset && !start && classes[`inset_size_${size}`], menuItem && [classes[`menuItem_size_${size}`], inset && classes[`menuItem_inset_size_${size}`]], (href || button) && classes.button, noPadding && classes.noPadding, disabled && classes.disabled]),
+    style: _objectSpread(_objectSpread({}, style), styles.root),
+    disabled: disabled
+  }), (href || button || interaction) && /*#__PURE__*/_react.default.createElement(Interaction, (0, _extends2.default)({
+    border: false,
+    preselected: (InteractionProps === null || InteractionProps === void 0 ? void 0 : InteractionProps.focus) || preselected || undefined,
+    selected: selected,
+    disabled: disabled
+  }, InteractionProps)), start && /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({}, AsideProps, AsideStartProps, {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ListItem', theme) && ['onesy-ListItem-aside', 'onesy-ListItem-start', `onesy-ListItem-start-${['onesy-Avatar', 'onesy-IconButton', 'onesy-Checkbox', 'onesy-Radio'].includes(start === null || start === void 0 || (_type = start.type) === null || _type === void 0 ? void 0 : _type.displayName) ? 'button' : ['onesy-Switch'].includes(start === null || start === void 0 || (_type2 = start.type) === null || _type2 === void 0 ? void 0 : _type2.displayName) ? 'switch' : 'icon'}`], AsideProps === null || AsideProps === void 0 ? void 0 : AsideProps.className, AsideStartProps === null || AsideStartProps === void 0 ? void 0 : AsideStartProps.className, classes.aside, classes.start, classes[`align_${startAlign}`], classes[`${menuItem ? 'menuItem_' : ''}start_${['onesy-Avatar', 'onesy-IconButton', 'onesy-Checkbox', 'onesy-Radio'].includes(start === null || start === void 0 || (_type3 = start.type) === null || _type3 === void 0 ? void 0 : _type3.displayName) ? 'button' : ['onesy-Switch'].includes(start === null || start === void 0 || (_type4 = start.type) === null || _type4 === void 0 ? void 0 : _type4.displayName) ? 'switch' : 'icon'}`], classes[`${menuItem ? 'menuItem_' : ''}start_${['onesy-Avatar', 'onesy-IconButton', 'onesy-Checkbox', 'onesy-Radio'].includes(start === null || start === void 0 || (_type5 = start.type) === null || _type5 === void 0 ? void 0 : _type5.displayName) ? 'button' : ['onesy-Switch'].includes(start === null || start === void 0 || (_type6 = start.type) === null || _type6 === void 0 ? void 0 : _type6.displayName) ? 'switch' : 'icon'}_size_${size}`]])
+  }), (0, _utils.is)('string', start) ? start : /*#__PURE__*/_react.default.cloneElement(start, {
+    color: ((_props = start.props) === null || _props === void 0 ? void 0 : _props.color) || 'inherit',
+    size: ((_props2 = start.props) === null || _props2 === void 0 ? void 0 : _props2.size) !== undefined ? (_props3 = start.props) === null || _props3 === void 0 ? void 0 : _props3.size : ['onesy-Switch'].includes(start === null || start === void 0 || (_type7 = start.type) === null || _type7 === void 0 ? void 0 : _type7.displayName) ? 'small' : 'regular',
+    disabled
+  })), /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({}, MainProps, {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ListItem', theme) && ['onesy-ListItem-middle'], MainProps === null || MainProps === void 0 ? void 0 : MainProps.className, classes.middle, menuItem && classes.menuItem_middle, disabled && classes.middle_disabled])
+  }), primary !== undefined && ((0, _utils.is)('simple', primary) ? /*#__PURE__*/_react.default.createElement(Type, (0, _extends2.default)({
+    version: "b2",
+    id: refs.ids.primary
+  }, PrimaryProps, {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ListItem', theme) && ['onesy-ListItem-text', 'onesy-ListItem-text-primary'], PrimaryProps === null || PrimaryProps === void 0 ? void 0 : PrimaryProps.className, classes.text, classes.text_primary, !menuItem && classes.text_primary_weight]),
+    style: _objectSpread(_objectSpread({}, styles.primary), PrimaryProps === null || PrimaryProps === void 0 ? void 0 : PrimaryProps.style)
+  }), primary) : /*#__PURE__*/_react.default.cloneElement(primary, {
+    id: refs.ids.primary
+  })), secondary !== undefined && ((0, _utils.is)('simple', secondary) ? /*#__PURE__*/_react.default.createElement(Type, (0, _extends2.default)({
+    version: "b2",
+    id: refs.ids.secondary
+  }, SecondaryProps, {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ListItem', theme) && ['onesy-ListItem-text', 'onesy-ListItem-text-secondary'], SecondaryProps === null || SecondaryProps === void 0 ? void 0 : SecondaryProps.className, classes.text, classes.text_secondary]),
+    style: _objectSpread(_objectSpread({}, styles.secondary), SecondaryProps === null || SecondaryProps === void 0 ? void 0 : SecondaryProps.style)
+  }), secondary) : /*#__PURE__*/_react.default.cloneElement(secondary, {
+    id: refs.ids.secondary
+  })), tertiary !== undefined && ((0, _utils.is)('simple', tertiary) ? /*#__PURE__*/_react.default.createElement(Type, (0, _extends2.default)({
+    version: "b2"
+  }, TertiaryProps, {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ListItem', theme) && ['onesy-ListItem-text', 'onesy-ListItem-text-tertiary'], TertiaryProps === null || TertiaryProps === void 0 ? void 0 : TertiaryProps.className, classes.text, classes.text_tertiary]),
+    style: _objectSpread(_objectSpread({}, styles.tertiary), TertiaryProps === null || TertiaryProps === void 0 ? void 0 : TertiaryProps.style)
+  }), tertiary) : tertiary)), end && /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({}, AsideProps, AsideEndProps, {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ListItem', theme) && ['onesy-ListItem-aside', 'onesy-ListItem-end', `onesy-ListItem-end-${['onesy-Avatar', 'onesy-IconButton', 'onesy-Checkbox', 'onesy-Radio'].includes(end === null || end === void 0 || (_type8 = end.type) === null || _type8 === void 0 ? void 0 : _type8.displayName) ? 'button' : ['onesy-Switch'].includes(end === null || end === void 0 || (_type9 = end.type) === null || _type9 === void 0 ? void 0 : _type9.displayName) ? 'switch' : 'icon'}`], AsideProps === null || AsideProps === void 0 ? void 0 : AsideProps.className, AsideEndProps === null || AsideEndProps === void 0 ? void 0 : AsideEndProps.classname, classes.aside, classes.end, classes[`align_${endAlign}`], classes[`${menuItem ? 'menuItem_' : ''}end_${['onesy-Avatar', 'onesy-IconButton', 'onesy-Checkbox', 'onesy-Radio'].includes(end === null || end === void 0 || (_type10 = end.type) === null || _type10 === void 0 ? void 0 : _type10.displayName) ? 'button' : ['onesy-Switch'].includes(end === null || end === void 0 || (_type11 = end.type) === null || _type11 === void 0 ? void 0 : _type11.displayName) ? 'switch' : 'icon'}`], classes[`${menuItem ? 'menuItem_' : ''}end_${['onesy-Avatar', 'onesy-IconButton', 'onesy-Checkbox', 'onesy-Radio'].includes(end === null || end === void 0 || (_type12 = end.type) === null || _type12 === void 0 ? void 0 : _type12.displayName) ? 'button' : ['onesy-Switch'].includes(end === null || end === void 0 || (_type13 = end.type) === null || _type13 === void 0 ? void 0 : _type13.displayName) ? 'switch' : 'icon'}_size_${size}`]])
+  }), (0, _utils.is)('string', end) ? end : /*#__PURE__*/_react.default.cloneElement(end, {
+    color: ((_props4 = end.props) === null || _props4 === void 0 ? void 0 : _props4.color) || 'inherit',
+    size: ((_props5 = end.props) === null || _props5 === void 0 ? void 0 : _props5.size) !== undefined ? (_props6 = end.props) === null || _props6 === void 0 ? void 0 : _props6.size : ['onesy-Switch'].includes(end === null || end === void 0 || (_type14 = end.type) === null || _type14 === void 0 ? void 0 : _type14.displayName) ? 'small' : 'regular',
+    disabled
+  }))), footer);
 });
 ListItem.displayName = 'onesy-ListItem';
-exports.default = ListItem;
+var _default = exports.default = ListItem;