@lightsparkdev/ui 0.0.2 → 0.0.3

package/dist/{chunk-XRIZ5OCE.js → chunk-YHSFWCFN.js}

@@ -4,10 +4,10 @@ import {
 import {
   rootFontSizeRems,
   standardLineHeightEms
-} from "./chunk-HZH77KO7.js";
+} from "./chunk-XUGLVWSH.js";
 import {
   useThemeBg
-} from "./chunk-Z4M2ODOW.js";
+} from "./chunk-2VBDEO6M.js";
 import {
   bp
 } from "./chunk-JSGRNWSB.js";

package/dist/{chunk-2GX5Y72Y.js → chunk-ZQTE53SK.js}

@@ -1,6 +1,6 @@
 import {
   themeOr
-} from "./chunk-Z4M2ODOW.js";
+} from "./chunk-2VBDEO6M.js";
 
 // src/components/ProgressBar.tsx
 import styled from "@emotion/styled";

package/dist/components/Button.js

@@ -2,16 +2,16 @@ import {
   Button,
   ButtonSelector,
   StyledButton
-} from "../chunk-MQZEMU23.js";
-import "../chunk-I5KUI7TK.js";
-import "../chunk-N7SP3C6R.js";
-import "../chunk-RIU33XNS.js";
-import "../chunk-HC4KIHUT.js";
+} from "../chunk-SUD5NOKE.js";
+import "../chunk-6RXFA73Z.js";
+import "../chunk-OLAFBUE5.js";
+import "../chunk-DHNWT2E5.js";
+import "../chunk-MYG24ZWT.js";
 import "../chunk-LAMQKQU3.js";
-import "../chunk-HZH77KO7.js";
+import "../chunk-XUGLVWSH.js";
 import "../chunk-CLU2FRJZ.js";
-import "../chunk-Z4M2ODOW.js";
-import "../chunk-F4FIOIYM.js";
+import "../chunk-2VBDEO6M.js";
+import "../chunk-E4EXM4SY.js";
 import "../chunk-JSGRNWSB.js";
 import "../chunk-CIGAQ47A.js";
 export {

package/dist/components/ButtonRow.js

@@ -1,18 +1,18 @@
 import {
   ButtonRow,
   ButtonRowContainer
-} from "../chunk-QMHY6EGS.js";
-import "../chunk-MQZEMU23.js";
-import "../chunk-I5KUI7TK.js";
-import "../chunk-N7SP3C6R.js";
-import "../chunk-Z4MZOSEJ.js";
-import "../chunk-RIU33XNS.js";
-import "../chunk-HC4KIHUT.js";
+} from "../chunk-U6LQLAWI.js";
+import "../chunk-SUD5NOKE.js";
+import "../chunk-6RXFA73Z.js";
+import "../chunk-OLAFBUE5.js";
+import "../chunk-SV5QPU7N.js";
+import "../chunk-DHNWT2E5.js";
+import "../chunk-MYG24ZWT.js";
 import "../chunk-LAMQKQU3.js";
-import "../chunk-HZH77KO7.js";
+import "../chunk-XUGLVWSH.js";
 import "../chunk-CLU2FRJZ.js";
-import "../chunk-Z4M2ODOW.js";
-import "../chunk-F4FIOIYM.js";
+import "../chunk-2VBDEO6M.js";
+import "../chunk-E4EXM4SY.js";
 import "../chunk-JSGRNWSB.js";
 import "../chunk-CIGAQ47A.js";
 export {

package/dist/components/Collapsible.cjs

@@ -1520,7 +1520,9 @@ function Collapsible({
   open,
   handleToggle,
   hamburger,
-  full
+  full,
+  buttonTextElement,
+  contentIndent = true
 }) {
   const [isOpen, setIsOpen] = (0, import_react7.useState)(open);
   const handleClick = () => {
@@ -1534,12 +1536,18 @@ function Collapsible({
   }, [open]);
   const iconName = hamburger ? isOpen ? "Close" : "StackedLines" : "Down";
   const iconWidth = iconName === "Close" ? 12 : 14;
+  let textElement = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", {});
+  if (buttonTextElement) {
+    textElement = buttonTextElement;
+  } else if (text) {
+    textElement = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Text, { color, children: text });
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(StyledCollapsible, { className, children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(StyledCollapsibleButton, { onClick: handleClick, children: [
-      text ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Text, { color, children: text }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", {}),
+      textElement,
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconContainer2, { isOpen, hamburger, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { width: iconWidth, name: iconName }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CollapsingContainer, { isOpen, full, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(InnerPadding, { children }) })
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CollapsingContainer, { isOpen, full, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(InnerPadding, { contentIndent, children }) })
   ] });
 }
 var StyledCollapsible = import_styled3.default.div`
@@ -1602,8 +1610,9 @@ var CollapsingContainer = import_styled3.default.div`
   }
 `;
 var InnerPadding = import_styled3.default.div`
-  padding: 4px 0 4px 16px;
-  gap: 4px;
+  padding: ${"4px" /* 3xs */} 0 ${"4px" /* 3xs */}
+    ${(props) => props.contentIndent ? "16px" /* md */ : "0"};
+  gap: ${"2px" /* 4xs */};
   display: flex;
   flex-direction: column;
 `;

package/dist/components/Collapsible.d.cts

@@ -15,8 +15,16 @@ type CollapsibleProps = {
      * Opens the collapsible to full screen height if true.
      */
     full?: boolean | undefined;
+    /**
+     * Adds padding to the content of the collapsible.
+     */
+    contentIndent?: boolean | undefined;
+    /**
+     * Replaces the default button text with the provided element.
+     */
+    buttonTextElement?: React.ReactNode;
 };
-declare function Collapsible({ children, className, text, color, open, handleToggle, hamburger, full, }: CollapsibleProps): _emotion_react_jsx_runtime.JSX.Element;
+declare function Collapsible({ children, className, text, color, open, handleToggle, hamburger, full, buttonTextElement, contentIndent, }: CollapsibleProps): _emotion_react_jsx_runtime.JSX.Element;
 declare const StyledCollapsible: _emotion_styled.StyledComponent<{
     theme?: _emotion_react.Theme;
     as?: react.ElementType<any>;

package/dist/components/Collapsible.d.ts

@@ -15,8 +15,16 @@ type CollapsibleProps = {
      * Opens the collapsible to full screen height if true.
      */
     full?: boolean | undefined;
+    /**
+     * Adds padding to the content of the collapsible.
+     */
+    contentIndent?: boolean | undefined;
+    /**
+     * Replaces the default button text with the provided element.
+     */
+    buttonTextElement?: React.ReactNode;
 };
-declare function Collapsible({ children, className, text, color, open, handleToggle, hamburger, full, }: CollapsibleProps): _emotion_react_jsx_runtime.JSX.Element;
+declare function Collapsible({ children, className, text, color, open, handleToggle, hamburger, full, buttonTextElement, contentIndent, }: CollapsibleProps): _emotion_react_jsx_runtime.JSX.Element;
 declare const StyledCollapsible: _emotion_styled.StyledComponent<{
     theme?: _emotion_react.Theme;
     as?: react.ElementType<any>;

package/dist/components/Collapsible.js

@@ -3,14 +3,15 @@ import {
   CollapsingContainer,
   StyledCollapsible,
   StyledCollapsibleButton
-} from "../chunk-SMLXEMZE.js";
-import "../chunk-Z4MZOSEJ.js";
-import "../chunk-HC4KIHUT.js";
+} from "../chunk-WB6FFT7Y.js";
+import "../chunk-3XSQV5U4.js";
+import "../chunk-SV5QPU7N.js";
+import "../chunk-MYG24ZWT.js";
 import "../chunk-LAMQKQU3.js";
-import "../chunk-HZH77KO7.js";
+import "../chunk-XUGLVWSH.js";
 import "../chunk-CLU2FRJZ.js";
-import "../chunk-Z4M2ODOW.js";
-import "../chunk-F4FIOIYM.js";
+import "../chunk-2VBDEO6M.js";
+import "../chunk-E4EXM4SY.js";
 import "../chunk-JSGRNWSB.js";
 import "../chunk-CIGAQ47A.js";
 export {

package/dist/components/ContentTable.js

@@ -1,13 +1,13 @@
 import {
   ContentTable,
   StyledContentTable
-} from "../chunk-5XTI555J.js";
-import "../chunk-HC4KIHUT.js";
+} from "../chunk-EZ4RHFY7.js";
+import "../chunk-MYG24ZWT.js";
 import "../chunk-LAMQKQU3.js";
-import "../chunk-HZH77KO7.js";
+import "../chunk-XUGLVWSH.js";
 import "../chunk-CLU2FRJZ.js";
-import "../chunk-Z4M2ODOW.js";
-import "../chunk-F4FIOIYM.js";
+import "../chunk-2VBDEO6M.js";
+import "../chunk-E4EXM4SY.js";
 import "../chunk-JSGRNWSB.js";
 import "../chunk-CIGAQ47A.js";
 export {

package/dist/components/CopyToClipboardButton.js

@@ -1,13 +1,13 @@
 import {
   CopyToClipboardButton
-} from "../chunk-N2J673NM.js";
-import "../chunk-RIU33XNS.js";
-import "../chunk-HC4KIHUT.js";
+} from "../chunk-FRIQXHPR.js";
+import "../chunk-DHNWT2E5.js";
+import "../chunk-MYG24ZWT.js";
 import "../chunk-LAMQKQU3.js";
-import "../chunk-HZH77KO7.js";
+import "../chunk-XUGLVWSH.js";
 import "../chunk-CLU2FRJZ.js";
-import "../chunk-Z4M2ODOW.js";
-import "../chunk-F4FIOIYM.js";
+import "../chunk-2VBDEO6M.js";
+import "../chunk-E4EXM4SY.js";
 import "../chunk-JSGRNWSB.js";
 import "../chunk-CIGAQ47A.js";
 export {

package/dist/components/CurrencyAmount.js

@@ -1,13 +1,13 @@
 import {
   CurrencyAmount,
   CurrencyIcon
-} from "../chunk-6CJNPRC3.js";
-import "../chunk-HC4KIHUT.js";
+} from "../chunk-3PB5DNAL.js";
+import "../chunk-MYG24ZWT.js";
 import "../chunk-LAMQKQU3.js";
-import "../chunk-HZH77KO7.js";
+import "../chunk-XUGLVWSH.js";
 import "../chunk-CLU2FRJZ.js";
-import "../chunk-Z4M2ODOW.js";
-import "../chunk-F4FIOIYM.js";
+import "../chunk-2VBDEO6M.js";
+import "../chunk-E4EXM4SY.js";
 import "../chunk-JSGRNWSB.js";
 import "../chunk-CIGAQ47A.js";
 export {

package/dist/components/Icon.js

@@ -1,12 +1,12 @@
 import {
   Icon,
   IconContainer
-} from "../chunk-HC4KIHUT.js";
+} from "../chunk-MYG24ZWT.js";
 import "../chunk-LAMQKQU3.js";
-import "../chunk-HZH77KO7.js";
+import "../chunk-XUGLVWSH.js";
 import "../chunk-CLU2FRJZ.js";
-import "../chunk-Z4M2ODOW.js";
-import "../chunk-F4FIOIYM.js";
+import "../chunk-2VBDEO6M.js";
+import "../chunk-E4EXM4SY.js";
 import "../chunk-JSGRNWSB.js";
 import "../chunk-CIGAQ47A.js";
 export {

package/dist/components/LightsparkProvider.js

@@ -1,12 +1,12 @@
 import {
   LightsparkProvider
-} from "../chunk-IZBH5JX6.js";
-import "../chunk-XRIZ5OCE.js";
+} from "../chunk-VV7F7VVL.js";
+import "../chunk-YHSFWCFN.js";
 import "../chunk-IJVWYT5G.js";
-import "../chunk-HZH77KO7.js";
+import "../chunk-XUGLVWSH.js";
 import "../chunk-CLU2FRJZ.js";
-import "../chunk-Z4M2ODOW.js";
-import "../chunk-F4FIOIYM.js";
+import "../chunk-2VBDEO6M.js";
+import "../chunk-E4EXM4SY.js";
 import "../chunk-JSGRNWSB.js";
 import "../chunk-CIGAQ47A.js";
 export {

package/dist/components/Loading.js

@@ -1,13 +1,13 @@
 import {
   Loading,
   LoadingWrapper
-} from "../chunk-N7SP3C6R.js";
-import "../chunk-HC4KIHUT.js";
+} from "../chunk-OLAFBUE5.js";
+import "../chunk-MYG24ZWT.js";
 import "../chunk-LAMQKQU3.js";
-import "../chunk-HZH77KO7.js";
+import "../chunk-XUGLVWSH.js";
 import "../chunk-CLU2FRJZ.js";
-import "../chunk-Z4M2ODOW.js";
-import "../chunk-F4FIOIYM.js";
+import "../chunk-2VBDEO6M.js";
+import "../chunk-E4EXM4SY.js";
 import "../chunk-JSGRNWSB.js";
 import "../chunk-CIGAQ47A.js";
 export {

package/dist/components/Modal.cjs

@@ -2030,6 +2030,7 @@ function Modal({
   width = 460,
   progressBar
 }) {
+  const visibleChangedRef = (0, import_react11.useRef)(false);
   const nodeRef = (0, import_react11.useRef)(null);
   const [defaultFirstFocusRef, defaultFirstFocusRefCb] = useLiveRef();
   const ref = firstFocusRef || defaultFirstFocusRef;
@@ -2039,6 +2040,12 @@ function Modal({
   const modalContainerRef = (0, import_react11.useRef)(null);
   const bp2 = useBreakpoints();
   const isSm = bp2.current("sm" /* sm */);
+  (0, import_react11.useEffect)(() => {
+    if (visible !== visibleChangedRef.current) {
+      visibleChangedRef.current = visible;
+    }
+  }, [visible]);
+  const visibleChanged = visible !== visibleChangedRef.current;
   (0, import_react11.useEffect)(() => {
     prevFocusedElement.current = document.activeElement;
     if (!nodeRef.current) {
@@ -2092,14 +2099,16 @@ function Modal({
   }, [onClose, visible, nonDismissable]);
   (0, import_react11.useLayoutEffect)(() => {
     if (visible) {
-      prevFocusedElement.current = document.activeElement;
+      if (visibleChanged) {
+        prevFocusedElement.current = document.activeElement;
+      }
       if (typeof ref === "object" && (ref == null ? void 0 : ref.current) && autoFocus) {
         ref.current.focus();
       }
-    } else if (prevFocusedElement.current) {
+    } else if (visibleChanged && prevFocusedElement.current) {
       prevFocusedElement.current.focus();
     }
-  }, [visible, ref, autoFocus]);
+  }, [visible, visibleChanged, ref, autoFocus]);
   function onClickCloseButton(event) {
     event.stopPropagation();
     onClose();

package/dist/components/Modal.js

@@ -1,20 +1,20 @@
 "use client";
 import {
   Modal
-} from "../chunk-JD7JHP46.js";
+} from "../chunk-6R6A5H4I.js";
 import "../chunk-NBCCPGA4.js";
-import "../chunk-2GX5Y72Y.js";
-import "../chunk-MQZEMU23.js";
-import "../chunk-I5KUI7TK.js";
-import "../chunk-N7SP3C6R.js";
-import "../chunk-Z4MZOSEJ.js";
-import "../chunk-RIU33XNS.js";
-import "../chunk-HC4KIHUT.js";
+import "../chunk-ZQTE53SK.js";
+import "../chunk-SUD5NOKE.js";
+import "../chunk-6RXFA73Z.js";
+import "../chunk-OLAFBUE5.js";
+import "../chunk-SV5QPU7N.js";
+import "../chunk-DHNWT2E5.js";
+import "../chunk-MYG24ZWT.js";
 import "../chunk-LAMQKQU3.js";
-import "../chunk-HZH77KO7.js";
+import "../chunk-XUGLVWSH.js";
 import "../chunk-CLU2FRJZ.js";
-import "../chunk-Z4M2ODOW.js";
-import "../chunk-F4FIOIYM.js";
+import "../chunk-2VBDEO6M.js";
+import "../chunk-E4EXM4SY.js";
 import "../chunk-JSGRNWSB.js";
 import "../chunk-CIGAQ47A.js";
 export {

package/dist/components/ProgressBar.js

@@ -1,8 +1,8 @@
 import {
   ProgressBar
-} from "../chunk-2GX5Y72Y.js";
-import "../chunk-Z4M2ODOW.js";
-import "../chunk-F4FIOIYM.js";
+} from "../chunk-ZQTE53SK.js";
+import "../chunk-2VBDEO6M.js";
+import "../chunk-E4EXM4SY.js";
 import "../chunk-JSGRNWSB.js";
 import "../chunk-CIGAQ47A.js";
 export {

package/dist/components/SecretContainer.js

@@ -1,14 +1,14 @@
 import {
   SecretContainer
-} from "../chunk-QOUEEA3G.js";
-import "../chunk-N2J673NM.js";
-import "../chunk-RIU33XNS.js";
-import "../chunk-HC4KIHUT.js";
+} from "../chunk-PVUPVJ3F.js";
+import "../chunk-FRIQXHPR.js";
+import "../chunk-DHNWT2E5.js";
+import "../chunk-MYG24ZWT.js";
 import "../chunk-LAMQKQU3.js";
-import "../chunk-HZH77KO7.js";
+import "../chunk-XUGLVWSH.js";
 import "../chunk-CLU2FRJZ.js";
-import "../chunk-Z4M2ODOW.js";
-import "../chunk-F4FIOIYM.js";
+import "../chunk-2VBDEO6M.js";
+import "../chunk-E4EXM4SY.js";
 import "../chunk-JSGRNWSB.js";
 import "../chunk-CIGAQ47A.js";
 export {

package/dist/components/TextIconAligner.js

@@ -1,12 +1,12 @@
 import {
   TextIconAligner
-} from "../chunk-M46YHH4D.js";
-import "../chunk-HC4KIHUT.js";
+} from "../chunk-WEPQ7LRL.js";
+import "../chunk-MYG24ZWT.js";
 import "../chunk-LAMQKQU3.js";
-import "../chunk-HZH77KO7.js";
+import "../chunk-XUGLVWSH.js";
 import "../chunk-CLU2FRJZ.js";
-import "../chunk-Z4M2ODOW.js";
-import "../chunk-F4FIOIYM.js";
+import "../chunk-2VBDEO6M.js";
+import "../chunk-E4EXM4SY.js";
 import "../chunk-JSGRNWSB.js";
 import "../chunk-CIGAQ47A.js";
 export {

package/dist/components/UnstyledButton.js

@@ -1,10 +1,10 @@
 import {
   UnstyledButton
-} from "../chunk-RIU33XNS.js";
-import "../chunk-HZH77KO7.js";
+} from "../chunk-DHNWT2E5.js";
+import "../chunk-XUGLVWSH.js";
 import "../chunk-CLU2FRJZ.js";
-import "../chunk-Z4M2ODOW.js";
-import "../chunk-F4FIOIYM.js";
+import "../chunk-2VBDEO6M.js";
+import "../chunk-E4EXM4SY.js";
 import "../chunk-JSGRNWSB.js";
 import "../chunk-CIGAQ47A.js";
 export {

package/dist/components/documentation/AnchorLinkHeader.cjs

@@ -1071,8 +1071,6 @@ var getTypography = (customFontFamilies) => {
 var getTypographyString = (token) => {
   return Object.entries(token).map((entry) => {
     switch (entry[0]) {
-      case "paragraph-spacing":
-        return entry[1] === "default" ? "" : `margin-bottom: ${entry[1]};`;
       case "paragraph-indent":
         return `text-indent: ${entry[1]};`;
       case "text-case":

package/dist/components/documentation/AnchorLinkHeader.js

@@ -1,14 +1,14 @@
 "use client";
 import {
   AnchorLinkHeader
-} from "../../chunk-WLHM7GX2.js";
-import "../../chunk-7ZTWDJAE.js";
-import "../../chunk-HC4KIHUT.js";
+} from "../../chunk-ANJDI74G.js";
+import "../../chunk-4K2KAYVH.js";
+import "../../chunk-MYG24ZWT.js";
 import "../../chunk-LAMQKQU3.js";
-import "../../chunk-HZH77KO7.js";
+import "../../chunk-XUGLVWSH.js";
 import "../../chunk-CLU2FRJZ.js";
-import "../../chunk-Z4M2ODOW.js";
-import "../../chunk-F4FIOIYM.js";
+import "../../chunk-2VBDEO6M.js";
+import "../../chunk-E4EXM4SY.js";
 import "../../chunk-JSGRNWSB.js";
 import "../../chunk-CIGAQ47A.js";
 export {

package/dist/components/documentation/index.cjs

@@ -1072,8 +1072,6 @@ var getTypography = (customFontFamilies) => {
 var getTypographyString = (token) => {
   return Object.entries(token).map((entry) => {
     switch (entry[0]) {
-      case "paragraph-spacing":
-        return entry[1] === "default" ? "" : `margin-bottom: ${entry[1]};`;
       case "paragraph-indent":
         return `text-indent: ${entry[1]};`;
       case "text-case":

package/dist/components/documentation/index.js

@@ -1,13 +1,13 @@
 import {
   AnchorLinkHeader
-} from "../../chunk-WLHM7GX2.js";
-import "../../chunk-7ZTWDJAE.js";
-import "../../chunk-HC4KIHUT.js";
+} from "../../chunk-ANJDI74G.js";
+import "../../chunk-4K2KAYVH.js";
+import "../../chunk-MYG24ZWT.js";
 import "../../chunk-LAMQKQU3.js";
-import "../../chunk-HZH77KO7.js";
+import "../../chunk-XUGLVWSH.js";
 import "../../chunk-CLU2FRJZ.js";
-import "../../chunk-Z4M2ODOW.js";
-import "../../chunk-F4FIOIYM.js";
+import "../../chunk-2VBDEO6M.js";
+import "../../chunk-E4EXM4SY.js";
 import "../../chunk-JSGRNWSB.js";
 import "../../chunk-CIGAQ47A.js";
 export {

package/dist/components/index.cjs

@@ -2027,7 +2027,9 @@ function Collapsible({
   open,
   handleToggle,
   hamburger,
-  full
+  full,
+  buttonTextElement,
+  contentIndent = true
 }) {
   const [isOpen, setIsOpen] = (0, import_react9.useState)(open);
   const handleClick = () => {
@@ -2041,12 +2043,18 @@ function Collapsible({
   }, [open]);
   const iconName = hamburger ? isOpen ? "Close" : "StackedLines" : "Down";
   const iconWidth = iconName === "Close" ? 12 : 14;
+  let textElement = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", {});
+  if (buttonTextElement) {
+    textElement = buttonTextElement;
+  } else if (text) {
+    textElement = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { color, children: text });
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(StyledCollapsible, { className, children: [
     /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(StyledCollapsibleButton, { onClick: handleClick, children: [
-      text ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Text, { color, children: text }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", {}),
+      textElement,
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(IconContainer2, { isOpen, hamburger, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { width: iconWidth, name: iconName }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CollapsingContainer, { isOpen, full, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(InnerPadding, { children }) })
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CollapsingContainer, { isOpen, full, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(InnerPadding, { contentIndent, children }) })
   ] });
 }
 var StyledCollapsible = import_styled7.default.div`
@@ -2109,8 +2117,9 @@ var CollapsingContainer = import_styled7.default.div`
   }
 `;
 var InnerPadding = import_styled7.default.div`
-  padding: 4px 0 4px 16px;
-  gap: 4px;
+  padding: ${"4px" /* 3xs */} 0 ${"4px" /* 3xs */}
+    ${(props) => props.contentIndent ? "16px" /* md */ : "0"};
+  gap: ${"2px" /* 4xs */};
   display: flex;
   flex-direction: column;
 `;
@@ -2662,6 +2671,7 @@ function Modal({
   width = 460,
   progressBar
 }) {
+  const visibleChangedRef = (0, import_react17.useRef)(false);
   const nodeRef = (0, import_react17.useRef)(null);
   const [defaultFirstFocusRef, defaultFirstFocusRefCb] = useLiveRef();
   const ref = firstFocusRef || defaultFirstFocusRef;
@@ -2671,6 +2681,12 @@ function Modal({
   const modalContainerRef = (0, import_react17.useRef)(null);
   const bp2 = useBreakpoints();
   const isSm = bp2.current("sm" /* sm */);
+  (0, import_react17.useEffect)(() => {
+    if (visible !== visibleChangedRef.current) {
+      visibleChangedRef.current = visible;
+    }
+  }, [visible]);
+  const visibleChanged = visible !== visibleChangedRef.current;
   (0, import_react17.useEffect)(() => {
     prevFocusedElement.current = document.activeElement;
     if (!nodeRef.current) {
@@ -2724,14 +2740,16 @@ function Modal({
   }, [onClose, visible, nonDismissable]);
   (0, import_react17.useLayoutEffect)(() => {
     if (visible) {
-      prevFocusedElement.current = document.activeElement;
+      if (visibleChanged) {
+        prevFocusedElement.current = document.activeElement;
+      }
       if (typeof ref === "object" && (ref == null ? void 0 : ref.current) && autoFocus) {
         ref.current.focus();
       }
-    } else if (prevFocusedElement.current) {
+    } else if (visibleChanged && prevFocusedElement.current) {
       prevFocusedElement.current.focus();
     }
-  }, [visible, ref, autoFocus]);
+  }, [visible, visibleChanged, ref, autoFocus]);
   function onClickCloseButton(event) {
     event.stopPropagation();
     onClose();