@lightsparkdev/ui 1.0.17 → 1.1.1

package/dist/chunk-C75BQCBI.cjs

@@ -0,0 +1,33 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/icons/central/QrCode.tsx
+var _jsxruntime = require('@emotion/react/jsx-runtime');
+function QrCode({
+  strokeWidth = "2",
+  strokeLinecap = "round",
+  strokeLinejoin = "round"
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "path",
+        {
+          d: "M13.75 13.75V16.25H16.25M17.75 13.75H20.25M20.25 17.75H17.75V20.25M13.75 19.75V20.25M4.75 20.25H9.25C9.80228 20.25 10.25 19.8023 10.25 19.25V14.75C10.25 14.1977 9.80228 13.75 9.25 13.75H4.75C4.19772 13.75 3.75 14.1977 3.75 14.75V19.25C3.75 19.8023 4.19772 20.25 4.75 20.25ZM14.75 10.25H19.25C19.8023 10.25 20.25 9.80228 20.25 9.25V4.75C20.25 4.19772 19.8023 3.75 19.25 3.75H14.75C14.1977 3.75 13.75 4.19772 13.75 4.75V9.25C13.75 9.80228 14.1977 10.25 14.75 10.25ZM4.75 10.25H9.25C9.80228 10.25 10.25 9.80228 10.25 9.25V4.75C10.25 4.19772 9.80228 3.75 9.25 3.75H4.75C4.19772 3.75 3.75 4.19772 3.75 4.75V9.25C3.75 9.80228 4.19772 10.25 4.75 10.25Z",
+          stroke: "currentColor",
+          strokeWidth,
+          strokeLinecap,
+          strokeLinejoin,
+          vectorEffect: "non-scaling-stroke"
+        }
+      )
+    }
+  );
+}
+
+
+
+exports.QrCode = QrCode;

package/dist/chunk-CBZWRFNU.cjs

@@ -0,0 +1,256 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunkIO33D4VHcjs = require('./chunk-IO33D4VH.cjs');
+
+
+var _chunkWNB3MZJOcjs = require('./chunk-WNB3MZJO.cjs');
+
+
+var _chunk4FRWKWXJcjs = require('./chunk-4FRWKWXJ.cjs');
+
+
+var _chunkYEN2IQ6Zcjs = require('./chunk-YEN2IQ6Z.cjs');
+
+
+var _chunkMEPSDTIKcjs = require('./chunk-MEPSDTIK.cjs');
+
+
+var _chunkJ26VDYFVcjs = require('./chunk-J26VDYFV.cjs');
+
+
+var _chunkQV4YFGGGcjs = require('./chunk-QV4YFGGG.cjs');
+
+
+var _chunkV6U2YSQUcjs = require('./chunk-V6U2YSQU.cjs');
+
+
+
+var _chunkZ6EUSUADcjs = require('./chunk-Z6EUSUAD.cjs');
+
+// src/hooks/useNumberInput/useNumberInput.tsx
+var _react = require('react');
+function useNumberInput({
+  allowDecimals = true,
+  allowNegativeValue = false,
+  decimalsLimit,
+  maxLength: userMaxLength,
+  value: userValue,
+  onChange,
+  fixedDecimalLength,
+  decimalScale,
+  prefix,
+  suffix,
+  intlConfig,
+  step,
+  min,
+  max,
+  disableGroupSeparators = false,
+  disableAbbreviations = false,
+  decimalSeparator: _decimalSeparator,
+  groupSeparator: _groupSeparator,
+  transformRawValue,
+  formatValueOnBlur = true,
+  ref
+}) {
+  if (_decimalSeparator && _chunkIO33D4VHcjs.isNumber.call(void 0, _decimalSeparator)) {
+    throw new Error("decimalSeparator cannot be a number");
+  }
+  if (_groupSeparator && _chunkIO33D4VHcjs.isNumber.call(void 0, _groupSeparator)) {
+    throw new Error("groupSeparator cannot be a number");
+  }
+  const localeConfig = _react.useMemo.call(void 0, () => _chunkQV4YFGGGcjs.getLocaleConfig.call(void 0, intlConfig), [intlConfig]);
+  const decimalSeparator = _decimalSeparator || localeConfig.decimalSeparator || "";
+  const groupSeparator = _groupSeparator || localeConfig.groupSeparator || "";
+  if (decimalSeparator && groupSeparator && decimalSeparator === groupSeparator && disableGroupSeparators === false) {
+    throw new Error("decimalSeparator cannot be the same as groupSeparator");
+  }
+  const formatValueOptions = {
+    decimalSeparator,
+    groupSeparator,
+    disableGroupSeparators,
+    intlConfig,
+    prefix: prefix || localeConfig.prefix,
+    suffix
+  };
+  const cleanValueOptions = {
+    decimalSeparator,
+    groupSeparator,
+    allowDecimals,
+    decimalsLimit: decimalsLimit || fixedDecimalLength || 2,
+    allowNegativeValue,
+    disableAbbreviations,
+    prefix: prefix || localeConfig.prefix,
+    transformRawValue
+  };
+  const [stateValue, setStateValue] = _react.useState.call(void 0, 
+    () => userValue != null ? _chunkJ26VDYFVcjs.formatValue.call(void 0, _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, formatValueOptions), {
+      decimalScale,
+      value: String(userValue)
+    })) : ""
+  );
+  const [dirty, setDirty] = _react.useState.call(void 0, false);
+  const [cursor, setCursor] = _react.useState.call(void 0, 0);
+  const [changeCount, setChangeCount] = _react.useState.call(void 0, 0);
+  const [lastKeyStroke, setLastKeyStroke] = _react.useState.call(void 0, null);
+  const processChange = (value, selectionStart) => {
+    setDirty(true);
+    const { modifiedValue, cursorPosition } = _chunk4FRWKWXJcjs.repositionCursor.call(void 0, {
+      selectionStart,
+      value,
+      lastKeyStroke,
+      stateValue,
+      groupSeparator
+    });
+    const stringValue = _chunkYEN2IQ6Zcjs.cleanValue.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {
+      value: modifiedValue
+    }, cleanValueOptions));
+    if (userMaxLength && stringValue.replace(/-/g, "").length > userMaxLength) {
+      return;
+    }
+    if (stringValue === "" || stringValue === "-" || stringValue === decimalSeparator) {
+      onChange && onChange("", {
+        float: null,
+        formatted: "",
+        value: ""
+      });
+      setStateValue(stringValue);
+      setCursor(1);
+      return;
+    }
+    const stringValueWithoutSeparator = decimalSeparator ? stringValue.replace(decimalSeparator, ".") : stringValue;
+    const numberValue = parseFloat(stringValueWithoutSeparator);
+    const formattedValue = _chunkJ26VDYFVcjs.formatValue.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {
+      value: stringValue
+    }, formatValueOptions));
+    if (cursorPosition != null) {
+      let newCursor = cursorPosition + (formattedValue.length - value.length);
+      newCursor = newCursor <= 0 ? prefix ? prefix.length : 0 : newCursor;
+      setCursor(newCursor);
+      setChangeCount(changeCount + 1);
+    }
+    setStateValue(formattedValue);
+    if (onChange) {
+      const values = {
+        float: numberValue,
+        formatted: formattedValue,
+        value: stringValue
+      };
+      onChange(stringValue, values);
+    }
+  };
+  const handleOnChange = (event) => {
+    const {
+      target: { value, selectionStart }
+    } = event;
+    processChange(value, selectionStart);
+  };
+  const handleOnFocus = (event) => {
+    return stateValue ? stateValue.length : 0;
+  };
+  const handleOnBlur = (event) => {
+    const {
+      target: { value }
+    } = event;
+    const valueOnly = _chunkYEN2IQ6Zcjs.cleanValue.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, { value }, cleanValueOptions));
+    if (valueOnly === "-" || valueOnly === decimalSeparator || !valueOnly) {
+      setStateValue("");
+      return;
+    }
+    const fixedDecimals = _chunkMEPSDTIKcjs.fixedDecimalValue.call(void 0, 
+      valueOnly,
+      decimalSeparator,
+      fixedDecimalLength
+    );
+    const newValue = _chunkWNB3MZJOcjs.padTrimValue.call(void 0, 
+      fixedDecimals,
+      decimalSeparator,
+      decimalScale !== void 0 ? decimalScale : fixedDecimalLength
+    );
+    const numberValue = parseFloat(newValue.replace(decimalSeparator, "."));
+    const formattedValue = _chunkJ26VDYFVcjs.formatValue.call(void 0, _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, formatValueOptions), {
+      value: newValue
+    }));
+    if (onChange && formatValueOnBlur) {
+      onChange(newValue, {
+        float: numberValue,
+        formatted: formattedValue,
+        value: newValue
+      });
+    }
+    setStateValue(formattedValue);
+  };
+  const handleOnKeyDown = (event) => {
+    const { key } = event;
+    setLastKeyStroke(key);
+    if (step && (key === "ArrowUp" || key === "ArrowDown")) {
+      event.preventDefault();
+      setCursor(stateValue.length);
+      const currentValue = parseFloat(
+        userValue != null ? String(userValue).replace(decimalSeparator, ".") : _chunkYEN2IQ6Zcjs.cleanValue.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, { value: stateValue }, cleanValueOptions))
+      ) || 0;
+      const newValue = key === "ArrowUp" ? currentValue + step : currentValue - step;
+      if (min !== void 0 && newValue < Number(min)) {
+        return;
+      }
+      if (max !== void 0 && newValue > Number(max)) {
+        return;
+      }
+      const fixedLength = String(step).includes(".") ? Number(String(step).split(".")[1].length) : void 0;
+      processChange(
+        String(fixedLength ? newValue.toFixed(fixedLength) : newValue).replace(
+          ".",
+          decimalSeparator
+        )
+      );
+    }
+  };
+  const handleOnKeyUp = (event) => {
+    const {
+      key,
+      currentTarget: { selectionStart }
+    } = event;
+    if (key !== "ArrowUp" && key !== "ArrowDown" && stateValue !== "-") {
+      const suffix2 = _chunkV6U2YSQUcjs.getSuffix.call(void 0, stateValue, {
+        groupSeparator,
+        decimalSeparator
+      });
+      if (suffix2 && selectionStart && selectionStart > stateValue.length - suffix2.length) {
+        if (ref && ref.current) {
+          const newCursor = stateValue.length - suffix2.length;
+          ref.current.setSelectionRange(newCursor, newCursor);
+        }
+      }
+    }
+  };
+  _react.useEffect.call(void 0, () => {
+    if (userValue == null) {
+      setStateValue("");
+    }
+  }, [userValue]);
+  _react.useEffect.call(void 0, () => {
+    if (dirty && stateValue !== "-" && ref && ref.current && document.activeElement === ref.current) {
+      ref.current.setSelectionRange(cursor, cursor);
+    }
+  }, [stateValue, cursor, ref, dirty, changeCount]);
+  const getRenderValue = () => {
+    if (userValue != null && stateValue !== "-" && (!decimalSeparator || stateValue !== decimalSeparator)) {
+      return _chunkJ26VDYFVcjs.formatValue.call(void 0, _chunkZ6EUSUADcjs.__spreadProps.call(void 0, _chunkZ6EUSUADcjs.__spreadValues.call(void 0, {}, formatValueOptions), {
+        decimalScale: dirty ? void 0 : decimalScale,
+        value: String(userValue)
+      }));
+    }
+    return stateValue;
+  };
+  return {
+    getRenderValue,
+    handleOnChange,
+    handleOnBlur,
+    handleOnFocus,
+    handleOnKeyDown,
+    handleOnKeyUp
+  };
+}
+
+
+
+exports.useNumberInput = useNumberInput;

package/dist/chunk-CE3IOBBS.js

@@ -0,0 +1,46 @@
+import {
+  getPropDefaultsBase
+} from "./chunk-LEMT5P3Z.js";
+import {
+  typographyStyles
+} from "./chunk-YW4BJCOL.js";
+import {
+  select
+} from "./chunk-YMNSXZ5D.js";
+import {
+  applyTypography
+} from "./chunk-J44WQFQT.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-W7FAWX6T.js";
+
+// src/components/typography/base/Headline.tsx
+import styled from "@emotion/styled";
+import { jsx } from "@emotion/react/jsx-runtime";
+var headlineElements = ["h1", "h2", "h3", "h4", "h5", "h6"];
+function HeadlineString(props) {
+  const _a = getPropDefaults(props), { children } = _a, rest = __objRest(_a, ["children"]);
+  return /* @__PURE__ */ jsx(StyledHeadline, __spreadProps(__spreadValues({}, rest), { children }));
+}
+function getPropDefaults(props) {
+  return getPropDefaultsBase(props, { as: props.heading || "h1" });
+}
+var StyledHeadline = styled.span`
+  ${({ theme, size, colorProp }) => applyTypography(theme, "Headline", size, colorProp)}
+  ${typographyStyles}
+`;
+function headlineSelector(heading) {
+  return `${heading}${select(StyledHeadline)}`;
+}
+var ALL_HEADLINE_SELECTORS = headlineElements.map(headlineSelector).join(",");
+
+export {
+  headlineElements,
+  HeadlineString,
+  getPropDefaults,
+  StyledHeadline,
+  headlineSelector,
+  ALL_HEADLINE_SELECTORS
+};

package/dist/chunk-CENFKSI4.js

@@ -0,0 +1,358 @@
+import {
+  pageSectionScrollOffset
+} from "./chunk-JJC2AUQ3.js";
+import {
+  TextButton
+} from "./chunk-GMBFE2Y7.js";
+import {
+  Dropdown
+} from "./chunk-VUXLRZHO.js";
+import {
+  standardBorderColor
+} from "./chunk-UH2H3Y7Y.js";
+import {
+  Heading,
+  headingWithDefaults
+} from "./chunk-KDCMTDLB.js";
+import {
+  Loading
+} from "./chunk-WW3KFUFD.js";
+import {
+  UnstyledButton
+} from "./chunk-3HIDFTSK.js";
+import {
+  Badge,
+  badgeSmVPadding
+} from "./chunk-E62AL352.js";
+import {
+  toReactNodes
+} from "./chunk-BDL3A6DZ.js";
+import {
+  Icon
+} from "./chunk-YTKSEJHA.js";
+import {
+  standardBorderRadius,
+  standardLineHeightEms
+} from "./chunk-ANZUTQRP.js";
+import {
+  select
+} from "./chunk-YMNSXZ5D.js";
+import {
+  bp
+} from "./chunk-JSGRNWSB.js";
+import {
+  colors
+} from "./chunk-WAGTMEWB.js";
+import {
+  __spreadValues
+} from "./chunk-W7FAWX6T.js";
+
+// src/components/PageSection/PageSection.tsx
+import { useTheme } from "@emotion/react";
+import styled from "@emotion/styled";
+import { Fragment } from "react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+function PageSection({
+  children,
+  title,
+  sectionId,
+  headerOffset = 0
+}) {
+  return /* @__PURE__ */ jsxs(StyledPageSection, { scrollMarginTop: headerOffset + pageSectionScrollOffset, children: [
+    title ? /* @__PURE__ */ jsx(Heading, { type: "h3", id: sectionId, mt: 0, mb: 40, children: title }) : null,
+    children
+  ] });
+}
+var StyledPageSection = styled.div`
+  &:first-of-type {
+    ${bp.minSm(`
+      margin-top: 4px;
+    `)}
+  }
+
+  &:not(:first-of-type) {
+    margin-top: 72px;
+  }
+
+  h3,
+  h4 {
+    scroll-margin-top: ${({ scrollMarginTop }) => scrollMarginTop}px !important;
+  }
+`;
+var PageSectionSubheading = headingWithDefaults({
+  type: "h4",
+  mb: 32
+});
+var PageSectionBoxActionColumn = ({
+  label,
+  value,
+  valueId
+}) => /* @__PURE__ */ jsxs(StyledPageSectionBoxActionColumn, { children: [
+  /* @__PURE__ */ jsx(PageSectionBoxActionColumnLabel, { children: label }),
+  value ? /* @__PURE__ */ jsx(PageSectionBoxActionColumnValue, { id: valueId, children: value }) : /* @__PURE__ */ jsx(PageSectionBoxActionColumnNoValue, { children: "Unknown" })
+] });
+var StyledPageSectionBoxActionColumn = styled.div``;
+var PageSectionBoxActionColumnLabel = styled.div`
+  color: ${colors.gray40};
+  font-weight: 500;
+  margin: 0;
+`;
+var PageSectionBoxActionColumnValue = styled.div`
+  font-weight: 700;
+  margin-bottom: 0;
+  margin-top: 6px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+var PageSectionBoxActionColumnNoValue = styled(
+  PageSectionBoxActionColumnValue
+)`
+  color: ${colors.gray80};
+  font-style: italic;
+`;
+function PageSectionBoxAction({
+  dropdownItems,
+  icon,
+  isDelete = false,
+  label,
+  loading = false,
+  onClick,
+  to,
+  toParams
+}) {
+  const theme = useTheme();
+  return loading ? /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Loading, { size: 12, center: false }) }) : icon ? /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(UnstyledButton, { onClick: icon.onClick, children: /* @__PURE__ */ jsx(Icon, { name: icon.name, width: 12, color: "mcNeutral" }) }) }) : dropdownItems ? /* @__PURE__ */ jsx(
+    Dropdown,
+    {
+      button: {
+        getContent: () => /* @__PURE__ */ jsx(Icon, { name: "DotGrid1x3Horizontal", width: 16 })
+      },
+      dropdownItems
+    }
+  ) : isDelete ? /* @__PURE__ */ jsx(UnstyledButton, { css: { color: theme.mcNeutral }, onClick, children: "Delete" }) : label ? (
+    /* Extra div for proper default alignment inside flex contexts */
+    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+      TextButton,
+      {
+        leftIcon: icon,
+        text: label,
+        to,
+        toParams,
+        onClick
+      }
+    ) })
+  ) : null;
+}
+var PageSectionBoxActionRow = ({
+  title,
+  titleBadge,
+  titleBadgeKind = "default",
+  titleRightContent,
+  description,
+  separator,
+  children,
+  action,
+  smFlexColumn = true
+}) => {
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
+    SPageSectionBoxActionRow,
+    {
+      separator: Boolean(separator),
+      smFlexColumn: Boolean(smFlexColumn),
+      children: [
+        title ? /* @__PURE__ */ jsxs("div", { css: { flex: 1 }, children: [
+          /* @__PURE__ */ jsxs(PageSectionBoxTitle, { children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              title,
+              titleBadge ? /* @__PURE__ */ jsx(Badge, { content: titleBadge, ml: 4, kind: titleBadgeKind }) : null
+            ] }),
+            titleRightContent
+          ] }),
+          description ? /* @__PURE__ */ jsx(PageSectionBoxDescription, { children: description }) : null
+        ] }) : null,
+        children,
+        /* @__PURE__ */ jsx(PageSectionBoxAction, __spreadValues({}, action))
+      ]
+    }
+  ) });
+};
+var SPageSectionBoxActionRow = styled.div`
+  display: flex;
+  gap: 12px;
+  align-items: top;
+  flex-direction: row;
+  justify-content: space-between;
+
+  & + & {
+    margin-top: 32px;
+  }
+
+  ${({ smFlexColumn }) => smFlexColumn ? bp.sm(`flex-direction: column;`) : ""}
+
+  &:has(> ${StyledPageSectionBoxActionColumn}) {
+    ${select(StyledPageSectionBoxActionColumn)} {
+      width: 150px;
+    }
+    ${bp.maxMd(`
+      ${select(StyledPageSectionBoxActionColumn)} {
+        width: auto;
+      }
+    `)}
+  }
+
+  ${({ separator, theme }) => separator && `
+      border-top: 1px solid;
+      ${standardBorderColor({ theme }).styles};
+      padding-top: 32px;
+    `}
+`;
+var PageSectionBoxColumn = styled.div``;
+var PageSectionBoxRow = styled.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__ */ jsxs(StyledPageSectionBox, { children: [
+    description && /* @__PURE__ */ jsx(PageSectionBoxDescription, { children: toReactNodes(description) }),
+    children,
+    (action == null ? void 0 : action.label) ? /* @__PURE__ */ jsx("div", { css: { marginTop: "12px" }, children: /* @__PURE__ */ jsx(PageSectionBoxAction, __spreadValues({}, action)) }) : null
+  ] });
+}
+var StyledPageSectionBox = styled.div`
+  & + & {
+    margin-top: 32px;
+  }
+
+  & > ${PageSectionBoxRow}, & {
+    border: 1px solid;
+    ${standardBorderColor}
+  }
+
+  ${standardBorderRadius(8)}
+  padding: 16px;
+
+  /* PageSectionBoxRow and PageSectionBoxColumn manage their own borders: */
+  &:has(> ${PageSectionBoxRow}) {
+    border: none;
+    padding: 0;
+    ${standardBorderRadius(0)}
+  }
+
+  & > ${PageSectionBoxRow} {
+    &:first-of-type {
+      ${standardBorderRadius([12, 12, 0, 0])}
+    }
+
+    &:last-of-type {
+      ${standardBorderRadius([0, 0, 12, 12])}
+    }
+
+    &:only-of-type {
+      ${standardBorderRadius(12)}
+    }
+
+    &:not(:last-of-type) {
+      border-bottom: 0;
+    }
+
+    ${PageSectionBoxColumn} {
+      padding: 32px;
+      ${bp.sm(`padding: 16px;`)}
+      &:not(:first-of-type) {
+        border-left: solid 1px;
+        ${standardBorderColor}
+      }
+    }
+
+    ${({ theme }) => bp.maxMd(`
+        grid-template-columns: none;
+        ${select(PageSectionBoxColumn)} {
+          &:not(:first-of-type) {
+            border-left: 0 !important;
+            border-top: solid 1px;
+            ${standardBorderColor({ theme }).styles};
+          }
+        }
+      `)}
+  }
+`;
+var PageSectionBoxTitle = styled.div`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  justify-content: space-between;
+  font-size: ${({ lg }) => lg ? 14 : 12}px;
+  font-weight: 600;
+  line-height: ${({ lg }) => standardLineHeightEms * (lg ? 14 : 12) + badgeSmVPadding * 2}px;
+`;
+var PageSectionBoxDescription = styled.div`
+  color: ${({ theme }) => theme.mcNeutral};
+  ${PageSectionBoxTitle} + & {
+    margin-top: 6px;
+  }
+`;
+var gapPx = 24;
+var PageSectionRow = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${gapPx}px;
+
+  ${bp.minSm(`
+    flex-direction: row;
+  `)}
+
+  margin-top: 40px;
+  &:first-of-type {
+    margin-top: 0;
+  }
+`;
+var PageSectionRowSubSection = styled.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;
+  }
+
+  ${bp.minSm(`
+    width: calc(50% - ${gapPx / 2}px);
+
+    &:last-of-type {
+      margin-top: 0;
+    }
+  `)}
+
+  ${({ fullWidth }) => fullWidth ? "width: 100% !important;" : ""}
+`;
+
+export {
+  PageSection,
+  PageSectionSubheading,
+  PageSectionBoxActionColumn,
+  PageSectionBoxActionRow,
+  PageSectionBoxColumn,
+  PageSectionBoxRow,
+  PageSectionBox,
+  StyledPageSectionBox,
+  PageSectionBoxTitle,
+  PageSectionBoxDescription,
+  PageSectionRow,
+  PageSectionRowSubSection
+};