@macive/ui 0.0.1 → 0.0.2

package/dist/src/components/TopBar/components/SearchField/SearchField.js

@@ -0,0 +1,61 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Icons_1 = require("../../../Icons");
+const css_1 = require("../../../../utilities/css");
+const i18n_1 = require("../../../../utilities/i18n");
+const unique_id_1 = require("../../../../utilities/unique-id");
+const Icon_1 = require("../../../Icon");
+const Text_1 = require("../../../Text");
+const SearchField_classnames_1 = __importDefault(require("./SearchField.classnames"));
+function SearchField({ value, focused, active, placeholder, onChange, onFocus, onBlur, onCancel, showFocusBorder, }) {
+    const i18n = (0, i18n_1.useI18n)();
+    const [forceActive, setForceActive] = (0, react_1.useState)(false);
+    const input = (0, react_1.useRef)(null);
+    const searchId = (0, unique_id_1.useUniqueId)('SearchField');
+    const handleChange = (0, react_1.useCallback)(({ currentTarget }) => {
+        onChange(currentTarget.value);
+    }, [onChange]);
+    const handleFocus = (0, react_1.useCallback)(() => onFocus && onFocus(), [onFocus]);
+    const handleBlur = (0, react_1.useCallback)(() => onBlur && onBlur(), [onBlur]);
+    const handleClear = (0, react_1.useCallback)(() => {
+        onCancel && onCancel();
+        if (!input.current) {
+            return;
+        }
+        input.current.value = '';
+        onChange('');
+        input.current.focus();
+    }, [onCancel, onChange]);
+    (0, react_1.useEffect)(() => {
+        if (!input.current) {
+            return;
+        }
+        if (focused) {
+            input.current.focus();
+        }
+        else {
+            input.current.blur();
+        }
+    }, [focused]);
+    const clearMarkup = value !== '' && ((0, jsx_runtime_1.jsx)("button", { type: 'button', "aria-label": i18n.translate('Polaris.TopBar.SearchField.clearButtonLabel'), className: SearchField_classnames_1.default.Clear, onClick: handleClear, onBlur: () => {
+            setForceActive(false);
+            handleClear();
+        }, onFocus: () => {
+            handleFocus();
+            setForceActive(true);
+        }, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaCloseCircle }) }));
+    const className = (0, css_1.classNames)(SearchField_classnames_1.default.SearchField, (focused || active || forceActive) && SearchField_classnames_1.default.focused);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: className, onFocus: handleFocus, onBlur: handleBlur, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { as: 'span', visuallyHidden: true, children: (0, jsx_runtime_1.jsx)("label", { htmlFor: searchId, children: i18n.translate('Polaris.TopBar.SearchField.search') }) }), (0, jsx_runtime_1.jsx)("input", { id: searchId, className: SearchField_classnames_1.default.Input, placeholder: placeholder, type: 'search', autoCapitalize: 'off', autoComplete: 'off', autoCorrect: 'off', ref: input, value: value, onChange: handleChange, onKeyDown: preventDefault }), (0, jsx_runtime_1.jsx)("span", { className: SearchField_classnames_1.default.Icon, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaSearch }) }), clearMarkup, (0, jsx_runtime_1.jsx)("div", { className: (0, css_1.classNames)(SearchField_classnames_1.default.Backdrop, showFocusBorder && SearchField_classnames_1.default.BackdropShowFocusBorder) })] }));
+}
+exports.SearchField = SearchField;
+function preventDefault(event) {
+    if (event.key === 'Enter') {
+        event.preventDefault();
+    }
+}

package/dist/src/components/TopBar/components/SearchField/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./SearchField"), exports);

package/dist/src/components/TopBar/components/UserMenu/UserMenu.classnames.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const UserMenuClassnames = {
+    "Details": "UserMenu-Details"
+};
+exports.default = UserMenuClassnames;

package/dist/src/components/TopBar/components/UserMenu/UserMenu.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UserMenu = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Avatar_1 = require("../../../Avatar");
+const MessageIndicator_1 = require("../../../MessageIndicator");
+const Text_1 = require("../../../Text");
+const Menu_1 = require("../Menu");
+const UserMenu_classnames_1 = __importDefault(require("./UserMenu.classnames"));
+function UserMenu({ name, detail, avatar, initials, actions, message, onToggle, open, accessibilityLabel, customActivator, customWidth, }) {
+    const showIndicator = Boolean(message);
+    const activatorContentMarkup = customActivator ? (customActivator) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("span", { className: UserMenu_classnames_1.default.Details, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { as: 'p', alignment: 'start', fontWeight: 'medium', truncate: true, children: name }), (0, jsx_runtime_1.jsx)(Text_1.Text, { as: 'p', variant: 'bodySm', alignment: 'start', color: 'subdued', truncate: true, children: detail })] }), (0, jsx_runtime_1.jsx)(MessageIndicator_1.MessageIndicator, { active: showIndicator, children: (0, jsx_runtime_1.jsx)(Avatar_1.Avatar, { shape: 'square', size: 'small', initials: initials && initials.replace(' ', ''), source: avatar }) })] }));
+    return ((0, jsx_runtime_1.jsx)(Menu_1.Menu, { activatorContent: activatorContentMarkup, open: open, onOpen: onToggle, onClose: onToggle, actions: actions, message: message, accessibilityLabel: accessibilityLabel, customWidth: customWidth }));
+}
+exports.UserMenu = UserMenu;

package/dist/src/components/TopBar/components/UserMenu/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./UserMenu"), exports);

package/dist/src/components/TopBar/components/index.js

@@ -0,0 +1,21 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Search"), exports);
+__exportStar(require("./SearchField"), exports);
+__exportStar(require("./SearchDismissOverlay"), exports);
+__exportStar(require("./UserMenu"), exports);
+__exportStar(require("./Menu"), exports);

package/dist/src/components/TopBar/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./TopBar"), exports);

package/dist/src/components/TrapFocus/TrapFocus.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TrapFocus = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const typos_1 = require("../../typos");
+// eslint-disable-next-line import/no-deprecated
+const focus_1 = require("../../utilities/focus");
+const focus_manager_1 = require("../../utilities/focus-manager");
+const EventListener_1 = require("../EventListener");
+const Focus_1 = require("../Focus");
+const KeypressListener_1 = require("../KeypressListener");
+const shared_1 = require("../shared");
+function TrapFocus({ trapping = true, children }) {
+    const { canSafelyFocus } = (0, focus_manager_1.useFocusManager)({ trapping });
+    const focusTrapWrapper = (0, react_1.useRef)(null);
+    const [disableFocus, setDisableFocus] = (0, react_1.useState)(true);
+    (0, react_1.useEffect)(() => {
+        const disable = canSafelyFocus &&
+            !(focusTrapWrapper.current && focusTrapWrapper.current.contains(document.activeElement))
+            ? !trapping
+            : true;
+        setDisableFocus(disable);
+    }, [canSafelyFocus, trapping]);
+    const handleFocusIn = (event) => {
+        const containerContentsHaveFocus = focusTrapWrapper.current && focusTrapWrapper.current.contains(document.activeElement);
+        if (trapping === false ||
+            !focusTrapWrapper.current ||
+            containerContentsHaveFocus ||
+            (event.target instanceof Element && event.target.matches(`${shared_1.portal.selector} *`))) {
+            return;
+        }
+        if (canSafelyFocus &&
+            event.target instanceof HTMLElement &&
+            focusTrapWrapper.current !== event.target &&
+            !focusTrapWrapper.current.contains(event.target)) {
+            (0, focus_1.focusFirstFocusableNode)(focusTrapWrapper.current);
+        }
+    };
+    const handleTab = (event) => {
+        if (trapping === false || !focusTrapWrapper.current) {
+            return;
+        }
+        const firstFocusableNode = (0, focus_1.findFirstKeyboardFocusableNode)(focusTrapWrapper.current);
+        const lastFocusableNode = (0, focus_1.findLastKeyboardFocusableNode)(focusTrapWrapper.current);
+        if (event.target === lastFocusableNode && !event.shiftKey) {
+            event.preventDefault();
+            (0, focus_1.focusFirstKeyboardFocusableNode)(focusTrapWrapper.current);
+        }
+        if (event.target === firstFocusableNode && event.shiftKey) {
+            event.preventDefault();
+            (0, focus_1.focusLastKeyboardFocusableNode)(focusTrapWrapper.current);
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(Focus_1.Focus, { disabled: disableFocus, root: focusTrapWrapper.current, children: (0, jsx_runtime_1.jsxs)("div", { ref: focusTrapWrapper, children: [(0, jsx_runtime_1.jsx)(EventListener_1.EventListener, { event: 'focusin', handler: handleFocusIn }), (0, jsx_runtime_1.jsx)(KeypressListener_1.KeypressListener, { keyCode: typos_1.Key.Tab, keyEvent: 'keydown', handler: handleTab }), children] }) }));
+}
+exports.TrapFocus = TrapFocus;

package/dist/src/components/TrapFocus/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./TrapFocus"), exports);

package/dist/src/components/Truncate/Truncate.classnames.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const TruncateClassnames = {
+    "Truncate": "Truncate-Truncate"
+};
+exports.default = TruncateClassnames;

package/dist/src/components/Truncate/Truncate.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Truncate = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Truncate_styles_1 = __importDefault(require("./Truncate.styles"));
+function Truncate({ children }) {
+    return (0, jsx_runtime_1.jsx)("span", { className: Truncate_styles_1.default.Truncate, children: children });
+}
+exports.Truncate = Truncate;

package/dist/src/components/Truncate/Truncate.styles.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const styles = {
+    Truncate: ' block overflow-hidden whitespace-nowrap ellipsis',
+};
+exports.default = styles;

package/dist/src/components/Truncate/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Truncate"), exports);

package/dist/src/components/UnstyledButton/UnstyledButton.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UnstyledButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const focus_1 = require("../../utilities/focus");
+const use_disable_interaction_1 = require("../../utilities/use-disable-interaction");
+const UnstyledLink_1 = require("../UnstyledLink");
+function UnstyledButton({ id, children, className, url, external, target, download, submit, disabled, loading, pressed, accessibilityLabel, role, ariaControls, ariaExpanded, ariaDescribedBy, ariaChecked, onClick, onFocus, onBlur, onKeyDown, onKeyPress, onKeyUp, onMouseEnter, onTouchStart, ...rest }) {
+    let buttonMarkup;
+    const commonProps = {
+        id,
+        className,
+        'aria-label': accessibilityLabel,
+    };
+    const interactiveProps = {
+        ...commonProps,
+        role,
+        onClick,
+        onFocus,
+        onBlur,
+        onMouseUp: focus_1.handleMouseUpByBlurring,
+        onMouseEnter,
+        onTouchStart,
+    };
+    const handleClick = (0, use_disable_interaction_1.useDisableClick)(disabled, onClick);
+    if (url) {
+        buttonMarkup = disabled ? (
+        // Render an `<a>` so toggling disabled/enabled state changes only the
+        // `href` attribute instead of replacing the whole element.
+        (0, jsx_runtime_1.jsx)("a", { ...commonProps, children: children })) : ((0, jsx_runtime_1.jsx)(UnstyledLink_1.UnstyledLink, { ...interactiveProps, url: url, external: external, target: target, download: download, ...rest, children: children }));
+    }
+    else {
+        buttonMarkup = ((0, jsx_runtime_1.jsx)("button", { ...interactiveProps, "aria-disabled": disabled, type: submit ? 'submit' : 'button', "aria-busy": loading ? true : undefined, "aria-controls": ariaControls, "aria-expanded": ariaExpanded, "aria-describedby": ariaDescribedBy, "aria-checked": ariaChecked, "aria-pressed": pressed, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onKeyPress: onKeyPress, onClick: handleClick, tabIndex: disabled ? -1 : undefined, ...rest, children: children }));
+    }
+    return buttonMarkup;
+}
+exports.UnstyledButton = UnstyledButton;

package/dist/src/components/UnstyledButton/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./utils"), exports);
+__exportStar(require("./UnstyledButton"), exports);

package/dist/src/components/UnstyledButton/utils.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.unstyledButtonFrom = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const UnstyledButton_1 = require("./UnstyledButton");
+function unstyledButtonFrom({ content, onAction, ...action }, overrides, key) {
+    return ((0, jsx_runtime_1.jsx)(UnstyledButton_1.UnstyledButton, { onClick: onAction, ...action, ...overrides, children: content }, key));
+}
+exports.unstyledButtonFrom = unstyledButtonFrom;

package/dist/src/components/UnstyledLink/UnstyledLink.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UnstyledLink = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const link_1 = require("../../utilities/link");
+const shared_1 = require("../shared");
+// Wrapping forwardRef in a memo gets a name set since
+// https://github.com/facebook/react/issues/16722
+// but eslint-plugin-react doesn't know that just yet
+// eslint-disable-next-line react/display-name
+exports.UnstyledLink = (0, react_1.memo)((0, react_1.forwardRef)(function UnstyledLink(props, _ref) {
+    const LinkComponent = (0, link_1.useLink)();
+    if (LinkComponent) {
+        return (0, jsx_runtime_1.jsx)(LinkComponent, { ...shared_1.unstyled.props, ...props });
+    }
+    const { external, url, target: targetProp, ...rest } = props;
+    let target;
+    if (external) {
+        target = '_blank';
+    }
+    else {
+        target = targetProp !== null && targetProp !== void 0 ? targetProp : undefined;
+    }
+    const rel = target === '_blank' ? 'noopener noreferrer' : undefined;
+    return (0, jsx_runtime_1.jsx)("a", { target: target, ...rest, href: url, rel: rel, ...shared_1.unstyled.props });
+}));

package/dist/src/components/UnstyledLink/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./UnstyledLink"), exports);

package/dist/src/components/Upload/components/FileViewer/FileViewer.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FileViewer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable @next/next/no-img-element */
+const react_1 = require("react");
+const utils_1 = require("../../../../utils");
+const Image_1 = require("../../../Image");
+const VideoPlayer_1 = require("./VideoPlayer");
+const FileViewer = (props) => {
+    const [imageSource, setImageSource] = (0, react_1.useState)();
+    const { file, disabled, previewable, legacyImage, unAcceptedType, className } = props;
+    const { type: fileType } = file || {};
+    if (fileType === 'image') {
+        const handleError = () => {
+            const fallbackImageSource = `data:image/svg+xml;base64,${btoa(Image_1.fallbackImageSVG)}`;
+            setImageSource(fallbackImageSource);
+        };
+        return ((0, jsx_runtime_1.jsx)("img", { onError: handleError, src: (file === null || file === void 0 ? void 0 : file.src) || imageSource || baseImage, alt: 'image', className: (0, utils_1.cn)('dabsolute h-full min-h-[150px] w-full  object-contain', unAcceptedType && 'opacity-10', disabled && 'opacity-95 ', className) }));
+    }
+    if (fileType === 'video') {
+        return (0, jsx_runtime_1.jsx)(VideoPlayer_1.VideoPlayer, { file: file, disabled: unAcceptedType });
+    }
+    if (fileType === 'archive') {
+        return ((0, jsx_runtime_1.jsxs)(FileTypeDisplay, { disabled: unAcceptedType, previewable: previewable, file: file, children: ["zip", (0, jsx_runtime_1.jsx)(FileTypeDisplayTitle, { file: file })] }));
+    }
+    if (fileType === 'document') {
+        return ((0, jsx_runtime_1.jsxs)(FileTypeDisplay, { disabled: unAcceptedType, previewable: previewable, file: file, children: ["pdf", (0, jsx_runtime_1.jsx)(FileTypeDisplayTitle, { file: file })] }));
+    }
+    return ((0, jsx_runtime_1.jsx)(FileTypeDisplay, { disabled: unAcceptedType, previewable: previewable, file: file, children: "media" }));
+};
+exports.FileViewer = FileViewer;
+const FileContainer = ({ children }) => {
+    const rootClassName = '';
+    return (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('h-full w-full', rootClassName), children: children });
+};
+const FileTypeDisplayTitle = ({ file, children }) => {
+    function truncateString(str = 'file') {
+        return str.length > 9 ? str.substring(0, 1) + '...' + str.substring(str.length - 10) : str;
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: 'line-clamp-1 absolute bottom-0', children: [' ', children ? children : `${truncateString(file === null || file === void 0 ? void 0 : file.fileName)} `, ' '] }));
+};
+const FileTypeDisplay = ({ disabled, file, children, className }) => {
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('relative flex h-full w-full items-center justify-center rounded bg-gray-800 text-white', disabled && '!text-red-400 opacity-40', className), children: children ? children : `${file === null || file === void 0 ? void 0 : file.extension} File` }));
+};
+const baseImage = 'data:image/svg+xml;base64,CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSIjZWFlNmU2IiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgc3Ryb2tlPSIjZWFlNmU2Ij4KICA8cGF0aCBkPSJNMzAgMy40MTQxTDI4LjU4NTkgMiAyIDI4LjU4NTkgMy40MTQxIDMwbDItMkgyNmEyLjAwMjcgMi4wMDI3IDAgMCAwIDItMlY1LjQxNDFaTTI2IDI2SDcuNDE0MWw3Ljc5MjktNy43OTMgMi4zNzg4IDIuMzc4N2EyIDIgMCAwIDAgMi44Mjg0IDBMMjIgMTlsNCAzLjk5NzNaTTI2IDIwLjE2ODJsLTIuNTg1OC0yLjU4NTlhMiAyIDAgMCAwLTIuODI4NCAwTDE5IDE5LjE2ODJsLTIuMzc3LTIuMzc3MUwyNiA3LjQxNDFaIi8+CiAgPHBhdGggZD0iTTYgMjJWMTlsNS00Ljk5NjYgMS4zNzMzIDEuMzczMyAxLjQxNTktMS40MTYtMS4zNzUtMS4zNzVhMiAyIDAgMCAwLTIuODI4NCAwTDYgMTYuMTcxNlY2SDIyVjRINkEyLjAwMiAyLjAwMiAwIDAgMCA0IDZWMjJaIi8+Cjwvc3ZnPgo=';

package/dist/src/components/Upload/components/FileViewer/VideoPlayer.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VideoPlayer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const utils_1 = require("../../../../utils");
+const renderVideo = ({ noControls, src, vidButtonRef, vidRef, handleToggleVideo, className, }) => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: noControls ? ((0, jsx_runtime_1.jsx)("div", { ref: vidButtonRef, className: (0, utils_1.cn)('flex h-full w-full items-center justify-center', className), children: (0, jsx_runtime_1.jsx)("video", { ref: vidRef, src: src, onClick: handleToggleVideo }) })) : ((0, jsx_runtime_1.jsx)("video", { src: src, className: (0, utils_1.cn)('flex h-full w-full items-center justify-center', className), controls: true, controlsList: 'nodownload' })) }));
+const VideoPlayer = ({ noControls, file, className }) => {
+    const vidRef = (0, react_1.useRef)(null);
+    const vidButtonRef = (0, react_1.useRef)(null);
+    const { src } = file || {};
+    const handlePlay = () => {
+        if (vidRef.current) {
+            vidRef.current.play();
+            // hide overlay play button styles, set by 'video__play-button'
+            if (vidButtonRef.current) {
+                vidButtonRef.current.classList.add('is-playing');
+            }
+        }
+    };
+    const handlePause = () => {
+        if (vidRef.current) {
+            vidRef.current.pause();
+            // show overlay play button styles, set by 'video__play-button'
+            if (vidButtonRef.current) {
+                vidButtonRef.current.classList.remove('is-playing');
+            }
+        }
+    };
+    const handleToggleVideo = () => { var _a; return (((_a = vidRef.current) === null || _a === void 0 ? void 0 : _a.paused) ? handlePlay() : handlePause()); };
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: renderVideo({
+            noControls,
+            src,
+            vidButtonRef,
+            vidRef,
+            handleToggleVideo,
+            className,
+        }) }));
+};
+exports.VideoPlayer = VideoPlayer;

package/dist/src/components/Upload/components/FileViewer/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VideoPlayer = exports.FileViewer = void 0;
+var FileViewer_1 = require("./FileViewer");
+Object.defineProperty(exports, "FileViewer", { enumerable: true, get: function () { return FileViewer_1.FileViewer; } });
+var VideoPlayer_1 = require("./VideoPlayer");
+Object.defineProperty(exports, "VideoPlayer", { enumerable: true, get: function () { return VideoPlayer_1.VideoPlayer; } });

package/dist/src/components/Upload/components/Modal/AddFromUrlButton.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const AddFromUrlButton = ({ nextAction }) => {
+    //   await uploadFileByUrl(
+    //     {
+    //       url: values?.link,
+    //     },
+    //     undefined,
+    //     options,
+    //   )
+    //     .then((data: any) => {
+    //       if (!data.result) {
+    //         return handleSubmitError(data)
+    //       }
+    //       reset({ link: '' })
+    //       nextAction?.()
+    //       //@ts-ignore
+    //       buttonRef.current?.click()
+    //     })
+    //     .catch((error) => handleSubmitError(error))
+    //     .finally(() => setLoading(false))
+    // }
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { onClick: nextAction, className: 'z-[999] flex w-full items-center  justify-between space-x-4' }) }));
+};
+exports.default = AddFromUrlButton;