@heymantle/litho 0.0.3 → 0.0.4

package/dist/cjs/components/Button.js

@@ -13,7 +13,11 @@ var _jsxruntime = require("react/jsx-runtime");
 var _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 var _tailwindvariants = require("tailwind-variants");
 var _ButtonGroup = require("./ButtonGroup");
-var _index = require("../index");
+var _ActionList = /*#__PURE__*/ _interop_require_default(require("./ActionList"));
+var _Icon = /*#__PURE__*/ _interop_require_default(require("./Icon"));
+var _Popover = /*#__PURE__*/ _interop_require_default(require("./Popover"));
+var _Spinner = /*#__PURE__*/ _interop_require_default(require("./Spinner"));
+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) {
@@ -37,6 +41,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();
@@ -224,6 +233,7 @@ var styles = (0, _tailwindvariants.tv)({
         },
         size: {
             stepper: "min-h-3.5 rounded-sm",
+            mini: "min-h-5 min-w-5",
             small: "min-h-7 min-w-7",
             medium: "min-h-8",
             large: "min-h-8"
@@ -496,12 +506,18 @@ var contentStyles = (0, _tailwindvariants.tv)({
             false: ""
         },
         size: {
+            mini: "p-0",
             small: "py-0.5",
             large: "py-3",
             medium: "py-1"
         }
     },
     compoundVariants: [
+        {
+            size: "mini",
+            iconOnly: true,
+            class: "!px-0"
+        },
         {
             size: "small",
             iconOnly: true,
@@ -751,7 +767,7 @@ var connectedDisclosureStyles = (0, _tailwindvariants.tv)({
  * @param {string} [props.ariaDescribedBy] - ID of the element that describes the button.
  * @param {boolean} [props.ariaChecked] - Whether the button is checked (for toggle buttons).
  * @param {React.Component} [props.icon] - Icon component to display within the button.
- * @param {string} [props.iconColor='default'] - Color of the icon.
+ * @param {"default" | "primary" | "secondary" | "plain" | "link" | "destructive" | "highlight"} [props.iconColor='default'] - Color of the icon.
  * @param {boolean} [props.primary=false] - Whether to show the primary button style.
  * @param {boolean} [props.highlight=false] - Whether to show the highlight button style.
  * @param {boolean} [props.link=false] - Whether to show a link style.
@@ -759,12 +775,12 @@ var connectedDisclosureStyles = (0, _tailwindvariants.tv)({
  * @param {boolean} [props.disclosure=false] - Whether to show a disclosure arrow.
  * @param {boolean} [props.disclosureRight=false] - Whether to show the disclosure on the right.
  * @param {boolean} [props.plain=false] - Whether to show plain styling without background.
- * @param {string} [props.size='medium'] - Size of the button ('small', 'medium', 'large', 'stepper').
+ * @param {"small" | "medium" | "large" | "stepper"} [props.size='medium'] - Size of the button ('small', 'medium', 'large', 'stepper').
  * @param {boolean} [props.fullWidth] - Whether the button should take full width.
- * @param {string} [props.align='center'] - Alignment of the button content ('left', 'center', 'right').
+ * @param {"left" | "center" | "right"} [props.align='center'] - Alignment of the button content ('left', 'center', 'right').
  * @param {string} [props.tooltip] - Tooltip to show when hovering over the button.
  * @param {Object} [props.connectedDisclosure] - Configuration for connected disclosure menu.
- * @param {Array} [props.connectedDisclosure.actions] - Actions to show in the disclosure menu.
+ * @param {Array<import("./ActionList").ActionListItem>} [props.connectedDisclosure.actions] - Actions to show in the disclosure menu.
  * @param {string} [props.className] - Additional CSS classes for the button.
  * @param {string} [props.contentClassName] - Additional CSS classes for the button content.
  * @param {boolean} [props.rounded] - Whether to show fully rounded corners.
@@ -774,12 +790,15 @@ var connectedDisclosureStyles = (0, _tailwindvariants.tv)({
  * @returns {JSX.Element} The rendered Button component.
  *
  * @example
+ * ```js
  * // Basic button
  * <Button onClick={() => console.log('Clicked')}>
  *   Click me
  * </Button>
+ * ```
  *
  * @example
+ * ```js
  * // Primary button with icon and loading state
  * <Button
  *   primary
@@ -789,8 +808,10 @@ var connectedDisclosureStyles = (0, _tailwindvariants.tv)({
  * >
  *   Save changes
  * </Button>
+ * ```
  *
  * @example
+ * ```js
  * // Button with connected disclosure
  * <Button
  *   connectedDisclosure={{
@@ -802,9 +823,10 @@ var connectedDisclosureStyles = (0, _tailwindvariants.tv)({
  * >
  *   More actions
  * </Button>
+ * ```
  */ function Button() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    var darkMode = (0, _react.useContext)(_AppProvider.DarkModeContext).darkMode;
+    var darkMode = (0, _AppProvider.useDarkMode)().darkMode;
     var _useState = _sliced_to_array((0, _react.useState)(false), 2), showConnectedDisclosurePopover = _useState[0], setShowConnectedDisclosurePopover = _useState[1];
     var id = props.id, children = props.children, url = props.url, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, external = props.external, target = props.target, submit = props.submit, _props_loading = props.loading, loading = _props_loading === void 0 ? false : _props_loading, _props_pressed = props.pressed, pressed = _props_pressed === void 0 ? false : _props_pressed, accessibilityLabel = props.accessibilityLabel, role = props.role, ariaControls = props.ariaControls, ariaExpanded = props.ariaExpanded, ariaDescribedBy = props.ariaDescribedBy, ariaChecked = props.ariaChecked, icon = props.icon, _iconColor = props.iconColor, _props_bordered = props.bordered, bordered = _props_bordered === void 0 ? false : _props_bordered, _props_primary = props.primary, primary = _props_primary === void 0 ? false : _props_primary, _props_highlight = props.highlight, highlight = _props_highlight === void 0 ? false : _props_highlight, _props_link = props.link, link = _props_link === void 0 ? false : _props_link, _props_destructive = props.destructive, destructive = _props_destructive === void 0 ? false : _props_destructive, _props_disclosure = props.disclosure, disclosure = _props_disclosure === void 0 ? false : _props_disclosure, _props_disclosureRight = props.disclosureRight, disclosureRight = _props_disclosureRight === void 0 ? false : _props_disclosureRight, _props_plain = props.plain, plain = _props_plain === void 0 ? false : _props_plain, _props_size = props.size, size = _props_size === void 0 ? "medium" : _props_size, fullWidth = props.fullWidth, _props_align = props.align, align = _props_align === void 0 ? "center" : _props_align, connectedDisclosure = props.connectedDisclosure, className = props.className, contentClassName = props.contentClassName, rounded = props.rounded, onClick = props.onClick, onMouseDown = props.onMouseDown, tooltip = props.tooltip, _props_tooltipAlignment = props.tooltipAlignment, tooltipAlignment = _props_tooltipAlignment === void 0 ? "right" : _props_tooltipAlignment, _props_tooltipPosition = props.tooltipPosition, tooltipPosition = _props_tooltipPosition === void 0 ? "above" : _props_tooltipPosition, shadow = props.shadow, restProps = _object_without_properties(props, [
         "id",
@@ -938,14 +960,14 @@ var connectedDisclosureStyles = (0, _tailwindvariants.tv)({
                 children: [
                     loading && /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                         className: "Litho-Button__Loading absolute inset-0 flex items-center justify-center",
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Spinner, {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Spinner.default, {
                             size: "small",
                             color: "subdued"
                         })
                     }),
                     memoizedIcon && /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                         className: iconClasses,
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
                             source: memoizedIcon,
                             color: disabled ? "disabled" : _iconColor || iconColor
                         })
@@ -956,7 +978,7 @@ var connectedDisclosureStyles = (0, _tailwindvariants.tv)({
                     }),
                     disclosure && /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                         className: "Litho-Button__DisclosureIcon relative -left-0.5",
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
                             source: _polarisicons.CaretDownMinor,
                             color: disabled ? "disabled" : _iconColor || iconColor
                         })
@@ -975,7 +997,7 @@ var connectedDisclosureStyles = (0, _tailwindvariants.tv)({
         },
         children: [
             content,
-            showConnectedDisclosure && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Popover, {
+            showConnectedDisclosure && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Popover.default, {
                 active: showConnectedDisclosurePopover,
                 onClose: function() {
                     return setShowConnectedDisclosurePopover(false);
@@ -996,7 +1018,7 @@ var connectedDisclosureStyles = (0, _tailwindvariants.tv)({
                         return setShowConnectedDisclosurePopover(!showConnectedDisclosurePopover);
                     }
                 }),
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.ActionList, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ActionList.default, {
                     items: connectedDisclosureActions,
                     onActionAnyItem: function() {
                         return setShowConnectedDisclosurePopover(false);
@@ -1006,7 +1028,7 @@ var connectedDisclosureStyles = (0, _tailwindvariants.tv)({
         ]
     });
     if (!!tooltip) {
-        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Tooltip, {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Tooltip.default, {
             content: tooltip,
             alignment: tooltipAlignment,
             preferredPosition: tooltipPosition,

package/dist/cjs/components/Card.js

@@ -10,60 +10,19 @@ Object.defineProperty(exports, "default", {
     }
 });
 var _jsxruntime = require("react/jsx-runtime");
-var _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+var _react = /*#__PURE__*/ _interop_require_default(require("react"));
 var _tailwindvariants = require("tailwind-variants");
-var _AppProvider = require("../components/AppProvider");
 var _Button = /*#__PURE__*/ _interop_require_default(require("./Button"));
 var _Icon = /*#__PURE__*/ _interop_require_default(require("./Icon"));
 var _Spinner = /*#__PURE__*/ _interop_require_default(require("./Spinner"));
 var _Text = /*#__PURE__*/ _interop_require_default(require("./Text"));
 var _Tooltip = /*#__PURE__*/ _interop_require_default(require("./Tooltip"));
+var _Frame = require("./Frame");
 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();
-    var cacheNodeInterop = new WeakMap();
-    return (_getRequireWildcardCache = function(nodeInterop) {
-        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
-    })(nodeInterop);
-}
-function _interop_require_wildcard(obj, nodeInterop) {
-    if (!nodeInterop && obj && obj.__esModule) {
-        return obj;
-    }
-    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
-        return {
-            default: obj
-        };
-    }
-    var cache = _getRequireWildcardCache(nodeInterop);
-    if (cache && cache.has(obj)) {
-        return cache.get(obj);
-    }
-    var newObj = {
-        __proto__: null
-    };
-    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
-    for(var key in obj){
-        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
-            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
-            if (desc && (desc.get || desc.set)) {
-                Object.defineProperty(newObj, key, desc);
-            } else {
-                newObj[key] = obj[key];
-            }
-        }
-    }
-    newObj.default = obj;
-    if (cache) {
-        cache.set(obj, newObj);
-    }
-    return newObj;
-}
 function _type_of(obj) {
     "@swc/helpers - typeof";
     return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
@@ -229,7 +188,7 @@ var bodyStyles = (0, _tailwindvariants.tv)({
  * @returns {React.ReactElement} The rendered Card component.
  */ var Card = function(param) {
     var _param_allowOverflow = param.allowOverflow, allowOverflow = _param_allowOverflow === void 0 ? false : _param_allowOverflow, _param_roundedOnMobile = param.roundedOnMobile, roundedOnMobile = _param_roundedOnMobile === void 0 ? false : _param_roundedOnMobile, children = param.children, hideOnPrint = param.hideOnPrint, title = param.title, _param_titleVariant = param.titleVariant, titleVariant = _param_titleVariant === void 0 ? "headingMd" : _param_titleVariant, description = param.description, icon = param.icon, tooltip = param.tooltip, _param_tooltipPreferredPosition = param.tooltipPreferredPosition, tooltipPreferredPosition = _param_tooltipPreferredPosition === void 0 ? "above" : _param_tooltipPreferredPosition, _param_outlined = param.outlined, outlined = _param_outlined === void 0 ? false : _param_outlined, _param_highlighted = param.highlighted, highlighted = _param_highlighted === void 0 ? false : _param_highlighted, _param_subdued = param.subdued, subdued = _param_subdued === void 0 ? false : _param_subdued, _param_alternate = param.alternate, alternate = _param_alternate === void 0 ? false : _param_alternate, _param_padded = param.padded, padded = _param_padded === void 0 ? false : _param_padded, _param_loading = param.loading, loading = _param_loading === void 0 ? false : _param_loading, _param_paddedHalf = param.paddedHalf, paddedHalf = _param_paddedHalf === void 0 ? false : _param_paddedHalf, _param_removeHeaderBottomPadding = param.removeHeaderBottomPadding, removeHeaderBottomPadding = _param_removeHeaderBottomPadding === void 0 ? false : _param_removeHeaderBottomPadding, onClick = param.onClick, _param_emptyState = param.emptyState, emptyState = _param_emptyState === void 0 ? {} : _param_emptyState, action = param.action, className = param.className, headerClassName = param.headerClassName, accessory = param.accessory, _param_fullHeightBody = param.fullHeightBody, fullHeightBody = _param_fullHeightBody === void 0 ? false : _param_fullHeightBody, _param_fullWidthOnMobile = param.fullWidthOnMobile, fullWidthOnMobile = _param_fullWidthOnMobile === void 0 ? true : _param_fullWidthOnMobile, _param_shadow = param.shadow, shadow = _param_shadow === void 0 ? "default" : _param_shadow;
-    var embedded = (0, _react.useContext)(_AppProvider.FrameContext).embedded;
+    var embedded = (0, _Frame.useFrame)().embedded;
     var showHeader = !!(title || action);
     var isClickable = !!onClick;
     var classes = styles({
@@ -254,7 +213,8 @@ var bodyStyles = (0, _tailwindvariants.tv)({
         var firstSectionDetected = false;
         function process(child) {
             if (/*#__PURE__*/ _react.default.isValidElement(child)) {
-                if (child.type.displayName === "Card.Section" && !firstSectionDetected) {
+                var _child_type;
+                if (((_child_type = child.type) === null || _child_type === void 0 ? void 0 : _child_type.displayName) === "Card.Section" && !firstSectionDetected) {
                     firstSectionDetected = true;
                     return /*#__PURE__*/ _react.default.cloneElement(child, {
                         isFirst: true,

package/dist/cjs/components/Checkbox.js

@@ -10,8 +10,15 @@ Object.defineProperty(exports, "default", {
 });
 var _jsxruntime = require("react/jsx-runtime");
 var _tailwindvariants = require("tailwind-variants");
-var _index = require("../index");
+var _Icon = /*#__PURE__*/ _interop_require_default(require("./Icon"));
+var _Label = /*#__PURE__*/ _interop_require_default(require("./Label"));
+var _Text = /*#__PURE__*/ _interop_require_default(require("./Text"));
 var _polarisicons = require("@shopify/polaris-icons");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 var styles = (0, _tailwindvariants.tv)({
     base: "Litho-Checkbox group flex gap-2 py-1",
     variants: {
@@ -71,6 +78,9 @@ var checkboxStyles = (0, _tailwindvariants.tv)({
  * @param {boolean} [props.checked=false] - Indicates whether the checkbox is checked.
  * @param {boolean} [props.disabled=false] - Indicates whether the checkbox is disabled.
  * @param {string} [props.helpText] - Additional descriptive text for the checkbox.
+ * @param {React.ReactNode|import("./Tooltip").TooltipContentObject} [props.tooltip] - Tooltip content for the checkbox label.
+ * @param {boolean} [props.indeterminate=false] - Indicates whether the checkbox is in an indeterminate state (mixed/partial selection).
+ * @param {string} [props.className] - Additional CSS classes to apply to the checkbox container.
  * @param {function} [props.onChange] - Callback function called when the checkbox state changes.
  * @param {function} [props.onFocus] - Callback function called when the checkbox gains focus.
  * @param {function} [props.onBlur] - Callback function called when the checkbox loses focus.
@@ -138,12 +148,12 @@ var checkboxStyles = (0, _tailwindvariants.tv)({
                         children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                             className: checkboxClasses,
                             children: [
-                                checked && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+                                checked && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
                                     color: disabled ? "inputFgDisabled" : hasError ? "white" : "inputFg",
                                     source: _polarisicons.TickMinor,
                                     className: "pointer-events-none"
                                 }),
-                                !checked && indeterminate && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+                                !checked && indeterminate && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
                                     color: disabled ? "inputFgDisabled" : hasError ? "white" : "inputFg",
                                     source: _polarisicons.MinusMajor,
                                     className: "pointer-events-none"
@@ -151,7 +161,7 @@ var checkboxStyles = (0, _tailwindvariants.tv)({
                             ]
                         })
                     }),
-                    label && !labelHidden && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Label, {
+                    label && !labelHidden && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.default, {
                         tooltip: tooltip,
                         disabled: disabled,
                         as: "p",
@@ -159,12 +169,12 @@ var checkboxStyles = (0, _tailwindvariants.tv)({
                     })
                 ]
             }),
-            helpText && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Text, {
+            helpText && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
                 color: "subdued",
                 className: "pl-7",
                 children: helpText
             }),
-            error && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Text, {
+            error && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
                 color: "critical",
                 className: "pl-7",
                 children: error

package/dist/cjs/components/ChoiceList.js

@@ -51,6 +51,12 @@ var styles = (0, _tailwindvariants.tv)({
     base: "Litho-ChoiceList flex flex-col gap-1"
 });
 /**
+ * @typedef {Object} ChoiceListItem
+ * @property {string} value - The value of the choice.
+ * @property {string} label - The display label of the choice.
+ * @property {boolean} [disabled=false] - Whether the choice is disabled.
+ * @property {React.ReactNode} [renderChildren] - A function that returns a React node to render as children of the choice.
+ */ /**
  * A ChoiceList component for rendering a list of selectable options.
  *
  * @component
@@ -59,10 +65,7 @@ var styles = (0, _tailwindvariants.tv)({
  * @param {string} [props.title] - The title of the choice list.
  * @param {boolean} [props.titleHidden=false] - Whether to hide the title visually.
  * @param {boolean} [props.allowMultiple=false] - Whether multiple selections are allowed.
- * @param {Array} props.choices - The available choices for selection.
- * @param {string} props.choices[].value - The value of the choice.
- * @param {string} props.choices[].label - The display label of the choice.
- * @param {boolean} [props.choices[].disabled=false] - Whether the choice is disabled.
+ * @param {Array<ChoiceListItem>} props.choices - The available choices for selection.
  * @param {Array} props.selected - The currently selected values.
  * @param {Function} props.onChange - Callback when the selection changes. Receives the updated array of selected values.
  * @param {string} [props.error] - Error message to display, if any.

package/dist/cjs/components/ColorField.js

@@ -13,7 +13,7 @@ var _jsxruntime = require("react/jsx-runtime");
 var _react = require("react");
 var _reactcolor = require("react-color");
 var _tailwindvariants = require("tailwind-variants");
-var _index = require("../index");
+var _Text = /*#__PURE__*/ _interop_require_default(require("./Text"));
 function _array_like_to_array(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
@@ -22,6 +22,11 @@ function _array_like_to_array(arr, len) {
 function _array_with_holes(arr) {
     if (Array.isArray(arr)) return arr;
 }
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 function _iterable_to_array_limit(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
@@ -123,11 +128,11 @@ var colorCell = (0, _tailwindvariants.tv)({
             /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                 className: "flex flex-col gap-0",
                 children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Text, {
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
                         variant: "bodySm",
                         children: label
                     }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Text, {
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
                         variant: "bodySm",
                         color: "subdued",
                         children: value ? value.toUpperCase() : value

package/dist/cjs/components/DatePicker.js

@@ -14,7 +14,12 @@ var _react = require("react");
 var _tailwindvariants = require("tailwind-variants");
 var _dayjs = /*#__PURE__*/ _interop_require_default(require("dayjs"));
 var _reactdatepicker = /*#__PURE__*/ _interop_require_default(require("react-datepicker"));
-var _index = require("../index");
+var _Icon = /*#__PURE__*/ _interop_require_default(require("./Icon"));
+var _Listbox = /*#__PURE__*/ _interop_require_default(require("./Listbox"));
+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 _TimePicker = /*#__PURE__*/ _interop_require_default(require("./TimePicker"));
 var _polarisicons = require("@shopify/polaris-icons");
 var _locale = require("date-fns/locale");
 var _dates = require("../utilities/dates");
@@ -363,7 +368,7 @@ var getDateRange = function(param) {
                 className: presetContainerStyles({
                     rows: rows
                 }),
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Listbox, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Listbox.default, {
                     displayHorizontallyOnMobile: true,
                     options: presets.map(function(preset) {
                         return {
@@ -440,12 +445,12 @@ var getDateRange = function(param) {
                                         className: buttonStyles({
                                             disabled: prevMonthButtonDisabled
                                         }),
-                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
                                             source: _polarisicons.ChevronLeftMinor
                                         })
                                     }),
                                     /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_index.Text, {
+                                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Text.default, {
                                             children: [
                                                 monthLabel,
                                                 " ",
@@ -459,7 +464,7 @@ var getDateRange = function(param) {
                                         className: buttonStyles({
                                             disabled: nextMonthButtonDisabled
                                         }),
-                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
                                             source: _polarisicons.ChevronRightMinor
                                         })
                                     })
@@ -467,7 +472,7 @@ var getDateRange = function(param) {
                             });
                         }
                     }),
-                    showTimePicker && !allowRange && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.TimePicker, {
+                    showTimePicker && !allowRange && /*#__PURE__*/ (0, _jsxruntime.jsx)(_TimePicker.default, {
                         value: formattedTime,
                         onChange: function(time) {
                             onChange({
@@ -486,7 +491,7 @@ var getDateRange = function(param) {
     var startDateFormatted = startDate ? (0, _dayjs.default)(startDate).format(displayFormat) : null;
     var endDateFormatted = endDate ? (0, _dayjs.default)(endDate).format(displayFormat) : null;
     var displayValue = allowRange ? "".concat(startDateFormatted).concat(endDateFormatted && endDateFormatted !== startDateFormatted ? " to ".concat(endDateFormatted) : "") : value ? (0, _dayjs.default)(value).format(displayFormat) : "";
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Popover, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Popover.default, {
         active: showPopover,
         activatorDisplayType: "block",
         maxWidth: "datePicker",
@@ -499,7 +504,7 @@ var getDateRange = function(param) {
             onClick: function() {
                 return setShowPopover(!showPopover);
             },
-            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.TextField, {
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
                 label: label,
                 labelAction: labelAction,
                 value: displayValue,

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"
         })