@lightsparkdev/ui 0.0.7 → 0.0.9

package/dist/components/Modal.cjs

@@ -72,8 +72,8 @@ __export(Modal_exports, {
 });
 module.exports = __toCommonJS(Modal_exports);
 var import_styled7 = __toESM(require("@emotion/styled"), 1);
-var import_react12 = __toESM(require("react"), 1);
-var import_react_dom = __toESM(require("react-dom"), 1);
+var import_react15 = __toESM(require("react"), 1);
+var import_react_dom2 = __toESM(require("react-dom"), 1);
 
 // src/hooks/useLiveRef.tsx
 var import_react = require("react");
@@ -207,7 +207,6 @@ function useBreakpoints() {
 // src/styles/common.tsx
 var import_react5 = require("@emotion/react");
 var import_styled = __toESM(require("@emotion/styled"), 1);
-var import_react_tooltip = require("react-tooltip");
 
 // src/styles/colors.tsx
 var import_react4 = require("@emotion/react");
@@ -1321,65 +1320,53 @@ function hexToRGB(hex) {
   ] : [0, 0, 0];
 }
 
-// src/styles/z-index.tsx
-var z = {
-  card: 1,
-  fieldError: 1,
-  textInput: 2,
-  select: 3,
-  selectFocused: 4,
-  walletActionPreviewTopGradient: 1,
-  headerContainer: 99,
-  smBanner: 99,
-  headerTop: 100,
-  navMenu: 100,
-  smNavMenu: 100,
-  navAction: 101,
-  smNavAction: 100,
-  // keep under navDropdown
-  tooltip: 160,
-  notificationBanner: 170,
-  qrReaderVideo: 180,
-  qrReaderOverlay: 181,
-  modalOverlay: 190,
-  modalContainer: 191,
-  dropdown: 192,
-  toast: 200
-};
-
 // src/styles/common.tsx
 var rootFontSizePx = 12;
 var rootFontSizeRems = rootFontSizePx / 16;
-var standardContentInsetPx = 32;
-var standardContentInsetMdPx = 24;
-var standardContentInsetSmPx = 16;
+function buildStandardContentInset(smPx, minSmMaxLgPx, lgPx) {
+  const smCSS = import_react5.css`
+    ${bp.sm(`
+      margin-left: auto;
+      margin-right: auto;
+      width: calc(100% - ${smPx * 2}px);
+    `)}
+  `;
+  const minSmMaxLgCSS = import_react5.css`
+    ${bp.minSmMaxLg(`
+      margin-left: auto;
+      margin-right: auto;
+      width: calc(100% - ${minSmMaxLgPx * 2}px);
+    `)}
+  `;
+  const lgCSS = import_react5.css`
+    ${bp.lg(`
+      margin-left: auto;
+      margin-right: auto;
+      width: calc(100% - ${lgPx * 2}px);
+      max-width: 1280px;
+    `)}
+  `;
+  return {
+    smPx,
+    minSmMaxLgPx,
+    lgPx,
+    smCSS,
+    minSmMaxLgCSS,
+    lgCSS,
+    css: import_react5.css`
+      ${lgCSS}
+      ${smCSS}
+      ${minSmMaxLgCSS}
+    `
+  };
+}
+var standardContentInset = buildStandardContentInset(16, 24, 32);
 var standardBorderRadius = (radius) => {
   const borderRadiusPx = Array.isArray(radius) ? radius.map((r) => `${r}px`).join(" ") : `${radius}px`;
   return `
     border-radius: ${borderRadiusPx};
   `;
 };
-var smContentInset = import_react5.css`
-  ${bp.sm(`
-    margin-left: auto;
-    margin-right: auto;
-    width: calc(100% - ${standardContentInsetSmPx * 2}px);
-  `)}
-`;
-var minSmMaxLgContentInset = import_react5.css`
-  ${bp.minSmMaxLg(`
-    width: calc(100% - ${standardContentInsetMdPx * 2}px);
-  `)}
-`;
-var standardContentInset = import_react5.css`
-  margin-left: auto;
-  margin-right: auto;
-  width: calc(100% - ${standardContentInsetPx * 2}px);
-  max-width: 1280px;
-
-  ${smContentInset}
-  ${minSmMaxLgContentInset}
-`;
 var standardCardShadow = import_react5.css`
   box-shadow:
     0px 4px 10px 0px rgba(0, 0, 0, 0.08),
@@ -1414,9 +1401,6 @@ var Subtext = import_styled.default.div`
 var darkGradientBg = import_react5.css`
   background: ${darkGradient};
 `;
-var StyledTooltip = (0, import_styled.default)(import_react_tooltip.Tooltip)`
-  z-index: ${z.modalOverlay};
-`;
 var overlaySurfaceBorderColor = ({
   theme,
   important = false
@@ -1499,6 +1483,32 @@ var overflowAutoWithoutScrollbars = import_react6.css`
   }
 `;
 
+// src/styles/z-index.tsx
+var z = {
+  card: 1,
+  fieldError: 1,
+  textInput: 2,
+  select: 3,
+  selectFocused: 4,
+  walletActionPreviewTopGradient: 1,
+  headerContainer: 99,
+  smBanner: 99,
+  headerTop: 100,
+  navMenu: 100,
+  smNavMenu: 100,
+  navAction: 101,
+  smNavAction: 100,
+  // keep under navDropdown
+  notificationBanner: 170,
+  qrReaderVideo: 180,
+  qrReaderOverlay: 181,
+  modalOverlay: 190,
+  modalContainer: 191,
+  dropdown: 192,
+  tooltip: 193,
+  toast: 200
+};
+
 // src/utils/emotion.tsx
 function select(component) {
   return component.toString();
@@ -1546,32 +1556,36 @@ function Link({
   externalLink,
   params,
   children,
-  css: css6,
+  css: css7,
   onClick,
   className,
   hash = null,
   blue = false,
   newTab = false
 }) {
-  if (!isString(to) && !externalLink) {
-    throw new Error("Link must have either `to` or `externalLink` defined");
+  if (!isString(to) && !externalLink && !onClick) {
+    throw new Error(
+      "Link must have either `to` or `externalLink` or `onClick` defined"
+    );
   }
   let toStr;
   if (isString(to)) {
     toStr = replaceParams(to, params);
     toStr += hash ? `#${hash}` : "";
-  } else {
+  } else if (externalLink) {
     const definedExternalLink = externalLink;
     if (!definedExternalLink.startsWith("http")) {
       throw new Error("Link's externalLink must start with http");
     }
     toStr = definedExternalLink;
+  } else {
+    toStr = "#";
   }
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     import_react_router_dom.Link,
     {
       to: toStr,
-      css: css6,
+      css: css7,
       onClick,
       className,
       style: { color: blue ? colors.blue43 : "inherit" },
@@ -1604,8 +1618,10 @@ function toReactNodes(toReactNodesArg) {
 }
 
 // src/components/Button.tsx
-var import_react10 = require("@emotion/react");
+var import_react12 = require("@emotion/react");
 var import_styled5 = __toESM(require("@emotion/styled"), 1);
+var import_lodash_es3 = require("lodash-es");
+var import_react13 = require("react");
 
 // src/components/Icon.tsx
 var import_styled2 = __toESM(require("@emotion/styled"), 1);
@@ -1686,9 +1702,62 @@ var IconContainer = import_styled2.default.span`
   `}
 `;
 
+// src/components/LightTooltip.tsx
+var import_css = require("@emotion/css");
+var import_react10 = require("@emotion/react");
+var import_react11 = __toESM(require("react"), 1);
+var import_react_dom = __toESM(require("react-dom"), 1);
+var import_react_tooltip = require("react-tooltip");
+var import_jsx_runtime5 = require("@emotion/react/jsx-runtime");
+function LightTooltip(props) {
+  const nodeRef = (0, import_react11.useRef)(null);
+  const [nodeReady, setNodeReady] = import_react11.default.useState(false);
+  (0, import_react11.useEffect)(() => {
+    if (!nodeRef.current) {
+      nodeRef.current = document.createElement("div");
+      document.body.appendChild(nodeRef.current);
+    }
+    setNodeReady(true);
+    return () => {
+      if (nodeRef.current) {
+        document.body.removeChild(nodeRef.current);
+        nodeRef.current = null;
+      }
+    };
+  }, []);
+  const theme = (0, import_react10.useTheme)();
+  console.log("LightTooltip.tsx: tooltipProps:", props);
+  return nodeReady && nodeRef.current ? import_react_dom.default.createPortal(
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      import_react_tooltip.Tooltip,
+      __spreadProps(__spreadValues({}, props), {
+        id: props.id || "",
+        content: props.content || "",
+        noArrow: true,
+        border: "0.05rem solid rgba(0, 0, 0, 0.1)",
+        className: styles({ theme }),
+        variant: "light",
+        delayShow: 180
+      })
+    ),
+    nodeRef.current
+  ) : null;
+}
+var styles = ({ theme }) => import_css.css`
+  font-size: "10px",
+  color: ${theme.c2Neutral};
+  border-radius: 8px !important;
+  padding: 16px !important;
+  z-index: ${z.tooltip};
+  ${overlaySurface({ theme, important: true })};
+
+  max-width: 260px;
+  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.10), 0px 4px 8px 0px rgba(0, 0, 0, 0.08) !important;
+`;
+
 // src/components/Loading.tsx
 var import_styled3 = __toESM(require("@emotion/styled"), 1);
-var import_jsx_runtime5 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime6 = require("@emotion/react/jsx-runtime");
 var defaultProps = {
   size: 60,
   center: true,
@@ -1699,7 +1768,7 @@ function Loading({
   size: size2 = defaultProps.size,
   ml = defaultProps.ml
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(LoadingWrapper, { center, ml, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Rotate, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { name: "LoadingSpinner", width: size2 }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(LoadingWrapper, { center, ml, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Rotate, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "LoadingSpinner", width: size2 }) }) });
 }
 Loading.defaultProps = defaultProps;
 var LoadingWrapper = import_styled3.default.div`
@@ -1753,7 +1822,7 @@ var UnstyledButton = import_styled4.default.button`
 `;
 
 // src/components/Button.tsx
-var import_jsx_runtime6 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime7 = require("@emotion/react/jsx-runtime");
 function getTextColor({ color, theme, primary: primary2, blue }) {
   if (color) {
     return color;
@@ -1788,12 +1857,37 @@ function getBackgroundColor({
   }
   return themeOr(colors.white, theme.c1Neutral)({ theme });
 }
-function getPaddingX({ size: size2, ghost }) {
-  return ghost ? 0 : size2 === "lg" ? hPaddingPx : size2 === "md" ? 18 : 16;
+var paddingsY = {
+  lg: 14,
+  md: 9,
+  sm: 6
+};
+var roundPaddingsX = {
+  lg: 19,
+  md: 14,
+  sm: 10
+};
+var paddingsX = {
+  lg: 24,
+  md: 18,
+  sm: 16
+};
+function getPaddingX({
+  size: size2,
+  ghost,
+  isRound
+}) {
+  return ghost ? 0 : isRound ? roundPaddingsX[size2] : paddingsX[size2];
 }
-function getPadding({ iconWidth, size: size2, ghost, iconSide }) {
-  const paddingY = ghost ? 0 : size2 === "lg" ? 14 : size2 === "md" ? 9 : 6;
-  const paddingX = getPaddingX({ size: size2, ghost });
+function getPadding({
+  iconWidth,
+  size: size2,
+  ghost,
+  iconSide,
+  isRound
+}) {
+  const paddingY = ghost ? 0 : paddingsY[size2];
+  const paddingX = getPaddingX({ size: size2, ghost, isRound });
   const paddingForIcon = iconWidth && !ghost ? iconWidth : 0;
   return `${paddingY}px ${paddingX + (iconSide === "right" ? paddingForIcon : 0)}px ${paddingY}px ${paddingX + (iconSide === "left" ? paddingForIcon : 0)}px`;
 }
@@ -1842,40 +1936,46 @@ function Button({
   type = "button",
   blue = false,
   newTab = false,
-  zIndex = void 0
+  zIndex = void 0,
+  tooltipText
 }) {
+  const tooltipId = (0, import_react13.useRef)((0, import_lodash_es3.uniqueId)());
   const iconMarginRight = 6;
   const iconSize = size2 === "lg" ? 16 : 12;
   let currentIcon = null;
   if (loading) {
-    currentIcon = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ButtonIcon, { ghost, iconSide, text, size: size2, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Loading, { size: iconSize, center: false }) });
+    currentIcon = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ButtonIcon, { ghost, iconSide, text, size: size2, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Loading, { size: iconSize, center: false }) });
   } else if (icon) {
-    currentIcon = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ButtonIcon, { ghost, iconSide, text, size: size2, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: icon, width: iconSize }) });
+    currentIcon = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ButtonIcon, { ghost, iconSide, text, size: size2, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { name: icon, width: iconSize }) });
   }
-  const content = /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-    "div",
-    {
-      css: {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center"
-      },
-      children: [
-        iconSide === "left" && currentIcon,
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-          "div",
-          {
-            css: {
-              textOverflow: "ellipsis",
-              overflow: "hidden"
-            },
-            children: text
-          }
-        ),
-        iconSide === "right" && currentIcon
-      ]
-    }
-  );
+  const content = /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react13.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      "div",
+      __spreadProps(__spreadValues({}, tooltipText ? { "data-tooltip-id": tooltipId.current } : {}), {
+        css: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        children: [
+          iconSide === "left" && currentIcon,
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            "div",
+            {
+              css: {
+                textOverflow: "ellipsis",
+                overflow: "hidden"
+              },
+              children: text
+            }
+          ),
+          iconSide === "right" && currentIcon
+        ]
+      })
+    ),
+    tooltipText ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(LightTooltip, { id: tooltipId.current, content: tooltipText }) : null
+  ] });
+  const isSingleCharRoundButton = Boolean(text && text.length === 1 && !icon);
   const commonProps = {
     backgroundColor,
     color,
@@ -1888,6 +1988,7 @@ function Button({
     fullWidth,
     blue,
     iconSide,
+    isRound: isSingleCharRoundButton,
     iconWidth: currentIcon ? iconSize + iconMarginRight : 0,
     isLoading: loading,
     disabled: disabled || loading,
@@ -1900,11 +2001,10 @@ function Button({
     zIndex
   };
   if (to) {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ButtonLink, __spreadProps(__spreadValues({}, commonProps), { to, params: toParams, hash, children: content }));
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ButtonLink, __spreadProps(__spreadValues({}, commonProps), { to, params: toParams, hash, children: content }));
   }
-  return href ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ButtonHrefLink, __spreadProps(__spreadValues({}, commonProps), { href, target: "_blank", children: content })) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(StyledButton, __spreadProps(__spreadValues({}, commonProps), { children: content }));
+  return href ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ButtonHrefLink, __spreadProps(__spreadValues({}, commonProps), { href, target: "_blank", children: content })) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(StyledButton, __spreadProps(__spreadValues({}, commonProps), { children: content }));
 }
-var hPaddingPx = 24;
 var buttonStyle = ({
   color,
   backgroundColor,
@@ -1920,8 +2020,9 @@ var buttonStyle = ({
   blue,
   text,
   zIndex,
-  iconSide
-}) => import_react10.css`
+  iconSide,
+  isRound
+}) => import_react12.css`
   display: inline-flex;
   opacity: ${disabled && !isLoading ? 0.2 : 1};
   transition: opacity 0.2s;
@@ -1957,8 +2058,15 @@ var buttonStyle = ({
   primary: primary2,
   blue
 })};
-    border-radius: 32px;
-    padding: ${getPadding({ size: size2, iconWidth, text, ghost, iconSide })};
+    border-radius: ${isRound ? "100%" : "32px"};
+    padding: ${getPadding({
+  size: size2,
+  iconWidth,
+  text,
+  ghost,
+  iconSide,
+  isRound
+})};
     color: ${getTextColor({ color, theme, primary: primary2, blue })};
     transition:
       background-color 0.2s ease-out,
@@ -1971,7 +2079,7 @@ var buttonStyle = ({
 `;
 var ButtonIcon = import_styled5.default.div`
   ${(props) => props.ghost ? "" : "position: absolute;"}
-  ${({ iconSide, ghost, text, size: size2 }) => `${iconSide}: ${ghost && text ? 0 : getPaddingX({ size: size2, ghost })}px;`}
+  ${({ iconSide, ghost, text, size: size2 }) => `${iconSide}: ${ghost && text ? 0 : getPaddingX({ size: size2, ghost, isRound: false })}px;`}
 `;
 var StyledButton = (0, import_styled5.default)(UnstyledButton)`
   ${(props) => buttonStyle(props)}
@@ -1985,8 +2093,8 @@ var ButtonHrefLink = import_styled5.default.a`
 
 // src/components/ProgressBar.tsx
 var import_styled6 = __toESM(require("@emotion/styled"), 1);
-var import_react11 = require("react");
-var import_jsx_runtime7 = require("@emotion/react/jsx-runtime");
+var import_react14 = require("react");
+var import_jsx_runtime8 = require("@emotion/react/jsx-runtime");
 var defaultProps2 = {
   isSm: false,
   stepDuration: 0.5
@@ -1997,8 +2105,8 @@ function ProgressBar({
   isSm = defaultProps2.isSm,
   stepDuration = defaultProps2.stepDuration
 }) {
-  const [percentage, setPercentage] = (0, import_react11.useState)(5);
-  (0, import_react11.useEffect)(() => {
+  const [percentage, setPercentage] = (0, import_react14.useState)(5);
+  (0, import_react14.useEffect)(() => {
     if (progressPercentage !== void 0) {
       setPercentage(progressPercentage);
     } else {
@@ -2007,7 +2115,7 @@ function ProgressBar({
       }, 0);
     }
   }, [progressPercentage]);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ProgressBarContainer, { isSm, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Bar, { isSm, percentage, stepDuration, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ProgressBarContainer, { isSm, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Bar, { isSm, percentage, stepDuration, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     BarBg,
     {
       background,
@@ -2054,7 +2162,7 @@ var Bar = import_styled6.default.div`
 `;
 
 // src/components/Modal.tsx
-var import_jsx_runtime8 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime9 = require("@emotion/react/jsx-runtime");
 function Modal({
   visible,
   title,
@@ -2069,31 +2177,31 @@ function Modal({
   submitDisabled,
   submitLoading,
   submitText,
-  cancelText,
+  cancelText = "Cancel",
   firstFocusRef,
   nonDismissable = false,
   autoFocus = true,
   width = 460,
   progressBar
 }) {
-  const visibleChangedRef = (0, import_react12.useRef)(false);
-  const nodeRef = (0, import_react12.useRef)(null);
+  const visibleChangedRef = (0, import_react15.useRef)(false);
+  const nodeRef = (0, import_react15.useRef)(null);
   const [defaultFirstFocusRef, defaultFirstFocusRefCb] = useLiveRef();
   const ref = firstFocusRef || defaultFirstFocusRef;
-  const [nodeReady, setNodeReady] = import_react12.default.useState(false);
-  const overlayRef = (0, import_react12.useRef)(null);
-  const prevFocusedElement = (0, import_react12.useRef)();
-  const modalContainerRef = (0, import_react12.useRef)(null);
+  const [nodeReady, setNodeReady] = import_react15.default.useState(false);
+  const overlayRef = (0, import_react15.useRef)(null);
+  const prevFocusedElement = (0, import_react15.useRef)();
+  const modalContainerRef = (0, import_react15.useRef)(null);
   const bp2 = useBreakpoints();
   const isSm = bp2.current("sm" /* sm */);
   const formattedDescription = description ? toReactNodes(description) : null;
-  (0, import_react12.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (visible !== visibleChangedRef.current) {
       visibleChangedRef.current = visible;
     }
   }, [visible]);
   const visibleChanged = visible !== visibleChangedRef.current;
-  (0, import_react12.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     prevFocusedElement.current = document.activeElement;
     if (!nodeRef.current) {
       nodeRef.current = document.createElement("div");
@@ -2107,7 +2215,7 @@ function Modal({
       }
     };
   }, []);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     const handleOutsideClick = (event) => {
       if (visible && overlayRef.current && event.target && overlayRef.current.contains(event.target) && !nonDismissable) {
         onClose();
@@ -2144,7 +2252,7 @@ function Modal({
       }
     };
   }, [onClose, visible, nonDismissable]);
-  (0, import_react12.useLayoutEffect)(() => {
+  (0, import_react15.useLayoutEffect)(() => {
     if (visible) {
       if (visibleChanged) {
         prevFocusedElement.current = document.activeElement;
@@ -2173,9 +2281,9 @@ function Modal({
       onClose();
     }
   }
-  const modalContent = /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react12.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ModalOverlay, { ref: overlayRef }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  const modalContent = /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react15.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ModalOverlay, { ref: overlayRef }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       ModalContainer,
       {
         "aria-modal": true,
@@ -2183,30 +2291,30 @@ function Modal({
         tabIndex: -1,
         role: "dialog",
         ref: modalContainerRef,
-        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(ModalContent, { width, ghost, children: [
-          !firstFocusRef && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DefaultFocusTarget, { ref: defaultFirstFocusRefCb }),
-          !(nonDismissable || ghost) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CloseButton, { onClick: onClickCloseButton, type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { name: "Close", width: 9 }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(ModalContentInner, { ghost, children: [
-            progressBar ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { css: { marginBottom: "20px" }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(ModalContent, { width, ghost, children: [
+          !firstFocusRef && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DefaultFocusTarget, { ref: defaultFirstFocusRefCb }),
+          !(nonDismissable || ghost) && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CloseButton, { onClick: onClickCloseButton, type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { name: "Close", width: 9 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(ModalContentInner, { ghost, children: [
+            progressBar ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { css: { marginBottom: "20px" }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
               ProgressBar,
               {
                 progressPercentage: progressBar.progressPercentage,
                 isSm: progressBar.isSm
               }
             ) }) : null,
-            title ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h4", { children: title }) : null,
-            formattedDescription ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Description, { children: formattedDescription }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { children }),
-            onSubmit ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(ModalButtonRow, { children: [
-              !isSm && !cancelHidden && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            title ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h4", { children: title }) : null,
+            formattedDescription ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Description, { children: formattedDescription }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { children }),
+            onSubmit || onCancel ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(ModalButtonRow, { children: [
+              !isSm && !cancelHidden && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 Button,
                 {
                   disabled: cancelDisabled,
                   onClick: onClickCancel,
-                  text: cancelText != null ? cancelText : "Cancel"
+                  text: cancelText
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              onSubmit && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 Button,
                 {
                   disabled: submitDisabled,
@@ -2216,15 +2324,15 @@ function Modal({
                   type: "submit"
                 }
               ),
-              isSm && !cancelHidden && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Button, { onClick: onClose, text: "Cancel" })
+              isSm && !cancelHidden && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Button, { onClick: onClose, text: cancelText })
             ] }) : null
           ] })
         ] })
       }
     )
   ] });
-  return visible && nodeReady && nodeRef.current ? import_react_dom.default.createPortal(
-    onSubmit ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("form", { onSubmit: onSubmitForm, children: modalContent }) : modalContent,
+  return visible && nodeReady && nodeRef.current ? import_react_dom2.default.createPortal(
+    onSubmit ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("form", { onSubmit: onSubmitForm, children: modalContent }) : modalContent,
     nodeRef.current
   ) : null;
 }
@@ -2259,7 +2367,7 @@ var ModalContainer = import_styled7.default.div`
   justify-content: center;
   align-items: center;
   color: ${({ theme }) => theme.text};
-  padding-top: ${standardContentInsetSmPx}px;
+  padding-top: ${standardContentInset.smPx}px;
 `;
 var contentTopMarginPx = 24;
 var Description = import_styled7.default.div`
@@ -2272,6 +2380,7 @@ var Description = import_styled7.default.div`
 var ModalButtonRow = import_styled7.default.div`
   margin-top: 32px;
   ${bp.minSm(`display: flex;`)}
+  gap: 10px;
 
   button {
     width: 50%;
@@ -2284,14 +2393,11 @@ var ModalButtonRow = import_styled7.default.div`
     ${bp.sm(`
       margin-top: 16px;
     `)}
-    ${bp.minSm(`
-      margin-left: 10px;
-    `)}
   }
 `;
 var ModalContent = import_styled7.default.div`
   ${overflowAutoWithoutScrollbars}
-  ${smContentInset}
+  ${standardContentInset.smCSS}
   ${standardBorderRadius(16)}
   ${(props) => props.ghost ? "" : overlaySurface}
   pointer-events: auto;