@macive/ui 0.0.12 → 0.0.14

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

@@ -1,21 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const ResourceListClassnames = {
-    "HeaderWrapper-hasSort": "ResourceList-hasSort",
-    "HeaderWrapper-hasAlternateTool": "ResourceList-hasAlternateTool",
+    "HeaderWrapper-hasSort": "ResourceList-HeaderWrapper-hasSort",
+    "HeaderWrapper-hasAlternateTool": "ResourceList-HeaderWrapper-hasAlternateTool",
     "disabledPointerEvents": "ResourceList-disabledPointerEvents",
     "FiltersWrapper": "ResourceList-FiltersWrapper",
     "ResourceList": "ResourceList-ResourceList",
     "HeaderOuterWrapper": "ResourceList-HeaderOuterWrapper",
-    "HeaderWrapper-disabled": "ResourceList-disabled",
-    "HeaderWrapper-overlay": "ResourceList-overlay",
+    "HeaderWrapper-disabled": "ResourceList-HeaderWrapper-disabled",
+    "HeaderWrapper-overlay": "ResourceList-HeaderWrapper-overlay",
     "HeaderWrapper": "ResourceList-HeaderWrapper",
-    "HeaderWrapper-isSticky": "ResourceList-isSticky",
+    "HeaderWrapper-isSticky": "ResourceList-HeaderWrapper-isSticky",
     "HeaderContentWrapper": "ResourceList-HeaderContentWrapper",
-    "HeaderWrapper-inSelectMode": "ResourceList-inSelectMode",
+    "HeaderWrapper-inSelectMode": "ResourceList-HeaderWrapper-inSelectMode",
     "SortWrapper": "ResourceList-SortWrapper",
     "AlternateToolWrapper": "ResourceList-AlternateToolWrapper",
-    "HeaderWrapper-hasSelect": "ResourceList-hasSelect",
+    "HeaderWrapper-hasSelect": "ResourceList-HeaderWrapper-hasSelect",
     "HeaderTitleWrapper": "ResourceList-HeaderTitleWrapper",
     "BulkActionsWrapper": "ResourceList-BulkActionsWrapper",
     "BulkActionsWrapperSticky": "ResourceList-BulkActionsWrapperSticky",
@@ -26,7 +26,7 @@ const ResourceListClassnames = {
     "ResourceListWrapper": "ResourceList-ResourceListWrapper",
     "ResourceListWrapperWithBulkActions": "ResourceList-ResourceListWrapperWithBulkActions",
     "ItemWrapper": "ResourceList-ItemWrapper",
-    "ItemWrapper-isLoading": "ResourceList-isLoading",
+    "ItemWrapper-isLoading": "ResourceList-ItemWrapper-isLoading",
     "SpinnerContainer": "ResourceList-SpinnerContainer",
     "LoadingOverlay": "ResourceList-LoadingOverlay",
     "DisabledPointerEvents": "ResourceList-DisabledPointerEvents",

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

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const SelectAllActionsClassnames = {
     "SelectAllActions": "SelectAllActions-SelectAllActions",
-    "SelectAllActions-entering": "SelectAllActions-entering",
-    "SelectAllActions-exiting": "SelectAllActions-exiting",
-    "SelectAllActions-entered": "SelectAllActions-entered",
-    "SelectAllActions-exited": "SelectAllActions-exited",
+    "SelectAllActions-entering": "SelectAllActions-SelectAllActions-entering",
+    "SelectAllActions-exiting": "SelectAllActions-SelectAllActions-exiting",
+    "SelectAllActions-entered": "SelectAllActions-SelectAllActions-entered",
+    "SelectAllActions-exited": "SelectAllActions-SelectAllActions-exited",
     "PaginatedSelectAll": "SelectAllActions-PaginatedSelectAll",
     "AllAction": "SelectAllActions-AllAction"
 };

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

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const SkeletonTabsClassnames = {
     "Tabs": "SkeletonTabs-Tabs",
     "Tab": "SkeletonTabs-Tab",
-    "Tab-short": "SkeletonTabs-short",
-    "Tab-long": "SkeletonTabs-long"
+    "Tab-short": "SkeletonTabs-Tab-short",
+    "Tab-long": "SkeletonTabs-Tab-long"
 };
 exports.default = SkeletonTabsClassnames;

package/dist/src/components/Stack/Stack-old.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Stack = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const Stack_classnames_1 = __importDefault(require("./Stack.classnames"));
+const Stack = ({ direction = 'vertical', spacing = 'base', wrap = false, alignment = 'stretch', distribution = 'start', children, className = '', }) => {
+    const stackClasses = (0, classnames_1.default)(Stack_classnames_1.default.stack, Stack_classnames_1.default[`stack-${direction}`], Stack_classnames_1.default[`stack-spacing-${spacing}`], wrap && Stack_classnames_1.default['stack-wrap'], Stack_classnames_1.default[`stack-alignment-${alignment}`], Stack_classnames_1.default[`stack-distribution-${distribution}`], className);
+    return (0, jsx_runtime_1.jsx)("div", { className: stackClasses, children: children });
+};
+exports.Stack = Stack;
+Stack.displayName = 'Stack';
+// Stack.Item Component
+Stack.Item = ({ fill = false, className = '', children }) => {
+    const itemClasses = (0, classnames_1.default)(Stack_classnames_1.default.stackItem, fill && Stack_classnames_1.default.fill, className);
+    return (0, jsx_runtime_1.jsx)("div", { className: itemClasses, children: children });
+};
+Stack.Item.displayName = 'Stack';

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

@@ -2,24 +2,24 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const StackClassnames = {
     "stack": "Stack-stack",
-    "stack-horizontal": "Stack-horizontal",
-    "stack-vertical": "Stack-vertical",
-    "stack-wrap": "Stack-wrap",
-    "stack-spacing-extraTight": "Stack-spacing-extraTight",
-    "stack-spacing-tight": "Stack-spacing-tight",
-    "stack-spacing-base": "Stack-spacing-base",
-    "stack-spacing-loose": "Stack-spacing-loose",
-    "stack-spacing-extraLoose": "Stack-spacing-extraLoose",
-    "stack-alignment-start": "Stack-alignment-start",
-    "stack-alignment-center": "Stack-alignment-center",
-    "stack-alignment-end": "Stack-alignment-end",
-    "stack-alignment-baseline": "Stack-alignment-baseline",
-    "stack-alignment-stretch": "Stack-alignment-stretch",
-    "stack-distribution-start": "Stack-distribution-start",
-    "stack-distribution-center": "Stack-distribution-center",
-    "stack-distribution-end": "Stack-distribution-end",
-    "stack-distribution-spaceAround": "Stack-distribution-spaceAround",
-    "stack-distribution-spaceBetween": "Stack-distribution-spaceBetween",
+    "stack-horizontal": "Stack-stack-horizontal",
+    "stack-vertical": "Stack-stack-vertical",
+    "stack-wrap": "Stack-stack-wrap",
+    "stack-spacing-extraTight": "Stack-stack-spacing-extraTight",
+    "stack-spacing-tight": "Stack-stack-spacing-tight",
+    "stack-spacing-base": "Stack-stack-spacing-base",
+    "stack-spacing-loose": "Stack-stack-spacing-loose",
+    "stack-spacing-extraLoose": "Stack-stack-spacing-extraLoose",
+    "stack-alignment-start": "Stack-stack-alignment-start",
+    "stack-alignment-center": "Stack-stack-alignment-center",
+    "stack-alignment-end": "Stack-stack-alignment-end",
+    "stack-alignment-baseline": "Stack-stack-alignment-baseline",
+    "stack-alignment-stretch": "Stack-stack-alignment-stretch",
+    "stack-distribution-start": "Stack-stack-distribution-start",
+    "stack-distribution-center": "Stack-stack-distribution-center",
+    "stack-distribution-end": "Stack-stack-distribution-end",
+    "stack-distribution-spaceAround": "Stack-stack-distribution-spaceAround",
+    "stack-distribution-spaceBetween": "Stack-stack-distribution-spaceBetween",
     "stackItem": "Stack-stackItem",
     "fill": "Stack-fill"
 };

package/dist/src/components/Stack/Stack.js

@@ -1,21 +1,49 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Stack = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const classnames_1 = __importDefault(require("classnames"));
-const Stack_classnames_1 = __importDefault(require("./Stack.classnames"));
-const Stack = ({ direction = 'vertical', spacing = 'base', wrap = false, alignment = 'stretch', distribution = 'start', children, className = '', }) => {
-    const stackClasses = (0, classnames_1.default)(Stack_classnames_1.default.stack, Stack_classnames_1.default[`stack-${direction}`], Stack_classnames_1.default[`stack-spacing-${spacing}`], wrap && Stack_classnames_1.default['stack-wrap'], Stack_classnames_1.default[`stack-alignment-${alignment}`], Stack_classnames_1.default[`stack-distribution-${distribution}`], className);
-    return (0, jsx_runtime_1.jsx)("div", { className: stackClasses, children: children });
+const HorizontalStack_1 = require("../HorizontalStack");
+const VerticalStack_1 = require("../VerticalStack");
+/**
+ * A flexible layout component that arranges its children in a horizontal or vertical stack.
+ *
+ * @example
+ * ```tsx
+ * // Horizontal stack
+ * <Stack horizontal gap="2" align="center">
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ *   <div>Item 3</div>
+ * </Stack>
+ *
+ * // Vertical stack
+ * <Stack vertical gap="3" align="start">
+ *   <div>Item A</div>
+ *   <div>Item B</div>
+ *   <div>Item C</div>
+ * </Stack>
+ * ```
+ */
+const Stack = ({ horizontal, vertical, children, align, blockAlign, inlineAlign, gap, wrap = true, width, height, as = 'div', id, reverseOrder = false, breakpoints, spacer, spacing, ...restProps }) => {
+    // Throw an error if both horizontal and vertical are specified
+    if (horizontal !== undefined && vertical !== undefined) {
+        throw new Error('You cannot specify both `horizontal` and `vertical` props. Use only one.');
+    }
+    // Determine the direction based on the props
+    const isHorizontal = horizontal !== null && horizontal !== void 0 ? horizontal : !vertical;
+    // Map spacing values to SpaceScale tokens
+    const spacingToGapMap = {
+        none: '0',
+        extraTight: '1',
+        tight: '2',
+        base: '3',
+        loose: '4',
+        extraLoose: '5', // Extra loose spacing
+    };
+    const resolvedGap = spacing ? spacingToGapMap[spacing] : gap;
+    if (isHorizontal) {
+        return ((0, jsx_runtime_1.jsx)(HorizontalStack_1.HorizontalStack, { align: align, blockAlign: blockAlign, gap: resolvedGap, wrap: wrap, width: width, height: height, ...restProps, children: children }));
+    }
+    return ((0, jsx_runtime_1.jsx)(VerticalStack_1.VerticalStack, { as: as, align: align, inlineAlign: inlineAlign, gap: resolvedGap, id: id, height: height, width: width, reverseOrder: reverseOrder, breakpoints: breakpoints, spacer: spacer, ...restProps, children: children }));
 };
 exports.Stack = Stack;
-Stack.displayName = 'Stack';
-// Stack.Item Component
-Stack.Item = ({ fill = false, className = '', children }) => {
-    const itemClasses = (0, classnames_1.default)(Stack_classnames_1.default.stackItem, fill && Stack_classnames_1.default.fill, className);
-    return (0, jsx_runtime_1.jsx)("div", { className: itemClasses, children: children });
-};
-Stack.Item.displayName = 'Stack';

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

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const SwitchClassnames = {
-    "switch-checkbox": "Switch-checkbox",
-    "switch-label": "Switch-label",
-    "switch-button": "Switch-button",
-    "error-message": "Switch-message"
+    "switch-checkbox": "Switch-switch-checkbox",
+    "switch-label": "Switch-switch-label",
+    "switch-button": "Switch-switch-button",
+    "error-message": "Switch-error-message"
 };
 exports.default = SwitchClassnames;

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

@@ -8,13 +8,13 @@ const TabsClassnames = {
     "Title": "Tabs-Title",
     "fillSpace": "Tabs-fillSpace",
     "Tab": "Tabs-Tab",
-    "Tab-selected": "Tabs-selected",
+    "Tab-selected": "Tabs-Tab-selected",
     "titleWithIcon": "Tabs-titleWithIcon",
     "Panel": "Tabs-Panel",
-    "Panel-hidden": "Tabs-hidden",
+    "Panel-hidden": "Tabs-Panel-hidden",
     "Item": "Tabs-Item",
     "DisclosureTab": "Tabs-DisclosureTab",
-    "DisclosureTab-visible": "Tabs-visible",
+    "DisclosureTab-visible": "Tabs-DisclosureTab-visible",
     "DisclosureActivator": "Tabs-DisclosureActivator",
     "TabMeasurer": "Tabs-TabMeasurer"
 };

package/dist/src/components/Tag/Tag.js

@@ -25,7 +25,7 @@ function Tag({ children, disabled = false, onClick, onRemove, accessibilityLabel
     const ariaLabel = i18n.translate('Macive.Tag.ariaLabel', {
         children: tagTitle || '',
     });
-    const removeButton = onRemove ? ((0, jsx_runtime_1.jsx)("button", { type: 'button', "aria-label": ariaLabel, className: (0, css_1.classNames)(Tag_classnames_1.default.Button, segmented && Tag_classnames_1.default.segmented), onClick: onRemove, onMouseUp: focus_1.handleMouseUpByBlurring, disabled: disabled, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaClose }) })) : null;
+    const removeButton = onRemove ? ((0, jsx_runtime_1.jsx)("button", { type: 'button', "aria-label": ariaLabel, className: (0, css_1.classNames)(Tag_classnames_1.default.Button, segmented && Tag_classnames_1.default.segmented), onClick: onRemove, onMouseUp: focus_1.handleMouseUpByBlurring, disabled: disabled, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { color: 'subdued', source: Icons_1.MaClose }) })) : null;
     const tagContent = url && !disabled ? ((0, jsx_runtime_1.jsx)("a", { className: (0, css_1.classNames)(Tag_classnames_1.default.Link, segmented && Tag_classnames_1.default.segmented), href: url, children: (0, jsx_runtime_1.jsx)("span", { title: tagTitle, className: Tag_classnames_1.default.LinkText, children: children }) })) : ((0, jsx_runtime_1.jsx)("span", { title: tagTitle, className: Tag_classnames_1.default.TagText, children: children }));
     return ((0, jsx_runtime_1.jsxs)("span", { className: className, children: [tagContent, removeButton] }));
 }

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

@@ -18,7 +18,7 @@ const TextClassnames = {
     "accent": "Text-accent",
     "muted": "Text-muted",
     "subdued": "Text-subdued",
-    "text-inverse": "Text-inverse",
+    "text-inverse": "Text-text-inverse",
     "heading": "Text-heading",
     "bodyXs": "Text-bodyXs",
     "tiny": "Text-tiny",
@@ -44,9 +44,9 @@ const TextClassnames = {
     "disabled": "Text-disabled",
     "caution": "Text-caution",
     "magic": "Text-magic",
-    "magic-subdued": "Text-subdued",
-    "text-inverse-secondary": "Text-inverse-secondary",
-    "line-through": "Text-through",
-    "clamp-text": "Text-text"
+    "magic-subdued": "Text-magic-subdued",
+    "text-inverse-secondary": "Text-text-inverse-secondary",
+    "line-through": "Text-line-through",
+    "clamp-text": "Text-clamp-text"
 };
 exports.default = TextClassnames;

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

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const TextFieldClassnames = {
-    "Backdrop-connectedLeft": "TextField-connectedLeft",
-    "Backdrop-connectedRight": "TextField-connectedRight",
+    "Backdrop-connectedLeft": "TextField-Backdrop-connectedLeft",
+    "Backdrop-connectedRight": "TextField-Backdrop-connectedRight",
     "TextField": "TextField-TextField",
     "ClearButton": "TextField-ClearButton",
     "multiline": "TextField-multiline",
@@ -17,11 +17,11 @@ const TextFieldClassnames = {
     "Prefix": "TextField-Prefix",
     "suggestion": "TextField-suggestion",
     "borderless": "TextField-borderless",
-    "Input-hasClearButton": "TextField-hasClearButton",
-    "Input-suffixed": "TextField-suffixed",
-    "Input-alignRight": "TextField-alignRight",
-    "Input-alignLeft": "TextField-alignLeft",
-    "Input-alignCenter": "TextField-alignCenter",
+    "Input-hasClearButton": "TextField-Input-hasClearButton",
+    "Input-suffixed": "TextField-Input-suffixed",
+    "Input-alignRight": "TextField-Input-alignRight",
+    "Input-alignLeft": "TextField-Input-alignLeft",
+    "Input-alignCenter": "TextField-Input-alignCenter",
     "Suffix": "TextField-Suffix",
     "CharacterCount": "TextField-CharacterCount",
     "AlignFieldBottom": "TextField-AlignFieldBottom",

package/dist/src/components/TextField/components/Spinner/Spinner.js

@@ -20,5 +20,5 @@ exports.Spinner = react_1.default.forwardRef(function Spinner({ onChange, onClic
             onMouseDown(onChange);
         };
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { className: TextField_classnames_1.default.Spinner, onClick: onClick, "aria-hidden": true, ref: ref, children: [(0, jsx_runtime_1.jsx)("div", { role: 'button', className: TextField_classnames_1.default.Segment, tabIndex: -1, onClick: handleStep(1), onMouseDown: handleMouseDown(handleStep(1)), onMouseUp: onMouseUp, onBlur: onBlur, children: (0, jsx_runtime_1.jsx)("div", { className: TextField_classnames_1.default.SpinnerIcon, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaMinus }) }) }), (0, jsx_runtime_1.jsx)("div", { role: 'button', className: TextField_classnames_1.default.Segment, tabIndex: -1, onClick: handleStep(-1), onMouseDown: handleMouseDown(handleStep(-1)), onMouseUp: onMouseUp, onBlur: onBlur, children: (0, jsx_runtime_1.jsx)("div", { className: TextField_classnames_1.default.SpinnerIcon, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaRight }) }) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: TextField_classnames_1.default.Spinner, onClick: onClick, "aria-hidden": true, ref: ref, children: [(0, jsx_runtime_1.jsx)("div", { role: 'button', className: TextField_classnames_1.default.Segment, tabIndex: -1, onClick: handleStep(1), onMouseDown: handleMouseDown(handleStep(1)), onMouseUp: onMouseUp, onBlur: onBlur, children: (0, jsx_runtime_1.jsx)("div", { className: TextField_classnames_1.default.SpinnerIcon, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { size: 16, source: Icons_1.MaPlus }) }) }), (0, jsx_runtime_1.jsx)("div", { role: 'button', className: TextField_classnames_1.default.Segment, tabIndex: -1, onClick: handleStep(-1), onMouseDown: handleMouseDown(handleStep(-1)), onMouseUp: onMouseUp, onBlur: onBlur, children: (0, jsx_runtime_1.jsx)("div", { className: TextField_classnames_1.default.SpinnerIcon, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { size: 16, source: Icons_1.MaMinus }) }) })] }));
 });

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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const FileViewerClassnames = {
+    "file-viewer-img": "FileViewer-file-viewer-img",
+    "unaccepted": "FileViewer-unaccepted",
+    "disabled": "FileViewer-disabled",
+    "file-container": "FileViewer-file-container",
+    "file-type-display": "FileViewer-file-type-display",
+    "file-type-title": "FileViewer-file-type-title"
+};
+exports.default = FileViewerClassnames;

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

@@ -1,4 +1,7 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FileViewer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -6,17 +9,14 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const utils_1 = require("../../../../utils");
 const Image_1 = require("../../../Image");
+const FileViewer_classnames_1 = __importDefault(require("./FileViewer.classnames"));
 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) }));
+        return ((0, jsx_runtime_1.jsx)(Image_1.Image, { source: (file === null || file === void 0 ? void 0 : file.src) || imageSource || baseImage, alt: 'image', rounded: true, className: (0, utils_1.cn)(FileViewer_classnames_1.default['file-viewer-img'], unAcceptedType && FileViewer_classnames_1.default.unaccepted, disabled && FileViewer_classnames_1.default.disabled, className) }));
     }
     if (fileType === 'video') {
         return (0, jsx_runtime_1.jsx)(VideoPlayer_1.VideoPlayer, { file: file, disabled: unAcceptedType });
@@ -30,17 +30,13 @@ const FileViewer = (props) => {
     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)} `, ' '] }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: FileViewer_classnames_1.default['file-type-title'], 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` }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)(FileViewer_classnames_1.default['file-type-display'], disabled && FileViewer_classnames_1.default.disabled, className), 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/Modal/UploadFilterSection.js

@@ -17,6 +17,7 @@ const TextField_1 = require("../../../TextField");
 const VerticalStack_1 = require("../../../VerticalStack");
 const UploadProvider_1 = require("../UploadProvider");
 const AddFromUrlButton_1 = __importDefault(require("./AddFromUrlButton"));
+const UploadModalContainer_classnames_1 = __importDefault(require("./UploadModalContainer.classnames"));
 function UploadFilterSection({ refetch, openSelectedPanel }) {
     var _a, _b, _c, _d;
     const { uploaderProps, selectedAttachments, setSelectedAttachments } = (0, UploadProvider_1.useUpload)();
@@ -83,19 +84,19 @@ function UploadFilterSection({ refetch, openSelectedPanel }) {
             sortBy: 'NEWEST',
         });
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Popover_1.Popover, { active: sortModalActive, activator: (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: () => toggleSortModalActive(), icon: Icons_1.MasortArrow }), autofocusTarget: 'first-node', onClose: toggleSortModalActive, children: (0, jsx_runtime_1.jsx)(ActionList_1.ActionList, { actionRole: 'menuitem', items: sortOptions.map(({ label, value }) => ({
-                        content: label,
-                        onAction() {
-                            refetch({
-                                sortBy: value,
-                            });
-                        },
-                    })) }) }), (0, jsx_runtime_1.jsx)(Popover_1.Popover, { active: formatModalActive, activator: (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: toggleSetFormatModalActive, icon: Icons_1.MaSettingConfig }), autofocusTarget: 'first-node', onClose: toggleSetFormatModalActive, children: (0, jsx_runtime_1.jsx)(Popover_1.Popover.Section, { children: (0, jsx_runtime_1.jsxs)(VerticalStack_1.VerticalStack, { gap: '2', children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { fontWeight: 'semibold', children: "Format" }), (0, jsx_runtime_1.jsx)("select", { onChange: handleUploadFormat, children: formatOptions.map(({ label, value }) => ((0, jsx_runtime_1.jsx)("option", { value: value, children: label }, value))) }), (0, jsx_runtime_1.jsx)(Text_1.Text, { fontWeight: 'semibold', children: "Extension" }), (0, jsx_runtime_1.jsx)("select", { onChange: handleUploadType, children: Object.keys(exports.UploadExtensionIndexed).map((key) => ((0, jsx_runtime_1.jsx)("option", { value: key, children: exports.UploadExtensionIndexed[key] }, key))) })] }) }) }), (0, jsx_runtime_1.jsx)(AddFromUrlButton_1.default, { title: 'Upload from Url', nextAction: refetchNewUploads }), (0, jsx_runtime_1.jsx)(TextField_1.TextField, { label: true, labelHidden: true, clearButton: !!searchTerm, onClearButtonClick: handleClearSearch, onChange: (keyword) => handleSearch(keyword), value: searchTerm, autoComplete: 'off' }), (0, jsx_runtime_1.jsx)(Box_1.Box, { children: (0, jsx_runtime_1.jsxs)(HorizontalStack_1.HorizontalStack, { gap: '2', children: [(0, jsx_runtime_1.jsx)("div", { style: {
-                                display: 'none',
-                                visibility: 'hidden',
-                            }, children: ((_a = selectedAttachments[uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.attachmentKey]) === null || _a === void 0 ? void 0 : _a.length) ? ((0, jsx_runtime_1.jsxs)(Button_1.Button, { size: 'slim', destructive: true, onClick: () => {
-                                    setSelectedAttachments({ [uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.attachmentKey]: [] });
-                                }, children: ["clear (", String((_b = selectedAttachments[uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.attachmentKey]) === null || _b === void 0 ? void 0 : _b.length), ")"] })) : ('') }), (0, jsx_runtime_1.jsx)("div", { onClick: openSelectedPanel, children: (0, jsx_runtime_1.jsx)(Button_1.Button, { icon: Icons_1.MaHourGlassFull, children: String((_d = (_c = selectedAttachments[uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.attachmentKey]) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0) }) })] }) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: UploadModalContainer_classnames_1.default['upload-filter-section'], children: [(0, jsx_runtime_1.jsx)(Box_1.Box, { children: (0, jsx_runtime_1.jsxs)(HorizontalStack_1.HorizontalStack, { gap: '2', wrap: false, children: [(0, jsx_runtime_1.jsx)(Popover_1.Popover, { active: sortModalActive, activator: (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: () => toggleSortModalActive(), icon: Icons_1.MasortArrow }), autofocusTarget: 'first-node', onClose: toggleSortModalActive, children: (0, jsx_runtime_1.jsx)(ActionList_1.ActionList, { actionRole: 'menuitem', items: sortOptions.map(({ label, value }) => ({
+                                    content: label,
+                                    onAction() {
+                                        refetch({
+                                            sortBy: value,
+                                        });
+                                    },
+                                })) }) }), (0, jsx_runtime_1.jsx)(Popover_1.Popover, { active: formatModalActive, activator: (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: toggleSetFormatModalActive, icon: Icons_1.MaSettingConfig }), autofocusTarget: 'first-node', onClose: toggleSetFormatModalActive, children: (0, jsx_runtime_1.jsx)(Popover_1.Popover.Section, { children: (0, jsx_runtime_1.jsxs)(VerticalStack_1.VerticalStack, { gap: '2', children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { fontWeight: 'semibold', children: "Format" }), (0, jsx_runtime_1.jsx)("select", { onChange: handleUploadFormat, children: formatOptions.map(({ label, value }) => ((0, jsx_runtime_1.jsx)("option", { value: value, children: label }, value))) }), (0, jsx_runtime_1.jsx)(Text_1.Text, { fontWeight: 'semibold', children: "Extension" }), (0, jsx_runtime_1.jsx)("select", { onChange: handleUploadType, children: Object.keys(exports.UploadExtensionIndexed).map((key) => ((0, jsx_runtime_1.jsx)("option", { value: key, children: exports.UploadExtensionIndexed[key] }, key))) })] }) }) }), (0, jsx_runtime_1.jsx)(AddFromUrlButton_1.default, { title: 'Upload from Url', nextAction: refetchNewUploads })] }) }), (0, jsx_runtime_1.jsx)(TextField_1.TextField, { label: true, labelHidden: true, clearButton: !!searchTerm, onClearButtonClick: handleClearSearch, onChange: (keyword) => handleSearch(keyword), value: searchTerm, autoComplete: 'off', placeholder: 'Search files ...' }), (0, jsx_runtime_1.jsxs)(HorizontalStack_1.HorizontalStack, { gap: '2', children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                            display: 'none',
+                            visibility: 'hidden',
+                        }, children: ((_a = selectedAttachments[uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.attachmentKey]) === null || _a === void 0 ? void 0 : _a.length) ? ((0, jsx_runtime_1.jsxs)(Button_1.Button, { size: 'slim', destructive: true, onClick: () => {
+                                setSelectedAttachments({ [uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.attachmentKey]: [] });
+                            }, children: ["clear (", String((_b = selectedAttachments[uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.attachmentKey]) === null || _b === void 0 ? void 0 : _b.length), ")"] })) : ('') }), (0, jsx_runtime_1.jsx)(Button_1.Button, { icon: Icons_1.MaHourGlassFull, onClick: openSelectedPanel, plain: true, children: String((_d = (_c = selectedAttachments[uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.attachmentKey]) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0) })] })] }));
 }
 exports.default = UploadFilterSection;
 var UploadExtension;

package/dist/src/components/Upload/components/Modal/UploadModalContainer.classnames.js

@@ -1,7 +1,28 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const UploadModalContainerClassnames = {
-    "animate-loading": "UploadModalContainer-loading",
-    "animate-bounce": "UploadModalContainer-bounce"
+    "modal-container": "UploadModalContainer-modal-container",
+    "hidable-parent": "UploadModalContainer-hidable-parent",
+    "hidable-parent-display": "UploadModalContainer-hidable-parent-display",
+    "upload-filter-section": "UploadModalContainer-upload-filter-section",
+    "scroll-to-view": "UploadModalContainer-scroll-to-view",
+    "modal-section": "UploadModalContainer-modal-section",
+    "modal-section-header": "UploadModalContainer-modal-section-header",
+    "file-upload-list": "UploadModalContainer-file-upload-list",
+    "file-upload-grid": "UploadModalContainer-file-upload-grid",
+    "selected-panel-file-upload-list": "UploadModalContainer-selected-panel-file-upload-list",
+    "selected-panel-file-upload-grid": "UploadModalContainer-selected-panel-file-upload-grid",
+    "loading-indicator": "UploadModalContainer-loading-indicator",
+    "loading-indicator-text": "UploadModalContainer-loading-indicator-text",
+    "loading-indicator-bar": "UploadModalContainer-loading-indicator-bar",
+    "spinner-container": "UploadModalContainer-spinner-container",
+    "no-files-found": "UploadModalContainer-no-files-found",
+    "pagination-container": "UploadModalContainer-pagination-container",
+    "selected-files-section": "UploadModalContainer-selected-files-section",
+    "selected-files-card": "UploadModalContainer-selected-files-card",
+    "selected-files-text": "UploadModalContainer-selected-files-text",
+    "selected-files-button": "UploadModalContainer-selected-files-button",
+    "animate-loading": "UploadModalContainer-animate-loading",
+    "animate-bounce": "UploadModalContainer-animate-bounce"
 };
 exports.default = UploadModalContainerClassnames;