@onesy/ui-react 1.0.0

package/SectionTextMedia/SectionTextMedia.js

@@ -0,0 +1,148 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const react_router_dom_1 = require("react-router-dom");
+const utils_1 = require("@onesy/utils");
+const style_react_1 = require("@onesy/style-react");
+const Text_1 = __importDefault(require("../Text"));
+const Image_1 = __importDefault(require("../Image"));
+const Section_1 = __importDefault(require("../Section/Section"));
+const AudioPlayer_1 = __importDefault(require("../AudioPlayer"));
+const VideoPlayer_1 = __importDefault(require("../VideoPlayer"));
+const Line_1 = __importDefault(require("../Line"));
+const Type_1 = __importDefault(require("../Type"));
+const Button_1 = __importDefault(require("../Button"));
+const utils_2 = require("../utils");
+const useStyle = (0, style_react_1.style)(theme => ({
+    root: {},
+    main: {
+        '&.onesy-Line-direction-row': {
+            '& > *': {
+                width: '50%'
+            }
+        }
+    }
+}), { name: 'onesy-SectionTextMedia' });
+const SectionTextMedia = react_1.default.forwardRef((props_, ref) => {
+    var _a;
+    const theme = (0, style_react_1.useOnesyTheme)();
+    const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesySectionTextMedia) === 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 Text = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Text) || Text_1.default; }, [theme]);
+    const Image = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Image) || Image_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]);
+    const AudioPlayer = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.AudioPlayer) || AudioPlayer_1.default; }, [theme]);
+    const VideoPlayer = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.VideoPlayer) || VideoPlayer_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 { classes } = useStyle();
+    const { size, title, description, button, mediaPosition = 'top', media, MainProps, TitleProps, WrapperProps, WrapperMainProps, WrapperTextProps, DescriptionProps, MediaProps, ImageProps, AudioProps, VideoProps, OtherProps, className } = props, other = __rest(props, ["size", "title", "description", "button", "mediaPosition", "media", "MainProps", "TitleProps", "WrapperProps", "WrapperMainProps", "WrapperTextProps", "DescriptionProps", "MediaProps", "ImageProps", "AudioProps", "VideoProps", "OtherProps", "className"]);
+    const refs = {
+        root: react_1.default.useRef(undefined)
+    };
+    let mediaElement;
+    const mediaProps = Object.assign({ size, themed: true, color: 'primary' }, MediaProps);
+    const mime = (media === null || media === void 0 ? void 0 : media.mime) || '';
+    const navigate = (0, utils_1.isEnvironment)('browser') && (0, react_router_dom_1.useNavigate)();
+    if (mime.includes('image')) {
+        mediaElement = ((0, jsx_runtime_1.jsx)(Image, Object.assign({ src: (media === null || media === void 0 ? void 0 : media.url) || (media === null || media === void 0 ? void 0 : media.urlSmall) || ((0, utils_1.is)('string', media) ? media : '') }, mediaProps, MediaProps, ImageProps, { className: (0, style_react_1.classNames)([
+                (0, utils_2.staticClassName)('SectionTextMedia', theme) && [
+                    'onesy-SectionTextMedia-item',
+                    'onesy-SectionTextMedia-item-image'
+                ],
+                MediaProps === null || MediaProps === void 0 ? void 0 : MediaProps.className,
+                ImageProps === null || ImageProps === void 0 ? void 0 : ImageProps.className
+            ]) })));
+    }
+    if (mime.includes('audio')) {
+        mediaElement = ((0, jsx_runtime_1.jsx)(AudioPlayer, Object.assign({}, media, mediaProps, MediaProps, AudioProps, { className: (0, style_react_1.classNames)([
+                (0, utils_2.staticClassName)('SectionTextMedia', theme) && [
+                    'onesy-SectionTextMedia-item',
+                    'onesy-SectionTextMedia-item-audio'
+                ],
+                MediaProps === null || MediaProps === void 0 ? void 0 : MediaProps.className,
+                AudioProps === null || AudioProps === void 0 ? void 0 : AudioProps.className
+            ]) })));
+    }
+    if (mime.includes('video')) {
+        mediaElement = ((0, jsx_runtime_1.jsx)(VideoPlayer, Object.assign({}, media, mediaProps, MediaProps, VideoProps, { className: (0, style_react_1.classNames)([
+                (0, utils_2.staticClassName)('SectionTextMedia', theme) && [
+                    'onesy-SectionTextMedia-item',
+                    'onesy-SectionTextMedia-item-video'
+                ],
+                MediaProps === null || MediaProps === void 0 ? void 0 : MediaProps.className,
+                VideoProps === null || VideoProps === void 0 ? void 0 : VideoProps.className
+            ]) })));
+    }
+    const main = ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 3, direction: 'column', align: ['left', 'top', 'bottom'].includes(mediaPosition) ? 'flex-start' : 'flex-end', fullWidth: true }, WrapperMainProps, { className: (0, style_react_1.classNames)([
+            (0, utils_2.staticClassName)('SectionTextMedia', theme) && [
+                'onesy-SectionTextMedia-wrapper-main'
+            ],
+            WrapperMainProps === null || WrapperMainProps === void 0 ? void 0 : WrapperMainProps.className
+        ]) }, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 2, direction: 'column', align: ['left', 'top', 'bottom'].includes(mediaPosition) ? 'flex-start' : 'flex-end', fullWidth: true }, WrapperTextProps, { className: (0, style_react_1.classNames)([
+                    (0, utils_2.staticClassName)('SectionTextMedia', theme) && [
+                        'onesy-SectionTextMedia-wrapper-text'
+                    ],
+                    WrapperTextProps === null || WrapperTextProps === void 0 ? void 0 : WrapperTextProps.className
+                ]) }, { children: [(0, utils_1.is)('string', title) && ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: size === 'large' ? 'h1' : size === 'regular' ? 'h2' : 'h3', align: ['left', 'top', 'bottom'].includes(mediaPosition) ? 'start' : 'end', dangerouslySetInnerHTML: {
+                            __html: (0, utils_1.textToInnerHTML)(title)
+                        } }, TitleProps, { className: (0, style_react_1.classNames)([
+                            (0, utils_2.staticClassName)('SectionTextMedia', theme) && [
+                                'onesy-SectionTextMedia-title'
+                            ],
+                            TitleProps === null || TitleProps === void 0 ? void 0 : TitleProps.className
+                        ]) }))), (0, utils_1.is)('string', description) && ((0, jsx_runtime_1.jsx)(Text, Object.assign({ align: ['left', 'top', 'bottom'].includes(mediaPosition) ? 'start' : 'end', columns: 1, TypeProps: Object.assign(Object.assign({}, DescriptionProps === null || DescriptionProps === void 0 ? void 0 : DescriptionProps.TypeProps), { version: size === 'large' ? 'b1' : [undefined, 'regular'].includes(size) ? 'b2' : 'b3' }), value: description }, DescriptionProps, { className: (0, style_react_1.classNames)([
+                            (0, utils_2.staticClassName)('SectionTextMedia', theme) && [
+                                'onesy-SectionTextMedia-description'
+                            ],
+                            DescriptionProps === null || DescriptionProps === void 0 ? void 0 : DescriptionProps.className
+                        ]) })))] })), button && ((0, jsx_runtime_1.jsx)(Button, Object.assign({ tonal: true, version: 'filled', color: 'primary', size: size, onClick: (button.to || button.link) ? () => button.to ? navigate(button.to) : window.open(button.link, 'blank') : undefined }, button.props, { className: (0, style_react_1.classNames)([
+                    (0, utils_2.staticClassName)('SectionAction', theme) && [
+                        'onesy-SectionTextMedia-button'
+                    ],
+                    (_a = button.props) === null || _a === void 0 ? void 0 : _a.className,
+                    classes.button
+                ]) }, { children: button.text || 'Click here' })))] })));
+    return ((0, jsx_runtime_1.jsx)(Section, Object.assign({ ref: (item) => {
+            if (ref) {
+                if ((0, utils_1.is)('function', ref))
+                    ref(item);
+                else
+                    ref.current = item;
+            }
+            refs.root.current = item;
+        }, size: size, className: (0, style_react_1.classNames)([
+            (0, utils_2.staticClassName)('SectionTextMedia', theme) && [
+                'onesy-SectionTextMedia-root',
+                `onesy-SectionTextMedia-size-${size}`
+            ],
+            className,
+            classes.root
+        ]) }, other, { children: (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 5, direction: {
+                default: ['left', 'right'].includes(mediaPosition) ? 'row' : 'column',
+                1100: 'column'
+            }, align: ['left', 'right'].includes(mediaPosition) ? 'flex-start' : 'center', justify: ['left', 'right'].includes(mediaPosition) ? 'flex-start' : 'center', fullWidth: true }, MainProps, { className: (0, style_react_1.classNames)([
+                (0, utils_2.staticClassName)('SectionTextMedia', theme) && [
+                    'onesy-SectionTextMedia-main'
+                ],
+                MainProps === null || MainProps === void 0 ? void 0 : MainProps.className,
+                classes.main
+            ]) }, { children: [['top', 'left'].includes(mediaPosition) && mediaElement, main, ['bottom', 'right'].includes(mediaPosition) && mediaElement] })) })));
+});
+SectionTextMedia.displayName = 'onesy-SectionTextMedia';
+exports.default = SectionTextMedia;

package/SectionTextMedia/index.d.ts

@@ -0,0 +1 @@
+export { default } from './SectionTextMedia';

package/SectionTextMedia/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var SectionTextMedia_1 = require("./SectionTextMedia");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(SectionTextMedia_1).default; } });

package/SectionTextMedia/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "main": "./index.js",
+  "module": "../esm/SectionTextMedia/index.js",
+  "types": "./index.d.ts"
+}

package/SectionTimeline/SectionTimeline.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ISection } from '../Section/Section';
+import { IPropsAny } from '../types';
+export interface ISectionTimelineItem {
+    title?: string;
+    heading?: string;
+    description?: string;
+}
+export interface ISectionTimeline extends ISection {
+    size?: 'small' | 'regular' | 'large';
+    values?: ISectionTimelineItem[];
+    TimelineProps?: IPropsAny;
+    TimelineItemProps?: IPropsAny;
+    TitleProps?: IPropsAny;
+    HeadingProps?: IPropsAny;
+    DescriptionProps?: IPropsAny;
+    ItemStartProps?: IPropsAny;
+    ItemEndProps?: IPropsAny;
+}
+declare const SectionTimeline: React.FC<ISectionTimeline>;
+export default SectionTimeline;

package/SectionTimeline/SectionTimeline.js

@@ -0,0 +1,100 @@
+"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 Section_1 = __importDefault(require("../Section/Section"));
+const ListItem_1 = __importDefault(require("../ListItem"));
+const Timeline_1 = __importDefault(require("../Timeline"));
+const TimelineItem_1 = __importDefault(require("../TimelineItem"));
+const Type_1 = __importDefault(require("../Type"));
+const utils_2 = require("../utils");
+const useStyle = (0, style_react_1.style)(theme => ({
+    root: {},
+    timeline: {},
+    timelineItem: {
+        '&.onesy-TimelineItem-root': {
+            width: '100%'
+        },
+        '& .onesy-TimelineItem-aside': {
+            width: 'calc(50% - 6px)'
+        }
+    }
+}), { name: 'onesy-SectionTimeline' });
+const SectionTimeline = react_1.default.forwardRef((props_, ref) => {
+    const theme = (0, style_react_1.useOnesyTheme)();
+    const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesySectionTimeline) === 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 ListItem = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.ListItem) || ListItem_1.default; }, [theme]);
+    const Timeline = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Timeline) || Timeline_1.default; }, [theme]);
+    const TimelineItem = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.TimelineItem) || TimelineItem_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 { size = 'regular', values = [], TimelineProps, TimelineItemProps, TitleProps, HeadingProps, DescriptionProps, ItemStartProps, ItemEndProps, className } = props, other = __rest(props, ["size", "values", "TimelineProps", "TimelineItemProps", "TitleProps", "HeadingProps", "DescriptionProps", "ItemStartProps", "ItemEndProps", "className"]);
+    const { classes } = useStyle();
+    const refs = {
+        root: react_1.default.useRef(undefined)
+    };
+    return ((0, jsx_runtime_1.jsx)(Section, Object.assign({ ref: (item) => {
+            if (ref) {
+                if ((0, utils_1.is)('function', ref))
+                    ref(item);
+                else
+                    ref.current = item;
+            }
+            refs.root.current = item;
+        }, className: (0, style_react_1.classNames)([
+            (0, utils_2.staticClassName)('SectionTimeline', theme) && [
+                'onesy-SectionTimeline-root',
+                `onesy-SectionTimeline-size-${size}`
+            ],
+            className,
+            classes.root
+        ]) }, other, { children: (0, jsx_runtime_1.jsx)(Timeline, Object.assign({ fullWidth: true }, TimelineProps, { className: (0, style_react_1.classNames)([
+                (0, utils_2.staticClassName)('SectionTimeline', theme) && [
+                    'onesy-SectionTimeline-timeline'
+                ],
+                TimelineProps === null || TimelineProps === void 0 ? void 0 : TimelineProps.className,
+                classes.timeline
+            ]) }, { children: values === null || values === void 0 ? void 0 : values.map((item, index) => ((0, jsx_runtime_1.jsx)(TimelineItem, Object.assign({ start: (0, utils_1.is)('string', item.title) ? ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3', align: 'right' }, ItemStartProps, { className: (0, style_react_1.classNames)([
+                        (0, utils_2.staticClassName)('SectionTimeline', theme) && [
+                            'onesy-SectionTimeline-item-start'
+                        ],
+                        ItemStartProps === null || ItemStartProps === void 0 ? void 0 : ItemStartProps.className,
+                        classes.start
+                    ]), dangerouslySetInnerHTML: {
+                        __html: (0, utils_1.textToInnerHTML)(item.title)
+                    } }))) : item.title, end: ((0, jsx_runtime_1.jsx)(ListItem, Object.assign({ Component: 'div', primary: (0, utils_1.is)('string', item.heading) ? ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: size === 'large' ? 't1' : size === 'regular' ? 't2' : 't3' }, HeadingProps, { dangerouslySetInnerHTML: {
+                            __html: (0, utils_1.textToInnerHTML)(item.heading)
+                        } }))) : item.heading, secondary: (0, utils_1.is)('string', item.description) ? ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: size === 'large' ? 'b2' : size === 'regular' ? 'b3' : 'b3' }, DescriptionProps, { dangerouslySetInnerHTML: {
+                            __html: (0, utils_1.textToInnerHTML)(item.description)
+                        } }))) : item.description, noBackground: true }, ItemEndProps, { className: (0, style_react_1.classNames)([
+                        (0, utils_2.staticClassName)('SectionTimeline', theme) && [
+                            'onesy-SectionTimeline-item-end'
+                        ],
+                        ItemEndProps === null || ItemEndProps === void 0 ? void 0 : ItemEndProps.className,
+                        classes.end
+                    ]), noPadding: true }))) }, TimelineItemProps, { className: (0, style_react_1.classNames)([
+                    (0, utils_2.staticClassName)('SectionTimeline', theme) && [
+                        'onesy-SectionTimeline-timeline-item'
+                    ],
+                    TimelineItemProps === null || TimelineItemProps === void 0 ? void 0 : TimelineItemProps.className,
+                    classes.timelineItem
+                ]) }), index))) })) })));
+});
+SectionTimeline.displayName = 'onesy-SectionTimeline';
+exports.default = SectionTimeline;

package/SectionTimeline/index.d.ts

@@ -0,0 +1 @@
+export { default } from './SectionTimeline';

package/SectionTimeline/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var SectionTimeline_1 = require("./SectionTimeline");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(SectionTimeline_1).default; } });

package/SectionTimeline/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "main": "./index.js",
+  "module": "../esm/SectionTimeline/index.js",
+  "types": "./index.d.ts"
+}

package/SectionWatch/SectionWatch.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { TPaletteVersion } from '@onesy/style-react';
+import { ISection } from '../Section/Section';
+import { IWatch } from '../Watch/Watch';
+import { ISize } from '../types';
+export interface ISectionWatch extends ISection {
+    tonal?: boolean;
+    version?: 'regular' | 'analog' | 'modern' | 'minimal';
+    size?: ISize;
+    color?: TPaletteVersion;
+    WatchProps?: IWatch;
+}
+declare const Element: React.FC<ISectionWatch>;
+export default Element;

package/SectionWatch/SectionWatch.js

@@ -0,0 +1,56 @@
+"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 Section_1 = __importDefault(require("../Section/Section"));
+const Watch_1 = __importDefault(require("../Watch"));
+const utils_2 = require("../utils");
+const useStyle = (0, style_react_1.style)(theme => ({
+    root: {}
+}), { name: 'onesy-SectionWatch' });
+const Element = react_1.default.forwardRef((props_, ref) => {
+    const theme = (0, style_react_1.useOnesyTheme)();
+    const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesySectionWatch) === 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 Watch = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Watch) || Watch_1.default; }, [theme]);
+    const { version = 'modern', size = 'regular', WatchProps, className } = props, other = __rest(props, ["version", "size", "WatchProps", "className"]);
+    const { classes } = useStyle();
+    const refs = {
+        root: react_1.default.useRef(undefined)
+    };
+    return ((0, jsx_runtime_1.jsx)(Section, Object.assign({ ref: (item) => {
+            if (ref) {
+                if ((0, utils_1.is)('function', ref))
+                    ref(item);
+                else
+                    ref.current = item;
+            }
+            refs.root.current = item;
+        }, padding: 'small', align: 'center', className: (0, style_react_1.classNames)([
+            (0, utils_2.staticClassName)('SectionWatch', theme) && [
+                'onesy-SectionWatch-root',
+                `onesy-SectionWatch-version-${version}`,
+                `onesy-SectionWatch-size-${size}`
+            ],
+            className,
+            classes.root
+        ]) }, other, { children: (0, jsx_runtime_1.jsx)(Watch, Object.assign({ version: version, size: size }, WatchProps)) })));
+});
+Element.displayName = 'onesy-SectionWatch';
+exports.default = Element;

package/SectionWatch/index.d.ts

@@ -0,0 +1 @@
+export { default } from './SectionWatch';

package/SectionWatch/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var SectionWatch_1 = require("./SectionWatch");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(SectionWatch_1).default; } });

package/SectionWatch/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "main": "./index.js",
+  "module": "../esm/SectionWatch/index.js",
+  "types": "./index.d.ts"
+}

package/Select/Select.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { ITextField } from '../TextField/TextField';
+import { IElement, IPropsAny } from '../types';
+export interface ISelect extends ITextField {
+    options?: Array<{
+        name: any;
+        value: any;
+        props?: any;
+    }>;
+    multiple?: boolean;
+    autoWidth?: boolean;
+    getLabel?: (item: any, props: any) => any;
+    chip?: boolean;
+    clear?: boolean;
+    noSelectText?: any;
+    renderValues?: (value: string | string[]) => IElement;
+    renderChip?: (item: any, value: any, props: IPropsAny) => IElement;
+    IconClear?: any;
+    IconDropdown?: any;
+    WrapperProps?: IPropsAny;
+    ChipProps?: IPropsAny;
+    ChiProps?: IPropsAny;
+    ListProps?: IPropsAny;
+    MenuProps?: IPropsAny;
+    IconButtonProps?: IPropsAny;
+    IconProps?: IPropsAny;
+}
+declare const Select: React.FC<ISelect>;
+export default Select;