@lightsparkdev/ui 1.0.6 → 1.0.7

package/dist/{chunk-ERNTWEIJ.js → chunk-4ZEUQBJZ.js}

@@ -1,16 +1,16 @@
 import {
   setDefaultReactNodesTypography,
   toReactNodes
-} from "./chunk-AKGW3FMJ.js";
+} from "./chunk-XCEI3WIL.js";
 import {
   Icon
-} from "./chunk-LAGOF7IU.js";
+} from "./chunk-UACBVBBE.js";
 import {
   standardBorderRadius
-} from "./chunk-YG5BANJH.js";
+} from "./chunk-GMM3LRXY.js";
 import {
   getColor
-} from "./chunk-UAUAYQ3C.js";
+} from "./chunk-I4NIA4SD.js";
 
 // src/components/Badge.tsx
 import styled from "@emotion/styled";
@@ -25,26 +25,33 @@ function Badge({
   block = false,
   typography: typographyProp
 }) {
-  const typography = {
+  const defaultTypography = {
     type: (typographyProp == null ? void 0 : typographyProp.type) || "Label Moderate",
     props: {
       size: (typographyProp == null ? void 0 : typographyProp.size) || "Small",
       color: (typographyProp == null ? void 0 : typographyProp.color) || (kind === "danger" ? "danger" : "text")
     }
   };
-  const typographyMap = {
-    link: typography,
-    externalLink: typography,
-    text: typography,
-    nextLink: typography
+  const defaultTypographyMap = {
+    link: defaultTypography,
+    externalLink: defaultTypography,
+    text: defaultTypography,
+    nextLink: defaultTypography
   };
   let content = setDefaultReactNodesTypography(
     contentProp,
-    typographyMap
+    defaultTypographyMap
   );
   content = toReactNodes(content);
   return contentProp ? /* @__PURE__ */ jsxs(StyledBadge, { kind, ml, size, block, children: [
-    icon ? /* @__PURE__ */ jsx(Icon, { name: icon.name, width: 20, color: icon.color }) : null,
+    icon ? /* @__PURE__ */ jsx(
+      Icon,
+      {
+        name: icon.name,
+        width: 20,
+        color: icon.color ? icon.color : kind === "danger" ? "danger" : void 0
+      }
+    ) : null,
     /* @__PURE__ */ jsx(BadgeContent, { children: content })
   ] }) : null;
 }

package/dist/chunk-4ZF4NPF7.cjs

@@ -0,0 +1,131 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _chunkZU72XWNEcjs = require('./chunk-ZU72XWNE.cjs');
+
+// src/components/LightboxImage.tsx
+var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
+
+
+
+
+var _react = require('react');
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+var LightboxImage = ({ children }) => {
+  const [isOpen, setIsOpen] = _react.useState.call(void 0, false);
+  const [boundingRect, setBoundingRect] = _react.useState.call(void 0, {
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0
+  });
+  const imageRef = _react.useRef.call(void 0, null);
+  const handleMouseUp = () => {
+    setIsOpen(!isOpen);
+  };
+  const handleSetBoundingRect = (ref) => {
+    var _a;
+    const rect = (_a = ref.current) == null ? void 0 : _a.getBoundingClientRect();
+    if (rect) {
+      setBoundingRect({
+        x: rect.x,
+        y: rect.y,
+        width: rect.width,
+        height: rect.height
+      });
+    }
+  };
+  _react.useEffect.call(void 0, () => {
+    handleSetBoundingRect(imageRef);
+  }, [imageRef]);
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DummyImage, { isOpen, boundingRect }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      StyledImage,
+      {
+        isOpen,
+        ref: imageRef,
+        boundingRect,
+        onMouseDown: () => handleSetBoundingRect(imageRef),
+        onMouseUp: handleMouseUp,
+        children
+      }
+    ),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Lightbox, { isOpen, onClick: handleMouseUp })
+  ] });
+};
+var DummyImage = _styled2.default.div`
+  ${(props) => props.isOpen ? `height: ${props.boundingRect.height}px; width: ${props.boundingRect.width}px;` : ``}
+`;
+var StyledImage = _styled2.default.div`
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  z-index: ${_chunkZU72XWNEcjs.z.modalContainer};
+
+  animation-duration: 0.4s;
+  animation-fill-mode: forwards;
+  transition: all 0.2s ease-out;
+
+  ${(props) => props.isOpen ? `
+    animation-direction: normal;
+    position: fixed;
+    animation-name: zoomIn;
+    pointer-events: none;
+  ` : `
+    &:hover {
+      cursor: zoom-in;
+    }
+  `}
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+
+  @keyframes zoomIn {
+    from {
+      ${(props) => {
+  const { x, y, width, height } = props.boundingRect;
+  return `
+          top: ${y}px;
+          left: ${x}px;
+          width: ${width}px;
+          height: ${height}px;
+        `;
+}}
+    }
+    to {
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      padding: 24px;
+    }
+  }
+`;
+var Lightbox = _styled2.default.div`
+  transition: opacity 0.2s ease-out;
+  position: fixed;
+  opacity: 0;
+  z-index: ${_chunkZU72XWNEcjs.z.modalOverlay};
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  ${({ theme, isOpen }) => isOpen ? `
+    opacity: 1;
+    background: ${theme.bg};
+
+    &:hover {
+      cursor: zoom-out;
+    }
+  ` : `
+    pointer-events: none;
+  `}
+`;
+
+
+
+exports.LightboxImage = LightboxImage;

package/dist/chunk-52DSX7BK.cjs

@@ -0,0 +1,26 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/icons/Home.tsx
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+function Home() {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "svg",
+    {
+      width: "100%",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "path",
+        {
+          d: "M3.75 9.2582C3.75 8.97962 3.75 8.84033 3.78504 8.71146C3.81609 8.59729 3.86716 8.48953 3.93586 8.39321C4.0134 8.28448 4.12121 8.19628 4.33682 8.01987L10.9868 2.57896C11.3478 2.28362 11.5283 2.13596 11.7291 2.07944C11.9063 2.02959 12.0937 2.02959 12.2709 2.07944C12.4717 2.13596 12.6522 2.28362 13.0132 2.57896L19.6632 8.01987C19.8788 8.19628 19.9866 8.28448 20.0641 8.39321C20.1328 8.48953 20.1839 8.59729 20.215 8.71146C20.25 8.84033 20.25 8.97962 20.25 9.2582V18.65C20.25 19.21 20.25 19.4901 20.141 19.704C20.0451 19.8921 19.8922 20.0451 19.704 20.141C19.4901 20.25 19.2101 20.25 18.65 20.25H5.35C4.78995 20.25 4.50992 20.25 4.29601 20.141C4.10785 20.0451 3.95487 19.8921 3.85899 19.704C3.75 19.4901 3.75 19.21 3.75 18.65V9.2582Z",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+
+
+
+exports.Home = Home;

package/dist/chunk-544LOSOG.cjs

@@ -0,0 +1,27 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/icons/HeartOutline.tsx
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+function HeartOutline() {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "svg",
+    {
+      width: "100%",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "path",
+        {
+          d: "M14.1041 2.9055C12.6568 1.46965 10.3103 1.46965 8.86307 2.9055L7.98955 3.88576L7.11603 2.90552C5.66876 1.46967 3.32227 1.46967 1.875 2.90552C0.427734 4.34137 0.427732 6.66934 1.875 8.10519L7.98953 14.1715L14.1041 8.10517C15.5514 6.66932 15.5514 4.34135 14.1041 2.9055Z",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+
+
+
+exports.HeartOutline = HeartOutline;

package/dist/{chunk-FE477HOE.js → chunk-5BNDOQKG.js}

@@ -4,10 +4,10 @@ import {
 import {
   rootFontSizeRems,
   standardLineHeightEms
-} from "./chunk-YG5BANJH.js";
+} from "./chunk-GMM3LRXY.js";
 import {
   useThemeBg
-} from "./chunk-UAUAYQ3C.js";
+} from "./chunk-I4NIA4SD.js";
 import {
   bp
 } from "./chunk-JSGRNWSB.js";

package/dist/{chunk-45BHB7K7.js → chunk-5GYVOXMF.js}

@@ -1,13 +1,13 @@
 import {
   Pill
-} from "./chunk-EHH4M2LZ.js";
+} from "./chunk-TWG7OQT7.js";
 import {
   InputSubtext,
   inputBlockStyle
-} from "./chunk-Q76C6FJ5.js";
+} from "./chunk-OGJLMW37.js";
 import {
   Icon
-} from "./chunk-LAGOF7IU.js";
+} from "./chunk-UACBVBBE.js";
 
 // src/components/FileInput.tsx
 import styled from "@emotion/styled";

package/dist/chunk-5IO7EL3S.cjs

@@ -0,0 +1,38 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/icons/NonagonCheckmark.tsx
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+function NonagonCheckmark() {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "svg",
+    {
+      width: "100%",
+      viewBox: "0 0 12 12",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "g", { clipPath: "url(#clip0_1_2)", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "path",
+            {
+              fillRule: "evenodd",
+              clipRule: "evenodd",
+              d: "M6.00009 0.166443C6.12679 0.166443 6.24725 0.221364 6.33031 0.316995L7.59831 1.77637L9.50773 1.47348C9.63286 1.45363 9.76043 1.489 9.8575 1.57043C9.95456 1.65187 10.0116 1.77137 10.0137 1.89804L10.047 3.83105L11.7044 4.82637C11.813 4.89162 11.888 5.0007 11.91 5.12548C11.932 5.25025 11.8988 5.37841 11.8191 5.47682L10.6021 6.97902L11.2319 8.80678C11.2732 8.92659 11.2605 9.05837 11.1972 9.16809C11.1338 9.27782 11.026 9.3547 10.9017 9.37879L9.00379 9.74723L8.31143 11.5523C8.26605 11.6706 8.17161 11.7634 8.05255 11.8067C7.93349 11.8501 7.80154 11.8396 7.69076 11.7782L6.00009 10.8405L4.30941 11.7782C4.19862 11.8396 4.06663 11.8501 3.94758 11.8067C3.82853 11.7634 3.7341 11.6706 3.68873 11.5523L2.99634 9.74723L1.09848 9.37879C0.974113 9.3547 0.866319 9.27782 0.802969 9.16809C0.739625 9.05837 0.726949 8.92659 0.768226 8.80678L1.39809 6.97902L0.181066 5.47682C0.101312 5.37841 0.0681439 5.25025 0.0901473 5.12548C0.112145 5.0007 0.18715 4.89162 0.295761 4.82637L1.95315 3.83105L1.98642 1.89804C1.98861 1.77137 2.04559 1.65187 2.14264 1.57043C2.2397 1.489 2.36728 1.45363 2.49241 1.47348L4.40182 1.77637L5.66981 0.316995C5.75293 0.221364 5.87339 0.166443 6.00009 0.166443ZM7.76776 5.57995C7.93862 5.40909 7.93862 5.13213 7.76776 4.96127C7.59691 4.7904 7.31988 4.7904 7.14902 4.96127L5.41676 6.69353L4.8511 6.12793C4.68025 5.95708 4.40323 5.95708 4.23238 6.12793C4.06153 6.29879 4.06153 6.57576 4.23238 6.74662L5.10736 7.62162C5.18943 7.70369 5.30073 7.74978 5.41676 7.74978C5.53278 7.74978 5.64408 7.70369 5.7261 7.62162L7.76776 5.57995Z",
+              fill: "#0068C9"
+            }
+          ),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "path",
+            {
+              d: "M7.76776 5.57989C7.93862 5.40903 7.93862 5.13207 7.76776 4.96121C7.59691 4.79034 7.31988 4.79034 7.14902 4.96121L5.41676 6.69347L4.8511 6.12787C4.68025 5.95702 4.40323 5.95702 4.23238 6.12787C4.06153 6.29873 4.06153 6.5757 4.23238 6.74656L5.10736 7.62156C5.18943 7.70363 5.30073 7.74972 5.41676 7.74972C5.53278 7.74972 5.64408 7.70363 5.7261 7.62156L7.76776 5.57989Z",
+              fill: "#F9F9F9"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "defs", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "clipPath", { id: "clip0_1_2", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "rect", { width: "12", height: "12", fill: "white" }) }) })
+      ]
+    }
+  );
+}
+
+
+
+exports.NonagonCheckmark = NonagonCheckmark;

package/dist/chunk-5P25HFMG.cjs

@@ -0,0 +1,26 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/icons/ChevronLeft.tsx
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+var ChevronLeft = () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  "svg",
+  {
+    width: "100%",
+    height: "100%",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "path",
+      {
+        d: "M15 20L7 12L15 4",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  }
+);
+
+
+
+exports.ChevronLeft = ChevronLeft;

package/dist/chunk-5WZ7X43P.cjs

@@ -0,0 +1,351 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _chunk46AVXTFOcjs = require('./chunk-46AVXTFO.cjs');
+
+
+var _chunkCRVO2CALcjs = require('./chunk-CRVO2CAL.cjs');
+
+
+var _chunkV74OSV6Ncjs = require('./chunk-V74OSV6N.cjs');
+
+
+var _chunkQR6XKKRKcjs = require('./chunk-QR6XKKRK.cjs');
+
+
+
+var _chunkJ4BWIY7Mcjs = require('./chunk-J4BWIY7M.cjs');
+
+
+var _chunkZJTRXOA5cjs = require('./chunk-ZJTRXOA5.cjs');
+
+
+
+var _chunkH24ZXPN3cjs = require('./chunk-H24ZXPN3.cjs');
+
+
+var _chunkXZG2GZWIcjs = require('./chunk-XZG2GZWI.cjs');
+
+
+var _chunk6VA4SAHQcjs = require('./chunk-6VA4SAHQ.cjs');
+
+
+var _chunkUEG2PUK7cjs = require('./chunk-UEG2PUK7.cjs');
+
+
+var _chunkCB3IFR2Xcjs = require('./chunk-CB3IFR2X.cjs');
+
+
+
+var _chunkMNAZ4BDQcjs = require('./chunk-MNAZ4BDQ.cjs');
+
+
+var _chunkKW3JYLRIcjs = require('./chunk-KW3JYLRI.cjs');
+
+
+var _chunkKSKKC6C2cjs = require('./chunk-KSKKC6C2.cjs');
+
+
+var _chunkLKKJVJCGcjs = require('./chunk-LKKJVJCG.cjs');
+
+// src/components/PageSection/PageSection.tsx
+var _react = require('@emotion/react');
+var _styled = require('@emotion/styled'); var _styled2 = _interopRequireDefault(_styled);
+var _react3 = require('react');
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+function PageSection({
+  children,
+  title,
+  sectionId,
+  headerOffset = 0
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, StyledPageSection, { scrollMarginTop: headerOffset + _chunk46AVXTFOcjs.pageSectionScrollOffset, children: [
+    title ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkH24ZXPN3cjs.Heading, { type: "h3", id: sectionId, mt: 0, mb: 40, children: title }) : null,
+    children
+  ] });
+}
+var StyledPageSection = _styled2.default.div`
+  &:first-of-type {
+    ${_chunkKW3JYLRIcjs.bp.minSm(`
+      margin-top: 4px;
+    `)}
+  }
+
+  &:not(:first-of-type) {
+    margin-top: 72px;
+  }
+
+  h3,
+  h4 {
+    scroll-margin-top: ${({ scrollMarginTop }) => scrollMarginTop}px !important;
+  }
+`;
+var PageSectionSubheading = _chunkH24ZXPN3cjs.headingWithDefaults.call(void 0, {
+  type: "h4",
+  mb: 32
+});
+var PageSectionBoxActionColumn = ({
+  label,
+  value,
+  valueId
+}) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, StyledPageSectionBoxActionColumn, { children: [
+  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PageSectionBoxActionColumnLabel, { children: label }),
+  value ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PageSectionBoxActionColumnValue, { id: valueId, children: value }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PageSectionBoxActionColumnNoValue, { children: "Unknown" })
+] });
+var StyledPageSectionBoxActionColumn = _styled2.default.div``;
+var PageSectionBoxActionColumnLabel = _styled2.default.div`
+  color: ${_chunkKSKKC6C2cjs.colors.gray40};
+  font-weight: 500;
+  margin: 0;
+`;
+var PageSectionBoxActionColumnValue = _styled2.default.div`
+  font-weight: 700;
+  margin-bottom: 0;
+  margin-top: 6px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+var PageSectionBoxActionColumnNoValue = _styled2.default.call(void 0, 
+  PageSectionBoxActionColumnValue
+)`
+  color: ${_chunkKSKKC6C2cjs.colors.gray80};
+  font-style: italic;
+`;
+function PageSectionBoxAction({
+  dropdownItems,
+  icon,
+  isDelete = false,
+  label,
+  loading = false,
+  onClick,
+  to,
+  toParams
+}) {
+  const theme = _react.useTheme.call(void 0, );
+  return loading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXZG2GZWIcjs.Loading, { size: 12, center: false }) }) : icon ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUEG2PUK7cjs.UnstyledButton, { onClick: icon.onClick, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkCB3IFR2Xcjs.Icon, { name: icon.name, width: 12, color: "mcNeutral" }) }) }) : dropdownItems ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _chunkV74OSV6Ncjs.Dropdown,
+    {
+      button: {
+        getContent: () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkCB3IFR2Xcjs.Icon, { name: "DotGrid1x3Horizontal", width: 16 })
+      },
+      dropdownItems
+    }
+  ) : isDelete ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUEG2PUK7cjs.UnstyledButton, { css: { color: theme.mcNeutral }, onClick, children: "Delete" }) : label ? (
+    /* Extra div for proper default alignment inside flex contexts */
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkCRVO2CALcjs.TextButton,
+      {
+        leftIcon: icon,
+        text: label,
+        to,
+        toParams,
+        onClick
+      }
+    ) })
+  ) : null;
+}
+var PageSectionBoxActionRow = ({
+  title,
+  titleBadge,
+  description,
+  separator,
+  children,
+  action,
+  smFlexColumn = true
+}) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react3.Fragment, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    SPageSectionBoxActionRow,
+    {
+      separator: Boolean(separator),
+      smFlexColumn: Boolean(smFlexColumn),
+      children: [
+        title ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, PageSectionBoxTitle, { children: [
+            title,
+            titleBadge ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkJ4BWIY7Mcjs.Badge, { content: titleBadge, ml: 4 }) : null
+          ] }),
+          description ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PageSectionBoxDescription, { children: description }) : null
+        ] }) : null,
+        children,
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PageSectionBoxAction, _chunkLKKJVJCGcjs.__spreadValues.call(void 0, {}, action))
+      ]
+    }
+  ) });
+};
+var SPageSectionBoxActionRow = _styled2.default.div`
+  display: flex;
+  gap: 12px;
+  align-items: top;
+  flex-direction: row;
+  justify-content: space-between;
+
+  & + & {
+    margin-top: 32px;
+  }
+
+  ${({ smFlexColumn }) => smFlexColumn ? _chunkKW3JYLRIcjs.bp.sm(`flex-direction: column;`) : ""}
+
+  &:has(> ${StyledPageSectionBoxActionColumn}) {
+    ${_chunk6VA4SAHQcjs.select.call(void 0, StyledPageSectionBoxActionColumn)} {
+      width: 150px;
+    }
+    ${_chunkKW3JYLRIcjs.bp.maxMd(`
+      ${_chunk6VA4SAHQcjs.select.call(void 0, StyledPageSectionBoxActionColumn)} {
+        width: auto;
+      }
+    `)}
+  }
+
+  ${({ separator, theme }) => separator && `
+      border-top: 1px solid;
+      ${_chunkQR6XKKRKcjs.standardBorderColor.call(void 0, { theme }).styles};
+      padding-top: 32px;
+    `}
+`;
+var PageSectionBoxColumn = _styled2.default.div``;
+var PageSectionBoxRow = _styled2.default.div`
+  display: grid;
+  grid-template-columns: repeat(
+    auto-fit,
+    minmax(215px, 1fr)
+  ); /* This creates as many columns as can fit, each at least 150px wide */
+`;
+function PageSectionBox({
+  action,
+  description,
+  children
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, StyledPageSectionBox, { children: [
+    description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PageSectionBoxDescription, { children: _chunkZJTRXOA5cjs.toReactNodes.call(void 0, description) }),
+    children,
+    (action == null ? void 0 : action.label) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: { marginTop: "12px" }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PageSectionBoxAction, _chunkLKKJVJCGcjs.__spreadValues.call(void 0, {}, action)) }) : null
+  ] });
+}
+var StyledPageSectionBox = _styled2.default.div`
+  & + & {
+    margin-top: 32px;
+  }
+
+  & > ${PageSectionBoxRow}, & {
+    border: 1px solid;
+    ${_chunkQR6XKKRKcjs.standardBorderColor}
+  }
+
+  ${_chunkMNAZ4BDQcjs.standardBorderRadius.call(void 0, 8)}
+  padding: 16px;
+
+  /* PageSectionBoxRow and PageSectionBoxColumn manage their own borders: */
+  &:has(> ${PageSectionBoxRow}) {
+    border: none;
+    padding: 0;
+    ${_chunkMNAZ4BDQcjs.standardBorderRadius.call(void 0, 0)}
+  }
+
+  & > ${PageSectionBoxRow} {
+    &:first-of-type {
+      ${_chunkMNAZ4BDQcjs.standardBorderRadius.call(void 0, [12, 12, 0, 0])}
+    }
+
+    &:last-of-type {
+      ${_chunkMNAZ4BDQcjs.standardBorderRadius.call(void 0, [0, 0, 12, 12])}
+    }
+
+    &:only-of-type {
+      ${_chunkMNAZ4BDQcjs.standardBorderRadius.call(void 0, 12)}
+    }
+
+    &:not(:last-of-type) {
+      border-bottom: 0;
+    }
+
+    ${PageSectionBoxColumn} {
+      padding: 32px;
+      ${_chunkKW3JYLRIcjs.bp.sm(`padding: 16px;`)}
+      &:not(:first-of-type) {
+        border-left: solid 1px;
+        ${_chunkQR6XKKRKcjs.standardBorderColor}
+      }
+    }
+
+    ${({ theme }) => _chunkKW3JYLRIcjs.bp.maxMd(`
+        grid-template-columns: none;
+        ${_chunk6VA4SAHQcjs.select.call(void 0, PageSectionBoxColumn)} {
+          &:not(:first-of-type) {
+            border-left: 0 !important;
+            border-top: solid 1px;
+            ${_chunkQR6XKKRKcjs.standardBorderColor.call(void 0, { theme }).styles};
+          }
+        }
+      `)}
+  }
+`;
+var PageSectionBoxTitle = _styled2.default.div`
+  display: flex;
+  align-items: center;
+  font-size: ${({ lg }) => lg ? 14 : 12}px;
+  font-weight: 600;
+  line-height: ${({ lg }) => _chunkMNAZ4BDQcjs.standardLineHeightEms * (lg ? 14 : 12) + _chunkJ4BWIY7Mcjs.badgeSmVPadding * 2}px;
+`;
+var PageSectionBoxDescription = _styled2.default.div`
+  color: ${({ theme }) => theme.mcNeutral};
+  ${PageSectionBoxTitle} + & {
+    margin-top: 6px;
+  }
+`;
+var gapPx = 24;
+var PageSectionRow = _styled2.default.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${gapPx}px;
+
+  ${_chunkKW3JYLRIcjs.bp.minSm(`
+    flex-direction: row;
+  `)}
+
+  margin-top: 40px;
+  &:first-of-type {
+    margin-top: 0;
+  }
+`;
+var PageSectionRowSubSection = _styled2.default.div`
+  box-sizing: border-box;
+  width: 100%;
+
+  &:first-of-type {
+    margin-right: 0px;
+  }
+
+  &:last-of-type {
+    margin-left: 0px;
+    margin-top: ${gapPx}px;
+  }
+
+  ${StyledPageSectionBox} + ${StyledPageSectionBox} {
+    /* Less margin for boxes within a single SubSection: */
+    margin-top: 16px;
+  }
+
+  ${_chunkKW3JYLRIcjs.bp.minSm(`
+    width: calc(50% - ${gapPx / 2}px);
+
+    &:last-of-type {
+      margin-top: 0;
+    }
+  `)}
+
+  ${({ fullWidth }) => fullWidth ? "width: 100% !important;" : ""}
+`;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+exports.PageSection = PageSection; exports.PageSectionSubheading = PageSectionSubheading; exports.PageSectionBoxActionColumn = PageSectionBoxActionColumn; exports.PageSectionBoxActionRow = PageSectionBoxActionRow; exports.PageSectionBoxColumn = PageSectionBoxColumn; exports.PageSectionBoxRow = PageSectionBoxRow; exports.PageSectionBox = PageSectionBox; exports.StyledPageSectionBox = StyledPageSectionBox; exports.PageSectionBoxTitle = PageSectionBoxTitle; exports.PageSectionBoxDescription = PageSectionBoxDescription; exports.PageSectionRow = PageSectionRow; exports.PageSectionRowSubSection = PageSectionRowSubSection;