@heymantle/litho 0.0.3 → 0.0.4

package/dist/cjs/components/Pane.js

@@ -12,9 +12,62 @@ Object.defineProperty(exports, "default", {
 var _jsxruntime = require("react/jsx-runtime");
 var _polarisicons = require("@shopify/polaris-icons");
 var _tailwindvariants = require("tailwind-variants");
-var _AppProvider = require("./AppProvider");
 var _react = require("react");
-var _index = require("../index");
+var _Button = /*#__PURE__*/ _interop_require_default(require("./Button"));
+var _Popover = /*#__PURE__*/ _interop_require_default(require("./Popover"));
+var _ActionList = /*#__PURE__*/ _interop_require_default(require("./ActionList"));
+var _Frame = require("./Frame");
+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];
+    return arr2;
+}
+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;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
 var styles = (0, _tailwindvariants.tv)({
     base: "Litho-Pane hidden md:block fixed inset-0 w-full md:left-auto md:max-w-100 block bg-surface-highest shadow-card-strong pointer-events-auto"
 });
@@ -25,7 +78,7 @@ var PaneContext = /*#__PURE__*/ (0, _react.createContext)({});
 function Pane() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     var open = props.open, onClose = props.onClose, children = props.children;
-    var setPaneIsOpen = (0, _react.useContext)(_AppProvider.FrameContext).setPaneIsOpen;
+    var setPaneIsOpen = (0, _Frame.useFrame)().setPaneIsOpen;
     var classes = styles();
     (0, _react.useEffect)(function() {
         setPaneIsOpen(open);
@@ -61,47 +114,77 @@ function Pane() {
 }
 function Header() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    var children = props.children, _props_actions = props.actions, actions = _props_actions === void 0 ? [] : _props_actions, _props_showCloseButton = props.showCloseButton, showCloseButton = _props_showCloseButton === void 0 ? true : _props_showCloseButton, _props_bottomBorder = props.bottomBorder, bottomBorder = _props_bottomBorder === void 0 ? true : _props_bottomBorder;
+    var children = props.children, _props_actions = props.actions, actions = _props_actions === void 0 ? [] : _props_actions, _props_showCloseButton = props.showCloseButton, showCloseButton = _props_showCloseButton === void 0 ? true : _props_showCloseButton, _props_bottomBorder = props.bottomBorder, bottomBorder = _props_bottomBorder === void 0 ? true : _props_bottomBorder, subHeader = props.subHeader;
     var onClose = (0, _react.useContext)(PaneContext).onClose;
     var showActionsOrClose = actions.length > 0 || showCloseButton;
     var childCount = _react.Children.count(children);
+    var _useState = _sliced_to_array((0, _react.useState)(null), 2), showActionsPopover = _useState[0], setShowActionsPopover = _useState[1];
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-        className: "grid grid-cols-12 min-h-14 pl-4 pr-3 border-edge-subdued ".concat(bottomBorder ? "border-b" : ""),
         children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                className: "grid grid-cols-5 col-span-10",
-                children: _react.Children.map(children, function(child, index) {
-                    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                        className: "flex col-span-2 items-center ".concat(childCount === 1 ? "col-span-5" : "", " ").concat(index > 0 ? "justify-center" : ""),
-                        children: child
-                    });
-                })
-            }),
-            showActionsOrClose && /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-                className: "flex col-span-2 items-center justify-end",
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                className: "grid grid-cols-12 min-h-14 px-2 border-edge-subdued ".concat(bottomBorder ? "border-b" : ""),
                 children: [
-                    actions.map(function(action, index) {
-                        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Button, {
-                            plain: !action.destructive,
-                            onClick: action.onAction || action.onClick,
-                            disabled: action.disabled,
-                            icon: action.icon,
-                            loading: action.loading,
-                            external: action.external,
-                            url: action.url,
-                            destructive: action.destructive,
-                            tooltip: action.tooltip,
-                            tooltipPosition: "below"
-                        }, index);
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        className: "grid grid-cols-5 col-span-10",
+                        children: _react.Children.map(children, function(child, index) {
+                            return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                className: "flex col-span-2 items-center ".concat(childCount === 1 ? "col-span-5" : "", " ").concat(index > 0 ? "justify-center" : ""),
+                                children: child
+                            });
+                        })
                     }),
-                    showCloseButton && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Button, {
-                        plain: true,
-                        icon: _polarisicons.CancelMajor,
-                        onClick: onClose,
-                        tooltip: "Close",
-                        tooltipPosition: "below"
+                    showActionsOrClose && /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                        className: "flex col-span-2 items-center justify-end",
+                        children: [
+                            actions.map(function(action, index) {
+                                var showPopover = action.subActions || action.subSections;
+                                var innerContent = /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                    plain: !action.destructive,
+                                    onClick: showPopover ? function() {
+                                        return setShowActionsPopover(index);
+                                    } : action.onAction || action.onClick,
+                                    disabled: action.disabled,
+                                    icon: action.icon,
+                                    loading: action.loading,
+                                    external: action.external,
+                                    url: action.url,
+                                    destructive: action.destructive,
+                                    tooltip: action.tooltip && showActionsPopover !== index ? action.tooltip : undefined,
+                                    tooltipPosition: "below"
+                                }, index);
+                                if (showPopover) {
+                                    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Popover.default, {
+                                        active: showActionsPopover === index,
+                                        onClose: function() {
+                                            return setShowActionsPopover(null);
+                                        },
+                                        activator: innerContent,
+                                        preferredAlignment: "left",
+                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ActionList.default, {
+                                            sections: action.subSections,
+                                            items: action.subActions,
+                                            onActionAnyItem: function() {
+                                                return setShowActionsPopover(null);
+                                            }
+                                        })
+                                    });
+                                }
+                                return innerContent;
+                            }),
+                            showCloseButton && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                                plain: true,
+                                icon: _polarisicons.CancelMajor,
+                                onClick: onClose,
+                                tooltip: "Close",
+                                tooltipPosition: "below"
+                            })
+                        ]
                     })
                 ]
+            }),
+            subHeader && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: "border-edge-subdued ".concat(bottomBorder ? "border-b" : ""),
+                children: subHeader
             })
         ]
     });

package/dist/cjs/components/Popover.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "default", {
     }
 });
 var _jsxruntime = require("react/jsx-runtime");
-var _react = require("react");
+var _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 var _reactdom = require("react-dom");
 var _tailwindvariants = require("tailwind-variants");
 var _PopoverManager = /*#__PURE__*/ _interop_require_default(require("./PopoverManager"));
@@ -40,6 +40,47 @@ function _interop_require_default(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 _iterable_to_array_limit(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
@@ -148,13 +189,13 @@ var styles = (0, _tailwindvariants.tv)({
  * @param {boolean} [props.sectioned=false] - Whether the popover content is sectioned with padding.
  * @param {string} [props.preferredAlignment="center"] - Preferred alignment for the popover (left, center, right).
  * @param {string} [props.preferredPosition="below"] - Preferred position for the popover (above, below, cover).
- * @param {boolean|string} [props.autofocusTarget=false] - Automatically focus on the first focusable element in the popover.
  * @param {string} [props.className] - Additional class name for the popover.
  * @param {string} [props.containerClassName] - Additional class name for the popover container.
  * @returns {JSX.Element} The rendered popover component.
  */ function Popover() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    var tmp = props.activatorWrapper, ActivatorWrapper = tmp === void 0 ? "div" : tmp, _props_activatorDisplayType = props.activatorDisplayType, activatorDisplayType = _props_activatorDisplayType === void 0 ? "inline-block" : _props_activatorDisplayType, activator = props.activator, children = props.children, onClose = props.onClose, active = props.active, fixed = props.fixed, zIndexOverride = props.zIndexOverride, _props_sectioned = props.sectioned, sectioned = _props_sectioned === void 0 ? false : _props_sectioned, _props_preferredAlignment = props.preferredAlignment, preferredAlignment = _props_preferredAlignment === void 0 ? "center" : _props_preferredAlignment, _props_preferredPosition = props.preferredPosition, preferredPosition = _props_preferredPosition === void 0 ? "below" : _props_preferredPosition, _props_autofocusTarget = props.autofocusTarget, autofocusTarget = _props_autofocusTarget === void 0 ? false : _props_autofocusTarget, _props_matchActivatorWidth = props.matchActivatorWidth, matchActivatorWidth = _props_matchActivatorWidth === void 0 ? false : _props_matchActivatorWidth, _props_maxWidth = props.maxWidth, maxWidth = _props_maxWidth === void 0 ? "default" : _props_maxWidth, className = props.className, containerClassName = props.containerClassName;
+    var activatorWrapper = props.activatorWrapper, _props_activatorDisplayType = props.activatorDisplayType, activatorDisplayType = _props_activatorDisplayType === void 0 ? "inline-block" : _props_activatorDisplayType, activator = props.activator, children = props.children, onClose = props.onClose, active = props.active, fixed = props.fixed, zIndexOverride = props.zIndexOverride, _props_sectioned = props.sectioned, sectioned = _props_sectioned === void 0 ? false : _props_sectioned, _props_preferredAlignment = props.preferredAlignment, preferredAlignment = _props_preferredAlignment === void 0 ? "center" : _props_preferredAlignment, _props_preferredPosition = props.preferredPosition, preferredPosition = _props_preferredPosition === void 0 ? "below" : _props_preferredPosition, _props_matchActivatorWidth = props.matchActivatorWidth, matchActivatorWidth = _props_matchActivatorWidth === void 0 ? false : _props_matchActivatorWidth, _props_maxWidth = props.maxWidth, maxWidth = _props_maxWidth === void 0 ? "default" : _props_maxWidth, className = props.className, containerClassName = props.containerClassName;
+    var ActivatorWrapper = activatorWrapper || "div";
     var idValue = (0, _react.useId)();
     var idRef = (0, _react.useRef)(idValue);
     var initialWidthRef = (0, _react.useRef)(null);
@@ -343,18 +384,30 @@ var styles = (0, _tailwindvariants.tv)({
 }
 Popover.displayName = "Popover";
 var sectionStyles = (0, _tailwindvariants.tv)({
-    base: "Litho-Popover__Section border-b border-edge-default last:border-b-0"
+    base: "Litho-Popover__Section border-b border-edge-default last:border-b-0",
+    variants: {
+        padded: {
+            true: "p-3",
+            false: ""
+        }
+    },
+    defaultVariants: {
+        padded: false
+    }
 });
 /**
  * Section component for use within the Popover.
  *
  * @param {Object} props - The component props.
  * @param {React.ReactNode} [props.children] - The content of the section.
+ * @param {boolean} [props.padded=false] - Whether the section has padding.
  * @returns {JSX.Element} The rendered section.
  */ function Section() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    var children = props.children, className = props.className;
-    var sectionClasses = sectionStyles();
+    var children = props.children, className = props.className, _props_padded = props.padded, padded = _props_padded === void 0 ? false : _props_padded;
+    var sectionClasses = sectionStyles({
+        padded: padded
+    });
     return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
         className: "".concat(sectionClasses).concat(className ? " ".concat(className) : ""),
         children: children

package/dist/cjs/components/RangeSlider.js

@@ -11,7 +11,9 @@ Object.defineProperty(exports, "default", {
 });
 var _jsxruntime = require("react/jsx-runtime");
 var _react = require("react");
-var _index = require("../index");
+var _Label = /*#__PURE__*/ _interop_require_default(require("./Label"));
+var _Text = /*#__PURE__*/ _interop_require_default(require("./Text"));
+var _TextField = /*#__PURE__*/ _interop_require_default(require("./TextField"));
 var _tailwindvariants = require("tailwind-variants");
 function _array_like_to_array(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
@@ -21,6 +23,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;
@@ -159,7 +166,7 @@ function useSyncedState(externalValue) {
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
         className: "Litho-RangeSlider",
         children: [
-            label && !labelHidden && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Label, {
+            label && !labelHidden && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.default, {
                 id: id,
                 hidden: labelHidden,
                 disabled: disabled,
@@ -170,7 +177,7 @@ function useSyncedState(externalValue) {
             /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                 className: "flex items-center gap-2",
                 children: [
-                    prefix && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Text, {
+                    prefix && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.default, {
                         color: "subdued",
                         as: "div",
                         className: prefixClasses,
@@ -209,7 +216,7 @@ function useSyncedState(externalValue) {
                     }),
                     output && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                         className: "max-w-21",
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.TextField, {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_TextField.default, {
                             transparent: true,
                             type: "number",
                             disabled: disabled,

package/dist/cjs/components/ResourceList.js

@@ -10,7 +10,13 @@ Object.defineProperty(exports, "default", {
 });
 var _jsxruntime = require("react/jsx-runtime");
 var _tailwindvariants = require("tailwind-variants");
-var _index = require("../index");
+var _Spinner = /*#__PURE__*/ _interop_require_default(require("./Spinner"));
+var _VerticalStack = /*#__PURE__*/ _interop_require_default(require("./VerticalStack"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 var styles = (0, _tailwindvariants.tv)({
     base: "Litho-ResourceList flex flex-col min-w-72",
     variants: {
@@ -46,14 +52,14 @@ var styles = (0, _tailwindvariants.tv)({
         small: "2",
         large: "4"
     };
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.VerticalStack, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_VerticalStack.default, {
         gap: gapMap[gap],
         className: styles({
             divider: divider
         }),
         children: loading && items.length === 0 ? /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
             className: "flex justify-center items-center p-3",
-            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Spinner, {
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Spinner.default, {
                 size: "small"
             })
         }, "".concat(resourceName.singular, "-loading")) : items.length > 0 ? items.map(function(item, index) {

package/dist/cjs/components/Select.js

@@ -137,6 +137,8 @@ var contentStyles = (0, _tailwindvariants.tv)({
  * @param {function} props.onFocus - Callback for when the select gains focus.
  * @param {function} props.onBlur - Callback for when the select loses focus.
  * @param {boolean} [props.requiredIndicator] - Whether to show a required indicator next to the label.
+ * @param {string} [props.className] - Additional CSS classes to apply to the select container.
+ * @param {string} [props.contentClassName] - Additional CSS classes to apply to the select content area.
  * @returns {JSX.Element} The rendered Select component.
  */ function Select() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};

package/dist/cjs/components/Table.js

@@ -13,7 +13,19 @@ var _jsxruntime = require("react/jsx-runtime");
 var _polarisicons = require("@shopify/polaris-icons");
 var _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 var _Modal = require("../components/Modal");
-var _index = require("../index");
+var _ActionList = /*#__PURE__*/ _interop_require_default(require("./ActionList"));
+var _Button = /*#__PURE__*/ _interop_require_default(require("./Button"));
+var _ButtonGroup = /*#__PURE__*/ _interop_require_default(require("./ButtonGroup"));
+var _Card = /*#__PURE__*/ _interop_require_default(require("./Card"));
+var _Checkbox = /*#__PURE__*/ _interop_require_default(require("./Checkbox"));
+var _EmptyState = /*#__PURE__*/ _interop_require_default(require("./EmptyState"));
+var _Icon = /*#__PURE__*/ _interop_require_default(require("./Icon"));
+var _Pagination = /*#__PURE__*/ _interop_require_default(require("./Pagination"));
+var _Popover = /*#__PURE__*/ _interop_require_default(require("./Popover"));
+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 _Tooltip = /*#__PURE__*/ _interop_require_default(require("./Tooltip"));
 var _Table = require("../styles/Table");
 var _useIndexResourceState = require("../utilities/useIndexResourceState");
 var _useMounted = require("../utilities/useMounted");
@@ -291,7 +303,7 @@ var TableWrapperContext = /*#__PURE__*/ (0, _react.createContext)({});
     };
     var headings = [
         selectable && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Checkbox, {
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Checkbox.default, {
                 checked: [
                     _useIndexResourceState.SelectionType.Page,
                     _useIndexResourceState.SelectionType.All
@@ -492,7 +504,7 @@ var TableWrapperContext = /*#__PURE__*/ (0, _react.createContext)({});
                     var sortIndex = selectable ? indexAdjusted - 1 : indexAdjusted;
                     var sortContent = isSortable ? /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                         className: "min-h-5 ".concat(sort.index === sortIndex ? "opacity-100" : "opacity-0 group-hover:opacity-100"),
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
                             source: sort.direction === "ascending" ? _polarisicons.SortAscendingMajor : _polarisicons.SortDescendingMajor
                         })
                     }) : null;
@@ -530,7 +542,8 @@ var TableWrapperContext = /*#__PURE__*/ (0, _react.createContext)({});
                             alignment: alignment,
                             verticalAlign: verticalAlign,
                             tableIsSelectable: selectable,
-                            headingStyle: headingStyle
+                            headingStyle: headingStyle,
+                            bordered: bordered
                         }),
                         style: {
                             width: width,
@@ -540,7 +553,7 @@ var TableWrapperContext = /*#__PURE__*/ (0, _react.createContext)({});
                             className: _Table.styles.headingLabelContainerStyles({
                                 alignment: alignment
                             }),
-                            children: heading.hidden ? null : heading.tooltip || heading.tooltipContent ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Tooltip, {
+                            children: heading.hidden ? null : heading.tooltip || heading.tooltipContent ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_Tooltip.default, {
                                 content: heading.tooltip || heading.tooltipContent,
                                 preferredPosition: "above",
                                 children: labelContent
@@ -727,10 +740,10 @@ var TableWrapperContext = /*#__PURE__*/ (0, _react.createContext)({});
                 children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
                     className: "flex items-center gap-5 h-full min-h-9 pl-4",
                     children: [
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Spinner, {
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Spinner.default, {
                             size: "small"
                         }),
-                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_index.Text, {
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Text.default, {
                             color: "subdued",
                             fontWeight: "normal",
                             children: [
@@ -761,7 +774,7 @@ var TableWrapperContext = /*#__PURE__*/ (0, _react.createContext)({});
                         sticky: isHeaderSticky
                     }),
                     children: [
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Checkbox, {
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Checkbox.default, {
                             checked: isPageSelected || isAllSelected,
                             indeterminate: isSomeSelected,
                             disabled: showEmptyState,
@@ -805,7 +818,7 @@ var TableWrapperContext = /*#__PURE__*/ (0, _react.createContext)({});
             ref: containerRef,
             children: [
                 /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-                    className: "relative overflow-hidden",
+                    className: "relative overflow-hidden ".concat(bordered ? "rounded-md" : ""),
                     children: [
                         loading ? /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                             className: "pt-9",
@@ -873,7 +886,7 @@ var TableWrapperContext = /*#__PURE__*/ (0, _react.createContext)({});
                                 canScrollRight: canScrollRight
                             })
                         }),
-                        showEmptyState ? emptyState ? emptyState : /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.EmptyState, {
+                        showEmptyState ? emptyState ? emptyState : /*#__PURE__*/ (0, _jsxruntime.jsx)(_EmptyState.default, {
                             title: "No ".concat(resourceName.plural, " found"),
                             description: "Try changing the filters or search term"
                         }) : null
@@ -989,7 +1002,7 @@ Table.displayName = "Table";
         children: [
             selectable && !reverseColumns && /*#__PURE__*/ (0, _jsxruntime.jsx)(Table.Cell, {
                 selectionCell: true,
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Checkbox, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Checkbox.default, {
                     checked: isSelected,
                     onChange: handleCheckboxSelectionChange
                 })
@@ -1065,19 +1078,19 @@ Table.Cell.displayName = "Table.Cell";
  */ function Footer(param) {
     var hasNextPage = param.hasNextPage, hasPreviousPage = param.hasPreviousPage, onNext = param.onNext, onPrevious = param.onPrevious, _param_showTotalResultCount = param.showTotalResultCount, showTotalResultCount = _param_showTotalResultCount === void 0 ? false : _param_showTotalResultCount, _param_total = param.total, total = _param_total === void 0 ? 0 : _param_total, _param_paddedHalf = param.paddedHalf, paddedHalf = _param_paddedHalf === void 0 ? false : _param_paddedHalf;
     if (!hasNextPage && !hasPreviousPage) return null;
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Card.Section, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default.Section, {
         borderTop: true,
         paddedHalf: paddedHalf,
         children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
             className: "flex justify-start",
             children: [
-                /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Pagination, {
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Pagination.default, {
                     hasPrevious: hasPreviousPage,
                     hasNext: hasNextPage,
                     onNext: onNext,
                     onPrevious: onPrevious
                 }),
-                showTotalResultCount && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_index.Text, {
+                showTotalResultCount && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Text.default, {
                     color: "subdued",
                     children: [
                         total,
@@ -1107,9 +1120,9 @@ Table.Footer.displayName = "Table.Footer";
     };
     var renderPopover = function(index, title, actions) {
         var icon = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : null, disclosure = arguments.length > 4 && arguments[4] !== void 0 ? arguments[4] : true;
-        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Popover, {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Popover.default, {
             active: activeBulkAction === index,
-            activator: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Button, {
+            activator: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
                 onClick: function() {
                     return handleToggle(index);
                 },
@@ -1122,7 +1135,7 @@ Table.Footer.displayName = "Table.Footer";
             onClose: function() {
                 return setActiveBulkAction(null);
             },
-            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.ActionList, {
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ActionList.default, {
                 items: actions,
                 onActionAnyItem: function() {
                     return setActiveBulkAction(null);
@@ -1132,7 +1145,7 @@ Table.Footer.displayName = "Table.Footer";
     };
     return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
         className: _Table.styles.bulkActionStyles(),
-        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_index.ButtonGroup, {
+        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_ButtonGroup.default, {
             segmented: true,
             children: [
                 promotedBulkActions.map(function(action, index) {
@@ -1170,7 +1183,7 @@ Table.BulkActions.displayName = "Table.BulkActions";
                 length: columns
             }, function(_, index) {
                 return /*#__PURE__*/ (0, _jsxruntime.jsx)(Table.Cell, {
-                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.SkeletonText, {
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_SkeletonText.default, {
                         lines: 1,
                         className: "w-96"
                     })

package/dist/cjs/components/Text.js

@@ -138,7 +138,7 @@ var styles = (0, _tailwindvariants.tv)({
             "btn-secondary-fg": "text-btn-secondary-fg",
             "tab-active-fg": "text-tab-active-fg",
             "tab-active-fg-low": "text-tab-active-fg-low",
-            "FrameSaveBar": "text-alternate dark:text-black"
+            FrameSaveBar: "text-alternate dark:text-black"
         },
         truncate: {
             true: "truncate",
@@ -241,10 +241,11 @@ var styles = (0, _tailwindvariants.tv)({
  * @param {string} [props.as] - Element type (e.g., 'p' or 'span').
  * @param {number} [props.clampLines] - Number of lines to clamp.
  * @param {boolean} [props.strike] - Whether to strike through the text.
+ * @param {React.ReactNode} [props.children] - The content to be displayed within the text component. Defaults to an empty string.
  * @returns {JSX.Element} Rendered text component with applied styles.
  */ function Text() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    var alignment = props.alignment, as = props.as, className = props.className, color = props.color, fontWeight = props.fontWeight, truncate = props.truncate, variant = props.variant, visuallyHidden = props.visuallyHidden, clampLines = props.clampLines, strike = props.strike, rest = _object_without_properties(props, [
+    var alignment = props.alignment, as = props.as, className = props.className, color = props.color, fontWeight = props.fontWeight, truncate = props.truncate, variant = props.variant, visuallyHidden = props.visuallyHidden, clampLines = props.clampLines, strike = props.strike, children = props.children, rest = _object_without_properties(props, [
         "alignment",
         "as",
         "className",
@@ -254,7 +255,8 @@ var styles = (0, _tailwindvariants.tv)({
         "variant",
         "visuallyHidden",
         "clampLines",
-        "strike"
+        "strike",
+        "children"
     ]);
     var classes = styles({
         alignment: alignment,
@@ -266,9 +268,10 @@ var styles = (0, _tailwindvariants.tv)({
         clampLines: clampLines,
         strike: strike
     });
-    var Element = as || (visuallyHidden ? 'span' : 'p');
+    var Element = as || (visuallyHidden ? "span" : "p");
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(Element, _object_spread_props(_object_spread({}, rest), {
-        className: "".concat(classes).concat(className ? " ".concat(className) : '')
+        className: "".concat(classes).concat(className ? " ".concat(className) : ""),
+        children: children
     }));
 }
 var _default = Text;