@dilicorp/ui 0.2.2 → 0.2.4-0.1

package/dist/index.d.ts

@@ -5,6 +5,7 @@ export * from './atoms/container';
 export * from './atoms/icon';
 export * from './atoms/image';
 export * from './atoms/input';
+export * from './atoms/input-mask';
 export * from './atoms/input-datepicker';
 export * from './atoms/label';
 export * from './atoms/link';
@@ -14,8 +15,8 @@ export * from './atoms/separator';
 export * from './atoms/spinner';
 export * from './atoms/typography';
 export * from './atoms/skeleton';
-export * from './atoms/panel/panel';
 export * from './atoms/pluxee-icon/pluxee-icon';
+export * from './atoms/switcher';
 export * from './molecules/alert';
 export * from './molecules/breadcrumb';
 export * from './molecules/card';
@@ -23,6 +24,10 @@ export * from './molecules/dropdown/dropdown';
 export * from './molecules/field';
 export * from './molecules/paginate';
 export * from './molecules/table';
+export * from './molecules/panel/panel';
+export * from './molecules/card-summary/card-summary';
+export * from './molecules/modal/modal';
+export * from './molecules/player-video/player-video';
 export * from './components/form-builder/form-builder';
 export * from './components/side-navigation-bar/side-navigation-bar';
 export * from './components/navbar/navbar';
@@ -34,12 +39,15 @@ export { Accordion } from './components/accordion/accordion';
 export { AccordionItem } from './components/accordion/accordion-item';
 export { AccordionHeader } from './components/accordion/accordion-header';
 export { AccordionBody } from './components/accordion/accordion-body';
-export * from './components/modal/modal';
 export * from './components/layout/layout';
+export { AlertModalProvider } from './components/alert-modal/alert-modal-provider';
+export { useAlertModal } from './components/alert-modal/alert-context-provider';
+export { MultiStep, StepSchema } from './components/multi-step/multi-step';
 export { AlertProvider } from './components/alert-template/alert-provider';
 export { AlertTemplate, AlertTemplateProps } from './components/alert-template/alert-template';
 export { useAlert, withAlert } from 'react-alert';
 export * from './components/page-list/page-list';
+export * from './components/page-list/page-list-header';
 export * from './components/page-list/page-list-filters';
 export * as PageListFilter from './components/page-list/filters';
 export * from './components/page-create/page-create';
@@ -53,4 +61,7 @@ export { default as stringHelper } from './utils/string-helper';
 export { default as uriHelper } from './utils/uri-helper';
 export { default as validationsHelper } from './utils/validations-helper';
 export { default as windowsHelper } from './utils/window-helper';
+export * from './components/layout/pluxee-logo/pluxee-logo';
+export * from './components/layout/pluxee-logo/pluxee-logo-inverted';
+export * from './components/layout/pluxee-logo/pluxee-logo-card';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -6,6 +6,7 @@ export * from './atoms/container';
 export * from './atoms/icon';
 export * from './atoms/image';
 export * from './atoms/input';
+export * from './atoms/input-mask';
 export * from './atoms/input-datepicker';
 export * from './atoms/label';
 export * from './atoms/link';
@@ -15,8 +16,8 @@ export * from './atoms/separator';
 export * from './atoms/spinner';
 export * from './atoms/typography';
 export * from './atoms/skeleton';
-export * from './atoms/panel/panel';
 export * from './atoms/pluxee-icon/pluxee-icon';
+export * from './atoms/switcher';
 // Molecules
 export * from './molecules/alert';
 export * from './molecules/breadcrumb';
@@ -25,6 +26,10 @@ export * from './molecules/dropdown/dropdown';
 export * from './molecules/field';
 export * from './molecules/paginate';
 export * from './molecules/table';
+export * from './molecules/panel/panel';
+export * from './molecules/card-summary/card-summary';
+export * from './molecules/modal/modal';
+export * from './molecules/player-video/player-video';
 // Components
 export * from './components/form-builder/form-builder';
 export * from './components/side-navigation-bar/side-navigation-bar';
@@ -37,12 +42,15 @@ export { Accordion } from './components/accordion/accordion';
 export { AccordionItem } from './components/accordion/accordion-item';
 export { AccordionHeader } from './components/accordion/accordion-header';
 export { AccordionBody } from './components/accordion/accordion-body';
-export * from './components/modal/modal';
 export * from './components/layout/layout';
+export { AlertModalProvider } from './components/alert-modal/alert-modal-provider';
+export { useAlertModal } from './components/alert-modal/alert-context-provider';
+export { MultiStep } from './components/multi-step/multi-step';
 export { AlertProvider } from './components/alert-template/alert-provider';
 export { AlertTemplate } from './components/alert-template/alert-template';
 export { useAlert, withAlert } from 'react-alert';
 export * from './components/page-list/page-list';
+export * from './components/page-list/page-list-header';
 export * from './components/page-list/page-list-filters';
 import * as PageListFilter_1 from './components/page-list/filters';
 export { PageListFilter_1 as PageListFilter };
@@ -58,3 +66,7 @@ export { default as stringHelper } from './utils/string-helper';
 export { default as uriHelper } from './utils/uri-helper';
 export { default as validationsHelper } from './utils/validations-helper';
 export { default as windowsHelper } from './utils/window-helper';
+// Images
+export * from './components/layout/pluxee-logo/pluxee-logo';
+export * from './components/layout/pluxee-logo/pluxee-logo-inverted';
+export * from './components/layout/pluxee-logo/pluxee-logo-card';

package/dist/molecules/card-summary/card-summary-body.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+declare type CardSummaryBodyProps = {
+    label: string | ReactNode;
+    labelClass?: string;
+    href?: string;
+};
+export declare const CardSummaryBody: {
+    ({ label, href, labelClass }: CardSummaryBodyProps): JSX.Element;
+    displayName: string;
+};
+export {};
+//# sourceMappingURL=card-summary-body.d.ts.map

package/dist/molecules/card-summary/card-summary-body.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+export const CardSummaryBody = ({ label, href, labelClass = 'fs-2' }) => {
+    return (React.createElement("div", { className: "dash-body" }, href
+        ? (React.createElement(Link, { className: "normal-link", to: href },
+            React.createElement("div", { className: `value ${labelClass}` }, label)))
+        : (React.createElement("div", { className: `value ${labelClass}` }, label))));
+};
+CardSummaryBody.displayName = 'CardSummaryBody';

package/dist/molecules/card-summary/card-summary-container.d.ts

@@ -0,0 +1,14 @@
+import { HtmlHTMLAttributes, ReactNode } from 'react';
+import { SkeletonProps } from 'react-loading-skeleton';
+declare type CardSummaryContainerProps = {
+    children: ReactNode;
+    loading?: boolean;
+    skeleton?: SkeletonProps;
+    color?: 'primary' | 'primary-contrast' | 'success' | 'default';
+} & HtmlHTMLAttributes<HTMLDivElement>;
+export declare const CardSummaryContainer: {
+    ({ children, className, loading, color, skeleton }: CardSummaryContainerProps): JSX.Element;
+    displayName: string;
+};
+export {};
+//# sourceMappingURL=card-summary-container.d.ts.map

package/dist/molecules/card-summary/card-summary-container.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Skeleton } from '../../atoms/skeleton';
+import classNames from 'classnames';
+export const CardSummaryContainer = ({ children, className, loading, color = 'primary-contrast', skeleton = {
+    height: 188,
+    count: 1,
+    duration: 0.9,
+    containerClassName: 'col',
+    style: {
+        marginTop: 32, marginBottom: '2rem'
+    }
+} }) => {
+    if (loading) {
+        return React.createElement(Skeleton, { ...skeleton });
+    }
+    const classes = classNames(`dashboard-card-item ${color}`, className);
+    return (React.createElement("div", { className: classes }, children));
+};
+CardSummaryContainer.displayName = 'CardSummaryContainer';

package/dist/molecules/card-summary/card-summary-footer.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+declare type CardSummaryFooterProps = {
+    label: string;
+    href?: string;
+    button?: {
+        label: string;
+        href: string;
+    };
+};
+export declare const CardSummaryFooter: {
+    ({ label, href, button }: CardSummaryFooterProps): JSX.Element;
+    displayName: string;
+};
+export {};
+//# sourceMappingURL=card-summary-footer.d.ts.map

package/dist/molecules/card-summary/card-summary-footer.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { Button } from '../../atoms/button';
+export const CardSummaryFooter = ({ label, href, button }) => {
+    return (React.createElement("div", { className: "dash-footer" },
+        href
+            ? (React.createElement(Link, { className: "normal-link", to: href }, label))
+            : React.createElement(React.Fragment, null, label),
+        button && React.createElement(Button, { small: true, href: button.href }, button.label)));
+};
+CardSummaryFooter.displayName = 'CardSummaryFooter';

package/dist/molecules/card-summary/card-summary-header.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+declare type CardSummaryHeaderProps = {
+    label: string;
+    href?: string;
+    className?: string;
+};
+export declare const CardSummaryHeader: {
+    ({ label, href, className }: CardSummaryHeaderProps): JSX.Element;
+    displayName: string;
+};
+export {};
+//# sourceMappingURL=card-summary-header.d.ts.map

package/dist/molecules/card-summary/card-summary-header.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import classNames from 'classnames';
+export const CardSummaryHeader = ({ label, href, className }) => {
+    const classes = classNames('dash-title', className);
+    return (React.createElement("div", { className: "dash-header" }, href
+        ? (React.createElement(Link, { className: "normal-link", to: href },
+            React.createElement("div", { className: classes }, label)))
+        : (React.createElement("div", { className: classes }, label))));
+};
+CardSummaryHeader.displayName = 'CardSummaryHeader';

package/dist/molecules/card-summary/card-summary.d.ts

@@ -0,0 +1,40 @@
+/// <reference types="react" />
+export declare const CardSummary: {
+    Container: {
+        ({ children, className, loading, color, skeleton }: {
+            children: import("react").ReactNode;
+            loading?: boolean | undefined;
+            skeleton?: import("react-loading-skeleton").SkeletonProps | undefined;
+            color?: "primary" | "success" | "default" | "primary-contrast" | undefined;
+        } & import("react").HtmlHTMLAttributes<HTMLDivElement>): JSX.Element;
+        displayName: string;
+    };
+    Header: {
+        ({ label, href, className }: {
+            label: string;
+            href?: string | undefined;
+            className?: string | undefined;
+        }): JSX.Element;
+        displayName: string;
+    };
+    Body: {
+        ({ label, href, labelClass }: {
+            label: import("react").ReactNode;
+            labelClass?: string | undefined;
+            href?: string | undefined;
+        }): JSX.Element;
+        displayName: string;
+    };
+    Footer: {
+        ({ label, href, button }: {
+            label: string;
+            href?: string | undefined;
+            button?: {
+                label: string;
+                href: string;
+            } | undefined;
+        }): JSX.Element;
+        displayName: string;
+    };
+};
+//# sourceMappingURL=card-summary.d.ts.map

package/dist/molecules/card-summary/card-summary.js

@@ -0,0 +1,10 @@
+import { CardSummaryBody } from './card-summary-body';
+import { CardSummaryContainer } from './card-summary-container';
+import { CardSummaryFooter } from './card-summary-footer';
+import { CardSummaryHeader } from './card-summary-header';
+export const CardSummary = {
+    Container: CardSummaryContainer,
+    Header: CardSummaryHeader,
+    Body: CardSummaryBody,
+    Footer: CardSummaryFooter
+};

package/dist/molecules/column-order/column-order.d.ts

@@ -5,7 +5,9 @@ declare type ColumnOrderProps = {
     order: 'asc' | 'desc';
     active: boolean;
     onChange: (id: string, type: string) => void;
+    onOrderClick?: () => void;
+    disabled: boolean;
 };
-export declare const ColumnOrder: ({ id, label, order, active, onChange }: ColumnOrderProps) => JSX.Element;
+export declare const ColumnOrder: ({ id, label, order, active, onChange, disabled, onOrderClick }: ColumnOrderProps) => JSX.Element;
 export {};
 //# sourceMappingURL=column-order.d.ts.map

package/dist/molecules/column-order/column-order.js

@@ -1,8 +1,11 @@
 import React from 'react';
 import { Icon } from '../../atoms/icon';
-export const ColumnOrder = ({ id, label, order, active, onChange }) => {
+export const ColumnOrder = ({ id, label, order, active, onChange, disabled, onOrderClick }) => {
     return (React.createElement("button", { onClick: () => {
+            if (disabled)
+                return;
             onChange(id, order === 'asc' ? 'desc' : 'asc');
+            onOrderClick && onOrderClick();
         }, type: "button", className: `table-column-order ${active ? ' active' : ''}` },
         label,
         order === 'asc' ? React.createElement(Icon, { icon: "fa-sort-amount-up", className: "ms-2" }) : React.createElement(Icon, { icon: "fa-sort-amount-down", className: "ms-2" })));

package/dist/molecules/dropdown/dropdown-item.js

@@ -1,14 +1,3 @@
-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;
-};
 import React from 'react';
 import { Link } from '../../atoms/link';
 import classNames from 'classnames';
@@ -17,18 +6,18 @@ export const DropdownItem = (props) => {
         return React.createElement(React.Fragment, null, props.element);
     if (props.separator)
         return React.createElement("div", { className: "dropdown-divider" });
-    const _a = props, { uri, label, onClick, items, disabled = false } = _a, attrs = __rest(_a, ["uri", "label", "onClick", "items", "disabled"]);
+    const { uri, label, onClick, items, disabled = false, ...attrs } = props;
     if ((items === null || items === void 0 ? void 0 : items.length) && (items === null || items === void 0 ? void 0 : items.length) > 0) {
-        return (React.createElement("div", Object.assign({}, attrs, { className: "dropdown-item dropdown-items" }),
+        return (React.createElement("div", { ...attrs, className: "dropdown-item dropdown-items" },
             label,
-            React.createElement("div", { className: "dropdown-items-droplist" }, items.map((item, index) => (React.createElement(DropdownItem, Object.assign({ key: `${label}--${index}` }, item)))))));
+            React.createElement("div", { className: "dropdown-items-droplist" }, items.map((item, index) => (React.createElement(DropdownItem, { key: `${label}--${index}`, ...item }))))));
     }
     const classnames = classNames('dropdown-item', disabled && 'disabled');
     if (disabled) {
-        return React.createElement("div", Object.assign({}, attrs, { className: classnames }), label);
+        return React.createElement("div", { ...attrs, className: classnames }, label);
     }
     if (onClick) {
-        return (React.createElement("div", Object.assign({}, attrs, { className: classnames, onClick: onClick }), label));
+        return (React.createElement("div", { ...attrs, className: classnames, onClick: onClick }, label));
     }
-    return React.createElement(Link, Object.assign({}, attrs, { href: uri, className: classnames }), label);
+    return React.createElement(Link, { ...attrs, href: uri, className: classnames }, label);
 };

package/dist/molecules/dropdown/dropdown.js

@@ -35,12 +35,15 @@ export const Dropdown = (props) => {
             React.createElement("span", null, label),
             React.createElement(Icon, { icon: "fa-chevron-down", pluxee: true })),
         React.createElement("div", { className: classesDropdown }, items.map((item, index) => {
-            const _item = Object.assign(Object.assign({}, item), ('onClick' in item && {
-                onClick: () => {
-                    setToggle(false);
-                    item.onClick();
-                }
-            }));
-            return (React.createElement(DropdownItem, Object.assign({ key: `dropdown-item-${index}` }, _item)));
+            const _item = {
+                ...item,
+                ...('onClick' in item && {
+                    onClick: () => {
+                        setToggle(false);
+                        item.onClick();
+                    }
+                })
+            };
+            return (React.createElement(DropdownItem, { key: `dropdown-item-${index}`, ..._item }));
         }))));
 };

package/dist/molecules/modal/modal.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { AlertRef } from '../../molecules/alert';
+export declare type ModalProps = {
+    children: React.ReactNode;
+    title?: string;
+    closeFn?: () => void;
+    className?: string;
+    innerRef?: React.ForwardedRef<AlertRef>;
+};
+export declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<AlertRef>>;
+//# sourceMappingURL=modal.d.ts.map

package/dist/molecules/modal/modal.js

@@ -0,0 +1,15 @@
+import React, { forwardRef } from 'react';
+import { Button } from '../../atoms/button';
+import { Alert } from '../../molecules/alert';
+import classNames from 'classnames';
+export const Modal = forwardRef((props, ref) => {
+    const { children, title, closeFn, className, innerRef } = props;
+    const classes = classNames(className !== null && className !== void 0 ? className : 'alert-small');
+    return (React.createElement(Alert, { ref: ref !== null && ref !== void 0 ? ref : innerRef, className: classes },
+        React.createElement("div", { className: "modal modal-sm" },
+            React.createElement("div", { className: "modal-header" },
+                React.createElement("div", { className: "title" }, title),
+                React.createElement(Button, { small: true, onClick: closeFn }, "\u00D7")),
+            React.createElement("div", { className: "modal-body" }, children))));
+});
+Modal.displayName = 'Modal';

package/dist/molecules/paginate.js

@@ -33,6 +33,6 @@ export const Paginate = (props) => {
         }
     };
     return (React.createElement("div", { className: "box-paginate" },
-        React.createElement(ReactPagination, Object.assign({}, config, { activePage: activePage, itemsCountPerPage: perPage, totalItemsCount: totalItems, onChange: handleChange })),
+        React.createElement(ReactPagination, { ...config, activePage: activePage, itemsCountPerPage: perPage, totalItemsCount: totalItems, onChange: handleChange }),
         React.createElement("div", { className: "extra-paginate-info" }, translate.replace(/%(\d+)/g, (_, n) => [`${String(from || 0)} - ${String(to || 0)}`, String(totalItems)][+n - 1]))));
 };

package/dist/molecules/panel/panel-container.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+declare type PanelContainerProps = {
+    children: React.ReactNode;
+    type?: 'row' | 'flex';
+    containerClassName?: string;
+} & React.HTMLAttributes<HTMLDivElement>;
+export declare const PanelContainer: {
+    ({ children, className, type, containerClassName }: PanelContainerProps): JSX.Element;
+    displayName: string;
+};
+export {};
+//# sourceMappingURL=panel-container.d.ts.map

package/dist/molecules/panel/panel-container.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import classNames from 'classnames';
+export const PanelContainer = ({ children, className, type = 'row', containerClassName }) => {
+    const classes = classNames(className, type === 'row' ? 'row' : 'd-flex');
+    const classesContainer = classNames(containerClassName, 'panel-container');
+    return (React.createElement("div", { className: classesContainer },
+        React.createElement("div", { className: classes }, children)));
+};
+PanelContainer.displayName = 'PanelContainer';

package/dist/molecules/panel/panel-field.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+declare type PanelFieldProps = {
+    label: string;
+    value?: React.ReactNode;
+    forceShow?: boolean;
+};
+export declare const PanelField: {
+    ({ label, value, forceShow }: PanelFieldProps): JSX.Element | null;
+    displayName: string;
+};
+export {};
+//# sourceMappingURL=panel-field.d.ts.map

package/dist/molecules/panel/panel-field.js

@@ -0,0 +1,12 @@
+import React from 'react';
+export const PanelField = ({ label, value, forceShow = true }) => {
+    if (!forceShow && !value)
+        return null;
+    return (React.createElement("div", { className: "panel-field" },
+        label ? React.createElement(React.Fragment, null,
+            label,
+            ":") : '',
+        " ",
+        React.createElement("strong", null, value)));
+};
+PanelField.displayName = 'PanelField';

package/dist/molecules/panel/panel-group.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ColProps } from '../../atoms/col';
+declare type Props = {
+    label?: string;
+    value?: React.ReactNode | string;
+    big?: boolean;
+    upper?: boolean;
+} & ColProps;
+export declare const PanelGroup: {
+    ({ value, label, size, big, upper }: Props): JSX.Element;
+    displayName: string;
+};
+export {};
+//# sourceMappingURL=panel-group.d.ts.map

package/dist/molecules/panel/panel-group.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Col } from '../../atoms/col';
+export const PanelGroup = ({ value, label, size = [12, 6], big = false, upper = true }) => {
+    return (React.createElement(Col, { size: size },
+        React.createElement("div", { className: "panel-group" },
+            React.createElement("label", null, label),
+            React.createElement("div", { className: `${upper ? ' upper' : ''} text${big ? ' big' : ''}` }, value || '-'))));
+};
+PanelGroup.displayName = 'PanelGroup';

package/dist/molecules/panel/panel.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+export declare const Panel: {
+    Container: {
+        ({ children, className, type, containerClassName }: {
+            children: import("react").ReactNode;
+            type?: "row" | "flex" | undefined;
+            containerClassName?: string | undefined;
+        } & import("react").HTMLAttributes<HTMLDivElement>): JSX.Element;
+        displayName: string;
+    };
+    Group: {
+        ({ value, label, size, big, upper }: {
+            label?: string | undefined;
+            value?: import("react").ReactNode;
+            big?: boolean | undefined;
+            upper?: boolean | undefined;
+        } & {
+            size?: boolean | import("../..").columns | import("../..").columns[] | undefined;
+        } & import("react").HTMLAttributes<HTMLDivElement>): JSX.Element;
+        displayName: string;
+    };
+    Field: {
+        ({ label, value, forceShow }: {
+            label: string;
+            value?: import("react").ReactNode;
+            forceShow?: boolean | undefined;
+        }): JSX.Element | null;
+        displayName: string;
+    };
+};
+//# sourceMappingURL=panel.d.ts.map

package/dist/molecules/panel/panel.js

@@ -0,0 +1,8 @@
+import { PanelContainer } from './panel-container';
+import { PanelField } from './panel-field';
+import { PanelGroup } from './panel-group';
+export const Panel = {
+    Container: PanelContainer,
+    Group: PanelGroup,
+    Field: PanelField
+};

package/dist/molecules/player-video/modal-video.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { AlertRef } from '../alert';
+declare type SourceType = {
+    src: string;
+    type: 'mp4' | 'ogg' | 'webm';
+};
+declare type SubtitleType = {
+    src: string;
+    lang: string;
+    label: string;
+};
+declare type ModalVideoProps = {
+    closeFn?: () => void;
+    className?: string;
+    innerRef?: React.ForwardedRef<AlertRef>;
+    sources: SourceType[];
+    subtitles?: SubtitleType[];
+    autoplay?: boolean;
+    muted?: boolean;
+    controls?: boolean;
+};
+export declare const ModalVideo: React.ForwardRefExoticComponent<ModalVideoProps & React.RefAttributes<AlertRef>>;
+export {};
+//# sourceMappingURL=modal-video.d.ts.map

package/dist/molecules/player-video/modal-video.js

@@ -0,0 +1,18 @@
+import React, { forwardRef } from 'react';
+import { Alert } from '../alert';
+import classNames from 'classnames';
+import { Icon } from '../../atoms/icon';
+export const ModalVideo = forwardRef((props, ref) => {
+    const { closeFn, className, innerRef, sources, subtitles, autoplay = true, muted = true, controls = true } = props;
+    const classes = classNames(className);
+    return (React.createElement(Alert, { ref: ref !== null && ref !== void 0 ? ref : innerRef, className: classes },
+        React.createElement("div", { className: "modal" },
+            React.createElement("div", { className: "d-flex justify-content-end container-player-close" },
+                React.createElement("button", { className: "button-player-close", onClick: closeFn },
+                    React.createElement(Icon, { pluxee: true, icon: "fa-delete", size: "lg" }))),
+            React.createElement("div", { className: "modal-body" },
+                React.createElement("video", { className: "player-video-src", controls: controls, autoPlay: autoplay, muted: muted },
+                    sources && sources.map(item => React.createElement("source", { key: item.src, src: item.src, type: `video/${item.type}` })),
+                    subtitles && subtitles.map(item => React.createElement("track", { key: item.src, src: item.src, kind: "subtitles", srcLang: item.lang, label: item.label })))))));
+});
+ModalVideo.displayName = 'ModalVideo';

package/dist/molecules/player-video/player-video.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+export * from './thumb-video';
+export * from './modal-video';
+export declare const PlayerVideo: {
+    Modal: import("react").ForwardRefExoticComponent<{
+        closeFn?: (() => void) | undefined;
+        className?: string | undefined;
+        innerRef?: import("react").ForwardedRef<import("../alert").AlertRef> | undefined;
+        sources: {
+            src: string;
+            type: "mp4" | "ogg" | "webm";
+        }[];
+        subtitles?: {
+            src: string;
+            lang: string;
+            label: string;
+        }[] | undefined;
+        autoplay?: boolean | undefined;
+        muted?: boolean | undefined;
+        controls?: boolean | undefined;
+    } & import("react").RefAttributes<import("../alert").AlertRef>>;
+    Thumb: ({ thumbSrc, width, height, className, onClick, children }: {
+        thumbSrc: string;
+        onClick?: (() => void) | undefined;
+        width?: string | number | undefined;
+        height?: string | number | undefined;
+        className?: string | undefined;
+        children?: import("react").ReactNode;
+    }) => JSX.Element;
+};
+//# sourceMappingURL=player-video.d.ts.map

package/dist/molecules/player-video/player-video.js

@@ -0,0 +1,8 @@
+import { ModalVideo } from './modal-video';
+import { ThumbVideo } from './thumb-video';
+export * from './thumb-video';
+export * from './modal-video';
+export const PlayerVideo = {
+    Modal: ModalVideo,
+    Thumb: ThumbVideo
+};

package/dist/molecules/player-video/thumb-video.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+declare type ThumbVideoProps = {
+    thumbSrc: string;
+    onClick?: () => void;
+    width?: string | number;
+    height?: string | number;
+    className?: string;
+    children?: React.ReactNode;
+};
+export declare const ThumbVideo: ({ thumbSrc, width, height, className, onClick, children }: ThumbVideoProps) => JSX.Element;
+export {};
+//# sourceMappingURL=thumb-video.d.ts.map

package/dist/molecules/player-video/thumb-video.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import classNames from 'classnames';
+import { Icon } from '../../atoms/icon';
+export const ThumbVideo = ({ thumbSrc, width = 250, height = 'auto', className, onClick, children }) => {
+    const classes = classNames(className, 'btn-thumb');
+    return (React.createElement(React.Fragment, null,
+        React.createElement("button", { className: classes, onClick: onClick },
+            React.createElement(Icon, { icon: "fa-play", pluxee: true, size: "lg" }),
+            React.createElement("img", { className: "img-thumb", src: thumbSrc, width: width, height: height })),
+        children));
+};