@macive/ui 0.0.13 → 0.0.14

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

@@ -1,8 +1,12 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Box_1 = require("../../../Box");
+const Button_1 = require("../../../Button");
 const Checkbox_1 = require("../../../Checkbox");
 const HorizontalStack_1 = require("../../../HorizontalStack");
 const Icon_1 = require("../../../Icon");
@@ -10,78 +14,31 @@ const Icons_1 = require("../../../Icons");
 const Text_1 = require("../../../Text");
 const utils_1 = require("../../utils");
 const FileViewer_1 = require("../FileViewer");
-/**
-A component that displays a list of selected files in a modal.
-*/
+const UploadModalFileItem_classnames_1 = __importDefault(require("./UploadModalFileItem.classnames")); // Import the SCSS file
 const UploadModalFileItem = ({ selectedAttachments = [], file, onClick, allowedFileTypes, maxAttachments, }) => {
-    const isId = selectedAttachments.findIndex((att) => (att === null || att === void 0 ? void 0 : att.id) == file.id);
-    const checked = isId > -1;
-    // let disabled = selectedAttachments.length >= maxAttachments && !checked
-    let disabled = false;
-    const checkedNumber = isId + 1;
-    let unAcceptedType;
-    if (!(0, utils_1.checkIfFileIsAccepted)(file, allowedFileTypes)) {
-        disabled = true;
-        unAcceptedType = true;
-    }
     const [icon, setIcon] = (0, react_1.useState)((0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaCopyLink }));
+    const isSelected = selectedAttachments.findIndex((att) => att.id === file.id) > -1;
+    const checkedNumber = isSelected
+        ? selectedAttachments.findIndex((att) => att.id === file.id) + 1
+        : null;
+    const unAcceptedType = !(0, utils_1.checkIfFileIsAccepted)(file, allowedFileTypes);
+    // const disabled = unAcceptedType || (selectedAttachments.length >= maxAttachments && !isSelected)
+    const disabled = unAcceptedType;
     const handleCopyClick = async (url) => {
         try {
             setIcon((0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaCheckCircle }));
             if (typeof window !== 'undefined') {
                 await navigator.clipboard.writeText(url);
-                // Reset the icon to FiCopy after 20 seconds
-                setTimeout(() => {
-                    setIcon((0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaCopyLink }));
-                }, 20000);
+                setTimeout(() => setIcon((0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaCopyLink })), 20000);
             }
         }
-        catch (error) {
+        catch {
             setIcon((0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaError }));
         }
     };
-    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { borderRadius: '1', borderColor: 'border', borderWidth: '1', children: (0, jsx_runtime_1.jsxs)("div", { 
-            // className='h-24 w-32'
-            style: {
-                position: 'relative',
-                display: 'flex',
-                alignItems: 'center',
-                // width: 'max-content',
-            }, onClick: !disabled ? onClick : undefined, children: [(0, jsx_runtime_1.jsx)("div", { style: {
-                        position: 'absolute',
-                        top: 4,
-                        zIndex: 512,
-                        left: 2,
-                        right: 2,
-                        cursor: disabled ? 'not-allowed' : 'pointer',
-                        paddingTop: '4px',
-                    }, children: (0, jsx_runtime_1.jsxs)(HorizontalStack_1.HorizontalStack, { gap: '1', align: 'space-between', blockAlign: 'center', children: [(0, jsx_runtime_1.jsxs)(HorizontalStack_1.HorizontalStack, { gap: '1', align: 'space-between', blockAlign: 'center', children: [(0, jsx_runtime_1.jsx)("button", { onClick: (event) => {
-                                            event.stopPropagation(); // Prevent click event from propagating to the parent div
-                                            handleCopyClick(file.url);
-                                        }, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { background: 'bg-input', padding: '1', borderRadius: '2', children: icon }) }), (0, jsx_runtime_1.jsx)("div", { style: {
-                                            cursor: 'pointer',
-                                        }, onClick: (event) => {
-                                            event.stopPropagation();
-                                            typeof window !== 'undefined' && window.open(file.url, '_blank');
-                                        }, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { background: 'bg-input', padding: '1', borderRadius: '2', children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaEyes }) }) })] }), (0, jsx_runtime_1.jsx)("div", { style: {
-                                    position: 'relative',
-                                    cursor: disabled ? 'not-allowed' : 'pointer',
-                                }, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { background: 'bg-input', borderRadius: '2', padding: '4', children: (0, jsx_runtime_1.jsx)("div", { style: {
-                                            position: 'absolute',
-                                            left: '6%',
-                                            top: '10%',
-                                            cursor: disabled ? 'not-allowed' : 'pointer',
-                                        }, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { label: 'checkbox', labelHidden: true, checked: checked, readOnly: true, disabled: disabled }) }) }) })] }) }), (0, jsx_runtime_1.jsx)("div", { style: {
-                        height: '100%',
-                        width: '100%',
-                        flexShrink: 0,
-                        overflow: 'hidden',
-                    }, children: (0, jsx_runtime_1.jsx)(FileViewer_1.FileViewer, { file: file, disabled: disabled, unAcceptedType: unAcceptedType }) }), (0, jsx_runtime_1.jsx)("div", { style: {
-                        position: 'absolute',
-                        bottom: 0,
-                        left: 0,
-                        right: 0,
-                        opacity: checked ? 100 : 0,
-                    }, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { background: 'bg-success', padding: '2', borderRadiusStartEnd: '1', borderRadiusEndEnd: '1', children: (0, jsx_runtime_1.jsxs)(HorizontalStack_1.HorizontalStack, { align: 'space-between', blockAlign: 'center', children: [(0, jsx_runtime_1.jsxs)(Text_1.Text, { children: [checked && `${checkedNumber}/${maxAttachments}`, " "] }), (0, jsx_runtime_1.jsx)("div", { children: checked && (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaCheckCircle }) })] }) }) })] }) }));
+    return ((0, jsx_runtime_1.jsx)(Box_1.Box, { borderRadius: '3', borderWidth: '1', borderBlockEndWidth: '5', borderColor: 'border', children: (0, jsx_runtime_1.jsx)("div", { className: UploadModalFileItem_classnames_1.default['upload-modal-file-item'], children: (0, jsx_runtime_1.jsxs)("div", { className: UploadModalFileItem_classnames_1.default['file-item-container'], onClick: !disabled ? onClick : undefined, children: [(0, jsx_runtime_1.jsx)("div", { className: UploadModalFileItem_classnames_1.default.fileActionsCard, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { borderRadius: '2', padding: '1', children: (0, jsx_runtime_1.jsx)(HorizontalStack_1.HorizontalStack, { gap: '1', align: 'space-between', blockAlign: 'center', children: (0, jsx_runtime_1.jsxs)("div", { className: UploadModalFileItem_classnames_1.default['file-actions'], children: [(0, jsx_runtime_1.jsxs)(HorizontalStack_1.HorizontalStack, { gap: '1', blockAlign: 'center', wrap: false, children: [(0, jsx_runtime_1.jsx)(ActionButton, { onClick: () => handleCopyClick(file.url), icon: icon }), (0, jsx_runtime_1.jsx)(ActionButton, { onClick: () => window.open(file.url, '_blank'), icon: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaEyes }) })] }), (0, jsx_runtime_1.jsx)(FileCheckbox, { checked: isSelected, disabled: disabled })] }) }) }) }), (0, jsx_runtime_1.jsx)(FileViewer_1.FileViewer, { file: file, disabled: disabled, unAcceptedType: unAcceptedType }), (0, jsx_runtime_1.jsx)(CheckedOverlay, { checked: isSelected, checkedNumber: checkedNumber, maxAttachments: maxAttachments })] }) }) }));
 };
+const ActionButton = ({ onClick, icon }) => ((0, jsx_runtime_1.jsx)(Button_1.Button, { plain: true, size: 'slim', monochrome: true, icon: icon, onClick: onClick }));
+const FileCheckbox = ({ checked, disabled }) => ((0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { label: 'checkbox', labelHidden: true, checked: checked, readOnly: true, disabled: disabled }));
+const CheckedOverlay = ({ checked, checkedNumber, maxAttachments }) => ((0, jsx_runtime_1.jsx)("div", { className: `${UploadModalFileItem_classnames_1.default['checked-overlay']} ${checked ? UploadModalFileItem_classnames_1.default['visible'] : ''}`, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { background: 'bg-success', padding: '2', borderRadiusStartEnd: '1', borderRadiusEndEnd: '1', children: (0, jsx_runtime_1.jsxs)(HorizontalStack_1.HorizontalStack, { align: 'space-between', blockAlign: 'center', children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: checked && `${checkedNumber}/${maxAttachments}` }), checked && (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaCheckCircle })] }) }) }));
 exports.default = UploadModalFileItem;

package/dist/src/components/Upload/components/Thumbnail/Thumbanail.js

@@ -1,68 +1,40 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ClassicThumbnail = void 0;
+exports.DefaultThumbnail = exports.ClassicThumbnail = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const utils_1 = require("../../../../utils");
-const constants_1 = require("../../constants");
+const Stack_1 = require("../../../Stack");
+const Text_1 = require("../../../Text");
+const Thumbnail_classnames_1 = __importDefault(require("./Thumbnail.classnames"));
 /**
  * A component that displays a thumbnail image for a selected file.
  */
-const Thumbnail = (props) => {
+const Thumbnail = ({ thumbnailSize = 'm', thumbnailVariant = 'square', thumbnailClassName, onClick, dragging, hasDragAndDrop, }) => {
     const thumbSizes = {
-        sm: 'h-[68px] w-[68px]',
-        normal: 'h-[133px] w-[115px] sm:w-[133px]',
-        m: 'h-[100px] w-[100px]',
-        lg: 'h-[250px] w-[250px] ',
-        xl: 'h-[250px] w-[350px]',
-        none: '!h-full !w-full',
+        sm: Thumbnail_classnames_1.default.sizeSm,
+        normal: Thumbnail_classnames_1.default.sizeNormal,
+        m: Thumbnail_classnames_1.default.sizeM,
+        lg: Thumbnail_classnames_1.default.sizeLg,
+        xl: Thumbnail_classnames_1.default.sizeXl,
+        none: Thumbnail_classnames_1.default.sizeNone,
     };
     const thumbnailVariantClasses = {
-        rectangle: '!h-full !w-full',
+        rectangle: Thumbnail_classnames_1.default.variantRectangle,
         square: '',
-        circle: '!rounded-full',
+        circle: Thumbnail_classnames_1.default.variantCircle,
     };
-    const { acceptFileTypes = constants_1.FILE_TYPE.IMAGE, thumbnailSize = 'm', thumbnailVariant = 'square', thumbnailClassName, onClick, dragging, hasDragAndDrop, } = props;
-    return ((0, jsx_runtime_1.jsx)("div", { onClick: onClick, className: (0, utils_1.cn)('extraOutline dbg-skin-primary  cursor-pointer rounded ', thumbnailClassName), children: (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('file_upload bg-skin-primary relative flex w-full items-center justify-center  rounded-md ', ' border-[2px] border-dashed border-gray-600 p-4', thumbSizes[thumbnailSize] || 'h-full', thumbnailVariantClasses[thumbnailVariant], dragging && '!bg-teal-300 '), children: (0, jsx_runtime_1.jsxs)("div", { className: 'justify center flex  flex-col items-center space-y-2 text-center text-2xl', children: [renderThumbnail(acceptFileTypes), hasDragAndDrop && ((0, jsx_runtime_1.jsx)("div", { className: 'text-xs', children: dragging
+    return ((0, jsx_runtime_1.jsx)("div", { onClick: onClick, className: (0, utils_1.cn)(Thumbnail_classnames_1.default.thumbnailContainer, thumbnailClassName), children: (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)(Thumbnail_classnames_1.default.thumbnail, thumbSizes[thumbnailSize] || Thumbnail_classnames_1.default.sizeFull, thumbnailVariantClasses[thumbnailVariant], dragging && Thumbnail_classnames_1.default.dragging), children: (0, jsx_runtime_1.jsxs)("div", { className: Thumbnail_classnames_1.default.content, children: [!hasDragAndDrop && (0, jsx_runtime_1.jsx)(exports.DefaultThumbnail, {}), hasDragAndDrop && ((0, jsx_runtime_1.jsx)(Text_1.Text, { children: dragging
                             ? 'Drop the file here'
                             : 'Drag and drop a file here, or click to select a file' }))] }) }) }));
 };
-const renderThumbnail = (acceptFileTypes) => {
-    if (!Array.isArray(acceptFileTypes)) {
-        return (0, jsx_runtime_1.jsx)(FileIcon, {});
-    }
-    if (acceptFileTypes.every((category) => category == constants_1.FILE_TYPE.IMAGE)) {
-        return (0, jsx_runtime_1.jsx)(FileIcon, {});
-    }
-    if (acceptFileTypes.every((category) => category === constants_1.FILE_TYPE.VIDEO)) {
-        return (0, jsx_runtime_1.jsx)(FileIcon, {});
-    }
-    if (acceptFileTypes.every((category) => category === constants_1.FILE_TYPE.DOCUMENT)) {
-        return (0, jsx_runtime_1.jsx)(FileIcon, {});
-    }
-    if (acceptFileTypes.every((category) => category === constants_1.FILE_TYPE.ZIP)) {
-        return (0, jsx_runtime_1.jsx)(FileIcon, {});
-    }
-    if (acceptFileTypes.every((category) => category === constants_1.FILE_TYPE.PDF)) {
-        return (0, jsx_runtime_1.jsx)(FileIcon, {});
-    }
-    return (0, jsx_runtime_1.jsx)(FileIcon, {});
-};
-/**
- * A component that displays an icon for a file type.
- *
- * @param children - The child elements to be rendered inside the FileIcon component.
- */
-const FileIcon = ({ children }) => {
-    return (0, jsx_runtime_1.jsx)("span", { className: 'text-4xl', children: children });
-};
 exports.default = Thumbnail;
 /**
  * A classic thumbnail component that can be used as a placeholder for file uploads.
- * The component displays a border and text to indicate that a file can be added.
- *
- * @returns A React component that displays a border and text to indicate that a file can be added.
  */
-const ClassicThumbnail = ({ className, onClick, }) => {
-    return ((0, jsx_runtime_1.jsxs)("div", { onClick: onClick, className: (0, utils_1.cn)('mt-1 flex h-32 w-full flex-col items-center  justify-center rounded-md border border-dashed p-4 hover:bg-gray-200 dark:hover:bg-gray-600', className), children: [(0, jsx_runtime_1.jsxs)("div", { className: 'flex cursor-pointer flex-row items-center space-x-2 text-sm', children: [(0, jsx_runtime_1.jsx)("div", { className: 'rounded bg-blue-200 p-1 text-xs dark:text-gray-700 ', children: "Add Media " }), (0, jsx_runtime_1.jsx)("div", { className: 'text-skin-link underline', children: "Add from URL " })] }), (0, jsx_runtime_1.jsx)("div", { className: 'mt-2 text-xs text-gray-400', children: "Accepts images or videos " })] }));
-};
+const ClassicThumbnail = ({ className, onClick }) => ((0, jsx_runtime_1.jsx)("div", { onClick: onClick, className: (0, utils_1.cn)(Thumbnail_classnames_1.default.classicThumbnail, className), children: (0, jsx_runtime_1.jsxs)(Stack_1.Stack, { vertical: true, gap: '2', align: 'center', inlineAlign: 'center', children: [(0, jsx_runtime_1.jsx)("div", { className: Thumbnail_classnames_1.default.addMediaContainer, children: (0, jsx_runtime_1.jsx)("div", { className: Thumbnail_classnames_1.default.addMedia, children: "Add Media" }) }), (0, jsx_runtime_1.jsx)("div", { className: Thumbnail_classnames_1.default.addFromUrl, children: "Add from URL" }), (0, jsx_runtime_1.jsx)(Text_1.Text, { color: 'subdued', variant: 'bodyXs', alignment: 'center', children: "accepts images or videos" })] }) }));
 exports.ClassicThumbnail = ClassicThumbnail;
+const DefaultThumbnail = ({ className, onClick }) => ((0, jsx_runtime_1.jsx)("div", { onClick: onClick, className: (0, utils_1.cn)(Thumbnail_classnames_1.default.classicThumbnail, className), style: { marginTop: '10px', marginLeft: '10px' }, children: (0, jsx_runtime_1.jsx)(Stack_1.Stack, { vertical: true, gap: '2', align: 'center', inlineAlign: 'center', children: (0, jsx_runtime_1.jsx)("div", { className: Thumbnail_classnames_1.default.addMediaContainer, children: (0, jsx_runtime_1.jsx)("div", { className: Thumbnail_classnames_1.default.addMedia, children: "Add Media" }) }) }) }));
+exports.DefaultThumbnail = DefaultThumbnail;

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

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const ThumbnailClassnames = {
+    "thumbnailContainer": "Thumbnail-thumbnailContainer",
+    "thumbnail": "Thumbnail-thumbnail",
+    "dragging": "Thumbnail-dragging",
+    "sizeSm": "Thumbnail-sizeSm",
+    "sizeNormal": "Thumbnail-sizeNormal",
+    "sizeM": "Thumbnail-sizeM",
+    "sizeLg": "Thumbnail-sizeLg",
+    "sizeXl": "Thumbnail-sizeXl",
+    "sizeNone": "Thumbnail-sizeNone",
+    "sizeFull": "Thumbnail-sizeFull",
+    "variantRectangle": "Thumbnail-variantRectangle",
+    "variantCircle": "Thumbnail-variantCircle",
+    "content": "Thumbnail-content",
+    "dragAndDropText": "Thumbnail-dragAndDropText",
+    "classicThumbnail": "Thumbnail-classicThumbnail",
+    "addMediaContainer": "Thumbnail-addMediaContainer",
+    "addMedia": "Thumbnail-addMedia",
+    "addFromUrl": "Thumbnail-addFromUrl",
+    "acceptText": "Thumbnail-acceptText"
+};
+exports.default = ThumbnailClassnames;

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

@@ -29,6 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.UploadContainer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const Grid_1 = require("../../../Grid");
 const HorizontalStack_1 = require("../../../HorizontalStack");
 const Label_1 = require("../../../Label");
 const Text_1 = require("../../../Text");
@@ -79,13 +80,13 @@ const UploadContainer = ({ title, customThumbnail, attachmentKey, initialAttachm
                     removeAttachment: removeSelectedAttachment,
                     openModal: setUploadModalActive,
                     attachmentKey: attachmentKey,
-                }), (0, jsx_runtime_1.jsxs)(HorizontalStack_1.HorizontalStack, { gap: { xs: '4', md: '8' }, blockAlign: 'center', wrap: false, children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("div", { "aria-label": 'uploader grid', children: [((_a = selectedAttachments === null || selectedAttachments === void 0 ? void 0 : selectedAttachments[key]) === null || _a === void 0 ? void 0 : _a.length) && !customAttachmentsList
-                                    ? (_b = selectedAttachments === null || selectedAttachments === void 0 ? void 0 : selectedAttachments[key]) === null || _b === void 0 ? void 0 : _b.map((file, idx) => {
-                                        return ((0, jsx_runtime_1.jsx)(UploaderButtonFileList_1.default, { thumbnailSize: thumbnailSize, file: file, onRemove: () => {
-                                                removeSelectedAttachment(file, key);
-                                            }, openUploadModal: () => toggleUploadModalActive({ key: key }) }, idx));
-                                    })
-                                    : null, !(((_c = selectedAttachments === null || selectedAttachments === void 0 ? void 0 : selectedAttachments[key]) === null || _c === void 0 ? void 0 : _c.length) >= maxAttachments) &&
-                                    (thumbnailType ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: thumbnailType == 'classic' && ((0, jsx_runtime_1.jsx)(Thumbanail_1.ClassicThumbnail, { onClick: () => setUploadModalActive({ key: key }), className: thumbnailClassName })) })) : customThumbnail ? ((0, jsx_runtime_1.jsx)("div", { "aria-label": 'customThumbnail', className: thumbnailClassName, onClick: () => setUploadModalActive({ key: key }), children: customThumbnail })) : ((0, jsx_runtime_1.jsx)(Thumbanail_1.default, { thumbnailClassName: thumbnailClassName, onClick: () => setUploadModalActive({ key: key }), acceptFileTypes: allowedFileTypes, thumbnailSize: thumbnailSize })))] }) }), info && ((0, jsx_runtime_1.jsxs)(VerticalStack_1.VerticalStack, { gap: { xs: '2', md: '2' }, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { variant: 'headingSm', children: label }), (0, jsx_runtime_1.jsx)(Text_1.Text, { color: 'subdued', children: info })] }))] })] }));
+                }), (0, jsx_runtime_1.jsxs)(HorizontalStack_1.HorizontalStack, { gap: { xs: '4', md: '8' }, blockAlign: 'center', wrap: false, children: [(0, jsx_runtime_1.jsxs)(Grid_1.Grid, { columns: { xs: 3, sm: 3, md: 4, lg: 5, xl: 5 }, children: [((_a = selectedAttachments === null || selectedAttachments === void 0 ? void 0 : selectedAttachments[key]) === null || _a === void 0 ? void 0 : _a.length) && !customAttachmentsList
+                                ? (_b = selectedAttachments === null || selectedAttachments === void 0 ? void 0 : selectedAttachments[key]) === null || _b === void 0 ? void 0 : _b.map((file, idx) => {
+                                    return ((0, jsx_runtime_1.jsx)(UploaderButtonFileList_1.default, { thumbnailSize: thumbnailSize, file: file, onRemove: () => {
+                                            removeSelectedAttachment(file, key);
+                                        }, openUploadModal: () => toggleUploadModalActive({ key: key }) }, idx));
+                                })
+                                : null, !(((_c = selectedAttachments === null || selectedAttachments === void 0 ? void 0 : selectedAttachments[key]) === null || _c === void 0 ? void 0 : _c.length) >= maxAttachments) &&
+                                (thumbnailType ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: thumbnailType == 'classic' && ((0, jsx_runtime_1.jsx)(Thumbanail_1.ClassicThumbnail, { onClick: () => setUploadModalActive({ key: key }), className: thumbnailClassName })) })) : customThumbnail ? ((0, jsx_runtime_1.jsx)("div", { "aria-label": 'customThumbnail', className: thumbnailClassName, onClick: () => setUploadModalActive({ key: key }), children: customThumbnail })) : ((0, jsx_runtime_1.jsx)(Thumbanail_1.default, { thumbnailClassName: thumbnailClassName, onClick: () => setUploadModalActive({ key: key }), acceptFileTypes: allowedFileTypes, thumbnailSize: thumbnailSize })))] }), info && ((0, jsx_runtime_1.jsxs)(VerticalStack_1.VerticalStack, { gap: { xs: '2', md: '2' }, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { variant: 'headingSm', children: label }), (0, jsx_runtime_1.jsx)(Text_1.Text, { color: 'subdued', children: info })] }))] })] }));
 };
 exports.UploadContainer = UploadContainer;

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const UploaderButtonClassnames = {
+    "uploader-button-file-list": "UploaderButton-uploader-button-file-list",
+    "rectangle": "UploaderButton-rectangle",
+    "circle": "UploaderButton-circle",
+    "action-buttons": "UploaderButton-action-buttons",
+    "file-upload": "UploaderButton-file-upload",
+    "thumb-sizes-sm": "UploaderButton-thumb-sizes-sm",
+    "thumb-sizes-normal": "UploaderButton-thumb-sizes-normal",
+    "thumb-sizes-normal-sm": "UploaderButton-thumb-sizes-normal-sm",
+    "thumb-sizes-m": "UploaderButton-thumb-sizes-m",
+    "thumb-sizes-lg": "UploaderButton-thumb-sizes-lg",
+    "thumb-sizes-xl": "UploaderButton-thumb-sizes-xl",
+    "thumb-sizes-none": "UploaderButton-thumb-sizes-none"
+};
+exports.default = UploaderButtonClassnames;

package/dist/src/components/Upload/components/UploaderButton/UploaderButtonFileList.js

@@ -1,12 +1,16 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable @next/next/no-img-element */
 const utils_1 = require("../../../../utils");
-const Icon_1 = require("../../../Icon");
+const Button_1 = require("../../../Button");
 const Icons_1 = require("../../../Icons");
 const Image_1 = require("../../../Image");
 const FileViewer_1 = require("../FileViewer");
+const UploaderButton_classnames_1 = __importDefault(require("./UploaderButton.classnames"));
 /**
  * Renders a file list for an uploader button component
  *
@@ -14,28 +18,20 @@ const FileViewer_1 = require("../FileViewer");
  * @returns The rendered component
  */
 const UploaderButtonFileList = ({ file, onRemove, openUploadModal, thumbnailSize = 'normal', thumbnailVariant = 'square', }) => {
-    // let isId = fileIds.findIndex(({ id }) => id == file.id);
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const thumbSizes = {
-        // sm: 'h-[250px] w-[250px] ',
-        // normal: 'h-[250px] w-[250px] ',
-        sm: 'h-16 w-[68px]',
-        // normal: 'h-[133px] w-[115px] sm:w-[133px]',
-        // m: 'h-[100px] w-[100px]',
-        // lg: 'h-[250px] w-[250px] ',
-        // xl: 'h-[250px] w-[350px]',
-        // none: 'w-full h-full',
-    };
     const thumbnailVariantClasses = {
-        rectangle: '!h-full !w-full',
+        rectangle: UploaderButton_classnames_1.default.rectangle,
         square: '',
-        circle: '!rounded-full',
+        circle: UploaderButton_classnames_1.default.circle,
+    };
+    const thumbnailSizeClasses = {
+        sm: UploaderButton_classnames_1.default['thumb-sizes-sm'],
+        normal: UploaderButton_classnames_1.default['thumb-sizes-normal'],
+        'normal-sm': UploaderButton_classnames_1.default['thumb-sizes-normal-sm'],
+        m: UploaderButton_classnames_1.default['thumb-sizes-m'],
+        lg: UploaderButton_classnames_1.default['thumb-sizes-lg'],
+        xl: UploaderButton_classnames_1.default['thumb-sizes-xl'],
+        none: UploaderButton_classnames_1.default['thumb-sizes-none'],
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('dw-full dw-full dmax-h-40 dmax-h-64 relative flex w-full cursor-pointer select-none flex-col items-center overflow-hidden rounded border text-center dark:border-gray-500', thumbnailVariantClasses[thumbnailVariant], 
-        //@ts-ignore
-        thumbSizes[thumbnailSize] || 'h-full'), children: [(0, jsx_runtime_1.jsxs)("div", { className: 'absolute top-0 right-0 z-10 flex cursor-pointer flex-col space-y-2 divide-y rounded-bl bg-white  focus:outline-none', children: [thumbnailSize !== 'sm' && ((0, jsx_runtime_1.jsx)("button", { type: 'button', className: 'p-0.5 hover:bg-gray-200', onClick: openUploadModal, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaEdit, color: 'highlight' }) })), (0, jsx_runtime_1.jsx)("button", { type: 'button', className: 'p-0.5 hover:bg-gray-200', onClick: onRemove, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaDelete, color: 'critical' }) })] }), (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('file_upload relative flex items-center justify-center rounded-md ', 
-                //   ' border-[2px] border-dashed border-gray-600 p-4',
-                // thumbSizes[thumbnailSize] || 'h-full',
-                'h-full w-full', thumbnailVariantClasses[thumbnailVariant]), onClick: openUploadModal, children: thumbnailSize == 'sm' && (file === null || file === void 0 ? void 0 : file.type) == 'image' ? ((0, jsx_runtime_1.jsx)(Image_1.Image, { source: file === null || file === void 0 ? void 0 : file.src, alt: 'd' })) : ((0, jsx_runtime_1.jsx)(FileViewer_1.FileViewer, { className: (0, utils_1.cn)(thumbnailVariantClasses[thumbnailVariant]), file: file, disabled: false, unAcceptedType: undefined })) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)(UploaderButton_classnames_1.default['uploader-button-file-list'], thumbnailVariantClasses[thumbnailVariant], thumbnailSizeClasses[thumbnailSize] || UploaderButton_classnames_1.default['thumb-sizes-none']), children: [(0, jsx_runtime_1.jsxs)("div", { className: UploaderButton_classnames_1.default['action-buttons'], children: [thumbnailSize !== 'sm' && (0, jsx_runtime_1.jsx)(Button_1.Button, { plain: true, icon: Icons_1.MaEdit, onClick: openUploadModal }), (0, jsx_runtime_1.jsx)(Button_1.Button, { plain: true, destructive: true, icon: Icons_1.MaDelete, onClick: onRemove })] }), (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)(UploaderButton_classnames_1.default['file-upload'], thumbnailVariantClasses[thumbnailVariant]), onClick: openUploadModal, children: thumbnailSize === 'sm' && (file === null || file === void 0 ? void 0 : file.type) === 'image' ? ((0, jsx_runtime_1.jsx)(Image_1.Image, { source: file === null || file === void 0 ? void 0 : file.src, alt: 'Thumbnail' })) : ((0, jsx_runtime_1.jsx)(FileViewer_1.FileViewer, { className: thumbnailVariantClasses[thumbnailVariant], file: file, disabled: false, unAcceptedType: undefined })) })] }));
 };
 exports.default = UploaderButtonFileList;

package/dist/src/components/Upload/components/UploaderInput/FileUploadInput.classnames.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const FileUploadInputClassnames = {
+    "fileUploadInput__container": "FileUploadInput-fileUploadInput__container",
+    "fileUploadInput__dropzone": "FileUploadInput-fileUploadInput__dropzone",
+    "fileUploadInput__dropzone--dragging": "FileUploadInput-fileUploadInput__dropzone--dragging",
+    "fileUploadInput__input": "FileUploadInput-fileUploadInput__input",
+    "pendingUploadFileList__item": "FileUploadInput-pendingUploadFileList__item",
+    "pendingUploadFileList__item--dark": "FileUploadInput-pendingUploadFileList__item--dark",
+    "pendingUploadFileList__deleteButton": "FileUploadInput-pendingUploadFileList__deleteButton",
+    "pendingUploadFileList__preview": "FileUploadInput-pendingUploadFileList__preview",
+    "pendingUploadFileList__preview--dark": "FileUploadInput-pendingUploadFileList__preview--dark",
+    "pendingUploadFileList__fileInfo": "FileUploadInput-pendingUploadFileList__fileInfo",
+    "pendingUploadFileList__fileName": "FileUploadInput-pendingUploadFileList__fileName",
+    "pendingUploadFileList__fileSize": "FileUploadInput-pendingUploadFileList__fileSize",
+    "pendingUploadFileList__progressBar": "FileUploadInput-pendingUploadFileList__progressBar",
+    "pendingUploadFileList__progressBar--dark": "FileUploadInput-pendingUploadFileList__progressBar--dark",
+    "pendingUploadFileList__progress": "FileUploadInput-pendingUploadFileList__progress",
+    "pendingUploadFileList__progress--error": "FileUploadInput-pendingUploadFileList__progress--error",
+    "pendingUploadFileList__progress--complete": "FileUploadInput-pendingUploadFileList__progress--complete",
+    "pendingUploadFileList__progress--loading": "FileUploadInput-pendingUploadFileList__progress--loading"
+};
+exports.default = FileUploadInputClassnames;

package/dist/src/components/Upload/components/UploaderInput/FileUploadInput.js

@@ -7,13 +7,17 @@ exports.PendingUploadFileList = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const utils_1 = require("../../../../utils");
+const Button_1 = require("../../../Button");
+const Icons_1 = require("../../../Icons");
 const utils_2 = require("../../utils");
 const FileViewer_1 = require("../FileViewer");
 const Thumbanail_1 = __importDefault(require("../Thumbnail/Thumbanail"));
 const UploadProvider_1 = require("../UploadProvider");
+const FileUploadInput_classnames_1 = __importDefault(require("./FileUploadInput.classnames"));
 function FileUploadInput({ acceptFileTypes, updateUploadsList }) {
     const { error, files, setFiles, removeFile, progress } = (0, UploadProvider_1.useUpload)();
-    const inputRef = (0, react_1.useRef)();
+    const inputRef = (0, react_1.useRef)(null);
+    const [dragging, setDragging] = (0, react_1.useState)(false);
     const acceptFilesLike = (0, utils_2.getAceptedFileTypesValues)(acceptFileTypes);
     const initiateUpload = async (file) => {
         const newAttachments = await setFiles(file);
@@ -21,7 +25,6 @@ function FileUploadInput({ acceptFileTypes, updateUploadsList }) {
             updateUploadsList === null || updateUploadsList === void 0 ? void 0 : updateUploadsList(newAttachments);
         }
     };
-    const [dragging, setDragging] = (0, react_1.useState)(false);
     const handleDragStart = (e) => {
         e.stopPropagation();
         e.preventDefault();
@@ -35,30 +38,19 @@ function FileUploadInput({ acceptFileTypes, updateUploadsList }) {
         e.stopPropagation();
         e.preventDefault();
         setDragging(false);
+        initiateUpload(e);
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: 'relative flex items-center justify-self-center', children: (0, jsx_runtime_1.jsxs)("div", { className: 'relative w-full', onDragStart: handleDragStart, onDragEnter: handleDragStart, onDragOver: handleDragOver, onDrop: (e) => {
-                        e.stopPropagation();
-                        e.preventDefault();
-                        handleDrop(e);
-                        initiateUpload(e);
-                    }, children: [(0, jsx_runtime_1.jsx)(Thumbanail_1.default, { acceptFileTypes: acceptFileTypes, thumbnailSize: 'normal', hasDragAndDrop: true, dragging: dragging }), (0, jsx_runtime_1.jsx)("input", { accept: acceptFilesLike, type: 'file', multiple: true, className: 'absolute inset-0 z-50  m-0 h-full w-full cursor-pointer p-0 opacity-0 outline-none', title: '', onChange: (e) => {
-                                initiateUpload(e);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: FileUploadInput_classnames_1.default.fileUploadInput__container, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)(FileUploadInput_classnames_1.default.fileUploadInput__dropzone, dragging && FileUploadInput_classnames_1.default['fileUploadInput__dropzone--dragging']), style: { borderRadius: 'var(--p-border-radius-3)' }, onDragEnter: handleDragStart, onDragOver: handleDragOver, onDrop: handleDrop, children: [(0, jsx_runtime_1.jsx)(Thumbanail_1.default, { acceptFileTypes: acceptFileTypes, thumbnailSize: 'normal', hasDragAndDrop: true, dragging: dragging }), (0, jsx_runtime_1.jsx)("input", { accept: acceptFilesLike, type: 'file', multiple: true, className: FileUploadInput_classnames_1.default.fileUploadInput__input, title: 'input', onChange: (e) => {
+                                if (e.target.files)
+                                    initiateUpload(e);
                             }, ref: inputRef })] }) }), (0, jsx_runtime_1.jsx)(exports.PendingUploadFileList, { files: files, removeFile: removeFile, progress: progress, error: error })] }));
 }
 exports.default = FileUploadInput;
 const PendingUploadFileList = ({ files, removeFile, progress, error, }) => {
-    return (
-    // eslint-disable-next-line react/jsx-no-useless-fragment
-    (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: files === null || files === void 0 ? void 0 : files.map((file, idx) => {
-            return ((0, jsx_runtime_1.jsxs)("div", { className: ' relative flex cursor-move select-none flex-col items-center overflow-hidden rounded border bg-gray-100  text-center dark:bg-gray-600', style: { paddingTop: '100%' }, children: [(0, jsx_runtime_1.jsx)("button", { className: 'bg-skin-primary absolute top-0 right-0 z-50 rounded-bl p-1 focus:outline-none', type: 'button', onClick: () => removeFile(file.name) }), (0, jsx_runtime_1.jsx)("div", { className: 'preview dh-full dw-full absolute inset-0 z-0  border-4 border-white object-cover dark:border-gray-600', children: (0, jsx_runtime_1.jsx)(FileViewer_1.FileViewer, { file: {
-                                ...file,
-                                src: URL.createObjectURL(file),
-                                type: (0, utils_2.getFileTypeCategory)(file === null || file === void 0 ? void 0 : file.type) || 'image',
-                            } }) }), (0, jsx_runtime_1.jsxs)("div", { className: 'bg-skin-primary absolute bottom-0 left-0 right-0 flex flex-col bg-opacity-50 p-2 text-xs', children: [(0, jsx_runtime_1.jsx)("span", { className: 'hi w-full truncate font-bold text-gray-900', children: file === null || file === void 0 ? void 0 : file.name }), (0, jsx_runtime_1.jsxs)("span", { className: 'text-xs text-gray-900', children: [file === null || file === void 0 ? void 0 : file.size, " ..."] })] }), (0, jsx_runtime_1.jsx)("div", { className: 'absolute inset-0 z-40 transition-colors duration-300' }), (0, jsx_runtime_1.jsx)("div", { className: 'absolute bottom-0 w-full rounded-full bg-gray-200 dark:bg-gray-700', children: (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)(' rounded-fulld line-clamp-1 rounded-r-full p-[1px] text-center text-xs font-medium leading-none text-blue-100', error
-                                ? '!w-full bg-red-500'
-                                : progress === 100
-                                    ? '!rounded-none bg-green-600'
-                                    : 'bg-blue-600'), style: { width: `${progress}%` }, children: error ? error : `${progress}%` }) })] }, idx));
-        }) }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: files === null || files === void 0 ? void 0 : files.map((file, idx) => ((0, jsx_runtime_1.jsxs)("div", { className: FileUploadInput_classnames_1.default.pendingUploadFileList__item, children: [(0, jsx_runtime_1.jsx)("div", { className: FileUploadInput_classnames_1.default.pendingUploadFileList__deleteButton, role: 'button', children: (0, jsx_runtime_1.jsx)(Button_1.Button, { plain: true, icon: Icons_1.MaTrash, destructive: true, onClick: () => removeFile(file.name) }) }), (0, jsx_runtime_1.jsx)("div", { className: FileUploadInput_classnames_1.default.pendingUploadFileList__preview, children: (0, jsx_runtime_1.jsx)(FileViewer_1.FileViewer, { file: {
+                            ...file,
+                            src: URL.createObjectURL(file),
+                            type: (0, utils_2.getFileTypeCategory)(file === null || file === void 0 ? void 0 : file.type) || 'image',
+                        } }) }), (0, jsx_runtime_1.jsxs)("div", { className: FileUploadInput_classnames_1.default.pendingUploadFileList__fileInfo, children: [(0, jsx_runtime_1.jsx)("span", { className: FileUploadInput_classnames_1.default.pendingUploadFileList__fileName, children: file === null || file === void 0 ? void 0 : file.name }), (0, jsx_runtime_1.jsxs)("span", { className: FileUploadInput_classnames_1.default.pendingUploadFileList__fileSize, children: [file === null || file === void 0 ? void 0 : file.size, " ..."] })] }), (0, jsx_runtime_1.jsx)("div", { className: FileUploadInput_classnames_1.default.pendingUploadFileList__progressBar, children: (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)(FileUploadInput_classnames_1.default.pendingUploadFileList__progress, error && FileUploadInput_classnames_1.default['pendingUploadFileList__progress--error'], progress === 100 && FileUploadInput_classnames_1.default['pendingUploadFileList__progress--complete'], !error && progress < 100 && FileUploadInput_classnames_1.default['pendingUploadFileList__progress--loading']), style: { width: `${error ? 100 : progress}%` }, children: error ? error === null || error === void 0 ? void 0 : error.slice(0, 15) : `${progress}%` }) })] }, idx))) }));
 };
 exports.PendingUploadFileList = PendingUploadFileList;

package/dist/src/components/VerticalStack/VerticalStack.js

@@ -7,7 +7,7 @@ exports.VerticalStack = void 0;
 const react_1 = __importDefault(require("react"));
 const css_1 = require("../../utilities/css");
 const VerticalStack_classnames_1 = __importDefault(require("./VerticalStack.classnames"));
-const VerticalStack = ({ as = 'div', children, align, inlineAlign, gap, id, height, width, reverseOrder = false, ...restProps }) => {
+const VerticalStack = ({ as = 'div', children, align, inlineAlign, gap, id, height, width, reverseOrder = false, spacer, ...restProps }) => {
     const heightClasses = {
         auto: 'h-auto',
         full: 'h-full',
@@ -20,7 +20,7 @@ const VerticalStack = ({ as = 'div', children, align, inlineAlign, gap, id, heig
         max: 'w-max',
         none: '',
     }[width !== null && width !== void 0 ? width : 'none'];
-    const className = (0, css_1.classNames)(VerticalStack_classnames_1.default.VerticalStack, (as === 'ul' || as === 'ol') && VerticalStack_classnames_1.default.listReset, as === 'fieldset' && VerticalStack_classnames_1.default.fieldsetReset, heightClasses, widthClasses);
+    const className = (0, css_1.classNames)(VerticalStack_classnames_1.default.VerticalStack, (as === 'ul' || as === 'ol') && VerticalStack_classnames_1.default.listReset, as === 'fieldset' && VerticalStack_classnames_1.default.fieldsetReset, heightClasses, widthClasses, spacer && '');
     const style = {
         '--pc-vertical-stack-align': align ? `${align}` : '',
         '--pc-vertical-stack-inline-align': inlineAlign ? `${inlineAlign}` : '',

package/dist/src/components/index.js

@@ -14,6 +14,7 @@ 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 });
+exports.Card = void 0;
 __exportStar(require("./ActionMenu"), exports);
 __exportStar(require("./AppProvider"), exports);
 __exportStar(require("./Autocomplete"), exports);
@@ -45,6 +46,8 @@ __exportStar(require("./Image"), exports);
 __exportStar(require("./KeyboardKey"), exports);
 __exportStar(require("./Label"), exports);
 __exportStar(require("./LegacyCard"), exports);
+var LegacyCard_1 = require("./LegacyCard");
+Object.defineProperty(exports, "Card", { enumerable: true, get: function () { return LegacyCard_1.LegacyCard; } });
 __exportStar(require("./LegacyStack"), exports);
 __exportStar(require("./Link"), exports);
 __exportStar(require("./Listbox"), exports);

package/dist/src/index.js

@@ -15,13 +15,14 @@ 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 });
-exports.rgbString = exports.rgbaString = exports.hslToRgb = exports.hsbToRgb = exports.hsbToHex = exports.hexToRgb = exports.Upload = exports.FileViewer = exports.TopBar = exports.Toast = exports.Switch = exports.SkeletonThumbnail = exports.SkeletonTabs = exports.SkeletonTable = exports.SkeletonPage = exports.SkeletonDisplayText = exports.SkeletonBodyText = exports.Scrollable = exports.ResourceList = exports.ResourceItem = exports.PaginationV1 = exports.VerticalSingleMenuItem = exports.VerticalCollapsedMenuItem = exports.CollapsedMenuItemList = exports.Navigation = exports.isNavigationItemActive = exports.Loading = exports.Layout = exports.Input = exports.Indicator = exports.IndexTable = exports.useSetIndexFiltersMode = exports.IndexFiltersMode = exports.IndexFilters = exports.FlexBox = exports.DataTable = exports.ContextualSaveBar = exports.ChoiceCard = exports.CheckboxTree = exports.ButtonGroup = exports.CopyButton = exports.buttonsFrom = exports.buttonFrom = exports.Button = exports.BadgeStatusValue = exports.BadgeProgressValue = exports.Badge = exports.Avatar = exports.AlphaTabs = exports.ActionList = void 0;
-exports.useIndexResourceState = exports.useFrame = exports.useDeviceType = exports.cn = exports.rgbToHsl = exports.rgbToHsb = exports.rgbToHex = void 0;
+exports.hsbToHex = exports.hexToRgb = exports.capitalize = exports.Upload = exports.FileViewer = exports.TopBar = exports.Toast = exports.Switch = exports.SkeletonThumbnail = exports.SkeletonTabs = exports.SkeletonTable = exports.SkeletonPage = exports.SkeletonDisplayText = exports.SkeletonBodyText = exports.Scrollable = exports.ResourceList = exports.ResourceItem = exports.PaginationV1 = exports.VerticalSingleMenuItem = exports.VerticalCollapsedMenuItem = exports.CollapsedMenuItemList = exports.isNavigationItemActive = exports.Navigation = exports.Loading = exports.Layout = exports.Input = exports.InlineError = exports.Indicator = exports.IndexTable = exports.useSetIndexFiltersMode = exports.IndexFiltersMode = exports.IndexFilters = exports.FlexBox = exports.DatePicker = exports.DataTable = exports.ContextualSaveBar = exports.ChoiceCard = exports.CheckboxTree = exports.ButtonGroup = exports.buttonsFrom = exports.buttonFrom = exports.CopyButton = exports.Button = exports.BadgeStatusValue = exports.BadgeProgressValue = exports.Badge = exports.Avatar = exports.Tabs = exports.AlphaTabs = exports.ActionList = void 0;
+exports.useIndexResourceState = exports.renderSafeTemplate = exports.useFrame = exports.useDeviceType = exports.cn = exports.rgbaString = exports.rgbToHsl = exports.rgbToHsb = exports.rgbToHex = exports.rgbString = exports.hslToRgb = exports.hsbToRgb = void 0;
 __exportStar(require("./components"), exports);
 var ActionList_1 = require("./components/ActionList");
 Object.defineProperty(exports, "ActionList", { enumerable: true, get: function () { return ActionList_1.ActionList; } });
 var AlphaTabs_1 = require("./components/AlphaTabs");
 Object.defineProperty(exports, "AlphaTabs", { enumerable: true, get: function () { return AlphaTabs_1.AlphaTabs; } });
+Object.defineProperty(exports, "Tabs", { enumerable: true, get: function () { return AlphaTabs_1.AlphaTabs; } });
 var Avatar_1 = require("./components/Avatar");
 Object.defineProperty(exports, "Avatar", { enumerable: true, get: function () { return Avatar_1.Avatar; } });
 var Badge_1 = require("./components/Badge");
@@ -30,9 +31,9 @@ Object.defineProperty(exports, "BadgeProgressValue", { enumerable: true, get: fu
 Object.defineProperty(exports, "BadgeStatusValue", { enumerable: true, get: function () { return Badge_1.StatusValue; } });
 var Button_1 = require("./components/Button");
 Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return Button_1.Button; } });
+Object.defineProperty(exports, "CopyButton", { enumerable: true, get: function () { return Button_1.CopyButton; } });
 Object.defineProperty(exports, "buttonFrom", { enumerable: true, get: function () { return Button_1.buttonFrom; } });
 Object.defineProperty(exports, "buttonsFrom", { enumerable: true, get: function () { return Button_1.buttonsFrom; } });
-Object.defineProperty(exports, "CopyButton", { enumerable: true, get: function () { return Button_1.CopyButton; } });
 var ButtonGroup_1 = require("./components/ButtonGroup");
 Object.defineProperty(exports, "ButtonGroup", { enumerable: true, get: function () { return ButtonGroup_1.ButtonGroup; } });
 var CheckboxTree_1 = require("./components/CheckboxTree");
@@ -43,6 +44,8 @@ var ContextualSaveBar_1 = require("./components/ContextualSaveBar");
 Object.defineProperty(exports, "ContextualSaveBar", { enumerable: true, get: function () { return ContextualSaveBar_1.ContextualSaveBar; } });
 var DataTable_1 = require("./components/DataTable");
 Object.defineProperty(exports, "DataTable", { enumerable: true, get: function () { return DataTable_1.DataTable; } });
+var DatePicker_1 = require("./components/DatePicker");
+Object.defineProperty(exports, "DatePicker", { enumerable: true, get: function () { return DatePicker_1.DatePicker; } });
 var FlexBox_1 = require("./components/FlexBox");
 Object.defineProperty(exports, "FlexBox", { enumerable: true, get: function () { return FlexBox_1.FlexBox; } });
 var IndexFilters_1 = require("./components/IndexFilters");
@@ -53,6 +56,8 @@ var IndexTable_1 = require("./components/IndexTable");
 Object.defineProperty(exports, "IndexTable", { enumerable: true, get: function () { return IndexTable_1.IndexTable; } });
 var Indicator_1 = require("./components/Indicator");
 Object.defineProperty(exports, "Indicator", { enumerable: true, get: function () { return Indicator_1.Indicator; } });
+var InlineError_1 = require("./components/InlineError");
+Object.defineProperty(exports, "InlineError", { enumerable: true, get: function () { return InlineError_1.InlineError; } });
 var Input_1 = require("./components/Input");
 Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return Input_1.Input; } });
 var Layout_1 = require("./components/Layout");
@@ -60,8 +65,8 @@ Object.defineProperty(exports, "Layout", { enumerable: true, get: function () {
 var Loading_1 = require("./components/Loading");
 Object.defineProperty(exports, "Loading", { enumerable: true, get: function () { return Loading_1.Loading; } });
 var Navigation_1 = require("./components/Navigation");
-Object.defineProperty(exports, "isNavigationItemActive", { enumerable: true, get: function () { return Navigation_1.isNavigationItemActive; } });
 Object.defineProperty(exports, "Navigation", { enumerable: true, get: function () { return Navigation_1.Navigation; } });
+Object.defineProperty(exports, "isNavigationItemActive", { enumerable: true, get: function () { return Navigation_1.isNavigationItemActive; } });
 var VerticalMenuContent_1 = require("./components/NavigationV1/VerticalMenuContent");
 Object.defineProperty(exports, "CollapsedMenuItemList", { enumerable: true, get: function () { return VerticalMenuContent_1.CollapsedMenuItemList; } });
 Object.defineProperty(exports, "VerticalCollapsedMenuItem", { enumerable: true, get: function () { return VerticalMenuContent_1.VerticalCollapsedMenuItem; } });
@@ -95,21 +100,25 @@ Object.defineProperty(exports, "TopBar", { enumerable: true, get: function () {
 var Upload_1 = require("./components/Upload");
 Object.defineProperty(exports, "FileViewer", { enumerable: true, get: function () { return Upload_1.FileViewer; } });
 Object.defineProperty(exports, "Upload", { enumerable: true, get: function () { return Upload_1.Upload; } });
+var capitalize_1 = require("./utilities/capitalize");
+Object.defineProperty(exports, "capitalize", { enumerable: true, get: function () { return capitalize_1.capitalize; } });
 var color_transformers_1 = require("./utilities/color-transformers");
 Object.defineProperty(exports, "hexToRgb", { enumerable: true, get: function () { return color_transformers_1.hexToRgb; } });
 Object.defineProperty(exports, "hsbToHex", { enumerable: true, get: function () { return color_transformers_1.hsbToHex; } });
 Object.defineProperty(exports, "hsbToRgb", { enumerable: true, get: function () { return color_transformers_1.hsbToRgb; } });
 Object.defineProperty(exports, "hslToRgb", { enumerable: true, get: function () { return color_transformers_1.hslToRgb; } });
-Object.defineProperty(exports, "rgbaString", { enumerable: true, get: function () { return color_transformers_1.rgbaString; } });
 Object.defineProperty(exports, "rgbString", { enumerable: true, get: function () { return color_transformers_1.rgbString; } });
 Object.defineProperty(exports, "rgbToHex", { enumerable: true, get: function () { return color_transformers_1.rgbToHex; } });
 Object.defineProperty(exports, "rgbToHsb", { enumerable: true, get: function () { return color_transformers_1.rgbToHsb; } });
 Object.defineProperty(exports, "rgbToHsl", { enumerable: true, get: function () { return color_transformers_1.rgbToHsl; } });
+Object.defineProperty(exports, "rgbaString", { enumerable: true, get: function () { return color_transformers_1.rgbaString; } });
 var css_1 = require("./utilities/css");
 Object.defineProperty(exports, "cn", { enumerable: true, get: function () { return css_1.classNames; } });
 var device_type_1 = require("./utilities/device-type");
 Object.defineProperty(exports, "useDeviceType", { enumerable: true, get: function () { return device_type_1.useDeviceType; } });
 var frame_1 = require("./utilities/frame");
 Object.defineProperty(exports, "useFrame", { enumerable: true, get: function () { return frame_1.useFrame; } });
+var renderSafeTemplate_1 = require("./utilities/renderSafeTemplate");
+Object.defineProperty(exports, "renderSafeTemplate", { enumerable: true, get: function () { return renderSafeTemplate_1.renderSafeTemplate; } });
 var use_index_resource_state_1 = require("./utilities/use-index-resource-state");
 Object.defineProperty(exports, "useIndexResourceState", { enumerable: true, get: function () { return use_index_resource_state_1.useIndexResourceState; } });

package/dist/src/utilities/capitalize.js

@@ -1,8 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.capitalize = void 0;
-function capitalize(word = '') {
-    const wordLower = word.toLowerCase();
-    return wordLower.charAt(0).toUpperCase() + wordLower.slice(1);
+/**
+ * Capitalizes the first letter of a string and makes the rest of the string lowercase.
+ * @param {string | null | undefined} str - The input string to be processed. Can be a string, null, or undefined.
+ * @returns {string} - The formatted string with the first letter capitalized and the rest lowercase.
+ *                     If the input is null or undefined, an empty string is returned.
+ * @example
+ * capitalizeFirstLetter("hello"); // Returns "Hello"
+ * capitalizeFirstLetter("HELLO"); // Returns "Hello"
+ * capitalizeFirstLetter(null);    // Returns ""
+ * capitalizeFirstLetter(undefined); // Returns ""
+ */
+function capitalize(str) {
+    // Ensure the input is treated as a string (convert null/undefined to an empty string)
+    const inputString = str || '';
+    // Return the formatted string
+    return inputString.charAt(0).toUpperCase() + inputString.slice(1).toLowerCase();
 }
 exports.capitalize = capitalize;