@onesy/ui-react 1.0.59 → 1.0.60

package/Emojis/Emojis.js

@@ -153,6 +153,7 @@ const useStyle = (0, style_react_1.style)(theme => ({
 }), { name: 'onesy-Emojis' });
 const Emojis = react_1.default.forwardRef((props_, ref) => {
     const theme = (0, style_react_1.useOnesyTheme)();
+    const l = theme.l;
     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.onesyEmojis) === 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 Menu = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Menu) || Menu_1.default; }, [theme]);
@@ -164,48 +165,50 @@ const Emojis = react_1.default.forwardRef((props_, ref) => {
     const Tab = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Tab) || Tab_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 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 EMOJI_CATEGORIES = [
-        {
-            "name": "Smileys and People",
-            "groups": ["Smiley", "Gesture", "Person", "Clothing"],
-            "icon": (0, jsx_runtime_1.jsx)(IconMaterialMoodW100_1.default, {})
-        },
-        {
-            "name": "Animals and Nature",
-            "groups": ["Animal", "Nature"],
-            "icon": (0, jsx_runtime_1.jsx)(IconMaterialEmojiNatureW100_1.default, {})
-        },
-        {
-            "name": "Food and Drink",
-            "groups": ["Food"],
-            "icon": (0, jsx_runtime_1.jsx)(IconMaterialEmojiFoodBeverageW100_1.default, {})
-        },
-        {
-            "name": "Activity",
-            "groups": ["Activity"],
-            "icon": (0, jsx_runtime_1.jsx)(IconMaterialHikingW100_1.default, {})
-        },
-        {
-            "name": "Travel and Places",
-            "groups": ["Travel"],
-            "icon": (0, jsx_runtime_1.jsx)(IconMaterialEmojiTransportationW100_1.default, {})
-        },
-        {
-            "name": "Objects",
-            "groups": ["Object"],
-            "icon": (0, jsx_runtime_1.jsx)(IconMaterialEmojiObjectsW100_1.default, {})
-        },
-        {
-            "name": "Symbols",
-            "groups": ["Symbol"],
-            "icon": (0, jsx_runtime_1.jsx)(IconMaterialEmojiSymbolsW100_1.default, {})
-        },
-        {
-            "name": "Flags and Countries",
-            "groups": ["Flag", "Country"],
-            "icon": (0, jsx_runtime_1.jsx)(IconMaterialEmojiFlagsW100_1.default, {})
-        }
-    ];
+    const EMOJI_CATEGORIES = react_1.default.useMemo(() => {
+        return [
+            {
+                "name": l("Smileys and People"),
+                "groups": ["Smiley", "Gesture", "Person", "Clothing"],
+                "icon": (0, jsx_runtime_1.jsx)(IconMaterialMoodW100_1.default, {})
+            },
+            {
+                "name": l("Animals and Nature"),
+                "groups": ["Animal", "Nature"],
+                "icon": (0, jsx_runtime_1.jsx)(IconMaterialEmojiNatureW100_1.default, {})
+            },
+            {
+                "name": l("Food and Drink"),
+                "groups": ["Food"],
+                "icon": (0, jsx_runtime_1.jsx)(IconMaterialEmojiFoodBeverageW100_1.default, {})
+            },
+            {
+                "name": l("Activity"),
+                "groups": ["Activity"],
+                "icon": (0, jsx_runtime_1.jsx)(IconMaterialHikingW100_1.default, {})
+            },
+            {
+                "name": l("Travel and Places"),
+                "groups": ["Travel"],
+                "icon": (0, jsx_runtime_1.jsx)(IconMaterialEmojiTransportationW100_1.default, {})
+            },
+            {
+                "name": l("Objects"),
+                "groups": ["Object"],
+                "icon": (0, jsx_runtime_1.jsx)(IconMaterialEmojiObjectsW100_1.default, {})
+            },
+            {
+                "name": l("Symbols"),
+                "groups": ["Symbol"],
+                "icon": (0, jsx_runtime_1.jsx)(IconMaterialEmojiSymbolsW100_1.default, {})
+            },
+            {
+                "name": l("Flags and Countries"),
+                "groups": ["Flag", "Country"],
+                "icon": (0, jsx_runtime_1.jsx)(IconMaterialEmojiFlagsW100_1.default, {})
+            }
+        ];
+    }, []);
     const { tonal = true, color = 'themed', label: label_, onSelect: onSelect_, emojis = emojis_list_1.default, categories = EMOJI_CATEGORIES, selected, size = 'regular', search: search_ = true, tabs: tabs_ = true, className } = props, other = __rest(props, ["tonal", "color", "label", "onSelect", "emojis", "categories", "selected", "size", "search", "tabs", "className"]);
     const { classes } = useStyle();
     const [open, setOpen] = react_1.default.useState(false);
@@ -294,7 +297,7 @@ const Emojis = react_1.default.forwardRef((props_, ref) => {
     const label = ((0, jsx_runtime_1.jsx)(Line, Object.assign({ tonal: tonal, color: color, Component: Surface, className: (0, style_react_1.classNames)([
             classes.wrapper,
             classes[`size_${size}`]
-        ]) }, { children: (0, jsx_runtime_1.jsx)(SpyScroll, Object.assign({ ids: categoriesUsedIDs, parent: openElement, onActive: onActiveTab }, { children: (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, align: 'unset', justify: 'unset', fullWidth: true, className: classes.categories }, { children: [(search_ || tabs_) && ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, fullWidth: true, className: classes.header }, { children: [search_ && ((0, jsx_runtime_1.jsx)(TextField, { name: 'Search', version: 'outlined', value: search || '', onChange: onChangeSearch, size: ['small', 'regular'].includes(size) ? 'small' : 'regular', fullWidth: true, clear: true })), tabs_ && !!categoriesUsed.length && ((0, jsx_runtime_1.jsx)(Tabs, Object.assign({ valueDefault: tab, value: tab, onChange: onChangeTabs, size: 'small', initialLineUpdateTimeout: 440, noDivider: true, className: classes.tabs }, { children: tabs.map((item, index) => ((0, jsx_runtime_1.jsx)(Tab, Object.assign({ value: item.value, onClick: () => onTabClick(item.value), "data-onesy-spy-scroll": categoryToID(item.value), className: (0, style_react_1.classNames)([
+        ]) }, { children: (0, jsx_runtime_1.jsx)(SpyScroll, Object.assign({ ids: categoriesUsedIDs, parent: openElement, onActive: onActiveTab }, { children: (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, align: 'unset', justify: 'unset', fullWidth: true, className: classes.categories }, { children: [(search_ || tabs_) && ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, fullWidth: true, className: classes.header }, { children: [search_ && ((0, jsx_runtime_1.jsx)(TextField, { name: l('Search'), version: 'outlined', value: search || '', onChange: onChangeSearch, size: ['small', 'regular'].includes(size) ? 'small' : 'regular', fullWidth: true, clear: true })), tabs_ && !!categoriesUsed.length && ((0, jsx_runtime_1.jsx)(Tabs, Object.assign({ valueDefault: tab, value: tab, onChange: onChangeTabs, size: 'small', initialLineUpdateTimeout: 440, noDivider: true, className: classes.tabs }, { children: tabs.map((item, index) => ((0, jsx_runtime_1.jsx)(Tab, Object.assign({ value: item.value, onClick: () => onTabClick(item.value), "data-onesy-spy-scroll": categoryToID(item.value), className: (0, style_react_1.classNames)([
                                         classes.tab,
                                         classes[`tab_size_${size}`]
                                     ]) }, { children: react_1.default.cloneElement(item.name, {

package/Frame/Frame.js

@@ -62,6 +62,7 @@ const useStyle = (0, style_react_1.style)(theme => ({
 }), { name: 'onesy-Frame' });
 const Frame = react_1.default.forwardRef((props_, ref) => {
     const theme = (0, style_react_1.useOnesyTheme)();
+    const l = theme.l;
     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.onesyFrame) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
     const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
     const IconButton = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.IconButton) || IconButton_1.default; }, [theme]);
@@ -78,10 +79,10 @@ const Frame = react_1.default.forwardRef((props_, ref) => {
         });
     }, []);
     const responsiveOptions = [
-        { name: 'Mobile', icon: IconMobile, disabled: (0, utils_1.isEnvironment)('browser') && window.innerWidth < 375 },
-        { name: 'Tablet', icon: IconTablet, disabled: (0, utils_1.isEnvironment)('browser') && window.innerWidth < 768 },
-        { name: 'Laptop', icon: IconLaptop, disabled: (0, utils_1.isEnvironment)('browser') && window.innerWidth < 1440 },
-        { name: 'Desktop', icon: IconDesktop, disabled: (0, utils_1.isEnvironment)('browser') && window.innerWidth < 1920 }
+        { name: l('Mobile'), icon: IconMobile, disabled: (0, utils_1.isEnvironment)('browser') && window.innerWidth < 375 },
+        { name: l('Tablet'), icon: IconTablet, disabled: (0, utils_1.isEnvironment)('browser') && window.innerWidth < 768 },
+        { name: l('Laptop'), icon: IconLaptop, disabled: (0, utils_1.isEnvironment)('browser') && window.innerWidth < 1440 },
+        { name: l('Desktop'), icon: IconDesktop, disabled: (0, utils_1.isEnvironment)('browser') && window.innerWidth < 1920 }
     ];
     const WrapperStyle = {};
     if (responsive) {
@@ -137,7 +138,7 @@ const Frame = react_1.default.forwardRef((props_, ref) => {
                         ],
                         OptionsProps === null || OptionsProps === void 0 ? void 0 : OptionsProps.className,
                         classes.options
-                    ]) }, { children: [startOptions, responsiveOptions.map((item, index) => ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ label: item.name }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ size: 'small', selected: item.name === responsive, onClick: () => onResponsive(item.name), disabled: item.disabled }, OptionProps, { className: (0, style_react_1.classNames)([
+                    ]) }, { children: [startOptions, responsiveOptions.map((item, index) => ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: item.name }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ size: 'small', selected: item.name === responsive, onClick: () => onResponsive(item.name), disabled: item.disabled }, OptionProps, { className: (0, style_react_1.classNames)([
                                     (0, utils_2.staticClassName)('Frame', theme) && [
                                         'onesy-Frame-option'
                                     ],

package/ImageEdit/ImageEdit.js

@@ -132,6 +132,7 @@ const useStyle = (0, style_react_1.style)(theme => ({
 const ImageEdit = react_1.default.forwardRef((props_, ref) => {
     var _a, _b;
     const theme = (0, style_react_1.useOnesyTheme)();
+    const l = theme.l;
     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.onesyImageEdit) === 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]);
@@ -511,11 +512,11 @@ const ImageEdit = react_1.default.forwardRef((props_, ref) => {
     };
     let filters = react_1.default.useMemo(() => [
         {
-            label: 'Brightness',
+            label: l('Brightness'),
             Icon: IconBrightness,
             value: 'brightness',
             method: utils_2.canvasBrightness,
-            renderIconButton: (value__, selected_, onChangeFilter_) => ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ label: 'Brightness' }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ version: 'outlined', selected: selected_, onClick: () => onChangeFilter_(value__) }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconBrightness, {}) })) }), value__)),
+            renderIconButton: (value__, selected_, onChangeFilter_) => ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: l('Brightness') }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ version: 'outlined', selected: selected_, onClick: () => onChangeFilter_(value__) }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconBrightness, {}) })) }), value__)),
             renderSlider: (value__, filterValuesCopy_, onFilterSliderChange_) => ((0, jsx_runtime_1.jsx)(Slider, Object.assign({ valueDefault: (filterValuesCopy_ === null || filterValuesCopy_ === void 0 ? void 0 : filterValuesCopy_[value__]) || 0, value: (filterValuesCopy_ === null || filterValuesCopy_ === void 0 ? void 0 : filterValuesCopy_[value__]) || 0, min: -100, max: 100, precision: 1, marks: [
                     { value: -100, label: '-100' },
                     { value: 0, label: '0' },
@@ -532,11 +533,11 @@ const ImageEdit = react_1.default.forwardRef((props_, ref) => {
                 ]) }), value__))
         },
         {
-            label: 'Contrast',
+            label: l('Contrast'),
             Icon: IconContrast,
             value: 'contrast',
             method: utils_2.canvasContrast,
-            renderIconButton: (value__, selected_, onChangeFilter_) => ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ label: 'Contrast' }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ version: 'outlined', selected: selected_, onClick: () => onChangeFilter_(value__) }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconContrast, {}) })) }), value__)),
+            renderIconButton: (value__, selected_, onChangeFilter_) => ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: l('Contrast') }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ version: 'outlined', selected: selected_, onClick: () => onChangeFilter_(value__) }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconContrast, {}) })) }), value__)),
             renderSlider: (value__, filterValuesCopy_, onFilterSliderChange_) => ((0, jsx_runtime_1.jsx)(Slider, Object.assign({ valueDefault: (filterValuesCopy_ === null || filterValuesCopy_ === void 0 ? void 0 : filterValuesCopy_[value__]) || 0, value: (filterValuesCopy_ === null || filterValuesCopy_ === void 0 ? void 0 : filterValuesCopy_[value__]) || 0, min: -100, max: 100, precision: 1, marks: [
                     { value: -100, label: '-100' },
                     { value: 0, label: '0' },
@@ -553,11 +554,11 @@ const ImageEdit = react_1.default.forwardRef((props_, ref) => {
                 ]) }), value__))
         },
         {
-            label: 'Saturation',
+            label: l('Saturation'),
             Icon: IconSaturation,
             value: 'saturation',
             method: utils_2.canvasSaturation,
-            renderIconButton: (value__, selected_, onChangeFilter_) => ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ label: 'Saturation' }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ version: 'outlined', selected: selected_, onClick: () => onChangeFilter_(value__) }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconSaturation, {}) })) }), value__)),
+            renderIconButton: (value__, selected_, onChangeFilter_) => ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: l('Saturation') }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ version: 'outlined', selected: selected_, onClick: () => onChangeFilter_(value__) }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconSaturation, {}) })) }), value__)),
             renderSlider: (value__, filterValuesCopy_, onFilterSliderChange_) => ((0, jsx_runtime_1.jsx)(Slider, Object.assign({ valueDefault: (filterValuesCopy_ === null || filterValuesCopy_ === void 0 ? void 0 : filterValuesCopy_[value__]) || 0, value: (filterValuesCopy_ === null || filterValuesCopy_ === void 0 ? void 0 : filterValuesCopy_[value__]) || 0, min: -100, max: 100, precision: 1, marks: [
                     { value: -100, label: '-100' },
                     { value: 0, label: '0' },
@@ -574,11 +575,11 @@ const ImageEdit = react_1.default.forwardRef((props_, ref) => {
                 ]) }), value__))
         },
         {
-            label: 'Fade',
+            label: l('Fade'),
             Icon: IconFade,
             value: 'fade',
             method: utils_2.canvasFade,
-            renderIconButton: (value__, selected_, onChangeFilter_) => ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ label: 'Fade' }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ version: 'outlined', selected: selected_, onClick: () => onChangeFilter_(value__) }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconFade, {}) })) }), value__)),
+            renderIconButton: (value__, selected_, onChangeFilter_) => ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: l('Fade') }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ version: 'outlined', selected: selected_, onClick: () => onChangeFilter_(value__) }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconFade, {}) })) }), value__)),
             renderSlider: (value__, filterValuesCopy_, onFilterSliderChange_) => ((0, jsx_runtime_1.jsx)(Slider, Object.assign({ valueDefault: (filterValuesCopy_ === null || filterValuesCopy_ === void 0 ? void 0 : filterValuesCopy_[value__]) || 0, value: (filterValuesCopy_ === null || filterValuesCopy_ === void 0 ? void 0 : filterValuesCopy_[value__]) || 0, min: 0, max: 100, precision: 1, marks: [
                     { value: 0, label: '0' },
                     { value: 100, label: '100' }
@@ -594,11 +595,11 @@ const ImageEdit = react_1.default.forwardRef((props_, ref) => {
                 ]) }), value__))
         },
         {
-            label: 'Invert',
+            label: l('Invert'),
             Icon: IconInvert,
             value: 'invert',
             method: utils_2.canvasInvert,
-            renderIconButton: (value__, selected_, onChangeFilter_) => ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ label: 'Invert' }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ version: 'outlined', selected: selected_, onClick: () => onChangeFilter_(value__) }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconInvert, {}) })) }), value__)),
+            renderIconButton: (value__, selected_, onChangeFilter_) => ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: l('Invert') }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ version: 'outlined', selected: selected_, onClick: () => onChangeFilter_(value__) }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconInvert, {}) })) }), value__)),
             renderSlider: (value__, filterValuesCopy_, onFilterSliderChange_) => ((0, jsx_runtime_1.jsx)(Slider, Object.assign({ valueDefault: (filterValuesCopy_ === null || filterValuesCopy_ === void 0 ? void 0 : filterValuesCopy_[value__]) || 0, value: (filterValuesCopy_ === null || filterValuesCopy_ === void 0 ? void 0 : filterValuesCopy_[value__]) || 0, min: 0, max: 1, precision: 1, marks: [
                     { value: 0, label: 'Not inverted' },
                     { value: 1, label: 'Inverted' }
@@ -614,11 +615,11 @@ const ImageEdit = react_1.default.forwardRef((props_, ref) => {
                 ]) }), value__))
         },
         {
-            label: 'Old photo',
+            label: l('Old photo'),
             Icon: IconOldPhoto,
             value: 'old_photo',
             method: utils_2.canvasOldPhoto,
-            renderIconButton: (value__, selected_, onChangeFilter_) => ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ label: 'Old photo' }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ version: 'outlined', selected: selected_, onClick: () => onChangeFilter_(value__) }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconOldPhoto, {}) })) }), value__)),
+            renderIconButton: (value__, selected_, onChangeFilter_) => ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: l('Old photo') }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ version: 'outlined', selected: selected_, onClick: () => onChangeFilter_(value__) }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconOldPhoto, {}) })) }), value__)),
             renderSlider: (value__, filterValuesCopy_, onFilterSliderChange_) => ((0, jsx_runtime_1.jsx)(Slider, Object.assign({ valueDefault: (filterValuesCopy_ === null || filterValuesCopy_ === void 0 ? void 0 : filterValuesCopy_[value__]) || 0, value: (filterValuesCopy_ === null || filterValuesCopy_ === void 0 ? void 0 : filterValuesCopy_[value__]) || 0, min: -40, max: 40, precision: 1, marks: [
                     { value: -40, label: '-40' },
                     { value: 0, label: 'No filter' },
@@ -650,10 +651,10 @@ const ImageEdit = react_1.default.forwardRef((props_, ref) => {
         { label: '16:9', value: 16 / 9 }
     ];
     const options = [
-        filtersOption && { label: 'Filters', value: 'filters', Icon: IconFilters },
-        cropOption && { label: 'Crop', value: 'crop', Icon: IconCrop },
-        resizeOption && { label: 'Resize', value: 'resize', Icon: IconResize },
-        qualityOption && { label: 'Quality', value: 'quality', Icon: IconQuality }
+        filtersOption && { label: l('Filters'), value: 'filters', Icon: IconFilters },
+        cropOption && { label: l('Crop'), value: 'crop', Icon: IconCrop },
+        resizeOption && { label: l('Resize'), value: 'resize', Icon: IconResize },
+        qualityOption && { label: l('Quality'), value: 'quality', Icon: IconQuality }
     ]
         .filter(Boolean);
     const MetaTypeProps = {
@@ -739,7 +740,7 @@ const ImageEdit = react_1.default.forwardRef((props_, ref) => {
                                                 'onesy-ImageEdit-inputs'
                                             ],
                                             classes.inputs
-                                        ]) }, { children: [(0, utils_1.is)('function', renderInput) ? renderInput(value, valueCopy, resize, onChangeResize, 'width') : ((0, jsx_runtime_1.jsx)(NumericTextField, { tonal: tonal, label: 'Width', color: 'default', version: 'text', size: 'small', min: 1, max: value === null || value === void 0 ? void 0 : value.width, valueDefault: value === null || value === void 0 ? void 0 : value.width, value: resize === null || resize === void 0 ? void 0 : resize[0], onChange: (valueNew) => onChangeResize(valueNew) })), (0, utils_1.is)('function', renderInput) ? renderInput(value, valueCopy, resize, onChangeResize, 'height') : ((0, jsx_runtime_1.jsx)(NumericTextField, { tonal: tonal, label: 'Height', color: 'default', version: 'text', size: 'small', min: 1, max: value === null || value === void 0 ? void 0 : value.height, valueDefault: value === null || value === void 0 ? void 0 : value.height, value: resize === null || resize === void 0 ? void 0 : resize[1], onChange: (valueNew) => onChangeResize(valueNew, false) }))] }))), openedOption === 'quality' && ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 3, direction: 'row', align: 'center', style: {
+                                        ]) }, { children: [(0, utils_1.is)('function', renderInput) ? renderInput(value, valueCopy, resize, onChangeResize, 'width') : ((0, jsx_runtime_1.jsx)(NumericTextField, { tonal: tonal, name: l('Width'), color: 'default', version: 'text', size: 'small', min: 1, max: value === null || value === void 0 ? void 0 : value.width, valueDefault: value === null || value === void 0 ? void 0 : value.width, value: resize === null || resize === void 0 ? void 0 : resize[0], onChange: (valueNew) => onChangeResize(valueNew) })), (0, utils_1.is)('function', renderInput) ? renderInput(value, valueCopy, resize, onChangeResize, 'height') : ((0, jsx_runtime_1.jsx)(NumericTextField, { tonal: tonal, name: l('Height'), color: 'default', version: 'text', size: 'small', min: 1, max: value === null || value === void 0 ? void 0 : value.height, valueDefault: value === null || value === void 0 ? void 0 : value.height, value: resize === null || resize === void 0 ? void 0 : resize[1], onChange: (valueNew) => onChangeResize(valueNew, false) }))] }))), openedOption === 'quality' && ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 3, direction: 'row', align: 'center', style: {
                                             width: '100%'
                                         } }, { children: [(0, jsx_runtime_1.jsx)(Slider, Object.assign({ valueDefault: quality, value: quality, min: 1, max: 100, precision: 1, marks: [
                                                     { value: 1 },
@@ -763,7 +764,7 @@ const ImageEdit = react_1.default.forwardRef((props_, ref) => {
                                                 'onesy-ImageEdit-action'
                                             ],
                                             classes.action
-                                        ]) }, { children: [(0, utils_1.is)('function', renderSave) ? renderSave(onSave) : ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ label: 'Save' }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ version: 'outlined', onClick: onSave }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconSave, {}) })) }))), (0, utils_1.is)('function', renderCancel) ? renderCancel(onSave) : ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ label: 'Cancel' }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ version: 'outlined', onClick: onCancel }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconCancel, {}) })) })))] }))] })), (0, jsx_runtime_1.jsx)(Divider, { color: 'inherit', className: (0, style_react_1.classNames)([
+                                        ]) }, { children: [(0, utils_1.is)('function', renderSave) ? renderSave(onSave) : ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: l('Save') }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ version: 'outlined', onClick: onSave }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconSave, {}) })) }))), (0, utils_1.is)('function', renderCancel) ? renderCancel(onSave) : ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: l('Cancel') }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ version: 'outlined', onClick: onCancel }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconCancel, {}) })) })))] }))] })), (0, jsx_runtime_1.jsx)(Divider, { color: 'inherit', className: (0, style_react_1.classNames)([
                                     (0, utils_2.staticClassName)('ImageEdit', theme) && [
                                         'onesy-ImageEdit-divider'
                                     ],
@@ -773,7 +774,7 @@ const ImageEdit = react_1.default.forwardRef((props_, ref) => {
                                 'onesy-ImageEdit-options'
                             ],
                             classes.options
-                        ]) }, { children: (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'row', justify: 'flex-start' }, { children: [options.map((item, index) => ((0, utils_1.is)('function', renderOption) ? renderOption(item, open && (openOption === item.value), openOption) : ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ label: item.label }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ version: 'outlined', selected: open && (openedOption === item.value), onClick: () => openOption(item.value) }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(item.Icon, {}) })) }), index)))), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, direction: 'row', align: 'center' }, { children: [downloadOption && (0, utils_1.is)('function', renderDownload) ? renderDownload(onDownload) : ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ label: 'Download' }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ version: 'text', onClick: onDownload }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconDownload, {}) })) }))), (0, utils_1.is)('function', renderOptionClear) ? renderOptionClear(onReset) : ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ label: 'Reset' }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ version: 'text', onClick: onReset }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconClear, {}) })) })))] }))] })) }))] }), children, meta && value && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Divider, { color: 'inherit', className: (0, style_react_1.classNames)([
+                        ]) }, { children: (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'row', justify: 'flex-start' }, { children: [options.map((item, index) => ((0, utils_1.is)('function', renderOption) ? renderOption(item, open && (openOption === item.value), openOption) : ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: item.label }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ version: 'outlined', selected: open && (openedOption === item.value), onClick: () => openOption(item.value) }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(item.Icon, {}) })) }), index)))), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, direction: 'row', align: 'center' }, { children: [downloadOption && (0, utils_1.is)('function', renderDownload) ? renderDownload(onDownload) : ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: l('Download') }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ version: 'text', onClick: onDownload }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconDownload, {}) })) }))), (0, utils_1.is)('function', renderOptionClear) ? renderOptionClear(onReset) : ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: l('Reset') }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ version: 'text', onClick: onReset }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconClear, {}) })) })))] }))] })) }))] }), children, meta && value && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Divider, { color: 'inherit', className: (0, style_react_1.classNames)([
                             (0, utils_2.staticClassName)('ImageEdit', theme) && [
                                 'onesy-ImageEdit-divider'
                             ],
@@ -783,7 +784,7 @@ const ImageEdit = react_1.default.forwardRef((props_, ref) => {
                                 'onesy-ImageEdit-meta'
                             ],
                             classes.meta
-                        ]) }, { children: [(0, jsx_runtime_1.jsxs)(Type, Object.assign({}, MetaTypeProps, { children: ["Dimensions: ", (_a = (!open ? value : valueCopy)) === null || _a === void 0 ? void 0 : _a.width, "x", (_b = (!open ? value : valueCopy)) === null || _b === void 0 ? void 0 : _b.height] })), (0, jsx_runtime_1.jsx)(Type, Object.assign({}, MetaTypeProps, { children: "\u00B7" })), (0, jsx_runtime_1.jsxs)(Type, Object.assign({}, MetaTypeProps, { children: ["Size: ", size] }))] }))] })] })));
+                        ]) }, { children: [(0, jsx_runtime_1.jsxs)(Type, Object.assign({}, MetaTypeProps, { children: [l('Dimensions'), ": ", (_a = (!open ? value : valueCopy)) === null || _a === void 0 ? void 0 : _a.width, "x", (_b = (!open ? value : valueCopy)) === null || _b === void 0 ? void 0 : _b.height] })), (0, jsx_runtime_1.jsx)(Type, Object.assign({}, MetaTypeProps, { children: "\u00B7" })), (0, jsx_runtime_1.jsxs)(Type, Object.assign({}, MetaTypeProps, { children: [l('Size'), ": ", size] }))] }))] })] })));
 });
 ImageEdit.displayName = 'onesy-ImageEdit';
 exports.default = ImageEdit;

package/Info/Info.js

@@ -41,6 +41,7 @@ const useStyle = (0, style_react_1.style)(theme => ({
 }), { name: 'onesy-Info' });
 const Info = react_1.default.forwardRef((props_, ref) => {
     const theme = (0, style_react_1.useOnesyTheme)();
+    const l = theme.l;
     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.onesyInfo) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
     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 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]);
@@ -60,7 +61,7 @@ const Info = react_1.default.forwardRef((props_, ref) => {
             ],
             className,
             classes.root
-        ]) }, other, { children: (0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: name !== undefined ? name : 'Info' }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({}, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(Icon, Object.assign({}, IconProps)) })) })) }) })));
+        ]) }, other, { children: (0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: name !== undefined ? name : l('Info') }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({}, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(Icon, Object.assign({}, IconProps)) })) })) }) })));
 });
 Info.displayName = 'onesy-Info';
 exports.default = Info;

package/Links/Links.d.ts

@@ -14,6 +14,8 @@ export type ILinks = IBaseElement & {
     links?: ILinksItem[];
     cover?: IMediaObject;
     profile?: IMediaObject;
+    sensitiveText?: any;
+    sensitiveDescription?: any;
     share?: boolean;
     start?: any;
     end?: any;

package/Links/Links.js

@@ -85,6 +85,7 @@ const useStyle = (0, style_react_1.style)(theme => ({
 }), { name: 'onesy-Links' });
 const Element = react_1.default.forwardRef((props_, ref) => {
     const theme = (0, style_react_1.useOnesyTheme)();
+    const l = theme.l;
     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.onesyLinks) === 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 Section = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Section) || Section_1.default; }, [theme]);
@@ -95,17 +96,17 @@ const Element = react_1.default.forwardRef((props_, ref) => {
     const MenuItem = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.MenuItem) || MenuItem_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 { classes } = useStyle();
-    const { name, short_description, cover, profile, links, share = true, start, end, IconMore = IconMaterialMoreVertW100_1.default, IconShare = IconMaterialShareW100_1.default, ShareProps, ItemShareProps, IconButtonProps, IconProps, NameProps, ShortDescriptionProps, LinkProps, LinkTypeProps, className } = props, other = __rest(props, ["name", "short_description", "cover", "profile", "links", "share", "start", "end", "IconMore", "IconShare", "ShareProps", "ItemShareProps", "IconButtonProps", "IconProps", "NameProps", "ShortDescriptionProps", "LinkProps", "LinkTypeProps", "className"]);
+    const { name, short_description, cover, profile, links, share = true, start, end, sensitiveText = l('Sensitive URL'), sensitiveDescription = l('This is URL might contain sensitive information, confirm you are 18+ to continue.'), IconMore = IconMaterialMoreVertW100_1.default, IconShare = IconMaterialShareW100_1.default, ShareProps, ItemShareProps, IconButtonProps, IconProps, NameProps, ShortDescriptionProps, LinkProps, LinkTypeProps, className } = props, other = __rest(props, ["name", "short_description", "cover", "profile", "links", "share", "start", "end", "sensitiveText", "sensitiveDescription", "IconMore", "IconShare", "ShareProps", "ItemShareProps", "IconButtonProps", "IconProps", "NameProps", "ShortDescriptionProps", "LinkProps", "LinkTypeProps", "className"]);
     const confirm = (0, Confirm_1.useConfirm)();
     const onOpenLink = react_1.default.useCallback(async (item) => {
         const confirmed = (item.sensitivity && !['none'].includes(item.sensitivity)) ? await confirm.open({
-            name: 'Sensitive URL',
-            description: `This is URL might contain sensitive information, confirm you are 18+ to continue.`
+            name: sensitiveText,
+            description: sensitiveDescription
         }) : true;
         if (confirmed) {
             window.open(item.url, 'blank');
         }
-    }, []);
+    }, [sensitiveText, sensitiveDescription]);
     return ((0, jsx_runtime_1.jsxs)(Section, Object.assign({ ref: ref, gap: 2, align: 'center', maxWidth: false, padding: false, fullWidth: true, className: (0, style_react_1.classNames)([
             (0, utils_2.staticClassName)('Links', theme) && [
                 'onesy-Links-root'
@@ -140,8 +141,8 @@ const Element = react_1.default.forwardRef((props_, ref) => {
                                             LinkProps === null || LinkProps === void 0 ? void 0 : LinkProps.className,
                                             (_a = item.props) === null || _a === void 0 ? void 0 : _a.className,
                                             classes.link
-                                        ]) }, { children: (0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b1', weight: 300 }, LinkTypeProps, { children: item.name || 'Link' })) })), (0, jsx_runtime_1.jsx)(Menu, Object.assign({ menuItems: [
-                                            (0, jsx_runtime_1.jsx)(MenuItem, { start: ((0, jsx_runtime_1.jsx)(IconShare, Object.assign({ size: 'small' }, IconProps))), startAlign: 'center', primary: ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3' }, { children: "Share" }))), menu: item.share ? ((0, jsx_runtime_1.jsx)(Share, Object.assign({ version: 'menu-items', name: item.name, url: item.url, exclude: ['print'] }, ItemShareProps, { ListItemProps: Object.assign({ size: 'small', noBackground: true }, ItemShareProps === null || ItemShareProps === void 0 ? void 0 : ItemShareProps.ListItemProps) }))) : undefined, MenuProps: {
+                                        ]) }, { children: (0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b1', weight: 300 }, LinkTypeProps, { children: item.name || l('Link') })) })), (0, jsx_runtime_1.jsx)(Menu, Object.assign({ menuItems: [
+                                            (0, jsx_runtime_1.jsx)(MenuItem, { start: ((0, jsx_runtime_1.jsx)(IconShare, Object.assign({ size: 'small' }, IconProps))), startAlign: 'center', primary: ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3' }, { children: l('Share') }))), menu: item.share ? ((0, jsx_runtime_1.jsx)(Share, Object.assign({ version: 'menu-items', name: item.name, url: item.url, exclude: ['print'] }, ItemShareProps, { ListItemProps: Object.assign({ size: 'small', noBackground: true }, ItemShareProps === null || ItemShareProps === void 0 ? void 0 : ItemShareProps.ListItemProps) }))) : undefined, MenuProps: {
                                                     ListProps: {
                                                         noChildrenTransform: true
                                                     }

package/Medias/Medias.js

@@ -151,6 +151,7 @@ const useStyle = (0, style_react_1.style)(theme => ({
 const Medias = react_1.default.forwardRef((props_, ref) => {
     var _a, _b, _c;
     const theme = (0, style_react_1.useOnesyTheme)();
+    const l = theme.l;
     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.onesyMedias) === 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 Link = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Link) || Link_1.default; }, [theme]);
@@ -275,7 +276,7 @@ const Medias = react_1.default.forwardRef((props_, ref) => {
                 ],
                 NameProps === null || NameProps === void 0 ? void 0 : NameProps.className,
                 classes.name
-            ]) }, { children: (media === null || media === void 0 ? void 0 : media.name) || 'No name' })));
+            ]) }, { children: (media === null || media === void 0 ? void 0 : media.name) || l('No name') })));
         if (version === 'embed') {
             return getLink(media, index);
         }

package/MenuDesktop/MenuDesktop.js

@@ -128,7 +128,6 @@ const MenuDesktop = react_1.default.forwardRef((props_, ref) => {
     const [openItem, setOpenItem] = react_1.default.useState();
     const [focus, setFocus] = react_1.default.useState();
     const [append, setAppend] = react_1.default.useState();
-    const [menuOpened, setMenuOpened] = react_1.default.useState();
     const [menu, setMenu] = react_1.default.useState();
     const refs = {
         root: react_1.default.useRef(undefined),
@@ -401,8 +400,7 @@ const MenuDesktop = react_1.default.forwardRef((props_, ref) => {
                                             'onesy-MenuDesktop-menu-wrapper'
                                         ],
                                         WrapperMenuProps === null || WrapperMenuProps === void 0 ? void 0 : WrapperMenuProps.className,
-                                        classes.menuWrapper,
-                                        menuOpened && classes.menuWrapper_open
+                                        classes.menuWrapper
                                     ]), style: Object.assign(Object.assign({}, append), WrapperMenuProps === null || WrapperMenuProps === void 0 ? void 0 : WrapperMenuProps.style) }, { children: [menu && menuTransition && ((0, jsx_runtime_1.jsx)(Transitions, Object.assign({ switch: true, mode: 'in-out-follow' }, { children: (0, jsx_runtime_1.jsx)(Transition, { children: (status) => {
                                                     var _a, _b;
                                                     return (react_1.default.cloneElement(menu, {

package/NavigationItem/NavigationItem.js

@@ -232,7 +232,7 @@ const NavigationItem = react_1.default.forwardRef((props_, ref) => {
         ]);
     }
     const Icon = (selected && iconSelected) || icon;
-    return ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ label: label || value, position: 'top', alignment: 'center', longPress: true, touch: false, hover: false, focus: false }, TooltipProps, { children: (0, jsx_runtime_1.jsx)("span", Object.assign({ tabIndex: !disabled ? 0 : undefined, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, onTouchStart: onTouchStart, onMouseDown: onMouseDown, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, className: (0, style_react_1.classNames)([
+    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)([
                 (0, utils_2.staticClassName)('NavigationItem', theme) && [
                     'onesy-NavigationItem-root',
                     selected && 'onesy-NavigationItem-selected',

package/NotFound/NotFound.d.ts

@@ -7,6 +7,7 @@ export type INotFound = ISection & {
     link?: string;
     start?: any;
     end?: any;
+    buttonText?: any;
     renderButton?: (props: any) => any;
     fullHeight?: any;
     ButtonProps?: any;

package/NotFound/NotFound.js

@@ -31,11 +31,12 @@ const useStyle = (0, style_react_1.style)(theme => ({
 }), { name: 'onesy-NotFound' });
 const NotFound = react_1.default.forwardRef((props_, ref) => {
     const theme = (0, style_react_1.useOnesyTheme)();
+    const l = theme.l;
     const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyNotFound) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
     const Section = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Section) || Section_1.default; }, [theme]);
     const Type = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Type) || Type_1.default; }, [theme]);
     const Button = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Button) || Button_1.default; }, [theme]);
-    const { name = 'Page not found 🫠', to = '/', link = '', renderButton, fullHeight, start, end, ButtonProps, TypeProps, className } = props, other = __rest(props, ["name", "to", "link", "renderButton", "fullHeight", "start", "end", "ButtonProps", "TypeProps", "className"]);
+    const { name = l('Page not found'), to = '/', link = '', renderButton, fullHeight, start, end, buttonText = l('Back'), ButtonProps, TypeProps, className } = props, other = __rest(props, ["name", "to", "link", "renderButton", "fullHeight", "start", "end", "buttonText", "ButtonProps", "TypeProps", "className"]);
     const { classes } = useStyle();
     const navigate = (0, utils_1.isEnvironment)('browser') && (0, react_router_dom_1.useNavigate)();
     const onTo = react_1.default.useCallback(() => {
@@ -62,7 +63,7 @@ const NotFound = react_1.default.forwardRef((props_, ref) => {
                     ],
                     ButtonProps === null || ButtonProps === void 0 ? void 0 : ButtonProps.className,
                     classes.button
-                ]) }, { children: "Back" }))), end] })));
+                ]) }, { children: buttonText }))), end] })));
 });
 NotFound.displayName = 'onesy-NotFound';
 exports.default = NotFound;

package/Page/Page.js

@@ -45,6 +45,7 @@ const useStyle = (0, style_react_1.style)(theme => ({
 }), { name: 'onesy' });
 const Page = react_1.default.forwardRef((props_, ref) => {
     const theme = (0, style_react_1.useOnesyTheme)();
+    const l = theme.l;
     const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyPage) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
     const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
     const IconButton = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.IconButton) || IconButton_1.default; }, [theme]);
@@ -56,7 +57,7 @@ const Page = react_1.default.forwardRef((props_, ref) => {
     const IconButtonProps = {
         color: 'inherit'
     };
-    const navigation = (back || forward) && ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ direction: 'row', align: 'center', justify: 'space-between', fullWidth: true }, { children: [back ? ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: ((back === null || back === void 0 ? void 0 : back.name) !== undefined ? back.name : back === null || back === void 0 ? void 0 : back.label) || 'Back' }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: () => navigate(back === null || back === void 0 ? void 0 : back.to) }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconBack, {}) })) }))) : (0, jsx_runtime_1.jsx)("span", {}), forward ? ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: ((forward === null || forward === void 0 ? void 0 : forward.name) !== undefined ? forward.name : forward === null || forward === void 0 ? void 0 : forward.label) || 'Forward' }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: () => navigate(forward === null || forward === void 0 ? void 0 : forward.to) }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconForward, {}) })) }))) : (0, jsx_runtime_1.jsx)("span", {})] })));
+    const navigation = (back || forward) && ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ direction: 'row', align: 'center', justify: 'space-between', fullWidth: true }, { children: [back ? ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: ((back === null || back === void 0 ? void 0 : back.name) !== undefined ? back.name : back === null || back === void 0 ? void 0 : back.label) || l('Back') }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: () => navigate(back === null || back === void 0 ? void 0 : back.to) }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconBack, {}) })) }))) : (0, jsx_runtime_1.jsx)("span", {}), forward ? ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: ((forward === null || forward === void 0 ? void 0 : forward.name) !== undefined ? forward.name : forward === null || forward === void 0 ? void 0 : forward.label) || l('Forward') }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: () => navigate(forward === null || forward === void 0 ? void 0 : forward.to) }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconForward, {}) })) }))) : (0, jsx_runtime_1.jsx)("span", {})] })));
     const header = !noHeader && (navigation || name) && ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 2, direction: 'column', fullWidth: true }, { children: [navigation, (0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 0, direction: 'row', align: 'center', justify: 'center', fullWidth: true }, { children: (0, utils_1.is)('string', name) ? ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 't1', color: 'inherit', align: 'center', className: classes.name }, { children: name }))) : name }))] })));
     return ((0, jsx_runtime_1.jsxs)(Component, Object.assign({ ref: ref, gap: 4, direction: 'column', justify: 'unset', align: 'unset', fullWidth: true, flex: true, className: (0, style_react_1.classNames)([
             (0, utils_2.staticClassName)('Page', theme) && [

package/PieChart/PieChart.js

@@ -58,6 +58,7 @@ const useStyle = (0, style_react_1.style)(theme => ({
 }), { name: 'onesy-PieChart' });
 const PieChart = react_1.default.forwardRef((props_, ref) => {
     const theme = (0, style_react_1.useOnesyTheme)();
+    const l = theme.l;
     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.onesyPieChart) === 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]);
@@ -120,7 +121,7 @@ const PieChart = react_1.default.forwardRef((props_, ref) => {
         // normalized in rect width, height values
         // invert y so 0, 0 is at bottom left
         if (refs.rects.current && values) {
-            const { width, height } = refs.rects.current.wrapper;
+            const { width } = refs.rects.current.wrapper;
             // Legend
             const legend_ = values.map((item) => {
                 return {
@@ -251,9 +252,9 @@ const PieChart = react_1.default.forwardRef((props_, ref) => {
                                     background: !refs.theme.current.palette.color[color_] ? color_ : refs.theme.current.palette.color[color_][tone]
                                 } }), (0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3' }, { children: name }))] })), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0.4, direction: 'column' }, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'row', align: 'center' }, { children: [(0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3', style: {
                                             fontWeight: 600
-                                        } }, { children: (names === null || names === void 0 ? void 0 : names.value) || 'Value' })), (0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3' }, { children: valueValue }))] })), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'row', align: 'center' }, { children: [(0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3', style: {
+                                        } }, { children: (names === null || names === void 0 ? void 0 : names.value) || l('Value') })), (0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3' }, { children: valueValue }))] })), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'row', align: 'center' }, { children: [(0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3', style: {
                                             fontWeight: 600
-                                        } }, { children: (names === null || names === void 0 ? void 0 : names.percentage) || 'Percentage' })), (0, jsx_runtime_1.jsxs)(Type, Object.assign({ version: 'b3' }, { children: [valuePercentage, "%"] }))] }))] }))] })))
+                                        } }, { children: (names === null || names === void 0 ? void 0 : names.percentage) || l('Percentage') })), (0, jsx_runtime_1.jsxs)(Type, Object.assign({ version: 'b3' }, { children: [valuePercentage, "%"] }))] }))] }))] })))
         };
     };
     return ((0, jsx_runtime_1.jsx)(Chart, Object.assign({ ref: item => {