@lightsparkdev/ui 1.0.8 → 1.0.10

package/dist/chunk-EZNRFABO.cjs

@@ -0,0 +1,77 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunkYM5JDZDQcjs = require('./chunk-YM5JDZDQ.cjs');
+
+// src/hooks/useClipboard.tsx
+var _react = require('react');
+function useClipboard(clipboardArgs) {
+  var _a, _b;
+  const { onWriteEmptyText, onWriteError, onWrite, onReadError } = _react.useMemo.call(void 0, 
+    () => ({
+      onWriteEmptyText: clipboardArgs == null ? void 0 : clipboardArgs.onWriteEmptyText,
+      onWriteError: clipboardArgs == null ? void 0 : clipboardArgs.onWriteError,
+      onWrite: clipboardArgs == null ? void 0 : clipboardArgs.onWrite,
+      onReadError: clipboardArgs == null ? void 0 : clipboardArgs.onReadError
+    }),
+    [clipboardArgs]
+  );
+  const [canReadFromClipboard, setCanReadFromClipboard] = _react.useState.call(void 0, 
+    typeof ((_a = navigator.clipboard) == null ? void 0 : _a.readText) !== "undefined"
+  );
+  const [canWriteToClipboard, setCanWriteToClipboard] = _react.useState.call(void 0, 
+    typeof ((_b = navigator.clipboard) == null ? void 0 : _b.writeText) !== "undefined"
+  );
+  const writeTextToClipboard = _react.useCallback.call(void 0, 
+    (text) => _chunkYM5JDZDQcjs.__async.call(void 0, this, null, function* () {
+      try {
+        if (!text.trim()) {
+          if (onWriteEmptyText) {
+            onWriteEmptyText();
+          }
+        } else {
+          yield navigator.clipboard.writeText(text);
+          if (onWrite) {
+            onWrite();
+          }
+        }
+      } catch (error) {
+        if (onWriteError) {
+          onWriteError();
+        }
+        setCanWriteToClipboard(false);
+      }
+    }),
+    [onWrite, onWriteEmptyText, onWriteError]
+  );
+  const readTextFromClipboard = _react.useCallback.call(void 0, () => _chunkYM5JDZDQcjs.__async.call(void 0, this, null, function* () {
+    try {
+      const text = yield navigator.clipboard.readText();
+      return text;
+    } catch (error) {
+      if (onReadError) {
+        onReadError();
+      }
+      setCanReadFromClipboard(false);
+      return null;
+    }
+  }), [onReadError]);
+  const clipboard = _react.useMemo.call(void 0, 
+    () => ({
+      canReadFromClipboard,
+      canWriteToClipboard,
+      readTextFromClipboard,
+      writeTextToClipboard
+    }),
+    [
+      canReadFromClipboard,
+      canWriteToClipboard,
+      readTextFromClipboard,
+      writeTextToClipboard
+    ]
+  );
+  return clipboard;
+}
+
+
+
+exports.useClipboard = useClipboard;

package/dist/{chunk-HOR467ZW.js → chunk-F6ITVYPU.js}

@@ -1,16 +1,16 @@
 import {
   DocsHeadline
-} from "./chunk-BBPNYL4K.js";
+} from "./chunk-3VB55LWB.js";
 import {
   select
 } from "./chunk-YMNSXZ5D.js";
 import {
   Icon
-} from "./chunk-QQTZ6DZL.js";
+} from "./chunk-NGSQ2OOV.js";
 import {
   __spreadProps,
   __spreadValues
-} from "./chunk-LOPKRCGI.js";
+} from "./chunk-CWMXXUWU.js";
 
 // src/components/documentation/AnchorLinkHeader.tsx
 import styled from "@emotion/styled";

package/dist/{chunk-RT4SDUU6.js → chunk-FFOE2R32.js}

@@ -1,6 +1,6 @@
 import {
   Icon
-} from "./chunk-QQTZ6DZL.js";
+} from "./chunk-NGSQ2OOV.js";
 
 // src/components/Loading.tsx
 import { useTheme } from "@emotion/react";

package/dist/{chunk-DPSSQNBK.js → chunk-G3FLE2PL.js}

@@ -1,56 +1,68 @@
 import {
   ToggleContainer
-} from "./chunk-ONE4Q37F.js";
+} from "./chunk-5YKEHMNB.js";
 import {
   InputSubtext,
   defaultTextInputTypography,
   inputSpacingPx,
   textInputPlaceholderColor,
   textInputStyle
-} from "./chunk-RZMG2TID.js";
+} from "./chunk-AXHFR6HR.js";
 import {
   applyTypography
-} from "./chunk-GHXNMLAB.js";
+} from "./chunk-R4JQUMCP.js";
 import {
-  CheckboxContainer
-} from "./chunk-VCHMPHHC.js";
+  UnstyledButton
+} from "./chunk-WZJTXJM5.js";
 import {
   Tooltip
-} from "./chunk-5W523NQP.js";
-import {
-  UnstyledButton
-} from "./chunk-E7RKIBJY.js";
+} from "./chunk-2KHMKDGF.js";
 import {
   z
 } from "./chunk-55OQPFLF.js";
+import {
+  CheckboxContainer
+} from "./chunk-7H74ZBRC.js";
 import {
   Icon,
   IconContainer
-} from "./chunk-QQTZ6DZL.js";
+} from "./chunk-NGSQ2OOV.js";
 import {
   standardBorderRadius
-} from "./chunk-APUV4UN4.js";
+} from "./chunk-YZM4ALKD.js";
 import {
   getFontColor
-} from "./chunk-W5I53DTZ.js";
+} from "./chunk-O42E7NAG.js";
 import {
+  __spreadProps,
   __spreadValues
-} from "./chunk-LOPKRCGI.js";
+} from "./chunk-CWMXXUWU.js";
 
 // src/components/TextInput.tsx
 import styled from "@emotion/styled";
 import React, { useState } from "react";
 import { Fragment, jsx, jsxs } from "@emotion/react/jsx-runtime";
 var selectLeftOffset = 10;
-function TextInput(props) {
+var iconSides = ["left", "right"];
+var iconOffsets = ["small", "large"];
+var iconWidths = [8, 12, 16];
+function withDefaults(textInputProps) {
+  return __spreadProps(__spreadValues({}, textInputProps), {
+    width: textInputProps.width || "full",
+    type: textInputProps.type || "text",
+    disabled: Boolean(textInputProps.disabled),
+    typography: __spreadValues(__spreadValues({}, defaultTextInputTypography), textInputProps.typography)
+  });
+}
+function TextInput(textInputProps) {
   var _a, _b;
+  const props = withDefaults(textInputProps);
   const [focused, setFocused] = useState(false);
   const inputRef = props.inputRef || React.createRef();
   const ref = props.inputRefCb || inputRef;
   if (props.inputRefCb && !props.inputRef) {
     console.warn("TextInput: inputRef should be provided with inputRefCb.");
   }
-  const typography = __spreadValues(__spreadValues({}, defaultTextInputTypography), props.typography);
   const handleKeyDown = (e) => {
     if (e.key === "Enter" && props.onEnter) {
       props.onEnter();
@@ -62,63 +74,67 @@ function TextInput(props) {
   const iconCenterOffset = ((_b = props.icon) == null ? void 0 : _b.offset) === "large" ? 26 : 18;
   const iconOffset = iconCenterOffset - iconWidth / 2;
   const iconTextOffset = iconCenterOffset === 18 ? 4 : 14;
+  const textInputWidth = props.width === "short" ? "250px" : "100%";
   let paddingLeftPx;
   if (props.icon && !isIconRight) {
     paddingLeftPx = iconOffset + iconWidth + iconTextOffset;
-  } else if (props.select && typeof props.select.width === "number") {
+  } else if (props.select) {
     paddingLeftPx = selectLeftOffset + props.select.width + 5;
   }
-  let input = /* @__PURE__ */ jsx(
-    Input,
-    {
-      disabled: Boolean(props.disabled),
-      maxLength: props.maxLength,
-      inputMode: props.inputMode,
-      pattern: props.pattern,
-      onBlur: () => {
-        setFocused(false);
-        if (props.onBlur) {
-          props.onBlur();
-        }
-      },
-      onChange: (e) => {
-        e.target.setCustomValidity("");
-        props.onChange(e.target.value, e);
-      },
-      onFocus: () => {
-        setFocused(true);
-        if (props.onFocus) {
-          props.onFocus();
-        }
-      },
-      onKeyDown: (e) => {
-        if (props.onKeyDown) {
-          props.onKeyDown(e.key, e);
-        }
-        handleKeyDown(e);
-      },
-      id: props.id,
-      onPaste: props.onPaste,
-      placeholder: props.placeholder,
-      ref,
-      name: props.name,
-      type: props.type || "text",
-      value: props.value,
-      paddingLeftPx,
-      paddingRightPx: isIconRight ? 28 : void 0,
-      hasError,
-      "data-test-id": props.testId,
-      typography,
-      autoComplete: props.autoComplete === "off" ? "new-password" : props.autoComplete,
-      onBeforeInput: (e) => {
-        if (props.onBeforeInput) {
-          const event = e;
-          props.onBeforeInput(event);
-        }
-      },
-      borderRadius: props.borderRadius
-    }
-  );
+  let input = /* @__PURE__ */ jsxs(InputContainer, { children: [
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        disabled: props.disabled,
+        maxLength: props.maxLength,
+        inputMode: props.inputMode,
+        pattern: props.pattern,
+        onBlur: () => {
+          setFocused(false);
+          if (props.onBlur) {
+            props.onBlur();
+          }
+        },
+        onChange: (e) => {
+          e.target.setCustomValidity("");
+          props.onChange(e.target.value, e);
+        },
+        onFocus: () => {
+          setFocused(true);
+          if (props.onFocus) {
+            props.onFocus();
+          }
+        },
+        onKeyDown: (e) => {
+          if (props.onKeyDown) {
+            props.onKeyDown(e.key, e);
+          }
+          handleKeyDown(e);
+        },
+        id: props.id,
+        onPaste: props.onPaste,
+        placeholder: props.placeholder,
+        ref,
+        name: props.name,
+        type: props.type,
+        value: props.value,
+        paddingLeftPx,
+        paddingRightPx: isIconRight ? 28 : void 0,
+        hasError,
+        "data-test-id": props.testId,
+        typography: props.typography,
+        autoComplete: props.autoComplete === "off" ? "new-password" : props.autoComplete,
+        onBeforeInput: (e) => {
+          if (props.onBeforeInput) {
+            const event = e;
+            props.onBeforeInput(event);
+          }
+        },
+        borderRadius: props.borderRadius
+      }
+    ),
+    props.rightButtonText && /* @__PURE__ */ jsx(RightButtonAligner, { iconOffset, children: /* @__PURE__ */ jsx(RightButton, { onClick: props.onRightButtonClick, children: props.rightButtonText }) })
+  ] });
   if (props.icon) {
     input = /* @__PURE__ */ jsxs(WithIcon, { hasError, withFocus: focused, children: [
       isIconRight ? /* @__PURE__ */ jsx(Fragment, { children: input }) : null,
@@ -131,34 +147,23 @@ function TextInput(props) {
           iconOffset,
           focused,
           hasValue: Boolean(props.value),
-          colorProp: typography.color,
+          colorProp: props.typography.color,
           children: /* @__PURE__ */ jsx(Icon, { name: props.icon.name, width: iconWidth })
         }
       ),
-      isIconRight ? null : /* @__PURE__ */ jsx(Fragment, { children: input }),
-      props.rightButtonText && /* @__PURE__ */ jsx(
-        TextInputIconContainer,
-        {
-          isIconRight: true,
-          iconOffset,
-          hasValue: Boolean(props.value),
-          focused,
-          colorProp: typography.color,
-          children: /* @__PURE__ */ jsx(RightButton, { onClick: props.onRightButtonClick, children: props.rightButtonText })
-        }
-      )
+      isIconRight ? null : /* @__PURE__ */ jsx(Fragment, { children: input })
     ] });
   }
   const hintTooltipId = props.hintTooltip ? `${props.id || "input"}-hint-tooltip` : void 0;
   const { select } = props;
-  return /* @__PURE__ */ jsxs(InputContainer, { children: [
+  return /* @__PURE__ */ jsxs(StyledTextInput, { width: textInputWidth, children: [
     props.label ? /* @__PURE__ */ jsx(TextInputLabel, { hasError, children: props.label }) : null,
     select && /* @__PURE__ */ jsx(
       TextInputSelect,
       {
         value: select.value,
         widthProp: select.width,
-        typography,
+        typography: props.typography,
         onChange: (event) => {
           var _a2;
           select.onChange(event.target.value);
@@ -179,11 +184,6 @@ function TextInput(props) {
     props.hintTooltip ? /* @__PURE__ */ jsx(Tooltip, { id: hintTooltipId, content: props.hintTooltip, place: "right" }) : null
   ] });
 }
-TextInput.defaultProps = {
-  disabled: false,
-  autoComplete: void 0,
-  hint: null
-};
 var TextInputSelect = styled.select`
   ${({ typography, theme }) => applyTypography(theme, typography.type, typography.size, typography.color)}
   position: absolute;
@@ -227,13 +227,22 @@ var Input = styled.input`
   &:-webkit-autofill:focus,
   &:-internal-autofill-selected,
   &:-internal-autofill-selected:focus {
-    background-color: ${({ theme, disabled }) => theme.bg} !important;
+    background-color: ${({ theme }) => theme.bg} !important;
     color: ${({ theme }) => theme.text} !important;
     transition:
       background-color 600000s 0s,
       color 600000s 0s !important;
   }
 `;
+var RightButtonAligner = styled.div`
+  position: absolute;
+  top: 0;
+  right: ${({ iconOffset }) => iconOffset}px;
+  z-index: ${z.textInput + 1};
+  bottom: 0;
+  display: flex;
+  align-items: center;
+`;
 var RightButton = styled(UnstyledButton)`
   border-radius: 4px;
   border: none;
@@ -264,8 +273,8 @@ var TextInputHalfRow = styled.div`
     width: 50%;
   }
 `;
-var InputContainer = styled.div`
-  width: 100%;
+var StyledTextInput = styled.div`
+  width: ${({ width }) => width};
   position: relative;
 
   /* eg forms, should be left consistent: */
@@ -284,8 +293,14 @@ var InputContainer = styled.div`
     margin-top: ${inputSpacingPx}px;
   }
 `;
+var InputContainer = styled.div`
+  position: relative;
+`;
 
 export {
+  iconSides,
+  iconOffsets,
+  iconWidths,
   TextInput,
   TextInputHalfRow
 };

package/dist/chunk-G5IVQ4O3.js

@@ -0,0 +1,41 @@
+// src/utils/toReactNodes/nodes.tsx
+import { isObject } from "lodash-es";
+function isLinkNode(node) {
+  return Boolean(node && isObject(node) && "link" in node);
+}
+function isNextLinkNode(node) {
+  return Boolean(node && isObject(node) && "nextLink" in node);
+}
+function isIconNode(node) {
+  return Boolean(node && isObject(node) && "icon" in node);
+}
+function isCurrencyAmountNode(node) {
+  return Boolean(node && isObject(node) && "currencyAmount" in node);
+}
+function isTextNode(node) {
+  const allowedKeys = ["text", "onClick", "typography"];
+  return Boolean(
+    /* Exclude other nodes by ensuring only text node properties: */
+    node && isObject(node) && /* text is required: */
+    "text" in node && /* ensure the rest of the keys are allowed: */
+    Object.keys(node).every((key) => allowedKeys.includes(key))
+  );
+}
+var link = (link2) => ({ link: link2 });
+var nextLink = (nextLink2) => ({
+  nextLink: nextLink2
+});
+var currencyAmount = (currencyAmount2) => ({ currencyAmount: currencyAmount2 });
+var icon = (icon2) => ({ icon: icon2 });
+
+export {
+  isLinkNode,
+  isNextLinkNode,
+  isIconNode,
+  isCurrencyAmountNode,
+  isTextNode,
+  link,
+  nextLink,
+  currencyAmount,
+  icon
+};

package/dist/{chunk-ZTIL63SE.js → chunk-GCUAIBB5.js}

@@ -1,12 +1,12 @@
-import {
-  toNonTypographicReactNodes
-} from "./chunk-UC6SP4KJ.js";
 import {
   typographyStyles
-} from "./chunk-EGOOSBGG.js";
+} from "./chunk-X5SBSJ3Z.js";
 import {
   applyTypography
-} from "./chunk-GHXNMLAB.js";
+} from "./chunk-R4JQUMCP.js";
+import {
+  toReactNodesBase
+} from "./chunk-DILTUDQN.js";
 
 // src/components/typography/Body.tsx
 import styled from "@emotion/styled";
@@ -24,7 +24,7 @@ var Body = ({
 }) => {
   let reactNodes = children || null;
   if (content) {
-    reactNodes = toNonTypographicReactNodes(content);
+    reactNodes = toReactNodesBase(content);
   }
   return /* @__PURE__ */ jsx(
     StyledBody,

package/dist/chunk-GDLQ54TN.cjs

@@ -0,0 +1,41 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunkSEOJ475Zcjs = require('./chunk-SEOJ475Z.cjs');
+
+
+var _chunk4WKQPWLIcjs = require('./chunk-4WKQPWLI.cjs');
+
+
+var _chunkWRZUCCQDcjs = require('./chunk-WRZUCCQD.cjs');
+
+
+
+
+var _chunkYM5JDZDQcjs = require('./chunk-YM5JDZDQ.cjs');
+
+// src/utils/toReactNodes/toReactNodes.tsx
+var _core = require('@lightsparkdev/core');
+var _react = require('react');
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+function toReactNodes(toReactNodesArg) {
+  const toReactNodesArray = _core.ensureArray.call(void 0, toReactNodesArg);
+  const reactNodes = toReactNodesArray.map((node, i) => {
+    let content;
+    if (!node) {
+      return null;
+    } else if (_chunk4WKQPWLIcjs.isTextNode.call(void 0, node) && node.typography) {
+      const _a = node.typography, { type: typographyType } = _a, typographyProps = _chunkYM5JDZDQcjs.__objRest.call(void 0, _a, ["type"]);
+      content = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react.Fragment, { children: _chunkWRZUCCQDcjs.renderTypography.call(void 0, typographyType, _chunkYM5JDZDQcjs.__spreadProps.call(void 0, _chunkYM5JDZDQcjs.__spreadValues.call(void 0, {}, typographyProps), {
+        content: node.text
+      })) }, `typography-${i}-${node.text.substr(0, 10)}`);
+    } else {
+      content = _chunkSEOJ475Zcjs.toReactNodesBase.call(void 0, node);
+    }
+    return content || null;
+  });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react.Fragment, { children: reactNodes });
+}
+
+
+
+exports.toReactNodes = toReactNodes;

package/dist/{chunk-ZBBVZQKJ.cjs → chunk-GEMBOYJD.cjs}

@@ -1,17 +1,17 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkWTHHP7G2cjs = require('./chunk-WTHHP7G2.cjs');
+var _chunkWKRK5OVEcjs = require('./chunk-WKRK5OVE.cjs');
 
 
-var _chunkTMTEVKSDcjs = require('./chunk-TMTEVKSD.cjs');
+var _chunkDCQM7IVKcjs = require('./chunk-DCQM7IVK.cjs');
 
 // src/styles/typography.tsx
 var applyTypography = (theme, typographyType, size, color = "inherit", applyToAll = true) => {
   const selector = applyToAll ? "&, & *" : "&";
   return `
     ${selector} {
-      ${_chunkTMTEVKSDcjs.getTypographyString.call(void 0, theme, typographyType, size)};
-      color: ${_chunkWTHHP7G2cjs.getFontColor.call(void 0, theme, color)};
+      ${_chunkDCQM7IVKcjs.getTypographyString.call(void 0, theme, typographyType, size)};
+      color: ${_chunkWKRK5OVEcjs.getFontColor.call(void 0, theme, color)};
     }
   `;
 };

package/dist/chunk-GPWAK4HM.js

@@ -0,0 +1,52 @@
+import {
+  SatoshiInputLabel
+} from "./chunk-KNBAVK6L.js";
+import {
+  CommaNumberInput_default
+} from "./chunk-NCIBJJIE.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-CWMXXUWU.js";
+
+// src/components/SatoshiInput.tsx
+import { Fragment } from "react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+function SatoshiInput(_a) {
+  var _b = _a, {
+    label,
+    maxValue,
+    error
+  } = _b, rest = __objRest(_b, [
+    "label",
+    "maxValue",
+    "error"
+  ]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    label && /* @__PURE__ */ jsx(
+      SatoshiInputLabel,
+      {
+        text: label.text,
+        availableSats: label.availableSats,
+        showTooltip: label.showTooltip
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      CommaNumberInput_default,
+      __spreadProps(__spreadValues({
+        placeholder: "SATs"
+      }, rest), {
+        icon: { name: "SatoshiRounded", side: "left" },
+        maxValue: maxValue ? Math.floor(maxValue) : void 0,
+        error
+      })
+    )
+  ] });
+}
+var SatoshiInput_default = SatoshiInput;
+
+export {
+  SatoshiInput,
+  SatoshiInput_default
+};

package/dist/chunk-GSETAASM.cjs

@@ -0,0 +1,77 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _chunkZUAO4DW3cjs = require('./chunk-ZUAO4DW3.cjs');
+
+
+var _chunk7LOKZM7Vcjs = require('./chunk-7LOKZM7V.cjs');
+
+
+var _chunkZU72XWNEcjs = require('./chunk-ZU72XWNE.cjs');
+
+// src/components/DataManagerTable/Popover.tsx
+var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+var Popover = ({
+  show,
+  setShow,
+  side = "left",
+  onApply,
+  onClear,
+  children
+}) => {
+  const handleApply = () => {
+    onApply();
+  };
+  const handleClear = () => {
+    onClear();
+  };
+  const handleKeyPress = (e) => {
+    if (e.key === "Enter") {
+      onApply();
+    }
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Container, { show, side, onKeyDownCapture: handleKeyPress, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Content, { children: [
+    children,
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Footer, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7LOKZM7Vcjs.Button, { text: "Clear", onClick: handleClear }),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, FooterRight, { children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7LOKZM7Vcjs.Button, { text: "Cancel", onClick: () => setShow(false) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7LOKZM7Vcjs.Button, { text: "Apply", kind: "primary", onClick: handleApply })
+      ] })
+    ] })
+  ] }) });
+};
+var Container = _styled2.default.div`
+  position: absolute;
+  z-index: ${_chunkZU72XWNEcjs.z.dropdown};
+  top: 44px;
+  display: ${({ show }) => show ? "block" : "none"};
+  ${({ side }) => side === "right" ? "right: 0;" : "left: 0;"}
+  width: 400px;
+  background: white;
+  border: 0.5px solid ${({ theme }) => theme.c1Neutral};
+  border-radius: 12px;
+  box-shadow:
+    0px 1px 4px 0px rgba(0, 0, 0, 0.1),
+    0px 4px 8px 0px rgba(0, 0, 0, 0.08);
+`;
+var Content = _styled2.default.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${_chunkZUAO4DW3cjs.Spacing.px.xl};
+  padding: ${_chunkZUAO4DW3cjs.Spacing.px.lg};
+`;
+var Footer = _styled2.default.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+`;
+var FooterRight = _styled2.default.div`
+  display: flex;
+  gap: ${_chunkZUAO4DW3cjs.Spacing.px.xs};
+`;
+
+
+
+exports.Popover = Popover;