@heymantle/litho 0.0.3 → 0.0.5

package/dist/cjs/components/DropZone.js

@@ -12,7 +12,14 @@ Object.defineProperty(exports, "default", {
 var _jsxruntime = require("react/jsx-runtime");
 var _react = require("react");
 var _tailwindvariants = require("tailwind-variants");
-var _index = require("../index");
+var _Button = /*#__PURE__*/ _interop_require_default(require("./Button"));
+var _Icon = /*#__PURE__*/ _interop_require_default(require("./Icon"));
+var _InlineError = /*#__PURE__*/ _interop_require_default(require("./InlineError"));
+var _Label = /*#__PURE__*/ _interop_require_default(require("./Label"));
+var _Link = /*#__PURE__*/ _interop_require_default(require("./Link"));
+var _SkeletonText = /*#__PURE__*/ _interop_require_default(require("./SkeletonText"));
+var _Spinner = /*#__PURE__*/ _interop_require_default(require("./Spinner"));
+var _Text = /*#__PURE__*/ _interop_require_default(require("./Text"));
 var _polarisicons = require("@shopify/polaris-icons");
 function _array_like_to_array(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
@@ -25,6 +32,11 @@ function _array_with_holes(arr) {
 function _array_without_holes(arr) {
     if (Array.isArray(arr)) return _array_like_to_array(arr);
 }
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 function _iterable_to_array(iter) {
     if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
 }
@@ -132,9 +144,12 @@ var dropZoneStyles = (0, _tailwindvariants.tv)({
  * @returns {JSX.Element} DropZone component.
  */ function DropZone() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    var id = props.id, label = props.label, labelHidden = props.labelHidden, labelAction = props.labelAction, tooltip = props.tooltip, labelVariant = props.labelVariant, _props_type = props.type, type = _props_type === void 0 ? "file" : _props_type, _props_accept = props.accept, accept = _props_accept === void 0 ? typeof props.accept === "string" ? [
-        props.accept
-    ] : props.accept : _props_accept, _props_allowMultiple = props.allowMultiple, allowMultiple = _props_allowMultiple === void 0 ? false : _props_allowMultiple, _props_showDropZoneWhenDisabled = props.showDropZoneWhenDisabled, showDropZoneWhenDisabled = _props_showDropZoneWhenDisabled === void 0 ? true : _props_showDropZoneWhenDisabled, _disabled = props.disabled, onDrop = props.onDrop, onDropAccepted = props.onDropAccepted, onDropRejected = props.onDropRejected, helpText = props.helpText, error = props.error, _props_uploading = props.uploading, uploading = _props_uploading === void 0 ? false : _props_uploading, _props_uploadedFiles = props.uploadedFiles, uploadedFiles = _props_uploadedFiles === void 0 ? [] : _props_uploadedFiles, _props_uploadLabel = props.uploadLabel, uploadLabel = _props_uploadLabel === void 0 ? "Drag and drop files or click to upload" : _props_uploadLabel, _props_uploadingLabel = props.uploadingLabel, uploadingLabel = _props_uploadingLabel === void 0 ? "Uploading..." : _props_uploadingLabel, _props_dragLabel = props.dragLabel, dragLabel = _props_dragLabel === void 0 ? "Release to upload" : _props_dragLabel, tmp = props.showFilePreview, _showFilePreview = tmp === void 0 ? true : tmp, previewLoading = props.previewLoading, _props_previewRows = props.previewRows, previewRows = _props_previewRows === void 0 ? 2 : _props_previewRows, onRemove = props.onRemove, onFilePreviewClick = props.onFilePreviewClick, filename = props.filename;
+    var id = props.id, label = props.label, labelHidden = props.labelHidden, labelAction = props.labelAction, tooltip = props.tooltip, labelVariant = props.labelVariant, _props_type = props.type, type = _props_type === void 0 ? "file" : _props_type, _accept = props.accept, _props_allowMultiple = props.allowMultiple, allowMultiple = _props_allowMultiple === void 0 ? false : _props_allowMultiple, _props_showDropZoneWhenDisabled = props.showDropZoneWhenDisabled, showDropZoneWhenDisabled = _props_showDropZoneWhenDisabled === void 0 ? true : _props_showDropZoneWhenDisabled, _disabled = props.disabled, onDrop = props.onDrop, onDropAccepted = props.onDropAccepted, onDropRejected = props.onDropRejected, helpText = props.helpText, error = props.error, _props_uploading = props.uploading, uploading = _props_uploading === void 0 ? false : _props_uploading, _props_uploadedFiles = props.uploadedFiles, uploadedFiles = _props_uploadedFiles === void 0 ? [] : _props_uploadedFiles, _props_uploadLabel = props.uploadLabel, uploadLabel = _props_uploadLabel === void 0 ? "Drag and drop files or click to upload" : _props_uploadLabel, _props_uploadingLabel = props.uploadingLabel, uploadingLabel = _props_uploadingLabel === void 0 ? "Uploading..." : _props_uploadingLabel, _props_dragLabel = props.dragLabel, dragLabel = _props_dragLabel === void 0 ? "Release to upload" : _props_dragLabel, tmp = props.showFilePreview, _showFilePreview = tmp === void 0 ? true : tmp, previewLoading = props.previewLoading, _props_previewRows = props.previewRows, previewRows = _props_previewRows === void 0 ? 2 : _props_previewRows, onRemove = props.onRemove, onFilePreviewClick = props.onFilePreviewClick, filename = props.filename;
+    var accept = _accept ? typeof _accept === "string" ? [
+        _accept
+    ] : _accept : [
+        "*/*"
+    ];
     var inputRef = (0, _react.useRef)(null);
     var _useState = _sliced_to_array((0, _react.useState)(false), 2), hasFocusWithin = _useState[0], setHasFocusWithin = _useState[1];
     var _useState1 = _sliced_to_array((0, _react.useState)(false), 2), isDraggingOver = _useState1[0], setIsDraggingOver = _useState1[1];
@@ -266,7 +281,7 @@ var dropZoneStyles = (0, _tailwindvariants.tv)({
                     label && !labelHidden && /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                         className: "flex justify-between items-end",
                         children: [
-                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Label, {
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.default, {
                                 id: id,
                                 hidden: labelHidden,
                                 disabled: disabled,
@@ -274,7 +289,7 @@ var dropZoneStyles = (0, _tailwindvariants.tv)({
                                 variant: labelVariant,
                                 children: label
                             }),
-                            labelAction && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Link, {
+                            labelAction && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Link.default, {
                                 onClick: labelAction.onAction,
                                 removeUnderline: true,
                                 children: labelAction.content
@@ -316,13 +331,13 @@ var dropZoneStyles = (0, _tailwindvariants.tv)({
                                     /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                                         className: "flex items-center justify-center gap-2",
                                         children: [
-                                            uploading ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Spinner, {
+                                            uploading ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_Spinner.default, {
                                                 size: "small"
-                                            }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+                                            }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
                                                 source: typeIcon,
                                                 color: disabled ? "disabled" : "subdued"
                                             }),
-                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Text, {
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
                                                 fontWeight: "medium",
                                                 color: disabled ? "disabled" : "subdued",
                                                 children: uploading ? uploadingLabel : isDraggingOver ? "".concat(dragLabel, " ").concat(dragFileCount, " file").concat(dragFileCount !== 1 ? "s" : "") : uploadLabel
@@ -331,11 +346,11 @@ var dropZoneStyles = (0, _tailwindvariants.tv)({
                                     })
                                 ]
                             }),
-                            error && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.InlineError, {
+                            error && /*#__PURE__*/ (0, _jsxruntime.jsx)(_InlineError.default, {
                                 message: error,
                                 icon: _polarisicons.CircleAlertMajor
                             }),
-                            helpText && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Text, {
+                            helpText && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
                                 color: "subdued",
                                 children: helpText
                             })
@@ -411,14 +426,14 @@ var previewStyles = (0, _tailwindvariants.tv)({
                                 }),
                                 /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                                     className: "w-20",
-                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.SkeletonText, {
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_SkeletonText.default, {
                                         lines: 2,
                                         gap: "small"
                                     })
                                 })
                             ]
                         }),
-                        onRemove && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Button, {
+                        onRemove && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
                             size: "small",
                             icon: _polarisicons.CancelMajor,
                             disabled: true,
@@ -447,12 +462,12 @@ var previewStyles = (0, _tailwindvariants.tv)({
                             /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                                 className: display === "row" ? "@lg:max-w-32" : "",
                                 children: [
-                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Text, {
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
                                         fontWeight: "medium",
                                         truncate: true,
                                         children: filename || file.fileName
                                     }),
-                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Text, {
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
                                         color: "subdued",
                                         truncate: true,
                                         variant: "bodySm",
@@ -462,7 +477,7 @@ var previewStyles = (0, _tailwindvariants.tv)({
                             })
                         ]
                     }),
-                    onRemove && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Button, {
+                    onRemove && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
                         size: "small",
                         icon: _polarisicons.CancelMajor,
                         tooltip: "Remove",
@@ -510,10 +525,10 @@ var thumbnailSizeStyles = (0, _tailwindvariants.tv)({
         style: (file === null || file === void 0 ? void 0 : (_file_fileType = file.fileType) === null || _file_fileType === void 0 ? void 0 : _file_fileType.startsWith("image")) ? {
             backgroundImage: "url(".concat(imagePreview, ")")
         } : {},
-        children: loading ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Spinner, {
+        children: loading ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_Spinner.default, {
             size: "small",
             color: "subdued"
-        }) : file && !((_file_fileType1 = file.fileType) === null || _file_fileType1 === void 0 ? void 0 : _file_fileType1.startsWith("image")) && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+        }) : file && !((_file_fileType1 = file.fileType) === null || _file_fileType1 === void 0 ? void 0 : _file_fileType1.startsWith("image")) && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
             source: _polarisicons.FileMinor,
             color: "subdued"
         })

package/dist/cjs/components/EmptyState.js

@@ -9,8 +9,16 @@ Object.defineProperty(exports, "default", {
     }
 });
 var _jsxruntime = require("react/jsx-runtime");
-var _index = require("../index");
+var _Button = /*#__PURE__*/ _interop_require_default(require("./Button"));
+var _Image = /*#__PURE__*/ _interop_require_default(require("./Image"));
+var _Text = /*#__PURE__*/ _interop_require_default(require("./Text"));
+var _ProgressBar = /*#__PURE__*/ _interop_require_default(require("./ProgressBar"));
 var _tailwindvariants = require("tailwind-variants");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 var styles = (0, _tailwindvariants.tv)({
     base: "Litho-EmptyState py-16 px-4 flex flex-col items-center text-center gap-6"
 });
@@ -42,14 +50,14 @@ var styles = (0, _tailwindvariants.tv)({
  * @returns {JSX.Element} The rendered EmptyState component.
  */ function EmptyState() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    var description = props.description, icon = props.icon, iconSource = props.iconSource, primaryAction = props.primaryAction, secondaryAction = props.secondaryAction, title = props.title, _props_titleVariant = props.titleVariant, titleVariant = _props_titleVariant === void 0 ? "headingXl" : _props_titleVariant, _props_descriptionVariant = props.descriptionVariant, descriptionVariant = _props_descriptionVariant === void 0 ? "bodyLg" : _props_descriptionVariant, progress = props.progress;
+    var description = props.description, icon = props.icon, iconSource = props.iconSource, primaryAction = props.primaryAction, secondaryAction = props.secondaryAction, title = props.title, _props_titleVariant = props.titleVariant, titleVariant = _props_titleVariant === void 0 ? "headingXl" : _props_titleVariant, _props_descriptionVariant = props.descriptionVariant, descriptionVariant = _props_descriptionVariant === void 0 ? "bodyLg" : _props_descriptionVariant, progress = props.progress, className = props.className;
     var classes = styles();
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-        className: classes,
+        className: "".concat(classes).concat(className ? " ".concat(className) : ""),
         children: [
             iconSource && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                 className: "flex items-center justify-center w-16 h-16",
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Image, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Image.default, {
                     source: iconSource
                 })
             }),
@@ -63,11 +71,11 @@ var styles = (0, _tailwindvariants.tv)({
                     /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                         className: "flex flex-col items-center gap-2 max-w-112",
                         children: [
-                            title && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Text, {
+                            title && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
                                 variant: titleVariant,
                                 children: title
                             }),
-                            description && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Text, {
+                            description && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
                                 variant: descriptionVariant,
                                 color: "subdued",
                                 children: description
@@ -77,7 +85,7 @@ var styles = (0, _tailwindvariants.tv)({
                     /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                         className: "flex gap-3",
                         children: [
-                            primaryAction && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Button, {
+                            primaryAction && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
                                 primary: true,
                                 onClick: primaryAction.onAction,
                                 disabled: primaryAction.disabled,
@@ -86,7 +94,7 @@ var styles = (0, _tailwindvariants.tv)({
                                 loading: primaryAction.loading,
                                 children: primaryAction.content
                             }),
-                            secondaryAction && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Button, {
+                            secondaryAction && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
                                 onClick: secondaryAction.onAction,
                                 url: secondaryAction.url,
                                 external: secondaryAction.external,
@@ -98,7 +106,7 @@ var styles = (0, _tailwindvariants.tv)({
                     }),
                     progress !== undefined && progress !== null && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                         className: "w-full",
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.ProgressBar, {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ProgressBar.default, {
                             animated: true,
                             progress: progress
                         })

package/dist/cjs/components/Filters.js

@@ -12,7 +12,14 @@ Object.defineProperty(exports, "default", {
 var _jsxruntime = require("react/jsx-runtime");
 var _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 var _tailwindvariants = require("tailwind-variants");
-var _index = require("../index");
+var _ActionList = /*#__PURE__*/ _interop_require_default(require("./ActionList"));
+var _Button = /*#__PURE__*/ _interop_require_default(require("./Button"));
+var _Icon = /*#__PURE__*/ _interop_require_default(require("./Icon"));
+var _Link = /*#__PURE__*/ _interop_require_default(require("./Link"));
+var _Popover = /*#__PURE__*/ _interop_require_default(require("./Popover"));
+var _Text = /*#__PURE__*/ _interop_require_default(require("./Text"));
+var _TextField = /*#__PURE__*/ _interop_require_default(require("./TextField"));
+var _Tooltip = /*#__PURE__*/ _interop_require_default(require("./Tooltip"));
 var _polarisicons = require("@shopify/polaris-icons");
 var _AppProvider = require("./AppProvider");
 function _array_like_to_array(arr, len) {
@@ -39,6 +46,11 @@ function _define_property(obj, key, value) {
     }
     return obj;
 }
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -306,7 +318,7 @@ var filterContainerStyles = (0, _tailwindvariants.tv)({
                                     showDivider && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                                         className: "h-full min-h-3 disclosure-line mx-1"
                                     }),
-                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Popover, {
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Popover.default, {
                                         active: activePopoverKey === filter.key,
                                         activatorDisplayType: "block",
                                         onClose: function() {
@@ -329,14 +341,14 @@ var filterContainerStyles = (0, _tailwindvariants.tv)({
                                                 /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                                                     className: "flex items-center justify-between",
                                                     children: [
-                                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Text, {
+                                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
                                                             variant: "headingSm",
                                                             fontWeight: "medium",
                                                             children: filter.label
                                                         }),
                                                         /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                                                             className: "relative -right-2",
-                                                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Button, {
+                                                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
                                                                 plain: true,
                                                                 size: "small",
                                                                 icon: _polarisicons.CancelSmallMinor,
@@ -352,7 +364,7 @@ var filterContainerStyles = (0, _tailwindvariants.tv)({
                                                 }, "filter-content-".concat(filter.key)),
                                                 ((appliedFilter === null || appliedFilter === void 0 ? void 0 : appliedFilter.onRemove) || (filter === null || filter === void 0 ? void 0 : filter.onRemove)) && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                                                     className: "pt-1",
-                                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Link, {
+                                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Link.default, {
                                                         bold: true,
                                                         onClick: function() {
                                                             if (appliedFilter === null || appliedFilter === void 0 ? void 0 : appliedFilter.onRemove) {
@@ -384,7 +396,7 @@ var filterContainerStyles = (0, _tailwindvariants.tv)({
                         children: (showMoreFilters || showClearAction) && /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                             className: "flex gap-1.5",
                             children: [
-                                showMoreFilters && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Popover, {
+                                showMoreFilters && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Popover.default, {
                                     active: activePopoverKey === "moreFilters",
                                     activatorDisplayType: "block",
                                     onClose: function() {
@@ -403,7 +415,7 @@ var filterContainerStyles = (0, _tailwindvariants.tv)({
                                         children: [
                                             /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                                                 className: "p-2 pb-0 sticky top-0 bg-surface-highest",
-                                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.TextField, {
+                                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
                                                     value: filterSearchValue,
                                                     onChange: function(value) {
                                                         return setFilterSearchValue(value);
@@ -416,7 +428,7 @@ var filterContainerStyles = (0, _tailwindvariants.tv)({
                                                     }
                                                 })
                                             }),
-                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.ActionList, {
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_ActionList.default, {
                                                 items: moreFilters.map(function(filter) {
                                                     return {
                                                         content: filter.label,
@@ -510,12 +522,12 @@ var pillTextStyles = (0, _tailwindvariants.tv)({
     var content = /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
         className: classes,
         onClick: onClick,
-        children: destructive ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+        children: destructive ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
             source: _polarisicons.DeleteMinor,
             color: "subdued"
         }) : /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
             children: [
-                !applied && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+                !applied && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
                     source: _polarisicons.PlusMinor,
                     color: "subdued"
                 }),
@@ -523,7 +535,7 @@ var pillTextStyles = (0, _tailwindvariants.tv)({
                     className: textClasses,
                     children: label
                 }),
-                applied && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+                applied && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
                     source: _polarisicons.CaretDownMinor,
                     color: "subdued"
                 })
@@ -531,7 +543,7 @@ var pillTextStyles = (0, _tailwindvariants.tv)({
         })
     });
     if (destructive) {
-        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Tooltip, {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Tooltip.default, {
             content: "Remove filters",
             preferredPosition: "above",
             children: content
@@ -694,7 +706,7 @@ var rightGradientStyles = (0, _tailwindvariants.tv)({
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                 className: leftGradientClasses,
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Button, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
                     rounded: true,
                     shadow: true,
                     icon: _polarisicons.ChevronLeftMinor,
@@ -706,7 +718,7 @@ var rightGradientStyles = (0, _tailwindvariants.tv)({
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                 className: rightGradientClasses,
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Button, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
                     rounded: true,
                     shadow: true,
                     icon: _polarisicons.ChevronRightMinor,
@@ -799,7 +811,7 @@ var tabActionIconStyles = (0, _tailwindvariants.tv)({
                 /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                     className: "relative w-full flex items-center justify-between gap-0 min-h-5 pr-1",
                     children: [
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Text, {
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
                             variant: "headingXs",
                             color: color,
                             fontWeight: "medium",
@@ -812,15 +824,15 @@ var tabActionIconStyles = (0, _tailwindvariants.tv)({
                                 !interactive && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                                     className: "min-h-full min-w-2 bg-linear-to-l from-surface-highest to-transparent"
                                 }),
-                                tooltip ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Tooltip, {
+                                tooltip ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_Tooltip.default, {
                                     content: tooltip,
                                     preferredPosition: "above",
-                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
                                         source: icon,
                                         color: interactive ? "link" : "subdued",
                                         className: actionIconClasses
                                     })
-                                }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+                                }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
                                     source: icon,
                                     color: interactive ? "link" : "subdued",
                                     className: actionIconClasses
@@ -848,14 +860,14 @@ var tabActionIconStyles = (0, _tailwindvariants.tv)({
  * @param {boolean} [props.subdued=false] - Whether the text field appears subdued.
  * @param {boolean} [props.disableQueryField=false] - Whether the text field is disabled.
  * @param {boolean} [props.transparent=true] - Whether the text field has a transparent background.
+ * @param {string} [props.autoComplete="on"] - Whether the text field should autocomplete.
  * @returns {JSX.Element} The text field component.
- */ Filters.TextField = function FiltersTextField() {
-    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    var darkMode = (0, _react.useContext)(_AppProvider.DarkModeContext).darkMode;
-    var queryValue = props.queryValue, onQueryChange = props.onQueryChange, onQueryBlur = props.onQueryBlur, onQueryFocus = props.onQueryFocus, onQueryClear = props.onQueryClear, _props_queryPlaceholder = props.queryPlaceholder, queryPlaceholder = _props_queryPlaceholder === void 0 ? "Search" : _props_queryPlaceholder, disableQueryField = props.disableQueryField;
+ */ Filters.TextField = function(props) {
+    var darkMode = (0, _AppProvider.useDarkMode)().darkMode;
+    var queryValue = props.queryValue, onQueryChange = props.onQueryChange, onQueryBlur = props.onQueryBlur, onQueryFocus = props.onQueryFocus, onQueryClear = props.onQueryClear, _props_queryPlaceholder = props.queryPlaceholder, queryPlaceholder = _props_queryPlaceholder === void 0 ? "Search" : _props_queryPlaceholder, disableQueryField = props.disableQueryField, _props_autoComplete = props.autoComplete, autoComplete = _props_autoComplete === void 0 ? "on" : _props_autoComplete;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
         className: "p-1",
-        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.TextField, {
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
             icon: _polarisicons.SearchMajor,
             value: queryValue,
             onChange: onQueryChange,
@@ -865,6 +877,7 @@ var tabActionIconStyles = (0, _tailwindvariants.tv)({
             disabled: disableQueryField,
             subdued: darkMode,
             transparent: !darkMode,
+            autoComplete: autoComplete,
             clearButton: true,
             onClearButtonClick: onQueryClear
         })

package/dist/cjs/components/FooterHelp.js

@@ -9,8 +9,13 @@ Object.defineProperty(exports, "default", {
     }
 });
 var _jsxruntime = require("react/jsx-runtime");
-var _index = require("../index");
+var _Icon = /*#__PURE__*/ _interop_require_default(require("./Icon"));
 var _polarisicons = require("@shopify/polaris-icons");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 /**
  * Renders a `FooterHelp` component, which provides additional information
  * or guidance to users, typically displayed at the bottom of a page. The component
@@ -34,7 +39,7 @@ var _polarisicons = require("@shopify/polaris-icons");
         children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
             className: "flex items-center gap-3 rounded-full bg-surface-lower py-3 pl-4 pr-5 mx-auto my-5",
             children: [
-                /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
                     source: _polarisicons.CircleInformationMajor,
                     color: "subdued"
                 }),

package/dist/cjs/components/Form.js

@@ -1,11 +1,26 @@
 /**
- * A reusable Form component.
+ * A reusable Form component that provides a structured HTML form with customizable attributes and submission handling.
  *
+ * @component
  * @param {Object} [props={}] - The properties passed to the component.
- * @param {string} [props.method="get"] - The HTTP method for the form submission.
- * @param {function} [props.onSubmit] - The function to call when the form is submitted.
+ * @param {string} [props.acceptCharset] - The character encoding that the form accepts.
+ * @param {string} [props.action] - The URL where the form data should be submitted.
+ * @param {string} [props.autoComplete] - Whether the form should have autocomplete enabled. Can be "on" or "off".
  * @param {React.ReactNode} [props.children] - The child elements to be rendered inside the form.
+ * @param {string} [props.encType] - The encoding type for the form submission (e.g., "multipart/form-data", "application/x-www-form-urlencoded").
+ * @param {string} [props.method="post"] - The HTTP method for the form submission. Can be "get", "post", etc.
+ * @param {string} [props.name] - The name attribute for the form element.
+ * @param {boolean} [props.noValidate] - Whether to disable HTML5 form validation.
+ * @param {boolean} [props.preventDefault=true] - Whether to prevent the default form submission behavior.
+ * @param {string} [props.target] - The target window or frame for the form submission (e.g., "_blank", "_self").
+ * @param {Function} [props.onSubmit] - The function to call when the form is submitted. Receives the form event as a parameter.
  * @returns {JSX.Element} The rendered form component.
+ * 
+ * @example
+ * <Form onSubmit={(event) => console.log('Form submitted')}>
+ *   <TextField label="Name" />
+ *   <Button submit>Submit</Button>
+ * </Form>
  */ "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true