@heymantle/litho 0.0.10 → 0.0.13

package/dist/cjs/components/Link.js

@@ -10,6 +10,12 @@ Object.defineProperty(exports, "default", {
 });
 var _jsxruntime = require("react/jsx-runtime");
 var _tailwindvariants = require("tailwind-variants");
+var _Icon = /*#__PURE__*/ _interop_require_default(require("./Icon"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 var styles = (0, _tailwindvariants.tv)({
     base: "Litho-Link cursor-pointer hover:underline",
     variants: {
@@ -27,6 +33,10 @@ var styles = (0, _tailwindvariants.tv)({
         disabled: {
             true: "text-lowest hover:text-lowest cursor-default hover:no-underline",
             false: ""
+        },
+        hasIcon: {
+            true: "inline-flex items-center gap-1",
+            false: ""
         }
     },
     compoundVariants: [
@@ -72,6 +82,12 @@ var styles = (0, _tailwindvariants.tv)({
             color: "highlight",
             className: "text-highlight-alt-fg dark:text-highlight-alt-fg-dark"
         },
+        {
+            disabled: false,
+            monochrome: false,
+            color: "insight",
+            className: "text-insight-text dark:text-insight-text"
+        },
         {
             disabled: false,
             monochrome: false,
@@ -95,6 +111,7 @@ var styles = (0, _tailwindvariants.tv)({
  * @param {React.ReactNode} props.children - Content to display within the link.
  * @param {Function} [props.onClick] - Optional click event handler for the link.
  * @param {boolean} [props.external=false] - If true, opens the link in a new tab.
+ * @param {boolean} [props.insight=false] - If true, set the color and iconColor to insight
  * @param {string} [props.target] - Optional target attribute for specifying where to open the link.
  * @param {string} [props.id] - Optional id attribute for the link.
  * @param {boolean} [props.monochrome=false] - If true, applies monochrome color scheme.
@@ -103,19 +120,24 @@ var styles = (0, _tailwindvariants.tv)({
  * @param {string} [props.dataPrimaryLink] - Optional data attribute for custom tracking.
  * @param {Function} [props.onMouseEnter] - Optional mouse enter event handler for the link.
  * @param {Function} [props.onMouseLeave] - Optional mouse leave event handler for the link.
+ * @param {React.ReactNode} [props.icon] - Optional icon to display within the link.
  *
  * @returns {JSX.Element} Rendered link element.
  */ function Link() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    var url = props.url, children = props.children, onClick = props.onClick, external = props.external, target = props.target, _props_bold = props.bold, bold = _props_bold === void 0 ? false : _props_bold, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, id = props.id, monochrome = props.monochrome, removeUnderline = props.removeUnderline, accessibilityLabel = props.accessibilityLabel, dataPrimaryLink = props.dataPrimaryLink, color = props.color, className = props.className, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave;
+    var url = props.url, children = props.children, onClick = props.onClick, external = props.external, target = props.target, _props_bold = props.bold, bold = _props_bold === void 0 ? false : _props_bold, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, _props_insight = props.insight, insight = _props_insight === void 0 ? false : _props_insight, id = props.id, monochrome = props.monochrome, removeUnderline = props.removeUnderline, accessibilityLabel = props.accessibilityLabel, dataPrimaryLink = props.dataPrimaryLink, _color = props.color, className = props.className, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave, icon = props.icon, _iconColor = props.iconColor, _props_iconSize = props.iconSize, iconSize = _props_iconSize === void 0 ? "sm" : _props_iconSize;
+    var hasIcon = icon !== undefined;
+    var color = insight ? "insight" : _color;
+    var iconColor = insight ? "insight" : _iconColor;
     var classes = styles({
         monochrome: monochrome,
         removeUnderline: removeUnderline,
         bold: bold,
         disabled: disabled,
-        color: color
+        color: color,
+        hasIcon: hasIcon
     });
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)("a", {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("a", {
         href: disabled ? undefined : url,
         className: "".concat(classes).concat(className ? " ".concat(className) : ""),
         onClick: disabled ? undefined : onClick,
@@ -125,7 +147,16 @@ var styles = (0, _tailwindvariants.tv)({
         "data-primary-link": dataPrimaryLink,
         onMouseEnter: onMouseEnter,
         onMouseLeave: onMouseLeave,
-        children: children
+        children: [
+            icon && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Icon.default, {
+                source: icon,
+                color: iconColor,
+                size: iconSize
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                children: children
+            })
+        ]
     });
 }
 Link.displayName = "Link";

package/dist/cjs/components/Modal.js

@@ -28,6 +28,7 @@ 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");
+var _useBodyScrollLock = require("../utilities/useBodyScrollLock");
 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];
@@ -198,6 +199,7 @@ var sectionStyles = (0, _tailwindvariants.tv)({
  * @param {string} [props.size="default"] - The size of the modal (default, large, or full).
  * @param {React.ReactNode} [props.leftAccessory] - Left accessory content in the footer.
  * @param {boolean} [props.hideCloseButton=false] - Whether to hide the close button.
+ * @param {Function} [props.backAction] - Callback function for the back button. When provided, displays a back button next to the title.
  * @param {number} [props.zIndexOverride=1000] - The z-index of the modal.
  * @param {boolean} [props.autoFocusFirstInput=true] - Whether to focus the first input when the modal opens.
  * @param {string} [props.bodyClassName] - Additional CSS classes to apply to the modal body.
@@ -228,6 +230,8 @@ var sectionStyles = (0, _tailwindvariants.tv)({
             document.body.removeChild(div);
         };
     }, []);
+    // Lock body scroll when modal is open
+    (0, _useBodyScrollLock.useBodyScrollLock)(open);
     (0, _react.useEffect)(function() {
         setModalIsOpen(open);
         if (!open || !onClose) return;

package/dist/cjs/components/Page.js

@@ -420,8 +420,9 @@ var contentStyles = (0, _tailwindvariants.tv)({
                                                             return closePopover(index);
                                                         },
                                                         activator: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
-                                                            plain: true,
+                                                            plain: !action.insight,
                                                             disclosure: true,
+                                                            insight: action.insight,
                                                             icon: action.icon,
                                                             onClick: function() {
                                                                 return togglePopover(index);
@@ -437,7 +438,7 @@ var contentStyles = (0, _tailwindvariants.tv)({
                                                     }, index);
                                                 }
                                                 return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
-                                                    plain: !action.destructive,
+                                                    plain: !action.destructive && !action.insight,
                                                     onClick: action.onAction || action.onClick,
                                                     disabled: action.disabled,
                                                     icon: action.icon,
@@ -445,7 +446,9 @@ var contentStyles = (0, _tailwindvariants.tv)({
                                                     external: action.external,
                                                     url: action.url,
                                                     destructive: action.destructive,
+                                                    insight: action.insight,
                                                     tooltip: action.tooltip,
+                                                    className: action.insight ? "mx-0.5" : "",
                                                     children: action.content
                                                 }, index);
                                             })